From 948c80592862520dd9468536e19151738102d347 Mon Sep 17 00:00:00 2001
From: Bas Nijholt <bas@nijho.lt>
Date: Sun, 19 Jan 2025 20:32:06 -0800
Subject: [PATCH 1/4] js

---
 js/helpers.js | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/js/helpers.js b/js/helpers.js
index 9107364..decdaf0 100644
--- a/js/helpers.js
+++ b/js/helpers.js
@@ -117,7 +117,7 @@ function _getConnectedNodes(nodeSet, mode, graphvizInstance) {
   return resultSet;
 }
 
-function _highlightSelection(graphvizInstance, currentSelection, $) {
+function _highlightSelection(graphvizInstance, currentSelection, $, model) {
   let highlightedNodes = $();
   let highlightedEdges = $();
 
@@ -133,9 +133,32 @@ function _highlightSelection(graphvizInstance, currentSelection, $) {
   graphvizInstance.highlight(highlightedNodes, highlightedEdges);
   graphvizInstance.bringToFront(highlightedNodes);
   graphvizInstance.bringToFront(highlightedEdges);
+
+  // Extract node and edge IDs for trait synchronization
+  const highlightedNodeIds = highlightedNodes
+    .map(function () {
+      return $(this).data("name");
+    })
+    .get();
+
+  const highlightedEdgeIds = highlightedEdges
+    .map(function () {
+      return $(this).data("name");
+    })
+    .get();
+
+  // Update the model traits
+  model.set("highlighted_nodes", highlightedNodeIds);
+  model.set("highlighted_edges", highlightedEdgeIds);
+  model.save_changes();
 }
 
-export function handleGraphvizSvgEvents(graphvizInstance, $, currentSelection, getSelectedDirection) {
+export function handleGraphvizSvgEvents(
+  graphvizInstance,
+  $,
+  currentSelection,
+  getSelectedDirection
+) {
   // Add hover event listeners for edges
   Logger.debug("Initializing graph events");
   graphvizInstance.edges().each(function () {

From bae1fef8e5ba1de51ec44d5f7457fb8a04244cbe Mon Sep 17 00:00:00 2001
From: Bas Nijholt <bas@nijho.lt>
Date: Sun, 19 Jan 2025 20:32:21 -0800
Subject: [PATCH 2/4] trais

---
 src/graphviz_anywidget/__init__.py | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/graphviz_anywidget/__init__.py b/src/graphviz_anywidget/__init__.py
index 0cf1cb0..adfed65 100644
--- a/src/graphviz_anywidget/__init__.py
+++ b/src/graphviz_anywidget/__init__.py
@@ -38,6 +38,13 @@ class GraphvizAnyWidget(anywidget.AnyWidget):
     case_sensitive = traitlets.Bool(False).tag(sync=True)  # noqa: FBT003
     enable_zoom = traitlets.Bool(True).tag(sync=True)
     freeze_scroll = traitlets.Bool(False).tag(sync=True)  # noqa: FBT003
+    last_clicked_node = traitlets.Unicode(None, allow_none=True).tag(sync=True)
+    highlighted_nodes = traitlets.List(traitlets.Unicode(), default_value=[]).tag(
+        sync=True
+    )
+    highlighted_edges = traitlets.List(traitlets.Unicode(), default_value=[]).tag(
+        sync=True
+    )
 
 
 def graphviz_widget(

From cef4baac633fb155eff47fd61a238ef3bae2c8fb Mon Sep 17 00:00:00 2001
From: Bas Nijholt <bas@nijho.lt>
Date: Sun, 19 Jan 2025 20:32:49 -0800
Subject: [PATCH 3/4] js

---
 js/widget.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/js/widget.js b/js/widget.js
index eee2238..9a3f6a3 100644
--- a/js/widget.js
+++ b/js/widget.js
@@ -67,7 +67,13 @@ async function render({ model, el }) {
       ready: function () {
         Logger.debug(`Widget ${widgetId}: Graph plugin initialization started`);
         graphvizInstance = this;
-        handleGraphvizSvgEvents(graphvizInstance, $, currentSelection, () => selectedDirection);
+        handleGraphvizSvgEvents(
+          graphvizInstance,
+          $,
+          currentSelection,
+          () => selectedDirection,
+          model
+        );
         resolve(); // Signal that we're ready
         Logger.debug(`Widget ${widgetId}: Graph plugin initialization complete`);
       },

From 8daee97cd79282ef222cd870e61f1a5747cc81b1 Mon Sep 17 00:00:00 2001
From: Bas Nijholt <bas@nijho.lt>
Date: Sun, 19 Jan 2025 20:40:22 -0800
Subject: [PATCH 4/4] wip

---
 js/helpers.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/js/helpers.js b/js/helpers.js
index decdaf0..7aba7e7 100644
--- a/js/helpers.js
+++ b/js/helpers.js
@@ -153,12 +153,7 @@ function _highlightSelection(graphvizInstance, currentSelection, $, model) {
   model.save_changes();
 }
 
-export function handleGraphvizSvgEvents(
-  graphvizInstance,
-  $,
-  currentSelection,
-  getSelectedDirection
-) {
+export function handleGraphvizSvgEvents(graphvizInstance, $, currentSelection, getSelectedDirection, model) {
   // Add hover event listeners for edges
   Logger.debug("Initializing graph events");
   graphvizInstance.edges().each(function () {
@@ -198,7 +193,7 @@ export function handleGraphvizSvgEvents(
       currentSelection.splice(0, currentSelection.length, selectionObject);
     }
 
-    _highlightSelection(graphvizInstance, currentSelection, $);
+    _highlightSelection(graphvizInstance, currentSelection, $, model);
   });
   Logger.debug("Node click handlers attached");