AI-in-the-loop

.env.example

@@ -1 +1,4 @@
 DANGEROUSLY_DISABLE_HOST_CHECK=true
+HF_API_TOKEN=your-hf-token-here
+AI_MODEL=Qwen/Qwen2.5-72B-Instruct
+USE_RAG=false

.gitignore

@@ -35,3 +35,7 @@ yarn-error.log*
 pnpm-debug.log*
 
 backend/package-lock.json
+
+# Cached embeddings
+backend/.description_embeddings.npy
+.env.example

Dockerfile

@@ -20,7 +20,8 @@ FROM python:3.11-slim
 WORKDIR /app
 
 COPY backend/requirements.txt backend/requirements.txt
-RUN pip install --no-cache-dir -r backend/requirements.txt
+RUN pip install --no-cache-dir torch --index-url https://download.pytorch.org/whl/cpu && \
+    pip install --no-cache-dir -r backend/requirements.txt
 
 COPY --from=builder /build/frontend/build frontend/build
 COPY backend/ backend/

backend/app.py

@@ -1,18 +1,43 @@
 #!/usr/bin/env python3
-from flask import Flask, jsonify, request
+import os, signal, sys
+
+# Load .env file from repo root
+from dotenv import load_dotenv
+load_dotenv(os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), '.env'))
+
+os.environ['OMP_NUM_THREADS'] = '1'
+os.environ['TOKENIZERS_PARALLELISM'] = 'false'
+os.environ['KMP_DUPLICATE_LIB_OK'] = 'TRUE'
+os.environ['HF_HUB_DISABLE_TELEMETRY'] = '1'
+
+# Catch crashes
+def crash_handler(signum, frame):
+    print(f"\n!!! PROCESS KILLED BY SIGNAL {signum} !!!", file=sys.stderr, flush=True)
+    sys.exit(1)
+signal.signal(signal.SIGABRT, crash_handler)
+
+import json
+from flask import Flask, jsonify, request, send_from_directory
 from flask_cors import CORS
 import pandas as pd
 import numpy as np
 from sklearn.feature_extraction.text import TfidfVectorizer
 from sklearn.cluster import KMeans
 import umap
-
-import os
+from sentence_transformers import SentenceTransformer
+import csv
+import io
 
 app = Flask(__name__, static_folder='../frontend/build', static_url_path='')
 CORS(app)
+
+# Load sentence-transformer model once at startup
+print("Loading sentence-transformer model...")
+st_model = SentenceTransformer('all-MiniLM-L6-v2')
+print("Model loaded.")
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 CSV_FILE = os.path.join(BASE_DIR, 'datasets', 'csv-gp-combined.csv')
+EMBEDDINGS_CACHE = os.path.join(BASE_DIR, 'backend', '.description_embeddings.npy')
 
 DEFAULT_WEIGHTS = {
     'Planning Method': 10,
@@ -27,17 +52,227 @@ DEFAULT_WEIGHTS = {
     'Metric(s) Used ': 5,
     'Camera Position(s)': 4,
     'Language': 4,
+    'Description': 7,
 }
 
+DERIVED_COLUMNS = [
+    'Grasp Dimensionality',
+    'Learning Paradigm',
+    'Sensor Complexity',
+    'Scene Difficulty',
+    'Gripper Type',
+    'ML Framework',
+    'Method Era',
+]
+
 UMAP_N_NEIGHBORS = 15
 UMAP_MIN_DIST = 0.1
 UMAP_METRIC = 'cosine'
 UMAP_RANDOM_STATE = 42
 
+# Domain context for AI insight prompts
+DOMAIN_CONTEXT = """ROBOTICS DOMAIN CONTEXT:
+Grasp planning is the problem of computing how a robot should position its gripper to pick up objects.
+
+Key distinctions that matter:
+- Planning Method: "Sampling" generates many candidate grasps and scores them; "Direct regression" predicts a grasp pose end-to-end from sensor data; "Analytical" uses geometric/force analysis; "RL" learns through trial-and-error; "Generative" uses models like VAEs/diffusion to generate diverse grasps.
+- Object Configuration: "Singulated" = one isolated object (easiest); "Structured" = orderly arrangement; "Packed" = objects touching but organized; "Cluttered" = random pile (hardest) — requires reasoning about occlusion and inter-object contact. "Piled" = heaped objects.
+- End-effector: "Two-finger" (parallel-jaw) grippers are simple but limited; "Multi-finger" and "Three-finger" (dexterous) grippers can perform complex in-hand manipulation but are much harder to plan for; "Suction" grippers work well on flat surfaces.
+- Input Data: "Point cloud" and "Depth image" provide 3D geometry; "RGB" adds appearance; "RGBD" combines both; "TSDF" is a volumetric 3D representation. More modalities = more information but more complexity.
+- Output Pose: "6-DoF" (x,y,z + roll,pitch,yaw) is the standard full grasp pose; "7-DoF" adds gripper width or approach angle; "2D grasp rectangle" is a simpler top-down formulation.
+- Training Data: "Sim" = trained in simulation (scalable but sim-to-real gap); "Real" = trained on real robot data (expensive but accurate); methods using both attempt to bridge the gap.
+- Backbone: The neural network architecture — PointNet/PointNet++ process point clouds directly; ResNet/VGG process images; transformers (ViT) handle both.
+- Camera Position: "Overhead" = top-down view; "Eye-in-hand" = camera on the robot gripper; "Multi-view" = multiple cameras for better 3D reconstruction.
+
+Why clustering matters: Methods that cluster together share fundamental design choices. Separation between clusters often reflects genuinely different philosophies (e.g., learning-based vs. analytical, or 2D vs. 3D grasp representations)."""
+
+# AI Copilot configuration
+# Supports: "ollama" (local, no key needed) or "huggingface" (needs HF_API_TOKEN)
+AI_PROVIDER = os.environ.get('AI_PROVIDER', 'ollama')
+OLLAMA_BASE_URL = os.environ.get('OLLAMA_BASE_URL', 'http://localhost:11434')
+OLLAMA_MODEL = os.environ.get('OLLAMA_MODEL', 'llama3.1:8b')
+HF_API_TOKEN = os.environ.get('HF_API_TOKEN', os.environ.get('HF_TOKEN', ''))
+HF_MODEL = os.environ.get('AI_MODEL', 'Qwen/Qwen2.5-72B-Instruct')
+USE_RAG = os.environ.get('USE_RAG', 'false').lower() == 'true'
+
+
+def llm_chat(messages, max_tokens=2048, temperature=0.3):
+    """Send a chat completion request to the configured LLM provider."""
+    if AI_PROVIDER == 'ollama':
+        import urllib.request
+        payload = json.dumps({
+            'model': OLLAMA_MODEL,
+            'messages': messages,
+            'stream': False,
+            'options': {'temperature': temperature, 'num_predict': max_tokens}
+        }).encode('utf-8')
+        req = urllib.request.Request(
+            f'{OLLAMA_BASE_URL}/api/chat',
+            data=payload,
+            headers={'Content-Type': 'application/json'}
+        )
+        with urllib.request.urlopen(req, timeout=120) as resp:
+            result = json.loads(resp.read().decode('utf-8'))
+        return result['message']['content'].strip()
+    else:
+        # HuggingFace Inference API
+        if not HF_API_TOKEN:
+            raise ValueError('HF_API_TOKEN not configured. Set it as an environment variable.')
+        from huggingface_hub import InferenceClient
+        client = InferenceClient(token=HF_API_TOKEN)
+        completion = client.chat_completion(
+            model=HF_MODEL,
+            messages=messages,
+            max_tokens=max_tokens,
+            temperature=temperature,
+        )
+        return completion.choices[0].message.content.strip()
+
+SHORT_COLUMN_NAMES = {
+    'Planning Method': 'Plan',
+    'Training Data': 'Train',
+    'End-effector Hardware': 'Effector',
+    'Object Configuration': 'ObjConfig',
+    'Input Data': 'Input',
+    'Output Pose': 'Output',
+    'Corresponding Dataset (see repository linked above)': 'Dataset',
+    'Simulator (see repository linked above)': 'Sim',
+    'Backbone': 'Backbone',
+    'Metric(s) Used ': 'Metrics',
+    'Camera Position(s)': 'Camera',
+    'Language': 'Lang',
+    'Description': 'Desc',
+}
+
+def smart_split(value):
+    """Split a comma-separated string, respecting double-quoted fields.
+    E.g. 'Dexterous grasp, "6-DoF grasp pose (x, y, z, r, p, y)"'
+    -> ['Dexterous grasp', '6-DoF grasp pose (x, y, z, r, p, y)']
+    """
+    if not value or (isinstance(value, float) and np.isnan(value)):
+        return []
+    s = str(value).strip()
+    if not s:
+        return []
+    reader = csv.reader(io.StringIO(s), skipinitialspace=True)
+    parts = next(reader)
+    return [p.strip() for p in parts if p.strip()]
+
+def normalize_multi_value(val):
+    """Sort multi-value cells alphabetically so order doesn't affect TF-IDF."""
+    parts = smart_split(val)
+    return ', '.join(sorted(parts)) if parts else ''
+
+def compute_derived_features(df):
+    """Compute derived feature columns from existing data."""
+    n = len(df)
+    result = {col: [''] * n for col in DERIVED_COLUMNS}
+
+    for i in range(n):
+        # --- Grasp Dimensionality (from Output Pose) ---
+        output = str(df.at[i, 'Output Pose']) if pd.notna(df.at[i, 'Output Pose']) else ''
+        if '6-DoF' in output:
+            result['Grasp Dimensionality'][i] = '6-DoF'
+        elif '7-DoF' in output:
+            result['Grasp Dimensionality'][i] = '7-DoF'
+        elif '2D grasp' in output:
+            result['Grasp Dimensionality'][i] = '2D'
+        elif 'Grasp policy' in output:
+            result['Grasp Dimensionality'][i] = 'Policy'
+        elif 'Grasp success' in output:
+            result['Grasp Dimensionality'][i] = 'Evaluation'
+        else:
+            result['Grasp Dimensionality'][i] = 'Other'
+
+        # --- Learning Paradigm (from Planning Method + Training Data) ---
+        method = str(df.at[i, 'Planning Method']) if pd.notna(df.at[i, 'Planning Method']) else ''
+        training = str(df.at[i, 'Training Data']) if pd.notna(df.at[i, 'Training Data']) else ''
+        method_parts = [p.strip() for p in method.split(',')]
+
+        if training == 'Training-less':
+            result['Learning Paradigm'][i] = 'Classical'
+        elif all(p in ('Analytical', 'Sampling', 'Optimization') for p in method_parts):
+            result['Learning Paradigm'][i] = 'Classical'
+        elif any('Reinforcement' in p for p in method_parts):
+            result['Learning Paradigm'][i] = 'RL-based'
+        elif any(p in ('Direct regression', 'Generative') for p in method_parts) and len(method_parts) == 1:
+            result['Learning Paradigm'][i] = 'Learning-based'
+        elif 'Direct regression' in method_parts or 'Generative' in method_parts:
+            result['Learning Paradigm'][i] = 'Learning-based'
+        else:
+            result['Learning Paradigm'][i] = 'Hybrid'
+
+        # --- Sensor Complexity (from Input Data) ---
+        input_data = str(df.at[i, 'Input Data']) if pd.notna(df.at[i, 'Input Data']) else ''
+        input_parts = smart_split(input_data)
+        input_lower = input_data.lower()
+
+        if 'natural language' in input_lower or len(input_parts) > 1:
+            result['Sensor Complexity'][i] = 'Multimodal'
+        elif any(k in input_lower for k in ('point cloud', 'tsdf', '3d', 'mesh', 'voxel')):
+            result['Sensor Complexity'][i] = '3D'
+        elif 'rgbd' in input_lower:
+            result['Sensor Complexity'][i] = '2.5D'
+        elif any(k in input_lower for k in ('rgb', 'depth')):
+            result['Sensor Complexity'][i] = '2D'
+        else:
+            result['Sensor Complexity'][i] = 'Other'
+
+        # --- Scene Difficulty (from Object Configuration) ---
+        obj_config = str(df.at[i, 'Object Configuration']) if pd.notna(df.at[i, 'Object Configuration']) else ''
+        difficulty_map = {'Singulated': 1, 'Structured': 2, 'Cluttered': 3, 'Packed': 4, 'Piled': 5, 'Stacked': 5}
+        label_map = {1: 'Singulated', 2: 'Structured', 3: 'Cluttered', 4: 'Packed', 5: 'Piled'}
+        parts = smart_split(obj_config)
+        max_diff = 0
+        for p in parts:
+            max_diff = max(max_diff, difficulty_map.get(p, 0))
+        result['Scene Difficulty'][i] = label_map.get(max_diff, 'Unknown')
+
+        # --- Gripper Type (from End-effector Hardware) ---
+        hardware = str(df.at[i, 'End-effector Hardware']) if pd.notna(df.at[i, 'End-effector Hardware']) else ''
+        hw_parts = smart_split(hardware)
+        if len(hw_parts) > 1:
+            result['Gripper Type'][i] = 'Multi-gripper'
+        elif any(k in hardware for k in ('Multi-finger', 'Three-finger')):
+            result['Gripper Type'][i] = 'Dexterous'
+        elif 'Suction' in hardware:
+            result['Gripper Type'][i] = 'Suction'
+        elif 'Two-finger' in hardware:
+            result['Gripper Type'][i] = 'Parallel-jaw'
+        else:
+            result['Gripper Type'][i] = 'Unknown'
+
+        # --- ML Framework (from Language) ---
+        lang = str(df.at[i, 'Language']) if pd.notna(df.at[i, 'Language']) else ''
+        if 'PyTorch' in lang:
+            result['ML Framework'][i] = 'PyTorch'
+        elif 'TensorFlow' in lang:
+            result['ML Framework'][i] = 'TensorFlow'
+        elif 'Keras' in lang:
+            result['ML Framework'][i] = 'Keras'
+        else:
+            result['ML Framework'][i] = 'None'
+
+        # --- Method Era (from Year) ---
+        year_val = df.at[i, 'Year (Initial Release)']
+        if pd.notna(year_val):
+            year = int(year_val)
+            if year <= 2018:
+                result['Method Era'][i] = 'Pioneer (2016-2018)'
+            elif year <= 2021:
+                result['Method Era'][i] = 'Growth (2019-2021)'
+            else:
+                result['Method Era'][i] = 'Modern (2022+)'
+        else:
+            result['Method Era'][i] = 'Unknown'
+
+    return result
+
 def compute_weighted_embeddings(df, weights):
-    """Compute TF-IDF embeddings for each column and apply weights."""
+    """Compute TF-IDF embeddings for categorical columns and sentence-transformer
+    embeddings for Description, then combine with weights."""
     feature_matrices = []
-    
+
     for col, weight in weights.items():
         if weight == 0:
             print(f"Skipping '{col}' (weight=0)")
@@ -45,98 +280,206 @@ def compute_weighted_embeddings(df, weights):
         if col not in df.columns:
             print(f"Warning: Column '{col}' not found")
             continue
-        
-        texts = df[col].fillna('').astype(str)
+
+        # Use sentence-transformer for Description column
+        # PCA to 50 dims to match TF-IDF scale and prevent dominating the feature matrix
+        if col == 'Description':
+            n_rows = len(df)
+            embeddings = None
+            # Use cache only when processing the full (unfiltered) dataset
+            if n_rows == 56 and os.path.exists(EMBEDDINGS_CACHE):
+                try:
+                    cached = np.load(EMBEDDINGS_CACHE)
+                    if cached.shape[0] == n_rows:
+                        embeddings = cached
+                        print(f"Loaded cached description embeddings: {embeddings.shape}")
+                    else:
+                        print(f"Cache shape mismatch ({cached.shape[0]} vs {n_rows}), recomputing...")
+                except Exception as e:
+                    print(f"Cache load failed: {e}, recomputing...")
+            if embeddings is None:
+                texts = df[col].fillna('').astype(str).tolist()
+                full_embeddings = st_model.encode(texts, show_progress_bar=False)
+                from sklearn.decomposition import PCA
+                n_components = min(50, n_rows - 1) if n_rows > 1 else 1
+                pca = PCA(n_components=n_components, random_state=42)
+                embeddings = pca.fit_transform(full_embeddings)
+                # Only cache for full dataset
+                if n_rows == 56:
+                    np.save(EMBEDDINGS_CACHE, embeddings)
+                print(f"Computed description embeddings: {full_embeddings.shape} -> {embeddings.shape}")
+            weighted_embeddings = embeddings * np.sqrt(weight)
+            feature_matrices.append(weighted_embeddings)
+            print(f"Processed '{col}' (sentence-transformer+PCA): {embeddings.shape}, weight={weight}")
+            continue
+
+        texts = df[col].fillna('').apply(normalize_multi_value)
         vectorizer = TfidfVectorizer(max_features=50, ngram_range=(1, 2))
-        
+
         try:
             embeddings = vectorizer.fit_transform(texts).toarray()
             weighted_embeddings = embeddings * np.sqrt(weight)
             feature_matrices.append(weighted_embeddings)
-            print(f"Processed '{col}': {embeddings.shape}, weight={weight}")
+            print(f"Processed '{col}' (TF-IDF): {embeddings.shape}, weight={weight}")
         except Exception as e:
             print(f"Skipping '{col}': {e}")
-    
+
     if not feature_matrices:
         raise ValueError("No valid columns to process. At least one column must have weight > 0")
-    
+
     combined = np.hstack(feature_matrices)
     print(f"Combined feature matrix: {combined.shape}")
     return combined
 
 def compute_umap(features):
-    """Compute UMAP projection."""
+    """Compute UMAP projection using precomputed distances to avoid
+    torch/UMAP OpenMP segfault on macOS."""
+    from sklearn.metrics import pairwise_distances
+    dist_matrix = pairwise_distances(features, metric=UMAP_METRIC)
+    print(f"Precomputed {UMAP_METRIC} distance matrix: {dist_matrix.shape}")
     reducer = umap.UMAP(
         n_neighbors=UMAP_N_NEIGHBORS,
         min_dist=UMAP_MIN_DIST,
-        metric=UMAP_METRIC,
+        metric='precomputed',
         random_state=UMAP_RANDOM_STATE,
-        n_components=2
+        n_components=2,
+        n_jobs=1
     )
-    return reducer.fit_transform(features)
+    return reducer.fit_transform(dist_matrix)
+
+def run_umap_pipeline(weights, filter_methods=None):
+    """Core UMAP/clustering pipeline. Returns (response_data, clustering_info, df, df_full) or raises."""
+    import sys
+
+    print(f"Loading CSV: {CSV_FILE}")
+    df_full = pd.read_csv(CSV_FILE)
+    print(f"Loaded {len(df_full)} rows")
+
+    # Apply method filter if provided
+    if filter_methods:
+        df = df_full[df_full['Name'].isin(filter_methods)].reset_index(drop=True)
+        print(f"Filtered to {len(df)} methods")
+        if len(df) == 0:
+            raise ValueError('No methods matched the filter')
+    else:
+        df = df_full
+
+    # Compute derived features (for frontend UI, not embeddings)
+    derived = compute_derived_features(df)
+    print(f"Computed {len(DERIVED_COLUMNS)} derived features")
+
+    features = compute_weighted_embeddings(df, weights)
+    print("Computing UMAP...")
+    sys.stdout.flush()
+
+    # Adjust UMAP/clustering params for small filtered sets
+    n_methods = len(df)
+    n_neighbors = min(UMAP_N_NEIGHBORS, max(2, n_methods - 1))
+    n_clusters = min(11, max(2, n_methods // 2)) if n_methods >= 4 else max(1, n_methods)
+
+    try:
+        if n_methods == 1:
+            embedding = np.array([[0.0, 0.0]])
+            print("Single method — placed at origin")
+        elif n_methods < 4:
+            from sklearn.decomposition import PCA
+            n_pca = min(2, features.shape[1], n_methods)
+            pca = PCA(n_components=n_pca, random_state=42)
+            embedding = pca.fit_transform(features)
+            if embedding.shape[1] == 1:
+                embedding = np.hstack([embedding, np.zeros((n_methods, 1))])
+            print(f"Used PCA (only {n_methods} methods)")
+        else:
+            from sklearn.metrics import pairwise_distances
+            dist_matrix = pairwise_distances(features, metric=UMAP_METRIC)
+            reducer = umap.UMAP(
+                n_neighbors=n_neighbors,
+                min_dist=UMAP_MIN_DIST,
+                metric='precomputed',
+                random_state=UMAP_RANDOM_STATE,
+                n_components=2,
+                n_jobs=1
+            )
+            embedding = reducer.fit_transform(dist_matrix)
+    except Exception as umap_err:
+        print(f"UMAP CRASHED: {umap_err}")
+        import traceback
+        traceback.print_exc()
+        sys.stdout.flush()
+        raise
+    print("UMAP complete!")
+
+    # K-Means clustering
+    if n_methods <= 1:
+        cluster_labels = [0] * n_methods
+    else:
+        actual_clusters = min(n_clusters, n_methods)
+        km = KMeans(n_clusters=actual_clusters, random_state=42, n_init=10)
+        cluster_labels = km.fit_predict(features).tolist()
+    print(f"K-Means: {n_clusters} clusters ({n_methods} methods)")
+
+    # Compute value → dominant cluster mapping
+    weighted_cols = [col for col, w in weights.items() if w > 0 and col in df.columns and col != 'Description']
+    value_cluster_map = {}
+    for col in weighted_cols:
+        value_cluster_map[col] = {}
+        val_cluster_pairs = []
+        for idx, raw in enumerate(df[col].fillna('').astype(str)):
+            for part in smart_split(raw):
+                val_cluster_pairs.append((part, cluster_labels[idx]))
+        if not val_cluster_pairs:
+            continue
+        pairs_df = pd.DataFrame(val_cluster_pairs, columns=['value', 'cluster'])
+        for val, group in pairs_df.groupby('value'):
+            dominant = group['cluster'].value_counts().index[0]
+            value_cluster_map[col][val] = int(dominant)
+
+    # Build response data
+    response_data = []
+    for i, row in df.iterrows():
+        metadata = {}
+        for col in df.columns:
+            val = row.get(col, '')
+            metadata[col] = '' if pd.isna(val) else str(val)
+        for col in DERIVED_COLUMNS:
+            metadata[col] = derived[col][i]
+
+        response_data.append({
+            'id': i,
+            'name': row.get('Name', ''),
+            'x': float(embedding[i, 0]),
+            'y': float(embedding[i, 1]),
+            'description': row.get('Description', ''),
+            'cluster': cluster_labels[i],
+            'metadata': metadata
+        })
+
+    clustering_info = {
+        'n_clusters': n_clusters,
+        'cluster_labels': cluster_labels,
+        'value_cluster_map': value_cluster_map
+    }
+
+    return response_data, clustering_info, df, df_full
+
 
 @app.route('/api/umap', methods=['GET', 'POST'])
 def get_umap():
     """Compute and return UMAP projection with metadata."""
     try:
-        # Get custom weights from POST body, or use defaults
+        filter_methods = None
         if request.method == 'POST':
             data = request.get_json() or {}
             weights = data.get('weights', DEFAULT_WEIGHTS)
+            filter_methods = data.get('filterMethods', None)
             print(f"Using custom weights: {weights}")
+            if filter_methods:
+                print(f"Filtering to {len(filter_methods)} methods: {filter_methods}")
         else:
             weights = DEFAULT_WEIGHTS
             print(f"Using default weights")
-        
-        print(f"Loading CSV: {CSV_FILE}")
-        df = pd.read_csv(CSV_FILE)
-        print(f"Loaded {len(df)} rows")
-        
-        features = compute_weighted_embeddings(df, weights)
-        print("Computing UMAP...")
-        embedding = compute_umap(features)
-        print("UMAP complete!")
-
-        # K-Means clustering
-        N_CLUSTERS = 11
-        km = KMeans(n_clusters=N_CLUSTERS, random_state=42, n_init=10)
-        cluster_labels = km.fit_predict(features).tolist()
-        print(f"K-Means: {N_CLUSTERS} clusters")
 
-        # Compute value → dominant cluster mapping for stoplight grid
-        weighted_cols = [col for col, w in weights.items() if w > 0 and col in df.columns]
-        value_cluster_map = {}
-        for col in weighted_cols:
-            value_cluster_map[col] = {}
-            vals = df[col].fillna('').astype(str).str.split(',').str[0].str.strip()
-            for val in vals.unique():
-                if val == '':
-                    continue
-                mask = vals == val
-                cluster_counts = pd.Series(cluster_labels)[mask].value_counts()
-                value_cluster_map[col][val] = int(cluster_counts.index[0])
-
-        response_data = []
-        for i, row in df.iterrows():
-            # Replace NaN values with empty strings
-            metadata = {}
-            for col in df.columns:
-                val = row.get(col, '')
-                if pd.isna(val):
-                    metadata[col] = ''
-                else:
-                    metadata[col] = str(val)
-
-            point = {
-                'id': i,
-                'name': row.get('Name', ''),
-                'x': float(embedding[i, 0]),
-                'y': float(embedding[i, 1]),
-                'description': row.get('Description', ''),
-                'cluster': cluster_labels[i],
-                'metadata': metadata
-            }
-            response_data.append(point)
+        response_data, clustering_info, df, df_full = run_umap_pipeline(weights, filter_methods)
 
         return jsonify({
             'success': True,
@@ -144,22 +487,418 @@ def get_umap():
             'config': {
                 'weights': weights,
                 'defaultWeights': DEFAULT_WEIGHTS,
+                'derivedColumns': DERIVED_COLUMNS,
                 'n_neighbors': UMAP_N_NEIGHBORS,
                 'min_dist': UMAP_MIN_DIST,
                 'metric': UMAP_METRIC
             },
             'clustering': {
-                'n_clusters': N_CLUSTERS,
-                'value_cluster_map': value_cluster_map
+                'n_clusters': clustering_info['n_clusters'],
+                'value_cluster_map': clustering_info['value_cluster_map']
+            },
+            'filter': {
+                'active': filter_methods is not None,
+                'methods': filter_methods,
+                'total': len(df_full)
             }
         })
-    
+
+    except ValueError as e:
+        return jsonify({'success': False, 'error': str(e)}), 400
     except Exception as e:
         print(f"Error: {e}")
         import traceback
         traceback.print_exc()
         return jsonify({'success': False, 'error': str(e)}), 500
 
+def build_schema_context(df):
+    """Build schema context string: column names, valid values, defaults."""
+    column_values = {}
+    for col in DEFAULT_WEIGHTS.keys():
+        if col == 'Description':
+            continue
+        if col in df.columns:
+            all_vals = set()
+            for val in df[col].fillna('').astype(str):
+                for part in smart_split(val):
+                    all_vals.add(part)
+            column_values[col] = sorted(all_vals - {''})
+
+    derived_info = '\n'.join([
+        'Derived columns (metadata-only, available for color-by):',
+        '- Grasp Dimensionality: 6-DoF, 7-DoF, 2D, Policy, Evaluation, Other',
+        '- Learning Paradigm: Classical, Learning-based, RL-based, Hybrid',
+        '- Sensor Complexity: 3D, 2.5D, 2D, Multimodal',
+        '- Scene Difficulty: Singulated, Structured, Cluttered, Packed, Piled',
+        '- Gripper Type: Parallel-jaw, Dexterous, Suction, Multi-gripper',
+        '- ML Framework: PyTorch, TensorFlow, Keras, None',
+        '- Method Era: Pioneer (2016-2018), Growth (2019-2021), Modern (2022+)',
+    ])
+
+    return f"""HOW THE TOOL WORKS:
+- 13 columns are used to compute a weighted feature matrix (TF-IDF for categorical columns, sentence-transformer embeddings for Description).
+- Each column has a weight (0-20). Higher weight = that column has more influence on which methods appear close together in the 2D UMAP projection.
+- Weight 0 disables a column entirely.
+- After weighting, UMAP projects to 2D and K-Means assigns clusters.
+- The user can "color by" any column to see patterns.
+
+WEIGHTED COLUMNS AND THEIR POSSIBLE VALUES:
+{json.dumps(column_values, indent=2)}
+
+Description: Free-text describing each method (weighted via sentence-transformer embeddings).
+
+{derived_info}
+
+DEFAULT WEIGHTS:
+{json.dumps(dict(DEFAULT_WEIGHTS), indent=2)}"""
+
+
+def build_method_summaries(df):
+    """Build compact one-line summaries of all methods."""
+    summaries = []
+    for _, row in df.iterrows():
+        name = row.get('Name', '')
+        parts = []
+        for col in DEFAULT_WEIGHTS.keys():
+            if col == 'Description':
+                continue
+            val = str(row.get(col, '')) if pd.notna(row.get(col, '')) else ''
+            if val:
+                short = SHORT_COLUMN_NAMES.get(col, col)
+                parts.append(f"{short}={val}")
+        summaries.append(f"- {name}: {'; '.join(parts)}")
+    return '\n'.join(summaries)
+
+
+def retrieve_relevant_chunks(query):
+    """Placeholder for RAG retrieval. Returns empty string.
+    Future: query ChromaDB for relevant paper chunks."""
+    return ""
+
+
+def build_ai_system_prompt(df, query):
+    """Assemble the full system prompt for the AI copilot."""
+    schema = build_schema_context(df)
+    methods = build_method_summaries(df)
+
+    retrieved = ""
+    if USE_RAG:
+        retrieved = retrieve_relevant_chunks(query)
+        if retrieved:
+            retrieved = f"\n\nRELEVANT PAPER EXCERPTS:\n{retrieved}"
+
+    return f"""You are an AI copilot for the Grasp Planner Explorer, a visualization tool that shows 56 robotic grasp planning methods projected via weighted UMAP.
+
+{schema}
+
+ALL {len(df)} METHODS:
+{methods}
+{retrieved}
+
+YOUR TASK (Pass 1 — Configuration):
+Given a natural language query from a researcher, respond with a JSON object containing:
+1. "filterMethods" - Array of method names to FILTER the dataset to. Only these methods will be shown in the UMAP projection and clustered together. Include ALL methods that match the query criteria (not just the best ones). If the query doesn't ask for filtering, include all method names. Use exact names from the dataset.
+2. "weights" - Complete weight dictionary (all 13 columns, values 0-20). Adjust weights to make the UMAP projection most useful for the query. Keep weights you don't need to change at their default values.
+3. "colorBy" - Which column to color by (must be one of the weighted column names, a derived column name, "cluster", or "index"). Pick the one most informative for the query.
+4. "highlightMethods" - Array of method names (subset of filterMethods) that deserve visual emphasis. Include 3-8 methods. HOW TO CHOOSE depends on query type:
+   - For SEARCH queries ("find methods for X"): highlight the strongest matches for X.
+   - For COMPARISON queries ("how do X and Y differ?"): highlight representative examples from EACH side — e.g., 3-4 examples of X AND 3-4 examples of Y so the user sees both groups.
+   - For EXPLORATION queries ("overview of the field"): highlight diverse, well-known methods spanning different clusters.
+
+FILTERING GUIDELINES:
+- When the query specifies attributes (e.g., "cluttered scenes"), filter to methods that have those attributes.
+- Be INCLUSIVE — include methods that partially match. Better to show a few extra than miss relevant ones.
+- When the query is comparative or exploratory (e.g., "compare sim vs real", "overview"), do NOT filter — include all methods so both sides are visible.
+- For comparison queries, the full unfiltered dataset is essential to see the contrast.
+
+IMPORTANT RULES:
+- Use EXACT column names as keys in the weights dict (including trailing spaces and long names like "Corresponding Dataset (see repository linked above)").
+- Only use method names that actually exist in the dataset.
+- When the query is about comparing methods along a dimension, suggest coloring by that dimension.
+- For comparison queries, increase the weight of the compared dimension so UMAP separates the groups clearly.
+- Respond with ONLY the JSON object, no markdown fences, no explanation outside the JSON."""
+
+
+def build_cluster_stats(response_data, clustering_info, weights):
+    """Build structured cluster stats for both AI context and frontend legend.
+    Returns (summary_text, cluster_stats_list)."""
+    from collections import Counter
+    cluster_labels = clustering_info['cluster_labels']
+    value_cluster_map = clustering_info['value_cluster_map']
+
+    # Group methods by cluster
+    clusters = {}
+    for point in response_data:
+        c = point['cluster']
+        if c not in clusters:
+            clusters[c] = []
+        clusters[c].append(point)
+
+    # Key columns for characterizing clusters (most interpretable)
+    key_cols = ['Planning Method', 'End-effector Hardware', 'Object Configuration',
+                'Input Data', 'Training Data']
+    weighted_cols = [col for col, w in weights.items() if w > 0 and col != 'Description']
+
+    lines = [f"CLUSTERING RESULTS ({len(response_data)} methods in {len(clusters)} clusters):\n"]
+    cluster_stats_list = []
+
+    for cluster_id in sorted(clusters.keys()):
+        members = clusters[cluster_id]
+        names = [m['name'] for m in members]
+        lines.append(f"Cluster {cluster_id} ({len(members)} methods): {', '.join(names)}")
+
+        stat = {
+            'id': cluster_id,
+            'methods': names,
+            'size': len(members),
+            'topAttributes': {}
+        }
+
+        for col in weighted_cols:
+            vals = []
+            for m in members:
+                raw = m['metadata'].get(col, '')
+                if raw:
+                    for part in smart_split(raw):
+                        vals.append(part)
+            if vals:
+                counts = Counter(vals)
+                top = counts.most_common(3)
+                summary = ', '.join([f"{v} ({c})" for v, c in top])
+                short = SHORT_COLUMN_NAMES.get(col, col)
+                lines.append(f"  {short}: {summary}")
+                # Only include key columns in frontend stats for readability
+                if col in key_cols:
+                    stat['topAttributes'][short] = [{'value': v, 'count': c} for v, c in top]
+        lines.append("")
+
+        # Generate a short characterization for the legend
+        dominant_attrs = []
+        for col in key_cols[:3]:
+            short = SHORT_COLUMN_NAMES.get(col, col)
+            if short in stat['topAttributes'] and stat['topAttributes'][short]:
+                dominant_attrs.append(stat['topAttributes'][short][0]['value'])
+        stat['label'] = ' / '.join(dominant_attrs) if dominant_attrs else f'Cluster {cluster_id}'
+        cluster_stats_list.append(stat)
+
+    # Add value-cluster associations
+    lines.append("DOMINANT CLUSTER PER VALUE (which cluster each attribute value is most associated with):")
+    for col, mapping in value_cluster_map.items():
+        if mapping:
+            short = SHORT_COLUMN_NAMES.get(col, col)
+            pairs = [f"{v}→C{c}" for v, c in sorted(mapping.items())]
+            lines.append(f"  {short}: {', '.join(pairs)}")
+
+    return '\n'.join(lines), cluster_stats_list
+
+
+def build_insight_prompt(query, response_data, clustering_info, weights, color_by, highlight_methods, filter_methods):
+    """Build the Pass 2 prompt that asks the AI to interpret clustering results."""
+    cluster_summary, _ = build_cluster_stats(response_data, clustering_info, weights)
+
+    return f"""You are an AI copilot for the Grasp Planner Explorer, a visualization tool for robotic grasp planning methods.
+
+{DOMAIN_CONTEXT}
+
+You have just configured the visualization based on a researcher's query, and UMAP + K-Means clustering have been computed.
+
+RESEARCHER'S QUERY: {query}
+
+WHAT YOU DID:
+- Filtered to {len(response_data)} methods{' (from 56 total)' if filter_methods else ''}
+- Colored by: {color_by}
+- Highlighted {len(highlight_methods)} best matches: {', '.join(highlight_methods)}
+- Weights adjusted: {json.dumps({k: v for k, v in weights.items() if v != 10})}
+
+{cluster_summary}
+
+YOUR TASK (Pass 2 — Insight):
+Based on the ACTUAL clustering results and your domain knowledge, write concise bullet points. Format as bullet points starting with "- ".
+
+Write 3-5 bullet points that:
+- Explain WHY methods cluster together using domain knowledge (e.g., "these methods share a sampling-based approach which requires different input representations than direct regression methods")
+- Point out meaningful patterns (not just "Cluster X has Y" but WHY that grouping matters)
+- Call attention to the highlighted best-match methods — where did they land and what does that tell us?
+- Note any surprising groupings or trade-offs the researcher should be aware of
+
+Be specific — reference method names, cluster numbers, and attribute values. Ground insights in both the data AND domain knowledge.
+
+Respond with ONLY the bullet points, no JSON, no markdown fences, no headers."""
+
+
+@app.route('/api/ai-query', methods=['POST'])
+def ai_query():
+    """Two-pass AI copilot:
+    Pass 1: LLM decides filter, weights, colorBy, highlights (from raw metadata)
+    Pass 2: Run UMAP/clustering, feed results back to LLM for grounded insight
+    """
+    response_text = ''
+    try:
+        data = request.get_json() or {}
+        query = data.get('query', '').strip()
+        if not query:
+            return jsonify({'success': False, 'error': 'Empty query'}), 400
+
+        current_weights = data.get('currentWeights', DEFAULT_WEIGHTS)
+        current_color_by = data.get('currentColorBy', 'cluster')
+
+        df = pd.read_csv(CSV_FILE)
+        valid_names = set(df['Name'].tolist())
+
+        # ── Pass 1: Decide configuration ──────────────────────────────
+        print(f"[Pass 1] Query: '{query}'")
+        system_prompt = build_ai_system_prompt(df, query)
+        user_message = f"""Current weights: {json.dumps(current_weights)}
+Current color-by: {current_color_by}
+
+Researcher's query: {query}"""
+
+        response_text = llm_chat([
+            {'role': 'system', 'content': system_prompt},
+            {'role': 'user', 'content': user_message}
+        ])
+
+        # Handle potential markdown fences
+        if response_text.startswith('```'):
+            lines = response_text.split('\n')
+            response_text = '\n'.join(lines[1:-1])
+
+        result = json.loads(response_text)
+
+        # Validate required fields (insight no longer required from Pass 1)
+        required = ['weights', 'colorBy', 'highlightMethods']
+        for field in required:
+            if field not in result:
+                return jsonify({
+                    'success': False,
+                    'error': f'AI response missing field: {field}'
+                }), 500
+
+        # Validate filterMethods
+        if 'filterMethods' in result:
+            result['filterMethods'] = [
+                m for m in result['filterMethods'] if m in valid_names
+            ]
+            if not result['filterMethods'] or len(result['filterMethods']) >= len(valid_names):
+                result['filterMethods'] = None
+        else:
+            result['filterMethods'] = None
+
+        result['highlightMethods'] = [
+            m for m in result['highlightMethods'] if m in valid_names
+        ]
+
+        # Clamp weights to 0-20
+        for col in result['weights']:
+            result['weights'][col] = max(0, min(20, int(result['weights'][col])))
+
+        print(f"[Pass 1] Filter: {len(result['filterMethods']) if result['filterMethods'] else 'none'}, "
+              f"Highlights: {len(result['highlightMethods'])}, ColorBy: {result['colorBy']}")
+
+        # ── Run UMAP/Clustering pipeline ──────────────────────────────
+        print("[Pipeline] Running UMAP + K-Means on AI-configured data...")
+        response_data, clustering_info, _, _ = run_umap_pipeline(
+            result['weights'], result['filterMethods']
+        )
+        print(f"[Pipeline] Done: {len(response_data)} methods, {clustering_info['n_clusters']} clusters")
+
+        # ── Pass 2: Generate grounded insight ─────────────────────────
+        print("[Pass 2] Generating insight from clustering results...")
+        insight_prompt = build_insight_prompt(
+            query, response_data, clustering_info,
+            result['weights'], result['colorBy'],
+            result['highlightMethods'], result['filterMethods']
+        )
+
+        insight_text = llm_chat([
+            {'role': 'user', 'content': insight_prompt}
+        ], max_tokens=1024)
+        # Clean up any markdown formatting
+        if insight_text.startswith('```'):
+            lines = insight_text.split('\n')
+            insight_text = '\n'.join(lines[1:-1])
+        result['insight'] = insight_text
+
+        print(f"[Pass 2] Insight generated ({len(insight_text)} chars)")
+
+        # Include the UMAP data and cluster stats in the response
+        _, cluster_stats = build_cluster_stats(response_data, clustering_info, result['weights'])
+        result['umapData'] = response_data
+        result['clustering'] = {
+            'n_clusters': clustering_info['n_clusters'],
+            'value_cluster_map': clustering_info['value_cluster_map']
+        }
+        result['clusterStats'] = cluster_stats
+
+        return jsonify({'success': True, **result})
+
+    except json.JSONDecodeError as e:
+        return jsonify({
+            'success': False,
+            'error': f'Failed to parse AI response as JSON: {str(e)}',
+            'raw_response': response_text
+        }), 500
+    except Exception as e:
+        print(f"AI query error: {e}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
+@app.route('/api/cluster-insight', methods=['POST'])
+def cluster_insight():
+    """Generate AI insight for the current clustering (used on initial page load)."""
+    try:
+        data = request.get_json() or {}
+        umap_data = data.get('umapData', [])
+        clustering = data.get('clustering', {})
+        weights = data.get('weights', DEFAULT_WEIGHTS)
+
+        if not umap_data:
+            return jsonify({'success': False, 'error': 'No UMAP data provided'}), 400
+
+        clustering_info = {
+            'n_clusters': clustering.get('n_clusters', 11),
+            'cluster_labels': [p['cluster'] for p in umap_data],
+            'value_cluster_map': clustering.get('value_cluster_map', {})
+        }
+
+        cluster_summary, cluster_stats = build_cluster_stats(umap_data, clustering_info, weights)
+
+        prompt = f"""You are an AI copilot for the Grasp Planner Explorer, a visualization tool for robotic grasp planning methods.
+
+{DOMAIN_CONTEXT}
+
+The researcher has just opened the tool and sees {len(umap_data)} methods projected via weighted UMAP and grouped by K-Means clustering. Give them an orientation.
+
+{cluster_summary}
+
+YOUR TASK:
+Write 4-6 bullet points summarizing what the clustering reveals about the field of robotic grasp planning. Format as bullet points starting with "- ".
+
+Each bullet should:
+- Explain WHY methods group together using domain knowledge (not just "Cluster X has Y")
+- Reference specific cluster numbers, method names, and attribute values
+- Help the researcher build a mental map of the landscape
+
+Write in a welcoming, informative tone.
+
+Respond with ONLY the bullet points, no JSON, no markdown fences, no headers."""
+
+        insight = llm_chat([{'role': 'user', 'content': prompt}], max_tokens=1024)
+        if insight.startswith('```'):
+            lines = insight.split('\n')
+            insight = '\n'.join(lines[1:-1])
+
+        return jsonify({'success': True, 'insight': insight, 'clusterStats': cluster_stats})
+
+    except Exception as e:
+        print(f"Cluster insight error: {e}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({'success': False, 'error': str(e)}), 500
+
+
 @app.route('/api/health')
 def health():
     """Health check endpoint."""
@@ -177,7 +916,7 @@ def not_found(e):
 
 if __name__ == '__main__':
     port = int(os.environ.get('PORT', 5005))
-    debug = os.environ.get('RENDER') is None  # debug mode only locally
+    debug = False  # disabled — torch + Flask reloader causes fork crashes on macOS
     print(f"Starting Flask server on http://0.0.0.0:{port}")
     print(f"CSV file: {CSV_FILE}")
     print(f"Default weights: {DEFAULT_WEIGHTS}")

backend/requirements.txt

@@ -4,3 +4,4 @@ pandas==2.1.4
 numpy==1.26.2
 scikit-learn==1.3.2
 umap-learn==0.5.5
+sentence-transformers>=2.2.0

frontend/package.json

@@ -1,14 +1,18 @@
 {
-  "name": "grasp-planner-umap",
+  "name": "grasp-explorer",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "plotly.js": "^2.27.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^13.5.0",
+    "plotly.js": "^3.4.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-plotly.js": "^2.6.0",
-    "axios": "^1.6.2"
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -16,12 +20,23 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:5005",
   "eslintConfig": {
-    "extends": ["react-app"]
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
+  "proxy": "http://localhost:5005",
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
-    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

frontend/public/index.html

@@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>Grasp Planner UMAP</title>
-</head>
-<body>
-<div id="root"></div>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Interactive visualization of robotic grasp planning methods" />
+    <title>Grasp Explorer</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
 </html>

frontend/src/App.css

@@ -1,61 +1,400 @@
-body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; }
-.App { min-height: 100vh; }
-.App-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 1.5rem; text-align: center; }
-.App-header h1 { margin: 0; font-size: 1.8rem; }
-
-/* Controls bar */
-.controls { display: flex; align-items: center; gap: 2rem; padding: 1rem 2rem; background: white; border-bottom: 1px solid #e0e0e0; }
-.control-group { display: flex; align-items: center; gap: 0.5rem; }
-.control-group label { font-weight: 600; color: #555; }
-.control-group select { padding: 0.5rem 1rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; }
-.selection-info { display: flex; align-items: center; gap: 1rem; color: #667eea; font-weight: 600; }
-.selection-info button { padding: 0.4rem 0.8rem; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; }
-.selection-info button:hover { background: #5a6fd6; }
-
-/* Main content grid */
-.main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; height: 560px; }
-.plot-section { background: white; border-radius: 8px; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; }
-.hint { text-align: center; color: #888; font-size: 0.85rem; margin: 0.5rem 0 0 0; }
-
-/* Table section */
-.table-section { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-direction: column; }
-.table-header-controls { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: #f8f9fa; border-bottom: 1px solid #dee2e6; }
-.table-title { font-weight: 600; color: #495057; }
-.weight-controls { display: flex; gap: 0.5rem; }
-.reset-btn { padding: 0.4rem 0.8rem; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
-.reset-btn:hover { background: #5a6268; }
-.recompute-btn { padding: 0.4rem 1rem; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 0.85rem; }
-.recompute-btn:hover { background: #218838; }
-.recompute-btn:disabled { background: #94d3a2; cursor: wait; }
-.table-container { flex: 1; overflow: auto; }
-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
-thead { position: sticky; top: 0; background: #f8f9fa; z-index: 10; }
-.weight-row { background: #e8f4ea !important; }
-.weight-row th { padding: 0.4rem 0.3rem; border-bottom: 1px solid #dee2e6; }
-.weight-header { font-size: 0.75rem; color: #28a745; font-weight: 600; white-space: nowrap; }
-.weight-cell input { width: 40px; padding: 0.25rem; border: 1px solid #ccc; border-radius: 3px; text-align: center; font-size: 0.8rem; font-weight: 600; }
-.weight-cell input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2); }
-.weight-cell input.zero-weight { background: #f8d7da; color: #721c24; border-color: #f5c6cb; }
-th { padding: 0.6rem 0.5rem; text-align: left; border-bottom: 2px solid #dee2e6; cursor: pointer; white-space: nowrap; font-weight: 600; color: #495057; }
-th:hover { background: #e9ecef; }
-th.sorted { background: #e3e8ff; color: #667eea; }
-th.disabled-col, td.disabled-col { opacity: 0.4; background: #f8f9fa; }
-td { padding: 0.5rem; border-bottom: 1px solid #eee; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.name-cell { max-width: 180px; font-weight: 500; }
-.empty { color: #ccc; }
-tr:hover { background: #f0f7ff; }
-tr.hovered { background: #fff3cd !important; }
-tr.selected { background: #d4edda !important; }
-tbody tr { cursor: pointer; }
-
-/* Detail panel */
-.detail-panel { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 3px solid #667eea; padding: 1rem 2rem; max-height: 200px; overflow-y: auto; box-shadow: 0 -4px 12px rgba(0,0,0,0.15); z-index: 100; }
-.detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
-.detail-header h2 { margin: 0; font-size: 1.2rem; color: #333; }
-.detail-header button { font-size: 1.5rem; background: none; border: none; cursor: pointer; color: #999; }
-.detail-header button:hover { color: #333; }
-.detail-content p { margin: 0; color: #555; line-height: 1.5; }
-
-/* Loading/error states */
-.loading, .error { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
-.error { color: #dc3545; }
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #f5f6fa;
+  color: #333;
+}
+
+.copilot-app {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+/* Header */
+.copilot-header { margin-bottom: 0.75rem; }
+.header-content { display: flex; align-items: center; gap: 0.75rem; }
+.copilot-header h1 { font-size: 1.3rem; font-weight: 700; color: #1a1a2e; }
+.badge {
+  font-size: 0.6rem; background: #667eea; color: white;
+  padding: 0.15rem 0.5rem; border-radius: 10px; font-weight: 600;
+  text-transform: uppercase; letter-spacing: 0.5px;
+}
+
+/* Query */
+.query-section { margin-bottom: 0.75rem; }
+.query-form { display: flex; gap: 0.5rem; }
+.query-input {
+  flex: 1; padding: 0.6rem 0.75rem; border: 2px solid #e0e0e0;
+  border-radius: 6px; font-size: 0.9rem;
+}
+.query-input:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 2px rgba(102,126,234,0.15); }
+.query-input:disabled { background: #f0f0f0; }
+.query-btn {
+  padding: 0.6rem 1.2rem; background: #667eea; color: white; border: none;
+  border-radius: 6px; font-weight: 600; cursor: pointer; white-space: nowrap;
+}
+.query-btn:hover:not(:disabled) { background: #5a6fd6; }
+.query-btn:disabled { background: #b0b9e8; cursor: not-allowed; }
+
+.query-error {
+  margin-top: 0.5rem; padding: 0.4rem 0.75rem; background: #fef2f2;
+  color: #991b1b; border: 1px solid #fecaca; border-radius: 4px; font-size: 0.82rem;
+}
+
+/* Insight Card */
+.insight-card {
+  margin-top: 0.75rem; padding: 0; background: white;
+  border-radius: 8px; border: 1px solid #d0d9f5;
+  box-shadow: 0 2px 8px rgba(102,126,234,0.12);
+  overflow: hidden;
+}
+.insight-card-header {
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.5rem 0.75rem; background: linear-gradient(135deg, #667eea, #764ba2);
+  color: white;
+}
+.insight-icon {
+  font-size: 0.65rem; font-weight: 700; background: rgba(255,255,255,0.25);
+  padding: 0.15rem 0.4rem; border-radius: 4px; letter-spacing: 0.5px;
+}
+.insight-title { font-weight: 600; font-size: 0.85rem; flex: 1; }
+.insight-close {
+  background: none; border: none; color: rgba(255,255,255,0.7);
+  font-size: 1.2rem; cursor: pointer; line-height: 1;
+}
+.insight-close:hover { color: white; }
+
+.insight-body { padding: 0.6rem 0.75rem; }
+.insight-text { color: #333; line-height: 1.5; font-size: 0.88rem; margin: 0; }
+
+.insight-actions-summary {
+  display: flex; flex-wrap: wrap; gap: 0.4rem;
+  padding: 0 0.75rem 0.5rem;
+}
+.action-chip {
+  font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.5rem;
+  border-radius: 12px;
+}
+.filter-chip { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
+.highlight-chip { background: #eef2ff; color: #667eea; border: 1px solid #c7d2fe; }
+.weight-change-chip { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
+
+.insight-weight-details {
+  display: flex; flex-wrap: wrap; gap: 0.25rem;
+  padding: 0 0.75rem 0.5rem;
+}
+.weight-chip {
+  background: #f0f4ff; padding: 0.15rem 0.4rem; border-radius: 3px;
+  font-size: 0.75rem; border: 1px solid #d0d9f5; color: #444;
+}
+.insight-matches {
+  padding: 0 0.75rem 0.6rem; font-size: 0.8rem; color: #555;
+  font-style: italic;
+}
+.matches-label { font-weight: 600; font-style: normal; margin-right: 0.3rem; }
+
+/* Status Bar */
+.status-bar {
+  padding: 0.4rem 0.75rem; background: #f0f4ff; border-radius: 5px;
+  margin-bottom: 0.5rem; font-size: 0.82rem; color: #555;
+  display: flex; align-items: center; gap: 1rem;
+}
+.status-computing { color: #667eea; font-weight: 500; }
+.status-filter { color: #059669; font-weight: 500; }
+.status-highlights { color: #667eea; }
+.reset-btn {
+  margin-left: auto; background: white; border: 1px solid #ccc;
+  border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.78rem;
+  cursor: pointer; color: #555;
+}
+.reset-btn:hover { background: #f3f4f6; }
+
+/* Main Content: Side by Side */
+.main-content {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  min-height: 480px;
+}
+
+.scatter-panel {
+  flex: 1;
+  min-width: 0;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Cluster Insight Card (below scatter on initial load) */
+.cluster-insight-card {
+  border-top: 1px solid #e5e7eb;
+  background: #fafbff;
+}
+.cluster-insight-header {
+  display: flex; align-items: center; gap: 0.4rem;
+  padding: 0.4rem 0.75rem;
+  background: linear-gradient(135deg, #667eea22, #764ba222);
+  border-bottom: 1px solid #e0e4f0;
+}
+.cluster-insight-icon {
+  font-size: 0.6rem; font-weight: 700; background: #667eea;
+  color: white; padding: 0.1rem 0.35rem; border-radius: 3px;
+  letter-spacing: 0.5px;
+}
+.cluster-insight-title {
+  font-weight: 600; font-size: 0.8rem; color: #444;
+}
+.cluster-insight-body {
+  padding: 0.5rem 0.75rem;
+}
+.cluster-insight-body p {
+  font-size: 0.82rem; line-height: 1.55; color: #444; margin: 0;
+}
+.cluster-insight-loading {
+  color: #667eea; font-style: italic;
+}
+
+/* Cluster Legend */
+.cluster-legend {
+  border-top: 1px solid #e5e7eb;
+  padding: 0.5rem 0.75rem;
+}
+.cluster-legend-title {
+  font-size: 0.75rem; font-weight: 600; color: #555;
+  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem;
+}
+.cluster-legend-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 0.4rem;
+}
+.cluster-legend-item {
+  padding: 0.35rem 0.5rem;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 5px;
+  font-size: 0.72rem;
+}
+.cluster-legend-header {
+  display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.15rem;
+}
+.cluster-color-dot {
+  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
+}
+.cluster-legend-name {
+  font-weight: 700; color: #333;
+}
+.cluster-legend-count {
+  color: #888; margin-left: auto; font-size: 0.68rem;
+}
+.cluster-legend-label {
+  font-weight: 600; color: #444; margin-bottom: 0.1rem;
+}
+.cluster-legend-methods {
+  color: #777; font-size: 0.68rem; line-height: 1.3;
+}
+
+/* Insight bullet points */
+.insight-bullets {
+  margin: 0; padding: 0 0 0 1.2rem;
+  list-style: none;
+}
+.insight-bullets li {
+  font-size: 0.82rem; line-height: 1.55; color: #444;
+  margin-bottom: 0.35rem; position: relative; padding-left: 0.4rem;
+}
+.insight-bullets li::before {
+  content: '';
+  position: absolute; left: -0.9rem; top: 0.5em;
+  width: 5px; height: 5px; border-radius: 50%;
+  background: #667eea;
+}
+.insight-body .insight-bullets li {
+  font-size: 0.85rem;
+}
+
+.table-panel {
+  width: 480px;
+  flex-shrink: 0;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.table-panel-header {
+  padding: 0.5rem 0.75rem;
+  background: #f8fafc;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #444;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.hl-indicator {
+  font-size: 0.75rem;
+  color: #667eea;
+  font-weight: 500;
+}
+
+.table-scroll {
+  overflow: auto;
+  flex: 1;
+}
+
+/* Data Table */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.75rem;
+}
+
+.data-table thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.data-table th {
+  background: #f0f4ff;
+  padding: 0.4rem 0.5rem;
+  text-align: left;
+  font-weight: 600;
+  color: #444;
+  border-bottom: 2px solid #d0d9f5;
+  white-space: nowrap;
+  font-size: 0.72rem;
+}
+
+.data-table td {
+  padding: 0.35rem 0.5rem;
+  border-bottom: 1px solid #f0f0f0;
+  color: #333;
+  max-width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.data-table .sticky-col {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: white;
+}
+
+.data-table thead .sticky-col {
+  background: #f0f4ff;
+  z-index: 3;
+}
+
+.data-table .name-cell {
+  font-weight: 600;
+  color: #1a1a2e;
+  min-width: 130px;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.hl-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #667eea;
+  flex-shrink: 0;
+}
+
+.data-table tbody tr {
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.data-table tbody tr:hover,
+.data-table tbody tr.row-hov {
+  background: #f5f7ff;
+}
+.data-table tbody tr:hover .sticky-col,
+.data-table tbody tr.row-hov .sticky-col {
+  background: #f5f7ff;
+}
+
+.data-table tbody tr.row-hl {
+  background: #eef2ff;
+}
+.data-table tbody tr.row-hl .sticky-col {
+  background: #eef2ff;
+}
+.data-table tbody tr.row-hl:hover,
+.data-table tbody tr.row-hl.row-hov {
+  background: #e0e7ff;
+}
+.data-table tbody tr.row-hl:hover .sticky-col,
+.data-table tbody tr.row-hl.row-hov .sticky-col {
+  background: #e0e7ff;
+}
+
+.data-table tbody tr.row-sel {
+  background: #dbeafe;
+}
+.data-table tbody tr.row-sel .sticky-col {
+  background: #dbeafe;
+}
+
+/* Detail Panel */
+.detail-panel {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  margin-bottom: 0.75rem;
+  overflow: hidden;
+}
+
+.detail-panel-header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 0.6rem 0.75rem; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
+}
+.detail-panel-header h3 { font-size: 0.95rem; color: #1a1a2e; }
+.detail-panel-header button {
+  background: none; border: none; font-size: 1.3rem; color: #999; cursor: pointer;
+}
+
+.detail-panel-body { padding: 0.75rem; }
+.detail-description { font-size: 0.85rem; line-height: 1.5; color: #444; margin-bottom: 0.5rem; }
+.detail-metadata { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.75rem; }
+.metadata-row { font-size: 0.78rem; }
+.metadata-key { font-weight: 600; color: #555; }
+.metadata-val { color: #333; margin-left: 0.2rem; }
+
+/* Loading / Error */
+.loading-screen {
+  display: flex; flex-direction: column; align-items: center;
+  justify-content: center; min-height: 50vh; color: #666;
+}
+.spinner {
+  width: 32px; height: 32px; border: 3px solid #e0e0e0;
+  border-top-color: #667eea; border-radius: 50%;
+  animation: spin 0.8s linear infinite; margin-bottom: 0.75rem;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.error-screen { text-align: center; padding: 2rem; color: #991b1b; }
+
+/* Footer */
+.copilot-footer { text-align: center; padding: 0.75rem; font-size: 0.75rem; color: #999; }
+
+/* Responsive */
+@media (max-width: 900px) {
+  .main-content { flex-direction: column; }
+  .table-panel { width: 100%; max-height: 400px; }
+}

frontend/src/App.js

@@ -1,87 +1,56 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import Plot from 'react-plotly.js';
-import ClusterFeatureGrid from './ClusterFeatureGrid';
+import React, { useState, useEffect, useCallback } from 'react';
+import staticInsightData from './staticClusterInsight.json';
+import InsightCard from './components/InsightCard';
+import ClusterOverview from './components/ClusterOverview';
+import ScatterPlot from './components/ScatterPlot';
+import MethodTable from './components/MethodTable';
+import DetailPanel from './components/DetailPanel';
 import './App.css';
 
-// Columns that have weights (used for table and coloring)
-const WEIGHTED_COLUMNS = [
-  'Planning Method',
-  'Training Data', 
-  'End-effector Hardware',
-  'Object Configuration',
-  'Input Data',
-  'Output Pose',
-  'Corresponding Dataset (see repository linked above)',
-  'Simulator (see repository linked above)',
-  'Backbone',
-  'Metric(s) Used ',
-  'Camera Position(s)',
-  'Language'
-];
-
-// Shared cluster colors — used by both the scatter plot and the cluster-feature grid
-const CLUSTER_COLORS = [
-  '#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3',
-  '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5'
-];
-
-// Short display names for table headers
-const SHORT_NAMES = {
-  'Planning Method': 'Planning Method',
-  'Training Data': 'Training Data',
-  'End-effector Hardware': 'End-effector',
-  'Object Configuration': 'Object Config',
-  'Input Data': 'Input Data',
-  'Output Pose': 'Output Pose',
-  'Corresponding Dataset (see repository linked above)': 'Dataset',
-  'Simulator (see repository linked above)': 'Simulator',
-  'Backbone': 'Backbone',
-  'Metric(s) Used ': 'Metrics',
-  'Camera Position(s)': 'Camera',
-  'Language': 'Language'
-};
-
 function App() {
   const [data, setData] = useState([]);
+  const [weights, setWeights] = useState({});
+  const [colorBy, setColorBy] = useState('cluster');
   const [loading, setLoading] = useState(true);
   const [recomputing, setRecomputing] = useState(false);
   const [error, setError] = useState(null);
-  const [selectedPoint, setSelectedPoint] = useState(null);
+  const [filterActive, setFilterActive] = useState(false);
+  const [filterCount, setFilterCount] = useState(null);
+
+  const [query, setQuery] = useState('');
+  const [querying, setQuerying] = useState(false);
+  const [suggestion, setSuggestion] = useState(null);
+  const [queryError, setQueryError] = useState(null);
+
+  const [highlightedMethods, setHighlightedMethods] = useState([]);
   const [hoveredIndex, setHoveredIndex] = useState(null);
-  const [selectedIndices, setSelectedIndices] = useState(null);
-  const [sortConfig, setSortConfig] = useState({ key: 'name', direction: 'asc' });
-  const [colorBy, setColorBy] = useState('cluster');
-  const [config, setConfig] = useState(null);
-  const [weights, setWeights] = useState({});
-  const [defaultWeights, setDefaultWeights] = useState({});
-  const [clustering, setClustering] = useState(null);
+  const [selectedPoint, setSelectedPoint] = useState(null);
 
-  const fetchUmap = useCallback((customWeights = null) => {
-    const isRecompute = customWeights !== null;
-    if (isRecompute) {
-      setRecomputing(true);
-    } else {
-      setLoading(true);
-    }
-    
-    const options = customWeights ? {
+  const [clusterInsight] = useState(staticInsightData.insight);
+  const [clusterStats, setClusterStats] = useState(staticInsightData.clusterStats);
+
+  const fetchUmap = useCallback((customWeights = null, filterMethods = null) => {
+    setRecomputing(true);
+
+    const body = {};
+    if (customWeights) body.weights = customWeights;
+    if (filterMethods) body.filterMethods = filterMethods;
+
+    const options = Object.keys(body).length > 0 ? {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ weights: customWeights })
+      body: JSON.stringify(body)
     } : {};
-    
+
     fetch('/api/umap', options)
       .then(res => res.json())
       .then(result => {
         if (result.success) {
           setData(result.data);
-          setConfig(result.config);
           setWeights(result.config.weights);
-          if (result.config.defaultWeights) {
-            setDefaultWeights(result.config.defaultWeights);
-          }
-          if (result.clustering) {
-            setClustering(result.clustering);
+          if (result.filter) {
+            setFilterActive(result.filter.active);
+            setFilterCount(result.filter.active ? result.data.length : null);
           }
         } else {
           setError(result.error || 'Failed to load data');
@@ -97,307 +66,166 @@ function App() {
   }, []);
 
   useEffect(() => {
+    setLoading(true);
     fetchUmap();
   }, [fetchUmap]);
 
-  const handleWeightChange = (col, value) => {
-    const numValue = parseInt(value) || 0;
-    setWeights(prev => ({ ...prev, [col]: Math.max(0, Math.min(20, numValue)) }));
-  };
-
-  const handleRecompute = () => {
-    fetchUmap(weights);
-  };
-
-  const handleResetWeights = () => {
-    setWeights(defaultWeights);
-  };
-
-  const weightsChanged = useMemo(() => {
-    return JSON.stringify(weights) !== JSON.stringify(config?.weights);
-  }, [weights, config]);
-
-  // Get unique values for a column (for coloring)
-  const uniqueValues = useMemo(() => {
-    if (!data.length || colorBy === 'index') return null;
-    const values = [...new Set(data.map(d => d.metadata[colorBy] || 'N/A'))].sort();
-    return values;
-  }, [data, colorBy]);
-
-  // Map values to colors
-  const colorMap = useMemo(() => {
-    if (!uniqueValues) return null;
-    const map = {};
-    uniqueValues.forEach((val, i) => {
-      map[val] = i;
-    });
-    return map;
-  }, [uniqueValues]);
-
-  // Sorted and filtered data for table
-  const tableData = useMemo(() => {
-    let filtered = selectedIndices ? data.filter((_, i) => selectedIndices.includes(i)) : data;
-    
-    return [...filtered].sort((a, b) => {
-      let aVal, bVal;
-      if (sortConfig.key === 'name') {
-        aVal = a.name;
-        bVal = b.name;
+  const handleQuerySubmit = async (e) => {
+    e.preventDefault();
+    if (!query.trim() || querying) return;
+
+    setQuerying(true);
+    setQueryError(null);
+    setSuggestion(null);
+
+    try {
+      const res = await fetch('/api/ai-query', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          query: query.trim(),
+          currentWeights: weights,
+          currentColorBy: colorBy
+        })
+      });
+      const result = await res.json();
+
+      if (result.success) {
+        setSuggestion(result);
+        setData(result.umapData);
+        setWeights(result.weights);
+        setColorBy(result.colorBy);
+        setHighlightedMethods(result.highlightMethods || []);
+        setSelectedPoint(null);
+        setFilterActive(!!result.filterMethods);
+        setFilterCount(result.filterMethods ? result.umapData.length : null);
+        if (result.clusterStats) setClusterStats(result.clusterStats);
       } else {
-        aVal = a.metadata[sortConfig.key] || '';
-        bVal = b.metadata[sortConfig.key] || '';
+        setQueryError(result.error || 'Unknown error');
       }
-      
-      if (aVal < bVal) return sortConfig.direction === 'asc' ? -1 : 1;
-      if (aVal > bVal) return sortConfig.direction === 'asc' ? 1 : -1;
-      return 0;
-    });
-  }, [data, selectedIndices, sortConfig]);
-
-  const handleSort = (key) => {
-    setSortConfig(prev => ({
-      key,
-      direction: prev.key === key && prev.direction === 'asc' ? 'desc' : 'asc'
-    }));
-  };
-
-  const handlePointClick = (event) => {
-    if (event.points && event.points.length > 0) {
-      const pointIndex = event.points[0].pointIndex;
-      setSelectedPoint(data[pointIndex]);
-    }
-  };
-
-  const handlePlotHover = (event) => {
-    if (event.points && event.points.length > 0) {
-      setHoveredIndex(event.points[0].pointIndex);
-    }
-  };
-
-  const handlePlotUnhover = () => {
-    setHoveredIndex(null);
-  };
-
-  const handleSelection = (event) => {
-    if (event && event.points && event.points.length > 0) {
-      const indices = event.points.map(p => p.pointIndex);
-      setSelectedIndices(indices);
+    } catch (err) {
+      setQueryError(err.message);
+    } finally {
+      setQuerying(false);
     }
   };
 
-  const clearSelection = () => {
-    setSelectedIndices(null);
+  const handleReset = () => {
+    setHighlightedMethods([]);
+    setSelectedPoint(null);
+    setSuggestion(null);
+    setFilterActive(false);
+    setFilterCount(null);
+    fetchUmap();
   };
 
   if (loading) {
-    return <div className="App"><div className="loading">Loading UMAP projection...</div></div>;
+    return (
+      <div className="copilot-app">
+        <div className="loading-screen">
+          <div className="spinner" />
+          <p>Loading UMAP projection...</p>
+        </div>
+      </div>
+    );
   }
 
   if (error) {
-    return <div className="App"><div className="error">Error: {error}</div></div>;
-  }
-
-  // Prepare plot colors
-  let markerColors, colorbarTitle, useDiscreteColors;
-  if (colorBy === 'cluster') {
-    markerColors = data.map(d => CLUSTER_COLORS[d.cluster] || '#999');
-    colorbarTitle = 'Cluster';
-    useDiscreteColors = true;
-  } else if (colorBy === 'index') {
-    markerColors = data.map((_, i) => i);
-    colorbarTitle = 'Index';
-    useDiscreteColors = false;
-  } else {
-    markerColors = data.map(d => colorMap[d.metadata[colorBy] || 'N/A']);
-    colorbarTitle = SHORT_NAMES[colorBy] || colorBy;
-    useDiscreteColors = false;
+    return (
+      <div className="copilot-app">
+        <div className="error-screen">Error: {error}</div>
+      </div>
+    );
   }
 
-  // Highlight hovered point
-  const markerSizes = data.map((_, i) => i === hoveredIndex ? 16 : 10);
-  const markerOpacity = data.map((_, i) => {
-    if (selectedIndices && !selectedIndices.includes(i)) return 0.2;
-    return i === hoveredIndex ? 1 : 0.8;
-  });
-
-  const plotData = [{
-    x: data.map(d => d.x),
-    y: data.map(d => d.y),
-    mode: 'markers',
-    type: 'scatter',
-    text: data.map(d => d.name),
-    customdata: data.map((d, i) => i),
-    hovertemplate: '<b>%{text}</b><extra></extra>',
-    marker: {
-      size: markerSizes,
-      color: markerColors,
-      colorscale: useDiscreteColors ? undefined : (colorBy === 'index' ? 'Viridis' : 'Portland'),
-      showscale: !useDiscreteColors,
-      opacity: markerOpacity,
-      line: {
-        color: data.map((_, i) => i === hoveredIndex ? '#ff0000' : 'rgba(0,0,0,0.3)'),
-        width: data.map((_, i) => i === hoveredIndex ? 3 : 1)
-      },
-      colorbar: useDiscreteColors ? undefined : {
-        title: colorbarTitle,
-        tickvals: colorBy !== 'index' && uniqueValues ? uniqueValues.map((_, i) => i) : undefined,
-        ticktext: colorBy !== 'index' && uniqueValues ? uniqueValues.map(v => v.length > 15 ? v.slice(0, 15) + '...' : v) : undefined
-      }
-    },
-    selectedpoints: selectedIndices || undefined
-  }];
-
-  const layout = {
-    title: 'Grasp Planner UMAP Projection',
-    xaxis: { title: 'UMAP 1' },
-    yaxis: { title: 'UMAP 2' },
-    hovermode: 'closest',
-    height: 500,
-    dragmode: 'lasso',
-    margin: { t: 50, b: 50, l: 50, r: 100 }
-  };
+  const hasHighlights = highlightedMethods.length > 0;
 
   return (
-    <div className="App">
-      <header className="App-header">
-        <h1>🤖 Grasp Planner UMAP Visualization</h1>
-      </header>
-      
-      <div className="controls">
-        <div className="control-group">
-          <label>Color by:</label>
-          <select value={colorBy} onChange={(e) => setColorBy(e.target.value)}>
-            <option value="cluster">Cluster</option>
-            <option value="index">Index</option>
-            {WEIGHTED_COLUMNS.map(col => (
-              <option key={col} value={col}>{SHORT_NAMES[col]}</option>
-            ))}
-          </select>
+    <div className="copilot-app">
+      <header className="copilot-header">
+        <div className="header-content">
+          <h1>Grasp Explorer</h1>
+          <span className="badge">AI-in-the-Loop</span>
         </div>
-        
-        {selectedIndices && (
-          <div className="selection-info">
-            <span>{selectedIndices.length} points selected</span>
-            <button onClick={clearSelection}>Clear Selection</button>
-          </div>
-        )}
-      </div>
+      </header>
 
-      <div className="main-content">
-        <div className="plot-section">
-          <Plot
-            data={plotData}
-            layout={layout}
-            onClick={handlePointClick}
-            onHover={handlePlotHover}
-            onUnhover={handlePlotUnhover}
-            onSelected={handleSelection}
-            style={{ width: '100%', height: '100%' }}
-            config={{ responsive: true, displayModeBar: true }}
+      <section className="query-section">
+        <form onSubmit={handleQuerySubmit} className="query-form">
+          <input
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder='e.g., "methods for cluttered scenes with multi-finger grippers"'
+            disabled={querying}
+            className="query-input"
+          />
+          <button type="submit" disabled={querying || !query.trim()} className="query-btn">
+            {querying ? 'Thinking...' : 'Ask'}
+          </button>
+        </form>
+        {queryError && <div className="query-error">{queryError}</div>}
+        {suggestion && (
+          <InsightCard
+            suggestion={suggestion}
+            weights={weights}
+            onClose={() => setSuggestion(null)}
           />
-          <p className="hint">💡 Use lasso/box select to filter the table and cluster-feature grid below.</p>
+        )}
+      </section>
+
+      {(recomputing || filterActive || hasHighlights) && (
+        <div className="status-bar">
+          {recomputing && <span className="status-computing">Recomputing UMAP...</span>}
+          {!recomputing && filterActive && (
+            <span className="status-filter">Filtered: {filterCount} methods</span>
+          )}
+          {!recomputing && hasHighlights && (
+            <span className="status-highlights">
+              {highlightedMethods.length} best matches highlighted
+            </span>
+          )}
+          {!recomputing && (filterActive || hasHighlights) && (
+            <button className="reset-btn" onClick={handleReset}>Reset to all methods</button>
+          )}
         </div>
+      )}
 
-        <div className="table-section">
-          <div className="table-header-controls">
-            <span className="table-title">Data Table</span>
-            <div className="weight-controls">
-              {weightsChanged && (
-                <>
-                  <button className="reset-btn" onClick={handleResetWeights}>Reset</button>
-                  <button className="recompute-btn" onClick={handleRecompute} disabled={recomputing}>
-                    {recomputing ? '⏳ Computing...' : '🔄 Re-run UMAP'}
-                  </button>
-                </>
-              )}
-            </div>
-          </div>
-          <div className="table-container">
-            <table>
-              <thead>
-                <tr className="weight-row">
-                  <th className="weight-header">Weight</th>
-                  {WEIGHTED_COLUMNS.map(col => (
-                    <th key={col} className="weight-cell">
-                      <input
-                        type="number"
-                        min="0"
-                        max="20"
-                        value={weights[col] ?? 0}
-                        onChange={(e) => handleWeightChange(col, e.target.value)}
-                        className={weights[col] === 0 ? 'zero-weight' : ''}
-                        title={`Weight for ${SHORT_NAMES[col]} (0 = disabled)`}
-                      />
-                    </th>
-                  ))}
-                </tr>
-                <tr>
-                  <th onClick={() => handleSort('name')} className={sortConfig.key === 'name' ? 'sorted' : ''}>
-                    Name {sortConfig.key === 'name' && (sortConfig.direction === 'asc' ? '↑' : '↓')}
-                  </th>
-                  {WEIGHTED_COLUMNS.map(col => (
-                    <th 
-                      key={col} 
-                      onClick={() => handleSort(col)}
-                      className={`${sortConfig.key === col ? 'sorted' : ''} ${weights[col] === 0 ? 'disabled-col' : ''}`}
-                      title={col}
-                    >
-                      {SHORT_NAMES[col]} {sortConfig.key === col && (sortConfig.direction === 'asc' ? '↑' : '↓')}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {tableData.map((row) => (
-                  <tr 
-                    key={row.id}
-                    className={`
-                      ${hoveredIndex === row.id ? 'hovered' : ''}
-                      ${selectedPoint?.id === row.id ? 'selected' : ''}
-                    `}
-                    onMouseEnter={() => setHoveredIndex(row.id)}
-                    onMouseLeave={() => setHoveredIndex(null)}
-                    onClick={() => setSelectedPoint(row)}
-                  >
-                    <td className="name-cell" title={row.name}>{row.name}</td>
-                    {WEIGHTED_COLUMNS.map(col => (
-                      <td key={col} title={row.metadata[col] || ''} className={weights[col] === 0 ? 'disabled-col' : ''}>
-                        {row.metadata[col] || <span className="empty">-</span>}
-                      </td>
-                    ))}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+      <div className="main-content">
+        <div className="scatter-panel">
+          <ScatterPlot
+            data={data}
+            colorBy={colorBy}
+            highlightedMethods={highlightedMethods}
+            hoveredIndex={hoveredIndex}
+            onPointClick={setSelectedPoint}
+            onHover={setHoveredIndex}
+            onUnhover={() => setHoveredIndex(null)}
+          />
+          {!suggestion && (
+            <ClusterOverview
+              insight={clusterInsight}
+              loading={false}
+              stats={clusterStats}
+            />
+          )}
         </div>
-      </div>
 
-      {clustering && (
-        <ClusterFeatureGrid
+        <MethodTable
           data={data}
-          selectedIndices={selectedIndices}
-          valueClusterMap={clustering.value_cluster_map}
-          nClusters={clustering.n_clusters}
-          clusterColors={CLUSTER_COLORS}
+          highlightedMethods={highlightedMethods}
+          selectedPoint={selectedPoint}
+          hoveredIndex={hoveredIndex}
+          onSelect={setSelectedPoint}
+          onHover={setHoveredIndex}
+          onUnhover={() => setHoveredIndex(null)}
         />
-      )}
+      </div>
 
-      {selectedPoint && (
-        <div className="detail-panel">
-          <div className="detail-header">
-            <h2>{selectedPoint.name}</h2>
-            <button onClick={() => setSelectedPoint(null)}>×</button>
-          </div>
-          
-          <div className="detail-content">
-            <div className="description">
-              <h3>Description</h3>
-              <p>{selectedPoint.description}</p>
-            </div>
-          </div>
-        </div>
-      )}
+      <DetailPanel point={selectedPoint} onClose={() => setSelectedPoint(null)} />
+
+      <footer className="copilot-footer">
+        <span>Grasp Planner Explorer &middot; COMPARE Project &middot; WPI</span>
+      </footer>
     </div>
   );
 }

frontend/src/ClusterFeatureGrid.css

@@ -1,230 +0,0 @@
-.cfg-container {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  padding: 1rem;
-  margin: 1rem;
-}
-
-.cfg-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.cfg-header h3 {
-  margin: 0;
-  font-size: 1.1rem;
-  color: #333;
-}
-
-.cfg-subtitle {
-  font-weight: 400;
-  color: #888;
-  font-size: 0.9rem;
-}
-
-.cfg-stats {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  font-size: 0.85rem;
-}
-
-.cfg-stat-match {
-  font-weight: 600;
-  color: #28a745;
-  background: #d4edda;
-  padding: 0.2rem 0.6rem;
-  border-radius: 12px;
-}
-
-.cfg-stat-detail {
-  color: #888;
-}
-
-/* Legend */
-.cfg-legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.6rem;
-  margin-bottom: 0.75rem;
-  padding: 0.5rem;
-  background: #f8f9fa;
-  border-radius: 6px;
-}
-
-.cfg-legend-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.75rem;
-  color: #555;
-  font-weight: 500;
-}
-
-.cfg-legend-swatch {
-  width: 14px;
-  height: 14px;
-  border-radius: 3px;
-  border: 1px solid rgba(0,0,0,0.15);
-  flex-shrink: 0;
-}
-
-.cfg-legend-missing {
-  background: #f0f0f0 !important;
-}
-
-/* Grid scroll wrapper */
-.cfg-scroll-wrapper {
-  overflow-x: auto;
-  overflow-y: auto;
-  max-height: 70vh;
-  border: 1px solid #e0e0e0;
-  border-radius: 6px;
-}
-
-/* CSS Grid */
-.cfg-grid {
-  display: grid;
-  gap: 0;
-  min-width: fit-content;
-}
-
-/* Corner cell */
-.cfg-corner {
-  position: sticky;
-  left: 0;
-  z-index: 3;
-  background: #f8f9fa;
-  font-weight: 600;
-  font-size: 0.75rem;
-  color: #555;
-  padding: 0.4rem 0.5rem;
-  display: flex;
-  align-items: center;
-  border-bottom: 2px solid #dee2e6;
-}
-
-/* Cluster label cells */
-.cfg-cluster-label {
-  text-align: center;
-  font-weight: 700;
-  font-size: 0.75rem;
-  padding: 0.35rem 0.2rem;
-  border-bottom: 2px solid #dee2e6;
-  border-right: 2px solid rgba(0,0,0,0.2);
-  white-space: nowrap;
-}
-
-/* Feature row labels (y-axis) */
-.cfg-row-label {
-  position: sticky;
-  left: 0;
-  z-index: 2;
-  background: #f8f9fa;
-  font-weight: 600;
-  font-size: 0.78rem;
-  color: #444;
-  padding: 0.3rem 0.5rem;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  border-right: 2px solid #dee2e6;
-  border-bottom: 1px solid #eee;
-  min-width: 100px;
-}
-
-.cfg-feature-header {
-  font-weight: 700;
-  border-bottom: 2px solid #dee2e6;
-  color: #333;
-}
-
-/* Planner name cells (x-axis headers) */
-.cfg-planner-name {
-  font-size: 0.6rem;
-  color: #333;
-  padding: 0.25rem 0.15rem;
-  writing-mode: vertical-lr;
-  text-orientation: mixed;
-  transform: rotate(180deg);
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-height: 110px;
-  border-bottom: 2px solid #dee2e6;
-  border-right: 1px solid rgba(0,0,0,0.05);
-  font-weight: 500;
-  min-width: 22px;
-}
-
-/* Data cells */
-.cfg-cell {
-  padding: 0.2rem 0.15rem;
-  border-right: 1px solid rgba(255,255,255,0.6);
-  border-bottom: 1px solid rgba(0,0,0,0.06);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 28px;
-  min-width: 22px;
-  transition: opacity 0.15s;
-  cursor: default;
-  position: relative;
-}
-
-.cfg-cell:hover {
-  opacity: 0.8;
-  outline: 2px solid #333;
-  outline-offset: -1px;
-  z-index: 1;
-}
-
-.cfg-cell-text {
-  font-size: 0.55rem;
-  color: rgba(0,0,0,0.6);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-  text-align: center;
-  line-height: 1.1;
-}
-
-/* Cross-cluster indicator */
-.cfg-cross-cluster {
-  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.25);
-}
-
-/* Cluster boundary */
-.cfg-boundary {
-  border-left: 3px solid #333 !important;
-}
-
-/* Hint text */
-.cfg-hint {
-  text-align: center;
-  color: #888;
-  font-size: 0.8rem;
-  margin: 0.75rem 0 0 0;
-  line-height: 1.4;
-}
-
-/* Empty state */
-.cfg-empty {
-  text-align: center;
-  color: #aaa;
-  padding: 2rem;
-  font-style: italic;
-}
-
-@media (max-width: 1200px) {
-  .cfg-cell { min-width: 18px; min-height: 24px; }
-  .cfg-planner-name { font-size: 0.55rem; min-width: 18px; }
-  .cfg-cell-text { font-size: 0.5rem; }
-}

frontend/src/ClusterFeatureGrid.js

@@ -1,217 +0,0 @@
-import React, { useMemo } from 'react';
-import './ClusterFeatureGrid.css';
-
-const SHORT_NAMES = {
-  'Planning Method': 'Planning',
-  'Training Data': 'Training',
-  'End-effector Hardware': 'Effector',
-  'Object Configuration': 'ObjConfig',
-  'Input Data': 'Input',
-  'Output Pose': 'Output',
-  'Corresponding Dataset (see repository linked above)': 'Dataset',
-  'Simulator (see repository linked above)': 'Simulator',
-  'Backbone': 'Backbone',
-  'Metric(s) Used ': 'Metrics',
-  'Camera Position(s)': 'Camera',
-  'Language': 'Language'
-};
-
-const WEIGHTED_COLUMNS = [
-  'Planning Method',
-  'Training Data',
-  'End-effector Hardware',
-  'Object Configuration',
-  'Input Data',
-  'Output Pose',
-  'Corresponding Dataset (see repository linked above)',
-  'Simulator (see repository linked above)',
-  'Backbone',
-  'Metric(s) Used ',
-  'Camera Position(s)',
-  'Language'
-];
-
-function ClusterFeatureGrid({ data, selectedIndices, valueClusterMap, nClusters, clusterColors }) {
-  const CLUSTER_COLORS = clusterColors;
-  const planners = useMemo(() => {
-    let subset = selectedIndices
-      ? data.filter((_, i) => selectedIndices.includes(i))
-      : data;
-    return [...subset].sort((a, b) => {
-      if (a.cluster !== b.cluster) return a.cluster - b.cluster;
-      return a.name.localeCompare(b.name);
-    });
-  }, [data, selectedIndices]);
-
-  const clusterBoundaries = useMemo(() => {
-    const boundaries = [];
-    for (let i = 1; i < planners.length; i++) {
-      if (planners[i].cluster !== planners[i - 1].cluster) {
-        boundaries.push(i);
-      }
-    }
-    return boundaries;
-  }, [planners]);
-
-  const clusterLabels = useMemo(() => {
-    if (planners.length === 0) return [];
-    const labels = [];
-    let start = 0;
-    let currentCluster = planners[0].cluster;
-    for (let i = 1; i <= planners.length; i++) {
-      if (i === planners.length || planners[i].cluster !== currentCluster) {
-        labels.push({ cluster: currentCluster, start, end: i - 1, count: i - start });
-        if (i < planners.length) {
-          start = i;
-          currentCluster = planners[i].cluster;
-        }
-      }
-    }
-    return labels;
-  }, [planners]);
-
-  const getCellCluster = (planner, col) => {
-    const rawVal = planner.metadata[col] || '';
-    const firstVal = rawVal.split(',')[0].trim();
-    if (!firstVal || !valueClusterMap || !valueClusterMap[col]) return -1;
-    const clust = valueClusterMap[col][firstVal];
-    return clust !== undefined ? clust : -1;
-  };
-
-  const stats = useMemo(() => {
-    let match = 0, differ = 0;
-    planners.forEach(p => {
-      WEIGHTED_COLUMNS.forEach(col => {
-        const cellC = getCellCluster(p, col);
-        if (cellC === -1) return;
-        if (cellC === p.cluster) match++;
-        else differ++;
-      });
-    });
-    return { match, differ, total: match + differ };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [planners, valueClusterMap]);
-
-  if (planners.length === 0) {
-    return (
-      <div className="cfg-container">
-        <div className="cfg-empty">No planners to display. Select points on the scatter plot above.</div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="cfg-container">
-      <div className="cfg-header">
-        <h3>
-          Cluster–Feature Grid
-          <span className="cfg-subtitle">
-            {selectedIndices
-              ? ` — ${planners.length} selected planners`
-              : ` — All ${planners.length} planners`}
-          </span>
-        </h3>
-        {stats.total > 0 && (
-          <div className="cfg-stats">
-            <span className="cfg-stat-match">{Math.round(100 * stats.match / stats.total)}% consistent</span>
-            <span className="cfg-stat-detail">({stats.match} match, {stats.differ} cross-cluster)</span>
-          </div>
-        )}
-      </div>
-
-      <div className="cfg-legend">
-        {Array.from({ length: nClusters || 11 }, (_, i) => (
-          <span key={i} className="cfg-legend-item">
-            <span className="cfg-legend-swatch" style={{ background: CLUSTER_COLORS[i] }} />
-            C{i}
-          </span>
-        ))}
-        <span className="cfg-legend-item">
-          <span className="cfg-legend-swatch cfg-legend-missing" />
-          N/A
-        </span>
-      </div>
-
-      <div className="cfg-scroll-wrapper">
-        <div className="cfg-grid" style={{ gridTemplateColumns: `120px repeat(${planners.length}, 1fr)` }}>
-
-          {/* Cluster label header row */}
-          <div className="cfg-corner">Cluster</div>
-          {planners.map((p, i) => {
-            const isFirstInCluster = i === 0 || planners[i - 1].cluster !== p.cluster;
-            const label = clusterLabels.find(l => l.cluster === p.cluster);
-            if (isFirstInCluster && label) {
-              return (
-                <div
-                  key={`clabel-${i}`}
-                  className="cfg-cluster-label"
-                  style={{
-                    gridColumn: `${i + 2} / span ${label.count}`,
-                    background: CLUSTER_COLORS[p.cluster],
-                    color: '#333',
-                  }}
-                >
-                  C{p.cluster} ({label.count})
-                </div>
-              );
-            }
-            return null;
-          }).filter(Boolean)}
-
-          {/* Planner name header row */}
-          <div className="cfg-row-label cfg-feature-header">Planner</div>
-          {planners.map((p, i) => {
-            const isBoundary = clusterBoundaries.includes(i);
-            return (
-              <div
-                key={`name-${i}`}
-                className={`cfg-planner-name ${isBoundary ? 'cfg-boundary' : ''}`}
-                title={p.name}
-              >
-                {p.name.replace('🤖 ', '').substring(0, 16)}
-              </div>
-            );
-          })}
-
-          {/* Feature rows */}
-          {WEIGHTED_COLUMNS.map(col => (
-            <React.Fragment key={col}>
-              <div className="cfg-row-label" title={col}>
-                {SHORT_NAMES[col]}
-              </div>
-              {planners.map((p, i) => {
-                const cellCluster = getCellCluster(p, col);
-                const rawVal = p.metadata[col] || '';
-                const firstVal = rawVal.split(',')[0].trim();
-                const displayVal = firstVal.substring(0, 14);
-                const ownCluster = p.cluster;
-                const isMatch = cellCluster === ownCluster;
-                const isBoundary = clusterBoundaries.includes(i);
-                const bgColor = cellCluster >= 0 ? CLUSTER_COLORS[cellCluster] : '#f0f0f0';
-
-                return (
-                  <div
-                    key={`${col}-${i}`}
-                    className={`cfg-cell ${isBoundary ? 'cfg-boundary' : ''} ${!isMatch && cellCluster >= 0 ? 'cfg-cross-cluster' : ''}`}
-                    style={{ background: bgColor }}
-                    title={`${p.name}\n${SHORT_NAMES[col]}: ${rawVal}\nOwn cluster: C${ownCluster}\nValue owned by: C${cellCluster}${isMatch ? ' (MATCH)' : ' (differs)'}`}
-                  >
-                    <span className="cfg-cell-text">{displayVal}</span>
-                  </div>
-                );
-              })}
-            </React.Fragment>
-          ))}
-        </div>
-      </div>
-
-      <p className="cfg-hint">
-        Each cell is colored by which cluster <strong>owns</strong> that feature value.
-        Matching own-cluster color = consistent. Different color = cross-cluster trait.
-        {selectedIndices && ' Select different points on the scatter to update this grid.'}
-      </p>
-    </div>
-  );
-}
-
-export default ClusterFeatureGrid;

frontend/src/components/ClusterOverview.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import InsightBullets from './InsightBullets';
+import { CLUSTER_COLORS } from '../constants';
+
+export default function ClusterOverview({ insight, loading, stats }) {
+  if (!insight && !loading && !stats) return null;
+
+  return (
+    <div className="cluster-insight-card">
+      <div className="cluster-insight-header">
+        <span className="cluster-insight-icon">AI</span>
+        <span className="cluster-insight-title">Cluster Overview</span>
+      </div>
+      <div className="cluster-insight-body">
+        {loading ? (
+          <p className="cluster-insight-loading">Analyzing clusters...</p>
+        ) : (
+          <InsightBullets text={insight} />
+        )}
+      </div>
+      {stats && (
+        <div className="cluster-legend">
+          <div className="cluster-legend-title">Cluster Legend</div>
+          <div className="cluster-legend-grid">
+            {stats.map(cs => (
+              <div key={cs.id} className="cluster-legend-item">
+                <div className="cluster-legend-header">
+                  <span className="cluster-color-dot" style={{ background: CLUSTER_COLORS[cs.id] || '#999' }} />
+                  <span className="cluster-legend-name">C{cs.id}</span>
+                  <span className="cluster-legend-count">{cs.size} methods</span>
+                </div>
+                <div className="cluster-legend-label">{cs.label}</div>
+                <div className="cluster-legend-methods">
+                  {cs.methods.slice(0, 4).join(', ')}
+                  {cs.methods.length > 4 ? `, +${cs.methods.length - 4} more` : ''}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/DetailPanel.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SHORT_NAMES } from '../constants';
+
+const HIDDEN_KEYS = ['Name', 'Description', 'Combined_Description', 'Link(s)', 'Citation'];
+
+export default function DetailPanel({ point, onClose }) {
+  if (!point) return null;
+
+  return (
+    <div className="detail-panel">
+      <div className="detail-panel-header">
+        <h3>{point.name}</h3>
+        <button onClick={onClose}>&times;</button>
+      </div>
+      <div className="detail-panel-body">
+        <p className="detail-description">{point.description}</p>
+        <div className="detail-metadata">
+          {Object.entries(point.metadata || {}).map(([key, val]) => {
+            if (!val || HIDDEN_KEYS.includes(key)) return null;
+            return (
+              <div key={key} className="metadata-row">
+                <span className="metadata-key">{SHORT_NAMES[key] || key}:</span>
+                <span className="metadata-val">{val}</span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/InsightBullets.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export default function InsightBullets({ text }) {
+  if (!text) return null;
+  const bullets = text.split('\n').filter(l => l.trim().startsWith('- '));
+  if (bullets.length > 0) {
+    return (
+      <ul className="insight-bullets">
+        {bullets.map((line, i) => (
+          <li key={i}>{line.replace(/^-\s*/, '')}</li>
+        ))}
+      </ul>
+    );
+  }
+  return <p>{text}</p>;
+}

frontend/src/components/InsightCard.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import InsightBullets from './InsightBullets';
+import { SHORT_NAMES } from '../constants';
+
+export default function InsightCard({ suggestion, weights, onClose }) {
+  const weightDiffs = Object.entries(suggestion.weights)
+    .filter(([col, val]) => val !== (weights[col] ?? 0))
+    .map(([col, val]) => ({
+      col,
+      short: SHORT_NAMES[col] || col,
+      from: weights[col] ?? 0,
+      to: val
+    }));
+
+  return (
+    <div className="insight-card">
+      <div className="insight-card-header">
+        <span className="insight-icon">AI</span>
+        <span className="insight-title">Copilot Insight</span>
+        <button className="insight-close" onClick={onClose}>&times;</button>
+      </div>
+      <div className="insight-body">
+        <InsightBullets text={suggestion.insight} />
+      </div>
+      <div className="insight-actions-summary">
+        {suggestion.filterMethods && (
+          <span className="action-chip filter-chip">
+            Filtered to {suggestion.filterMethods.length} methods
+          </span>
+        )}
+        {(suggestion.highlightMethods || []).length > 0 && (
+          <span className="action-chip highlight-chip">
+            {suggestion.highlightMethods.length} best matches
+          </span>
+        )}
+        {weightDiffs.length > 0 && (
+          <span className="action-chip weight-change-chip">
+            {weightDiffs.length} weight{weightDiffs.length > 1 ? 's' : ''} adjusted
+          </span>
+        )}
+      </div>
+      {weightDiffs.length > 0 && (
+        <div className="insight-weight-details">
+          {weightDiffs.map(({ col, short, from, to }) => (
+            <span key={col} className="weight-chip">
+              {short}: {from} &rarr; <strong>{to}</strong>
+            </span>
+          ))}
+        </div>
+      )}
+      {(suggestion.highlightMethods || []).length > 0 && (
+        <div className="insight-matches">
+          <span className="matches-label">Best matches:</span>
+          {suggestion.highlightMethods.join(', ')}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/MethodTable.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { SHORT_NAMES, TABLE_COLUMNS } from '../constants';
+
+export default function MethodTable({
+  data,
+  highlightedMethods,
+  selectedPoint,
+  hoveredIndex,
+  onSelect,
+  onHover,
+  onUnhover,
+}) {
+  const hasHighlights = highlightedMethods.length > 0;
+
+  const tableData = [...data].sort((a, b) => {
+    if (hasHighlights) {
+      const aHL = highlightedMethods.includes(a.name) ? 0 : 1;
+      const bHL = highlightedMethods.includes(b.name) ? 0 : 1;
+      if (aHL !== bHL) return aHL - bHL;
+    }
+    return a.name.localeCompare(b.name);
+  });
+
+  return (
+    <div className="table-panel">
+      <div className="table-panel-header">
+        <span>{data.length} Methods</span>
+        {hasHighlights && (
+          <span className="hl-indicator">{highlightedMethods.length} highlighted</span>
+        )}
+      </div>
+      <div className="table-scroll">
+        <table className="data-table">
+          <thead>
+            <tr>
+              <th className="sticky-col">Name</th>
+              {TABLE_COLUMNS.map(col => (
+                <th key={col}>{SHORT_NAMES[col] || col}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {tableData.map(d => (
+              <tr
+                key={d.id}
+                className={[
+                  highlightedMethods.includes(d.name) ? 'row-hl' : '',
+                  selectedPoint?.id === d.id ? 'row-sel' : '',
+                  hoveredIndex === d.id ? 'row-hov' : ''
+                ].join(' ')}
+                onClick={() => onSelect(selectedPoint?.id === d.id ? null : d)}
+                onMouseEnter={() => onHover(d.id)}
+                onMouseLeave={onUnhover}
+              >
+                <td className="sticky-col name-cell">
+                  {highlightedMethods.includes(d.name) && <span className="hl-dot" />}
+                  {d.name}
+                </td>
+                {TABLE_COLUMNS.map(col => (
+                  <td key={col} title={d.metadata[col] || ''}>
+                    {d.metadata[col] || '-'}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

frontend/src/components/ScatterPlot.js

@@ -0,0 +1,135 @@
+import React, { useMemo } from 'react';
+import Plot from 'react-plotly.js';
+import { smartSplit } from '../utils';
+import { CLUSTER_COLORS, SHORT_NAMES } from '../constants';
+
+export default function ScatterPlot({
+  data,
+  colorBy,
+  highlightedMethods,
+  hoveredIndex,
+  onPointClick,
+  onHover,
+  onUnhover,
+}) {
+  const hasHighlights = highlightedMethods.length > 0;
+
+  const uniqueValues = useMemo(() => {
+    if (!data.length || colorBy === 'index' || colorBy === 'cluster') return null;
+    const valSet = new Set();
+    data.forEach(d => {
+      const parts = smartSplit(d.metadata[colorBy] || '');
+      if (parts.length > 0) parts.forEach(p => valSet.add(p));
+      else valSet.add('N/A');
+    });
+    return [...valSet].sort();
+  }, [data, colorBy]);
+
+  const colorMap = useMemo(() => {
+    if (!uniqueValues) return null;
+    const map = {};
+    uniqueValues.forEach((val, i) => { map[val] = i; });
+    return map;
+  }, [uniqueValues]);
+
+  let markerColors, useDiscreteColors;
+  if (colorBy === 'cluster') {
+    markerColors = data.map(d => CLUSTER_COLORS[d.cluster] || '#999');
+    useDiscreteColors = true;
+  } else if (colorBy === 'index') {
+    markerColors = data.map((_, i) => i);
+    useDiscreteColors = false;
+  } else {
+    markerColors = data.map(d => {
+      const parts = smartSplit(d.metadata[colorBy] || '');
+      const primaryVal = parts.length > 0 ? parts[0] : 'N/A';
+      return colorMap[primaryVal] ?? colorMap['N/A'] ?? 0;
+    });
+    useDiscreteColors = false;
+  }
+
+  const markerSizes = data.map((d, i) => {
+    if (i === hoveredIndex) return 20;
+    if (hasHighlights && highlightedMethods.includes(d.name)) return 16;
+    return 10;
+  });
+
+  const markerOpacity = data.map((d, i) => {
+    if (i === hoveredIndex) return 1;
+    if (hasHighlights && !highlightedMethods.includes(d.name)) return 0.35;
+    return 0.9;
+  });
+
+  const plotData = [{
+    x: data.map(d => d.x),
+    y: data.map(d => d.y),
+    mode: 'markers+text',
+    type: 'scatter',
+    text: data.map(d => {
+      if (hasHighlights && highlightedMethods.includes(d.name)) {
+        return d.name.length > 22 ? d.name.slice(0, 20) + '...' : d.name;
+      }
+      return '';
+    }),
+    textposition: 'top center',
+    textfont: { size: 9, color: '#333' },
+    hovertemplate: '<b>%{customdata}</b><extra></extra>',
+    customdata: data.map(d => d.name),
+    marker: {
+      size: markerSizes,
+      color: markerColors,
+      colorscale: useDiscreteColors ? undefined : 'Portland',
+      showscale: !useDiscreteColors,
+      opacity: markerOpacity,
+      line: {
+        color: data.map((d, i) => {
+          if (i === hoveredIndex) return '#ff0000';
+          if (hasHighlights && highlightedMethods.includes(d.name)) return '#667eea';
+          return 'rgba(0,0,0,0.15)';
+        }),
+        width: data.map((d, i) => {
+          if (i === hoveredIndex) return 3;
+          if (hasHighlights && highlightedMethods.includes(d.name)) return 3;
+          return 0.5;
+        })
+      },
+      colorbar: useDiscreteColors ? undefined : {
+        title: SHORT_NAMES[colorBy] || colorBy,
+        tickvals: uniqueValues ? uniqueValues.map((_, i) => i) : undefined,
+        ticktext: uniqueValues ? uniqueValues.map(v => v.length > 15 ? v.slice(0, 15) + '...' : v) : undefined
+      }
+    },
+    showlegend: false
+  }];
+
+  const layout = {
+    xaxis: { title: 'UMAP 1', zeroline: false },
+    yaxis: { title: 'UMAP 2', zeroline: false },
+    hovermode: 'closest',
+    height: 480,
+    margin: { t: 10, b: 40, l: 40, r: 30 },
+    paper_bgcolor: 'transparent',
+    plot_bgcolor: '#fafafa'
+  };
+
+  return (
+    <Plot
+      data={plotData}
+      layout={layout}
+      onClick={(event) => {
+        if (event.points && event.points.length > 0) {
+          onPointClick(data[event.points[0].pointIndex]);
+        }
+      }}
+      onHover={(event) => {
+        if (event.points && event.points.length > 0) {
+          onHover(event.points[0].pointIndex);
+        }
+      }}
+      onUnhover={onUnhover}
+      style={{ width: '100%' }}
+      config={{ responsive: true, displayModeBar: true }}
+      useResizeHandler={true}
+    />
+  );
+}

frontend/src/constants.js

@@ -0,0 +1,31 @@
+export const CLUSTER_COLORS = [
+  '#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3',
+  '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5'
+];
+
+export const SHORT_NAMES = {
+  'Planning Method': 'Planning Method',
+  'Training Data': 'Training Data',
+  'End-effector Hardware': 'End-effector',
+  'Object Configuration': 'Object Config',
+  'Input Data': 'Input Data',
+  'Output Pose': 'Output Pose',
+  'Corresponding Dataset (see repository linked above)': 'Dataset',
+  'Simulator (see repository linked above)': 'Simulator',
+  'Backbone': 'Backbone',
+  'Metric(s) Used ': 'Metrics',
+  'Camera Position(s)': 'Camera',
+  'Language': 'Language',
+  'Description': 'Description'
+};
+
+export const TABLE_COLUMNS = [
+  'Planning Method',
+  'End-effector Hardware',
+  'Object Configuration',
+  'Input Data',
+  'Output Pose',
+  'Learning Paradigm',
+  'Scene Difficulty',
+  'Gripper Type',
+];

frontend/src/index.js

@@ -3,4 +3,8 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<App />);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/src/staticClusterInsight.json

@@ -0,0 +1,726 @@
+{
+  "insight": "- Cluster 0 highlights methods that heavily rely on 3D point cloud data and PointNet++ architectures, such as 3DAPNet and GCNGrasp, which are designed for singulated and structured object configurations. This cluster emphasizes the importance of 3D geometric understanding and sampling-based planning in grasp generation.\n- Cluster 1 groups methods like Dex-Net 1.0 and GraspSAM, which focus on 2D grasp rectangles and direct regression from depth images or point clouds. These methods are primarily trained in simulation and target singulated objects, reflecting a preference for simplicity and efficiency in grasp planning.\n- Cluster 3 includes a diverse set of methods, such as Equivariant Volumetric Grasping and GPD, that use point cloud inputs and sampling-based planning for complex object configurations like piled and cluttered scenes. This cluster underscores the need for robust 3D perception and sampling techniques to handle challenging environments.\n- Cluster 9 is dominated by reinforcement learning (RL) methods, including GA-DDPG and RobustDexGrasp, which use multi-finger grippers and multi-view camera setups. These methods aim to learn grasp policies through trial-and-error, highlighting the role of RL in achieving dexterous manipulation and robust grasp planning.\n- Cluster 10 focuses on methods like DDGC and Multi-FinGAN, which use three-finger grippers and analytical or sampling-based planning for various object configurations, including singulated and structured scenes. This cluster emphasizes the importance of advanced gripper designs and precise grasp planning algorithms for complex tasks.\n- Cluster 7 stands out with methods like 7DGCG and ShapeGrasp, which do not require training and use overhead cameras to generate 7-DoF grasp poses. These methods highlight the potential of training-less approaches and the importance of efficient grasp evaluation and sampling for cluttered and singulated objects.",
+  "clusterStats": [
+    {
+      "id": 0,
+      "label": "Sampling / Two-finger / Singulated",
+      "methods": [
+        "3DAPNet",
+        "6-DoF GraspNet",
+        "CAPGrasp",
+        "Contact-GraspNet",
+        "Deep Dexterous Grasping (DDG)",
+        "EquiGraspFlow",
+        "GCNGrasp"
+      ],
+      "size": 7,
+      "topAttributes": {
+        "Effector": [
+          {
+            "count": 6,
+            "value": "Two-finger"
+          },
+          {
+            "count": 1,
+            "value": "Multi-finger"
+          }
+        ],
+        "Input": [
+          {
+            "count": 5,
+            "value": "Point cloud"
+          },
+          {
+            "count": 2,
+            "value": "Depth image"
+          },
+          {
+            "count": 1,
+            "value": "RGBD image"
+          }
+        ],
+        "ObjConfig": [
+          {
+            "count": 5,
+            "value": "Singulated"
+          },
+          {
+            "count": 2,
+            "value": "Structured"
+          }
+        ],
+        "Plan": [
+          {
+            "count": 5,
+            "value": "Sampling"
+          },
+          {
+            "count": 1,
+            "value": "Generative"
+          },
+          {
+            "count": 1,
+            "value": "Direct regression"
+          }
+        ],
+        "Train": [
+          {
+            "count": 7,
+            "value": "Sim"
+          },
+          {
+            "count": 1,
+            "value": "Real"
+          }
+        ]
+      }
+    },
+    {
+      "id": 1,
+      "label": "Direct regression / Two-finger / Singulated",
+      "methods": [
+        "Dex-Net 1.0 (MV-CNNs)",
+        "Dex-Net 2.0 (GQ-CNN)",
+        "Dex-Net 3.0",
+        "ggcnn_plus",
+        "GraspSAM",
+        "UniGrasp"
+      ],
+      "size": 6,
+      "topAttributes": {
+        "Effector": [
+          {
+            "count": 4,
+            "value": "Two-finger"
+          },
+          {
+            "count": 1,
+            "value": "Suction"
+          },
+          {
+            "count": 1,
+            "value": "Multi-finger"
+          }
+        ],
+        "Input": [
+          {
+            "count": 2,
+            "value": "Point cloud"
+          },
+          {
+            "count": 1,
+            "value": "3D object model mesh"
+          },
+          {
+            "count": 1,
+            "value": "Depth image"
+          }
+        ],
+        "ObjConfig": [
+          {
+            "count": 6,
+            "value": "Singulated"
+          }
+        ],
+        "Plan": [
+          {
+            "count": 5,
+            "value": "Direct regression"
+          },
+          {
+            "count": 1,
+            "value": "Sampling"
+          },
+          {
+            "count": 1,
+            "value": "Exemplar methods"
+          }
+        ],
+        "Train": [
+          {
+            "count": 5,
+            "value": "Sim"
+          },
+          {
+            "count": 1,
+            "value": "Real"
+          }
+        ]
+      }
+    },
+    {
+      "id": 2,
+      "label": "Grasp evaluation + Sampler / Two-finger / Singulated",
+      "methods": [
+        "\ud83e\udd16 GraspMolmo",
+        "FoundationGrasp",
+        "GraspGen",
+        "GraspGPT",
+        "NeuGraspNet",
+        "ZeroGrasp"
+      ],
+      "size": 6,
+      "topAttributes": {
+        "Effector": [
+          {
+            "count": 6,
+            "value": "Two-finger"
+          },
+          {
+            "count": 1,
+            "value": "Suction"
+          }
+        ],
+        "Input": [
+          {
+            "count": 3,
+            "value": "RGBD image"
+          },
+          {
+            "count": 3,
+            "value": "Natural language"
+          },
+          {
+            "count": 3,
+            "value": "Point cloud"
+          }
+        ],
+        "ObjConfig": [
+          {
+            "count": 3,
+            "value": "Singulated"
+          },
+          {
+            "count": 1,
+            "value": "Packed"
+          },
+          {
+            "count": 1,
+            "value": "Piled"
+          }
+        ],
+        "Plan": [
+          {
+            "count": 5,
+            "value": "Grasp evaluation + Sampler"
+          },
+          {
+            "count": 1,
+            "value": "Generative"
+          }
+        ],
+        "Train": [
+          {
+            "count": 6,
+            "value": "Sim"
+          },
+          {
+            "count": 1,
+            "value": "Real"
+          }
+        ]
+      }
+    },
+    {
+      "id": 3,
+      "label": "Sampling / Two-finger / Piled",
+      "methods": [
+        "\ud83e\udd16 Equivariant Volumetric Grasping",
+        "CaTGrasp",
+        "Edge Grasp Network",
+        "GeomPickPlace",
+        "Grasp detection via Implicit Geometry and Affordance (GIGA)",
+        "Grasp Pose Detection (GPD)",
+        "ICG-Net",
+        "MultiModalGrasping",
+        "OrbitGrasp (EquiFormerV2)",
+        "PointNetGPD",
+        "Single-Shot SE(3) Grasp Detection (S4G)"
+      ],
+      "size": 11,
+      "topAttributes": {
+        "Effector": [
+          {
+            "count": 10,
+            "value": "Two-finger"
+          },
+          {
+            "count": 1,
+            "value": "Multi-finger"
+          }
+        ],
+        "Input": [
+          {
+            "count": 9,
+            "value": "Point cloud"
+          },
+          {
+            "count": 2,
+            "value": "Truncated Signed Distance Function (TSDF)"
+          }
+        ],
+        "ObjConfig": [
+          {
+            "count": 6,
+            "value": "Piled"
+          },
+          {
+            "count": 4,
+            "value": "Structured"
+          },
+          {
+            "count": 1,
+            "value": "Cluttered"
+          }
+        ],
+        "Plan": [
+          {
+            "count": 8,
+            "value": "Sampling"
+          },
+          {
+            "count": 2,
+            "value": "Direct regression"
+          },
+          {
+            "count": 1,
+            "value": "Generative"
+          }
+        ],
+        "Train": [
+          {
+            "count": 11,
+            "value": "Sim"
+          },
+          {
+            "count": 1,
+            "value": "Real"
+          }
+        ]
+      }
+    },
+    {
+      "id": 4,
+      "label": "Reinforcement learning / Two-finger / Piled",
+      "methods": [
+        "DeepRLManip",
+        "Dex-Net 2.1",
+        "Dex-Net 4.0"
+      ],
+      "size": 3,
+      "topAttributes": {
+        "Effector": [
+          {
+            "count": 3,
+            "value": "Two-finger"
+          },
+          {
+            "count": 1,
+            "value": "Suction"
+          }
+        ],
+        "Input": [
+          {
+            "count": 2,
+            "value": "Depth image"
+          },
+          {
+            "count": 1,
+            "value": "Rollouts"
+          }
+        ],
+        "ObjConfig": [
+          {
+            "count": 2,
+            "value": "Piled"
+          },
+          {
+            "count": 1,
+            "value": "Structured"
+          }
+        ],
+        "Plan": [
+          {
+            "count": 3,
+            "value": "Reinforcement learning"
+          }
+        ],
+        "Train": [
+          {
+            "count": 3,
+            "value": "Sim"
+          }
+        ]
+      }
+    },
+    {
+      "id": 5,
+      "label": "Direct regression / Two-finger / Structured",
+      "methods": [
+        "RGBD-Grasp",
+        "ROI-GD"
+      ],
+      "size": 2,
+      "topAttributes": {
+        "Effector": [
+          {
+            "count": 2,
+            "value": "Two-finger"
+          }
+        ],
+        "Input": [
+          {
+            "count": 2,
+            "value": "RGBD image"
+          }
+        ],
+        "ObjConfig": [
+          {
+            "count": 1,
+            "value": "Structured"
+          },
+          {
+            "count": 1,
+            "value": "Piled"
+          }
+        ],
+        "Plan": [
+          {
+            "count": 1,
+            "value": "Direct regression"
+          },
+          {
+            "count": 1,
+            "value": "ROI-based"
+          }
+        ],
+        "Train": [
+          {
+            "count": 2,
+            "value": "Real"
+          },
+          {
+            "count": 1,
+            "value": "Sim"
+          }
+        ]
+      }
+    },
+    {
+      "id": 6,
+      "label": "Direct regression / Two-finger / Piled",
+      "methods": [
+        "AnyGrasp",
+        "Grasp Proposal Network (GPNet)",
+        "PointNet++ Grasping",
+        "REgion-based Grasp Network (REGNet)",
+        "Volumetric Grasping Network (VGN)"
+      ],
+      "size": 5,
+      "topAttributes": {
+        "Effector": [
+          {
+            "count": 5,
+            "value": "Two-finger"
+          }
+        ],
+        "Input": [
+          {
+            "count": 4,
+            "value": "Point cloud"
+          },
+          {
+            "count": 1,
+            "value": "Truncated Signed Distance Function (TSDF)"
+          }
+        ],
+        "ObjConfig": [
+          {
+            "count": 4,
+            "value": "Piled"
+          },
+          {
+            "count": 1,
+            "value": "Singulated"
+          }
+        ],
+        "Plan": [
+          {
+            "count": 5,
+            "value": "Direct regression"
+          }
+        ],
+        "Train": [
+          {
+            "count": 5,
+            "value": "Sim"
+          },
+          {
+            "count": 1,
+            "value": "Real"
+          }
+        ]
+      }
+    },
+    {
+      "id": 7,
+      "label": "Grasp evaluation + Sampler / Two-finger / Cluttered",
+      "methods": [
+        "7DGCG",
+        "ShapeGrasp"
+      ],
+      "size": 2,
+      "topAttributes": {
+        "Effector": [
+          {
+            "count": 1,
+            "value": "Two-finger"
+          },
+          {
+            "count": 1,
+            "value": "Three-finger"
+          }
+        ],
+        "Input": [
+          {
+            "count": 2,
+            "value": "RGBD image"
+          },
+          {
+            "count": 1,
+            "value": "Point cloud"
+          }
+        ],
+        "ObjConfig": [
+          {
+            "count": 1,
+            "value": "Cluttered"
+          },
+          {
+            "count": 1,
+            "value": "Singulated"
+          }
+        ],
+        "Plan": [
+          {
+            "count": 2,
+            "value": "Grasp evaluation + Sampler"
+          }
+        ],
+        "Train": [
+          {
+            "count": 2,
+            "value": "Training-less"
+          }
+        ]
+      }
+    },
+    {
+      "id": 8,
+      "label": "Generative / Multi-finger / Singulated",
+      "methods": [
+        "\ud83e\udd16 GraspQP",
+        "DexDiffuser",
+        "DexGrasp Anything"
+      ],
+      "size": 3,
+      "topAttributes": {
+        "Effector": [
+          {
+            "count": 3,
+            "value": "Multi-finger"
+          },
+          {
+            "count": 1,
+            "value": "Two-finger"
+          },
+          {
+            "count": 1,
+            "value": "Three-finger"
+          }
+        ],
+        "Input": [
+          {
+            "count": 2,
+            "value": "Point cloud"
+          },
+          {
+            "count": 1,
+            "value": "3D object model mesh"
+          }
+        ],
+        "ObjConfig": [
+          {
+            "count": 3,
+            "value": "Singulated"
+          }
+        ],
+        "Plan": [
+          {
+            "count": 2,
+            "value": "Generative"
+          },
+          {
+            "count": 1,
+            "value": "Analytical"
+          },
+          {
+            "count": 1,
+            "value": "Sampling"
+          }
+        ],
+        "Train": [
+          {
+            "count": 2,
+            "value": "Sim"
+          },
+          {
+            "count": 1,
+            "value": "Training-less"
+          },
+          {
+            "count": 1,
+            "value": "Real"
+          }
+        ]
+      }
+    },
+    {
+      "id": 9,
+      "label": "Reinforcement learning / Multi-finger / Singulated",
+      "methods": [
+        "\ud83e\udd16 GraspVLA",
+        "Goal-Auxiliary Deep Deterministic Policy Gradient (GA-DDPG)",
+        "GRAFF (Grasp-Affordances)",
+        "GraspXL",
+        "Probablistic Multi-fingered Grasp Planner",
+        "RobustDexGrasp",
+        "UniGraspTransformer"
+      ],
+      "size": 7,
+      "topAttributes": {
+        "Effector": [
+          {
+            "count": 5,
+            "value": "Multi-finger"
+          },
+          {
+            "count": 2,
+            "value": "Two-finger"
+          }
+        ],
+        "Input": [
+          {
+            "count": 5,
+            "value": "Point cloud"
+          },
+          {
+            "count": 1,
+            "value": "RGB image"
+          },
+          {
+            "count": 1,
+            "value": "RGBD image"
+          }
+        ],
+        "ObjConfig": [
+          {
+            "count": 7,
+            "value": "Singulated"
+          },
+          {
+            "count": 1,
+            "value": "Packed"
+          }
+        ],
+        "Plan": [
+          {
+            "count": 5,
+            "value": "Reinforcement learning"
+          },
+          {
+            "count": 1,
+            "value": "Generative"
+          },
+          {
+            "count": 1,
+            "value": "Active learning"
+          }
+        ],
+        "Train": [
+          {
+            "count": 6,
+            "value": "Sim"
+          },
+          {
+            "count": 1,
+            "value": "Real"
+          }
+        ]
+      }
+    },
+    {
+      "id": 10,
+      "label": "Sampling / Three-finger / Singulated",
+      "methods": [
+        "Deep Dexterous Grasping in Clutter (DDGC)",
+        "geometric-object-grasper",
+        "Multi-FinGAN",
+        "Robust Grasp Planning Over Uncertain Shape Completions"
+      ],
+      "size": 4,
+      "topAttributes": {
+        "Effector": [
+          {
+            "count": 4,
+            "value": "Three-finger"
+          }
+        ],
+        "Input": [
+          {
+            "count": 2,
+            "value": "RGBD image"
+          },
+          {
+            "count": 1,
+            "value": "Point cloud"
+          },
+          {
+            "count": 1,
+            "value": "voxelized occupancy grid"
+          }
+        ],
+        "ObjConfig": [
+          {
+            "count": 2,
+            "value": "Singulated"
+          },
+          {
+            "count": 1,
+            "value": "Structured"
+          },
+          {
+            "count": 1,
+            "value": "Piled"
+          }
+        ],
+        "Plan": [
+          {
+            "count": 2,
+            "value": "Sampling"
+          },
+          {
+            "count": 2,
+            "value": "Analytical"
+          }
+        ],
+        "Train": [
+          {
+            "count": 4,
+            "value": "Sim"
+          }
+        ]
+      }
+    }
+  ]
+}

frontend/src/utils.js

@@ -0,0 +1,27 @@
+/**
+ * Split a comma-separated string, respecting double-quoted fields.
+ * "A, B" -> ['A', 'B']
+ * 'Dexterous grasp, "6-DoF grasp pose (x, y, z, r, p, y)"'
+ *   -> ['Dexterous grasp', '6-DoF grasp pose (x, y, z, r, p, y)']
+ */
+export function smartSplit(value) {
+  if (!value) return [];
+  const result = [];
+  let current = '';
+  let inQuotes = false;
+  for (let i = 0; i < value.length; i++) {
+    const ch = value[i];
+    if (ch === '"') {
+      inQuotes = !inQuotes;
+    } else if (ch === ',' && !inQuotes) {
+      const trimmed = current.trim();
+      if (trimmed) result.push(trimmed);
+      current = '';
+    } else {
+      current += ch;
+    }
+  }
+  const trimmed = current.trim();
+  if (trimmed) result.push(trimmed);
+  return result;
+}