Add timings to stage view

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/SingleRun.tsx

@@ -23,7 +23,6 @@ export default function SingleRun({ run, currentJobPath }: SingleRunProps) {
 
   const layout: LayoutInfo = {
     ...defaultLayout,
-    nodeSpacingH: 45,
   };
 
   function Changes() {
@@ -44,9 +43,9 @@ export default function SingleRun({ run, currentJobPath }: SingleRunProps) {
   }
 
   return (
-    <div className="pgv-single-run">
+    <div className="pgv-single-run" style={{ height: "100px" }}>
       <div>
-        <a href={currentJobPath + run.id} className="pgw-user-specified-text">
+        <a href={currentJobPath + run.id} className="pgv-user-specified-text">
           <StatusIcon status={run.result} />
           {run.displayName}
           <span>

src/main/frontend/multi-pipeline-graph-view/multi-pipeline-graph/main/single-run.scss

@@ -4,19 +4,19 @@
   align-items: center;
 
   // This is hacky - the pipeline graph is too tall and isn't centered
-  .PWGx-PipelineGraph-container {
-    height: 36px;
-
-    & > div {
-      margin-top: -36px;
-    }
-  }
+  //.PWGx-PipelineGraph-container {
+  //  height: 36px;
+  //
+  //  & > div {
+  //    margin-top: -36px;
+  //  }
+  //}
 
   &:last-of-type {
     border-bottom: none;
   }
 
-  .pgw-user-specified-text {
+  .pgv-user-specified-text {
     display: grid;
     grid-template-columns: auto 1fr;
     align-items: start;

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

@@ -15,6 +15,7 @@ import {
   BigLabel,
   SequentialContainerLabel,
   SmallLabel,
+  TimingsLabel,
 } from "./support/labels.tsx";
 import { Node, SelectionHighlight } from "./support/nodes.tsx";
 
@@ -24,6 +25,7 @@ export function PipelineGraph(props: Props) {
   const [nodeColumns, setNodeColumns] = useState<NodeColumn[]>([]);
   const [connections, setConnections] = useState<CompositeConnection[]>([]);
   const [bigLabels, setBigLabels] = useState<NodeLabelInfo[]>([]);
+  const [timings, setTimings] = useState<NodeLabelInfo[]>([]);
   const [smallLabels, setSmallLabels] = useState<NodeLabelInfo[]>([]);
   const [branchLabels, setBranchLabels] = useState<NodeLabelInfo[]>([]);
   const [measuredWidth, setMeasuredWidth] = useState<number>(0);
@@ -76,6 +78,7 @@ export function PipelineGraph(props: Props) {
     setConnections(newLayout.connections);
     setBigLabels(newLayout.bigLabels);
     setSmallLabels(newLayout.smallLabels);
+    setTimings(newLayout.timings);
     setBranchLabels(newLayout.branchLabels);
     setMeasuredWidth(newLayout.measuredWidth);
     setMeasuredHeight(newLayout.measuredHeight);
@@ -132,6 +135,16 @@ export function PipelineGraph(props: Props) {
           />
         ))}
 
+        {timings.map((label) => (
+          <TimingsLabel
+            key={label.key}
+            details={label}
+            layout={layoutState}
+            measuredHeight={measuredHeight}
+            isSelected={selectedStage?.id === label.stage?.id}
+          />
+        ))}
+
         {smallLabels.map((label) => (
           <SmallLabel
             key={label.key}

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

@@ -134,6 +134,7 @@ export function layoutGraph(
   positionNodes(allNodeColumns, layout);
 
   const bigLabels = createBigLabels(allNodeColumns, collapsed);
+  const timings = createTimings(allNodeColumns, collapsed);
   const smallLabels = createSmallLabels(allNodeColumns, collapsed);
   const branchLabels = createBranchLabels(allNodeColumns, collapsed);
   const connections = createConnections(allNodeColumns);
@@ -146,9 +147,7 @@ export function layoutGraph(
     for (const row of column.rows) {
       for (const node of row) {
         measuredWidth = Math.max(measuredWidth, node.x + nodeSpacingH / 2);
-        measuredHeight = collapsed
-          ? 60
-          : Math.max(measuredHeight, node.y + ypStart);
+        measuredHeight = Math.max(measuredHeight, node.y + ypStart);
       }
     }
   }
@@ -157,6 +156,7 @@ export function layoutGraph(
     nodeColumns: allNodeColumns,
     connections,
     bigLabels,
+    timings,
     smallLabels,
     branchLabels,
     measuredWidth,
@@ -340,12 +340,16 @@ function createBigLabels(
 ): Array<NodeLabelInfo> {
   const labels: Array<NodeLabelInfo> = [];
 
-  if (collapsed) {
-    return [];
-  }
+  // if (collapsed) {
+  //   return [];
+  // }
 
   for (const column of columns) {
     const node = column.rows[0][0];
+
+    if (node.isPlaceholder && node.type === "counter") {
+      continue;
+    }
     const stage = column.topStage;
     const text = stage ? stage.name : node.name;
     const key = "l_b_" + node.key;
@@ -369,6 +373,48 @@ function createBigLabels(
   return labels;
 }
 
+/**
+ * Generate label descriptions for big labels at the top of each column
+ */
+function createTimings(
+  columns: Array<NodeColumn>,
+  collapsed: boolean,
+): Array<NodeLabelInfo> {
+  const labels: Array<NodeLabelInfo> = [];
+
+  // if (collapsed) {
+  //   return [];
+  // }
+
+  for (const column of columns) {
+    const node = column.rows[0][0];
+    if (node.isPlaceholder) {
+      continue;
+    }
+    const stage = column.topStage;
+
+    const text = stage?.totalDurationMillis + "";
+    if (!text) {
+      // shouldn't happen
+      continue;
+    }
+    const key = "l_t_" + node.key;
+
+    console.log(stage, node);
+
+    labels.push({
+      x: column.centerX,
+      y: node.y + 55,
+      node,
+      stage,
+      text,
+      key,
+    });
+  }
+
+  return labels;
+}
+
 /**
  * Generate label descriptions for small labels under the nodes
  */

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

@@ -121,6 +121,7 @@ export interface PositionedGraph {
   nodeColumns: Array<NodeColumn>;
   connections: Array<CompositeConnection>;
   bigLabels: Array<NodeLabelInfo>;
+  timings: Array<NodeLabelInfo>;
   smallLabels: Array<NodeLabelInfo>;
   branchLabels: Array<NodeLabelInfo>;
   measuredWidth: number;

src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/labels.tsx

@@ -1,10 +1,11 @@
 import { CSSProperties } from "react";
 
 import { sequentialStagesLabelOffset } from "../PipelineGraphLayout.ts";
 import { LayoutInfo, NodeLabelInfo } from "../PipelineGraphModel.tsx";
 import { TooltipLabel } from "./convertLabelToTooltip.tsx";
 import { nodeStrokeWidth } from "./StatusIcons.tsx";
 import { TruncatingLabel } from "./TruncatingLabel.tsx";
+import { Total } from "../../../../common/utils/timings.tsx";
 
 interface RenderBigLabelProps {
   details: NodeLabelInfo;
@@ -72,6 +73,61 @@
   );
 }
 
+/**
+ * Generate the Component for a big label
+ */
+export function TimingsLabel({
+  details,
+  layout,
+  measuredHeight,
+  isSelected,
+}: RenderBigLabelProps) {
+  const { nodeSpacingH, labelOffsetV, connectorStrokeWidth, ypStart } = layout;
+
+  const labelWidth = nodeSpacingH - connectorStrokeWidth * 2;
+  const labelHeight = ypStart - labelOffsetV;
+  const labelOffsetH = Math.floor(labelWidth / -2);
+
+  // These are about layout more than appearance, so they should probably remain inline
+  const timingsLabelStyle: CSSProperties = {
+    position: "absolute",
+    width: labelWidth,
+    maxHeight: labelHeight + "px",
+    textAlign: "center",
+    marginLeft: labelOffsetH,
+  };
+
+  const x = details.x;
+  const bottom = measuredHeight - details.y + labelOffsetV;
+
+  // These are about layout more than appearance, so they're inline
+  const style: CSSProperties = {
+    ...timingsLabelStyle,
+    bottom: bottom + "px",
+    left: x + "px",
+  };
+
+  const classNames = ["PWGx-pipeline-big-label"];
+  if (isSelected) {
+    classNames.push("PWGx-pipeline-big-label--selected");
+  }
+  if (details.stage && details.stage.synthetic) {
+    classNames.push("pgv-graph-node--synthetic");
+  }
+  if (details.stage?.skeleton) {
+    classNames.push("pgv-graph-node--skeleton");
+  }
+  if (details.node.id < 0) {
+    classNames.push("pgv-graph-node--skeleton");
+  }
+
+  return (
+    <div className={classNames.join(" ")} style={style} key={details.key}>
+      <Total ms={parseInt(details.text, 10)} />
+    </div>
+  );
+}
+
 interface SmallLabelProps {
   details: NodeLabelInfo;
   layout: LayoutInfo;

src/main/frontend/pipeline-graph-view/pipeline-graph/main/support/nodes.tsx

@@ -137,7 +137,7 @@ export function Node({
     ),
   };
 
-  let tooltip: ReactElement | undefined;
+  let tooltip: ReactElement;
   if (collapsed) {
     tooltip = (
       <div className="pgv-node-tooltip">
@@ -147,6 +147,12 @@ export function Node({
         </div>
       </div>
     );
+  } else {
+    tooltip = (
+      <div className="pgv-node-tooltip">
+        <Total ms={node.stage.totalDurationMillis} />
+      </div>
+    );
   }
 
   return (