Dash webpage url in separate tab

Dash Python
1

Hi Everyone,

I am trying to open a web url link (multipage app) in a new tab in browser. All values or data points to be published on that page is stored in a store component with storage_type=‘local’. each time the link is clicked, new records are passed to the store variable and respective pages are suppose to show records as passed. But its not working the way i expected. all tabs are displaying the last record passed to variable. How can we hold respective records in different tabs

2

Hi @athulya_sunil
would you be able to share a minimal reproducible example?

3

Hi adam,

Please find below sample code


Import ,libraries

vesselname = pd.read_csv("IMO_List.csv",encoding='ANSI')

app = dash.Dash(suppress_callback_exceptions=True,long_callback_manager=long_callback_manager)
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
dcc.Store(id='store-data', data=[], storage_type='local'),
html.Div(id='page-content')])

index_page = html.Div([
 
        html.Div(
            dcc.Link('SMART_VOYAGER', href='/page-2'),
        )
])

smart_voyager = html.Div([
              
             dcc.Dropdown(id='dropdown_vessel',options=[{'label': vessel, 'value': vessel}for vessel in vesselname['IMO-VesselName'].unique()],
                          value='9700794-AFRICAN HARRIER',persistence=True,persistence_type='session')
                                
              dcc.Dropdown(id='dropdown_voyage',persistence=True,persistence_type='session',options=[])

    dash_table.DataTable(id='noon_report',
                             data=[],
                             columns=[{'id': c, 'name': c, 'presentation': 'markdown'} for c in Table_col],
                             row_selectable="multi"),                      
  
            dcc.Link('   More Details   ',id='button', href='/page-5',target='_blank)])
			
   more_details_page=html.Div([

        dash_table.DataTable(id='metric_table',
                        data =[],
                        columns=[{'id': c, 'name': c,'presentation': 'markdown'} for c in Table_col3],
  )]),


@app.callback(
    Output(component_id='dropdown_voyage', component_property='options'),
    [Input(component_id='dropdown_vessel', component_property='value')])
def drpdown_fil2(value):
         .....
		return list of voyages
		
@app.callback(
    Output(component_id='noon_report', component_property='data'),
    [Input(component_id='dropdown_voyage', component_property='value'),
     Input(component_id='dropdown_vessel', component_property='value')])
def update_table(value_chosen1,value_chosen2):
   ......
   return noonreportdata.to_dict('records')
@app.callback(
    Output(component_id='store-data', component_property='data'),
    [Input(component_id='noon_report', component_property='derived_virtual_data'),
     Input(component_id='noon_report', component_property='derived_virtual_selected_rows')], prevent_initial_call=True)
def storedata(all_rows_data, slctd_row_indices):
    li = []
    if slctd_row_indices is None:
        return None
    else:
        for i in range(len(all_rows_data)):
            if (i not in slctd_row_indices):
                li.append(i)
        dff = pd.DataFrame(all_rows_data)
        dff = dff.drop(li, axis='index')
        return dff.to_dict('records')
@app.callback(
    Output(component_id='metric_table', component_property='data'),
    [Input(component_id='store-data', component_property='data')])
def update_table(value_chosen1):
    df1 = pd.DataFrame(value_chosen1)
    data = {'Metric':['Beaufort Scale','Wave Height(m)','Wave Resistance(kn)','Weather Resistance(kn)',
                      'Wind Resistance(kn)','Wind Speed(mps)','Ocean Current Speed(mps)','Current angle of attack','Wind angle of attack','Wave angle of attack'],'Value':
            [df1['Beaufort Scale'][0],df1['Wave Height(m)'][0],df1['Wave Resistance(kn)'][0],
             df1['Weather Resistance(kn)'][0],df1['Wind Resistance(kn)'][0],df1['Wind Speed(mps)'][0],df1['Ocean Current Speed(mps)'][0],df1['Current angle of attack'][0],
             df1['Wind angle of attack'][0],df1['Wave angle of attack'][0]]
            }
    df2 = pd.DataFrame(data)
    return (df2.to_dict('records'))
  @app.callback(Output('page-content', 'children'),
              [Input('url','pathname')])
  def navigate(pagename):
        if(pagename=='/page-2'):
            return (smart_voyager)
        elif pagename=='/page-5':
            return (more_details_page)
        else: return(index_page)
app.run_server(debug=True,use_reloader=False)
4

hi @athulya_sunil
I just wrote you a DM because there are a few things missing in the code.