diff --git a/dashboard/components/RelationGraph.tsx b/dashboard/components/RelationGraph.tsx index cab1a8369d049..5a1eec7633a54 100644 --- a/dashboard/components/RelationGraph.tsx +++ b/dashboard/components/RelationGraph.tsx @@ -4,10 +4,10 @@ import * as d3 from "d3" import { cloneDeep } from "lodash" import { Fragment, useCallback, useEffect, useRef } from "react" import { - RelationBox, Edge, Enter, Position, + RelationBox, generateRelationBackPressureEdges, layoutItem, } from "../lib/layout" @@ -36,7 +36,7 @@ export default function RelationGraph({ const includedRelationIds = new Set() for (const relationBox of relationDependencyDag) { let relationId = relationBox.id - layoutRelationResult.set(relationId, { + layoutRelationResult.set(relationId, { relationName: relationBox.relationName, schemaName: relationBox.schemaName, }) @@ -92,7 +92,9 @@ export default function RelationGraph({ text .attr("fill", "black") - .text(({ relationName, schemaName }) => `${schemaName}.${relationName}`) + .text( + ({ relationName, schemaName }) => `${schemaName}.${relationName}` + ) .attr("font-family", "inherit") .attr("text-anchor", "middle") .attr("dx", relationNameX) diff --git a/dashboard/lib/layout.ts b/dashboard/lib/layout.ts index 440a2b1d55895..e6549d4b1e979 100644 --- a/dashboard/lib/layout.ts +++ b/dashboard/lib/layout.ts @@ -517,7 +517,9 @@ export function generateFragmentEdges( return links } -export function generateRelationBackPressureEdges(layoutMap: RelationBoxPosition[]): Edge[] { +export function generateRelationBackPressureEdges( + layoutMap: RelationBoxPosition[] +): Edge[] { const links = [] const relationMap = new Map() for (const x of layoutMap) { diff --git a/dashboard/pages/relation_graph.tsx b/dashboard/pages/relation_graph.tsx index 168d9095e076b..45839fe67fc66 100644 --- a/dashboard/pages/relation_graph.tsx +++ b/dashboard/pages/relation_graph.tsx @@ -41,8 +41,9 @@ import { import { StreamingJob, getFragmentVertexToRelationMap, + getRelationDependencies, getSchemas, - getStreamingJobs, getRelationDependencies, + getStreamingJobs, } from "../lib/api/streaming" import { RelationBox } from "../lib/layout" import { BackPressureInfo } from "../proto/gen/monitor_service" @@ -50,7 +51,10 @@ import { BackPressureInfo } from "../proto/gen/monitor_service" // Refresh interval (ms) for back pressure stats const INTERVAL_MS = 5000 -function buildRelationDependencyAsEdges(relations: StreamingJob[], relationDeps: Map): RelationBox[] { +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) { @@ -65,10 +69,8 @@ function buildRelationDependencyAsEdges(relations: StreamingJob[], relationDeps: width: 0, height: 0, parentIds: parentIds - ? parentIds - .filter((x) => relationIds.has(x)) - .map((x) => x.toString()) - : [], + ? parentIds.filter((x) => relationIds.has(x)).map((x) => x.toString()) + : [], relationName: relation.name, schemaName: relation.schemaName ? relation.schemaName : "", }) @@ -113,11 +115,14 @@ export default function Streaming() { if (schemas) { let relationListWithSchemaName = relationList.map((relation) => { let schemaName = schemas.find( - (schema) => schema.id === relation.schemaId + (schema) => schema.id === relation.schemaId )?.name return { ...relation, schemaName } }) - const relationDep = buildRelationDependencyAsEdges(relationListWithSchemaName, relationDeps) + const relationDep = buildRelationDependencyAsEdges( + relationListWithSchemaName, + relationDeps + ) return relationDep } }