html.Div id conflict? what error this?

Dash Python
1

FIrst I receive many url sametime
like this

<iframe src="https://plotly-dash-thqwfj7gra-uc.a.run.app/?authKey=2f313b37d87a705a4155290ee8261a56ae653f1dc138264aa2a8daae393b5b34&projectKey=U9sD0DItDJ0479kiFPG8&datetime=2023-01-13,2023-01-13&fieldId=_6468463&fieldType=LONG_ANSWER" width="400px" height="400px"> </iframe>
<iframe src="https://plotly-dash-thqwfj7gra-uc.a.run.app/?authKey=2f313b37d87a705a4155290ee8261a56ae653f1dc138264aa2a8daae393b5b34&projectKey=U9sD0DItDJ0479kiFPG8&datetime=2023-01-13,2023-01-13&fieldId=_26592160&fieldType=CHECKBOX" width="400px" height="400px"> </iframe>

This is my code

import re
import dash
import uuid
import flask
import hashlib
import pandas as pd
from dash import dcc
from dash import html
from dash import Dash
from flask import request, current_app
import plotly.express as px
from google.cloud import bigquery
from google.oauth2 import service_account
from dash.dependencies import Input, Output

server = flask.Flask(__name__)
app = dash.Dash(__name__, suppress_callback_exceptions=True, server=server)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page_content'),
    html.Div(id='page_graph')
])

@app.callback(
    Output('page_content', 'children'),
    Input('url', 'search'),
)

def search_url(key):
    global Key
    global project
    global dataset_id
    global b_client
    global project_key
    global fieldId
    global date
    global query
    global df_result

    current_app.page_content = 'pc'+uuid.uuid4().hex

    KEY = {}
    project = 'paprika-cada'
    dataset_id = 'tutorial'
    credentials = service_account.Credentials.from_service_account_info(KEY)
    b_client = bigquery.Client(credentials= credentials, project=credentials.project_id)

    my_key = 'asdfsdfsdfs12354654654'
    auth_key = re.search('authKey=(\w+)', key).group(1)
    project_key = re.search('projectKey=(\w+)', key).group(1)
    date = re.search('datetime=([\w+-w+]*)', key).group(1).split(',')
    fieldId = re.search('fieldId=(\w+)', key).group(1)
    fieldType = re.search('fieldType=(\w+)', key).group(1)

    if date[0] == date[1]:
        query = f"""
        SELECT {fieldId} FROM `{project}.{dataset_id}.{project_key}` WHERE timestamp BETWEEN '{date[0]} 00:00:00' AND '{date[1]} 23:59:59'
        """
    elif date[0] != date[1]:
        query = f"""
        SELECT {fieldId} FROM `{project}.{dataset_id}.{project_key}` WHERE timestamp BETWEEN '{date[0]}' AND '{date[1]}'
        """
    else:
        pass
    df_result = b_client.query(query).to_dataframe()

    sentence_col = ['SHORT_ANSWER', 'LONG_ANSWER', 'NUMBER', 'DATE', 'TIME', 'SECTION', 'DESCRIPTION', 'GEOLOCATION', 'EMAIL', 'PHONE',
                 'WEBSITE_LINK', 'IMAGE_UPLOAD', 'VIDEO_UPLOAD', 'FILE_UPLOAD', 'DESCRIPTION_IMAGE', 'IMAGE', 'UNKNOWN', 'SUBMIT']
    chart_col = ['CHECKBOX', 'RADIO', 'DROPDOWN', 'LINEAR', 'CHECKBOX_GRID', 'RADIO_GRID','PRIVACY_POLICY_LOCATION', 'PRIVACY_POLICY_INFORMATION']

    # if fieldType in sentence_col:
    if auth_key == hashlib.sha256((my_key+project_key).encode()).hexdigest():
        if fieldType in sentence_col:
            output = []
            for i in range(len(df_result)):
                output.append(html.Div(df_result[fieldId][i], style={'marginBottom': '10px', 'marginTop': '10px', 'border': '1px solid #d6d6d6', 'padding': '10px', 'borderRadius': '5px'}))
            return html.Div(id=current_app.page_content, children=output)

        elif fieldType in chart_col:
            return html.Div(id = current_app.page_content, children = [
                dcc.Dropdown(options=['bar', 'pie'], id='dropdown', multi=False, value='bar',
                             placeholder='Select graph type' )
            ])
        else:
            pass

    else:
        return html.Div([
            html.Img(src=app.get_asset_url('404.png'), style={'width': '100%', 'height': '100%'})
        ])

#
@app.callback(
    Output('page_graph', 'children'),
    Input('dropdown', 'value')
)

def graph(graph_type):
    current_app.page_graph = 'pg' + uuid.uuid4().hex
    if graph_type =='bar':
        fig = px.bar(df_result[fieldId].value_counts(), color=df_result[fieldId].value_counts().index)
        fig.update_xaxes(title='응답')
        fig.update_yaxes(title='갯수')

        return_div = html.Div(id = current_app.page_graph, children=[
            dcc.Graph(
                id = 'example_graph',
                figure=fig)
        ])
        return return_div

    elif graph_type=='pie':
        fig = px.pie(df_result[fieldId], values= df_result[fieldId].value_counts(), labels= df_result[fieldId].value_counts().index, names = df_result[fieldId].value_counts().index)
        return_div = html.Div(id = current_app.page_graph, children=[
            dcc.Graph(
                id='example_graph',
                figure=fig)
        ])
        return return_div
    else:
        pass



if __name__ == '__main__':
	app.run_server(debug=True, host='0.0.0.0', port=8080)

When i test only one url then its ok

But when i try multiple url then have many error
same html.Div id
And nothing to show graph

image
image1215×628 7.48 KB

or just show one url result

image
image1213×615 15.1 KB

2

You have a bunch of global variables in your callback. As called out in the Dash docs (see the section Why Global Variables Will Break Your App), you definitely don’t want to do this.

I would start by removing all your global statements from the callback. It’s possible that your bug is related to some global state being persisted from the first callback call, so maybe this will fix it. If not, you’re app will then at least be in an easier state to debug.

If you keep getting errors after doing this, please post the error messages you get to make it easier for people to help :slight_smile: