Merge branch 'main' into fix/graph/buildnumber

cypress/fixtures/build_graph.json

@@ -1,5 +1,8 @@
 {
   "build_id": 4,
+  "build_number": 4,
+  "org": "github",
+  "repo": "octocat",
   "nodes": {
     "0": {
       "id": 0,

src/elm/Main.elm

@@ -1047,7 +1047,10 @@ update msg model =
                     case interaction.eventType of
                         "href" ->
                             ( model.repo.build.graph
-                            , Util.dispatch <| FocusOn (focusFragmentToFocusId "step" (Just <| String.Extra.rightOf "#" interaction.href))
+                            , Cmd.batch
+                                [ Util.dispatch <| FocusOn (focusFragmentToFocusId "step" (Just <| String.Extra.rightOf "#" interaction.href))
+                                , Navigation.pushUrl model.navigationKey interaction.href
+                                ]
                             )
 
                         "backdrop_click" ->
@@ -1074,10 +1077,7 @@ update msg model =
                             ( model.repo.build.graph, Cmd.none )
             in
             ( updateRepoModels model rm bm ugm_
-            , Cmd.batch
-                [ Navigation.pushUrl model.navigationKey interaction.href
-                , cmd
-                ]
+            , cmd
             )
 
         -- Outgoing HTTP requests
@@ -2143,15 +2143,12 @@ update msg model =
                 Err error ->
                     ( model, addError error )
 
-        BuildGraphResponse _ _ buildNumber _ response ->
+        BuildGraphResponse _ _ buildNumber isRefresh response ->
             case response of
                 Ok ( _, g ) ->
                     case model.page of
                         Pages.BuildGraph _ _ _ ->
                             let
-                                sameBuild =
-                                    gm.buildNumber == buildNumber
-
                                 ugm =
                                     { gm | buildNumber = buildNumber, graph = RemoteData.succeed g }
 
@@ -2160,16 +2157,9 @@ update msg model =
 
                                 updatedModel =
                                     updateRepoModels model rm ubm ugm
-
-                                cmd =
-                                    if not sameBuild then
-                                        renderBuildGraph updatedModel False
-
-                                    else
-                                        Cmd.none
                             in
                             ( updatedModel
-                            , cmd
+                            , renderBuildGraph updatedModel <| not isRefresh
                             )
 
                         _ ->
@@ -4370,16 +4360,15 @@ loadBuildGraphPage model org repo buildNumber =
       -- do not load resources if transition is auto refresh, line focus, etc
       -- MUST render graph here, or clicking on nodes won't cause an immediate change
     , if sameBuild && sameResource then
-        renderBuildGraph um False
+        renderBuildGraph um True
 
       else
         Cmd.batch
-            [ getRepo um org repo
-            , getBuilds um org repo Nothing Nothing Nothing
+            [ getBuilds um org repo Nothing Nothing Nothing
             , 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/DOT.elm

@@ -38,8 +38,8 @@ import Visualization.DOT
 <https://graphviz.org/doc/info/lang.html>
 <https://package.elm-lang.org/packages/elm-community/graph/latest/Graph.DOT>
 -}
-renderDOT : BuildModel.PartialModel a -> Repository -> Build -> BuildGraph -> String
-renderDOT model repo build buildGraph =
+renderDOT : BuildModel.PartialModel a -> BuildGraph -> String
+renderDOT model buildGraph =
     let
         isNodeFocused : String -> BuildGraphNode -> Bool
         isNodeFocused filter n =
@@ -103,15 +103,15 @@ renderDOT model repo build buildGraph =
 
         -- convert nodes and edges to DOT string format
         builtInNodesString =
-            List.map (nodeToString model repo build) builtInNodes
+            List.map (nodeToString model buildGraph) builtInNodes
                 |> String.join "\n"
 
         pipelineNodesString =
-            List.map (nodeToString model repo build) pipelineNodes
+            List.map (nodeToString model buildGraph) pipelineNodes
                 |> String.join "\n"
 
         serviceNodesString =
-            List.map (nodeToString model repo build) serviceNodes
+            List.map (nodeToString model buildGraph) serviceNodes
                 |> String.join "\n"
 
         builtInEdgesString =
@@ -170,8 +170,8 @@ renderDOT model repo build buildGraph =
 a "label" is actually a disguised graphviz table <https://graphviz.org/doc/info/lang.html> that is used to
 render a list of stage-steps as graph content that is recognized by the layout
 -}
-nodeLabel : BuildModel.PartialModel a -> Repository -> Build -> BuildGraphNode -> Bool -> String
-nodeLabel model repo build node showSteps =
+nodeLabel : BuildModel.PartialModel a -> BuildGraph -> BuildGraphNode -> Bool -> String
+nodeLabel model buildGraph node showSteps =
     let
         label =
             node.name
@@ -218,9 +218,9 @@ nodeLabel model repo build node showSteps =
 
         link step =
             Routes.routeToUrl <|
-                Routes.Build repo.org
-                    repo.name
-                    (String.fromInt build.number)
+                Routes.Build buildGraph.org
+                    buildGraph.repo
+                    (String.fromInt buildGraph.buildNumber)
                     (Just <|
                         Focus.resourceFocusFragment
                             "step"
@@ -276,11 +276,11 @@ nodeLabel model repo build node showSteps =
 
 {-| nodeLabel : takes model and a node, and returns the DOT string representation
 -}
-nodeToString : BuildModel.PartialModel a -> Repository -> Build -> Node BuildGraphNode -> String
-nodeToString model repo build node =
+nodeToString : BuildModel.PartialModel a -> BuildGraph -> Node BuildGraphNode -> String
+nodeToString model buildGraph node =
     "  "
         ++ String.fromInt node.id
-        ++ makeAttributes (nodeAttributes model repo build node.label)
+        ++ makeAttributes (nodeAttributes model buildGraph node.label)
 
 
 {-| edgeToString : takes model and a node, and returns the DOT string representation
@@ -416,8 +416,8 @@ nodeLabelTableAttributes =
 
 {-| nodeAttributes : returns the node-specific dynamic attributes
 -}
-nodeAttributes : BuildModel.PartialModel a -> Repository -> Build -> BuildGraphNode -> Dict String Attribute
-nodeAttributes model repo build node =
+nodeAttributes : BuildModel.PartialModel a -> BuildGraph -> BuildGraphNode -> Dict String Attribute
+nodeAttributes model buildGraph node =
     let
         -- embed node information in the element id
         id =
@@ -449,7 +449,7 @@ nodeAttributes model repo build node =
         , ( "id", DefaultJSONLabelEscape id )
         , ( "class", DefaultJSONLabelEscape class )
         , ( "href", DefaultJSONLabelEscape ("#" ++ node.name) )
-        , ( "label", HtmlLabelEscape <| nodeLabel model repo build node showSteps )
+        , ( "label", HtmlLabelEscape <| nodeLabel model buildGraph node showSteps )
         , ( "tooltip", DefaultJSONLabelEscape id )
         ]
 

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

@@ -16,19 +16,19 @@ 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 ) ->
+    case model.repo.build.graph.graph of
+        Success g ->
             Interop.renderBuildGraph <|
                 encodeBuildGraphRenderData
-                    { dot = renderDOT model r b g
-                    , buildID = b.id
+                    { dot = renderDOT model g
+                    , buildID = g.buildID
                     , filter = model.repo.build.graph.filter
                     , 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

@@ -1386,7 +1386,7 @@ defaultBuildGraphModel =
 
 defaultBuildGraph : BuildGraph
 defaultBuildGraph =
-    BuildGraph Dict.empty []
+    BuildGraph -1 -1 "" "" Dict.empty []
 
 
 encodeBuildGraphRenderData : BuildGraphRenderInteropData -> Encode.Value
@@ -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
     }
 
 
@@ -1425,7 +1425,11 @@ type alias BuildGraphModel =
 
 
 type alias BuildGraph =
-    { nodes : Dict Int BuildGraphNode
+    { buildID : Int
+    , buildNumber : Int
+    , org : Org
+    , repo : Repo
+    , nodes : Dict Int BuildGraphNode
     , edges : List BuildGraphEdge
     }
 
@@ -1454,6 +1458,10 @@ type alias BuildGraphEdge =
 decodeBuildGraph : Decoder BuildGraph
 decodeBuildGraph =
     Decode.succeed BuildGraph
+        |> required "build_id" int
+        |> required "build_number" int
+        |> required "org" string
+        |> required "repo" string
         |> required "nodes" (dict2 int decodeBuildGraphNode)
         |> optional "edges" (Decode.list decodeEdge) []
 

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,7 @@ function drawBaseGraphWithZoom(opts, selector, content) {
   buildGraphElement.html(content);
 
   // recenter on draw, when necessary
-  if (!opts.isRefreshDraw) {
-    resetZoomAndCenter(opts, zoom);
-  }
-
-  if (opts.centerOnDraw) {
+  if (!opts.sameBuild || !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,40 @@ 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
+
+    // what if the first freshDraw is skipped, and the next draw is a fresh
+    // but we never reset this drawn to false
+    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);
   });
 });