Fix tooltip

Author: janfaracik

src/main/frontend/common/components/tooltip.tsx

@@ -9,7 +9,11 @@ declare global {
 /**
  * Provides a bridge between React and the Jenkins' tooltip component
  */
-export default function Tooltip({ text, children, properties = {} }: TooltipProps) {
+export default function Tooltip({
+  text,
+  children,
+  properties = {},
+}: TooltipProps) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -28,7 +32,7 @@ export default function Tooltip({ text, children, properties = {} }: TooltipProp
 }
 
 interface TooltipProps {
-  text: string;
+  text?: string;
   children: React.ReactNode;
   properties?: React.HTMLProps<HTMLDivElement>;
 }

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

@@ -5,10 +5,10 @@
 
   // This is hacky - the pipeline graph is too tall and isn't centered
   .PWGx-PipelineGraph-container {
-    height: 28px;
+    height: 36px;
 
     & > div {
-      margin-top: -40px;
+      margin-top: -36px;
     }
   }
 

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

@@ -141,7 +141,7 @@ export function PipelineGraph(props: Props) {
         </svg>
 
         {nodes.map((node) => (
-          <Node key={node.id} node={node} />
+          <Node key={node.id} node={node} collapsed={collapsed} />
         ))}
 
         {bigLabels.map((label) => (

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

@@ -16,11 +16,13 @@ type SVGChildren = Array<any>; // Fixme: Maybe refine this? Not sure what should
 
 interface NodeProps {
   node: NodeInfo;
+  collapsed?: boolean;
 }
+
 /**
  * Generate the SVG elements to represent a node.
  */
-export function Node({ node }: NodeProps) {
+export function Node({ node, collapsed }: NodeProps) {
   const key = node.key;
   const groupChildren: SVGChildren = [];
 
@@ -72,8 +74,9 @@ export function Node({ node }: NodeProps) {
 
   return (
     <Tooltip
-      text={`${node.stage.name}: ${node.stage.state}`}
-      properties={groupProps}>
+      text={collapsed ? node.stage.name : undefined}
+      properties={groupProps}
+    >
       {groupChildren}
       {clickable && (
         <a href={document.head.dataset.rooturl + url}>
@@ -89,6 +92,7 @@ interface SelectionHighlightProps {
   nodeColumns: Array<NodeColumn>;
   isStageSelected: (stage: StageInfo) => boolean;
 }
+
 /**
  * Generates SVG for visual highlight to show which node is selected.
  */