Smooth heatmap, welcome-screen import, hide header dropdown on landing

- Replace per-domain RBF length scales (0.075/0.15/0.30) with uniform 0.18
  to eliminate jagged patches from inconsistent kernel smoothness
- Add bilinear interpolation to heatmap renderer (100×100 screen cells
  sampling a 50×50 GP grid) for smooth color gradients instead of blocky cells
- Remove grid lines since interpolated cells are too small for visible lines
- Import on welcome screen now auto-switches to map view with "all" domain
- Hide domain dropdown on welcome screen; show only import button in header
- Add setSelectedDomain() to sync header dropdown on programmatic domain switch
- Enrich imported responses missing x/y coords from question index during
  switchDomain (handles older exports that lacked coordinates)
- Pass uniform length scale to estimator.restore() to override stale per-obs values

Co-Authored-By: Claude (claude-opus-4-6) <noreply@anthropic.com>

Author: jeremymanning

src/app.js

@@ -12,7 +12,7 @@ import {
 import * as registry from './domain/registry.js';
 import { load as loadDomain } from './domain/loader.js';
 import { indexQuestions, getAvailableQuestions } from './domain/questions.js';
-import { Estimator, DEFAULT_LENGTH_SCALE } from './learning/estimator.js';
+import { Estimator } from './learning/estimator.js';
 import { Sampler } from './learning/sampler.js';
 import { getCentrality } from './learning/curriculum.js';
 import { Renderer } from './viz/renderer.js';
@@ -29,24 +29,11 @@ import { announce, setupKeyboardNav } from './utils/accessibility.js';
 const GLOBAL_REGION = { x_min: 0, x_max: 1, y_min: 0, y_max: 1 };
 const GLOBAL_GRID_SIZE = 50;
 
-function lengthScaleForDomain(domain) {
-  if (!domain) return DEFAULT_LENGTH_SCALE;
-  if (domain.level === 'all') return DEFAULT_LENGTH_SCALE * 2;
-  if (domain.level === 'sub') return DEFAULT_LENGTH_SCALE * 0.5;
-  return DEFAULT_LENGTH_SCALE; // general
-}
-
-function lengthScaleForDomainId(domainId) {
-  const domain = registry.getDomain(domainId);
-  return lengthScaleForDomain(domain);
-}
-
-function enrichResponsesWithLengthScale(responses) {
-  return responses.map(r => {
-    if (r.lengthScale != null) return r;
-    return { ...r, lengthScale: lengthScaleForDomainId(r.domain_id) };
-  });
-}
+// Uniform length scale for all observations — no per-domain variation.
+// Previously sub-domains used 0.075 and "all" used 0.30, which created jagged,
+// inconsistent smoothness. A single scale of 0.18 produces natural gradients
+// while preserving spatial structure in the Matérn 3/2 kernel.
+const UNIFORM_LENGTH_SCALE = 0.18;
 
 let renderer = null;
 let minimap = null;
@@ -321,13 +308,31 @@ async function switchDomain(domainId) {
     estimator.init(domainGrid, domainRegion);
     sampler.configure(domainGrid, domainRegion);
 
-    const allResponses = enrichResponsesWithLengthScale($responses.get());
+    // Enrich any responses missing x/y from the freshly-loaded question index.
+    // This handles older exports that lacked coordinates.
+    let allResponses = $responses.get();
+    let enriched = 0;
+    const patched = allResponses.map(r => {
+      if (r.x != null && r.y != null) return r;
+      const q = questionIndex.get(r.question_id);
+      if (q && q.x != null && q.y != null) {
+        enriched++;
+        return { ...r, x: q.x, y: q.y };
+      }
+      return r;
+    });
+    if (enriched > 0) {
+      console.log(`[app] Enriched ${enriched} responses with x/y from question index`);
+      $responses.set(patched);
+      allResponses = patched;
+    }
+
     const relevantResponses = allResponses.filter(
       (r) => r.x != null && r.y != null
     );
     if (relevantResponses.length > 0) {
-      estimator.restore(relevantResponses);
-      globalEstimator.restore(relevantResponses);
+      estimator.restore(relevantResponses, UNIFORM_LENGTH_SCALE);
+      globalEstimator.restore(relevantResponses, UNIFORM_LENGTH_SCALE);
     }
 
     const estimates = estimator.predict();
@@ -413,9 +418,6 @@ function handleAnswer(selectedKey, question) {
 
   const isCorrect = selectedKey === question.correct_answer;
 
-  const questionDomainId = (question.domain_ids || []).find(id => id !== 'all') || currentDomainBundle.domain.id;
-  const ls = lengthScaleForDomainId(questionDomainId);
-
   const response = {
     question_id: question.id,
     domain_id: currentDomainBundle.domain.id,
@@ -424,16 +426,15 @@ function handleAnswer(selectedKey, question) {
     timestamp: Date.now(),
     x: question.x,
     y: question.y,
-    lengthScale: ls,
   };
 
   const current = $responses.get();
   const filtered = current.filter(r => r.question_id !== question.id);
   const isReanswer = filtered.length < current.length;
   $responses.set([...filtered, response]);
 
-  estimator.observe(question.x, question.y, isCorrect, ls);
-  globalEstimator.observe(question.x, question.y, isCorrect, ls);
+  estimator.observe(question.x, question.y, isCorrect, UNIFORM_LENGTH_SCALE);
+  globalEstimator.observe(question.x, question.y, isCorrect, UNIFORM_LENGTH_SCALE);
   const estimates = estimator.predict();
   $estimates.set(estimates);
 
@@ -547,10 +548,9 @@ function handleImport(data) {
   $responses.set(merged);
 
   if (estimator) {
-    const enriched = enrichResponsesWithLengthScale(merged);
-    const relevant = enriched.filter(r => r.x != null && r.y != null);
-    estimator.restore(relevant);
-    if (globalEstimator) globalEstimator.restore(relevant);
+    const relevant = merged.filter(r => r.x != null && r.y != null);
+    estimator.restore(relevant, UNIFORM_LENGTH_SCALE);
+    if (globalEstimator) globalEstimator.restore(relevant, UNIFORM_LENGTH_SCALE);
     const estimates = estimator.predict();
     $estimates.set(estimates);
 
@@ -566,6 +566,13 @@ function handleImport(data) {
   announce(msg);
   _showBanner(msg, 'success');
   console.log('[import]', msg);
+
+  // If we're still on the welcome screen, switch to map view with "all" domain.
+  // switchDomain will re-restore the GP from $responses (now including imports).
+  if (!currentDomainBundle) {
+    controls.setSelectedDomain('all');
+    $activeDomain.set('all');
+  }
 }
 
 function handleViewportChange(viewport) {

src/learning/estimator.js

@@ -228,18 +228,23 @@ export class Estimator {
    * Restore from persisted UserResponse[].
    * Each response may include a `lengthScale` for per-observation RBF width.
    */
-  restore(responses) {
+  restore(responses, uniformLengthScale) {
     this.reset();
 
     if (!this._region || !responses || responses.length === 0) return;
 
+    // Use a uniform length scale for all restored observations to ensure
+    // consistent smoothness. Any per-observation lengths from older exports
+    // are intentionally ignored.
+    const ls = uniformLengthScale || this._lengthScale;
+
     for (const r of responses) {
       if (r.x != null && r.y != null) {
         this._observations.push({
           x: r.x,
           y: r.y,
           value: r.is_correct ? 1.0 : 0.0,
-          lengthScale: r.lengthScale || this._lengthScale,
+          lengthScale: ls,
         });
       }
     }

src/ui/controls.js

@@ -8,6 +8,7 @@ let onExportCb = null;
 let onImportCb = null;
 
 let container = null;
+let dropdownEl = null;
 let resetButton = null;
 let exportButton = null;
 let importButton = null;
@@ -137,6 +138,7 @@ export function init(headerElement) {
   }
   container = domainSelector;
   container.innerHTML = '';
+  container.hidden = false; // Ensure visible even on the welcome screen (import button lives here)
 
   container.style.display = 'flex';
   container.style.alignItems = 'center';
@@ -173,10 +175,11 @@ export function init(headerElement) {
     document.head.appendChild(style);
   }
 
-  const dropdown = createDropdown('Choose a domain\u2026', buildOptions(), (value) => {
+  dropdownEl = createDropdown('Choose a domain\u2026', buildOptions(), (value) => {
     if (onDomainSelectCb) onDomainSelectCb(value);
   });
-  container.appendChild(dropdown);
+  dropdownEl.hidden = true; // Hidden on welcome screen; shown by showActionButtons()
+  container.appendChild(dropdownEl);
 
   resetButton = document.createElement('button');
   resetButton.className = 'control-btn';
@@ -205,7 +208,7 @@ export function init(headerElement) {
   importButton.ariaLabel = 'Import saved progress';
   importButton.dataset.tooltip = 'Import progress';
   importButton.innerHTML = '<i class="fa-solid fa-upload"></i>';
-  importButton.hidden = true;
+  // Import is always visible — users may want to restore saved progress from the welcome screen
 
   importButton.addEventListener('click', () => {
     // Create a file input, attach to DOM (required by some browsers for
@@ -270,11 +273,26 @@ export function onImport(callback) {
 
 export function showActionButtons() {
   if (container) container.hidden = false;
+  if (dropdownEl) dropdownEl.hidden = false;
   if (resetButton) resetButton.hidden = false;
   if (exportButton) exportButton.hidden = false;
   if (importButton) importButton.hidden = false;
 }
 
+/**
+ * Programmatically update the header dropdown to show a given domain as selected.
+ * Used when the domain changes via code (e.g. import on welcome screen) rather
+ * than a user click.
+ */
+export function setSelectedDomain(domainId) {
+  if (!dropdownEl) return;
+  const option = dropdownEl.querySelector(`.custom-select-option[data-value="${domainId}"]`);
+  if (!option) return;
+  const valueSpan = dropdownEl.querySelector('.custom-select-value');
+  if (valueSpan) valueSpan.textContent = option.textContent.trim();
+  dropdownEl.dataset.value = domainId;
+}
+
 export function createLandingSelector(container, callback) {
   const dropdown = createDropdown('Choose a region to explore\u2026', buildOptions(), callback);
   dropdown.classList.add('custom-select--landing');

src/viz/renderer.js

@@ -464,13 +464,9 @@ export class Renderer {
     const region = this._heatmapRegion;
     if (!region) return;
 
-    // The heatmap grid covers the domain region in world space.
-    // We draw fixed-size screen cells and look up which grid cell each maps to.
-    // Screen pixel (sx, sy) → world coord → grid cell (gx, gy).
-    //
-    // World coords: point.x * w = panX + normX * zoom * w
-    //   normX = (screenX - panX) / (zoom * w)
-    const SCREEN_CELLS = 50; // fixed number of screen cells
+    // Use more screen cells for a smoother appearance. The GP grid is N×N but
+    // we sample at higher resolution and bilinearly interpolate between cells.
+    const SCREEN_CELLS = 100;
     const cellW = w / SCREEN_CELLS;
     const cellH = h / SCREEN_CELLS;
 
@@ -479,6 +475,45 @@ export class Renderer {
     const rXSpan = region.x_max - region.x_min;
     const rYSpan = region.y_max - region.y_min;
 
+    // Helper: bilinear interpolation of grid values
+    function sampleGrid(gxf, gyf) {
+      const gx0 = Math.max(0, Math.min(N - 1, Math.floor(gxf)));
+      const gy0 = Math.max(0, Math.min(N - 1, Math.floor(gyf)));
+      const gx1 = Math.min(N - 1, gx0 + 1);
+      const gy1 = Math.min(N - 1, gy0 + 1);
+      const fx = gxf - gx0; // fractional x [0,1)
+      const fy = gyf - gy0; // fractional y [0,1)
+
+      const v00 = grid[gy0 * N + gx0];
+      const v10 = grid[gy0 * N + gx1];
+      const v01 = grid[gy1 * N + gx0];
+      const v11 = grid[gy1 * N + gx1];
+
+      // Bilinear blend
+      const top = v00 + (v10 - v00) * fx;
+      const bot = v01 + (v11 - v01) * fx;
+      return top + (bot - top) * fy;
+    }
+
+    // Helper: bilinear interpolation of evidence counts (for opacity)
+    function sampleEvidence(gxf, gyf) {
+      const gx0 = Math.max(0, Math.min(N - 1, Math.floor(gxf)));
+      const gy0 = Math.max(0, Math.min(N - 1, Math.floor(gyf)));
+      const gx1 = Math.min(N - 1, gx0 + 1);
+      const gy1 = Math.min(N - 1, gy0 + 1);
+      const fx = gxf - gx0;
+      const fy = gyf - gy0;
+
+      const e00 = evidence[gy0 * N + gx0];
+      const e10 = evidence[gy0 * N + gx1];
+      const e01 = evidence[gy1 * N + gx0];
+      const e11 = evidence[gy1 * N + gx1];
+
+      const top = e00 + (e10 - e00) * fx;
+      const bot = e01 + (e11 - e01) * fx;
+      return top + (bot - top) * fy;
+    }
+
     ctx.globalAlpha = 0.45;
 
     for (let sy = 0; sy < SCREEN_CELLS; sy++) {
@@ -489,44 +524,26 @@ export class Renderer {
         const wx = (centerSX - this._panX) / (this._zoom * w);
         const wy = (centerSY - this._panY) / (this._zoom * h);
 
-        // Map world coord to grid cell within domain region
-        const gx = Math.floor(((wx - rXMin) / rXSpan) * N);
-        const gy = Math.floor(((wy - rYMin) / rYSpan) * N);
+        // Map world coord to fractional grid position within domain region
+        const gxf = ((wx - rXMin) / rXSpan) * N - 0.5;
+        const gyf = ((wy - rYMin) / rYSpan) * N - 0.5;
 
-        if (gx < 0 || gx >= N || gy < 0 || gy >= N) {
+        if (gxf < -1 || gxf >= N || gyf < -1 || gyf >= N) {
           // Outside domain region — draw neutral prior
           ctx.fillStyle = 'rgba(245, 220, 105, 0.25)';
           ctx.fillRect(sx * cellW, sy * cellH, cellW + 0.5, cellH + 0.5);
           continue;
         }
 
-        const idx = gy * N + gx;
-        const val = grid[idx];
-        const ev = evidence[idx];
+        const val = sampleGrid(gxf, gyf);
+        const ev = sampleEvidence(gxf, gyf);
         const [r, g, b] = valueToColor(val);
-        const a = ev === 0 ? 0.5 : 0.75;
+        const a = ev < 0.5 ? 0.5 : 0.75;
         ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
         ctx.fillRect(sx * cellW, sy * cellH, cellW + 0.5, cellH + 0.5);
       }
     }
 
-    ctx.globalAlpha = 1;
-    // Only draw grid lines if cells are large enough to be visible
-    if (cellW > 4 && cellH > 4) {
-      ctx.strokeStyle = 'rgba(0, 0, 0, 0.06)';
-      ctx.lineWidth = 0.5;
-      ctx.beginPath();
-      for (let i = 0; i <= SCREEN_CELLS; i++) {
-        const x = i * cellW;
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, h);
-        const y = i * cellH;
-        ctx.moveTo(0, y);
-        ctx.lineTo(w, y);
-      }
-      ctx.stroke();
-    }
-
     ctx.globalAlpha = 1;
   }