Dash-responsive-grid-layout - Layout saved on local storage

Dash Python
1

Hi everybody !

I met difficulties to save my layouts in the local storage.

My project use the (so magic !) dash-responsive-grid-layout ( https://github.com/AlgorithmHub/dash-responsive-grid-layout/blob/master/README.md ) adapted from the react-grid-layout ( https://github.com/AlgorithmHub/dash-responsive-grid-layout/blob/master/README.md )

So I got a grid which contain some graphs resizeable and draggable.

What I want now, is to save in the local storage the last positions and sizes of my layouts in the grid.

I think I have to implement the “onLayoutChange” props, and probably use the dcc.Store but I have no idea how to use this tools and where in this special case of grid.

If someone already do it or have the knowledge, I’ll look for your advices.
Thank you

edit:

There is an example in ReactJs of what i’m looking for:
here is the demo:
https://strml.github.io/react-grid-layout/examples/7-localstorage.html
here the code:

But still blocked with the equivalent in Dash.

2

Hey,

first of all the grid layout component looks really cool. I tried to make my own resizable and draggable components, but had issues with resizing of graphs. Nevertheless, as i see it, onLayoutChange gives you a JSON formatted result, which comes in handy. Simply have the onLayoutChange as an Input in a callback and a dcc.store data as Output, dcc.Store typ should be storage. This way you will need to load the dcc.store data on page load and give the layout information to your gridlayout component.

Cheers!

3

Thanks for your lights seferoezcan, I’ll try that !

Edit:

Nevertheless, as i see it, onLayoutChange gives you a JSON formatted result,

What I understand is that onLayoutChange is simply a listener which doesn’t return anything.
He’s only waiting for an action on the grid to launch a function.
But the JSON you speak about is, precisely, what I’m trying to obtain :joy:

We can read in the react-grid-layout’s doc :

// Callback so you can save the layout.
// Calls back with (currentLayout) after every drag or resize stop.
onLayoutChange: (layout: Layout) => void,

type ItemCallback = (layout: Layout, oldItem: LayoutItem, newItem: LayoutItem,
placeholder: LayoutItem, e: MouseEvent, element: HTMLElement) => void;

// Calls when drag is complete.
onDragStop: ItemCallback,

// Calls when resize is complete.
onResizeStop: ItemCallback,

so I tried something like:

    layouts={
        'lg': [
            {'i': 'graph_key', 'x': 1, 'y': 1, 'w': 5, 'h': 5, 'minW': 1, 'minH': 1,
             'static': False, 'draggableHandle:': '.draggable', 'isDraggable': True, 'isResizable': True,
             'onLayoutChange': (layout = layout) },
        ],

But, so far, I didn’t found any syntax which can match with Dash and the dash-responsive-grid-layout’s component.