[Dashboard] New layout engine #174132

ThomThomson · 2024-01-02T21:32:01Z

Summary

This PR contains a new performant and simple drag & drop layout engine for Kibana which uses HTML5 and CSS and and has no external dependencies.

Closes #190372

Kbn grid layout

The new layout engine is isolated in its own package @kbn/grid-layout, and the PR also contains an example plugin showing its use.

How to test

Run kibana with yarn start --run-examples
Navigate to Analytics -> Developer examples
Open the Grid example.
❓ ❓ ❓ ❓
Profit

Known differences

There are a few differences when comparing kbn grid layout and our current layout engine react grid layout.

No animations on subsequent panel moves

When a panel collides with another and pushes it out of the way, kbn grid layout animates this. Because of our direct usage of CSS grid, we are unable to animate these events. I.e. grid-column and grid-row properties do not support transition.

`react grid layout`	`kbn grid layout`

This difference can make kbn grid layout appear snappier, but much less smooth. This would be a very difficult difference to overcome, as we would need to move away from css grid and calculate pixel locations and sizes on the fly.

Difficulty moving a larger panel under a smaller one

react grid layout has special code for handling a case where a panel is moved down onto another. This mostly manifests in an earlier swap when moving a large panel underneath a smaller one. kbn grid layout does not have this code, which. means users must drag a panel actually below the panel underneath for the swap to happen.

`react grid layout`	`kbn grid layout`

This is somewhat mitigated by the fact that the drag preview doesn't block visibility of the panel underneath. Fixing this difference would require adding a small edge case to our sorting algorithm, and wouldn't be too difficult of a change.

Events are canceled when moving outside the browser window

react grid layout allows the user to drag outside the browser window. The panel will continue to be dragged as if it was still following the mouse. kbn grid layout does not do allow this, and dragging outside of the browser window will cancel the drag operation.

`react grid layout`	`kbn grid layout`

This may cause frustration as the user needs to be careful about where they drag the panels. This could be fixed by digging into the internals of React Grid Layout's event handling to find differences, and would not be too much trouble as React Grid Layout also uses HTML5 drag and drop.

…ontents callback.

ThomThomson · 2024-08-12T16:24:34Z

/ci

…fix'

…rop' into spaceTime/htmlDragDrop

ThomThomson · 2024-08-13T15:39:50Z

/ci

ThomThomson · 2024-08-13T20:49:29Z

/ci

elasticmachine · 2024-08-14T14:07:44Z

Pinging @elastic/kibana-presentation (Team:Presentation)

nreese · 2024-08-15T13:41:32Z

The grid layout feels really snappy and smooth.

One negative thing I have noticed when comparing the new layout system to the old layout system is that the shadow element (green box) and real element are switched.

In the old system, the real element is attached to your mouse movements and is on top of the shadow element (red box). This feels really natural and easy to track since the real element is opaque and the shadow element is mostly covered up.

In the new system, the shadow element is attached to your mouse movements and is on top of the real element. I found this unnatural. The shadow element is translucent and its easy for your eye to get stuck on the real element underneath which is not attached to mouse movements. Moving the panel around feels less natural because your eye is focused on the real element which does not directly track mouse movement, making shadow element more distracting.

Is there a reason for this change?

nreese

Are there plans for dark mode support?

nreese · 2024-08-15T13:45:08Z

examples/grid_example/README.md

@@ -0,0 +1,3 @@
+# Grid Example
+
+This temporary example plugin will be used to build out the new layout engine for Dashboards.


Lets not make this temporary. It would be nice to have a playground for the layout engine outside of dashboard. Plus, its a good learning resource without all the noise of dashboard implementation.

Addressed in 75a4e51

examples/grid_example/public/app.tsx

nreese · 2024-08-15T13:47:37Z

examples/grid_example/public/plugin.ts

+    developerExamples.register({
+      appId: GRID_EXAMPLE_APP_ID,
+      title: gridExampleTitle,
+      description: `This temporary example plugin will be used to build out the new layout engine for Dashboards.`,


again, lets change wording to call it a playground for the layout engine.

Addressed in 75a4e51

nreese · 2024-08-15T13:54:52Z

packages/kbn-grid-layout/grid/grid_layout.tsx

+      {gridLayout.map((rowData, rowIndex) => {
+        return (
+          <GridRow
+            key={rowIndex}


How about using rowData.title as key since index is not a recommended key?

Good catch! Addressed in 75a4e51

ThomThomson · 2024-08-15T14:39:47Z

In the new system, the shadow element is attached to your mouse movements
Is there a reason for this change?

Good callout. This change was made mostly for its implementation simplicity. It's much more natural from a code perspective to move the actual element around in CSS grid coordinates and have the ghost follow the mouse position. I also felt like it gave a better preview of what the grid will look like on drop.

That said, I can see how this could feel jarring. To fix this problem we could either:

Mitigate this with design elements - i.e. maybe the panel being dragged gets less contrast and the shadow element gets more opaque?
Look into actually swapping the elements. This will likely make the implementation more complex, but it's definitely doable!

@andreadelrio what do you think about this drawback?

Are there plans for dark mode support?

Looks like this is a problem with the example plugin. I will look into propagating dark mode into it. Dark mode works great with the engine in Dashboard.

nreese · 2024-08-15T15:00:17Z

Mitigate this with design elements - i.e. maybe the panel being dragged gets less contrast and the shadow element gets more opaque?

This is a good place to start

andreadelrio · 2024-08-15T18:04:42Z

its easy for your eye to get stuck on the real element underneath which is not attached to mouse movements. Moving the panel around feels less natural because your eye is focused on the real element which does not directly track mouse movement, making shadow element more distracting.

Is there a reason for this change?

In the new system, the shadow element is attached to your mouse movements
Is there a reason for this change?

Good callout. This change was made mostly for its implementation simplicity. It's much more natural from a code perspective to move the actual element around in CSS grid coordinates and have the ghost follow the mouse position. I also felt like it gave a better preview of what the grid will look like on drop.

That said, I can see how this could feel jarring. To fix this problem we could either:

Mitigate this with design elements - i.e. maybe the panel being dragged gets less contrast and the shadow element gets more opaque?

Look into actually swapping the elements. This will likely make the implementation more complex, but it's definitely doable!

@andreadelrio what do you think about this drawback?

I would consider this a significant drawback of the new layout engine. I think the behavior should be as before: mouse movement attached to real element, shadow shown behind real element. This is also the behavior I've seen in all the references I've reviewed. I don't think design tweaks are going to get us very far here and would encourage the team to consider #2. cc @teresaalvarezsoler

nreese

This is an excellent start to the layout engine. Really clean solution. We can work out details in follow on PRs since this PR does not merge any user facing features.
code review and tested in chrome

ThomThomson · 2024-08-15T19:42:42Z

@elasticmachine merge upstream

ThomThomson · 2024-08-15T21:32:06Z

I've created two follow up issues:

one for the strange scrolling behaviour and one for the swapping of the ghost and the actual element when dragging.

kibana-ci · 2024-08-15T21:41:08Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 48fcdc4

Failed CI Steps

Test Failures

[job] [logs] Jest Tests #14 / DataTableColumnHeader should render a correct token

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/grid-layout`	-	16	+16

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`@kbn/grid-layout`	-	1	+1

Unknown metric groups

API count

id	before	after	diff
`@kbn/grid-layout`	-	16	+16

ESLint disabled line counts

id	before	after	diff
`@kbn/grid-layout`	-	2	+2

Total ESLint disabled count

id	before	after	diff
`@kbn/grid-layout`	-	2	+2

History

💛 Build #227951 was flaky 75a4e51
💚 Build #227644 succeeded e3d1d0e
💚 Build #227487 succeeded e3d1d0e
💛 Build #227424 was flaky 2158737
💔 Build #227225 failed f8b4de5
💔 Build #227144 failed 3d71fad

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

super simple grid implementation using only html drag drop and css grid

9bbe618

ThomThomson mentioned this pull request Jan 16, 2024

[POC] HTML / CSS layouting investigation #174956

Closed

ThomThomson added 3 commits May 10, 2024 15:26

Merge remote-tracking branch 'upstream/main' into spaceTime/htmlDragDrop

4b93780

Merge remote-tracking branch 'upstream/main' into spaceTime/htmlDragDrop

bdf52b1

Merge remote-tracking branch 'upstream/main' into spaceTime/htmlDragDrop

44080d1

ThomThomson changed the title ~~[Spacetime] HTML Drag Drop Grid POC~~ [Dashboard] New layout engine POC Jun 7, 2024

ThomThomson added 17 commits June 7, 2024 13:19

Simple collision resolution algorithm.

140bc32

separate into files

9b368d9

Noop ghosts

b6110df

hide hover if any panel is being dragged

227e722

first pass at multi grid

1c6e194

Merge remote-tracking branch 'upstream/main' into spaceTime/htmlDragDrop

107d06f

move out of storybook

e7895a5

use window event listeners

5f56371

Merge remote-tracking branch 'upstream/main' into spaceTime/htmlDragDrop

81e23a5

drag preview and better calculation for grid rows

69453e6

start simplicity refactor

2a8a444

New code style and organization. All features working as before.

8fb43d4

finish refactor and clean up.

4cf12c5

Merge remote-tracking branch 'upstream/main' into spaceTime/htmlDragDrop

00319ee

simple collapsing implementation

a59c605

switch to scrollX and scrollY

327e0f5

move to package. Create separate example app

cf67c34

ThomThomson changed the title ~~[Dashboard] New layout engine POC~~ [Dashboard] New layout engine Aug 12, 2024

use top row to determine section overlap, add scroll bars and panel c…

3d71fad

…ontents callback.

ThomThomson and others added 4 commits August 12, 2024 12:27

simple readme

4e2d80d

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

2f162b5

…fix'

Merge remote-tracking branch 'refs/remotes/origin/spaceTime/htmlDragD…

1bccdb3

…rop' into spaceTime/htmlDragDrop

Stop drag preview from contributing to scroll

5e182eb

mistic and others added 2 commits August 13, 2024 16:05

chore(NA): update tsconfig.json for kbn/grid-layout

a88dbfe

Merge remote-tracking branch 'upstream/main' into spaceTime/htmlDragDrop

2158737

ThomThomson added 2 commits August 13, 2024 14:39

revert unneeded changes

eed959d

save without formatting

e3d1d0e

ThomThomson marked this pull request as ready for review August 14, 2024 14:07

nreese self-requested a review August 15, 2024 13:28

nreese reviewed Aug 15, 2024

View reviewed changes

review feedback

75a4e51

nreese approved these changes Aug 15, 2024

View reviewed changes

Merge branch 'main' into spaceTime/htmlDragDrop

48fcdc4

ThomThomson merged commit 7290824 into elastic:main Aug 15, 2024
41 checks passed

kibanamachine added v8.16.0 backport:skip This commit does not require backporting labels Aug 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard] New layout engine #174132

[Dashboard] New layout engine #174132

ThomThomson commented Jan 2, 2024 •

edited

Loading

ThomThomson commented Aug 12, 2024

ThomThomson commented Aug 13, 2024

ThomThomson commented Aug 13, 2024

elasticmachine commented Aug 14, 2024

nreese commented Aug 15, 2024 •

edited

Loading

nreese left a comment

nreese Aug 15, 2024

ThomThomson Aug 15, 2024

nreese Aug 15, 2024

ThomThomson Aug 15, 2024

nreese Aug 15, 2024

ThomThomson Aug 15, 2024

ThomThomson commented Aug 15, 2024

nreese commented Aug 15, 2024

andreadelrio commented Aug 15, 2024

nreese left a comment

ThomThomson commented Aug 15, 2024

ThomThomson commented Aug 15, 2024

kibana-ci commented Aug 15, 2024

API count

ESLint disabled line counts

Total ESLint disabled count

		@@ -0,0 +1,3 @@
		# Grid Example

		This temporary example plugin will be used to build out the new layout engine for Dashboards.

[Dashboard] New layout engine #174132

[Dashboard] New layout engine #174132

Conversation

ThomThomson commented Jan 2, 2024 • edited Loading

Summary

Kbn grid layout

How to test

Known differences

No animations on subsequent panel moves

Difficulty moving a larger panel under a smaller one

Events are canceled when moving outside the browser window

ThomThomson commented Aug 12, 2024

ThomThomson commented Aug 13, 2024

ThomThomson commented Aug 13, 2024

elasticmachine commented Aug 14, 2024

nreese commented Aug 15, 2024 • edited Loading

nreese left a comment

Choose a reason for hiding this comment

nreese Aug 15, 2024

Choose a reason for hiding this comment

ThomThomson Aug 15, 2024

Choose a reason for hiding this comment

nreese Aug 15, 2024

Choose a reason for hiding this comment

ThomThomson Aug 15, 2024

Choose a reason for hiding this comment

nreese Aug 15, 2024

Choose a reason for hiding this comment

ThomThomson Aug 15, 2024

Choose a reason for hiding this comment

ThomThomson commented Aug 15, 2024

nreese commented Aug 15, 2024

andreadelrio commented Aug 15, 2024

nreese left a comment

Choose a reason for hiding this comment

ThomThomson commented Aug 15, 2024

ThomThomson commented Aug 15, 2024

kibana-ci commented Aug 15, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Public APIs missing comments

Public APIs missing exports

API count

ESLint disabled line counts

Total ESLint disabled count

History

ThomThomson commented Jan 2, 2024 •

edited

Loading

nreese commented Aug 15, 2024 •

edited

Loading