37:null 38:["$","title",null,{"children":"When ArchiMate Models meets Compound constrained graphs with CytoscapeCola Expand Collapse | Figay | Observable"}] 3e:T48d,

This page contains a port of the demonstrator for the Expand-Collapse extension of Cytoscape.js and an adpation to ArchiMate modeling.

The port is a port on Observable notebook, with distribution of the code on different cells and adaptation of the style to a notebook.

The adapation to ArchiMate modeling consisted in adding a type respectively to nodes and edges corresponding respectively to ArchiMate elements and ArchiMate relationships within the data. Visually, an SVG icon corresponding to the Archimate language was used for each node and the appropriate visual definition for each relations was used for drawing the associated edges.

In addition, specific icons where used for some objects which are not part of the ArchiMate language, for model, group, view, folder, package and module concepts.

The definition of SVG icons and of functions returning the SVG for each type of model elements corresponding to node is done by a dedicated notebook, which will also return all kind of information related to the ArchiMate language and specifications, i.e. not only the icons but also the definitions given by the standard.

3f:Tc29,menu = html`

General

Nodes

Clustering depth:

Apply Markov clustering on load

Edges

Group edges of similar type

Allow nested edge collapse

`40:T875,

In addition to just provide an icon for each node and to draw properly the edge in order to correspond to the visual ArchiMate represenation of relationships, some specific adaptation have (TBD - let's consider it as a backlog) to be considered for the demonstrator used as a starting point:

to define an icon corresponding to a node without type, in particular for those created with markov clustering
to add cola constraints in order to prevents nodes and blocks to overlap when moving them, like shown with the cola demonstrator for "Metabolic Pathway: Sucrose Breakdown"
to indicate without having to select them the node which can be expanded
to create a function for drawing the graph corresponding to a compound node
to hide the icon of a compound node
to put the icon of a compound node to top right in the corresponding rectangle, plus the name at the left side of this icon, e.g. as for Archi.
to filter the kind of node and hierarchy to be reprented dynamically
to provide a set of visualization template associated to a set of viewpoints for ArchiMate models
to provide a full page option for visualizing the graph
to indicate the layout to apply as a variable in the notebook with a selection list
to support the options and extra information for access and influence relationships
to replace the SVG icon with a SVG box with different sections: name + icon(s), label, description, properties. Eventually to display a more important set of information for each selected model element. Similar but more sophisticated than what was made for vocabulary map notebook
to provide export scripts from Archi for creating datasets for compound graph visualisation
to replace ArchiMate icon by used stereotypes icons, if possible with a selector button
to display on the svg box for each node both ArchiMate construct and stereotype icons

When ArchiMate Models meets Compound constrained graphs with CytoscapeCola Expand Collapse

{

data: {

id: \"identifier\",

type: \"ArchiMateModelElementType\",

name:\"ArchiMateNameProperty,

label:\"ArchiMateLabel,

documentation:\"ArchiMateDocumentationProperty,

--- plus all other properties created in an Archimate model --

group: \"nodes\"

}

{

data: {

id: \"identifier\",

source: \"sourceNodeId\",

target: \"targetNodeId\",

type: \"ArchiMateModelElementType\",

label:\"ArchiMateNameProperty,

name:\"ArchiMateNameProperty,

documentation:\"ArchiMateDocumentationProperty,

--- plus all other properties created in an Archimate model --

group: \"nodes\"

}

{

data: {

id: \"identifier\",

source: \"sourceNodeId\",

target:strong> \"targetNodeId\",

parent: \"parentNodeId\",

type: \"ArchiMateModelElementType\",

rtype: \"RelationTypeToParent\",

label:\"ArchiMateNameProperty,

name:\"ArchiMateNameProperty,

documentation:\"ArchiMateDocumentationProperty,

--- plus all other properties created in an Archimate model --

group: \"nodes\"

}