feat: make plots interactive

app.py

@@ -7,8 +7,11 @@ from pathlib import Path
 
 import gradio as gr
 import matplotlib
+import matplotlib.colors as mcolors
 import matplotlib.pyplot as plt
 import numpy as np
+import plotly.graph_objects as go
+from plotly.subplots import make_subplots
 import torch
 
 from bigwig_export import _softmax_last, create_bigwig_zip
@@ -109,42 +112,93 @@ def _global_stride(L: int, target: int) -> int:
     return int(np.ceil(L / target))
 
 
-def _make_tracks_figure(x: np.ndarray, series: list[tuple[str, np.ndarray]]):
+def _make_tracks_figure(x: np.ndarray, series: list[tuple[str, np.ndarray]], region: str = ""):
+    """Create an interactive plotly figure with multiple tracks."""
     if not series:
         raise gr.Error("Nothing to plot (no tracks/elements selected).")
 
     n = len(series)
-    fig, axes = plt.subplots(n, 1, figsize=(18, 1.35 * n), sharex=True)
-    if n == 1:
-        axes = [axes]
+    
+    # Create subplots with shared x-axis
+    fig = make_subplots(
+        rows=n,
+        cols=1,
+        shared_xaxes=True,
+        vertical_spacing=0.02,
+        subplot_titles=[title for title, _ in series],
+    )
 
     # Define color schemes
     bigwig_color = "#4A90E2"  # Blue
 
-    for ax, (title, y) in zip(axes, series):
+    for i, (title, y) in enumerate(series, 1):
         # Determine color based on track type
         if title in BED_ELEMENT_COLORS:
             color = BED_ELEMENT_COLORS[title]
         else:
             color = bigwig_color
 
-        ax.fill_between(x, y, color=color, alpha=0.3, linewidth=0)
-        ax.plot(x, y, color=color, linewidth=0.8)
-        ax.set_title(title, fontsize=10, loc="left")
-        ax.grid(alpha=0.2)
-        ax.set_yticks([])
-        ax.spines["top"].set_visible(False)
-        ax.spines["right"].set_visible(False)
+        # Convert color to rgba for fill
+        rgba = mcolors.to_rgba(color)
+        rgba_str = f"rgba({int(rgba[0]*255)}, {int(rgba[1]*255)}, {int(rgba[2]*255)}, 0.3)"
+        
+        # Add filled area (fill_between equivalent)
+        fig.add_trace(
+            go.Scatter(
+                x=x,
+                y=y,
+                mode="lines",
+                name=title,
+                line=dict(color=color, width=1.5),
+                fill="tozeroy",
+                fillcolor=rgba_str,
+                hovertemplate=f"<b>{title}</b><br>" +
+                             "Position: %{x}<br>" +
+                             "Value: %{y:.4f}<extra></extra>",
+                showlegend=False,
+            ),
+            row=i,
+            col=1,
+        )
+
+    # Update layout for better appearance
+    fig.update_layout(
+        height=150 * n,  # Adjust height based on number of tracks
+        width=1200,
+        margin=dict(l=80, r=20, t=40, b=60),
+        hovermode="x unified",  # Show all values at same x position
+        template="plotly_white",
+    )
+
+    # Update y-axes to remove ticks and improve appearance
+    for i in range(1, n + 1):
+        fig.update_yaxes(
+            showticklabels=False,
+            showgrid=True,
+            gridcolor="rgba(0,0,0,0.1)",
+            row=i,
+            col=1,
+        )
+
+    # Update x-axis on the last subplot with region label
+    xaxis_title = region if region else "Genomic position / index"
+    fig.update_xaxes(
+        title_text=xaxis_title,
+        showgrid=True,
+        gridcolor="rgba(0,0,0,0.1)",
+        row=n,
+        col=1,
+    )
 
-    axes[-1].set_xlabel("Genomic position / index")
-    fig.tight_layout()
     return fig
 
 
 def _save_fig_png(fig) -> str:
+    """Save plotly figure as PNG."""
     tmpdir = tempfile.gettempdir()
     out_path = os.path.join(tmpdir, f"ntv3_tracks_{uuid.uuid4().hex}.png")
-    fig.savefig(out_path, dpi=200, bbox_inches="tight")
+    # Plotly figures can be saved directly as PNG
+    fig.write_image(out_path, width=1200, height=fig.layout.height, scale=2)
     return out_path
 
 
@@ -499,7 +553,7 @@ def predict(
         tprint(f"model moved to {device}")
 
     pipe.model.eval()
-    tprint(f"Running on {next(pipe.model.parameters()).device}")
+    print(f"Running on {next(pipe.model.parameters()).device}")
     tprint("model ready to run inference")
 
     # run inference
@@ -591,15 +645,16 @@ def predict(
             series.append((ename, probs[:, eidx, 1][::stride].astype(float)))
 
     tprint("figure data processed created")
-    fig = _make_tracks_figure(x, series)
-    tprint("figure created")
-
+    
+    # Build region string for x-axis label
     region = (
         f"{out.chrom}:{out.pred_start}-{out.pred_end}" if out.chrom else f"{x0}-{x1}"
     )
     if out.assembly:
         region += f" ({out.assembly})"
-    fig.axes[-1].set_xlabel(region)
+    
+    fig = _make_tracks_figure(x, series, region=region)
+    tprint("figure created")
 
     png_path = _save_fig_png(fig)
     tprint("figure png saved")
@@ -1056,7 +1111,7 @@ with gr.Blocks(title="NTv3 Tracks Demo") as demo:
             + ", ".join(sorted(SPECIES_WITH_COORDINATE_SUPPORT))
             + ")"
         )
-        with gr.Row():
+    with gr.Row():
             chrom = gr.Textbox(label="Chromosome", value=_default_coords["chrom"])
             start = gr.Number(
                 label="Start", value=_default_coords["start"], precision=0

requirements.txt

@@ -1,6 +1,8 @@
 gradio>=4.0.0
 matplotlib
 numpy
+plotly
+kaleido
 pyBigWig
 pyfaidx
 requests