From e5d79ea6fb2d17a7494b654a0d96cb5f4c86e1df Mon Sep 17 00:00:00 2001
From: Tobias <tobias_weise@gmx.de>
Date: Thu, 14 Aug 2025 18:47:12 +0200
Subject: [PATCH] dynamic example

---
 dynamic_usage_example.html | 10 ++++------
 usage_example.html         |  4 ++--
 widget.js                  | 32 +++++++++++++++-----------------
 3 files changed, 21 insertions(+), 25 deletions(-)
 mode change 100755 => 100644 dynamic_usage_example.html
 mode change 100755 => 100644 usage_example.html
 mode change 100755 => 100644 widget.js
diff --git a/dynamic_usage_example.html b/dynamic_usage_example.html
old mode 100755
new mode 100644
index 2543a37..ad8389b
--- a/dynamic_usage_example.html
+++ b/dynamic_usage_example.html
@@ -8,24 +8,22 @@
     <script src="widget.js"></script>
 </head>
 <body>
-    <net-graph id="graph2" weighted="true" style="border-style: dotted; width:800px; height:600px;">
+    <net-graph id="graph2" weighted="true" style="width:800px; height:600px;">
         {
             "nodes": [
-                [ 1, { "radius": 5, "color": "yellow"} ],
+                [ "orange", { "radius": 5, "color": "orange"} ],
                 [ 2, { "radius": 15, "color": "green"} ],
                 [ 3, { "radius": 25, "color": "red"} ]
             ],
             "edges": [
-                [1, 2, {"color": "red"}]
+                ["orange", 2]
             ]
         }
     </net-graph>
 
 
 
-    <net-graph id="graph" weighted="true" style="border-style: dotted; width:800px; height:600px;" />
-
-
+    <net-graph id="graph" weighted="true" style="width:800px; height:600px;" />
 
     <script>
         let ele = document.getElementById("graph");
diff --git a/usage_example.html b/usage_example.html
old mode 100755
new mode 100644
index c065a1d..2752855
--- a/usage_example.html
+++ b/usage_example.html
@@ -11,8 +11,8 @@
     <net-graph style="border-style: dotted; width:800px; height:600px;">
         {
             "nodes": [
-                [ 1, { "radius": 5, "color": "yellow"} ],
-                [ 2, { "radius": 15, "color": "green"} ],
+                [ 1, { "radius": 5, "color": "yellow", "label": "Sun"} ],
+                [ 2, { "radius": 15, "color": "green", "label": "Jupyter"} ],
                 [ 3, { "radius": 25, "color": "red"} ]
             ],
             "edges": [
diff --git a/widget.js b/widget.js
old mode 100755
new mode 100644
index 51d6c22..2d74ba0
--- a/widget.js
+++ b/widget.js
@@ -19,17 +19,16 @@ class NetGraphElement extends HTMLElement {
         let style = this.hasAttribute('style') ? this.getAttribute('style') : "";
         let weighted = this.hasAttribute('weighted') ? JSON.parse(this.getAttribute('weighted')) : false;
         let withLabels = this.hasAttribute('withLabels') ? JSON.parse(this.getAttribute('withLabels')) : true;
+        let label_color = this.hasAttribute('labelColor') ? this.getAttribute('labelColor') : "black";
 
         this.content_div.style = style;
         let that = this;
 
-
-
         jsnx.draw(that.G, {
             element: that.content_div,
             weighted,
             withLabels,
-            labelStyle: {fill: 'white'},
+            labelStyle: {fill: label_color},
             edgeStyle: {
                 'stroke-width': 5,
                 fill: d => d.data[0].color
@@ -38,28 +37,28 @@ class NetGraphElement extends HTMLElement {
                 fill: d => d.data.color
             },
             nodeAttr: {
-                r: d => d.data.radius | 10
+                r: d => d.data.radius | 10,
+                title: d => d.label
             }
         }, true); //true ensures redrawing
 
-
         this.slot_ele.addEventListener('slotchange', e => {
-            try{
-                let text = that.innerText.trim();
-                let{nodes, edges} = JSON.parse(text);
-                that.G.addNodesFrom(nodes, {color: 'black'}  );
-                that.G.addEdgesFrom(edges, {color: 'black'}  );
-            }
-            catch(e){
+            let text = that.innerText.trim();
+            let{nodes, edges} = JSON.parse(text);
 
+            for(let[id, data] of nodes){
+                that.G.addNode(id, data);
+            }
+
+            for(let[a, b, data] of edges){
+                that.G.addEdge(a, b, data);
             }
 
-            
             jsnx.draw(that.G, {
                 element: that.content_div,
                 weighted,
                 withLabels,
-                labelStyle: {fill: 'white'},
+                labelStyle: {fill: label_color},
                 edgeStyle: {
                     'stroke-width': 5,
                     fill: d => d.data[0].color
@@ -68,11 +67,10 @@ class NetGraphElement extends HTMLElement {
                     fill: d => d.data.color
                 },
                 nodeAttr: {
-                    r: d => d.data.radius | 10
+                    r: d => d.data.radius | 10,
+                    title: d => d.label
                 }
             }, true); //true ensures redrawing
-            
-
 
             that.slot_ele.style.display = "none";
             that.content_div.children[0].setAttribute("width", that.content_div.style.width);
