diff --git a/dashboard/js/accuracy.js b/dashboard/js/accuracy.js
index f059032..d70a4c1 100644
--- a/dashboard/js/accuracy.js
+++ b/dashboard/js/accuracy.js
@@ -172,6 +172,7 @@
this.fetchHistory();
this.fetchImprovement();
this.fetchStats();
+ this.fetchZoneBreakdown();
},
/**
@@ -237,6 +238,85 @@
});
},
+ /**
+ * Fetch per-zone accuracy breakdown
+ */
+ fetchZoneBreakdown: function() {
+ var self = this;
+ var week = this.getCurrentWeek();
+
+ fetch('/api/learning/accuracy/history?scope_type=zone&weeks=1')
+ .then(function(res) { return res.json(); })
+ .then(function(data) {
+ self.renderZoneBreakdown(data);
+ })
+ .catch(function(err) {
+ console.error('[Accuracy] Failed to fetch zone breakdown:', err);
+ self.renderZoneBreakdown([]);
+ });
+ },
+
+ /**
+ * Get current week string
+ */
+ getCurrentWeek: function() {
+ var now = new Date();
+ var start = new Date(now.getFullYear(), 0, 1);
+ var diff = now - start;
+ var oneWeek = 604800000; // ms in a week
+ var weekNum = Math.ceil((diff + start.getDay() * 86400000) / oneWeek);
+ return now.getFullYear() + '-W' + (weekNum < 10 ? '0' : '') + weekNum;
+ },
+
+ /**
+ * Render zone breakdown
+ */
+ renderZoneBreakdown: function(zones) {
+ var container = document.getElementById('zone-breakdown');
+ if (!container) return;
+
+ if (!zones || zones.length === 0) {
+ container.innerHTML = 'No zone data yet
';
+ return;
+ }
+
+ var self = this;
+ var html = '';
+ zones.sort(function(a, b) { return (b.f1 || 0) - (a.f1 || 0); });
+
+ zones.forEach(function(zone) {
+ var f1 = zone.f1 !== null ? (zone.f1 * 100).toFixed(0) + '%' : '--';
+ var color = zone.f1 >= 0.8 ? '#66bb6a' : (zone.f1 >= 0.6 ? '#ffa726' : '#ef5350');
+
+ html += '' +
+ '' + self.formatZoneName(zone.scope_id) + '' +
+ '' + f1 + '' +
+ '
';
+ });
+
+ container.innerHTML = html;
+
+ // Add click handlers to focus on zone
+ container.querySelectorAll('.zone-item').forEach(function(item) {
+ item.onclick = function() {
+ var zoneId = this.getAttribute('data-zone-id');
+ if (window.Viz3D && window.Viz3D.focusOnZone) {
+ window.Viz3D.focusOnZone(zoneId);
+ }
+ };
+ });
+ },
+
+ /**
+ * Format zone name for display
+ */
+ formatZoneName: function(zoneId) {
+ if (!zoneId) return 'Unknown';
+ // Convert zone-xxx to Xxx
+ return zoneId.replace(/^zone-/, '').replace(/-/g, ' ')
+ .replace(/\b\w/g, function(c) { return c.toUpperCase(); });
+ },
+
/**
* Update display with current data
*/
@@ -569,6 +649,11 @@
padding: 4px 8px;\
background: rgba(255, 255, 255, 0.03);\
border-radius: 3px;\
+ cursor: pointer;\
+ transition: background 0.2s;\
+ }\
+ .zone-item:hover {\
+ background: rgba(255, 255, 255, 0.08);\
}\
.zone-name {\
color: #bbb;\
@@ -576,6 +661,12 @@
.zone-score {\
font-weight: 500;\
}\
+ .no-data-text {\
+ color: #666;\
+ font-size: 11px;\
+ text-align: center;\
+ padding: 8px;\
+ }\
.accuracy-stats {\
font-size: 11px;\
}\
diff --git a/dashboard/js/viz3d.js b/dashboard/js/viz3d.js
index da08e1a..663bbc6 100644
--- a/dashboard/js/viz3d.js
+++ b/dashboard/js/viz3d.js
@@ -10,7 +10,7 @@ const Viz3D = (function () {
'use strict';
// ── module state ──────────────────────────────────────────────────────────
- let _scene, _camera, _controls, _clock;
+ let _scene, _camera, _controls, _clock, _renderer;
let _room = null;
let _roomObjs = { floor: null, ceiling: null, walls: [], edges: null };
let _nodeMeshes = new Map(); // mac → THREE.Mesh
@@ -22,6 +22,13 @@ const Viz3D = (function () {
let _floorTex = null;
let _followId = null;
+ // ── blob interaction state ────────────────────────────────────────────────
+ let _raycaster = new THREE.Raycaster();
+ let _mouse = new THREE.Vector2();
+ let _hoveredBlob = null;
+ let _feedbackTooltip = null;
+ let _renderer = null;
+
// Ghost node for repositioning advice
let _ghostNode = null; // THREE.Mesh (translucent)
let _ghostLine = null; // THREE.Line (dashed, from original to ghost)
@@ -32,11 +39,17 @@ const Viz3D = (function () {
// ── init / tick ───────────────────────────────────────────────────────────
- function init(scene, camera, controls) {
+ function init(scene, camera, controls, renderer) {
_scene = scene;
_camera = camera;
_controls = controls;
_clock = new THREE.Clock();
+
+ // Initialize blob interaction if renderer provided
+ if (renderer) {
+ initBlobInteraction(renderer);
+ _addBlobFeedbackStyles();
+ }
}
function update() {
@@ -55,6 +68,9 @@ const Viz3D = (function () {
// Update ghost line if node moved
_updateGhostLine();
+
+ // Update flow arrow animation
+ updateFlowAnimation(dt);
}
// ── room bounds ───────────────────────────────────────────────────────────
@@ -517,6 +533,7 @@ const Viz3D = (function () {
const color = BLOB_COLORS[ci];
const group = new THREE.Group();
+ group.userData.blobId = id; // Store blob ID for interaction
_scene.add(group);
const humanoid = _buildHumanoid(color);
@@ -544,7 +561,7 @@ const Viz3D = (function () {
);
_scene.add(pillar);
- return { group, humanoid, trail, pillar };
+ return { group, humanoid, trail, pillar, blobId: id };
}
function _removeBlobObj(id, obj) {
@@ -579,12 +596,18 @@ const Viz3D = (function () {
function applyLocUpdate(blobs) {
const seen = new Set();
+ const now = Date.now();
blobs.forEach(b => {
seen.add(b.id);
let obj = _blobs3D.get(b.id);
- if (!obj) { obj = _createBlobObj(b.id); _blobs3D.set(b.id, obj); }
+ if (!obj) {
+ obj = _createBlobObj(b.id);
+ obj.createdAt = now;
+ _blobs3D.set(b.id, obj);
+ }
obj.group.position.set(b.x, 0, b.z);
+ obj.lastPosition = { x: b.x, z: b.z };
const speed = Math.sqrt(b.vx*b.vx + b.vz*b.vz);
_setPosture(obj.humanoid, speed > 0.25 ? 'walking' : 'standing');
@@ -602,6 +625,265 @@ const Viz3D = (function () {
});
}
+ // ── blob interaction (feedback buttons) ────────────────────────────────────
+
+ /**
+ * Initialize blob interaction system.
+ * @param {THREE.WebGLRenderer} renderer - The Three.js renderer
+ */
+ function initBlobInteraction(renderer) {
+ _renderer = renderer;
+
+ // Create feedback tooltip element
+ _feedbackTooltip = document.createElement('div');
+ _feedbackTooltip.className = 'blob-feedback-tooltip';
+ _feedbackTooltip.style.display = 'none';
+ document.body.appendChild(_feedbackTooltip);
+
+ // Add mouse move listener
+ var canvas = renderer.domElement;
+ canvas.addEventListener('mousemove', _onBlobMouseMove);
+ canvas.addEventListener('mouseleave', _hideBlobFeedbackTooltip);
+ }
+
+ /**
+ * Handle mouse move for blob hover detection.
+ */
+ function _onBlobMouseMove(event) {
+ if (!_camera || !_scene || _blobs3D.size === 0) return;
+
+ // Calculate mouse position in normalized device coordinates
+ var rect = event.target.getBoundingClientRect();
+ _mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+ _mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+ // Raycast to find hovered blob
+ _raycaster.setFromCamera(_mouse, _camera);
+
+ var blobMeshes = [];
+ _blobs3D.forEach(function(obj) {
+ if (obj.group) {
+ blobMeshes.push(obj.group);
+ }
+ });
+
+ var intersects = _raycaster.intersectObjects(blobMeshes, true);
+
+ if (intersects.length > 0) {
+ // Find the blob object from the intersected mesh
+ var intersected = intersects[0].object;
+ var blobObj = null;
+
+ // Walk up the parent chain to find the group
+ var current = intersected;
+ while (current) {
+ _blobs3D.forEach(function(obj, id) {
+ if (obj.group === current) {
+ blobObj = obj;
+ }
+ });
+ if (blobObj) break;
+ current = current.parent;
+ }
+
+ if (blobObj && blobObj !== _hoveredBlob) {
+ _hoveredBlob = blobObj;
+ _showBlobFeedbackTooltip(event, blobObj);
+ } else if (blobObj) {
+ // Update tooltip position
+ _updateTooltipPosition(event);
+ }
+ } else {
+ if (_hoveredBlob) {
+ _hideBlobFeedbackTooltip();
+ }
+ }
+ }
+
+ /**
+ * Show feedback tooltip for a blob.
+ */
+ function _showBlobFeedbackTooltip(event, blobObj) {
+ if (!_feedbackTooltip) return;
+
+ var blobId = blobObj.blobId;
+ var eventType = 'blob_detection';
+ var eventTime = blobObj.createdAt || Date.now();
+ var position = blobObj.lastPosition || { x: 0, z: 0 };
+
+ _feedbackTooltip.innerHTML =
+ '' +
+ '
Track #' + blobId + '
' +
+ '
' +
+ ' ' +
+ ' ' +
+ '
' +
+ '