40:null 41:["$","title",null,{"children":"Test Adding Compound with Cytoscape.js | haiyesbye's Workspace | Observable"}] 47: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" } } ]48:Te81,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(id)", color: "white", 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("addEdge").addEventListener("click", function () { }); 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(); }); }49:[] 45:{"id":"1723749944e2f6f7","slug":null,"title":"Test Adding Compound with Cytoscape.js","thumbnail":"16b01cfaca5abe51f4ca2a2fc1ac8e15df7f946643c0a67401db26ec09f40ece","access_level":"public","create_time":"$D2023-09-17T12:17:00.283Z","update_time":"$D2023-09-17T12:24:38.872Z","view_time":null,"first_public_time":"$D2023-09-17T12:17:00.283Z","has_unpublished_edits":null,"fork":{"id":"8761c4b808714cd6","slug":"test-adding-compound-with-cytoscape-js","title":"Test Adding Compound with Cytoscape.js","owner":{"id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b4568574ab17630c","login":"haiyesbye-ws","name":"haiyesbye's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/f4536b585d02e15a5fc39cb79c2ee0cac6d3b7ba5ae0d62e65c9971ea6d197f9","tier":"starter_2024","bio":"","following":false},"version":414,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b9f96d35f1521ebb","login":"wildeyes","name":"Wildeyes","avatar_url":"https://avatars-next.observableusercontent.com/226b66a7f52847d4de86684048b1833e3d199f1d63c7cb497259a9ac65faa976","tier":null,"bio":"Curious about visualization, software practices and empowering developers. \"I'm determined to move beyond this way of interaction\"","following":false}],"members":[{"type":"team","id":"b4568574ab17630c","login":"haiyesbye-ws","name":"haiyesbye's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/f4536b585d02e15a5fc39cb79c2ee0cac6d3b7ba5ae0d62e65c9971ea6d197f9","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b9f96d35f1521ebb","login":"wildeyes","name":"Wildeyes","avatar_url":"https://avatars-next.observableusercontent.com/226b66a7f52847d4de86684048b1833e3d199f1d63c7cb497259a9ac65faa976","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"graph = html`

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"myLayout = \"fcose\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"cytoscape = require(\"cytoscape@3.21.0/dist/cytoscape.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 46:"$45:body"