feat: support drilldown to details from topology view in react ui

Signed-off-by: Nick Mitchell <[email protected]>

Author: starpit

pdl-live-react/src/view/dataflow/CustomNode.tsx

@@ -1,14 +1,18 @@
 import { type FunctionComponent } from "react"
-import { DefaultNode, type GraphElement } from "@patternfly/react-topology"
+import {
+  DefaultNode,
+  type GraphElement,
+  type WithSelectionProps,
+} from "@patternfly/react-topology"
 
-interface CustomNodeProps {
+type CustomNodeProps = WithSelectionProps & {
   element: GraphElement
 }
 
-const CustomNode: FunctionComponent<CustomNodeProps> = ({
-  element,
-}: CustomNodeProps) => {
-  const data = element.getData()
+const CustomNode: FunctionComponent<CustomNodeProps> = (
+  props: CustomNodeProps,
+) => {
+  const data = props.element.getData()
   const ordinal = data && "ordinal" in data ? data.ordinal : undefined
   const variant = data && "variant" in data ? data.variant : undefined
   /*const content =
@@ -18,7 +22,7 @@ const CustomNode: FunctionComponent<CustomNodeProps> = ({
 
   return (
     <DefaultNode
-      element={element}
+      {...props}
       badge={(ordinal !== undefined ? `[${ordinal}] ` : "") + variant}
       badgeColor={
         variant === "Final Result"

pdl-live-react/src/view/dataflow/DataFlow.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { useNavigate, useLocation, useSearchParams } from "react-router-dom"
 
 import {
   type Model,
@@ -24,18 +25,47 @@ type Props = {
 }
 
 export default function DataFlow({ block }: Props) {
-  const [selectedIds, setSelectedIds] = useState<string[]>([])
+  const { hash } = useLocation()
+  const navigate = useNavigate()
+
+  const [selectedIds, setSelectedIds] = useState<string[]>()
+  const onSelect = useCallback(
+    (ids: string[]) => {
+      setSelectedIds(ids)
+      if (ids.length === 1) {
+        const id = ids[0].replace(/-(result|\d+)$/, "")
+        navigate(`?detail&type=block&id=${id}${hash}`)
+      }
+    },
+    [setSelectedIds, hash, navigate],
+  )
 
   const { nodes, edges } = useMemo(() => computeModel(block), [block])
 
+  const [searchParams] = useSearchParams()
+  const selectedFromSearch = searchParams.get("id")
+  useEffect(() => {
+    if (selectedFromSearch) {
+      const node = nodes
+        .filter(({ id, group }) => !group && id.includes(selectedFromSearch))
+        .sort()[0]
+      if (node) {
+        setSelectedIds([node.id])
+      }
+    } else {
+      setSelectedIds([])
+    }
+  }, [setSelectedIds, selectedFromSearch, nodes])
+  const state = useMemo(() => ({ selectedIds }), [selectedIds])
+
   const controller = useMemo(() => {
     const newController = new Visualization()
     newController.registerLayoutFactory(layoutFactory)
     newController.registerComponentFactory(componentFactory)
-    newController.addEventListener(SELECTION_EVENT, setSelectedIds)
+    newController.addEventListener(SELECTION_EVENT, onSelect)
 
     return newController
-  }, [])
+  }, [onSelect])
 
   useEffect(() => {
     const model: Model = {
@@ -52,7 +82,7 @@ export default function DataFlow({ block }: Props) {
     setTimeout(() => {
       controller.getGraph().reset()
       controller.getGraph().layout()
-    }, 100)
+    }, 50)
   }, [nodes, edges, controller])
 
   return (
@@ -80,7 +110,7 @@ export default function DataFlow({ block }: Props) {
       }
     >
       <VisualizationProvider controller={controller}>
-        <VisualizationSurface state={{ selectedIds }} />
+        <VisualizationSurface state={state} />
       </VisualizationProvider>
     </TopologyView>
   )

pdl-live-react/src/view/dataflow/components.ts

@@ -3,6 +3,7 @@ import {
   DefaultGroup,
   ModelKind,
   withPanZoom,
+  withSelection,
   GraphComponent,
   type ComponentFactory,
 } from "@patternfly/react-topology"
@@ -18,7 +19,7 @@ const componentFactory: ComponentFactory = (kind: ModelKind, type: string) => {
         case ModelKind.graph:
           return withPanZoom()(GraphComponent)
         case ModelKind.node:
-          return CustomNode
+          return withSelection()(CustomNode)
         case ModelKind.edge:
           return DefaultEdge
         default: