简体   繁体   中英

How to Import Style/CSS Data from an External JSON File into Cytoscape.js?

I have a network visualized in the desktop Cytoscape application), with the network data exported as a .cyjs file (despite the suffix, it is a JSON file), and the style data (the formatting of those data) likewise exported as a .json file.

I can load theoe data into Cytoscape.js running in a local webserver -- manually adding the style data to the HTML file. However, I cannot figure out how to load those style data directly from the style.json file.

Update: Thanks to the solutions very kindly provided below by @jaromanda-x and @maxkfranz I've posted an answer (below), described in more detail in my companion research blog post Cytoscape.js Styles: External JSON Data File .


cytoscape_js.html

<HTML xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<HEAD>
<meta charset="utf-8" />
<style>
  #cy {
    width: 80%;
    height: 80%;
    position: absolute;
  }
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.9.0/cytoscape.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>

</HEAD>

<BODY>

<div id='cy'></div>

<script>
  var json = $.getJSON("data.json")
  .done(function(data){
    var cy = cytoscape({

      container: document.getElementById('cy'),

      elements: data.elements,

      style : [ {
        "selector" : "node",
        "css" : {
          "text-valign" : "center",
          "text-halign" : "center",
          "font-family" : "SansSerif.plain",
          "font-weight" : "normal",
          "background-color" : "rgb(204,255,255)",
          "border-width" : 1.5,
          "height" : 35.0,
          "width" : 75.0,
          "border-opacity" : 1.0,
          "color" : "rgb(0,0,0)",
          "border-color" : "rgb(0,153,255)",
          "text-opacity" : 1.0,
          "background-opacity" : 1.0,
          "font-size" : 12,
          "shape" : "ellipse",
          "content" : "data(src_node)"
        }
      }, {
        "selector" : "node:selected",
        "css" : {
          "background-color" : "rgb(255,255,0)"
        }
      }, {
        "selector" : "edge",
        "css" : {
          "color" : "rgb(0,0,0)",
          "source-arrow-shape" : "none",
          "font-family" : "Dialog.plain",
          "font-weight" : "normal",
          "target-arrow-color" : "rgb(0,0,0)",
          "width" : 2.0,
          "source-arrow-color" : "rgb(0,0,0)",
          "line-color" : "rgb(132,132,132)",
          'opacity': 0.5,
          "line-style" : "solid",
          "font-size" : 12,
          "text-opacity" : 1.0,
          "target-arrow-shape" : "triangle",
          "content" : "data(pathway)",
          'curve-style': 'bezier'
        }
      } ],
    });
  });
</script>

</BODY>
</HTML>


data.json

{
  "elements" : {
    "nodes" : [ {
      "data" : {
        "id" : "163",
        "shared_name" : "c00103_glycolysis",
        "src_node" : "c00103",
        "name" : "c00103_glycolysis",
        "x" : 200,
        "y" : 60,
        "tgt_node" : "c00103",
        "SUID" : 163,
        "selected" : false
      },
      "position" : {
        "x" : -29.497192046634154,
        "y" : -1709.4156554007204
      },
      "selected" : false
    }, {
      "data" : {
        "id" : "162",
        "shared_name" : "5.4.2.2_glycolysis",
        "src_node" : "5.4.2.2",
        "name" : "5.4.2.2_glycolysis",
        "x" : 200,
        "y" : 70,
        "tgt_node" : "5.4.2.2",
        "SUID" : 162,
        "selected" : false
      },
      "position" : {
        "x" : -29.497192046634154,
        "y" : -1579.4552719836647
      },
      "selected" : false
    }, {
      "data" : {
        "id" : "161",
        "shared_name" : "c00668_glycolysis",
        "src_node" : "c00668",
        "name" : "c00668_glycolysis",
        "x" : 200,
        "y" : 80,
        "tgt_node" : "c00668",
        "SUID" : 161,
        "selected" : false
      },
      "position" : {
        "x" : -29.497192046634154,
        "y" : -1449.494888566609
      },
      "selected" : false
    } ],
    "edges" : [ {
      "data" : {
        "id" : "361",
        "source" : "163",
        "target" : "162",
        "shared_name" : "c00103_glycolysis () 5.4.2.2_glycolysis",
        "vis" : "vis",
        "shared_interaction" : "",
        "name" : "c00103_glycolysis () 5.4.2.2_glycolysis",
        "interaction" : "",
        "pathway" : 1,
        "SUID" : 361,
        "wt" : "wt",
        "BEND_MAP_ID" : 74,
        "selected" : false
      },
      "selected" : false
    }, {
      "data" : {
        "id" : "360",
        "source" : "162",
        "target" : "161",
        "shared_name" : "5.4.2.2_glycolysis () c00668_glycolysis",
        "vis" : "vis",
        "shared_interaction" : "",
        "name" : "5.4.2.2_glycolysis () c00668_glycolysis",
        "interaction" : "",
        "pathway" : 1,
        "SUID" : 360,
        "wt" : "wt",
        "BEND_MAP_ID" : 76,
        "selected" : false
      },
      "selected" : false
    }, {
      "data" : {
        "id" : "359",
        "source" : "162",
        "target" : "163",
        "shared_name" : "5.4.2.2_glycolysis () c00103_glycolysis",
        "vis" : "vis",
        "shared_interaction" : "",
        "name" : "5.4.2.2_glycolysis () c00103_glycolysis",
        "interaction" : "",
        "pathway" : 1,
        "SUID" : 359,
        "wt" : "wt",
        "BEND_MAP_ID" : 77,
        "selected" : false
      },
      "selected" : false
    }, {
      "data" : {
        "id" : "358",
        "source" : "161",
        "target" : "162",
        "shared_name" : "c00668_glycolysis () 5.4.2.2_glycolysis",
        "vis" : "vis",
        "shared_interaction" : "",
        "name" : "c00668_glycolysis () 5.4.2.2_glycolysis",
        "interaction" : "",
        "pathway" : 1,
        "SUID" : 358,
        "wt" : "wt",
        "BEND_MAP_ID" : 78,
        "selected" : false
      },
      "selected" : false
    } ]
  }
}

styles.json

[ {
  "format_version" : "1.0",
  "generated_by" : "cytoscape-3.7.1",
  "target_cytoscapejs_version" : "~2.1",
  "title" : "victoria_0",
  "style" : [ {
    "selector" : "node",
    "css" : {
      "text-valign" : "center",
      "text-halign" : "center",
      "font-family" : "SansSerif.plain",
      "font-weight" : "normal",
      "background-color" : "rgb(204,255,255)",
      "border-width" : 1.5,
      "height" : 35.0,
      "width" : 75.0,
      "border-opacity" : 1.0,
      "color" : "rgb(0,0,0)",
      "border-color" : "rgb(0,153,255)",
      "text-opacity" : 1.0,
      "background-opacity" : 1.0,
      "font-size" : 12,
      "shape" : "ellipse",
      "content" : "data(src_node)"
    }
  }, {
    "selector" : "node:selected",
    "css" : {
      "background-color" : "rgb(255,255,0)"
    }
  }, {
    "selector" : "edge",
    "css" : {
      "color" : "rgb(0,0,0)",
      "source-arrow-shape" : "none",
      "font-family" : "Dialog.plain",
      "font-weight" : "normal",
      "target-arrow-color" : "rgb(0,0,0)",
      "width" : 2.0,
      "source-arrow-color" : "rgb(0,0,0)",
      "line-color" : "rgb(132,132,132)",
      "opacity" : 1.0,
      "line-style" : "solid",
      "font-size" : 12,
      "text-opacity" : 1.0,
      "target-arrow-shape" : "triangle",
      "content" : "data(pathway)"
    }
  }, {
    "selector" : "edge[pathway = 1]",
    "css" : {
      "color" : "rgb(204,0,0)"
    }
  }, {
    "selector" : "edge[pathway = 2]",
    "css" : {
      "color" : "rgb(51,102,0)"
    }
  }, {
    "selector" : "edge:selected",
    "css" : {
      "line-color" : "rgb(255,0,0)"
    }
  } ]
} ]

Note that fields like elements and style can simply be given promise values and things work automatically, eg elements: fetch(url1).then(res => res.json()), style: fetch(url2).then(res => res.json())

See http://js.cytoscape.org/#init-opts/elements

For fetch() or $.get() to work, you must run an http server.

OK: with many thanks and much appreciation to both @jaromanda-x and @maxkfranz here is the solution.

I'll paste the HTML code below, which shows two solutions/approaches. I've uploaded a tarball, cytoscapejs_demo.tgz [11.141 KB], that contains the files referenced in the HTML file, needed to recreate the graphic further below.


cytoscape.js.demo.html

<!DOCTYPE html>
<HTML xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<HEAD>
<meta charset="utf-8" />
<title>[Cytoscape.js] Glycolysis + TCA Cycle</title>

<style>
  #cy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 110px;
    left: 0px;
    bottom: 0px;
    left: 0px;
  }
</style>

<script src='https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.9.0/cytoscape.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>

</HEAD>

<BODY>

<div id='cy'></div>

<script>
  // ==========================================================================
  // APPROACH #1:

  Promise.all([
    fetch('relations2-glycolysis+tca.tsv.cyjs').then(res => res.json()),
    fetch('styles.json').then(res => res.json())
  ]).then(([{elements}, [{style}]]) => {
    cytoscape({
      container: document.getElementById('cy'),
      elements,
      style,

  // END, APPROACH #1-SPECIFIC CODE
  // Note that we need, here, the (non-edited) Cytoscape-exported "styles.json" file.
  // ==========================================================================

  // ==========================================================================
  // APPROACH #2: UNCOMMENT THIS (AND COMMENT APPROACH #1 LINES ABOVE):

  // var json = $.getJSON('relations2-glycolysis+tca.tsv.cyjs')
  // .done(function(data){
  //   var cy = cytoscape({
  //     container: document.getElementById('cy'),
  //     elements: data.elements,
  //     style: fetch('styles-edited.json').then(res => res.json()).then(json => json.style),

  // END, APPROACH #2-SPECIFIC CODE
  // Notes.
  //   1. Here we need the (edited) Cytoscape-exported "styles.json" file: I
  //      needed to manually delete the leading "[ " at the top, and the lagging
  //      " ]" at the bottom of the Cytoscape-exported "styles.json" file:
  //   2. This also works, but is not needed ("elements: data.elements" works):
  //      elements: fetch('relations2-glycolysis+tca.tsv.cyjs').then(res => res.json()).then(json => json.elements),
  // ==========================================================================

      // In either case, above, I added "curve-style" : "bezier" to the edge properties
      // in the styles-edited.json file, to enable the display of the edges as arrows.

      // ======================================================================
      layout: {
        name: 'preset',
        zoom: 1.2,
        pan: { x: 950, y: 2150 },
        rows: 1
      },

      minZoom: 5e-1,
      maxZoom: 0.25e1,
      zoomingEnabled: true,
      userZoomingEnabled: true,
      panningEnabled: true,
      userPanningEnabled: true,
      boxSelectionEnabled: false,
      selectionType: 'single',
      touchTapThreshold: 8,
      desktopTapThreshold: 4,
      autolock: false,
      autoungrabify: false,
      autounselectify: false,

      // Rendering options:
      headless: false,
      styleEnabled: true,
      hideEdgesOnViewport: false,
      hideLabelsOnViewport: false,
      textureOnViewport: false,
      motionBlur: false,
      motionBlurOpacity: 0.2,
      wheelSensitivity: 0.1,
      pixelRatio: 'auto'
    });
  });
</script>

</BODY>
</HTML>


/cytoscape.js.demo.html

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM