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.
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!
@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!
I would like to ask if anyone can work on the very interesting porting of Lumino to Dash. https://github.com/VK/dash-lumino-components
Unfortunately, the package doesn’t seem mature yet (theming, saving/loading layout), but it looks very promising.
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!
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
-buttons
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!! … 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
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?
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.
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.
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?
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?
… getting ahead of myself…
