Add interactive 3D State-Dynamic plots and download buttons

- State-Dynamic plots now use interactive Plotly instead of static matplotlib
- Added 3D checkbox for 3D UMAP visualization (drag to rotate)
- Added PNG/PDF download buttons for all plots
- Download buttons appear after analysis is complete
- 3D checkbox only visible when state-dynamics mode is selected

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -543,13 +543,16 @@ def predict(sequence: str, stride: int = 100, threshold: float = 0.3):
 
     is_valid, error = validate_sequence(sequence)
     if not is_valid:
-        return None, f"**Error**: {error}", None
+        return None, f"**Error**: {error}", None, None, None
 
     result = predict_sequence(sequence, stride=stride, aggregation="mean")
 
     # Create plot
     fig = create_prediction_plot(result.positions, result.probabilities, threshold)
 
+    # Save for download
+    png_path, pdf_path = save_figure_to_file(fig, "crispr_prediction")
+
     # Detect regions
     regions = detect_crispr_regions(sequence, threshold=threshold, min_length=100, stride=stride)
 
@@ -569,7 +572,7 @@ def predict(sequence: str, stride: int = 100, threshold: float = 0.3):
         for r in regions:
             summary += f"- **Region {r['region_id']}**: positions {r['start']:,}-{r['end']:,} ({r['length']} bp), score: {r['mean_score']:.3f}\n"
 
-    return fig, summary, regions
+    return fig, summary, regions, png_path, pdf_path
 
 
 def detect(sequence: str, threshold: float = 0.3, min_length: int = 160):
@@ -597,15 +600,35 @@ def detect(sequence: str, threshold: float = 0.3, min_length: int = 160):
     return regions, summary
 
 
-def get_embedding(sequence: str, mode: str = "mean"):
+def save_figure_to_file(fig, prefix="plot"):
+    """Save matplotlib figure to temporary files for download."""
+    import tempfile
+    import os
+
+    # Create temp directory if needed
+    temp_dir = tempfile.gettempdir()
+
+    # Save PNG
+    png_path = os.path.join(temp_dir, f"{prefix}.png")
+    fig.savefig(png_path, dpi=150, bbox_inches='tight', facecolor='white')
+
+    # Save PDF
+    pdf_path = os.path.join(temp_dir, f"{prefix}.pdf")
+    fig.savefig(pdf_path, bbox_inches='tight', facecolor='white')
+
+    return png_path, pdf_path
+
+
+def get_embedding(sequence: str, mode: str = "mean", use_3d: bool = False):
     """Extract hidden state embedding and visualize as heatmap."""
     sequence = strip_fasta_header(sequence.strip())
 
     is_valid, error = validate_sequence(sequence)
     if not is_valid:
-        return None, f"**Error**: {error}"
+        return None, f"**Error**: {error}", None, None
 
     result = embed_sequence(sequence, mode="trajectory" if mode == "state-dynamics" else mode)
+    png_path, pdf_path = None, None
 
     if mode == "trajectory":
         # Create trajectory heatmap (windows x dimensions)
@@ -613,6 +636,7 @@ def get_embedding(sequence: str, mode: str = "mean"):
             result.embeddings,
             title="Embedding Trajectory Across Sequence"
         )
+        png_path, pdf_path = save_figure_to_file(fig, "trajectory_embedding")
         summary = f"""## Trajectory Embedding
 
 | Property | Value |
@@ -625,111 +649,40 @@ Each row shows the embedding for one sliding window position.
 Blue = negative activation, Red = positive activation.
 """
     elif mode == "state-dynamics":
-        # Create State-Dynamic Plot (UMAP + clustering)
+        # Create interactive State-Dynamic Plot using Plotly
         embeddings = np.array(result.embeddings)
         n_windows = embeddings.shape[0]
         n_clusters = min(8, max(3, n_windows // 3))
 
-        # Perform clustering for both plots
-        if n_windows >= 5:
-            clustering = AgglomerativeClustering(n_clusters=n_clusters)
-            cluster_labels = clustering.fit_predict(embeddings)
-        else:
-            cluster_labels = np.zeros(n_windows, dtype=int)
-
-        # Create combined figure with state-dynamic plot and sequence map
-        fig = plt.figure(figsize=(16, 10))
-
-        # Top: State-dynamic plots
-        ax1 = fig.add_subplot(2, 2, 1)
-        ax2 = fig.add_subplot(2, 2, 2)
-
-        if n_windows >= 5:
-            # UMAP reduction
-            n_neighbors = min(15, n_windows - 1)
-            reducer = umap.UMAP(n_components=2, n_neighbors=n_neighbors,
-                               min_dist=0.1, random_state=42)
-            embedding_2d = reducer.fit_transform(embeddings)
-
-            # Colors for clusters
-            colors = plt.cm.tab10(np.linspace(0, 1, n_clusters))
-            cluster_cmap = ListedColormap(colors)
-
-            # Left plot: by cluster
-            points = embedding_2d.reshape(-1, 1, 2)
-            segments = np.concatenate([points[:-1], points[1:]], axis=1)
-            segment_colors = [colors[cluster_labels[i]] for i in range(len(segments))]
-            lc = LineCollection(segments, colors=segment_colors, alpha=0.3, linewidths=1)
-            ax1.add_collection(lc)
-            scatter1 = ax1.scatter(embedding_2d[:, 0], embedding_2d[:, 1],
-                                   c=cluster_labels, cmap=cluster_cmap,
-                                   s=60, alpha=0.8, edgecolors='white', linewidths=0.5)
-            ax1.scatter(embedding_2d[0, 0], embedding_2d[0, 1], c='green', s=200,
-                       marker='^', edgecolors='black', linewidths=2, label='Start', zorder=10)
-            ax1.scatter(embedding_2d[-1, 0], embedding_2d[-1, 1], c='red', s=200,
-                       marker='s', edgecolors='black', linewidths=2, label='End', zorder=10)
-            ax1.set_xlabel('UMAP 1')
-            ax1.set_ylabel('UMAP 2')
-            ax1.set_title('By Cluster', fontweight='bold')
-            ax1.legend(loc='upper right', fontsize=8)
-            plt.colorbar(scatter1, ax=ax1, shrink=0.8, label='Cluster')
-
-            # Right plot: by position
-            positions = np.arange(n_windows)
-            segment_colors_pos = plt.cm.viridis(plt.Normalize(0, n_windows-1)(positions[:-1]))
-            lc2 = LineCollection(segments, colors=segment_colors_pos, alpha=0.4, linewidths=1.5)
-            ax2.add_collection(lc2)
-            scatter2 = ax2.scatter(embedding_2d[:, 0], embedding_2d[:, 1],
-                                   c=positions, cmap='viridis',
-                                   s=60, alpha=0.8, edgecolors='white', linewidths=0.5)
-            ax2.scatter(embedding_2d[0, 0], embedding_2d[0, 1], c='green', s=200,
-                       marker='^', edgecolors='black', linewidths=2, label="Start (5')", zorder=10)
-            ax2.scatter(embedding_2d[-1, 0], embedding_2d[-1, 1], c='red', s=200,
-                       marker='s', edgecolors='black', linewidths=2, label="End (3')", zorder=10)
-            ax2.set_xlabel('UMAP 1')
-            ax2.set_ylabel('UMAP 2')
-            ax2.set_title('By Position', fontweight='bold')
-            ax2.legend(loc='upper right', fontsize=8)
-            plt.colorbar(scatter2, ax=ax2, shrink=0.8, label='Window')
-        else:
-            ax1.text(0.5, 0.5, "Need longer sequence", ha='center', va='center')
-            ax2.text(0.5, 0.5, "Need longer sequence", ha='center', va='center')
-
-        # Bottom: Sequence cluster map (spans both columns)
-        ax3 = fig.add_subplot(2, 1, 2)
-        colors = plt.cm.tab10(np.linspace(0, 1, max(n_clusters, 10)))
-        stride = 100
-        window_size = 1000
-        for i, cluster in enumerate(cluster_labels):
-            start_pos = i * stride
-            end_pos = start_pos + window_size
-            ax3.axvspan(start_pos, end_pos, alpha=0.7, color=colors[cluster], linewidth=0)
+        # Use the interactive Plotly version
+        fig = create_interactive_state_plot(embeddings, n_clusters=n_clusters, stride=100, use_3d=use_3d)
 
-        handles = [plt.Rectangle((0,0), 1, 1, color=colors[i], alpha=0.7) for i in range(n_clusters)]
-        ax3.legend(handles, [f'Cluster {i}' for i in range(n_clusters)],
-                  loc='upper right', ncol=min(n_clusters, 5), fontsize=8)
-        ax3.set_xlim(0, (n_windows - 1) * stride + window_size)
-        ax3.set_ylim(0, 1)
-        ax3.set_xlabel('Position (bp)', fontsize=11)
-        ax3.set_yticks([])
-        ax3.set_title('Sequence colored by embedding cluster (repeating patterns = structural elements)',
-                     fontsize=11, fontweight='bold')
+        # For downloads, create a static matplotlib version
+        static_fig = create_state_dynamic_plot(embeddings, n_clusters=n_clusters, stride=100)
+        png_path, pdf_path = save_figure_to_file(static_fig, "state_dynamic_plot")
+        plt.close(static_fig)
 
-        plt.tight_layout()
-
-        summary = f"""## State-Dynamic Plot
+        dim_text = "3D" if use_3d else "2D"
+        summary = f"""## Interactive State-Dynamic Plot ({dim_text})
 
 | Property | Value |
 |----------|-------|
 | Sequence length | {result.sequence_length:,} bp |
 | Windows analyzed | {result.num_windows} |
 | Clusters identified | {n_clusters} |
-
-**Top-Left**: UMAP projection colored by cluster. Similar activation patterns group together.
-**Top-Right**: Same projection colored by sequence position. Shows trajectory through embedding space.
-**Bottom**: Linear sequence map colored by cluster. Repeating color patterns indicate structural elements (e.g., repeats).
-
-If you see alternating colors (like in CRISPR arrays), this indicates the model detects repeating structural elements!
+| Visualization | {dim_text} UMAP |
+
+**Interactive controls:**
+- **Hover** over points to see window position and cluster
+- **Zoom** by scrolling or selecting region
+- **Pan** by dragging
+- **{"Rotate" if use_3d else "Double-click"}** to {"rotate 3D view" if use_3d else "reset zoom"}
+- **Download**: Use buttons below for PNG/PDF, or camera icon in plot toolbar
+
+**Interpretation:**
+- Points colored by cluster - similar activation patterns group together
+- Trajectory shows path through embedding space along the sequence
+- Alternating colors in CRISPR arrays indicate repeating structural elements (repeats vs spacers)
 """
     else:
         # Create single embedding heatmap
@@ -737,6 +690,7 @@ If you see alternating colors (like in CRISPR arrays), this indicates the model
             result.embedding,
             title=f"Sequence Embedding ({result.method})"
         )
+        png_path, pdf_path = save_figure_to_file(fig, f"embedding_{mode}")
         summary = f"""## Embedding Extracted
 
 | Property | Value |
@@ -749,7 +703,7 @@ Each cell represents one dimension of the {result.embedding_dim}-dimensional emb
 Blue = negative activation, Red = positive activation.
 """
 
-    return fig, summary
+    return fig, summary, png_path, pdf_path
 
 
 # Build interface
@@ -789,21 +743,25 @@ Detect CRISPR arrays in DNA sequences using a BERT-based deep learning model (43
                     gr.Button("Load Non-CRISPR Example").click(
                         lambda: NON_CRISPR_EXAMPLE, outputs=seq_input
                     )
+                result_summary = gr.Markdown()
+                gr.Markdown("### Download Plot")
+                with gr.Row():
+                    pred_download_png = gr.File(label="PNG", interactive=False)
+                    pred_download_pdf = gr.File(label="PDF", interactive=False)
             with gr.Column(scale=2):
                 plot_output = gr.Plot(label="CRISPR Score Profile")
-                result_summary = gr.Markdown()
                 regions_output = gr.JSON(label="Detected Regions", visible=False)
 
         predict_btn.click(
             predict,
             inputs=[seq_input, stride_input, threshold_input],
-            outputs=[plot_output, result_summary, regions_output]
+            outputs=[plot_output, result_summary, regions_output, pred_download_png, pred_download_pdf]
         )
 
     with gr.Tab("Embeddings"):
         gr.Markdown("""## State-Dynamic Plots
 
-Visualize how the model's internal representation changes across the sequence. The **State-Dynamics** mode projects embeddings to 2D using UMAP and clusters similar regions together.
+Visualize how the model's internal representation changes across the sequence. The **State-Dynamics** mode projects embeddings to 2D/3D using UMAP and clusters similar regions together.
 
 **For CRISPR arrays**: Expect to see alternating colors in the bottom bar where repeats and spacers alternate. Repeats should cluster together (conserved pattern), while spacers cluster separately.
 """)
@@ -819,7 +777,13 @@ Visualize how the model's internal representation changes across the sequence. T
                     choices=["state-dynamics", "mean", "max", "trajectory"],
                     value="state-dynamics",
                     label="Visualization Mode",
-                    info="state-dynamics: UMAP clustering | mean/max: pooled heatmap | trajectory: per-window heatmap"
+                    info="state-dynamics: Interactive UMAP | mean/max: pooled heatmap | trajectory: per-window heatmap"
+                )
+                use_3d = gr.Checkbox(
+                    label="3D Visualization",
+                    value=False,
+                    info="Enable 3D UMAP projection (drag to rotate)",
+                    visible=True
                 )
                 with gr.Row():
                     embed_btn = gr.Button("Analyze Embeddings", variant="primary")
@@ -837,10 +801,25 @@ Visualize how the model's internal representation changes across the sequence. T
 - Downstream: 2364-2964 bp (random)
 """)
                 embed_summary = gr.Markdown()
+                gr.Markdown("### Download Plot")
+                with gr.Row():
+                    download_png = gr.File(label="PNG", interactive=False)
+                    download_pdf = gr.File(label="PDF", interactive=False)
             with gr.Column(scale=2):
-                embed_plot = gr.Plot(label="Embedding Visualization")
+                embed_plot = gr.Plot(label="Embedding Visualization (Interactive)")
+
+        # Show/hide 3D checkbox based on mode
+        embed_mode.change(
+            lambda m: gr.update(visible=(m == "state-dynamics")),
+            inputs=[embed_mode],
+            outputs=[use_3d]
+        )
 
-        embed_btn.click(get_embedding, inputs=[embed_seq, embed_mode], outputs=[embed_plot, embed_summary])
+        embed_btn.click(
+            get_embedding,
+            inputs=[embed_seq, embed_mode, use_3d],
+            outputs=[embed_plot, embed_summary, download_png, download_pdf]
+        )
 
     with gr.Tab("About"):
         gr.Markdown("""