Add router to allow for both viz simult

graphviz/frontend/src/AppRouter.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { VizSmallConnected } from "./VizSmallConnected";
+import { VizTimeFilter } from "./VizTimeFilter";
+
+function Home() {
+  return (
+    <div>
+      <h1>Will Jeynes - LLMs for Disinformation Analysis - Graph Visualisations</h1>
+      <p><a href="#small">Default</a></p>
+      <p><a href="#time">Time-Filter</a></p>
+    </div>
+  );
+}
+
+export function AppRouter() {
+  const [route, setRoute] = useState(() => window.location.hash);
+
+  useEffect(() => {
+    const onHashChange = () => {
+      setRoute(window.location.hash);
+    };
+
+    window.addEventListener("hashchange", onHashChange);
+    return () => window.removeEventListener("hashchange", onHashChange);
+  }, []);
+  console.log(route)
+  if (route === "#small") return <VizSmallConnected />;
+  if (route === "#time") return <VizTimeFilter />;
+  return <Home />;
+}

graphviz/frontend/src/VizSmallConnected.tsx

@@ -93,7 +93,7 @@ function getConnectedComponents(nodes, links) {
   return components;
 }
 
-export function App() {
+export function VizSmallConnected() {
   const fgRef = useRef();
   const [selectedNode, setSelectedNode] = useState(null);
   const [minGraphSize, setMinGraphSize] = useState(10);
@@ -223,6 +223,7 @@ export function App() {
           maxWidth: "500px"
         }}
       >
+        <p><a href="#home">Go Home</a></p>
          <h2>Config</h2>
           <label>
             Min connected graph size: <strong>{minGraphSize}</strong>

graphviz/frontend/src/VizTimeFilter.tsx

@@ -29,11 +29,6 @@ function parseDateSafe(dateStr) {
   return d;
 }
 
-function monthsDiff(a, b) {
-  const ms = Math.abs(a - b);
-  return ms / (1000 * 60 * 60 * 24 * 30.44);
-}
-
 function buildLookupMaps(data) {
   const claimMap = new Map(data.claims.map(c => [c.id, c]));
   const eventMap = new Map(data.events.map(e => [e.id, e]));
@@ -136,7 +131,7 @@ function getConnectedComponents(nodes, links) {
   return components;
 }
 
-export function App2() {
+export function VizTimeFilter() {
   const fgRef = useRef();
   const [selectedNode, setSelectedNode] = useState(null);
   const [inputDate, setInputDate] = useState(Date.now());
@@ -261,18 +256,11 @@ export function App2() {
 
           const radius = Math.min(10, fontSize * 0.6);
 
-          let isHighlighted = false;
-
-          if (parsedInputDate && node.avgDate) {
-            const diffMonths = monthsDiff(parsedInputDate, node.avgDate);
-            isHighlighted = diffMonths <= 6;
-          }
-
           ctx.fillStyle = node.type.includes("claim")
             ? "blue"
             : "green"
 
-          if (isHighlighted) {
+          if (highlightedNodeIds.has(node.id)) {
             drawRoundedRect(ctx, x, y, width, height, radius);
             ctx.fill();
             ctx.strokeStyle = "white";
@@ -291,13 +279,7 @@ export function App2() {
           node.__bckgPos = { x, y };
         }}
         nodePointerAreaPaint={(node, color, ctx) => {
-          let isHighlighted = false;
+          if (!highlightedNodeIds.has(node.id)) return;
-
-          if (parsedInputDate && node.avgDate) {
-            const diffMonths = monthsDiff(parsedInputDate, node.avgDate);
-            isHighlighted = diffMonths <= 6;
-          }
-          if (!isHighlighted) return;
 
           const dims = node.__bckgDimensions;
           const pos = node.__bckgPos;
@@ -321,11 +303,10 @@ export function App2() {
           maxWidth: "500px"
         }}
       >
-
+        <p><a href="#home">Go Home</a></p>
         <h2>Details</h2>
         {selectedNode ? (
           <div>
-
             <p><strong>Title:</strong> {selectedNode.label}</p>
             <p><strong>Date: </strong>{new Date(selectedNode.avgDate).toISOString().slice(0, 10)}</p>
             {selectedNode.members && (

graphviz/frontend/src/index.tsx

@@ -1,11 +1,12 @@
-import { createRoot } from 'react-dom/client';
+import { createRoot } from "react-dom/client";
-import { StrictMode } from 'react';
+import { StrictMode } from "react";
-import { App2 } from './App2';
+import { AppRouter } from "./AppRouter";
 
 let container = document.getElementById("app")!;
-let root = createRoot(container)
+let root = createRoot(container);
+
 root.render(
   <StrictMode>
-    <App2 />
+    <AppRouter />
   </StrictMode>
 );