vis: add zooming to force graph (#1497)

Author: dyc3

packages/ott-vis-panel/src/components/ForceGraph.tsx

@@ -135,6 +135,13 @@ const ForceGraph: React.FC<ForceGraphProps> = ({
 			event.subject.fx = null;
 			event.subject.fy = null;
 		}
+
+		const zoom = d3.zoom().on("zoom", handleZoom);
+		function handleZoom(e: any) {
+			svg.select("g.chart").attr("transform", e.transform);
+		}
+		// @ts-expect-error this works fine
+		svg.call(zoom);
 	});
 
 	function radius(num: number) {
@@ -164,33 +171,39 @@ const ForceGraph: React.FC<ForceGraphProps> = ({
 			viewBox={`${-width / 2} ${-height / 2} ${width}, ${height}`}
 			style={{ height: "auto", maxWidth: "100%" }}
 		>
-			<g className="links" stroke="#999" strokeOpacity={0.6}>
-				{links.map((link, i) => (
-					<line key={i} strokeWidth={Math.sqrt(link.value)} />
-				))}
-			</g>
-			<g className="nodes" stroke="#fff" strokeWidth={1.5}>
-				{nodes.map((node, i) => (
-					<>
-						<circle
-							key={i}
-							r={radius(node.radius)}
-							fill={color(node.group)}
-							data-nodeid={node.id}
-						/>
-						<text
-							textAnchor="middle"
-							alignmentBaseline="middle"
-							style={{ userSelect: "none", cursor: "default", pointerEvents: "none" }}
-							fontFamily="Inter, Helvetica, Arial, sans-serif"
-							fontSize={10}
-							strokeWidth={0}
-							fill="#fff"
-						>
-							{node.text}
-						</text>
-					</>
-				))}
+			<g className="chart">
+				<g className="links" stroke="#999" strokeOpacity={0.6}>
+					{links.map((link, i) => (
+						<line key={i} strokeWidth={Math.sqrt(link.value)} />
+					))}
+				</g>
+				<g className="nodes" stroke="#fff" strokeWidth={1.5}>
+					{nodes.map((node, i) => (
+						<>
+							<circle
+								key={i}
+								r={radius(node.radius)}
+								fill={color(node.group)}
+								data-nodeid={node.id}
+							/>
+							<text
+								textAnchor="middle"
+								alignmentBaseline="middle"
+								style={{
+									userSelect: "none",
+									cursor: "default",
+									pointerEvents: "none",
+								}}
+								fontFamily="Inter, Helvetica, Arial, sans-serif"
+								fontSize={10}
+								strokeWidth={0}
+								fill="#fff"
+							>
+								{node.text}
+							</text>
+						</>
+					))}
+				</g>
 			</g>
 		</svg>
 	);