🐛🎨 [Frontend] Consistent modified

[odeimaiz]

What do these changes do?

So far, the modified flag was used to color the output port and links. This flag was used together with a hasOutputs variable not in consistent way. This PR makes more consistent and exposes the modified flag in a more intuitive way:

• Show star (*) on nodeUI if the node is marked as modified: "Needs to run to update the outputs"
• The output port and outbound link are marked as out-of-date if the node is modified and hasOutputs (outputs exist). Both the port and link support more states: "not-available", "busy", "up-to-date", "out-of-date"

Bonus:

• Clicking on an input/output port opens the service catalog and connects the new node

Related issue/s

How to test

Dev-ops

[mergify]

🧪 CI Insights

Here's what we observed from your CI run for 9d67db2.

✅ Passed Jobs With Interesting Signals

Pipeline	Job	Signal	Health on master	Retries	🔍 CI Insights	📄 Logs
CI	unit-tests	Base branch is broken, but the job passed. Looks like this might be a real fix 💪		0	View	View

[Copilot]

Pull Request Overview

This PR implements consistent handling of the modified state in the frontend workbench by showing a star (*) when nodes are modified and need to run to update outputs. It also adds functionality to open the service catalog when clicking on input/output ports.

• Show modified star indicator on nodes that need to run
• Update edge coloring to use output state instead of modified state
• Add click handlers to ports for opening service catalog with context

Reviewed Changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
osparc/workbench/NodeUI.js	Adds modified star indicator and port click handlers
osparc/workbench/EdgeUI.js	Updates edge coloring logic to use output state
osparc/workbench/WorkbenchUI.js	Refactors service catalog opening and adds validation
osparc/workbench/ServiceCatalog.js	Adds validation method for opening service catalog
osparc/data/model/NodeStatus.js	Simplifies modified state handling and output evaluation
osparc/service/StatusUI.js	Adds color mapping for not-available state
osparc/theme/*.js	Updates color definitions for workbench edges
osparc/wrapper/Svg.js	Updates edge color references
osparc/widget/PersistentIframe.js	Code cleanup for message handling
osparc/navigation/BreadcrumbsSlideshow.js	Variable naming improvement
osparc/desktop/SlideshowView.js	Adds validation before opening service catalog

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sanderegg]

Very nice! You could even animate the arrow coloring!