Skip to content

Dashboard Builder

Philipp Rudiger edited this page Feb 11, 2021 · 2 revisions

Goals:

  • Take user through steps of creating Lumen dashboard
  • We do not want to build another plot/table builder (e.g. dfviz/xrviz/pivottable.js/perspective)
  • We simply want to expose the power of our existing tools
  • Generate a shared specification for views (plots and tables), which we can generate with any of the view builders
  • We want editing to feel responsive

Panel developer experience

In order for the dashboard builder to be successful we want the process to feel responsive and give the user a view of the dashboard they are building. To achieve the desired responsiveness we have to extend Panel to add "hot reload" functionality, which updates the dashboard as you are editing.

Builder pipeline

A Lumen GUI simply has to have the ability to declare Source, Filter, Transform and View objects. The easiest way to construct this from scratch is a builder pipeline which provides a step-by-step pipeline constructing a full yaml specification.

  1. Build top-level config filling in a title, selecting a template, theme etc.
  2. Build some sources or simply inherit Intake catalog
    1. Select type of source
    2. Fill in Source parameters
  3. Add a target
    1. Select title, source, layout
    2. Add views:
      1. Add transforms
        1. Select type
        2. Fill in Transform parameters
      2. Select type or select "View Builder" a. Use custom "View Builder" 1. Select editor for creating view (perspective, dfviz, ...) 2. Select how to display view (hvPlot, perspective...) 3. Customize generated View b. Select existing View type 1. Select type 2. Fill in View parameters
    3. Add filters:
      1. Select type
      2. Fill in Filter parameters

View Builders

To build visual components such as plots and tables the GUI should be able to integrate, which may be built on dfviz, pivottable.js, Perspective or any other similar tool. In order to embed these we should target adding support for one or more of these in Panel and come up with an interchange format that can be consumed by hvPlot or any other library, e.g.:

    type: table
    columns: [‘a’, ‘b’, ‘c’]
    groupby: [‘d’]
    splitby: [‘e’]
    sorters: [{‘b’, ‘direction’: ‘ascending’}]
    aggregators: [{‘a’: ‘mean’}]
    filter: [{‘a’: (1, 3)}]

Tree editor

For more experienced users or for final tweaking of the final specification we should also offer a tree editor, which performs validation and provides auto-completion for the various fields. This will be built on a tree editor like JSONEditor.

Clone this wiki locally