Dash : FlexLayout Component

Dash Python
1

Hi everyone,

Continued from : POC: Drag, Drop, Resize, Stack Dash layout

Dash really needs such a feature.
I kept on using dash-lumino for a while now, waiting for a descent alternative. GoldenLayout is probably not going to be implemented in Dash.
Dash-FlexLayout seems to be the better solution of everything that is available. So big props to @benn0 and @davidpsq for their work on this component.

I pip install dash_flexlayout and ran the usage stuff.

Is it possible to add a working example that includes those features?
It would also be nice to include:

  • save/load buttons to showcase how to use callbacks to save/load layout models.
  • Theming

Considering the FlexLayout React component Demo, you guys are almost there

2

This component is actually lovely. @popo did you ever manage to get it working with styling or custom CSS colors? I would totally use this if not for the forced white theme.

3

I built out something similar haven’t gotten around to proper documentation but it has a dark theme:

from dash_mosaic import DashMosaic

initial_layout = {
    'direction': 'row',
    'first': 1,
    'second': {
        'direction': 'column',
        'first': 2,
        'second': 3,
        'splitPercentage': 60,
    },
    'splitPercentage': 60,
}

tile_content = {
        1: html.Div(),
        2: html.Div(),
        3: html.Div()
    }

DashMosaic(
            id='mosaic',
            layout=initial_layout,
            theme='Blueprint Dark',
            tileContent=tile_content,
            style={'height': '100vh'},
            windowTitles={1: "Panorama", 2: "Map", 3: "Game Controls"},
            showSplitButton=False,
            showExpandButton=True,
            showRemoveButton=False,
            showNavbar=False
        )

Have a demo you could play with up on my dash geo guesser game: GEO🗺️Index

But outside of that, pip install dash_flexlayout is a gem shocked i just found this.