speedandcurrent 2.3.4 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "speedandcurrent",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "A plugin that automatically corrects boat speed and calculates current and leeway using sensor fusion.",
   "main": "index.js",
   "scripts": {
@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "kalman-filter": "^2.3.0",
-    "signalkutilities": "^3.1.5"
+    "signalkutilities": "^3.1.6"
   },
   "files": [
     "icon.png",

package/public/TableRenderer.js

@@ -1,14 +1,18 @@
 // TableRenderer — purpose-built renderer for the correction table.
 // Rows = speed bins (knots), columns = heel bins (degrees).
 // Each learned cell shows factor deviation (±%) and leeway (°).
-// Background encodes factor: green = paddlewheel reads slow, orange = reads fast.
-// Active cell (last updated) gets a bold border; interpolation neighbours get a faint tint.
+// Background encodes factor and leeway; a bottom bar encodes fusion weight.
+// Active cell (last updated) gets a thin black border.
 
 const RAD_TO_DEG = 180 / Math.PI;
 const MPS_TO_KNOTS = 1.943844;
 
 const DEFAULT_SPEED_SYMBOL = 'kn';
 const DEFAULT_HEEL_SYMBOL  = '°';
+
+const MARKER_CORRECTED_COLOR = '#0d6efd';
+const MARKER_RAW_COLOR = '#dc3545';
+const MARKER_DOT_RADIUS = 8;
 function fmtSpeed(mps)  { return (mps * MPS_TO_KNOTS).toFixed(1); }
 function fmtHeel(rad)   { return (rad * RAD_TO_DEG).toFixed(0); }
 function fmtFactor(f)   { const p = (f - 1) * 100; return (p >= 0 ? '+' : '') + p.toFixed(1) + '%'; }
@@ -38,7 +42,75 @@ class TableRenderer {
       el.appendChild(this._dataRow(r, rIndex, col, table, maxDev, fmtSpeedFn));
       rIndex++;
     }
-    return el;
+
+    const wrap = document.createElement('div');
+    wrap.classList.add('Table2D-wrap');
+    wrap.appendChild(el);
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.classList.add('Table2D-markers');
+    wrap.appendChild(svg);
+    return wrap;
+  }
+
+  // Overlay a dot for the uncorrected (raw) speed and a dot for the corrected
+  // speed, both positioned at the raw heel column.
+  // wrap: the element returned by render(). row/col: the table's axis config
+  // ({min,max,step}). marker: { rawSpeed, heel, correctedSpeed } in raw (SI)
+  // units, or null/undefined to clear the overlay.
+  renderMarkers(wrap, row, col, marker) {
+    const svg = wrap.querySelector('.Table2D-markers');
+    const table = wrap.querySelector('.Table2D');
+    if (!svg || !table) return;
+    svg.innerHTML = '';
+    if (!marker) return;
+    const { rawSpeed, heel, correctedSpeed } = marker;
+    if (![rawSpeed, heel, correctedSpeed].every(Number.isFinite)) return;
+
+    const wrapRect = wrap.getBoundingClientRect();
+    svg.setAttribute('width', wrapRect.width);
+    svg.setAttribute('height', wrapRect.height);
+
+    const rowHeaders = [...table.querySelectorAll('th.TableRowHeader:not(.TableCorner)')];
+    const colHeaders = [...table.querySelectorAll('th.TablecolumnHeader')];
+    if (!rowHeaders.length || !colHeaders.length) return;
+
+    const centerY = rowHeaders.map(th => {
+      const r = th.getBoundingClientRect();
+      return (r.top + r.bottom) / 2 - wrapRect.top;
+    });
+    const centerX = colHeaders.map(th => {
+      const r = th.getBoundingClientRect();
+      return (r.left + r.right) / 2 - wrapRect.left;
+    });
+
+    const x       = this._lerpAxis(centerX, (heel - col.min) / col.step);
+    const yRaw    = this._lerpAxis(centerY, (rawSpeed - row.min) / row.step);
+    const yCorr   = this._lerpAxis(centerY, (correctedSpeed - row.min) / row.step);
+
+    svg.appendChild(this._markerDot(x, yRaw, MARKER_RAW_COLOR));
+    svg.appendChild(this._markerDot(x, yCorr, MARKER_CORRECTED_COLOR));
+  }
+
+  // Interpolate a continuous axis index (may be fractional, out of range) against
+  // an array of known pixel centers for each axis bin.
+  _lerpAxis(centers, frac) {
+    const n = centers.length;
+    const f = Math.max(0, Math.min(n - 1, frac));
+    const i0 = Math.floor(f);
+    const i1 = Math.min(i0 + 1, n - 1);
+    const t = f - i0;
+    return centers[i0] + (centers[i1] - centers[i0]) * t;
+  }
+
+  _markerDot(x, y, color) {
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+    circle.setAttribute('cx', x);
+    circle.setAttribute('cy', y);
+    circle.setAttribute('r', MARKER_DOT_RADIUS);
+    circle.setAttribute('fill', color);
+    circle.setAttribute('stroke', '#fff');
+    circle.setAttribute('stroke-width', 1);
+    return circle;
   }
 
   _headerRow(col, cornerText, fmtHeelFn) {
@@ -89,7 +161,7 @@ class TableRenderer {
       td.appendChild(d);
       const color = this._factorColor(factor, maxDev);
       if (leeway !== null) {
-        const angleDeg = 90 + leeway * RAD_TO_DEG * 1;
+        const angleDeg = 90 + leeway * RAD_TO_DEG;
         td.style.background = `repeating-linear-gradient(
           ${angleDeg}deg,
           ${color} 0px, ${color} 9px,
@@ -107,13 +179,19 @@ class TableRenderer {
     }
 
     const attrs = cell.displayAttributes;
-    if (attrs?.selected)          td.classList.add('cell--active');
-    else if (attrs?.normWeight > 0) td.classList.add('cell--neighbour');
+    if (Number.isFinite(attrs?.normWeight) && attrs.normWeight > 0) {
+      const d = document.createElement('div');
+      d.className = 'cell-weight';
+      const weight = Math.max(0, Math.min(1, attrs.normWeight));
+      d.style.width = `${weight * 100}%`;
+      d.title = `Fusion weight ${(weight * 100).toFixed(1)}%`;
+      td.appendChild(d);
+    }
+    if (attrs?.selected) td.classList.add('cell--active');
 
     return td;
   }
 
-  // Find the largest absolute factor deviation from 1 to normalise the color scale.
   _computeMaxDev(table) {
     let maxDev = 0;
     for (const row of table) {
@@ -123,21 +201,18 @@ class TableRenderer {
         if (dev > maxDev) maxDev = dev;
       }
     }
-    return maxDev || 0.05; // avoid a fully white table when all factors are near 1
+    return maxDev || 0.05;
   }
 
-  // factor < 1: paddlewheel reads fast → white→orange
-  // factor > 1: paddlewheel reads slow → white→green
   _factorColor(factor, maxDev) {
     if (!Number.isFinite(factor)) return '';
     const dev = factor - 1;
     if (Math.abs(dev) < 1e-6) return '';
-    const a = Math.min(1, Math.abs(dev) / maxDev);
+    const intensity = Math.min(1, Math.abs(dev) / maxDev);
     if (dev < 0) {
-      return `rgb(255,${Math.round(255 - 90 * a)},${Math.round(255 * (1 - a))})`; // white→orange
-    } else {
-      return `rgb(${Math.round(255 * (1 - a))},${Math.round(255 - 95 * a)},${Math.round(255 - 175 * a)})`; // white→green
+      return `rgb(255,${Math.round(255 - 90 * intensity)},${Math.round(255 * (1 - intensity))})`;
     }
+    return `rgb(${Math.round(255 * (1 - intensity))},${Math.round(255 - 95 * intensity)},${Math.round(255 - 175 * intensity)})`;
   }
 }
 

package/public/app.js

@@ -235,7 +235,12 @@ async function apiGet(path) {
   const ct = res.headers.get('content-type') || '';
   if (!ct.includes('application/json')) { showMessage('Unexpected server response.'); return null; }
   showMessage('');
-  return res.json();
+  try {
+    return await res.json();
+  } catch (err) {
+    showMessage('Unexpected server response.');
+    return null;
+  }
 }
 
 // PUT /api/settings: server returns full merged config — store it and re-render.
@@ -297,46 +302,21 @@ function _refreshMessage() {
 const paramMeta = {
   estimateBoatSpeed:     { label: 'Estimate boat speed',                  type: 'boolean' },
   updateCorrectionTable: { label: 'Update correction table',              type: 'boolean' },
-  suspendLearningOnNavigationState: { label: 'Suspend on navigation.state = motoring', type: 'boolean', description: 'Suspend learning when navigation.state is motoring. Anchored and moored always suspend learning when the path is available.' },
-  assumeCurrent:         { label: 'Assume current during update',         type: 'boolean', description: 'Experimental, works best when currents are relatively stable.' },
+  suspendLearningOnNavigationState: { label: 'Suspend on navigation.state', type: 'boolean', description: 'When enabled, navigation.state can override the vessel\u2019s own SOG-based moving/not-moving state: anchored, moored, or motoring are treated as not moving (learning suspended, leeway zeroed). It can never force "moving" when SOG says otherwise.' },
   sogFallback:           { label: 'Groundspeed fallback',                 type: 'boolean', description: 'Output Groundspeed as Boatspeed when the paddlewheel sensor is malfunctioning or stalled.' },
-  stability:             { label: 'Stability (1–20)',                     type: 'number', min: 1, max: 20, step: 1, default: 7, description: 'How quickly the correction table adapts to new observations. Higher values mean slower, more stable changes.' },
+  correctionDriftRate:   { label: 'Correction drift',                    type: 'number', unit: 'knots/month', min: 0, max: 3, step: 0.1, default: 0.3, description: 'How quickly the correction may change over time (knots/month). 0.3 knots/month means the correction can typically change by about 0.3 knots over a month.' },
   showStatistics:        { label: 'Show statistics (σ)',                  type: 'boolean', description: 'Display standard deviation alongside smoothed values for debugging.' },
-  smootherClass: {
-    label: 'Smoother type', type: 'select',
-    description: 'Smoothing applied to all sensor inputs for learning only.',
-    options: [
-      { value: 'MovingAverageSmoother', label: 'Moving average (window)' },
-      { value: 'ExponentialSmoother',   label: 'Exponential (τ)' },
-      { value: 'KalmanSmoother',        label: 'Kalman filter' },
-    ]
-  },
-  smootherTau: {
-    label: 'Time constant (τ)', type: 'number', unit: 's',
-    min: 1, max: 60, step: 0.5, default: 3,
-    description: 'Time constant in seconds.'
-  },
   smootherTimeSpan: {
     label: 'Window size', type: 'number', unit: 's',
-    min: 2, max: 60, step: 0.5, default: 5,
-    description: 'Moving-average window in seconds.'
-  },
-  smootherSteadyState: {
-    label: 'Kalman gain', type: 'number',
-    min: 0.01, max: 0.99, step: 0.01, default: 0.2,
-    description: 'Steady-state Kalman gain (0 ≈ slow/smooth, 1 ≈ fast/raw). Clamped to 0.01–0.99.'
+    min: 5, max: 60, step: 0.5, default: 5,
+    description: 'Moving-average window in seconds. Learning runs once per window plus a one-second gap.'
   },
 };
 
 // Settings groups for each UI section
 const ESTIMATION_SETTING_KEYS = ['sogFallback'];
-const LEARNING_SETTING_KEYS   = ['stability', 'suspendLearningOnNavigationState', 'assumeCurrent', 'showStatistics'];
-const SMOOTHER_SETTING_KEYS   = [
-  'smootherClass',
-  { key: 'smootherTau',         showIf: cfg => cfg.smootherClass === 'ExponentialSmoother' },
-  { key: 'smootherTimeSpan',    showIf: cfg => (cfg.smootherClass || 'MovingAverageSmoother') === 'MovingAverageSmoother' },
-  { key: 'smootherSteadyState', showIf: cfg => cfg.smootherClass === 'KalmanSmoother' },
-];
+const LEARNING_SETTING_KEYS   = ['correctionDriftRate', 'suspendLearningOnNavigationState', 'showStatistics'];
+const SMOOTHER_SETTING_KEYS   = ['smootherTimeSpan'];
 
 // Build one settings control for a key.
 function createSettingControl(key, meta, value) {
@@ -500,6 +480,15 @@ function itemLabel(item) {
   return metaById[item.id]?.displayName ?? item.path ?? item.id;
 }
 
+function formatNavigationStateValue(navState) {
+  if (!navState) return '—';
+  if (navState.pathKnown === false) return 'not available';
+  // Use `value` rather than `ready` — navigation.state changes infrequently, so it goes
+  // stale (ready=false) between changes even though the last known value is still valid.
+  if (navState.value == null) return 'not ready';
+  return navState.isStale ? `${navState.value} (stale)` : navState.value;
+}
+
 function buildDataTable(rows) {
   const tbl = document.createElement('table');
   tbl.className = 'table table-sm table-borderless mb-0';
@@ -528,18 +517,46 @@ function filterById(arr, ids) {
   });
 }
 
-function renderGroupInto(elId, polars, deltas, attitudes) {
+function renderGroupInto(elId, polars, deltas, attitudes, extraRows = []) {
   const el = document.getElementById(elId);
   if (!el) return;
   el.innerHTML = '';
   const rows = [
     ...polars   .map(p => ({ label: itemLabel(p), value: formatPolarValue(p) })),
     ...deltas   .map(d => ({ label: itemLabel(d), value: formatDeltaValue(d) })),
-    ...attitudes.map(a => ({ label: itemLabel(a), value: formatAttitudeValue(a) }))
+    ...attitudes.map(a => ({ label: itemLabel(a), value: formatAttitudeValue(a) })),
+    ...extraRows
   ];
   if (rows.length) el.appendChild(buildDataTable(rows));
 }
 
+function renderItemsInto(elId, items) {
+  const el = document.getElementById(elId);
+  if (!el) return;
+  el.innerHTML = '';
+  const rows = items.map(item => ({
+    label: itemLabel(item),
+    value: state.polarsById[item.id] === item
+      ? formatPolarValue(item)
+      : state.deltasById[item.id] === item
+        ? formatDeltaValue(item)
+        : formatAttitudeValue(item)
+  }));
+  if (rows.length) el.appendChild(buildDataTable(rows));
+}
+
+function formatSpatialVariance(table) {
+  if (!Number.isFinite(table?.q)) return null;
+  const pairCount = Number.isInteger(table.qPairCount) ? table.qPairCount : 0;
+  const rawEstimate = Number.isFinite(table.qEstimate)
+    ? `; raw estimate ${table.qEstimate.toExponential(3)} from ${pairCount} adjacent pairs`
+    : `; ${pairCount} eligible adjacent pairs`;
+  const source = table.qSource === 'derived'
+    ? `derived from ${pairCount} adjacent pairs`
+    : `fallback${rawEstimate}`;
+  return `${table.q.toExponential(3)} (${source})`;
+}
+
 function renderLiveSections() {
   const learningState = state.learningState || null;
   const inputPolars = filterById(state.polarsAll, ['groundSpeed']);
@@ -551,38 +568,43 @@ function renderLiveSections() {
   const displayedInputs = [...fallbackInputPolars, ...fallbackInputDeltas, ...fallbackInputAttitudes];
 
   // Inputs section — raw sensor readings only (smoothing is internal to the plugin)
+  const navigationStateRows = [{ label: 'navigation.state', value: formatNavigationStateValue(learningState?.navigationState) }];
   renderGroupInto('inputs-values',
     fallbackInputPolars,
     fallbackInputDeltas,
-    fallbackInputAttitudes
+    fallbackInputAttitudes,
+    navigationStateRows
   );
   renderWarnings('inputs-warnings', displayedInputs);
 
   // Estimation — inputs (raw sensor data used for boat speed estimation)
-  const estimationInputs = [
-    ...filterById(state.polarsAll,    ['groundSpeed']),
-    ...filterById(state.deltasAll,    ['heading.angle', 'boatSpeed']),
+  const groundSpeedInputs = filterById(state.polarsAll, ['groundSpeed']);
+  const boatSpeedInputs = filterById(state.deltasAll, ['boatSpeed']);
+  const estimationInputs = config?.sogFallback
+    ? [...groundSpeedInputs, ...boatSpeedInputs]
+    : [...boatSpeedInputs, ...groundSpeedInputs];
+  estimationInputs.push(
+    ...filterById(state.deltasAll, ['heading.angle']),
     ...filterById(state.attitudesAll, ['attitude'])
-  ];
-  renderGroupInto('estimation-inputs',
-    estimationInputs.filter(item => state.polarsById[item.id] === item),
-    estimationInputs.filter(item => state.deltasById[item.id] === item),
-    estimationInputs.filter(item => state.attitudesById[item.id] === item)
   );
+  renderItemsInto('estimation-inputs', estimationInputs);
   // Estimation — intermediates
   const estimationIntermediates = filterById(state.polarsAll, ['boatSpeedRefGround', 'speedCorrection', 'residual', 'residual.smoothed']);
-  renderGroupInto('estimation-intermediates', estimationIntermediates, [], []);
+  const spatialVariance = config?.showStatistics
+    ? formatSpatialVariance(Object.values(state.tablesById)[0])
+    : null;
+  const statisticRows = spatialVariance === null
+    ? []
+    : [{ label: 'Spatial variance q', value: spatialVariance }];
+  renderGroupInto('estimation-intermediates', estimationIntermediates, [], [], statisticRows);
   // Estimation — outputs
   const estimationOutputs = filterById(state.polarsAll, ['correctedBoatSpeed', 'current.smoothed']);
   renderGroupInto('estimation-outputs', estimationOutputs, [], []);
   // Estimation — warnings
   renderWarnings('estimation-warnings', [...estimationInputs, ...estimationIntermediates, ...estimationOutputs]);
 
-  // Learning — inputs: smoothed sensors + current if assumeCurrent
-  const learningCurrentPolars = (config && config.assumeCurrent)
-    ? filterById(state.polarsAll, ['current.smoothed'])
-    : [];
-  const learningPolars = [...filterById(state.polarsAll, ['groundSpeed.smoothed']), ...learningCurrentPolars];
+  // Learning — inputs
+  const learningPolars = filterById(state.polarsAll, ['groundSpeed.smoothed']);
   const learningDeltas = filterById(state.deltasAll, ['heading.smoothed', 'boatSpeed.smoothed']);
   const learningAttitudes = filterById(state.attitudesAll, ['attitude.smoothed']);
   renderGroupInto('learning-inputs',
@@ -624,7 +646,7 @@ function renderLiveSections() {
       startup: 'Startup stabilising window',
       observation_reset: 'Recent rejected or invalid observation',
       nav_state_change: 'navigation.state changed',
-      nav_state: 'Blocked by navigation.state',
+      not_moving: 'Vessel not moving',
       cog_override: 'Blocked by COG override',
       accepted: 'Observation recorded',
       estimator_outlier: 'Estimator rejected observation',
@@ -632,7 +654,7 @@ function renderLiveSections() {
       missing_current_when_required: 'Current estimate unavailable',
       learning_off: 'Learning is off',
       stabilizing: 'Stabilising window active',
-      nav_state_blocked: 'Learning blocked by navigation.state',
+      not_moving_blocked: 'Learning blocked \u2014 vessel not moving',
       cog_override_active: 'Learning blocked by COG override',
       stw_below_threshold: 'Below minimum STW for learning',
       sog_below_threshold: 'Below minimum SOG for learning',
@@ -642,10 +664,11 @@ function renderLiveSections() {
     const reason = reasonTextMap[learningState?.observationReason]
       || reasonTextMap[learningState?.reason]
       || '\u2014';
+    const showReason = learningState?.observationState && learningState.observationState !== 'accepted';
     statusTbody.innerHTML =
         `<tr><td class="text-muted small">Learning</td><td class="small">${learningText}</td></tr>` +
         `<tr><td class="text-muted small">Observation</td><td class="small">${obsText}</td></tr>` +
-      `<tr><td class="text-muted small">Reason</td><td class="small">${reason}</td></tr>`;
+      (showReason ? `<tr><td class="text-muted small">Reason</td><td class="small">${reason}</td></tr>` : '');
   }
   // Correction table
   const tableEl = document.getElementById('table-container');
@@ -659,45 +682,70 @@ function renderLiveSections() {
       speedSymbol: speedC.symbol,
       heelSymbol:  angleC.symbol,
     };
-    Object.values(state.tablesById).forEach(t => tableEl.appendChild(tableRenderer.render(t, tableOpts)));
+    const tables = Object.values(state.tablesById);
+    const rawSpeed      = state.deltasById['boatSpeed']?.value;
+    const heel          = state.attitudesById['attitude']?.value?.roll;
+    const correctedSpeed = state.polarsById['correctedBoatSpeed']?.magnitude;
+    const marker = [rawSpeed, heel, correctedSpeed].every(Number.isFinite)
+      ? { rawSpeed, heel, correctedSpeed }
+      : null;
+    tables.forEach(t => {
+      const wrap = tableRenderer.render(t, tableOpts);
+      tableEl.appendChild(wrap);
+      tableRenderer.renderMarkers(wrap, t.row, t.col, marker);
+    });
   }
 }
 
 // ─── Polling ──────────────────────────────────────────────────────────────────
+const POLL_INTERVAL_MS = 1000;
+const MIN_POLL_INTERVAL_MS = 100;
+const MAX_POLL_INTERVAL_MS = 5000;
+let pollIntervalMs = POLL_INTERVAL_MS;
 let updateTimer = null;
 let lastTickOk = false;
 
 async function tick() {
-  const data = await apiGet('/api/report');
-  if (data) {
-    // Recovered from an error — reload meta and config so unit converters,
-    // source lists and settings reflect the (possibly restarted) plugin state.
-    if (!lastTickOk) {
-      await loadMeta();
-      config = await apiGet('/api/settings');
-      if (config && config.tableName) setTableName(config.tableName);
-      renderSettingsPanel();
+  try {
+    const data = await apiGet('/api/report');
+    if (data) {
+      // Recovered from an error — reload meta and config so unit converters,
+      // source lists and settings reflect the (possibly restarted) plugin state.
+      if (!lastTickOk) {
+        await loadMeta();
+        config = await apiGet('/api/settings');
+        if (config && config.tableName) setTableName(config.tableName);
+        renderSettingsPanel();
+      }
+      lastTickOk = true;
+      pollIntervalMs = Number.isFinite(data.pollIntervalMs) && data.pollIntervalMs > 0
+        ? Math.min(Math.max(data.pollIntervalMs, MIN_POLL_INTERVAL_MS), MAX_POLL_INTERVAL_MS)
+        : POLL_INTERVAL_MS;
+      normaliseState(data);
+      state.learningState = data.learningState || null;
+      renderLiveSections();
+    } else {
+      lastTickOk = false;
+      state.learningState = null;
     }
-    lastTickOk = true;
-    normaliseState(data);
-    state.learningState = data.learningState || null;
-    renderLiveSections();
-  } else {
-    lastTickOk = false;
-    state.learningState = null;
+  } finally {
+    // Always poll status separately so the message reflects plugin state
+    // even when /api/report fails (plugin stopped/restarting).
+    const statusData = await fetch(`${API_BASE}/api/status`, { credentials: 'same-origin' })
+      .then(r => r.ok ? r.json() : null)
+      .catch(() => null);
+    _pluginStatus = statusData?.status ?? '';
+    _refreshMessage();
   }
-  // Always poll status separately so the message reflects plugin state
-  // even when /api/report fails (plugin stopped/restarting).
-  const statusData = await fetch(`${API_BASE}/api/status`, { credentials: 'same-origin' })
-    .then(r => r.ok ? r.json() : null)
-    .catch(() => null);
-  _pluginStatus = statusData?.status ?? '';
-  _refreshMessage();
 }
 
 function startUpdates() {
-  if (updateTimer) clearInterval(updateTimer);
-  updateTimer = setInterval(tick, 1000);
+  if (updateTimer) clearTimeout(updateTimer);
+  const poll = async () => {
+    await tick();
+    updateTimer = setTimeout(poll, pollIntervalMs);
+  };
+  poll();
 }
 
 

package/public/index.html

@@ -152,7 +152,7 @@
               <table class="table table-sm table-borderless mb-0" id="learning-settings-table">
                 <tbody></tbody>
               </table>
-              <h6 class="text-uppercase fw-bold text-muted border-bottom pb-1 mt-3 mb-1 small">Smoother</h6>
+              <h6 class="text-uppercase fw-bold text-muted border-bottom pb-1 mt-3 mb-1 small">Learning window</h6>
               <table class="table table-sm table-borderless mb-0" id="smoother-settings-table">
                 <tbody></tbody>
               </table>
@@ -193,15 +193,23 @@
                 </div>
                 <div class="table-legend-row">
                   <span class="legend-swatch legend-swatch--stripe"></span>
-                  <span><strong>Stripe angle</strong> — encodes leeway direction; stripes are tilted proportionally to the leeway correction (°)</span>
+                  <span><strong>Stripe angle</strong> — encodes leeway direction</span>
                 </div>
                 <div class="table-legend-row">
-                  <span class="legend-swatch legend-swatch--active">+1.2%</span>
-                  <span><strong>Blue text</strong> — most recently updated cell</span>
+                  <span class="legend-swatch legend-swatch--active"></span>
+                  <span><strong>Black border</strong> — most recently updated cell</span>
                 </div>
                 <div class="table-legend-row">
-                  <span class="legend-swatch legend-swatch--neighbour"></span>
-                  <span><strong>Faint tint</strong> — interpolation neighbours used in the current estimate</span>
+                  <span class="legend-swatch legend-swatch--weight"></span>
+                  <span><strong>Blue bar</strong> — normalized fusion weight; full cell width is 100%</span>
+                </div>
+                <div class="table-legend-row">
+                  <span class="legend-swatch legend-swatch--dot-red"></span>
+                  <span><strong>Red dot</strong> — current uncorrected (raw) speed and heel</span>
+                </div>
+                <div class="table-legend-row">
+                  <span class="legend-swatch legend-swatch--dot-blue"></span>
+                  <span><strong>Blue dot</strong> — current corrected speed and heel</span>
                 </div>
                 <div class="table-legend-row mt-1">
                   <span class="legend-label-wide">Cell values:</span>

package/public/main.css

@@ -34,6 +34,7 @@
 .TableCell {
   width: 60px;
   height: 60px;
+  position: relative;
   text-align: center;
   vertical-align: middle;
   font-size: 11px;
@@ -42,11 +43,14 @@
 .TableCorner { font-size: 10px; color: #888; font-weight: 400; text-align: center; }
 /* cell states */
 .cell--empty     { background-color: #f0f0f0; }
-.cell--neighbour { box-shadow: inset 0 0 0 1px #90a4ae; }
 .cell-factor     { font-weight: 600; font-size: 12px; }
 .cell-leeway     { font-weight: 600; font-size: 12px; margin-top: 2px; }
-.cell--active .cell-factor,
-.cell--active .cell-leeway { color: #1565c0; }
+.cell-weight     { position: absolute; left: 0; bottom: 0; height: 4px; background-color: #0d6efd; }
+.cell--active    { outline: 1px solid #000; outline-offset: -1px; }
+
+/* ─── Correction table marker overlay (raw speed dot + corrected speed/leeway arrow) ─ */
+.Table2D-wrap    { position: relative; display: inline-block; }
+.Table2D-markers { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
 
 /* ─── Stable table column widths inside cards ──────────────────────────────── */
 .card-body .table {
@@ -118,6 +122,16 @@ tr.stale td { color: #aaa; font-style: italic; }
     #f0f0f0 4px, #f0f0f0 5px
   );
 }
-.legend-swatch--active   { background: transparent; border: none; width: auto; height: auto; font-weight: 600; color: #1565c0; font-size: 11px; white-space: nowrap; }
-.legend-swatch--neighbour { background: #fff; box-shadow: inset 0 0 0 1px #90a4ae; }
+.legend-swatch--weight   { position: relative; border: 0; }
+.legend-swatch--weight::after { content: ''; position: absolute; left: 0; right: 25%; bottom: 2px; height: 4px; background-color: #0d6efd; }
+.legend-swatch--active   { background: transparent; border-color: #000; border-radius: 0; }
+.legend-swatch--dot-red  { background: transparent; border: 0; border-radius: 0; position: relative; }
+.legend-swatch--dot-red::after,
+.legend-swatch--dot-blue::after {
+  content: ''; position: absolute; top: 2px; left: 8px;
+  width: 12px; height: 12px; border-radius: 50%; border: 1px solid #fff;
+}
+.legend-swatch--dot-red::after  { background-color: #dc3545; }
+.legend-swatch--dot-blue { background: transparent; border: 0; border-radius: 0; position: relative; }
+.legend-swatch--dot-blue::after { background-color: #0d6efd; }
 .legend-label-wide       { flex-shrink: 0; white-space: nowrap; font-weight: 600; }