Chore: Add data change docs example

memgraph · Jul 15, 2024 · 2570888 · 2570888
1 parent 08cf6e2
commit 2570888
Show file tree

Hide file tree

Showing 2 changed files with 119 additions and 0 deletions.
diff --git a/examples/example-dynamic-change.html b/examples/example-dynamic-change.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang='en' type="module">
+<head>
+  <base href=".">
+  <meta charset='UTF-8'>
+  <title>Orb | Data dynamics: Update nodes and edges data</title>
+  <script type="text/javascript" src="./orb.js"></script>
+</head>
+<style>
+  html, body {
+    height: 100%;
+    margin: 0;
+  }
+</style>
+<body>
+  <div style="display: flex; flex-direction: column; align-items: center; height: 100%;">
+    <h1>Example 7 - Data dynamics</h1>
+    <p style="width: 70%">
+      Renders a simple graph to show graph data dynamics: updating nodes and edges data.
+      In intervals of 3 seconds, 1 node gets new size and 1 node gets new color
+      (green or red) and a new border color (white or black). Node will change its 
+      unselected color to blue on node click event.
+    </p>
+
+    <!--
+      Make sure that your graph container has a defined width and height.
+      Orb will expand to any available space, but won't be visible if it's parent container is collapsed.
+    -->
+    <div id='graph' style="flex: 1; width: 100%;"></div>
+  </div>
+  <script type="text/javascript">
+    const container = document.getElementById('graph');
+
+    const nodes = [
+      { id: 0, label: 'Node A' },
+      { id: 1, label: 'Node B' },
+      { id: 2, label: 'Node C' },
+    ];
+    const edges = [
+      { id: 0, start: 0, end: 0, label: 'A -> A' },
+      { id: 1, start: 0, end: 1, label: 'A -> B' },
+      { id: 2, start: 0, end: 2, label: 'A -> C' },
+      { id: 3, start: 1, end: 2, label: 'B -> C' },
+      { id: 4, start: 2, end: 2, label: 'C -> C' },
+      { id: 5, start: 0, end: 1, label: 'A -> B' },
+    ];
+
+    const n = nodes.length - 1;
+
+    const orb = new Orb.OrbView(container);
+
+    orb.data.setDefaultStyle({
+      getNodeStyle(node) {
+        return {
+          borderColor: '#1d1d1d',
+          borderWidth: 0.6,
+          color: '#DD2222',
+          colorHover: '#e7644e',
+          colorSelected: '#e7644e',
+          fontSize: 3,
+          label: node.getData().label,
+          size: 6,
+        };
+      },
+      getEdgeStyle(edge) {
+        return {
+          color: '#999999',
+          colorHover: '#1d1d1d',
+          colorSelected: '#1d1d1d',
+          fontSize: 3,
+          width: 0.3,
+          widthHover: 0.9,
+          widthSelected: 0.9,
+          label: edge.getData().label,
+        };
+      },
+    });
+
+    // Initialize nodes and edges
+    orb.data.setup({ nodes, edges });
+
+    const randomlyChangeGraphData = () => {
+      console.log('Randomly changing graph data...');
+      setInterval(() => {
+        const firstNodeId = Math.round(Math.random() * n);
+        const secondNodeId = Math.round(Math.random() * n);
+
+        orb.data.getNodeById(firstNodeId).patchStyle({ size: Math.random() * 5 + 2 });
+        orb.data.getNodeById(secondNodeId).patchStyle({ 
+          color: Math.random() > 0.5 ? "#FF0000" : "#00FF00",
+          borderColor: Math.random() > 0.5 ? "#FFFFFF" : "#000000"
+        });
+      }, 3000);
+    }
+
+    randomlyChangeGraphData();
+
+    orb.events.on(Orb.OrbEventType.NODE_CLICK, (event) => {
+      console.log('Node clicked: ', event.node);
+      orb.data.getNodeById(event.node.getId()).patchStyle({ color: "#0000FF" });
+    });
+
+    // Render and recenter the view
+    orb.render(() => {
+      orb.recenter();
+    });
+
+  </script>
+</body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -62,5 +62,14 @@ <h1>Orb Examples</h1>
       longitude values.
     </p>
   </div>
+  <div>
+    <a href="./example-dynamic-change.html"><h3><li>Example 7 - Data dynamics</li></h3></a>
+    <p>
+      Renders a simple graph to show graph data dynamics: updating nodes and edges data.
+      In intervals of 3 seconds, 1 node gets new size and 1 node gets new color
+      (green or red) and a new border color (white or black). Node will change its 
+      unselected color to blue on node click event.
+    </p>
+  </div>
 </body>
 </html>