Feature/clustergram zoom patches

[JTL-lab]

Overview

Closes #780 and closes #778 related to bugs with Clustergram zooming behavior.

About

• [ X] I am closing an issue
• This is a new component
• [ X] I am adding a feature to an existing component, or improving an existing feature

Description of changes

This PR fixes two related zoom synchronization bugs in the Clustergram component:

1. Fix column_colors and row_colors zoom synchronization

Problem: When zooming into a region of the heatmap, the column_colors and row_colors annotation bars were remaining at their original scale rather than zooming in to match the selected region. This made it impossible to identify which color annotations corresponded to the zoomed cells (Issue #780).

Solution Implemented:

• Modified _get_row_colors_heatmap() and _get_column_colors_heatmap() to accept tickvals parameters and use the same coordinate system as the main heatmap.
• Added matches parameter to link color heatmap axes (xaxis6, xaxis7 for column colors; yaxis10 for row colors) with the main heatmap axes (xaxis11, yaxis11).

2. Fix dendrogram zoom synchronization

Problem: When zooming into the heatmap, the dendrograms would zoom, but display an incorrect portion of the dendrogram not actually corresponding to the selected heatmap region, as thoroughly documented with examples in Issue #778.

Solution:

• Added matches parameter to dendrogram axes in addition to the existing scaleanchor parameter
• Row dendrogram y-axis (yaxis9) now uses matches="y11" to synchronize with heatmap y-axis
• Column dendrogram x-axis (xaxis3) now uses matches="x11" to synchronize with heatmap x-axis

Technical details: The key difference is that scaleanchor only maintains the scale/aspect ratio between axes, while matches ensures axes share the same coordinate system and zoom level. Both are needed for dendrogram zooming to work properly: scaleanchor ensures proper visual alignment and matches is necessary for synchronized zooming.

Example and screenshots

Example Clustergram:

import pandas as pd
from dash import Dash, html, dcc
import dash_bio as dashbio

app = Dash(__name__)

df = pd.read_csv('https://git.io/clustergram_brain_cancer.csv').set_index('ID_REF')
rows = list(df.index)[:15]

column_colors = ['red', 'blue', 'green', 'yellow', 'purple',
                 'orange', 'pink', 'cyan', 'magenta', 'brown',
                 'red', 'blue', 'green', 'yellow', 'purple']

row_colors = ['red', 'blue', 'green', 'yellow', 'purple',
              'orange', 'pink', 'cyan', 'magenta', 'brown',
              'red', 'blue', 'green', 'yellow', 'purple',
              'orange', 'pink', 'cyan', 'magenta', 'brown']

app.layout = html.Div([
    dcc.Graph(figure=dashbio.Clustergram(
        data=df.loc[rows].values,
        column_colors=column_colors,
        row_colors=row_colors,
        color_threshold={
            'row': 250,
            'col': 700
        },
        height=800,
        width=700
    ))
])

if __name__ == '__main__':
    app.run(debug=True, port=8060)

Before fixes:

After fixes:

[JTL-lab]

Hi @HammadTheOne, would it be possible to have this PR reviewed? Thank you very much!

[HammadTheOne]

I believe only xaxis7 needs to be updated for this.

[HammadTheOne]

Is there a reason that we're hiding tick marks here while having showticklabels=True? Was this intended for this PR?

On a similar note, showgrid and fixedranged are also set via https://github.com/JTL-lab/dash-bio/blob/d83da34b11f41902b29e6d617f791180f65d0f1c/dash_bio/component_factory/_clustergram.py#L525 🙂

[HammadTheOne]

Plotly.js silently drops scaleanchor when matches is also set on the same axis. We can simplify it to just matches="y11" / matches="x11".

Same with on line 565.

[JTL-lab]

Hi @HammadTheOne, thank you for your review! I've addressed your feedback in my latest commit. Please let me know if anything else is needed!