pyshiny visualizations added on results page

webapp/app/api/routes.py

@@ -15,6 +15,7 @@ from sqlalchemy import text, and_, or_
 from webapp.app.database import get_db
 from webapp.app.models.job import Job
 from webapp.app.services.predictor import get_predictor, SplicingPredictor
+from webapp.app.services.vis_data import get_vis_data
 from webapp.app.config import settings
 from webapp.app.api.schemas import (
     SequenceInput,
@@ -388,6 +389,45 @@ async def get_heatmap_data(
         raise HTTPException(status_code=500, detail=f"Error generating heatmap data: {str(e)}")
 
 
+@router.get("/vis_data/{job_id}", tags=["visualization"])
+async def get_vis_data_endpoint(
+    job_id: str,
+    batch_index: Optional[int] = Query(None, description="Index of sequence in batch job (0-based)"),
+    db: Session = Depends(get_db),
+):
+    """
+    Get hierarchical visualization data for silhouette and heatmap views.
+
+    Returns collapsed filter activations organized both by feature and by position.
+    This data powers the silhouette view and the new heatmap with diverging colors.
+    """
+    job = db.query(Job).filter(Job.id == job_id).first()
+    if not job:
+        raise HTTPException(status_code=404, detail="Job not found")
+
+    if job.status != "finished":
+        raise HTTPException(status_code=400, detail="Job not yet complete")
+
+    # Get the appropriate sequence
+    if job.is_batch and batch_index is not None:
+        # Get specific sequence from batch
+        results = job.get_batch_results()
+        if batch_index >= len(results):
+            raise HTTPException(status_code=404, detail=f"Batch index {batch_index} not found")
+        sequence = results[batch_index].get("sequence", "")
+        if not sequence:
+            raise HTTPException(status_code=400, detail="Sequence not found in batch results")
+    else:
+        # Use the main sequence (or first sequence for batch)
+        sequence = job.sequence
+
+    try:
+        vis_data = get_vis_data(sequence)
+        return vis_data
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error generating visualization data: {str(e)}")
+
+
 @router.get("/example", response_model=ExampleSequencesResponse, tags=["examples"])
 async def get_example_sequences():
     """

webapp/app/main.py

@@ -14,15 +14,16 @@ from webapp.app.database import init_db, get_db
 from webapp.app.api.routes import router as api_router
 from webapp.app.models.job import Job
 
-# PyShiny imports for heatmap visualization
+# PyShiny imports for visualizations
 try:
     from shiny import App
     from webapp.app.shiny_apps.heatmap_app import create_app as create_heatmap_app
+    from webapp.app.shiny_apps.silhouette_app import create_app as create_silhouette_app
     SHINY_AVAILABLE = True
 except ImportError:
     SHINY_AVAILABLE = False
     logger = logging.getLogger(__name__)
-    logger.warning("PyShiny not available - heatmap visualization will be disabled")
+    logger.warning("PyShiny not available - visualizations will be disabled")
 
 # Configure logging
 logging.basicConfig(
@@ -102,7 +103,7 @@ static_path = Path(__file__).parent.parent / "static"
 if static_path.exists():
     app.mount("/static", StaticFiles(directory=str(static_path)), name="static")
 
-# Mount PyShiny heatmap app
+# Mount PyShiny visualization apps
 if SHINY_AVAILABLE:
     try:
         heatmap_shiny_app = create_heatmap_app(api_base_url="http://localhost:8000")
@@ -111,6 +112,13 @@ if SHINY_AVAILABLE:
     except Exception as e:
         logger.error(f"Failed to mount PyShiny heatmap app: {e}")
 
+    try:
+        silhouette_shiny_app = create_silhouette_app(api_base_url="http://localhost:8000")
+        app.mount("/shiny/silhouette", silhouette_shiny_app, name="shiny_silhouette")
+        logger.info("PyShiny silhouette app mounted at /shiny/silhouette")
+    except Exception as e:
+        logger.error(f"Failed to mount PyShiny silhouette app: {e}")
+
 # Set up templates
 templates_path = Path(__file__).parent.parent / "templates"
 templates = Jinja2Templates(directory=str(templates_path)) if templates_path.exists() else None

webapp/app/services/vis_data.py

@@ -0,0 +1,411 @@
+"""Visualization data computation for silhouette and heatmap views.
+
+Adapted from interpretable-splicing-model-pyshiny/src/vis_data.py
+"""
+
+import json
+import numpy as np
+import tensorflow as tf
+from tensorflow.keras.models import Model
+from pathlib import Path
+from typing import Dict, Any, List, Tuple
+
+from webapp.app.config import settings
+from webapp.app.services.predictor import get_predictor
+
+
+# Load model configuration data
+def _load_model_data() -> Dict[str, Any]:
+    """Load model data configuration (filter groupings, boundaries, etc.)."""
+    model_data_path = Path(__file__).parent.parent.parent / "data" / "model_data_18.json"
+    with open(model_data_path, "r") as f:
+        return json.load(f)
+
+
+def _load_dataset_data() -> Dict[str, Any]:
+    """Load dataset configuration (flanking sequences, etc.)."""
+    dataset_data_path = Path(__file__).parent.parent.parent / "data" / "datasets_data.json"
+    with open(dataset_data_path, "r") as f:
+        return json.load(f)
+
+
+def shift_row(row: np.ndarray, shift: int, total_len: int = 90) -> np.ndarray:
+    """Shift an activation row by a given amount."""
+    shift = int(shift)
+    out = np.zeros(total_len)
+    out[shift:len(row)+shift] += row
+    return out
+
+
+def collapse(
+    groups: Dict[str, List[int]],
+    shifted_acts: np.ndarray,
+    logo_boundaries: List[Dict],
+    sequence_length: int
+) -> np.ndarray:
+    """Collapse individual filter activations into grouped super-features."""
+    collapsed_acts = np.zeros((sequence_length, len(groups), 2))
+    for i in range(sequence_length):
+        for feature_id in groups.keys():
+            filter_strengths = shifted_acts[i, groups[feature_id]]
+            feature_strength = filter_strengths.sum()
+            repr_filter = groups[feature_id][np.argmax(filter_strengths)]
+            feature_length = logo_boundaries[repr_filter]["length"]
+            collapsed_acts[i, int(feature_id)-1, :] = [feature_strength, feature_length]
+    return collapsed_acts
+
+
+def collapse_activations(
+    incl_acts: np.ndarray,
+    skip_acts: np.ndarray,
+    incl_seq_groups: Dict[str, List[int]],
+    skip_seq_groups: Dict[str, List[int]],
+    incl_struct_groups: Dict[str, List[int]],
+    skip_struct_groups: Dict[str, List[int]],
+    seq_logo_boundaries: Dict[str, List[Dict]],
+    struct_logo_boundaries: Dict[str, List[Dict]],
+    num_seq_filters: int,
+    num_struct_filters: int,
+    sequence_length: int
+) -> Tuple[np.ndarray, np.ndarray, np.ndarray, np.ndarray]:
+    """Collapse filter activations into super-features with proper shifting."""
+    # Shift by start boundaries
+    seq_incl_shifts = [seq_logo_boundaries["incl"][i]["left"] for i in range(num_seq_filters)]
+    seq_skip_shifts = [seq_logo_boundaries["skip"][i]["left"] for i in range(num_seq_filters)]
+
+    struct_incl_shifts = [struct_logo_boundaries["incl"][i]["left"] for i in range(num_struct_filters)]
+    struct_skip_shifts = [struct_logo_boundaries["skip"][i]["left"] for i in range(num_struct_filters)]
+
+    # Separate activations
+    seq_incl_acts = incl_acts[:, :num_seq_filters]
+    seq_skip_acts = skip_acts[:, :num_seq_filters]
+    struct_incl_acts = incl_acts[:, num_seq_filters:]
+    struct_skip_acts = skip_acts[:, num_seq_filters:]
+
+    # Shift sequence activations
+    shifted_seq_incl_acts = np.array([
+        shift_row(row, row_shift, sequence_length)
+        for row, row_shift in zip(seq_incl_acts.T, seq_incl_shifts)
+    ]).T
+    shifted_seq_skip_acts = np.array([
+        shift_row(row, row_shift, sequence_length)
+        for row, row_shift in zip(seq_skip_acts.T, seq_skip_shifts)
+    ]).T
+
+    # Handle structure activations with padding for edges
+    left_padding_struct_incl_acts = np.copy(struct_incl_acts[:12, :])
+    right_padding_struct_incl_acts = np.copy(struct_incl_acts[-12:, :])
+    struct_incl_acts[:12, :] = 0.
+    struct_incl_acts[-12:, :] = 0.
+    shifted_struct_incl_acts = np.array([
+        shift_row(row, row_shift, sequence_length)
+        for row, row_shift in zip(struct_incl_acts.T, struct_incl_shifts)
+    ]).T
+    shifted_struct_incl_acts[:12, :] += left_padding_struct_incl_acts
+    shifted_struct_incl_acts[-12:, :] += right_padding_struct_incl_acts
+
+    left_padding_struct_skip_acts = np.copy(struct_skip_acts[:12, :])
+    right_padding_struct_skip_acts = np.copy(struct_skip_acts[-12:, :])
+    struct_skip_acts[:12, :] = 0.
+    struct_skip_acts[-12:, :] = 0.
+    shifted_struct_skip_acts = np.array([
+        shift_row(row, row_shift, sequence_length)
+        for row, row_shift in zip(struct_skip_acts.T, struct_skip_shifts)
+    ]).T
+    shifted_struct_skip_acts[:12, :] += left_padding_struct_skip_acts
+    shifted_struct_skip_acts[-12:, :] += right_padding_struct_skip_acts
+
+    # Collapse into super-features
+    collapsed_seq_incl_acts = collapse(
+        groups=incl_seq_groups,
+        shifted_acts=shifted_seq_incl_acts,
+        logo_boundaries=seq_logo_boundaries["incl"],
+        sequence_length=sequence_length
+    )
+    collapsed_struct_incl_acts = collapse(
+        groups=incl_struct_groups,
+        shifted_acts=shifted_struct_incl_acts,
+        logo_boundaries=struct_logo_boundaries["incl"],
+        sequence_length=sequence_length
+    )
+    collapsed_seq_skip_acts = collapse(
+        groups=skip_seq_groups,
+        shifted_acts=shifted_seq_skip_acts,
+        logo_boundaries=seq_logo_boundaries["skip"],
+        sequence_length=sequence_length
+    )
+    collapsed_struct_skip_acts = collapse(
+        groups=skip_struct_groups,
+        shifted_acts=shifted_struct_skip_acts,
+        logo_boundaries=struct_logo_boundaries["skip"],
+        sequence_length=sequence_length
+    )
+
+    return (
+        collapsed_seq_incl_acts, collapsed_struct_incl_acts,
+        collapsed_seq_skip_acts, collapsed_struct_skip_acts
+    )
+
+
+def transform(d: Dict, parent: str) -> Dict:
+    """Transform dict tree to nested JSON format."""
+    if "strength" in d[parent].keys():
+        return {"name": parent, "strength": d[parent]["strength"], "length": d[parent]["length"]}
+    return {"name": parent, "children": [transform(d[parent], child) for child in d[parent]]}
+
+
+def get_feature_activations_helper(
+    collapsed_acts: np.ndarray,
+    acts_dict: Dict,
+    name: str,
+    sequence_length: int,
+    threshold: float
+) -> None:
+    """Build feature activations tree."""
+    for fi in range(collapsed_acts.shape[1]):
+        acts_dict[f"{name}_{fi+1}"] = {}
+        for i in range(sequence_length):
+            feature_strength = collapsed_acts[i, fi, 0]
+            feature_length = int(collapsed_acts[i, fi, 1])
+            pos_ind = i + 1
+            if "struct" in name:
+                if i < 12 or i > 77:
+                    feature_length = 1
+                else:
+                    pos_ind -= 12
+            if feature_strength > threshold:
+                acts_dict[f"{name}_{fi+1}"][f"pos_{pos_ind}"] = {
+                    "strength": feature_strength,
+                    "length": feature_length,
+                }
+
+
+def get_feature_activations(
+    collapsed_seq_incl_acts: np.ndarray,
+    collapsed_struct_incl_acts: np.ndarray,
+    collapsed_seq_skip_acts: np.ndarray,
+    collapsed_struct_skip_acts: np.ndarray,
+    sequence_length: int,
+    incl_bias: float,
+    skip_bias: float,
+    threshold: float = 0.001
+) -> List[Dict]:
+    """Build hierarchical feature activations structure."""
+    feature_activations = {
+        "incl": {"incl_bias": {"strength": incl_bias, "length": 0}},
+        "skip": {"skip_bias": {"strength": skip_bias, "length": 0}}
+    }
+    get_feature_activations_helper(collapsed_seq_incl_acts, feature_activations["incl"],
+        "incl", sequence_length, threshold)
+    get_feature_activations_helper(collapsed_struct_incl_acts, feature_activations["incl"],
+        "incl_struct", sequence_length, threshold)
+    get_feature_activations_helper(collapsed_seq_skip_acts, feature_activations["skip"],
+        "skip", sequence_length, threshold)
+    get_feature_activations_helper(collapsed_struct_skip_acts, feature_activations["skip"],
+        "skip_struct", sequence_length, threshold)
+    return [
+        transform(feature_activations, "incl"),
+        transform(feature_activations, "skip"),
+    ]
+
+
+def get_nucleotide_activations_helper(
+    collapsed_acts: np.ndarray,
+    acts_dict: Dict,
+    name: str,
+    sequence_length: int,
+    filter_width: int,
+    threshold: float
+) -> None:
+    """Build per-nucleotide activations tree."""
+    for i in range(sequence_length):
+        for fi in range(collapsed_acts.shape[1]):
+            fix_feature_length = sequence_length
+            pos_ind = i + 1
+            if "struct" in name:
+                if i < 12 or i > 77:
+                    first_start_ind = i
+                    fix_feature_length = 1
+                else:
+                    first_start_ind = max(12, i - filter_width + 1)
+            else:
+                first_start_ind = max(0, i - filter_width + 1)
+            for start_ind in range(first_start_ind, i + 1):
+                feature_strength = collapsed_acts[start_ind, fi, 0]
+                feature_length = min(fix_feature_length, int(collapsed_acts[start_ind, fi, 1]))
+                if feature_strength > threshold and start_ind + feature_length > i:
+                    if f"{name}_{fi+1}" not in acts_dict[f"pos_{pos_ind}"].keys():
+                        acts_dict[f"pos_{pos_ind}"][f"{name}_{fi+1}"] = {}
+                    acts_dict[f"pos_{pos_ind}"][f"{name}_{fi+1}"][f"feature_pos_{i-start_ind+1}"] = {
+                        "strength": feature_strength / feature_length,
+                        "length": feature_length,
+                    }
+
+
+def get_nucleotide_activations(
+    collapsed_seq_incl_acts: np.ndarray,
+    collapsed_struct_incl_acts: np.ndarray,
+    collapsed_seq_skip_acts: np.ndarray,
+    collapsed_struct_skip_acts: np.ndarray,
+    sequence_length: int,
+    seq_filter_width: int,
+    struct_filter_width: int,
+    threshold: float = 0.001
+) -> List[Dict]:
+    """Build hierarchical per-nucleotide activations structure."""
+    nucleotide_activations = {"incl": {}, "skip": {}}
+    for i in range(sequence_length):
+        nucleotide_activations["incl"][f"pos_{i+1}"] = {}
+        nucleotide_activations["skip"][f"pos_{i+1}"] = {}
+
+    get_nucleotide_activations_helper(collapsed_seq_incl_acts, nucleotide_activations["incl"],
+        "incl", sequence_length, seq_filter_width, threshold)
+    get_nucleotide_activations_helper(collapsed_struct_incl_acts, nucleotide_activations["incl"],
+        "incl_struct", sequence_length, struct_filter_width, threshold)
+    get_nucleotide_activations_helper(collapsed_seq_skip_acts, nucleotide_activations["skip"],
+        "skip", sequence_length, seq_filter_width, threshold)
+    get_nucleotide_activations_helper(collapsed_struct_skip_acts, nucleotide_activations["skip"],
+        "skip_struct", sequence_length, struct_filter_width, threshold)
+
+    # Remove empty positions
+    for i in range(sequence_length):
+        if len(nucleotide_activations["incl"][f"pos_{i+1}"]) == 0:
+            nucleotide_activations["incl"].pop(f"pos_{i+1}")
+        if len(nucleotide_activations["skip"][f"pos_{i+1}"]) == 0:
+            nucleotide_activations["skip"].pop(f"pos_{i+1}")
+
+    return [
+        transform(nucleotide_activations, "incl"),
+        transform(nucleotide_activations, "skip"),
+    ]
+
+
+def get_vis_data(exon_sequence: str, threshold: float = 0.001) -> Dict[str, Any]:
+    """
+    Compute visualization data for an exon sequence.
+
+    Args:
+        exon_sequence: The 70nt exon sequence
+        threshold: Minimum activation strength to include
+
+    Returns:
+        Dictionary with visualization data including:
+        - exon, sequence, structs
+        - predicted_psi, delta_force, incl_strength, skip_strength
+        - feature_activations (hierarchical feature contributions)
+        - nucleotide_activations (per-position contributions)
+    """
+    # Normalize input
+    exon = exon_sequence.upper().replace("T", "U")
+
+    # Get predictor and prepare input
+    predictor = get_predictor()
+
+    # Add flanking sequences (uses settings from webapp config)
+    full_sequence = predictor.add_flanking(exon_sequence.upper())
+    sequence_length = len(full_sequence)
+
+    # Get structure prediction
+    inputs, structure, mfe, warnings = predictor.prepare_input(exon_sequence)
+
+    # Get model and make prediction
+    model = predictor.model
+    predicted_psi = float(model.predict(inputs, verbose=0)[0, 0])
+
+    # Load model configuration
+    model_data = _load_model_data()
+
+    # Get configuration values
+    link_midpoint = model_data["link_midpoint"]
+    incl_bias, skip_bias = (abs(link_midpoint), 0) if link_midpoint < 0 else (0, abs(link_midpoint))
+
+    num_seq_filters = model_data["num_seq_filters"]
+    num_struct_filters = model_data["num_struct_filters"]
+    seq_filter_width = model_data["seq_filter_width"]
+    struct_filter_width = model_data["struct_filter_width"]
+
+    # Get filter groups
+    incl_seq_groups = model_data["incl_seq_groups"]
+    skip_seq_groups = model_data["skip_seq_groups"]
+    incl_struct_groups = model_data["incl_struct_groups"]
+    skip_struct_groups = model_data["skip_struct_groups"]
+
+    # Get filter boundaries
+    seq_logo_boundaries = model_data["seq_logo_boundaries"]
+    struct_logo_boundaries = model_data["struct_logo_boundaries"]
+
+    # Create intermediate model to extract activations
+    # activation_2 = inclusion activations, activation_3 = skipping activations
+    activations_model = Model(inputs=model.inputs, outputs=[
+        model.get_layer("activation_2").output,
+        model.get_layer("activation_3").output
+    ])
+
+    data_incl_acts, data_skip_acts = activations_model.predict(inputs, verbose=0)
+    incl_acts = data_incl_acts[0]
+    skip_acts = data_skip_acts[0]
+
+    incl_strength = incl_bias + incl_acts.sum()
+    skip_strength = skip_bias + skip_acts.sum()
+    delta_force = incl_strength - skip_strength
+
+    # Collapse filter activations into super-features
+    (
+        collapsed_seq_incl_acts, collapsed_struct_incl_acts,
+        collapsed_seq_skip_acts, collapsed_struct_skip_acts
+    ) = collapse_activations(
+        incl_acts=incl_acts,
+        skip_acts=skip_acts,
+        incl_seq_groups=incl_seq_groups,
+        skip_seq_groups=skip_seq_groups,
+        incl_struct_groups=incl_struct_groups,
+        skip_struct_groups=skip_struct_groups,
+        seq_logo_boundaries=seq_logo_boundaries,
+        struct_logo_boundaries=struct_logo_boundaries,
+        num_seq_filters=num_seq_filters,
+        num_struct_filters=num_struct_filters,
+        sequence_length=sequence_length,
+    )
+
+    # Build hierarchical data structures
+    feature_activations = get_feature_activations(
+        collapsed_seq_incl_acts=collapsed_seq_incl_acts,
+        collapsed_struct_incl_acts=collapsed_struct_incl_acts,
+        collapsed_seq_skip_acts=collapsed_seq_skip_acts,
+        collapsed_struct_skip_acts=collapsed_struct_skip_acts,
+        sequence_length=sequence_length,
+        incl_bias=incl_bias,
+        skip_bias=skip_bias,
+        threshold=threshold
+    )
+
+    nucleotide_activations = get_nucleotide_activations(
+        collapsed_seq_incl_acts=collapsed_seq_incl_acts,
+        collapsed_struct_incl_acts=collapsed_struct_incl_acts,
+        collapsed_seq_skip_acts=collapsed_seq_skip_acts,
+        collapsed_struct_skip_acts=collapsed_struct_skip_acts,
+        sequence_length=sequence_length,
+        seq_filter_width=seq_filter_width,
+        struct_filter_width=struct_filter_width,
+        threshold=threshold
+    )
+
+    return {
+        "exon": exon,
+        "sequence": full_sequence,
+        "structs": structure,
+        "predicted_psi": float(predicted_psi),
+        "delta_force": float(delta_force),
+        "incl_bias": float(incl_bias),
+        "skip_bias": float(skip_bias),
+        "incl_strength": float(incl_strength),
+        "skip_strength": float(skip_strength),
+        "feature_activations": {
+            "name": "feature_activations",
+            "children": feature_activations
+        },
+        "nucleotide_activations": {
+            "name": "nucleotide_activations",
+            "children": nucleotide_activations
+        },
+    }

webapp/app/shiny_apps/heatmap_app.py

@@ -1,22 +1,110 @@
-"""PyShiny app for Filter × Position heatmap visualization."""
+"""PyShiny app for Filter × Position heatmap visualization.
+
+Shows collapsed filter activations with:
+- Diverging colorscale (red = skipping, white = 0, blue = inclusion)
+- Filter icons positioned next to y-axis labels
+- Signed matrix (positive for inclusion, negative for skipping)
+"""
 
 from shiny import App, ui, render, reactive
 import plotly.graph_objects as go
-from plotly.subplots import make_subplots
 import httpx
 import numpy as np
-from urllib.parse import parse_qs
 
 
-def create_app(api_base_url: str = "http://localhost:8000"):
-    """Create the PyShiny heatmap app.
+def list_all_filters_collapsed(children):
+    """Get list of all filter names, collapsing skip_struct_* into skip_struct_ALL."""
+    names = set()
+    has_skip_struct = False
+    for side_node in children:
+        for pos_node in side_node.get("children", []):
+            for feat_node in pos_node.get("children", []):
+                n = feat_node["name"]
+                if n.startswith("skip_struct_"):
+                    has_skip_struct = True
+                else:
+                    names.add(n)
+    out = sorted(names)
+    if has_skip_struct:
+        out.append("skip_struct_ALL")
+    return out
+
+
+def build_signed_filter_matrix_collapsed(children, L, filter_names):
+    """
+    Build a signed activation matrix.
 
-    Args:
-        api_base_url: Base URL for the API to fetch heatmap data
+    M[row, pos]:
+      + strength for inclusion-side features
+      - strength for skipping-side features
+
+    Also collapses skip_struct_* into skip_struct_ALL.
     """
+    name_to_row = {name: i for i, name in enumerate(filter_names)}
+    M = np.zeros((len(filter_names), L), dtype=float)
+
+    incl_node = children[0]
+    skip_node = children[1]
+
+    def add_side(side_node, sign):
+        for pos_node in side_node.get("children", []):
+            pos = int(pos_node["name"].split("_")[1]) - 1
+            for feat_node in pos_node.get("children", []):
+                fname = feat_node["name"]
+
+                # Collapse skip_struct_* into skip_struct_ALL
+                if fname.startswith("skip_struct_") and "skip_struct_ALL" in name_to_row:
+                    row = name_to_row["skip_struct_ALL"]
+                else:
+                    if fname not in name_to_row:
+                        continue
+                    row = name_to_row[fname]
+
+                s = 0.0
+                for leaf in feat_node.get("children", []):
+                    s += float(leaf.get("strength", 0.0))
+
+                M[row, pos] += sign * s
+
+    add_side(incl_node, +1.0)
+    add_side(skip_node, -1.0)
+    return M
+
+
+def filter_to_icon_url(filter_name: str) -> str:
+    """Get URL for filter icon image."""
+    return f"/static/filters/{filter_name}.png"
+
+
+def create_app(api_base_url: str = "http://localhost:8000"):
+    """Create the PyShiny heatmap app."""
 
     app_ui = ui.page_fluid(
         ui.head_content(
+            ui.tags.script("""
+                // Listen for postMessage from parent window
+                window.addEventListener('message', function(event) {
+                    if (event.data && event.data.type === 'setParams') {
+                        console.log('[Heatmap] Received params via postMessage:', event.data);
+                        // Wait for Shiny to be ready, then set input values
+                        if (typeof Shiny !== 'undefined' && Shiny.setInputValue) {
+                            Shiny.setInputValue('pm_job_id', event.data.job_id);
+                            Shiny.setInputValue('pm_batch_index', event.data.batch_index);
+                        } else {
+                            // Retry after Shiny loads
+                            document.addEventListener('shiny:connected', function() {
+                                Shiny.setInputValue('pm_job_id', event.data.job_id);
+                                Shiny.setInputValue('pm_batch_index', event.data.batch_index);
+                            });
+                        }
+                    }
+                });
+                // Request params from parent when Shiny is ready
+                document.addEventListener('shiny:connected', function() {
+                    console.log('[Heatmap] Shiny connected, requesting params from parent');
+                    window.parent.postMessage({type: 'ready', source: 'heatmap'}, '*');
+                });
+            """),
             ui.tags.style("""
                 body {
                     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -63,15 +151,17 @@ def create_app(api_base_url: str = "http://localhost:8000"):
                 3,
                 ui.div(
                     {"class": "filter-panel"},
-                    ui.h4("Filter × Position heatmap"),
+                    ui.h4("Filter × Position Heatmap"),
+                    ui.p("Blue = Inclusion, Red = Skipping",
+                         style="font-size: 12px; color: #6b7280; margin-bottom: 12px;"),
                     ui.div(
                         {"class": "filter-section"},
-                        ui.h4("Inclusion Filters", style="color: #22c55e;"),
+                        ui.h4("Inclusion Filters", style="color: #2563eb;"),
                         ui.output_ui("inclusion_checkboxes"),
                     ),
                     ui.div(
                         {"class": "filter-section"},
-                        ui.h4("Skipping Filters", style="color: #ef4444;"),
+                        ui.h4("Skipping Filters", style="color: #dc2626;"),
                         ui.output_ui("skipping_checkboxes"),
                     ),
                     ui.div(
@@ -95,46 +185,35 @@ def create_app(api_base_url: str = "http://localhost:8000"):
     )
 
     def server(input, output, session):
-        # Reactive value to store heatmap data
-        heatmap_data = reactive.Value(None)
+        vis_data = reactive.Value(None)
         error_message = reactive.Value(None)
-        selected_filters = reactive.Value(set())
-
-        def get_job_id_from_url():
-            """Extract job_id from URL query parameters."""
-            try:
-                # Access the ASGI scope to get query string
-                scope = session.http_conn.scope if hasattr(session, 'http_conn') else None
-                if scope and 'query_string' in scope:
-                    query_string = scope['query_string'].decode('utf-8')
-                    params = parse_qs(query_string)
-                    if 'job_id' in params:
-                        return params['job_id'][0]
-            except Exception:
-                pass
-            return None
+        params_received = reactive.Value(False)
 
         @reactive.Effect
-        def fetch_data():
-            """Fetch heatmap data from API on app load."""
-            job_id = get_job_id_from_url()
+        @reactive.event(input.pm_job_id)
+        async def on_params_received():
+            """Triggered when params are received via postMessage."""
+            job_id = input.pm_job_id()
+            batch_index = input.pm_batch_index()
+            print(f"[Heatmap] Received postMessage params: job_id={job_id}, batch_index={batch_index}", flush=True)
 
             if not job_id:
-                error_message.set("No job_id provided in URL. Please access this page from a result page.")
+                error_message.set("Waiting for job parameters...")
                 return
 
+            params_received.set(True)
+
             try:
-                # Fetch heatmap data from API
-                with httpx.Client(timeout=30.0) as client:
-                    response = client.get(f"{api_base_url}/api/heatmap/{job_id}")
+                url = f"{api_base_url}/api/vis_data/{job_id}"
+                if batch_index is not None:
+                    url += f"?batch_index={batch_index}"
+
+                async with httpx.AsyncClient(timeout=60.0) as client:
+                    response = await client.get(url)
                     response.raise_for_status()
                     data = response.json()
-                    heatmap_data.set(data)
-
-                    # Initialize all filters as selected
-                    if data and "filter_names" in data:
-                        selected_filters.set(set(data["filter_names"]))
-
+                    vis_data.set(data)
+                    error_message.set(None)  # Clear any error
             except httpx.HTTPError as e:
                 error_message.set(f"Error fetching data: {str(e)}")
             except Exception as e:
@@ -143,11 +222,13 @@ def create_app(api_base_url: str = "http://localhost:8000"):
         @output
         @render.ui
         def inclusion_checkboxes():
-            data = heatmap_data.get()
-            if not data or "filter_names" not in data:
+            data = vis_data.get()
+            if not data:
                 return ui.p("Loading...")
 
-            incl_filters = [f for f in data["filter_names"] if f.startswith("incl_") and not f.startswith("incl_struct")]
+            children = data["nucleotide_activations"]["children"]
+            all_filters = list_all_filters_collapsed(children)
+            incl_filters = [f for f in all_filters if f.startswith("incl_") and not f.startswith("incl_struct")]
 
             return ui.input_checkbox_group(
                 "incl_filters",
@@ -159,11 +240,13 @@ def create_app(api_base_url: str = "http://localhost:8000"):
         @output
         @render.ui
         def skipping_checkboxes():
-            data = heatmap_data.get()
-            if not data or "filter_names" not in data:
+            data = vis_data.get()
+            if not data:
                 return ui.p("Loading...")
 
-            skip_filters = [f for f in data["filter_names"] if f.startswith("skip_") and not f.startswith("skip_struct")]
+            children = data["nucleotide_activations"]["children"]
+            all_filters = list_all_filters_collapsed(children)
+            skip_filters = [f for f in all_filters if f.startswith("skip_") and not f.startswith("skip_struct")]
 
             return ui.input_checkbox_group(
                 "skip_filters",
@@ -175,11 +258,13 @@ def create_app(api_base_url: str = "http://localhost:8000"):
         @output
         @render.ui
         def structure_checkboxes():
-            data = heatmap_data.get()
-            if not data or "filter_names" not in data:
+            data = vis_data.get()
+            if not data:
                 return ui.p("Loading...")
 
-            struct_filters = [f for f in data["filter_names"] if "struct" in f]
+            children = data["nucleotide_activations"]["children"]
+            all_filters = list_all_filters_collapsed(children)
+            struct_filters = [f for f in all_filters if "struct" in f]
 
             return ui.input_checkbox_group(
                 "struct_filters",
@@ -191,13 +276,13 @@ def create_app(api_base_url: str = "http://localhost:8000"):
         @reactive.Effect
         @reactive.event(input.select_all)
         def select_all_filters():
-            data = heatmap_data.get()
-            if data and "filter_names" in data:
-                # Update all checkbox groups
-                incl_filters = [f for f in data["filter_names"] if f.startswith("incl_") and not f.startswith("incl_struct")]
-                skip_filters = [f for f in data["filter_names"] if f.startswith("skip_") and not f.startswith("skip_struct")]
-                struct_filters = [f for f in data["filter_names"] if "struct" in f]
-
+            data = vis_data.get()
+            if data:
+                children = data["nucleotide_activations"]["children"]
+                all_filters = list_all_filters_collapsed(children)
+                incl_filters = [f for f in all_filters if f.startswith("incl_") and not f.startswith("incl_struct")]
+                skip_filters = [f for f in all_filters if f.startswith("skip_") and not f.startswith("skip_struct")]
+                struct_filters = [f for f in all_filters if "struct" in f]
                 ui.update_checkbox_group("incl_filters", selected=incl_filters)
                 ui.update_checkbox_group("skip_filters", selected=skip_filters)
                 ui.update_checkbox_group("struct_filters", selected=struct_filters)
@@ -209,6 +294,20 @@ def create_app(api_base_url: str = "http://localhost:8000"):
             ui.update_checkbox_group("skip_filters", selected=[])
             ui.update_checkbox_group("struct_filters", selected=[])
 
+        @reactive.Effect
+        def trigger_initial_heatmap():
+            """Force checkbox updates when data loads to trigger heatmap rendering."""
+            data = vis_data.get()
+            if data:
+                children = data["nucleotide_activations"]["children"]
+                all_filters = list_all_filters_collapsed(children)
+                incl_filters = [f for f in all_filters if f.startswith("incl_") and not f.startswith("incl_struct")]
+                skip_filters = [f for f in all_filters if f.startswith("skip_") and not f.startswith("skip_struct")]
+                struct_filters = [f for f in all_filters if "struct" in f]
+                ui.update_checkbox_group("incl_filters", selected=incl_filters)
+                ui.update_checkbox_group("skip_filters", selected=skip_filters)
+                ui.update_checkbox_group("struct_filters", selected=struct_filters)
+
         @output
         @render.ui
         def heatmap_plot():
@@ -216,16 +315,32 @@ def create_app(api_base_url: str = "http://localhost:8000"):
             if err:
                 return ui.div({"class": "error-message"}, err)
 
-            data = heatmap_data.get()
+            data = vis_data.get()
             if not data:
-                return ui.div({"class": "loading"}, "Loading heatmap data...")
+                return ui.div({"class": "loading"}, "Waiting for job parameters...")
 
-            # Get selected filters from all checkbox groups
-            incl_selected = list(input.incl_filters()) if input.incl_filters() else []
-            skip_selected = list(input.skip_filters()) if input.skip_filters() else []
-            struct_selected = list(input.struct_filters()) if input.struct_filters() else []
+            # Get all available filters for defaults
+            children = data["nucleotide_activations"]["children"]
+            available_filters = list_all_filters_collapsed(children)
+            default_incl = [f for f in available_filters if f.startswith("incl_") and not f.startswith("incl_struct")]
+            default_skip = [f for f in available_filters if f.startswith("skip_") and not f.startswith("skip_struct")]
+            default_struct = [f for f in available_filters if "struct" in f]
+
+            # Get selected filters - default to all if inputs not yet available
+            try:
+                incl_selected = list(input.incl_filters()) if input.incl_filters() else default_incl
+            except Exception:
+                incl_selected = default_incl
+            try:
+                skip_selected = list(input.skip_filters()) if input.skip_filters() else default_skip
+            except Exception:
+                skip_selected = default_skip
+            try:
+                struct_selected = list(input.struct_filters()) if input.struct_filters() else default_struct
+            except Exception:
+                struct_selected = default_struct
 
-            all_selected = incl_selected + skip_selected + struct_selected
+            all_selected = set(incl_selected + skip_selected + struct_selected)
 
             if not all_selected:
                 return ui.div(
@@ -233,61 +348,94 @@ def create_app(api_base_url: str = "http://localhost:8000"):
                     "Select at least one filter to display the heatmap."
                 )
 
-            # Filter data based on selected filters
-            filter_names = data["filter_names"]
-            activations = data["activations"]
-            nucleotides = data["nucleotides"]
-            positions = data["positions"]
-
-            # Get indices of selected filters
-            selected_indices = [i for i, name in enumerate(filter_names) if name in all_selected]
-
-            if not selected_indices:
-                return ui.div({"class": "loading"}, "No filters selected.")
-
-            # Create filtered activation matrix
-            filtered_names = [filter_names[i] for i in selected_indices]
-            filtered_activations = [activations[i] for i in selected_indices]
-
-            # Create x-axis labels (nucleotides)
-            x_labels = [f"{nucleotides[i]}" for i in range(len(nucleotides))]
-
-            # Create heatmap
-            fig = go.Figure(data=go.Heatmap(
-                z=filtered_activations,
-                x=x_labels,
-                y=filtered_names,
-                colorscale="Viridis",
-                colorbar=dict(
-                    title="Strength",
-                    titleside="right",
-                ),
-                hovertemplate=(
-                    "Position: %{x}<br>"
-                    "Filter: %{y}<br>"
-                    "Activation: %{z:.3f}<br>"
-                    "<extra></extra>"
-                ),
-            ))
+            # Extract data
+            full_seq = data["sequence"]
+            exon = data["exon"]
+            L = len(full_seq)
+
+            # Filter to only selected filters
+            filters = [f for f in available_filters if f in all_selected]
+
+            # Build signed matrix
+            M = build_signed_filter_matrix_collapsed(children, L, filters)
+
+            # Get exon boundaries for highlighting
+            start = full_seq.find(exon.replace("U", "T"))
+            if start == -1:
+                start = full_seq.upper().find(exon.upper().replace("U", "T"))
+            if start == -1:
+                start = 10
+            end = start + len(exon)
+
+            # Setup display
+            x_pos = list(range(L))
+            x_bases = list(full_seq)
+            filters_rev = list(reversed(filters))
+            M_rev = M[::-1, :]
+
+            # Symmetric z range so 0 is white
+            zmax = float(max(np.max(np.abs(M_rev)), 1e-6))
+
+            # Create heatmap with diverging colorscale
+            fig = go.Figure(
+                data=go.Heatmap(
+                    z=M_rev,
+                    x=x_pos,
+                    y=filters_rev,
+                    zmin=-zmax,
+                    zmax=zmax,
+                    colorscale=[
+                        (0.0, "#dc2626"),   # Red for skipping
+                        (0.5, "#ffffff"),   # White for neutral
+                        (1.0, "#2563eb"),   # Blue for inclusion
+                    ],
+                    hovertemplate="Filter %{y}<br>Base %{customdata}<br>Strength %{z:.4f}<extra></extra>",
+                    customdata=np.array(x_bases)[None, :].repeat(len(filters_rev), axis=0),
+                    colorbar=dict(title="Strength<br>(+ incl, - skip)"),
+                )
+            )
+
+            # Highlight exon region
+            fig.add_vrect(x0=start-0.5, x1=end-0.5, fillcolor="#d0d0d0", line_width=0, opacity=0.2)
+
+            # Add filter icons to the left of y-axis labels
+            fig.update_layout(images=[])
+            for y in filters_rev:
+                if y != "skip_struct_ALL":
+                    fig.add_layout_image(
+                        dict(
+                            source=filter_to_icon_url(y),
+                            xref="paper",
+                            yref="y",
+                            x=-0.03,
+                            y=y,
+                            xanchor="right",
+                            yanchor="middle",
+                            sizex=0.06,
+                            sizey=0.8,
+                            sizing="contain",
+                            opacity=1.0,
+                            layer="above",
+                        )
+                    )
 
             fig.update_layout(
-                title=dict(
-                    text="Filter Activations by Position",
-                    x=0.5,
-                    font=dict(size=16),
-                ),
+                height=max(850, 24 * len(filters_rev) + 250),
+                width=1400,
+                margin=dict(l=130, r=20, t=80, b=30),
                 xaxis=dict(
-                    title="Sequence Position",
-                    tickangle=0,
-                    tickfont=dict(size=8),
-                    dtick=5,  # Show every 5th tick
+                    side="top",
+                    tickmode="array",
+                    tickvals=x_pos,
+                    ticktext=x_bases,
+                    tickfont=dict(size=9),
+                    showgrid=False,
                 ),
                 yaxis=dict(
-                    title="Filter",
                     tickfont=dict(size=10),
+                    categoryorder="array",
+                    categoryarray=filters_rev,
                 ),
-                height=max(400, len(filtered_names) * 20 + 100),
-                margin=dict(l=100, r=50, t=50, b=100),
             )
 
             # Convert to HTML

webapp/app/shiny_apps/silhouette_app.py

@@ -0,0 +1,415 @@
+"""PyShiny app for Silhouette View visualization.
+
+Shows per-position inclusion/skipping strengths as a bar chart.
+Blue bars (upward) = Inclusion strength
+Red bars (downward) = Skipping strength
+"""
+
+from shiny import App, ui, render, reactive
+import matplotlib.pyplot as plt
+import matplotlib
+matplotlib.use('Agg')  # Use non-interactive backend
+import numpy as np
+import httpx
+
+
+def parse_total_position_strengths(nucleotide_activations_children, L):
+    """
+    Parse total position strengths from nucleotide activations.
+
+    Args:
+        nucleotide_activations_children: result["nucleotide_activations"]["children"]
+        L: sequence length
+
+    Returns:
+        (incl_total, skip_total) arrays of shape (L,)
+    """
+    def side_to_total(side_node):
+        total = np.zeros(L, dtype=float)
+        for pos_node in side_node.get("children", []):
+            pos = int(pos_node["name"].split("_")[1]) - 1
+            s = 0.0
+            for feat_node in pos_node.get("children", []):
+                for leaf in feat_node.get("children", []):
+                    s += float(leaf.get("strength", 0.0))
+            total[pos] = s
+        return total
+
+    incl_node = nucleotide_activations_children[0]
+    skip_node = nucleotide_activations_children[1]
+    return side_to_total(incl_node), side_to_total(skip_node)
+
+
+def list_all_filters_collapsed(children):
+    """Get list of all filter names, collapsing skip_struct_* into skip_struct_ALL."""
+    names = set()
+    has_skip_struct = False
+    for side_node in children:
+        for pos_node in side_node.get("children", []):
+            for feat_node in pos_node.get("children", []):
+                n = feat_node["name"]
+                if n.startswith("skip_struct_"):
+                    has_skip_struct = True
+                else:
+                    names.add(n)
+    out = sorted(names)
+    if has_skip_struct:
+        out.append("skip_struct_ALL")
+    return out
+
+
+def position_totals_for_selected_filters(nucleotide_activations_children, L, selected):
+    """Calculate position totals for only selected filters."""
+    selected = set(selected)
+    expand_skip_struct = "skip_struct_ALL" in selected
+
+    def side_to_total(side_node):
+        total = np.zeros(L, dtype=float)
+        for pos_node in side_node.get("children", []):
+            pos = int(pos_node["name"].split("_")[1]) - 1
+            s = 0.0
+            for feat_node in pos_node.get("children", []):
+                name = feat_node["name"]
+                is_skip_struct = name.startswith("skip_struct_")
+                take = (name in selected) or (expand_skip_struct and is_skip_struct)
+                if not take:
+                    continue
+                for leaf in feat_node.get("children", []):
+                    s += float(leaf.get("strength", 0.0))
+            total[pos] = s
+        return total
+
+    incl_node = nucleotide_activations_children[0]
+    skip_node = nucleotide_activations_children[1]
+    return side_to_total(incl_node), side_to_total(skip_node)
+
+
+def create_app(api_base_url: str = "http://localhost:8000"):
+    """Create the PyShiny silhouette app."""
+
+    app_ui = ui.page_fluid(
+        ui.head_content(
+            ui.tags.script("""
+                // Listen for postMessage from parent window
+                window.addEventListener('message', function(event) {
+                    if (event.data && event.data.type === 'setParams') {
+                        console.log('[Silhouette] Received params via postMessage:', event.data);
+                        // Wait for Shiny to be ready, then set input values
+                        if (typeof Shiny !== 'undefined' && Shiny.setInputValue) {
+                            Shiny.setInputValue('pm_job_id', event.data.job_id);
+                            Shiny.setInputValue('pm_batch_index', event.data.batch_index);
+                        } else {
+                            // Retry after Shiny loads
+                            document.addEventListener('shiny:connected', function() {
+                                Shiny.setInputValue('pm_job_id', event.data.job_id);
+                                Shiny.setInputValue('pm_batch_index', event.data.batch_index);
+                            });
+                        }
+                    }
+                });
+                // Request params from parent when Shiny is ready
+                document.addEventListener('shiny:connected', function() {
+                    console.log('[Silhouette] Shiny connected, requesting params from parent');
+                    window.parent.postMessage({type: 'ready', source: 'silhouette'}, '*');
+                });
+            """),
+            ui.tags.style("""
+                body {
+                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                    background: #f9fafb;
+                    margin: 0;
+                    padding: 16px;
+                }
+                .filter-panel {
+                    background: white;
+                    border-radius: 8px;
+                    padding: 16px;
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+                    max-height: 400px;
+                    overflow-y: auto;
+                }
+                .filter-section h4 {
+                    margin: 0 0 8px 0;
+                    font-size: 14px;
+                    color: #374151;
+                }
+                .filter-section {
+                    margin-bottom: 16px;
+                }
+                .plot-container {
+                    background: white;
+                    border-radius: 8px;
+                    padding: 16px;
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+                }
+                .error-message {
+                    color: #dc2626;
+                    padding: 20px;
+                    text-align: center;
+                }
+                .loading {
+                    padding: 40px;
+                    text-align: center;
+                    color: #6b7280;
+                }
+            """)
+        ),
+        ui.row(
+            ui.column(
+                3,
+                ui.div(
+                    {"class": "filter-panel"},
+                    ui.h4("Filter Selection"),
+                    ui.p("Select which filters contribute to the silhouette view:",
+                         style="font-size: 12px; color: #6b7280; margin-bottom: 12px;"),
+                    ui.div(
+                        {"class": "filter-section"},
+                        ui.h4("Inclusion Filters", style="color: #2563eb;"),
+                        ui.output_ui("inclusion_checkboxes"),
+                    ),
+                    ui.div(
+                        {"class": "filter-section"},
+                        ui.h4("Skipping Filters", style="color: #dc2626;"),
+                        ui.output_ui("skipping_checkboxes"),
+                    ),
+                    ui.div(
+                        {"class": "filter-section"},
+                        ui.h4("Structure Filters"),
+                        ui.output_ui("structure_checkboxes"),
+                    ),
+                    ui.hr(),
+                    ui.input_action_button("select_all", "Select All", class_="btn-sm"),
+                    ui.input_action_button("deselect_all", "Deselect All", class_="btn-sm"),
+                ),
+            ),
+            ui.column(
+                9,
+                ui.div(
+                    {"class": "plot-container"},
+                    ui.output_ui("silhouette_plot"),
+                ),
+            ),
+        ),
+    )
+
+    def server(input, output, session):
+        vis_data = reactive.Value(None)
+        error_message = reactive.Value(None)
+        params_received = reactive.Value(False)
+
+        @reactive.Effect
+        @reactive.event(input.pm_job_id)
+        async def on_params_received():
+            """Triggered when params are received via postMessage."""
+            job_id = input.pm_job_id()
+            batch_index = input.pm_batch_index()
+            print(f"[Silhouette] Received postMessage params: job_id={job_id}, batch_index={batch_index}", flush=True)
+
+            if not job_id:
+                error_message.set("Waiting for job parameters...")
+                return
+
+            params_received.set(True)
+
+            try:
+                url = f"{api_base_url}/api/vis_data/{job_id}"
+                if batch_index is not None:
+                    url += f"?batch_index={batch_index}"
+
+                async with httpx.AsyncClient(timeout=60.0) as client:
+                    response = await client.get(url)
+                    response.raise_for_status()
+                    data = response.json()
+                    vis_data.set(data)
+                    error_message.set(None)  # Clear any error
+            except httpx.HTTPError as e:
+                error_message.set(f"Error fetching data: {str(e)}")
+            except Exception as e:
+                error_message.set(f"Unexpected error: {str(e)}")
+
+        @output
+        @render.ui
+        def inclusion_checkboxes():
+            data = vis_data.get()
+            if not data:
+                return ui.p("Loading...")
+
+            children = data["nucleotide_activations"]["children"]
+            all_filters = list_all_filters_collapsed(children)
+            incl_filters = [f for f in all_filters if f.startswith("incl_") and not f.startswith("incl_struct")]
+
+            return ui.input_checkbox_group(
+                "incl_filters",
+                None,
+                choices={f: f for f in incl_filters},
+                selected=incl_filters,
+            )
+
+        @output
+        @render.ui
+        def skipping_checkboxes():
+            data = vis_data.get()
+            if not data:
+                return ui.p("Loading...")
+
+            children = data["nucleotide_activations"]["children"]
+            all_filters = list_all_filters_collapsed(children)
+            skip_filters = [f for f in all_filters if f.startswith("skip_") and not f.startswith("skip_struct")]
+
+            return ui.input_checkbox_group(
+                "skip_filters",
+                None,
+                choices={f: f for f in skip_filters},
+                selected=skip_filters,
+            )
+
+        @output
+        @render.ui
+        def structure_checkboxes():
+            data = vis_data.get()
+            if not data:
+                return ui.p("Loading...")
+
+            children = data["nucleotide_activations"]["children"]
+            all_filters = list_all_filters_collapsed(children)
+            struct_filters = [f for f in all_filters if "struct" in f]
+
+            return ui.input_checkbox_group(
+                "struct_filters",
+                None,
+                choices={f: f for f in struct_filters},
+                selected=struct_filters,
+            )
+
+        @reactive.Effect
+        @reactive.event(input.select_all)
+        def select_all_filters():
+            data = vis_data.get()
+            if data:
+                children = data["nucleotide_activations"]["children"]
+                all_filters = list_all_filters_collapsed(children)
+                incl_filters = [f for f in all_filters if f.startswith("incl_") and not f.startswith("incl_struct")]
+                skip_filters = [f for f in all_filters if f.startswith("skip_") and not f.startswith("skip_struct")]
+                struct_filters = [f for f in all_filters if "struct" in f]
+                ui.update_checkbox_group("incl_filters", selected=incl_filters)
+                ui.update_checkbox_group("skip_filters", selected=skip_filters)
+                ui.update_checkbox_group("struct_filters", selected=struct_filters)
+
+        @reactive.Effect
+        @reactive.event(input.deselect_all)
+        def deselect_all_filters():
+            ui.update_checkbox_group("incl_filters", selected=[])
+            ui.update_checkbox_group("skip_filters", selected=[])
+            ui.update_checkbox_group("struct_filters", selected=[])
+
+        @output
+        @render.ui
+        def silhouette_plot():
+            err = error_message.get()
+            if err:
+                return ui.div({"class": "error-message"}, err)
+
+            data = vis_data.get()
+            if not data:
+                return ui.div({"class": "loading"}, "Waiting for job parameters...")
+
+            # Get selected filters
+            incl_selected = list(input.incl_filters()) if input.incl_filters() else []
+            skip_selected = list(input.skip_filters()) if input.skip_filters() else []
+            struct_selected = list(input.struct_filters()) if input.struct_filters() else []
+            all_selected = incl_selected + skip_selected + struct_selected
+
+            if not all_selected:
+                return ui.div(
+                    {"class": "loading"},
+                    "Select at least one filter to display the silhouette view."
+                )
+
+            # Extract data
+            full_seq = data["sequence"]
+            exon = data["exon"]
+            struct_full = data["structs"]
+            L = len(full_seq)
+            children = data["nucleotide_activations"]["children"]
+
+            # Calculate full range from all filters for fixed y-axis
+            incl_total_all, skip_total_all = parse_total_position_strengths(children, L)
+            start = full_seq.find(exon.replace("U", "T"))
+            if start == -1:
+                start = full_seq.upper().find(exon.upper().replace("U", "T"))
+            if start == -1:
+                start = 10  # Default flanking length
+            end = start + len(exon)
+
+            # Get full range for y-axis
+            incl_exon_all = incl_total_all[start:end]
+            skip_exon_all = skip_total_all[start:end]
+            y_max_all = max(
+                np.max(incl_exon_all) if len(incl_exon_all) > 0 else 0,
+                np.max(skip_exon_all) if len(skip_exon_all) > 0 else 0
+            )
+            y_max_all = max(y_max_all, 0.1)
+            y_min_all = -y_max_all
+
+            # Calculate values for selected filters
+            incl_total, skip_total = position_totals_for_selected_filters(children, L, all_selected)
+
+            # Create plot
+            x = np.arange(L)
+            bases = list(full_seq)
+
+            fig, ax = plt.subplots(figsize=(28, 8))
+
+            ax.bar(x, incl_total, width=1, color="#bed2fd", label="Inclusion")
+            ax.bar(x, -skip_total, width=1, color="#f0a5a5", label="Skipping")
+
+            # Shade exon region
+            ax.axvspan(start - 0.5, end - 0.5, color="#d0d0d0", alpha=0.15)
+            ax.axhline(0, linewidth=1, color='black')
+
+            ax.set_xticks(x)
+            ax.set_xticklabels(bases, fontsize=7)
+
+            # Add secondary structure on second x-axis
+            ax2 = ax.twiny()
+            ax2.set_xlim(ax.get_xlim())
+            ax2.xaxis.set_ticks_position("bottom")
+            ax2.xaxis.set_label_position("bottom")
+            ax2.spines["bottom"].set_position(("outward", 18))
+            ax2.spines["top"].set_visible(False)
+            ax2.spines["bottom"].set_visible(False)
+            ax2.set_xticks(x)
+            ax2.set_xticklabels(list(struct_full), fontsize=7)
+            ax2.tick_params(axis="x", length=0, pad=2)
+
+            # Fixed symmetric limits
+            ax.set_ylim(y_min_all, y_max_all)
+
+            # Integer tick marks
+            max_tick = int(np.ceil(max(abs(y_min_all), abs(y_max_all))))
+            ticks = np.arange(-max_tick, max_tick + 1, 1)
+            ax.set_yticks(ticks)
+            ax.set_yticklabels([str(abs(t)) for t in ticks])
+
+            ax.set_title("Silhouette View - Position-wise Filter Contributions")
+            ax.set_ylabel("Strength")
+            ax.legend(loc='upper right')
+
+            plt.tight_layout()
+
+            # Convert to HTML
+            import io
+            import base64
+            buf = io.BytesIO()
+            fig.savefig(buf, format='png', dpi=100, bbox_inches='tight')
+            buf.seek(0)
+            img_base64 = base64.b64encode(buf.read()).decode('utf-8')
+            plt.close(fig)
+
+            return ui.HTML(f'<img src="data:image/png;base64,{img_base64}" style="max-width: 100%; height: auto;" />')
+
+    return App(app_ui, server)
+
+
+# Create the app instance
+app = create_app()

webapp/data/datasets_data.json

@@ -0,0 +1,56 @@
+{
+  "ES7": {
+    "basal_shift": 0,
+    "pre_flanking_sequence": "CATCCAGGTT",
+    "post_flanking_sequence": "CAGGTCTGAC",
+    "number_of_datapoints": 47962,
+    "exon_length": 70,
+    "sequence_length": 90,
+    "r_squared": 0.9069368881066787
+  },
+  "WT1_exon_5": {
+    "basal_shift": -5.8,
+    "pre_flanking_sequence": "TTTCTAG",
+    "post_flanking_sequence": "GTGAGTG",
+    "number_of_datapoints": 5560,
+    "exon_length": 51,
+    "sequence_length": 65,
+    "r_squared": 0.7756628909179489
+  },
+  "FAS_exon_6": {
+    "basal_shift": 3.6,
+    "pre_flanking_sequence": "",
+    "post_flanking_sequence": "",
+    "number_of_datapoints": 794,
+    "exon_length": 63,
+    "sequence_length": 63,
+    "r_squared": 0.9020387508616958
+  },
+  "SMN2_exon_7": {
+    "basal_shift": -0.2,
+    "pre_flanking_sequence": "AACTTCCTTTATTTTCCTTACAG",
+    "post_flanking_sequence": "GTAAGTCTGCC",
+    "number_of_datapoints": 56,
+    "exon_length": 54,
+    "sequence_length": 88,
+    "r_squared": 0.6485961639623267
+  },
+  "BRCA2_exon_7": {
+    "basal_shift": 3.8,
+    "pre_flanking_sequence": "TTTCTTTCCTCCCAG",
+    "post_flanking_sequence": "GTAATAATAGCAAAT",
+    "number_of_datapoints": 31,
+    "exon_length": 115,
+    "sequence_length": 145,
+    "r_squared": 0.6915058670445455
+  },
+  "CFTR_exon_13": {
+    "basal_shift": 4.8,
+    "pre_flanking_sequence": "CCATTTTCTTTTTAG",
+    "post_flanking_sequence": "GTATGTTCTTTGAAT",
+    "number_of_datapoints": 22,
+    "exon_length": 87,
+    "sequence_length": 117,
+    "r_squared": 0.8591799198918351
+  }
+}

webapp/data/model_data_18.json

@@ -0,0 +1,409 @@
+{
+  "link_midpoint": -21.80809438066695,
+  "num_seq_filters": 20,
+  "num_struct_filters": 8,
+  "seq_filter_width": 6,
+  "struct_filter_width": 30,
+  "incl_seq_groups": {
+    "1": [
+      6,
+      9,
+      11,
+      14
+    ],
+    "3": [
+      4,
+      5,
+      8,
+      16,
+      17
+    ],
+    "5": [
+      3,
+      10,
+      15
+    ],
+    "2": [
+      0,
+      19
+    ],
+    "4": [
+      18
+    ],
+    "6": [
+      1
+    ],
+    "7": [
+      2,
+      7
+    ],
+    "8": [
+      12
+    ],
+    "9": [
+      13
+    ]
+  },
+  "skip_seq_groups": {
+    "6": [
+      1,
+      5
+    ],
+    "4": [
+      3,
+      10,
+      14,
+      15,
+      18
+    ],
+    "3": [
+      2,
+      4,
+      8,
+      13
+    ],
+    "5": [
+      6,
+      7
+    ],
+    "1": [
+      0,
+      17
+    ],
+    "2": [
+      11,
+      16
+    ],
+    "7": [
+      12
+    ],
+    "8": [
+      9
+    ],
+    "9": [
+      19
+    ]
+  },
+  "incl_struct_groups": {
+    "1": [
+      0,
+      1,
+      2,
+      3,
+      4,
+      5,
+      6,
+      7
+    ]
+  },
+  "skip_struct_groups": {
+    "1": [
+      1
+    ],
+    "2": [
+      0,
+      2,
+      3
+    ],
+    "3": [
+      5,
+      6,
+      7
+    ],
+    "4": [
+      4
+    ]
+  },
+  "seq_logo_boundaries": {
+    "incl": [
+      {
+        "left": 2.0,
+        "right": 3.0,
+        "length": 2.0
+      },
+      {
+        "left": 0.0,
+        "right": 4.0,
+        "length": 5.0
+      },
+      {
+        "left": 0.0,
+        "right": 2.0,
+        "length": 3.0
+      },
+      {
+        "left": 2.0,
+        "right": 5.0,
+        "length": 4.0
+      },
+      {
+        "left": 2.0,
+        "right": 5.0,
+        "length": 4.0
+      },
+      {
+        "left": 1.0,
+        "right": 2.0,
+        "length": 2.0
+      },
+      {
+        "left": 0.0,
+        "right": 3.0,
+        "length": 4.0
+      },
+      {
+        "left": 1.0,
+        "right": 3.0,
+        "length": 3.0
+      },
+      {
+        "left": 0.0,
+        "right": 1.0,
+        "length": 2.0
+      },
+      {
+        "left": 1.0,
+        "right": 5.0,
+        "length": 5.0
+      },
+      {
+        "left": 2.0,
+        "right": 4.0,
+        "length": 3.0
+      },
+      {
+        "left": 1.0,
+        "right": 4.0,
+        "length": 4.0
+      },
+      {
+        "left": 0.0,
+        "right": 3.0,
+        "length": 4.0
+      },
+      {
+        "left": 2.0,
+        "right": 4.0,
+        "length": 3.0
+      },
+      {
+        "left": 0.0,
+        "right": 3.0,
+        "length": 4.0
+      },
+      {
+        "left": 2.0,
+        "right": 4.0,
+        "length": 3.0
+      },
+      {
+        "left": 0.0,
+        "right": 2.0,
+        "length": 3.0
+      },
+      {
+        "left": 0.0,
+        "right": 3.0,
+        "length": 4.0
+      },
+      {
+        "left": 1.0,
+        "right": 4.0,
+        "length": 4.0
+      },
+      {
+        "left": 0.0,
+        "right": 5.0,
+        "length": 6.0
+      }
+    ],
+    "skip": [
+      {
+        "left": 0.0,
+        "right": 3.0,
+        "length": 4.0
+      },
+      {
+        "left": 1.0,
+        "right": 3.0,
+        "length": 3.0
+      },
+      {
+        "left": 2.0,
+        "right": 4.0,
+        "length": 3.0
+      },
+      {
+        "left": 3.0,
+        "right": 4.0,
+        "length": 2.0
+      },
+      {
+        "left": 3.0,
+        "right": 4.0,
+        "length": 2.0
+      },
+      {
+        "left": 0.0,
+        "right": 2.0,
+        "length": 3.0
+      },
+      {
+        "left": 0.0,
+        "right": 5.0,
+        "length": 6.0
+      },
+      {
+        "left": 1.0,
+        "right": 3.0,
+        "length": 3.0
+      },
+      {
+        "left": 0.0,
+        "right": 5.0,
+        "length": 6.0
+      },
+      {
+        "left": 0.0,
+        "right": 3.0,
+        "length": 4.0
+      },
+      {
+        "left": 0.0,
+        "right": 2.0,
+        "length": 3.0
+      },
+      {
+        "left": 0.0,
+        "right": 5.0,
+        "length": 6.0
+      },
+      {
+        "left": 0.0,
+        "right": 5.0,
+        "length": 6.0
+      },
+      {
+        "left": 1.0,
+        "right": 5.0,
+        "length": 5.0
+      },
+      {
+        "left": 1.0,
+        "right": 3.0,
+        "length": 3.0
+      },
+      {
+        "left": 2.0,
+        "right": 4.0,
+        "length": 3.0
+      },
+      {
+        "left": 0.0,
+        "right": 5.0,
+        "length": 6.0
+      },
+      {
+        "left": 1.0,
+        "right": 5.0,
+        "length": 5.0
+      },
+      {
+        "left": 0.0,
+        "right": 2.0,
+        "length": 3.0
+      },
+      {
+        "left": 1.0,
+        "right": 4.0,
+        "length": 4.0
+      }
+    ]
+  },
+  "struct_logo_boundaries": {
+    "incl": [
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      }
+    ],
+    "skip": [
+      {
+        "left": 3.0,
+        "right": 17.0,
+        "length": 15.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      },
+      {
+        "left": 5.0,
+        "right": 16.0,
+        "length": 12.0
+      },
+      {
+        "left": 5.0,
+        "right": 25.0,
+        "length": 21.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      },
+      {
+        "left": 0.0,
+        "right": 29.0,
+        "length": 30.0
+      }
+    ]
+  }
+}

webapp/static/js/result.js

@@ -93,7 +93,19 @@ function displayResults(data) {
     sequenceEl.textContent = data.sequence || 'N/A';
 
     // Force plot
-    if (data.force_plot && data.force_plot.length > 0) {
+    if (data.force_plot_data && data.force_plot_data.activations) {
+        const activations = data.force_plot_data.activations;
+        // Combine qc_incl and qc_skip to get position-wise contribution
+        // Positive = promotes inclusion (green), Negative = promotes skipping (red)
+        if (activations.qc_incl && activations.qc_skip) {
+            const forceData = activations.qc_incl.map((incl, i) => {
+                const skip = activations.qc_skip[i] || 0;
+                return incl - skip;
+            });
+            createForcePlot(forceData);
+        }
+    } else if (data.force_plot && data.force_plot.length > 0) {
+        // Fallback for legacy format
         createForcePlot(data.force_plot);
     }
 }

webapp/templates/result.html

@@ -3,7 +3,7 @@
 {% block title %}Prediction Result - {{ settings.app_name }}{% endblock %}
 
 {% block content %}
-<div class="max-w-5xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+<div class="max-w-[1920px] mx-auto py-8 px-4 sm:px-6 lg:px-8">
     <!-- Header -->
     <div class="mb-6">
         <nav class="flex" aria-label="Breadcrumb">
@@ -70,34 +70,71 @@
             <p id="sequence" class="font-mono text-sm break-all text-gray-900 bg-gray-50 p-3 rounded"></p>
         </div>
 
-        <!-- Force Plot -->
-        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-            <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide mb-4">
-                Position-wise Contribution to PSI
-                <span class="ml-2 text-gray-400 font-normal normal-case">
-                    (green = promotes inclusion, red = promotes skipping)
-                </span>
-            </h3>
-            <div id="force-plot" class="w-full" style="height: 400px;"></div>
+        <!-- Silhouette View -->
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+            <div class="p-4 border-b border-gray-200 flex items-center justify-between cursor-pointer" onclick="toggleSection('silhouette')">
+                <div>
+                    <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">
+                        Silhouette View
+                        <span class="ml-2 text-gray-400 font-normal normal-case">
+                            (blue = inclusion strength, red = skipping strength per position)
+                        </span>
+                    </h3>
+                </div>
+                <button type="button" class="text-gray-400 hover:text-gray-600" id="silhouette-toggle">
+                    <svg id="silhouette-chevron-down" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                    <svg id="silhouette-chevron-up" class="h-5 w-5 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+                    </svg>
+                </button>
+            </div>
+            <div id="silhouette-content" class="p-6">
+                <div id="silhouette-container" class="w-full" style="min-height: 650px;">
+                    <iframe
+                        id="silhouette-iframe"
+                        src="/shiny/silhouette/?job_id={{ job_id }}{% if batch_index is defined and batch_index is not none %}&batch_index={{ batch_index }}{% endif %}"
+                        class="w-full border-0"
+                        style="height: 650px; min-height: 600px;"
+                        loading="lazy"
+                        title="Silhouette View"
+                    ></iframe>
+                </div>
+            </div>
         </div>
 
         <!-- Filter Activation Heatmap -->
-        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
-            <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide mb-4">
-                Filter Activation Heatmap
-                <span class="ml-2 text-gray-400 font-normal normal-case">
-                    (shows where each neural network filter activates across the sequence)
-                </span>
-            </h3>
-            <div id="heatmap-container" class="w-full" style="min-height: 500px;">
-                <iframe
-                    id="heatmap-iframe"
-                    src="/shiny/heatmap/?job_id={{ job_id }}"
-                    class="w-full border-0"
-                    style="height: 600px; min-height: 500px;"
-                    loading="lazy"
-                    title="Filter Activation Heatmap"
-                ></iframe>
+        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
+            <div class="p-4 border-b border-gray-200 flex items-center justify-between cursor-pointer" onclick="toggleSection('heatmap')">
+                <div>
+                    <h3 class="text-sm font-medium text-gray-500 uppercase tracking-wide">
+                        Filter Activation Heatmap
+                        <span class="ml-2 text-gray-400 font-normal normal-case">
+                            (blue = inclusion, red = skipping, with filter icons)
+                        </span>
+                    </h3>
+                </div>
+                <button type="button" class="text-gray-400 hover:text-gray-600" id="heatmap-toggle">
+                    <svg id="heatmap-chevron-down" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                    </svg>
+                    <svg id="heatmap-chevron-up" class="h-5 w-5 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+                    </svg>
+                </button>
+            </div>
+            <div id="heatmap-content" class="p-6">
+                <div id="heatmap-container" class="w-full" style="min-height: 900px;">
+                    <iframe
+                        id="heatmap-iframe"
+                        src="/shiny/heatmap/?job_id={{ job_id }}{% if batch_index is defined and batch_index is not none %}&batch_index={{ batch_index }}{% endif %}"
+                        class="w-full border-0"
+                        style="height: 900px; min-height: 850px;"
+                        loading="lazy"
+                        title="Filter Activation Heatmap"
+                    ></iframe>
+                </div>
             </div>
         </div>
 
@@ -144,6 +181,69 @@
 <script>
     const jobId = "{{ job_id }}";
     const batchIndex = {{ batch_index if batch_index is defined and batch_index is not none else 'null' }};
+
+    // Toggle collapsible sections
+    function toggleSection(section) {
+        const content = document.getElementById(section + '-content');
+        const chevronDown = document.getElementById(section + '-chevron-down');
+        const chevronUp = document.getElementById(section + '-chevron-up');
+
+        if (content.classList.contains('hidden')) {
+            content.classList.remove('hidden');
+            chevronDown.classList.remove('hidden');
+            chevronUp.classList.add('hidden');
+        } else {
+            content.classList.add('hidden');
+            chevronDown.classList.add('hidden');
+            chevronUp.classList.remove('hidden');
+        }
+    }
+
+    // Send params to PyShiny iframes via postMessage
+    function sendParamsToIframe(iframe) {
+        if (iframe && iframe.contentWindow) {
+            console.log('[Result] Sending params to iframe:', jobId, batchIndex);
+            iframe.contentWindow.postMessage({
+                type: 'setParams',
+                job_id: jobId,
+                batch_index: batchIndex
+            }, '*');
+        }
+    }
+
+    // Listen for 'ready' message from iframes
+    window.addEventListener('message', function(event) {
+        if (event.data && event.data.type === 'ready') {
+            console.log('[Result] Received ready from:', event.data.source);
+            // Send params back to the iframe that signaled ready
+            if (event.source) {
+                event.source.postMessage({
+                    type: 'setParams',
+                    job_id: jobId,
+                    batch_index: batchIndex
+                }, '*');
+            }
+        }
+    });
+
+    // Also send on iframe load (backup)
+    document.addEventListener('DOMContentLoaded', function() {
+        const silhouetteIframe = document.getElementById('silhouette-iframe');
+        const heatmapIframe = document.getElementById('heatmap-iframe');
+
+        if (silhouetteIframe) {
+            silhouetteIframe.onload = function() {
+                // Small delay to ensure Shiny is ready
+                setTimeout(function() { sendParamsToIframe(silhouetteIframe); }, 500);
+            };
+        }
+        if (heatmapIframe) {
+            heatmapIframe.onload = function() {
+                // Small delay to ensure Shiny is ready
+                setTimeout(function() { sendParamsToIframe(heatmapIframe); }, 500);
+            };
+        }
+    });
 </script>
 <script src="/static/js/result.js"></script>
 {% endblock %}