williaster opened a new pull request #4528: [wip] dashboard builder v2
URL: https://github.com/apache/incubator-superset/pull/4528
 
 
   @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](url) 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
   
![pr-v0](https://user-images.githubusercontent.com/4496521/36931130-d3df7cd6-1e64-11e8-8292-13aeaca41171.gif)
   
   ### TODO
   - [x] [Chris] new grid + element resize functionality with `re-resizable`
   - [x] [Chris] drag and drop functionality with `react-dnd` 
~~`react-beautiful-dnd`~~
   - [x] [Chris] define new serializable data structure
   - [x] [Chris] Hook up synchronous redux (local app state)
   - [x] [Chris] Editable components (hover + popover menus)
   - [] [Chris] rebase on master
   - [] [Chris+...] lots of tests (grid/resize functionality, drag and drop, 
components)
   - [] [Chris] remove gradient icon + theme overrides (future UI-kit PR)
   - [] [Grace] hook up to existing async redux + data
   - [] [Grace] Layout of static dashboard
   - [] [Grace] Addition of new markdown component
   - [] [Grace] migration script for existing layouts
   - [] [Grace] migration script for existing markdowns + separators
   - [] [Grace] edit/undo functionality
   - [] Animated nested sidebar
   - [] 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:
   
   ```jsx
   // Dynamic layout
   <DragDroppable>
     <DropIndicator />
     <HoverMenu>
       <DragHandle />
       {/* menu items */}
     </HoverMenu>
     <DimensionProvider>
       <PopoverMenu>
         <Component>
            { repeat }
         </Component>
       </PopoverMenu>
     </DimensionProvider>
   </DragDroppable>  
   
   // 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) 
   
   ```javascript
   {
    // object keyed on ids
    [id]: {
      id,
      type,
      children: [id, ...],
      meta: {
        rowStyle,
        text,
        width,
        height,
        headerSize,
        ...
      },
    },
   }
   ```
   
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


With regards,
Apache Git Services

Reply via email to