slider for weight and interaction. color by for scatter plot, imrpovement sto UX

backend/app.py

@@ -583,10 +583,12 @@ def get_umap():
             print(f"Using default weights")
 
         response_data, clustering_info, df, df_full = run_umap_pipeline(weights, filter_methods)
+        _, cluster_stats = build_cluster_stats(response_data, clustering_info, weights)
 
         return jsonify({
             'success': True,
             'data': response_data,
+            'clusterStats': cluster_stats,
             'config': {
                 'weights': weights,
                 'defaultWeights': DEFAULT_WEIGHTS,
@@ -778,9 +780,11 @@ def build_cluster_stats(response_data, clustering_info, weights):
     for cluster_id in sorted(clusters.keys()):
         members = clusters[cluster_id]
         names = [m['name'] for m in members]
-        # Generate a short characterization label first
+        # Generate a short characterization label from the top-weighted columns
+        all_label_cols = [c for c in weights.keys() if c != 'Description']
+        label_cols = sorted(all_label_cols, key=lambda c: weights.get(c, 0), reverse=True)[:3]
         dominant_attrs = []
-        for col in key_cols[:3]:
+        for col in label_cols:
             short_col = SHORT_COLUMN_NAMES.get(col, col)
             vals_for_label = []
             for m in members:
@@ -958,6 +962,7 @@ Rules:
 3. Connect findings to the clustering: explain why methods using similar approaches end up in the same group.
 4. Be specific and technical. Avoid generic statements like "various methods use different approaches."
 5. Never reference cluster numbers. Use group names like "the sampling-based parallel-jaw group."
+6. Always use the exact method names as provided in the data (e.g., "Grasp Pose Detection (GPD)" not just "GPD", "Volumetric Grasping Network (VGN)" not just "VGN"). This ensures methods are correctly linked in the interface.
 
 Respond with ONLY the bullet points, nothing else."""
 

backend/rag/query_engine.py

@@ -120,8 +120,9 @@ def compute_weights_from_query(query: str, default_weights: dict, model=None) ->
     return weights
 
 
-def pick_color_by(query: str) -> str:
-    """Deterministically pick the best color-by column from query keywords."""
+def pick_color_by(query: str, weights: dict = None, default_weights: dict = None) -> str:
+    """Deterministically pick the best color-by column from query keywords.
+    Falls back to the most-boosted weight column if no keywords match."""
     query_lower = query.lower()
     best_col = 'cluster'
     best_score = 0
@@ -132,6 +133,16 @@ def pick_color_by(query: str) -> str:
             best_score = score
             best_col = col
 
+    # If no keyword match but weights were boosted, color by the most-boosted column
+    if best_score == 0 and weights and default_weights:
+        max_boost = 0
+        for col, w in weights.items():
+            default = default_weights.get(col, 10)
+            boost = w - default
+            if boost > max_boost and col in COLOR_BY_KEYWORDS:
+                max_boost = boost
+                best_col = col
+
     return best_col
 
 
@@ -380,8 +391,8 @@ def deterministic_query_pipeline(query: str, df, model, default_weights: dict,
     # 1. Compute weights from query
     weights = compute_weights_from_query(query, default_weights, model)
 
-    # 2. Pick color-by
-    color_by = pick_color_by(query)
+    # 2. Pick color-by (pass weights so it can fall back to most-boosted column)
+    color_by = pick_color_by(query, weights, default_weights)
 
     # 3. Find relevant methods via embedding similarity
     ranked_methods = find_relevant_methods(expanded_query, df, model, top_k=15)

chroma_db/chroma.sqlite3

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:338c12a71e04a09aab6951c671a3a396c67b550848f00f8a0dec3bb24fcf1994
+oid sha256:8f526eb204a9cd00c888c66912d1fd3220c375f7135fc15b8be9291b74fe6155
 size 93999104

frontend/src/App.css

@@ -30,7 +30,7 @@ body {
   background: var(--bg);
   color: var(--text);
   -webkit-font-smoothing: antialiased;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.5;
 }
 
@@ -117,20 +117,21 @@ body {
   border-left: 3px solid var(--primary);
 }
 .insight-card-header {
-  display: flex; align-items: center; gap: 0.4rem;
-  padding: 0.4rem 0.7rem; background: var(--primary-wash);
-  border-bottom: 1px solid var(--border-light);
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.4rem 0.7rem;
+  background: var(--primary-deep); color: white;
+  border-radius: 4px 4px 0 0;
 }
 .insight-icon {
-  font-size: 0.58rem; font-weight: 700; background: var(--primary);
-  color: white; padding: 0.1rem 0.3rem; border-radius: 2px; letter-spacing: 0.5px;
+  font-size: 0.55rem; font-weight: 700; background: rgba(255,255,255,0.2);
+  color: white; padding: 0.08rem 0.28rem; border-radius: 2px; letter-spacing: 0.5px;
 }
-.insight-title { font-weight: 700; font-size: 0.92rem; flex: 1; color: var(--dark); }
+.insight-title { font-weight: 700; font-size: 0.75rem; flex: 1; color: white; }
 .insight-close {
-  background: none; border: none; color: var(--text-muted);
+  background: none; border: none; color: rgba(255,255,255,0.6);
   font-size: 1rem; cursor: pointer; line-height: 1;
 }
-.insight-close:hover { color: var(--text); }
+.insight-close:hover { color: white; }
 
 .insight-body { padding: 0.55rem 0.7rem; }
 
@@ -254,11 +255,16 @@ body {
   width: calc(100% - 2.5rem);
 }
 .table-panel-header {
-  padding: 0.45rem 0.7rem;
+  padding: 0.4rem 0.7rem;
   background: var(--primary-deep); color: white;
-  font-size: 0.9rem; font-weight: 700;
-  display: flex; justify-content: space-between; align-items: center;
+  font-size: 0.75rem; font-weight: 700;
+  display: flex; align-items: center; gap: 0.5rem;
   flex-shrink: 0;
+  border-radius: 4px 4px 0 0;
+}
+.table-panel-header .method-count {
+  font-size: 0.72rem; font-weight: 600;
+  color: rgba(255,255,255,0.6);
 }
 .hl-indicator { font-size: 0.72rem; color: #fcd97f; font-weight: 600; }
 
@@ -341,16 +347,14 @@ body {
 
 /* ─── SCATTER + LEGEND ROW ─── */
 .scatter-section {
-  display: flex; gap: 0;
+  display: flex; flex-direction: column; gap: 0;
   margin: 0 1.25rem 0.6rem;
-  align-items: stretch;
 }
-.scatter-section .scatter-panel {
+.scatter-content .scatter-panel {
   flex: 3; min-width: 0;
-  border-radius: 0 0 0 4px;
 }
-.scatter-section .legend-and-description {
-  flex: 1; min-width: 200px; max-width: 260px;
+.scatter-content .legend-and-description {
+  flex: 0 0 300px; min-width: 220px; max-width: 300px;
 }
 
 .scatter-panel {
@@ -362,31 +366,136 @@ body {
 }
 
 /* Viz toggle */
-.viz-toggle {
-  display: flex; gap: 0;
-  border-bottom: 1px solid var(--border-light);
-  background: var(--surface);
+.viz-toolbar {
+  display: flex; gap: 0; align-items: stretch;
+  background: var(--primary-deep);
+  border-radius: 4px 4px 0 0;
+  overflow: hidden;
+}
+.scatter-content {
+  display: flex; gap: 0; align-items: stretch; flex: 1;
+}
+/* Color-by selector — header above legend */
+.color-by-header {
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.45rem 0.7rem;
+  background: transparent;
+  flex: 0 0 300px; max-width: 300px;
+  white-space: nowrap;
+  border-left: 3px solid rgba(255,255,255,0.5);
+}
+.color-by-header label {
+  font-size: 0.75rem; font-weight: 700; color: #fff;
+  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
+}
+.color-by-header select {
+  flex: 1; font-family: inherit; font-size: 0.75rem; font-weight: 600;
+  padding: 0.25rem 0.4rem; border: 1px solid rgba(255,255,255,0.3);
+  border-radius: 3px; background: rgba(255,255,255,0.12); color: #fff;
+  cursor: pointer;
+}
+.color-by-header select:hover {
+  background: rgba(255,255,255,0.2);
+}
+.color-by-header select option {
+  background: var(--primary-deep); color: #fff;
 }
 .viz-toggle-btn {
-  flex: 1; padding: 0.35rem 0.6rem;
-  background: none; border: none;
+  flex: 1; padding: 0.4rem 0.7rem;
+  background: transparent; border: none;
   font-family: inherit; font-size: 0.75rem; font-weight: 600;
-  color: var(--text-muted); cursor: pointer;
-  border-bottom: 2px solid transparent;
+  color: rgba(255,255,255,0.6); cursor: pointer;
   transition: all 0.12s;
+  border-right: 1px solid rgba(255,255,255,0.15);
+}
+.viz-toggle-btn:last-of-type { border-right: none; }
+.viz-toggle-btn:hover:not(.disabled) { color: #fff; background: rgba(255,255,255,0.1); }
+.viz-toggle-btn.disabled {
+  color: rgba(255,255,255,0.25); cursor: not-allowed;
 }
-.viz-toggle-btn:hover { color: var(--text); }
 .viz-toggle-btn.active {
-  color: var(--primary); border-bottom-color: var(--primary);
+  color: #fff; font-weight: 700;
+  background: rgba(255,255,255,0.15);
+  box-shadow: inset 0 -3px 0 var(--accent);
+}
+.weights-toggle {
+  border-left: 1px solid rgba(255,255,255,0.15);
+  border-right: 1px solid rgba(255,255,255,0.15);
+  flex: 0 0 auto;
+  background: rgba(217,90,62,0.25);
+  color: rgba(255,255,255,0.85);
+}
+.weights-toggle:hover:not(.disabled) { background: rgba(217,90,62,0.4); color: #fff; }
+.weights-toggle.active {
+  background: var(--accent); color: #fff;
+  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.2);
+}
+/* Weight sliders panel */
+.weight-panel {
   background: var(--card);
+  border: 1px solid var(--border);
+  border-top: none;
+}
+.weight-panel-bar {
+  display: flex; align-items: center; gap: 0.4rem;
+  padding: 0.3rem 0.7rem;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border-light);
 }
+.weight-panel-label {
+  font-size: 0.68rem; font-weight: 700; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 0.5px;
+}
+.weight-panel-bar .chart-help {
+  font-size: 0.55rem;
+}
+.weight-panel-bar .weight-reset-btn {
+  margin-left: auto;
+}
+.weight-panel-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 0.2rem 1.2rem;
+  padding: 0.45rem 0.7rem;
+  align-items: center;
+}
+.weight-slider-row {
+  display: flex; align-items: center; gap: 0.3rem;
+  min-height: 1.5rem;
+}
+.weight-slider-label {
+  flex: 0 0 85px; font-size: 0.68rem; font-weight: 600; color: var(--text);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.weight-slider-input {
+  flex: 1; height: 3px; accent-color: var(--primary);
+  cursor: pointer; min-width: 60px;
+}
+.weight-slider-value {
+  flex: 0 0 20px; text-align: right; font-weight: 700;
+  font-size: 0.68rem; color: var(--primary-deep);
+  min-width: 20px;
+}
+.weight-ai-badge {
+  font-size: 0.45rem; font-weight: 700;
+  background: var(--accent); color: white;
+  padding: 0.02rem 0.18rem; border-radius: 2px;
+  margin-left: 0.15rem; vertical-align: super;
+}
+.weight-reset-btn {
+  font-family: inherit; font-size: 0.68rem; font-weight: 600;
+  padding: 0.25rem 0.5rem;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 3px; color: var(--text-muted); cursor: pointer;
+}
+.weight-reset-btn:hover { background: var(--bg); color: var(--text); }
 /* Legend + description column */
 .legend-and-description {
   display: flex; flex-direction: column; gap: 0;
   flex: 1; min-width: 200px; max-width: 260px;
 }
 .legend-and-description .cluster-legend-compact {
-  border-radius: 0 4px 0 0;
+  border-radius: 0 0 4px 0;
   border-top: none;
   border-left: none;
 }
@@ -414,10 +523,12 @@ body {
   border-top: none;
   border-radius: 0 0 4px 0;
   padding: 0.45rem 0.55rem;
+  max-height: 280px;
+  overflow-y: auto;
 }
 .cluster-legend-compact .cluster-legend-title {
-  font-size: 0.68rem; font-weight: 700; color: var(--text-muted);
-  text-transform: uppercase; letter-spacing: 0.8px;
+  font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
+  text-transform: uppercase; letter-spacing: 0.6px;
   margin-bottom: 0.35rem; padding-bottom: 0.25rem;
   border-bottom: 1px solid var(--border-light);
 }
@@ -448,8 +559,7 @@ body {
 }
 .cluster-legend-row .cluster-legend-label {
   flex: 1; color: var(--text); font-weight: 500;
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  font-size: 0.7rem;
+  font-size: 0.7rem; line-height: 1.3;
 }
 .cluster-legend-row .cluster-legend-count {
   color: var(--text-muted); font-size: 0.65rem; font-weight: 700;
@@ -462,16 +572,16 @@ body {
   border-radius: 4px; margin: 0 1.25rem 0.5rem; overflow: hidden;
 }
 .cluster-insight-header {
-  display: flex; align-items: center; gap: 0.35rem;
-  padding: 0.35rem 0.65rem;
-  background: var(--primary-wash);
-  border-bottom: 1px solid var(--border-light);
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.4rem 0.7rem;
+  background: var(--primary-deep); color: white;
+  border-radius: 4px 4px 0 0;
 }
 .cluster-insight-icon {
-  font-size: 0.55rem; font-weight: 700; background: var(--primary);
+  font-size: 0.55rem; font-weight: 700; background: rgba(255,255,255,0.2);
   color: white; padding: 0.08rem 0.28rem; border-radius: 2px;
 }
-.cluster-insight-title { font-weight: 700; font-size: 0.8rem; color: var(--dark); }
+.cluster-insight-title { font-weight: 700; font-size: 0.75rem; color: white; }
 .cluster-insight-body { padding: 0.45rem 0.65rem; }
 .cluster-insight-body p { font-size: 0.8rem; line-height: 1.55; color: var(--text); margin: 0; }
 .cluster-insight-loading { color: var(--primary); font-style: italic; }
@@ -552,8 +662,21 @@ body {
 
 /* ─── ANALYTICS DASHBOARD ─── */
 .analytics-dashboard { margin: 0 1.25rem 0.5rem; }
+.analytics-header {
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.4rem 0.7rem;
+  background: var(--primary-deep); color: white;
+  border-radius: 4px 4px 0 0;
+  margin-bottom: 0;
+}
+.analytics-header-icon {
+  font-size: 0.55rem; font-weight: 700; background: rgba(255,255,255,0.2);
+  color: white; padding: 0.08rem 0.28rem; border-radius: 2px;
+}
+.analytics-header-title { font-weight: 700; font-size: 0.75rem; }
 .analytics-grid {
   display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
+  padding-top: 0.5rem;
 }
 .analytics-card {
   background: var(--card); border-radius: 4px;
@@ -1199,8 +1322,9 @@ body {
 /* ─── RESPONSIVE ─���─ */
 @media (max-width: 960px) {
   .analytics-grid { grid-template-columns: 1fr; }
-  .scatter-section { flex-direction: column; }
-  .scatter-section .cluster-legend-compact { max-width: none; }
+  .scatter-content { flex-direction: column; }
+  .scatter-content .cluster-legend-compact { max-width: none; }
+  .viz-toolbar { flex-wrap: wrap; }
   .table-panel, .scatter-section, .cluster-insight-card,
   .query-explanation, .analytics-dashboard, .detail-panel {
     margin-left: 0.5rem; margin-right: 0.5rem;

frontend/src/App.js

@@ -2,7 +2,8 @@ import React, { useState, useEffect, useCallback } from 'react';
 import staticInsightData from './staticClusterInsight.json';
 import InsightCard from './components/InsightCard';
 import { ClusterLegend, ClusterInsight } from './components/ClusterOverview';
-import { SHORT_NAMES } from './constants';
+import { SHORT_NAMES, COLOR_BY_OPTIONS, DEFAULT_WEIGHTS } from './constants';
+import WeightSliders from './components/WeightSliders';
 import ScatterPlot from './components/ScatterPlot';
 import MethodTable from './components/MethodTable';
 import DetailPanel from './components/DetailPanel';
@@ -39,17 +40,29 @@ function App() {
   const [clusterStats, setClusterStats] = useState(staticInsightData.clusterStats);
   const [activeCluster, setActiveCluster] = useState(null);
 
+  const [weightsOpen, setWeightsOpen] = useState(true);
+  const [aiAdjustedCols, setAiAdjustedCols] = useState(new Set());
+
   const applyQueryResult = useCallback((queryText, result) => {
     setSuggestion(result);
     setData(result.umapData);
     setWeights(result.weights);
     setColorBy(result.colorBy);
+    if (result.colorBy !== 'cluster') {
+      setVizMode('scatter');
+    }
     const highlights = result.filterMethods || result.highlightMethods || [];
     setHighlightedMethods(highlights);
     setSelectedPoint(null);
     setFilterActive(!!result.filterMethods);
     setFilterCount(result.filterMethods ? result.filterMethods.length : null);
     if (result.clusterStats) setClusterStats(result.clusterStats);
+    // Track which columns the AI adjusted
+    const adjusted = new Set();
+    for (const [col, val] of Object.entries(result.weights)) {
+      if (val !== DEFAULT_WEIGHTS[col]) adjusted.add(col);
+    }
+    setAiAdjustedCols(adjusted);
     setQuery(queryText);
   }, []);
 
@@ -69,6 +82,7 @@ function App() {
         if (result.success) {
           setData(result.data);
           setWeights(result.config.weights);
+          if (result.clusterStats) setClusterStats(result.clusterStats);
           if (result.filter) {
             setFilterActive(result.filter.active);
             setFilterCount(result.filter.active ? result.data.length : null);
@@ -89,9 +103,11 @@ function App() {
   useEffect(() => {
     setLoading(true);
 
-    // Restore cached query state from a previous iframe load (e.g., ReVISit study sections 3/4)
-    const cachedQuery = sessionStorage.getItem('grasp-explorer-query');
-    const cachedResult = sessionStorage.getItem('grasp-explorer-result');
+    // Restore cached query state only when embedded in an iframe (e.g., ReVISit study sections 3/4).
+    // Standalone HF Space usage always starts fresh.
+    const isIframe = window.self !== window.top;
+    const cachedQuery = isIframe && sessionStorage.getItem('grasp-explorer-query');
+    const cachedResult = isIframe && sessionStorage.getItem('grasp-explorer-result');
     if (cachedQuery && cachedResult) {
       try {
         const result = JSON.parse(cachedResult);
@@ -101,6 +117,11 @@ function App() {
         fetchUmap();
       }
     } else {
+      // Clear any stale cache when loading standalone
+      if (!isIframe) {
+        sessionStorage.removeItem('grasp-explorer-query');
+        sessionStorage.removeItem('grasp-explorer-result');
+      }
       fetchUmap();
     }
 
@@ -154,6 +175,9 @@ function App() {
     setFilterActive(false);
     setFilterCount(null);
     setActiveCluster(null);
+    setAiAdjustedCols(new Set());
+    setWeightsOpen(false);
+    setColorBy('cluster');
     sessionStorage.removeItem('grasp-explorer-query');
     sessionStorage.removeItem('grasp-explorer-result');
     fetchUmap();
@@ -319,27 +343,64 @@ function App() {
 
       {/* Scatter plot + cluster legend */}
       <div className="scatter-section">
-        <div className="scatter-panel">
-          <div className="viz-toggle">
-            <button
-              className={`viz-toggle-btn ${vizMode === 'scatter' ? 'active' : ''}`}
-              onClick={() => setVizMode('scatter')}
-            >
-              Similarity Map
-            </button>
-            <button
-              className={`viz-toggle-btn ${vizMode === 'network' ? 'active' : ''}`}
-              onClick={() => setVizMode('network')}
-            >
-              Method Connections
-            </button>
-            <button
-              className={`viz-toggle-btn ${vizMode === 'clusters' ? 'active' : ''}`}
-              onClick={() => setVizMode('clusters')}
+        <div className="viz-toolbar">
+          <button
+            className={`viz-toggle-btn ${vizMode === 'scatter' ? 'active' : ''}`}
+            onClick={() => setVizMode('scatter')}
+          >
+            Similarity Map
+          </button>
+          <button
+            className={`viz-toggle-btn ${vizMode === 'network' ? 'active' : ''} ${colorBy !== 'cluster' ? 'disabled' : ''}`}
+            onClick={() => colorBy === 'cluster' && setVizMode('network')}
+            title={colorBy !== 'cluster' ? 'Switch to Cluster coloring to see method connections' : ''}
+          >
+            Method Connections
+          </button>
+          <button
+            className={`viz-toggle-btn ${vizMode === 'clusters' ? 'active' : ''} ${colorBy !== 'cluster' ? 'disabled' : ''}`}
+            onClick={() => colorBy === 'cluster' && setVizMode('clusters')}
+            title={colorBy !== 'cluster' ? 'Switch to Cluster coloring to see cluster relations' : ''}
+          >
+            Cluster Relations
+          </button>
+          <button
+            className={`viz-toggle-btn weights-toggle ${weightsOpen ? 'active' : ''}`}
+            onClick={() => setWeightsOpen(!weightsOpen)}
+          >
+            {weightsOpen ? 'Hide Weights' : 'Weights'}
+          </button>
+          <div className="color-by-header">
+            <label htmlFor="color-by-select">Color by</label>
+            <select
+              id="color-by-select"
+              value={colorBy}
+              onChange={(e) => {
+                const val = e.target.value;
+                setColorBy(val);
+                setActiveCluster(null);
+                if (val !== 'cluster' && (vizMode === 'network' || vizMode === 'clusters')) {
+                  setVizMode('scatter');
+                }
+              }}
             >
-              Cluster Relations
-            </button>
+              {COLOR_BY_OPTIONS.map(opt => (
+                <option key={opt.value} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
           </div>
+        </div>
+        {weightsOpen && (
+          <WeightSliders
+            weights={weights}
+            defaultWeights={DEFAULT_WEIGHTS}
+            aiAdjustedCols={aiAdjustedCols}
+            onChange={(newWeights) => { setWeights(newWeights); fetchUmap(newWeights); }}
+            onReset={() => { setAiAdjustedCols(new Set()); setWeights(DEFAULT_WEIGHTS); setWeightsOpen(false); fetchUmap(); }}
+          />
+        )}
+        <div className="scatter-content">
+        <div className="scatter-panel">
           {vizMode === 'scatter' && (
             <ScatterPlot
               data={data}
@@ -355,6 +416,7 @@ function App() {
           {vizMode === 'network' && (
             <NetworkGraph
               data={data}
+              colorBy={colorBy}
               highlightedMethods={highlightedMethods}
               hoveredIndex={hoveredIndex}
               onPointClick={setSelectedPoint}
@@ -365,6 +427,7 @@ function App() {
           {vizMode === 'clusters' && (
             <ClusterGraph
               data={data}
+              colorBy={colorBy}
               clusterStats={clusterStats}
               highlightedMethods={highlightedMethods}
               onPointClick={setSelectedPoint}
@@ -375,11 +438,13 @@ function App() {
           <ClusterLegend stats={clusterStats} activeCluster={activeCluster} onClusterClick={setActiveCluster} colorBy={colorBy} data={data} />
           <div className="viz-description">
             {vizMode === 'scatter' && (
-              <p>Each dot is one grasp planning method. Methods that share similar attributes (planning approach, gripper type, sensor input) are placed close together.
+              <p>Each dot is one grasp planning method, positioned by similarity across all attributes.
                 {colorBy === 'cluster'
                   ? ' Colors indicate automatically discovered groups.'
-                  : ` Colors show ${SHORT_NAMES[colorBy] || colorBy}. Highlighted methods match your query.`
-                } Hover to identify methods, click for details.</p>
+                  : ` Colors show ${SHORT_NAMES[colorBy] || colorBy}.`
+                }
+                {highlightedMethods.length > 0 && ' Highlighted methods match your query.'}
+                {' '}Hover to identify, click for details.</p>
             )}
             {vizMode === 'network' && (
               <p><strong>Colored lines</strong> connect methods in the same group. <strong>Gray dashed lines</strong> connect methods in different groups that share 3 or more attributes, revealing relationships the grouping alone does not show.</p>
@@ -389,14 +454,17 @@ function App() {
             )}
           </div>
         </div>
+        </div>
       </div>
 
-      {!suggestion && (
+      {!suggestion && colorBy === 'cluster' && aiAdjustedCols.size === 0 &&
+        Object.entries(weights).every(([col, val]) => val === DEFAULT_WEIGHTS[col]) && (
         <ClusterInsight
           insight={clusterInsight}
           loading={false}
-          stats={clusterStats}
+          stats={staticInsightData.clusterStats}
           onMethodClick={handleMethodClick}
+          data={data}
         />
       )}
 

frontend/src/components/AnalyticsDashboard.js

@@ -339,6 +339,10 @@ export default function AnalyticsDashboard({ suggestion }) {
 
   return (
     <div className="analytics-dashboard">
+      <div className="analytics-header">
+        <span className="analytics-header-icon">AI</span>
+        <span className="analytics-header-title">Analytics</span>
+      </div>
       <div className="analytics-grid">
         <MethodRelevanceChart methodRelevance={methodRelevance} />
         <CitedReferencesChart citedReferences={analytics.citedReferences} />

frontend/src/components/ClusterGraph.js

@@ -1,9 +1,11 @@
 import React, { useMemo } from 'react';
 import Plot from 'react-plotly.js';
 import { CLUSTER_COLORS } from '../constants';
+import { getPointColor, buildColorMap } from '../utils';
 
 export default function ClusterGraph({
   data,
+  colorBy = 'cluster',
   clusterStats,
   highlightedMethods,
   onPointClick,
@@ -133,7 +135,15 @@ export default function ClusterGraph({
         const count = (clusterMembers[c] || []).length;
         return Math.max(25, Math.sqrt(count) * 18);
       }),
-      color: clusterIds.map(c => CLUSTER_COLORS[c] || '#999'),
+      color: clusterIds.map(c => {
+        if (colorBy === 'cluster') return CLUSTER_COLORS[c] || '#999';
+        // Use the most common value in this cluster for the color
+        const members = clusterMembers[c] || [];
+        if (members.length === 0) return '#999';
+        const cm = buildColorMap(data, colorBy);
+        // Pick color of the first member as representative
+        return getPointColor(data[members[0]], colorBy, cm);
+      }),
       opacity: clusterIds.map(c => {
         if (highlightedClusters.size === 0) return 0.85;
         return highlightedClusters.has(c) ? 1 : 0.3;

frontend/src/components/ClusterOverview.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import InsightBullets from './InsightBullets';
 import { CLUSTER_COLORS, SHORT_NAMES } from '../constants';
-import { smartSplit } from '../utils';
+import { smartSplit, buildColorMap, getPointColor } from '../utils';
 
 const COLUMN_COLORS = [
   '#0C3383', '#0A88BA', '#F2D338', '#F28F38', '#D91E1E',
@@ -75,38 +75,151 @@ export function ClusterLegend({ stats, activeCluster, onClusterClick, colorBy, d
   );
 }
 
-export function ClusterInsight({ insight, loading, stats, onMethodClick }) {
-  if (!insight && !loading) return null;
+function buildColumnSummary(data, colorBy) {
+  if (!data || !data.length || !colorBy || colorBy === 'cluster') return null;
+  const displayName = SHORT_NAMES[colorBy] || colorBy;
 
-  // Build method -> cluster map from stats for coloring
-  const methodClusterMap = {};
-  const clusterLabelMap = {};
-  if (stats) {
-    stats.forEach(cs => {
-      cs.methods.forEach(name => {
-        methodClusterMap[name] = cs.id;
-      });
-      if (cs.label) {
-        clusterLabelMap[cs.label] = cs.id;
-      }
-    });
+  // Group methods by their primary value for this column
+  const groups = {};
+  data.forEach(d => {
+    const parts = smartSplit(d.metadata?.[colorBy] || '');
+    const primary = parts.length > 0 ? parts[0] : 'N/A';
+    if (!groups[primary]) groups[primary] = [];
+    groups[primary].push(d);
+  });
+
+  // Compute spatial coherence: for each group, measure how tightly its members
+  // cluster in UMAP space vs. the overall spread. Low ratio = spatially concentrated,
+  // high ratio = dispersed across the landscape.
+  const allX = data.map(d => d.x);
+  const allY = data.map(d => d.y);
+  const globalSpread = Math.sqrt(variance(allX) + variance(allY));
+
+  const groupStats = Object.entries(groups)
+    .filter(([, members]) => members.length >= 2)
+    .map(([val, members]) => {
+      const gx = members.map(d => d.x);
+      const gy = members.map(d => d.y);
+      const groupSpread = Math.sqrt(variance(gx) + variance(gy));
+      const ratio = globalSpread > 0 ? groupSpread / globalSpread : 1;
+      return { val, count: members.length, ratio };
+    })
+    .sort((a, b) => a.ratio - b.ratio);
+
+  if (groupStats.length === 0) return null;
+
+  // Classify groups
+  const tight = groupStats.filter(g => g.ratio < 0.55);
+  const dispersed = groupStats.filter(g => g.ratio > 0.85);
+  const avgRatio = groupStats.reduce((s, g) => s + g.ratio, 0) / groupStats.length;
+
+  const bullets = [];
+
+  // Overall assessment
+  if (avgRatio < 0.5) {
+    bullets.push(`- **${displayName}** aligns strongly with UMAP similarity — methods with the same ${displayName.toLowerCase()} tend to be similar overall, suggesting this attribute correlates with other method characteristics.`);
+  } else if (avgRatio > 0.8) {
+    bullets.push(`- **${displayName}** is largely independent of overall method similarity — methods that are close in the scatter plot often differ on this attribute, making it a useful dimension to explore orthogonally.`);
+  } else {
+    bullets.push(`- **${displayName}** partially aligns with the UMAP layout — some values form spatial clusters while others are spread across the landscape.`);
+  }
+
+  // Highlight tightest group(s)
+  if (tight.length > 0) {
+    const top = tight.slice(0, 2).map(g => `"${g.val}" (${g.count})`).join(' and ');
+    bullets.push(`- Spatially concentrated: ${top} — these methods cluster together in UMAP space, meaning they also share other attributes.`);
   }
 
+  // Highlight most dispersed group(s)
+  if (dispersed.length > 0) {
+    const top = dispersed.slice(0, 2).map(g => `"${g.val}" (${g.count})`).join(' and ');
+    bullets.push(`- Spatially dispersed: ${top} — these methods appear across the landscape despite sharing this ${displayName.toLowerCase()} value, suggesting they differ on other attributes.`);
+  }
+
+  return bullets.join('\n');
+}
+
+function variance(arr) {
+  if (arr.length < 2) return 0;
+  const mean = arr.reduce((s, v) => s + v, 0) / arr.length;
+  return arr.reduce((s, v) => s + (v - mean) ** 2, 0) / arr.length;
+}
+
+function buildMethodColorMap(data, colorBy) {
+  if (!data || !data.length) return {};
+  const cm = buildColorMap(data, colorBy);
+  const map = {};
+  data.forEach(d => {
+    const color = getPointColor(d, colorBy, cm);
+    // Store as a pseudo cluster ID that InsightBullets can use
+    map[d.name] = color;
+  });
+  return map;
+}
+
+export function ClusterInsight({ insight, loading, stats, onMethodClick, colorBy = 'cluster', data }) {
+  const isColumnMode = colorBy && colorBy !== 'cluster' && colorBy !== 'index';
+
+  const columnSummary = useMemo(
+    () => isColumnMode ? buildColumnSummary(data, colorBy) : null,
+    [data, colorBy, isColumnMode]
+  );
+
+  const displayInsight = isColumnMode ? columnSummary : insight;
+  const title = isColumnMode ? `${SHORT_NAMES[colorBy] || colorBy} Overview` : 'Cluster Overview';
+
+  // Build method -> color map
+  const { methodClusterMap, clusterLabelMap, useDirectColors } = useMemo(() => {
+    if (isColumnMode && data) {
+      // Direct color strings instead of cluster IDs
+      const directMap = buildMethodColorMap(data, colorBy);
+      // Build group label map
+      const groups = {};
+      data.forEach(d => {
+        const parts = smartSplit(d.metadata?.[colorBy] || '');
+        const primary = parts.length > 0 ? parts[0] : 'N/A';
+        if (!groups[primary]) groups[primary] = getPointColor(d, colorBy, buildColorMap(data, colorBy));
+      });
+      return { methodClusterMap: directMap, clusterLabelMap: groups, useDirectColors: true };
+    }
+    const mcm = {};
+    const clm = {};
+    // Build from stats first (has emoji-prefixed names)
+    if (stats) {
+      stats.forEach(cs => {
+        cs.methods.forEach(name => { mcm[name] = cs.id; });
+        if (cs.label) clm[cs.label] = cs.id;
+      });
+    }
+    // Also build from live data (covers all 56 methods including those without papers)
+    if (data) {
+      data.forEach(d => {
+        if (d.name && d.cluster !== undefined && !mcm[d.name]) {
+          mcm[d.name] = d.cluster;
+        }
+      });
+    }
+    return { methodClusterMap: mcm, clusterLabelMap: clm, useDirectColors: false };
+  }, [stats, data, colorBy, isColumnMode]);
+
+  if (!displayInsight && !loading) 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>
+        <span className="cluster-insight-title">{title}</span>
       </div>
       <div className="cluster-insight-body">
         {loading ? (
           <p className="cluster-insight-loading">Analyzing clusters...</p>
         ) : (
           <InsightBullets
-            text={insight}
+            text={displayInsight}
             methodClusterMap={methodClusterMap}
             clusterLabelMap={clusterLabelMap}
             onMethodClick={onMethodClick}
+            useDirectColors={useDirectColors}
           />
         )}
       </div>

frontend/src/components/InsightBullets.js

@@ -184,7 +184,12 @@ function renderWithEntities(text, queryKeywords, entityLookup, longRegex, shortR
 
 // ─── FORMAT BULLET ───
 
-function formatBullet(text, methodClusterMap, clusterLabelMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms) {
+function resolveColor(idOrColor, useDirectColors) {
+  if (useDirectColors) return idOrColor; // already a color string
+  return CLUSTER_COLORS[idOrColor % CLUSTER_COLORS.length];
+}
+
+function formatBullet(text, methodClusterMap, clusterLabelMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms, useDirectColors) {
   const quoteRegex = /("[^"]{3,}")/g;
   const segments = text.split(quoteRegex);
 
@@ -201,7 +206,7 @@ function formatBullet(text, methodClusterMap, clusterLabelMap, onMethodClick, qu
         );
         if (clusterKey !== undefined) {
           const cId = clusterLabelMap[clusterKey];
-          const color = CLUSTER_COLORS[cId % CLUSTER_COLORS.length];
+          const color = resolveColor(cId, useDirectColors);
           return (
             <span key={i} className="entity-cluster-label"
               style={{ color, backgroundColor: color + '18', borderColor: color }}>
@@ -229,7 +234,7 @@ function formatBullet(text, methodClusterMap, clusterLabelMap, onMethodClick, qu
           }
         }
       }
-      const clusterColor = clusterId !== undefined ? CLUSTER_COLORS[clusterId % CLUSTER_COLORS.length] : null;
+      const clusterColor = clusterId !== undefined ? resolveColor(clusterId, useDirectColors) : null;
       if (clusterColor && onMethodClick) {
         return (
           <span key={i} className="entity-method-clickable"
@@ -259,7 +264,7 @@ function formatBullet(text, methodClusterMap, clusterLabelMap, onMethodClick, qu
               const key = Object.keys(clusterLabelMap).find(l => l.toLowerCase() === part.toLowerCase());
               if (key) {
                 const cId = clusterLabelMap[key];
-                const color = CLUSTER_COLORS[cId % CLUSTER_COLORS.length];
+                const color = resolveColor(cId, useDirectColors);
                 return (
                   <span key={j} className="entity-cluster-label"
                     style={{ color, backgroundColor: color + '18', borderColor: color }}>
@@ -268,7 +273,7 @@ function formatBullet(text, methodClusterMap, clusterLabelMap, onMethodClick, qu
                 );
               }
               // Remaining text: check methods then entities
-              return <span key={j}>{renderMethodsAndEntities(part, methodClusterMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms)}</span>;
+              return <span key={j}>{renderMethodsAndEntities(part, methodClusterMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms, useDirectColors)}</span>;
             })}
           </span>
         );
@@ -276,11 +281,11 @@ function formatBullet(text, methodClusterMap, clusterLabelMap, onMethodClick, qu
     }
 
     // Unquoted: check method names then entities
-    return <span key={i}>{renderMethodsAndEntities(seg, methodClusterMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms)}</span>;
+    return <span key={i}>{renderMethodsAndEntities(seg, methodClusterMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms, useDirectColors)}</span>;
   });
 }
 
-function renderMethodsAndEntities(text, methodClusterMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms) {
+function renderMethodsAndEntities(text, methodClusterMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms, useDirectColors) {
   if (!methodClusterMap || !onMethodClick) {
     return renderWithEntities(text, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms);
   }
@@ -309,7 +314,7 @@ function renderMethodsAndEntities(text, methodClusterMap, onMethodClick, queryKe
   return parts.map((part, j) => {
     const variant = nameVariants[part.toLowerCase()];
     if (variant) {
-      const color = CLUSTER_COLORS[variant.clusterId % CLUSTER_COLORS.length];
+      const color = resolveColor(variant.clusterId, useDirectColors);
       return (
         <span key={j} className="entity-method-clickable"
           style={{ color, borderBottomColor: color }}
@@ -325,7 +330,7 @@ function renderMethodsAndEntities(text, methodClusterMap, onMethodClick, queryKe
 
 // ─── MAIN COMPONENT ───
 
-export default function InsightBullets({ text, methodClusterMap, clusterLabelMap, onMethodClick, query, termDictionary }) {
+export default function InsightBullets({ text, methodClusterMap, clusterLabelMap, onMethodClick, query, termDictionary, useDirectColors }) {
   const queryKeywords = useMemo(() => {
     const raw = extractQueryKeywords(query);
     return expandKeywordsWithAcronyms(raw);
@@ -341,10 +346,10 @@ export default function InsightBullets({ text, methodClusterMap, clusterLabelMap
     return (
       <ul className="insight-bullets">
         {bullets.map((line, i) => (
-          <li key={i}>{formatBullet(line.replace(/^-\s*/, ''), methodClusterMap, clusterLabelMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms)}</li>
+          <li key={i}>{formatBullet(line.replace(/^-\s*/, ''), methodClusterMap, clusterLabelMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms, useDirectColors)}</li>
         ))}
       </ul>
     );
   }
-  return <p>{formatBullet(text, methodClusterMap, clusterLabelMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms)}</p>;
+  return <p>{formatBullet(text, methodClusterMap, clusterLabelMap, onMethodClick, queryKeywords, entityLookup, longRegex, shortRegex, shortTerms, useDirectColors)}</p>;
 }

frontend/src/components/MethodTable.js

@@ -103,7 +103,8 @@ export default function MethodTable({
   return (
     <div className="table-panel">
       <div className="table-panel-header">
-        <span>{filteredData.length} of {data.length} Methods</span>
+        <span>Method Explorer</span>
+        <span className="method-count">{filteredData.length} of {data.length}</span>
         {hasHighlights && (
           <span className="hl-indicator">{highlightedMethods.length} highlighted</span>
         )}

frontend/src/components/NetworkGraph.js

@@ -1,9 +1,11 @@
 import React, { useMemo } from 'react';
 import Plot from 'react-plotly.js';
 import { CLUSTER_COLORS } from '../constants';
+import { getPointColor, buildColorMap } from '../utils';
 
 export default function NetworkGraph({
   data,
+  colorBy = 'cluster',
   highlightedMethods,
   hoveredIndex,
   onPointClick,
@@ -61,6 +63,8 @@ export default function NetworkGraph({
     return { intraEdges: intra, crossEdges: cross };
   }, [data]);
 
+  const colorMap = useMemo(() => buildColorMap(data || [], colorBy), [data, colorBy]);
+
   if (!data || data.length === 0) return null;
 
   // Intra-cluster edge traces (one per cluster, cluster colored)
@@ -103,7 +107,7 @@ export default function NetworkGraph({
     return 10;
   });
 
-  const markerColors = data.map(d => CLUSTER_COLORS[d.cluster] || '#999');
+  const markerColors = data.map(d => getPointColor(d, colorBy, colorMap));
 
   const markerOpacity = data.map((d, i) => {
     if (i === hoveredIndex) return 1;

frontend/src/components/ScatterPlot.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import Plot from 'react-plotly.js';
-import { smartSplit } from '../utils';
+import { smartSplit, getPointColor, buildColorMap } from '../utils';
 import { CLUSTER_COLORS, SHORT_NAMES } from '../constants';
 
 export default function ScatterPlot({
@@ -15,44 +15,14 @@ export default function ScatterPlot({
 }) {
   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]);
-
-  const COLUMN_COLORS = [
-    '#0C3383', '#0A88BA', '#F2D338', '#F28F38', '#D91E1E',
-    '#7B2D8E', '#3F681C', '#E75480', '#1B998B', '#FF6B6B',
-    '#4A90D9', '#D4A017', '#8B4513', '#2E8B57', '#CD5C5C',
-  ];
+  const colorMap = useMemo(() => buildColorMap(data, colorBy), [data, colorBy]);
 
   let markerColors, useDiscreteColors;
-  if (colorBy === 'cluster') {
-    markerColors = data.map(d => CLUSTER_COLORS[d.cluster] || '#999');
-    useDiscreteColors = true;
-  } else if (colorBy === 'index') {
+  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';
-      const idx = colorMap[primaryVal] ?? colorMap['N/A'] ?? 0;
-      return COLUMN_COLORS[idx % COLUMN_COLORS.length];
-    });
+    markerColors = data.map(d => getPointColor(d, colorBy, colorMap));
     useDiscreteColors = true;
   }
 
@@ -116,8 +86,6 @@ export default function ScatterPlot({
       },
       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
@@ -126,19 +94,15 @@ export default function ScatterPlot({
   const layout = {
     xaxis: {
       zeroline: false, showgrid: false,
-      showline: true, linecolor: '#d8dde4',
-      title: 'UMAP 1', titlefont: { size: 11, color: '#8691a0' },
-      tickfont: { size: 10, color: '#8691a0' },
+      showline: false, showticklabels: false, title: '',
     },
     yaxis: {
       zeroline: false, showgrid: false,
-      showline: true, linecolor: '#d8dde4',
-      title: 'UMAP 2', titlefont: { size: 11, color: '#8691a0' },
-      tickfont: { size: 10, color: '#8691a0' },
+      showline: false, showticklabels: false, title: '',
     },
     hovermode: 'closest',
     height: 420,
-    margin: { t: 8, b: 40, l: 45, r: 10 },
+    margin: { t: 12, b: 16, l: 12, r: 12 },
     paper_bgcolor: 'transparent',
     plot_bgcolor: '#fafcfd'
   };
@@ -159,7 +123,7 @@ export default function ScatterPlot({
       }}
       onUnhover={onUnhover}
       style={{ width: '100%' }}
-      config={{ responsive: true, displayModeBar: true }}
+      config={{ responsive: true, displayModeBar: 'hover' }}
       useResizeHandler={true}
     />
   );

frontend/src/components/WeightSliders.js

@@ -0,0 +1,56 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { SHORT_NAMES, WEIGHT_COLUMNS } from '../constants';
+import Tooltip from './Tooltip';
+
+export default function WeightSliders({ weights, defaultWeights, aiAdjustedCols, onChange, onReset }) {
+  const [local, setLocal] = useState(weights);
+  const debounceRef = useRef(null);
+
+  // Sync local state when weights change externally (e.g., after query)
+  useEffect(() => {
+    setLocal(weights);
+  }, [weights]);
+
+  const handleChange = (col, value) => {
+    const next = { ...local, [col]: Number(value) };
+    setLocal(next);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => onChange(next), 500);
+  };
+
+  return (
+    <div className="weight-panel">
+      <div className="weight-panel-bar">
+        <span className="weight-panel-label">Attribute Weights</span>
+        <Tooltip text="Weights control how much each attribute contributes to the UMAP distance calculation. A higher weight means methods that differ on that attribute will be pushed further apart, while methods that agree will be pulled closer. Cluster labels are generated from the 3 highest-weighted columns. When you ask a query, the AI adjusts these to emphasize the most relevant attributes." wide>
+          <span className="chart-help">?</span>
+        </Tooltip>
+        <button className="weight-reset-btn" onClick={onReset}>Reset Defaults</button>
+      </div>
+      <div className="weight-panel-grid">
+        {WEIGHT_COLUMNS.map(col => {
+          const val = local[col] ?? defaultWeights[col] ?? 10;
+          const isAi = aiAdjustedCols && aiAdjustedCols.has(col);
+          const label = SHORT_NAMES[col] || col;
+          return (
+            <div key={col} className="weight-slider-row">
+              <span className="weight-slider-label" title={col}>
+                {label}
+                {isAi && <span className="weight-ai-badge">AI</span>}
+              </span>
+              <input
+                type="range"
+                min="0"
+                max="20"
+                value={val}
+                onChange={(e) => handleChange(col, e.target.value)}
+                className="weight-slider-input"
+              />
+              <span className="weight-slider-value">{val}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

frontend/src/constants.js

@@ -30,6 +30,43 @@ export const SHORT_NAMES = {
   'Method Era': 'Era',
 };
 
+export const COLOR_BY_OPTIONS = [
+  { value: 'cluster', label: 'Cluster' },
+  { value: 'Planning Method', label: 'Planning Method' },
+  { value: 'End-effector Hardware', label: 'End-effector' },
+  { value: 'Object Configuration', label: 'Object Config' },
+  { value: 'Input Data', label: 'Input Data' },
+  { value: 'Training Data', label: 'Training Data' },
+  { value: 'Output Pose', label: 'Output Pose' },
+  { value: 'Backbone', label: 'Backbone' },
+  { value: 'Camera Position(s)', label: 'Camera' },
+  { value: 'Corresponding Dataset (see repository linked above)', label: 'Dataset' },
+  { value: 'Simulator (see repository linked above)', label: 'Simulator' },
+  { value: 'Learning Paradigm', label: 'Learning' },
+  { value: 'Sensor Complexity', label: 'Sensor' },
+  { value: 'Scene Difficulty', label: 'Scene' },
+  { value: 'Gripper Type', label: 'Gripper Type' },
+  { value: 'Method Era', label: 'Era' },
+];
+
+export const DEFAULT_WEIGHTS = {
+  'Planning Method': 10,
+  'Training Data': 8,
+  'End-effector Hardware': 6,
+  'Object Configuration': 10,
+  'Input Data': 6,
+  'Output Pose': 10,
+  'Corresponding Dataset (see repository linked above)': 5,
+  'Simulator (see repository linked above)': 3,
+  'Backbone': 5,
+  'Metric(s) Used ': 5,
+  'Camera Position(s)': 4,
+  'Language': 4,
+  'Description': 7,
+};
+
+export const WEIGHT_COLUMNS = Object.keys(DEFAULT_WEIGHTS);
+
 export const TABLE_COLUMNS = [
   'Planning Method',
   'Training Data',

frontend/src/staticClusterInsight.json

@@ -96,11 +96,13 @@
       "methods": [
         "\ud83e\udd16 GraspVLA",
         "DeepRLManip",
+        "Dex-Net",
         "Dex-Net 1.0 (MV-CNNs)",
         "Dex-Net 2.0 (GQ-CNN)",
         "Dex-Net 2.1",
         "Dex-Net 3.0",
         "Dex-Net 4.0",
+        "GA-DDPG",
         "Goal-Auxiliary Deep Deterministic Policy Gradient (GA-DDPG)",
         "GRAFF (Grasp-Affordances)",
         "GraspXL",
@@ -183,7 +185,9 @@
       "id": 2,
       "label": "Sampling / Three-finger / Singulated",
       "methods": [
+        "DDG",
         "Deep Dexterous Grasping (DDG)",
+        "DDGC",
         "Deep Dexterous Grasping in Clutter (DDGC)",
         "Multi-FinGAN",
         "Robust Grasp Planning Over Uncertain Shape Completions"
@@ -318,6 +322,7 @@
         "3DAPNet",
         "AnyGrasp",
         "ggcnn_plus",
+        "GPNet",
         "Grasp Proposal Network (GPNet)",
         "GraspSAM",
         "PointNet++ Grasping",
@@ -457,11 +462,15 @@
         "CaTGrasp",
         "Edge Grasp Network",
         "geometric-object-grasper",
+        "GIGA",
         "Grasp detection via Implicit Geometry and Affordance (GIGA)",
+        "GPD",
         "Grasp Pose Detection (GPD)",
         "PointNetGPD",
         "ROI-GD",
+        "S4G",
         "Single-Shot SE(3) Grasp Detection (S4G)",
+        "VGN",
         "Volumetric Grasping Network (VGN)"
       ],
       "size": 9,

frontend/src/utils.js

@@ -4,6 +4,44 @@
  * 'Dexterous grasp, "6-DoF grasp pose (x, y, z, r, p, y)"'
  *   -> ['Dexterous grasp', '6-DoF grasp pose (x, y, z, r, p, y)']
  */
+import { CLUSTER_COLORS } from './constants';
+
+const COLUMN_COLORS = [
+  '#0C3383', '#0A88BA', '#F2D338', '#F28F38', '#D91E1E',
+  '#7B2D8E', '#3F681C', '#E75480', '#1B998B', '#FF6B6B',
+  '#4A90D9', '#D4A017', '#8B4513', '#2E8B57', '#CD5C5C',
+];
+
+/**
+ * Get the color for a data point based on the current colorBy mode.
+ */
+export function getPointColor(d, colorBy, colorMap) {
+  if (colorBy === 'cluster') {
+    return CLUSTER_COLORS[d.cluster] || '#999';
+  }
+  const parts = smartSplit(d.metadata?.[colorBy] || '');
+  const primaryVal = parts.length > 0 ? parts[0] : 'N/A';
+  const idx = colorMap?.[primaryVal] ?? 0;
+  return COLUMN_COLORS[idx % COLUMN_COLORS.length];
+}
+
+/**
+ * Build a value -> index map for column-based coloring.
+ * Sorted by count descending to match the legend order.
+ */
+export function buildColorMap(data, colorBy) {
+  if (!data.length || colorBy === 'cluster' || colorBy === 'index') return null;
+  const counts = {};
+  data.forEach(d => {
+    const parts = smartSplit(d.metadata?.[colorBy] || '');
+    const primary = parts.length > 0 ? parts[0] : 'N/A';
+    counts[primary] = (counts[primary] || 0) + 1;
+  });
+  const map = {};
+  Object.entries(counts).sort((a, b) => b[1] - a[1]).forEach(([val], i) => { map[val] = i; });
+  return map;
+}
+
 export function smartSplit(value) {
   if (!value) return [];
   const result = [];