Shape Library

Every semantic element in any given pathway model will be rendered using a pre-defined shape from a library of shapes hosted by WikiPathways, the WikiPathways Shape Library. Pathvisio.js will be compiled with a default shape for every semantic element, but users will be welcome to override the default shape specified for any semantic element. Every user will have the option to specify an alternate shape from the WikiPathways Shape Library to be used instead of the default shape for any given semantic element, e.g. the shape for the semantic element "geneProduct" could be "wikipathways-default-gene-product-shape," but a member of the Doe Lab could create a new gene product shape "doe-lab-gene-product-shape" and set it to display as their default for any gene product in a pathway.

Data Structure for Shapes

The shape library will store shapes in JSON format using the following data structure:

{
  "@context":{
    "shp":{
      "@id":"http://www.wikipathways.org/shapes/",
      "@container":"@set"
    },
    "sem":"http://www.wikipathways.org/semantic-elements/gene-product/"
  },
  "@set":[
    {"shp:wikipathways-gene-product-shape":{
      "@id":"shp:wikipathways-gene-product-shape",
      "@type":"sem:gene-product",
      "name":"WikiPathways Gene Product",
      "license":"cc-3",
      "mimeType":"image/svg+xml",
      "fileExtension":"svg",
      "width":100,
      "height":50,
      "paths":{ // Optional
        "asldfj234":{
          "id":"asldfj234",
          "zIndex":0,
          "pathSegments":{
            "0":{"command":"M",
              "parameters":"0,0"
            },
            "1":{"command":"L",
              "parameters":"20,10"
            },
            "2":{"command":"L",
              "parameters":"0,20"
            },
            "3":{"command":"Z"}
          },
          "attributes":{
            "style":{
              "stroke":"black",
              "strokeWidth":1,
              "fill":"white"
            },
            "vectorEffect":"non-scaling-stroke" // another option would be "non-scaling"
          }
        },
        "ert223":{
          "id":"ert223",
          "zIndex":1,
          "offset":{
            "parent":"asldfj234",
            "dx":7,
            "dy":5 // Another option that is only for paths that are not straight lines would be inside or outside
          },
          "attributes":{
            "style":{
              "stroke":"black",
              "strokeWidth":1,
              "fill":"white"
            },
            "vectorEffect":"non-scaling-stroke" // another option would be "non-scaling"
          }
        }
      }
    }},
    {"shp:wikipathways-metabolite-shape":{
      "@id":"shp:wikipathways-metabolite-shape",
      "@type":"sem:metabolite",
      "name":"WikiPathways Metabolite",
      "license":"cc-3",
      "mimeType":"image/svg+xml",
      "fileExtension": "svg",
      "width":100,
      "height":50,
      "paths":{
        "k3j4h5c":{
          "id":"k3j4h5c",
          "zIndex":0,
          "pathSegments":{
            "0":{"command":"M",
              "parameters":"0,0"
            },
            "1":{"command":"L",
              "parameters":"20,10"
            },
            "2":{"command":"L",
              "parameters":"3,18"
            },
            "3":{"command":"Z"}
          },
          "attributes":{
            "style":{
              "stroke":"blue",
              "strokeWidth":1,
              "fill":"white"
            },
            "vectorEffect":"non-scaling-stroke"
          }
        },
        "3q4jkv7":{
          "id":"3q4jkv7",
          "zIndex":1,
          "offset":{
            "parent":"k3j4h5c",
            "inside":2
          }
        }
      }
    }},
    {"shp:doe-lab-minimalistic-mitochondria":{
      "@id":"shp:doe-lab-minimalistic-mitochondria",
      "@type":"sem:mitochondria",
      "name":"Minimalistic Mitochondria",
      "license":"cc-3",
      "mimeType":"image/png",
      "fileExtension":"png",
      "width":200,
      "height":175
    }}]
}

Notes for SVG

Pathvisio.js needs the following for the compiled version for SVG:

• For symbols, need the svg xml to be inserted into the symbol definitions in pathway-template.svg
• For new elements, need to add a class for each new element, based on the svg JSON

If a shape scales uniformly in all ways (with the optional exception of stroke-width), it can be represented with an SVG symbol and a "use" element. Otherwise, it must be drawn as a new element. Any graphical feature in a shape, such as rounded edges and doubled perimeter lines, that does not scale uniformly along with the rest of shape must be drawn as a new element.

Shapes that must be rendered as new elements

• Cell
• Nucleus
• Organelle
• Extracellular region
• Rounded rectangle