visualization.js

// Load configuration and sensor data
let config = window.CONFIG || null;
let sensorData = window.SENSOR_DATA || {};
let sensorNames = {};
let sensorUnits = {};
let defaultSensors = [];
let poses = [];
let maxFrames = 250;
let fps = 20;
let defaultPose = 'pose1';

let plots = [];
let nextPlotId = 1;
let animationFrame = 0;
let isPlaying = false;
let animationInterval = null;

// Load configuration from window.CONFIG (set by config.js)
function loadConfig() {
    if (!config) {
        console.error('Configuration not loaded');
        alert('Error: Configuration not loaded. Please run visualize.py to generate config files.');
        return false;
    }
    
    // Extract sensor configuration
    for (const [sensorKey, sensorConfig] of Object.entries(config.sensors)) {
        sensorNames[sensorKey] = sensorConfig.display_name;
        sensorUnits[sensorKey] = sensorConfig.unit;
    }
    
    // Get default sensors (all configured sensors)
    defaultSensors = Object.keys(config.sensors);
    
    // Extract poses from sensor data
    poses = Object.keys(sensorData).sort();
    
    // Extract visualization settings
    maxFrames = config.visualization.max_frames;
    fps = config.visualization.fps;
    defaultPose = config.visualization.default_pose;
    
    return true;
}

function createControl(plotId, sensorType, poseName, showRemove = true) {
    const controlGroup = document.createElement('div');
    controlGroup.className = 'control-group';
    controlGroup.id = `control-${plotId}`;
    
    const label = document.createElement('label');
    label.textContent = `Plot ${plotId}:`;
    
    const sensorSelect = document.createElement('select');
    sensorSelect.id = `sensor-${plotId}`;
    Object.keys(sensorNames).forEach(key => {
        const option = document.createElement('option');
        option.value = key;
        option.textContent = sensorNames[key];
        if (key === sensorType) option.selected = true;
        sensorSelect.appendChild(option);
    });
    
    const poseSelect = document.createElement('select');
    poseSelect.id = `pose-${plotId}`;
    poses.forEach(pose => {
        const option = document.createElement('option');
        option.value = pose;
        option.textContent = pose.toUpperCase();
        if (pose === poseName) option.selected = true;
        poseSelect.appendChild(option);
    });
    
    controlGroup.appendChild(label);
    controlGroup.appendChild(sensorSelect);
    controlGroup.appendChild(poseSelect);
    
    if (showRemove && plots.length > 1) {
        const removeBtn = document.createElement('button');
        removeBtn.className = 'remove-plot-btn';
        removeBtn.textContent = '✕';
        removeBtn.onclick = () => removePlot(plotId);
        controlGroup.appendChild(removeBtn);
    }
    
    sensorSelect.addEventListener('change', () => {
        pauseAnimation();
        updateAllPlots();
    });
    
    poseSelect.addEventListener('change', () => {
        pauseAnimation();
        updateAllPlots();
    });
    
    return controlGroup;
}

function createPlotContainer(plotId) {
    const container = document.createElement('div');
    container.className = 'plot-container';
    container.id = `plot-container-${plotId}`;
    
    const plotDiv = document.createElement('div');
    plotDiv.id = `plot-${plotId}`;
    
    container.appendChild(plotDiv);
    return container;
}

function addPlot(sensorType = null, poseName = null) {
    // Use defaults from config if not provided
    if (!sensorType) {
        sensorType = defaultSensors[0] || 'hand_acc';
    }
    if (!poseName) {
        poseName = defaultPose;
    }
    
    const plotId = nextPlotId++;
    
    plots.push(plotId);
    
    // Add control
    const controlsDiv = document.getElementById('controls');
    const control = createControl(plotId, sensorType, poseName, true);
    controlsDiv.appendChild(control);
    
    // Add plot container
    const gridDiv = document.getElementById('plotGrid');
    const container = createPlotContainer(plotId);
    gridDiv.appendChild(container);
    
    // Update plot
    updatePlot(plotId);
    updateRemoveButtons();
}

function removePlot(plotId) {
    if (plots.length <= 1) {
        alert('You must have at least one plot!');
        return;
    }
    
    // Remove from array
    plots = plots.filter(id => id !== plotId);
    
    // Remove DOM elements
    document.getElementById(`control-${plotId}`).remove();
    document.getElementById(`plot-container-${plotId}`).remove();
    
    updateRemoveButtons();
}

function updateRemoveButtons() {
    plots.forEach(plotId => {
        const control = document.getElementById(`control-${plotId}`);
        const existingBtn = control.querySelector('.remove-plot-btn');
        
        if (plots.length > 1 && !existingBtn) {
            const removeBtn = document.createElement('button');
            removeBtn.className = 'remove-plot-btn';
            removeBtn.textContent = '✕';
            removeBtn.onclick = () => removePlot(plotId);
            control.appendChild(removeBtn);
        } else if (plots.length === 1 && existingBtn) {
            existingBtn.remove();
        }
    });
}

function getColorScale(frameIndex, maxFrames) {
    const t = frameIndex / maxFrames;
    return `hsl(${240 + t * 120}, 70%, 50%)`;
}

function updatePlot(plotId) {
    const sensorSelect = document.getElementById(`sensor-${plotId}`);
    const poseSelect = document.getElementById(`pose-${plotId}`);
    
    if (!sensorSelect || !poseSelect) return;
    
    const sensorType = sensorSelect.value;
    const poseName = poseSelect.value;
    const data = sensorData[poseName][sensorType];
    const endIdx = Math.min(animationFrame + 1, data.x.length);
    
    const xData = data.x.slice(0, endIdx);
    const yData = data.y.slice(0, endIdx);
    const zData = data.z.slice(0, endIdx);
    
    const colors = Array.from({length: endIdx}, (_, i) => getColorScale(i, data.x.length));
    
    const trace = {
        type: 'scatter3d',
        mode: 'lines+markers',
        x: xData,
        y: yData,
        z: zData,
        marker: {
            size: 3,
            color: colors,
            line: {
                width: 0.3,
                color: 'white'
            }
        },
        line: {
            color: 'rgba(100, 150, 200, 0.5)',
            width: 2
        },
        hovertemplate: `<b>${poseName.toUpperCase()}</b><br>X: %{x:.2f}<br>Y: %{y:.2f}<br>Z: %{z:.2f}<extra></extra>`
    };
    
    const layout = {
        title: {
            text: `${sensorNames[sensorType]}<br><sub>${poseName.toUpperCase()}</sub>`,
            font: { size: 14 }
        },
        scene: {
            xaxis: { title: `X (${sensorUnits[sensorType]})`, backgroundcolor: 'rgb(250, 250, 250)' },
            yaxis: { title: `Y (${sensorUnits[sensorType]})`, backgroundcolor: 'rgb(250, 250, 250)' },
            zaxis: { title: `Z (${sensorUnits[sensorType]})`, backgroundcolor: 'rgb(250, 250, 250)' },
            camera: { eye: { x: 1.5, y: 1.5, z: 1.3 } },
            aspectmode: 'cube'
        },
        margin: { l: 0, r: 0, t: 35, b: 0 },
        showlegend: false,
        autosize: true
    };
    
    const config = { responsive: true };
    
    Plotly.newPlot(`plot-${plotId}`, [trace], layout, config);
}

function updateAllPlots() {
    plots.forEach(plotId => {
        updatePlot(plotId);
    });
    
    document.getElementById('timeSlider').value = animationFrame;
    document.getElementById('timeDisplay').textContent = (animationFrame / 50).toFixed(2);
}

function playAnimation() {
    if (isPlaying) return;
    isPlaying = true;
    
    animationInterval = setInterval(() => {
        animationFrame++;
        if (animationFrame >= maxFrames) {
            pauseAnimation();
            return;
        }
        updateAllPlots();
    }, 1000 / fps);
}

function pauseAnimation() {
    isPlaying = false;
    if (animationInterval) {
        clearInterval(animationInterval);
        animationInterval = null;
    }
}

function resetAnimation() {
    pauseAnimation();
    animationFrame = 0;
    updateAllPlots();
}

function initializePlots() {
    const numPlots = config?.visualization?.default_num_plots || 4;
    const sensorsToUse = defaultSensors.slice(0, numPlots);
    
    // If we have fewer sensors than plots requested, cycle through them
    for (let i = 0; i < numPlots; i++) {
        const sensor = sensorsToUse[i % sensorsToUse.length];
        addPlot(sensor, defaultPose);
    }
}

// Initialize when page loads
window.addEventListener('DOMContentLoaded', () => {
    if (!window.SENSOR_DATA) {
        alert('Error: Sensor data not loaded. Please run visualize.py to generate data.js');
        return;
    }
    
    if (!window.CONFIG) {
        alert('Error: Configuration not loaded. Please run visualize.py to generate config.js');
        return;
    }
    
    // Load configuration first
    const configLoaded = loadConfig();
    if (!configLoaded) {
        return;
    }
    
    // Update time slider max value from config
    document.getElementById('timeSlider').max = maxFrames;
    
    // Time slider event listener
    document.getElementById('timeSlider').addEventListener('input', (e) => {
        pauseAnimation();
        animationFrame = parseInt(e.target.value);
        updateAllPlots();
    });
    
    // Initialize plots
    initializePlots();
});