init PolicyTopology with dotString, rather than filteredDot. 0.1.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-policy-topology",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "main": "src/main.js",
   "module": "src/main.js",

src/App.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback } from 'react';
 import PolicyTopology from './PolicyTopology.js';
 import PickResource from './PickResource.js';
 import ResetPolicyTopology from './ResetPolicyTopology.js';
-import DotStringEditor from './DotStringEditor.js'; // Import the new component
+import DotStringEditor from './DotStringEditor.js';
 import graphlib from 'graphlib';
 import * as dot from 'graphlib-dot';
 import './App.css';
@@ -118,20 +118,18 @@ function App() {
   `;
 
   const [dotString, setDotString] = useState(initialDotString);
-  const [filteredDot, setFilteredDot] = useState(dotString);
   const [graph, setGraph] = useState(null);
 
   useEffect(() => {
     const g = dot.read(dotString);
     setGraph(g);
-    setFilteredDot(dotString);
   }, [dotString]);
 
   const handleNodeSelection = useCallback((nodeId) => {
     if (!graph) return;
 
     if (nodeId === null) {
-      setFilteredDot(dotString);
+      setDotString(initialDotString);
       return;
     }
 
@@ -167,11 +165,11 @@ function App() {
     });
 
     const filteredDotString = dot.write(filteredGraph);
-    setFilteredDot(filteredDotString);
-  }, [graph, dotString]);
+    setDotString(filteredDotString);
+  }, [graph, initialDotString]);
 
   const resetGraph = () => {
-    setFilteredDot(dotString);
+    setDotString(initialDotString);
   };
 
   const handleDotStringChange = (newDotString) => {
@@ -186,7 +184,7 @@ function App() {
           <PickResource graph={graph} onResourceSelect={handleNodeSelection} />
           <ResetPolicyTopology onReset={resetGraph} />
         </div>
-        <PolicyTopology filteredDot={filteredDot} onNodeClick={handleNodeSelection} />
+        <PolicyTopology dotString={dotString} onNodeClick={handleNodeSelection} />
         <DotStringEditor dotString={dotString} onDotStringChange={handleDotStringChange} />
       </header>
     </div>

src/PolicyTopology.js

@@ -3,16 +3,16 @@ import * as d3 from 'd3';
 import { graphviz } from 'd3-graphviz'; // eslint-disable-line no-unused-vars
 import './PolicyTopology.css';
 
-const PolicyTopology = ({ filteredDot, onNodeClick }) => {
+const PolicyTopology = ({ dotString, onNodeClick }) => {
   const containerRef = useRef(null);
 
   useEffect(() => {
-    if (containerRef.current && filteredDot) {
+    if (containerRef.current && dotString) {
       const renderGraph = () => {
         d3.select(containerRef.current).graphviz()
           .zoom(false)
           .transition(() => d3.transition().duration(750))
-          .renderDot(filteredDot)
+          .renderDot(dotString)
           .on('end', () => {
             const nodes = containerRef.current.querySelectorAll('g.node');
             nodes.forEach(node => {
@@ -27,7 +27,7 @@ const PolicyTopology = ({ filteredDot, onNodeClick }) => {
 
       renderGraph();
     }
-  }, [filteredDot, onNodeClick]);
+  }, [dotString, onNodeClick]);
 
   return <div ref={containerRef} className="policy-topology-container" />;
 };