add annotations to svg elements using data tags

[roder....@gmail.com]

Dear Wikipathways team

Modern browsers make it possible for svg to become interactive (from Firefox 70 on, or something like this).

In this way, I converted KEGG-maps into programmatically colorizable and interactive SVGs (see it in action here).

Would it be possible for you to add annotations to your svgs, too?

For example the [TRP3]-box could in this map could look like this (my code is added in black):

<g style="fill:white; text-rendering:geometricPrecision; stroke:white;">
  <g style="fill:white; text-rendering:geometricPrecision; stroke:white;"

  title="TRP3"

  class="enzyme"

  data-ensembl='["YKL211C"]'
  data-entrez-gene='["853669"]'
  data-gene-ontology='["GO:0003824", "GO:0006568"]'
  data-kegg-gene='[]'

  data-refseq='["NP_012711", "NM_001179776"]'

  ...

  >
    <path d="M561.336 238.1878 L601.336 238.1878 L601.336 258.1878 L561.336 258.1878 L561.336 238.1878 Z" style="clip-path:url(#clipPath29); stroke:none;"/>
    <path d="M561.336 238.1878 L601.336 238.1878 L601.336 258.1878 L561.336 258.1878 L561.336 238.1878 Z" style="fill:none; clip-path:url(#clipPath29); stroke:black;"/>
    <text x="569" y="252" style="font-size:10; clip-path:url(#clipPath29); fill:black; stroke:none;" xml:space="preserve">TRP3</text>
  </g>
</g>

That way, I and anyone else could use the SVGs to great effect. I could load them dynamically from your website, color them according to your annotations in my backend, and create my own click menus. (Analogous to what I did with KEGG maps.)

For example, using modern jQuery, one could add listeners to all $('#svg .enzyme'), and get the data like this (more or less): $(event.target).data('ensembl') or similar.

I added KEGG first because my users want it the most, but in principle, I like open databases like yours much better.

Best,

Thomas Roder

University of Bern, Switzerland

[Alex Pico]

Hi Thomas, 

We’d love to work with you on this. First, I want to make sure you’re aware of the existing support of this type of thing with WikiPathways:

1. Our Pathway Widget: https://www.wikipathways.org/index.php/PathwayWidget (scroll down for embeddable, colorable examples)

2. New approach (in alpha) using annotated SVG and tooling hosted by WikiMedia: 

A. Using labels: https://tools.wmflabs.org/pathway-viewer/?id=WP4216&ff0033=APC,BRAF,CSNK1A1L,ARAF 

B. Using identifiers: https://tools.wmflabs.org/pathway-viewer/?id=WP4216&steelblue=Entrez_Gene_369,Entrez_Gene_673,Entrez_Gene_324,Entrez_Gene_122011 

Let us know if these don’t work for your use case and let’s keep the discussion going.

Thanks for reaching out!

 - Alex

--
You received this message because you are subscribed to the Google Groups "wikipathways-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wikipathways-dis...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/wikipathways-discuss/6391e7e6-6a2a-406b-b9bd-8fe3bdd1d290o%40googlegroups.com.

[Thomas Roder]

Hey Alex

I was not aware of the annotated SVGs, they seem to fit my purpose well enough. However, where can I download them? The svgs in this folder do not contain annotations: http://data.wikipathways.org/current/svg/

I think the way the SVG annotations are made in the links you sent work, but I think my approach is cleaner and offers some benefits to programmers. If it is still in beta, I would change it. (Easy for me to say, I know. ^^)

Then, I would write a single JavaScript library can color the SVGs and make them clickable if desired. This would make the wikipathways very easy to parse, embed and adapt for people like me. It could also streamline your code.

I'm aware that these changes would force users to use modern browsers (not older than half a year) and that SVG-2-specs are not final.

Best, Thomas

[Alex Pico]

Correct. Our general SVG release are just “plain” images. The annotated images are hosted by Toolforge and accessible via URL, link so: https://tools.wmflabs.org/pathway-viewer/?id=WP1541

We don’t have a repo of these files for bulk download, but you are welcome to access them via Toolforge and use them however you please.

 - Alex

To view this discussion on the web visit https://groups.google.com/d/msgid/wikipathways-discuss/45b58f53-bd85-4cab-965c-9a8446db050bn%40googlegroups.com.

[Thomas Roder]

Thanks for the info, I will play around with them.

Btw, I have found a programmatically more convenient and dynamic way of adding the metadata to the SVGs:

  <g style="fill:white; text-rendering:geometricPrecision; stroke:white;"

  title="TRP3"

  class="enzyme"

  data-annotations='[

  {

    "description": "Indole-3-glycerol-phosphate synthase",

    "name": "YKL211C",

    "type": "ensembl"
  },

  ...

  ]'

>

  ...

  >

They can then be processed like this in the browser:

let annotations = $(element).data('annotations')

annotations.forEach(function (annotation, index) {

   console.log(annotation['name'])

})

It allows one to add more information to the annotations should this be useful.

It allows one to add more information to the annotations, reducing API requests in my case.

The only important tags are 'name' and 'type', in my opinion, the rest should be voluntary.