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

Feature/arrows highlight (#85)

Browse Source 
* 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
This commit is contained in:
Michael Pilosov 2024-07-03 01:53:15 -06:00 committed by GitHub
parent dff8c5620a
commit 93851b7a96
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
proxy.config.mjs
View File

@ -1,7 +1,7 @@
import * as fs from 'fs'; import * as fs from 'fs';
const targets = [ const targets = [
'http://localhost:8081', // 1 'http://localhost:8008', // 1
]; ];
const PROXY_CONFIG = { const PROXY_CONFIG = {

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

@ -24,6 +24,7 @@
></sm-pipeline-controller-step> ></sm-pipeline-controller-step>
</div> </div>
<svg class="arrows" <svg class="arrows"
[class.selected]="selectedEntity?.id"
*ngIf="chartWidth" *ngIf="chartWidth"
[attr.viewBox]="'0 0 ' + chartWidth + ' ' + (50 + 132 * dagModel?.length)" [attr.viewBox]="'0 0 ' + chartWidth + ' ' + (50 + 132 * dagModel?.length)"
[style.width.px]="chartWidth" [style.width.px]="chartWidth"
@ -32,6 +33,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

@ -139,10 +139,18 @@ $log-header-height: 48px;
stroke: $blue-400; stroke: $blue-400;
fill: $blue-400; fill: $blue-400;
&.selected {
stroke: $blue-600;
fill: $blue-600;
}
.selected { .selected {
stroke: $blue-200; stroke: $blue-200;
fill: $blue-200; fill: $blue-200;
} }
.outgoing {
stroke: $blue-300;
fill: $blue-300;
}
} }
} }

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

@ -65,7 +65,9 @@ export interface Arrow {
path2?: string; path2?: string;
headTransform: string; headTransform: string;
selected: boolean; selected: boolean;
targetId: string; targetId: number;
sourceId: number;
outgoing?: boolean;
} }
export enum StatusOption { 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}`, 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,
targetId: pipeLineItem.id outgoing: false,
sourceId: parentId,
targetId: pipeLineItem.stepId,
}); });
} }
} }
@ -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?.stepId;
.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) {