Link style and callback reload

Dash Python
1
  1. Please tell me how to set active class for dcc.link. On clicking a link I want to add a css active class which set a backgroud color.

html.Div([
dcc.Location(id=‘url’, refresh=False),
dcc.Link(‘One’, href=’/apps/one’),
dcc.Link(‘Two’, href=’/apps/two’),
dcc.Link(‘Three’, href=’/apps/three’),
dcc.Link(‘Four’, href=’/apps/four’),
dcc.Link(‘Five’, href=’/apps/five’),
], className=‘nav’, id=‘navid’)

@app.callback(Output(‘page-content’, ‘children’),
[Input(‘url’, ‘pathname’)])
def display_page(pathname):
if pathname == ‘/apps/one’:
return one.layout
elif pathname == ‘/apps/two’:
return two.layout
elif pathname == ‘/apps/three’:
return three.layout
elif pathname == ‘/apps/four’:
return four.layout
else:
return one.layout

  1. I am creating a multi-page dash app. And added a datepickerrange component on all pages(product specific pages), on selecting the datepicker(having default start_date and end_date) I am pulling the data from sql and binding it to a html.Table. Here my issue is when accessing the different page the datepicker reloads every time on that page. How to stop this reload and my requirement is to load only once untill I change the daterangepicker value.

Code:

@app.callback([Output(‘DateRangeDataOutput’, ‘children’), Output(‘RegistrationGraphOutput’, ‘children’),
Output(‘PaymentGraphOutput’, ‘children’)],
[
Input(‘get-data-on-date-range’, ‘start_date’),
Input(‘get-data-on-date-range’, ‘end_date’)
]
)
def update_output(start_date, end_date):
registrationQuery = pd.read_sql_query(query to pull the registration data)
paymentQuery = pd.read_sql_query(query to pull the registration data)

dateRangeOutputData = html.Div([])

registrationGraph = dcc.Graph(id=‘registrationScatter’, style={‘height’: 300},
figure={‘data’: [
go.Scatter(
x=registration_xy.index,
y=registration_xy[‘signupdate’],
mode=‘lines+markers’,
name=‘lines+markers’,
),
],
‘layout’: go.Layout(title=’’, margin=dict(l=50, r=50, b=50, t=20))
}
)
PaymentGraph = dcc.Graph(id=‘paymentScatter’, style={‘height’: 300},
figure={‘data’: [
go.Scatter(
x=purchase_xy.index,
y=purchase_xy[‘orderCreatedOn’],
mode=‘lines+markers’,
name=‘All Product’,
)
],
‘layout’: go.Layout(title=’’, margin=dict(l=50, r=50, b=50, t=20))
}
)

return DateRangeDataOutput, RegistrationGraphOutput, PaymentGraphOutput