Enable print function in our menu

[kdahlquist]

Instead of dealing with fancy export function, we will enable print function in our menu so that if the user has a print to pdf on their computer they can do it. #59

[dondi]

Main way that this is done is to use CSS media rules (e.g., there are ways to say how something should look when displayed onscreen vs. when printed). Most frequent use is to hide/show certain elements depending on print or screen media.

[dondi]

Initial exploration is OK, but now we can just do print CSS for the entire website. Remove sidebar and header for all web pages when printed.

[dondi]

Also need to look into why blank pages are appearing at the end. Experiment: change the background color to something other than white.

[kdahlquist]

Just tested beta on firefox:

• blank second page is being created
• full graph is not printing; it's getting cut off.

[NAnguiano]

So I see what's going on here, but I'm not actually fully sure how to fix it. When viewing in localhost, the graph fits perfectly on one page, though it tacks on an extra page. However, when viewing in the website, it for some reason makes the graph larger and pushes it down, causing the graph to go over two pages instead. I still am unsure why it adds on the extra page. I've tried hiding every other element on the page, and it still shows up. I've also tried restricting the height on the elements, but it still shows up the same.

Here is a graph when printed in localhost:

And the same graph when printed off the web-site. As you can see its on two pages:

Scale transforms to shrink the element also do not work. They cause the graph to appear very far to the right and push it down. As seen below when printed in localhost, it causes the graph to go onto two pages:

I'm going to continue researching, but at this point, I'm pretty stumped on why this is happening.

[dondi]

I've committed a fix to beta that, on my standalone setup, eliminates the extra blank page in Chrome and Safari. For wider-ranging tests, @NAnguiano needs to refresh the published beta to see what effect this fix has "in the wild."

[NAnguiano]

It seems to work fine in Chrome, but I'm still seeing 2 pages in Firefox when I view the printed page as a PDF in preview on my mac.

[dondi]

How does it look for you standalone? Do you get 2 pages then, or 1? It may be that more work needs to be done when the graph is framed as with github.io.

[NAnguiano]

In localhost, it's 1 page in Chrome and 2 pages in firefox.

[dondi]

OK, that is helpful...Firefox localhost was also 1 page for me, oddly enough. Looks like more digging is called for then.

[dondi]

Some updates:

• It turns out that Firefox on localhost for @NAnguiano does print in 1 page, not 2.
• Upon some examination on Nicole’s, Anu’s, and my machines, the one differentiating factor appears to be screen size: smaller screens produced 2 pages but larger screens produce just one.
• @NAnguiano to check other machines she has access to and will report back.
• @kdahlquist if you get the chance please report back on printing on your end, now that the code is completely refreshed.

[dondi]

Another possibility: when printing, assign dimensions in inches. That should make it easier to map sizes onto paper.

[kdahlquist]

So here is my report:

• My screen resolution is 1920x1080 and I have roughly a 22-24 inch screen (can't remember exact size).
• I tried printing in Firefox 32.0.2 and I still get two pages and also the graph is shifted to the right of the page and cut off on the edge. This happens whether I print in landscape or portrait orientation. It's as if there is white space reserved to print either the links or sliders, but they are not there, so there is still just white space. I tried zooming in and that did not change the appearance of the printed pages.
• I tried printing in Chrome Version 37.0.2062.120 m and I still get two pages whether I am in landscape or portrait mode. However, the graph is not cut off on the edge like it is when printing from Firefox.
• I'll unplug from my docking station and try again using just the laptop to see if there are any differences.
• Having the graph cut off is obviously much worse than printing two pages. If we can fix that part, I would be happy to punt on printing for later.

So with the laptop unplugged from the docking station/monitor, l tried printing again.

• In Firefox, there are still two pages and the graph is still cut off on the right hand side.
• In Chrome, if I print in landscape mode, I get two pages; if I print in portrait mode I get one page. Part of the difference seems to be that the graph is considerably smaller when printed in portrait mode than in landscape. The graph is not cut off at all in Chrome.
• The resolution of my laptop screen is the same 1920x1080, but it is a 14 inch monitor.

[NAnguiano]

I tested it on three different computers and here are the results. I didn't get a chance to test any of these in Landscape mode, so all of these are in Portrait mode. Once I get access to the last two computers again, I'll check how they prnt in Landscape mode.

The first computer was a laptop running Windows 7, 15" screen and 1920x1080 resolution.
On Firefox v32.0.3, it printed two pages, with the graph fully showing on the first and being blank on the second.
On chrome version 37.0.2062.122, it printed a single page.

The second computer was a PC running Windows 7, 27" screen and 2560 x 1440 resolution.
On Firefox v32.0.3, it printed a single page.
On chrome version 37.0.2062.122, it printed a single page.

The last computer was a laptop running Windows 7, 15" screen and 1366x768 resolution.
On Firefox v32.0.3, it printed two pages, with the graph cut off on the first and being blank on the second
On Chrome v37.0.2062.122, it printed two pages, with the graph fully showing on the first and being blank on the second.

[kdahlquist]

Approach:

• combination of scaling and inch-based sizing of SVG
• possibility that we have a whole different SVG for printing; see if jquery clone will make this easy.

[kdahlquist]

If the minimum width is still active at print, could be causing the print problem (#146).

[dondi]

Checked the code and can confirm that there is a min-width: 1200px attached to the iframe displaying the graph. However I was unable to replicate the two-page printout on my copy of Firefox (tried both on my 11" laptop and bigger-screened desktop), so chose not to proceed because I wouldn't have been able to check whether things worked.

[NAnguiano]

The iFrame no longer has a min-width due to the bounding box being fixed. While for me on all of my computers the graph now only prints a single page in both Firefox and Chrome, the graph is still heavily cut off in firefox. I used jQuery clone to create a new instance of the graph and attempted to print only that new instance, and it didn't appear to make any difference (though the arrowheads disappeared when the graph was printed in Firefox). I'm not certain anything in the iFrame is causing the problem, because the Firefox cutoff problem is also visible when attempting to print the graph through localhost.

Something weird is going on with the way firefox prints when compared to the way google chrome prints. In Firefox, the graph is shifted heavily over to the right for some weird reason. When I applied a scale transform, it became pretty obvious the difference between how they print (ignore how tiny the graph is, I applied a scale transform that shrank it a little too much):

This is how it prints in Chrome

This is how it prints in Firefox

The graph in firefox appears to be larger, centered vertically, and shifted over to the right. The graph in chrome is smaller, not vertically centered, and is horizontally centered. I'm a little stumped on where to go from here.

[kdahlquist]

We two workarounds that we need to add to the documentation page:

• Print in chrome
• Turn on size to fit switch in page setup in Firefox browser.

After the change is made to the documentation, let's just close this issue.

[kdahlquist]

OK--here is some language to put in the Documentation page:

Replace the last bullet point of section three with:

To print a graph, select the menu item File > Print. Mac users can utilize native print to PDF function available from their operating system to print the graph to a PDF file. Windows users will need to have the full version of Adobe Acrobat (or other "print to PDF" utility) to print graphs to a PDF file. The Print menu item is disabled until a gene regulatory network graph is loaded. There is a known bug when GRNsight is used with Firefox browsers where the side of the graph gets cut off. This is an issue with Firefox that we cannot solve at this time. There are two workarounds. First, in Firefox, go to the menu item File > Page Setup and check the box Shrink to fit Page Width. Second, you can ues the Chrome browser to print to PDF.

[NAnguiano]

I went ahead and replaced the last bullet point with that text. Reassigning for review.

[kdahlquist]

I just noticed that one of the sentences has an awkward phrase in it (my fault for not catching this sooner). Replace the first two sentences of that bullet point with:

To print a graph, select the menu item File > Print. Mac users can utilize the native print to PDF function available from their operating system to print the graph to a PDF file.

[anuvarsh]

Just switched out those two sentences with the revised version above. Reassigning for review.

[kdahlquist]

Confirmed change and am closing.