Incorrect height of coloured px.timeline bars

[dsm054]

In 4.9.0, the following code:

df = pd.DataFrame([{'row': 'A',
  'start_time': '2020-08-04 06:00:01',
  'end_time': '2020-08-04 06:06:01',
  'status': 'succeeded'},
 {'row': 'A',
  'start_time': '2020-08-04 07:00:01',
  'end_time': '2020-08-04 07:05:01',
  'status': 'failed'},
 {'row': 'A',
  'start_time': '2020-08-04 08:00:01',
  'end_time': '2020-08-04 08:06:01',
  'status': 'succeeded'},
 {'row': 'B',
  'start_time': '2020-08-04 06:44:11',
  'end_time': '2020-08-04 06:53:22',
  'status': 'succeeded'},
 {'row': 'B',
  'start_time': '2020-08-04 07:01:58',
  'end_time': '2020-08-04 07:07:48',
  'status': 'succeeded'},
 {'row': 'C',
  'start_time': '2020-08-04 06:38:56',
  'end_time': '2020-08-04 06:44:59',
  'status': 'succeeded'},
 {'row': 'C',
  'start_time': '2020-08-04 06:59:00',
  'end_time': '2020-08-04 07:05:00',
  'status': 'failed'}])

fig = px.timeline(df, x_start="start_time", x_end="end_time", y="row", color="status")
fig.show()

is giving me

where the rows coloured red have the wrong height. Perturbing the order seems to help things, in particular sorting by status.

Looking at the sizes of the bars and the underlying json makes me wonder if when it's overlaying the two, it's scaling everything independently, and forgetting that B is even there:

  {'alignmentgroup': 'True',
   'base': ['2020-08-04 07:00:01', '2020-08-04 06:59:00'],
   'hovertemplate': 'status=failed<br>start_time=%{base}<br>end_time=%{x}<br>row=%{y}<extra></extra>',
   'legendgroup': 'failed',
   'marker': {'color': '#EF553B'},
   'name': 'failed',
   'offsetgroup': 'failed',
   'orientation': 'h',
   'showlegend': True,
   'textposition': 'auto',
   'type': 'bar',
   'x': [300000.0, 360000.0],
   'xaxis': 'x',
   'y': ['A', 'C'],
   'yaxis': 'y'}],

If so, faking nondisplayable rows should help, and it seems to:

fake = pd.DataFrame.from_records([{"row": row, "status": status, "start_time": np.nan, "end_time": np.nan} for row in df.row.unique() for status in df.status.unique()])
fig = px.timeline(df.append(fake), x_start="start_time", x_end="end_time", y="row", color="status")
fig.show()

which also seems to fix my production case, but preferably would be handled on the plotly side. :-)

[nicolaskruchten]

Thanks for reporting this, it is indeed a case which should be handled internally!

[nicolaskruchten]

We have a fix for this and it'll hopefully be released this week!

[nicolaskruchten]

Resolved in 4.10 https://community.plotly.com/t/announcing-plotly-py-4-10-date-axis-improvements-a-faster-px-imshow-and-full-figures-for-development/44685

[AWhetter]

I'm still seeing this issue in 4.10. To clarify, I'm not seeing it with the data set in the original issue but I do see it with my own data set, which I cannot share.

[nicolaskruchten]

OK, thanks for letting us know. If you're able to share a minimum reproducible example I'd be happy to follow up but as far as I can tell this issue should be resolved.

Just to confirm: if you're seeing this in JupyterLab, can you confirm you've upgraded the jupyterlab-plotly extension to 4.10.0 as well? If not, you'll be using the older version of the rendering engine which still suffers from this bug.

[AWhetter]

I'm running in a jupyter notebook so I believe that extension doesn't apply.
I'll see if I can obfuscate the data I have and still reproduce. Thanks for the help so far.

[nicolaskruchten]

Ok, thanks for confirming; and indeed you're right in classic notebook no extension is needed.

Any way for me to reproduce this would help :) does it always happen? To any random subset of the data? Any pattern to when it does/doesn't occur? Etc

[AWhetter]

It does always happen. I can reproduce it consistently and between Python 3.7 and 3.8. I can't figure out a good subset of the data that it happens on, nor a pattern of when it does or does not occur.

I've attached my data (complete_data.csv.txt). Here's the code I'm running in jupyter:

import pandas as pd
import plotly.express as px

df = pd.read_csv("~/Downloads/complete_data.csv.txt")
px.timeline(df, x_start="Start", x_end="End", y="Person", hover_name="Task", color="Team")

Here's an image of what I see:

This is in a clean virtualenv, so I'm using the latest version of everything, so plotly 4.10.0 at the time of writing.

[nicolaskruchten]

Ah, awesome, thanks so much for boiling this down for us!

What's happening here is that your Y axis here is being interpreted as a linear axis rather than a categorical one (per the recently-documented auto-detection behaviour). You can override this by calling .update_yaxes(type="category") on the figure.

Changing this auto-detection for stringified numbers is something I'm considering changing in a 5.0 release of Plotly.py :)