I need help with understanding why my screen won't get cleared before displaying new output

[abhimohan]

Hi, I am having a BIG frustration with my code right now…

First I will explain what the code does - This code is a template for a dashboard I am working on. It has a fixed sidepanel and supposed to display different contents when you interact with it in different ways. When you click “Awooga” on the side, you will see that a dropdown pops up on the main content screen, with “None” (display nothing) as the preset option. If you choose “Option 1”, you see that ONLY “pie3” shows up as text on the content screen. When you select “Option 2”, you see that ONLY “pie45” shows up on content screen. When you select “Option 3”, you see that ONLY “pie67” shows up on the content screen. Now when you click the first blue button, you see that “pie67” AND “pie89” with its corresponding dropdown show up on screen. HOWEVER, I want ONLY “pie89” and its corresponding “option 4” to show up on screen. I do NOT want to see “Option 3” and “pie67” still on screen. How do I resolve this issue?

Thank you for your help in advance!

import ipywidgets as widgets
import plotly.express as px
import plotly.graph_objects as go
import dash
from dash import dcc, html, dash_table
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import base64

# Sample dataframes, replace these with your actual data
app = dash.Dash(__name__, suppress_callback_exceptions=True)  # Set suppress_callback_exceptions=True

# Define custom CSS styles
styles = {
    'fontFamily': 'Calibri Light',
    'color': 'black'  # Optional: Set font color to black for better visibility
}

#======================================================================================== SIDE PANEL =========================================================================

app.layout = html.Div([
    # Sidebar with styled buttons
    html.Div([
       html.Button('Awooga', id='nce-nonnce-button', n_clicks=0, style={
            **styles,
            'display': 'block',
            'margin': '1em',
            'padding': '1em',
            'background-color': '#FFFFFF',
            'color': 'black',
            'border': 'none',
            'border-bottom': '1px solid black',
            'border-radius': '0px',
            'font-size': '14px',
            'text-align': 'center',
            'cursor': 'pointer',
            'text-decoration': 'none',
            'width': '100%',
            'height': '80px'
        }),
    ], style={
        **styles,
        'position': 'fixed',
        'top': 0,
        'left': 0,
        'bottom': 0,
        'width': '10%',
        'background-color': '#FFFFFF',
        'padding': '2em',
        'border-right': '1px solid black'
    }),

    # Content
    html.Div(id='page-content', style={'margin-left': '15%', 'margin-right': '5%'})  # Adjust margin-left to allow space
])

# ============================================================================================= SIDE PANEL TRIGGERS =========================================================

@app.callback(
    Output('page-content', 'children'),
     [Input('nce-nonnce-button', 'n_clicks')]
)

def update_output(nce_nonnce_clicks):
    ctx = dash.callback_context
    if not ctx.triggered:
        raise dash.exceptions.PreventUpdate

    trigger_id = ctx.triggered[0]['prop_id'].split('.')[0]

   
    if trigger_id == 'nce-nonnce-button' and nce_nonnce_clicks is not None and nce_nonnce_clicks > 0:
        return [
            dcc.Dropdown(
                id='graph-dropdown2',
                options=[
                    {'label': 'None', 'value': 'none'},
                    {'label': 'Option1', 'value': 'pie3'},
                    {'label': 'Option2', 'value': 'pie45'},
                    {'label': 'Option3', 'value': 'pie67'}
                ],
                value='none',
                style=styles
            ),
            html.Div(id='nce-nonnce-container'),
        ]

# ============================================================================ NCE-NONNCE =============================================================================

@app.callback(
    Output('nce-nonnce-container', 'children'),
    [Input('graph-dropdown2', 'value')]
)

def nce_nonnce_chart(value):
    if value == 'pie3':
        return html.Div([
            html.Div(),  # Clear the container
            html.H1('pie3', style={
                     **styles,
                     'textAlign': 'center',
                     'fontSize': '18px'  # You can add more styling properties here
            }),
        ])
    elif value == 'pie45':
         return html.Div([
            html.Div(),  # Clear the container
            html.H1('pie45', style={
                     **styles,
                     'textAlign': 'center',
                     'fontSize': '18px'  # You can add more styling properties here
            }),
        ])
    
    elif value == 'pie67':
        return html.Div([
            html.Div(),  # Clear the container
            html.H1('pie67', style={
                     **styles,
                     'textAlign': 'center',
                     'fontSize': '18px'  # You can add more styling properties here
            }),
            html.Div([
                html.Button('', id='button6', n_clicks=0, style={
                    'position': 'absolute',
                    'top': '250px',  # Adjust vertical position
                    'left': '450px',   # Center horizontally
                    'background-color': '#98E9FF',
                    'padding': '10px',
                    'border': '2px solid #F6F6F6',
                    'color': 'black',
                    'cursor': 'pointer'
                }),
                html.Div(id='button6-container'),
                html.Button('', id='button7', n_clicks=0, style={
                    'position': 'absolute',
                    'top': '265px',  # Adjust vertical position
                    'left': '1195px',   # Center horizontally
                    'background-color': '#98E9FF',
                    'padding': '10px',
                    'border': '2px solid #F6F6F6',
                    'color': 'black',
                    'cursor': 'pointer'
                }),
            ])
        ]),
    else:
        return ''  # Clear the container if value is not 'pie3' or 'pie45'

# ============================================================================ NCE-PIECHARTS =============================================================================

@app.callback(
    Output('button6-container', 'children'),
    [Input('button6', 'n_clicks')]
)

def update_output(nce1_clicks):
    ctx = dash.callback_context
    if not ctx.triggered:
        raise dash.exceptions.PreventUpdate

    trigger_id = ctx.triggered[0]['prop_id'].split('.')[0]

    if trigger_id == 'button6' and nce1_clicks is not None and nce1_clicks > 0:
        return [
            html.Div(),
            dcc.Dropdown(
                id='graph-dropdown89',
                options=[
                    {'label': 'Option4', 'value': 'pie89'},
                ],
                value='pie89',
                style=styles
            ),
            html.Div(id='nce-container1', style=styles),
        ]

@app.callback(
    Output('nce-container1', 'children'),
    [Input('graph-dropdown89', 'value')]
)     

def nce_chart1(value):
    if value == 'pie89':
        return html.Div([
            html.Div(),  # Clear the container
            html.H1('pie89', style={
                     **styles,
                     'textAlign': 'center',
                     'fontSize': '18px'  # You can add more styling properties here
            }),
        ])
    else:
        return ''

# ======================================================================= MAIN ========================================================================================

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

[AIMPED]

@abhimohan

Output('nce-nonnce-container', 'children'),

Just add this output to the your last callback and return an empty list. You could also use style instead of children and alter the visibility.

[abhimohan]

Hi AIMPED, thank you so much for the quick reply. I am not sure where I would return the empty list. Also I tried style, but it was throwing me a lot of exception error, so I am not sure how to properly alter the visiblity if I wanted to go that route. I really appreciate your help, if you would be able to provide a solution to what you described, that would help me learn this concept better. Thank you so much!

[AIMPED]

Here an example on how to hide components.

How to remove initial blank chart when loading

If you don’t want the graph to take space in your layout, you can change from hidden to none See also: In Dash you will have to change to: dcc.Graph(id='graph', style={'display': 'none'}). Full example: import dash from dash import html, dcc, Input, Output import plotly.express as px import time app = dash.Dash(__name__, update_title=None) app.layout = html.Div([ dcc.Graph(id='graph', style={'display': 'none'}), html.Div(id='dummy') ]) @app.callback( Output('graph', 'f…

Another example:

A nonexistent object was used in an `State` of

hey @MrEngineer. If you tag me using @AIMPED I’ll see your posts earlier. Concerning the choices, are you referring to my example? Here an extended example: import dash from dash import dcc, html, Input, Output import numpy as np import plotly.graph_objects as go def create_figure(): return go.Figure( go.Scatter( x=np.arange(10), y=np.random.randint(1, 10, size=10), mode='markers+lines' ) ) app = dash.Dash( __name__, ex…

[abhimohan]

Hi AIMPED, thank you so much for your help. I guess my noviceness to this is also playing a role as to why I am still unable to figure this out. I played around with the different solutions you suggested, at times I got "Nonexistent’ object error, or that I tried to give an object as input { object } where it should not be given, and with children = ‘dummy’, but in a twist of irony, I kept printing ‘dummy’ on screen instead I guess I need to study these more, but I am sincerely grateful to you.

[jackphillips825]

To fix this, you should clear the screen of “Option 3” and “pie67” when the button is clicked. Try updating your update_output function to clear the screen before displaying the desired content. Hope this helps!

[abhimohan]

Hi Jack, thank you so much; I tried looking for a general clear screen method but couldn’t find one. I managed to find a work around where it goes back to my main page and autonavigates back to the location I want. The time lag is slightly there, but it works for now.