search

elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.51k stars 8.06k forks source link

[POC] HTML / CSS layouting investigation #174956

Open ThomThomson opened 6 months ago

ThomThomson commented 6 months ago

Intro

It may be possible to build a layouting solution which can meet our needs using no external libraries at all. We should investigate this possibility as part of our layout engine investigation

This proof of concept was built as a space time, in 3 days. While this solution has checked off some of the requirements below, it is still very far from a complete proof of concept for this solution. To be considered proof that this direction is viable for Kibana, we need the following features:

## Feature Requirements
- [x] Drag and drop positioning of panels in a grid
- [x] Clearly visible positioning on drop. (grid guidelines)
- [x] Collision detection between panels
- [x] The ability to support Kibana's existing 48 column layout. (customizable column counts)
- [x] Compaction algorithm (we should reverse-engineer this from an existing layout engine)
- [x] Panel reordering algorithm (we should reverse-engineer this from an existing layout engine)
- [x] Drag to resize from bottom right of panel
- [ ] The ability to drag a panel from one grid to another (required for collapsible panels)
- [x] The ability for grids to expand when a panel is dragged near the bottom

With these features in place, we can build a demo of many panels on a page with multiple collapsible sections, show the demo to internal stakeholders, and determine whether or not to move this solution into Kibana.

elasticmachine commented 6 months ago

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