2e:null 2f:["$","title",null,{"children":"Test Adding Compound with Cytoscape.js | Figay | Observable"}] 34:T69d,myGraph = [ { data: { id: "o", label: "o" } }, { data: { id: "a", parent: "o", label: "a" } }, { data: { id: "b", parent: "o" } }, { data: { id: "c", parent: "o" } }, { data: { id: "d", parent: "o" } }, { data: { id: "e", parent: "o" } }, { data: { id: "f", parent: "o" } }, { data: { id: "a1", parent: "a" } }, { data: { id: "b1", parent: "b" } }, { data: { id: "c1", parent: "c" } }, { data: { id: "d1", parent: "d" } }, { data: { id: "e1", parent: "e" } }, { data: { id: "f1", parent: "f" } }, { data: { id: "a2", parent: "a" } }, { data: { id: "b2", parent: "b" } }, { data: { id: "c2", parent: "c" } }, { data: { id: "d2", parent: "d" } }, { data: { id: "e2", parent: "e" } }, { data: { id: "f2", parent: "f" } }, { data: { id: "a3", parent: "a" } }, { data: { id: "b3", parent: "b" } }, { data: { id: "c3", parent: "c" } }, { data: { id: "d3", parent: "d" } }, { data: { id: "e3", parent: "e" } }, { data: { id: "f3", parent: "f" } }, { data: { id: "a4", parent: "a" } }, { data: { id: "b4", parent: "b" } }, { data: { id: "c4", parent: "c" } }, { data: { id: "d4", parent: "d" } }, { data: { id: "e4", parent: "e" } }, { data: { id: "f4", parent: "f" } }, { data: { id: "a5", parent: "a" } }, { data: { id: "b5", parent: "b" } }, { data: { id: "c5", parent: "c" } }, { data: { id: "d5", parent: "d" } }, { data: { id: "e5", parent: "e" } }, { data: { id: "f5", parent: "f" } }, { data: { id: "a6", parent: "a" } }, { data: { id: "b6", parent: "b" } }, { data: { id: "c6", parent: "c" } }, { data: { id: "d6", parent: "d" } }, { data: { id: "e6", parent: "e" } }, { data: { id: "f6", parent: "f" } } ]35:Te29,myCytoscape = { graph; cytoscape.use(fcose); cytoscape.use(expandCollapse); var cy = cytoscape({ container: document.getElementById("myGraph"), ready: function () { this.layout({ name: myLayout, randomize: true, fit: true, animate: false, nodeDimensionsIncludeLabels: true, condense: false }).run(20, 0, 10); var api = this.expandCollapse({ layoutBy: { name: myLayout, animate: true, randomize: false, fit: true, nodeDimensionsIncludeLabels: true, condense: false }, fisheye: true, animate: true, undoable: false }); api.expandAll({ layoutBy: { name: myLayout, animate: true, randomize: false, fit: true, nodeDimensionsIncludeLabels: true, condense: false }, fisheye: true, animate: true, undoable: false, nodeDimensionsIncludeLabels: true, condense: false }); }, elements: myGraph, style: [ { selector: "node", style: { label: "data(label)", color: "black", shape: "rectangle" } }, { selector: "node.cy-expand-collapse-collapsed-node", style: { "background-color": "white", "line-color": "black", shape: "rectangle", "border-color": "black" } }, { selector: ":selected", style: { "overlay-color": "green", "overlay-opacity": 0.3, "background-color": "green", shape: "rectangle" } }, { selector: ":parent", style: { "background-color": "yellow", "z-compound-depth": "auto", shape: "rectangle" } }, { selector: "edge", style: { "target-arrow-shape": "triangle", "target-endpoint": "outside-to-node", "target-arrow-color": "lightgreen", "line-color": "green", "target-distance-from-node": 0 } } ], layout: { name: "fcose" }, style: [ { selector: "edge", style: { "curve-style": "bezier", "target-arrow-shape": "triangle" } } ], wheelSensitivity: 0.5 }); var api = cy.expandCollapse("get"); document.getElementById("collapseAll").addEventListener("click", function () { api.collapseAll(); }); document.getElementById("expandAll").addEventListener("click", function () { api.expandAll(); }); document .getElementById("collapseRecursively") .addEventListener("click", function () { api.collapseRecursively(cy.$(":selected")); }); document .getElementById("expandRecursively") .addEventListener("click", function () { api.expandRecursively(cy.$(":selected")); }); document.getElementById("compound").addEventListener("click", function () { var selection = cy.nodes(":selected"); if (selection.length < 1) { return; } var parent = selection[0].parent().id(); for (let i = 1; i < selection.length; i++) { if (parent !== selection[i].parent().id()) { return; } } var myUUID = uuid(); const parentNode = { data: { id: `${myUUID}`, parent: parent, label: "label" } }; cy.add(parentNode); for (let i = 0; i < selection.length; i++) { selection[i].move({ parent: `${myUUID}` }); } api.expandAll(); }); }36:[] 32:{"id":"8761c4b808714cd6","slug":"test-adding-compound-with-cytoscape-js","title":"Test Adding Compound with Cytoscape.js","thumbnail":"a28ed00bcd6e0983f2f3e664e77c1bf4533ec95362ad9b29fd6f3937aa843c60","access_level":"public","create_time":"$D2022-03-26T11:46:29.143Z","update_time":"$D2022-04-18T10:27:41.104Z","view_time":null,"first_public_time":"$D2022-03-27T04:38:40.812Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/071fc1ce1d8fbec71d4409987642a0c881b8a3651627b51e2cdaa7fcde295a10","tier":"starter_2024"},"version":406,"publish_version":406,"role":null,"authored":false,"authors":[{"type":"individual","id":"71983294fb89ee80","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/604017b640b1f50c2b41a96fcf316faa227738b7b2b4d0f6221ace789ebbfd42","tier":null}],"members":[{"type":"individual","id":"71983294fb89ee80","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/604017b640b1f50c2b41a96fcf316faa227738b7b2b4d0f6221ace789ebbfd42","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Test Adding Compound with Cytoscape.js","cells":[{"id":0,"value":"html`

Test Adding Compound with Cytoscape.js

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"graph = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"menu = html`\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"myLayout = \"fcose\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"cytoscape = require(\"cytoscape@3.21.0/dist/cytoscape.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"fcose = (await import(\"https://cdn.skypack.dev/cytoscape-fcose@latest\")).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"expandCollapse = (\n await import(\"https://cdn.skypack.dev/cytoscape-expand-collapse@latest@min\")\n).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"uuid = import(\"uuid/dist/esm-browser/v4.js\").then((module) => module.default)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"