POC: Drag, Drop, Resize, Stack Dash layout

Hi all- I have been playing around with proof of concept for a layout that could be interactive (concept below). I’ve somewhat hacked my way to get it working with clientside callbacks. Given I’m not well versed in react or js (I’ve stumbled through the custom components tutorials) I was wondering if anyone out there finds this interesting for a project and knows react well, to perhaps team up on creating some custom components that could be used purely in python.

Enjoy, and any thoughts are welcomed!



Great stuff latshawk!

I lack the skills to help you but I also think that dash lacks this basic functionality of allowing the user to freely layout his stuff.

I’m using the Lumino conponent for this and sometimes Dragula.js.
But I’d need more functionality and server-side callbacks.
Eg Restrict dragging vertically/horizontally within a container, callbacks when stuff was moved etc.

Also it would be nice to be able to resize the panels by dragging the splitters between them (like in Lumino)
[EDIT : your implementation does this already (saw this later)]

Your stuff looks cleaner! Would be glad to use it!

1 Like

This is beyond cool, latshawk!
I would LOVE Dash to have a feature like this!

Nice idea! I think it would be massively useful in designing dashboards for a lot of Dash user!

1 Like

@latshawk I hadn’t seen this demo before, but this would be an awesome feature to have within dash! Not sure whether you continued on with the development of it, but I could definitely see it being used by the community!

1 Like

Continuing the discussion from POC: Drag, Drop, Resize, Stack Dash layout:

Thanks so much for developing Dash! It’s awesome!

I would like to ask if anyone can work on the very interesting porting of Lumino to Dash.
Unfortunately, the package doesn’t seem mature yet (theming, saving/loading layout), but it looks very promising.

There are also interesting alternatives, such as Golden Layout
or react FlexLayout

The introduction of these packages into Dash would allow to make very complex dashboards.
The best, it will be to put it togheter with other packages, like bootstrap/material/mantine components.
I am aiming to the UI layout of VScode or codesandbox .

THANK YOU in advance for your work, simply outstanding!

Yes, yes, yes!

I can’t make components myself so I’ve been using Lumino for the lack of a better alternative. (forcing my brain to look past the disadvantages (no theming, no loading/saving layouts/ no customized headers, split panels are dodgy, …)
This functionality is simply ‘essential’ to allow the user to properly manage his screen real estate.

Golden Layout feels like the most promising one out there!
Although Lumino also provides built-in Menus functionality…

I think that flexLayout is very mature and there are almost all features required:
-drag & drop
-resize, pan stack
-customizable theme (darrk also)
-detachable items
-hiding left, buttom, right stacks

Here a working demo:

I’m only a python user with no experience with html/react/js.
Can someone try to wrap it with the standard guide?

Thank you so much!

FlexLayout sure looks good.
Glancing at the demo’s, I still have a slight preference for GoldenLayout, though.

The GoldenLayout demos seem to dive a little deeper into the specific features. Check out the ‘custom functionality demos’ for better insight.
The docs seem to be ok and well maintained. React implementation looks trivial (not to me… though)
Some features don’t really work well (like detaching a panel as a new window), others don’t really make sense to me… but overall, GoldenLayout seems extremely powerful. As does Flexbox of course.
Some fearures, I could not find in FlexLayout though… (correct me if Im wrong).
Eg it’s especially useful to also have simple split panels as demo’ed here. Or the ability to extend the headers, to add functionality such as option/settings/activate-disactivate… buttons/dropdowns, … etc

This said, both GoldenLayout and FlexLayout are great and would really lift dash to a new level.
And let’s not forget that Lumino works like a charm in Dash. It just needs an extra push to implement the remaining JS functionality into dash and fiddle out some quircks.

And of course, the man, latshawk! Having some bloke developing this from within the dash community, would enable us mere mortals to harass his brilliant brains with mad feature requests, 24h a day! Mooahahaaa!! :love_you_gesture: … getting ahead of myself…

Anyhow, … This topic, I think, diserves some attention as it would really push things forward for Dash as a whole. Maybe an idea for some kind of dash wizardz allstar challenge of who flings out the greatest dynamic layout component :fire: :fire: :fire:

In short, every improvement on this front would be greatly appreciated

Hi @davidpsq , I have a very alpha version of this a FlexLayout wrapper that I’m happy to release, but I would like to stabilise the way it is used prior to doing so. It works and is fairly straight-forward to use for a static set of tabs, but adding/removing tabs becomes a little trickier. Do you have more information you can share about your use case?

WOW, that it will be great!!!

I played a bit with lumino and I was able to open new tabs from button click.
I can post example if requested but I was stuck with respect to themes.
You can find my requests in the github page od dash-lumino.

Basically, I would like to use buttons from a navbar to drag&drop new tabs.
I would also like to add a switch to change between light and dark theme.
Another interesting feature would be to save the layout and recall it from a file or save it in the client browser.

I look forward to your release!!

Thank you very much

I do agree with you. The complete GoldenLayout wrapper it will be an amazing boost for UI flexibility!

Hi @davidpsq , I’ve now made a release based on this repo . You can install it with pip install dash-flexlayout. The initial version is very rough, but I’m not using it at the moment so haven’t had the time to add many useful features. There are a couple of very simple examples in the repo, but the documentation does not exist yet. It would be great if you could take a look and give any feedback. Of the features you mentioned:

  • using buttons to create new tabs currently works, but there is no example showing it. The workflow is a little weird too, so if you have any ideas on how you would like it to work (particularly how you manage the content of all tabs), that would be useful.
  • currently only supports light theme
  • you can save and reload layout - there is an example showing how you can interact with the model prop to see the current layout.
1 Like

WOW, thank you so much, as soon as I will have a working demo I’ll post it.
Thank you in advance for your time.

Hi, I installed the module via pip, but I get this message:

import dash_flexlayout as dfl

ModuleNotFoundError: No module named 'dash_flexlayout'

If i download your source code I can run your examples:

for the second one, if I uncomment the line
# headers=headers, it does not work.

Can you help me?

Apologies for that. If you are happy to run directly from the code, we’ll do it that way and I’ll fix the build later. I’ve made a change on main that fixes the issue for me (interestingly was working in an old version of Dash but wasn’t on the latest, so I’ll have to look into that). Can you let me know if the examples work for you on the latest commit on main?

Has anyone looked at the library RC-DOCK for this purpose?

I think rc-dock looks quite old fascion if compared to goldenlayout and flexlayout and does not have advanced features

I am more interested if there is a different react/js library to make a normal dash version of it. Either of these 3 would be a great benifit

Hi benn, finally I had time to try.

Right now both example work by starting the files from the main directory.
I’m still not able to import the module outside the downloaded module directory.

For my use, the priority is:

  • use a button to drag a new tab
  • save and load layout
  • dark theme

If you can provide a simple example with both features I can start thinking on a more complex example to share.

BTW I did not completely understand your first bullet. Can you be more precise, or can we arrange a call on teams?

Thank you and kind regards!