complete component refactor of ddl graph

dashboard/components/DdlGraph.tsx

@@ -22,7 +22,8 @@ import {
   FragmentBoxPosition,
   Position,
   generateFragmentEdges,
-  layoutItem,
+  generateDdlEdges,
+  layoutItem, DdlBox, DdlBoxPosition
 } from "../lib/layout"
 import { PlanNodeDatum } from "../pages/fragment_graph"
 import { StreamNode } from "../proto/gen/stream_plan"
@@ -42,48 +43,48 @@ const fragmentDistanceX = nodeRadius * 2
 const fragmentDistanceY = nodeRadius * 2
 
 export default function DdlGraph({
-  fragmentDependency,
+  ddlDependency,
   backPressures,
 }: {
-  fragmentDependency: FragmentBox[] // This is just the layout info.
+  ddlDependency: DdlBox[] // This is just the layout info.
   backPressures?: Map<string, number> // relation_id -> relation_id: back pressure rate
 }) {
   const svgRef = useRef<SVGSVGElement>(null)
 
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [currentStreamNode, setCurrentStreamNode] = useState<PlanNodeDatum>()
 
-  const planNodeDependencyDagCallback = useCallback(() => {
-    const fragmentDependencyDag = cloneDeep(fragmentDependency)
+  const ddlDependencyDagCallback = useCallback(() => {
+    const ddlDependencyDag = cloneDeep(ddlDependency)
 
-    const layoutFragmentResult = new Map<string, any>()
-    const includedFragmentIds = new Set<string>()
-    for (const fragmentBox of fragmentDependencyDag) {
-      let fragmentId = fragmentBox.id;
+    const layoutDdlResult = new Map<string, any>()
+    const includedDdlIds = new Set<string>()
+    for (const ddlBox of ddlDependencyDag) {
+      let ddlId = ddlBox.id;
       let width = 100;
       let height = 100;
-      layoutFragmentResult.set(fragmentId, {
+      layoutDdlResult.set(ddlId, {
         width,
         height,
       })
-      includedFragmentIds.add(fragmentId)
+      includedDdlIds.add(ddlId)
     }
 
-    const fragmentLayout = layoutItem(
-      fragmentDependencyDag.map(({ width: _1, height: _2, id, ...data }) => {
+    const ddlLayout = layoutItem(
+      ddlDependencyDag.map(({ width: _1, height: _2, id, ...data }) => {
         return { width: 100, height: 100, id, ...data }
       }),
       fragmentDistanceX,
       fragmentDistanceY
     )
-    const fragmentLayoutPosition = new Map<string, Position>()
-    fragmentLayout.forEach(({ id, x, y }: FragmentBoxPosition) => {
-      fragmentLayoutPosition.set(id, { x, y })
+    const ddlLayoutPosition = new Map<string, Position>()
+    ddlLayout.forEach(({ id, x, y }: DdlBoxPosition) => {
+      ddlLayoutPosition.set(id, { x, y })
     })
 
-    const layoutResult: FragmentLayout[] = []
-    for (const [fragmentId, result] of layoutFragmentResult) {
-      const { x, y } = fragmentLayoutPosition.get(fragmentId)!
+    const layoutResult: ddlLayout[] = []
+    for (const [fragmentId, result] of layoutDdlResult) {
+      const { x, y } = ddlLayoutPosition.get(fragmentId)!
       layoutResult.push({ id: fragmentId, x, y, ...result })
     }
 
@@ -93,22 +94,22 @@ export default function DdlGraph({
       svgHeight = Math.max(svgHeight, y + height + 50)
       svgWidth = Math.max(svgWidth, x + width)
     })
-    const edges = generateFragmentEdges(fragmentLayout)
+    const edges = generateDdlEdges(ddlLayout)
 
     return {
       layoutResult,
       svgWidth,
       svgHeight,
       edges,
     }
-  }, [fragmentDependency])
+  }, [ddlDependency])
 
   const {
     svgWidth,
     svgHeight,
     edges: fragmentEdgeLayout,
     layoutResult: fragmentLayout,
-  } = planNodeDependencyDagCallback()
+  } = ddlDependencyDagCallback()
 
   useEffect(() => {
     if (fragmentLayout) {

dashboard/pages/ddl_graph.tsx

@@ -110,10 +110,10 @@ const SampleDdlDependencyGraph: DdlBox[] = [
 ]
 
 const SampleDdlBackpressures: Map<string, number> = new Map([
-  ["1-2", 0.1],
-  ["1-3", 0.2],
-  ["2-4", 0.3],
-  ["3-4", 0.4],
+  ["1_2", 0.1],
+  ["1_3", 0.2],
+  ["2_4", 0.3],
+  ["3_4", 0.4],
 ])
 
 function buildPlanNodeDependency(
@@ -553,10 +553,8 @@ export default function Streaming() {
           <Text fontWeight="semibold">Fragment Graph</Text>
           {planNodeDependencies && fragmentDependency && (
             <DdlGraph
-              selectedFragmentId={selectedFragmentId?.toString()}
-              fragmentDependency={fragmentDependency}
-              planNodeDependencies={planNodeDependencies}
-              backPressures={backPressures}
+              ddlDependency={SampleDdlDependencyGraph}
+              backPressures={SampleDdlBackpressures}
             />
           )}
         </Box>