ClearML/clearml-web
1
0
Fork 0
mirror of https://github.com/clearml/clearml-web synced 2025-03-13 07:08:17 +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
*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

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;
top: 0;
pointer-events: none;
stroke: $blue-400;
fill: $blue-400;
stroke: $blue-800;
fill: $blue-800;
.selected {
stroke: $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;
selected: boolean;
targetId: string;
outgoing?: boolean;
sourceId?: number;
}
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}`,
headTransform: `translate(${ex},${ey}) rotate(${ae})`,
selected: false,
outgoing: false,
sourceId: parentId,
targetId: pipeLineItem.id
});
}
@ -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?.id;
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) {