Passing a layouts dict into DraggableDashboardResponsive doesn't seem to take effect.

[tianlinnyc]

DraggableDashboardResponsive (id='foo', layouts={'lg': [a_layout_array_saved_from_previous_layout_change_callback], clearSavedLayout=True, children[...]) doesn't seem to take effect and in turn the default layout is then used.

I thought this 'layouts' is supposed to be taken in as the 'providedLayouts'?

[tianlinnyc]

Actually, the line above works on the 'top level' DraggableDashboardResponsive component.

However, in a nested DraggableDashboardResponsive component, say DraggableDashboardResponsive A contains DraggableDashboardResponsive B, passing in B's layout doesn't take effect when B is rendered.

[MehdiChelh]

Hi !

Please could you provide a more detailed example?

Note that the breakpoints depend on the size of the parent, so B could be using for example the "xs" layout, whereas A would be using the "m" layout.

The following example with nested ResponsiveGridLayout seems to work for me (note that DraggableDashboardResponsive is probably going to be deprecated in the future).

import dash
from dash.dependencies import Input, Output
from dash import dcc
from dash import html
from dash.html.Div import Div

import plotly.express as px
import pandas as pd

import dash_draggable

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

app.layout = html.Div([
    html.H1("Dash Draggable"),
    html.H2("Layouts - 1"),
    html.Div(id='1-layouts_callback'),
    html.H2("Layouts - 2"),
    html.Div(id='2-layouts_callback'),
    dash_draggable.ResponsiveGridLayout(
        id='A',
        layouts={
            'lg': [{'i': '0', 'w': 6, 'h': 8, 'x': 0, 'y': 0}, {'i': 'B', 'w': 5, 'h': 11, 'x': 6, 'y': 0}],
            'md': [{'i': '0', 'x': 0, 'y': 0, 'w': 5, 'h': 8}, {'i': 'B', 'x': 5, 'y': 0, 'w': 5, 'h': 11}],
            'sm': [{'i': '0', 'x': 0, 'y': 0, 'w': 3, 'h': 8}, {'i': 'B', 'x': 3, 'y': 0, 'w': 3, 'h': 11}],
            'xs': [{'i': '0', 'x': 0, 'y': 0, 'w': 4, 'h': 8}, {'i': 'B', 'x': 0, 'y': 1, 'w': 4, 'h': 11}],
            'xxs': [{'i': '0', 'x': 0, 'y': 0, 'w': 2, 'h': 8}, {'i': 'B', 'x': 0, 'y': 1, 'w': 2, 'h': 11}]
        },
        children=[
            html.Div("A-0"),
            dash_draggable.ResponsiveGridLayout(
                id='B',
                layouts={
                    'lg': [{'i': '0', 'w': 6, 'h': 2, 'x': 0, 'y': 0}],
                    'md': [{'i': '0', 'x': 0, 'y': 0, 'w': 5, 'h': 2}],
                    'sm': [{'i': '0', 'x': 0, 'y': 0, 'w': 3, 'h': 2}],
                    'xs': [{'i': '0', 'x': 0, 'y': 0, 'w': 4, 'h': 2}],
                    'xxs': [{'i': '0', 'x': 0, 'y': 0, 'w': 2, 'h': 2}]
                },
                children=[
                    html.Div("B-0")
                ]
            ),
        ]
    ),
])

@app.callback(
    Output('1-layouts_callback', 'children'),
    Input('A', 'layouts'))
def display_layouts_1(layout):
    print({"layout": layout})
    return(str(layout))

@app.callback(
    Output('2-layouts_callback', 'children'),
    Input('B', 'layouts'))
def display_layouts_2(layouts):
    print({"layouts": layouts})
    return(str(layouts))

if __name__ == '__main__':
    app.run_server(debug=True, port='5080')

[tianlinnyc]

Hi, Mehdi.

I just upgraded to dash-draggable==0.1.2(didn't notice this version just came out in October) and tried out the ResponsiveGridLayout in my use case.

The layouts passed into the inner ResponsiveGridLayout does take effect as you've mentioned and shown in the example.

I will be replacing DraggableDashboardResponsive with ResponsiveGridLayout going forward.

There probably no need to spend more effort investigating the DraggableDashboardResponsive behavior in this regard, given it might be deprecated soon.

Again, thanks for building dash-draggable. It's quite handy.