emmo-repo · jsimonclark · Jun 17, 2024 · May 23, 2024 · Jun 17, 2024 · Jun 17, 2024
diff --git a/catalog-v001.xml b/catalog-v001.xml
@@ -3,9 +3,9 @@
 <uri id="Imports Wizard Entry" name="https://w3id.org/emmo/1.0.0-beta7" uri="https://raw.githubusercontent.com/emmo-repo/EMMO/1.0.0-beta7/emmo.ttl"/>
   <group id="Folder Repository, directory=, recursive=true, Auto-Update=false, version=2" prefer="public" xml:base="">
     <uri name="https://w3id.org/emmo/domain/chemicalsubstance/0.4.0-beta/chemicalsubstance" uri="https://raw.githubusercontent.com/emmo-repo/domain-chemicalsubstance/main/chemicalsubstance.ttl"/>
-    <uri name="https://w3id.org/emmo/domain/chameo/1.0.0-beta3/chameo" uri="https://raw.githubusercontent.com/emmo-repo/domain-characterisation-methodology/version-update-emmo-1.0.0-beta7/chameo.ttl"/>
-    <uri name="https://w3id.org/emmo/domain/electrochemistry/0.12.1-beta/electrochemistry" uri="./electrochemistry.ttl"/>
-    <uri name="https://w3id.org/emmo/domain/electrochemistry/0.12.1-beta/electrochemicalquantities" uri="./electrochemicalquantities.ttl"/>
+    <uri name="https://w3id.org/emmo/domain/characterisation-methodology/chameo" uri="https://raw.githubusercontent.com/emmo-repo/domain-characterisation-methodology/main/chameo.ttl"/>
+    <uri name="https://w3id.org/emmo/domain/electrochemistry/0.13.0-beta/electrochemistry" uri="./electrochemistry.ttl"/>
+    <uri name="https://w3id.org/emmo/domain/electrochemistry/0.13.0-beta/electrochemicalquantities" uri="./electrochemicalquantities.ttl"/>
 
     <uri name="https://w3id.org/emmo/1.0.0-beta7/mereocausality"                  uri="https://raw.githubusercontent.com/emmo-repo/EMMO/1.0.0-beta7/mereocausality/mereocausality.ttl"/>
 

diff --git a/docs/scripts/electrode_example.py b/docs/scripts/electrode_example.py
@@ -0,0 +1,47 @@
+import networkx as nx
+from pyvis.network import Network
+
+# Create a directed graph
+G = nx.DiGraph()
+nodes = [
+    "CoatedElectrode", "PositiveElectrode", "ElectrodeCoating",
+    "CurrentCollector", "ActiveMaterial", "ConductiveAdditive", "Binder"
+]
+edges = [
+    ("PositiveElectrode", "CoatedElectrode", {"label": "isA"}),
+    ("PositiveElectrode", "ElectrodeCoating", {"label": "hasCoating"}),
+    ("PositiveElectrode", "CurrentCollector", {"label": "hasCurrentCollector"}),
+    ("ElectrodeCoating", "ActiveMaterial", {"label": "hasActiveMaterial"}),
+    ("ElectrodeCoating", "ConductiveAdditive", {"label": "hasConstituent"}),
+    ("ConductiveAdditive", "Binder", {"label": "hasConstituent"})
+]
+
+# Add nodes and edges to the graph
+G.add_nodes_from(nodes)
+G.add_edges_from([(src, dst, attr) for src, dst, attr in edges])
+
+# Setup network visualization
+net = Network(height="800px", width="600px", directed=True, bgcolor="#ffffff", font_color="black")
+net.force_atlas_2based(gravity=-800, central_gravity=0.05, spring_length=200, spring_strength=0.05, damping=0.4)
+
+# Manually set initial positions to create a structured tree layout
+positions = {
+    "PositiveElectrode": (0, 0),
+    "CoatedElectrode": (0, -200),
+    "ElectrodeCoating": (-300, 100),
+    "CurrentCollector": (300, 100),
+    "ActiveMaterial": (-450, 200),
+    "ConductiveAdditive": (-150, 200),
+    "Binder": (-150, 300)
+}
+
+# Add nodes with positions and settings for better layout
+for node, position in positions.items():
+    net.add_node(node, label=node, title=node, x=position[0], y=position[1], color="#f0ad4e", size=35)
+
+# Add edges with specific styles and smooth curves
+for src, dst, attr in edges:
+    net.add_edge(src, dst, label=attr['label'], color="#007bff", width=2, smooth={'type': 'curved', 'roundness': 0.2})
+
+# Save the network graph as an HTML file
+net.write_html("network.html")
diff --git a/docs/scripts/graph.html b/docs/scripts/graph.html
@@ -0,0 +1,155 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+
+            <script src="lib/bindings/utils.js"></script>
+            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/dist/vis-network.min.css" integrity="sha512-WgxfT5LWjfszlPHXRmBWHkV2eceiWTOBvrKCNbdgDYTHrT2AeLCGbF4sZlZw3UMN3WtL0tGUoIAKsu8mllg/XA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.2/dist/vis-network.min.js" integrity="sha512-LnvoEWDFrqGHlHmDD2101OrLcbsfkrzoSpvtSQtxK3RMnRV0eOkhhBN2dXHKRrUU8p2DGRTk35n4O8nWSVe1mQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+
+<center>
+<h1></h1>
+</center>
+
+<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
+<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
+        <link
+          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
+          crossorigin="anonymous"
+        />
+        <script
+          src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+          integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
+          crossorigin="anonymous"
+        ></script>
+
+
+        <center>
+          <h1></h1>
+        </center>
+        <style type="text/css">
+
+             #mynetwork {
+                 width: 1000px;
+                 height: 1000px;
+                 background-color: #222222;
+                 border: 1px solid lightgray;
+                 position: relative;
+                 float: left;
+             }
+
+
+
+
+
+
+        </style>
+    </head>
+
+
+    <body>
+        <div class="card" style="width: 100%">
+
+
+            <div id="mynetwork" class="card-body"></div>
+        </div>
+
+
+
+
+        <script type="text/javascript">
+
+              // initialize global variables.
+              var edges;
+              var nodes;
+              var allNodes;
+              var allEdges;
+              var nodeColors;
+              var originalNodes;
+              var network;
+              var container;
+              var options, data;
+              var filter = {
+                  item : '',
+                  property : '',
+                  value : []
+              };
+
+
+
+
+
+              // This method is responsible for drawing the graph, returns the drawn network
+              function drawGraph() {
+                  var container = document.getElementById('mynetwork');
+
+
+
+                  // parsing and collecting nodes and edges from the python
+                  nodes = new vis.DataSet([{"color": "#97c2fc", "font": {"color": "white"}, "id": "Electrode", "label": "Electrode", "link": null, "shape": "dot", "title": "https://example.com/Electrode", "x": 0, "y": 0}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "ActiveMaterial", "label": "ActiveMaterial", "link": null, "shape": "dot", "title": "https://example.com/ActiveMaterial", "x": 150, "y": 150}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "ClassC", "label": "ClassC", "link": null, "shape": "dot", "title": "https://example.com/classC", "x": -150, "y": 150}, {"color": "#97c2fc", "font": {"color": "white"}, "id": "ClassD", "label": "ClassD", "link": null, "shape": "dot", "title": "https://example.com/classD", "x": 0, "y": 300}]);
+                  edges = new vis.DataSet([{"arrows": "to", "font": {"size": 18}, "from": "Electrode", "label": "hasActiveMaterial", "length": 300, "to": "ActiveMaterial", "width": 5}, {"arrows": "to", "font": {"size": 18}, "from": "Electrode", "label": "label2", "length": 300, "to": "ClassC", "width": 5}, {"arrows": "to", "font": {"size": 18}, "from": "ActiveMaterial", "label": "label3", "length": 300, "to": "ClassD", "width": 5}]);
+
+                  nodeColors = {};
+                  allNodes = nodes.get({ returnType: "Object" });
+                  for (nodeId in allNodes) {
+                    nodeColors[nodeId] = allNodes[nodeId].color;
+                  }
+                  allEdges = edges.get({ returnType: "Object" });
+                  // adding nodes and edges to the graph
+                  data = {nodes: nodes, edges: edges};
+
+                  var options = {
+    "configure": {
+        "enabled": false
+    },
+    "edges": {
+        "color": {
+            "inherit": true
+        },
+        "smooth": {
+            "enabled": true,
+            "type": "dynamic"
+        }
+    },
+    "interaction": {
+        "dragNodes": true,
+        "hideEdgesOnDrag": false,
+        "hideNodesOnDrag": false
+    },
+    "physics": {
+        "enabled": true,
+        "stabilization": {
+            "enabled": true,
+            "fit": true,
+            "iterations": 1000,
+            "onlyDynamicEdges": false,
+            "updateInterval": 50
+        }
+    }
+};
+
+
+
+
+
+
+                  network = new vis.Network(container, data, options);
+
+
+
+
+
+
+
+
+
+
+                  return network;
+
+              }
+              drawGraph();
+        </script>
+    </body>
+</html>
diff --git a/docs/scripts/graphviz_test.py b/docs/scripts/graphviz_test.py
@@ -0,0 +1,22 @@
+import networkx as nx
+from pyvis.network import Network
+
+# Create a graph object
+G = nx.Graph()
+
+# Add nodes and edges to the graph
+G.add_node("ClassA", url="https://example.com/classA")
+G.add_node("ClassB", url="https://example.com/classB")
+G.add_node("ClassC", url="https://example.com/classC")
+G.add_node("ClassD", url="https://example.com/classD")
+G.add_edges_from([("ClassA", "ClassB"), ("ClassA", "ClassC"), ("ClassB", "ClassD")])
+
+# Convert to GraphML format
+nx.write_graphml(G, "graph.graphml")
+
+# Load the graph into a pyvis network object
+net = Network(height="800px", width="100%", notebook=True)
+net.from_nx(G)
+
+# Export the interactive visualization to HTML
+net.show("graph.html")
diff --git a/docs/scripts/jsonld_to_graph.py b/docs/scripts/jsonld_to_graph.py
@@ -0,0 +1,95 @@
+import json
+import networkx as nx
+from pyvis.network import Network
+import requests
+
+def fetch_context(context_url):
+    try:
+        response = requests.get(context_url)
+        if response.status_code == 200:
+            temp = response.json()
+            context = temp['@context']
+            return context
+        else:
+            return {}
+    except requests.RequestException:
+        return {}
+
+def parse_node(graph, data, context, parent=None, relation=None):
+    node_type = data.get('@type', 'Unknown')
+    if isinstance(node_type, list):
+        node_type = ', '.join(node_type)
+
+    node_id = f"{node_type} ({id(data)})"
+    node_label = node_type
+    node_url = context.get(node_type, '') if isinstance(context, dict) else ''
+
+    graph.add_node(node_id, label=node_label, url=node_url)
+
+    if parent:
+        graph.add_edge(parent, node_id, label=relation)
+
+    for key, value in data.items():
+        if key not in ['@type', '@context', 'rdfs:comment']:
+            if isinstance(value, dict):
+                parse_node(graph, value, context, node_id, key)
+            elif isinstance(value, list):
+                for item in value:
+                    if isinstance(item, dict):
+                        parse_node(graph, item, context, node_id, key)
+
+def visualize_graph_from_jsonld(jsonld):
+    data = json.loads(jsonld)
+    context_data = data.get('@context', {})
+
+    # Handle context if it's a URL
+    context = fetch_context(context_data) if isinstance(context_data, str) else context_data
+
+    G = nx.DiGraph()
+    parse_node(G, data, context)
+
+    net = Network(height="800px", width="1000px", directed=True, bgcolor="#ffffff", font_color="black")
+    # Adjusting the physics for better layout
+    net.barnes_hut(gravity=-8000, central_gravity=0.3, spring_length=200, spring_strength=0.05, damping=0.09, overlap=0)
+
+    for node, node_attrs in G.nodes(data=True):
+        net.add_node(node, label=node_attrs['label'], title=node_attrs['url'], url=node_attrs.get('url', '#'))
+
+    for src, dst, data in G.edges(data=True):
+        net.add_edge(src, dst, label=data['label'], font={'align': 'top'}, smooth={'type': 'horizontal'})
+
+    net.write_html("network_graph.html")
+
+
+# Example JSON-LD data
+jsonld_description = """
+{
+    "@context": "https://w3id.org/emmo/domain/battery/context/context",
+    "@type": "BatteryCell",
+    "hasPositiveElectrode":{
+        "@type": "CoatedElectrode",
+        "hasCoating": {
+            "@type": "ElectrodeCoating",
+            "hasActiveMaterial": {
+                "@type": "LithiumIronPhosphate",
+                "rdfs:comment": "for example"
+            },
+            "hasConstituent": [
+                {
+                    "@type": "Binder"
+                },
+                {
+                    "@type": "ConductiveAdditive"
+                }
+            ]
+        },
+        "hasCurrentCollector": {
+            "@type": ["CurrentCollector", "Aluminium"],
+            "rdfs:comment": "for example"
+        }
+    }
+}
+"""
+
+# Run the function with the provided JSON-LD
+visualize_graph_from_jsonld(jsonld_description)