From a6c04ec8c075cbcc041c6836f99f647382080014 Mon Sep 17 00:00:00 2001 From: Noel Kwan Date: Thu, 19 Sep 2024 19:57:30 +0800 Subject: [PATCH] rename to relation graph --- dashboard/components/Layout.tsx | 2 +- .../{DdlGraph.tsx => RelationGraph.tsx} | 128 +++++++++--------- dashboard/lib/layout.ts | 28 ++-- .../{ddl_graph.tsx => relation_graph.tsx} | 32 ++--- 4 files changed, 94 insertions(+), 96 deletions(-) rename dashboard/components/{DdlGraph.tsx => RelationGraph.tsx} (62%) rename dashboard/pages/{ddl_graph.tsx => relation_graph.tsx} (91%) diff --git a/dashboard/components/Layout.tsx b/dashboard/components/Layout.tsx index e229ca13a2f01..c393da9839953 100644 --- a/dashboard/components/Layout.tsx +++ b/dashboard/components/Layout.tsx @@ -146,7 +146,7 @@ function Layout({ children }: { children: React.ReactNode }) { Streaming Dependency Graph Fragment Graph - Ddl Graph + Relation Graph
Batch diff --git a/dashboard/components/DdlGraph.tsx b/dashboard/components/RelationGraph.tsx similarity index 62% rename from dashboard/components/DdlGraph.tsx rename to dashboard/components/RelationGraph.tsx index 1a997f7c4d449..cab1a8369d049 100644 --- a/dashboard/components/DdlGraph.tsx +++ b/dashboard/components/RelationGraph.tsx @@ -4,86 +4,86 @@ import * as d3 from "d3" import { cloneDeep } from "lodash" import { Fragment, useCallback, useEffect, useRef } from "react" import { - DdlBox, + RelationBox, Edge, Enter, Position, - generateDdlEdges, + generateRelationBackPressureEdges, layoutItem, } from "../lib/layout" const nodeRadius = 12 -const ddlLayoutX = nodeRadius * 8 -const ddlLayoutY = nodeRadius * 8 -const ddlNameX = nodeRadius * 4 -const ddlNameY = nodeRadius * 7 -const ddlMarginX = nodeRadius * 2 -const ddlMarginY = nodeRadius * 2 - -export default function DdlGraph({ - ddlDependency, +const relationLayoutX = nodeRadius * 8 +const relationLayoutY = nodeRadius * 8 +const relationNameX = nodeRadius * 4 +const relationNameY = nodeRadius * 7 +const relationMarginX = nodeRadius * 2 +const relationMarginY = nodeRadius * 2 + +export default function RelationGraph({ + relationDependency, backPressures, }: { - ddlDependency: DdlBox[] // Ddl adjacency list, metadata + relationDependency: RelationBox[] // Relation adjacency list, metadata backPressures?: Map // relationId-relationId->back_pressure_rate }) { const svgRef = useRef(null) - const ddlDependencyDagCallback = useCallback(() => { - const ddlDependencyDag = cloneDeep(ddlDependency) + const relationDependencyDagCallback = useCallback(() => { + const relationDependencyDag = cloneDeep(relationDependency) - const layoutDdlResult = new Map() - const includedDdlIds = new Set() - for (const ddlBox of ddlDependencyDag) { - let ddlId = ddlBox.id - layoutDdlResult.set(ddlId, { - ddlName: ddlBox.ddlName, - schemaName: ddlBox.schemaName, + const layoutRelationResult = new Map() + const includedRelationIds = new Set() + for (const relationBox of relationDependencyDag) { + let relationId = relationBox.id + layoutRelationResult.set(relationId, { + relationName: relationBox.relationName, + schemaName: relationBox.schemaName, }) - includedDdlIds.add(ddlId) + includedRelationIds.add(relationId) } - const ddlLayout = layoutItem( - ddlDependencyDag.map(({ width: _1, height: _2, id, ...data }) => { - return { width: ddlLayoutX, height: ddlLayoutY, id, ...data } + const relationLayout = layoutItem( + relationDependencyDag.map(({ width: _1, height: _2, id, ...data }) => { + return { width: relationLayoutX, height: relationLayoutY, id, ...data } }), - ddlMarginX, - ddlMarginY + relationMarginX, + relationMarginY ) let svgWidth = 0 let svgHeight = 0 - ddlLayout.forEach(({ x, y }) => { - svgHeight = Math.max(svgHeight, y + ddlLayoutX) - svgWidth = Math.max(svgWidth, x + ddlLayoutY) + relationLayout.forEach(({ x, y }) => { + svgHeight = Math.max(svgHeight, y + relationLayoutX) + svgWidth = Math.max(svgWidth, x + relationLayoutY) }) - const edges = generateDdlEdges(ddlLayout) + const edges = generateRelationBackPressureEdges(relationLayout) return { - layoutResult: ddlLayout, + layoutResult: relationLayout, svgWidth, svgHeight, edges, } - }, [ddlDependency]) + }, [relationDependency]) const { svgWidth, svgHeight, - edges: ddlEdgeLayout, - layoutResult: ddlLayout, - } = ddlDependencyDagCallback() + edges: relationEdgeLayout, + layoutResult: relationLayout, + } = relationDependencyDagCallback() useEffect(() => { - if (ddlLayout) { + if (relationLayout) { const svgNode = svgRef.current const svgSelection = d3.select(svgNode) - // Ddls - const applyDdl = (gSel: DdlSelection) => { + // Relations + const applyRelation = (gSel: RelationSelection) => { gSel.attr("transform", ({ x, y }) => `translate(${x}, ${y})`) - // Render ddl name + // Render relation name { let text = gSel.select(".text-frag-id") if (text.empty()) { @@ -92,16 +92,16 @@ export default function DdlGraph({ text .attr("fill", "black") - .text(({ ddlName, schemaName }) => `${schemaName}.${ddlName}`) + .text(({ relationName, schemaName }) => `${schemaName}.${relationName}`) .attr("font-family", "inherit") .attr("text-anchor", "middle") - .attr("dx", ddlNameX) - .attr("dy", ddlNameY) + .attr("dx", relationNameX) + .attr("dy", relationNameY) .attr("fill", "black") .attr("font-size", 12) } - // Render ddl node + // Render relation node { let circle = gSel.select("circle") if (circle.empty()) { @@ -114,33 +114,33 @@ export default function DdlGraph({ }) circle - .attr("cx", ddlLayoutX / 2) - .attr("cy", ddlLayoutY / 2) + .attr("cx", relationLayoutX / 2) + .attr("cy", relationLayoutY / 2) .attr("fill", "white") .attr("stroke-width", 1) .attr("stroke", theme.colors.gray[500]) } } - const createDdl = (sel: Enter) => - sel.append("g").attr("class", "ddl").call(applyDdl) + const createRelation = (sel: Enter) => + sel.append("g").attr("class", "relation").call(applyRelation) - const ddlSelection = svgSelection - .select(".ddls") - .selectAll(".ddl") - .data(ddlLayout) - type DdlSelection = typeof ddlSelection + const relationSelection = svgSelection + .select(".relations") + .selectAll(".relation") + .data(relationLayout) + type RelationSelection = typeof relationSelection - ddlSelection.enter().call(createDdl) + relationSelection.enter().call(createRelation) // TODO(kwannoel): Is this even needed? I commented it out. - // ddlSelection.call(applyDdl) - ddlSelection.exit().remove() + // relationSelection.call(applyRelation) + relationSelection.exit().remove() - // Ddl Edges + // Relation Edges const edgeSelection = svgSelection - .select(".ddl-edges") - .selectAll(".ddl-edge") - .data(ddlEdgeLayout) + .select(".relation-edges") + .selectAll(".relation-edge") + .data(relationEdgeLayout) type EdgeSelection = typeof edgeSelection const curveStyle = d3.curveMonotoneX @@ -208,19 +208,19 @@ export default function DdlGraph({ return gSel } const createEdge = (sel: Enter) => - sel.append("g").attr("class", "ddl-edge").call(applyEdge) + sel.append("g").attr("class", "relation-edge").call(applyEdge) edgeSelection.enter().call(createEdge) edgeSelection.call(applyEdge) edgeSelection.exit().remove() } - }, [ddlLayout, ddlEdgeLayout, backPressures]) + }, [relationLayout, relationEdgeLayout, backPressures]) return ( - - + + ) diff --git a/dashboard/lib/layout.ts b/dashboard/lib/layout.ts index f670cb4c12c9a..440a2b1d55895 100644 --- a/dashboard/lib/layout.ts +++ b/dashboard/lib/layout.ts @@ -293,8 +293,8 @@ export type FragmentBox = LayoutItemBase & { fragment: TableFragments_Fragment } -export type DdlBox = LayoutItemBase & { - ddlName: string +export type RelationBox = LayoutItemBase & { + relationName: string schemaName: string } @@ -310,7 +310,7 @@ export interface Position { export type FragmentBoxPosition = FragmentBox & Position export type RelationPointPosition = RelationPoint & Position -export type DdlBoxPosition = DdlBox & Position +export type RelationBoxPosition = RelationBox & Position export interface Edge { points: Array @@ -517,27 +517,27 @@ export function generateFragmentEdges( return links } -export function generateDdlEdges(layoutMap: DdlBoxPosition[]): Edge[] { +export function generateRelationBackPressureEdges(layoutMap: RelationBoxPosition[]): Edge[] { const links = [] - const ddlMap = new Map() + const relationMap = new Map() for (const x of layoutMap) { - ddlMap.set(x.id, x) + relationMap.set(x.id, x) } - for (const ddl of layoutMap) { - for (const parentId of ddl.parentIds) { - const parentDdl = ddlMap.get(parentId)! + for (const relation of layoutMap) { + for (const parentId of relation.parentIds) { + const parentRelation = relationMap.get(parentId)! links.push({ points: [ { - x: ddl.x + ddl.width / 2, - y: ddl.y + ddl.height / 2, + x: relation.x + relation.width / 2, + y: relation.y + relation.height / 2, }, { - x: parentDdl.x + parentDdl.width / 2, - y: parentDdl.y + parentDdl.height / 2, + x: parentRelation.x + parentRelation.width / 2, + y: parentRelation.y + parentRelation.height / 2, }, ], - source: ddl.id, + source: relation.id, target: parentId, }) } diff --git a/dashboard/pages/ddl_graph.tsx b/dashboard/pages/relation_graph.tsx similarity index 91% rename from dashboard/pages/ddl_graph.tsx rename to dashboard/pages/relation_graph.tsx index e8c1485d44224..168d9095e076b 100644 --- a/dashboard/pages/ddl_graph.tsx +++ b/dashboard/pages/relation_graph.tsx @@ -28,7 +28,7 @@ import { import _ from "lodash" import Head from "next/head" import { Fragment, useCallback, useEffect, useMemo, useState } from "react" -import DdlGraph from "../components/DdlGraph" +import RelationGraph from "../components/RelationGraph" import Title from "../components/Title" import useErrorToast from "../hook/useErrorToast" import useFetch from "../lib/api/fetch" @@ -44,19 +44,19 @@ import { getSchemas, getStreamingJobs, getRelationDependencies, } from "../lib/api/streaming" -import { DdlBox } from "../lib/layout" +import { RelationBox } from "../lib/layout" import { BackPressureInfo } from "../proto/gen/monitor_service" // Refresh interval (ms) for back pressure stats const INTERVAL_MS = 5000 -function buildDdlDependencyAsEdges(relations: StreamingJob[], relationDeps: Map): DdlBox[] { +function buildRelationDependencyAsEdges(relations: StreamingJob[], relationDeps: Map): RelationBox[] { // Filter out non-streaming relations, e.g. source, views. let relationIds = new Set() for (const relation of relations) { relationIds.add(relation.id) } - const nodes: DdlBox[] = [] + const nodes: RelationBox[] = [] for (const relation of relations) { let parentIds = relationDeps.get(relation.id) nodes.push({ @@ -69,7 +69,7 @@ function buildDdlDependencyAsEdges(relations: StreamingJob[], relationDeps: Map< .filter((x) => relationIds.has(x)) .map((x) => x.toString()) : [], - ddlName: relation.name, + relationName: relation.name, schemaName: relation.schemaName ? relation.schemaName : "", }) } @@ -107,7 +107,7 @@ export default function Streaming() { ) } - const ddlDependencyCallback = useCallback(() => { + const relationDependencyCallback = useCallback(() => { if (relationList) { if (relationDeps) { if (schemas) { @@ -117,16 +117,14 @@ export default function Streaming() { )?.name return { ...relation, schemaName } }) - const ddlDep = buildDdlDependencyAsEdges(relationListWithSchemaName, relationDeps) - return { - ddlDep, - } + const relationDep = buildRelationDependencyAsEdges(relationListWithSchemaName, relationDeps) + return relationDep } } } }, [relationList, relationDeps, schemas]) - const ddlDependency = ddlDependencyCallback()?.ddlDep + const relationDependency = relationDependencyCallback() const [backPressureDataSource, setBackPressureDataSource] = useState("Embedded") @@ -241,7 +239,7 @@ export default function Streaming() { const retVal = ( - Ddl Graph + Relation Graph - Ddl Graph - {ddlDependency && ( - Relation Graph + {relationDependency && ( + )} @@ -296,7 +294,7 @@ export default function Streaming() { return ( - Ddl Graph + Relation Graph {retVal}