kdahlquist commented 10 years ago

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

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

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

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

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

kdahlquist commented 5 years ago

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

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

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

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

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

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

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

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

mihirsamdarshi commented 5 years ago

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

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

dondi commented 5 years ago

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

kdahlquist commented 5 years ago

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

dondi commented 5 years ago

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

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

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

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

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

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

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

mihirsamdarshi commented 4 years ago

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

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

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

ntran18 commented 4 hours ago

PR #1141 is merged, requesting for review

kdahlquist commented 2 hours ago

This main issue can likely be closed, but there is one persistent issue remaining that maybe can get its own issue number. png and PDF export look fine (I'm not sure what the original problem was, actually). When svg export is opened in a browser (Firefox), it looks fine. However, when opening the svg export in Adobe Illustrator, it is messed up. One of the motivations for having svg export would be to open it in Illustrator as a vector graphic that can be further manipulated. The PDF export does not achieve this because the graphic is just rendered as a bitmapped image.

kdahlquist commented 1 hour ago

Changed the name of the issue to better reflect the remaining open items. Either we need to export a PDF that has a vector graphic or an svg that can be opened by Adobe Illustrator.

dondi / GRNsight

Export vector image to pdf and/or svg in a format that can be read by Adobe Illustrator #59

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