[dagit] Hold the lineage graph zoom level constant as you navigate (#…

…8251) Co-authored-by: bengotow <bgotow@elementl.com>
dagster-io · Jun 9, 2022 · a03ccb8 · a03ccb8
1 parent e34d9ca
commit a03ccb8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx b/js_modules/dagit/packages/core/src/asset-graph/AssetGraphExplorer.tsx
@@ -69,7 +69,7 @@ interface Props {
   onChangeExplorerPath: (path: ExplorerPath, mode: 'replace' | 'push') => void;
 }
 
-const EXPERIMENTAL_MINI_SCALE = 0.5;
+export const EXPERIMENTAL_MINI_SCALE = 0.5;
 
 export const AssetGraphExplorer: React.FC<Props> = (props) => {
   const {

diff --git a/js_modules/dagit/packages/core/src/assets/AssetNodeLineageGraph.tsx b/js_modules/dagit/packages/core/src/assets/AssetNodeLineageGraph.tsx
@@ -4,16 +4,18 @@ import {useHistory} from 'react-router-dom';
 import styled from 'styled-components/macro';
 
 import {AssetConnectedEdges} from '../asset-graph/AssetEdges';
+import {EXPERIMENTAL_MINI_SCALE} from '../asset-graph/AssetGraphExplorer';
 import {AssetNodeMinimal, AssetNode} from '../asset-graph/AssetNode';
 import {ForeignNode} from '../asset-graph/ForeignNode';
 import {buildComputeStatusData, GraphData, LiveData, toGraphId} from '../asset-graph/Utils';
 import {SVGViewport} from '../graph/SVGViewport';
 import {useAssetLayout} from '../graph/asyncGraphLayout';
+import {getJSONForKey} from '../hooks/useStateWithStorage';
 
 import {AssetKey} from './types';
 import {AssetNodeDefinitionFragment} from './types/AssetNodeDefinitionFragment';
 
-const EXPERIMENTAL_MINI_SCALE = 0.5;
+const LINEAGE_GRAPH_ZOOM_LEVEL = 'lineageGraphZoomLevel';
 
 export type AssetLineageScope = 'neighbors' | 'upstream' | 'downstream';
 
@@ -36,7 +38,8 @@ export const AssetNodeLineageGraph: React.FC<{
 
   React.useEffect(() => {
     if (viewportEl.current && layout) {
-      viewportEl.current.autocenter(false);
+      const lastZoomLevel = Number(getJSONForKey(LINEAGE_GRAPH_ZOOM_LEVEL));
+      viewportEl.current.autocenter(false, lastZoomLevel);
       viewportEl.current.focus();
     }
   }, [viewportEl, layout, assetGraphId]);
@@ -67,8 +70,9 @@ export const AssetNodeLineageGraph: React.FC<{
       maxZoom={1.2}
       maxAutocenterZoom={1.2}
     >
-      {({scale: _scale}) => (
+      {({scale}) => (
         <SVGContainer width={layout.width} height={layout.height}>
+          {viewportEl.current && <SVGSaveZoomLevel scale={scale} />}
           <AssetConnectedEdges highlighted={highlighted} edges={layout.edges} />
 
           {Object.values(layout.nodes).map(({id, bounds}) => {
@@ -90,7 +94,7 @@ export const AssetNodeLineageGraph: React.FC<{
               >
                 {!graphNode || !graphNode.definition.opNames.length ? (
                   <ForeignNode assetKey={{path}} />
-                ) : _scale < EXPERIMENTAL_MINI_SCALE ? (
+                ) : scale < EXPERIMENTAL_MINI_SCALE ? (
                   <AssetNodeMinimal
                     definition={graphNode.definition}
                     selected={graphNode.id === assetGraphId}
@@ -112,6 +116,17 @@ export const AssetNodeLineageGraph: React.FC<{
   );
 };
 
+const SVGSaveZoomLevel = ({scale}: {scale: number}) => {
+  React.useEffect(() => {
+    try {
+      window.localStorage.setItem(LINEAGE_GRAPH_ZOOM_LEVEL, JSON.stringify(scale));
+    } catch (err) {
+      // no-op
+    }
+  }, [scale]);
+  return <></>;
+};
+
 const SVGContainer = styled.svg`
   overflow: visible;
   border-radius: 0;

diff --git a/js_modules/dagit/packages/core/src/graph/SVGViewport.tsx b/js_modules/dagit/packages/core/src/graph/SVGViewport.tsx
@@ -273,17 +273,15 @@ export class SVGViewport extends React.Component<SVGViewportProps, SVGViewportSt
     this.element.current?.focus();
   }
 
-  autocenter(animate = false) {
+  autocenter(animate = false, scale?: number) {
     const el = this.element.current!;
     const ownerRect = {width: el.clientWidth, height: el.clientHeight};
 
     const dw = ownerRect.width / this.props.graphWidth;
     const dh = ownerRect.height / this.props.graphHeight;
     const desiredScale = Math.min(dw, dh);
-    const boundedScale = Math.max(
-      Math.min(desiredScale, this.props.maxAutocenterZoom),
-      MIN_AUTOCENTER_ZOOM,
-    );
+    const boundedScale =
+      scale || Math.max(Math.min(desiredScale, this.props.maxAutocenterZoom), MIN_AUTOCENTER_ZOOM);
 
     if (
       this.state.scale < boundedScale &&