Allow for opening details pane after node clicked

graphviz/frontend/src/Home.tsx

@@ -25,7 +25,7 @@ export function Home() {
                             A great introduction to the dataset on a curated set of examples
                         </p>
                         <p className="text-center">
-                            Also <a className="underline" href="#3d">available in 3D</a>
+                            Also <a className="underline" href="#3d">available in 3D</a> (experimental)
                         </p>
                     </div>
 

graphviz/frontend/src/VizSmall3D.tsx

@@ -14,6 +14,7 @@ import SpriteText from 'three-spritetext';
 
 export function VizSmall3D() {
   const fgRef = useRef();
+  const detailsPanelRef = useRef();
   const [selectedNode, setSelectedNode] = useState(null);
   const [minGraphSize, setMinGraphSize] = useState(10);
   const [showLabel, setShowLabel] = useState(false);
@@ -53,7 +54,7 @@ export function VizSmall3D() {
         nodeAutoColorBy="type"
         linkColor={() => "black"}
         linkWidth={2.5}
-        onNodeClick={(node) => setSelectedNode(node)}
+        onNodeClick={(node) => { detailsPanelRef.current.open(); setSelectedNode(node)}}
         backgroundColor="white"
         nodeThreeObject={(node) => {
           const circle = new THREE.Mesh(
@@ -83,7 +84,7 @@ export function VizSmall3D() {
         }
       />
       <FloatingPanelStack>
-        <DetailsPanel selectedNode={selectedNode} data={data} />
+        <DetailsPanel selectedNode={selectedNode} data={data} ref={detailsPanelRef} />
         <FloatingPanel title={"Config"}>
           <label className="flex">
             <span className="mr-1 grow">Show Labels</span>

graphviz/frontend/src/VizSmallConnected.tsx

@@ -50,6 +50,7 @@ export function buildGraph(data) {
 
 export function VizSmallConnected() {
   const fgRef = useRef();
+  const detailsPanelRef = useRef();
   const [selectedNode, setSelectedNode] = useState(null);
   const [minGraphSize, setMinGraphSize] = useState(10);
 
@@ -122,7 +123,7 @@ export function VizSmallConnected() {
         nodeAutoColorBy="type"
         linkColor={() => "black"}
         linkWidth={2.5}
-        onNodeClick={(node) => setSelectedNode(node)}
+        onNodeClick={(node) => { detailsPanelRef.current.open(); setSelectedNode(node) }}
         linkDirectionalArrowLength={100}
         linkDirectionalArrowRelPos={0.9}
         nodeCanvasObject={(node, ctx, globalScale) => {
@@ -140,7 +141,7 @@ export function VizSmallConnected() {
           const x = node.x - width / 2;
           const y = node.y - height / 2;
 
-          const radius =  node.type.includes("claim") ? fontSize * 6 : 0;
+          const radius = node.type.includes("claim") ? fontSize * 6 : 0;
 
           // background
           ctx.fillStyle = node.type.includes("claim") ? "DarkMagenta" : "green";
@@ -175,10 +176,10 @@ export function VizSmallConnected() {
         }}
       />
       <FloatingPanelStack>
-        <DetailsPanel selectedNode={selectedNode} data={data} />
+        <DetailsPanel selectedNode={selectedNode} data={data} ref={detailsPanelRef} />
         <FloatingPanel title={"Key"}>
-          <p style={{backgroundColor: "green"}} className="text-white p-1 text-xl mb-3">Trigger Event Cluster</p>
-          <p style={{backgroundColor: "DarkMagenta"}} className="text-white p-1 text-xl rounded-3xl">Claim Cluster</p>
+          <p style={{ backgroundColor: "green" }} className="text-white p-1 text-xl mb-3">Trigger Event Cluster</p>
+          <p style={{ backgroundColor: "DarkMagenta" }} className="text-white p-1 text-xl rounded-3xl">Claim Cluster</p>
         </FloatingPanel>
         <FloatingPanel title={"Config"} defaultOpen={false}>
           <label>

graphviz/frontend/src/VizTimeFilter.tsx

@@ -89,6 +89,7 @@ function buildGraph(data) {
 
 export function VizTimeFilter() {
   const fgRef = useRef();
+  const detailsPanelRef = useRef();
   const [selectedNode, setSelectedNode] = useState(null);
   const [inputDate, setInputDate] = useState(1682353753000); //some time in 2023
   const [showAll, setShowAll] = useState(false);
@@ -204,7 +205,7 @@ export function VizTimeFilter() {
           return bothHighlighted ? "black" : "rgba(0,0,0,0)";
         }}
         linkWidth={2.5}
-        onNodeClick={(node) => setSelectedNode(node)}
+        onNodeClick={(node) => { detailsPanelRef.current.open(); setSelectedNode(node)}}
         nodeCanvasObject={(node, ctx) => {
           const label = node.label;
 
@@ -258,7 +259,7 @@ export function VizTimeFilter() {
         }}
       />
       <FloatingPanelStack bot="lg">
-        <DetailsPanel selectedNode={selectedNode} data={data} />
+        <DetailsPanel selectedNode={selectedNode} data={data} ref={detailsPanelRef} />
         <FloatingPanel title={"Key"}>
           <p style={{ backgroundColor: "green" }} className="text-white p-1 text-xl mb-3">Trigger Event Cluster</p>
           <p style={{ backgroundColor: "DarkMagenta" }} className="text-white p-1 text-xl rounded-3xl">Claim Cluster</p>

graphviz/frontend/src/utils/DetailsPanel.tsx

@@ -1,15 +1,23 @@
+import { forwardRef, useImperativeHandle, useRef } from "react";
 import { FloatingPanel } from "./FloatingPanel";
 
-export function DetailsPanel({ selectedNode, data }) {
+export const DetailsPanel = forwardRef(function DetailsPanel(
+  { selectedNode, data }, ref) {
+  const fpref = useRef();
+
+  useImperativeHandle(ref, () => ({
+    open: () => { fpref.current.open() },
+  }));
+
   return (
-    <FloatingPanel title="Details">
-      
+    <FloatingPanel title="Details" ref={fpref}>
+
       {selectedNode ? (
         <div className="space-y-3">
           <p>
             <strong>Type:</strong> {selectedNode.type_nice} Cluster
           </p>
-          
+
           <p>
             <strong>Title:</strong> {selectedNode.label}
           </p>
@@ -40,4 +48,4 @@ export function DetailsPanel({ selectedNode, data }) {
       )}
     </FloatingPanel>
   );
-}
+})

graphviz/frontend/src/utils/FloatingPanel.tsx

@@ -1,15 +1,17 @@
-import { useState } from "react";
+import { useState, forwardRef, useImperativeHandle } from "react";
 
-export function FloatingPanel({
-  title,
-  children,
-  defaultOpen = true,
-}) {
+export const FloatingPanel = forwardRef(function FloatingPanel(
+  { title, children, defaultOpen = true },
+  ref
+) {
   const [open, setOpen] = useState(defaultOpen);
 
+  useImperativeHandle(ref, () => ({
+    open: () => setOpen(true),
+  }));
+
   return (
     <div className="bg-white shadow-lg rounded-2xl w-80 overflow-hidden transition-all">
-      
       <button
         onClick={() => setOpen(!open)}
         className="w-full flex items-center justify-between px-4 py-2 bg-gray-100 hover:bg-gray-200 transition"
@@ -17,21 +19,19 @@ export function FloatingPanel({
         <span className="font-semibold">{title}</span>
 
         <span
-          className={`transform transition-transform ${
-            open ? "rotate-180" : ""
-          }`}
+          className={`transform transition-transform ${open ? "rotate-180" : ""
+            }`}
         >
           ▼
         </span>
       </button>
 
       <div
-        className={`overflow-scroll transition-all duration-300 ${
-          open ? "max-h-[50vh] p-4" : "max-h-0 p-0"
-        }`}
+        className={`overflow-scroll transition-all duration-300 ${open ? "max-h-[50vh] p-4" : "max-h-0 p-0"
+          }`}
       >
         {children}
       </div>
     </div>
   );
-}
+});