2e:null 2f:["$","title",null,{"children":"ArchiCG Solution Description with ArchiCG | Figay | Observable"}] 34:T705,menu = html`

Clustering depth:

Group edges of similar type

Allow nested edge collapse

`35:T1991,ArchiMateGraph = { graph; ArchiMateCG.use(expandCollapse); ArchiMateCG.use(cytoscapeCola); ArchiMateCG.use(fcose); ArchiMateCG.use(edgeConnections); var cy = ArchiMateCG({ container: document.getElementById("myGraph"), // container to render in elements: myGraph, ready: function () { this.layout({ name: myLayout, randomize: true, fit: true, animate: false, nodeDimensionsIncludeLabels: myDimensionsIncludeLabels, condense: true }).run(20, 0, 10); var api = this.expandCollapse({ layoutBy: { name: myLayout, animate: true, randomize: false, fit: true, nodeDimensionsIncludeLabels: myDimensionsIncludeLabels, condense: true }, fisheye: true, animate: true, undoable: false }); api.collapseAll({ layoutBy: { name: myLayout, animate: true, randomize: false, fit: true, nodeDimensionsIncludeLabels: myDimensionsIncludeLabels, condense: true }, fisheye: true, animate: true, undoable: false, nodeDimensionsIncludeLabels: myDimensionsIncludeLabels, condense: true }); }, style: [ { selector: "node.aux-node", style: { width: 10, height: 10, shape: "circle", "background-image": (ele) => renderNode(ele).icon, "background-opacity": 1 } }, { selector: "node", style: { label: "data(label)", "background-image": (ele) => renderNode(ele).icon, "background-opacity": 1, width: (ele) => renderNode(ele).width, height: (ele) => renderNode(ele).height, "border-width": 1, "border-color": `white`, "border-opacity": 1, shape: "circle", nodeDimensionsIncludeLabels: myDimensionsIncludeLabels, "overlay-color": (ele) => renderNode(ele).dColor, "overlay-opacity": "0.1" } }, { selector: ":parent", style: { "background-color": "white", "z-compound-depth": "auto", "border-color": `black`, "background-position-x": "100%", "background-position-y": "0%", nodeDimensionsIncludeLabels: myDimensionsIncludeLabels, "background-color": (ele) => renderNode(ele).dColor, "background-opacity": "0.1" } }, { selector: "node.cy-expand-collapse-collapsed-node", style: { "background-color": "white", shape: "rectangle", "line-color": "black" } }, { selector: ":selected", style: { "overlay-color": "#6c757d", "overlay-opacity": 0.3, "background-color": "#999999" } }, { selector: "edge", style: { label: (ele) => renderEdge(ele).label, "target-arrow-shape": (ele) => renderEdge(ele).targetArrowShape, "target-arrow-color": (ele) => renderEdge(ele).targetArrowColor, "target-arrow-fill": (ele) => renderEdge(ele).targetArrowFill, "source-arrow-shape": (ele) => renderEdge(ele).sourceArrowShape, "source-arrow-color": (ele) => renderEdge(ele).sourceArrowColor, "source-arrow-fill": (ele) => renderEdge(ele).sourceArrowFill, "line-style": (ele) => renderEdge(ele).lineStyle, "mid-source-arrow-shape": (ele) => renderEdge(ele).midSourceArrowShape, "mid-source-arrow-color": (ele) => renderEdge(ele).midSourceArrowColor, "line-dash-pattern": (ele) => renderEdge(ele).lineDashPattern, "target-endpoint": "outside-to-node", "line-color": "black", "target-distance-from-node": 0, "curve-style": "bezier" } } ], layout: { name: "fcose" } }); 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("collapseSelectedEdges") .addEventListener("click", function () { const edges = cy.edges(":selected"); if (edges.length >= 2) { api.collapseEdges(edges, getEdgeOptions()); } }); document .getElementById("expandSelectedEdges") .addEventListener("click", function () { const edges = cy.edges(":selected"); if (edges.length > 0) { api.expandEdges(edges, getEdgeOptions()); } }); document .getElementById("collapseAllEdges") .addEventListener("click", function () { api.collapseAllEdges(getEdgeOptions()); }); document .getElementById("collapseEdgesBetweenNodes") .addEventListener("click", function () { api.collapseEdgesBetweenNodes(cy.nodes(":selected"), getEdgeOptions()); }); document .getElementById("expandEdgesBetweenNodes") .addEventListener("click", function () { api.expandEdgesBetweenNodes(cy.nodes(":selected"), getEdgeOptions()); }); document .getElementById("expandAllEdges") .addEventListener("click", function () { if (cy.edges(".cy-expand-collapse-collapsed-edge").length > 0) { api.expandAllEdges(); } }); cy.edgeConnections().addEdges([ { group: "edges", data: { id: 12, source: 1, target: 2 } }, { group: "edges", data: { id: 23, source: 2, target: 3 } }, { group: "edges", data: { id: 13, source: 3, target: 1 } }, { group: "edges", data: { id: 56, source: 5, target: 6 } }, { group: "edges", data: { id: 370, source: 3, target: 7 } }, { group: "edges", data: { id: 371, source: 3, target: 7 } }, { group: "edges", data: { id: 412, source: 4, target: 12 } }, { group: "edges", data: { id: 413, source: 4, target: 13 } }, { group: "edges", data: { id: 500, source: 23, target: 56 } }, { group: "edges", data: { id: 837, source: 370, target: 8 } } ]); return cy; }36:[] 32:{"id":"adb4c98cc70469af","slug":"archimcg-solution-description-with-archimatecg","title":"ArchiCG Solution Description with ArchiCG","thumbnail":"7857e100a438e3e5167aabd2d17342630bcb5722dbaf15a10770e2dd316d5f40","access_level":"public","create_time":"$D2021-12-22T13:47:18.643Z","update_time":"$D2025-10-24T07:29:12.366Z","view_time":null,"first_public_time":"$D2021-12-22T14:01:38.630Z","fork":{"id":"dd737a625f3f66ac","slug":"when-archimate-models-meets-compound-constrained-graphs-w","title":"When ArchiMate Models meets Compound constrained graphs with CytoscapeCola","owner":{"id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay"}},"stars":0,"starred":false,"owner":{"type":"team","id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/071fc1ce1d8fbec71d4409987642a0c881b8a3651627b51e2cdaa7fcde295a10","tier":"starter_2024"},"version":1412,"publish_version":null,"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":2,"collection":{"id":"af457bad8ad84538","slug":"archimatecg","title":"ArchiCG","owner":{"id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay"}},"type":"notebook","body":{"title":"ArchiCG Solution Description with ArchiCG","cells":[{"id":0,"value":"md`# ArchiCG Solution Description with ArchiCG`","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":1055,"value":"coloredProperty = \"securityLevel\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1041,"value":"Swatches(propertyValueColors, {\n columns: \"180px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"myGraph = ArchiMateCGSolution.concat(CytoscapeExtensions)","pinned":true,"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":883,"value":"myDimensionsIncludeLabels = \"true\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"import {\n ArchiMateCGSolution,\n CytoscapeExtensions,\n ArchiMateUniverse,\n ASD_DMN,\n myProduct,\n items,\n packages4CSS,\n specializedActorsitems,\n specializedActorsitems2\n} from \"@nfigay/archimatecg-data-sets\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"myLayout = \"fcose\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"

ArchiCG Solution Imports

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1375,"value":"import {\n cytoscapeCola,\n renderNode,\n renderEdge,\n getEdgeOptions,\n ArchiMateCG,\n fcose,\n edgeConnections,\n expandCollapse,\n ctxmenu,\n propertyValueColors,\n propertyColor\n} from \"@nfigay/when-archimate-models-meets-compound-constrained-graphs-w\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"import { ArchiMate } from \"@nfigay/archimate\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"import { Swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"