Center graph and scale to fit width (#1288)

Co-authored-by: Tim Jacomb <timjacomb1+github@gmail.com>

Author: das7pad

src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.scss

@@ -93,3 +93,12 @@
   border: var(--jenkins-border-width) solid transparent;
   background-clip: padding-box;
 }
+
+// Space for "Stages" overlay
+.pvg-stages-graph--spacing-top {
+  padding-top: 26px;
+}
+// Spacing for "Expand" button
+.pvg-stages-graph--spacing-right {
+  padding-right: 26px;
+}

src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.tsx

@@ -2,6 +2,7 @@ import "./stages.scss";
 
 import { useCallback, useState } from "react";
 import {
+  ReactZoomPanPinchContextState,
   TransformComponent,
   TransformWrapper,
   useControls,
@@ -14,6 +15,8 @@ import { PipelineGraph } from "../../../../pipeline-graph-view/pipeline-graph/ma
 import { StageInfo } from "../../../../pipeline-graph-view/pipeline-graph/main/PipelineGraphModel.tsx";
 import { StageViewPosition } from "../providers/user-preference-provider.tsx";
 
+const MAX_SCALE = 3;
+
 export default function Stages({
   stages,
   selectedStage,
@@ -31,18 +34,18 @@ export default function Stages({
     [onStageSelect],
   );
 
+  const [initialScale, setInitialScale] = useState(1);
+  const [minScale, setMinScale] = useState(0.75);
+
   return (
     <div
       className={classNames("pgv-stages-graph", {
         "pgv-stages-graph--left": stageViewPosition === StageViewPosition.LEFT,
         "pgv-stages-graph--dialog": isExpanded,
+        "pvg-stages-graph--spacing-top": onRunPage,
+        "pvg-stages-graph--spacing-right": !onRunPage && !isExpanded,
       })}
     >
-      {!onRunPage && (
-        <div className={"pgv-stages-graph__controls pgv-stages-graph__heading"}>
-          Graph
-        </div>
-      )}
       {onRunPage && (
         <a
           className={"pgv-stages-graph__controls pgv-stages-graph__heading"}
@@ -99,16 +102,19 @@ export default function Stages({
         </Tooltip>
       </div>
       <TransformWrapper
-        minScale={0.75}
-        maxScale={3}
+        initialScale={initialScale}
+        minScale={minScale}
+        maxScale={MAX_SCALE}
         wheel={{ activationKeys: isExpanded ? [] : ["Control"] }}
       >
-        <ZoomControls />
+        <ZoomControls initialScale={initialScale} minScale={minScale} />
 
         <TransformComponent wrapperStyle={{ width: "100%", height: "100%" }}>
           <PipelineGraph
             stages={stages}
             selectedStage={selectedStage}
+            setInitialScale={setInitialScale}
+            setMinScale={setMinScale}
             {...(onStageSelect && { onStageSelect: handleStageSelect })}
           />
         </TransformComponent>
@@ -125,33 +131,27 @@ interface StagesProps {
   onRunPage?: boolean;
 }
 
-function ZoomControls() {
-  const { zoomIn, zoomOut, resetTransform } = useControls();
-  const [buttonState, setButtonState] = useState({
-    zoomIn: false,
-    zoomOut: false,
-    reset: true,
-  });
-
-  useTransformEffect(({ state, instance }) => {
-    const cantZoomIn = state.scale >= instance.props.maxScale!;
-    const cantZoomOut = state.scale <= instance.props.minScale!;
-    const cantReset = state.scale === 1;
+interface ZoomControlsProps {
+  initialScale: number;
+  minScale: number;
+}
 
-    setButtonState({
-      zoomIn: cantZoomIn,
-      zoomOut: cantZoomOut,
-      reset: cantReset,
-    });
-  });
+function ZoomControls({ initialScale, minScale }: ZoomControlsProps) {
+  const { zoomIn, zoomOut, centerView } = useControls();
+  const [scale, setScale] = useState(initialScale);
+  const handleTransformEffect = useCallback(
+    (ref: ReactZoomPanPinchContextState) => setScale(ref.state.scale),
+    [],
+  );
+  useTransformEffect(handleTransformEffect);
 
   return (
     <div className="pgv-stages-graph__controls pgw-zoom-controls">
       <Tooltip content={"Zoom in"}>
         <button
           className={"jenkins-button jenkins-button--tertiary"}
           onClick={() => zoomIn()}
-          disabled={buttonState.zoomIn}
+          disabled={scale >= MAX_SCALE}
         >
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <path
@@ -169,7 +169,7 @@ function ZoomControls() {
         <button
           className={"jenkins-button jenkins-button--tertiary"}
           onClick={() => zoomOut()}
-          disabled={buttonState.zoomOut}
+          disabled={scale <= minScale}
         >
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <path
@@ -186,8 +186,8 @@ function ZoomControls() {
       <Tooltip content={"Reset"}>
         <button
           className={"jenkins-button jenkins-button--tertiary"}
-          onClick={() => resetTransform()}
-          disabled={buttonState.reset}
+          onClick={() => centerView(initialScale)}
+          disabled={scale === initialScale}
         >
           <svg className="ionicon" viewBox="0 0 512 512">
             <path

src/main/frontend/pipeline-graph-view/pipeline-graph/main/NestedPipelineGraphLayout.ts

@@ -22,7 +22,7 @@ export function nestedGraphLayout(
   showDurations: boolean,
   maxColumnsWhenCollapsed: number = DEFAULT_MAX_COLUMNS_WHEN_COLLAPSED,
 ): PositionedGraph {
-  const graphSpacingX = layout.nodeSpacingH / 2;
+  const graphSpacingX = layout.nodeSpacingH / 4;
   const startEndReducedSpacing = Math.floor(layout.nodeSpacingH * 0.3);
   const root: GraphNode = {
     ...baseGraphNode(layout),
@@ -59,10 +59,8 @@ export function nestedGraphLayout(
     buildGraphNested(root, stages, layout, false);
   }
 
-  root.y = Math.max(
-    layout.ypStart,
-    root.shiftY + (showNames ? layout.nodeRadius + layout.labelOffsetV : 0),
-  );
+  root.y =
+    root.shiftY + (showNames ? layout.nodeRadius + layout.labelOffsetV : 0);
   root.children.push({
     ...baseGraphNode(layout, showNames),
     width: graphSpacingX,
@@ -115,6 +113,7 @@ function roundToMultipleOf(n: number, multiple: number): number {
 }
 
 function centerOfNode(node: GraphNode, layout: LayoutInfo) {
+  if (node.isPlaceholder) return node.x;
   return (
     node.x +
     roundToMultipleOf(

src/main/frontend/pipeline-graph-view/pipeline-graph/main/PipelineGraph.tsx

@@ -51,6 +51,8 @@ export function PipelineGraph({
   selectedStage,
   collapsed,
   onStageSelect,
+  setMinScale,
+  setInitialScale,
 }: Props) {
   const fullLayout = useMemo(() => {
     return {
@@ -144,10 +146,50 @@ export function PipelineGraph({
     [selectedStage],
   );
 
+  const transform = useContext(TransformContext);
+  const [transformWidth, setTransformWidth] = useState<number>(0);
+  useEffect(() => {
+    if (!transform?.wrapperComponent) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setTransformWidth(entry.contentRect.width);
+      }
+    });
+    observer.observe(transform.wrapperComponent);
+    return () => observer.disconnect();
+  }, [transform?.wrapperComponent]);
+
+  const [fitToWidth, setFitToWidth] = useState(true);
+  useEffect(() => {
+    if (!setMinScale || !setInitialScale || !transform) return;
+    const initialScale = Math.min(1, transformWidth / measuredWidth);
+    const minScale = initialScale * 0.75;
+    setMinScale(minScale);
+    setInitialScale(initialScale);
+    if (fitToWidth) {
+      // Don't scale too small by default.
+      const autoScale = Math.max(initialScale, 0.5);
+      const centerOffset = Math.max(0, (transformWidth - measuredWidth) / 2);
+      if (
+        transform.state.scale !== autoScale ||
+        transform.state.positionX !== centerOffset
+      ) {
+        transform.setState(autoScale, centerOffset, 0);
+      }
+      return transform.onChange(() => setFitToWidth(false));
+    }
+  }, [
+    transform,
+    transformWidth,
+    fitToWidth,
+    measuredWidth,
+    setMinScale,
+    setInitialScale,
+  ]);
+
   // When inside a TransformWrapper, only mount the nodes/labels intersecting
   // the visible region. Mounting thousands of absolute-positioned divs forces
   // a synchronous layout flush that blocks the main thread for seconds.
-  const transform = useContext(TransformContext);
   const virtualize = transform != null;
   const [viewport, setViewport] = useState<Viewport | null>(null);
   const cachedViewport = useRef<Viewport | null>(null);
@@ -331,4 +373,6 @@ interface Props {
   selectedStage?: StageInfo;
   collapsed?: boolean;
   onStageSelect?: (nodeId: string) => void;
+  setMinScale?: (value: number) => void;
+  setInitialScale?: (value: number) => void;
 }