(burr) branch main updated: ui: add toggle to show/hide input nodes in graph view

[skrawcz]

This is an automated email from the ASF dual-hosted git repository.

skrawcz pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/burr.git


The following commit(s) were added to refs/heads/main by this push:
     new 9237df20 ui: add toggle to show/hide input nodes in graph view
9237df20 is described below

commit 9237df20159dadf97e6ee88fdc7a878dad810bf1
Author: Smita Ambiger <smitaambi...@gmail.com>
AuthorDate: Wed Feb 4 00:26:10 2026 +0530

    ui: add toggle to show/hide input nodes in graph view
---
 .../ui/src/components/routes/app/GraphView.tsx     | 47 +++++++++++-----------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/telemetry/ui/src/components/routes/app/GraphView.tsx 
b/telemetry/ui/src/components/routes/app/GraphView.tsx
index ce85b823..31a5f37e 100644
--- a/telemetry/ui/src/components/routes/app/GraphView.tsx
+++ b/telemetry/ui/src/components/routes/app/GraphView.tsx
@@ -20,7 +20,7 @@
 import { ActionModel, ApplicationModel, Step } from '../../../api';
 
 import dagre from 'dagre';
-import React, { createContext, useCallback, useLayoutEffect, useRef, useState 
} from 'react';
+import React, { createContext, useLayoutEffect, useRef, useState } from 
'react';
 import ReactFlow, {
   BaseEdge,
   Controls,
@@ -250,7 +250,10 @@ const getLayoutedElements = (
   });
 };
 
-const convertApplicationToGraph = (stateMachine: ApplicationModel): 
[NodeType[], EdgeType[]] => {
+const convertApplicationToGraph = (
+  stateMachine: ApplicationModel,
+  showInputs: boolean
+): [NodeType[], EdgeType[]] => {
   const shouldDisplayInput = (input: string) => !input.startsWith('__');
   const inputUniqueID = (action: ActionModel, input: string) => 
`${action.name}:${input}`; // Currently they're distinct by name
 
@@ -285,10 +288,12 @@ const convertApplicationToGraph = (stateMachine: 
ApplicationModel): [NodeType[],
     markerEnd: { type: MarkerType.ArrowClosed, width: 20, height: 20 },
     data: { from: transition.from_, to: transition.to, condition: 
transition.condition }
   }));
-  return [
-    [...allActionNodes, ...allInputNodes],
-    [...allInputTransitions, ...allTransitionEdges]
-  ];
+  return showInputs
+    ? [
+        [...allActionNodes, ...allInputNodes],
+        [...allInputTransitions, ...allTransitionEdges]
+      ]
+    : [[...allActionNodes], [...allTransitionEdges]];
 };
 
 const nodeTypes = {
@@ -317,34 +322,25 @@ export const _Graph = (props: {
   previousActions: Step[] | undefined;
   hoverAction: Step | undefined;
 }) => {
-  const [initialNodes, initialEdges] = React.useMemo(() => {
-    return convertApplicationToGraph(props.stateMachine);
-  }, [props.stateMachine]);
+  const [showInputs, setShowInputs] = useState(true);
 
   const [nodes, setNodes] = useState<NodeType[]>([]);
   const [edges, setEdges] = useState<EdgeType[]>([]);
 
   const { fitView } = useReactFlow();
 
-  const onLayout = useCallback(
-    ({ direction = 'TB', useInitialNodes = false }): void => {
-      const opts = { direction };
-      const ns = useInitialNodes ? initialNodes : nodes;
-      const es = useInitialNodes ? initialEdges : edges;
+  useLayoutEffect(() => {
+    const [nextNodes, nextEdges] = 
convertApplicationToGraph(props.stateMachine, showInputs);
 
-      getLayoutedElements(ns, es, opts).then(({ nodes: layoutedNodes, edges: 
layoutedEdges }) => {
+    getLayoutedElements(nextNodes, nextEdges, { direction: 'TB' }).then(
+      ({ nodes: layoutedNodes, edges: layoutedEdges }) => {
         setNodes(layoutedNodes);
         setEdges(layoutedEdges);
 
         window.requestAnimationFrame(() => fitView());
-      });
-    },
-    [nodes, edges]
-  );
-
-  useLayoutEffect(() => {
-    onLayout({ direction: 'TB', useInitialNodes: true });
-  }, []);
+      }
+    );
+  }, [showInputs, props.stateMachine, fitView]);
 
   return (
     <NodeStateProvider.Provider
@@ -355,6 +351,11 @@ export const _Graph = (props: {
       }}
     >
       <div className="h-full w-full relative">
+        <label className="absolute top-2 left-2 z-10 bg-white p-2 rounded 
shadow">
+          <input type="checkbox" checked={showInputs} onChange={() => 
setShowInputs(!showInputs)} />
+          <span className="ml-2">Show Inputs</span>
+        </label>
+
         <ReactFlow
           nodes={nodes}
           edges={edges}