From 10622265fa155e922774cc8f0bd2bd85e4bb9a22 Mon Sep 17 00:00:00 2001
From: Jason Madigan <jason@jasonmadigan.com>
Date: Tue, 27 Aug 2024 16:01:57 +0100
Subject: [PATCH] 0.1.9 - some fixes to dotfile updates

---
 package.json          |  2 +-
 src/PolicyTopology.js | 27 ++++++++++++++-------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 002169a..374556f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-policy-topology",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
   "main": "src/main.js",
   "module": "src/main.js",
diff --git a/src/PolicyTopology.js b/src/PolicyTopology.js
index 09c640f..1f653e3 100644
--- a/src/PolicyTopology.js
+++ b/src/PolicyTopology.js
@@ -8,18 +8,10 @@ import './PolicyTopology.css';
 
 const PolicyTopology = ({ initialDotString }) => {
   const containerRef = useRef(null);
-  const [dotString, setDotString] = useState(initialDotString); // State for the dot string
+  const [dotString, setDotString] = useState(initialDotString);
   const [graph, setGraph] = useState(null);
 
-  // Parse the DOT string into a graph object
-  useEffect(() => {
-    if (dotString) {
-      const g = dot.read(dotString);
-      setGraph(g);
-    }
-  }, [dotString]);
-
-  // Function to handle node selection and update the graph
+  // Function to update graph when a node is selected
   const handleNodeSelection = useCallback((nodeId) => {
     if (!graph) return;
 
@@ -58,14 +50,23 @@ const PolicyTopology = ({ initialDotString }) => {
     setDotString(filteredDotString); // Update the dotString state
   }, [graph]);
 
-  // Render the graph when the component mounts or the dotString changes
+  // Parse the DOT string into a graph object when dotString changes
+  useEffect(() => {
+    if (dotString) {
+      const g = dot.read(dotString);
+      setGraph(g);
+    }
+  }, [dotString]);
+
+  // Render the graph with updates using d3-graphviz
   useEffect(() => {
     if (containerRef.current && graph) {
       const renderGraph = () => {
-        d3.select(containerRef.current).graphviz()
+        d3.select(containerRef.current)
+          .graphviz()
           .zoom(false)
           .fit(true)
-          .transition(() => d3.transition().duration(750))
+          .transition(() => d3.transition().duration(750)) // Animate transitions
           .renderDot(dotString)
           .on('end', () => {
             const nodes = containerRef.current.querySelectorAll('g.node');