2f:null 30:["$","title",null,{"children":"When ArchiMate Models meets Compound constrained graphs with CytoscapeCola | Figay | Observable"}] 35:T705,menu = html`

Clustering depth:

Group edges of similar type

Allow nested edge collapse

`36:T1a16,ArchiMateGraph = { graph; ArchiMateCG.use(expandCollapse); ArchiMateCG.use(cytoscapeCola); ArchiMateCG.use(fcose); ArchiMateCG.use(edgeConnections); ArchiMateCG.use(bubbleset); 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"); cy.ready(() => { const bb = cy.bubbleSets(); bb.addPath(cy.nodes(), cy.edges(), null); }); 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; }37:T105c,CompoundGraph = [ { data: { type: "business-actor", id: 1 }, position: { x: 210, y: 60 } }, { data: { type: "business-actor", id: 2, parent: 1 }, position: { x: 30, y: 80 } }, { data: { type: "business-actor", id: 3 }, position: { x: 100, y: 200 } }, { data: { type: "business-actor", id: 4 }, position: { x: 105, y: 120 } }, { data: { type: "business-actor", id: 5 }, position: { x: -20, y: 130 } }, { data: { type: "business-actor", id: 6 }, position: { x: 45, y: 220 } }, { data: { type: "business-actor", id: 7 }, position: { x: 250, y: 230 } }, { data: { type: "business-actor", id: 8 }, position: { x: 210, y: 150 } }, { group: "nodes", data: { id: "id-97c58664864f4c51996b80ac5708d1e4", label: "All the ArchiMate relationships with Cytoscape.js", type: "grouping", viewpoint: "{name=None, id=}" } }, { group: "nodes", data: { id: "id-74128075224d4063afdda37251f5c6d7", type: "grouping", parent: "id-97c58664864f4c51996b80ac5708d1e4", label: "Source" } }, { group: "nodes", data: { id: "id-17343da5e4284d479a23e20b42ae85a4", type: "grouping", parent: "id-97c58664864f4c51996b80ac5708d1e4", label: "Target" } }, { group: "edges", data: { id: "id-09cf6e1528a84b02bf2946cfc2e0f9d2", type: "composition-relationship", label: "composition", target: "id-17343da5e4284d479a23e20b42ae85a4", source: "id-74128075224d4063afdda37251f5c6d7" } }, { group: "edges", data: { id: "id-afb94d9a460b4d33baf13ae4c8c1aadf", type: "aggregation-relationship", label: "aggregation", target: "id-17343da5e4284d479a23e20b42ae85a4", source: "id-74128075224d4063afdda37251f5c6d7" } }, { group: "edges", data: { id: "id-b27ba4d54f774d9c92e4a5e35ecc229d", type: "assignment-relationship", label: "assignment", target: "id-17343da5e4284d479a23e20b42ae85a4", source: "id-74128075224d4063afdda37251f5c6d7" } }, { group: "edges", data: { id: "id-f0471c241d6147c3a760f313492d1e67", type: "realization-relationship", label: "Realization", target: "id-17343da5e4284d479a23e20b42ae85a4", source: "id-74128075224d4063afdda37251f5c6d7" } }, { group: "edges", data: { id: "id-4032fd8d4e4d40b3a2ade07a78a4f133", type: "serving-relationship", label: "serving", target: "id-17343da5e4284d479a23e20b42ae85a4", source: "id-74128075224d4063afdda37251f5c6d7" } }, { group: "edges", data: { id: "id-f58ed079409c4e3681b66faffaeead8d", type: "access-relationship", label: "access", target: "id-17343da5e4284d479a23e20b42ae85a4", source: "id-74128075224d4063afdda37251f5c6d7" } }, { group: "edges", data: { id: "id-bbc2b5ea98e0477aaa24dd2d86c3d772", type: "influence-relationship", label: "influence", target: "id-17343da5e4284d479a23e20b42ae85a4", source: "id-74128075224d4063afdda37251f5c6d7" } }, { group: "edges", data: { id: "id-cf77592612774318ba3c8df82fca9643", type: "triggering-relationship", label: "triggering", target: "id-17343da5e4284d479a23e20b42ae85a4", source: "id-74128075224d4063afdda37251f5c6d7" } }, { group: "edges", data: { id: "id-17f5abaf15ae4761812c04a1677a7a96", type: "flow-relationship", label: "flow", target: "id-17343da5e4284d479a23e20b42ae85a4", source: "id-74128075224d4063afdda37251f5c6d7" } }, { group: "edges", data: { id: "id-aa60b0e331d8494894c40a9ad4e5c046", type: "specialization-relationship", label: "specialization", target: "id-17343da5e4284d479a23e20b42ae85a4", source: "id-74128075224d4063afdda37251f5c6d7" } }, { group: "edges", data: { id: "id-914e51f7e2084237b2e5a6daf3230203", type: "association-relationship", label: "association", target: "id-17343da5e4284d479a23e20b42ae85a4", source: "id-74128075224d4063afdda37251f5c6d7" } } ]38:Te09,function renderEdge(ele) { var sourceArrowShape = "none"; var sourceArrowColor = "black"; var sourceArrowFill = "fill"; var targetArrowShape = "none"; var targetArrowColor = "black"; var targetArrowFill = "fill"; var sourceArrowShape = "none"; var lineStyle = "solid"; var midSourceArrowShape = "none"; var midSourceArrowColor = "black"; var lineDashPattern = [5, 5]; var label = undefined; // console.log(ele.data("type")); //access (non oriented) //"target-arrow-shape": "none", //"target-arrow-color": "black", //"target-arrow-fill": "fill", //"source-arrow-shape": "none", //"line-style": "dashed", //"mid-source-arrow-shape": "triangle", //"mid-source-arrow-color": "black", //"line-dash-pattern": [5, 5], //access read (oriented) //"target-arrow-shape": "none", //"target-arrow-color": "black", //"target-arrow-fill": "fill", //"source-arrow-shape": "chevron", //"line-style": "dashed", //"mid-source-arrow-shape": "triangle", //"mid-source-arrow-color": "black", //"line-dash-pattern": [5, 5], //access write (oriented) //"target-arrow-shape": "chevron", //"target-arrow-color": "black", //"target-arrow-fill": "fill", //"source-arrow-shape": "none", //"line-style": "dashed", //"mid-source-arrow-shape": "triangle", //"mid-source-arrow-color": "black", //"line-dash-pattern": [5, 5], //access read-write (oriented) //"target-arrow-shape": "chevron", //"target-arrow-color": "black", //"target-arrow-fill": "fill", //"source-arrow-shape": "chevron", //"source-arrow-color": "black", //"line-style": "dashed", //"mid-source-arrow-shape": "triangle", //"mid-source-arrow-color": "black", //"line-dash-pattern": [5, 5], label = ele.data("label"); switch (ele.data("type")) { case "realization-relationship": targetArrowShape = "triangle"; targetArrowFill = "hollow"; lineStyle = "dashed"; break; case "specialization-relationship": targetArrowShape = "triangle"; targetArrowFill = "hollow"; break; case "triggering-relationship": targetArrowShape = "triangle"; break; case "flow-relationship": targetArrowShape = "triangle"; lineStyle = "dashed"; lineDashPattern = [10, 10]; break; case "serving-relationship": targetArrowShape = "chevron"; break; case "influence-relationship": targetArrowShape = "chevron"; lineStyle = "dashed"; lineDashPattern = [10, 10]; break; case "assignment-relationship": targetArrowShape = "chevron"; sourceArrowShape = "circle"; break; case "access-relationship": lineStyle = "dashed"; // midSourceArrowShape = "triangle"; break; case "aggregation-relationship": sourceArrowShape = "diamond"; sourceArrowFill = "hollow"; break; case "composition-relationship": sourceArrowShape = "diamond"; sourceArrowFill = "filled"; break; case "association-relationship": midSourceArrowShape = "triangle"; break; default: break; } return { sourceArrowShape: sourceArrowShape, sourceArrowColor: sourceArrowColor, sourceArrowFill: sourceArrowFill, targetArrowShape: targetArrowShape, targetArrowColor: targetArrowColor, targetArrowFill: targetArrowFill, sourceArrowShape: sourceArrowShape, lineStyle: lineStyle, midSourceArrowShape: midSourceArrowShape, midSourceArrowColor: midSourceArrowColor, lineDashPattern: lineDashPattern, label: label }; }39:[] 33:{"id":"dd737a625f3f66ac","slug":"when-archimate-models-meets-compound-constrained-graphs-w","title":"When ArchiMate Models meets Compound constrained graphs with CytoscapeCola","thumbnail":"fb3596d6efcfa9fc62cdc3d796e8ea3ba892b2044b388da5a08bc2affba32bfe","access_level":"public","create_time":"$D2021-10-28T14:55:31.214Z","update_time":"$D2022-11-17T08:28:54.525Z","view_time":null,"first_public_time":"$D2021-10-28T15:06:18.069Z","fork":true,"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":1427,"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":5,"collection":{"id":"af457bad8ad84538","slug":"archimatecg","title":"ArchiCG","owner":{"id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay"}},"type":"notebook","body":{"title":"When ArchiMate Models meets Compound constrained graphs with CytoscapeCola","cells":[{"id":0,"value":"md`# When ArchiMate Models meets Compound constrained graphs with CytoscapeCola`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1424,"value":"","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1364,"value":"myGraph = (items, myProduct, ASD_DMN, specializedActorsitems2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$36","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":193,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"

ArchiMateCG Code

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"function renderNode(ele) {\n console.log(ele.data(\"id\"));\n console.log(ele.type === undefined);\n const iconColor = \"blue\";\n const size = 50; // may need to calculate this yourself\n const iconResize = 1; // adjust this for more \"padding\" (bigger number = more smaller icon)\n const width = size;\n const height = size;\n const type = ele.data(\"type\");\n const archimate = ArchiMate(type);\n const specialization = ele.data(\"specialization\");\n var icon = archimate.svg;\n const dColor = propertyColor(ele.data(coloredProperty));\n if (specialization === undefined) {\n } else {\n icon = ArchiMate(specialization).svg;\n }\n\n return {\n icon: icon,\n height,\n width,\n dColor\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":934,"value":"function getEdgeOptions() {\n const groupEdgesOfSameTypeOnCollapse = document.getElementById(\"groupEdges\")\n .checked;\n const allowNestedEdgeCollapse = document.getElementById(\n \"allowNestedEdgeCollapse\"\n ).checked;\n return {\n groupEdgesOfSameTypeOnCollapse: groupEdgesOfSameTypeOnCollapse,\n allowNestedEdgeCollapse: allowNestedEdgeCollapse\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"ArchiMateCG = require(\"cytoscape@3.20.0/dist/cytoscape.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"cytoscapeCola = (\n await import(\"https://cdn.skypack.dev/cytoscape-cola@2.5.0?min\")\n).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"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":1392,"value":"bubbleset = (\n await import(\"https://cdn.skypack.dev/cytoscape-bubblesets@3.1.0?min\")\n).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"edgeConnections = (await import(\n \"https://cdn.skypack.dev/cytoscape-edge-connections@latest@min\"\n)).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"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":661,"value":"ctxmenu = (\n await import(\n \"https://cdn.skypack.dev/pin/cytoscape-cxtmenu@v3.4.0-DDym3T9qq4N2q728pLCg/mode=imports,min/optimized/cytoscape-cxtmenu.js\"\n )\n).default","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":950,"value":"propertyValueColors = d3.scaleOrdinal(\n [\"securityLevel1\", \"securityLevel2\", \"securityLevel3\", undefined],\n [\"red\", \"blue\", \"green\", \"white\"]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"propertyColor = d3.scaleOrdinal(\n propertyValueColors.domain(),\n propertyValueColors.range()\n)","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"},{"id":1382,"value":"nonMaxWidth = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 34:"$33:body"