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: