animate connected edges on click

explore-flights · May 7, 2024 · ba8d479 · ba8d479
1 parent 06826e8
commit ba8d479
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/ui/src/pages/home.tsx b/ui/src/pages/home.tsx
@@ -18,7 +18,7 @@ import {
   useNodesState,
   Node,
   Edge,
-  ReactFlowProvider, Position, Handle, NodeProps
+  ReactFlowProvider, Position, Handle, NodeProps, getConnectedEdges
 } from 'reactflow';
 import { DateTime, Duration } from 'luxon';
 import 'reactflow/dist/style.css';
@@ -78,6 +78,15 @@ export function Home() {
               onNodesChange={onNodesChange}
               onEdgesChange={onEdgesChange}
               nodeTypes={nodeTypes}
+              onNodeClick={(_, node) => {
+                const connectedEdges = getConnectedEdges([node], edges);
+                const ids = connectedEdges.map((v) => v.id);
+
+                setEdges((prev) => prev.map((edge) => {
+                  edge.animated = ids.includes(edge.id);
+                  return edge;
+                }));
+              }}
             >
               <Controls />
               <Background />