New node design #7311

Frizi · 2023-07-17T14:17:49Z

Pull Request Description

Implementation of new node design. Includes many changes related to stylesheet update handling and per-style FRP construction, as well as refactoring of scene layers used by graph editor. Some additional components were migrated to use Rectangle shape and new mouse handling events. Fixed text rendering, where random thin lines appeared at the borders of glyph sprites. Refined edge layout to match new node sizes and not leave any visible gaps between line segments.

The node colors are currently randomly selected from predefined list. Later this will be improved to use group information from the suggestion database, once that is fully migrated to use the documentation tags, thus removing the dependency on the execution context.

new-node-design-with-args.mp4

Important Notes

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

The documentation has been updated, if necessary.
Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
All code follows the
Scala,
Java,
and
Rust
style guides. In case you are using a language not listed above, follow the Rust style guide.
All code has been tested:
- Unit tests have been written where possible.
- If GUI codebase was changed, the GUI was tested when built using ./run ide build.

- refactor more widgets to use theme instead of hardcoded constants - add proper FromTheme trait and refactor derive - add generic FromTheme style cache for widgets - add layer blend modes - remove special error indicator shape, temporarily use simple border around the node

- simplify FromTheme to only return the style sampler, since we no longer need to manually init it - fix wrong usage of separator widget in infix expressions - fix memory leaks on blank widget - properly handle cursor position at transition from host layer state - refactor scrollbars to use rectangle shapes - move widget styling

farmaazon

First round of comments

app/gui/language/ast/impl/src/lib.rs

app/gui/language/span-tree/src/node/kind.rs

app/gui/view/component-browser/component-list-panel/grid/src/entry/style.rs

farmaazon · 2023-07-19T11:20:53Z

app/gui/view/component-browser/component-list-panel/grid/src/lib.rs

+            let group_colors_theme = GroupColorsTheme::from_theme(network, style_frp);
+            group_colors <- group_colors_theme.map(|t| GroupColors::from(*t));


I don't know why have you needed it, but I like it.

I changed it when I tried to use actual group colors for nodes. Didn't used it in the end due to group querying complications, but I kept the nice parts of it anyway.

farmaazon · 2023-07-19T11:23:38Z

app/gui/view/component-browser/component-list-panel/icons/src/component_icons.rs

@@ -0,0 +1,1300 @@
+//! All icons that are used in the Component Browser.


I assume this file is just copied from old icon.rs.

And this set could be the general "GUI icons" crate, to use in not only component browser, but let's keep this refactoring for later.

I needed it to be in a separate crate that can also be imported in the graph editor without pulling in too much stuff. I agree that moving it higher would be good, but it definitely should be done separately.

lib/rust/ensogl/core/src/display/object/instance.rs

farmaazon · 2023-07-20T12:29:12Z

lib/rust/ensogl/core/src/display/scene/layer.rs

+    /// NOTE: When using an inverted mask, the mask layer's own blend mode is ignored. Instead,
+    /// the mask layer is always rendered with the blend mode [`BlendMode::ALPHA_CUTOUT`], carving
+    /// out the shape of the mask from the layer it masks.


I guess not inverted mask also ignores own blend mode?

No, it doesn't ignore it. You can draw on the non-inverted mask layer with any blend mode. It's just the final mask composite that will always multiply the alpha channels. Though I believe we could eventually find a way to do masking purely with blend modes, avoiding the need for mask framebuffer completely (as I already do with inverted mask).

Frizi · 2023-07-25T13:12:59Z

For some reason vscode did something weird with the merge and by mistake I pushed the merged commits as part of this branch linear history. This is now fixed, but that's why a lot of people were again incorrectly pinged for review. Sorry about that.

farmaazon · 2023-07-25T13:22:50Z

QA Report: 🟥

Some issues found, still testing (haven't reached list editor yet ;) )

I do not see drop-down for the node below. I could pick a filename before. Is this expected change?

Moving the mouse from node to toolbar, I see the icons disappear and appear again. Not always, but there's a path where it happens, and I hit it fairly often.

new-design-2023-07-25_14.00.52.mp4

Also, it's a bit unintuitive that I need to hover the node first, and only then move the mouse left to see the icons. Just approaching from the right side does not make the icons visible. Is that by design?
When connecting to an input port inside port with drop down, the drop-down is shown.

new-design-2023-07-25_14.14.15.mp4

Frizi · 2023-07-26T15:13:22Z

Also, it's a bit unintuitive that I need to hover the node first, and only then move the mouse left to see the icons. Just approaching from the right side does not make the icons visible. Is that by design?

Yes, I've done that on purpose to not block interactions with widgets from nodes that are next to each other. Though I think instead of fully blocking the interaction, we could switch the action bar hover area layer to be below nodes until hovered. That way we can have both.

Fixed issues found during QA, the PR is ready for another round.

farmaazon · 2023-07-27T08:31:07Z

QA Report: 🟢

I only have one more comment, which was part of first round, but I posted it in the wrong PR:

The area for adding elements in list editor is still hardly discoverable. It was reported, and it was planned to fix in the new design. I assume this is planned for another task?

Frizi · 2023-07-27T11:34:22Z

The area for adding elements in list editor is still hardly discoverable. It was reported, and it was planned to fix in the new design. I assume this is planned for another task?

Yes, I haven't modified the list editor widget in any significant way here. Its new design needs to be implemented in separate task.

mwu-tow · 2023-07-27T11:55:46Z

build/enso-formatter/src/lib.rs

+    SuperUse,
+    SuperUseStar,
+    SuperPubUse,
+    SuperPubUseStar,


It would be nice to have the test code updated to cover this.

Frizi added 27 commits June 22, 2023 12:54

action bar rework, icons wip

170a450

node style wip

363738b

wip

c350845

use proper frp styles in widget tree

41943b4

debugging missing cb icons

cfa037f

method icon layout

fdefa7d

wip

1e35437

add support for bidirectional rectangle border and inset

d2a6177

add support for bidirectional rectangle border and inset

e19d26c

apply fwidth offset to rect body instead of border

e2bdc8f

unnecessary clone

6e7723f

improve comment

008300b

Merge branch 'wip/frizi/bidi-rect-border' into wip/frizi/new-node-design

af1da8c

add understandable border API

66d75f4

improve docs

cedc8f5

rename annulus to stroke, add better documentation

71ec524

fix difference and intersection description

3c29aaf

Merge branch 'wip/frizi/bidi-rect-border' into wip/frizi/new-node-design

e9ec274

graph editor node layers refactor

4266433

improve dom debug tools, proper layout for output port and separators

f31015d

edge coloring according to node background

c3c8999

add inverted layer mask and use it for detached edge source node cutout

e1e86d0

only use separator widget as a child of hierarchy

ebf32cc

Merge branch 'develop' into wip/frizi/new-node-design

cc2b146

implement argument name labels and showing dropdown triangle on hover

dd1af55

Frizi linked an issue Jul 19, 2023 that may be closed by this pull request

User can connect to . in _.get #6910

Closed

2 tasks

set dropdown color, do not update invisible visualization sizes

ba7fcee

farmaazon reviewed Jul 20, 2023

View reviewed changes

Merge branch 'develop' into wip/frizi/new-node-design

70f1d90

Frizi requested review from jdunkerley, radeusgd, GregoryTravis, 4e6, JaroslavTulach, hubertp and Akirathan as code owners July 25, 2023 13:07

remove trace

90f8e2e

Frizi force-pushed the wip/frizi/new-node-design branch from 67d52fb to 90f8e2e Compare July 25, 2023 13:10

Frizi added 2 commits July 26, 2023 15:12

make hovering action bar easier

8328182

preserve self argument info in infix chains

3370172

Frizi added 5 commits July 26, 2023 17:31

allow showing action bar by hover if it is not covered by nearby node

58b9d59

guarantee action bar icon ordering in front of hover area

a553948

lint

549e514

lint

4620f81

fix theme tests

a01bf6e

farmaazon mentioned this pull request Jul 27, 2023

New fuzzy matching #7381

Merged

5 tasks

Merge branch 'develop' into wip/frizi/new-node-design

da27a4c

Frizi added CI: Ready to merge This PR is eligible for automatic merge CI: Keep up to date Automatically update this PR to the latest develop. labels Jul 27, 2023

mwu-tow approved these changes Jul 27, 2023

View reviewed changes

add tests for "use super" in formatter

be312de

mergify bot merged commit bb39eeb into develop Jul 27, 2023
23 of 24 checks passed

mergify bot deleted the wip/frizi/new-node-design branch July 27, 2023 13:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New node design #7311

New node design #7311

Frizi commented Jul 17, 2023 •

edited

farmaazon left a comment

farmaazon Jul 19, 2023

Frizi Jul 21, 2023

farmaazon Jul 19, 2023

Frizi Jul 20, 2023

farmaazon Jul 20, 2023

Frizi Jul 20, 2023

Frizi commented Jul 25, 2023

farmaazon commented Jul 25, 2023

Frizi commented Jul 26, 2023 •

edited

farmaazon commented Jul 27, 2023

Frizi commented Jul 27, 2023

mwu-tow Jul 27, 2023

		let group_colors_theme = GroupColorsTheme::from_theme(network, style_frp);
		group_colors <- group_colors_theme.map(\|t\| GroupColors::from(*t));

		@@ -0,0 +1,1300 @@
		//! All icons that are used in the Component Browser.

New node design #7311

New node design #7311

Conversation

Frizi commented Jul 17, 2023 • edited

Pull Request Description

Important Notes

Checklist

farmaazon left a comment

Choose a reason for hiding this comment

farmaazon Jul 19, 2023

Choose a reason for hiding this comment

Frizi Jul 21, 2023

Choose a reason for hiding this comment

farmaazon Jul 19, 2023

Choose a reason for hiding this comment

Frizi Jul 20, 2023

Choose a reason for hiding this comment

farmaazon Jul 20, 2023

Choose a reason for hiding this comment

Frizi Jul 20, 2023

Choose a reason for hiding this comment

Frizi commented Jul 25, 2023

farmaazon commented Jul 25, 2023

QA Report: 🟥

Frizi commented Jul 26, 2023 • edited

farmaazon commented Jul 27, 2023

QA Report: 🟢

Frizi commented Jul 27, 2023

mwu-tow Jul 27, 2023

Choose a reason for hiding this comment

Frizi commented Jul 17, 2023 •

edited

Frizi commented Jul 26, 2023 •

edited