From d09d289ee9d3e5015391ece178195fc46b0de502 Mon Sep 17 00:00:00 2001 From: Jae Yun Kim Date: Tue, 8 Jul 2025 13:37:42 -0700 Subject: [PATCH 1/4] Initial commit to show one link demo --- .../workflow-editor.component.ts | 15 +++++ .../service/joint-ui/joint-ui.service.ts | 59 +++++++++++++++++++ 2 files changed, 74 insertions(+) diff --git a/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts b/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts index ac241952167..18a0a782454 100644 --- a/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts +++ b/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts @@ -132,6 +132,7 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy { this.editorWrapper = document.getElementById("workflow-editor-wrapper")!; document.addEventListener("keydown", this._handleKeyboardAction.bind(this)); this.initializeJointPaper(); + this.handleDisableJointPaperInteractiveness(); this.handleOperatorValidation(); this.handlePaperRestoreDefaultOffset(); @@ -169,6 +170,20 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy { this.handleURLFragment(); this.invokeResize(); this.handleCenterEvent(); + this.wrapper + .getJointLinkCellAddStream() + .pipe(untilDestroyed(this)) + .subscribe(linkModel => { + const linkId = linkModel.id.toString(); + + const linkView = linkModel.findView(this.paper); + + // now you can start your mock backpressure loop + this.jointUIService.startMockBackpressure(this.paper, linkId); + }); + + + } ngOnDestroy(): void { diff --git a/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts b/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts index c15b7e88aa5..b1001ddb7e4 100644 --- a/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts +++ b/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts @@ -564,6 +564,65 @@ export class JointUIService { }); } + /** + * This function changes the color of links based on the back pressure data from backend. + * Based on the pressure input (0~1), the links would change colors varying from green, yellow to red + * @param jointPaper + * @param linkId + * @param pressure + */ + + public changeLinkBackpressureColor( + jointPaper: joint.dia.Paper, + linkId: string, + pressure: number + ): void { + const p = Math.max(0, Math.min(1, pressure)); + + let color: string; + if (p === 0) { + color = 'gray'; + } else if (p < 0.6) { + color = 'green'; + } else if (p < 0.9) { + color = 'orange'; + } else { + color = 'red'; + } + + const link = jointPaper.getModelById(linkId) as joint.dia.Link; + + link.attr({ + '.connection': { + stroke: color, + }, + }); + } + + public updateAllLinksByPressure(paper: joint.dia.Paper, pressure: number): void { + const links = paper.model.getLinks(); + links.forEach(link => { + const linkId = link.id.toString(); + this.changeLinkBackpressureColor(paper, linkId, pressure); + }); + } + + public startMockBackpressure( + paper: joint.dia.Paper, + linkId: string + ): void { + const mockPressures = [0.5, 0.5,0.5,0.5,0.5, 0.8, 0.7, 0.6, 0.5, 0.9, 0.9, 0.3, 0, 0, 0, 0]; + let idx = 0; + setInterval(() => { + const p = mockPressures[idx]; + this.changeLinkBackpressureColor(paper, linkId, p); + console.log(`↔️ backpressure(${linkId}) = ${p}`); + idx = (idx + 1) % mockPressures.length; + }, 1000); + console.log(1); + } + + /** * This function changes the default svg of the operator ports. * It hides the port label that will display 'out/in' beside the operators. From 7f165d2c21f6c2b36026f331a5d74eb3dc833391 Mon Sep 17 00:00:00 2001 From: Jae Yun Kim Date: Wed, 9 Jul 2025 13:38:07 -0700 Subject: [PATCH 2/4] Changed threshold for colors --- .../workspace/service/joint-ui/joint-ui.service.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts b/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts index b1001ddb7e4..7554ecb3061 100644 --- a/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts +++ b/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts @@ -581,19 +581,19 @@ export class JointUIService { let color: string; if (p === 0) { - color = 'gray'; - } else if (p < 0.6) { - color = 'green'; - } else if (p < 0.9) { - color = 'orange'; + color = "gray"; + } else if (p < 0.5) { + color = "green"; + } else if (p < 0.8) { + color = "orange"; } else { - color = 'red'; + color = "red"; } const link = jointPaper.getModelById(linkId) as joint.dia.Link; link.attr({ - '.connection': { + ".connection": { stroke: color, }, }); From a851100990edb43d31bf4988d454072f53e6c549 Mon Sep 17 00:00:00 2001 From: Jae Yun Kim Date: Fri, 11 Jul 2025 15:49:52 -0700 Subject: [PATCH 3/4] Small fixes --- .../workflow-editor/workflow-editor.component.ts | 9 ++------- .../app/workspace/service/joint-ui/joint-ui.service.ts | 2 -- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts b/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts index 18a0a782454..b1b45f34e57 100644 --- a/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts +++ b/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts @@ -170,20 +170,15 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy { this.handleURLFragment(); this.invokeResize(); this.handleCenterEvent(); + + // Mock test code this.wrapper .getJointLinkCellAddStream() .pipe(untilDestroyed(this)) .subscribe(linkModel => { const linkId = linkModel.id.toString(); - - const linkView = linkModel.findView(this.paper); - - // now you can start your mock backpressure loop this.jointUIService.startMockBackpressure(this.paper, linkId); }); - - - } ngOnDestroy(): void { diff --git a/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts b/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts index 7554ecb3061..69ecdb3e23b 100644 --- a/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts +++ b/core/gui/src/app/workspace/service/joint-ui/joint-ui.service.ts @@ -616,10 +616,8 @@ export class JointUIService { setInterval(() => { const p = mockPressures[idx]; this.changeLinkBackpressureColor(paper, linkId, p); - console.log(`↔️ backpressure(${linkId}) = ${p}`); idx = (idx + 1) % mockPressures.length; }, 1000); - console.log(1); } From d7d5d6143984d84ed3ba87a6e6cd19784f1a22eb Mon Sep 17 00:00:00 2001 From: Jae Yun Kim Date: Fri, 11 Jul 2025 15:50:42 -0700 Subject: [PATCH 4/4] Small change --- .../component/workflow-editor/workflow-editor.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts b/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts index b1b45f34e57..a360bb79331 100644 --- a/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts +++ b/core/gui/src/app/workspace/component/workflow-editor/workflow-editor.component.ts @@ -132,7 +132,6 @@ export class WorkflowEditorComponent implements AfterViewInit, OnDestroy { this.editorWrapper = document.getElementById("workflow-editor-wrapper")!; document.addEventListener("keydown", this._handleKeyboardAction.bind(this)); this.initializeJointPaper(); - this.handleDisableJointPaperInteractiveness(); this.handleOperatorValidation(); this.handlePaperRestoreDefaultOffset();