search

dondi / GRNsight

Web app and service for modeling and visualizing gene regulatory networks.
http://dondi.github.io/GRNsight
BSD 3-Clause "New" or "Revised" License
17 stars 8 forks source link

Enable print function in our menu #111

Closed kdahlquist closed 9 years ago

kdahlquist commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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

kdahlquist commented 9 years ago

Just tested beta on firefox:

NAnguiano commented 9 years ago

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: localhost_print

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

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: scaletransform_print

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

dondi commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

dondi commented 9 years ago

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

dondi commented 9 years ago

Some updates:

dondi commented 9 years ago

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

kdahlquist commented 9 years ago

So here is my report:

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

NAnguiano commented 9 years ago

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 commented 9 years ago

Approach:

kdahlquist commented 9 years ago

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

dondi commented 9 years ago

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 commented 9 years ago

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 chromeprint

This is how it prints in Firefox firefoxprint

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 commented 9 years ago

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

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

kdahlquist commented 9 years ago

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 commented 9 years ago

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

kdahlquist commented 9 years ago

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 commented 9 years ago

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

kdahlquist commented 9 years ago

Confirmed change and am closing.