Feature/arrows highlight (#85)

* proxy change to reflect API server default port * re-stylize arrows in pipeline * use the same type for both ids * feedback: color change * feedback: keep default color. darken only when selecting a node
allegroai · Jul 3, 2024 · 93851b7 · 93851b7
1 parent dff8c56
commit 93851b7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/proxy.config.mjs b/proxy.config.mjs
@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 
 const targets = [
-  'http://localhost:8081',     // 1
+ 'http://localhost:8008',     // 1
 ];
 
 const PROXY_CONFIG = {

diff --git a/...mon/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.html b/...mon/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.html
@@ -24,6 +24,7 @@
       ></sm-pipeline-controller-step>
     </div>
     <svg class="arrows"
+         [class.selected]="selectedEntity?.id"
          *ngIf="chartWidth"
          [attr.viewBox]="'0 0 ' + chartWidth + ' ' + (50 + 132 * dagModel?.length)"
          [style.width.px]="chartWidth"
@@ -32,6 +33,7 @@
       <g
         *ngFor="let arrow of arrows; trackBy: trackArrows"
         [class.selected]="arrow.selected"
+        [class.outgoing]="arrow.outgoing"
       >
         <path [attr.d]="arrow.path" fill="none" stroke-width="2"></path>
         <polygon

diff --git a/...mon/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.scss b/...mon/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.scss
@@ -139,10 +139,18 @@ $log-header-height: 48px;
     stroke: $blue-400;
     fill: $blue-400;
 
+    &.selected {
+      stroke: $blue-600;
+      fill: $blue-600;
+    }
     .selected {
       stroke: $blue-200;
       fill: $blue-200;
     }
+    .outgoing {
+      stroke: $blue-300;
+      fill: $blue-300;
+    }
   }
 }
 

diff --git a/...ommon/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.ts b/...ommon/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.ts
@@ -65,7 +65,9 @@ export interface Arrow {
   path2?: string;
   headTransform: string;
   selected: boolean;
-  targetId: string;
+  targetId: number;
+  sourceId: number;
+  outgoing?: boolean;
 }
 
 export enum StatusOption {
@@ -315,7 +317,9 @@ export class PipelineControllerInfoComponent implements OnInit, AfterViewInit, O
               path: `M${sx} ${sy} C${c1x} ${c1y}, ${c2x} ${c2y}, ${ex} ${ey}`,
               headTransform: `translate(${ex},${ey}) rotate(${ae})`,
               selected: false,
-              targetId: pipeLineItem.id
+              outgoing: false,
+              sourceId: parentId,
+              targetId: pipeLineItem.stepId,
             });
           }
         }
@@ -417,9 +421,11 @@ export class PipelineControllerInfoComponent implements OnInit, AfterViewInit, O
   }
 
   protected highlightArrows() {
-    this.arrows = this.arrows
-      ?.map(arrow => ({...arrow, selected: arrow.targetId === this.selectedEntity?.id}))
-      .sort((a, b) => a.selected && !b.selected ? 1 : -1);
+    this.arrows = this.arrows?.map(arrow => {
+      const isTarget = arrow.targetId === this.selectedEntity?.stepId;
+      const isSource = arrow.sourceId === this.selectedEntity?.stepId;
+      return {...arrow, selected: isTarget || isSource, outgoing: isSource};
+    }).sort((a, b) => (a.selected === b.selected) ? 0 : a.selected ? 1 : -1);
   }
 
   protected getTreeObject(task) {