Thumbnail images of new pathways (post release 45) have errors

[khanspers]

New pathways submitted after release 45 have issues with the thumbnail rendering. Looks like any shape is filled in black as well as the triangle defined by elbow interactions.

[khanspers]

Another clue: Old pathways that I changed today also have the same problem. Try it by searching for the title of any recently edited pathway.

[AlexanderPico]

I'm guessing this has to do with the new SVG and how NULL fill colors are handled. Then when passed to inkscape to make the PNG, it results in black instead of transparent.

[AlexanderPico]

Here's a url to check a few of these at once:

https://www.wikipathways.org//index.php?query=carcinoma&species=Homo+sapiens&title=Special%3ASearchPathways&doSearch=1&ids=&codes=&type=query

[AlexanderPico]

If I replace fill-opacity="1" with fill-opacity="0" for all cases of fill="transparent" then the black fills on compartments clear away.

Still seeing fills on some interaction paths though....

Before:

After:

[AlexanderPico]

And the interactions were cleared by adding fill-opacity="0" to all cases where fill="transparent" was specified and fill-opacity was missing (i.e., it seems to default to "1").

After:

[ariutta]

Temporary fix in place. If you find another bad png, you can run this:

find ./ -name "*WP24_*.svg" -delete
find ./ -name "*WP24_*.png" -delete

[ariutta]

Longer term fix will be to update pvjs to have the correct fill-opacity. I'll look at that Monday.

[ariutta]

You can take a look at dev.wikipathways.org to see whether the PNGs generated are OK now. Use the "Download" option from the PathwayPage.

I cleared the cached SVG and PNG images. Now it seems we need to run a script to re-cache the images, because the Browse page isn't working. Also, there are some other bugs that seem to be happening when you follow links on the Daily_Download page.

[ariutta]

There are still some issues with Inkscape being able to interpret the SVG, e.g.,

• [ ] it ignores the dominant-baseline CSS property for text, making the text in the converted PNG a bit higher than what Chrome and FF show.
• [ ] the CSS I added fill: none makes some elements not display on the PNG, e.g., the ovals for https://dev.wikipathways.org/index.php/Pathway:WP2406.

These issues may be able to be addressed by updating these CSS files: https://github.com/wikipathways/kaavio/blob/master/src/kaavioStyleSVG.css https://github.com/wikipathways/pvjs/blob/dev/src/customStyleSVG.css

[AlexanderPico]

I make a minor edit to the Sandbox pathway on dev and then downloaded the SVG. I still see instances of fill="transparent" fill-opacity="1". As far as I can tell, these simply need to be changed to fill="transparent" fill-opacity="0". E.g., maybe to here? https://github.com/wikipathways/kaavio/blob/master/src/components/Edge.tsx#L105

Adding fill:none does not seem like a good solution, right?

[ariutta]

I'm not sure.

Here's the reason I did fill: none -- imagine a DataNode that is located under an Interaction or a Cell compartment. If a user tries to select the DataNode, they will probably actually select the Interaction or Cell compartment, because even if the fill is transparent with fill="transparent" fill-opacity="0", doesn't it still exist? In the figures above, the black fill would still exist -- it'd just be transparent instead.

There's also this CSS property that might be relevant: pointer-events: none.

[ariutta]

The change I made breaks the display of Complexes and States:

[AlexanderPico]

Right. What are you trying next?

[ariutta]

Instead of Inkscape, we could use this package: convert-svg-to-png. Since it uses headless Chromium, it should generate PNGs that look the same as our SVGs.

[ariutta]

Right. What are you trying next?

I'll create a build that uses ~fill="transparent" fill-opacity="1"~ fill="transparent" fill-opacity="0" to see whether that does what we need.

[AlexanderPico]

ok. but it should be "0"

[ariutta]

It's looking better for the PNGs now, but still not perfect, e.g., some cellular compartments are not shown, and the double lines are never displayed as double.

[ariutta]

Also, Complexes aren't showing up on the PNGs, e.g., Pathway:WP4.

[ariutta]

For both SVGs and PNGs, catalysis interactions appear to be starting some distance away from where I'd expect them to (see the opposite end from the small circle), e.g., Pathway:WP1603.

I viewed this in PathVisio, and they are actually being displayed correctly. They are attaching to Groups that don't have a background color.

[ariutta]

States still missing their circles for the PNGs, e.g., WP4.