From 93851b7a96249038b1327a762b5dc0b2b30c6426 Mon Sep 17 00:00:00 2001
From: Michael Pilosov <40366263+mathematicalmichael@users.noreply.github.com>
Date: Wed, 3 Jul 2024 01:53:15 -0600
Subject: [PATCH] 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
---
 proxy.config.mjs                                 |  2 +-
 .../pipeline-controller-info.component.html      |  2 ++
 .../pipeline-controller-info.component.scss      |  8 ++++++++
 .../pipeline-controller-info.component.ts        | 16 +++++++++++-----
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/proxy.config.mjs b/proxy.config.mjs
index 6aad2025..eee1e1ba 100644
--- 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/src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.html b/src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.html
index 2f90a539..71715c24 100644
--- a/src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.html
+++ b/src/app/webapp-common/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/src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.scss b/src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.scss
index 89cd703a..bf1333d2 100644
--- a/src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.scss
+++ b/src/app/webapp-common/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/src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.ts b/src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.ts
index 18aa979d..d8f61ede 100644
--- a/src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.ts
+++ b/src/app/webapp-common/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) {