ClearML/clearml-web
1
0
Fork 0
mirror of https://github.com/clearml/clearml-web synced 2025-05-08 22:09:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

re-stylize arrows in pipeline

Browse Source
This commit is contained in:
Michael Pilosov 2024-07-01 17:18:02 -06:00
parent 7ff7e98ef6
commit 0d6558bd95
3 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.html
View File

@ -32,6 +32,7 @@
<g <g
*ngFor="let arrow of arrows; trackBy: trackArrows" *ngFor="let arrow of arrows; trackBy: trackArrows"
[class.selected]="arrow.selected" [class.selected]="arrow.selected"
[class.outgoing]="arrow.outgoing"
> >
<path [attr.d]="arrow.path" fill="none" stroke-width="2"></path> <path [attr.d]="arrow.path" fill="none" stroke-width="2"></path>
<polygon <polygon

8
src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.scss
View File

@ -136,13 +136,17 @@ $log-header-height: 48px;
left: 0; left: 0;
top: 0; top: 0;
pointer-events: none; pointer-events: none;
stroke: $blue-400; stroke: $blue-800;
fill: $blue-400; fill: $blue-800;
.selected { .selected {
stroke: $blue-200; stroke: $blue-200;
fill: $blue-200; fill: $blue-200;
} }
.outgoing {
stroke: $blue-400;
fill: $blue-400;
}
} }
} }

12
src/app/webapp-common/pipelines-controller/pipeline-controller-info/pipeline-controller-info.component.ts
View File

@ -66,6 +66,8 @@ export interface Arrow {
headTransform: string; headTransform: string;
selected: boolean; selected: boolean;
targetId: string; targetId: string;
outgoing?: boolean;
sourceId?: number;
} }
export enum StatusOption { export enum StatusOption {
@ -315,6 +317,8 @@ export class PipelineControllerInfoComponent implements OnInit, AfterViewInit, O
path: `M${sx} ${sy} C${c1x} ${c1y}, ${c2x} ${c2y}, ${ex} ${ey}`, path: `M${sx} ${sy} C${c1x} ${c1y}, ${c2x} ${c2y}, ${ex} ${ey}`,
headTransform: `translate(${ex},${ey}) rotate(${ae})`, headTransform: `translate(${ex},${ey}) rotate(${ae})`,
selected: false, selected: false,
outgoing: false,
sourceId: parentId,
targetId: pipeLineItem.id targetId: pipeLineItem.id
}); });
} }
@ -417,9 +421,11 @@ export class PipelineControllerInfoComponent implements OnInit, AfterViewInit, O
} }
protected highlightArrows() { protected highlightArrows() {
this.arrows = this.arrows this.arrows = this.arrows?.map(arrow => {
?.map(arrow => ({...arrow, selected: arrow.targetId === this.selectedEntity?.id})) const isTarget = arrow.targetId === this.selectedEntity?.id;
.sort((a, b) => a.selected && !b.selected ? 1 : -1); 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) { protected getTreeObject(task) {