From cce9c79d1658f7cab69e1b1b959166258c3429eb Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Fri, 20 Dec 2024 18:46:15 +0100 Subject: [PATCH 01/68] Add basic components for the workflow editor --- src/app/app.module.ts | 2 + .../default-layout.component.html | 7 ++ .../workflow-session.component.html | 2 + .../workflow-session.component.scss | 0 .../workflow-session.component.ts | 41 ++++++ .../workflow-viewer.component.html | 1 + .../workflow-viewer.component.scss | 0 .../workflow-viewer.component.ts | 12 ++ .../workflows-dashboard.component.html | 66 ++++++++++ .../workflows-dashboard.component.scss | 0 .../workflows-dashboard.component.ts | 62 ++++++++++ .../workflows/models/workflows.model.ts | 117 ++++++++++++++++++ .../workflows/services/workflows.service.ts | 69 +++++++++++ src/app/plugins/workflows/workflows.module.ts | 34 +++++ src/app/services/webui-settings.service.ts | 4 + src/app/views/views-routing.module.ts | 10 ++ 16 files changed, 427 insertions(+) create mode 100644 src/app/plugins/workflows/components/workflow-session/workflow-session.component.html create mode 100644 src/app/plugins/workflows/components/workflow-session/workflow-session.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts create mode 100644 src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts create mode 100644 src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html create mode 100644 src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.scss create mode 100644 src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts create mode 100644 src/app/plugins/workflows/models/workflows.model.ts create mode 100644 src/app/plugins/workflows/services/workflows.service.ts create mode 100644 src/app/plugins/workflows/workflows.module.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f6daff46..e9e70fb0 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -77,6 +77,7 @@ import {ModalModule} from 'ngx-bootstrap/modal'; import {NgxJsonViewerModule} from 'ngx-json-viewer'; import {NotebooksModule} from './plugins/notebooks/notebooks.module'; import {IconDirective} from '@coreui/icons-angular'; +import {WorkflowsModule} from './plugins/workflows/workflows.module'; @NgModule({ @@ -90,6 +91,7 @@ import {IconDirective} from '@coreui/icons-angular'; NgChartsModule, // plugins NotebooksModule, + WorkflowsModule, ToastComponent, NgChartsModule, ToasterComponent, diff --git a/src/app/containers/default-layout/default-layout.component.html b/src/app/containers/default-layout/default-layout.component.html index 68064b21..624a34a6 100644 --- a/src/app/containers/default-layout/default-layout.component.html +++ b/src/app/containers/default-layout/default-layout.component.html @@ -75,6 +75,13 @@ + + + + Workflows + + + diff --git a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html new file mode 100644 index 00000000..9b2766fd --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html @@ -0,0 +1,2 @@ +

Session ID: {{sessionId}}

+

{{session | json}}

\ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.scss b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts new file mode 100644 index 00000000..c96a75d7 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts @@ -0,0 +1,41 @@ +import {Component, inject, OnDestroy, OnInit} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {ToasterService} from '../../../../components/toast-exposer/toaster.service'; +import {LeftSidebarService} from '../../../../components/left-sidebar/left-sidebar.service'; +import {WorkflowsService} from '../../services/workflows.service'; +import {SessionModel} from '../../models/workflows.model'; + +@Component({ + selector: 'app-workflow-session', + templateUrl: './workflow-session.component.html', + styleUrl: './workflow-session.component.scss' +}) +export class WorkflowSessionComponent implements OnInit, OnDestroy { + private readonly _route = inject(ActivatedRoute); + private readonly _router = inject(Router); + private readonly _toast = inject(ToasterService); + private readonly _sidebar = inject(LeftSidebarService); + private readonly _workflows = inject(WorkflowsService); + + sessionId: string; + session: SessionModel; + + ngOnInit(): void { + this._sidebar.hide(); + + this._route.paramMap.subscribe(params => { + this.sessionId = params.get('sessionId'); + if (this.sessionId) { + this._workflows.getSession(this.sessionId).subscribe({ + next: res => this.session = res, + error: e => this._router.navigate(['./../'], {relativeTo: this._route}) + }); + } + }); + + this.sessionId = this._route.snapshot.paramMap.get('sessionId'); + } + + ngOnDestroy(): void { + } +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html new file mode 100644 index 00000000..f3a83729 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -0,0 +1 @@ +

workflow-viewer works!

diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts new file mode 100644 index 00000000..053245ef --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -0,0 +1,12 @@ +import {Component, inject} from '@angular/core'; +import {WorkflowsService} from '../../services/workflows.service'; + +@Component({ + selector: 'app-workflow-viewer', + templateUrl: './workflow-viewer.component.html', + styleUrl: './workflow-viewer.component.scss' +}) +export class WorkflowViewerComponent { + private readonly _workflows = inject(WorkflowsService); + +} diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html new file mode 100644 index 00000000..4def5cbf --- /dev/null +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html @@ -0,0 +1,66 @@ +

Workflow Dashboard

+ +

Stored Workflows

+ + + + + + + + +
+
+ + +
+ +
+
+ Description: {{ workflowDef.value.versions[selectedVersion[workflowDef.key]].description }} +
+
+ Creation Time: {{ workflowDef.value.versions[selectedVersion[workflowDef.key]].creationTime | date:'short' }} +
+ + +
+ +
+ + + + + +

Active Sessions

+
    + +
  • +
    +
    + + {{workflowDefs[session.value.workflowId].name}} + v{{session.value.version}} + + + {{session.value.type}} + + +
    + SessionId: {{ session.value.sessionId }}
    + Connected Users: {{ session.value.connectionCount }}
    +
    +
    + +
    +
    • +     +
diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.scss b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts new file mode 100644 index 00000000..41a5873a --- /dev/null +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts @@ -0,0 +1,62 @@ +import {Component, inject, OnDestroy, OnInit} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {ToasterService} from '../../../../components/toast-exposer/toaster.service'; +import {LeftSidebarService} from '../../../../components/left-sidebar/left-sidebar.service'; +import {WorkflowsService} from '../../services/workflows.service'; +import {SessionModel, WorkflowDefModel} from '../../models/workflows.model'; + +@Component({ + selector: 'app-workflows-dashboard', + templateUrl: './workflows-dashboard.component.html', + styleUrl: './workflows-dashboard.component.scss' +}) +export class WorkflowsDashboardComponent implements OnInit, OnDestroy { + private readonly _route = inject(ActivatedRoute); + private readonly _router = inject(Router); + private readonly _toast = inject(ToasterService); + private readonly _sidebar = inject(LeftSidebarService); + private readonly _workflows = inject(WorkflowsService); + + workflowDefs: Record; + sessions: Record; + selectedVersion: Record = {}; + + ngOnInit(): void { + this._sidebar.hide(); + + this._workflows.getSessions().subscribe({ + next: res => this.sessions = res + }); + this._workflows.getWorkflowDefs().subscribe({ + next: res => { + console.log(res); + this.workflowDefs = res; + for (const version in this.workflowDefs) { + + } + Object.entries(res).forEach(([key, value]) => { + this.selectedVersion[key] = Math.max(...Object.keys(value.versions).map(versionId => parseInt(versionId, 10))); + }); + } + }); + } + + ngOnDestroy(): void { + } + + onVersionChange(workflowName: string) { + // Logic when a version is selected (optional) + console.log('Selected version for', workflowName, this.selectedVersion[workflowName]); + } + + openVersion(key: string) { + console.log('Opening Version'); + this._workflows.openWorkflow(key, this.selectedVersion[key]).subscribe({ + next: sessionId => this.openSession(sessionId) + }); + } + + openSession(sessionId: string) { + this._router.navigate([`./${sessionId}`], {relativeTo: this._route}); + } +} diff --git a/src/app/plugins/workflows/models/workflows.model.ts b/src/app/plugins/workflows/models/workflows.model.ts new file mode 100644 index 00000000..5951da48 --- /dev/null +++ b/src/app/plugins/workflows/models/workflows.model.ts @@ -0,0 +1,117 @@ +import {DataModel} from '../../../models/ui-request.model'; +import {FieldDefinition} from '../../../components/data-view/models/result-set.model'; + +export enum EdgeState { + IDLE = 'IDLE', + ACTIVE = 'ACTIVE', + INACTIVE = 'INACTIVE' +} + +export enum CommonType { + NONE = 'NONE', + EXTRACT = 'EXTRACT', + LOAD = 'LOAD' +} + +export enum ControlStateMerger { + AND_OR = 'AND_OR', + AND_AND = 'AND_AND' +} + +export enum ActivityState { + IDLE = 'IDLE', + QUEUED = 'QUEUED', + EXECUTING = 'EXECUTING', + SKIPPED = 'SKIPPED', + FAILED = 'FAILED', + FINISHED = 'FINISHED', + SAVED = 'SAVED' +} + +export enum WorkflowState { + IDLE = 'IDLE', + EXECUTING = 'EXECUTING', + INTERRUPTED = 'INTERRUPTED' +} + +export enum SessionModelType { + USER_SESSION = 'USER_SESSION', + API_SESSION = 'API_SESSION', + JOB_SESSION = 'JOB_SESSION' +} + +export type Settings = Record; + +export interface EdgeModel { + fromId: string; + toId: string; + fromPort: number; + toPort: number; + isControl: boolean; + state?: EdgeState; // only non-null when receiving, not when referencing an edge from the frontend +} + +export interface ActivityConfigModel { + enforceCheckpoint: boolean; + preferredStores: string[]; + commonType: CommonType; + controlStateMerger: ControlStateMerger; +} + +export interface RenderModel { + posX: number; + posY: number; + name: string; + notes: string; +} + +export interface TypePreviewModel { + dataModel: DataModel; + fields: FieldDefinition[]; +} + +export interface ActivityModel { + type: string; + id: string; + settings: Settings; + config: ActivityConfigModel; + rendering: RenderModel; + state?: ActivityState; + inTypePreview?: TypePreviewModel[]; + invalidReason?: string; +} + +export interface SessionModel { + type: SessionModelType; + sessionId: string; + connectionCount: number; + workflowId?: string; // Only for USER_SESSION + version?: number; // Only for USER_SESSION +} + +export interface WorkflowDefModel { + name: string; + versions: Record; +} + +export interface VersionInfo { + description: string; + creationTime: Date; +} + +export interface WorkflowModel { + format_version: string; + activities: ActivityModel[]; + edges: EdgeModel[]; + config: WorkflowConfigModel; + variables: Settings; + state?: WorkflowState; +} + +export interface WorkflowConfigModel { + preferredStores: Record; + fusionEnabled: boolean; + pipelineEnabled: boolean; + maxWorkers: number; + pipelineQueueCapacity: number; +} diff --git a/src/app/plugins/workflows/services/workflows.service.ts b/src/app/plugins/workflows/services/workflows.service.ts new file mode 100644 index 00000000..5eac819d --- /dev/null +++ b/src/app/plugins/workflows/services/workflows.service.ts @@ -0,0 +1,69 @@ +import {Injectable} from '@angular/core'; +import {HttpClient, HttpHeaders} from '@angular/common/http'; +import {WebuiSettingsService} from '../../../services/webui-settings.service'; +import {ActivityModel, SessionModel, WorkflowConfigModel, WorkflowDefModel, WorkflowModel} from '../models/workflows.model'; + +class JsonNode { +} + +@Injectable({ + providedIn: 'root' +}) +export class WorkflowsService { + + constructor(private _http: HttpClient, private _settings: WebuiSettingsService) { + } + + private httpUrl = this._settings.getConnection('workflows.rest'); + private httpOptions = {headers: new HttpHeaders({'Content-Type': 'application/json'})}; + + getSessions() { + return this._http.get>(`${this.httpUrl}/sessions`, this.httpOptions); + } + + getSession(sessionId: string) { + return this._http.get(`${this.httpUrl}/sessions/${sessionId}`, this.httpOptions); + } + + getActiveWorkflow(sessionId: string) { + return this._http.get(`${this.httpUrl}/sessions/${sessionId}/workflow`, this.httpOptions); + } + + getWorkflowConfig(sessionId: string) { + return this._http.get(`${this.httpUrl}/sessions/${sessionId}/workflow/config`, this.httpOptions); + } + + getActivity(sessionId: string, activityId: string) { + return this._http.get(`${this.httpUrl}/sessions/${sessionId}/workflow/${activityId}`, this.httpOptions); + } + + getIntermediaryResult(sessionId: string, activityId: string, outIndex: number) { + return this._http.get(`${this.httpUrl}/sessions/${sessionId}/workflow/${activityId}/${outIndex}`, this.httpOptions); + } + + getWorkflowDefs() { + return this._http.get>(`${this.httpUrl}/workflows`, this.httpOptions); + } + + createSession(workflowName: string) { + const json = { + name: workflowName + }; + return this._http.post(`${this.httpUrl}/sessions`, json, this.httpOptions); + } + + openWorkflow(workflowId: string, version: number) { + return this._http.post(`${this.httpUrl}/workflows/${workflowId}/${version}`, {}, this.httpOptions); + } + + saveSession(sessionId: string, saveMessage: string) { + const json = { + message: saveMessage + }; + return this._http.post(`${this.httpUrl}/sessions/${sessionId}`, json, this.httpOptions); + } + + terminateSession(sessionId: string) { + return this._http.delete(`${this.httpUrl}/sessions/${sessionId}`, this.httpOptions); + } +} diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts new file mode 100644 index 00000000..afd0e23e --- /dev/null +++ b/src/app/plugins/workflows/workflows.module.ts @@ -0,0 +1,34 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {WorkflowViewerComponent} from './components/workflow-viewer/workflow-viewer.component'; +import {ReteModule} from 'rete-angular-plugin/17'; +import {WorkflowsDashboardComponent} from './components/workflows-dashboard/workflows-dashboard.component'; +import {WorkflowSessionComponent} from './components/workflow-session/workflow-session.component'; +import {AccordionButtonDirective, AccordionComponent, AccordionItemComponent, ListGroupDirective, ListGroupItemDirective, TemplateIdDirective} from '@coreui/angular'; +import {FormsModule} from '@angular/forms'; + + +@NgModule({ + imports: [ + CommonModule, + ReteModule, + AccordionComponent, + AccordionItemComponent, + AccordionButtonDirective, + TemplateIdDirective, + FormsModule, + ListGroupDirective, + ListGroupItemDirective, + ], + declarations: [ + WorkflowViewerComponent, + WorkflowsDashboardComponent, + WorkflowSessionComponent + ], + exports: [ + WorkflowViewerComponent, + WorkflowsDashboardComponent + ] +}) +export class WorkflowsModule { +} diff --git a/src/app/services/webui-settings.service.ts b/src/app/services/webui-settings.service.ts index 561f9fd5..1421d62a 100644 --- a/src/app/services/webui-settings.service.ts +++ b/src/app/services/webui-settings.service.ts @@ -42,6 +42,10 @@ export class WebuiSettingsService { 'ws://' + this.host + ':' + localStorage.getItem('webUI.port') + '/notebooks/webSocket'); this.connections.set('notebooks.file', 'http://' + this.host + ':' + localStorage.getItem('webUI.port') + '/notebooks/file'); + this.connections.set('workflows.rest', + 'http://' + this.host + ':' + localStorage.getItem('webUI.port') + '/workflows'); + this.connections.set('workflows.socket', + 'ws://' + this.host + ':' + localStorage.getItem('webUI.port') + '/workflows/webSocket'); } diff --git a/src/app/views/views-routing.module.ts b/src/app/views/views-routing.module.ts index e40afa30..0ea88751 100644 --- a/src/app/views/views-routing.module.ts +++ b/src/app/views/views-routing.module.ts @@ -13,6 +13,8 @@ import {QueryInterfacesComponent} from './query-interfaces/query-interfaces.comp import {NotebooksComponent} from '../plugins/notebooks/components/notebooks.component'; import {UnsavedChangesGuard} from '../plugins/notebooks/services/unsaved-changes.guard'; import {DockerconfigComponent} from './dockerconfig/dockerconfig.component'; +import {WorkflowsDashboardComponent} from '../plugins/workflows/components/workflows-dashboard/workflows-dashboard.component'; +import {WorkflowSessionComponent} from '../plugins/workflows/components/workflow-session/workflow-session.component'; const routes: Routes = [ { @@ -181,6 +183,14 @@ const routes: Routes = [ } ] }, + { + path: 'workflows', + component: WorkflowsDashboardComponent, + }, + { + path: 'workflows/:sessionId', + component: WorkflowSessionComponent + } ]; @NgModule({ From bba7b88ca85ebce9bce62426c05d70c47668e899 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Mon, 23 Dec 2024 12:56:00 +0100 Subject: [PATCH 02/68] Add workflow editor components --- .../polyalg-viewer/panning-boundary/index.ts | 5 +- .../workflow-session.component.html | 5 +- .../activity-port.component.scss | 18 +++ .../activity-port/activity-port.component.ts | 39 +++++++ .../editor/activity/activity.component.html | 53 +++++++++ .../editor/activity/activity.component.scss | 73 ++++++++++++ .../editor/activity/activity.component.ts | 49 ++++++++ .../editor/edge/edge.component.html | 3 + .../editor/edge/edge.component.scss | 12 ++ .../editor/edge/edge.component.ts | 23 ++++ .../workflow-viewer/editor/vars.scss | 3 + .../editor/workflow-editor-utils.ts | 54 +++++++++ .../workflow-viewer/editor/workflow-editor.ts | 110 ++++++++++++++++++ .../workflow-viewer.component.html | 6 + .../workflow-viewer.component.scss | 4 + .../workflow-viewer.component.ts | 39 ++++++- .../workflows-dashboard.component.html | 9 +- .../workflows-dashboard.component.ts | 23 ++-- .../workflows/models/workflows.model.ts | 2 +- src/app/plugins/workflows/workflows.module.ts | 11 +- 20 files changed, 523 insertions(+), 18 deletions(-) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/vars.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts diff --git a/src/app/components/polyalg/polyalg-viewer/panning-boundary/index.ts b/src/app/components/polyalg/polyalg-viewer/panning-boundary/index.ts index d60638a5..85cd9318 100644 --- a/src/app/components/polyalg/polyalg-viewer/panning-boundary/index.ts +++ b/src/app/components/polyalg/polyalg-viewer/panning-boundary/index.ts @@ -1,11 +1,10 @@ -import {NodeEditor} from 'rete'; +import {GetSchemes, NodeEditor} from 'rete'; import {AreaExtensions, AreaPlugin} from 'rete-area-plugin'; import {getFrameWeight} from './frame'; import {animate, watchPointerMove} from './utils'; -import {Schemes} from '../alg-editor'; interface Props { - area: AreaPlugin; + area: AreaPlugin, any>; selector: AreaExtensions.Selector; intensity?: number; padding?: number; diff --git a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html index 9b2766fd..d6a4546c 100644 --- a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html +++ b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html @@ -1,2 +1,5 @@

Session ID: {{sessionId}}

-

{{session | json}}

\ No newline at end of file + + + + \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss new file mode 100644 index 00000000..e527fd90 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss @@ -0,0 +1,18 @@ +@use "sass:math"; +@import "../vars"; + +:host { + display: inline-block; + cursor: pointer; + border: 1px solid grey; + width: $socket-size; + height: $socket-size * 2; + vertical-align: middle; + background: #fff; + z-index: 2; + box-sizing: border-box; + + &:hover { + background: #ddd; + } +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts new file mode 100644 index 00000000..b24ccc8b --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts @@ -0,0 +1,39 @@ +import {ChangeDetectorRef, Component, HostBinding, Input, OnChanges} from '@angular/core'; +import {ClassicPreset} from 'rete'; + +@Component({ + selector: 'app-activity-port', + standalone: true, + imports: [], + template: ``, + styleUrl: './activity-port.component.scss' +}) +export class ActivityPortComponent implements OnChanges { + @Input() data!: ActivityPort; + @Input() rendered!: any; + + @HostBinding('title') get title() { + return this.data.name; + } + + constructor(private cdr: ChangeDetectorRef) { + this.cdr.detach(); + } + + ngOnChanges(): void { + this.cdr.detectChanges(); + requestAnimationFrame(() => this.rendered()); + } + +} + +export class ActivityPort extends ClassicPreset.Socket { + + constructor() { + super(''); + } + + isCompatibleWith(socket: ActivityPort) { + return true; // TODO: change to computation based on porttype + } +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html new file mode 100644 index 00000000..a3573b12 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html @@ -0,0 +1,53 @@ +
{{data.label}}
+
+
+ {{output.value?.label}} +
+
+
+
+
+
+
+ {{input.value?.label}} +
+
+
diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss new file mode 100644 index 00000000..f6ba4aa5 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss @@ -0,0 +1,73 @@ +@use "sass:math"; +@import "../vars"; + +:host { + display: block; + background: black; + border: 2px solid grey; + border-radius: 10px; + cursor: pointer; + box-sizing: border-box; + width: $node-width; + height: auto; + padding-bottom: 6px; + position: relative; + user-select: none; + + &:hover { + background: #333; + } + + &.selected { + border-color: red; + } + + .title { + color: white; + font-family: sans-serif; + font-size: 18px; + padding: 8px; + } + + .output { + text-align: right; + } + + .input { + text-align: left; + } + + .output-socket { + text-align: right; + margin-right: -1px; + display: inline-block; + } + + .input-socket { + text-align: left; + margin-left: -1px; + display: inline-block; + } + + .input-title, + .output-title { + vertical-align: middle; + color: white; + display: inline-block; + font-family: sans-serif; + font-size: 14px; + margin: $socket-margin; + line-height: $socket-size; + } + + .input-control { + z-index: 1; + width: calc(100% - #{$socket-size + 2*$socket-margin}); + vertical-align: middle; + display: inline-block; + } + + .control { + padding: $socket-margin math.div($socket-size, 2) + $socket-margin; + } +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts new file mode 100644 index 00000000..b12648aa --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts @@ -0,0 +1,49 @@ +import {ChangeDetectorRef, Component, HostBinding, Input, OnChanges} from '@angular/core'; +import {ClassicPreset} from 'rete'; +import {KeyValue} from '@angular/common'; + +@Component({ + selector: 'app-activity', + templateUrl: './activity.component.html', + styleUrl: './activity.component.scss' +}) +export class ActivityComponent implements OnChanges { + @Input() data!: ActivityNode; + @Input() emit!: (data: any) => void; + @Input() rendered!: () => void; + seed = 0; + + @HostBinding('class.selected') get selected() { + return this.data.selected; + } + + constructor(private cdr: ChangeDetectorRef) { + this.cdr.detach(); + } + + ngOnChanges(): void { + this.cdr.detectChanges(); + requestAnimationFrame(() => this.rendered()); + this.seed++; // force render sockets + } + + sortByIndex< + N extends object, + T extends KeyValue + >(a: T, b: T) { + const ai = a.value.index || 0; + const bi = b.value.index || 0; + + return ai - bi; + } + +} + +export class ActivityNode extends ClassicPreset.Node { + width = 100; + height = 100; // TODO: change dimensions + + constructor() { + super('ActivityNode Sample Label'); + } +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html new file mode 100644 index 00000000..e53abb7f --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss new file mode 100644 index 00000000..a4c39158 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss @@ -0,0 +1,12 @@ +svg { + overflow: visible; + position: absolute; + pointer-events: none; + + path { + fill: none; + stroke-width: 5px; + stroke: green; + pointer-events: auto; + } +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts new file mode 100644 index 00000000..d87ec723 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts @@ -0,0 +1,23 @@ +import {Component, Input} from '@angular/core'; +import {ClassicPreset} from 'rete'; +import {ActivityNode} from '../activity/activity.component'; + +@Component({ + selector: 'app-edge', + templateUrl: './edge.component.html', + styleUrl: './edge.component.scss' +}) +export class EdgeComponent { + @Input() data!: Edge; + @Input() start: any; + @Input() end: any; + @Input() path: string; +} + +export class Edge extends ClassicPreset.Connection { + isMagnetic = false; // TODO: why is this required? + + constructor(source: N, sourceOutput: keyof N['outputs'], target: N, targetInput: keyof N['inputs']) { + super(source, sourceOutput, target, targetInput); + } +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/vars.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/vars.scss new file mode 100644 index 00000000..475c764c --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/vars.scss @@ -0,0 +1,3 @@ +$node-width: 200px; +$socket-margin: 6px; +$socket-size: 16px; \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts new file mode 100644 index 00000000..4561e8cf --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts @@ -0,0 +1,54 @@ +import {NodeEditor} from 'rete'; +import {SocketData} from 'rete-connection-plugin'; +import {Position} from 'rete-angular-plugin/17/types'; +import {Schemes} from './workflow-editor'; +import {Edge} from './edge/edge.component'; + + +// TODO: implement workflow-editor specific changes +export function getMagneticConnectionProps(editor: NodeEditor) { + return { + async createConnection(from: SocketData, to: SocketData) { + if (from.side === to.side) { + return; + } + const [source, target] = from.side === 'output' ? [from, to] : [to, from]; + const sourceNode = editor.getNode(source.nodeId); + const targetNode = editor.getNode(target.nodeId); + + const connection = new Edge( + sourceNode, + source.key as never, + targetNode, + target.key as never + ); + + /*if (!canCreateConnection(editor, connection)) { + return; + } + + const connectionsToRemove = editor.getConnections().filter(c => { + return (c.target === targetNode.id && c.targetInput === target.key && !targetNode.hasVariableInputs) || (c.source === sourceNode.id); + }); + + for (const c of connectionsToRemove) { + await editor.removeConnection(c.id); + }*/ + + await editor.addConnection( + connection + ); + }, + display(from: SocketData, to: SocketData) { + return from.side !== to.side; //&& areSocketsCompatible(editor, from, to); + }, + offset(socket: SocketData, position: Position) { + + return { + x: position.x + (socket.side === 'input' ? 3 : -3), + y: position.y + (socket.side === 'input' ? 12 : -12) + }; + }, + distance: 75 + }; +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts new file mode 100644 index 00000000..079bb8dd --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts @@ -0,0 +1,110 @@ +import {Injector} from '@angular/core'; +import {ClassicPreset, GetSchemes, NodeEditor} from 'rete'; +import {AreaExtensions, AreaPlugin} from 'rete-area-plugin'; +import {ConnectionPlugin, Presets as ConnectionPresets} from 'rete-connection-plugin'; +import {AngularArea2D, AngularPlugin, Presets} from 'rete-angular-plugin/15'; +import {WorkflowModel} from '../../../models/workflows.model'; +import {ActivityComponent, ActivityNode} from './activity/activity.component'; +import {Edge, EdgeComponent} from './edge/edge.component'; +import {ActivityPort, ActivityPortComponent} from './activity-port/activity-port.component'; +import {addCustomBackground} from '../../../../../components/polyalg/polyalg-viewer/background'; +import {ReadonlyPlugin} from 'rete-readonly-plugin'; +import {useMagneticConnection} from '../../../../../components/polyalg/polyalg-viewer/magnetic-connection'; +import {setupPanningBoundary} from '../../../../../components/polyalg/polyalg-viewer/panning-boundary'; +import {MagneticConnectionComponent} from '../../../../../components/polyalg/polyalg-viewer/magnetic-connection/magnetic-connection.component'; +import {getMagneticConnectionProps} from './workflow-editor-utils'; + +export type Schemes = GetSchemes>; +type AreaExtra = AngularArea2D; + +export class WorkflowEditor { + private readonly editor: NodeEditor = new NodeEditor(); + private readonly connection: ConnectionPlugin = new ConnectionPlugin(); + private readonly readonlyPlugin = new ReadonlyPlugin(); + private readonly area: AreaPlugin; + private readonly render: AngularPlugin; + + private readonly socket = new ActivityPort(); + + constructor(private injector: Injector, container: HTMLElement, isReadOnly: boolean) { + this.area = new AreaPlugin(container); + this.render = new AngularPlugin({injector}); + + const selector = AreaExtensions.selector(); + AreaExtensions.selectableNodes(this.area, selector, { + accumulating: AreaExtensions.accumulateOnCtrl(), + }); + + this.render.addPreset( + Presets.classic.setup({ + customize: { + node() { + return ActivityComponent; + }, + connection(data) { + if (data.payload.isMagnetic) { + return MagneticConnectionComponent; + } + return EdgeComponent; + }, + socket() { + return ActivityPortComponent; + }, + }, + }) + ); + + this.connection.addPreset(ConnectionPresets.classic.setup()); + + + // Attach plugins + this.editor.use(this.readonlyPlugin.root); + this.editor.use(this.area); + this.area.use(this.connection); + this.area.use(this.render); + this.area.use(this.readonlyPlugin.area); + + + let panningBoundary = null; + if (!isReadOnly) { + this.area.use(this.connection); // make connections editable + //this.area.use(this.contextMenu); // add context menu + useMagneticConnection(this.connection, getMagneticConnectionProps(this.editor)); + panningBoundary = setupPanningBoundary({area: this.area, selector, padding: 40, intensity: 2}); + } + + AreaExtensions.restrictor(this.area, {scaling: {min: 0.03, max: 5}}); // Restrict Zoom + + this.area.addPipe((c) => { + if (c.type === 'render') { + console.log(c.data); + } + return c; + }); + AreaExtensions.simpleNodesOrder(this.area); + addCustomBackground(this.area); + } + + async initialize(workflow: WorkflowModel): Promise { + + // Create nodes and connections + const a = new ActivityNode(); + a.addControl('a', new ClassicPreset.InputControl('text', {initial: 'hello'})); + a.addOutput('a', new ClassicPreset.Output(this.socket)); + await this.editor.addNode(a); + + const b = new ActivityNode(); + b.addControl('b', new ClassicPreset.InputControl('text', {initial: 'hello'})); + b.addInput('b', new ClassicPreset.Input(this.socket)); + await this.editor.addNode(b); + + await this.area.translate(b.id, {x: 320, y: 0}); + await this.editor.addConnection(new Edge(a, 'a', b, 'b')); + + AreaExtensions.zoomAt(this.area, this.editor.getNodes()); + } + + destroy(): void { + this.area.destroy(); + } +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html index f3a83729..bf134e83 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -1 +1,7 @@

workflow-viewer works!

+Session id: {{sessionId}} + +{{workflow | json}} +
+
+
\ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss index e69de29b..748da1b3 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss @@ -0,0 +1,4 @@ +.rete { + min-height: 800px; + border: 2px solid; +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index 053245ef..29b29073 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -1,12 +1,47 @@ -import {Component, inject} from '@angular/core'; +import {Component, ElementRef, inject, Injector, Input, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {WorkflowsService} from '../../services/workflows.service'; +import {ToasterService} from '../../../../components/toast-exposer/toaster.service'; +import {WorkflowModel} from '../../models/workflows.model'; +import {WorkflowEditor} from './editor/workflow-editor'; @Component({ selector: 'app-workflow-viewer', templateUrl: './workflow-viewer.component.html', styleUrl: './workflow-viewer.component.scss' }) -export class WorkflowViewerComponent { +export class WorkflowViewerComponent implements OnInit, OnDestroy { + @Input() sessionId: string; + @Input() isEditable: boolean; + + @ViewChild('rete') container!: ElementRef; + private readonly _workflows = inject(WorkflowsService); + private readonly _toast = inject(ToasterService); + private editor: WorkflowEditor; + workflow: WorkflowModel; + + constructor(private injector: Injector) { + } + + ngOnInit(): void { + } + + ngAfterViewInit(): void { + const el = this.container.nativeElement; + + if (el) { + this.editor = new WorkflowEditor(this.injector, el, false); + } + this._workflows.getActiveWorkflow(this.sessionId).subscribe({ + next: res => { + this.workflow = res; + this.editor.initialize(res); + } + }); + } + + ngOnDestroy(): void { + this.editor?.destroy(); + } } diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html index 4def5cbf..f75bfff7 100644 --- a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html @@ -1,5 +1,12 @@

Workflow Dashboard

+ + + + +

Stored Workflows

@@ -39,7 +46,7 @@

{{ workflowDef.value.name }}

Active Sessions

- @@ -55,13 +57,6 @@

{{ activity().displayName() }}

@switch (activeTab()) { @case ("settings") { - - } @case ("variables") { diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html index c79299e7..eb81e6c6 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -44,12 +44,13 @@ - + {{ workflow.state() }} - + diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index 7950b230..6941b34c 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -1,4 +1,4 @@ -import {Component, computed, effect, ElementRef, EventEmitter, Injector, Input, OnDestroy, OnInit, Output, signal, Signal, ViewChild} from '@angular/core'; +import {Component, computed, ElementRef, EventEmitter, Injector, Input, OnDestroy, OnInit, Output, signal, Signal, ViewChild} from '@angular/core'; import {WorkflowsService} from '../../services/workflows.service'; import {ToasterService} from '../../../../components/toast-exposer/toaster.service'; import {WorkflowEditor} from './editor/workflow-editor'; @@ -52,9 +52,6 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { private readonly _toast: ToasterService, private readonly _websocket: WorkflowsWebSocketService, private injector: Injector) { - effect(() => { - console.log('edited changed', this.editedVariables()); - }); } ngOnInit(): void { diff --git a/src/app/plugins/workflows/models/activity-registry.model.ts b/src/app/plugins/workflows/models/activity-registry.model.ts index 34aecde3..001632be 100644 --- a/src/app/plugins/workflows/models/activity-registry.model.ts +++ b/src/app/plugins/workflows/models/activity-registry.model.ts @@ -9,11 +9,18 @@ export const DEFAULT_SUBGROUP = ''; export class ActivityRegistry { private readonly registry: Map; + public readonly categories: string[] = []; constructor(data: Record) { this.registry = new Map(Object.entries(data).map( ([key, model]) => [key, new ActivityDef(model)] )); + const categories = new Set(); + this.registry.forEach((def, type) => { + def.categories.forEach(c => categories.add(c)); + }); + this.categories.push(...categories); + this.categories.sort((a, b) => a.localeCompare(b)); } public getDef(activityType: string) { diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index 52df5f1f..9a7a2238 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -72,6 +72,7 @@ import {ActivitySettingsComponent} from './components/workflow-viewer/right-menu import {IntSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component'; import {StringSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component'; import {CdkDrag, CdkDragPreview, CdkDropList} from '@angular/cdk/drag-drop'; +import {AngularMultiSelectModule} from 'angular2-multiselect-dropdown'; @NgModule({ imports: [ @@ -135,7 +136,8 @@ import {CdkDrag, CdkDragPreview, CdkDropList} from '@angular/cdk/drag-drop'; CollapseDirective, CdkDrag, CdkDropList, - CdkDragPreview + CdkDragPreview, + AngularMultiSelectModule, ], declarations: [ WorkflowViewerComponent, diff --git a/src/scss/angular2-multiselect-dropdown.scss b/src/scss/angular2-multiselect-dropdown.scss new file mode 100644 index 00000000..e935208d --- /dev/null +++ b/src/scss/angular2-multiselect-dropdown.scss @@ -0,0 +1,188 @@ +// An edited copy of node_modules/angular2-multiselect-dropdown to match the CoreUI theme +$default-color: #ffffff; +$base-color: var(--cui-primary); +$btn-background: #fff; +$btn-border: var(--cui-border-color); +$btn-text-color: #333; +$btn-arrow: #333; +$border-radius: var(--cui-border-radius-sm); + + +$token-background: $base-color; +$token-text-color: #fff; +$token-remove-color: #fff; + +$box-shadow-color: #959595; +$list-hover-background: #f5f5f5; +$label-color: #000; +$selected-background: #e9f4ff; + + +.mat-toolbar { + background: $default-color; +} + +.c-btn { + background: $btn-background; + border: 1px solid $btn-border; + border-radius: $border-radius; + color: $btn-text-color; +} + +.selected-list { + .c-list { + .c-token { + background: $token-background; + + .c-label { + color: $token-text-color; + } + + .c-remove { + svg { + fill: $token-remove-color; + } + } + + } + } + + .c-angle-down, .c-angle-up { + svg { + fill: $btn-arrow; + } + } +} + +.dropdown-list { + ul { + li:hover { + background: $list-hover-background; + } + } +} + +.arrow-up, .arrow-down { + border-bottom: 15px solid #fff; +} + +.arrow-2 { + border-bottom: 15px solid #ccc; +} + +.list-area { + border: 1px solid #ccc; + border-radius: $border-radius; + background: #fff; + box-shadow: 0px 1px 5px $box-shadow-color; +} + +.select-all { + border-bottom: 1px solid #ccc; +} + +.list-filter { + border-bottom: 1px solid #ccc; + + .c-search { + svg { + fill: #888; + } + } + + .c-clear { + svg { + fill: #888; + } + } +} + +.pure-checkbox { + input[type="checkbox"]:focus + label:before, input[type="checkbox"]:hover + label:before { + border-color: $base-color; + background-color: #f2f2f2; + } + + input[type="checkbox"] + label { + color: $label-color; + } + + input[type="checkbox"] + label:before { + color: $base-color; + border: 1px solid $base-color; + } + + input[type="checkbox"] + label:after { + background-color: $base-color; + } + + input[type="checkbox"]:disabled + label:before { + border-color: #cccccc; + } + + input[type="checkbox"]:disabled:checked + label:before { + background-color: #cccccc; + } + + input[type="checkbox"] + label:after { + border-color: #ffffff; + } + + input[type="radio"]:checked + label:before { + background-color: white; + } + + input[type="checkbox"]:checked + label:before { + background: $base-color; + } +} + +.single-select-mode .pure-checkbox { + input[type="checkbox"]:focus + label:before, input[type="checkbox"]:hover + label:before { + border-color: $base-color; + background-color: #f2f2f2; + } + + input[type="checkbox"] + label { + color: $label-color; + } + + input[type="checkbox"] + label:before { + color: transparent !important; + border: 0px solid $base-color; + } + + input[type="checkbox"] + label:after { + background-color: transparent !important; + } + + input[type="checkbox"]:disabled + label:before { + border-color: #cccccc; + } + + input[type="checkbox"]:disabled:checked + label:before { + background-color: #cccccc; + } + + input[type="checkbox"] + label:after { + border-color: $base-color; + } + + input[type="radio"]:checked + label:before { + background-color: white; + } + + input[type="checkbox"]:checked + label:before { + background: none !important; + } +} + +.selected-item { + background: $selected-background; +} + +.btn-iceblue { + background: $base-color; + border: 1px solid $btn-border; + color: #fff; +} \ No newline at end of file From 884f8d487070a2579efb99e714d5b22995db3b5a Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Mon, 13 Jan 2025 19:05:45 +0100 Subject: [PATCH 17/68] Add component for showing checkpoints --- .../data-template/data-template.component.ts | 17 +----- .../left-menu/left-menu.component.html | 2 +- .../checkpoint-viewer.component.html | 27 +++++++++ .../checkpoint-viewer.component.scss | 0 .../checkpoint-viewer.component.ts | 37 ++++++++++++ .../right-menu/right-menu.component.html | 2 +- .../workflow-viewer.component.html | 22 +++++++ .../workflow-viewer.component.scss | 2 +- .../workflow-viewer.component.ts | 6 +- .../workflows/models/ws-response.model.ts | 18 +++--- .../services/checkpoint-viewer.service.ts | 59 +++++++++++++++++++ .../services/workflows-websocket.service.ts | 12 ++++ src/app/plugins/workflows/workflows.module.ts | 4 +- 13 files changed, 181 insertions(+), 27 deletions(-) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts create mode 100644 src/app/plugins/workflows/services/checkpoint-viewer.service.ts diff --git a/src/app/components/data-view/data-template/data-template.component.ts b/src/app/components/data-view/data-template/data-template.component.ts index c522fe49..f83ae226 100644 --- a/src/app/components/data-view/data-template/data-template.component.ts +++ b/src/app/components/data-view/data-template/data-template.component.ts @@ -1,17 +1,4 @@ -import { - Component, - computed, - effect, - EventEmitter, - inject, - Input, - OnDestroy, - OnInit, - Signal, - signal, - untracked, - WritableSignal -} from '@angular/core'; +import {Component, computed, effect, EventEmitter, inject, Input, OnDestroy, OnInit, Signal, signal, untracked, WritableSignal} from '@angular/core'; import {RelationalResult, Result, UiColumnDefinition} from '../models/result-set.model'; import {WebuiSettingsService} from '../../../services/webui-settings.service'; import {CatalogService} from '../../../services/catalog.service'; @@ -132,7 +119,7 @@ export abstract class DataTemplateComponent implements OnInit, OnDestroy { } ngOnInit() { - this._sidebar.open(); + //this._sidebar.open(); //listen to results this.initWebsocket(); diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html index b30c8486..701ed3cc 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html @@ -4,7 +4,7 @@ [scroll]="true" placement="start" #offcanvas - [visible]="true" + [visible]="false" class="no-select" [ngClass]="openedActivityDef ? 'info-visible' : 'info-hidden'" > diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.html new file mode 100644 index 00000000..78f44cf8 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.html @@ -0,0 +1,27 @@ +@if (activity() && isExecuted()) { + + @if (activity().def.outPorts.length > 0) { + + @if (isFinished()) { +

The outputs of this activity are currently not materialized

+ + } @else { +
Outputs
+
    + @for (output of activity().def.outPorts; track $index) { +
  • + +
    • + } +
+ } + } @else { +

This activity has no outputs.

+ } + + +} @else { +

Execute the activity to see its outputs.

+} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts new file mode 100644 index 00000000..5284970a --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts @@ -0,0 +1,37 @@ +import {Component, computed, input, OnInit, Signal} from '@angular/core'; +import {Activity} from '../../workflow'; +import {CheckpointViewerService} from '../../../../services/checkpoint-viewer.service'; + +@Component({ + selector: 'app-checkpoint-viewer', + templateUrl: './checkpoint-viewer.component.html', + styleUrl: './checkpoint-viewer.component.scss' +}) +export class CheckpointViewerComponent implements OnInit { + + activity = input.required(); + isQueryable = input.required(); + + isExecuted: Signal; + isFinished: Signal; + selectedOutput = 0; + + constructor(readonly _checkpoint: CheckpointViewerService) { + } + + ngOnInit(): void { + this.isExecuted = computed(() => this.activity().state() === 'FINISHED' || this.activity().state() === 'SAVED'); + this.isFinished = computed(() => this.activity().state() === 'FINISHED'); + } + + + showOutput(i: number) { + this.selectedOutput = i; + this._checkpoint.setModal(true); + this._checkpoint.getCheckpoint(this.activity(), this.selectedOutput); + } + + materializeCheckpoints() { + this._checkpoint.materializeCheckpoints(this.activity().id); + } +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html index cebc1500..1d9cfaa2 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html @@ -68,7 +68,7 @@
{{ entry.key }}
} } @case ("outputs") { -
outputs
+ } @case ("execution") {
Config
diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html index eb81e6c6..bf82d9d7 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -114,3 +114,25 @@
Workflow Variables
+ + + +
{{ _checkpoint.selectedActivity().displayName() }}: {{ _checkpoint.selectedOutput() }}
+ + + +
+ + +

Only the first {{ _checkpoint.limit() }} of {{ _checkpoint.totalCount() }} elements are shown.

+ + + +
+ + + + + diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss index 72109bdc..626af882 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss @@ -4,4 +4,4 @@ .editor-container { border-top: 1px lightgray solid; -} +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index 6941b34c..12ac23e1 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -12,12 +12,13 @@ import {switchMap, tap} from 'rxjs/operators'; import {WorkflowConfigEditorComponent} from './workflow-config-editor/workflow-config-editor.component'; import {WorkflowsWebSocketService} from '../../services/workflows-websocket.service'; import {JsonEditorComponent} from '../../../../components/json/json-editor.component'; +import {CheckpointViewerService} from '../../services/checkpoint-viewer.service'; @Component({ selector: 'app-workflow-viewer', templateUrl: './workflow-viewer.component.html', styleUrl: './workflow-viewer.component.scss', - providers: [WorkflowsWebSocketService] + providers: [WorkflowsWebSocketService, CheckpointViewerService] }) export class WorkflowViewerComponent implements OnInit, OnDestroy { @Input() sessionId: string; @@ -51,6 +52,7 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { private readonly _workflows: WorkflowsService, private readonly _toast: ToasterService, private readonly _websocket: WorkflowsWebSocketService, + readonly _checkpoint: CheckpointViewerService, private injector: Injector) { } @@ -177,6 +179,8 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { this._toast.error(errorResponse.reason + cause, errorResponse.parentType + ' was unsuccessful'); } break; + case ResponseType.CHECKPOINT_DATA: + break; // handled by checkpoint service default: console.warn('unhandled websocket response', response); } diff --git a/src/app/plugins/workflows/models/ws-response.model.ts b/src/app/plugins/workflows/models/ws-response.model.ts index 8aa852c2..2bcaa257 100644 --- a/src/app/plugins/workflows/models/ws-response.model.ts +++ b/src/app/plugins/workflows/models/ws-response.model.ts @@ -1,11 +1,12 @@ -import {ActivityModel, ActivityState, EdgeModel, RenderModel, WorkflowModel, WorkflowState} from './workflows.model'; +import {ActivityModel, ActivityState, EdgeModel, RenderModel, WorkflowState} from './workflows.model'; +import {Result} from '../../../components/data-view/models/result-set.model'; export enum ResponseType { - WORKFLOW_UPDATE = 'WORKFLOW_UPDATE', ACTIVITY_UPDATE = 'ACTIVITY_UPDATE', RENDERING_UPDATE = 'RENDERING_UPDATE', STATE_UPDATE = 'STATE_UPDATE', PROGRESS_UPDATE = 'PROGRESS_UPDATE', + CHECKPOINT_DATA = 'CHECKPOINT_DATA', ERROR = 'ERROR' } @@ -21,6 +22,7 @@ export enum RequestType { // no specific interfaces for requests are required, s RESET = 'RESET', UPDATE_CONFIG = 'UPDATE_CONFIG', UPDATE_VARIABLES = 'UPDATE_VARIABLES', + GET_CHECKPOINT = 'GET_CHECKPOINT' } export interface WsResponse { @@ -29,11 +31,6 @@ export interface WsResponse { parentId?: string; } -export interface WorkflowUpdateResponse extends WsResponse { - type: ResponseType.WORKFLOW_UPDATE; - workflow: WorkflowModel; -} - export interface ActivityUpdateResponse extends WsResponse { type: ResponseType.ACTIVITY_UPDATE; activity: ActivityModel; @@ -63,3 +60,10 @@ export interface ErrorResponse extends WsResponse { cause?: string; parentType: RequestType; } + +export interface CheckpointDataResponse extends WsResponse { + type: ResponseType.CHECKPOINT_DATA; + result: Result; + limit: number; + totalCount: number; +} diff --git a/src/app/plugins/workflows/services/checkpoint-viewer.service.ts b/src/app/plugins/workflows/services/checkpoint-viewer.service.ts new file mode 100644 index 00000000..9dbb4c4d --- /dev/null +++ b/src/app/plugins/workflows/services/checkpoint-viewer.service.ts @@ -0,0 +1,59 @@ +import {computed, Injectable, signal, WritableSignal} from '@angular/core'; +import {WorkflowsWebSocketService} from './workflows-websocket.service'; +import {CheckpointDataResponse, ResponseType, WsResponse} from '../models/ws-response.model'; +import {Result} from '../../../components/data-view/models/result-set.model'; +import {Activity} from '../components/workflow-viewer/workflow'; + +@Injectable() +export class CheckpointViewerService { + readonly showModal = signal(false); + + readonly selectedActivity = signal(undefined); + readonly selectedOutput = signal(0); + readonly isLoading = signal(false); + result: WritableSignal> = signal(null); + readonly limit = signal(0); + readonly totalCount = signal(0); + readonly isLimited = computed(() => this.totalCount() > this.limit()); + + constructor(private readonly _websocket: WorkflowsWebSocketService) { + this._websocket.onMessage().subscribe(msg => this.handleWsMsg(msg)); + + } + + toggleModal() { + this.setModal(!this.showModal()); + } + + setModal(visible: boolean) { + this.showModal.set(visible); + if (!visible) { + this.selectedActivity.set(null); + this.result.set(null); + } + } + + getCheckpoint(activity: Activity, outputIndex: number) { + this.selectedActivity.set(activity); + this.selectedOutput.set(outputIndex); + this.isLoading.set(true); + this._websocket.getCheckpoint(activity.id, outputIndex); + + } + + private handleWsMsg(msg: { response: WsResponse; isDirect: boolean }) { + const {response, isDirect} = msg; + if (response.type === ResponseType.CHECKPOINT_DATA) { + const r = (response as CheckpointDataResponse); + console.log(r); + this.result.set(r.result); + this.limit.set(r.limit); + this.totalCount.set(r.totalCount); + this.isLoading.set(false); + } + } + + materializeCheckpoints(activityId: string) { + this._websocket.execute(activityId); + } +} diff --git a/src/app/plugins/workflows/services/workflows-websocket.service.ts b/src/app/plugins/workflows/services/workflows-websocket.service.ts index 2b8a14b3..a612f822 100644 --- a/src/app/plugins/workflows/services/workflows-websocket.service.ts +++ b/src/app/plugins/workflows/services/workflows-websocket.service.ts @@ -203,6 +203,18 @@ export class WorkflowsWebSocketService { return id; } + getCheckpoint(activityId: string, outputIndex: number): string { + const id = uuid.v4(); + const msg = { + type: RequestType.GET_CHECKPOINT, + msgId: id, + activityId, + outputIndex + }; + this.sendMessage(msg); + return id; + } + onMessage(): Observable<{ response: WsResponse, isDirect: boolean }> { return this.msgSubject.asObservable(); } diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index 9a7a2238..b4f4be30 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -73,6 +73,7 @@ import {IntSettingComponent} from './components/workflow-viewer/right-menu/activ import {StringSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component'; import {CdkDrag, CdkDragPreview, CdkDropList} from '@angular/cdk/drag-drop'; import {AngularMultiSelectModule} from 'angular2-multiselect-dropdown'; +import {CheckpointViewerComponent} from './components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component'; @NgModule({ imports: [ @@ -151,7 +152,8 @@ import {AngularMultiSelectModule} from 'angular2-multiselect-dropdown'; ActivityHelpComponent, ActivitySettingsComponent, IntSettingComponent, - StringSettingComponent + StringSettingComponent, + CheckpointViewerComponent ], exports: [ WorkflowViewerComponent, From c5034346945c4cc412a75aa0e7dbd66301709f93 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Tue, 14 Jan 2025 16:33:57 +0100 Subject: [PATCH 18/68] Improve workflow management --- .../left-sidebar/left-sidebar.component.ts | 2 +- .../workflow-session.component.html | 15 +- .../workflow-session.component.ts | 9 +- .../left-menu/left-menu.component.ts | 2 +- .../workflows-dashboard.component.html | 256 ++++++++++++------ .../workflows-dashboard.component.scss | 3 + .../workflows-dashboard.component.ts | 147 +++++++++- .../workflows/models/workflows.model.ts | 2 + .../workflows/services/workflows.service.ts | 21 +- src/app/plugins/workflows/workflows.module.ts | 11 +- src/app/views/views-routing.module.ts | 15 +- 11 files changed, 381 insertions(+), 102 deletions(-) diff --git a/src/app/components/left-sidebar/left-sidebar.component.ts b/src/app/components/left-sidebar/left-sidebar.component.ts index adf41f47..69abefca 100644 --- a/src/app/components/left-sidebar/left-sidebar.component.ts +++ b/src/app/components/left-sidebar/left-sidebar.component.ts @@ -64,7 +64,7 @@ export class LeftSidebarComponent implements OnInit, AfterViewInit { } static readonly EXPAND_SHOWN_ROUTES: String[] = [ - '/views/monitoring', '/views/config', '/views/uml', '/views/querying/console', '/views/notebooks']; + '/views/monitoring', '/views/config', '/views/uml', '/views/querying/console', '/views/notebooks', '/views/workflows']; private readonly _router = inject(Router); public readonly _sidebar = inject(LeftSidebarService); diff --git a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html index 0addae13..cdf74fe7 100644 --- a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html +++ b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html @@ -1,9 +1,16 @@
- + + + + +

{{ session.workflowDef.name }} v{{ session.version }}

Session ID: {{ sessionId }}
diff --git a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts index 7ecb43cc..73c395e7 100644 --- a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts +++ b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts @@ -47,7 +47,7 @@ export class WorkflowSessionComponent implements OnInit, OnDestroy { } backToDashboard() { - this._router.navigate(['./../'], {relativeTo: this._route}); + this._router.navigate(['/views/workflows/dashboard']); } saveSession(message: string) { @@ -60,6 +60,13 @@ export class WorkflowSessionComponent implements OnInit, OnDestroy { }); } + terminateSession() { + this._workflows.terminateSession(this.sessionId).subscribe({ + next: () => this.backToDashboard(), + error: e => this._toast.error(e.error, 'Unable to terminate session'), + }); + } + private initMarkdown() { const renderer = new MarkedRenderer(); renderer.blockquote = (text: string) => { diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts index beff9e6d..395a8d0f 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts @@ -88,7 +88,7 @@ export class LeftMenuComponent { return false; } return this.selectedCategories.length === 0 || - this.selectedCategories.find(item => def.categories.includes(item.itemName)); + !this.selectedCategories.some(item => !def.categories.includes(item.itemName)); }).map(type => this.registry.getDef(type)); } diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html index 4321b572..aec9b148 100644 --- a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html @@ -1,87 +1,189 @@ -

Workflow Dashboard

+@switch (route()) { + @case ('dashboard') { +

Workflow Dashboard

- - - - + + + + + Create Workflow + {{ newWorkflowName }} + {{ newWorkflowGroup }} + + + + Name + + + + Folder + + + + + + + + + -

Stored Workflows

+

Stored Workflows ({{ workflowDefsCount }})

- - - - - - -
- - - -
- +
-
-
- Version Description: {{ entry.value.versions[selectedVersion[entry.key]].description }} -
-
- Creation Time: {{ entry.value.versions[selectedVersion[entry.key]].creationTime | date:'short' }} -
- +
+ + @for (def of group.defs; track def.id) { + + + + +
+
+ + + +
+ + + + + + -
- - - - + + + + + + + + + + -

Active Sessions

-
    - -
  • -
    -
    - - {{workflowDefs[session.value.workflowId].name}} - v{{session.value.version}} - - - {{session.value.type}} - + -
    - SessionId: {{ session.value.sessionId }}
    - Connected Users: {{ session.value.connectionCount }}
    -
    -
    - + + + + + + + + + + + @for (version of def.def.versions | keyvalue; track version.key) { + + + + + + + } + +
    VersionCreation TimeCommentDelete Version
    v{{ version.key }}{{ version.value.creationTime | date:'short' }}{{ version.value.description }} + +
    +
    + + + } + -
    • -     -
+ } + } + @case ('sessions') { + +

Active Sessions

+
    + +
  • +
    +
    + + {{ workflowDefs[session.value.workflowId].name }} + v{{ session.value.version }} + + + {{ session.value.type }} + + +
    + SessionId: {{ session.value.sessionId }}
    + State: {{ session.value.state }}
    + Connected Users: {{ session.value.connectionCount }}
    +
    + +
    + +
    +
    • +     +
+ } + @case ('jobs') { +

Jobs coming soon...

+ } + @case ('api') { +

API coming soon...

+ } +} + + + +
Delete Workflow
+ + + + Do you really want to delete all versions of workflow "{{ workflowToDelete.def.name }}"? + This operation cannot be undone. + + + +
+ +
+ + \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.scss b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.scss index e69de29b..3539a147 100644 --- a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.scss +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.scss @@ -0,0 +1,3 @@ +.col-md-6.fixed-width { + max-width: 400px; +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts index 8ff43723..25ace7a1 100644 --- a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts @@ -1,9 +1,10 @@ -import {Component, inject, OnDestroy, OnInit} from '@angular/core'; +import {Component, effect, inject, OnDestroy, OnInit, signal, WritableSignal} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {ToasterService} from '../../../../components/toast-exposer/toaster.service'; import {LeftSidebarService} from '../../../../components/left-sidebar/left-sidebar.service'; import {WorkflowsService} from '../../services/workflows.service'; import {SessionModel, WorkflowDefModel} from '../../models/workflows.model'; +import {SidebarNode} from '../../../../models/sidebar-node.model'; @Component({ selector: 'app-workflows-dashboard', @@ -17,35 +18,96 @@ export class WorkflowsDashboardComponent implements OnInit, OnDestroy { private readonly _sidebar = inject(LeftSidebarService); private readonly _workflows = inject(WorkflowsService); + public route = signal(null); + workflowDefs: Record; - sortedWorkflowDefs: { key: string; value: WorkflowDefModel }[]; + workflowDefsCount = 0; + sortedGroups: { groupName: string, defs: { id: string, def: WorkflowDefModel }[] }[]; + visibleGroups: Record> = {}; sessions: Record; selectedVersion: Record = {}; newWorkflowName = ''; + newWorkflowGroup = ''; + showDeleteModal = signal(false); + workflowToDelete: { id: string, def: WorkflowDefModel } = null; + + constructor() { + effect(() => { + if (this.route()) { + console.log('updating defs'); + this.getWorkflowDefs(); + this.getSessions(); + } + }); + } ngOnInit(): void { + this.getRoute(); + this.initSidebar(); + } + + ngOnDestroy(): void { this._sidebar.hide(); + } - // TODO: add ability to update sessions and workflowdefs + private getRoute() { + this.route.set(this._route.snapshot.paramMap.get('route')); + this._route.params.subscribe(params => { + this.route.set(params['route']); + }); + } + + private getWorkflowDefs() { this._workflows.getWorkflowDefs().subscribe({ next: res => { this.workflowDefs = res; + this.workflowDefsCount = Object.keys(res).length; + + const groups = new Map(); + //const groups: {group: string, defs: {id: string, def: WorkflowDefModel}[]}[] = []; - this.sortedWorkflowDefs = Object.entries(res) - .map(([key, value]) => ({key, value})) - .sort((a, b) => a.value.name.localeCompare(b.value.name)); + Object.entries(res).forEach(([id, def]) => { + const groupName = def.group || ''; + const group = groups.get(groupName) || []; + group.push({id, def}); + groups.set(groupName, group); + }); + + const groupsArray: { groupName: string, defs: { id: string, def: WorkflowDefModel }[] }[] = []; + const visibleGroups: Record> = {}; + groups.forEach((defs, groupName) => { + defs.sort((a, b) => a.def.name.localeCompare(b.def.name)); + groupsArray.push({groupName, defs}); + visibleGroups[groupName] = signal(this.visibleGroups[groupName] ? this.visibleGroups[groupName]() : true); + }); + this.sortedGroups = groupsArray.sort((a, b) => a.groupName.localeCompare(b.groupName)); + this.visibleGroups = visibleGroups; + const selectedVersion = {}; Object.entries(res).forEach(([key, value]) => { - this.selectedVersion[key] = Math.max(...Object.keys(value.versions).map(versionId => parseInt(versionId, 10))); // TODO: order by creation date + selectedVersion[key] = Math.max(...Object.keys(value.versions).map(versionId => parseInt(versionId, 10))); // TODO: order by creation date }); + console.log('selectedVersions', this.selectedVersion); + this.selectedVersion = selectedVersion; } }); + } + + private getSessions() { this._workflows.getSessions().subscribe({ next: res => this.sessions = res }); } - ngOnDestroy(): void { + private initSidebar() { + const sidebarNodes: SidebarNode[] = [ + new SidebarNode(0, 'Dashboard', null, '/views/workflows/dashboard'), + new SidebarNode(1, 'Sessions', null, '/views/workflows/sessions'), + //new SidebarNode(2, 'Jobs', null, '/views/workflows/jobs'), + //new SidebarNode(3, 'API', null, '/views/workflows/api') + ]; + this._sidebar.setNodes(sidebarNodes); + this._sidebar.open(); } openVersion(key: string) { @@ -56,13 +118,78 @@ export class WorkflowsDashboardComponent implements OnInit, OnDestroy { } createAndOpenWorkflow() { - this._workflows.createSession(this.newWorkflowName).subscribe({ + this._workflows.createSession(this.newWorkflowName, this.newWorkflowGroup).subscribe({ next: sessionId => this.openSession(sessionId), error: err => this._toast.error(err.error) }); } openSession(sessionId: string) { - this._router.navigate([`./${sessionId}`], {relativeTo: this._route}); + this._router.navigate([`/views/workflows/sessions/${sessionId}`]); + } + + terminateSession(sessionId: string) { + this._workflows.terminateSession(sessionId).subscribe({ + next: () => { + this._toast.success('Successfully terminated session', 'Terminate session'); + this.getSessions(); + }, + error: e => this._toast.error(e, 'Unable to terminate session'), + }); + + } + + toggleCollapse(groupName: string) { + this.visibleGroups[groupName].update(b => !b); + } + + confirmDelete(workflowId: string) { + this.workflowToDelete = {id: workflowId, def: this.workflowDefs[workflowId]}; + this.showDeleteModal.set(true); + } + + toggleDeleteModal() { + this.showDeleteModal.update(b => !b); + } + + deleteVersion(workflowId: string, version: string) { + this._workflows.deleteVersion(workflowId, parseInt(version, 10)).subscribe({ + next: () => { + this._toast.success('Successfully deleted workflow version ' + version, 'Delete Version'); + this.getWorkflowDefs(); + }, + error: e => this._toast.error(e.error, 'Unable to delete version') + }); + } + + deleteWorkflow(workflowId: string) { + this.showDeleteModal.set(false); + this._workflows.deleteWorkflow(workflowId).subscribe({ + next: () => { + this._toast.success('Successfully deleted workflow', 'Delete workflow'); + this.getWorkflowDefs(); + }, + error: e => this._toast.error(e.error, 'Unable to delete workflow') + }); + } + + changeName(workflowId: string, name: string) { + this._workflows.renameWorkflow(workflowId, name).subscribe({ + next: () => { + this._toast.success('Successfully renamed workflow ', 'Rename Workflow'); + this.getWorkflowDefs(); + }, + error: e => this._toast.error(e.error, 'Unable to rename workflow') + }); + } + + changeGroup(workflowId: string, groupName: string) { + this._workflows.renameWorkflow(workflowId, null, groupName).subscribe({ + next: () => { + this._toast.success('Successfully changed workflow group', 'Change Workflow Group'); + this.getWorkflowDefs(); + }, + error: e => this._toast.error(e.error, 'Unable to change workflow group') + }); } } diff --git a/src/app/plugins/workflows/models/workflows.model.ts b/src/app/plugins/workflows/models/workflows.model.ts index b711239c..af4066c4 100644 --- a/src/app/plugins/workflows/models/workflows.model.ts +++ b/src/app/plugins/workflows/models/workflows.model.ts @@ -93,11 +93,13 @@ export interface SessionModel { workflowId?: string; version?: number; workflowDef?: WorkflowDefModel; + state?: WorkflowState; } export interface WorkflowDefModel { name: string; versions: Record; + group: string; } export interface VersionInfo { diff --git a/src/app/plugins/workflows/services/workflows.service.ts b/src/app/plugins/workflows/services/workflows.service.ts index 47691b67..3afe002a 100644 --- a/src/app/plugins/workflows/services/workflows.service.ts +++ b/src/app/plugins/workflows/services/workflows.service.ts @@ -59,9 +59,10 @@ export class WorkflowsService { return this._http.get>(`${this.httpUrl}/workflows`, this.httpOptions); } - createSession(workflowName: string) { + createSession(workflowName: string, group: string) { const json = { - name: workflowName + name: workflowName, + group: group }; return this._http.post(`${this.httpUrl}/sessions`, json, this.httpOptions); } @@ -70,6 +71,22 @@ export class WorkflowsService { return this._http.post(`${this.httpUrl}/workflows/${workflowId}/${version}`, {}, this.httpOptions); } + renameWorkflow(workflowId: string, newName: string = null, newGroup: string = null) { + const json = { + name: newName, + group: newGroup + }; + return this._http.patch(`${this.httpUrl}/workflows/${workflowId}`, json, this.httpOptions); + } + + deleteWorkflow(workflowId: string) { + return this._http.delete(`${this.httpUrl}/workflows/${workflowId}`, this.httpOptions); + } + + deleteVersion(workflowId: string, version: number) { + return this._http.delete(`${this.httpUrl}/workflows/${workflowId}/${version}`, this.httpOptions); + } + saveSession(sessionId: string, saveMessage: string) { const json = { message: saveMessage diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index b4f4be30..ff8b098a 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -20,6 +20,7 @@ import { CardTextDirective, CardTitleDirective, ColComponent, + ColDirective, CollapseDirective, FormCheckComponent, FormCheckInputDirective, @@ -47,6 +48,7 @@ import { OffcanvasTitleDirective, OffcanvasToggleDirective, RowComponent, + RowDirective, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, @@ -55,10 +57,12 @@ import { SidebarToggleDirective, TabContentComponent, TabContentRefDirective, + TableColorDirective, + TableDirective, TabPaneComponent, TemplateIdDirective } from '@coreui/angular'; -import {FormsModule} from '@angular/forms'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {ActivityComponent} from './components/workflow-viewer/editor/activity/activity.component'; import {EdgeComponent} from './components/workflow-viewer/editor/edge/edge.component'; import {RightMenuComponent} from './components/workflow-viewer/right-menu/right-menu.component'; @@ -139,6 +143,11 @@ import {CheckpointViewerComponent} from './components/workflow-viewer/right-menu CdkDropList, CdkDragPreview, AngularMultiSelectModule, + ColDirective, + ReactiveFormsModule, + RowDirective, + TableDirective, + TableColorDirective, ], declarations: [ WorkflowViewerComponent, diff --git a/src/app/views/views-routing.module.ts b/src/app/views/views-routing.module.ts index 477fe360..32c960d5 100644 --- a/src/app/views/views-routing.module.ts +++ b/src/app/views/views-routing.module.ts @@ -185,18 +185,23 @@ const routes: Routes = [ }, { path: 'workflows', - component: WorkflowsDashboardComponent, - data: { - title: 'Workflows Dashboard' - } + redirectTo: 'workflows/dashboard', + pathMatch: 'full' }, { - path: 'workflows/:sessionId', + path: 'workflows/sessions/:sessionId', component: WorkflowSessionComponent, data: { title: 'Workflow Session', isFullWidth: true } + }, + { + path: 'workflows/:route', + component: WorkflowsDashboardComponent, + data: { + title: 'Workflows Dashboard' + } } ]; From 8e3321db45b64f330a9fe6c7927c698f1e5b677e Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Tue, 14 Jan 2025 17:59:00 +0100 Subject: [PATCH 19/68] Fix scaling issue of left and right menu --- .../activity-help.component.html | 0 .../activity-help.component.scss | 0 .../activity-help/activity-help.component.ts | 2 +- .../left-menu/left-menu.component.html | 126 +++++++++--------- .../left-menu/left-menu.component.scss | 18 ++- .../left-menu/left-menu.component.ts | 22 +-- .../right-menu/right-menu.component.html | 25 ++-- .../right-menu/right-menu.component.scss | 17 +-- .../right-menu/right-menu.component.ts | 15 +-- .../workflow-viewer.component.html | 4 +- .../workflow-viewer.component.ts | 2 +- src/app/plugins/workflows/workflows.module.ts | 2 +- src/scss/angular2-multiselect-dropdown.scss | 6 +- 13 files changed, 99 insertions(+), 140 deletions(-) rename src/app/plugins/workflows/components/workflow-viewer/{right-menu => }/activity-help/activity-help.component.html (100%) rename src/app/plugins/workflows/components/workflow-viewer/{right-menu => }/activity-help/activity-help.component.scss (100%) rename src/app/plugins/workflows/components/workflow-viewer/{right-menu => }/activity-help/activity-help.component.ts (96%) diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-help/activity-help.component.html b/src/app/plugins/workflows/components/workflow-viewer/activity-help/activity-help.component.html similarity index 100% rename from src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-help/activity-help.component.html rename to src/app/plugins/workflows/components/workflow-viewer/activity-help/activity-help.component.html diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-help/activity-help.component.scss b/src/app/plugins/workflows/components/workflow-viewer/activity-help/activity-help.component.scss similarity index 100% rename from src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-help/activity-help.component.scss rename to src/app/plugins/workflows/components/workflow-viewer/activity-help/activity-help.component.scss diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-help/activity-help.component.ts b/src/app/plugins/workflows/components/workflow-viewer/activity-help/activity-help.component.ts similarity index 96% rename from src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-help/activity-help.component.ts rename to src/app/plugins/workflows/components/workflow-viewer/activity-help/activity-help.component.ts index c8963826..a175a726 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-help/activity-help.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/activity-help/activity-help.component.ts @@ -1,5 +1,5 @@ import {Component, computed, effect, input, OnInit, signal} from '@angular/core'; -import {ActivityDef, GroupDef, portTypeToDataModel} from '../../../../models/activity-registry.model'; +import {ActivityDef, GroupDef, portTypeToDataModel} from '../../../models/activity-registry.model'; import {KatexOptions} from 'ngx-markdown'; @Component({ diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html index 701ed3cc..d0e670f2 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html @@ -1,69 +1,67 @@ - -
-
- -

Add Activity

- -
- - - - - - -
- -
    - - @for (activity of filteredList; track activity.type) { -
  • - - -
    -
    -
    {{ activity.displayName }}
    -
    -
    - - -
    -
    -     -     - -
    • - } -
- - +
+
+
+

Add Activity

-
- -

{{ openedActivityDef.displayName }}

- - - - - +
+ + + + + + + + {{ item.itemName }} + + + + + + +
+
    + @for (activity of filteredList; track activity.type) { +
  • + + +
    +
    +
    {{ activity.displayName }}
    + {{ activity.shortDescription }} +
    +
    + + +
    +
    +     +     + +
    • + } +
- +
+
+

{{ openedActivityDef.displayName }}

+ +
+
+ +
+
+
diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.scss b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.scss index 501840d1..7295712f 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.scss @@ -1,8 +1,6 @@ -#Offcanvas { - height: 100%; - position: relative; - max-height: inherit; +[hidden] { + display: none !important; } .info-visible { @@ -20,19 +18,19 @@ .info-col { max-width: 400px; - .offcanvas-header { - min-height: 59px; // same height as Add Activity + .menu-header { + min-height: 51px; // same height as Add Activity } } .activity-list { overflow-y: auto; - max-height: calc(100vh - 400px); // TODO: find solution without hardcoded height, or at least consider activity name length + flex-basis: 0; } .activity-info { overflow-y: auto; - max-height: calc(100vh - 300px); // TODO: find solution without hardcoded height, or at least consider activity name length + flex-basis: 0; } .no-select { @@ -43,7 +41,7 @@ } .cdk-drag-preview { - z-index: 1100 !important; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .draggable { @@ -56,7 +54,7 @@ .activity-card:hover { - .info-button { + .info-button:not(.text-primary) { color: var(--cui-dark) !important; } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts index 395a8d0f..f039129c 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts @@ -1,5 +1,4 @@ -import {Component, EventEmitter, input, Output, ViewChild} from '@angular/core'; -import {OffcanvasComponent} from '@coreui/angular'; +import {Component, EventEmitter, input, Output, signal} from '@angular/core'; import {WorkflowsService} from '../../../services/workflows.service'; import {CdkDragDrop} from '@angular/cdk/drag-drop'; import {ActivityDef} from '../../../models/activity-registry.model'; @@ -14,8 +13,7 @@ export class LeftMenuComponent { @Output() create = new EventEmitter(); @Output() createAt = new EventEmitter<[string, { x: number, y: number }]>(); - - @ViewChild('offcanvas') menu: OffcanvasComponent; + visible = signal(true); private readonly registry = this._workflows.getRegistry(); readonly activityTypes = this.registry.getTypes(); @@ -24,6 +22,7 @@ export class LeftMenuComponent { readonly dropdownSettings = { singleSelection: false, text: 'Filter by category', + noDataLabel: 'No categories found', enableSearchFilter: true, enableCheckAll: false, enableFilterSelectAll: false, @@ -32,6 +31,7 @@ export class LeftMenuComponent { filterText: string; selectedCategories = []; filteredList: ActivityDef[]; + showDescription = false; openedActivityDef: ActivityDef; // for info @@ -47,19 +47,7 @@ export class LeftMenuComponent { } toggleMenu() { - this.menu.visible = !this.menu.visible; - } - - showMenu() { - this.menu.visible = true; - } - - hideMenu() { - this.menu.visible = false; - } - - isVisible() { - return this.menu?.visible; + this.visible.update(b => !b); } onDragDropped($event: CdkDragDrop) { diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html index 1d9cfaa2..048e34df 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html @@ -1,17 +1,8 @@ - - +
+
-

{{ activity().displayName() }}

+

{{ activity().displayName() }}

    @@ -52,9 +43,9 @@

    {{ activity().displayName() }}

- - -
+
+
+
@switch (activeTab()) { @case ("settings") { @@ -84,5 +75,5 @@
Execution Stats
} }
- - +
+
diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.scss index e11ef7de..dc02d685 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.scss @@ -1,15 +1,10 @@ -#Offcanvas { - height: 100%; - position: relative; - max-height: inherit; - width: 500px; -} - -.menu-visible { +[hidden] { + display: none !important; } -.menu-hidden { +.menu { + width: 500px; } .no-select { @@ -19,7 +14,7 @@ -ms-user-select: none; } -.offcanvas-body { +.menu-body { overflow-y: auto; - max-height: calc(100vh - 350px); // TODO: find solution without hardcoded height, or at least consider activity name length + flex-basis: 0; } diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts index ef3e011d..09bcf159 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts @@ -18,25 +18,14 @@ export class RightMenuComponent { activity = input.required(); @ViewChild('offcanvas') menu: OffcanvasComponent; + visible = signal(false); activeTab = signal('settings'); constructor(private readonly _workflows: WorkflowsService, private readonly _websocket: WorkflowsWebSocketService) { } toggleMenu() { - this.menu.visible = !this.menu.visible; - } - - showMenu() { - this.menu.visible = true; - } - - hideMenu() { - this.menu.visible = false; - } - - isVisible() { - return this.menu?.visible; + this.visible.update(b => !b); } save(settings: SettingsModel, config: ActivityConfigModel, rendering: RenderModel) { diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html index bf82d9d7..02fcc4f0 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -3,7 +3,7 @@ @@ -55,7 +55,7 @@ diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index 12ac23e1..d5d4c91a 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -130,7 +130,7 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { tap(activityModel => { this.workflow.updateOrCreateActivity(activityModel); this.openedActivity.set(this.workflow.getActivity(activityModel.id)); - this.rightMenu.showMenu(); + this.rightMenu.visible.set(true); }) ).subscribe()); this.subscriptions.add(this.workflow.onActivityRemove().subscribe( diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index ff8b098a..4c9f4dce 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -70,7 +70,7 @@ import {ComponentsModule} from '../../components/components.module'; import {ActivityConfigEditorComponent} from './components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component'; import {WorkflowConfigEditorComponent} from './components/workflow-viewer/workflow-config-editor/workflow-config-editor.component'; import {LeftMenuComponent} from './components/workflow-viewer/left-menu/left-menu.component'; -import {ActivityHelpComponent} from './components/workflow-viewer/right-menu/activity-help/activity-help.component'; +import {ActivityHelpComponent} from './components/workflow-viewer/activity-help/activity-help.component'; import {MarkdownComponent} from 'ngx-markdown'; import {ActivitySettingsComponent} from './components/workflow-viewer/right-menu/activity-settings/activity-settings.component'; import {IntSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component'; diff --git a/src/scss/angular2-multiselect-dropdown.scss b/src/scss/angular2-multiselect-dropdown.scss index e935208d..12e9e225 100644 --- a/src/scss/angular2-multiselect-dropdown.scss +++ b/src/scss/angular2-multiselect-dropdown.scss @@ -5,7 +5,7 @@ $btn-background: #fff; $btn-border: var(--cui-border-color); $btn-text-color: #333; $btn-arrow: #333; -$border-radius: var(--cui-border-radius-sm); +$border-radius: var(--cui-border-radius); $token-background: $base-color; @@ -25,7 +25,7 @@ $selected-background: #e9f4ff; .c-btn { background: $btn-background; border: 1px solid $btn-border; - border-radius: $border-radius; + border-radius: $border-radius !important; color: $btn-text-color; } @@ -72,7 +72,7 @@ $selected-background: #e9f4ff; .list-area { border: 1px solid #ccc; - border-radius: $border-radius; + border-radius: $border-radius !important; background: #fff; box-shadow: 0px 1px 5px $box-shadow-color; } From 275457f691d6c6722dfe7ff7895eb3cc933d234d Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Tue, 14 Jan 2025 19:28:39 +0100 Subject: [PATCH 20/68] Add more setting types --- .../workflow-session.component.html | 2 +- .../activity-config-editor.component.html | 6 ++- .../activity-config-editor.component.ts | 15 ++++++- .../activity-settings.component.html | 37 +++++++++++++--- .../activity-settings.component.ts | 11 ++++- .../boolean-setting.component.html | 4 ++ .../boolean-setting.component.scss | 0 .../boolean-setting.component.ts | 17 +++++++ .../double-setting.component.html | 3 ++ .../double-setting.component.scss | 0 .../double-setting.component.ts | 23 ++++++++++ .../entity-setting.component.html | 13 ++++++ .../entity-setting.component.scss | 0 .../entity-setting.component.ts | 26 +++++++++++ .../int-setting/int-setting.component.html | 4 +- .../int-setting/int-setting.component.ts | 6 +-- .../string-setting.component.html | 4 +- .../string-setting.component.ts | 6 +-- .../right-menu/right-menu.component.html | 20 ++++----- .../right-menu/right-menu.component.ts | 44 +++++++++++++++++-- .../workflow-viewer.component.ts | 2 + .../models/activity-registry.model.ts | 4 +- src/app/plugins/workflows/workflows.module.ts | 6 +++ 23 files changed, 216 insertions(+), 37 deletions(-) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component.ts create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.ts create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.ts diff --git a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html index cdf74fe7..60756665 100644 --- a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html +++ b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html @@ -1,7 +1,7 @@
- diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html index 21c8d791..45c2aad1 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html @@ -1,6 +1,10 @@
-
+
+ @if (hasConfigChanged()) { + Discard + + }
-

{{ setting.shortDescription }}

+

{{ setting.shortDescription }}

@@ -84,17 +89,35 @@
{{ setting.displayName }}
@switch (setting.type) { @case (SettingType.INT) { - } @case (SettingType.STRING) { - } + @case (SettingType.BOOLEAN) { + + + } + @case (SettingType.DOUBLE) { + + + } + @case (SettingType.ENTITY) { + + + } @default {

unknown setting type

} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.ts index 8c458762..1fc08aa5 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.ts @@ -16,7 +16,11 @@ export class ActivitySettingsComponent implements OnInit { isEditable = input.required(); activeSettingGroup = signal(null); - readonly serializedSettings = computed(() => this.activity().settings().serialize(), + private readonly resetSettingsSignal = signal(true); // manually enforce recomputing settings + readonly serializedSettings = computed(() => { + this.resetSettingsSignal(); + return this.activity().settings().serialize(); + }, {equal: () => false}); // enforce change when switching to different activity, even if it has the same settings value readonly editableSettings = computed(() => new Settings(this.serializedSettings())); // we edit a copy of the actual settings readonly editableReferences = computed>(() => { @@ -92,4 +96,9 @@ export class ActivitySettingsComponent implements OnInit { this.editableSettings().get(key).deleteReference(ref); this.checkForChanges(); } + + resetSettings() { + this.resetSettingsSignal.set(false); + this.resetSettingsSignal.set(true); + } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component.html new file mode 100644 index 00000000..830bd929 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component.html @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component.ts new file mode 100644 index 00000000..daa17ec2 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component.ts @@ -0,0 +1,17 @@ +import {Component, EventEmitter, input, model, Output} from '@angular/core'; +import {SettingDefModel} from '../../../../../models/activity-registry.model'; +import {TypePreviewModel} from '../../../../../models/workflows.model'; + +@Component({ + selector: 'app-boolean-setting', + templateUrl: './boolean-setting.component.html', + styleUrl: './boolean-setting.component.scss' +}) +export class BooleanSettingComponent { + isEditable = input.required(); + settingDef = input.required(); + inTypePreview = input.required(); // not required for int + value = model.required(); + @Output() hasChanged = new EventEmitter(); + +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.html new file mode 100644 index 00000000..88d47908 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.ts new file mode 100644 index 00000000..e5aaf5d0 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.ts @@ -0,0 +1,23 @@ +import {Component, computed, EventEmitter, input, model, Output} from '@angular/core'; +import {SettingDefModel} from '../../../../../models/activity-registry.model'; +import {TypePreviewModel} from '../../../../../models/workflows.model'; + +@Component({ + selector: 'app-double-setting', + templateUrl: './double-setting.component.html', + styleUrl: './double-setting.component.scss' +}) +export class DoubleSettingComponent { + isEditable = input.required(); + settingDef = input.required(); + inTypePreview = input.required(); // not required for double + value = model.required(); + @Output() hasChanged = new EventEmitter(); + + def = computed(() => this.settingDef() as DoubleSettingDef); +} + +interface DoubleSettingDef extends SettingDefModel { + minValue: number; + maxValue: number; +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html new file mode 100644 index 00000000..2a18fd58 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html @@ -0,0 +1,13 @@ + + + + @if (def().dataModel !== DataModel.GRAPH) { + . + + + } + \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.ts new file mode 100644 index 00000000..4e71e88f --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.ts @@ -0,0 +1,26 @@ +import {Component, computed, EventEmitter, input, model, Output} from '@angular/core'; +import {SettingDefModel} from '../../../../../models/activity-registry.model'; +import {TypePreviewModel} from '../../../../../models/workflows.model'; +import {DataModel} from '../../../../../../../models/ui-request.model'; + +@Component({ + selector: 'app-entity-setting', + templateUrl: './entity-setting.component.html', + styleUrl: './entity-setting.component.scss' +}) +export class EntitySettingComponent { + isEditable = input.required(); + settingDef = input.required(); + inTypePreview = input.required(); // not required for int + value = model.required(); + @Output() hasChanged = new EventEmitter(); + + def = computed(() => this.settingDef() as EntitySettingDef); + // TODO: change appearance if isList + protected readonly DataModel = DataModel; +} + +interface EntitySettingDef extends SettingDefModel { + dataModel: DataModel; + mustExist: boolean; +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component.html index 3b615acc..bd066ff1 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component.html @@ -1,3 +1,3 @@ - \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component.ts index 7eada21c..8678e953 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component.ts @@ -1,5 +1,5 @@ import {Component, computed, EventEmitter, input, model, Output} from '@angular/core'; -import {SettingDef} from '../../../../../models/activity-registry.model'; +import {SettingDefModel} from '../../../../../models/activity-registry.model'; import {TypePreviewModel} from '../../../../../models/workflows.model'; @Component({ @@ -9,7 +9,7 @@ import {TypePreviewModel} from '../../../../../models/workflows.model'; }) export class IntSettingComponent { isEditable = input.required(); - settingDef = input.required(); + settingDef = input.required(); inTypePreview = input.required(); // not required for int value = model.required(); @Output() hasChanged = new EventEmitter(); @@ -18,7 +18,7 @@ export class IntSettingComponent { // TODO: change appearance if isList } -interface IntSettingDef extends SettingDef { +interface IntSettingDef extends SettingDefModel { isList: boolean; minValue: number; maxValue: number; diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.html index 1e9c2b9f..77c651a0 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.html @@ -1,3 +1,3 @@ - \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.ts index 4b71ca0a..aa637886 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.ts @@ -1,5 +1,5 @@ import {Component, computed, EventEmitter, input, model, Output} from '@angular/core'; -import {SettingDef} from '../../../../../models/activity-registry.model'; +import {SettingDefModel} from '../../../../../models/activity-registry.model'; import {TypePreviewModel} from '../../../../../models/workflows.model'; @Component({ @@ -9,7 +9,7 @@ import {TypePreviewModel} from '../../../../../models/workflows.model'; }) export class StringSettingComponent { isEditable = input.required(); - settingDef = input.required(); + settingDef = input.required(); inTypePreview = input.required(); // not required for int value = model.required(); @Output() hasChanged = new EventEmitter(); @@ -18,7 +18,7 @@ export class StringSettingComponent { // TODO: change appearance if isList } -interface StringSettingDef extends SettingDef { +interface StringSettingDef extends SettingDefModel { isList: boolean; minLength: number; maxLength: number; diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html index 048e34df..7bf908a8 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html @@ -1,6 +1,6 @@ -
+
-
+

{{ activity().displayName() }}

@@ -9,13 +9,13 @@

{{ activity().displayName() }}

-
+
@switch (activeTab()) { @case ("settings") { - + } @case ("variables") { @@ -63,7 +63,7 @@
{{ entry.key }}
} @case ("execution") {
Config
- diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts index 09bcf159..a227e915 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts @@ -1,9 +1,11 @@ import {Component, input, signal, ViewChild} from '@angular/core'; -import {OffcanvasComponent} from '@coreui/angular'; import {Activity} from '../workflow'; import {WorkflowsService} from '../../../services/workflows.service'; import {ActivityConfigModel, RenderModel, SettingsModel} from '../../../models/workflows.model'; import {WorkflowsWebSocketService} from '../../../services/workflows-websocket.service'; +import {ActivitySettingsComponent} from './activity-settings/activity-settings.component'; +import {ActivityConfigEditorComponent} from './activity-config-editor/activity-config-editor.component'; +import {ToasterService} from '../../../../../components/toast-exposer/toaster.service'; export type MenuTabs = 'settings' | 'variables' | 'outputs' | 'execution' | 'help'; @@ -17,18 +19,52 @@ export class RightMenuComponent { isEditable = input.required(); activity = input.required(); - @ViewChild('offcanvas') menu: OffcanvasComponent; + @ViewChild('settings') settingsComponent: ActivitySettingsComponent; + @ViewChild('config') configComponent: ActivityConfigEditorComponent; visible = signal(false); activeTab = signal('settings'); - constructor(private readonly _workflows: WorkflowsService, private readonly _websocket: WorkflowsWebSocketService) { + constructor(private readonly _workflows: WorkflowsService, + private readonly _websocket: WorkflowsWebSocketService, + private readonly _toast: ToasterService + ) { } toggleMenu() { this.visible.update(b => !b); } - save(settings: SettingsModel, config: ActivityConfigModel, rendering: RenderModel) { + save(settings + : + SettingsModel, config + : + ActivityConfigModel, rendering + : + RenderModel + ) { this._websocket.updateActivity(this.activity().id, settings, config, rendering); } + + changeActiveTab(tab: MenuTabs) { + if (tab !== this.activeTab() && this.canSafelyNavigate()) { + this.activeTab.set(tab); + } + } + + canSafelyNavigate() { + if (this.activeTab() === 'settings') { + if (this.settingsComponent?.hasSettingsChanged()) { + this._toast.warn('Please save or discard any unsaved changes to the settings first.', 'Unsaved settings'); + this.visible.set(true); + return false; + } + } else if (this.activeTab() === 'execution') { + if (this.configComponent?.hasConfigChanged()) { + this._toast.warn('Please save or discard the unsaved changes to the config first.', 'Unsaved config'); + this.visible.set(true); + return false; + } + } + return true; + } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index d5d4c91a..17ee152f 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -126,6 +126,8 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { activityId => this._websocket.reset(activityId) )); this.subscriptions.add(this.editor.onOpenActivitySettings().pipe( + filter(activityId => + !this.openedActivity() || (activityId !== this.openedActivity().id && this.rightMenu.canSafelyNavigate())), switchMap(activityId => this._workflows.getActivity(this.sessionId, activityId)), tap(activityModel => { this.workflow.updateOrCreateActivity(activityModel); diff --git a/src/app/plugins/workflows/models/activity-registry.model.ts b/src/app/plugins/workflows/models/activity-registry.model.ts index 001632be..cf66364d 100644 --- a/src/app/plugins/workflows/models/activity-registry.model.ts +++ b/src/app/plugins/workflows/models/activity-registry.model.ts @@ -16,7 +16,7 @@ export class ActivityRegistry { ([key, model]) => [key, new ActivityDef(model)] )); const categories = new Set(); - this.registry.forEach((def, type) => { + this.registry.forEach((def,) => { def.categories.forEach(c => categories.add(c)); }); this.categories.push(...categories); @@ -133,6 +133,7 @@ export class SettingDef { longDescription: string; subPointer: string; subValues: any[]; + model: SettingDefModel; // used to access values specific to a given SettingDef implementation constructor(model: SettingDefModel) { this.type = model.type; @@ -142,6 +143,7 @@ export class SettingDef { this.longDescription = model.longDescription; this.subPointer = model.subPointer; this.subValues = model.subValues; + this.model = model; } isVisible(settings: SettingsModel) { diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index 4c9f4dce..2613a879 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -78,6 +78,9 @@ import {StringSettingComponent} from './components/workflow-viewer/right-menu/ac import {CdkDrag, CdkDragPreview, CdkDropList} from '@angular/cdk/drag-drop'; import {AngularMultiSelectModule} from 'angular2-multiselect-dropdown'; import {CheckpointViewerComponent} from './components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component'; +import {BooleanSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component'; +import {DoubleSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component'; +import {EntitySettingComponent} from './components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component'; @NgModule({ imports: [ @@ -162,6 +165,9 @@ import {CheckpointViewerComponent} from './components/workflow-viewer/right-menu ActivitySettingsComponent, IntSettingComponent, StringSettingComponent, + BooleanSettingComponent, + DoubleSettingComponent, + EntitySettingComponent, CheckpointViewerComponent ], exports: [ From b235d2a56db0891daaa7c456f510ae9217ab46e5 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Wed, 15 Jan 2025 19:51:40 +0100 Subject: [PATCH 21/68] New activity component design --- .../activity-port.component.html | 15 ++ .../activity-port.component.scss | 52 ++++-- .../activity-port/activity-port.component.ts | 25 +-- .../editor/activity/activity.component.html | 154 +++++++++--------- .../editor/activity/activity.component.scss | 85 ++++++---- .../editor/activity/activity.component.ts | 118 ++++++++++++-- .../editor/edge/edge.component.html | 3 +- .../editor/edge/edge.component.scss | 24 ++- .../editor/edge/edge.component.ts | 19 ++- .../workflow-viewer/editor/vars.scss | 6 +- .../workflow-viewer/editor/workflow-editor.ts | 43 +++-- .../checkpoint-viewer.component.ts | 3 +- .../right-menu/right-menu.component.html | 29 +++- .../workflow-viewer.component.html | 34 ++-- .../workflow-viewer.component.ts | 15 ++ .../components/workflow-viewer/workflow.ts | 17 +- .../workflows/models/workflows.model.ts | 25 +++ .../services/checkpoint-viewer.service.ts | 23 ++- src/app/plugins/workflows/workflows.module.ts | 10 +- 19 files changed, 515 insertions(+), 185 deletions(-) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html new file mode 100644 index 00000000..0fd9fd37 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html @@ -0,0 +1,15 @@ +@switch (data.controlType) { + @case ('in') { + + } + @case ('success') { + + } + @case ('fail') { + + } + @default { + + } + +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss index 996acdca..333b8682 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss @@ -2,13 +2,11 @@ @import "../vars"; :host { - display: inline-block; + display: flex; + justify-content: center; + align-items: center; cursor: pointer; - border: 1px solid grey; - width: $socket-size; - height: $socket-size * 2; vertical-align: middle; - background: #fff; z-index: 2; box-sizing: border-box; @@ -16,20 +14,52 @@ background: #ddd; } + &.control-port { + width: $control-port-size; + height: $control-port-size; + border-radius: 3px; + } + + &.data-port { + width: $data-port-size; + height: $data-port-size; + background: var(--cui-dark); + border-radius: $data-port-size / 2; + } + + &.is-optional { + background: var(--cui-secondary); + + } + &.success-control { - background: green; + background: var(--cui-success); + + .port-icon { + font-size: $control-port-size - 4px; + padding-top: 1px; + } } &.fail-control { - background: red; + background: var(--cui-danger); + + .port-icon { + font-size: $control-port-size - 4px; + padding-top: 1px; + } } &.in-control { - background: blue; + background: var(--cui-blue); + + .port-icon { + font-size: $control-port-size - 5px; + padding-top: 1px; + } } - & .output-datamodel { - position: absolute; - right: 1rem; + .port-icon { + color: var(--cui-light) } } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts index 18fcfc76..47803949 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts @@ -2,17 +2,12 @@ import {ChangeDetectorRef, Component, ElementRef, HostBinding, Input, OnChanges, import {ClassicPreset} from 'rete'; import {InPortDef, OutPortDef, portTypeToDataModel} from '../../../../models/activity-registry.model'; import {DataModel} from '../../../../../../models/ui-request.model'; -import {NgClass, NgIf} from '@angular/common'; @Component({ selector: 'app-activity-port', standalone: true, - imports: [ - NgIf, - NgClass - ], - // TODO: render datamodel in activity itself - template: `

{{data.dataModel().slice( 0, 3 )}}

`, + imports: [], + templateUrl: './activity-port.component.html', styleUrl: './activity-port.component.scss' }) export class ActivityPortComponent implements OnInit, OnChanges { @@ -20,7 +15,10 @@ export class ActivityPortComponent implements OnInit, OnChanges { @Input() rendered!: any; @HostBinding('title') get title() { - return this.data.dataModel; + if (this.data.isControl) { + return this.data.controlType + ' control'; + } + return this.data.dataModel(); } constructor(private cdr: ChangeDetectorRef, private elementRef: ElementRef) { @@ -29,11 +27,16 @@ export class ActivityPortComponent implements OnInit, OnChanges { ngOnInit(): void { if (this.data.controlType === 'success') { - this.elementRef.nativeElement.classList.add('success-control'); + this.elementRef.nativeElement.classList.add('success-control', 'control-port'); } else if (this.data.controlType === 'fail') { - this.elementRef.nativeElement.classList.add('fail-control'); + this.elementRef.nativeElement.classList.add('fail-control', 'control-port'); } else if (this.data.controlType === 'in') { - this.elementRef.nativeElement.classList.add('in-control'); + this.elementRef.nativeElement.classList.add('in-control', 'control-port'); + } else { + this.elementRef.nativeElement.classList.add('data-port'); + if (this.data.portDef['isOptional']) { + this.elementRef.nativeElement.classList.add('is-optional'); + } } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html index 1ed157a8..e0aae9e3 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html @@ -1,85 +1,87 @@ -
- - - - - -
+
+

+ {{ statusText?.() }} +

+
-
{{ data.displayName() }}
-

{{ data.state() }}

-
{{ data.commonType() }}
-
- {{ data.progress() * 100 | number }} % -
+
-
-
-
-
-
- {{ input.value?.label }} +
+
+
-
+
+
{{ data.commonType() }}
+ + + + +
-
-
-
-
- {{ output.value?.label }} + +
+
+
+
+
+ + +
+
+
+ +
+
+ +
+

{{ data.displayName() }}

+
+ + +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
-
-
- - -
diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss index bcc45db4..f0c66dd1 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss @@ -3,32 +3,42 @@ :host { display: block; - background: black; - border: 2px solid grey; - border-radius: 10px; + border: 3px solid transparent; // when a visible border appears, the node does not move cursor: pointer; box-sizing: border-box; width: $node-width; height: auto; - padding-bottom: 6px; position: relative; user-select: none; &:hover { - //background: #333; - border-color: lightskyblue; - border-width: 2px; + border-color: var(--cui-secondary); } &.selected { - border-color: red; + border-color: var(--cui-dark); } - .title { - color: white; - font-family: sans-serif; - font-size: 18px; - padding: 8px; + .activity { + box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5); + background: var(--cui-light); + } + + .status-bar { + height: 16px; + + &.state-executing { + background: #0d6efd; // fallback if linear gradient is not supported + } + + .status-text { + font-size: 12px; + margin-top: -2px; + } + } + + .activity-inputs, .activity-outputs { + min-width: 36px; } .output { @@ -39,37 +49,50 @@ text-align: left; } + .output-spacer { + height: $control-port-size + 8px; // data in and out-ports should start at same height + } + .output-socket { text-align: right; - margin-right: -1px; display: inline-block; } .input-socket { text-align: left; - margin-left: -1px; display: inline-block; } - .input-title, - .output-title { - vertical-align: middle; - color: white; - display: inline-block; - font-family: sans-serif; - font-size: 14px; - margin: $socket-margin; - line-height: $socket-size; + .control-inport { + margin-left: -$control-port-size / 2; } - .input-control { - z-index: 1; - width: calc(100% - #{$socket-size + 2*$socket-margin}); - vertical-align: middle; - display: inline-block; + .data-inport { + margin-left: -$data-port-size / 2; + } + + .control-outport { + margin-right: -$control-port-size / 2; + } + + .data-outport { + margin-right: -$data-port-size / 2; + } + + .notes-container { + .form-label { + color: var(--cui-secondary); + } + + .form-label::after { + background: transparent; + padding-bottom: 0; + } } - .control { - padding: $socket-margin math.div($socket-size, 2) + $socket-margin; + #activity-notes { + resize: vertical; + max-height: 95px; + background: var(--cui-light); } } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts index 45cc2b7a..9f06d876 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts @@ -1,36 +1,106 @@ -import {ChangeDetectorRef, Component, computed, HostBinding, Input, OnChanges, Signal} from '@angular/core'; +import {ChangeDetectorRef, Component, computed, HostBinding, Input, OnChanges, OnInit, Signal} from '@angular/core'; import {ClassicPreset} from 'rete'; import {KeyValue} from '@angular/common'; -import {WorkflowState} from '../../../../models/workflows.model'; +import {ActivityState, WorkflowState} from '../../../../models/workflows.model'; import {ActivityPort} from '../activity-port/activity-port.component'; import {Subject} from 'rxjs'; import {Activity} from '../../workflow'; +import {DataModel} from '../../../../../../models/ui-request.model'; +import {WorkflowsWebSocketService} from '../../../../services/workflows-websocket.service'; + + +export const stateColors = { + [ActivityState.IDLE]: '#dddddd', + [ActivityState.QUEUED]: '#39f', + [ActivityState.EXECUTING]: '#0d6efd', + [ActivityState.FINISHED]: '#2eb85c', // same color as saved + [ActivityState.SAVED]: '#2eb85c', + [ActivityState.SKIPPED]: '#f9b115', + [ActivityState.FAILED]: '#e55353', +}; + +export const IN_CONTROL_KEY = 'c_in'; +export const SUCCESS_CONTROL_KEY = 'c_out_success'; +export const FAIL_CONTROL_KEY = 'c_out_fail'; + +export const dataModelIcons = { + [DataModel.RELATIONAL]: 'fa fa-table', + [DataModel.DOCUMENT]: 'fa fa-file-text-o', + [DataModel.GRAPH]: 'cil-graph', +}; @Component({ selector: 'app-activity', templateUrl: './activity.component.html', styleUrl: './activity.component.scss' }) -export class ActivityComponent implements OnChanges { +export class ActivityComponent implements OnInit, OnChanges { @Input() data!: ActivityNode; @Input() emit!: (data: any) => void; @Input() rendered!: () => void; seed = 0; + statusBackground: Signal; + statusText: Signal; + readonly inIcons: Record> = {}; + readonly outIcons: Record> = {}; + + protected readonly IN_CONTROL_KEY = IN_CONTROL_KEY; + protected readonly ActivityState = ActivityState; + @HostBinding('class.selected') get selected() { return this.data.selected; } - constructor(private cdr: ChangeDetectorRef) { + constructor(private cdr: ChangeDetectorRef, private _websocket: WorkflowsWebSocketService) { this.cdr.detach(); } + ngOnInit(): void { + const grad1 = '#20c997'; + const grad2 = stateColors[ActivityState.EXECUTING]; + this.statusBackground = computed(() => { + if (this.data.state() === ActivityState.EXECUTING) { + const percent = this.data.progress() * 100; + return `linear-gradient(to right, ${grad1} ${percent - 5}%, ${grad2} ${percent + 5}%)`; + } else { + return stateColors[this.data.state()]; + } + }); + this.statusText = computed(() => { + switch (this.data.state()) { + case ActivityState.EXECUTING: + return `executing (${Math.floor(this.data.progress() * 100)} %)`; + case ActivityState.FINISHED: + return 'finished (no checkpoint)'; + case ActivityState.SAVED: + return 'finished'; + default: + return this.data.state().toLowerCase(); + } + }); + Object.entries(this.data.dataInputs).forEach(([key, input]) => { + this.inIcons[key] = computed(() => dataModelIcons[input.socket.dataModel()]); + }); + Object.entries(this.data.dataOutputs).forEach(([key, input]) => { + this.outIcons[key] = computed(() => dataModelIcons[input.socket.dataModel()]); + }); + + this.cdr.detectChanges(); + } + ngOnChanges(): void { this.cdr.detectChanges(); requestAnimationFrame(() => this.rendered()); this.seed++; // force render sockets } + saveNotes() { + // we can perform this update locally, instead of from the workflow-viewer + console.log('saving notes', this.data.rendering()); + this._websocket.updateActivity(this.data.activityId, null, null, this.data.rendering()); + } + sortByIndex< N extends object, T extends KeyValue @@ -42,45 +112,61 @@ export class ActivityComponent implements OnChanges { } } -export const IN_CONTROL_KEY = 'c_in'; -export const SUCCESS_CONTROL_KEY = 'c_out_success'; -export const FAIL_CONTROL_KEY = 'c_out_fail'; - export class ActivityNode extends ClassicPreset.Node { - width = 200; - height = 260; // TODO: change dimensions according to number of inputs / outputs etc + width = 400; + height = 270; canExecute = computed(() => this.state() === 'IDLE' && this.workflowState() === 'IDLE'); canReset = computed(() => this.state() !== 'IDLE' && this.workflowState() === 'IDLE'); + canOpenCheckpoint = computed(() => this.state() === 'FINISHED' || this.state() === 'SAVED'); // TODO: find solution for when to show inputs readonly activityId = this.activity.id; readonly displayName = this.activity.displayName; + readonly rendering = this.activity.rendering; readonly state = this.activity.state; readonly progress = this.activity.progress; readonly commonType = this.activity.commonType; + readonly controlInput: ClassicPreset.Input; + readonly dataInputs: { [key: string]: ClassicPreset.Input } = {}; + readonly controlOutputs: { [key: string]: ClassicPreset.Output }; + readonly dataOutputs: { [key: string]: ClassicPreset.Output } = {}; constructor( private readonly activity: Activity, public readonly workflowState: Signal, public readonly executeActivitySubject: Subject, public readonly resetActivitySubject: Subject, - public readonly openSettingsSubject: Subject + public readonly openSettingsSubject: Subject, + public readonly openCheckpointSubject: Subject<[string, boolean, number]> ) { super(activity.displayName()); // control ports - this.addInput(IN_CONTROL_KEY, new ClassicPreset.Input(new ActivityPort(null, true, 'in'), null, true)); + this.controlInput = new ClassicPreset.Input(new ActivityPort(null, true, 'in'), null, true); + this.addInput(IN_CONTROL_KEY, this.controlInput); this.addOutput(SUCCESS_CONTROL_KEY, new ClassicPreset.Output(new ActivityPort(null, false, 'success'), null, true)); this.addOutput(FAIL_CONTROL_KEY, new ClassicPreset.Output(new ActivityPort(null, false, 'fail'), null, true)); + this.controlOutputs = { + [SUCCESS_CONTROL_KEY]: this.outputs[SUCCESS_CONTROL_KEY] as ClassicPreset.Output, + [FAIL_CONTROL_KEY]: this.outputs[FAIL_CONTROL_KEY] as ClassicPreset.Output + }; + const def = activity.def; // data ports def.inPorts.forEach((inPort, i) => { - this.addInput(ActivityNode.getDataPortKey(i), new ClassicPreset.Input(new ActivityPort(inPort, true), null, false)); + const input = new ClassicPreset.Input(new ActivityPort(inPort, true), null, false); + this.addInput(ActivityNode.getDataPortKey(i), input); + this.dataInputs[ActivityNode.getDataPortKey(i)] = input; }); def.outPorts.forEach((outPort, i) => { + const output = new ClassicPreset.Output(new ActivityPort(outPort, false), null, true); this.addOutput(ActivityNode.getDataPortKey(i), new ClassicPreset.Output(new ActivityPort(outPort, false), null, true)); + this.dataOutputs[ActivityNode.getDataPortKey(i)] = output; }); - this.height += (def.inPorts.length + def.outPorts.length) * 32; + this.height += Math.max(0, + (def.inPorts.length - 3) * 34, + (def.outPorts.length - 2) * 34 + ); } public static getDataPortKey(index: number) { @@ -106,4 +192,8 @@ export class ActivityNode extends ClassicPreset.Node { openSettings() { this.openSettingsSubject.next(this.activityId); } + + openCheckpoint(isInput: boolean, key: string) { + this.openCheckpointSubject.next([this.activityId, isInput, ActivityNode.getDataPortIndexFromKey(key)]); + } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html index c46fc84e..4711bd28 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html @@ -1,3 +1,4 @@ - + \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss index ab1bee65..5042be4a 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss @@ -5,7 +5,29 @@ svg { path { fill: none; - stroke-width: 5px; + stroke-width: 4px; pointer-events: auto; + stroke: var(--cui-dark); + + &.state-idle { + stroke: var(--cui-dark); + } + + &.state-active { + stroke: var(--cui-success); + } + + &.state-inactive { + stroke: var(--cui-danger); + } + + &.is-control { + stroke-dasharray: 16, 8; + stroke-width: 3px; + } + + &.is-magnetic { + stroke: rgba(79, 93, 115, 0.3); + } } } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts index 4966cb31..36252244 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts @@ -1,4 +1,4 @@ -import {Component, computed, Input, Signal} from '@angular/core'; +import {Component, computed, Input, OnInit, Signal} from '@angular/core'; import {ClassicPreset} from 'rete'; import {ActivityNode, FAIL_CONTROL_KEY, IN_CONTROL_KEY, SUCCESS_CONTROL_KEY} from '../activity/activity.component'; import {EdgeModel, EdgeState} from '../../../../models/workflows.model'; @@ -8,11 +8,24 @@ import {EdgeModel, EdgeState} from '../../../../models/workflows.model'; templateUrl: './edge.component.html', styleUrl: './edge.component.scss' }) -export class EdgeComponent { +export class EdgeComponent implements OnInit { @Input() data!: Edge; @Input() start: any; @Input() end: any; @Input() path: string; + + isControl = false; + + ngOnInit(): void { + // @ts-ignore + if (this.data.isPseudo || this.data.isMagnetic) { + this.isControl = ActivityNode.isControlPortKey(this.data.sourceOutput) || ActivityNode.isControlPortKey(this.data.targetInput); + } else { + this.isControl = this.data.isControl; + } + } + + } export const EDGE_COLOR_MAP = { @@ -22,7 +35,7 @@ export const EDGE_COLOR_MAP = { }; export class Edge extends ClassicPreset.Connection { - isMagnetic = false; // TODO: why is this required? + isMagnetic = false; readonly edgeColor = computed(() => EDGE_COLOR_MAP[this.state()]); readonly sourceActivityId: string; // activityId readonly targetActivityId: string; // activityId diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/vars.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/vars.scss index 475c764c..02735bc1 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/vars.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/vars.scss @@ -1,3 +1,3 @@ -$node-width: 200px; -$socket-margin: 6px; -$socket-size: 16px; \ No newline at end of file +$node-width: 400px; +$control-port-size: 16px; +$data-port-size: 20px; \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts index 086c9287..4fb4beed 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts @@ -10,8 +10,7 @@ import {ActivityPortComponent} from './activity-port/activity-port.component'; import {addCustomBackground} from '../../../../../components/polyalg/polyalg-viewer/background'; import {ReadonlyPlugin} from 'rete-readonly-plugin'; import {setupPanningBoundary} from '../../../../../components/polyalg/polyalg-viewer/panning-boundary'; -import {MagneticConnectionComponent} from '../../../../../components/polyalg/polyalg-viewer/magnetic-connection/magnetic-connection.component'; -import {AutoArrangePlugin, Presets as ArrangePresets} from 'rete-auto-arrange-plugin'; +import {AutoArrangePlugin} from 'rete-auto-arrange-plugin'; import {WorkflowsService} from '../../../services/workflows.service'; import {ActivityRegistry} from '../../../models/activity-registry.model'; import {debounceTime, Subject, Subscription} from 'rxjs'; @@ -48,6 +47,7 @@ export class WorkflowEditor { private readonly executeActivitySubject = new Subject(); // activityId private readonly resetActivitySubject = new Subject(); // activityId private readonly openSettingsSubject = new Subject(); // activityId + private readonly openCheckpointSubject = new Subject<[string, boolean, number]>(); // activityId, isInput, portIdx private readonly subscriptions = new Subscription(); constructor(private injector: Injector, container: HTMLElement, private readonly _workflows: WorkflowsService, private readonly isReadOnly: boolean) { @@ -61,10 +61,7 @@ export class WorkflowEditor { node() { return ActivityComponent; }, - connection(data) { - if (data.payload.isMagnetic) { - return MagneticConnectionComponent; - } + connection() { return EdgeComponent; }, socket() { @@ -88,22 +85,28 @@ export class WorkflowEditor { } } })); - - this.arrange.addPreset(ArrangePresets.classic.setup({top: 100, bottom: 100})); - /* TODO: customize according to definitive port positions this.arrange.addPreset(() => { return { - port(n) { + port(data) { + let y; + const firstData = 156; + const isControl = ActivityNode.isControlPortKey(data.key); + if (data.side === 'input') { + y = isControl ? 80 : firstData + 34 * (data.index - 1); + } else { + y = isControl ? firstData + 34 * (data.ports - 2) + 24 * (data.index) : firstData + 34 * (data.index - 2); + } + console.log(data, y); return { - x: n.width / (n.ports + 1) * (n.index + 1), - y: 0, + x: 0, + y: y, width: 15, height: 15, - side: 'output' === n.side ? 'NORTH' : 'SOUTH' + side: 'output' === data.side ? 'EAST' : 'WEST' }; } }; - }); */ + }); // Attach plugins this.editor.use(this.readonlyPlugin.root); @@ -206,6 +209,10 @@ export class WorkflowEditor { return this.openSettingsSubject.asObservable(); } + onOpenCheckpoint() { + return this.openCheckpointSubject.asObservable(); + } + onEdgeRemove() { return this.removeEdgeSubject.asObservable(); } @@ -215,7 +222,11 @@ export class WorkflowEditor { } async arrangeNodes() { - await this.arrange.layout({applier: undefined}); + await this.arrange.layout({ + applier: undefined, options: { + 'elk.layered.spacing.nodeNodeBetweenLayers': '150' + } + }); } getCenter(): Position { @@ -247,7 +258,7 @@ export class WorkflowEditor { private async addNode(activity: Activity) { const node = new ActivityNode(activity, this.workflow.state, - this.executeActivitySubject, this.resetActivitySubject, this.openSettingsSubject); + this.executeActivitySubject, this.resetActivitySubject, this.openSettingsSubject, this.openCheckpointSubject); this.nodeMap.set(activity.id, node); this.nodeIdToActivityId.set(node.id, activity.id); const translateSubject = new Subject(); diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts index 5284970a..a38665f8 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts @@ -27,8 +27,7 @@ export class CheckpointViewerComponent implements OnInit { showOutput(i: number) { this.selectedOutput = i; - this._checkpoint.setModal(true); - this._checkpoint.getCheckpoint(this.activity(), this.selectedOutput); + this._checkpoint.openCheckpoint(this.activity(), this.selectedOutput); } materializeCheckpoints() { diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html index 7bf908a8..1713009c 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html @@ -68,7 +68,34 @@
Config
>
Execution Stats
-

TODO

+

Activity ID: {{ activity().id }}

+

Activity State: {{ activity().state() }}

+ + @if (activity().executionInfo()) { +

Execution State: {{ activity().executionInfo().state }}

+

Executor: {{ activity().executionInfo().executorType }}

+

Total Duration: {{ activity().executionInfo().totalDuration }} ms

+

Activities: {{ activity().executionInfo().activities }}

+ + + + + + + + + + @for (state of activity().executionInfo().durations | keyvalue; track state.key) { + + + + + } + +
PhaseTime (ms)
{{ state.key }}{{ state.value }}
+ + } + } @case ("help") { diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html index 02fcc4f0..cc786eec 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -115,24 +115,34 @@
Workflow Variables
- + -
{{ _checkpoint.selectedActivity().displayName() }}: {{ _checkpoint.selectedOutput() }}
+
{{ _checkpoint.selectedActivity().displayName() }}: Output {{ _checkpoint.selectedOutput() }}
 -
- - -

Only the first {{ _checkpoint.limit() }} of {{ _checkpoint.totalCount() }} elements are shown.

- - - -
+ @if (_checkpoint.result() || _checkpoint.isLoading()) { +
+ + +

Only the first {{ _checkpoint.limit() }} of {{ _checkpoint.totalCount() }} elements are shown.

+ + + +
+ } @else { +

The requested checkpoint is currently not materialized. + Do you want to execute the activity to materialize its checkpoints?

+

This will also reset all its successor activities!

+ + } + @if (!_checkpoint.result() && !_checkpoint.isLoading()) { + + } diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index 17ee152f..43dcbddc 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -135,6 +135,21 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { this.rightMenu.visible.set(true); }) ).subscribe()); + this.subscriptions.add(this.editor.onOpenCheckpoint().subscribe( + ([activityId, isInput, idx]) => { + if (isInput) { + const edge = this.workflow.getInEdges(activityId, 'data').find(([edge,]) => edge.toPort === idx)?.[0]; + if (edge) { + activityId = edge.fromId; + idx = edge.fromPort; + } else { + return; + } + } + const activity = this.workflow.getActivity(activityId); + this._checkpoint.openCheckpoint(activity, idx); + } + )); this.subscriptions.add(this.workflow.onActivityRemove().subscribe( activityId => { if (this.openedActivity()?.id === activityId) { diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts index 91147bf1..bd9032e1 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts @@ -1,4 +1,4 @@ -import {ActivityConfigModel, ActivityModel, ActivityState, CommonType, EdgeModel, EdgeState, RenderModel, SettingsModel, TypePreviewModel, Variables, WorkflowConfigModel, WorkflowModel, WorkflowState} from '../../models/workflows.model'; +import {ActivityConfigModel, ActivityModel, ActivityState, CommonType, EdgeModel, EdgeState, ExecutionInfoModel, RenderModel, SettingsModel, TypePreviewModel, Variables, WorkflowConfigModel, WorkflowModel, WorkflowState} from '../../models/workflows.model'; import {computed, Signal, signal, WritableSignal} from '@angular/core'; import * as _ from 'lodash'; import {Subject} from 'rxjs'; @@ -63,6 +63,18 @@ export class Workflow { return edges; } + getInEdges(activityId: string, type: 'data' | 'control' | 'both') { + const edges = this.getEdges(); + switch (type) { + case 'data': + return edges.filter(([model,]) => !model.isControl && model.toId === activityId); + case 'control': + return edges.filter(([model,]) => model.isControl && model.toId === activityId); + case 'both': + return edges.filter(([model,]) => model.toId === activityId); + } + } + getEdgeState(edge: EdgeModel | string): WritableSignal | undefined { if (typeof edge === 'string') { return this.edgeStates.get(edge); @@ -269,6 +281,7 @@ export class Activity { readonly invalidReason: WritableSignal; readonly variables: WritableSignal; readonly displayName: Signal; + readonly executionInfo: WritableSignal; constructor(activityModel: ActivityModel, def: ActivityDef) { this.type = activityModel.type; @@ -283,6 +296,7 @@ export class Activity { this.invalidReason = signal(activityModel.invalidReason); this.variables = signal(activityModel.variables, {equal: _.isEqual}); this.displayName = computed(() => this.rendering().name || this.def.displayName); + this.executionInfo = signal(activityModel.executionInfo); } update(activityModel: ActivityModel) { @@ -293,6 +307,7 @@ export class Activity { this.inTypePreview.set(activityModel.inTypePreview); this.invalidReason.set(activityModel.invalidReason); this.variables.set(activityModel.variables); + this.executionInfo.set(activityModel.executionInfo); } prepareConfig(config: ActivityConfigModel) { diff --git a/src/app/plugins/workflows/models/workflows.model.ts b/src/app/plugins/workflows/models/workflows.model.ts index af4066c4..1cfbe984 100644 --- a/src/app/plugins/workflows/models/workflows.model.ts +++ b/src/app/plugins/workflows/models/workflows.model.ts @@ -40,6 +40,21 @@ export enum SessionModelType { JOB_SESSION = 'JOB_SESSION' } +export enum ExecutionState { + SUBMITTED = 'SUBMITTED', + EXECUTING = 'EXECUTING', + AWAIT_PROCESSING = 'AWAIT_PROCESSING', + PROCESSING_RESULT = 'PROCESSING_RESULT', + DONE = 'DONE' +} + +export enum ExecutorType { + DEFAULT = 'DEFAULT', + FUSION = 'FUSION', + PIPE = 'PIPE', + VARIABLE_WRITER = 'VARIABLE_WRITER' +} + export type SettingsModel = Record; export type Variables = Record; @@ -72,6 +87,7 @@ export interface TypePreviewModel { fields: FieldDefinition[]; } + export interface ActivityModel { type: string; id: string; @@ -82,6 +98,15 @@ export interface ActivityModel { inTypePreview?: TypePreviewModel[]; invalidReason?: string; variables?: Variables; + executionInfo?: ExecutionInfoModel; +} + +export interface ExecutionInfoModel { + totalDuration: number; + durations: Record; + activities: string[]; + executorType: ExecutorType; + state: ExecutionState; } export interface SessionModel { diff --git a/src/app/plugins/workflows/services/checkpoint-viewer.service.ts b/src/app/plugins/workflows/services/checkpoint-viewer.service.ts index 9dbb4c4d..8db5ff8d 100644 --- a/src/app/plugins/workflows/services/checkpoint-viewer.service.ts +++ b/src/app/plugins/workflows/services/checkpoint-viewer.service.ts @@ -3,6 +3,7 @@ import {WorkflowsWebSocketService} from './workflows-websocket.service'; import {CheckpointDataResponse, ResponseType, WsResponse} from '../models/ws-response.model'; import {Result} from '../../../components/data-view/models/result-set.model'; import {Activity} from '../components/workflow-viewer/workflow'; +import {ActivityState} from '../models/workflows.model'; @Injectable() export class CheckpointViewerService { @@ -29,16 +30,29 @@ export class CheckpointViewerService { this.showModal.set(visible); if (!visible) { this.selectedActivity.set(null); + this.selectedOutput.set(null); this.result.set(null); } } - getCheckpoint(activity: Activity, outputIndex: number) { + private getCheckpoint(activity: Activity, outputIndex: number) { this.selectedActivity.set(activity); this.selectedOutput.set(outputIndex); this.isLoading.set(true); this._websocket.getCheckpoint(activity.id, outputIndex); + } + + openCheckpoint(activity: Activity, outputIndex: number) { + if (activity.state() === ActivityState.FINISHED) { + this.selectedActivity.set(activity); + this.selectedOutput.set(outputIndex); + } else if (activity.state() === ActivityState.SAVED) { + this.getCheckpoint(activity, outputIndex); + } else { + return; + } + this.setModal(true); } private handleWsMsg(msg: { response: WsResponse; isDirect: boolean }) { @@ -56,4 +70,11 @@ export class CheckpointViewerService { materializeCheckpoints(activityId: string) { this._websocket.execute(activityId); } + + materialize() { + if (this.selectedActivity()) { + this._websocket.execute(this.selectedActivity().id); + this.setModal(false); + } + } } diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index 2613a879..1a15c867 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -9,6 +9,7 @@ import { AccordionComponent, AccordionItemComponent, BadgeComponent, + BgColorDirective, BorderDirective, ButtonCloseDirective, ButtonDirective, @@ -28,6 +29,7 @@ import { FormControlDirective, FormDirective, FormFeedbackComponent, + FormFloatingDirective, FormLabelDirective, FormSelectDirective, GutterDirective, @@ -47,6 +49,7 @@ import { OffcanvasHeaderComponent, OffcanvasTitleDirective, OffcanvasToggleDirective, + PopoverDirective, RowComponent, RowDirective, SidebarBrandComponent, @@ -60,7 +63,8 @@ import { TableColorDirective, TableDirective, TabPaneComponent, - TemplateIdDirective + TemplateIdDirective, + TooltipDirective } from '@coreui/angular'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {ActivityComponent} from './components/workflow-viewer/editor/activity/activity.component'; @@ -151,6 +155,10 @@ import {EntitySettingComponent} from './components/workflow-viewer/right-menu/ac RowDirective, TableDirective, TableColorDirective, + TooltipDirective, + PopoverDirective, + FormFloatingDirective, + BgColorDirective, ], declarations: [ WorkflowViewerComponent, From 9d8c5b7d1254bb074c4b2dd0adfbc3d2bd941e8e Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Thu, 16 Jan 2025 14:12:58 +0100 Subject: [PATCH 22/68] Minor visual changes --- .../activity-port.component.html | 37 ++++++++----- .../activity-port.component.scss | 52 ++++++++++++++----- .../activity-port/activity-port.component.ts | 33 +++++------- .../editor/activity/activity.component.html | 17 +++--- .../editor/activity/activity.component.scss | 16 +----- .../editor/activity/activity.component.ts | 16 +++--- .../workflow-viewer/editor/workflow-editor.ts | 12 +++-- .../left-menu/left-menu.component.html | 19 ++++--- .../workflow-viewer.component.html | 23 +++++--- .../components/workflow-viewer/workflow.ts | 27 ++++++++-- .../workflows-dashboard.component.html | 40 +++++++++----- src/app/plugins/workflows/workflows.module.ts | 38 ++++++++++---- 12 files changed, 210 insertions(+), 120 deletions(-) diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html index 0fd9fd37..3f91dec9 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html @@ -1,15 +1,26 @@ -@switch (data.controlType) { - @case ('in') { - - } - @case ('success') { - - } - @case ('fail') { - - } - @default { +
+ @switch (data.controlType) { + @case ('in') { + + } + @case ('success') { + + } + @case ('fail') { + + } + @default { - } + } -} + } +
diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss index 333b8682..416b58ed 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss @@ -2,17 +2,17 @@ @import "../vars"; :host { - display: flex; - justify-content: center; - align-items: center; cursor: pointer; vertical-align: middle; z-index: 2; box-sizing: border-box; - &:hover { - background: #ddd; - } +} + +.port-wrapper { + display: flex; + justify-content: center; + align-items: center; &.control-port { width: $control-port-size; @@ -23,13 +23,41 @@ &.data-port { width: $data-port-size; height: $data-port-size; - background: var(--cui-dark); border-radius: $data-port-size / 2; - } + background: var(--cui-dark); + border: 2px solid var(--cui-dark); + + &.out-port.state-finished { + background: repeating-linear-gradient( + 135deg, + var(--cui-dark), + var(--cui-dark) 3px, + var(--cui-secondary) 3px, + var(--cui-secondary) 6px + ); + + &:hover { + background: repeating-linear-gradient( + 135deg, + var(--cui-secondary), + var(--cui-secondary) 3px, + var(--cui-light) 3px, + var(--cui-light) 6px + ) + } + } - &.is-optional { - background: var(--cui-secondary); + &.is-optional { + background: var(--cui-secondary); + &:hover { + background: var(--cui-light); + } + } + + &:hover { + background: var(--cui-secondary); + } } &.success-control { @@ -51,7 +79,7 @@ } &.in-control { - background: var(--cui-blue); + background: var(--cui-dark); .port-icon { font-size: $control-port-size - 5px; @@ -62,4 +90,4 @@ .port-icon { color: var(--cui-light) } -} \ No newline at end of file +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts index 47803949..7370000f 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts @@ -1,22 +1,30 @@ -import {ChangeDetectorRef, Component, ElementRef, HostBinding, Input, OnChanges, OnInit, signal} from '@angular/core'; +import {ChangeDetectorRef, Component, ElementRef, HostBinding, Input, OnChanges, Signal, signal} from '@angular/core'; import {ClassicPreset} from 'rete'; import {InPortDef, OutPortDef, portTypeToDataModel} from '../../../../models/activity-registry.model'; import {DataModel} from '../../../../../../models/ui-request.model'; +import {ActivityState} from '../../../../models/workflows.model'; +import {NgClass} from '@angular/common'; @Component({ selector: 'app-activity-port', standalone: true, - imports: [], + imports: [ + NgClass + ], templateUrl: './activity-port.component.html', styleUrl: './activity-port.component.scss' }) -export class ActivityPortComponent implements OnInit, OnChanges { +export class ActivityPortComponent implements OnChanges { @Input() data!: ActivityPort; @Input() rendered!: any; @HostBinding('title') get title() { if (this.data.isControl) { return this.data.controlType + ' control'; + } else if (!this.data.isInput && this.data.activityState() === 'FINISHED') { + return this.data.dataModel() + ' (not materialized)'; + } else if (this.data.portDef['isOptional']) { + return this.data.dataModel() + ' (optional)'; } return this.data.dataModel(); } @@ -25,21 +33,6 @@ export class ActivityPortComponent implements OnInit, OnChanges { this.cdr.detach(); } - ngOnInit(): void { - if (this.data.controlType === 'success') { - this.elementRef.nativeElement.classList.add('success-control', 'control-port'); - } else if (this.data.controlType === 'fail') { - this.elementRef.nativeElement.classList.add('fail-control', 'control-port'); - } else if (this.data.controlType === 'in') { - this.elementRef.nativeElement.classList.add('in-control', 'control-port'); - } else { - this.elementRef.nativeElement.classList.add('data-port'); - if (this.data.portDef['isOptional']) { - this.elementRef.nativeElement.classList.add('is-optional'); - } - } - } - ngOnChanges(): void { this.cdr.detectChanges(); requestAnimationFrame(() => this.rendered()); @@ -51,7 +44,9 @@ export class ActivityPort extends ClassicPreset.Socket { public readonly isControl: boolean; public readonly dataModel = signal(null); // TODO: track data model state in workflow itself - constructor(public readonly portDef: InPortDef | OutPortDef, public readonly isInput: boolean, public readonly controlType: 'success' | 'fail' | 'in' | null = null) { + constructor(public readonly portDef: InPortDef | OutPortDef, public readonly isInput: boolean, + public readonly controlType: 'success' | 'fail' | 'in' | null, + public readonly activityState: Signal) { super(''); this.isControl = controlType != null; if (!this.isControl) { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html index e0aae9e3..28b45492 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html @@ -40,12 +40,14 @@
{{ data.commonType()
-
+
@@ -53,18 +55,17 @@
{{ data.commonType()

{{ data.displayName() }}

-
- - -
-
+
-
    + +
    @for (activity of filteredList; track activity.type) { -
  • - +
    @@ -49,17 +52,17 @@
    {{ activity.displayName }}
    -
    • +
    } -
+
-
+

{{ openedActivityDef.displayName }}

-
+
diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html index cc786eec..c3a66c72 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -71,7 +71,8 @@
- + @@ -110,22 +111,30 @@
Workflow Variables
- +
- + -
{{ _checkpoint.selectedActivity().displayName() }}: Output {{ _checkpoint.selectedOutput() }}
+
{{ _checkpoint.selectedActivity().displayName() }}: + Output {{ _checkpoint.selectedOutput() }}
 @if (_checkpoint.result() || _checkpoint.isLoading()) { +
+ +
-

Only the first {{ _checkpoint.limit() }} of {{ _checkpoint.totalCount() }} elements are shown.

+

Only the first {{ _checkpoint.limit() }} of {{ _checkpoint.totalCount() }} elements are + shown.

 {{ _checkpoint.selectedActivity().displayName() }}: Output {{ _c @if (!_checkpoint.result() && !_checkpoint.isLoading()) { - + } diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts index bd9032e1..55548b92 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts @@ -1,4 +1,19 @@ -import {ActivityConfigModel, ActivityModel, ActivityState, CommonType, EdgeModel, EdgeState, ExecutionInfoModel, RenderModel, SettingsModel, TypePreviewModel, Variables, WorkflowConfigModel, WorkflowModel, WorkflowState} from '../../models/workflows.model'; +import { + ActivityConfigModel, + ActivityModel, + ActivityState, + CommonType, + EdgeModel, + EdgeState, + ExecutionInfoModel, + RenderModel, + SettingsModel, + TypePreviewModel, + Variables, + WorkflowConfigModel, + WorkflowModel, + WorkflowState +} from '../../models/workflows.model'; import {computed, Signal, signal, WritableSignal} from '@angular/core'; import * as _ from 'lodash'; import {Subject} from 'rxjs'; @@ -45,9 +60,12 @@ export class Workflow { this.config = signal(workflowModel.config, {equal: _.isEqual}); this.variables = signal(workflowModel.variables, {equal: _.isEqual}); - this.hasUnfinishedActivities = computed(() => [...this.activities.values()].some( - a => a.state() !== ActivityState.FINISHED && a.state() !== ActivityState.SAVED - )); + this.hasUnfinishedActivities = computed(() => { + console.log('recomputing unfinished activities', this.activities.values()); + return [...this.activities.values()].some( + a => a.state() !== ActivityState.FINISHED && a.state() !== ActivityState.SAVED + ); + }); } getActivities() { @@ -433,6 +451,7 @@ export class Setting { target = target.startsWith('/') ? target : '/' + target; if (this.isValidTargetPointer(target)) { this.references.push(VariableReference.of(target, variablePointer)); + console.log('added reference', this.references[this.references.length - 1]); return true; } return false; diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html index aec9b148..c36b1e84 100644 --- a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html @@ -34,11 +34,14 @@

Workflow Dashboard

Stored Workflows ({{ workflowDefsCount }})

@for (group of sortedGroups; track group.groupName) { -
-

{{ group.groupName }} ({{ group.defs.length }})

- + +

+ + {{ group.groupName }} ({{ group.defs.length }}) +

@@ -56,13 +59,15 @@
{{ def.def.name }}
- - @@ -76,7 +81,8 @@
{{ def.def.name }}
- @@ -85,15 +91,18 @@
{{ def.def.name }}
 - - - @@ -116,7 +125,8 @@
{{ def.def.name }}
{{ version.value.creationTime | date:'short' }} {{ version.value.description }} - + } @@ -149,9 +159,11 @@

Active Sessions

SessionId: {{ session.value.sessionId }}
State: {{ session.value.state }}
- Connected Users: {{ session.value.connectionCount }}
+ Connected + Users: {{ session.value.connectionCount }}
-
@@ -186,4 +198,4 @@
Delete Workflow
- \ No newline at end of file + diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index 1a15c867..98eb6eb4 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -58,6 +58,7 @@ import { SidebarHeaderComponent, SidebarNavComponent, SidebarToggleDirective, + SpinnerComponent, TabContentComponent, TabContentRefDirective, TableColorDirective, @@ -71,20 +72,38 @@ import {ActivityComponent} from './components/workflow-viewer/editor/activity/ac import {EdgeComponent} from './components/workflow-viewer/editor/edge/edge.component'; import {RightMenuComponent} from './components/workflow-viewer/right-menu/right-menu.component'; import {ComponentsModule} from '../../components/components.module'; -import {ActivityConfigEditorComponent} from './components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component'; -import {WorkflowConfigEditorComponent} from './components/workflow-viewer/workflow-config-editor/workflow-config-editor.component'; +import { + ActivityConfigEditorComponent +} from './components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component'; +import { + WorkflowConfigEditorComponent +} from './components/workflow-viewer/workflow-config-editor/workflow-config-editor.component'; import {LeftMenuComponent} from './components/workflow-viewer/left-menu/left-menu.component'; import {ActivityHelpComponent} from './components/workflow-viewer/activity-help/activity-help.component'; import {MarkdownComponent} from 'ngx-markdown'; -import {ActivitySettingsComponent} from './components/workflow-viewer/right-menu/activity-settings/activity-settings.component'; -import {IntSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component'; -import {StringSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component'; +import { + ActivitySettingsComponent +} from './components/workflow-viewer/right-menu/activity-settings/activity-settings.component'; +import { + IntSettingComponent +} from './components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component'; +import { + StringSettingComponent +} from './components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component'; import {CdkDrag, CdkDragPreview, CdkDropList} from '@angular/cdk/drag-drop'; import {AngularMultiSelectModule} from 'angular2-multiselect-dropdown'; -import {CheckpointViewerComponent} from './components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component'; -import {BooleanSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component'; -import {DoubleSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component'; -import {EntitySettingComponent} from './components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component'; +import { + CheckpointViewerComponent +} from './components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component'; +import { + BooleanSettingComponent +} from './components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component'; +import { + DoubleSettingComponent +} from './components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component'; +import { + EntitySettingComponent +} from './components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component'; @NgModule({ imports: [ @@ -159,6 +178,7 @@ import {EntitySettingComponent} from './components/workflow-viewer/right-menu/ac PopoverDirective, FormFloatingDirective, BgColorDirective, + SpinnerComponent, ], declarations: [ WorkflowViewerComponent, From 7f0a8f39348a51de59c037e1a58994b922c5be00 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Thu, 16 Jan 2025 18:31:40 +0100 Subject: [PATCH 23/68] More visual improvements --- .../json/json-elem/json-elem.component.ts | 17 +- .../activity-port.component.scss | 24 +- .../editor/activity/activity.component.html | 4 +- .../editor/activity/activity.component.ts | 1 + .../left-menu/left-menu.component.html | 2 +- .../activity-config-editor.component.html | 8 +- .../activity-config-editor.component.scss | 2 +- .../activity-exec-stats.component.html | 70 ++++++ .../activity-exec-stats.component.scss} | 0 .../activity-exec-stats.component.ts | 18 ++ .../activity-settings.component.html | 236 +++++++++--------- .../activity-settings.component.scss | 3 +- .../checkpoint-viewer.component.html | 27 -- .../checkpoint-viewer.component.ts | 36 --- .../right-menu/right-menu.component.html | 82 ++---- .../right-menu/right-menu.component.ts | 2 +- .../workflow-viewer.component.ts | 15 +- .../components/workflow-viewer/workflow.ts | 52 ++-- .../workflows-dashboard.component.ts | 10 +- .../workflows/models/workflows.model.ts | 8 + .../services/workflows-websocket.service.ts | 1 - src/app/plugins/workflows/workflows.module.ts | 38 +-- 22 files changed, 330 insertions(+), 326 deletions(-) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html rename src/app/plugins/workflows/components/workflow-viewer/right-menu/{checkpoint-viewer/checkpoint-viewer.component.scss => activity-exec-stats/activity-exec-stats.component.scss} (100%) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.ts delete mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.html delete mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts diff --git a/src/app/components/json/json-elem/json-elem.component.ts b/src/app/components/json/json-elem/json-elem.component.ts index c79f344b..a6c2ae40 100644 --- a/src/app/components/json/json-elem/json-elem.component.ts +++ b/src/app/components/json/json-elem/json-elem.component.ts @@ -1,13 +1,4 @@ -import { - ChangeDetectionStrategy, - Component, - EventEmitter, - Input, - OnChanges, - OnInit, - Output, - SimpleChanges, -} from '@angular/core'; +import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges,} from '@angular/core'; import {Info, Pair, Type} from '../json-editor.component'; @Component({ @@ -44,7 +35,6 @@ export class JsonElemComponent implements OnInit, OnChanges { childDupStatus = []; ngOnChanges(changes: SimpleChanges) { - console.log(changes); } ngOnInit(): void { @@ -176,7 +166,6 @@ export class JsonElemComponent implements OnInit, OnChanges { return; } const keys = (this.el.value as Pair[]).map(e => e.key); - console.log(keys); const temp = []; const copy = keys; @@ -191,14 +180,10 @@ export class JsonElemComponent implements OnInit, OnChanges { temp.push(key); status.push(copy.includes(key)); } - console.log(copy); - console.log(temp); - console.log(status); count++; } this.childDupStatus = status; - console.log(this.childDupStatus); } diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss index 416b58ed..c967ef55 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss @@ -18,6 +18,10 @@ width: $control-port-size; height: $control-port-size; border-radius: 3px; + + &:hover { + filter: brightness(120%); + } } &.data-port { @@ -29,20 +33,20 @@ &.out-port.state-finished { background: repeating-linear-gradient( - 135deg, - var(--cui-dark), - var(--cui-dark) 3px, - var(--cui-secondary) 3px, - var(--cui-secondary) 6px + 135deg, + var(--cui-dark), + var(--cui-dark) 3px, + var(--cui-secondary) 3px, + var(--cui-secondary) 6px ); &:hover { background: repeating-linear-gradient( - 135deg, - var(--cui-secondary), - var(--cui-secondary) 3px, - var(--cui-light) 3px, - var(--cui-light) 6px + 135deg, + var(--cui-secondary), + var(--cui-secondary) 3px, + var(--cui-light) 3px, + var(--cui-light) 6px ) } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html index 28b45492..5bec3516 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html @@ -11,8 +11,8 @@
-
- +
+ {{ data.invalidReason() }}
{{ data.commonType() }}
diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts index 0c230c3d..7b3e6bdf 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts @@ -125,6 +125,7 @@ export class ActivityNode extends ClassicPreset.Node { readonly state = this.activity.state.asReadonly(); readonly progress = this.activity.progress.asReadonly(); readonly commonType = this.activity.commonType; + readonly invalidReason = this.activity.invalidReason; readonly controlInput: ClassicPreset.Input; readonly dataInputs: { [key: string]: ClassicPreset.Input } = {}; readonly controlOutputs: { [key: string]: ClassicPreset.Output }; diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html index 39333432..57f6bbf1 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html @@ -30,7 +30,7 @@

Add Activity

@for (activity of filteredList; track activity.type) { -
+
diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html index 45c2aad1..0e7df675 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html @@ -1,4 +1,4 @@ - +
@if (hasConfigChanged()) { @@ -14,12 +14,12 @@
-
+
- + + - diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.scss index 0c92655b..2eb5dc10 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.scss @@ -1,4 +1,4 @@ .config-inputs { overflow-y: auto; - max-height: calc(100vh - 415px); // TODO: find solution without hardcoded height, or at least consider activity name length + flex-basis: 0; } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html new file mode 100644 index 00000000..5d250cb5 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html @@ -0,0 +1,70 @@ +

Activity ID: {{ activity().id }}

+ + + +@if (activity().executionInfo()) { +
{{ activity().executionInfo().executorType }} Executor
+ + +

Execution State: {{ activity().executionInfo().state }}

+ @if (activity().executionInfo().activities.length > 1) { +

Activities:

+
    +
  • + {{ activity }} +
    • +
+ } + + @if (activity().error()) { +

Error: {{ activity().error().message }}

+ } + +
Duration
+ + + + + + + + + @for (duration of orderedDurations(); track duration[0]) { + + + + + } + +
PhaseTime (ms)
{{ duration[0] }}{{ duration[1] }}
+

Total Duration: {{ activity().executionInfo().totalDuration }} ms

+ + + + + + + @if (activity().logMessages().length > 0) { +
Log
+ + + + + + + + + + @for (logMsg of activity().logMessages(); track $index) { + + + + + + } + +
LevelTime (ms)Message
{{ logMsg.level }}{{ logMsg.timeMs }}{{ logMsg.msg }}
+ } +} @else { +

Not yet executed.

+} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.scss similarity index 100% rename from src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.scss rename to src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.scss diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.ts new file mode 100644 index 00000000..a7b26a12 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.ts @@ -0,0 +1,18 @@ +import {Component, computed, input} from '@angular/core'; +import {Activity} from '../../workflow'; +import {ExecutionState} from '../../../../models/workflows.model'; + +@Component({ + selector: 'app-activity-exec-stats', + templateUrl: './activity-exec-stats.component.html', + styleUrl: './activity-exec-stats.component.scss' +}) +export class ActivityExecStatsComponent { + activity = input.required(); + + orderedDurations = computed(() => { + const durations = this.activity().executionInfo().durations; + return [ExecutionState.SUBMITTED, ExecutionState.EXECUTING, ExecutionState.AWAIT_PROCESSING, ExecutionState.PROCESSING_RESULT] + .map(state => [state, durations[state] || 0]); + }); +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html index 0e42ff0d..59029eb4 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html @@ -1,133 +1,139 @@ @if (activeSettingGroup()) { -
+
- +
-
- @if (hasSettingsChanged()) { - Discard - - } -
+ -
- -
+
+ @if (hasSettingsChanged()) { + Discard + + } +
-
+
+ +
+ +
- -
- @for (subgroup of activeSettingGroup().subgroups; track activity().id + subgroup.key) { - -
{{ subgroup.displayName }}
- -
    - @for (setting of subgroup.settings; track setting.key) { -
  • -
    -
    {{ setting.displayName }} - ({{ setting.key }}: {{ setting.type }}) -
    + +
    +

    + {{ activity().invalidReason() }} +

    + @for (subgroup of activeSettingGroup().subgroups; track activity().id + subgroup.key) { + +
    {{ subgroup.displayName }}
    + +
      + @for (setting of subgroup.settings; track setting.key) { +
    • +
      +
      {{ setting.displayName }} + ({{ setting.key }}: {{ setting.type }}) +
      - -
      -

      {{ setting.shortDescription }}

      -
      - - + +
      +

      {{ setting.shortDescription }}

      +
      + + -
        - @for (ref of editableReferences().get( setting.key ); track ref.target) { -
      • -
        - {{ ref.varRef }} - - {{ ref.target }} -
        - +
        • + } +
      +
      + + + / + + + + -
      • - } -
    -
    - - - / - - - - - -
    - -     -
    - @switch (setting.type) { - @case (SettingType.INT) { - - - } - @case (SettingType.STRING) { - - - } - @case (SettingType.BOOLEAN) { - +
    + + +
+ @switch (setting.type) { + @case (SettingType.INT) { + - - } - @case (SettingType.DOUBLE) { - - - } - @case (SettingType.ENTITY) { - - + + } + @case (SettingType.STRING) { + + + } + @case (SettingType.BOOLEAN) { + + + } + @case (SettingType.DOUBLE) { + + + } + @case (SettingType.ENTITY) { + + + } + @default { +

unknown setting type

+ } } - @default { -

unknown setting type

- } - } - - } - - - - } + + } + + + + } +
} @else { diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.scss index 47d34368..0dbc9090 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.scss @@ -1,5 +1,4 @@ .setting-group { overflow-y: auto; - //max-height: 100%; - max-height: calc(100vh - 410px); // TODO: find solution without hardcoded height, or at least consider activity name length + flex-basis: 0; } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.html deleted file mode 100644 index 78f44cf8..00000000 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.html +++ /dev/null @@ -1,27 +0,0 @@ -@if (activity() && isExecuted()) { - - @if (activity().def.outPorts.length > 0) { - - @if (isFinished()) { -

The outputs of this activity are currently not materialized

- - } @else { -
Outputs
-
    - @for (output of activity().def.outPorts; track $index) { -
  • - -
    • - } -
- } - } @else { -

This activity has no outputs.

- } - - -} @else { -

Execute the activity to see its outputs.

-} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts deleted file mode 100644 index a38665f8..00000000 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -import {Component, computed, input, OnInit, Signal} from '@angular/core'; -import {Activity} from '../../workflow'; -import {CheckpointViewerService} from '../../../../services/checkpoint-viewer.service'; - -@Component({ - selector: 'app-checkpoint-viewer', - templateUrl: './checkpoint-viewer.component.html', - styleUrl: './checkpoint-viewer.component.scss' -}) -export class CheckpointViewerComponent implements OnInit { - - activity = input.required(); - isQueryable = input.required(); - - isExecuted: Signal; - isFinished: Signal; - selectedOutput = 0; - - constructor(readonly _checkpoint: CheckpointViewerService) { - } - - ngOnInit(): void { - this.isExecuted = computed(() => this.activity().state() === 'FINISHED' || this.activity().state() === 'SAVED'); - this.isFinished = computed(() => this.activity().state() === 'FINISHED'); - } - - - showOutput(i: number) { - this.selectedOutput = i; - this._checkpoint.openCheckpoint(this.activity(), this.selectedOutput); - } - - materializeCheckpoints() { - this._checkpoint.materializeCheckpoints(this.activity().id); - } -} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html index 1713009c..eb0cdbb2 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html @@ -23,9 +23,9 @@

{{ activity().displayName() }}

-
- @switch (activeTab()) { - @case ("settings") { - - } - @case ("variables") { - -

Available variables after last execution:

- @for (entry of activity().variables() | keyvalue; track activity().id + entry.key) { -
{{ entry.key }}
- - } - } - @case ("outputs") { - + @switch (activeTab()) { + @case ("settings") { + + } + @case ("variables") { + +

Available variables after last execution:

+ @for (entry of activity().variables() | keyvalue; track activity().id + entry.key) { +
{{ entry.key }}
+ } - @case ("execution") { -
Config
- - -
Execution Stats
-

Activity ID: {{ activity().id }}

-

Activity State: {{ activity().state() }}

- - @if (activity().executionInfo()) { -

Execution State: {{ activity().executionInfo().state }}

-

Executor: {{ activity().executionInfo().executorType }}

-

Total Duration: {{ activity().executionInfo().totalDuration }} ms

-

Activities: {{ activity().executionInfo().activities }}

- - - - - - - - - - @for (state of activity().executionInfo().durations | keyvalue; track state.key) { - - - - - } - -
PhaseTime (ms)
{{ state.key }}{{ state.value }}
- - } + } + @case ("config") { + + } + @case ("execution") { + - } - @case ("help") { - - } } -
+ @case ("help") { + + } + }
diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts index a227e915..3ffb5a81 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts @@ -8,7 +8,7 @@ import {ActivityConfigEditorComponent} from './activity-config-editor/activity-c import {ToasterService} from '../../../../../components/toast-exposer/toaster.service'; -export type MenuTabs = 'settings' | 'variables' | 'outputs' | 'execution' | 'help'; +export type MenuTabs = 'settings' | 'variables' | 'config' | 'execution' | 'help'; @Component({ selector: 'app-right-menu', diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index 43dcbddc..63cc3764 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -1,4 +1,4 @@ -import {Component, computed, ElementRef, EventEmitter, Injector, Input, OnDestroy, OnInit, Output, signal, Signal, ViewChild} from '@angular/core'; +import {Component, computed, effect, ElementRef, EventEmitter, Injector, Input, OnDestroy, OnInit, Output, signal, Signal, ViewChild} from '@angular/core'; import {WorkflowsService} from '../../services/workflows.service'; import {ToasterService} from '../../../../components/toast-exposer/toaster.service'; import {WorkflowEditor} from './editor/workflow-editor'; @@ -13,6 +13,7 @@ import {WorkflowConfigEditorComponent} from './workflow-config-editor/workflow-c import {WorkflowsWebSocketService} from '../../services/workflows-websocket.service'; import {JsonEditorComponent} from '../../../../components/json/json-editor.component'; import {CheckpointViewerService} from '../../services/checkpoint-viewer.service'; +import {Router} from '@angular/router'; @Component({ selector: 'app-workflow-viewer', @@ -52,8 +53,16 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { private readonly _workflows: WorkflowsService, private readonly _toast: ToasterService, private readonly _websocket: WorkflowsWebSocketService, + private readonly _router: Router, readonly _checkpoint: CheckpointViewerService, private injector: Injector) { + + effect(() => { + if (!this._websocket.connected() && this.workflow) { + this._toast.warn('Lost the connection to the workflow session'); + this._router.navigate(['/views/workflows/dashboard']); + } + }); } ngOnInit(): void { @@ -66,7 +75,7 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { this.editor = new WorkflowEditor(this.injector, el, this._workflows, !this.isEditable); this._workflows.getActiveWorkflow(this.sessionId).subscribe({ next: res => { - this.workflow = new Workflow(res, this.registry); + this.workflow = new Workflow(res, this.registry, this.injector); this.editor.initialize(this.workflow); this._websocket.initWebSocket(this.sessionId); this._websocket.onMessage().subscribe(msg => this.handleWsMsg(msg)); @@ -127,7 +136,7 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { )); this.subscriptions.add(this.editor.onOpenActivitySettings().pipe( filter(activityId => - !this.openedActivity() || (activityId !== this.openedActivity().id && this.rightMenu.canSafelyNavigate())), + !this.openedActivity() || ((activityId !== this.openedActivity().id || !this.rightMenu.visible()) && this.rightMenu.canSafelyNavigate())), switchMap(activityId => this._workflows.getActivity(this.sessionId, activityId)), tap(activityModel => { this.workflow.updateOrCreateActivity(activityModel); diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts index 55548b92..036ca6a9 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts @@ -1,24 +1,10 @@ -import { - ActivityConfigModel, - ActivityModel, - ActivityState, - CommonType, - EdgeModel, - EdgeState, - ExecutionInfoModel, - RenderModel, - SettingsModel, - TypePreviewModel, - Variables, - WorkflowConfigModel, - WorkflowModel, - WorkflowState -} from '../../models/workflows.model'; -import {computed, Signal, signal, WritableSignal} from '@angular/core'; +import {ActivityConfigModel, ActivityModel, ActivityState, CommonType, EdgeModel, EdgeState, errorKey, ErrorVariable, ExecutionInfoModel, RenderModel, SettingsModel, TypePreviewModel, Variables, WorkflowConfigModel, WorkflowModel, WorkflowState} from '../../models/workflows.model'; +import {computed, Injector, Signal, signal, WritableSignal} from '@angular/core'; import * as _ from 'lodash'; import {Subject} from 'rxjs'; import {ActivityDef, ActivityRegistry} from '../../models/activity-registry.model'; import JsonPointer from 'json-pointer'; +import {toSignal} from '@angular/core/rxjs-interop'; export function edgeToString(edge: EdgeModel) { return JSON.stringify({ @@ -52,7 +38,7 @@ export class Workflow { private readonly edgeAddSubject = new Subject<[EdgeModel, WritableSignal]>(); private readonly edgeRemoveSubject = new Subject(); // edgeString - constructor(workflowModel: WorkflowModel, private readonly registry: ActivityRegistry) { + constructor(workflowModel: WorkflowModel, private readonly registry: ActivityRegistry, injector: Injector) { this.state = signal(workflowModel.state); workflowModel.activities.forEach(model => this.activities.set(model.id, new Activity(model, registry.getDef(model.type)))); @@ -60,8 +46,12 @@ export class Workflow { this.config = signal(workflowModel.config, {equal: _.isEqual}); this.variables = signal(workflowModel.variables, {equal: _.isEqual}); + const addActivitySignal = toSignal(this.activityAddSubject, {injector: injector}); + const removeActivitySignal = toSignal(this.activityRemoveSubject, {injector: injector}); + this.hasUnfinishedActivities = computed(() => { - console.log('recomputing unfinished activities', this.activities.values()); + addActivitySignal(); // force recompute when activity is added + removeActivitySignal(); return [...this.activities.values()].some( a => a.state() !== ActivityState.FINISHED && a.state() !== ActivityState.SAVED ); @@ -300,6 +290,8 @@ export class Activity { readonly variables: WritableSignal; readonly displayName: Signal; readonly executionInfo: WritableSignal; + readonly logMessages: Signal; + readonly error: Signal; constructor(activityModel: ActivityModel, def: ActivityDef) { this.type = activityModel.type; @@ -315,6 +307,11 @@ export class Activity { this.variables = signal(activityModel.variables, {equal: _.isEqual}); this.displayName = computed(() => this.rendering().name || this.def.displayName); this.executionInfo = signal(activityModel.executionInfo); + this.logMessages = computed(() => + this.executionInfo().log?.map(m => new LogMessage(m)) + .filter(m => m.activityId === this.id) || [] + ); + this.error = computed(() => this.state() === ActivityState.FAILED && this.variables()[errorKey]); } update(activityModel: ActivityModel) { @@ -500,3 +497,20 @@ export class VariableReference { } } + +export class LogMessage { + activityId: string; + level: 'INFO' | 'WARN' | 'ERROR'; + timeMs: number; + msg: string; + + constructor(rawMessage: string) { + const [activityId, level, timeMs, ...rest] = rawMessage.split('|'); + const msg = rest.join('|'); + this.activityId = activityId; + //@ts-ignore + this.level = level; + this.timeMs = parseInt(timeMs, 10); + this.msg = msg; + } +} diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts index 25ace7a1..8de0f25a 100644 --- a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts @@ -5,6 +5,7 @@ import {LeftSidebarService} from '../../../../components/left-sidebar/left-sideb import {WorkflowsService} from '../../services/workflows.service'; import {SessionModel, WorkflowDefModel} from '../../models/workflows.model'; import {SidebarNode} from '../../../../models/sidebar-node.model'; +import {retry} from 'rxjs'; @Component({ selector: 'app-workflows-dashboard', @@ -34,7 +35,6 @@ export class WorkflowsDashboardComponent implements OnInit, OnDestroy { constructor() { effect(() => { if (this.route()) { - console.log('updating defs'); this.getWorkflowDefs(); this.getSessions(); } @@ -58,7 +58,12 @@ export class WorkflowsDashboardComponent implements OnInit, OnDestroy { } private getWorkflowDefs() { - this._workflows.getWorkflowDefs().subscribe({ + this._workflows.getWorkflowDefs().pipe( + retry({ + count: 30, + delay: 10000 + }) + ).subscribe({ next: res => { this.workflowDefs = res; this.workflowDefsCount = Object.keys(res).length; @@ -87,7 +92,6 @@ export class WorkflowsDashboardComponent implements OnInit, OnDestroy { Object.entries(res).forEach(([key, value]) => { selectedVersion[key] = Math.max(...Object.keys(value.versions).map(versionId => parseInt(versionId, 10))); // TODO: order by creation date }); - console.log('selectedVersions', this.selectedVersion); this.selectedVersion = selectedVersion; } }); diff --git a/src/app/plugins/workflows/models/workflows.model.ts b/src/app/plugins/workflows/models/workflows.model.ts index 1cfbe984..826afc89 100644 --- a/src/app/plugins/workflows/models/workflows.model.ts +++ b/src/app/plugins/workflows/models/workflows.model.ts @@ -57,6 +57,13 @@ export enum ExecutorType { export type SettingsModel = Record; export type Variables = Record; +export const errorKey = '$errorMsg'; + +export interface ErrorVariable { + message: string; + cause?: string; + origin: string; +} export interface EdgeModel { fromId: string; @@ -107,6 +114,7 @@ export interface ExecutionInfoModel { activities: string[]; executorType: ExecutorType; state: ExecutionState; + log: string[]; // activityId|level|time|message } export interface SessionModel { diff --git a/src/app/plugins/workflows/services/workflows-websocket.service.ts b/src/app/plugins/workflows/services/workflows-websocket.service.ts index a612f822..9e864391 100644 --- a/src/app/plugins/workflows/services/workflows-websocket.service.ts +++ b/src/app/plugins/workflows/services/workflows-websocket.service.ts @@ -55,7 +55,6 @@ export class WorkflowsWebSocketService { }, +this._settings.getSetting('reconnection.timeout'));*/ }, complete: () => { - console.log('completed'); this.connected.set(false); this.msgSubject.complete(); } diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index 98eb6eb4..0eff6bcf 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -72,38 +72,20 @@ import {ActivityComponent} from './components/workflow-viewer/editor/activity/ac import {EdgeComponent} from './components/workflow-viewer/editor/edge/edge.component'; import {RightMenuComponent} from './components/workflow-viewer/right-menu/right-menu.component'; import {ComponentsModule} from '../../components/components.module'; -import { - ActivityConfigEditorComponent -} from './components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component'; -import { - WorkflowConfigEditorComponent -} from './components/workflow-viewer/workflow-config-editor/workflow-config-editor.component'; +import {ActivityConfigEditorComponent} from './components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component'; +import {WorkflowConfigEditorComponent} from './components/workflow-viewer/workflow-config-editor/workflow-config-editor.component'; import {LeftMenuComponent} from './components/workflow-viewer/left-menu/left-menu.component'; import {ActivityHelpComponent} from './components/workflow-viewer/activity-help/activity-help.component'; import {MarkdownComponent} from 'ngx-markdown'; -import { - ActivitySettingsComponent -} from './components/workflow-viewer/right-menu/activity-settings/activity-settings.component'; -import { - IntSettingComponent -} from './components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component'; -import { - StringSettingComponent -} from './components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component'; +import {ActivitySettingsComponent} from './components/workflow-viewer/right-menu/activity-settings/activity-settings.component'; +import {IntSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component'; +import {StringSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component'; import {CdkDrag, CdkDragPreview, CdkDropList} from '@angular/cdk/drag-drop'; import {AngularMultiSelectModule} from 'angular2-multiselect-dropdown'; -import { - CheckpointViewerComponent -} from './components/workflow-viewer/right-menu/checkpoint-viewer/checkpoint-viewer.component'; -import { - BooleanSettingComponent -} from './components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component'; -import { - DoubleSettingComponent -} from './components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component'; -import { - EntitySettingComponent -} from './components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component'; +import {BooleanSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component'; +import {DoubleSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component'; +import {EntitySettingComponent} from './components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component'; +import {ActivityExecStatsComponent} from './components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component'; @NgModule({ imports: [ @@ -196,7 +178,7 @@ import { BooleanSettingComponent, DoubleSettingComponent, EntitySettingComponent, - CheckpointViewerComponent + ActivityExecStatsComponent ], exports: [ WorkflowViewerComponent, From 800ccf5114ca8428907e597b3505962cfdc881eb Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Fri, 17 Jan 2025 11:15:39 +0100 Subject: [PATCH 24/68] Add arrow indicator on edges --- .../editor/edge/edge.component.html | 8 +++++-- .../editor/edge/edge.component.scss | 22 ++++++++++++++++--- .../editor/edge/edge.component.ts | 11 +++++----- .../editor/workflow-editor-utils.ts | 9 ++++++++ .../workflow-viewer/editor/workflow-editor.ts | 14 +++++++----- 5 files changed, 48 insertions(+), 16 deletions(-) diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html index 4711bd28..0c5ee81a 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html @@ -1,4 +1,8 @@ - - \ No newline at end of file + +
+ +
\ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss index 5042be4a..6af73c0c 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss @@ -9,15 +9,15 @@ svg { pointer-events: auto; stroke: var(--cui-dark); - &.state-idle { + &.state-IDLE { stroke: var(--cui-dark); } - &.state-active { + &.state-ACTIVE { stroke: var(--cui-success); } - &.state-inactive { + &.state-INACTIVE { stroke: var(--cui-danger); } @@ -30,4 +30,20 @@ svg { stroke: rgba(79, 93, 115, 0.3); } } +} + +#path-label { + position: absolute; + + i { + color: var(--cui-dark); + } + + i.state-ACTIVE { + color: var(--cui-success); + } + + i.state-INACTIVE { + color: var(--cui-danger); + } } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts index 36252244..dab0600e 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts @@ -1,4 +1,4 @@ -import {Component, computed, Input, OnInit, Signal} from '@angular/core'; +import {Component, computed, Input, OnInit, signal, Signal} from '@angular/core'; import {ClassicPreset} from 'rete'; import {ActivityNode, FAIL_CONTROL_KEY, IN_CONTROL_KEY, SUCCESS_CONTROL_KEY} from '../activity/activity.component'; import {EdgeModel, EdgeState} from '../../../../models/workflows.model'; @@ -10,11 +10,12 @@ import {EdgeModel, EdgeState} from '../../../../models/workflows.model'; }) export class EdgeComponent implements OnInit { @Input() data!: Edge; - @Input() start: any; - @Input() end: any; + @Input() start: { x: number; y: number }; + @Input() end: { x: number; y: number }; @Input() path: string; isControl = false; + center: Signal<{ x: number, y: number, angle: number }>; ngOnInit(): void { // @ts-ignore @@ -23,9 +24,8 @@ export class EdgeComponent implements OnInit { } else { this.isControl = this.data.isControl; } + this.center = this.data.center; } - - } export const EDGE_COLOR_MAP = { @@ -39,6 +39,7 @@ export class Edge extends ClassicPreset.Connection readonly edgeColor = computed(() => EDGE_COLOR_MAP[this.state()]); readonly sourceActivityId: string; // activityId readonly targetActivityId: string; // activityId + readonly center = signal({x: 0, y: 0, angle: 0}); constructor(source: N, sourceOutput: keyof N['outputs'], target: N, targetInput: keyof N['inputs'], public readonly isControl: boolean, public readonly state: Signal) { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts index 720b44ba..8c0a16a5 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts @@ -146,6 +146,15 @@ export function canCreateConnection(source: SocketData, target: SocketData, edit return true; } +export function computeCenter(points: { x: number; y: number }[]) { + const [start, end] = points; + return { + x: (start.x + end.x) / 2, + y: (start.y + end.y) / 2, + angle: Math.atan2(end.y - start.y, end.x - start.x) * (180 / Math.PI) + }; +} + function getSuccessors(nodeId: string, connections: Edge[]): string[] | null { const outgoing = connections.filter(c => c.source === nodeId).map(c => c.target); if (outgoing.length === 0) { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts index ad47e074..bdd6021d 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts @@ -15,12 +15,7 @@ import {WorkflowsService} from '../../../services/workflows.service'; import {ActivityRegistry} from '../../../models/activity-registry.model'; import {debounceTime, Subject, Subscription} from 'rxjs'; import {Position} from 'rete-angular-plugin/17/types'; -import { - canCreateConnection, - getContextMenuItems, - getMagneticConnectionProps, - socketsToEdgeModel -} from './workflow-editor-utils'; +import {canCreateConnection, computeCenter, getContextMenuItems, getMagneticConnectionProps, socketsToEdgeModel} from './workflow-editor-utils'; import {Activity, edgeToString, Workflow} from '../workflow'; import {ContextMenuExtra, ContextMenuPlugin} from 'rete-context-menu-plugin'; import {useMagneticConnection} from '../../../../../components/polyalg/polyalg-viewer/magnetic-connection'; @@ -143,6 +138,13 @@ export class WorkflowEditor { } return context; }); + + this.render.addPipe(context => { + if (context.type === 'connectionpath') { + context.data.payload.center?.set(computeCenter(context.data.points)); + } + return context; + }); } async initialize(workflow: Workflow): Promise { From 320d239526fd3bfc0d60468eadcb2a7194e952d2 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Fri, 17 Jan 2025 19:37:49 +0100 Subject: [PATCH 25/68] Add autocomplete to entity-setting, show problems in activities --- .../autocomplete/autocomplete.component.html | 25 ++++++++ .../autocomplete/autocomplete.component.scss | 44 +++++++++++++ .../autocomplete/autocomplete.component.ts | 63 +++++++++++++++++++ src/app/components/components.module.ts | 7 ++- .../editor/activity/activity.component.html | 8 ++- .../editor/activity/activity.component.ts | 14 ++++- .../activity-settings.component.html | 6 +- .../entity-setting.component.html | 26 +++++++- .../entity-setting.component.ts | 36 +++++++++-- .../workflow-viewer.component.ts | 6 +- .../components/workflow-viewer/workflow.ts | 19 ++++-- .../workflows/models/workflows.model.ts | 1 + .../workflows/models/ws-response.model.ts | 2 + .../services/checkpoint-viewer.service.ts | 1 - src/app/plugins/workflows/workflows.module.ts | 4 ++ 15 files changed, 239 insertions(+), 23 deletions(-) create mode 100644 src/app/components/autocomplete/autocomplete.component.html create mode 100644 src/app/components/autocomplete/autocomplete.component.scss create mode 100644 src/app/components/autocomplete/autocomplete.component.ts diff --git a/src/app/components/autocomplete/autocomplete.component.html b/src/app/components/autocomplete/autocomplete.component.html new file mode 100644 index 00000000..e0e7b840 --- /dev/null +++ b/src/app/components/autocomplete/autocomplete.component.html @@ -0,0 +1,25 @@ + + + + + + + +
+ \ No newline at end of file diff --git a/src/app/components/autocomplete/autocomplete.component.scss b/src/app/components/autocomplete/autocomplete.component.scss new file mode 100644 index 00000000..0e3ba36d --- /dev/null +++ b/src/app/components/autocomplete/autocomplete.component.scss @@ -0,0 +1,44 @@ +.ng-autocomplete { + width: 100% !important; + + + .autocomplete-container { + box-shadow: none !important; + border: 1px solid #d8dbe0; + border-radius: 0.25rem; + line-height: 2; + height: auto !important; + } + + .input-container { + height: initial; + line-height: 2; + + input { + background-color: transparent !important; + height: auto !important; + line-height: 1 !important; + padding: 0.25rem 0.5rem !important; + } + } + + .autocomplete-container .suggestions-container ul li a { + padding: 0 0.5em !important; + } + + .input-container input::placeholder { + font-size: 0.765625rem; + } + + /* bootstrap styles */ + .autocomplete-container { + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + } + + .autocomplete-container:focus-within { + border: 1px #8ad4ee solid !important; + border-radius: 0.25rem; + outline: 0 !important; + box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25) !important; + } +} \ No newline at end of file diff --git a/src/app/components/autocomplete/autocomplete.component.ts b/src/app/components/autocomplete/autocomplete.component.ts new file mode 100644 index 00000000..95ff7138 --- /dev/null +++ b/src/app/components/autocomplete/autocomplete.component.ts @@ -0,0 +1,63 @@ +import {Component, EventEmitter, Input, model, Output, ViewEncapsulation} from '@angular/core'; + +/** + * A light-weight wrapper around the ng-autocomplete component. + * Its purpose is to introduce the CoreUI style. + * If more inputs are required, they can be added in the future. + * Also see https://www.npmjs.com/package/angular-ng-autocomplete + */ +@Component({ + selector: 'app-autocomplete', + templateUrl: './autocomplete.component.html', + styleUrl: './autocomplete.component.scss', + encapsulation: ViewEncapsulation.None +}) +export class AutocompleteComponent { + value = model.required(); + + @Input({required: true}) data: any[]; + //@Input({ required: true }) searchKeyword: string; removed, instead we use value() + @Input() placeholder: string; + @Input() notFoundText = 'Not Found'; + @Input() disabled = false; + + @Output() changed = new EventEmitter(); // new output, combines selected and inputChanged + @Output() selected = new EventEmitter(); + @Output() inputChanged = new EventEmitter(); + @Output() inputFocused = new EventEmitter(); + @Output() inputCleared = new EventEmitter(); + @Output() opened = new EventEmitter(); + @Output() closed = new EventEmitter(); + @Output() scrolledToEnd = new EventEmitter(); + + onItemSelected(event: any): void { + this.selected.emit(event); + this.changed.emit(event); + } + + onInputChanged(event: any): void { + this.inputChanged.emit(event); + this.changed.emit(event); + } + + onInputFocused(): void { + this.inputFocused.emit(); + } + + onInputCleared(): void { + this.inputCleared.emit(); + } + + onOpened(): void { + this.opened.emit(); + } + + onClosed(): void { + this.closed.emit(); + } + + onScrolledToEnd(): void { + this.scrolledToEnd.emit(); + } + +} diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index 274c3d54..aa56b38a 100644 --- a/src/app/components/components.module.ts +++ b/src/app/components/components.module.ts @@ -131,6 +131,7 @@ import {PopoverModule} from 'ngx-bootstrap/popover'; import {AlgMetadataComponent} from './polyalg/algnode/alg-metadata/alg-metadata.component'; import {DoubleArgComponent} from './polyalg/controls/double-arg/double-arg.component'; import {WindowArgComponent} from './polyalg/controls/window-arg/window-arg.component'; +import {AutocompleteComponent} from './autocomplete/autocomplete.component'; //import 'hammerjs'; @@ -267,7 +268,8 @@ import {WindowArgComponent} from './polyalg/controls/window-arg/window-arg.compo MagneticConnectionComponent, AlgMetadataComponent, DoubleArgComponent, - WindowArgComponent + WindowArgComponent, + AutocompleteComponent ], exports: [ BreadcrumbComponent, @@ -292,7 +294,8 @@ import {WindowArgComponent} from './polyalg/controls/window-arg/window-arg.compo ReloadButtonComponent, DockerInstanceComponent, AlgViewerComponent, - JsonTextComponent + JsonTextComponent, + AutocompleteComponent ] }) export class ComponentsModule { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html index 5bec3516..06e6eccc 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html @@ -11,13 +11,15 @@
-
- {{ data.invalidReason() }} -
+
{{ data.commonType() }}
diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts index 7b3e6bdf..ae85e574 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts @@ -7,6 +7,7 @@ import {Subject} from 'rxjs'; import {Activity} from '../../workflow'; import {DataModel} from '../../../../../../models/ui-request.model'; import {WorkflowsWebSocketService} from '../../../../services/workflows-websocket.service'; +import {ToasterService} from '../../../../../../components/toast-exposer/toaster.service'; export const stateColors = { @@ -52,7 +53,7 @@ export class ActivityComponent implements OnInit, OnChanges { return this.data.selected; } - constructor(private cdr: ChangeDetectorRef, private _websocket: WorkflowsWebSocketService) { + constructor(private cdr: ChangeDetectorRef, private _websocket: WorkflowsWebSocketService, private _toast: ToasterService) { this.cdr.detach(); } @@ -101,6 +102,15 @@ export class ActivityComponent implements OnInit, OnChanges { this._websocket.updateActivity(this.data.activityId, null, null, this.data.rendering()); } + showProblems() { + if (Object.keys(this.data.invalidSettings()).length > 0) { + this.data.openSettings(); + } + if (this.data.invalidReason()) { + this._toast.warn(this.data.invalidReason(), 'Problem with Activity'); + } + } + sortByIndex< N extends object, T extends KeyValue @@ -126,6 +136,8 @@ export class ActivityNode extends ClassicPreset.Node { readonly progress = this.activity.progress.asReadonly(); readonly commonType = this.activity.commonType; readonly invalidReason = this.activity.invalidReason; + readonly invalidSettings = this.activity.invalidSettings; + readonly hasInvalidSettings = this.activity.hasInvalidSettings; readonly controlInput: ClassicPreset.Input; readonly dataInputs: { [key: string]: ClassicPreset.Input } = {}; readonly controlOutputs: { [key: string]: ClassicPreset.Output }; diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html index 59029eb4..7226e750 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html @@ -33,9 +33,6 @@
-

- {{ activity().invalidReason() }} -

@for (subgroup of activeSettingGroup().subgroups; track activity().id + subgroup.key) {
{{ subgroup.displayName }}
@@ -56,6 +53,9 @@
{{ setting.displayName }}
+

+ {{ activity().invalidSettings()[setting.key] }} +

{{ setting.shortDescription }}

diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html index 2a18fd58..d586c239 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html @@ -1,6 +1,6 @@ - + + +
+ + +
+ +@if (def().dataModel !== DataModel.GRAPH) { +
+ + +
+} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.ts index 4e71e88f..8066ea69 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.ts @@ -1,14 +1,15 @@ -import {Component, computed, EventEmitter, input, model, Output} from '@angular/core'; +import {Component, computed, EventEmitter, inject, input, model, OnInit, Output, signal, Signal} from '@angular/core'; import {SettingDefModel} from '../../../../../models/activity-registry.model'; import {TypePreviewModel} from '../../../../../models/workflows.model'; import {DataModel} from '../../../../../../../models/ui-request.model'; +import {CatalogService} from '../../../../../../../services/catalog.service'; @Component({ selector: 'app-entity-setting', templateUrl: './entity-setting.component.html', styleUrl: './entity-setting.component.scss' }) -export class EntitySettingComponent { +export class EntitySettingComponent implements OnInit { isEditable = input.required(); settingDef = input.required(); inTypePreview = input.required(); // not required for int @@ -16,11 +17,38 @@ export class EntitySettingComponent { @Output() hasChanged = new EventEmitter(); def = computed(() => this.settingDef() as EntitySettingDef); - // TODO: change appearance if isList + protected readonly DataModel = DataModel; + private readonly _catalog = inject(CatalogService); + private readonly changed = signal(false); // dummy signal to trigger recomputation + namespaces: Signal; + names: Signal; + + ngOnInit(): void { + this.namespaces = computed(() => + this._catalog.getNamespaces().filter(ns => ns.dataModel === this.def().dataModel).map(ns => ns.name) + ); + this.names = computed(() => { + this.changed(); + const catalog = this._catalog.listener(); + if (this.value().namespace) { + const namespace = catalog.getNamespaceFromName(this.value().namespace); + if (namespace) { + return catalog.getEntities(namespace.id).map(e => e.name); + } + } + return []; + }); + } + + + valueChanged() { + this.hasChanged.emit(); + this.changed.update(v => !v); + } } interface EntitySettingDef extends SettingDefModel { - dataModel: DataModel; + dataModel: DataModel; // non-null! mustExist: boolean; } diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index 63cc3764..b095d5af 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -59,7 +59,7 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { effect(() => { if (!this._websocket.connected() && this.workflow) { - this._toast.warn('Lost the connection to the workflow session'); + this._toast.error('Lost the connection to the workflow session'); this._router.navigate(['/views/workflows/dashboard']); } }); @@ -179,7 +179,9 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { case ResponseType.STATE_UPDATE: const stateResponse = response as StateUpdateResponse; this.workflow.state.set(stateResponse.workflowState); - if (!(this.workflow.updateActivityStates(stateResponse.activityStates) + if (!(this.workflow.updateActivityStates(stateResponse.activityStates, + stateResponse.activityInvalidReasons, + stateResponse.activityInvalidSettings) && this.workflow.updateEdgeStates(stateResponse.edgeStates))) { this.synchronizeWorkflow(); } diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts index 036ca6a9..1c8165d6 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts @@ -138,13 +138,15 @@ export class Workflow { return true; } - updateActivityStates(activityStates: Record): boolean { + updateActivityStates(activityStates: Record, + invalidReasons: Record, + invalidSettings: Record>): boolean { const missing = new Set(); const remaining = new Set(this.activities.keys()); for (const [id, state] of Object.entries(activityStates)) { const oldState = this.activities.get(id)?.state(); - if (this.updateActivityState(id, state)) { + if (this.updateActivityState(id, state, invalidReasons[id], invalidSettings[id])) { this.activityChangeSubject.next(id); if (state !== oldState) { this.activityDirtySubject.next(id); @@ -243,11 +245,15 @@ export class Workflow { return this.edgeRemoveSubject.asObservable(); } - private updateActivityState(activityId: string, state: ActivityState): boolean { + private updateActivityState(activityId: string, state: ActivityState, invalidReason: string, invalidSettings: Record | undefined): boolean { if (state === 'IDLE') { this.updateActivityProgress(activityId, 0); // reset progress } - return this.applyIfExists(activityId, a => a.state.set(state)); + return this.applyIfExists(activityId, a => { + a.state.set(state); + a.invalidReason.set(invalidReason); + a.invalidSettings.set(invalidSettings || {}); + }); } private updateActivityProgress(activityId: string, progress: number): boolean { @@ -287,6 +293,8 @@ export class Activity { readonly rendering: WritableSignal; readonly inTypePreview: WritableSignal; readonly invalidReason: WritableSignal; + readonly invalidSettings: WritableSignal>; + readonly hasInvalidSettings: Signal; readonly variables: WritableSignal; readonly displayName: Signal; readonly executionInfo: WritableSignal; @@ -304,6 +312,8 @@ export class Activity { this.rendering = signal(activityModel.rendering, {equal: _.isEqual}); this.inTypePreview = signal(activityModel.inTypePreview, {equal: _.isEqual}); this.invalidReason = signal(activityModel.invalidReason); + this.invalidSettings = signal(activityModel.invalidSettings); + this.hasInvalidSettings = computed(() => Object.keys(this.invalidSettings()).length > 0); this.variables = signal(activityModel.variables, {equal: _.isEqual}); this.displayName = computed(() => this.rendering().name || this.def.displayName); this.executionInfo = signal(activityModel.executionInfo); @@ -321,6 +331,7 @@ export class Activity { this.rendering.set(activityModel.rendering); this.inTypePreview.set(activityModel.inTypePreview); this.invalidReason.set(activityModel.invalidReason); + this.invalidSettings.set(activityModel.invalidSettings); this.variables.set(activityModel.variables); this.executionInfo.set(activityModel.executionInfo); } diff --git a/src/app/plugins/workflows/models/workflows.model.ts b/src/app/plugins/workflows/models/workflows.model.ts index 826afc89..e69a5db4 100644 --- a/src/app/plugins/workflows/models/workflows.model.ts +++ b/src/app/plugins/workflows/models/workflows.model.ts @@ -104,6 +104,7 @@ export interface ActivityModel { state?: ActivityState; inTypePreview?: TypePreviewModel[]; invalidReason?: string; + invalidSettings?: Record; variables?: Variables; executionInfo?: ExecutionInfoModel; } diff --git a/src/app/plugins/workflows/models/ws-response.model.ts b/src/app/plugins/workflows/models/ws-response.model.ts index 2bcaa257..e2dc5070 100644 --- a/src/app/plugins/workflows/models/ws-response.model.ts +++ b/src/app/plugins/workflows/models/ws-response.model.ts @@ -46,6 +46,8 @@ export interface StateUpdateResponse extends WsResponse { type: ResponseType.STATE_UPDATE; workflowState: WorkflowState; activityStates: Record; + activityInvalidReasons: Record; + activityInvalidSettings: Record>; edgeStates: EdgeModel[]; } diff --git a/src/app/plugins/workflows/services/checkpoint-viewer.service.ts b/src/app/plugins/workflows/services/checkpoint-viewer.service.ts index 8db5ff8d..9c2c9092 100644 --- a/src/app/plugins/workflows/services/checkpoint-viewer.service.ts +++ b/src/app/plugins/workflows/services/checkpoint-viewer.service.ts @@ -59,7 +59,6 @@ export class CheckpointViewerService { const {response, isDirect} = msg; if (response.type === ResponseType.CHECKPOINT_DATA) { const r = (response as CheckpointDataResponse); - console.log(r); this.result.set(r.result); this.limit.set(r.limit); this.totalCount.set(r.totalCount); diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index 0eff6bcf..2b281043 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -65,6 +65,7 @@ import { TableDirective, TabPaneComponent, TemplateIdDirective, + TextColorDirective, TooltipDirective } from '@coreui/angular'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; @@ -86,6 +87,7 @@ import {BooleanSettingComponent} from './components/workflow-viewer/right-menu/a import {DoubleSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component'; import {EntitySettingComponent} from './components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component'; import {ActivityExecStatsComponent} from './components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component'; +import {AutocompleteLibModule} from 'angular-ng-autocomplete'; @NgModule({ imports: [ @@ -161,6 +163,8 @@ import {ActivityExecStatsComponent} from './components/workflow-viewer/right-men FormFloatingDirective, BgColorDirective, SpinnerComponent, + TextColorDirective, + AutocompleteLibModule, ], declarations: [ WorkflowViewerComponent, From 47331d69ef8de3bfa9d8f27655dcb95b0867994c Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Mon, 20 Jan 2025 13:05:07 +0100 Subject: [PATCH 26/68] Introduce execution monitor and improve UI layout --- .../json-text/json-text.component.html | 2 +- .../json-text/json-text.component.ts | 19 ++- .../workflow-session.component.html | 29 +--- .../editor/activity/activity.component.html | 2 +- .../editor/activity/activity.component.scss | 5 + .../editor/activity/activity.component.ts | 5 +- .../editor/workflow-editor-utils.ts | 2 +- .../workflow-viewer/editor/workflow-editor.ts | 2 +- .../execution-monitor.component.html | 146 ++++++++++++++++++ .../execution-monitor.component.scss | 12 ++ .../execution-monitor.component.ts | 44 ++++++ .../activity-config-editor.component.html | 10 +- .../activity-config-editor.component.ts | 5 +- .../activity-exec-stats.component.html | 24 ++- .../activity-exec-stats.component.ts | 15 +- .../workflow-config-editor.component.html | 63 +++++--- .../workflow-viewer.component.html | 49 ++++-- .../workflow-viewer.component.scss | 20 +++ .../workflow-viewer.component.ts | 57 ++++--- .../components/workflow-viewer/workflow.ts | 33 +++- .../workflows-dashboard.component.html | 2 - .../workflows/models/workflows.model.ts | 18 ++- .../workflows/services/workflows.service.ts | 6 +- src/app/plugins/workflows/workflows.module.ts | 8 +- src/scss/style.scss | 2 +- 25 files changed, 475 insertions(+), 105 deletions(-) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.ts diff --git a/src/app/components/data-view/json-text/json-text.component.html b/src/app/components/data-view/json-text/json-text.component.html index e565e719..0e077303 100644 --- a/src/app/components/data-view/json-text/json-text.component.html +++ b/src/app/components/data-view/json-text/json-text.component.html @@ -1,3 +1,3 @@
- +
diff --git a/src/app/components/data-view/json-text/json-text.component.ts b/src/app/components/data-view/json-text/json-text.component.ts index 6c918437..7c214ffd 100644 --- a/src/app/components/data-view/json-text/json-text.component.ts +++ b/src/app/components/data-view/json-text/json-text.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnInit} from '@angular/core'; +import {Component, computed, input, OnInit, Signal} from '@angular/core'; @Component({ selector: 'app-json-text', @@ -7,18 +7,21 @@ import {Component, Input, OnInit} from '@angular/core'; }) export class JsonTextComponent implements OnInit { - @Input() text?: string; - json: {}; + text = input(); + + private readonly regex = new RegExp('/ObjectId(\d{1,24})/g'); + json: Signal; constructor() { } ngOnInit(): void { - const regex = new RegExp('/ObjectId(\d{1,24})/g'); - if (regex.test(this.text)) { - return; - } - this.json = this.parse(this.text); + this.json = computed(() => { + if (this.regex.test(this.text())) { + return {}; + } + return this.parse(this.text()); + }); } parse(text: string): {} { diff --git a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html index 60756665..3303dd02 100644 --- a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html +++ b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.html @@ -1,24 +1,7 @@ -
-
- - - - - -

{{ session.workflowDef.name }} v{{ session.version }}

- Session ID: {{ sessionId }} -
- -
- - - -
+
+ + + +
diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html index 06e6eccc..420ac6b1 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss index 031b700d..0bce8f02 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss @@ -22,6 +22,11 @@ .activity { box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5); background: var(--cui-light); + + &.is-opened { + box-shadow: 0 0 20px 2px var(--cui-primary); + + } } .status-bar { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts index ae85e574..f694c8fb 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts @@ -73,9 +73,11 @@ export class ActivityComponent implements OnInit, OnChanges { case ActivityState.EXECUTING: return `executing (${Math.floor(this.data.progress() * 100)} %)`; case ActivityState.FINISHED: - return 'finished (no checkpoint)'; + return 'finished (not materialized)'; case ActivityState.SAVED: return 'finished'; + case ActivityState.SKIPPED: + return 'cancelled'; default: return this.data.state().toLowerCase(); } @@ -138,6 +140,7 @@ export class ActivityNode extends ClassicPreset.Node { readonly invalidReason = this.activity.invalidReason; readonly invalidSettings = this.activity.invalidSettings; readonly hasInvalidSettings = this.activity.hasInvalidSettings; + readonly isOpened = this.activity.isOpened; readonly controlInput: ClassicPreset.Input; readonly dataInputs: { [key: string]: ClassicPreset.Input } = {}; readonly controlOutputs: { [key: string]: ClassicPreset.Output }; diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts index 8c0a16a5..a3c4037b 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts @@ -61,7 +61,7 @@ export function socketsToEdgeModel(source: SocketData, target: SocketData, edito export function getContextMenuItems(removeEdgeSubject: Subject, removeActivitySubject: Subject, cloneActivitySubject: Subject): Items { const items: Item[] = [ - {label: 'Print Something', key: '0', handler: () => console.log('something was printed')}, + //{label: 'Print Something', key: '0', handler: () => console.log('something was printed')}, ]; return (context: 'root' | Schemes['Node'] | Schemes['Connection'], plugin: ContextMenuPlugin) => { const area = plugin.parentScope(BaseAreaPlugin); diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts index bdd6021d..41192f97 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts @@ -70,7 +70,7 @@ export class WorkflowEditor { }, }) ); - this.render.addPreset(Presets.contextMenu.setup({delay: 100})); // time in ms for context menu to close + this.render.addPreset(Presets.contextMenu.setup({delay: 200})); // time in ms for context menu to close this.connection.addPreset(() => new ClassicFlow({ canMakeConnection: (from, to): boolean => { diff --git a/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html new file mode 100644 index 00000000..3400fff1 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html @@ -0,0 +1,146 @@ +

execution-monitor works!

+ + + + +
Execution Statistics
+ + + + @if (isLoading()) { +
+ +
+ } @else if (monitor()) { + + + Start Time: + + + {{ monitor().startTime | date:'medium' }} + + + + + Total Duration: + + + {{ monitor().totalDuration }} ms + + + + + Target Activity: + + + {{ monitor().targetActivity }} + + + + + Total Activities: + + + {{ monitor().totalCount }} + + + + + Success / skip / fail: + + + {{ monitor().successCount }} / + {{ monitor().skipCount }} / + {{ monitor().failCount }} + + + +
Activity Count by Executor Type
+ + + + + + + + + @for (entry of monitor().countByExecutorType | keyvalue; track entry.key) { + + + + + } + +
ExecutorActivity Count
{{ entry.key }}{{ entry.value }}
+ +
Submitted Execution Trees
+ + @for (info of monitor().infos; track $index) { + + + + + +
+

+ Tuples written: + {{ info.tuplesWritten }} +

+
Duration
+ + + + + + + + + @for (duration of info.durations |keyvalue; track duration.key) { + + + + + } + +
PhaseTime (ms)
{{ duration.key }}{{ duration.value }}
+ Total Duration: {{ info.totalDuration }} ms + +
Activities in Execution Tree
+
    +
  • + {{ activity }} + +
    • +
+
+ + + } + + + + } @else { +

Workflow has not yet been executed.

+ } + + + + + \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.scss b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.scss new file mode 100644 index 00000000..1022c536 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.scss @@ -0,0 +1,12 @@ +.info-duration { + min-width: 50px !important; + text-align: end; +} + +.remove-padding { + padding: 0 !important; +} + +.accordion-button::after { + margin-left: 30px; +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.ts b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.ts new file mode 100644 index 00000000..f220cbcb --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.ts @@ -0,0 +1,44 @@ +import {Component, computed, EventEmitter, Input, Output, signal} from '@angular/core'; +import {ExecutionMonitorModel} from '../../../models/workflows.model'; +import {WorkflowsService} from '../../../services/workflows.service'; + +@Component({ + selector: 'app-execution-monitor', + templateUrl: './execution-monitor.component.html', + styleUrl: './execution-monitor.component.scss' +}) +export class ExecutionMonitorComponent { + @Input() sessionId: string; // does not change + @Output() openActivity = new EventEmitter(); + + readonly monitor = signal(null); + readonly isLoading = signal(false); + readonly showModal = signal(false); + readonly infoDurationsSeconds = computed(() => { + if (this.monitor()) { + return this.monitor().infos.map(info => + Math.round(info.totalDuration / 1000) + ); + } + return null; + }); + + + constructor(private _workflows: WorkflowsService) { + } + + toggleModal() { + this.showModal.update(b => !b); + } + + show() { + this.isLoading.set(true); + this._workflows.getExecutionMonitor(this.sessionId).subscribe(m => { + this.monitor.set(m); + this.isLoading.set(false); + }); + this.showModal.set(true); + } + + +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html index 0e7df675..c38d2c3f 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.html @@ -48,11 +48,15 @@
- + +
+ Common transactions provide atomicity, consistency and isolation guarantees over multiple activities. Guarantees do not hold for activities with + side-effects in external systems. +
@@ -62,6 +66,10 @@ name="controlStateMerger" (change)="checkForChanges()" [disabled]="!isEditable()"> +
+ Determines whether the activity gets executed in case of multiple control edges. AND_AND means all control edges must be active. + AND_OR means all success control edges must be active and at least one fail control edge. +
diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.ts index aa04d600..589ca153 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-config-editor/activity-config-editor.component.ts @@ -3,7 +3,7 @@ import {ActivityConfigModel, CommonType, ControlStateMerger} from '../../../../m import {NgForOf, NgIf} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {ActivityDef} from '../../../../models/activity-registry.model'; -import {ButtonDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormLabelDirective, FormSelectDirective, InputGroupComponent, InputGroupTextDirective} from '@coreui/angular'; +import {ButtonDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormLabelDirective, FormSelectDirective, FormTextDirective, InputGroupComponent, InputGroupTextDirective} from '@coreui/angular'; import {AdapterModel} from '../../../../../../views/adapters/adapter.model'; import {CatalogService} from '../../../../../../services/catalog.service'; import {ComponentsModule} from '../../../../../../components/components.module'; @@ -25,7 +25,8 @@ import {ComponentsModule} from '../../../../../../components/components.module'; InputGroupTextDirective, NgIf, FormControlDirective, - ComponentsModule + ComponentsModule, + FormTextDirective ], templateUrl: './activity-config-editor.component.html', styleUrl: './activity-config-editor.component.scss' diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html index 5d250cb5..6022af2a 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html @@ -6,9 +6,18 @@
{{ activity().executionInfo().executorType }} Executor
+

Submission Time: {{ activity().executionInfo().submissionTime | date:'medium' }}

Execution State: {{ activity().executionInfo().state }}

+

+ @if (activity().executionInfo().activities.length > 1) { + Tuples written (by root of Execution Tree): + } @else { + Tuples written: + } + {{ activity().executionInfo().tuplesWritten }} +

@if (activity().executionInfo().activities.length > 1) { -

Activities:

+

Activities in Execution Tree:

  • {{ activity }} @@ -55,11 +64,20 @@
    Log
    - @for (logMsg of activity().logMessages(); track $index) { + @for (logMsg of activity().logMessages(); track activity().id + $index) { {{ logMsg.level }} {{ logMsg.timeMs }} - {{ logMsg.msg }} + + @if ($first && settingSplit()) { + + {{ settingSplit()[0] }} + + + + } @else { + {{ logMsg.msg }} + } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.ts index a7b26a12..c465be0d 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.ts @@ -1,4 +1,4 @@ -import {Component, computed, input} from '@angular/core'; +import {Component, computed, input, Signal} from '@angular/core'; import {Activity} from '../../workflow'; import {ExecutionState} from '../../../../models/workflows.model'; @@ -15,4 +15,17 @@ export class ActivityExecStatsComponent { return [ExecutionState.SUBMITTED, ExecutionState.EXECUTING, ExecutionState.AWAIT_PROCESSING, ExecutionState.PROCESSING_RESULT] .map(state => [state, durations[state] || 0]); }); + + settingSplit: Signal<[string, string]> = computed(() => { // the first log message should contain the used settings + if (this.activity().logMessages().length > 0) { + const first = this.activity().logMessages()[0]; + if (first.level === 'INFO' && first.msg.includes(' with settings: {')) { + const idx = first.msg.indexOf('{'); + if (idx > 0 && idx < first.msg.length - 2) { + return [first.msg.slice(0, idx), first.msg.slice(idx)]; + } + } + } + return null; + }); } diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-config-editor/workflow-config-editor.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-config-editor/workflow-config-editor.component.html index 64ff765a..e714ae80 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-config-editor/workflow-config-editor.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-config-editor/workflow-config-editor.component.html @@ -1,4 +1,4 @@ - +
    Workflow Config
    @@ -6,38 +6,69 @@
    Workflow Config
    + + +
    + + + @for (entry of editableConfig().preferredStores | keyvalue; track entry.key) { + + + + + } +
    + +
    + Fusion can increase performance by reducing the number of materialized checkpoints and more opportunities for query optimization. +
    +
    + Pipelining can increase performance by reducing the number of materialized checkpoints and increasing the degree of concurrency. +
    - -
    - - -
    - +
    + Reduce storage requirements by dropping no longer required checkpoints. + Checkpoints of individual activities can be enforced in their config. +
    +
    +
    + The maximum number of activities that can be executed concurrently (pipelined or fused activities count as 1). + An upper limit is given by the globalWorkers Polypheny config value. +
    +
    + + +
    + +
    @@ -47,19 +78,11 @@
    Workflow Config
    (change)="checkForChanges()" [disabled]="!isEditable()" min="1">
- +
- - - @for (entry of editableConfig().preferredStores | keyvalue; track entry.key) { - - - - - } + +
diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html index c3a66c72..aeba4872 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -1,21 +1,40 @@
- + - - - + +

{{ name }}

+ + + + + + + + + - + - @@ -40,10 +62,10 @@ - + - + - @@ -66,7 +88,7 @@ (create)="createActivity($event)" (createAt)="createActivityAt($event)">
- +
@@ -74,6 +96,9 @@ + +
Save Workflow
diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss index 626af882..a8963a12 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss @@ -4,4 +4,24 @@ .editor-container { border-top: 1px lightgray solid; +} + +.workflow-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +[rete-context-menu] { + // Also see global style.scss + .block { + background: var(--cui-dark) !important; + color: var(--cui-white) !important; + border-bottom: 1px solid #c8c9cb !important; + } + + .block:hover { + background: var(--cui-secondary) !important; + color: var(--cui-body-color) !important; + } } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index b095d5af..43d1deeb 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -1,4 +1,4 @@ -import {Component, computed, effect, ElementRef, EventEmitter, Injector, Input, OnDestroy, OnInit, Output, signal, Signal, ViewChild} from '@angular/core'; +import {Component, computed, effect, ElementRef, EventEmitter, Injector, Input, OnDestroy, OnInit, Output, signal, Signal, ViewChild, ViewEncapsulation} from '@angular/core'; import {WorkflowsService} from '../../services/workflows.service'; import {ToasterService} from '../../../../components/toast-exposer/toaster.service'; import {WorkflowEditor} from './editor/workflow-editor'; @@ -14,23 +14,29 @@ import {WorkflowsWebSocketService} from '../../services/workflows-websocket.serv import {JsonEditorComponent} from '../../../../components/json/json-editor.component'; import {CheckpointViewerService} from '../../services/checkpoint-viewer.service'; import {Router} from '@angular/router'; +import {ExecutionMonitorComponent} from './execution-monitor/execution-monitor.component'; @Component({ selector: 'app-workflow-viewer', templateUrl: './workflow-viewer.component.html', styleUrl: './workflow-viewer.component.scss', - providers: [WorkflowsWebSocketService, CheckpointViewerService] + providers: [WorkflowsWebSocketService, CheckpointViewerService], + encapsulation: ViewEncapsulation.None // required to be able to style the rete context menu }) export class WorkflowViewerComponent implements OnInit, OnDestroy { @Input() sessionId: string; @Input() isEditable: boolean; + @Input() name: string; @Output() saveWorkflowEvent = new EventEmitter(); + @Output() close = new EventEmitter(); + @Output() terminate = new EventEmitter(); @ViewChild('rete') container!: ElementRef; @ViewChild('leftMenu') leftMenu: RightMenuComponent; @ViewChild('rightMenu') rightMenu: RightMenuComponent; @ViewChild('workflowConfigEditor') workflowConfigEditor: WorkflowConfigEditorComponent; + @ViewChild('executionMonitor') executionMonitor: ExecutionMonitorComponent; @ViewChild('variableEditor') variableEditor: JsonEditorComponent; private readonly registry = this._workflows.getRegistry(); @@ -39,8 +45,9 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { workflow: Workflow; isExecuting: Signal; canExecute: Signal; - readonly openedActivity = signal(undefined); + openedActivity: Signal; + readonly terminateConfirm = signal(false); readonly showSaveModal = signal(false); saveMessage = ''; readonly showVariableModal = signal(false); @@ -87,6 +94,7 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { return !this.isExecuting() && this.workflow.hasUnfinishedActivities(); }); this.serializedVariables = computed(() => JSON.stringify(this.workflow?.variables())); + this.openedActivity = this.workflow.getOpenedActivity(); } }); } @@ -134,16 +142,9 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { this.subscriptions.add(this.editor.onActivityReset().subscribe( activityId => this._websocket.reset(activityId) )); - this.subscriptions.add(this.editor.onOpenActivitySettings().pipe( - filter(activityId => - !this.openedActivity() || ((activityId !== this.openedActivity().id || !this.rightMenu.visible()) && this.rightMenu.canSafelyNavigate())), - switchMap(activityId => this._workflows.getActivity(this.sessionId, activityId)), - tap(activityModel => { - this.workflow.updateOrCreateActivity(activityModel); - this.openedActivity.set(this.workflow.getActivity(activityModel.id)); - this.rightMenu.visible.set(true); - }) - ).subscribe()); + this.subscriptions.add(this.editor.onOpenActivitySettings().subscribe( + activityId => this.openActivitySettings(activityId) + )); this.subscriptions.add(this.editor.onOpenCheckpoint().subscribe( ([activityId, isInput, idx]) => { if (isInput) { @@ -159,13 +160,6 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { this._checkpoint.openCheckpoint(activity, idx); } )); - this.subscriptions.add(this.workflow.onActivityRemove().subscribe( - activityId => { - if (this.openedActivity()?.id === activityId) { - this.openedActivity.set(null); - } - } - )); this.subscriptions.add(this.workflow.onActivityDirty().pipe( filter(activityId => this.openedActivity()?.id === activityId), switchMap(activityId => this._workflows.getActivity(this.sessionId, activityId)), @@ -214,6 +208,17 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { } } + openActivitySettings(activityId: string) { + if (!this.openedActivity() || ((activityId !== this.openedActivity().id || !this.rightMenu.visible()) && this.rightMenu.canSafelyNavigate())) { + this._workflows.getActivity(this.sessionId, activityId).subscribe(activityModel => { + this.workflow.updateOrCreateActivity(activityModel); + this.workflow.setOpenedActivity(activityModel.id); + this.rightMenu.visible.set(true); + } + ); + } + } + private synchronizeWorkflow() { // if workflow is not in sync, we get a consistent workflow by fetching and updating the entire workflow this._workflows.getActiveWorkflow(this.sessionId).subscribe(workflowModel => @@ -245,6 +250,14 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { this.saveMessage = ''; } + onTerminateClick() { + if (!this.terminateConfirm()) { + this.terminateConfirm.set(true); + } else { + this.terminate.emit(); + } + } + ngOnDestroy(): void { this.subscriptions.unsubscribe(); this.editor?.destroy(); @@ -258,6 +271,10 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { }); } + showMonitorModal() { + this.executionMonitor.show(); + } + openVariableModal() { this._workflows.getWorkflowVariables(this.sessionId).subscribe(variables => { this.workflow.variables.set(variables); diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts index 1c8165d6..1fb4ce70 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts @@ -29,6 +29,7 @@ export class Workflow { readonly config: WritableSignal; readonly variables: WritableSignal; readonly hasUnfinishedActivities: Signal; + private readonly openedActivity = signal(undefined); // which activity settings are open private readonly activityChangeSubject = new Subject(); private readonly activityRemoveSubject = new Subject(); @@ -41,7 +42,11 @@ export class Workflow { constructor(workflowModel: WorkflowModel, private readonly registry: ActivityRegistry, injector: Injector) { this.state = signal(workflowModel.state); workflowModel.activities.forEach(model => - this.activities.set(model.id, new Activity(model, registry.getDef(model.type)))); + this.activities.set(model.id, new Activity( + model, + registry.getDef(model.type), + computed(() => this.openedActivity()?.id === model.id) + ))); workflowModel.edges.forEach(edge => this.edgeStates.set(edgeToString(edge), signal(edge.state))); this.config = signal(workflowModel.config, {equal: _.isEqual}); this.variables = signal(workflowModel.variables, {equal: _.isEqual}); @@ -50,7 +55,7 @@ export class Workflow { const removeActivitySignal = toSignal(this.activityRemoveSubject, {injector: injector}); this.hasUnfinishedActivities = computed(() => { - addActivitySignal(); // force recompute when activity is added + addActivitySignal(); // force recompute when activity is added or removed removeActivitySignal(); return [...this.activities.values()].some( a => a.state() !== ActivityState.FINISHED && a.state() !== ActivityState.SAVED @@ -98,13 +103,17 @@ export class Workflow { removeActivity(activityId: string) { this.activities.delete(activityId); this.activityRemoveSubject.next(activityId); + if (this.openedActivity()?.id === activityId) { + this.openedActivity.set(null); + } } updateOrCreateActivity(activityModel: ActivityModel) { if (this.applyIfExists(activityModel.id, a => a.update(activityModel))) { this.activityChangeSubject.next(activityModel.id); } else { - const activity = new Activity(activityModel, this.registry.getDef(activityModel.type)); + const activity = new Activity(activityModel, this.registry.getDef(activityModel.type), + computed(() => this.openedActivity()?.id === activityModel.id)); this.activities.set(activityModel.id, activity); this.activityAddSubject.next(activity); } @@ -217,6 +226,22 @@ export class Workflow { remainingActivities.forEach(activityId => this.removeActivity(activityId)); } + setOpenedActivity(activityId: string) { + const activity = this.getActivity(activityId); + const old = this.openedActivity(); + this.openedActivity.set(activity); + if (old !== undefined) { + this.activityChangeSubject.next(old.id); + } + if (activityId !== undefined) { + this.activityChangeSubject.next(activity.id); + } + } + + getOpenedActivity() { + return this.openedActivity.asReadonly(); + } + onActivityChange() { return this.activityChangeSubject.asObservable(); } @@ -301,7 +326,7 @@ export class Activity { readonly logMessages: Signal; readonly error: Signal; - constructor(activityModel: ActivityModel, def: ActivityDef) { + constructor(activityModel: ActivityModel, def: ActivityDef, readonly isOpened: Signal) { this.type = activityModel.type; this.id = activityModel.id; this.def = def; diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html index c36b1e84..9c1ff410 100644 --- a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html @@ -7,8 +7,6 @@

Workflow Dashboard

Create Workflow - {{ newWorkflowName }} - {{ newWorkflowGroup }} diff --git a/src/app/plugins/workflows/models/workflows.model.ts b/src/app/plugins/workflows/models/workflows.model.ts index e69a5db4..fde2d9c4 100644 --- a/src/app/plugins/workflows/models/workflows.model.ts +++ b/src/app/plugins/workflows/models/workflows.model.ts @@ -110,12 +110,27 @@ export interface ActivityModel { } export interface ExecutionInfoModel { + submissionTime: string; // ISO 8601 totalDuration: number; durations: Record; activities: string[]; executorType: ExecutorType; state: ExecutionState; - log: string[]; // activityId|level|time|message + isSuccess: boolean; // only valid when state == DONE + tuplesWritten: number; // -1 if not written at all (failed or not yet finished or no data output) + log?: string[]; // activityId|level|time|message only available when part of ActivityModel +} + +export interface ExecutionMonitorModel { + startTime: string; // ISO 8601 + totalDuration: number; + targetActivity: string; + infos: ExecutionInfoModel[]; // no logs + totalCount: number; + successCount: number; + failCount: number; + skipCount: number; + countByExecutorType: Record; } export interface SessionModel { @@ -158,4 +173,5 @@ export interface WorkflowConfigModel { dropUnusedCheckpoints: boolean; maxWorkers: number; pipelineQueueCapacity: number; + logCapacity: number; } diff --git a/src/app/plugins/workflows/services/workflows.service.ts b/src/app/plugins/workflows/services/workflows.service.ts index 3afe002a..8801327b 100644 --- a/src/app/plugins/workflows/services/workflows.service.ts +++ b/src/app/plugins/workflows/services/workflows.service.ts @@ -1,7 +1,7 @@ import {Injectable, signal} from '@angular/core'; import {HttpClient, HttpHeaders} from '@angular/common/http'; import {WebuiSettingsService} from '../../../services/webui-settings.service'; -import {ActivityModel, SessionModel, Variables, WorkflowConfigModel, WorkflowDefModel, WorkflowModel} from '../models/workflows.model'; +import {ActivityModel, ExecutionMonitorModel, SessionModel, Variables, WorkflowConfigModel, WorkflowDefModel, WorkflowModel} from '../models/workflows.model'; import {ActivityDefModel, ActivityRegistry} from '../models/activity-registry.model'; class JsonNode { @@ -47,6 +47,10 @@ export class WorkflowsService { return this._http.get(`${this.httpUrl}/sessions/${sessionId}/workflow/variables`, this.httpOptions); } + getExecutionMonitor(sessionId: string) { + return this._http.get(`${this.httpUrl}/sessions/${sessionId}/workflow/monitor`, this.httpOptions); + } + getActivity(sessionId: string, activityId: string) { return this._http.get(`${this.httpUrl}/sessions/${sessionId}/workflow/${activityId}`, this.httpOptions); } diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index 2b281043..d104b795 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -14,6 +14,7 @@ import { ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, + ButtonToolbarComponent, CardBodyComponent, CardComponent, CardHeaderComponent, @@ -32,6 +33,7 @@ import { FormFloatingDirective, FormLabelDirective, FormSelectDirective, + FormTextDirective, GutterDirective, InputGroupComponent, InputGroupTextDirective, @@ -88,6 +90,7 @@ import {DoubleSettingComponent} from './components/workflow-viewer/right-menu/ac import {EntitySettingComponent} from './components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component'; import {ActivityExecStatsComponent} from './components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component'; import {AutocompleteLibModule} from 'angular-ng-autocomplete'; +import {ExecutionMonitorComponent} from './components/workflow-viewer/execution-monitor/execution-monitor.component'; @NgModule({ imports: [ @@ -165,6 +168,8 @@ import {AutocompleteLibModule} from 'angular-ng-autocomplete'; SpinnerComponent, TextColorDirective, AutocompleteLibModule, + FormTextDirective, + ButtonToolbarComponent, ], declarations: [ WorkflowViewerComponent, @@ -182,7 +187,8 @@ import {AutocompleteLibModule} from 'angular-ng-autocomplete'; BooleanSettingComponent, DoubleSettingComponent, EntitySettingComponent, - ActivityExecStatsComponent + ActivityExecStatsComponent, + ExecutionMonitorComponent ], exports: [ WorkflowViewerComponent, diff --git a/src/scss/style.scss b/src/scss/style.scss index 6d29fa04..5ebd6731 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -80,7 +80,7 @@ } } -/* Node Editor for query plans */ +/* Node Editor for query plans and workflows */ [rete-context-menu] { width: 200px !important; border-radius: 4px; From f2c9b02cafad8fbe91dd707a16c68c6c00e63cfb Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Tue, 21 Jan 2025 19:21:46 +0100 Subject: [PATCH 27/68] Add query and field select setting types --- src/app/components/editor/editor.component.ts | 8 +- .../editor/activity/activity.component.ts | 30 +++-- .../activity-settings.component.html | 15 +++ .../field-select-setting.component.html | 77 ++++++++++++ .../field-select-setting.component.scss | 36 ++++++ .../field-select-setting.component.ts | 113 ++++++++++++++++++ .../query-setting.component.html | 26 ++++ .../query-setting.component.scss | 3 + .../query-setting/query-setting.component.ts | 76 ++++++++++++ .../workflow-viewer.component.html | 4 +- .../workflow-viewer.component.ts | 4 +- .../components/workflow-viewer/workflow.ts | 14 ++- .../models/activity-registry.model.ts | 4 +- .../workflows/models/workflows.model.ts | 8 +- .../workflows/models/ws-response.model.ts | 4 +- .../workflows/services/workflows.service.ts | 1 + src/app/plugins/workflows/workflows.module.ts | 7 +- 17 files changed, 405 insertions(+), 25 deletions(-) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.ts diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts index 68185d1f..3f81a861 100644 --- a/src/app/components/editor/editor.component.ts +++ b/src/app/components/editor/editor.component.ts @@ -53,7 +53,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnChanges { } ngOnChanges(changes: SimpleChanges): void { - if (changes.lang && !changes.lang.firstChange) { + if (changes.language && !changes.language.firstChange) { this.updateLanguage(); } if (changes.autocomplete && !changes.autocomplete.firstChange) { @@ -123,6 +123,11 @@ export class EditorComponent implements OnInit, AfterViewInit, OnChanges { } } + insertAtCursor(code: string) { + console.log('inserting' + code); + this.codeEditor.session.insert(this.codeEditor.getCursorPosition(), code); + } + // from: https://stackoverflow.com/questions/30041816/ace-editor-autocomplete-custom-strings setAutocomplete() { this.codeEditor.setOptions({enableLiveAutocompletion: true}); @@ -175,7 +180,6 @@ export class EditorComponent implements OnInit, AfterViewInit, OnChanges { this.codeEditor.getSession().setMode('ace/mode/' + this.language); } else { this.codeEditor.getSession().setMode('ace/mode/sql'); - } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts index f694c8fb..104abf0c 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts @@ -5,9 +5,9 @@ import {ActivityState, WorkflowState} from '../../../../models/workflows.model'; import {ActivityPort} from '../activity-port/activity-port.component'; import {Subject} from 'rxjs'; import {Activity} from '../../workflow'; -import {DataModel} from '../../../../../../models/ui-request.model'; import {WorkflowsWebSocketService} from '../../../../services/workflows-websocket.service'; import {ToasterService} from '../../../../../../components/toast-exposer/toaster.service'; +import {PortType} from '../../../../models/activity-registry.model'; export const stateColors = { @@ -24,10 +24,11 @@ export const IN_CONTROL_KEY = 'c_in'; export const SUCCESS_CONTROL_KEY = 'c_out_success'; export const FAIL_CONTROL_KEY = 'c_out_fail'; -export const dataModelIcons = { - [DataModel.RELATIONAL]: 'fa fa-table', - [DataModel.DOCUMENT]: 'fa fa-file-text-o', - [DataModel.GRAPH]: 'cil-graph', +export const portTypeIcons = { + [PortType.REL]: 'fa fa-table', + [PortType.DOC]: 'fa fa-file-text-o', + [PortType.LPG]: 'cil-graph', + [PortType.ANY]: 'fa fa-question', }; @Component({ @@ -82,11 +83,13 @@ export class ActivityComponent implements OnInit, OnChanges { return this.data.state().toLowerCase(); } }); - Object.entries(this.data.dataInputs).forEach(([key, input]) => { - this.inIcons[key] = computed(() => dataModelIcons[input.socket.dataModel()]); + Object.keys(this.data.dataInputs).forEach(key => { + const idx = ActivityNode.getDataPortIndexFromKey(key); + this.inIcons[key] = computed(() => portTypeIcons[this.data.inPortTypes()[idx]]); }); - Object.entries(this.data.dataOutputs).forEach(([key, input]) => { - this.outIcons[key] = computed(() => dataModelIcons[input.socket.dataModel()]); + Object.keys(this.data.dataOutputs).forEach(key => { + const idx = ActivityNode.getDataPortIndexFromKey(key); + this.outIcons[key] = computed(() => portTypeIcons[this.data.outPortTypes()[idx]]); }); this.cdr.detectChanges(); @@ -127,9 +130,6 @@ export class ActivityComponent implements OnInit, OnChanges { export class ActivityNode extends ClassicPreset.Node { width = 400; height = 270; - canExecute = computed(() => this.state() === 'IDLE' && this.workflowState() === 'IDLE'); - canReset = computed(() => this.state() !== 'IDLE' && this.workflowState() === 'IDLE'); - canOpenCheckpoint = computed(() => this.state() === 'FINISHED' || this.state() === 'SAVED'); // TODO: find solution for when to show inputs readonly activityId = this.activity.id; readonly displayName = this.activity.displayName; @@ -146,6 +146,12 @@ export class ActivityNode extends ClassicPreset.Node { readonly controlOutputs: { [key: string]: ClassicPreset.Output }; readonly dataOutputs: { [key: string]: ClassicPreset.Output } = {}; + canExecute = computed(() => this.state() === 'IDLE' && this.workflowState() === 'IDLE'); + canReset = computed(() => this.state() !== 'IDLE' && this.workflowState() === 'IDLE'); + canOpenCheckpoint = computed(() => this.state() === 'FINISHED' || this.state() === 'SAVED'); // TODO: find solution for when to show inputs + inPortTypes = computed(() => this.activity.inTypePreview().map(p => p.portType)); + outPortTypes = computed(() => this.activity.outTypePreview().map(p => p.portType)); + constructor( private readonly activity: Activity, public readonly workflowState: Signal, diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html index 7226e750..76f12dd7 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html @@ -33,6 +33,9 @@
+ @if (activity().error()) { +

Execution Error: {{ activity().error().message }}

+ } @for (subgroup of activeSettingGroup().subgroups; track activity().id + subgroup.key) {
{{ subgroup.displayName }}
@@ -123,6 +126,18 @@
{{ setting.displayName }} [(value)]="editableSettings().get(setting.key).value"> } + @case (SettingType.QUERY) { + + + } + @case (SettingType.FIELD_SELECT) { + + + } @default {

unknown setting type

} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html new file mode 100644 index 00000000..4b26d7ef --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html @@ -0,0 +1,77 @@ +@if (def().simplified) { + simplified view is not yet implemented + +} @else { + + +
Exclude
+ +
    + @for (field of val().exclude; track field) { +
  • +
    + {{ field }} + +
    +
    +
    • + } +
+ + + + + + + + +
Include
+ +
    +
  • + {{ val().include[0] }} +
    • +
+
    + @for (field of val().include; track field) { +
  • +
    + {{ field }} + +
    +
    • + } +
+ + + + + + + +

Drag and drop the entries to modify the lists.

+ + + + + + @if (val().unspecifiedIndex >= 0 && def().reorder) { + + Insertion Index + + + + } +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.scss new file mode 100644 index 00000000..269cbe3c --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.scss @@ -0,0 +1,36 @@ +#list-exclude { + min-height: 230px; // 5 * 46 +} + +#list-include { + min-height: 183px; // 4 * 46 - 1 +} + +li { + min-height: 46px; +} + +.cdk-drag-animating { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} + +.field-list.cdk-drop-list-dragging .field-entry:not(.cdk-drag-placeholder) { + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} + +.cdk-drag-preview { + border: none; + border-radius: 4px; + padding: 8px 16px; + background: #fff; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); +} + +.custom-placeholder { + background: var(--cui-secondary); + //border: dotted 3px var(--cui-light); + min-height: 46px; + transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts new file mode 100644 index 00000000..60dd5104 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts @@ -0,0 +1,113 @@ +import {Component, computed, effect, EventEmitter, input, model, Output, signal, ViewChild} from '@angular/core'; +import {ActivityDef, SettingDefModel} from '../../../../../models/activity-registry.model'; +import {PK_COL, TypePreviewModel} from '../../../../../models/workflows.model'; +import {EditorComponent} from '../../../../../../../components/editor/editor.component'; +import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop'; +import {ToasterService} from '../../../../../../../components/toast-exposer/toaster.service'; + +@Component({ + selector: 'app-field-select-setting', + templateUrl: './field-select-setting.component.html', + styleUrl: './field-select-setting.component.scss' +}) +export class FieldSelectSettingComponent { + isEditable = input.required(); + settingDef = input.required(); + activityDef = input.required(); + inTypePreview = input.required(); + value = model.required(); + @Output() hasChanged = new EventEmitter(); + + @ViewChild('editor') editor: EditorComponent; + + val = computed(() => this.value() as FieldSelectValue); // like value, but with correct type + def = computed(() => this.settingDef() as FieldSelectSettingDef); + targetPreview = computed(() => this.inTypePreview()[this.def().targetInput]); + isRel = computed(() => this.activityDef().inPorts[this.def().targetInput].type === 'REL' || this.targetPreview().portType === 'REL'); + firstIsFixed = signal(false); + + constructor(private _toast: ToasterService) { + effect(() => { + const inTypeFields = this.targetPreview().fields; + if (!this.def().simplified && this.val().exclude.length === 0 && this.val().include.length <= 1) { + if (inTypeFields?.length > 0) { + this.val().include = inTypeFields.map(field => field.name); + } else if (this.val().include.length === 0 && this.isRel()) { + this.val().include.push(PK_COL); + } + } + this.firstIsFixed.set(this.isRel() && this.val().include?.[0] === PK_COL); + }, {allowSignalWrites: true}); + } + + + valueChanged() { + this.hasChanged.emit(); + } + + drop(event: CdkDragDrop) { + if (this.firstIsFixed() && event.currentIndex === 0 && event.container.id === 'list-include') { + return; + } + if (event.previousContainer === event.container) { + moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); + } else { + transferArrayItem( + event.previousContainer.data, + event.container.data, + event.previousIndex, + event.currentIndex, + ); + } + this.valueChanged(); + } + + delete(target: 'exclude' | 'include', index: number) { + if (target === 'exclude') { + this.val().exclude.splice(index, 1); + } else { + this.val().include.splice(index, 1); + } + this.valueChanged(); + } + + add(target: 'exclude' | 'include', fieldName: string) { + if (fieldName.length === 0) { + this._toast.warn('Field names must not be empty'); + return; + } + if (this.val().include.includes(fieldName) || this.val().exclude.includes(fieldName)) { + this._toast.warn('Duplicate field names are not permitted'); + return; + } + if (target === 'exclude') { + this.val().exclude.push(fieldName); + } else { + this.val().include.push(fieldName); + } + this.valueChanged(); + + } + + unknownChanged(event: Event) { + if ((event.target as HTMLInputElement).checked) { + this.val().unspecifiedIndex = this.val().include.length; + } else { + this.val().unspecifiedIndex = -1; + } + this.valueChanged(); + } +} + +interface FieldSelectSettingDef extends SettingDefModel { + simplified: boolean; + reorder: boolean; + defaultAll: boolean; + targetInput: number; +} + +interface FieldSelectValue { + include: string[]; + exclude: string[]; + unspecifiedIndex: number; // -1 if excluded by default (should always be the case for simplified +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.html new file mode 100644 index 00000000..72874cba --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.html @@ -0,0 +1,26 @@ + + + + + + + + @for (inType of inTypePreview(); track $index) { + + } + + + +
+ +
\ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.scss new file mode 100644 index 00000000..cb0561f8 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.scss @@ -0,0 +1,3 @@ +.editor-container { + border-radius: 4px; +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.ts new file mode 100644 index 00000000..4c9ed42b --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.ts @@ -0,0 +1,76 @@ +import {AfterViewInit, Component, computed, effect, EventEmitter, input, model, Output, ViewChild} from '@angular/core'; +import {SettingDefModel} from '../../../../../models/activity-registry.model'; +import {TypePreviewModel} from '../../../../../models/workflows.model'; +import {EditorComponent} from '../../../../../../../components/editor/editor.component'; + +@Component({ + selector: 'app-query-setting', + templateUrl: './query-setting.component.html', + styleUrl: './query-setting.component.scss' +}) +export class QuerySettingComponent implements AfterViewInit { + isEditable = input.required(); + settingDef = input.required(); + inTypePreview = input.required(); + value = model.required(); + @Output() hasChanged = new EventEmitter(); + + @ViewChild('editor') editor: EditorComponent; + + val = computed(() => this.value() as QueryValue); // like value, but with correct type + def = computed(() => this.settingDef() as QuerySettingDef); + listenForChanges = true; + + readonly editorOptions = { + minLines: 4, + maxLines: 10, + showLineNumbers: true, + highlightGutterLine: false, + highlightActiveLine: false, + fontSize: '0.875rem' + }; + + constructor() { + effect(() => { + this.val(); // listen for changes in val + this.listenForChanges = false; + this.editor?.setCode(this.val().query); + this.listenForChanges = true; + }); + } + + ngAfterViewInit(): void { + this.editor.onChange(value => { + if (this.listenForChanges) { + const oldQuery = this.val().query; + const newQuery = this.editor.getCode(); + console.log('old vs new', oldQuery, newQuery, oldQuery !== newQuery); + if (oldQuery !== newQuery) { + this.val().query = newQuery; + this.valueChanged(); + } + } + }); + } + + + valueChanged() { + this.hasChanged.emit(); + } + + insertInput(idx: number) { + this.editor.insertAtCursor(this.def().entityL + idx.toString() + this.def().entityR); + this.editor.focus(); + } +} + +interface QuerySettingDef extends SettingDefModel { + queryLanguages: string[]; + entityL: string; + entityR: string; +} + +interface QueryValue { + query: string; + queryLanguage: string; +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html index aeba4872..0c09ffee 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -1,5 +1,5 @@
- +
} @else { diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index 43d1deeb..a63f520d 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -175,7 +175,9 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { this.workflow.state.set(stateResponse.workflowState); if (!(this.workflow.updateActivityStates(stateResponse.activityStates, stateResponse.activityInvalidReasons, - stateResponse.activityInvalidSettings) + stateResponse.activityInvalidSettings, + stateResponse.inTypePreviews, + stateResponse.outTypePreviews) && this.workflow.updateEdgeStates(stateResponse.edgeStates))) { this.synchronizeWorkflow(); } diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts index 1fb4ce70..a8de96fe 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts @@ -149,13 +149,15 @@ export class Workflow { updateActivityStates(activityStates: Record, invalidReasons: Record, - invalidSettings: Record>): boolean { + invalidSettings: Record>, + inTypePreviews: Record, + outTypePreviews: Record): boolean { const missing = new Set(); const remaining = new Set(this.activities.keys()); for (const [id, state] of Object.entries(activityStates)) { const oldState = this.activities.get(id)?.state(); - if (this.updateActivityState(id, state, invalidReasons[id], invalidSettings[id])) { + if (this.updateActivityState(id, state, invalidReasons[id], invalidSettings[id], inTypePreviews[id], outTypePreviews[id])) { this.activityChangeSubject.next(id); if (state !== oldState) { this.activityDirtySubject.next(id); @@ -270,7 +272,8 @@ export class Workflow { return this.edgeRemoveSubject.asObservable(); } - private updateActivityState(activityId: string, state: ActivityState, invalidReason: string, invalidSettings: Record | undefined): boolean { + private updateActivityState(activityId: string, state: ActivityState, invalidReason: string, invalidSettings: Record | undefined, + inTypePreview: TypePreviewModel[], outTypePreview: TypePreviewModel[]): boolean { if (state === 'IDLE') { this.updateActivityProgress(activityId, 0); // reset progress } @@ -278,6 +281,8 @@ export class Workflow { a.state.set(state); a.invalidReason.set(invalidReason); a.invalidSettings.set(invalidSettings || {}); + a.inTypePreview.set(inTypePreview); + a.outTypePreview.set(outTypePreview); }); } @@ -317,6 +322,7 @@ export class Activity { readonly commonType: Signal; readonly rendering: WritableSignal; readonly inTypePreview: WritableSignal; + readonly outTypePreview: WritableSignal; readonly invalidReason: WritableSignal; readonly invalidSettings: WritableSignal>; readonly hasInvalidSettings: Signal; @@ -336,6 +342,7 @@ export class Activity { this.commonType = computed(() => this.config().commonType); this.rendering = signal(activityModel.rendering, {equal: _.isEqual}); this.inTypePreview = signal(activityModel.inTypePreview, {equal: _.isEqual}); + this.outTypePreview = signal(activityModel.outTypePreview, {equal: _.isEqual}); this.invalidReason = signal(activityModel.invalidReason); this.invalidSettings = signal(activityModel.invalidSettings); this.hasInvalidSettings = computed(() => Object.keys(this.invalidSettings()).length > 0); @@ -355,6 +362,7 @@ export class Activity { this.config.set(this.prepareConfig(activityModel.config)); this.rendering.set(activityModel.rendering); this.inTypePreview.set(activityModel.inTypePreview); + this.outTypePreview.set(activityModel.outTypePreview); this.invalidReason.set(activityModel.invalidReason); this.invalidSettings.set(activityModel.invalidSettings); this.variables.set(activityModel.variables); diff --git a/src/app/plugins/workflows/models/activity-registry.model.ts b/src/app/plugins/workflows/models/activity-registry.model.ts index cf66364d..49c65666 100644 --- a/src/app/plugins/workflows/models/activity-registry.model.ts +++ b/src/app/plugins/workflows/models/activity-registry.model.ts @@ -231,7 +231,9 @@ export enum SettingType { INT = 'INT', ENTITY = 'ENTITY', BOOLEAN = 'BOOLEAN', - DOUBLE = 'DOUBLE' + DOUBLE = 'DOUBLE', + QUERY = 'QUERY', + FIELD_SELECT = 'FIELD_SELECT', // TODO: update when a new settingType is added } diff --git a/src/app/plugins/workflows/models/workflows.model.ts b/src/app/plugins/workflows/models/workflows.model.ts index fde2d9c4..8e66ebbf 100644 --- a/src/app/plugins/workflows/models/workflows.model.ts +++ b/src/app/plugins/workflows/models/workflows.model.ts @@ -1,5 +1,6 @@ import {DataModel} from '../../../models/ui-request.model'; import {FieldDefinition} from '../../../components/data-view/models/result-set.model'; +import {PortType} from './activity-registry.model'; export enum EdgeState { IDLE = 'IDLE', @@ -58,6 +59,7 @@ export enum ExecutorType { export type SettingsModel = Record; export type Variables = Record; export const errorKey = '$errorMsg'; +export const PK_COL = 'key'; // primary key column of relational checkpoints export interface ErrorVariable { message: string; @@ -90,8 +92,9 @@ export interface RenderModel { } export interface TypePreviewModel { - dataModel: DataModel; - fields: FieldDefinition[]; + portType: PortType; // this can be more specific than the port type of the def + fields: FieldDefinition[] | null; + notConnected: boolean; // only relevant for input previews } @@ -103,6 +106,7 @@ export interface ActivityModel { rendering: RenderModel; state?: ActivityState; inTypePreview?: TypePreviewModel[]; + outTypePreview?: TypePreviewModel[]; invalidReason?: string; invalidSettings?: Record; variables?: Variables; diff --git a/src/app/plugins/workflows/models/ws-response.model.ts b/src/app/plugins/workflows/models/ws-response.model.ts index e2dc5070..6f685e4d 100644 --- a/src/app/plugins/workflows/models/ws-response.model.ts +++ b/src/app/plugins/workflows/models/ws-response.model.ts @@ -1,4 +1,4 @@ -import {ActivityModel, ActivityState, EdgeModel, RenderModel, WorkflowState} from './workflows.model'; +import {ActivityModel, ActivityState, EdgeModel, RenderModel, TypePreviewModel, WorkflowState} from './workflows.model'; import {Result} from '../../../components/data-view/models/result-set.model'; export enum ResponseType { @@ -46,6 +46,8 @@ export interface StateUpdateResponse extends WsResponse { type: ResponseType.STATE_UPDATE; workflowState: WorkflowState; activityStates: Record; + inTypePreviews: Record; + outTypePreviews: Record; activityInvalidReasons: Record; activityInvalidSettings: Record>; edgeStates: EdgeModel[]; diff --git a/src/app/plugins/workflows/services/workflows.service.ts b/src/app/plugins/workflows/services/workflows.service.ts index 8801327b..0615e645 100644 --- a/src/app/plugins/workflows/services/workflows.service.ts +++ b/src/app/plugins/workflows/services/workflows.service.ts @@ -19,6 +19,7 @@ export class WorkflowsService { this._http.get>(`${this.httpUrl}/registry`, this.httpOptions).subscribe({ next: defs => { this.activityRegistry = new ActivityRegistry(defs); + console.log(defs); this.registryLoaded.set(true); } }); diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index d104b795..ca844c68 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -83,7 +83,7 @@ import {MarkdownComponent} from 'ngx-markdown'; import {ActivitySettingsComponent} from './components/workflow-viewer/right-menu/activity-settings/activity-settings.component'; import {IntSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/int-setting/int-setting.component'; import {StringSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component'; -import {CdkDrag, CdkDragPreview, CdkDropList} from '@angular/cdk/drag-drop'; +import {CdkDrag, CdkDragPlaceholder, CdkDragPreview, CdkDropList} from '@angular/cdk/drag-drop'; import {AngularMultiSelectModule} from 'angular2-multiselect-dropdown'; import {BooleanSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/boolean-setting/boolean-setting.component'; import {DoubleSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component'; @@ -91,6 +91,8 @@ import {EntitySettingComponent} from './components/workflow-viewer/right-menu/ac import {ActivityExecStatsComponent} from './components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component'; import {AutocompleteLibModule} from 'angular-ng-autocomplete'; import {ExecutionMonitorComponent} from './components/workflow-viewer/execution-monitor/execution-monitor.component'; +import {QuerySettingComponent} from './components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component'; +import {FieldSelectSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component'; @NgModule({ imports: [ @@ -170,6 +172,7 @@ import {ExecutionMonitorComponent} from './components/workflow-viewer/execution- AutocompleteLibModule, FormTextDirective, ButtonToolbarComponent, + CdkDragPlaceholder, ], declarations: [ WorkflowViewerComponent, @@ -187,6 +190,8 @@ import {ExecutionMonitorComponent} from './components/workflow-viewer/execution- BooleanSettingComponent, DoubleSettingComponent, EntitySettingComponent, + QuerySettingComponent, + FieldSelectSettingComponent, ActivityExecStatsComponent, ExecutionMonitorComponent ], From f5af234ae769f74441a3a7c49f532a7d810f01d7 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Wed, 22 Jan 2025 18:53:25 +0100 Subject: [PATCH 28/68] Improve variables and field-select --- .../autocomplete/autocomplete.component.scss | 8 ++- .../data-card/data-card.component.html | 4 +- .../data-table/data-table.component.html | 4 +- .../data-template/data-template.component.ts | 2 +- .../editor/activity/activity.component.ts | 1 - .../left-menu/left-menu.component.html | 4 +- .../left-menu/left-menu.component.ts | 8 +-- .../activity-settings.component.html | 53 +++++---------- .../activity-settings.component.ts | 23 +++++-- .../add-variable/add-variable.component.html | 67 +++++++++++++++++++ .../add-variable/add-variable.component.scss | 0 .../add-variable/add-variable.component.ts | 54 +++++++++++++++ .../field-select-setting.component.html | 27 ++++++-- .../field-select-setting.component.scss | 8 +-- .../field-select-setting.component.ts | 47 +++++++++++-- .../right-menu/right-menu.component.html | 3 +- .../right-menu/right-menu.component.ts | 17 +++-- .../workflow-viewer.component.html | 11 +-- .../workflow-viewer.component.ts | 11 ++- .../components/workflow-viewer/workflow.ts | 27 ++++---- src/app/plugins/workflows/workflows.module.ts | 6 +- 21 files changed, 280 insertions(+), 105 deletions(-) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component.ts diff --git a/src/app/components/autocomplete/autocomplete.component.scss b/src/app/components/autocomplete/autocomplete.component.scss index 0e3ba36d..8c1a2641 100644 --- a/src/app/components/autocomplete/autocomplete.component.scss +++ b/src/app/components/autocomplete/autocomplete.component.scss @@ -10,9 +10,15 @@ height: auto !important; } + .not-found { + margin-bottom: -36px; + } + .input-container { height: initial; line-height: 2; + background-color: white !important; + border-radius: 0.25rem; input { background-color: transparent !important; @@ -27,7 +33,7 @@ } .input-container input::placeholder { - font-size: 0.765625rem; + font-size: 1rem; } /* bootstrap styles */ diff --git a/src/app/components/data-view/data-card/data-card.component.html b/src/app/components/data-view/data-card/data-card.component.html index 6ea69b1c..cf21b764 100644 --- a/src/app/components/data-view/data-card/data-card.component.html +++ b/src/app/components/data-view/data-card/data-card.component.html @@ -5,11 +5,11 @@
- - - + @@ -123,7 +123,7 @@ (valueChange)="inputChange(h.name, $event)" (enter)="insertTuple()"> - + diff --git a/src/app/components/data-view/data-template/data-template.component.ts b/src/app/components/data-view/data-template/data-template.component.ts index f83ae226..938642be 100644 --- a/src/app/components/data-view/data-template/data-template.component.ts +++ b/src/app/components/data-view/data-template/data-template.component.ts @@ -358,7 +358,7 @@ export abstract class DataTemplateComponent implements OnInit, OnDestroy { //when double-clicking the delete btn return; } - if (this.entityConfig.update) { + if (this.entityConfig().update) { this.updateValues.clear(); this.$result().data[i].forEach((v, k) => { if (this.$result().header[k].dataType === 'bool') { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts index 104abf0c..c897b923 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts @@ -103,7 +103,6 @@ export class ActivityComponent implements OnInit, OnChanges { saveNotes() { // we can perform this update locally, instead of from the workflow-viewer - console.log('saving notes', this.data.rendering()); this._websocket.updateActivity(this.data.activityId, null, null, this.data.rendering()); } diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html index 57f6bbf1..70f63a9c 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html @@ -13,8 +13,8 @@

Add Activity

+ (onSelect)="onItemSelect()" + (onDeSelect)="OnItemDeSelect()"> {{ item.itemName }} diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts index f039129c..372f0530 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts @@ -54,15 +54,11 @@ export class LeftMenuComponent { this.createAt.emit([$event.item.data, $event.dropPoint]); } - onItemSelect(item: any) { - console.log(item); - console.log(this.selectedCategories); + onItemSelect() { this.filterList(); } - OnItemDeSelect(item: any) { - console.log(item); - console.log(this.selectedCategories); + OnItemDeSelect() { this.filterList(); } diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html index 76f12dd7..4ad585e7 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html @@ -44,9 +44,7 @@
{{ subgroup.displayName }}
@for (setting of subgroup.settings; track setting.key) {
  • -
    {{ setting.displayName }} - ({{ setting.key }}: {{ setting.type }}) -
    +
    {{ setting.displayName }}
    -
    • - } - -
    - - - / - - - - - -
    - -     + +
    +
    + + + The static setting values are only used as a fallback when variables are present. + + @switch (setting.type) { @case (SettingType.INT) { {{ setting.displayName }} } @case (SettingType.FIELD_SELECT) { - diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.ts index 1fc08aa5..d528efca 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.ts @@ -3,6 +3,7 @@ import {GroupDef, SettingType} from '../../../../models/activity-registry.model' import {Activity, Settings, VariableReference} from '../../workflow'; import {WorkflowsWebSocketService} from '../../../../services/workflows-websocket.service'; import {ToasterService} from '../../../../../../components/toast-exposer/toaster.service'; +import {Variables} from '../../../../models/workflows.model'; @Component({ selector: 'app-activity-settings', @@ -13,6 +14,7 @@ export class ActivitySettingsComponent implements OnInit { protected readonly SettingType = SettingType; activity = input.required(); + workflowVars = input.required(); isEditable = input.required(); activeSettingGroup = signal(null); @@ -75,16 +77,16 @@ export class ActivitySettingsComponent implements OnInit { private resetVariablesVisibility() { this.variablesVisibilityMap.clear(); this.activity().settings().keys().forEach(key => { - this.variablesVisibilityMap.set(key, signal(false)); + const isVisible = this.activity().settings().get(key).references.length > 0; + this.variablesVisibilityMap.set(key, signal(isVisible)); }); } - addVariableRef(key: string, variable: string, pointer: string, target: string) { - // TODO: better handling of edge cases with better feedback - const variablePointer = pointer.length > 0 ? variable + '/' + pointer : variable; - if (variablePointer.length === 0) { - this._toast.warn(`Please specify a variablePointer`, 'Invalid Variable Reference'); - } else if (this.editableSettings().get(key).addReference(variablePointer, target)) { + addVariableRef(key: string, event: [string, string, string]) { + const [variable, pointer, target] = event; + + const variablePointer = variable + this.prefixWithSlash(pointer); + if (this.editableSettings().get(key).addReference(variablePointer, target)) { this.checkForChanges(); } else { this._toast.warn(`The specified target "${target}" is not a valid json pointer for this object`, 'Invalid Variable Reference'); @@ -101,4 +103,11 @@ export class ActivitySettingsComponent implements OnInit { this.resetSettingsSignal.set(false); this.resetSettingsSignal.set(true); } + + private prefixWithSlash(str: string): string { + if (str.length > 0 && !str.startsWith('/')) { + return '/' + str; + } + return str; + } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component.html new file mode 100644 index 00000000..0079380e --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component.html @@ -0,0 +1,67 @@ + + +
    Variable Pointers
    +
      + @for (ref of references(); track ref.target) { +
    • +
      + {{ ref.varRef }} + + {{ ref.target }} +
      + +
      • + } +
    + +
    +
    Add Pointer
    + + + + + + + + + + + + + +
    + + + + + + + + + + +
    +
    + +
    +
    +     +     diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component.ts new file mode 100644 index 00000000..e6be6ab1 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component.ts @@ -0,0 +1,54 @@ +import {Component, computed, EventEmitter, input, Output, signal} from '@angular/core'; +import {VariableReference} from '../../../workflow'; +import {Variables} from '../../../../../models/workflows.model'; +import JsonPointer from 'json-pointer'; + +@Component({ + selector: 'app-add-variable', + templateUrl: './add-variable.component.html', + styleUrl: './add-variable.component.scss' +}) +export class AddVariableComponent { + references = input.required(); + activityVars = input.required(); + workflowVars = input.required(); + settingValue = input.required(); + isEditable = input.required(); + + @Output() add = new EventEmitter<[string, string, string]>(); + @Output() delete = new EventEmitter(); + + variables = computed(() => Array.from(new Set([ + ...Object.keys(this.activityVars()), + ...Object.keys(this.workflowVars()) + ]))); + variablePointers = computed(() => { + + const aVar = this.activityVars()[this.variableInput()]; + if (aVar !== undefined) { + return Object.keys(JsonPointer.dict(aVar)).sort((a, b) => a.length - b.length); + } + const wVar = this.workflowVars()[this.variableInput()]; + if (wVar !== undefined) { + return Object.keys(JsonPointer.dict(wVar)).sort((a, b) => a.length - b.length); + } + return []; + }); + targets = computed(() => Array.from(new Set([ + ...Object.keys(JsonPointer.dict(this.settingValue())), + ...Object.keys(this.settingValue()).map(k => '/' + k) + ])).sort((a, b) => a.length - b.length) + ); + + variableInput = signal(''); + + showAdvanced = false; + pointerInput = signal(''); + targetInput = signal(''); + isValid = computed(() => this.variableInput().length > 0); + + addVariableRef() { + console.log('adding', this.variableInput(), this.pointerInput(), this.targetInput()); + this.add.emit([this.variableInput(), this.pointerInput(), this.targetInput()]); + } +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html index 4b26d7ef..dcc22993 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html @@ -1,13 +1,21 @@ @if (def().simplified) { - simplified view is not yet implemented - + + + + {{ item.itemName }} + + + + } @else {
    Exclude
      + [cdkDropListConnectedTo]="['list-include']" [cdkDropListData]="val().exclude" + cdkDropListSortingDisabled="true" (cdkDropListDropped)="drop($event)"> @for (field of val().exclude; track field) {
    • @@ -29,15 +37,16 @@
      Exclude
      -
      Include
      +
      Include (ignored)
      • {{ val().include[0] }}
      -
        +
          @for (field of val().include; track field) {
        • @@ -58,7 +67,11 @@
          Include
          -

          Drag and drop the entries to modify the lists.

          +

          + Drag and drop the fields to modify the lists + (the field order is ignored). +

          + (); settingDef = input.required(); - activityDef = input.required(); inTypePreview = input.required(); value = model.required(); @Output() hasChanged = new EventEmitter(); @@ -23,16 +22,45 @@ export class FieldSelectSettingComponent { val = computed(() => this.value() as FieldSelectValue); // like value, but with correct type def = computed(() => this.settingDef() as FieldSelectSettingDef); targetPreview = computed(() => this.inTypePreview()[this.def().targetInput]); - isRel = computed(() => this.activityDef().inPorts[this.def().targetInput].type === 'REL' || this.targetPreview().portType === 'REL'); + isRel = computed(() => this.targetPreview().portType === 'REL'); firstIsFixed = signal(false); + isInitialized = false; + + // simple + dropdownData = computed(() => this.targetPreview().fields?.map(field => { + return {id: field.name, itemName: field.name}; + })); + includeData: { id: string; itemName: string; }[] = []; + private changed = signal(false); // dummy signal to trigger recomputation + + + // https://www.npmjs.com/package/angular2-multiselect-dropdown + readonly dropdownSettings = { + singleSelection: false, + text: 'Fields to include', + noDataLabel: 'No fields found', + searchPlaceholderText: 'Search or add new', + enableSearchFilter: true, + enableCheckAll: true, + enableFilterSelectAll: false, + addNewItemOnFilter: true + }; constructor(private _toast: ToasterService) { effect(() => { + this.changed(); const inTypeFields = this.targetPreview().fields; - if (!this.def().simplified && this.val().exclude.length === 0 && this.val().include.length <= 1) { + + if (this.def().simplified) { + this.includeData = this.val().include.map(fieldName => { + return {id: fieldName, itemName: fieldName}; + }); + } else if (!this.isInitialized && this.val().exclude.length === 0 && this.val().include.length <= 1 && this.isRel()) { if (inTypeFields?.length > 0) { this.val().include = inTypeFields.map(field => field.name); - } else if (this.val().include.length === 0 && this.isRel()) { + this.isInitialized = true; + this.valueChanged(); + } else if (this.val().include.length === 0) { this.val().include.push(PK_COL); } } @@ -43,6 +71,7 @@ export class FieldSelectSettingComponent { valueChanged() { this.hasChanged.emit(); + this.changed.update(v => !v); } drop(event: CdkDragDrop) { @@ -86,7 +115,6 @@ export class FieldSelectSettingComponent { this.val().include.push(fieldName); } this.valueChanged(); - } unknownChanged(event: Event) { @@ -97,6 +125,13 @@ export class FieldSelectSettingComponent { } this.valueChanged(); } + + // simple + + includeDataChange(event: { id: string; itemName: string; }[]) { + this.val().include = event.map(e => e.id); + this.valueChanged(); + } } interface FieldSelectSettingDef extends SettingDefModel { diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html index eb0cdbb2..65e2744a 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.html @@ -47,7 +47,8 @@

          {{ activity().displayName() }}

          @switch (activeTab()) { @case ("settings") { - + + } @case ("variables") { diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts index 3ffb5a81..7334c603 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/right-menu.component.ts @@ -1,7 +1,7 @@ import {Component, input, signal, ViewChild} from '@angular/core'; import {Activity} from '../workflow'; import {WorkflowsService} from '../../../services/workflows.service'; -import {ActivityConfigModel, RenderModel, SettingsModel} from '../../../models/workflows.model'; +import {ActivityConfigModel, RenderModel, SettingsModel, Variables} from '../../../models/workflows.model'; import {WorkflowsWebSocketService} from '../../../services/workflows-websocket.service'; import {ActivitySettingsComponent} from './activity-settings/activity-settings.component'; import {ActivityConfigEditorComponent} from './activity-config-editor/activity-config-editor.component'; @@ -18,6 +18,7 @@ export type MenuTabs = 'settings' | 'variables' | 'config' | 'execution' | 'help export class RightMenuComponent { isEditable = input.required(); activity = input.required(); + workflowVars = input.required(); @ViewChild('settings') settingsComponent: ActivitySettingsComponent; @ViewChild('config') configComponent: ActivityConfigEditorComponent; @@ -51,17 +52,21 @@ export class RightMenuComponent { } } - canSafelyNavigate() { + canSafelyNavigate(warn = true) { if (this.activeTab() === 'settings') { if (this.settingsComponent?.hasSettingsChanged()) { - this._toast.warn('Please save or discard any unsaved changes to the settings first.', 'Unsaved settings'); - this.visible.set(true); + if (warn) { + this._toast.warn('Please save or discard any unsaved changes to the settings first.', 'Unsaved settings'); + this.visible.set(true); + } return false; } } else if (this.activeTab() === 'execution') { if (this.configComponent?.hasConfigChanged()) { - this._toast.warn('Please save or discard the unsaved changes to the config first.', 'Unsaved config'); - this.visible.set(true); + if (warn) { + this._toast.warn('Please save or discard the unsaved changes to the config first.', 'Unsaved config'); + this.visible.set(true); + } return false; } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html index 0c09ffee..c6adcafa 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -7,12 +7,12 @@ - +

          {{ name }}

           - + - +
    (create)="createActivity($event)" (createAt)="createActivityAt($event)">
    - +
    diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index a63f520d..50164fd4 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -125,9 +125,11 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { )); this.subscriptions.add(this.editor.onActivityClone().subscribe( activityId => { - const rendering = this.workflow.getActivity(activityId).rendering(); - const delta = 50; - this._websocket.cloneActivity(activityId, rendering.posX + delta, rendering.posY + delta); + if (this.openedActivity().id !== activityId || this.rightMenu.canSafelyNavigate()) { + const rendering = this.workflow.getActivity(activityId).rendering(); + const delta = 50; + this._websocket.cloneActivity(activityId, rendering.posX + delta, rendering.posY + delta); + } } )); this.subscriptions.add(this.editor.onEdgeRemove().subscribe( @@ -297,6 +299,9 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { if (this.variableEditor.isValid()) { this._websocket.updateVariables(JSON.parse(this.editedVariables())); this.showVariableModal.set(false); + this._workflows.getWorkflowVariables(this.sessionId).subscribe(variables => + this.workflow.variables.set(variables) + ); } else { this._toast.warn('Specified variables are invalid', 'Unable to save variables'); } diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts index a8de96fe..5d5b058b 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts @@ -27,7 +27,7 @@ export class Workflow { private readonly activities: Map = new Map(); private readonly edgeStates: Map> = new Map(); readonly config: WritableSignal; - readonly variables: WritableSignal; + readonly variables: WritableSignal; readonly hasUnfinishedActivities: Signal; private readonly openedActivity = signal(undefined); // which activity settings are open @@ -232,10 +232,10 @@ export class Workflow { const activity = this.getActivity(activityId); const old = this.openedActivity(); this.openedActivity.set(activity); - if (old !== undefined) { + if (old) { this.activityChangeSubject.next(old.id); } - if (activityId !== undefined) { + if (activityId) { this.activityChangeSubject.next(activity.id); } } @@ -337,7 +337,7 @@ export class Activity { this.id = activityModel.id; this.def = def; this.state = signal(activityModel.state); - this.settings = signal(new Settings(activityModel.settings), {equal: _.isEqual}); // deep equivalence check + this.settings = signal(new Settings(activityModel.settings)); // deep equivalence check this.config = signal(this.prepareConfig(activityModel.config), {equal: _.isEqual}); this.commonType = computed(() => this.config().commonType); this.rendering = signal(activityModel.rendering, {equal: _.isEqual}); @@ -435,11 +435,19 @@ export class Setting { const references: VariableReference[] = []; if (obj === null) { return [references, null]; + } else if (Array.isArray(obj)) { + for (const [i, value] of obj.entries()) { + const [r, o] = Setting.splitRecursive([...tokens, i.toString()], value); + references.push(...r); + obj[i] = o; + } + // undefined in lists means there is a variable reference that does not overwrite an existing value + obj = obj.filter(o => o !== undefined); } else if (typeof obj === 'object') { if (VARIABLE_REF_FIELD in obj) { const ref = new VariableReference(JsonPointer.compile(tokens), obj); references.push(ref); - return [references, ref.defaultValue]; + return [references, ref.defaultValue || undefined]; } else { Object.entries(obj).forEach(([key, value]) => { const [r, o] = Setting.splitRecursive([...tokens, key], value); @@ -447,12 +455,6 @@ export class Setting { obj[key] = o; }); } - } else if (Array.isArray(obj)) { - for (const [i, value] of obj.entries()) { - const [r, o] = Setting.splitRecursive([...tokens, i.toString()], value); - references.push(...r); - obj[i] = o; - } } return [references, obj]; @@ -475,7 +477,7 @@ export class Setting { if (ref.target.length <= 1) { copy = refObject; // setting the root } else { - JsonPointer.set(copy, ref.target, refObject); // TODO: try catch + JsonPointer.set(copy, ref.target, refObject); // TODO: try catch? } } return copy; @@ -492,7 +494,6 @@ export class Setting { target = target.startsWith('/') ? target : '/' + target; if (this.isValidTargetPointer(target)) { this.references.push(VariableReference.of(target, variablePointer)); - console.log('added reference', this.references[this.references.length - 1]); return true; } return false; diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index ca844c68..441137cf 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -15,6 +15,7 @@ import { ButtonDirective, ButtonGroupComponent, ButtonToolbarComponent, + CalloutComponent, CardBodyComponent, CardComponent, CardHeaderComponent, @@ -93,6 +94,7 @@ import {AutocompleteLibModule} from 'angular-ng-autocomplete'; import {ExecutionMonitorComponent} from './components/workflow-viewer/execution-monitor/execution-monitor.component'; import {QuerySettingComponent} from './components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component'; import {FieldSelectSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component'; +import {AddVariableComponent} from './components/workflow-viewer/right-menu/activity-settings/add-variable/add-variable.component'; @NgModule({ imports: [ @@ -173,6 +175,7 @@ import {FieldSelectSettingComponent} from './components/workflow-viewer/right-me FormTextDirective, ButtonToolbarComponent, CdkDragPlaceholder, + CalloutComponent, ], declarations: [ WorkflowViewerComponent, @@ -193,7 +196,8 @@ import {FieldSelectSettingComponent} from './components/workflow-viewer/right-me QuerySettingComponent, FieldSelectSettingComponent, ActivityExecStatsComponent, - ExecutionMonitorComponent + ExecutionMonitorComponent, + AddVariableComponent ], exports: [ WorkflowViewerComponent, From f1607409abeb910260d1a30b1929687016f182d0 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Thu, 23 Jan 2025 18:50:21 +0100 Subject: [PATCH 29/68] Many different visual tweaks --- .../json-text/json-text.component.html | 2 +- .../json-text/json-text.component.ts | 1 + src/app/components/editor/editor.component.ts | 1 - .../editor/activity/activity.component.html | 4 +- .../editor/activity/activity.component.scss | 4 +- .../editor/activity/activity.component.ts | 10 +- .../execution-monitor.component.html | 23 ++- .../execution-monitor.component.ts | 2 + .../left-menu/left-menu.component.html | 40 ++-- .../left-menu/left-menu.component.scss | 2 +- .../left-menu/left-menu.component.ts | 13 +- .../activity-exec-stats.component.html | 99 ++++++---- .../activity-settings.component.html | 10 +- .../entity-setting.component.html | 15 +- .../entity-setting.component.ts | 4 +- .../field-select-setting.component.scss | 8 + .../query-setting.component.html | 19 +- .../query-setting/query-setting.component.ts | 1 - .../right-menu/right-menu.component.html | 45 ++++- .../right-menu/right-menu.component.scss | 12 ++ .../right-menu/right-menu.component.ts | 34 +++- .../workflow-viewer.component.html | 171 +++++++++++------- .../workflow-viewer.component.scss | 7 + .../workflow-viewer.component.ts | 5 +- .../components/workflow-viewer/workflow.ts | 6 +- .../workflows/models/workflows.model.ts | 1 + .../services/checkpoint-viewer.service.ts | 38 +++- .../workflows/services/workflows.service.ts | 1 - src/app/plugins/workflows/workflows.module.ts | 8 + 29 files changed, 392 insertions(+), 194 deletions(-) diff --git a/src/app/components/data-view/json-text/json-text.component.html b/src/app/components/data-view/json-text/json-text.component.html index 0e077303..9e2cce34 100644 --- a/src/app/components/data-view/json-text/json-text.component.html +++ b/src/app/components/data-view/json-text/json-text.component.html @@ -1,3 +1,3 @@
    - +
    diff --git a/src/app/components/data-view/json-text/json-text.component.ts b/src/app/components/data-view/json-text/json-text.component.ts index 7c214ffd..dc2e91e1 100644 --- a/src/app/components/data-view/json-text/json-text.component.ts +++ b/src/app/components/data-view/json-text/json-text.component.ts @@ -8,6 +8,7 @@ import {Component, computed, input, OnInit, Signal} from '@angular/core'; export class JsonTextComponent implements OnInit { text = input(); + expanded = input(false); private readonly regex = new RegExp('/ObjectId(\d{1,24})/g'); json: Signal; diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts index 3f81a861..48bc10d2 100644 --- a/src/app/components/editor/editor.component.ts +++ b/src/app/components/editor/editor.component.ts @@ -124,7 +124,6 @@ export class EditorComponent implements OnInit, AfterViewInit, OnChanges { } insertAtCursor(code: string) { - console.log('inserting' + code); this.codeEditor.session.insert(this.codeEditor.getCursorPosition(), code); } diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html index 420ac6b1..29322a64 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html @@ -1,8 +1,8 @@
    -

    +

    {{ statusText?.() }}

    diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss index 0bce8f02..0a603b70 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss @@ -12,11 +12,11 @@ user-select: none; &:hover { - border-color: var(--cui-secondary); + border-color: var(--cui-light); } &.selected { - border-color: var(--cui-dark); + border-color: var(--cui-secondary); } .activity { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts index c897b923..71aed526 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts @@ -14,7 +14,7 @@ export const stateColors = { [ActivityState.IDLE]: '#dddddd', [ActivityState.QUEUED]: '#39f', [ActivityState.EXECUTING]: '#0d6efd', - [ActivityState.FINISHED]: '#2eb85c', // same color as saved + [ActivityState.FINISHED]: '#96dbad', // same color as saved [ActivityState.SAVED]: '#2eb85c', [ActivityState.SKIPPED]: '#f9b115', [ActivityState.FAILED]: '#e55353', @@ -65,6 +65,11 @@ export class ActivityComponent implements OnInit, OnChanges { if (this.data.state() === ActivityState.EXECUTING) { const percent = this.data.progress() * 100; return `linear-gradient(to right, ${grad1} ${percent - 5}%, ${grad2} ${percent + 5}%)`; + } else if (this.data.state() === ActivityState.FINISHED) { + return `repeating-linear-gradient( 135deg, + ${stateColors[ActivityState.SAVED]}, ${stateColors[ActivityState.SAVED]} 45px, + ${stateColors[ActivityState.FINISHED]} 45px, ${stateColors[ActivityState.FINISHED]} 90px + )`; } else { return stateColors[this.data.state()]; } @@ -107,7 +112,7 @@ export class ActivityComponent implements OnInit, OnChanges { } showProblems() { - if (Object.keys(this.data.invalidSettings()).length > 0) { + if (this.data.hasInvalidSettings()) { this.data.openSettings(); } if (this.data.invalidReason()) { @@ -137,7 +142,6 @@ export class ActivityNode extends ClassicPreset.Node { readonly progress = this.activity.progress.asReadonly(); readonly commonType = this.activity.commonType; readonly invalidReason = this.activity.invalidReason; - readonly invalidSettings = this.activity.invalidSettings; readonly hasInvalidSettings = this.activity.hasInvalidSettings; readonly isOpened = this.activity.isOpened; readonly controlInput: ClassicPreset.Input; diff --git a/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html index 3400fff1..382fd4c9 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html @@ -6,7 +6,7 @@
    Execution Statistics
    - + @if (isLoading()) {
    @@ -33,7 +33,7 @@
    Execution Statistics
    Target Activity: - {{ monitor().targetActivity }} + {{ workflow.getActivity( monitor().targetActivity )?.displayName() }} @@ -46,7 +46,7 @@
    Execution Statistics
     - Success / skip / fail: + Success / cancel / fail: {{ monitor().successCount }} / @@ -86,8 +86,9 @@
    Submitted Execution Trees
    {{ infoDurationsSeconds()[$index] }} s - - {{ info.executorType + (info.activities.length > 1 ? ' (' + info.activities.length + ')' : '') }} + + {{ info.executorType }} + ({{ info.activities.length > 1 ? info.activities.length : workflow.getActivity( info.root )?.displayName() }}) @@ -99,6 +100,9 @@
    Submitted Execution Trees
    + + The execution was unsuccessful. +

    Tuples written: {{ info.tuplesWritten }} @@ -125,8 +129,13 @@

    Duration
    Activities in Execution Tree
    • - {{ activity }} - + + {{ workflow.getActivity( activity )?.displayName() }} + root + + + +
    diff --git a/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.ts b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.ts index f220cbcb..c8614a3c 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.ts @@ -1,6 +1,7 @@ import {Component, computed, EventEmitter, Input, Output, signal} from '@angular/core'; import {ExecutionMonitorModel} from '../../../models/workflows.model'; import {WorkflowsService} from '../../../services/workflows.service'; +import {Workflow} from '../workflow'; @Component({ selector: 'app-execution-monitor', @@ -9,6 +10,7 @@ import {WorkflowsService} from '../../../services/workflows.service'; }) export class ExecutionMonitorComponent { @Input() sessionId: string; // does not change + @Input() workflow: Workflow; @Output() openActivity = new EventEmitter(); readonly monitor = signal(null); diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html index 70f63a9c..ab9492dd 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html @@ -35,23 +35,33 @@

    Add Activity

    [cBorder]="activity === openedActivityDef && 'primary'" (cdkDragDropped)="onDragDropped($event)"> -
    -
    -
    {{ activity.displayName }}
    - {{ activity.shortDescription }} -
    -
    - - -
    -
    + + +
    +
    {{ activity.displayName }}
    +
    + +     + +
    + + + + + +
    + +     + + + + +     + {{ activity.shortDescription }}     -
    }
    diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.scss b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.scss index 7295712f..cd65a059 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.scss @@ -55,6 +55,6 @@ .activity-card:hover { .info-button:not(.text-primary) { - color: var(--cui-dark) !important; + color: var(--cui-primary) !important; } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts index 372f0530..391b96ab 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts @@ -1,7 +1,7 @@ import {Component, EventEmitter, input, Output, signal} from '@angular/core'; import {WorkflowsService} from '../../../services/workflows.service'; import {CdkDragDrop} from '@angular/cdk/drag-drop'; -import {ActivityDef} from '../../../models/activity-registry.model'; +import {ActivityCategory, ActivityDef} from '../../../models/activity-registry.model'; @Component({ selector: 'app-left-menu', @@ -17,6 +17,9 @@ export class LeftMenuComponent { private readonly registry = this._workflows.getRegistry(); readonly activityTypes = this.registry.getTypes(); + readonly isRelational: Record = {}; + readonly isDocument: Record = {}; + readonly isGraph: Record = {}; readonly dropdownCats: { id: number; itemName: string; }[] = []; // https://www.npmjs.com/package/angular2-multiselect-dropdown readonly dropdownSettings = { @@ -43,6 +46,14 @@ export class LeftMenuComponent { 'itemName': category }); } + + for (const type of this.activityTypes) { + const cats = this.registry.getDef(type).categories; + this.isRelational[type] = cats.includes(ActivityCategory.RELATIONAL); + this.isDocument[type] = cats.includes(ActivityCategory.DOCUMENT); + this.isGraph[type] = cats.includes(ActivityCategory.GRAPH); + } + this.filterList(); } diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html index 6022af2a..d8b5bb8f 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html @@ -1,21 +1,40 @@ -

    Activity ID: {{ activity().id }}

    - +

    Activity ID: {{ activity().id }}

    +

    Activity Type: {{ activity().def.type }}

    @if (activity().executionInfo()) {
    {{ activity().executionInfo().executorType }} Executor
    -

    Submission Time: {{ activity().executionInfo().submissionTime | date:'medium' }}

    -

    Execution State: {{ activity().executionInfo().state }}

    -

    - @if (activity().executionInfo().activities.length > 1) { - Tuples written (by root of Execution Tree): - } @else { - Tuples written: - } - {{ activity().executionInfo().tuplesWritten }} -

    + + + Submission Time: + + + {{ activity().executionInfo().submissionTime | date:'medium' }} + + + + + Execution State: + + + {{ activity().executionInfo().state }} + + + + + @if (activity().executionInfo().activities.length > 1) { + Tuples written (by root of Execution Tree): + } @else { + Tuples written: + } + + + {{ activity().executionInfo().tuplesWritten }} + + + @if (activity().executionInfo().activities.length > 1) {

    Activities in Execution Tree:

      @@ -55,34 +74,38 @@
      Duration
      @if (activity().logMessages().length > 0) {
      Log
      - - - - - - - - - - @for (logMsg of activity().logMessages(); track activity().id + $index) { - - - +
      +
      LevelTime (ms)Message
      {{ logMsg.level }}{{ logMsg.timeMs }}
      + + + + + + + + + @for (logMsg of activity().logMessages(); track activity().id + $index) { + + + - @if ($first && settingSplit()) { - + @if ($first && settingSplit()) { + - } @else { - - } - - } - -
      LevelTime (ms)Message
      {{ logMsg.level }}{{ logMsg.timeMs }} - {{ settingSplit()[0] }} - - + {{ settingSplit()[0] }} + + {{ logMsg.msg }}
      + } @else { + {{ logMsg.msg }} + } + + } + + +
    } } @else { -

    Not yet executed.

    + + Execute the activity to show execution stats. + } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html index 4ad585e7..a7500c69 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html @@ -34,7 +34,9 @@
    @if (activity().error()) { -

    Execution Error: {{ activity().error().message }}

    + + Execution Error: {{ activity().error().message }} + } @for (subgroup of activeSettingGroup().subgroups; track activity().id + subgroup.key) { @@ -54,7 +56,7 @@
    {{ setting.displayName }}
    -

    +

    {{ activity().invalidSettings()[setting.key] }}

    {{ setting.shortDescription }}

    @@ -131,5 +133,7 @@
    {{ setting.displayName }}
    } @else { -

    This activity has no settings.

    + + This activity has no settings. + } diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html index d586c239..3682ecab 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/entity-setting/entity-setting.component.html @@ -1,18 +1,5 @@ - -
    + {{ value().namespace }} { + this.hasChanged.emit(); + }, 10); // short delay to ensure this.value().? updated correctly when selecting an autocomplete entry this.changed.update(v => !v); } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.scss index bdd5181d..99eb72e3 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.scss @@ -18,6 +18,14 @@ li { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } +.field-entry { + cursor: grab; +} + +.field-entry:active { + cursor: grabbing !important; +} + .cdk-drag-preview { border: none; border-radius: 4px; diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.html index 72874cba..107f7d4f 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/query-setting/query-setting.component.html @@ -6,15 +6,16 @@ - - - @for (inType of inTypePreview(); track $index) { - - } - - +
    + + @for (inType of inTypePreview(); track $index) { + + } + + +
    -

    {{ activity().displayName() }}

    + @if (!isEditingName()) { +

    + {{ activity().displayName() }} + + + +

    + } @else { +
    + + +
    + + } + + +
    } @else { -

    The requested checkpoint is currently not materialized. - Do you want to execute the activity to materialize its checkpoints?

    -

    This will also reset all its successor activities!

    +
    Output Preview
    +

    Data Model: {{ _checkpoint.outPreview().portType }}

    + @switch (_checkpoint.outPreview().portType) { + @case (PortType.REL) { + + } + } + +

    The requested checkpoint is currently not materialized. + Do you want to execute the activity to materialize its checkpoints?

    +

    This will also reset all its successor activities!

    +     } diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss index a8963a12..4d86c1ec 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss @@ -24,4 +24,11 @@ background: var(--cui-secondary) !important; color: var(--cui-body-color) !important; } +} + +.no-select { + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index 50164fd4..613d1ba8 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -15,6 +15,7 @@ import {JsonEditorComponent} from '../../../../components/json/json-editor.compo import {CheckpointViewerService} from '../../services/checkpoint-viewer.service'; import {Router} from '@angular/router'; import {ExecutionMonitorComponent} from './execution-monitor/execution-monitor.component'; +import {PortType} from '../../models/activity-registry.model'; @Component({ selector: 'app-workflow-viewer', @@ -55,6 +56,8 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { readonly editedVariables = signal(null); readonly hasVariablesChanged = computed(() => this.serializedVariables?.() !== this.editedVariables()); + protected readonly PortType = PortType; + constructor( private readonly _workflows: WorkflowsService, @@ -125,7 +128,7 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { )); this.subscriptions.add(this.editor.onActivityClone().subscribe( activityId => { - if (this.openedActivity().id !== activityId || this.rightMenu.canSafelyNavigate()) { + if (this.openedActivity()?.id !== activityId || this.rightMenu.canSafelyNavigate()) { const rendering = this.workflow.getActivity(activityId).rendering(); const delta = 50; this._websocket.cloneActivity(activityId, rendering.posX + delta, rendering.posY + delta); diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts index 5d5b058b..b7e8e5cf 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow.ts @@ -327,6 +327,7 @@ export class Activity { readonly invalidSettings: WritableSignal>; readonly hasInvalidSettings: Signal; readonly variables: WritableSignal; + readonly hasVariables: Signal; readonly displayName: Signal; readonly executionInfo: WritableSignal; readonly logMessages: Signal; @@ -347,7 +348,10 @@ export class Activity { this.invalidSettings = signal(activityModel.invalidSettings); this.hasInvalidSettings = computed(() => Object.keys(this.invalidSettings()).length > 0); this.variables = signal(activityModel.variables, {equal: _.isEqual}); - this.displayName = computed(() => this.rendering().name || this.def.displayName); + this.hasVariables = computed(() => Object.keys(this.variables()).length > 0); + this.displayName = computed(() => { + return this.rendering().name || this.def.displayName; + }); this.executionInfo = signal(activityModel.executionInfo); this.logMessages = computed(() => this.executionInfo().log?.map(m => new LogMessage(m)) diff --git a/src/app/plugins/workflows/models/workflows.model.ts b/src/app/plugins/workflows/models/workflows.model.ts index 8e66ebbf..63705005 100644 --- a/src/app/plugins/workflows/models/workflows.model.ts +++ b/src/app/plugins/workflows/models/workflows.model.ts @@ -118,6 +118,7 @@ export interface ExecutionInfoModel { totalDuration: number; durations: Record; activities: string[]; + root: string; executorType: ExecutorType; state: ExecutionState; isSuccess: boolean; // only valid when state == DONE diff --git a/src/app/plugins/workflows/services/checkpoint-viewer.service.ts b/src/app/plugins/workflows/services/checkpoint-viewer.service.ts index 9c2c9092..9a59cdce 100644 --- a/src/app/plugins/workflows/services/checkpoint-viewer.service.ts +++ b/src/app/plugins/workflows/services/checkpoint-viewer.service.ts @@ -1,9 +1,12 @@ -import {computed, Injectable, signal, WritableSignal} from '@angular/core'; +import {computed, effect, Injectable, Signal, signal, WritableSignal} from '@angular/core'; import {WorkflowsWebSocketService} from './workflows-websocket.service'; import {CheckpointDataResponse, ResponseType, WsResponse} from '../models/ws-response.model'; -import {Result} from '../../../components/data-view/models/result-set.model'; +import {FieldDefinition, Result} from '../../../components/data-view/models/result-set.model'; import {Activity} from '../components/workflow-viewer/workflow'; import {ActivityState} from '../models/workflows.model'; +import {DataModel} from '../../../models/ui-request.model'; +import {PortType} from '../models/activity-registry.model'; +import {ToasterService} from '../../../components/toast-exposer/toaster.service'; @Injectable() export class CheckpointViewerService { @@ -11,15 +14,35 @@ export class CheckpointViewerService { readonly selectedActivity = signal(undefined); readonly selectedOutput = signal(0); + readonly outPreview = computed(() => this.selectedActivity().outTypePreview()[this.selectedOutput()]); + readonly outPreviewAsResult: Signal> = computed(() => { + if (this.outPreview().portType !== PortType.REL) { + return null; + } + return { + dataModel: DataModel.RELATIONAL, + header: this.outPreview().fields, + data: [] + } as Result; + }); readonly isLoading = signal(false); + readonly isWaitingForExecution = signal(false); result: WritableSignal> = signal(null); readonly limit = signal(0); readonly totalCount = signal(0); readonly isLimited = computed(() => this.totalCount() > this.limit()); + readonly config = {create: false, update: false, delete: false, sort: false, search: false, exploring: true, hideCreateView: true}; - constructor(private readonly _websocket: WorkflowsWebSocketService) { + constructor(private _websocket: WorkflowsWebSocketService, private _toast: ToasterService) { this._websocket.onMessage().subscribe(msg => this.handleWsMsg(msg)); + effect(() => { + if (this.showModal() && this.isWaitingForExecution() && this.selectedActivity().state() === ActivityState.SAVED) { + console.log('activity finished execution!'); + this.isWaitingForExecution.set(false); + this._websocket.getCheckpoint(this.selectedActivity().id, this.selectedOutput()); + } + }, {allowSignalWrites: true}); } toggleModal() { @@ -32,6 +55,8 @@ export class CheckpointViewerService { this.selectedActivity.set(null); this.selectedOutput.set(null); this.result.set(null); + this.isLoading.set(false); + this.isWaitingForExecution.set(false); } } @@ -66,14 +91,11 @@ export class CheckpointViewerService { } } - materializeCheckpoints(activityId: string) { - this._websocket.execute(activityId); - } - materialize() { if (this.selectedActivity()) { + this.isWaitingForExecution.set(true); + this.isLoading.set(true); this._websocket.execute(this.selectedActivity().id); - this.setModal(false); } } } diff --git a/src/app/plugins/workflows/services/workflows.service.ts b/src/app/plugins/workflows/services/workflows.service.ts index 0615e645..8801327b 100644 --- a/src/app/plugins/workflows/services/workflows.service.ts +++ b/src/app/plugins/workflows/services/workflows.service.ts @@ -19,7 +19,6 @@ export class WorkflowsService { this._http.get>(`${this.httpUrl}/registry`, this.httpOptions).subscribe({ next: defs => { this.activityRegistry = new ActivityRegistry(defs); - console.log(defs); this.registryLoaded.set(true); } }); diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index 441137cf..4308a10d 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -25,6 +25,10 @@ import { ColComponent, ColDirective, CollapseDirective, + DropdownComponent, + DropdownItemDirective, + DropdownMenuDirective, + DropdownToggleDirective, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, @@ -176,6 +180,10 @@ import {AddVariableComponent} from './components/workflow-viewer/right-menu/acti ButtonToolbarComponent, CdkDragPlaceholder, CalloutComponent, + DropdownComponent, + DropdownToggleDirective, + DropdownMenuDirective, + DropdownItemDirective, ], declarations: [ WorkflowViewerComponent, From efa0800fbe1a8e34d22d7338221f11fd1579352a Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Fri, 24 Jan 2025 20:04:38 +0100 Subject: [PATCH 30/68] Add support for multi-input --- .../activity-port.component.html | 3 +- .../activity-port.component.scss | 6 +++- .../activity-port/activity-port.component.ts | 14 ++++++++-- .../editor/activity/activity.component.scss | 8 +++--- .../editor/activity/activity.component.ts | 23 +++++++++++---- .../editor/edge/edge.component.html | 5 ++++ .../editor/edge/edge.component.scss | 7 +++++ .../editor/edge/edge.component.ts | 28 +++++++------------ .../editor/workflow-editor-utils.ts | 18 +++++++++--- .../workflow-viewer/editor/workflow-editor.ts | 21 +++++++++----- .../workflow-viewer.component.ts | 2 +- .../models/activity-registry.model.ts | 1 + 12 files changed, 91 insertions(+), 45 deletions(-) diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html index 3f91dec9..0ef38f20 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.html @@ -6,7 +6,8 @@ 'success-control': data.controlType === 'success', 'fail-control': data.controlType === 'fail', 'in-control': data.controlType === 'in', - 'is-optional': data.portDef?.['isOptional'] + 'is-optional': data.portDef?.['isOptional'], + 'is-multi': data.isMulti }"> @switch (data.controlType) { @case ('in') { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss index c967ef55..371394c8 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.scss @@ -27,10 +27,14 @@ &.data-port { width: $data-port-size; height: $data-port-size; - border-radius: $data-port-size / 2; + border-radius: calc(#{$data-port-size} / 2); background: var(--cui-dark); border: 2px solid var(--cui-dark); + &.is-multi { + height: calc(2 * #{$data-port-size}); + } + &.out-port.state-finished { background: repeating-linear-gradient( 135deg, diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts index 7370000f..f7b18b8c 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts @@ -23,10 +23,16 @@ export class ActivityPortComponent implements OnChanges { return this.data.controlType + ' control'; } else if (!this.data.isInput && this.data.activityState() === 'FINISHED') { return this.data.dataModel() + ' (not materialized)'; - } else if (this.data.portDef['isOptional']) { - return this.data.dataModel() + ' (optional)'; } - return this.data.dataModel(); + let title = ''; + if (this.data.isMulti) { + title += 'Multiple Connections: '; + } + title += this.data.dataModel(); + if (this.data.portDef['isOptional']) { + title += ' (optional)'; + } + return title; } constructor(private cdr: ChangeDetectorRef, private elementRef: ElementRef) { @@ -42,6 +48,7 @@ export class ActivityPortComponent implements OnChanges { export class ActivityPort extends ClassicPreset.Socket { public readonly isControl: boolean; + public readonly isMulti: boolean; public readonly dataModel = signal(null); // TODO: track data model state in workflow itself constructor(public readonly portDef: InPortDef | OutPortDef, public readonly isInput: boolean, @@ -52,6 +59,7 @@ export class ActivityPort extends ClassicPreset.Socket { if (!this.isControl) { this.dataModel.set(portTypeToDataModel(portDef.type)); } + this.isMulti = isInput && !this.isControl && (portDef as InPortDef)?.isMulti; } isCompatibleWith(target: ActivityPort) { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss index 0a603b70..1d18cf7d 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.scss @@ -69,19 +69,19 @@ } .control-inport { - margin-left: -$control-port-size / 2; + margin-left: calc(-#{$control-port-size} / 2); } .data-inport { - margin-left: -$data-port-size / 2; + margin-left: calc(-#{$data-port-size} / 2); } .control-outport { - margin-right: -$control-port-size / 2; + margin-right: calc(-#{$control-port-size} / 2); } .data-outport { - margin-right: -$data-port-size / 2; + margin-right: calc(-#{$data-port-size} / 2); } #activity-notes { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts index 71aed526..c95edb55 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts @@ -136,6 +136,7 @@ export class ActivityNode extends ClassicPreset.Node { height = 270; readonly activityId = this.activity.id; + readonly def = this.activity.def; readonly displayName = this.activity.displayName; readonly rendering = this.activity.rendering; readonly state = this.activity.state.asReadonly(); @@ -175,22 +176,21 @@ export class ActivityNode extends ClassicPreset.Node { [FAIL_CONTROL_KEY]: this.outputs[FAIL_CONTROL_KEY] as ClassicPreset.Output }; - const def = activity.def; // data ports - def.inPorts.forEach((inPort, i) => { - const input = new ClassicPreset.Input(new ActivityPort(inPort, true, null, this.state), null, false); + this.def.inPorts.forEach((inPort, i) => { + const input = new ClassicPreset.Input(new ActivityPort(inPort, true, null, this.state), null, inPort.isMulti); this.addInput(ActivityNode.getDataPortKey(i), input); this.dataInputs[ActivityNode.getDataPortKey(i)] = input; }); - def.outPorts.forEach((outPort, i) => { + this.def.outPorts.forEach((outPort, i) => { const output = new ClassicPreset.Output(new ActivityPort(outPort, false, null, this.state), null, true); this.addOutput(ActivityNode.getDataPortKey(i), new ClassicPreset.Output(new ActivityPort(outPort, false, null, this.state), null, true)); this.dataOutputs[ActivityNode.getDataPortKey(i)] = output; }); this.height += Math.max(0, - (def.inPorts.length - 3) * 34, - (def.outPorts.length - 2) * 34 + (this.def.inPorts.length - 3) * 34, + (this.def.outPorts.length - 2) * 34 ); } @@ -206,6 +206,17 @@ export class ActivityNode extends ClassicPreset.Node { return key === IN_CONTROL_KEY || key === SUCCESS_CONTROL_KEY || key === FAIL_CONTROL_KEY; } + /** + * Takes multi-inputs into account. + */ + public getInDataPortKey(index: number) { + const count = this.activity.def.inPorts.length; + if (index >= count) { + return ActivityNode.getDataPortKey(count - 1); + } + return ActivityNode.getDataPortKey(index); + } + execute() { this.executeActivitySubject.next(this.activityId); } diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html index 0c5ee81a..44db0af0 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html @@ -5,4 +5,9 @@
    +
    + +
    + {{ data.multiIdx }}
    \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss index 6af73c0c..37fb6165 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss @@ -46,4 +46,11 @@ svg { i.state-INACTIVE { color: var(--cui-danger); } +} + +.multi-index { + position: absolute; + transform: translate(-50%, -150%); + z-index: 1; + user-select: none; } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts index dab0600e..a3163554 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts @@ -40,21 +40,28 @@ export class Edge extends ClassicPreset.Connection readonly sourceActivityId: string; // activityId readonly targetActivityId: string; // activityId readonly center = signal({x: 0, y: 0, angle: 0}); + isMulti = false; + multiIdx = 0; constructor(source: N, sourceOutput: keyof N['outputs'], target: N, targetInput: keyof N['inputs'], + public readonly toIdx: number, // for multi-port: can differ from socket public readonly isControl: boolean, public readonly state: Signal) { super(source, sourceOutput, target, targetInput); this.sourceActivityId = source.activityId; this.targetActivityId = target.activityId; + if (!isControl && target.def.inPorts[ActivityNode.getDataPortIndexFromKey(targetInput as string)].isMulti) { + this.isMulti = true; + this.multiIdx = toIdx + 1 - target.def.inPorts.length; + } } public static createDataEdge(from: ActivityNode, fromPort: number, to: ActivityNode, toPort: number, state: Signal) { - return new Edge(from, ActivityNode.getDataPortKey(fromPort), to, ActivityNode.getDataPortKey(toPort), false, state); + return new Edge(from, ActivityNode.getDataPortKey(fromPort), to, to.getInDataPortKey(toPort), toPort, false, state); } public static createControlEdge(from: ActivityNode, to: ActivityNode, fromPort: number, state: Signal) { const isSuccess = fromPort === 0; - return new Edge(from, isSuccess ? SUCCESS_CONTROL_KEY : FAIL_CONTROL_KEY, to, IN_CONTROL_KEY, true, state); + return new Edge(from, isSuccess ? SUCCESS_CONTROL_KEY : FAIL_CONTROL_KEY, to, IN_CONTROL_KEY, 0, true, state); } getFromPort() { @@ -66,25 +73,10 @@ export class Edge extends ClassicPreset.Connection } } - getToPort() { - if (this.isControl) { - return 0; - } else { - // @ts-ignore - return ActivityNode.getDataPortIndexFromKey(this.targetInput); - } - } - - isEquivalent(edge: EdgeModel) { - return edge.isControl === this.isControl - && edge.fromId === this.sourceActivityId && edge.fromPort === this.getFromPort() - && edge.toId === this.targetActivityId && edge.toPort === this.getToPort(); - } - toModel(): EdgeModel { return { fromId: this.sourceActivityId, fromPort: this.getFromPort(), - toId: this.targetActivityId, toPort: this.getToPort(), + toId: this.targetActivityId, toPort: this.toIdx, isControl: this.isControl }; } diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts index a3c4037b..1ae414c6 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor-utils.ts @@ -27,8 +27,10 @@ export function getMagneticConnectionProps(editor: NodeEditor, createEd if (!ActivityNode.isControlPortKey(target.key)) { const connectionsToRemove = editor.getConnections().filter(c => c.target === target.nodeId && c.targetInput === target.key); - for (const c of connectionsToRemove) { - await editor.removeConnection(c.id); // the edge add request could be sent before remove, but this is not a problem + if (!connectionsToRemove[0]?.isMulti) { + for (const c of connectionsToRemove) { + await editor.removeConnection(c.id); // the edge add request could be sent before remove, but this is not a problem + } } } createEdgeSubject.next(socketsToEdgeModel(source, target, editor)); @@ -50,11 +52,19 @@ export function getMagneticConnectionProps(editor: NodeEditor, createEd export function socketsToEdgeModel(source: SocketData, target: SocketData, editor: NodeEditor) { const isControl = target.key === IN_CONTROL_KEY; + const toNode = editor.getNode(target.nodeId); + let toPort = 0; + if (!isControl) { + toPort = ActivityNode.getDataPortIndexFromKey(target.key); + if (toNode.def.inPorts[toPort].isMulti) { + toPort += editor.getConnections().filter(c => c.target === target.nodeId && c.isMulti).length; + } + } return { fromId: editor.getNode(source.nodeId).activityId, - toId: editor.getNode(target.nodeId).activityId, + toId: toNode.activityId, fromPort: isControl ? (source.key === SUCCESS_CONTROL_KEY ? 0 : 1) : ActivityNode.getDataPortIndexFromKey(source.key), - toPort: isControl ? 0 : ActivityNode.getDataPortIndexFromKey(target.key), + toPort: toPort, isControl: target.key === IN_CONTROL_KEY }; } diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts index 41192f97..e8fc301f 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts @@ -11,8 +11,6 @@ import {addCustomBackground} from '../../../../../components/polyalg/polyalg-vie import {ReadonlyPlugin} from 'rete-readonly-plugin'; import {setupPanningBoundary} from '../../../../../components/polyalg/polyalg-viewer/panning-boundary'; import {AutoArrangePlugin} from 'rete-auto-arrange-plugin'; -import {WorkflowsService} from '../../../services/workflows.service'; -import {ActivityRegistry} from '../../../models/activity-registry.model'; import {debounceTime, Subject, Subscription} from 'rxjs'; import {Position} from 'rete-angular-plugin/17/types'; import {canCreateConnection, computeCenter, getContextMenuItems, getMagneticConnectionProps, socketsToEdgeModel} from './workflow-editor-utils'; @@ -36,7 +34,6 @@ export class WorkflowEditor { private panningBoundary: { destroy: any; }; private workflow: Workflow; - private readonly registry: ActivityRegistry; private readonly translateSubjects: { [key: string]: Subject } = {}; // debounce the translation of activities private readonly debouncedTranslateSubject = new Subject<{ activityId: string, pos: Position }>(); private readonly DEBOUNCE_TIME_MS = 100; @@ -50,10 +47,9 @@ export class WorkflowEditor { private readonly openCheckpointSubject = new Subject<[string, boolean, number]>(); // activityId, isInput, portIdx private readonly subscriptions = new Subscription(); - constructor(private injector: Injector, container: HTMLElement, private readonly _workflows: WorkflowsService, private readonly isReadOnly: boolean) { + constructor(private injector: Injector, container: HTMLElement, private readonly isReadOnly: boolean) { this.area = new AreaPlugin(container); this.render = new AngularPlugin({injector}); - this.registry = _workflows.getRegistry(); this.render.addPreset( Presets.classic.setup({ @@ -295,7 +291,13 @@ export class WorkflowEditor { const edgeString = edgeToString(edge); this.connectionMap.set(edgeString, connection); - await this.editor.addConnection(connection); + + if (connection.isMulti) { + // enforce adding the connections in the correct order + setTimeout(() => this.editor.addConnection(connection), connection.multiIdx); + } else { + await this.editor.addConnection(connection); + } } private removeNode(activityId: string) { @@ -311,7 +313,12 @@ export class WorkflowEditor { private removeConnection(edgeString: string) { const connection = this.connectionMap.get(edgeString); if (this.editor.getConnection(connection.id)) { // connection might already have been deleted - this.editor.removeConnection(connection.id); + if (connection.isMulti) { + // require because of a weird bug with rete.js => enforce ordered removal + setTimeout(() => this.editor.removeConnection(connection.id), connection.multiIdx); + } else { + this.editor.removeConnection(connection.id); + } } this.connectionMap.delete(edgeString); diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index 613d1ba8..1ee90c10 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -82,7 +82,7 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { const el = this.container.nativeElement; if (el) { - this.editor = new WorkflowEditor(this.injector, el, this._workflows, !this.isEditable); + this.editor = new WorkflowEditor(this.injector, el, !this.isEditable); this._workflows.getActiveWorkflow(this.sessionId).subscribe({ next: res => { this.workflow = new Workflow(res, this.registry, this.injector); diff --git a/src/app/plugins/workflows/models/activity-registry.model.ts b/src/app/plugins/workflows/models/activity-registry.model.ts index 49c65666..b266be2c 100644 --- a/src/app/plugins/workflows/models/activity-registry.model.ts +++ b/src/app/plugins/workflows/models/activity-registry.model.ts @@ -176,6 +176,7 @@ export interface InPortDef { type: PortType; description: string; isOptional: boolean; + isMulti: boolean; } export interface OutPortDef { From 7a70eac45127241e5c2a85f6444b3d79dcfe56b8 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Mon, 27 Jan 2025 19:02:18 +0100 Subject: [PATCH 31/68] Introduce new setting types --- .../editor/activity/activity.component.html | 4 +- .../workflow-viewer/editor/workflow-editor.ts | 22 ++++--- .../left-menu/left-menu.component.html | 6 +- .../activity-config-editor.component.html | 2 +- .../activity-settings.component.html | 12 ++++ .../collation-setting.component.html | 41 +++++++++++++ .../collation-setting.component.scss | 16 +++++ .../collation-setting.component.ts | 60 +++++++++++++++++++ .../enum-setting/enum-setting.component.html | 9 +++ .../enum-setting/enum-setting.component.scss | 0 .../enum-setting/enum-setting.component.ts | 26 ++++++++ .../field-select-setting.component.html | 5 +- .../field-select-setting.component.scss | 4 +- .../int-setting/int-setting.component.ts | 2 - .../string-setting.component.html | 17 +++++- .../string-setting.component.ts | 44 ++++++++++++-- .../workflow-viewer.component.html | 4 +- .../workflow-viewer.component.ts | 2 +- .../models/activity-registry.model.ts | 2 + src/app/plugins/workflows/workflows.module.ts | 6 +- 20 files changed, 253 insertions(+), 31 deletions(-) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/collation-setting/collation-setting.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/collation-setting/collation-setting.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/collation-setting/collation-setting.component.ts create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/enum-setting/enum-setting.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/enum-setting/enum-setting.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/enum-setting/enum-setting.component.ts diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html index 29322a64..1d39dff2 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html @@ -27,7 +27,7 @@
    {{ data.commonType() (pointerdown)="$event.stopPropagation()"> - @@ -56,7 +56,7 @@
    {{ data.commonType()
    -

    {{ data.displayName() }}

    +

    {{ data.displayName() }}

    From 3038f01037c44aee965f457952282db3e574a5b7 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Tue, 11 Feb 2025 18:11:47 +0100 Subject: [PATCH 43/68] Small visual improvements --- .../data-card/data-card.component.html | 2 +- .../data-card/data-card.component.scss | 6 ++++++ .../data-view/data-table/entity-config.ts | 1 + .../data-template/data-template.component.ts | 4 +++- .../workflow-session.component.ts | 3 +++ .../editor/edge/edge.component.html | 2 +- .../editor/edge/edge.component.scss | 4 ++++ .../editor/edge/edge.component.ts | 11 +++-------- .../field-select-setting.component.ts | 2 +- .../filter-setting/filter-setting.component.ts | 1 + .../workflow-viewer.component.html | 18 +++++++++++------- .../workflow-viewer.component.ts | 8 ++++++++ .../services/checkpoint-viewer.service.ts | 7 +++++-- 13 files changed, 48 insertions(+), 21 deletions(-) diff --git a/src/app/components/data-view/data-card/data-card.component.html b/src/app/components/data-view/data-card/data-card.component.html index cf21b764..b52cc33d 100644 --- a/src/app/components/data-view/data-card/data-card.component.html +++ b/src/app/components/data-view/data-card/data-card.component.html @@ -2,7 +2,7 @@ (no data to show)
    -
    +
    = signal(this._route.snapshot.paramMap.get('id')); protected readonly routeParams = toSignal(this._route.params); diff --git a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts index 19956901..cf8b2a08 100644 --- a/src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts +++ b/src/app/plugins/workflows/components/workflow-session/workflow-session.component.ts @@ -80,6 +80,9 @@ export class WorkflowSessionComponent implements OnInit, OnDestroy {
    `; }; + renderer.codespan = (code) => { + return `${code}`; + }; const defaultHeadingRenderer = renderer.heading.bind(renderer); renderer.heading = (text: string, level: number, raw: string) => { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html index 44db0af0..864d1fb7 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.html @@ -1,6 +1,6 @@ + [class.is-control]="isControl" [class.is-magnetic]="data.isMagnetic" [class.is-fail-control]="isFailControl"/>
    diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss index 37fb6165..e5cfb1f0 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.scss @@ -24,6 +24,10 @@ svg { &.is-control { stroke-dasharray: 16, 8; stroke-width: 3px; + + &.is-fail-control { + stroke-dasharray: 16, 4, 3, 4; + } } &.is-magnetic { diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts index a3163554..a31dc44a 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/edge/edge.component.ts @@ -1,4 +1,4 @@ -import {Component, computed, Input, OnInit, signal, Signal} from '@angular/core'; +import {Component, Input, OnInit, signal, Signal} from '@angular/core'; import {ClassicPreset} from 'rete'; import {ActivityNode, FAIL_CONTROL_KEY, IN_CONTROL_KEY, SUCCESS_CONTROL_KEY} from '../activity/activity.component'; import {EdgeModel, EdgeState} from '../../../../models/workflows.model'; @@ -15,6 +15,7 @@ export class EdgeComponent implements OnInit { @Input() path: string; isControl = false; + isFailControl = false; center: Signal<{ x: number, y: number, angle: number }>; ngOnInit(): void { @@ -24,19 +25,13 @@ export class EdgeComponent implements OnInit { } else { this.isControl = this.data.isControl; } + this.isFailControl = this.data.sourceOutput === FAIL_CONTROL_KEY; this.center = this.data.center; } } -export const EDGE_COLOR_MAP = { - [EdgeState.IDLE]: 'black', - [EdgeState.ACTIVE]: 'green', - [EdgeState.INACTIVE]: 'red' -}; - export class Edge extends ClassicPreset.Connection { isMagnetic = false; - readonly edgeColor = computed(() => EDGE_COLOR_MAP[this.state()]); readonly sourceActivityId: string; // activityId readonly targetActivityId: string; // activityId readonly center = signal({x: 0, y: 0, angle: 0}); diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts index 9009c86e..69dbd6b1 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts @@ -32,7 +32,7 @@ export class FieldSelectSettingComponent { fields = computed(() => { const tp = this.targetPreview(); if (tp.portType === 'REL') { - return tp.columns?.map(c => c.name) || []; + return tp.columns?.map(c => c.name).filter(name => name !== PK_COL) || []; } else if (tp.portType === 'DOC') { return tp.fields || []; } else if (tp.portType === 'LPG') { diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/filter-setting/filter-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/filter-setting/filter-setting.component.ts index 79591402..7b693899 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/filter-setting/filter-setting.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/filter-setting/filter-setting.component.ts @@ -54,6 +54,7 @@ export enum Operator { GREATER_THAN_EQUALS = '≥', LESS_THAN_EQUALS = '≤', REGEX = 'Matches Regex', + REGEX_NOT = 'Does Not Match Regex', NULL = 'Is Null', NON_NULL = 'Is Not Null', INCLUDED = 'In', diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html index 9fd25d83..b7d7a061 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -170,7 +170,7 @@
    Workflow Variables
    + (visibleChange)="_checkpoint.setModal($event)" scrollable="true" size="lg">
    {{ _checkpoint.selectedActivity().displayName() }}: Output {{ _checkpoint.selectedOutput() }}
    @@ -183,12 +183,16 @@
    {{ _checkpoint.selectedActivity().displayName() }}:
    - - -

    Only the first {{ _checkpoint.limit() }} of {{ _checkpoint.totalCount() }} elements are - shown.

    -     -     + @if (_checkpoint.isLimited()) { + + +

    Only the first {{ _checkpoint.limit() }} of {{ _checkpoint.totalCount() }} elements are + shown.

    +     +     + } @else { +

    The output contains {{ _checkpoint.totalCount() }} elements:

    + } diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index 3440767e..cf2fcfec 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -106,6 +106,14 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { execute() { if (!this.openedActivity() || [ActivityState.FINISHED, ActivityState.SAVED].includes(this.openedActivity().state()) || this.rightMenu.canSafelyNavigate()) { + const count = this.workflow.getActivities().filter(a => + a.state() !== ActivityState.FINISHED && a.state() !== ActivityState.SAVED) + .length; + if (count > 12) { + // TODO: remove arbitrary restriction as soon as bug does no longer occur. + this._toast.warn('Currently, only a limited number of activities can be executed at once. Until this issue is fixed, please instead execute specific target activities.'); + return; + } this._websocket.execute(); } } diff --git a/src/app/plugins/workflows/services/checkpoint-viewer.service.ts b/src/app/plugins/workflows/services/checkpoint-viewer.service.ts index f5d88d4d..3e9dcead 100644 --- a/src/app/plugins/workflows/services/checkpoint-viewer.service.ts +++ b/src/app/plugins/workflows/services/checkpoint-viewer.service.ts @@ -7,6 +7,7 @@ import {ActivityState} from '../models/workflows.model'; import {DataModel} from '../../../models/ui-request.model'; import {PortType} from '../models/activity-registry.model'; import {ToasterService} from '../../../components/toast-exposer/toaster.service'; +import {EntityConfig} from '../../../components/data-view/data-table/entity-config'; @Injectable() export class CheckpointViewerService { @@ -31,14 +32,16 @@ export class CheckpointViewerService { readonly limit = signal(0); readonly totalCount = signal(0); readonly isLimited = computed(() => this.totalCount() > this.limit()); - readonly config = {create: false, update: false, delete: false, sort: false, search: false, exploring: true, hideCreateView: true}; + readonly config: EntityConfig = { + create: false, update: false, delete: false, sort: false, search: false, + exploring: true, hideCreateView: true, cardRelWidth: true + }; constructor(private _websocket: WorkflowsWebSocketService, private _toast: ToasterService) { this._websocket.onMessage().subscribe(msg => this.handleWsMsg(msg)); effect(() => { if (this.showModal() && this.isWaitingForExecution() && this.selectedActivity().state() === ActivityState.SAVED) { - console.log('activity finished execution!'); this.isWaitingForExecution.set(false); this._websocket.getCheckpoint(this.selectedActivity().id, this.selectedOutput()); } From 916d6bbeeff5a9f7e40c7f14076ce05178a4eff1 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Wed, 12 Feb 2025 11:36:05 +0100 Subject: [PATCH 44/68] Add help component --- .../checkpoint-viewer.component.html | 60 ++++++ .../checkpoint-viewer.component.scss | 0 .../checkpoint-viewer.component.ts | 16 ++ .../workflow-help.component.html | 174 ++++++++++++++++++ .../workflow-help.component.scss | 3 + .../workflow-help/workflow-help.component.ts | 28 +++ .../workflow-viewer.component.html | 82 ++------- .../workflow-viewer.component.ts | 6 + src/app/plugins/workflows/workflows.module.ts | 6 +- 9 files changed, 307 insertions(+), 68 deletions(-) create mode 100644 src/app/plugins/workflows/components/checkpoint-viewer/checkpoint-viewer.component.html create mode 100644 src/app/plugins/workflows/components/checkpoint-viewer/checkpoint-viewer.component.scss create mode 100644 src/app/plugins/workflows/components/checkpoint-viewer/checkpoint-viewer.component.ts create mode 100644 src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.ts diff --git a/src/app/plugins/workflows/components/checkpoint-viewer/checkpoint-viewer.component.html b/src/app/plugins/workflows/components/checkpoint-viewer/checkpoint-viewer.component.html new file mode 100644 index 00000000..8c563039 --- /dev/null +++ b/src/app/plugins/workflows/components/checkpoint-viewer/checkpoint-viewer.component.html @@ -0,0 +1,60 @@ + + +
    {{ _checkpoint.selectedActivity().displayName() }}: + Output {{ _checkpoint.selectedOutput() }}
    + +     + + @if (_checkpoint.result() || _checkpoint.isLoading()) { +

    Waiting for execution to finish.

    +
    + +
    +
    + @if (_checkpoint.isLimited()) { + + +

    Only the first {{ _checkpoint.limit() }} of {{ _checkpoint.totalCount() }} elements are + shown.

    +     +     + } @else { +

    The output contains {{ _checkpoint.totalCount() }} elements:

    + } + +
    + } @else { +
    Output Preview
    +

    Data Model: {{ _checkpoint.outPreview().portType }}

    + @switch (_checkpoint.outPreview().portType) { + @case (PortType.REL) { + + } + @case (PortType.DOC) { +

    Fields (estimated): {{ _checkpoint.outPreview().fields | json }}

    + } + @case (PortType.LPG) { +

    Node Labels (estimated): {{ _checkpoint.outPreview().nodeLabels | json }}

    +

    Edge Labels (estimated): {{ _checkpoint.outPreview().edgeLabels | json }}

    + } + } + + +

    The requested checkpoint is currently not materialized. + Do you want to execute the activity to materialize its checkpoints?

    +

    This will also reset all its successor activities!

    +     + } +     + + + @if (!_checkpoint.result() && !_checkpoint.isLoading()) { + + } + +     diff --git a/src/app/plugins/workflows/components/checkpoint-viewer/checkpoint-viewer.component.scss b/src/app/plugins/workflows/components/checkpoint-viewer/checkpoint-viewer.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/plugins/workflows/components/checkpoint-viewer/checkpoint-viewer.component.ts b/src/app/plugins/workflows/components/checkpoint-viewer/checkpoint-viewer.component.ts new file mode 100644 index 00000000..7efc6616 --- /dev/null +++ b/src/app/plugins/workflows/components/checkpoint-viewer/checkpoint-viewer.component.ts @@ -0,0 +1,16 @@ +import {Component, inject} from '@angular/core'; +import {PortType} from '../../models/activity-registry.model'; +import {CheckpointViewerService} from '../../services/checkpoint-viewer.service'; + +@Component({ + selector: 'app-checkpoint-viewer', + templateUrl: './checkpoint-viewer.component.html', + styleUrl: './checkpoint-viewer.component.scss' +}) +export class CheckpointViewerComponent { + + protected readonly PortType = PortType; + + + readonly _checkpoint: CheckpointViewerService = inject(CheckpointViewerService); +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.html new file mode 100644 index 00000000..b5141b33 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.html @@ -0,0 +1,174 @@ + + +
    Help
    + +     + +     + + @switch (helpTab()) { + @case ("intro") { +

    Each workflow is made up of a set of reusable building blocks called activities. They are connected with + edges to form an acyclic graph that represents the flow of execution.

    + +
    Activities
    +

    Each activity has a status bar whose color indicates the activity state.

    +
      +
    • + Idle + the activity has not yet been executed. +
      • +
    • + Queued + the activity is waiting to be executed. +
      • +
    • + Executing + the activity is getting executed. Many activities also report the estimated progress in form of a progress bar. +
      • +
    • + Finished + the activity was successfully executed and its results can be viewed. +
      • +
    • + Failed + the execution was unsuccessful. Open the activity settings to see an error message. +
      • +
    • + Cancelled + the activity was queued for execution, but it was never executed. +
      • +
    + +

    + If a problem with an activity is detected, the execution cannot be started. + A warning sign is shown. + By clicking on it, a detailed problem description can be viewed. +

    + + +
    Data Models
    +

    Data flowing through the workflow can adhere to any of the data models supported by Polypheny:

    +
      +
    • + + relational model +
      • +
    • + + document model +
      • +
    • + + property graph model +
      • +
    +

    Outputs of one model can only be connected to inputs of a compatible data model. + Some activities have inputs that are agnostic to the data model + (). +

    + +
    Checkpoints
    + Without any optimizations enabled, each successfully executed + activity stores its outputs in form of a checkpoint. This is useful for iterative development of workflows and recoverability. +

    + Checkpoints can be viewed by clicking on the corresponding output symbol + . +

    + } + @case ("control") { +

    + Apart from defining the flow of data, the data edges also restrict the order in which activities are executed. + Oftentimes, more granular control over the execution order is required. We want to be able to + condition the execution of an activity on the success or failure of another activity. This is solved by control edges. + They enable conditional branching and error handling similar to try-catch structures in programming languages. +

    +

    Control edges are dashed lines starting at the + success or fail output of an activity and ending at a + control input. + The success output becomes active when the activity was successfully executed, the fail output becomes active when it failed. +

    + +
    Variables
    + Just like data edges, control edges also carry dynamic variables (see Variables). +

    A fail control edge also carries the error message of the failed activity, which can be useful for logging.

    + +
    Multiple Control Edges
    +

    If multiple edges are connected to a single control input, the logical AND is computed to determine whether the activity can be executed. + If we want to executed an activity if (at least) one of several activities fails, this behavior might not be desired. + The Control State Merger in the activity Configuration menu can be used to change it to the logical OR of all fail edges. +

    + + } + @case ("variables") { +

    + The workflow engine comes with a powerful variable system. It allows any activity setting value to be set dynamically. + There are three types of variables: +

    +
      +
    • Workflow Variables: They are defined in the Variables toolbar menu and do not change during execution. Every activity can access these variables.
      • +
    • Dynamic Variables: They are set dynamically by specialized activities and are propagated by both data and control edges.
      • +
    • Environment Variables: They work just like dynamic variables, but are intended to be used for secrets. + The actual variable values are only accessible by activities, not by the workflow editor. +
      • +
    + + } + @case ("optimization") { +

    + The creation of checkpoints is very resource intensive. Two kinds of optimizations can be enabled + in the workflow configuration to skip unnecessary checkpoints. This is done by executing all activities + in a subtree of compatible activities at the same time. +

    + +
    Fusion
    +

    + Depending on the activity type and setting values, some activities are pushed down to the query execution engine of Polypheny. + When activity fusion is enabled, such adjacent activities are fused into a single query plan and executed in one unit. This + can be a very powerful optimization, as the query optimizer of Polypheny can further optimize the plan. +

    + +
    Pipelining
    +

    + Most activities work on a tuple-by-tuple basis. The execution of such adjacent activities can be pipelined. + They are executed concurrently and bounded queues are used to transmit tuples between activities. +

    + +
    Enforcing Checkpoints
    +

    + Checkpoints for specific activities can be enforced from the activity Configuration. +

    + + } + } + + + + + + + diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.scss b/src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.scss new file mode 100644 index 00000000..4aabb3a8 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.scss @@ -0,0 +1,3 @@ +.help-nav a { + cursor: pointer; +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.ts new file mode 100644 index 00000000..b6c5eca2 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-help/workflow-help.component.ts @@ -0,0 +1,28 @@ +import {Component, signal} from '@angular/core'; +import {portTypeIcons, stateColors} from '../editor/activity/activity.component'; +import {ActivityState} from '../../../models/workflows.model'; +import {PortType} from '../../../models/activity-registry.model'; + +type HelpTabs = 'intro' | 'control' | 'variables' | 'optimization'; + +@Component({ + selector: 'app-workflow-help', + templateUrl: './workflow-help.component.html', + styleUrl: './workflow-help.component.scss' +}) +export class WorkflowHelpComponent { + + protected readonly stateColors = stateColors; + protected readonly portTypeIcons = portTypeIcons; + protected readonly ActivityState = ActivityState; + protected readonly PortType = PortType; + + + readonly helpTab = signal('intro'); + readonly showHelpModal = signal(false); + + + toggleHelpModal() { + this.showHelpModal.update(b => !b); + } +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html index b7d7a061..fa186c2a 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.html @@ -14,11 +14,11 @@

    {{ name }}

    - - - - - - - + - @@ -169,63 +174,6 @@
    Workflow Variables
    - - -
    {{ _checkpoint.selectedActivity().displayName() }}: - Output {{ _checkpoint.selectedOutput() }}
    - -     - - @if (_checkpoint.result() || _checkpoint.isLoading()) { -

    Waiting for execution to finish.

    -
    - -
    -
    - @if (_checkpoint.isLimited()) { - - -

    Only the first {{ _checkpoint.limit() }} of {{ _checkpoint.totalCount() }} elements are - shown.

    -     -     - } @else { -

    The output contains {{ _checkpoint.totalCount() }} elements:

    - } - -
    - } @else { -
    Output Preview
    -

    Data Model: {{ _checkpoint.outPreview().portType }}

    - @switch (_checkpoint.outPreview().portType) { - @case (PortType.REL) { - - } - @case (PortType.DOC) { -

    Fields (estimated): {{ _checkpoint.outPreview().fields | json }}

    - } - @case (PortType.LPG) { -

    Node Labels (estimated): {{ _checkpoint.outPreview().nodeLabels | json }}

    -

    Edge Labels (estimated): {{ _checkpoint.outPreview().edgeLabels | json }}

    - } - } + - -

    The requested checkpoint is currently not materialized. - Do you want to execute the activity to materialize its checkpoints?

    -

    This will also reset all its successor activities!

    -     - } -     - - - @if (!_checkpoint.result() && !_checkpoint.isLoading()) { - - } - -     + diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index cf2fcfec..bb4aa19e 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -16,6 +16,7 @@ import {CheckpointViewerService} from '../../services/checkpoint-viewer.service' import {Router} from '@angular/router'; import {ExecutionMonitorComponent} from './execution-monitor/execution-monitor.component'; import {PortType} from '../../models/activity-registry.model'; +import {WorkflowHelpComponent} from './workflow-help/workflow-help.component'; @Component({ selector: 'app-workflow-viewer', @@ -39,6 +40,7 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { @ViewChild('workflowConfigEditor') workflowConfigEditor: WorkflowConfigEditorComponent; @ViewChild('executionMonitor') executionMonitor: ExecutionMonitorComponent; @ViewChild('variableEditor') variableEditor: JsonEditorComponent; + @ViewChild('workflowHelp') workflowHelp: WorkflowHelpComponent; private readonly registry = this._workflows.getRegistry(); private readonly subscriptions = new Subscription(); @@ -305,6 +307,10 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { this.executionMonitor.show(); } + showHelpModal() { + this.workflowHelp.toggleHelpModal(); + } + openVariableModal() { this._workflows.getWorkflowVariables(this.sessionId).subscribe(variables => { this.workflow.variables.set(variables); diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index ff7e2ba2..e64fbe86 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -105,6 +105,8 @@ import {CollationSettingComponent} from './components/workflow-viewer/right-menu import {FieldRenameSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/field-rename-setting/field-rename-setting.component'; import {CastSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/cast-setting/cast-setting.component'; import {FilterSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/filter-setting/filter-setting.component'; +import {WorkflowHelpComponent} from './components/workflow-viewer/workflow-help/workflow-help.component'; +import {CheckpointViewerComponent} from './components/checkpoint-viewer/checkpoint-viewer.component'; @NgModule({ imports: [ @@ -217,7 +219,9 @@ import {FilterSettingComponent} from './components/workflow-viewer/right-menu/ac CollationSettingComponent, FieldRenameSettingComponent, CastSettingComponent, - FilterSettingComponent + FilterSettingComponent, + WorkflowHelpComponent, + CheckpointViewerComponent ], exports: [ WorkflowViewerComponent, From 3f1e24e257365cc74a8d25827baee83459ea99cd Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Thu, 13 Feb 2025 18:38:50 +0100 Subject: [PATCH 45/68] Add autocomplete for variables in string setting --- .../editor/activity-port/activity-port.component.ts | 4 ++-- .../workflow-viewer/left-menu/left-menu.component.html | 3 ++- .../workflow-viewer/left-menu/left-menu.component.ts | 2 ++ .../activity-settings/activity-settings.component.html | 1 + .../string-setting/string-setting.component.ts | 7 +++++-- 5 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts index f7b18b8c..29a9e0de 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity-port/activity-port.component.ts @@ -28,7 +28,7 @@ export class ActivityPortComponent implements OnChanges { if (this.data.isMulti) { title += 'Multiple Connections: '; } - title += this.data.dataModel(); + title += this.data.dataModel() || '?'; if (this.data.portDef['isOptional']) { title += ' (optional)'; } @@ -49,7 +49,7 @@ export class ActivityPortComponent implements OnChanges { export class ActivityPort extends ClassicPreset.Socket { public readonly isControl: boolean; public readonly isMulti: boolean; - public readonly dataModel = signal(null); // TODO: track data model state in workflow itself + public readonly dataModel = signal(null); constructor(public readonly portDef: InPortDef | OutPortDef, public readonly isInput: boolean, public readonly controlType: 'success' | 'fail' | 'in' | null, diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html index 604cf15b..bf992f49 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.html @@ -47,7 +47,8 @@
    {{ activity.displayName }}
    - + +
    diff --git a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts index 391b96ab..620d5740 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/left-menu/left-menu.component.ts @@ -20,6 +20,7 @@ export class LeftMenuComponent { readonly isRelational: Record = {}; readonly isDocument: Record = {}; readonly isGraph: Record = {}; + readonly isVariables: Record = {}; readonly dropdownCats: { id: number; itemName: string; }[] = []; // https://www.npmjs.com/package/angular2-multiselect-dropdown readonly dropdownSettings = { @@ -52,6 +53,7 @@ export class LeftMenuComponent { this.isRelational[type] = cats.includes(ActivityCategory.RELATIONAL); this.isDocument[type] = cats.includes(ActivityCategory.DOCUMENT); this.isGraph[type] = cats.includes(ActivityCategory.GRAPH); + this.isVariables[type] = cats.includes(ActivityCategory.VARIABLES); } this.filterList(); diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html index c18a139d..eb663c38 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html @@ -99,6 +99,7 @@
    Note
    } @case (SettingType.STRING) { diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.ts index 18c9bcd8..19a6eba0 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/string-setting/string-setting.component.ts @@ -1,6 +1,6 @@ import {Component, computed, effect, EventEmitter, input, model, Output, Signal, ViewChild} from '@angular/core'; import {SettingDefModel} from '../../../../../models/activity-registry.model'; -import {TypePreviewModel} from '../../../../../models/workflows.model'; +import {envVarsKey, TypePreviewModel, Variables, wfVarsKey} from '../../../../../models/workflows.model'; import {DataModel} from '../../../../../../../models/ui-request.model'; import {AdapterModel} from '../../../../../../../views/adapters/adapter.model'; import {CatalogService} from '../../../../../../../services/catalog.service'; @@ -15,6 +15,7 @@ export class StringSettingComponent { isEditable = input.required(); settingDef = input.required(); inTypePreview = input.required(); + activityVars = input.required(); value = model.required(); @Output() hasChanged = new EventEmitter(); @@ -33,6 +34,8 @@ export class StringSettingComponent { return []; case 'ADAPTERS': return this.adapters().map(a => a.name); + case 'VARIABLES': + return Object.keys(this.activityVars()).filter(key => key !== wfVarsKey && key !== envVarsKey); } } return []; @@ -93,7 +96,7 @@ export class StringSettingComponent { } } -type AutoCompleteType = 'NONE' | 'FIELD_NAMES' | 'VALUES' | 'ADAPTERS'; +type AutoCompleteType = 'NONE' | 'FIELD_NAMES' | 'VALUES' | 'ADAPTERS' | 'VARIABLES'; interface StringSettingDef extends SettingDefModel { minLength: number; From d217059c8cc8e009cb067ead68c330ba46b5822b Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Thu, 20 Feb 2025 10:50:49 +0100 Subject: [PATCH 46/68] Remove activity count restriction for bugfixing large workflows --- .../components/workflow-viewer/workflow-viewer.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index bb4aa19e..0c287128 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -111,7 +111,7 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { const count = this.workflow.getActivities().filter(a => a.state() !== ActivityState.FINISHED && a.state() !== ActivityState.SAVED) .length; - if (count > 12) { + if (count > 120) { // TODO: remove arbitrary restriction as soon as bug does no longer occur. this._toast.warn('Currently, only a limited number of activities can be executed at once. Until this issue is fixed, please instead execute specific target activities.'); return; From 2ad15ee26d02d83b14cbea7e6e82c938381c8e08 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Fri, 21 Feb 2025 18:48:47 +0100 Subject: [PATCH 47/68] Implement graph-map-setting --- .../editor/activity/activity.component.ts | 7 +- .../activity-settings.component.html | 7 + .../cast-setting/cast-setting.component.html | 13 +- .../double-setting.component.html | 2 +- .../field-select-setting.component.html | 23 +- .../field-select-setting.component.ts | 3 +- .../filter-setting.component.html | 2 +- .../graph-map-setting.component.html | 295 ++++++++++++++++++ .../graph-map-setting.component.scss | 0 .../graph-map-setting.component.ts | 220 +++++++++++++ .../models/activity-registry.model.ts | 1 + src/app/plugins/workflows/workflows.module.ts | 4 +- 12 files changed, 557 insertions(+), 20 deletions(-) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.ts diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts index 4754c889..04a593dd 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.ts @@ -90,7 +90,12 @@ export class ActivityComponent implements OnInit, OnChanges { }); Object.keys(this.data.dataInputs).forEach(key => { const idx = ActivityNode.getDataPortIndexFromKey(key); - this.inIcons[key] = computed(() => portTypeIcons[this.data.inPortTypes()[idx]]); + const inPort = this.data.def.inPorts[idx]; + if (inPort.isMulti && inPort.type === PortType.ANY) { + this.inIcons[key] = computed(() => portTypeIcons[PortType.ANY]); + } else { + this.inIcons[key] = computed(() => portTypeIcons[this.data.inPortTypes()[idx]]); + } }); Object.keys(this.data.dataOutputs).forEach(key => { const idx = ActivityNode.getDataPortIndexFromKey(key); diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html index eb663c38..aafa26c3 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html @@ -166,6 +166,13 @@
    Note
    [(value)]="editableSettings().get(setting.key).value"> } + @case (SettingType.GRAPH_MAP) { + + + } @default {

    unknown setting type

    } diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/cast-setting/cast-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/cast-setting/cast-setting.component.html index be20f4e4..834305a8 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/cast-setting/cast-setting.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/cast-setting/cast-setting.component.html @@ -94,33 +94,32 @@ -
    +
    @if (suggestions().length > 0) { + [placeholder]="'Source ' + fieldType() | titlecase"> } @else { + [(ngModel)]="addName" (input)="valueChanged()"> } @if (def().allowJson) { - + id="allow-json-cast" (change)="valueChanged()"> + }
    - diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.html index 88d47908..dcdc2adc 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/double-setting/double-setting.component.html @@ -1,3 +1,3 @@ \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html index aa20e4bc..76fa1d3f 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.html @@ -1,12 +1,19 @@ @if (def().simplified) { - - - - {{ item.itemName }} - - - + @if (isEditable()) { + + + + {{ item.itemName }} + + + + + } @else { + + + } } @else { diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts index 69dbd6b1..f1924e6c 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/field-select-setting/field-select-setting.component.ts @@ -67,7 +67,8 @@ export class FieldSelectSettingComponent { enableSearchFilter: true, enableCheckAll: true, enableFilterSelectAll: false, - addNewItemOnFilter: true + addNewItemOnFilter: true, + tagToBody: false }; constructor(private _toast: ToasterService) { diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/filter-setting/filter-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/filter-setting/filter-setting.component.html index 74c97d94..1ddedbd4 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/filter-setting/filter-setting.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/filter-setting/filter-setting.component.html @@ -10,7 +10,7 @@
      @for (condition of conditions(); track $index) { -
    • +
    • diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.html new file mode 100644 index 00000000..17bb3323 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.html @@ -0,0 +1,295 @@ + + @for (mapping of mappings(); track $index) { + + + + + +
      + @if (mapping.edgeOnly) { + + +
      + + @if (mapping.edge.dynamicEdgeLabels) { + + + } @else { + + } + + + + + +
      + + + + + + + + +
      Source Node
      +
      + + +
      + + + Input Index + + + + @if (mapping.edge.leftTargetIdx === -1) { +
      + + + +
      + } @else { + + + } + + +
      Target Node
      +
      + + +
      + + + Input Index + + + + @if (mapping.edge.rightTargetIdx === -1) { +
      + + + +
      + } @else { + + + } + + + } @else { + +
      + @if (mapping.dynamicNodeLabels) { + + + } @else { + + } + + + + + +
      +
      Outgoing Edges
      + +
        + @for (edge of mapping.edges; track idx; let idx = $index) { +
      • + + + +
        + @if (edge.dynamicEdgeLabels) { + + + } @else { + + } + + + + + +
        + + + @if (isEditable()) { + + + + {{ item.itemName }} + + + + } @else { + + + } + + + + + + +
        This Node
        + +
        + + +
        + + +
        Other Node
        + + Input Index + + + + @if (edge.rightTargetIdx === -1) { +
        + + + +
        + } @else { + + + } + + +         + + + +         +
        • + } +
      +       + + } +
      +       +       + } +       + +
      +
      + + Input Index + + + + + + + +
      + + +
      \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.ts new file mode 100644 index 00000000..548e69b0 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.ts @@ -0,0 +1,220 @@ +import {Component, computed, effect, EventEmitter, input, model, Output, signal} from '@angular/core'; +import {SettingDefModel} from '../../../../../models/activity-registry.model'; +import {PK_COL, TypePreviewModel} from '../../../../../models/workflows.model'; +import {ToasterService} from '../../../../../../../components/toast-exposer/toaster.service'; + + +@Component({ + selector: 'app-graph-map-setting', + templateUrl: './graph-map-setting.component.html', + styleUrl: './graph-map-setting.component.scss' +}) +export class GraphMapSettingComponent { + isEditable = input.required(); + settingDef = input.required(); + inTypePreview = input.required(); + inSuggestions = input.required(); + value = model.required(); + @Output() hasChanged = new EventEmitter(); + + protected readonly parseInt = parseInt; + + private changed = signal(false); // dummy signal to trigger recomputation + mappings = computed(() => this.value().mappings as InputMapping[]); // like value, but with correct type + def = computed(() => this.settingDef() as GraphMapSettingDef); + targetPreviews = computed(() => this.inTypePreview().slice(this.def().targetInput)); + suggestions = computed(() => this.inSuggestions().slice(this.def().targetInput).map(s => s.filter(v => v !== PK_COL) || [])); + graphNodeLabels = computed(() => { + if (!this.def().canExtendGraph || this.def().graphInput < 0) { + return []; + } + return this.inTypePreview()[this.def().graphInput]?.nodeLabels || []; + }); + nInputs = computed(() => this.suggestions().length); + remainingInputs = computed(() => { + this.changed(); + const indexes = []; + for (let i = 0; i < this.nInputs(); i++) { + if (!this.mappings().some(m => m.inputIdx === i)) { + indexes.push(i); + } + } + if (this.addIdx === null) { + this.addIdx = indexes[0]; + } + return indexes; + }); + + addIdx = null; + addEdgeOnly = false; + + // https://www.npmjs.com/package/angular2-multiselect-dropdown + readonly propertiesSettings = { + singleSelection: false, + text: 'Add Edge Properties...', + noDataLabel: 'No fields found', + searchPlaceholderText: 'Search or add new', + enableSearchFilter: true, + enableCheckAll: false, + enableFilterSelectAll: false, + addNewItemOnFilter: true, + tagToBody: false + }; + fieldsData = computed(() => this.suggestions().map(fields => + fields.map(field => ({id: field, itemName: field})) + )); + propertiesData: Map = new Map(); // required since multiselect expects specific structure of items + + constructor(private _toast: ToasterService) { + effect(() => { + this.changed(); + for (const mapping of this.mappings()) { + if (!mapping.edgeOnly) { + for (const [index, edge] of mapping.edges.entries()) { + const items = edge.propertyFields.map(field => ({id: field, itemName: field})); + this.propertiesData.set(mapping.inputIdx + '_' + index, items); + + } + } + } + }); + } + + valueChanged() { + this.changed.update(v => !v); + setTimeout(() => this.hasChanged.emit(), 1); + } + + addMapping() { + const inputIdx = parseInt(String(this.addIdx), 10); + if (!this.remainingInputs().includes(inputIdx)) { + console.log(inputIdx, typeof (inputIdx)); + console.log(this.remainingInputs(), typeof (this.remainingInputs())); + this._toast.warn('A mapping for this input already exists: ' + inputIdx + ', ' + this.remainingInputs()); + return; + } + if (this.addEdgeOnly) { + this.mappings().push({ + edgeOnly: true, inputIdx, + edge: { + dynamicEdgeLabels: false, edgeLabels: ['EDGE'], + leftField: '', leftTargetIdx: 0, leftTargetField: '', + rightField: '', rightTargetIdx: 0, rightTargetField: '', + invertDirection: false, + } + }); + } else { + this.mappings().push({ + edgeOnly: false, inputIdx, + dynamicNodeLabels: false, nodeLabels: ['Node'], edges: [] + }); + } + if (this.remainingInputs().length > 1) { + this.addIdx = this.remainingInputs().find(i => i !== this.addIdx); + } + + + this.valueChanged(); + } + + deleteMapping(idx: number) { + const removed = this.mappings().splice(idx, 1)[0]; // idx is different to inputIdx + if (!this.remainingInputs().includes(this.addIdx)) { + this.addIdx = removed.inputIdx; + } + this.valueChanged(); + } + + addEdge(mapping: InputMapping) { + mapping.edges.push({ + dynamicEdgeLabels: false, edgeLabels: ['EDGE'], + rightField: '', rightTargetIdx: 0, rightTargetField: '', + invertDirection: false, propertyFields: [] + }); + this.valueChanged(); + } + + deleteEdge(mapping: InputMapping, idx: number) { + mapping.edges.splice(idx, 1); + this.valueChanged(); + } + + addProperty(edge: EdgeMapping, fieldName: string) { + if (edge.propertyFields.includes(fieldName)) { + this._toast.warn('Duplicate field names are not permitted'); + return; + } + edge.propertyFields.push(fieldName); + this.valueChanged(); + } + + propertyDataChange(edge: EdgeMapping, event: { id: string; itemName: string; }[]) { + edge.propertyFields = event.map(e => e.id); + this.valueChanged(); + } + + getLabel(targetField: string) { + // string is either label.property or property + const i = targetField.indexOf('.'); + if (i < 1) { + return ''; + } + return targetField.substring(0, i); + } + + getProperty(targetField: string) { + const i = targetField.indexOf('.'); + return i !== -1 ? targetField.substring(i + 1) : targetField; + } + + replaceLabel(targetField: string, label: string) { + if (label.trim().length === 0) { + return this.getProperty(targetField); + } + return label + '.' + this.getProperty(targetField); + } + + replaceProperty(targetField: string, property: string) { + if (targetField.indexOf('.') < 1) { + return property; + } + return this.getLabel(targetField) + '.' + property; + } + +} + + +interface GraphMapSettingDef extends SettingDefModel { + canExtendGraph: boolean; + targetInput: number; + graphInput: number; +} + +interface InputMapping { + edgeOnly: boolean; + inputIdx: number; + + // node + dynamicNodeLabels?: boolean; + nodeLabels?: string[]; + edges?: EdgeMapping[]; + + // edge + edge?: EdgeMapping; +} + +interface EdgeMapping { + dynamicEdgeLabels: boolean; + edgeLabels: string[]; + + leftField?: string; + leftTargetIdx?: number; + leftTargetField?: string; + + rightField: string; + rightTargetIdx: number; + rightTargetField: string; + + invertDirection: boolean; + propertyFields?: string[]; +} diff --git a/src/app/plugins/workflows/models/activity-registry.model.ts b/src/app/plugins/workflows/models/activity-registry.model.ts index a0a02a78..cd894824 100644 --- a/src/app/plugins/workflows/models/activity-registry.model.ts +++ b/src/app/plugins/workflows/models/activity-registry.model.ts @@ -258,6 +258,7 @@ export enum SettingType { FIELD_RENAME = 'FIELD_RENAME', CAST = 'CAST', FILTER = 'FILTER', + GRAPH_MAP = 'GRAPH_MAP', } export interface SettingDefModel { diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index e64fbe86..a40efe3d 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -107,6 +107,7 @@ import {CastSettingComponent} from './components/workflow-viewer/right-menu/acti import {FilterSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/filter-setting/filter-setting.component'; import {WorkflowHelpComponent} from './components/workflow-viewer/workflow-help/workflow-help.component'; import {CheckpointViewerComponent} from './components/checkpoint-viewer/checkpoint-viewer.component'; +import {GraphMapSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component'; @NgModule({ imports: [ @@ -221,7 +222,8 @@ import {CheckpointViewerComponent} from './components/checkpoint-viewer/checkpoi CastSettingComponent, FilterSettingComponent, WorkflowHelpComponent, - CheckpointViewerComponent + CheckpointViewerComponent, + GraphMapSettingComponent ], exports: [ WorkflowViewerComponent, From 3f98f5a411df43c7bfe8b72aa5f1fe5a1fee7db5 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Mon, 24 Feb 2025 17:32:09 +0100 Subject: [PATCH 48/68] Support dynamic display names --- .../editor/activity/activity.component.html | 2 +- .../field-select-setting.component.ts | 12 +++++++----- .../filter-setting.component.ts | 4 +++- .../right-menu/right-menu.component.html | 4 ++-- .../right-menu/right-menu.component.ts | 6 ++++-- .../workflow-viewer.component.ts | 3 ++- .../components/workflow-viewer/workflow.ts | 19 +++++++++++++++---- .../workflows/models/workflows.model.ts | 1 + .../workflows/models/ws-response.model.ts | 1 + 9 files changed, 36 insertions(+), 16 deletions(-) diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html index a2173e93..717eafc9 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/activity/activity.component.html @@ -60,7 +60,7 @@
      -

      {{ data.displayName() }}

      +

      {{ data.displayName() }}

      + +
      + + + +
      + +
      +       + + diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss index 4d86c1ec..488741c2 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.scss @@ -12,6 +12,12 @@ text-overflow: ellipsis; } +.workflow-name-btn:hover { + background-color: var(--cui-light); + border-radius: var(--cui-border-radius); + cursor: pointer; +} + [rete-context-menu] { // Also see global style.scss .block { @@ -31,4 +37,9 @@ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; +} + +.description-textarea { + height: 12em !important; + resize: none; } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts index b6256ab1..58e2da5e 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/workflow-viewer.component.ts @@ -6,7 +6,7 @@ import {ActivityUpdateResponse, ErrorResponse, ProgressUpdateResponse, Rendering import {filter, Subscription} from 'rxjs'; import {Position} from 'rete-angular-plugin/17/types'; import {Activity, Workflow} from './workflow'; -import {ActivityState, SessionModel, WorkflowState} from '../../models/workflows.model'; +import {ActivityState, SessionModel, WorkflowDefModel, WorkflowState} from '../../models/workflows.model'; import {RightMenuComponent} from './right-menu/right-menu.component'; import {switchMap, tap} from 'rxjs/operators'; import {WorkflowConfigEditorComponent} from './workflow-config-editor/workflow-config-editor.component'; @@ -15,8 +15,8 @@ import {JsonEditorComponent} from '../../../../components/json/json-editor.compo import {CheckpointViewerService} from '../../services/checkpoint-viewer.service'; import {Router} from '@angular/router'; import {ExecutionMonitorComponent} from './execution-monitor/execution-monitor.component'; -import {PortType} from '../../models/activity-registry.model'; import {WorkflowHelpComponent} from './workflow-help/workflow-help.component'; +import {WORKFLOW_DESCRIPTION_LENGTH} from '../workflows-dashboard/workflows-dashboard.component'; @Component({ selector: 'app-workflow-viewer', @@ -30,12 +30,14 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { @Input() isEditable: boolean; @Input() name: string; @Input() canTerminate = true; + @Input() workflowDef?: WorkflowDefModel; @Output() saveWorkflowEvent = new EventEmitter(); @Output() close = new EventEmitter(); @Output() terminate = new EventEmitter(); @Output() openNested = new EventEmitter(); @Output() reloadViewer = new EventEmitter(); + @Output() rename = new EventEmitter<{ name: string, description: string }>(); @ViewChild('rete') container!: ElementRef; @ViewChild('leftMenu') leftMenu: RightMenuComponent; @@ -62,7 +64,10 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { readonly editedVariables = signal(null); readonly hasVariablesChanged = computed(() => this.serializedVariables?.() !== this.editedVariables()); - protected readonly PortType = PortType; + + readonly showRenameModal = signal(false); + readonly renameData = {name: '', description: ''}; + protected readonly WORKFLOW_DESCRIPTION_LENGTH = WORKFLOW_DESCRIPTION_LENGTH; constructor( @@ -382,4 +387,17 @@ export class WorkflowViewerComponent implements OnInit, OnDestroy { notes: null }); } + + openRenameModal() { + if (this.workflowDef) { + this.renameData.name = this.workflowDef.name; + this.renameData.description = this.workflowDef.description; + } + this.showRenameModal.set(true); + } + + renameWorkflow() { + this.rename.emit({...this.renameData}); + this.showRenameModal.set(false); + } } diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html index 75ad70a8..1b999344 100644 --- a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.html @@ -78,27 +78,42 @@

      + +

    -
    - - - - +
    +
    + + + {{ expandedDescriptions.has( def.id ) ? 'Hide Description' : 'Show Description' }} + +
    +
    +
    {{ def.def.description }}
    +
    +
    @@ -127,6 +142,11 @@
    {{ def.def.name }}
    + + +
    + + + + +
    Set Workflow Description
    + +     + + Give a brief description of the workflow (maximal {{ MAX_DESCRIPTION_LENGTH }} characters). +
    + + +
    +     + + +
    + +
    +     +     \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.scss b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.scss index d5872445..9ac3ebc3 100644 --- a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.scss +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.scss @@ -16,4 +16,15 @@ h4 .badge { width: 90px; +} + +.expanded-description { + white-space: pre-line; + max-height: 12em; + overflow-y: auto; +} + +.description-textarea { + height: 12em; + resize: none; } \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts index 6a02d9c4..51f7b2d1 100644 --- a/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts +++ b/src/app/plugins/workflows/components/workflows-dashboard/workflows-dashboard.component.ts @@ -8,6 +8,9 @@ import {SidebarNode} from '../../../../models/sidebar-node.model'; import {retry} from 'rxjs'; import {WebuiSettingsService} from '../../../../services/webui-settings.service'; + +export const WORKFLOW_DESCRIPTION_LENGTH = 1024; + @Component({ selector: 'app-workflows-dashboard', templateUrl: './workflows-dashboard.component.html', @@ -45,6 +48,12 @@ export class WorkflowsDashboardComponent implements OnInit, OnDestroy { copyWorkflowName = ''; copyWorkflowGroup = ''; + showDescriptionModal = signal(false); + workflowToModify: { id: string, def: WorkflowDefModel } = null; + updatedWorkflowDescription = ''; + expandedDescriptions = new Set(); + readonly MAX_DESCRIPTION_LENGTH = WORKFLOW_DESCRIPTION_LENGTH; + protected readonly Object = Object; constructor() { @@ -224,6 +233,15 @@ export class WorkflowsDashboardComponent implements OnInit, OnDestroy { this.showCopyModal.set(true); } + openDescriptionModal(id: string) { + if (this.showDescriptionModal()) { + return; + } + this.workflowToModify = {id, def: this.workflowDefs[id]}; + this.updatedWorkflowDescription = this.workflowDefs[id].description; + this.showDescriptionModal.set(true); + } + changeName(workflowId: string, name: string) { this._workflows.renameWorkflow(workflowId, name).subscribe({ next: () => { @@ -244,6 +262,17 @@ export class WorkflowsDashboardComponent implements OnInit, OnDestroy { }); } + changeDescription() { + this.showDescriptionModal.set(false); + this._workflows.renameWorkflow(this.workflowToModify.id, null, null, this.updatedWorkflowDescription).subscribe({ + next: () => { + this._toast.success('Successfully changed workflow description', 'Change Workflow Description'); + this.getWorkflowDefs(); + }, + error: e => this._toast.error(e.error, 'Unable to change workflow description') + }); + } + onFileChange(files: any[]) { if (!files || files.length === 0) { this.uploadedWorkflow = null; @@ -291,4 +320,12 @@ export class WorkflowsDashboardComponent implements OnInit, OnDestroy { error: err => this._toast.error(err.error) }); } + + toggleExpandDescription(id: string) { + if (this.expandedDescriptions.has(id)) { + this.expandedDescriptions.delete(id); + } else { + this.expandedDescriptions.add(id); + } + } } diff --git a/src/app/plugins/workflows/models/workflows.model.ts b/src/app/plugins/workflows/models/workflows.model.ts index 437d1d8e..d0469849 100644 --- a/src/app/plugins/workflows/models/workflows.model.ts +++ b/src/app/plugins/workflows/models/workflows.model.ts @@ -102,6 +102,7 @@ export interface ActivityConfigModel { commonType: CommonType; controlStateMerger: ControlStateMerger; expectedOutcome: ExpectedOutcome; + logErrors: boolean; } export interface RenderModel { @@ -187,6 +188,7 @@ export interface WorkflowDefModel { name: string; versions: Record; group: string; + description: string; } export interface VersionInfo { diff --git a/src/app/plugins/workflows/services/workflows.service.ts b/src/app/plugins/workflows/services/workflows.service.ts index b898c394..1acbecb2 100644 --- a/src/app/plugins/workflows/services/workflows.service.ts +++ b/src/app/plugins/workflows/services/workflows.service.ts @@ -120,10 +120,11 @@ export class WorkflowsService { return this._http.post(`${this.httpUrl}/jobs/${jobId}/trigger`, {}, this.httpOptions); } - renameWorkflow(workflowId: string, newName: string = null, newGroup: string = null) { + renameWorkflow(workflowId: string, newName: string = null, newGroup: string = null, newDescription: string = null) { const json = { name: newName, - group: newGroup + group: newGroup, + description: newDescription }; return this._http.patch(`${this.httpUrl}/workflows/${workflowId}`, json, this.httpOptions); } From 6b724bee3338697242964dc64502b0d704809ae6 Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Thu, 1 May 2025 13:01:22 +0200 Subject: [PATCH 66/68] Add aggregate setting --- .../polyalg/polyalg-viewer/custom-zoom.ts | 6 +- .../workflow-viewer/editor/workflow-editor.ts | 14 ++-- .../activity-exec-stats.component.html | 6 +- .../activity-settings.component.html | 12 +++- .../aggregate-setting.component.html | 41 +++++++++++ .../aggregate-setting.component.scss | 16 +++++ .../aggregate-setting.component.ts | 68 +++++++++++++++++++ .../collation-setting.component.ts | 1 - .../graph-map-setting.component.ts | 2 - .../models/activity-registry.model.ts | 1 + .../services/workflows-websocket.service.ts | 2 +- src/app/plugins/workflows/workflows.module.ts | 2 + 12 files changed, 153 insertions(+), 18 deletions(-) create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.html create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.scss create mode 100644 src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.ts diff --git a/src/app/components/polyalg/polyalg-viewer/custom-zoom.ts b/src/app/components/polyalg/polyalg-viewer/custom-zoom.ts index 684cdeaf..0515c044 100644 --- a/src/app/components/polyalg/polyalg-viewer/custom-zoom.ts +++ b/src/app/components/polyalg/polyalg-viewer/custom-zoom.ts @@ -31,7 +31,7 @@ export class CustomZoom extends Zoom { // Only consider the event if Ctrl key is not pressed filter((event) => !event.ctrlKey), tap(() => this.overlay.style.display = 'flex'), - debounceTime(1500), + debounceTime(1000), tap(() => this.overlay.style.display = 'none') ).subscribe(); } @@ -76,16 +76,18 @@ export class CustomZoom extends Zoom { overlay.style.left = '0'; overlay.style.width = '100%'; overlay.style.height = '100%'; - overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; + overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.6)'; overlay.style.color = 'white'; overlay.style.fontSize = '24px'; overlay.style.display = 'none'; // Hide by default overlay.style.justifyContent = 'center'; overlay.style.alignItems = 'center'; + overlay.style.pointerEvents = 'none'; // Allow interaction with editor // Add the message text const message = document.createElement('div'); message.innerText = 'Use ctrl / ⌘ + scroll to zoom'; + message.style.pointerEvents = 'none'; overlay.appendChild(message); // Append the overlay to the container diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts index 5e0c9113..b381aff1 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts @@ -13,13 +13,7 @@ import {setupPanningBoundary} from '../../../../../components/polyalg/polyalg-vi import {AutoArrangePlugin} from 'rete-auto-arrange-plugin'; import {debounceTime, Subject, Subscription} from 'rxjs'; import {Position} from 'rete-angular-plugin/17/types'; -import { - canCreateConnection, - computeCenter, - getContextMenuItems, - getMagneticConnectionProps, - socketsToEdgeModel -} from './workflow-editor-utils'; +import {canCreateConnection, computeCenter, getContextMenuItems, getMagneticConnectionProps, socketsToEdgeModel} from './workflow-editor-utils'; import {Activity, edgeToString, Workflow} from '../workflow'; import {ContextMenuExtra, ContextMenuPlugin} from 'rete-context-menu-plugin'; import {useMagneticConnection} from '../../../../../components/polyalg/polyalg-viewer/magnetic-connection'; @@ -143,9 +137,9 @@ export class WorkflowEditor { return; // https://github.com/retejs/rete/issues/204 } else if (context.type === 'nodetranslated') { this.translateSubjects[this.nodeIdToActivityId.get(context.data.id)].next(context.data.position); - } else if (!['pointermove', 'render', 'rendered', 'rendered', 'zoom', 'zoomed', 'translate', 'translated', 'nodetranslate', 'unmount'].includes(context.type)) { - //console.log(context); - } + }/* else if (!['pointermove', 'render', 'rendered', 'rendered', 'zoom', 'zoomed', 'translate', 'translated', 'nodetranslate', 'unmount'].includes(context.type)) { + console.log(context); + }*/ return context; }); diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html index 55731063..8b4930c9 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-exec-stats/activity-exec-stats.component.html @@ -45,7 +45,11 @@
    {{ activity().executionInfo().executorType }} Executor
    } @if (activity().error()) { -

    Error: {{ activity().error().message }}

    +

    Execution Error:

    +
    + {{ activity().error().message }} +
    }
    Duration
    diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html index 3bcee4e7..59c5ebe8 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/activity-settings.component.html @@ -44,7 +44,11 @@
    @if (activity().error()) { - Execution Error: {{ activity().error().message }} + Execution Error: +
    + {{ activity().error().message }} +
    }

    {{ activity().def.shortDescription }}

    @@ -175,6 +179,12 @@
    Note
    [(value)]="editableSettings().get(setting.key).value"> } + @case (SettingType.AGGREGATE) { + + + } @default {

    unknown setting type

    } diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.html b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.html new file mode 100644 index 00000000..be57a676 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.html @@ -0,0 +1,41 @@ + +
      + @for (agg of val(); track $index) { +
    • + + +
      + + +
      + +
      +
      + + + + +       + + + +       +
      • + } +
    + +     + + \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.scss b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.scss new file mode 100644 index 00000000..c1638537 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.scss @@ -0,0 +1,16 @@ +.draggable { + cursor: grab; +} + +.draggable:active { + cursor: grabbing !important; +} + +.cdk-drag-preview { + border: none; + border-radius: 4px; + padding: 8px 16px; + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); +} \ No newline at end of file diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.ts new file mode 100644 index 00000000..56b6fe13 --- /dev/null +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component.ts @@ -0,0 +1,68 @@ +import {Component, computed, EventEmitter, input, model, Output} from '@angular/core'; +import {SettingDefModel} from '../../../../../models/activity-registry.model'; +import {TypePreviewModel} from '../../../../../models/workflows.model'; +import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop'; +import {getSuggestions} from '../../../workflow'; + + +@Component({ + selector: 'app-aggregate-setting', + templateUrl: './aggregate-setting.component.html', + styleUrl: './aggregate-setting.component.scss' +}) +export class AggregateSettingComponent { + isEditable = input.required(); + settingDef = input.required(); + inTypePreview = input.required(); + value = model.required(); + @Output() hasChanged = new EventEmitter(); + + val = computed(() => this.value() as AggregateEntry[]); // like value, but with correct type + def = computed(() => this.settingDef() as AggregateSettingDef); + targetPreview = computed(() => this.inTypePreview()[this.def().targetInput]); + fieldType = computed(() => this.targetPreview().portType === 'REL' ? 'column' : 'field'); + suggestions = computed(() => getSuggestions(this.targetPreview(), 'props')); + + readonly displayFunctions = { + 'MAX': 'Max', + 'MIN': 'Min', + 'AVG': 'Average', + 'SUM': 'Sum', + 'SUM0': 'Sum (0 if empty)', + 'COUNT': 'Count', + 'STDDEV': 'Standard Deviation', + 'VARIANCE': 'Variance' + }; + + valueChanged() { + setTimeout(() => this.hasChanged.emit(), 1); + } + + addField() { + this.val().push({target: '', function: this.def().allowedFunctions[0], alias: ''}); + this.valueChanged(); + } + + deleteField(idx: number) { + this.val().splice(idx, 1); + this.valueChanged(); + } + + drop(event: CdkDragDrop) { + if (event.previousIndex !== event.currentIndex) { + moveItemInArray(this.val(), event.previousIndex, event.currentIndex); + this.valueChanged(); + } + } +} + +interface AggregateSettingDef extends SettingDefModel { + targetInput: number; + allowedFunctions: string[]; +} + +interface AggregateEntry { + target: string; + function: string; + alias: string; +} diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/collation-setting/collation-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/collation-setting/collation-setting.component.ts index 883c2951..6e2b6aef 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/collation-setting/collation-setting.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/collation-setting/collation-setting.component.ts @@ -43,7 +43,6 @@ export class CollationSettingComponent { drop(event: CdkDragDrop) { if (event.previousIndex !== event.currentIndex) { moveItemInArray(this.val(), event.previousIndex, event.currentIndex); - console.log('dropped', event); this.valueChanged(); } } diff --git a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.ts b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.ts index 7438c89f..d3ad12d8 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/right-menu/activity-settings/graph-map-setting/graph-map-setting.component.ts @@ -95,8 +95,6 @@ export class GraphMapSettingComponent { addMapping() { const inputIdx = parseInt(String(this.addIdx), 10); if (!this.remainingInputs().includes(inputIdx)) { - console.log(inputIdx, typeof (inputIdx)); - console.log(this.remainingInputs(), typeof (this.remainingInputs())); this._toast.warn('A mapping for this input already exists: ' + inputIdx + ', ' + this.remainingInputs()); return; } diff --git a/src/app/plugins/workflows/models/activity-registry.model.ts b/src/app/plugins/workflows/models/activity-registry.model.ts index d880af40..f02559c0 100644 --- a/src/app/plugins/workflows/models/activity-registry.model.ts +++ b/src/app/plugins/workflows/models/activity-registry.model.ts @@ -266,6 +266,7 @@ export enum SettingType { FILTER = 'FILTER', GRAPH_MAP = 'GRAPH_MAP', FILE = 'FILE', + AGGREGATE = 'AGGREGATE', } export interface SettingDefModel { diff --git a/src/app/plugins/workflows/services/workflows-websocket.service.ts b/src/app/plugins/workflows/services/workflows-websocket.service.ts index 90bc9ef0..9fed7871 100644 --- a/src/app/plugins/workflows/services/workflows-websocket.service.ts +++ b/src/app/plugins/workflows/services/workflows-websocket.service.ts @@ -48,7 +48,7 @@ export class WorkflowsWebSocketService { this.msgSubject.next({response: msg, isDirect}); }, error: err => { - console.log(err); + console.warn(err); this.connected.set(false); }, complete: () => { diff --git a/src/app/plugins/workflows/workflows.module.ts b/src/app/plugins/workflows/workflows.module.ts index 3c96602d..3bc7bdaf 100644 --- a/src/app/plugins/workflows/workflows.module.ts +++ b/src/app/plugins/workflows/workflows.module.ts @@ -113,6 +113,7 @@ import {CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport} fr import {WorkflowJobComponent} from './components/workflow-job/workflow-job.component'; import {JobListComponent} from './components/workflow-job/job-list/job-list.component'; import {JobCreatorComponent} from './components/workflow-job/job-creator/job-creator.component'; +import {AggregateSettingComponent} from './components/workflow-viewer/right-menu/activity-settings/aggregate-setting/aggregate-setting.component'; @NgModule({ imports: [ @@ -229,6 +230,7 @@ import {JobCreatorComponent} from './components/workflow-job/job-creator/job-cre FieldRenameSettingComponent, CastSettingComponent, FilterSettingComponent, + AggregateSettingComponent, WorkflowHelpComponent, CheckpointViewerComponent, GraphMapSettingComponent, From 90dcefc0c3477732939dc72c98853e8d3b82beeb Mon Sep 17 00:00:00 2001 From: Tobias Weber Date: Fri, 2 May 2025 17:57:44 +0200 Subject: [PATCH 67/68] Code cleanup and minor visual changes --- .../job-list/job-list.component.html | 2 +- .../workflow-job/workflow-job.component.ts | 2 +- .../workflow-viewer/editor/workflow-editor.ts | 2 +- .../execution-monitor.component.html | 36 +++++++++---------- .../execution-monitor.component.ts | 3 -- .../query-setting/query-setting.component.ts | 2 +- .../string-setting.component.ts | 7 ++-- .../workflow-viewer.component.html | 8 ++--- .../workflows-dashboard.component.html | 4 +-- .../services/checkpoint-viewer.service.ts | 2 +- .../services/workflows-websocket.service.ts | 2 +- 11 files changed, 32 insertions(+), 38 deletions(-) diff --git a/src/app/plugins/workflows/components/workflow-job/job-list/job-list.component.html b/src/app/plugins/workflows/components/workflow-job/job-list/job-list.component.html index 24364f78..b496f2c4 100644 --- a/src/app/plugins/workflows/components/workflow-job/job-list/job-list.component.html +++ b/src/app/plugins/workflows/components/workflow-job/job-list/job-list.component.html @@ -1,6 +1,6 @@ -

    Jobs

    +

    Jobs

    diff --git a/src/app/plugins/workflows/components/workflow-job/workflow-job.component.ts b/src/app/plugins/workflows/components/workflow-job/workflow-job.component.ts index 00afed74..dda91a47 100644 --- a/src/app/plugins/workflows/components/workflow-job/workflow-job.component.ts +++ b/src/app/plugins/workflows/components/workflow-job/workflow-job.component.ts @@ -152,7 +152,7 @@ export class WorkflowJobComponent implements OnInit, OnDestroy { private updateModifiedJob(job: JobModel) { this._workflows.setJob(job).subscribe({ - next: jobId => { + next: () => { this._creator.close(); this.job.set(job); }, diff --git a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts index b381aff1..bf37fe66 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts +++ b/src/app/plugins/workflows/components/workflow-viewer/editor/workflow-editor.ts @@ -79,7 +79,7 @@ export class WorkflowEditor { const [source, target] = getSourceTarget(from, to) || [null, null]; return canCreateConnection(source, target, this.editor); }, - makeConnection: (from, to, context) => { + makeConnection: (from, to) => { const [source, target] = getSourceTarget(from, to) || [null, null]; if (source && target) { this.createEdgeSubject.next(socketsToEdgeModel(source, target, this.editor)); diff --git a/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html index d50f5879..ab30c97f 100644 --- a/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html +++ b/src/app/plugins/workflows/components/workflow-viewer/execution-monitor/execution-monitor.component.html @@ -10,58 +10,58 @@
    Execution Statistics
    } @else if (monitor()) { - + Success: - + {{ monitor().isSuccess }} - + Start Time: - + {{ monitor().startTime | date:'medium' }} - + Total Duration: - + {{ monitor().totalDuration }} ms - + Tuples Written: - + {{ monitor().tuplesWritten }} ({{ tuplesPerSecond() }} t/s) - + Target Activity: - + {{ workflow.getActivity( monitor().targetActivity )?.displayName() }} - + Total Activities: - + {{ monitor().totalCount }} - + Success / cancel / fail: - + {{ monitor().successCount }} / {{ monitor().skipCount }} / {{ monitor().failCount }} @@ -93,17 +93,17 @@
    Submitted Execution Trees
     - + @if (workflowDef) {

    {{ name }}

    @@ -17,7 +17,7 @@

    {{ name }}

    } - +
    @@ -111,7 +111,7 @@

    {{ name }}

     - +
    + } @else { +
    + +
    }