dataviz archimate

app/dataviz/archimate-graph-explorer.md

@@ -0,0 +1,13 @@
+# archimate-graph-explorer
+
+The ArchiMate Graph Explorer is a web application    
+which renders an interactive force directed graph   
+of an ArchiMate model.
+
+Supports [ArchiMate Exchange Format](https://www.opengroup.org/open-group-archimate-model-exchange-file-format) (.xml) or [Archi](https://www.archimatetool.com/) (.archimate) files.
+
+Supports the ArchiMate 3.2 specification.
+
+More details and demos at: https://declanbright.com/archimate-graph-explorer
+
+![graph explorer](archimate-graph-explorer.webp)

app/dataviz/archimate-graph-explorer/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Declan Bright
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/dataviz/archimate-graph-explorer/components/dataAccess.js

@@ -0,0 +1,90 @@
+
+import * as dataParserExchangeFormat from './dataParserExchangeFormat.js';
+import * as dataParserArchiFormat from './dataParserArchiFormat.js';
+
+const graphDataStoreKey = "archiGraphDataStore";
+
+const requestDataFromServer = (modelPath, callback) => {
+    fetch(modelPath)
+        .then(response => {
+            if (!response.ok) {                
+                throw new Error(response.statusText);
+            }            
+            return response.text()
+        })
+        .then(xmlString => {
+            processModelFile(xmlString);
+            callback();
+        })
+        .catch(error => {
+            const msg = `Error retrieving the model file from the server, please check the modelPath in settings \r\n\r\n${error}`;
+            console.error(msg);
+            alert(msg);
+        });
+}
+
+const dataExistsInStore = () => {
+    return ((sessionStorage.getItem(graphDataStoreKey) === null) ? false : true);
+}
+
+const requestDataFromStore = () => {
+    if (!dataExistsInStore()) {
+        alert("Ooops, that's not good, we've lost the data, please reload the app ....");
+        return JSON.parse('{"nodes": [], "links": []}');
+    }
+    else {
+        return JSON.parse(sessionStorage.getItem(graphDataStoreKey));
+    }
+}
+
+const deleteDataFromStore = () => {
+    if (sessionStorage.getItem(graphDataStoreKey) !== null) {
+        sessionStorage.removeItem(graphDataStoreKey);
+    }
+}
+
+const modelOverview = () => {
+    const graph = requestDataFromStore();
+
+    const modelName = graph.modelName;
+    const modelDocumentation = graph.modelDocumentation;
+
+    return { modelName, modelDocumentation };
+}
+
+const processModelFile = (xmlString) => {
+
+    const xml = new window.DOMParser().parseFromString(xmlString, "text/xml");
+    if (xml.querySelectorAll("parsererror").length > 0) {
+        const msg = `Error parsing the model file \r\n\r\n${ xml.querySelector("parsererror > div").textContent }`;
+        console.log();
+        alert(msg);
+    }    
+
+    try {
+        // Determine if Archi file or ArchiMate Model Exchange Format
+        if (xml.querySelector('model') !== null) {
+            if (xml.querySelector('model').namespaceURI === "http://www.archimatetool.com/archimate") {
+                // Archi file    
+                sessionStorage.setItem(graphDataStoreKey, JSON.stringify(dataParserArchiFormat.convertXmlToJson(xml)));
+            }
+            else {
+                // ArchiMate Model Exchange Format file
+                sessionStorage.setItem(graphDataStoreKey, JSON.stringify(dataParserExchangeFormat.convertXmlToJson(xml)));
+            }
+        }
+    } catch (error) {
+        const msg = `Error parsing the model file, it must be a valid ArchiMate Model Exchange Format or Archi file \r\n\r\n${error}`;
+        console.error(msg);
+        alert(msg);
+    }
+}
+
+export { 
+    requestDataFromServer, 
+    dataExistsInStore,
+    requestDataFromStore,
+    deleteDataFromStore,
+    processModelFile,
+    modelOverview
+}; 

app/dataviz/archimate-graph-explorer/components/dataParserArchiFormat.js

@@ -0,0 +1,94 @@
+
+const formatType = (xsiType, junctionType) => {
+    if (xsiType === "archimate:Junction") {
+        if (junctionType == "or") {
+            return "OrJunction";
+        }
+        else {
+            return "AndJunction";
+        }
+    } 
+
+    return xsiType.replace("archimate:", "");
+}
+
+const parseNodesFromXml = (xml) => {
+    // get all elements, except those in the relations and diagrams folders
+    const nodes = [].map.call(xml.querySelectorAll('model > folder:not([type="relations"],[type="diagrams"]) element'), (e) => {
+        return {
+            id: e.getAttribute("id"),         
+            type: formatType(e.getAttribute("xsi:type"), e.getAttribute("type")),
+            name: (e.getAttribute("name") ? e.getAttribute("name") : ""), 
+            documentation: (e.querySelector("documentation") ? e.querySelector("documentation").textContent : ""),
+            properties: ([].map.call(e.querySelectorAll("property"), (p) => {
+                return { 
+                    name: p.getAttribute("key") ?? "",
+                    value: p.getAttribute("value") ?? ""
+                };
+            })).reduce((map, obj) => {
+                map[obj.name.toLowerCase()] = obj.value;
+                return map;
+            }, {})
+        };
+    });
+
+    return nodes;
+};
+
+const accessTypeMap = {
+    1: "Read",
+    2: "Write",
+    3: "ReadWrite"
+};
+
+const parseLinksFromXml = (xml) => {
+    const links = [].map.call(xml.querySelectorAll('folder[type="relations"] element'), (r) => {
+        return {
+            id: r.getAttribute("id"),
+            type: r.getAttribute("xsi:type").replace("archimate:", "").replace("Relationship", ""),
+            name: (r.getAttribute("name") ? r.getAttribute("name") : ""), 
+            documentation: (r.querySelector("documentation") ? r.querySelector("documentation").textContent : ""),
+            source: r.getAttribute("source"),
+            target: r.getAttribute("target"),
+            accessType: accessTypeMap[r.getAttribute("accessType")] ?? null,
+            properties: ([].map.call(r.querySelectorAll("property"), (p) => {
+                return { 
+                    name: p.getAttribute("key"),
+                    value: p.getAttribute("value")
+                };
+            })).reduce((map, obj) => {
+                map[obj.name.toLowerCase()] = obj.value;
+                return map;
+            }, {})
+        };
+    });
+
+    return links;
+};
+
+const convertXmlToJson = (xml) => {
+    const modelName = xml.querySelector("model").getAttribute("name");
+    const modelDocumentation = xml.querySelector("model > purpose") ? xml.querySelector("model > purpose").textContent : "";
+
+    const nodes = parseNodesFromXml(xml);
+    const links = parseLinksFromXml(xml);
+
+    const graphDataJson = {
+        modelName: modelName,
+        modelDocumentation: modelDocumentation,
+        nodes: nodes,
+        links: links
+    };
+
+    return graphDataJson;
+};
+
+const exportForTesting = {
+    parseNodesFromXml,
+    parseLinksFromXml
+}
+
+export { 
+    convertXmlToJson,
+    exportForTesting
+}; 

app/dataviz/archimate-graph-explorer/components/dataParserExchangeFormat.js

@@ -0,0 +1,91 @@
+
+const parsePropertyDefinitionsFromXml = (xml) => {
+    // Create a JSON map of the property definitions from the exchange format file xml
+    const propertyDefinitionsMap = [].map.call(xml.querySelectorAll("propertyDefinition"), (e) => {
+        return {
+            propertyDefinitionRef: e.getAttribute("identifier"),
+            name: e.querySelector("name").textContent
+        };
+    }).reduce((map, obj) => {
+        map[obj.propertyDefinitionRef] = obj.name;
+        return map;
+    }, {});
+
+    return propertyDefinitionsMap;
+};
+
+const parseNodesFromXml = (xml, propertyDefinitionsMap) => {
+    const nodes = [].map.call(xml.querySelectorAll("element"), (e) => {
+        return {
+            id: e.getAttribute("identifier"),
+            type: e.getAttribute("xsi:type"),
+            name: (e.querySelector("name") ? e.querySelector("name").textContent : ""), 
+            documentation: (e.querySelector("documentation") ? e.querySelector("documentation").textContent : ""), 
+            properties: ([].map.call(e.querySelectorAll("property"), (p) => {
+                return { 
+                    name: propertyDefinitionsMap[p.getAttribute("propertyDefinitionRef")],
+                    value: p.querySelector("value").textContent
+                };
+            })).reduce((map, obj) => {
+                map[obj.name.toLowerCase()] = obj.value;
+                return map;
+            }, {})
+        };
+    });
+
+    return nodes;
+};
+
+const parseLinksFromXml = (xml, propertyDefinitionsMap) => {
+    const links = [].map.call(xml.querySelectorAll("relationship"), (r) => {
+        return {
+            id: r.getAttribute("identifier"),
+            type: r.getAttribute("xsi:type"),
+            name: (r.querySelector("name") ? r.querySelector("name").textContent : ""), 
+            documentation: (r.querySelector("documentation") ? r.querySelector("documentation").textContent : ""),
+            source: r.getAttribute("source"),
+            target: r.getAttribute("target"),
+            accessType: r.getAttribute("accessType"),
+            properties: ([].map.call(r.querySelectorAll("property"), (p) => {
+                return { 
+                    name: propertyDefinitionsMap[p.getAttribute("propertyDefinitionRef")],
+                    value: p.querySelector("value").textContent
+                };
+            })).reduce((map, obj) => {
+                map[obj.name.toLowerCase()] = obj.value;
+                return map;
+            }, {})
+        };
+    });
+
+    return links;
+};
+
+const convertXmlToJson = (xml) => {
+    const modelName = xml.querySelector("model > name") ? xml.querySelector("model > name").textContent : "";
+    const modelDocumentation = xml.querySelector("model > documentation") ? xml.querySelector("model > documentation").textContent : "";
+
+    const propertyDefinitionsMap = parsePropertyDefinitionsFromXml(xml);
+    const nodes = parseNodesFromXml(xml, propertyDefinitionsMap);
+    const links = parseLinksFromXml(xml, propertyDefinitionsMap);
+
+    const graphDataJson = {
+        modelName: modelName,
+        modelDocumentation: modelDocumentation,
+        nodes: nodes,
+        links: links
+    };
+
+    return graphDataJson;
+};
+
+const exportForTesting = {
+    parsePropertyDefinitionsFromXml,
+    parseNodesFromXml,
+    parseLinksFromXml
+}
+
+export { 
+    convertXmlToJson,
+    exportForTesting
+};