'Plotly-dash (python): plotly-express timeline shows what I want until I embed it in my dashboard

I created an image, using plotly.express. This is the code:

 fig = px.timeline(
        bounds,
        x_start='start_time',
        x_end='end_time',
        color='trial_id',
        y='label',
        hover_name='trial_id',
        hover_data={
            'trial_id': False,
        },
        labels={'label': ''},
        color_discrete_map=color_mapper,
        height=150,
        width=1200,
    )
    fig.update_layout(
        showlegend=False,
        plot_bgcolor='white',
    )
    fig.update_xaxes(
        tickformat='%H:%M:%S'
    )

This is what it shows:

enter image description here

I now want to add this as a component to my dash dashboard. As I understood, I could just add this to the layout as a dcc.Graph object. In my complete structure, it's in here (first Graph, trial_fig).

# Right column
html.Div(
            id='right-column',
            className='nine columns',
            children=[
                dcc.Graph(id='trial_fig', figure={}, style={'height': 200}),
                dcc.Graph(id='time_fig', figure={}),
            ],
        ),

The code I use to generate and return the figures is this (fig_time and info are declared somewhere higher in the code, they work):

    colors = ['#F7A622', '#21A5DF']
    q, r = divmod(len(bounds), len(colors))
    color_mapper = dict(zip(bounds.trial_id, q * colors + colors[:r]))
    fig_trials = px.timeline(
        bounds,
        x_start='start_time',
        x_end='end_time',
        color='trial_id',
        y='label',
        hover_name='trial_id',
        hover_data={
            'trial_id': False,
        },
        labels={
            'label': ''},
        color_discrete_map=color_mapper,
    )
    fig_trials.update_layout(
        showlegend=False,
        plot_bgcolor='white',
    )
    fig_trials.update_xaxes(
        tickformat='%H:%M:%S'
    )

    return info, fig_trials, fig_time

This shows up like this:

enter image description here

And after double clicking the upper figure, I can see the contents:

enter image description here

Two questions:

  1. Why do I have to double click to see the timeline? It shows up just fine when I use plotly, and the container seems large enough. It can definitely fit after double clicking.

  2. Why is my color mapping suddenly not working, if the code is exactly the same?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source