Add selected node state

Author: janfaracik

src/main/frontend/pipeline-console-view/pipeline-console/main/PipelineConsole.tsx

@@ -59,6 +59,7 @@ export default function PipelineConsole() {
           mainViewVisibility === "graphOnly") && (
           <Stages
             stages={stages}
+            selectedStage={openStage || undefined}
             stageViewPosition={stageViewPosition}
             onStageSelect={handleStageSelect}
           />

src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.tsx

@@ -16,6 +16,7 @@ import {
 
 export default function Stages({
   stages,
+                                 selectedStage,
   stageViewPosition,
   onStageSelect,
 }: StagesProps) {
@@ -96,6 +97,7 @@ export default function Stages({
         <TransformComponent wrapperStyle={{ width: "100%", height: "100%" }}>
           <PipelineGraph
             stages={stages}
+            selectedStage={selectedStage}
             onStageSelect={(e) => {
               onStageSelect(e);
               setIsExpanded(false);
@@ -109,6 +111,7 @@ export default function Stages({
 
 interface StagesProps {
   stages: StageInfo[];
+  selectedStage?: StageInfo;
   stageViewPosition: StageViewPosition;
   onStageSelect: (nodeId: string) => void;
 }

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

@@ -125,6 +125,9 @@ export function PipelineGraph(props: Props) {
             key={node.id}
             node={node}
             collapsed={collapsed}
+            selected={
+              node.isPlaceholder ? false : selectedStage?.id === node.stage.id
+            }
             onStageSelect={props.onStageSelect}
           />
         ))}

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

@@ -13,19 +13,21 @@ import Tooltip from "../../../../common/components/tooltip.tsx";
 import { Total } from "../../../../common/utils/timings.tsx";
 import "./nodes.scss";
 import { CounterNodeInfo } from "../PipelineGraphLayout.ts";
+import { classNames } from "../../../../common/utils/classnames.ts";
 
 type SVGChildren = Array<any>; // Fixme: Maybe refine this? Not sure what should go here, we have working code I can't make typecheck
 
 interface NodeProps {
   node: NodeInfo;
   collapsed?: boolean;
   onStageSelect: (nodeId: string) => void;
+  selected: boolean;
 }
 
 /**
  * Generate the SVG elements to represent a node.
  */
-export function Node({ node, collapsed, onStageSelect }: NodeProps) {
+export function Node({ node, collapsed, onStageSelect, selected }: NodeProps) {
   const key = node.key;
 
   if (node.isPlaceholder) {
@@ -116,11 +118,14 @@ export function Node({ node, collapsed, onStageSelect }: NodeProps) {
       left: node.x,
       translate: "-50% -50%",
     } as CSSProperties,
-    className:
-      "PWGx-pipeline-node PWGx-pipeline-node--" +
-      state +
-      " " +
+    className: classNames(
+      "PWGx-pipeline-node",
+      "PWGx-pipeline-node--" + state,
       resultToColor(node.stage.state, node.stage.skeleton),
+      {
+        "PWGx-pipeline-node--selected": selected,
+      },
+    ),
   };
 
   let tooltip: React.ReactElement | undefined;

src/main/frontend/pipeline-graph-view/pipeline-graph/styles/PipelineGraphWidget.scss

@@ -22,6 +22,12 @@
     z-index: -1;
   }
 
+  &--selected {
+    &::after {
+      box-shadow: 0 0 0 0.125rem currentColor, 0 0 0 0.5rem var(--card-background) !important;
+    }
+  }
+
   &:has(a) {
     &::after {
       content: "";