From a6025a7126753fd8f74ac8374db7991f495ecdcb Mon Sep 17 00:00:00 2001 From: Ken McGrady Date: Fri, 13 Oct 2023 16:55:34 -0700 Subject: [PATCH 1/2] Initial fix for Graphviz --- .../elements/GraphVizChart/GraphVizChart.tsx | 86 ++++--------------- .../GraphVizChart/styled-components.ts | 34 +++++--- 2 files changed, 41 insertions(+), 79 deletions(-) diff --git a/frontend/lib/src/components/elements/GraphVizChart/GraphVizChart.tsx b/frontend/lib/src/components/elements/GraphVizChart/GraphVizChart.tsx index af47c3d97d8..019b2b6065d 100644 --- a/frontend/lib/src/components/elements/GraphVizChart/GraphVizChart.tsx +++ b/frontend/lib/src/components/elements/GraphVizChart/GraphVizChart.tsx @@ -25,96 +25,48 @@ import { StyledGraphVizChart } from "./styled-components" export interface GraphVizChartProps { width: number element: GraphVizChartProto - height?: number + isFullScreen: boolean } -interface Dimensions { - chartWidth: number - chartHeight: number -} - -// Use d3Graphviz in a dummy expression so the library actually gets loaded. -// This way it registers itself in d3 as a plugin at this point. -const dummyGraphviz = graphviz -dummyGraphviz // eslint-disable-line @typescript-eslint/no-unused-expressions - export function GraphVizChart({ - width: propWidth, + width, element, - height: propHeight, + isFullScreen, }: GraphVizChartProps): ReactElement { const chartId = `graphviz-chart-${element.elementId}` - let originalHeight = 0 - let originalWidth = 0 - - const getChartData = (): string => { - return element.spec - } - - const getChartDimensions = (): Dimensions => { - let chartWidth = originalWidth - let chartHeight = originalHeight - - if (propHeight) { - // fullscreen - chartWidth = propWidth - chartHeight = propHeight - } else if (element.useContainerWidth) { - chartWidth = propWidth - } - return { chartWidth, chartHeight } - } - - const updateChart = (): void => { + useEffect(() => { try { - // Layout and render the graph - const graph = graphviz(`#${chartId}`) + graphviz(`#${chartId}`) .zoom(false) .fit(true) .scale(1) .engine(element.engine as Engine) - .renderDot(getChartData()) - .on("end", () => { - const node = select(`#${chartId} > svg`).node() as SVGGraphicsElement - if (node) { - originalHeight = node.getBBox().height - originalWidth = node.getBBox().width - } - }) + .renderDot(element.spec) - const { chartHeight, chartWidth } = getChartDimensions() - if (chartHeight > 0) { - // Override or reset the graph height - graph.height(chartHeight) - } - if (chartWidth > 0) { - // Override or reset the graph width - graph.width(chartWidth) + if (isFullScreen || element.useContainerWidth) { + const node = select(`#${chartId} > svg`).node() as SVGGraphicsElement + node.removeAttribute("width") + node.removeAttribute("height") } } catch (error) { logError(error) } - } - - useEffect(() => { - updateChart() - }) - - const elementDimensions = getChartDimensions() - const width: number = elementDimensions.chartWidth - ? elementDimensions.chartWidth - : propWidth - const height: number | undefined = elementDimensions.chartHeight - ? elementDimensions.chartHeight - : propHeight + }, [ + chartId, + element.engine, + element.spec, + element.useContainerWidth, + width, + isFullScreen, + ]) return ( ) } diff --git a/frontend/lib/src/components/elements/GraphVizChart/styled-components.ts b/frontend/lib/src/components/elements/GraphVizChart/styled-components.ts index b4da5f00c87..da6f4c5331a 100644 --- a/frontend/lib/src/components/elements/GraphVizChart/styled-components.ts +++ b/frontend/lib/src/components/elements/GraphVizChart/styled-components.ts @@ -16,15 +16,25 @@ import styled from "@emotion/styled" -export const StyledGraphVizChart = styled.div(({ theme }) => ({ - "& *": { - fontFamily: theme.genericFonts.bodyFont, - // Font sizes inside the SVG element are getting huge for some reason. - // Hacking together a number by eyeballing it: - // 12px in the SVG looks like 1rem outside, so 9.6px ~= 0.8rem. - fontSize: "9.6px", - }, - "& svg": { - maxWidth: "100%", - }, -})) +interface StyledGraphVizChartProps { + isFullScreen: boolean +} + +export const StyledGraphVizChart = styled.div( + ({ theme, isFullScreen }) => ({ + "& *": { + fontFamily: theme.genericFonts.bodyFont, + // Font sizes inside the SVG element are getting huge for some reason. + // Hacking together a number by eyeballing it: + // 12px in the SVG looks like 1rem outside, so 9.6px ~= 0.8rem. + fontSize: "9.6px", + }, + "& svg": { + maxWidth: "100%", + width: isFullScreen ? "100%" : "auto", + height: isFullScreen ? "100%" : "auto", + }, + width: isFullScreen ? "100%" : "auto", + height: isFullScreen ? "100%" : "auto", + }) +) From 001e17cf653d214d4badf0d55e67347d63eb8710 Mon Sep 17 00:00:00 2001 From: Ken McGrady Date: Fri, 13 Oct 2023 17:02:18 -0700 Subject: [PATCH 2/2] Add comments --- .../lib/src/components/elements/GraphVizChart/GraphVizChart.tsx | 2 ++ .../src/components/elements/GraphVizChart/styled-components.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/frontend/lib/src/components/elements/GraphVizChart/GraphVizChart.tsx b/frontend/lib/src/components/elements/GraphVizChart/GraphVizChart.tsx index 019b2b6065d..57d2ede79cd 100644 --- a/frontend/lib/src/components/elements/GraphVizChart/GraphVizChart.tsx +++ b/frontend/lib/src/components/elements/GraphVizChart/GraphVizChart.tsx @@ -46,6 +46,8 @@ export function GraphVizChart({ if (isFullScreen || element.useContainerWidth) { const node = select(`#${chartId} > svg`).node() as SVGGraphicsElement + // We explicitly remove width and height to let CSS and the SVG viewBox + // define its dimensions node.removeAttribute("width") node.removeAttribute("height") } diff --git a/frontend/lib/src/components/elements/GraphVizChart/styled-components.ts b/frontend/lib/src/components/elements/GraphVizChart/styled-components.ts index da6f4c5331a..9b1ab8e2a20 100644 --- a/frontend/lib/src/components/elements/GraphVizChart/styled-components.ts +++ b/frontend/lib/src/components/elements/GraphVizChart/styled-components.ts @@ -29,6 +29,8 @@ export const StyledGraphVizChart = styled.div( // 12px in the SVG looks like 1rem outside, so 9.6px ~= 0.8rem. fontSize: "9.6px", }, + + // Ensure SVG is allowed the full width/height in full screen mode "& svg": { maxWidth: "100%", width: isFullScreen ? "100%" : "auto",