Dashboard Builder v2

[williaster]

@mistercrunch @graceguo-supercat @hughhhh @john-bodley @michellethomas @elibrumbaugh

🔥 big PR warning

This is a WIP branch for the dashboard builder v2 that I wanted to start getting 👀s + 💬s on. Below I have a demo and sections for:

• see issue 4527 I created to track intended functionality
• remaining todo items to get to v0
  • Plan going forward
    Comments on the PR are welcome and we could consider opening PRs into this branch for the rest of the functionality.
• overview of the react + redux architecture
• overview of the new serializable data structure

DEMO

(gif colors are a little janky 🙄)

TODO

• [Chris] new grid + element resize functionality with re-resizable
• [Chris] drag and drop functionality with react-dnd react-beautiful-dnd
• [Chris] define new serializable data structure
• [Chris] Hook up synchronous redux (local app state)
• [Chris] Editable components (hover + popover menus)
• [Chris] rebase on master
• [Chris] remove gradient icon + theme overrides (future UI-kit PR)
• [Chris] clean up css organization + use less variables where possible
• [Chris] Add ability to attach tabs as the top-level dashboard container
• [Chris] undo/redo functionality
• [Chris] Add ability to drop row within a column
• [Chris] Handle case of dropping (adjustable-width) components into a full row
• [Chris] switch between static dashboard vs edit mode
• [Chris] remove all deprecated dashboard v1 css
• [Chris] major perf improvements with integrated data
• [Chris] lazy loading visualizations across tabs
• [Chris] Add sticky top-level tabs
• [Chris] lots of tests (grid/resize functionality, drag and drop, components)
• [Chris] fix logging
• [Chris] add back v1 fallback to support staged rollout

---

• [Grace] hook up to existing async redux + data
• [Grace] migration script for existing layouts
• [Grace] Animated nested sidebar
• [Grace] Add sticky side panel
• [Grace] updated chart header
• [Grace] Addition of new markdown component

---

• add back support for custom css (note: this is still expected to break since class names have changed)
• final aesthetics pass
• (in progress) extensive testing in staging

React architecture

Dashboard components share common functionality (drag/drop, resize, hover menus, popover menus) but also require custom hooks and logic. We accommodate both requirements by encapsulating logic into compossible React components:

// Dynamic layout
<DragDroppable>
  <DropIndicator />
  <HoverMenu>
    <DragHandle />
    {/* menu items */}
  </HoverMenu>
  <DimensionProvider>
    <PopoverMenu>
      <Component>
         { repeat }
      </Component>
    </PopoverMenu>
  </DimensionProvider>
</DragDroppable>  

// [WIP] (ideal) Static layout
<Component>
 { children }
</Component>

Data structure

The following data structure is used for the dashboard layout.

Features

• supports arbitrary nesting
• supports addition of new components in the future
• is a flat data structure so is easily updatable (mirrors normalizr and other redux libs)

{
 // object keyed on ids
 [id]: {
   id,
   type,
   children: [id, ...],
   meta: {
     rowStyle,
     text,
     width,
     height,
     headerSize,
     ...
   },
 },
}

[williaster]

⚠️ Noting that all Dashboard v1 changes will now need to be manually added back to this branch because we copied it into src/dashboard/deprecated/v1/ to support a v1 <> v2 switch

[michellethomas]

@williaster do you remember why you removed show_columns? Not a huge deal if there's a reason to remove this. I used it for some dashboard builder stuff outside of superset codebase.

[williaster]

hmm I don't remember doing this, @graceguo-supercat did you?

[williaster]

looks like here https://github.com/apache/incubator-superset/pull/4849/files#diff-ac978615a4f22c4fad4d01f39e1d4595L522