FOUR-22600: [SUMMER 25] Stages configuration (Progress Bar)

src/components/modeler/Modeler.vue

@@ -451,6 +451,7 @@
       ],
       validPreviewElements,
       centered: false,
+      currentStageModel: null,
     };
   },
   watch: {
@@ -624,7 +625,7 @@
                   fill:  '#1572C2',
                   strokeWidth: 0,
                 },
                 text: { text: event.number , fill: 'white', fontSize: 20, fontWeight: 'bold'},
               },
             });
 
@@ -782,7 +783,13 @@
           this.generateAssets();
         }
       });
-
+
+      this.paperManager.paper.on('link:pointerclick', (linkView) => {
+        this.currentStageModel = linkView.model;
+      });
+    },
+    getCurrentStageModelComponent() {
+      return this.currentStageModel.component;
     },
     registerCustomNodes()
     {
@@ -1153,7 +1160,7 @@
       }
     },
     registerStatusBar(component) {
       this.owner.validationBar.push(component);
     },
     /**
      * Register a mixin into a node component.

src/mixins/linkConfig.js

@@ -437,10 +437,80 @@ export default {
         this.listeningToMouseup = false;
       }
     },
+    /** 
+     * This function creates a label for a stage.
+     * @param {string} string - The text to display in the label.
+     * @returns {Object} The label object.
+     */
+    stageLabel(string, title) {
+      const label = {
+        customType: 'stage',
+        position: {
+          distance: 0.5,
+          offset: { x: 0, y: 0 },
+        },
+        attrs: {
+          text: {
+            text: string,
+            fill: '#ffffff',
+            fontWeight: 'bold',
+            fontSize: 12,
+          },
+          rect: {
+            fill: '#788793',
+            stroke: '#555555',
+            strokeWidth: 1,
+            rx: 3,
+            ry: 3,
+            ref: 'text',         // Relate rect to text
+            refWidth: '250%',    // Expand width in relation to text
+            refHeight: '100%',   // Expand height in relation to text
+            refX: '-70%',        // Move rect slightly to the left (horizontal padding)
+            refY: '0%',          // Move rect slightly upward (vertical padding)
+            title: `${this.$t('Stage:')} ${title}`,
+          },
+        },
+      };
+      return label;
+    },
+    /**
+     * This function sets the stage label for a link.
+     * @returns {void}
+     */
+    setStageLabel() {
+      if (!(this.node.definition?.config)) {
+        return;
+      }
+      const config = JSON.parse(this.node.definition.config);
+      if (!(config?.stage?.id)) {
+        return;
+      }
+      const label = this.stageLabel(config.stage.order, config.stage.name);
+      this.$nextTick(()=> {
+        this.removeStageLabels();
+        const linkView = this.shape.findView(this.paper);
+        const labels = linkView.model.get('labels') || [];
+        linkView.model.set('labels', [...labels, label]);
+      });
+    },
+    /**
+     * This function removes the stage labels for a link.
+     * @returns {void}
+     */
+    removeStageLabels() {
+      const linkView = this.shape.findView(this.paper);
+      const labels = linkView.model.get('labels') || [];
+      for (let i = labels.length - 1; i >= 0; i--) {
+        if (labels[i].customType === 'stage') {
+          linkView.model.removeLabel(i);
+        }
+      } 
+    },
   },
   created() {
     this.updateWaypoints = debounce(this.updateWaypoints, 100);
     this.emitSave.bind(this);
+    this.setStageLabel();
   },
   async mounted() {
     await this.$nextTick();