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>
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.