Existing Data is not showing

Joanna · January 22, 2022, 5:08am

Hi Teams,

The existing data of columns “severity” in the event action tab do not show in DataTable if I am setting the value of dropdown from another dataframe. But for the another tab called "closeout is able to show.

The existing data in dataframe cannot be showed:

The existing data in dataframe can be showed:

This is the code:

import dash
from dash import dash_table
from dash.dash_table.Format import Group
from dash import dcc
from dash import html
import plotly.express as px
import pandas as pd
from dash.dependencies import Input, Output


app = dash.Dash(__name__)

databasetemplate = "/mnt/hgfs/FSD_Drive/Database/" + "02. Database Template.xlsx"
event_detection = pd.read_excel(databasetemplate, sheet_name = 'event_detection')
event_action = pd.read_excel(databasetemplate, sheet_name = 'event_action')
execution_timeline = pd.read_excel(databasetemplate, sheet_name = 'execution_timeline')
severity = pd.read_excel(databasetemplate, sheet_name = 'severity')
status = pd.read_excel(databasetemplate, sheet_name = 'status')
cause = pd.read_excel(databasetemplate, sheet_name = 'failure_cause')
damage = pd.read_excel(databasetemplate, sheet_name = 'failure_mode')
action = pd.read_excel(databasetemplate, sheet_name ='Activity')
user = pd.read_excel(databasetemplate, sheet_name = 'user')
closeout = pd.read_excel(databasetemplate, sheet_name ='closeout')

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

tabs_styles = {'zIndex': 99, 'display': 'inlineBlock', 'height': '4vh', 'width': '12vw',
               'position': 'fixed', "background": "#323130", 'top': '12.5vh', 'left': '7.5vw',
               'border': 'grey', 'border-radius': '4px'}

tab_style = {
    "background": "#323130",
    'text-transform': 'uppercase',
    'color': 'white',
    'border': 'grey',
    'font-size': '11px',
    'font-weight': 600,
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}

tab_selected_style = {
    "background": "grey",
    'text-transform': 'uppercase',
    'color': 'white',
    'font-size': '11px',
    'font-weight': 600,
    'border': 'grey',
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}

event_detection_table = html.Div([
                html.H1(children ='Event Detection', 
                        style = { 'textAlign' : 'center','color' : colors['text']}
                        ),
                dash_table.DataTable(
                    id = 'event_detection_table',
                    data = event_detection.to_dict('records'),
                    columns = [
                        {'id':'event_id', 'name': 'event_id'},
                        {'id':'event_start_time', 'name': 'event_start_time'},
                        {'id':'event_end_time', 'name': 'event_end_time'},
                        {'id':'event_condition', 'name': 'event_condition'},
                        {'id':'tag_description', 'name': 'tag_description'},
                        {'id':'tag_code', 'name': 'tag_code'},
                        {'id':'tag_limit', 'name': 'tag_limit'},
                        {'id':'value_of_limit', 'name': 'value_of_limit'},
                        {'id':'threshold_value', 'name': 'threshold_value'},
                        {'id':'lacthed', 'name': 'latched'},
                        {'id': 'trigger_delay_sec', 'name': 'trigger_delay_sec'}
                    ],
                    editable =True,
                    filter_action = "native",
                    sort_action = "native",
                    sort_mode = "multi",
                ),
                html.Div(id='table-dropdown-1')
            ])

event_action_table = html.Div([
            html.H1(children ='Event Action', 
                    style = { 'textAlign' : 'center','color' : colors['text']}
                    ),
            dash_table.DataTable(
                id = 'event_action_table',
                data = event_action.to_dict('records'),
                columns = [
                    {'id':'event_id', 'name': 'Event ID'},
                    {'id':'CMMS_ref_no', 'name': 'CMMS Ref No.'},
                    {'id':'severity', 'name': 'Severity', 'presentation': 'dropdown'},
                    {'id':'status', 'name': 'Status'},
                    {'id':'owner', 'name': 'Owner'},
                    {'id': 'risk_ranking', 'name': 'Risk Ranking'}
                ],                
                editable =True,
                filter_action = "native",
                sort_action = "native",
                sort_mode = "multi",
                dropdown = {
                    'severity':  {
                        'options':[
                            {'label': i, 'value': i}
                            for i in severity['severity'].unique()
                        ]
                    }
                }
            ),
            html.Div(id='table-dropdown-2')
        ])

closeout_table = html.Div([
            html.H1(children ='Closeout', 
                    style = { 'textAlign' : 'center','color' : colors['text']}
                    ),
            dash_table.DataTable(
                id = 'closeout_table',
                data = closeout.to_dict('records'),
                columns = [
                    {'id':'event_id', 'name': 'Event ID'},
                    {'id':'cause', 'name': 'Cause', 'presentation':'dropdown'},
                    {'id':'damage', 'name': 'Damage', 'presentation':'dropdown'},
                    {'id':'action', 'name': 'Action', 'presentation':'dropdown'},
                    {'id': 'closeout_date', 'name': 'Closeout Date'}
                ],
                editable =True,
                filter_action = "native",
                sort_action = "native",
                sort_mode = "multi",
                dropdown = {
                    'cause': {
                        'options': [
                            {'label': i, 'value': i}
                            for i in cause["Failure_Cause"].unique()
                        ], 
                        'clearable': False
                    },
                    'damage': {
                        'options': [
                            {'label': i, 'value': i}
                            for i in damage["Failure_Mode"].unique()
                        ],
                        'clearable': False
                    },
                    'action': {
                        'options': [
                            {'label': i, 'value': i}
                            for i in action["Activity"].unique()
                         ],
                         'clearable': False
                    }
                } 
            ),
            html.Div(id='table-dropdown-3')
        ])

app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', children=[
        dcc.Tab(label='Event Detection', value='tab-1', style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Event Action', value='tab-2', style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Close Out', value='tab-3', style=tab_style, selected_style=tab_selected_style),
    ]),
    html.Div(id='tabs-example-content-1')
])

@app.callback(
    Output('tabs-example-content-1', 'children'),
    Input('tabs-example', 'value')
)

def render_content(tab):
    if tab == 'tab-1':
        return event_detection_table
    elif tab == 'tab-2':
        return event_action_table
    elif tab == 'tab-3':
        return closeout_table

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

Would like to seek help from you all.
Thank you.

Eduardo · January 22, 2022, 12:55pm

Hi @Joanna

Check if “all” the elements of the “Severity” colum in the “event_action” table are in the “severity” table.

It’s possible that one element of the “Severity” column is not an element of the option dropdown, in this case the entired colum will be showed empty.

Joanna · January 22, 2022, 2:21pm

Hi @Eduardo

Thanks for your guidance. It helps me a lot.

However, I have facing another problems is when I merged three dataframes (event_detection, event_action and closeut) and show it in one DataTable. Then, all the column with dropdowns do not show any list of choice with the code as below:

from turtle import left
import dash
from dash.dependencies import Input, Output, State
from dash import dcc
from dash import html
from dash import dash_table
import pandas as pd

databasetemplate = "/mnt/hgfs/FSD_Drive/Database/" + "02. Database Template.xlsx"

app = dash.Dash(__name__)

event_detection = pd.read_excel(databasetemplate, sheet_name = 'event_detection')
event_action = pd.read_excel(databasetemplate, sheet_name = 'event_action')
closeout = pd.read_excel(databasetemplate, sheet_name = 'closeout')
execution_timeline = pd.read_excel(databasetemplate, sheet_name = 'execution_timeline')
severity = pd.read_excel(databasetemplate, sheet_name = 'severity')
cause = pd.read_excel(databasetemplate, sheet_name = 'failure_cause')
damage = pd.read_excel(databasetemplate, sheet_name = 'failure_mode')
action = pd.read_excel(databasetemplate, sheet_name = 'Activity')
event_temp = pd.merge(event_detection, event_action, on = 'event_id')
event_management = pd.merge(event_temp, closeout, on = 'event_id')

app.layout = html.Div([
    dash_table.DataTable(
        id = 'event_management_table',
        data = event_management.to_dict('records'),
        columns = [
            {'id': 'event_id', 'name': 'event_id'},
            {'id': 'CMMS_ref_no', 'name': 'CMMS_ref_no'},
            {'id': 'event_start_time', 'name': 'event_start_time'},
            {'id': 'event_end_time', 'name': 'event_end_time'},
            {'id': 'event_condition', 'name': 'event_condition'},
            {'id': 'tag_description', 'name': 'tag_description'},
            {'id': 'tag_code', 'name': 'tag_code'},
            {'id': 'tag_limit', 'name': 'tag_limit'},
            {'id': 'value_of_limit', 'name': 'value_of_limit'},
            {'id': 'threshold_value', 'name': 'threshold_value'},
            {'id': 'latched', 'name': 'latched'},
            {'id': 'trigger_delay_limit', 'name': 'trigger_delay_sec'},
            {'id': 'severity', 'name': 'severity', 'presentation': 'dropdown'},
            {'id': 'status', 'name': 'status', 'presentation': 'dropdown'},
            {'id': 'owner', 'name': 'owner'},
            {'id': 'risk_ranking', 'name': 'risk_ranking'},
            {'id': 'cause', 'name': 'cause', 'presentation': 'dropdown'},
            {'id': 'damage', 'name': 'damage', 'presentation': 'dropdown'},
            {'id': 'action', 'name': 'action', 'presentation': 'dropdown'},
            {'id': 'closeout_date', 'name': 'closeout_date'}
        ],
        editable = True,
        dropdown = {
            'severity':{
                'options':[
                    {'label': i, 'value': i}
                    for i in event_management['severity'].unique()
                ]
            },
            'status':{
                'options':[
                    {'label': i, 'value': i}
                    for i in event_management['status'].unique()
                ]
            } ,
            'cause':{
                'options':[
                    {'label':i, 'value': i}
                    for i in event_management['cause'].unique()
                ]
            },
            'damage':{
                'options':[
                    {'label':i, 'value': i}
                    for i in event_management['damage'].unique()
                ]
            },
            'action':{
                'options':[
                    {'label':i, 'value': i}
                    for i in event_management['action'].unique()
                ]
            }                                     
        }        
    ),
    html.Div(id = 'table-dropdown-container')
])

if __name__ == '__main__':
    app.run_server(debug=True)
app.layout = html.Div([
    dash_table.DataTable(
        id = 'event_management_table',
        data = event_management.to_dict('records'),
        columns = [
            {'id': 'event_id', 'name': 'event_id'},
            {'id': 'CMMS_ref_no', 'name': 'CMMS_ref_no'},
            {'id': 'event_start_time', 'name': 'event_start_time'},
            {'id': 'event_end_time', 'name': 'event_end_time'},
            {'id': 'event_condition', 'name': 'event_condition'},
            {'id': 'tag_description', 'name': 'tag_description'},
            {'id': 'tag_code', 'name': 'tag_code'},
            {'id': 'tag_limit', 'name': 'tag_limit'},
            {'id': 'value_of_limit', 'name': 'value_of_limit'},
            {'id': 'threshold_value', 'name': 'threshold_value'},
            {'id': 'latched', 'name': 'latched'},
            {'id': 'trigger_delay_limit', 'name': 'trigger_delay_sec'},
            {'id': 'severity', 'name': 'severity', 'presentation': 'dropdown'},
            {'id': 'status', 'name': 'status', 'presentation': 'dropdown'},
            {'id': 'owner', 'name': 'owner'},
            {'id': 'risk_ranking', 'name': 'risk_ranking'},
            {'id': 'cause', 'name': 'cause', 'presentation': 'dropdown'},
            {'id': 'damage', 'name': 'damage', 'presentation': 'dropdown'},
            {'id': 'action', 'name': 'action', 'presentation': 'dropdown'},
            {'id': 'closeout_date', 'name': 'closeout_date'}
        ],
        editable = True,
        dropdown = {
            'severity':{
                'options':[
                    {'label': i, 'value': i}
                    for i in event_management['severity'].unique()
                ]
            },
            'status':{
                'options':[
                    {'label': i, 'value': i}
                    for i in event_management['status'].unique()
                ]
            } ,
            'cause':{
                'options':[
                    {'label':i, 'value': i}
                    for i in event_management['cause'].unique()
                ]
            },
            'damage':{
                'options':[
                    {'label':i, 'value': i}
                    for i in event_management['damage'].unique()
                ]
            },
            'action':{
                'options':[
                    {'label':i, 'value': i}
                    for i in event_management['action'].unique()
                ]
            }                                     
        }        
    ),
    html.Div(id = 'table-dropdown-container')
])

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

There has list of choice after I clicked the dropdown in the screenshot below:

Eduardo · January 22, 2022, 2:43pm

Hey @Joanna

One tip to show and share code in the Forum, use the </> symbol in the message menu to add code:

Related to your last queston, if you merged some DataFrame and use the info from the merged DataFrame to build the Dash Table there are no reason to not working porperly, try doing it with more simple DataFrames (less number of columns) to find where the problem arise.

Also its recomended to add a new different thread when the current is “Solved”, it has more possibilities that other users enter to help.

Joanna · January 22, 2022, 4:20pm

Hello @Eduardo ,

Thanks for your guidance.
I will take note on it.

Topic		Replies	Views
Dash DataTable not showing the data Dash Python	2	2311	May 28, 2021
Updating data table from dropdown component and callbacks Dash Python question	5	32	October 29, 2024
Dash DataTable not showing data Dash Python	2	3748	July 19, 2020
Columns.on_change doesn't seem to be working Dash Python	0	273	October 22, 2021
Data from the database not showing in the DashTable Dash Python	0	353	April 11, 2022

Existing Data is not showing

Related topics