path: root/src/ui/panel-manager.js

import { formatDuration, formatValue, formatWallClock } from '../utils-format.js';

function createElement(tagName, className, textContent) {
    const element = document.createElement(tagName);
    if (className) {
        element.className = className;
    }
    if (textContent) {
        element.textContent = textContent;
    }
    return element;
}

function setToggleState(element, active) {
    element.dataset.active = String(active);
}

function readControlValue(element) {
    if (element.tagName === 'SELECT') {
        return element.value;
    }

    if (element instanceof HTMLInputElement) {
        if (element.type === 'checkbox') {
            return element.checked;
        }

        if (element.type === 'number' || element.type === 'range') {
            return Number(element.value);
        }

        return element.value;
    }

    return element.value;
}

function syncControlValue(element, value) {
    if (!element || document.activeElement === element) {
        return;
    }

    if (element instanceof HTMLInputElement && element.type === 'checkbox') {
        element.checked = Boolean(value);
        return;
    }

    element.value = String(value ?? '');
}

export class PanelManager {
    constructor({ root, store, actions }) {
        this.root = root;
        this.store = store;
        this.actions = actions;
        this.elements = {};
    }

    mount() {
        const shell = createElement('div', 'timeplot-shell');
        const topbar = createElement('header', 'timeplot-topbar');
        const viewport = createElement('section', 'timeplot-viewport');
        const plotGrid = createElement('div', 'timeplot-plot-grid');
        const primaryPlotPanel = createElement('section', 'timeplot-plot-panel');
        const secondaryPlotPanel = createElement('section', 'timeplot-plot-panel');
        const primaryCanvasHost = createElement('div', 'timeplot-canvas-host');
        const secondaryCanvasHost = createElement('div', 'timeplot-canvas-host');
        const sidebar = createElement('aside', 'timeplot-sidebar');
        const primaryTooltip = createElement('div', 'timeplot-tooltip');
        const secondaryTooltip = createElement('div', 'timeplot-tooltip');
        primaryTooltip.hidden = true;
        secondaryTooltip.hidden = true;

        const brand = createElement('div', 'timeplot-brand');
        const title = createElement('h1', 'timeplot-title', 'TimePlot');
        const subtitle = createElement('div', 'timeplot-subtitle', 'Dual synchronized signal monitor');
        brand.append(title, subtitle);

        const toolbar = createElement('div', 'timeplot-toolbar');
        toolbar.append(
            this.createTransportControls(),
            this.createPanelToggles(),
        );

        topbar.append(brand, toolbar);
        primaryPlotPanel.append(primaryCanvasHost, primaryTooltip);
        secondaryPlotPanel.append(secondaryCanvasHost, secondaryTooltip);
        plotGrid.append(primaryPlotPanel, secondaryPlotPanel);
        viewport.append(plotGrid);
        shell.append(topbar, viewport, sidebar);
        this.root.replaceChildren(shell);

        this.elements = {
            ...this.elements,
            shell,
            topbar,
            viewport,
            plotGrid,
            primaryPlotPanel,
            secondaryPlotPanel,
            primaryCanvasHost,
            secondaryCanvasHost,
            sidebar,
            primaryTooltip,
            secondaryTooltip,
            title,
            subtitle,
            statusPanel: this.createStatusPanel(),
            sourcePanel: this.createSourcePanel(),
            configPanel: this.createConfigPanel(),
            helpPanel: this.createHelpPanel(),
        };

        sidebar.append(
            this.elements.statusPanel,
            this.elements.sourcePanel,
            this.elements.configPanel,
            this.elements.helpPanel,
        );

        return this.elements;
    }

    createTransportControls() {
        const wrapper = createElement('div', 'control-group');
        const pauseButton = createElement('button', 'control-button', 'Pause');
        const resetButton = createElement('button', 'control-button', 'Reset');
        const speedLabel = createElement('span', null, 'Speed');
        const speedInput = document.createElement('input');
        speedInput.type = 'range';
        speedInput.min = '0.1';
        speedInput.max = '6';
        speedInput.step = '0.1';
        const speedValue = createElement('span', null, '1.0×');

        pauseButton.addEventListener('click', () => this.actions.togglePause());
        resetButton.addEventListener('click', () => this.actions.resetScene());
        speedInput.addEventListener('input', (event) => this.actions.setSpeed(Number(event.target.value)));

        wrapper.append(pauseButton, resetButton, speedLabel, speedInput, speedValue);
        this.elements.pauseButton = pauseButton;
        this.elements.resetButton = resetButton;
        this.elements.speedInput = speedInput;
        this.elements.speedValue = speedValue;
        return wrapper;
    }

    createPanelToggles() {
        const wrapper = createElement('div', 'control-group');
        const panelIds = ['status', 'source', 'config', 'help'];
        this.elements.panelButtons = {};

        for (const panelId of panelIds) {
            const button = createElement('button', 'panel-toggle', panelId);
            button.addEventListener('click', () => this.actions.togglePanel(panelId));
            this.elements.panelButtons[panelId] = button;
            wrapper.append(button);
        }

        return wrapper;
    }

    createStatusPanel() {
        const panel = createElement('section', 'panel');
        panel.innerHTML = `
            <h2>Status</h2>
            <dl class="kv-list">
                <dt>Renderer</dt><dd data-field="renderer">—</dd>
                <dt>Real time</dt><dd data-field="realTime">—</dd>
                <dt>Real elapsed</dt><dd data-field="realElapsed">—</dd>
                <dt>Plot time</dt><dd data-field="plotTime">—</dd>
                <dt>Playback</dt><dd data-field="playback">—</dd>
                <dt>Points</dt><dd data-field="points">—</dd>
            </dl>
        `;
        return panel;
    }

    createSourcePanel() {
        const panel = createElement('section', 'panel');
        panel.innerHTML = `
            <h2>Data Source</h2>
            <div class="panel-subsection" data-source-config="signalA">
                <div class="panel-section-title">Signal A</div>
                <div class="field-grid">
                    <label>
                        Source type
                        <select data-source-key="signalA" data-source-field="type">
                            <option value="synthetic-wave">Synthetic wave</option>
                            <option value="csv-replay">CSV replay</option>
                            <option value="websocket">WebSocket</option>
                        </select>
                    </label>
                </div>
                <div class="field-grid" data-source-mode="synthetic-wave">
                    <label>
                        Preset
                        <select data-source-key="signalA" data-source-field="preset">
                            <option value="telemetry">Telemetry</option>
                            <option value="chirp">Chirp</option>
                            <option value="burst">Burst</option>
                        </select>
                    </label>
                    <label>
                        Sample rate (Hz)
                        <input data-source-key="signalA" data-source-field="sampleRateHz" type="number" min="1" max="240" step="1" />
                    </label>
                    <label>
                        Amplitude
                        <input data-source-key="signalA" data-source-field="amplitude" type="number" min="0.1" max="3" step="0.1" />
                    </label>
                    <label>
                        Noise
                        <input data-source-key="signalA" data-source-field="noise" type="number" min="0" max="0.5" step="0.01" />
                    </label>
                </div>
                <div class="field-grid" data-source-mode="csv-replay">
                    <label>
                        CSV file
                        <input data-source-key="signalA" data-source-file="dataset" type="file" accept=".csv,text/csv" />
                    </label>
                    <label>
                        Replay rate
                        <input data-source-key="signalA" data-source-field="replayRate" type="number" min="0.1" max="8" step="0.1" />
                    </label>
                    <div class="source-meta" data-source-key="signalA" data-source-meta></div>
                </div>
                <div class="field-grid" data-source-mode="websocket">
                    <label>
                        WebSocket URL
                        <input data-source-key="signalA" data-source-field="wsUrl" type="url" placeholder="ws://localhost:8080" />
                    </label>
                    <label>
                        Reconnect (ms)
                        <input data-source-key="signalA" data-source-field="wsReconnectMs" type="number" min="250" max="30000" step="250" />
                    </label>
                    <div class="source-meta" data-source-key="signalA" data-source-ws-meta></div>
                </div>
            </div>
            <div class="panel-subsection" data-source-config="signalB">
                <div class="panel-section-title">Signal B</div>
                <div class="field-grid">
                    <label>
                        Source type
                        <select data-source-key="signalB" data-source-field="type">
                            <option value="synthetic-wave">Synthetic wave</option>
                            <option value="csv-replay">CSV replay</option>
                            <option value="websocket">WebSocket</option>
                        </select>
                    </label>
                </div>
                <div class="field-grid" data-source-mode="synthetic-wave">
                    <label>
                        Preset
                        <select data-source-key="signalB" data-source-field="preset">
                            <option value="telemetry">Telemetry</option>
                            <option value="chirp">Chirp</option>
                            <option value="burst">Burst</option>
                        </select>
                    </label>
                    <label>
                        Sample rate (Hz)
                        <input data-source-key="signalB" data-source-field="sampleRateHz" type="number" min="1" max="240" step="1" />
                    </label>
                    <label>
                        Amplitude
                        <input data-source-key="signalB" data-source-field="amplitude" type="number" min="0.1" max="3" step="0.1" />
                    </label>
                    <label>
                        Noise
                        <input data-source-key="signalB" data-source-field="noise" type="number" min="0" max="0.5" step="0.01" />
                    </label>
                </div>
                <div class="field-grid" data-source-mode="csv-replay">
                    <label>
                        CSV file
                        <input data-source-key="signalB" data-source-file="dataset" type="file" accept=".csv,text/csv" />
                    </label>
                    <label>
                        Replay rate
                        <input data-source-key="signalB" data-source-field="replayRate" type="number" min="0.1" max="8" step="0.1" />
                    </label>
                    <div class="source-meta" data-source-key="signalB" data-source-meta></div>
                </div>
                <div class="field-grid" data-source-mode="websocket">
                    <label>
                        WebSocket URL
                        <input data-source-key="signalB" data-source-field="wsUrl" type="url" placeholder="ws://localhost:8080" />
                    </label>
                    <label>
                        Reconnect (ms)
                        <input data-source-key="signalB" data-source-field="wsReconnectMs" type="number" min="250" max="30000" step="250" />
                    </label>
                    <div class="source-meta" data-source-key="signalB" data-source-ws-meta></div>
                </div>
            </div>
        `;

        panel.querySelectorAll('[data-source-field]').forEach((input) => {
            const eventName = input.tagName === 'SELECT' ? 'change' : 'input';
            input.addEventListener(eventName, () => {
                const sourceKey = input.getAttribute('data-source-key');
                const field = input.getAttribute('data-source-field');
                const value = readControlValue(input);
                this.actions.updateSource(sourceKey, field, value);
            });
        });

        panel.querySelectorAll('[data-source-file]').forEach((input) => {
            input.addEventListener('change', async () => {
                const sourceKey = input.getAttribute('data-source-key');
                const file = input.files?.[0];
                if (!file) {
                    return;
                }

                await this.actions.loadSourceFile(sourceKey, file);
                input.value = '';
            });
        });

        return panel;
    }

    createConfigPanel() {
        const panel = createElement('section', 'panel');
        panel.innerHTML = `
            <h2>Config</h2>
            <div class="field-grid">
                <label>
                    Visible window (ms)
                    <input data-plot-field="windowDurationMs" type="number" min="2000" max="120000" step="1000" />
                </label>
                <label>
                    Max points
                    <input data-plot-field="maxPoints" type="number" min="200" max="4000" step="100" />
                </label>
                <div class="panel-row">
                    <span>Show grid</span>
                    <input data-plot-field="showGrid" type="checkbox" />
                </div>
                <div class="panel-row">
                    <span>Show points</span>
                    <input data-plot-field="showPoints" type="checkbox" />
                </div>
            </div>
            <div class="panel-subsection">
                <div class="panel-section-title">Graph routing</div>
                <div class="field-grid">
                    <label>
                        Primary graph source
                        <select data-graph-id="primary" data-graph-field="sourceKey">
                            <option value="signalA">Signal A</option>
                            <option value="signalB">Signal B</option>
                        </select>
                    </label>
                    <label>
                        Primary graph transform
                        <select data-graph-id="primary" data-graph-field="transform">
                            <option value="raw">Raw</option>
                            <option value="delta">Delta</option>
                            <option value="smooth">Smooth</option>
                        </select>
                    </label>
                    <label>
                        Secondary graph source
                        <select data-graph-id="secondary" data-graph-field="sourceKey">
                            <option value="signalA">Signal A</option>
                            <option value="signalB">Signal B</option>
                        </select>
                    </label>
                    <label>
                        Secondary graph transform
                        <select data-graph-id="secondary" data-graph-field="transform">
                            <option value="raw">Raw</option>
                            <option value="delta">Delta</option>
                            <option value="smooth">Smooth</option>
                        </select>
                    </label>
                </div>
            </div>
        `;

        panel.querySelectorAll('[data-plot-field]').forEach((input) => {
            const eventName = input instanceof HTMLInputElement && input.type === 'checkbox' ? 'change' : 'input';
            input.addEventListener(eventName, () => {
                const field = input.getAttribute('data-plot-field');
                const value = readControlValue(input);
                this.actions.updatePlot(field, value);
            });
        });

        panel.querySelectorAll('[data-graph-field]').forEach((input) => {
            input.addEventListener('change', () => {
                const graphId = input.getAttribute('data-graph-id');
                const field = input.getAttribute('data-graph-field');
                this.actions.updateGraph(graphId, field, input.value);
            });
        });

        return panel;
    }

    createHelpPanel() {
        const panel = createElement('section', 'panel');
        panel.innerHTML = `
            <h2>Help</h2>
            <ol class="help-list">
                <li>Each signal can be synthetic or file-backed CSV replay.</li>
                <li>Each graph can target Signal A or Signal B independently.</li>
                <li>Each graph can render raw, delta, or smoothed data.</li>
                <li>Hover either trace to inspect the nearest synchronized sample.</li>
                <li>Use pause and speed controls to inspect timing behavior.</li>
            </ol>
        `;
        return panel;
    }

    sync(state, visiblePoints) {
        this.elements.title.textContent = state.app.title;
        this.elements.subtitle.textContent = 'Dual synchronized signal monitor';
        this.elements.pauseButton.textContent = state.time.paused ? 'Resume' : 'Pause';
        setToggleState(this.elements.pauseButton, state.time.paused);
        syncControlValue(this.elements.speedInput, state.time.speed);
        this.elements.speedValue.textContent = `${state.time.speed.toFixed(1)}×`;

        const statusFields = this.elements.statusPanel.querySelectorAll('[data-field]');
        const fieldMap = Object.fromEntries(Array.from(statusFields).map((field) => [field.getAttribute('data-field'), field]));
        fieldMap.renderer.textContent = state.app.renderer;
        fieldMap.realTime.textContent = formatWallClock(state.time.realNowMs);
        fieldMap.realElapsed.textContent = formatDuration(state.time.realElapsedMs);
        fieldMap.plotTime.textContent = formatDuration(state.time.plotTimeMs);
        fieldMap.playback.textContent = state.time.paused ? 'Paused' : `${state.time.speed.toFixed(1)}×`;
        fieldMap.points.textContent = typeof visiblePoints === 'object'
            ? `${visiblePoints.primary} / ${visiblePoints.secondary}`
            : `${visiblePoints}`;

        this.syncSourcePanel(state);
        this.syncConfigPanel(state);
        this.syncPanels(state);
        this.syncTooltip(state);
    }

    syncSourcePanel(state) {
        Object.entries(state.sources).forEach(([sourceKey, sourceConfig]) => {
            syncControlValue(this.elements.sourcePanel.querySelector(`[data-source-key="${sourceKey}"][data-source-field="type"]`), sourceConfig.type);
            syncControlValue(this.elements.sourcePanel.querySelector(`[data-source-key="${sourceKey}"][data-source-field="preset"]`), sourceConfig.preset);
            syncControlValue(this.elements.sourcePanel.querySelector(`[data-source-key="${sourceKey}"][data-source-field="sampleRateHz"]`), sourceConfig.sampleRateHz);
            syncControlValue(this.elements.sourcePanel.querySelector(`[data-source-key="${sourceKey}"][data-source-field="amplitude"]`), sourceConfig.amplitude);
            syncControlValue(this.elements.sourcePanel.querySelector(`[data-source-key="${sourceKey}"][data-source-field="noise"]`), sourceConfig.noise);
            const replayRateInput = this.elements.sourcePanel.querySelector(`[data-source-key="${sourceKey}"][data-source-field="replayRate"]`);
            if (replayRateInput) {
                syncControlValue(replayRateInput, sourceConfig.replayRate ?? 1);
            }

            const sourceSection = this.elements.sourcePanel.querySelector(`[data-source-config="${sourceKey}"]`);
            sourceSection.querySelectorAll('[data-source-mode]').forEach((modeSection) => {
                modeSection.hidden = modeSection.getAttribute('data-source-mode') !== sourceConfig.type;
            });

            const meta = this.elements.sourcePanel.querySelector(`[data-source-key="${sourceKey}"][data-source-meta]`);
            if (meta) {
                if (sourceConfig.type === 'csv-replay') {
                    meta.innerHTML = sourceConfig.loadError
                        ? `<span class="source-meta-error">${sourceConfig.loadError}</span>`
                        : `${sourceConfig.dataFileName || 'No file loaded'}${sourceConfig.datasetPointCount ? ` · ${sourceConfig.datasetPointCount} pts · ${formatDuration(sourceConfig.datasetDurationMs || 0)}` : ''}`;
                } else if (sourceConfig.type === 'websocket') {
                    meta.textContent = '';
                } else {
                    meta.textContent = 'Generates data procedurally in-browser';
                }
            }

            const wsUrlInput = this.elements.sourcePanel.querySelector(`[data-source-key="${sourceKey}"][data-source-field="wsUrl"]`);
            const wsReconnectInput = this.elements.sourcePanel.querySelector(`[data-source-key="${sourceKey}"][data-source-field="wsReconnectMs"]`);
            const wsMeta = this.elements.sourcePanel.querySelector(`[data-source-key="${sourceKey}"][data-source-ws-meta]`);
            if (wsUrlInput) {
                syncControlValue(wsUrlInput, sourceConfig.wsUrl ?? '');
            }
            if (wsReconnectInput) {
                syncControlValue(wsReconnectInput, sourceConfig.wsReconnectMs ?? 2000);
            }
            if (wsMeta) {
                wsMeta.innerHTML = sourceConfig.type === 'websocket'
                    ? `status: <span class="source-meta-status source-meta-status-${sourceConfig.wsStatus || 'idle'}">${sourceConfig.wsStatus || 'idle'}</span>${sourceConfig.wsStatusDetail ? ` · ${sourceConfig.wsStatusDetail}` : ''}`
                    : '';
            }
        });
    }

    syncConfigPanel(state) {
        syncControlValue(this.elements.configPanel.querySelector('[data-plot-field="windowDurationMs"]'), state.plot.windowDurationMs);
        syncControlValue(this.elements.configPanel.querySelector('[data-plot-field="maxPoints"]'), state.plot.maxPoints);
        syncControlValue(this.elements.configPanel.querySelector('[data-plot-field="showGrid"]'), state.plot.showGrid);
        syncControlValue(this.elements.configPanel.querySelector('[data-plot-field="showPoints"]'), state.plot.showPoints);
        syncControlValue(this.elements.configPanel.querySelector('[data-graph-id="primary"][data-graph-field="sourceKey"]'), state.graphs.primary.sourceKey);
        syncControlValue(this.elements.configPanel.querySelector('[data-graph-id="primary"][data-graph-field="transform"]'), state.graphs.primary.transform);
        syncControlValue(this.elements.configPanel.querySelector('[data-graph-id="secondary"][data-graph-field="sourceKey"]'), state.graphs.secondary.sourceKey);
        syncControlValue(this.elements.configPanel.querySelector('[data-graph-id="secondary"][data-graph-field="transform"]'), state.graphs.secondary.transform);
    }

    syncPanels(state) {
        const panelMap = {
            status: this.elements.statusPanel,
            source: this.elements.sourcePanel,
            config: this.elements.configPanel,
            help: this.elements.helpPanel,
        };

        for (const [panelId, panelState] of Object.entries(state.panels)) {
            panelMap[panelId].hidden = !panelState.visible;
            setToggleState(this.elements.panelButtons[panelId], panelState.visible);
        }
    }

    syncTooltip(state) {
        const tooltipState = state.plot.tooltip;
        this.elements.primaryTooltip.hidden = true;
        this.elements.secondaryTooltip.hidden = true;

        if (!tooltipState.visible || !tooltipState.point) {
            return;
        }

        const tooltip = tooltipState.panelId === 'secondary'
            ? this.elements.secondaryTooltip
            : this.elements.primaryTooltip;

        tooltip.hidden = false;
        tooltip.style.left = `${tooltipState.x}px`;
        tooltip.style.top = `${tooltipState.y}px`;
        tooltip.innerHTML = `
            <div class="timeplot-tooltip-title">Hovered sample</div>
            <div class="timeplot-tooltip-row"><span class="muted">Panel</span><span>${tooltipState.panelLabel ?? 'Primary'}</span></div>
            <div class="timeplot-tooltip-row"><span class="muted">Plot time</span><span>${formatDuration(tooltipState.point.timeMs)}</span></div>
            <div class="timeplot-tooltip-row"><span class="muted">Value</span><span>${formatValue(tooltipState.point.value)}</span></div>
            <div class="timeplot-tooltip-row"><span class="muted">Source</span><span>${tooltipState.point.sourceId}</span></div>
            ${tooltipState.linkedPoint ? `<div class="timeplot-tooltip-row"><span class="muted">Linked panel</span><span>${tooltipState.linkedPanelLabel ?? 'Linked'}</span></div>` : ''}
            ${tooltipState.linkedPoint ? `<div class="timeplot-tooltip-row"><span class="muted">Linked value</span><span>${formatValue(tooltipState.linkedPoint.value)}</span></div>` : ''}
        `;
    }
}