Resizing visualizations #7164

vitvakatu · 2023-06-29T12:51:27Z

Pull Request Description

Adds an ability to resize visualizations by dragging a special (invisible) shape along the bottom and right borders of visualizations.

Visualizations are aligned to the left border of the node now.
Default visualization width now equals to the node's width (default height is the same)
Changing the width of the node also changes visualization width, but only if no manual drag-resizing was applied
Visualization size is preserved when reopening visualization (but it is not saved in project metadata)
No visual indication that resizing is possible exist, it will be implemented in Mouse pointer should change shape on visualization boundaries #7049

2023-07-03.13-18-16.mp4

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.

farmaazon

If adding new layers is a way to go, agreed with @wdanilo, then it's ok, but otherwise I would restrain from adding new layers.

farmaazon · 2023-07-03T09:21:43Z

app/gui/view/graph-editor/src/component/visualization/container.rs

 /// Default width and height of the visualization container.
 pub const DEFAULT_SIZE: (f32, f32) = (200.0, 200.0);
+/// Minimal allowed size of the visualization container.
+const MIN_SIZE: Vector2 = Vector2(200.0, 200.0);


The DEFAULT_SIZE could also have Vector2 type.

farmaazon · 2023-07-03T09:24:57Z

app/gui/view/graph-editor/src/component/visualization/container.rs

@@ -278,11 +282,15 @@ impl View {
    }

    fn init(self) -> Self {
-        self.init_background();
+        let styles = StyleWatch::new(&self.scene.style_sheet);


The FIXME comment was lost. You can also take the chance and change it to StyleWatchFRP (but it would need some FRP nodes for refreshing).

Restored the fixme comment, also used FRP for part of the stuff in this method. The main stopper is shadow for dom, I don't think we have FRP-based API for that at the moment.

farmaazon · 2023-07-03T09:33:13Z

app/gui/view/graph-editor/src/component/visualization/container.rs

@@ -561,13 +587,18 @@ impl Container {
        let action_bar = &model.action_bar.frp;
        let registry = &model.registry;
        let selection = Animation::new(network);
+        let width_anim = Animation::new(network);
+
+        let on_down = model.view.resize_grip.on_event_capturing::<mouse::Down>();


Why do we need to do this on capturing phase? Shouldn't the grip be just over elements?

Also, the var name does not say it's resizing mouse down, so looking 30 lines below we may miss this information.

TBH I just copied bits if @wdanilo's implementation of drag-n-drop in the list editor :D
Removed capturing, seems to be working just fine.

farmaazon · 2023-07-03T09:35:08Z

app/gui/view/graph-editor/src/component/visualization/container.rs

+        let width_anim = Animation::new(network);
+
+        let on_down = model.view.resize_grip.on_event_capturing::<mouse::Down>();
+        let on_up_source = scene.on_event::<mouse::Up>();


source suggests this is a source node. Why does this need the prefix, and on_down does not?

farmaazon · 2023-07-03T09:39:49Z

app/gui/view/graph-editor/src/component/visualization/container.rs

+        let overlay = Rectangle::default().build(|r| {
+            r.set_color(INVISIBLE_HOVER_COLOR).set_border_color(INVISIBLE_HOVER_COLOR);
+        });
+        let resize_grip = Rectangle::default().build(|r| {
+            r.set_color(INVISIBLE_HOVER_COLOR).set_border_color(INVISIBLE_HOVER_COLOR);
+        });


Looking through the code, I have no idea how it works: we have only one rectangle for resize grip, which somehow covers both axes, while being also a child of overlay (so technically, it's over overlay).

I added the comment explaining it to the definition of resize_grip field. So resize grip is below overlay, and has a slight offset to the bottom right, so that it "peeks" from under the overlay. The ordering is done through partition layers, see below.

farmaazon · 2023-07-03T09:40:52Z

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

+            viz_resize_grip,
+            viz_overlay,


If I understand EnsoGL correctly, we do not have any actual performance gains from using Rectangle if it forces us to create new layers, as the layers are a separate draw calls anyway. Perhaps the resize_grip could be a custom shape? That would make the code simpler (we already have a bit too many layers).

If you add new layers because you need to set ordering of the rectangles, you should probably use instance ordering implemented in #6140 instead.

I'm not using layers here, but rather partition layers implemented in #6140, as you suggested. All these added layers are "fake" ones, so everything should be ok here.

Ah, I forgot about partition layers (and that they are in the same place as normal layers).

vitvakatu · 2023-07-03T13:41:35Z

After discussion with @Frizi I decided to take a second look at the selection shape, and was able to replace it with a Rectangle. So one less custom shader is used in the application now. In total, this PR replaces two custom shapes with Rectangles. I decided to include this change along with review fixes into this PR. @farmaazon you can review this comment: f290006

I also checked how table visualization looks like on develop – and it doesn't have rounded corners there either, so I'm removing mentioning it from the PR description.

vitvakatu · 2023-07-03T16:09:27Z

As discussed on the demo, I added max size restriction (80% of screen dimensions) and disabled size reset when opening the visualization. Both options can be adjusted by code constants.

app/gui/view/component-browser/src/lib.rs

app/gui/view/graph-editor/src/component/node.rs

app/gui/view/graph-editor/src/component/visualization/container.rs

wdanilo · 2023-07-03T21:38:35Z

@vitvakatu would it be possible to remove animation when dragging the size with mouse? If its hard, skip my comment.

xvcgreg · 2023-07-04T06:32:23Z

Changing the width of the node also changes visualization width, but only if no manual drag-resizing was applied
The above condition is reset when reopening the visualization, so that it again starts following the width of the node

is that still true after yesterday's meeting?

vitvakatu · 2023-07-04T07:58:16Z

is that still true after yesterday's meeting?

Fixed.

would it be possible to remove animation when dragging the size with mouse? If its hard, skip my comment.

There is no animation when dragging the size with mouse. Animation is only applied when the node size changes.

farmaazon · 2023-07-04T09:58:34Z

QA report 🟡

No regressions, but resizing some visualizations causes a significant performance drop during resize.

resize-test-2023-07-04_11.54.34.mp4

It's probably caused by reflow. @Frizi @wdanilo do you have any ideas how to fix that? Probably we could update HTML only when user stops dragging, but that may worse UX as well (sometimes I want to see the resizing "live" so I know when it's enough).

vitvakatu · 2023-07-06T10:58:47Z

Merging after discussion, we can address performance issues in the future if needed.

vitvakatu added 5 commits June 27, 2023 13:57

wip

bc862b4

wip

66bc04a

wip

ed23b29

wip

d542fcd

wip

b03a7cd

vitvakatu self-assigned this Jun 29, 2023

farmaazon linked an issue Jun 29, 2023 that may be closed by this pull request

Resizing visualization by dragging container's edge. #7047

Closed

vitvakatu added 3 commits June 30, 2023 16:00

self-review fixes

938a2f0

Merge branch 'develop' into wip/vitvakatu/resize-vis

c0bd2b0

fix

8c73896

vitvakatu marked this pull request as ready for review July 3, 2023 08:38

vitvakatu requested review from MichaelMauderer, wdanilo, farmaazon and kazcw as code owners July 3, 2023 08:38

vitvakatu added 2 commits July 3, 2023 12:52

fix-offset

b1aab02

fix border color

65d2e83

farmaazon approved these changes Jul 3, 2023

View reviewed changes

vitvakatu added 2 commits July 3, 2023 17:33

Use Rectangle for selection shape and also address review comments

f290006

Add changelog entry

eb964f9

Merge branch 'develop' into wip/vitvakatu/resize-vis

ac8a32d

vitvakatu requested a review from farmaazon July 3, 2023 13:55

Maximum resize & disable reset on reopening

daeec28

kazcw approved these changes Jul 3, 2023

View reviewed changes

wdanilo approved these changes Jul 3, 2023

View reviewed changes

Apply review comments

b040247

vitvakatu added the CI: Ready to merge This PR is eligible for automatic merge label Jul 6, 2023

vitvakatu and others added 4 commits July 6, 2023 15:48

Fix formatting

af5bdd9

Merge branch 'develop' into wip/vitvakatu/resize-vis

0a56d1b

Fix after merge

0937289

Merge branch 'develop' into wip/vitvakatu/resize-vis

d64fd43

mergify bot merged commit 8020916 into develop Jul 9, 2023

mergify bot deleted the wip/vitvakatu/resize-vis branch July 9, 2023 15:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Resizing visualizations #7164

Resizing visualizations #7164

vitvakatu commented Jun 29, 2023 •

edited

Loading

farmaazon left a comment

farmaazon Jul 3, 2023

vitvakatu Jul 3, 2023

farmaazon Jul 3, 2023

vitvakatu Jul 3, 2023

farmaazon Jul 3, 2023

vitvakatu Jul 3, 2023

farmaazon Jul 3, 2023

vitvakatu Jul 3, 2023

farmaazon Jul 3, 2023

vitvakatu Jul 3, 2023 •

edited

Loading

farmaazon Jul 3, 2023

vitvakatu Jul 3, 2023

farmaazon Jul 3, 2023

vitvakatu commented Jul 3, 2023

vitvakatu commented Jul 3, 2023

wdanilo commented Jul 3, 2023

xvcgreg commented Jul 4, 2023

vitvakatu commented Jul 4, 2023

farmaazon commented Jul 4, 2023 •

edited

Loading

vitvakatu commented Jul 6, 2023

Resizing visualizations #7164

Resizing visualizations #7164

Conversation

vitvakatu commented Jun 29, 2023 • edited Loading

Pull Request Description

Checklist

farmaazon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vitvakatu Jul 3, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vitvakatu commented Jul 3, 2023

vitvakatu commented Jul 3, 2023

wdanilo commented Jul 3, 2023

xvcgreg commented Jul 4, 2023

vitvakatu commented Jul 4, 2023

farmaazon commented Jul 4, 2023 • edited Loading

QA report 🟡

vitvakatu commented Jul 6, 2023

vitvakatu commented Jun 29, 2023 •

edited

Loading

vitvakatu Jul 3, 2023 •

edited

Loading

farmaazon commented Jul 4, 2023 •

edited

Loading