[BUG] Lines become broken when zoomed in

[BearLemma]

Describe the bug :crayon: When I use plotly_resampler in dash, my lines become broken (interrupted) after a few zoom-ins.

Reproducing the bug :mag: The mids file is attached (compressed form) mids.zip

import plotly.graph_objects as go
from plotly.subplots import make_subplots
from plotly_resampler import FigureResampler, MinMaxLTTB

csv_file_path = '/tmp/mids.csv'
mid = pd.read_csv(csv_file_path, index_col='local_time', parse_dates=True).squeeze()

fig = make_subplots(rows=3, cols=1, shared_xaxes=True, vertical_spacing=0.02,
                    row_heights=[0.7, 0.2, 0.1])

fr_fig = FigureResampler(go.FigureWidget(fig), default_downsampler=MinMaxLTTB(), default_n_shown_samples=2000)
fr_fig.add_trace(go.Scatter(x=mid.index, y=mid.values, name='mid', line=dict(color='grey')), row=1, col=1)

fr_fig.update_layout(height=1500, width=2000, title_text="My graph")
fr_fig.show_dash(
    mode='inline',
    graph_properties={'style': {'width': '100%', 'height': '1500px'}} 
)

Sample print of the data:

local_time
2024-04-17 05:50:00.041930861    0.008692
2024-04-17 05:50:00.044144654    0.008692
2024-04-17 05:50:00.047335072    0.008692
2024-04-17 05:50:00.047342921    0.008692
2024-04-17 05:50:00.049577909    0.008692
                                   ...   
2024-04-17 05:56:59.976522516    0.008755
2024-04-17 05:56:59.978132140    0.008755
2024-04-17 05:56:59.980807746    0.008755
2024-04-17 05:56:59.984011281    0.008755
2024-04-17 05:56:59.991661448    0.008755
Name: mid, Length: 128258, dtype: float64

Expected behavior :wrench: I want my plotted lines to be nicely continuous even when zoomed in.

Screenshots :camera_flash: Zoomed out a bit: Zoomed a bit further

Environment information: (please complete the following information)

• OS: Ubuntu 22.04
• Python environment: poetry
  • Python version: Python 3.11
  • plotly-resampler environment: Dash app ran in Jupyter notebook
• plotly-resampler version: 0.10

[jonasvdd]

Hi @BearLemma,

You are seeing gaps because, under the hood, plotly-resampler introduces NaNs for regions with large gaps. As your data is not regularly sampled, you see these gaps.

This is caused by the gap_handler argument defaulting to the MedDiffGapHandler. As such, by adding the NoGapHandler as gap_handler argument to the FigureResampler, your issue will be resolved.

...
from plotly_resampler.aggregation import NoGapHandler  # Added this

fig = make_subplots(
    rows=1,
    cols=1,
    shared_xaxes=True,
    vertical_spacing=0.02,
)

fr_fig = FigureResampler(
    fig,
    default_downsampler=MinMaxLTTB(),
    default_n_shown_samples=2000,
    default_gap_handler=NoGapHandler(),  # Added this
)
fr_fig.add_trace(
    go.Scatter(x=mid.index, y=mid.values, name="mid", line=dict(color="grey")),
    row=1,
    col=1,
)

Kind regards, Jonas

[BearLemma]

Hi @jonasvdd , ohhhh! I was thinking that something like that is happening but couldn't figure it out. Thank you very much sir :heart:

Best regards, Jan