Export image to jpg, pdf, svg

[kdahlquist]

We want the ability to export the graph image to a file in three formats: jpg, pdf, html. For the html version, it would be something similar to the way GenMAPP does it.

[kdahlquist]

We don't need html export until we actual have features that need html display.

Not an easy way to screenshot just the graph to jpg.

CAN use a print function to print just the graph (whatever is in the bounding box) or print to paper.

Going to create a new issue for printing to enable the last option. #111

[kdahlquist]

As per the reviewer comment on #271 we will

• explore exporting the GRNsight graph to svg (which it is natively anyway)
• to cytoscape format (already have a converter that goes the other direction)
• print to pdf
• and if there are libraries for converting svg to other graphics formats

[kdahlquist]

Reviewer 1 comment (#278):

"As it does not accept a standard input file type, the output of any other network analysis package requires conversion in to the matrix format required here. Similarly, the tool provides no export function (the option in the File menu remained stubbornly greyed out) and so I can’t take a network from GRNsight and utilise it elsewhere. I also can’t use GRNsight to convert the GRNmap format to something I might like to use elsewhere.

The authors refer to future features coming in version 2 (lines 323-329). I encourage them to consider implementing at least one standard filetype for displaying graph data within their tool. Be it sif, graphml or even gml, it would significantly increase the utility of the tool as it currently exists."

We need to look into import/export of adjacency matrix in sif, graphml, or gml format.

[mihirsamdarshi]

#791 should address this, at least for saving the graph in the PNG format

[kdahlquist]

I checked this out on beta 4.0.2 and have the following observations:

• I saw the same thing as @dondi, that the file was saved twice. I have my browser set to ask me where to save things so when I saved it the first time, that dialog opened again (or was underneath the first one).
• The suggested filename has the xlsx extension on it in front of the .png, so it reads "filename.xlsx.png". Please strip the xlsx off of the suggested filename.
• When I saved the image, the font for the node labels was changed in the png from the sans-serif font we use on the website to a serif font (like Times, but I'm not sure what font it was) in the saved image.
• I actually like having a separate menu item for Export Image. Eventually it will have different filetypes there, too. This makes it clear that you are just getting the image, not the data. The only thing I can think of would be if someone wanted to export the image and data at the same time and create two files, but I think this representation is easier to understand to separate the two functions.
• However, it does make me think that maybe we need to move the "Import" functions into the "Open" menu item as we have talked about before.
• I would still want to investigate exporting to pdf or svg where we could preserve the vector information from the image for downstream editing in Illustrator or other program. The quality of the png export is not really publication quality.

[mihirsamdarshi]

https://github.com/dondi/GRNsight/pull/791#pullrequestreview-273509008

I do see @dondi's issues too. I will try to address all of these concerns and all of @kdahlquist's concerns this weekend and create a new PR with the changes.

[dondi]

The duplicate image issue turned out to be a duplicated click handler. Moving the assignment of that click handler to the setupHandlers module, per the recently-done refactor, fixed the issue.

The save-to-file issue was using a Blob approach which unfortunately does not get automatically read by an a element. Instead, @mihirsamdarshi will try an image URL, where the SVG data is embedded directly in the string, to see how that goes.

[mihirsamdarshi]

Both SVG and PNG exports have been finished and addressed in PR #796. The concerns below from @kdahlquist's previous comment have now been addressed:

I checked this out on beta 4.0.2 and have the following observations:

• I saw the same thing as @dondi, that the file was saved twice. I have my browser set to ask me where to save things so when I saved it the first time, that dialog opened again (or was underneath the first one).
• The suggested filename has the xlsx extension on it in front of the .png, so it reads "filename.xlsx.png". Please strip the xlsx off of the suggested filename.
• When I saved the image, the font for the node labels was changed in the png from the sans-serif font we use on the website to a serif font (like Times, but I'm not sure what font it was) in the saved image

[kdahlquist]

This appears to have triggered another issue #800. When I open the SVG file in Illustrator, it is not an accurate representation of what I am seeing in GRNsight. See pair of screenshots below.

[kdahlquist]

This is still not fixed. Note that besides fixing the image, there is an issue with the filename generated ".xlsx" needs to be stripped from the .png or .svg file names.

[dondi]

Updates on issues:

• Certain SVG characteristics (such as the ones shown in Illustrator above) aren't being exported well, with issues seen in Illustrator, Edge, and Chrome to varying degrees. @mihirsamdarshi will do some research on potential library glitches or SVG features that have limited support
  • Possible lead: compare an SVG export in Chrome directly with GRNsight's own rendering and look for differences in the SVG elements
• @mihirsamdarshi is currently fixing the filename issue

[dondi]

@mihirsamdarshi will move into the PDF export after resolving SVG issues.

[mihirsamdarshi]

The SVG lines are caused because we have created our paths to be artificially wider (and invisible somehow) to make it easier for users to click on it at least (I think) according to this code: https://github.com/dondi/GRNsight/blob/40f2e93e11983944e2b6e94854e15c77efde6a69/web-client/public/js/graph.js#L440-L447

I think I can make this invisible by setting the fill to be transparent.

[mihirsamdarshi]

stroke-opacity needed to be set to 0. this issue has been addressed in PR #805

[dondi]

Nearly ready for beta re-release, pending font family fix.

[kdahlquist]

PDF is squeezed. SVG is still missing edges and labels are shifted to left.

[dondi]

Quick beta notes:

• May need to manipulate actual SVG before export in order to handle extra lines; Mihir to test on Adobe in Seaver 120 lab
• Readjust scale approach in PDF export so that the aspect ratio of the graph wins out over the page (also accommodating zoom)

[dondi]

Re: SVG manipulation (to eliminate extraneous elements not needed in the export)

• @mihirsamdarshi adapted a tree traversal routine from the New York Times GitHub repository and it generally looks correct
• However, the SVG tree is being converted into a string prior to invoking tree traversal, thus resulting in an error because strings don't have a hasChildNodes function
• @mihirsamdarshi will correct the issue and report back (also need to make sure that the SVG tree is copied so that we don't destroy the SVG graph that is on display)

[mihirsamdarshi]

I have set inline styles, and the file is exporting with some of the styles. However, a couple of problems are happening:

• The svgElement in GRNsight itself changes, even if I create a copy in the exportSvg function.
• I need to find a way to set the node text position
• I need to find a way to append the marker to the svg. I think it might be as simple as setting the .style to .attr but I am not sure

[kdahlquist]

Quick notes on these bullets:

• Make sure you are doing a deep copy
• Explore the range of options available for SVG text elements (in particular, look at alignment options)
• @mihirsamdarshi has figured out the third bullet (unresolved defs)

[mihirsamdarshi]

I have figured out the marker problem, and am doing a deep copy. However, regarding the invisible stroke of the paths in Illustrator, even changing the stroke attribute in Illustrator does not fix the problem, so I am not sure how to declare the stroke attribute in my code so that displays in Illustrator. Additionally, I have explored a number of methods to make the node text aligned including setting the x and y positions, and while this works, it seems a little hack-y instead of using text-anchor attribute. I am stumped.

[dondi]

There may be lingering issues with Illustrator SVG support, as indicated here:

https://illustrator.uservoice.com/forums/333657-illustrator-feature-requests/suggestions/31209892-fully-support-the-svg-standard

Another alternative is PDF but this also does not seem to be supported.

Third alternative is to export directly as "native" .ai format.

[dondi]

^^^^ Addendum: PDF export to be made vector-based rather than image-based.

[mihirsamdarshi]

after, further work and research, it doesn't seem to be possible to create a layered PDF. However, I am working to add the SVG directly to the PDF, but the jsPDF library keeps throwing errors. I believe that it is an error with them, but I will keep trying.

[kdahlquist]

May be necessary now to look at other libraries. Quick Google search reveals pdfkit,, svg-to-pdfkit, and svgexport, to name the top hits. It might be useful to look for specific mentions of Adobe Illustrator since that is our driving use case.

[kdahlquist]

This came up again in the question/answer period after my talk at BOSC 2020.