Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

vis: refactor zoom code into a reusable useD3Zoom hook #1612

Merged
merged 1 commit into from
Apr 4, 2024
Merged

vis: refactor zoom code into a reusable useD3Zoom hook #1612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions packages/ott-vis-panel/src/chartutils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { useEffect, useState } from "react";
import * as d3 from "d3";

export function useD3Zoom(svgRef: React.MutableRefObject<SVGSVGElement | null>) {
const [chartTransform, setChartTransform] = useState("translate(0, 0)");

Check warning on line 5 in packages/ott-vis-panel/src/chartutils.ts

View check run for this annotation

Codecov / codecov/patch

packages/ott-vis-panel/src/chartutils.ts#L4-L5 

Added lines #L4 - L5 were not covered by tests
// run this only once after the first render
useEffect(() => {
if (!svgRef.current) {
return;

Check warning on line 9 in packages/ott-vis-panel/src/chartutils.ts

View check run for this annotation

Codecov / codecov/patch

packages/ott-vis-panel/src/chartutils.ts#L7-L9 

Added lines #L7 - L9 were not covered by tests
}
const svg = d3.select<SVGSVGElement, any>(svgRef.current);
svg.select("g.chart").attr("transform", chartTransform);

Check warning on line 12 in packages/ott-vis-panel/src/chartutils.ts

View check run for this annotation

Codecov / codecov/patch

packages/ott-vis-panel/src/chartutils.ts#L11-L12 

Added lines #L11 - L12 were not covered by tests
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

useEffect(() => {
if (!svgRef.current) {
return;

Check warning on line 18 in packages/ott-vis-panel/src/chartutils.ts

View check run for this annotation

Codecov / codecov/patch

packages/ott-vis-panel/src/chartutils.ts#L16-L18 

Added lines #L16 - L18 were not covered by tests
}
const svg = d3.select(svgRef.current);
const zoom = d3.zoom<SVGSVGElement, any>().on("zoom", handleZoom);
function handleZoom(e: any) {
svg.select("g.chart").attr("transform", e.transform);
setChartTransform(e.transform);

Check warning on line 24 in packages/ott-vis-panel/src/chartutils.ts

View check run for this annotation

Codecov / codecov/patch

packages/ott-vis-panel/src/chartutils.ts#L20-L24 

Added lines #L20 - L24 were not covered by tests
}
svg.call(zoom);

Check warning on line 26 in packages/ott-vis-panel/src/chartutils.ts

View check run for this annotation

Codecov / codecov/patch

packages/ott-vis-panel/src/chartutils.ts#L26 

Added line #L26 was not covered by tests
}, [svgRef, chartTransform]);
}
22 changes: 3 additions & 19 deletions packages/ott-vis-panel/src/components/TreeDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import React, { useCallback, useEffect, useRef } from "react";
import * as d3 from "d3";
import type { SystemState } from "ott-vis/types";
import { useEventBus } from "eventbus";
Expand All @@ -11,6 +11,7 @@ import {
type TreeNode,
buildMonolithTrees,
} from "treeutils";
import { useD3Zoom } from "chartutils";

interface TreeDisplayProps extends TreeDisplayStyleProps {
systemState: SystemState;
Expand Down Expand Up @@ -151,8 +152,6 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
(a, b) => d3.ascending(a.region, b.region) || d3.ascending(a.id, b.id)
);

const [chartTransform, setChartTransform] = useState("translate(0, 0)");

const getRadius = useCallback(
(group: string): number => {
if (group === "client") {
Expand Down Expand Up @@ -506,13 +505,6 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
.transition(tr)
.attr("d", diagonal)
.attr("stroke-width", 1.5);

const zoom = d3.zoom<SVGSVGElement, TreeNode>().on("zoom", handleZoom);
function handleZoom(e: any) {
svg.select("g.chart").attr("transform", e.transform);
setChartTransform(e.transform);
}
svg.call(zoom);
}
}, [
systemState,
Expand All @@ -527,15 +519,7 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
horizontal,
]);

// run this only once after the first render
useEffect(() => {
if (!svgRef.current) {
return;
}
const svg = d3.select<SVGSVGElement, TreeNode>(svgRef.current);
svg.select("g.chart").attr("transform", chartTransform);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useD3Zoom(svgRef);

const eventBus = useEventBus();
useEffect(() => {
Expand Down
3 changes: 3 additions & 0 deletions packages/ott-vis-panel/src/components/views/TopologyView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
} from "treeutils";
import "./topology-view.css";
import { useColorProvider } from "colors";
import { useD3Zoom } from "chartutils";

/**
* The goal of this component is to show a more accurate topology view from the perspective of actual network connections.
Expand Down Expand Up @@ -174,6 +175,8 @@ export const TopologyView: React.FC<TopologyViewProps> = ({ systemState, width,
renderTrees(monolithSubtrees, ".monolith-trees");
}, [svgRef, monolithTrees, balancerTrees, subtreePadding, nodeRadius, colors]);

useD3Zoom(svgRef);

return (
<svg
viewBox={`${-width / 2} ${-height / 2} ${width} ${height}`}
Expand Down
Loading