path: root/web-timeplot/src/main.js

import { Application } from 'pixi.js';
import { WaterfallGraph } from './waterfall.js';
import { PerformanceMetrics } from './metrics.js';

// ============================================================================
// GLOBAL STATE
// ============================================================================

let env = {};
let cfg = {
    showGrid: true,
    showMetrics: true,
    rollingWindow: 60,
    historyCapacity: 10000,
};

let dom = {
    container: null,
    controls: {},
    display: {},
};

let app = null; // PixiJS Application
let graphs = [];
let metrics = null;
let time = 0;
let frameCounter = 0;
let metricsUpdateInterval = 10; // Update metrics display every N frames

// Vertical zoom dragging state
let isDraggingVerticalZoom = false;
let dragStartY = 0;
let dragStartZoom = 1.0;

// ============================================================================
// APPLICATION ENTRY POINT
// ============================================================================

document.addEventListener('DOMContentLoaded', async function() {
    log('TimePlot starting...');

    log('init DOM');
    await initDOM();

    log('init config');
    await initCfg();

    log('init PixiJS renderer');
    await initRenderer();

    log('init graphs');
    await initGraphs();

    log('init services');
    await initServices();

    log('setup controls');
    await setupControls();

    log('TimePlot ready');
});

// ============================================================================
// INITIALIZATION FUNCTIONS
// ============================================================================

async function initDOM() {
    dom.container = document.getElementById('canvas-container');
    dom.controls.gridBtn = document.getElementById('toggle-grid');
    dom.controls.metricsBtn = document.getElementById('toggle-metrics');
    dom.controls.exportBtn = document.getElementById('export-metrics');
    dom.display.rendererType = document.getElementById('renderer-type');
    dom.display.metrics = document.getElementById('metrics-display');
    dom.display.timeScale = document.getElementById('time-scale');
}

async function initCfg() {
    const localCfg = localStorage.getItem('timeplot-cfg');
    if (localCfg) {
        try {
            const parsed = JSON.parse(localCfg);
            cfg = { ...cfg, ...parsed };
            log('Loaded config from localStorage');
        } catch (e) {
            log('Failed to parse config, using defaults');
        }
    }
}

function saveCfg() {
    localStorage.setItem('timeplot-cfg', JSON.stringify(cfg));
}

async function initRenderer() {
    // Check WebGPU availability
    let preference = 'webgpu';
    if (!navigator.gpu) {
        log('WebGPU not available, using WebGL');
        preference = 'webgl';
    }

    try {
        app = new Application();

        await app.init({
            preference: preference,
            width: window.innerWidth,
            height: window.innerHeight - 60, // Account for controls
            backgroundColor: 0x1a1a26,
            antialias: true,
            autoDensity: true,
            resolution: window.devicePixelRatio || 1,
        });

        dom.container.appendChild(app.canvas);

        // Display actual renderer type
        const rendererType = app.renderer.type;
        dom.display.rendererType.textContent = rendererType;
        log(`Using renderer: ${rendererType}`);

        // Handle window resize
        window.addEventListener('resize', handleResize);

    } catch (error) {
        log(`Failed to initialize renderer: ${error}`);
        throw error;
    }
}

async function initGraphs() {
    const width = app.screen.width;
    const height = app.screen.height;

    // Left graph
    const graph1 = new WaterfallGraph({
        x: 0,
        y: 0,
        width: width / 2,
        height: height,
        title: 'Frequency vs Time',
        color: 0xff6666,
    });

    // Right graph
    const graph2 = new WaterfallGraph({
        x: width / 2,
        y: 0,
        width: width / 2,
        height: height,
        title: 'Position vs Time',
        color: 0x66ff66,
    });

    graphs.push(graph1, graph2);
    graphs.forEach(graph => {
        app.stage.addChild(graph.container);
        graph.setGridVisible(cfg.showGrid);
    });
}

async function initServices() {
    // Initialize performance metrics
    metrics = new PerformanceMetrics(cfg.rollingWindow, cfg.historyCapacity);

    // Start animation loop
    app.ticker.add(update);

    log('Services initialized');
}

function setupControls() {
    // Button controls
    dom.controls.gridBtn.addEventListener('click', toggleGrid);
    dom.controls.metricsBtn.addEventListener('click', toggleMetrics);
    dom.controls.exportBtn.addEventListener('click', exportMetrics);

    // Keyboard controls
    window.addEventListener('keydown', handleKeyboard);

    // Mouse controls for time scaling
    dom.container.addEventListener('mousedown', handleMouseDown);
    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);
    dom.container.addEventListener('contextmenu', (e) => e.preventDefault()); // Prevent context menu

    // Update button states
    updateControlButtons();
}

// ============================================================================
// EVENT HANDLERS
// ============================================================================

function handleKeyboard(e) {
    switch(e.key.toLowerCase()) {
        case 'g':
            toggleGrid();
            break;
        case 'm':
            toggleMetrics();
            break;
        case 'e':
            exportMetrics();
            break;
    }
}

function handleResize() {
    const width = window.innerWidth;
    const height = window.innerHeight - 60;

    app.renderer.resize(width, height);

    // Update graphs
    if (graphs[0]) graphs[0].resize(0, 0, width / 2, height);
    if (graphs[1]) graphs[1].resize(width / 2, 0, width / 2, height);
}

function handleMouseDown(e) {
    // Middle mouse button (button = 1)
    if (e.button === 1) {
        e.preventDefault();
        isDraggingVerticalZoom = true;
        dragStartY = e.clientY;
        dragStartZoom = graphs[0]?.getVerticalScale() || 1.0;
        dom.container.style.cursor = 'ns-resize';
    }
}

function handleMouseMove(e) {
    if (!isDraggingVerticalZoom) return;

    const deltaY = dragStartY - e.clientY; // Inverted: drag up = zoom in
    const sensitivity = 0.005; // Adjust sensitivity
    const newZoom = dragStartZoom + (deltaY * sensitivity);

    // Apply to all graphs
    graphs.forEach(graph => {
        graph.setVerticalScale(newZoom);
    });

    // Update display
    updateVerticalZoomDisplay();
}

function handleMouseUp(e) {
    if (e.button === 1) {
        isDraggingVerticalZoom = false;
        dom.container.style.cursor = 'default';
    }
}

// ============================================================================
// MAIN UPDATE LOOP
// ============================================================================

function update() {
    metrics.beginFrame();
    metrics.beginUpdate();

    time += 0.016; // ~60fps increment
    frameCounter++;

    // Update each graph
    graphs.forEach((graph, idx) => {
        graph.update(time, idx);
    });

    const updateMs = metrics.endUpdate();

    metrics.beginRender();
    // Rendering happens automatically via PixiJS
    const renderMs = metrics.endRender();

    // Calculate stats
    const vertexCount = graphs.reduce((sum, g) => sum + g.getVertexCount(), 0);
    const lineCount = graphs.reduce((sum, g) => sum + g.getLineCount(), 0);

    metrics.endFrame(updateMs, renderMs, vertexCount, lineCount);

    // Update UI less frequently to prevent flickering
    if (cfg.showMetrics && frameCounter % metricsUpdateInterval === 0) {
        updateMetricsDisplay();
    }
}

// ============================================================================
// UI CONTROL FUNCTIONS
// ============================================================================

function toggleGrid() {
    cfg.showGrid = !cfg.showGrid;
    graphs.forEach(graph => graph.setGridVisible(cfg.showGrid));
    updateControlButtons();
    saveCfg();
    log(`Grid: ${cfg.showGrid ? 'ON' : 'OFF'}`);
}

function toggleMetrics() {
    cfg.showMetrics = !cfg.showMetrics;
    updateControlButtons();
    saveCfg();
    log(`Metrics: ${cfg.showMetrics ? 'ON' : 'OFF'}`);
}

function exportMetrics() {
    const csv = metrics.exportToCSV();
    const blob = new Blob([csv], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `timeplot-metrics-${Date.now()}.csv`;
    a.click();
    URL.revokeObjectURL(url);
    log('Metrics exported');
}

function updateMetricsDisplay() {
    if (dom.display.metrics) {
        dom.display.metrics.textContent = metrics.formatSummary();
    }
}

function updateControlButtons() {
    dom.controls.gridBtn.classList.toggle('active', cfg.showGrid);
    dom.controls.metricsBtn.classList.toggle('active', cfg.showMetrics);
}

function updateVerticalZoomDisplay() {
    if (dom.display.timeScale && graphs[0]) {
        const zoom = graphs[0].getVerticalScale();
        dom.display.timeScale.textContent = `${zoom.toFixed(2)}x`;

        // Color code: zoomed out = blue, normal = white, zoomed in = orange
        if (zoom < 0.8) {
            dom.display.timeScale.style.color = '#6af'; // Zoomed out (see more history)
        } else if (zoom > 1.2) {
            dom.display.timeScale.style.color = '#fa6'; // Zoomed in (see less history)
        } else {
            dom.display.timeScale.style.color = '#fff';
        }
    }
}

// ============================================================================
// UTILITIES
// ============================================================================

function log(msg) {
    console.log(`[TimePlot] ${msg}`);
}