SVG of contact maps "compatibility" issues

[yarden]

Hi,

Two quick things related to the nice new Kappa UI:

1. The Kappapp UI makes beautiful visualization of agents:

But when I save it as SVG (which is most useful for incorporating into figures as it's a vector graphic) and open the file in Illustrator it gives the error: "Text on path will be flattened" and it looks like this:

If SVG is problematic for other reasons, is it possible to output a PDF instead?

There's also some corruption happening when the visualization is saved as PNG:

2. Finally, a minor feature request: it'd be useful if there was a "Save" item (not just Export) in the "File > " menu of Kappapp so that one would be able to edit/save/run a single model multiple times all within Kappa without having to copy the model to a text editor for saving.

Thanks very much.

[aznmonkey]

Do you know what browser you were using when doing the export as png? I can't seem to reproduce the third case in chrome. Thanks!

[yarden]

@aznmonkey: Sorry, I should have clarified this in my earlier message but I am using the Mac OS X Kappa app (from here: http://www.kappalanguage.org/nightly-builds/Kappapp.app.zip)

[hmedina]

Using KaSimCloud on Firefox Win64; x64; rv:54.0, the exported svg is also not valid. The W3 markup validator claims:

    Error Line 4, Column 8914: required attribute "d" not specified

    …; stroke: steelblue; stroke-width: 2;"></path><path class="link" d="M-201.4075…

    The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

    Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

When trying to import into Illustrator CC2015, I got the same warning about elements not being importable, and that text on path will be flattened. While on the UI the agent's name is written on the arc segment with the characters' base along the arc, Illustrator defaults to aligning the characters on the arc but with horizontal bases.

A model in the UI:

The exported svg, as rendered by Illustrator (notice the orientation of the text in the agents' name) :

[aznmonkey]

I fixed the w3 validator errors. However, adobe still flattens the text that way. I'm not sure why since every other svg editor I use displays it properly... ¯_(ツ)_/¯

I'll look into it a bit more tonight, the illustrator error messages are not being very helpful though.

[yarden]

P.S. I wanted to add a related question regarding visualization: can someone explain why single sites are drawn as two circles with dotted arrows across agents (that makes it look a bit like there are two interacting intramolecular sites), and what the "Show all states" button is supposed to do?

[yarden]

@aznmonkey: could you bypass the SVG issue by outputting a PDF instead?

[aznmonkey]

@yarden the single sites are drawn as two circles due to the fact that the edges (showing the possible bonds) are located within the inner radius of the graph (the inner circles highlights which sites are connected) while the number of sites greatly outnumber the number of agents (thus the outer circles allow the sites to be displayed in an fairly organized manner along the outer edge). If you have suggestions regarding this encoding, such as changing or removing the circles, feel free to let me know :).

In regards to the show states button, it just shows/hides possible states of a site in the contact map (if it exists, which it may not if it's not defined in the model). If you look at Hector's example, the states are the arcs that extends out of the sites. This button toggles whether those arcs appear or not.

In terms of the SVG issue, I will look into if a PDF will help, however that makes it less portable thus I would prefer if I can just fix the underlying SVG issue. I have a feeling it's a bug on Adobe's end, but I have to look into it more.

[yarden]

@aznmonkey I think the visualization you have is great but that simplifying it by only having the "inner" site (in Hector's examples, the filled circles) would be more intuitive. Having two circles for each site makes it look a bit, in my opinion, like two separate sites on the same molecule that are on different sides; so in Hector's example, agent "A" kind of looks like it has four distinct sites, even though it has only two. If you kept the inner circle, you can have a dotted line going from it to other edge of agent to help the eye see the alignment with the contact map.

(It's tempting to think of key-lock type visualizations of binding sites - e.g., the one on left here: http://schoolbag.info/chemistry/mcat_biochemistry/mcat_biochemistry.files/image032.jpg - but those wouldn't generalize to binding sites that have interactions with more than two agents.)

Good point about PDF and compatibility.

[aznmonkey]

Seems like the the svg opening up in illustrator is a bug with Adobe... I will talk will Pierre to see if we can add an export as PDF option. Otherwise just open the svg in any browser and it should display properly.

Adobe forum thread (I think you need an Adobe account to view this). https://forums.adobe.com/thread/2095848

[hmedina]

About the PNG export that @yarden mentioned, I can confirm in Firefox Win64; x64; rv:54.0. The file produced looks fully white. Inspecting the file shows that all pixels have 255 for all 3 RGB values (also for alpha).

[hmedina]

About the SVG issue, now W3 validator shows 2 errors. One seems a bit tricky:

Validation Output: 2 Errors

    Error Line 4, Column 154: there is no attribute "title"

    …meet" viewBox="0 0 886.5 902.5" title="foo.png" version="1.1" xmlns="http://ww…

    ✉

    You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

    This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

    How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
    Error Line 4, Column 9204: required attribute "d" not specified

    …; stroke: steelblue; stroke-width: 2;"></path><path class="link" d="M-201.4075…

    ✉

    The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

    Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

For the first error, notice the title specifies an extension as .png. That was the name I had given the file before when trying to export as PNG. But then when exporting as SVG, it should have received a new extension, no?

As for the second error, it's the same as the one previously mentioned, d not being specified.

KaSimCloud version, whatever was running at 14h15 Boston time.

Addendum, bugs not withstanding, Firefox, Chrome, and Edge can display the SVG properly.

[aznmonkey]

@hmedina for the firefox bug, I think it's an issue with how the PNG is being saved in Firefox, which has nothing to do with my code, thus I will probably have to work with Pierre to fix it (thus it'll probably be lower priority). In terms of the svg errors I can't seem to reproduce your errors using the w3 validator. Here's what I get:

[aznmonkey]

@yarden @hmedina I've removed the outer circles and moved all the functionality to the inner circle, is it less confusing this way? Let me know what you guys think.

[hmedina]

@aznmonkey I just exported a new model on a different computer and the SVG is still having the issue of d not being specified.

For reference, this is the kappa code I'm inputting into the editor:

%agent: A(a~1~2,b)
%agent: B(a,b~1~2~3~4~5)
A(a!./!1),A(a!./!1) @ 1.0
A(b!./!1),B(a!./!1) @ 1.0

I'll email you the resulting SVG (github still doesn't support attaching SVG to threads, right?).

[hmedina]

In terms of removing the outter blob of a site marker, I think it looks fine.

Side note, I see you list all a site's states when the cursor hovers over them. It would be useful if that also listed the site's binding partners. In the above example, hovering over site a.A would also list a.A, and hovering over b.A would list a.B (or whatever syntax you want to show site & agent pairs).

[yarden]

@aznmonkey I like the new binding site visualization (only showing inner circle) - it looks cleaner to me. I noticed however that the text of the binding sites gets clipped, so you can't have the full visualization in view to take a screenshot. And if I try to save as PNG, it still gets corrupted and looks like this:

You can see that the font changes and in the PNG the names of the binding sites are clipped as well. Finally, both in the visualization inside the app and in the exported file, the names of the agents get clipped (for instance "GalRecor" should be "GalRecorder" - is there a way to show the full name?)

Update: I realized that I can use the mouse wheel to zoom in and out globally to get the names of binding sites to be in view, so that part isn't a problem.

Thanks, Yarden

P.S. I wasn't sure what the new "interactive mode"' check box does. If I check it, it changes the colors of the agents.

[aznmonkey]

@yarden interactive mode allows you to hover over links and click on them to mark them (it's supposed to help with detecting cycles within larger models manually)

Also for the clipping. do you mind sharing with me the kappa code for the model?

Thanks,

~Xing

[hmedina]

Just to clarify the outstanding issue, the splines that show bonds currently have a fill value of white; it should be set to none or transparent.

Current output, bond splines have a white fill, therefore occlude parts of other bonds underneath (this is what was being shown in black in Yarden's shots above).

Exact same file, but with the bond splines having their fill set to none in Illustrator.