search

MehdiChelh / dash-draggable

Dash components for building draggable and resizable grid layouts. Based on the well-known STRML/react-grid-layout.
MIT License
56 stars 12 forks source link

setting clearSavedLayout to True in GridLayout prevents page from loading #6

Open europa502 opened 2 years ago

europa502 commented 2 years ago

Hi,

I wanted to refresh the arrangement of buttons every time the page loaded, so I tried setting clearSavedLayout to True. But then the page stopped loading. The page remains frozen with message - 'Loading...'

I tried removing that prop but it didn't help. After several trial and errors I was able to get it working, when I changed the id of GridLayout object. But unfortunately I couldn't replicate it again. I also tried removing the id of that object to see whether random default id might help, but it didn't.

I also tried restarting dash as well as browser but that also didn't help. Also tried to load it on a private window(same browser), again, no help.

But when I load it on a different browser it works there. I don't understand how is a private window trying to fetch cache info. Here's the code - 


#using dash 2.0

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc
import dash_draggable

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

app = Dash(__name__, external_stylesheets=external_stylesheets)

layers = [dbc.Button( 'Antenna', id= 'antenna', style={'width':'100%', 'size': 'sm'} ),
          dbc.Button( 'Band', id= 'band', style={'width':'100%'} ),
          dbc.Button( 'Bandwitdh', id= 'bandwidth', style={'width':'100%'} ),
          dbc.Button( 'Board MAC Address', id= 'boardMacAddress', style={'width':'100%'} ),
          dbc.Button( 'Board ID', id= 'boardid', style={'width':'100%'} ),
          dbc.Button( 'Board Name Rev', id= 'boardrevname', style={'width':'100%'} ),
          dbc.Button( 'Board Rev', id= 'boardrev', style={'width':'100%'} ),
          dbc.Button( 'Chain', id= 'chain', style={'width':'100%'} ),
          dbc.Button( 'Channel', id= 'channel', style={'width':'100%'} ),
          dbc.Button( 'Channel Mode', id= 'channelMode', style={'width':'100%'} ),
          dbc.Button( 'Chip Number', id= 'chipnum', style={'width':'100%'} ),
          dbc.Button( 'Chip Rev', id= 'chiprev', style={'width':'100%'} ),
          dbc.Button( 'Comments', id= 'comments', style={'width':'100%'} ),
          dbc.Button( 'Core', id= 'corerev', style={'width':'100%'} ),
          dbc.Button( 'DHD version', id= 'dhdversion', style={'width':'100%'} ),
          dbc.Button( 'Display Voltage', id= 'voltage', style={'width':'100%'} ),
          dbc.Button( 'Driver Rev', id= 'driverrev', style={'width':'100%'} ),
          dbc.Button( 'DUT ID', id= 'dutid', style={'width':'100%'} ),
          dbc.Button( 'Elapsed Time', id= 'elapsedTime', style={'width':'100%'} ),
          dbc.Button( 'Margin', id= 'margin', style={'width':'100%'} ),
          dbc.Button( 'Modulation', id= 'modulation', style={'width':'100%'} ),
          dbc.Button( 'Packet Bandwidth', id= 'packetBandwidth', style={'width':'100%'} ),
          dbc.Button( 'Quality', id= 'quality', style={'width':'100%'} ),
          dbc.Button( 'Rate', id= 'rate', style={'width':'100%'} ),
          dbc.Button( 'Result', id= 'result', style={'width':'100%'} ),
          dbc.Button( 'RuIndex', id= 'ruIndex', style={'width':'100%'} ),
          dbc.Button( 'RuTone', id= 'ruTone', style={'width':'100%'} ),
          dbc.Button( 'Serial Number', id= 'serialNum', style={'width':'100%'} ),
          dbc.Button( 'Side Band', id= 'sideBand', style={'width':'100%'} ),
          dbc.Button( 'Slice', id= 'slice', style={'width':'100%'} ),
          dbc.Button( 'Split Plot', id= 'splitPlot', style={'width':'100%'} ),
          dbc.Button( 'Station Name', id= 'stationName', style={'width':'100%'} ),
          dbc.Button( 'Summary', id= 'summary', style={'width':'100%'} ),
          dbc.Button( 'Temperature', id= 'temperature', style={'width':'100%'} ),
          dbc.Button( 'Test Number', id= 'testNumber', style={'width':'100%'} ),
          dbc.Button( 'Test Program Name', id= 'testProgramName', style={'width':'100%'} ),
          dbc.Button( 'Test Program Version', id= 'testProgramVersion', style={'width':'100%'} ),
          dbc.Button( 'Test Case', id= 'testCase', style={'width':'100%'} ),
          dbc.Button( 'Test Case ID', id= 'testCaseId', style={'width':'100%'} ),
          dbc.Button( 'Timestamp', id= 'timeStamp', style={'width':'100%'} ),
          dbc.Button( 'VBAT', id= 'vbat', style={'width':'100%'} ),
          dbc.Button( 'VDDIO', id= 'vddio', style={'width':'100%'} ),
          dbc.Button( 'Voltage', id= 'voltageActual', style={'width':'100%'} ),]

app.layout = html.Div([
    html.H1("Dash Draggable"),
    dbc.Row([
        dbc.Col(dbc.Label('Avaliable Layers', style={'size':'40px'})),
        dbc.Col(dbc.Label('Selected Layers', style={'size':'40px'})),
        ]),

    dash_draggable.GridLayout(
        children=layers,
        height=0,
        width=500,
        gridCols=2,
        isResizable=False,
        isDroppable=True,
        clearSavedLayout=False
    ),
])

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