fix(viz): track draw state to apply recenter on fresh draws

src/elm/Main.elm

@@ -2160,7 +2160,7 @@ update msg model =
 
                                 cmd =
                                     if not sameBuild then
-                                        renderBuildGraph updatedModel False
+                                        renderBuildGraph updatedModel True
 
                                     else
                                         Cmd.none
@@ -4376,7 +4376,7 @@ loadBuildGraphPage model org repo buildNumber =
             , getBuild um org repo buildNumber
             , getAllBuildSteps um org repo buildNumber Nothing False
             , getBuildGraph um org repo buildNumber False
-            , renderBuildGraph um True
+            , renderBuildGraph um <| not sameResource
             ]
     )
 

src/elm/Pages/Build/Graph/Interop.elm

@@ -16,7 +16,7 @@ import Vela exposing (encodeBuildGraphRenderData)
 {-| renderBuildGraph : takes partial build model and render options, and returns a cmd for dispatching a graphviz+d3 render command
 -}
 renderBuildGraph : BuildModel.PartialModel a -> Bool -> Cmd msg
-renderBuildGraph model centerOnDraw =
+renderBuildGraph model freshDraw =
     -- rendering the full graph requires repo, build and graph
     case ( model.repo.repo, model.repo.build.build, model.repo.build.graph.graph ) of
         ( Success r, Success b, Success g ) ->
@@ -28,7 +28,7 @@ renderBuildGraph model centerOnDraw =
                     , showServices = model.repo.build.graph.showServices
                     , showSteps = model.repo.build.graph.showSteps
                     , focusedNode = model.repo.build.graph.focusedNode
-                    , centerOnDraw = centerOnDraw
+                    , freshDraw = freshDraw
                     }
 
         _ ->

src/elm/Vela.elm

@@ -1398,7 +1398,7 @@ encodeBuildGraphRenderData graphData =
         , ( "focusedNode", Encode.int graphData.focusedNode )
         , ( "showServices", Encode.bool graphData.showServices )
         , ( "showSteps", Encode.bool graphData.showSteps )
-        , ( "centerOnDraw", Encode.bool graphData.centerOnDraw )
+        , ( "freshDraw", Encode.bool graphData.freshDraw )
         ]
 
 
@@ -1409,7 +1409,7 @@ type alias BuildGraphRenderInteropData =
     , focusedNode : Int
     , showServices : Bool
     , showSteps : Bool
-    , centerOnDraw : Bool
+    , freshDraw : Bool
     }
 
 

src/static/graph.ts

@@ -22,7 +22,8 @@ export function drawGraph(opts, content) {
 
   // check that a valid graph was rendered
   if (buildGraphElement === null || buildGraphElement.node() === null) {
-    return;
+    // control draw state
+    return false;
   }
 
   drawViewbox(opts, buildGraphElement);
@@ -32,6 +33,9 @@ export function drawGraph(opts, content) {
   var edges = drawEdges(opts, buildGraphElement, graphSelectors.edge);
 
   drawNodes(opts, buildGraphElement, graphSelectors.node, edges);
+
+  // control draw state
+  return true;
 }
 
 function drawBaseGraphWithZoom(opts, selector, content) {
@@ -115,11 +119,11 @@ function drawBaseGraphWithZoom(opts, selector, content) {
   buildGraphElement.html(content);
 
   // recenter on draw, when necessary
-  if (!opts.isRefreshDraw) {
+  if (!opts.sameBuild) {
     resetZoomAndCenter(opts, zoom);
   }
 
-  if (opts.centerOnDraw) {
+  if (!opts.drawn) {
     resetZoomAndCenter(opts, zoom);
   }
 

src/static/index.d.ts

@@ -113,8 +113,8 @@ export type GraphData = {
   showServices: boolean;
   /** @property showSteps: boolean */
   showSteps: boolean;
-  /** @property centerOnDraw: boolean */
-  centerOnDraw: boolean;
+  /** @property freshDraw: boolean */
+  freshDraw: boolean;
 };
 
 export type GraphInteraction = {

src/static/index.ts

@@ -130,29 +130,37 @@ function envOrNull(env: string, subst: string): string | null {
 
 // track rendering options globally to help determine draw logic
 var opts = {
+  drawn: false,
   currentBuild: -1,
-  isRefreshDraw: false,
-  centerOnDraw: false,
+  sameBuild: false,
+  freshDraw: false,
   contentFilter: '',
   onGraphInteraction: {},
 };
 
 app.ports.renderBuildGraph.subscribe(function (graphData) {
   const graphviz = Graphviz.load().then(res => {
     var content = res.layout(graphData.dot, 'svg', 'dot');
+
     // construct graph building options
-    opts.isRefreshDraw = opts.currentBuild === graphData.buildID;
-    opts.centerOnDraw = graphData.centerOnDraw;
+    // reset the draw state when the build changes
+    if (opts.currentBuild !== graphData.buildID || graphData.freshDraw) {
+      opts.drawn = false;
+    }
+
+    opts.sameBuild = opts.currentBuild === graphData.buildID;
+    opts.freshDraw = graphData.freshDraw;
     opts.contentFilter = graphData.filter;
 
     // track the currently drawn build
     opts.currentBuild = graphData.buildID;
 
+    // graph interactivity
     opts.onGraphInteraction = app.ports.onGraphInteraction;
 
     // dispatch the draw command to avoid elm/js rendering race condition
     setTimeout(() => {
-      Graph.drawGraph(opts, content);
+      opts.drawn = Graph.drawGraph(opts, content);
     }, 0);
   });
 });