Black Lives Matter. Please consider donating to Black Girls Code today.

A callback is getting ignored multi page application

Hi,
i am trying to call multiple layouts(report1, report1, dashboard) from one single file(index) using different pathnames. while trying to call dashboard file some callbacks are getting ignored and am unable to update screen.
Index.py

import sys
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_renderer
import logging
from logging.handlers import RotatingFileHandler
from application import app
from reports import inwardReport, outwardReport, safaiiSathiReport, recyclersReport
import dashBoard

sys.path.append('/home/ec2-user/projects/dashboard/')
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])


@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/reports/inwardReport':
        print("given path: " + pathname)
        return inwardReport.layout
    elif pathname == '/reports/outwardReport':
        print("given path: " + pathname)
        return outwardReport.layout
    elif pathname == '/reports/safaiiSathiReport':
        print("given path: " + pathname)
        return safaiiSathiReport.layout
    elif pathname == '/reports/recyclersReport':
        print("given path: " + pathname)
        return recyclersReport.layout
    elif pathname == '/charts/userDashboard':
        print("given path " + pathname)
        return dashBoard.layout
    else:
        return 'please give valid pathname'


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

dashboard.py

from datetime import timedelta as td, date
import dash
from urllib.parse import parse_qs
import plotly.graph_objs as go
import dash_core_components as dcc
import dash_html_components as html
import sys
import logging
from logging.handlers import RotatingFileHandler
# importing other files
import sqlQuries
from application import app
import validateUser

sys.path.append('/home/ec2-user/projects/dashboard/')

layout = html.Div([
    dcc.Location(id='urlPie', refresh=False),
    html.Div(id='user', style={'display': 'none'}),
    html.Div([
        dcc.Dropdown(id='userLocations', style={'height': '10%'}, placeholder='All centers')
    ], className='weekly-schedule col-sm-4'),
    html.Nav([
        html.Div([
            dcc.Tabs([
                dcc.Tab(label='Today', value='today', className='custom-tab',
                        selected_className='custom-tab--selected'),
                dcc.Tab(label='Yesterday', value='yesterday', className='custom-tab',
                        selected_className='custom-tab--selected'),
                dcc.Tab(label='This Week', value='week', className='custom-tab',
                        selected_className='custom-tab--selected')
            ], id='tabs', colors={'background': 'transparent'}, value='today'),
        ], className=' col-lg-6', id='tabHolder', n_clicks_timestamp=0),
        html.Div([
            dcc.DatePickerRange(
                id='calenderSelect',
                start_date_placeholder_text="From Date",
                end_date_placeholder_text="To Date",
                calendar_orientation='horizontal',
            ),
        ], className="col-12 col-lg-4 ", id='dateHolder', n_clicks_timestamp=0)
    ], className='nav nav-pills mb-3 pt-4'),
    html.Div([
        html.Div([
            # inward and outward cards
            html.Div([
                html.Div([
                    html.Div([
                        html.H5("Inward Value", className='value-hd-text'),
                        html.Div([
                            html.Div([
                                html.Div([
                                    html.Div([
                                        html.H5("Total Inward Value", className='mb-0'),
                                        html.P([
                                            html.Span(id='inwardValue'),
                                            html.Span(className='triangle-up align-self-center ml-2')
                                        ], className='d-flex', )
                                    ], className='content-txt text-white')
                                ], className='card-text-content blue-bg')
                            ], className='col-md-6 col-sm-6 mb-4'),
                            html.Div([
                                html.Div([
                                    html.Div([
                                        html.H5("Total Inward Volume", className='mb-0'),
                                        html.P([
                                            html.Span(id='inwardVolume'),
                                            html.Span(className='triangle-up align-self-center ml-2')
                                        ], className='d-flex', )
                                    ], className='content-txt text-white')
                                ], className='card-text-content violet-bg')
                            ], className='col-md-6 col-sm-6 mb-4')
                        ], className='row')
                    ], className='col-md-6'),
                    html.Div([
                        html.H5("Outward Value", className='value-hd-text'),
                        html.Div([
                            html.Div([
                                html.Div([
                                    html.Div([
                                        html.H5("Total Outward Value", className='mb-0'),
                                        html.P([
                                            html.Span(id='outwardValue'),
                                            html.Span(className='triangle-up triangle-down align-self-center ml-2')
                                        ], className='d-flex', )
                                    ], className='content-txt text-white')
                                ], className='card-text-content lite-blue-bg')
                            ], className='col-md-6 col-sm-6 mb-4'),
                            html.Div([
                                html.Div([
                                    html.Div([
                                        html.H5("Total Outward Volume", className='mb-0'),
                                        html.P([
                                            html.Span(id='outwardVolume'),
                                            html.Span(className='triangle-up triangle-down align-self-center ml-2')
                                        ], className='d-flex', )
                                    ], className='content-txt text-white')
                                ], className='card-text-content dark-blue-bg')
                            ], className='col-md-6 col-sm-6 mb-4')
                        ], className='row')
                    ], className='col-md-6'),
                ], className='row')
            ], className='py-5'),
            # Graphs
            html.Div([
                html.Div([
                    html.Div([
                        html.Div([
                            dcc.Graph(id='itemPieChartInward')
                        ], className='big-white-cards bg-white shadow-sm p-4')
                    ], className='col-md-6 mb-4'),
                    html.Div([
                        html.Div([
                            dcc.Graph(id='itemPieChartOutward')
                        ], className='big-white-cards bg-white shadow-sm p-4')
                    ], className='col-md-6 mb-4')
                ], className='row')
            ], className='graph-cards')
        ], className='tab-pane fade show active', role='tabpanel')
    ], className='tab-content'),
    dcc.Interval(id='interval1', interval=1000, n_intervals=1)
], className='container py-3')


# global methods
def getItemPieChart(dataFrame):
    pieChartLayout = dict(
        autosize=True,
        # automargin=True,
        margin=dict(
            l=10,
            r=10,
            b=0,
            t=40
        ),
        hovermode="closest",
        plot_bgcolor="#F9F9F9",
        paper_bgcolor="#F9F9F9",
        legend=dict(font=dict(color='black', size=10),
                    orientation='h',
                    bgcolor='rgba(0,0,0,0)'),
        title='Top 5 Items',
    )
    fig = go.Figure({
        "data": [go.Pie(labels=dataFrame["ItemName"].tolist(), values=dataFrame["Amount"].tolist(), hole=.60)],
        "layout": go.Layout(pieChartLayout)
    })
    return fig


def convertVolume(totalVolume):
    stringVolume = ""
    if totalVolume >= 1000:
        stringVolume = str(totalVolume / 1000) + " Tonnes"
    else:
        stringVolume = str(totalVolume) + " Kgs"
    return stringVolume


# loading locations of the user
#this callback is not initiating
@app.callback(
    dash.dependencies.Output('user', 'children'),
    [dash.dependencies.Input('urlPie', 'pathname')])
def getuserId(value):
    if value is None:
        raise dash.exceptions.PreventUpdate("given a valid userId as parameter")
    userToken = parse_qs(value).get('?token')[0]
    user = validateUser.getUserIdFromToken(userToken)

    return user


@app.callback(dash.dependencies.Output('userLocation', 'options'),
              [
                  dash.dependencies.Input('user', 'children')
              ])
def loadUserLocations(user):
    cities = sqlQuries.getCities(userId=str(user))
    listCity = [{'label': city, 'value': city} for city in cities]
    return listCity


# parsing data into html
@app.callback(
    [
        dash.dependencies.Output('inwardValue', 'children'),
        dash.dependencies.Output('inwardVolume', 'children'),
        dash.dependencies.Output('itemPieChartInward', 'figure'),
        dash.dependencies.Output('outwardValue', 'children'),
        dash.dependencies.Output('outwardVolume', 'children'),
        dash.dependencies.Output('itemPieChartOutward', 'figure')
    ],
    [
        dash.dependencies.Input('tabs', 'value'),
        dash.dependencies.Input('calenderSelect', 'start_date'),
        dash.dependencies.Input('calenderSelect', 'end_date'),
        dash.dependencies.Input('tabHolder', 'n_clicks_timestamp'),
        dash.dependencies.Input('dateHolder', 'n_clicks_timestamp')
    ],
    [
        dash.dependencies.State('userLocations', 'value'),
    ]
)
def parseInwardDataFromDatabase(tab, start, end, tabTimestamp, dateTimestamp, location):
    if location is None:
        raise dash.exceptions.PreventUpdate

    startDate = ''
    endDate = ''
    print(str(tabTimestamp) + " , " + str(dateTimestamp))
    if tabTimestamp > dateTimestamp:
        if tab == 'today':
            print("today")
            startDate = str(date.today())
            endDate = str(date.today())
        elif tab == 'yesterday':
            print("yesterday")
            startDate = str(date.today() - td(1))
            endDate = str(date.today() - td(1))
        elif tab == 'week':
            print("week")
            endDate = str(date.today())
            startDate = str(date.today() - td(6))
    elif dateTimestamp > tabTimestamp:
        if start is None or end is None:
            raise dash.exceptions.PreventUpdate
        startDate = start
        endDate = end
    print(startDate)
    print(endDate)
    inwardValue, inwardVolume, inwardItems = sqlQuries.getInwardValue(user, location, startDate, endDate)
    outwardValue, outwardVolume, outwardItems = sqlQuries.getOutwardValue(user, location, startDate, endDate)

    if outwardValue == 0 and outwardVolume == 0 and inwardValue != 0 and inwardVolume != 0:
        inwardVolume = convertVolume(inwardVolume)
        pieChartInward = getItemPieChart(inwardItems)
        return inwardValue, inwardVolume, pieChartInward, 0, 0, {'data': []}
    elif inwardValue == 0 and inwardVolume == 0 and outwardValue != 0 and outwardVolume != 0:
        outwardVolume = convertVolume(outwardVolume)
        pieChartOutward = getItemPieChart(outwardItems)
        return 0, 0, {'data': []}, outwardValue, outwardVolume, pieChartOutward
    elif inwardValue != 0 and inwardVolume != 0 and outwardValue != 0 and outwardVolume != 0:
        inwardVolume = convertVolume(inwardVolume)
        pieChartInward = getItemPieChart(inwardItems)
        outwardVolume = convertVolume(outwardVolume)
        pieChartOutward = getItemPieChart(outwardItems)
        return inwardValue, inwardVolume, pieChartInward, outwardValue, outwardVolume, pieChartOutward
    else:
        return 0, 0, {'data': []}, 0, 0, {'data': []}

this is happening only when i try to call dashboard file from index file. when i run dashboard file separately it is working fine. please review the codes and tell me if there are any mistakes

Do you see that callback appearing in the callback graph i the debugging tools?

(click on the button in the bottom right corner of your app when run in debug mode)

Hi @nedned I have a similar issue, in my callback graph, there are 3 values as Inputs affecting 1 dcc Graph. Everything’s working as expected, except the y_title of the graph is not being updated, even though it’s coded as such in the graphs layout.

For example, at the very beginning, changing the 3rd dropdown to some other value, the graph correctly updates, but the y axis title is not changed, even though I coded the layout to also receive this Input.

Could you please take a small look please?

https://crc-covid19.herokuapp.com/