scitex 2.5.0__py3-none-any.whl → 2.7.0__py3-none-any.whl

scitex/vis/editor/flask_editor/templates/_scripts.py

@@ -0,0 +1,1261 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+# File: ./src/scitex/vis/editor/flask_editor/templates/scripts.py
+"""JavaScript for the Flask editor UI."""
+
+JS_SCRIPTS = """
+let overrides = {{ overrides|safe }};
+let traces = overrides.traces || [];
+let elementBboxes = {};
+let imgSize = {width: 0, height: 0};
+let hoveredElement = null;
+let selectedElement = null;
+
+// Cycle selection state for overlapping elements
+let elementsAtCursor = [];  // All elements at current cursor position
+let currentCycleIndex = 0;  // Current index in cycle
+
+// Unit system state (default: mm)
+let dimensionUnit = 'mm';
+const MM_TO_INCH = 1 / 25.4;
+const INCH_TO_MM = 25.4;
+
+// Hover system - client-side hit testing
+function initHoverSystem() {
+    const container = document.getElementById('preview-container');
+    const img = document.getElementById('preview-img');
+
+    img.addEventListener('mousemove', (e) => {
+        if (imgSize.width === 0 || imgSize.height === 0) return;
+
+        const rect = img.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        const scaleX = imgSize.width / rect.width;
+        const scaleY = imgSize.height / rect.height;
+        const imgX = x * scaleX;
+        const imgY = y * scaleY;
+
+        const element = findElementAt(imgX, imgY);
+        if (element !== hoveredElement) {
+            hoveredElement = element;
+            updateOverlay();
+        }
+    });
+
+    img.addEventListener('mouseleave', () => {
+        hoveredElement = null;
+        updateOverlay();
+    });
+
+    img.addEventListener('click', (e) => {
+        const rect = img.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const scaleX = imgSize.width / rect.width;
+        const scaleY = imgSize.height / rect.height;
+        const imgX = x * scaleX;
+        const imgY = y * scaleY;
+
+        // Alt+click or find all overlapping elements
+        if (e.altKey) {
+            // Cycle through overlapping elements
+            const allElements = findAllElementsAt(imgX, imgY);
+            if (allElements.length > 0) {
+                // If cursor moved to different location, reset cycle
+                if (JSON.stringify(allElements) !== JSON.stringify(elementsAtCursor)) {
+                    elementsAtCursor = allElements;
+                    currentCycleIndex = 0;
+                } else {
+                    // Cycle to next element
+                    currentCycleIndex = (currentCycleIndex + 1) % elementsAtCursor.length;
+                }
+                selectedElement = elementsAtCursor[currentCycleIndex];
+                updateOverlay();
+                scrollToSection(selectedElement);
+
+                // Show cycle indicator in status
+                const total = elementsAtCursor.length;
+                const current = currentCycleIndex + 1;
+                console.log(`Cycle selection: ${current}/${total} - ${selectedElement}`);
+            }
+        } else if (hoveredElement) {
+            // Normal click - select hovered element
+            selectedElement = hoveredElement;
+            elementsAtCursor = [];  // Reset cycle
+            currentCycleIndex = 0;
+            updateOverlay();
+            scrollToSection(selectedElement);
+        }
+    });
+
+    // Right-click for cycle selection menu
+    img.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+
+        const rect = img.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const scaleX = imgSize.width / rect.width;
+        const scaleY = imgSize.height / rect.height;
+        const imgX = x * scaleX;
+        const imgY = y * scaleY;
+
+        const allElements = findAllElementsAt(imgX, imgY);
+        if (allElements.length > 1) {
+            // Cycle to next element
+            if (JSON.stringify(allElements) !== JSON.stringify(elementsAtCursor)) {
+                elementsAtCursor = allElements;
+                currentCycleIndex = 0;
+            } else {
+                currentCycleIndex = (currentCycleIndex + 1) % elementsAtCursor.length;
+            }
+            selectedElement = elementsAtCursor[currentCycleIndex];
+            updateOverlay();
+            scrollToSection(selectedElement);
+
+            const total = elementsAtCursor.length;
+            const current = currentCycleIndex + 1;
+            console.log(`Right-click cycle: ${current}/${total} - ${selectedElement}`);
+        } else if (allElements.length === 1) {
+            selectedElement = allElements[0];
+            updateOverlay();
+            scrollToSection(selectedElement);
+        }
+    });
+
+    img.addEventListener('load', () => {
+        updateOverlay();
+    });
+}
+
+function findElementAt(x, y) {
+    // Multi-panel aware hit detection with specificity hierarchy:
+    // 1. Data elements with points (lines, scatter) - proximity detection
+    // 2. Small elements (labels, ticks, legends, bars, fills)
+    // 3. Panel bboxes - lowest priority (fallback)
+
+    const PROXIMITY_THRESHOLD = 15;
+    const SCATTER_THRESHOLD = 20;  // Larger threshold for scatter points
+
+    // First: Check for data elements with points (lines, scatter)
+    let closestDataElement = null;
+    let minDistance = Infinity;
+
+    for (const [name, bbox] of Object.entries(elementBboxes)) {
+        if (bbox.points && bbox.points.length > 0) {
+            // Check if cursor is within general bbox area first
+            if (x >= bbox.x0 - SCATTER_THRESHOLD && x <= bbox.x1 + SCATTER_THRESHOLD &&
+                y >= bbox.y0 - SCATTER_THRESHOLD && y <= bbox.y1 + SCATTER_THRESHOLD) {
+
+                const elementType = bbox.element_type || 'line';
+                let dist;
+
+                if (elementType === 'scatter') {
+                    // For scatter, find distance to nearest point
+                    dist = distanceToNearestPoint(x, y, bbox.points);
+                } else {
+                    // For lines, find distance to line segments
+                    dist = distanceToLine(x, y, bbox.points);
+                }
+
+                if (dist < minDistance) {
+                    minDistance = dist;
+                    closestDataElement = name;
+                }
+            }
+        }
+    }
+
+    // Use appropriate threshold based on element type
+    if (closestDataElement) {
+        const bbox = elementBboxes[closestDataElement];
+        const threshold = (bbox.element_type === 'scatter') ? SCATTER_THRESHOLD : PROXIMITY_THRESHOLD;
+        if (minDistance <= threshold) {
+            return closestDataElement;
+        }
+    }
+
+    // Second: Collect all bbox matches, excluding panels and data elements with points
+    const elementMatches = [];
+    const panelMatches = [];
+
+    for (const [name, bbox] of Object.entries(elementBboxes)) {
+        if (x >= bbox.x0 && x <= bbox.x1 && y >= bbox.y0 && y <= bbox.y1) {
+            const area = (bbox.x1 - bbox.x0) * (bbox.y1 - bbox.y0);
+            const isPanel = bbox.is_panel || name.endsWith('_panel');
+            const hasPoints = bbox.points && bbox.points.length > 0;
+
+            if (hasPoints) {
+                // Already handled above with proximity
+                continue;
+            } else if (isPanel) {
+                panelMatches.push({name, area, bbox});
+            } else {
+                elementMatches.push({name, area, bbox});
+            }
+        }
+    }
+
+    // Return smallest non-panel element if any
+    if (elementMatches.length > 0) {
+        elementMatches.sort((a, b) => a.area - b.area);
+        return elementMatches[0].name;
+    }
+
+    // Fallback to panel selection (useful for multi-panel figures)
+    if (panelMatches.length > 0) {
+        panelMatches.sort((a, b) => a.area - b.area);
+        return panelMatches[0].name;
+    }
+
+    return null;
+}
+
+function distanceToNearestPoint(px, py, points) {
+    // Find distance to nearest point in scatter
+    let minDist = Infinity;
+    for (const [x, y] of points) {
+        const dist = Math.sqrt((px - x) ** 2 + (py - y) ** 2);
+        if (dist < minDist) minDist = dist;
+    }
+    return minDist;
+}
+
+function distanceToLine(px, py, points) {
+    let minDist = Infinity;
+    for (let i = 0; i < points.length - 1; i++) {
+        const [x1, y1] = points[i];
+        const [x2, y2] = points[i + 1];
+        const dist = distanceToSegment(px, py, x1, y1, x2, y2);
+        if (dist < minDist) minDist = dist;
+    }
+    return minDist;
+}
+
+function distanceToSegment(px, py, x1, y1, x2, y2) {
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const lenSq = dx * dx + dy * dy;
+
+    if (lenSq === 0) {
+        return Math.sqrt((px - x1) ** 2 + (py - y1) ** 2);
+    }
+
+    let t = ((px - x1) * dx + (py - y1) * dy) / lenSq;
+    t = Math.max(0, Math.min(1, t));
+
+    const projX = x1 + t * dx;
+    const projY = y1 + t * dy;
+
+    return Math.sqrt((px - projX) ** 2 + (py - projY) ** 2);
+}
+
+function findAllElementsAt(x, y) {
+    // Find all elements at cursor position (for cycle selection)
+    // Returns array sorted by specificity (most specific first)
+    const PROXIMITY_THRESHOLD = 15;
+    const SCATTER_THRESHOLD = 20;
+
+    const results = [];
+
+    for (const [name, bbox] of Object.entries(elementBboxes)) {
+        let match = false;
+        let distance = Infinity;
+        let priority = 0;  // Lower = more specific
+
+        const hasPoints = bbox.points && bbox.points.length > 0;
+        const elementType = bbox.element_type || '';
+        const isPanel = bbox.is_panel || name.endsWith('_panel');
+
+        // Check data elements with points (lines, scatter)
+        if (hasPoints) {
+            if (x >= bbox.x0 - SCATTER_THRESHOLD && x <= bbox.x1 + SCATTER_THRESHOLD &&
+                y >= bbox.y0 - SCATTER_THRESHOLD && y <= bbox.y1 + SCATTER_THRESHOLD) {
+
+                if (elementType === 'scatter') {
+                    distance = distanceToNearestPoint(x, y, bbox.points);
+                    if (distance <= SCATTER_THRESHOLD) {
+                        match = true;
+                        priority = 1;  // Scatter points = high priority
+                    }
+                } else {
+                    distance = distanceToLine(x, y, bbox.points);
+                    if (distance <= PROXIMITY_THRESHOLD) {
+                        match = true;
+                        priority = 2;  // Lines = high priority
+                    }
+                }
+            }
+        }
+
+        // Check bbox containment
+        if (x >= bbox.x0 && x <= bbox.x1 && y >= bbox.y0 && y <= bbox.y1) {
+            const area = (bbox.x1 - bbox.x0) * (bbox.y1 - bbox.y0);
+
+            if (!match) {
+                match = true;
+                distance = 0;
+            }
+
+            if (isPanel) {
+                priority = 100;  // Panels = lowest priority
+            } else if (!hasPoints) {
+                // Small elements like labels, ticks - use area for priority
+                priority = 10 + Math.min(area / 10000, 50);
+            }
+        }
+
+        if (match) {
+            results.push({ name, distance, priority, bbox });
+        }
+    }
+
+    // Sort by priority (lower first), then by distance
+    results.sort((a, b) => {
+        if (a.priority !== b.priority) return a.priority - b.priority;
+        return a.distance - b.distance;
+    });
+
+    return results.map(r => r.name);
+}
+
+function drawTracePath(bbox, scaleX, scaleY, type) {
+    if (!bbox.points || bbox.points.length < 2) return '';
+
+    const points = bbox.points;
+    let pathD = `M ${points[0][0] * scaleX} ${points[0][1] * scaleY}`;
+    for (let i = 1; i < points.length; i++) {
+        pathD += ` L ${points[i][0] * scaleX} ${points[i][1] * scaleY}`;
+    }
+
+    const className = type === 'hover' ? 'hover-path' : 'selected-path';
+    const labelX = points[0][0] * scaleX;
+    const labelY = points[0][1] * scaleY - 8;
+    const labelClass = type === 'hover' ? 'hover-label' : 'selected-label';
+
+    return `<path class="${className}" d="${pathD}"/>` +
+           `<text class="${labelClass}" x="${labelX}" y="${labelY}">${bbox.label}</text>`;
+}
+
+function drawScatterPoints(bbox, scaleX, scaleY, type) {
+    // Draw scatter points as circles
+    if (!bbox.points || bbox.points.length === 0) return '';
+
+    const className = type === 'hover' ? 'hover-scatter' : 'selected-scatter';
+    const labelClass = type === 'hover' ? 'hover-label' : 'selected-label';
+    const radius = 4;
+
+    let svg = '';
+    for (const [x, y] of bbox.points) {
+        svg += `<circle class="${className}" cx="${x * scaleX}" cy="${y * scaleY}" r="${radius}"/>`;
+    }
+
+    // Add label near first point
+    if (bbox.points.length > 0) {
+        const labelX = bbox.points[0][0] * scaleX;
+        const labelY = bbox.points[0][1] * scaleY - 10;
+        svg += `<text class="${labelClass}" x="${labelX}" y="${labelY}">${bbox.label}</text>`;
+    }
+
+    return svg;
+}
+
+function updateOverlay() {
+    const overlay = document.getElementById('hover-overlay');
+    const img = document.getElementById('preview-img');
+    const rect = img.getBoundingClientRect();
+
+    overlay.setAttribute('width', rect.width);
+    overlay.setAttribute('height', rect.height);
+
+    const scaleX = rect.width / imgSize.width;
+    const scaleY = rect.height / imgSize.height;
+
+    let svg = '';
+
+    function drawElement(elementName, type) {
+        const bbox = elementBboxes[elementName];
+        if (!bbox) return '';
+
+        const elementType = bbox.element_type || '';
+        const hasPoints = bbox.points && bbox.points.length > 0;
+
+        // Lines - draw as path
+        if ((elementType === 'line' || elementName.includes('trace_')) && hasPoints) {
+            return drawTracePath(bbox, scaleX, scaleY, type);
+        }
+        // Scatter - draw as circles
+        else if (elementType === 'scatter' && hasPoints) {
+            return drawScatterPoints(bbox, scaleX, scaleY, type);
+        }
+        // Default - draw bbox rectangle
+        else {
+            const rectClass = type === 'hover' ? 'hover-rect' : 'selected-rect';
+            const labelClass = type === 'hover' ? 'hover-label' : 'selected-label';
+            const x = bbox.x0 * scaleX - 2;
+            const y = bbox.y0 * scaleY - 2;
+            const w = (bbox.x1 - bbox.x0) * scaleX + 4;
+            const h = (bbox.y1 - bbox.y0) * scaleY + 4;
+            return `<rect class="${rectClass}" x="${x}" y="${y}" width="${w}" height="${h}" rx="2"/>` +
+                   `<text class="${labelClass}" x="${x}" y="${y - 4}">${bbox.label}</text>`;
+        }
+    }
+
+    if (hoveredElement && hoveredElement !== selectedElement) {
+        svg += drawElement(hoveredElement, 'hover');
+    }
+
+    if (selectedElement) {
+        svg += drawElement(selectedElement, 'selected');
+    }
+
+    overlay.innerHTML = svg;
+}
+
+function expandSection(sectionId) {
+    document.querySelectorAll('.section').forEach(section => {
+        const header = section.querySelector('.section-header');
+        const content = section.querySelector('.section-content');
+        if (section.id === sectionId) {
+            header?.classList.remove('collapsed');
+            content?.classList.remove('collapsed');
+        } else if (header?.classList.contains('section-toggle')) {
+            header?.classList.add('collapsed');
+            content?.classList.add('collapsed');
+        }
+    });
+}
+
+function scrollToSection(elementName) {
+    const elementToSection = {
+        'title': 'section-labels',
+        'xlabel': 'section-labels',
+        'ylabel': 'section-labels',
+        'xaxis_ticks': 'section-ticks',
+        'yaxis_ticks': 'section-ticks',
+        'legend': 'section-legend'
+    };
+
+    const fieldMap = {
+        'title': 'title',
+        'xlabel': 'xlabel',
+        'ylabel': 'ylabel',
+        'xaxis_ticks': 'x_n_ticks',
+        'yaxis_ticks': 'y_n_ticks',
+        'legend': 'legend_visible'
+    };
+
+    if (elementName.startsWith('trace_')) {
+        expandSection('section-traces');
+        const traceIdx = elementBboxes[elementName]?.trace_idx;
+        if (traceIdx !== undefined) {
+            const traceColors = document.querySelectorAll('.trace-color');
+            if (traceColors[traceIdx]) {
+                setTimeout(() => {
+                    traceColors[traceIdx].scrollIntoView({behavior: 'smooth', block: 'center'});
+                    traceColors[traceIdx].click();
+                }, 100);
+            }
+        }
+        return;
+    }
+
+    const sectionId = elementToSection[elementName];
+    if (sectionId) {
+        expandSection(sectionId);
+    }
+
+    const fieldId = fieldMap[elementName];
+    if (fieldId) {
+        const field = document.getElementById(fieldId);
+        if (field) {
+            setTimeout(() => {
+                field.scrollIntoView({behavior: 'smooth', block: 'center'});
+                field.focus();
+            }, 100);
+        }
+    }
+
+    // Always show selected element panel
+    showSelectedElementPanel(elementName);
+}
+
+// Selected element panel management
+function showSelectedElementPanel(elementName) {
+    const section = document.getElementById('section-selected');
+    const titleEl = document.getElementById('selected-element-title');
+    const typeBadge = document.getElementById('element-type-badge');
+    const axisInfo = document.getElementById('element-axis-info');
+
+    // Hide all property sections first
+    document.querySelectorAll('.element-props').forEach(el => el.style.display = 'none');
+
+    if (!elementName) {
+        section.style.display = 'none';
+        return;
+    }
+
+    section.style.display = 'block';
+
+    // Parse element name to extract type and info
+    const elementInfo = parseElementName(elementName);
+    const bbox = elementBboxes[elementName] || {};
+
+    // Update title
+    titleEl.textContent = `Selected: ${elementInfo.displayName}`;
+
+    // Update type badge
+    typeBadge.className = `element-type-badge ${elementInfo.type}`;
+    typeBadge.textContent = elementInfo.type;
+
+    // Update axis info
+    if (elementInfo.axisId) {
+        const row = elementInfo.axisId.match(/ax_(\\d)(\\d)/);
+        if (row) {
+            axisInfo.textContent = `Panel: Row ${parseInt(row[1])+1}, Col ${parseInt(row[2])+1}`;
+        } else {
+            axisInfo.textContent = `Axis: ${elementInfo.axisId}`;
+        }
+    } else {
+        axisInfo.textContent = '';
+    }
+
+    // Show appropriate property panel and populate with current values
+    showPropertiesForElement(elementInfo, bbox);
+}
+
+function parseElementName(name) {
+    // Parse names like: ax_00_scatter_0, ax_11_trace_1, ax_01_xlabel, trace_0, xlabel, etc.
+    const result = {
+        original: name,
+        type: 'unknown',
+        displayName: name,
+        axisId: null,
+        index: null
+    };
+
+    // Check for axis prefix (ax_XX_)
+    const axisMatch = name.match(/^(ax_\\d+)_(.+)$/);
+    if (axisMatch) {
+        result.axisId = axisMatch[1];
+        name = axisMatch[2];  // Rest of the name
+    }
+
+    // Determine element type
+    if (name.includes('scatter')) {
+        result.type = 'scatter';
+        const idx = name.match(/scatter_(\\d+)/);
+        result.index = idx ? parseInt(idx[1]) : 0;
+        result.displayName = `Scatter ${result.index + 1}`;
+    } else if (name.includes('trace')) {
+        result.type = 'trace';
+        const idx = name.match(/trace_(\\d+)/);
+        result.index = idx ? parseInt(idx[1]) : 0;
+        result.displayName = `Line ${result.index + 1}`;
+    } else if (name.includes('fill')) {
+        result.type = 'fill';
+        const idx = name.match(/fill_(\\d+)/);
+        result.index = idx ? parseInt(idx[1]) : 0;
+        result.displayName = `Fill Area ${result.index + 1}`;
+    } else if (name.includes('bar')) {
+        result.type = 'bar';
+        const idx = name.match(/bar_(\\d+)/);
+        result.index = idx ? parseInt(idx[1]) : 0;
+        result.displayName = `Bar ${result.index + 1}`;
+    } else if (name === 'xlabel' || name === 'ylabel' || name === 'title') {
+        result.type = 'label';
+        result.displayName = name.charAt(0).toUpperCase() + name.slice(1);
+    } else if (name === 'legend') {
+        result.type = 'legend';
+        result.displayName = 'Legend';
+    } else if (name.includes('panel')) {
+        result.type = 'panel';
+        result.displayName = 'Panel';
+    }
+
+    return result;
+}
+
+function showPropertiesForElement(elementInfo, bbox) {
+    const type = elementInfo.type;
+
+    if (type === 'trace') {
+        const props = document.getElementById('selected-trace-props');
+        props.style.display = 'block';
+
+        // Try to get current values from overrides
+        const traceOverrides = getTraceOverrides(elementInfo);
+        if (traceOverrides) {
+            document.getElementById('sel-trace-label').value = traceOverrides.label || '';
+            document.getElementById('sel-trace-color').value = traceOverrides.color || '#1f77b4';
+            document.getElementById('sel-trace-color-text').value = traceOverrides.color || '#1f77b4';
+            document.getElementById('sel-trace-linewidth').value = traceOverrides.linewidth || 1.0;
+            document.getElementById('sel-trace-linestyle').value = traceOverrides.linestyle || '-';
+            document.getElementById('sel-trace-marker').value = traceOverrides.marker || '';
+            document.getElementById('sel-trace-markersize').value = traceOverrides.markersize || 4;
+            document.getElementById('sel-trace-alpha').value = traceOverrides.alpha || 1;
+        }
+    } else if (type === 'scatter') {
+        const props = document.getElementById('selected-scatter-props');
+        props.style.display = 'block';
+
+        const scatterOverrides = getScatterOverrides(elementInfo);
+        if (scatterOverrides) {
+            document.getElementById('sel-scatter-color').value = scatterOverrides.color || '#1f77b4';
+            document.getElementById('sel-scatter-color-text').value = scatterOverrides.color || '#1f77b4';
+            document.getElementById('sel-scatter-size').value = scatterOverrides.size || 20;
+            document.getElementById('sel-scatter-marker').value = scatterOverrides.marker || 'o';
+            document.getElementById('sel-scatter-alpha').value = scatterOverrides.alpha || 0.7;
+            document.getElementById('sel-scatter-edgecolor').value = scatterOverrides.edgecolor || '#000000';
+            document.getElementById('sel-scatter-edgecolor-text').value = scatterOverrides.edgecolor || '#000000';
+        }
+    } else if (type === 'fill') {
+        const props = document.getElementById('selected-fill-props');
+        props.style.display = 'block';
+
+        const fillOverrides = getFillOverrides(elementInfo);
+        if (fillOverrides) {
+            document.getElementById('sel-fill-color').value = fillOverrides.color || '#1f77b4';
+            document.getElementById('sel-fill-color-text').value = fillOverrides.color || '#1f77b4';
+            document.getElementById('sel-fill-alpha').value = fillOverrides.alpha || 0.3;
+        }
+    } else if (type === 'bar') {
+        const props = document.getElementById('selected-bar-props');
+        props.style.display = 'block';
+    } else if (type === 'label') {
+        const props = document.getElementById('selected-label-props');
+        props.style.display = 'block';
+
+        // Get label text from global overrides
+        const labelName = elementInfo.displayName.toLowerCase();
+        document.getElementById('sel-label-text').value = overrides[labelName] || '';
+        document.getElementById('sel-label-fontsize').value = overrides.axis_fontsize || 7;
+    } else if (type === 'panel') {
+        const props = document.getElementById('selected-panel-props');
+        props.style.display = 'block';
+
+        // Load existing panel overrides
+        const panelOverrides = getPanelOverrides(elementInfo);
+        document.getElementById('sel-panel-title').value = panelOverrides.title || '';
+        document.getElementById('sel-panel-xlabel').value = panelOverrides.xlabel || '';
+        document.getElementById('sel-panel-ylabel').value = panelOverrides.ylabel || '';
+    } else if (type === 'legend') {
+        // For legend, expand the legend section instead
+        expandSection('section-legend');
+    }
+}
+
+function getTraceOverrides(elementInfo) {
+    // Initialize element overrides storage if not exists
+    if (!overrides.element_overrides) {
+        overrides.element_overrides = {};
+    }
+
+    const key = elementInfo.original;
+    if (!overrides.element_overrides[key]) {
+        // Try to get from traces array
+        if (traces[elementInfo.index]) {
+            overrides.element_overrides[key] = { ...traces[elementInfo.index] };
+        } else {
+            overrides.element_overrides[key] = {};
+        }
+    }
+    return overrides.element_overrides[key];
+}
+
+function getScatterOverrides(elementInfo) {
+    if (!overrides.element_overrides) {
+        overrides.element_overrides = {};
+    }
+    const key = elementInfo.original;
+    if (!overrides.element_overrides[key]) {
+        overrides.element_overrides[key] = {};
+    }
+    return overrides.element_overrides[key];
+}
+
+function getFillOverrides(elementInfo) {
+    if (!overrides.element_overrides) {
+        overrides.element_overrides = {};
+    }
+    const key = elementInfo.original;
+    if (!overrides.element_overrides[key]) {
+        overrides.element_overrides[key] = {};
+    }
+    return overrides.element_overrides[key];
+}
+
+function getPanelOverrides(elementInfo) {
+    if (!overrides.element_overrides) {
+        overrides.element_overrides = {};
+    }
+    const key = elementInfo.original;
+    if (!overrides.element_overrides[key]) {
+        overrides.element_overrides[key] = {};
+    }
+    return overrides.element_overrides[key];
+}
+
+function applySelectedElementChanges() {
+    if (!selectedElement) return;
+
+    const elementInfo = parseElementName(selectedElement);
+    const type = elementInfo.type;
+
+    if (!overrides.element_overrides) {
+        overrides.element_overrides = {};
+    }
+
+    if (type === 'trace') {
+        overrides.element_overrides[selectedElement] = {
+            label: document.getElementById('sel-trace-label').value,
+            color: document.getElementById('sel-trace-color').value,
+            linewidth: parseFloat(document.getElementById('sel-trace-linewidth').value),
+            linestyle: document.getElementById('sel-trace-linestyle').value,
+            marker: document.getElementById('sel-trace-marker').value,
+            markersize: parseFloat(document.getElementById('sel-trace-markersize').value),
+            alpha: parseFloat(document.getElementById('sel-trace-alpha').value)
+        };
+    } else if (type === 'scatter') {
+        overrides.element_overrides[selectedElement] = {
+            color: document.getElementById('sel-scatter-color').value,
+            size: parseFloat(document.getElementById('sel-scatter-size').value),
+            marker: document.getElementById('sel-scatter-marker').value,
+            alpha: parseFloat(document.getElementById('sel-scatter-alpha').value),
+            edgecolor: document.getElementById('sel-scatter-edgecolor').value
+        };
+    } else if (type === 'fill') {
+        overrides.element_overrides[selectedElement] = {
+            color: document.getElementById('sel-fill-color').value,
+            alpha: parseFloat(document.getElementById('sel-fill-alpha').value)
+        };
+    } else if (type === 'label') {
+        const labelName = elementInfo.displayName.toLowerCase();
+        overrides[labelName] = document.getElementById('sel-label-text').value;
+        overrides.axis_fontsize = parseFloat(document.getElementById('sel-label-fontsize').value);
+    } else if (type === 'bar') {
+        overrides.element_overrides[selectedElement] = {
+            facecolor: document.getElementById('sel-bar-facecolor').value,
+            edgecolor: document.getElementById('sel-bar-edgecolor').value,
+            alpha: parseFloat(document.getElementById('sel-bar-alpha').value)
+        };
+    } else if (type === 'panel') {
+        // Panel-specific overrides (per-axis) including title, xlabel, ylabel
+        overrides.element_overrides[selectedElement] = {
+            title: document.getElementById('sel-panel-title').value,
+            xlabel: document.getElementById('sel-panel-xlabel').value,
+            ylabel: document.getElementById('sel-panel-ylabel').value,
+            facecolor: document.getElementById('sel-panel-facecolor').value,
+            transparent: document.getElementById('sel-panel-transparent').checked,
+            grid: document.getElementById('sel-panel-grid').checked
+        };
+    }
+
+    // Trigger update
+    updatePreview();
+    document.getElementById('status').textContent = `Applied changes to ${elementInfo.displayName}`;
+}
+
+// Sync color inputs
+function setupColorSync(colorId, textId) {
+    const colorInput = document.getElementById(colorId);
+    const textInput = document.getElementById(textId);
+    if (colorInput && textInput) {
+        colorInput.addEventListener('input', () => {
+            textInput.value = colorInput.value;
+        });
+        textInput.addEventListener('input', () => {
+            if (/^#[0-9A-Fa-f]{6}$/.test(textInput.value)) {
+                colorInput.value = textInput.value;
+            }
+        });
+    }
+}
+
+// Theme management
+function toggleTheme() {
+    const html = document.documentElement;
+    const current = html.getAttribute('data-theme');
+    const next = current === 'dark' ? 'light' : 'dark';
+    html.setAttribute('data-theme', next);
+    document.getElementById('theme-icon').innerHTML = next === 'dark' ? '&#9790;' : '&#9788;';
+    localStorage.setItem('scitex-editor-theme', next);
+}
+
+// Collapsible sections
+function toggleSection(header) {
+    header.classList.toggle('collapsed');
+    const content = header.nextElementSibling;
+    content.classList.toggle('collapsed');
+}
+
+function toggleCustomLegendPosition() {
+    const legendLoc = document.getElementById('legend_loc').value;
+    const customCoordsDiv = document.getElementById('custom-legend-coords');
+    customCoordsDiv.style.display = legendLoc === 'custom' ? 'flex' : 'none';
+}
+
+// Dimension unit toggle
+function setDimensionUnit(unit) {
+    if (unit === dimensionUnit) return;
+
+    const widthInput = document.getElementById('fig_width');
+    const heightInput = document.getElementById('fig_height');
+    const widthLabel = document.getElementById('fig_width_label');
+    const heightLabel = document.getElementById('fig_height_label');
+    const mmBtn = document.getElementById('unit-mm');
+    const inchBtn = document.getElementById('unit-inch');
+
+    // Get current values
+    let width = parseFloat(widthInput.value) || 0;
+    let height = parseFloat(heightInput.value) || 0;
+
+    // Convert values
+    if (unit === 'mm' && dimensionUnit === 'inch') {
+        // inch to mm
+        width = Math.round(width * INCH_TO_MM * 10) / 10;
+        height = Math.round(height * INCH_TO_MM * 10) / 10;
+        widthInput.min = 10;
+        widthInput.max = 300;
+        widthInput.step = 1;
+        heightInput.min = 10;
+        heightInput.max = 300;
+        heightInput.step = 1;
+    } else if (unit === 'inch' && dimensionUnit === 'mm') {
+        // mm to inch
+        width = Math.round(width * MM_TO_INCH * 100) / 100;
+        height = Math.round(height * MM_TO_INCH * 100) / 100;
+        widthInput.min = 0.5;
+        widthInput.max = 12;
+        widthInput.step = 0.05;
+        heightInput.min = 0.5;
+        heightInput.max = 12;
+        heightInput.step = 0.05;
+    }
+
+    // Update values and labels
+    widthInput.value = width;
+    heightInput.value = height;
+    widthLabel.textContent = `Width (${unit})`;
+    heightLabel.textContent = `Height (${unit})`;
+
+    // Update button states
+    if (unit === 'mm') {
+        mmBtn.classList.add('active');
+        inchBtn.classList.remove('active');
+    } else {
+        mmBtn.classList.remove('active');
+        inchBtn.classList.add('active');
+    }
+
+    dimensionUnit = unit;
+}
+
+// Background type management
+let backgroundType = 'transparent';
+let initializingBackground = true;  // Flag to prevent updates during init
+
+function setBackgroundType(type) {
+    backgroundType = type;
+
+    // Update hidden inputs for collectOverrides
+    const facecolorInput = document.getElementById('facecolor');
+    const transparentInput = document.getElementById('transparent');
+
+    if (type === 'white') {
+        facecolorInput.value = '#ffffff';
+        transparentInput.value = 'false';
+    } else if (type === 'black') {
+        facecolorInput.value = '#000000';
+        transparentInput.value = 'false';
+    } else {
+        // transparent
+        facecolorInput.value = '#ffffff';
+        transparentInput.value = 'true';
+    }
+
+    // Update button states
+    document.querySelectorAll('.bg-btn').forEach(btn => btn.classList.remove('active'));
+    document.getElementById(`bg-${type}`).classList.add('active');
+
+    // Trigger update only after initialization
+    if (!initializingBackground) {
+        scheduleUpdate();
+    }
+}
+
+// Get figure dimensions in inches (for matplotlib)
+function getFigSizeInches() {
+    let width = parseFloat(document.getElementById('fig_width').value) || 80;
+    let height = parseFloat(document.getElementById('fig_height').value) || 68;
+
+    if (dimensionUnit === 'mm') {
+        width = width * MM_TO_INCH;
+        height = height * MM_TO_INCH;
+    }
+
+    return [Math.round(width * 100) / 100, Math.round(height * 100) / 100];
+}
+
+// Initialize fields
+document.addEventListener('DOMContentLoaded', () => {
+    // Load saved theme
+    const savedTheme = localStorage.getItem('scitex-editor-theme');
+    if (savedTheme) {
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        document.getElementById('theme-icon').innerHTML = savedTheme === 'dark' ? '&#9790;' : '&#9788;';
+    }
+
+    // Labels
+    if (overrides.title) document.getElementById('title').value = overrides.title;
+    if (overrides.xlabel) document.getElementById('xlabel').value = overrides.xlabel;
+    if (overrides.ylabel) document.getElementById('ylabel').value = overrides.ylabel;
+
+    // Axis limits
+    if (overrides.xlim) {
+        document.getElementById('xmin').value = overrides.xlim[0];
+        document.getElementById('xmax').value = overrides.xlim[1];
+    }
+    if (overrides.ylim) {
+        document.getElementById('ymin').value = overrides.ylim[0];
+        document.getElementById('ymax').value = overrides.ylim[1];
+    }
+
+    // Traces
+    document.getElementById('linewidth').value = overrides.linewidth || 1.0;
+    updateTracesList();
+
+    // Legend
+    document.getElementById('legend_visible').checked = overrides.legend_visible !== false;
+    document.getElementById('legend_loc').value = overrides.legend_loc || 'best';
+    document.getElementById('legend_frameon').checked = overrides.legend_frameon || false;
+    document.getElementById('legend_fontsize').value = overrides.legend_fontsize || 6;
+    document.getElementById('legend_x').value = overrides.legend_x !== undefined ? overrides.legend_x : 0.5;
+    document.getElementById('legend_y').value = overrides.legend_y !== undefined ? overrides.legend_y : 0.5;
+    toggleCustomLegendPosition();
+
+    // Ticks
+    document.getElementById('x_n_ticks').value = overrides.x_n_ticks || overrides.n_ticks || 4;
+    document.getElementById('y_n_ticks').value = overrides.y_n_ticks || overrides.n_ticks || 4;
+    document.getElementById('hide_x_ticks').checked = overrides.hide_x_ticks || false;
+    document.getElementById('hide_y_ticks').checked = overrides.hide_y_ticks || false;
+    document.getElementById('tick_fontsize').value = overrides.tick_fontsize || 7;
+    document.getElementById('tick_length').value = overrides.tick_length || 0.8;
+    document.getElementById('tick_width').value = overrides.tick_width || 0.2;
+    document.getElementById('tick_direction').value = overrides.tick_direction || 'out';
+
+    // Style
+    document.getElementById('grid').checked = overrides.grid || false;
+    document.getElementById('hide_top_spine').checked = overrides.hide_top_spine !== false;
+    document.getElementById('hide_right_spine').checked = overrides.hide_right_spine !== false;
+    document.getElementById('axis_width').value = overrides.axis_width || 0.2;
+    document.getElementById('axis_fontsize').value = overrides.axis_fontsize || 7;
+    // Initialize background type from overrides
+    const isTransparent = overrides.transparent !== false;
+    const facecolor = overrides.facecolor || '#ffffff';
+    document.getElementById('facecolor').value = facecolor;
+
+    if (isTransparent) {
+        setBackgroundType('transparent');
+    } else if (facecolor === '#000000') {
+        setBackgroundType('black');
+    } else {
+        setBackgroundType('white');
+    }
+
+    // Dimensions (convert from inches in metadata to mm by default)
+    if (overrides.fig_size) {
+        // fig_size is in inches in the JSON - convert to mm for default display
+        const widthMm = Math.round(overrides.fig_size[0] * INCH_TO_MM);
+        const heightMm = Math.round(overrides.fig_size[1] * INCH_TO_MM);
+        document.getElementById('fig_width').value = widthMm;
+        document.getElementById('fig_height').value = heightMm;
+    }
+    document.getElementById('dpi').value = overrides.dpi || 300;
+    // Default unit is mm, which is already set in HTML and JS state
+
+    // Note: facecolor is now managed by background toggle buttons (white/transparent/black)
+    // No text input sync needed
+
+    updateAnnotationsList();
+    updatePreview();
+    initHoverSystem();
+    setAutoUpdateInterval();
+
+    // Setup color sync for selected element property inputs
+    setupColorSync('sel-trace-color', 'sel-trace-color-text');
+    setupColorSync('sel-scatter-color', 'sel-scatter-color-text');
+    setupColorSync('sel-scatter-edgecolor', 'sel-scatter-edgecolor-text');
+    setupColorSync('sel-fill-color', 'sel-fill-color-text');
+    setupColorSync('sel-bar-facecolor', 'sel-bar-facecolor-text');
+    setupColorSync('sel-bar-edgecolor', 'sel-bar-edgecolor-text');
+    setupColorSync('sel-panel-facecolor', 'sel-panel-facecolor-text');
+
+    // Mark initialization complete - now background changes will trigger updates
+    initializingBackground = false;
+});
+
+// Traces list management
+function updateTracesList() {
+    const list = document.getElementById('traces-list');
+    if (!traces || traces.length === 0) {
+        list.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 0.85em;">No traces found in metadata</div>';
+        return;
+    }
+
+    list.innerHTML = traces.map((t, i) => `
+        <div class="trace-item">
+            <input type="color" class="trace-color" value="${t.color || '#1f77b4'}"
+                   onchange="updateTraceColor(${i}, this.value)">
+            <span class="trace-label">${t.label || t.id || 'Trace ' + (i+1)}</span>
+            <div class="trace-style">
+                <select onchange="updateTraceStyle(${i}, this.value)">
+                    <option value="-" ${t.linestyle === '-' ? 'selected' : ''}>Solid</option>
+                    <option value="--" ${t.linestyle === '--' ? 'selected' : ''}>Dashed</option>
+                    <option value=":" ${t.linestyle === ':' ? 'selected' : ''}>Dotted</option>
+                    <option value="-." ${t.linestyle === '-.' ? 'selected' : ''}>Dash-dot</option>
+                </select>
+            </div>
+        </div>
+    `).join('');
+}
+
+function updateTraceColor(idx, color) {
+    if (traces[idx]) {
+        traces[idx].color = color;
+        scheduleUpdate();
+    }
+}
+
+function updateTraceStyle(idx, style) {
+    if (traces[idx]) {
+        traces[idx].linestyle = style;
+        scheduleUpdate();
+    }
+}
+
+function collectOverrides() {
+    const o = {};
+
+    // Labels
+    const title = document.getElementById('title').value;
+    const xlabel = document.getElementById('xlabel').value;
+    const ylabel = document.getElementById('ylabel').value;
+    if (title) o.title = title;
+    if (xlabel) o.xlabel = xlabel;
+    if (ylabel) o.ylabel = ylabel;
+
+    // Axis limits
+    const xmin = document.getElementById('xmin').value;
+    const xmax = document.getElementById('xmax').value;
+    if (xmin !== '' && xmax !== '') o.xlim = [parseFloat(xmin), parseFloat(xmax)];
+
+    const ymin = document.getElementById('ymin').value;
+    const ymax = document.getElementById('ymax').value;
+    if (ymin !== '' && ymax !== '') o.ylim = [parseFloat(ymin), parseFloat(ymax)];
+
+    // Traces
+    o.linewidth = parseFloat(document.getElementById('linewidth').value) || 1.0;
+    o.traces = traces;
+
+    // Legend
+    o.legend_visible = document.getElementById('legend_visible').checked;
+    o.legend_loc = document.getElementById('legend_loc').value;
+    o.legend_frameon = document.getElementById('legend_frameon').checked;
+    o.legend_fontsize = parseInt(document.getElementById('legend_fontsize').value) || 6;
+    o.legend_x = parseFloat(document.getElementById('legend_x').value) || 0.5;
+    o.legend_y = parseFloat(document.getElementById('legend_y').value) || 0.5;
+
+    // Ticks
+    o.x_n_ticks = parseInt(document.getElementById('x_n_ticks').value) || 4;
+    o.y_n_ticks = parseInt(document.getElementById('y_n_ticks').value) || 4;
+    o.hide_x_ticks = document.getElementById('hide_x_ticks').checked;
+    o.hide_y_ticks = document.getElementById('hide_y_ticks').checked;
+    o.tick_fontsize = parseInt(document.getElementById('tick_fontsize').value) || 7;
+    o.tick_length = parseFloat(document.getElementById('tick_length').value) || 0.8;
+    o.tick_width = parseFloat(document.getElementById('tick_width').value) || 0.2;
+    o.tick_direction = document.getElementById('tick_direction').value;
+
+    // Style
+    o.grid = document.getElementById('grid').checked;
+    o.hide_top_spine = document.getElementById('hide_top_spine').checked;
+    o.hide_right_spine = document.getElementById('hide_right_spine').checked;
+    o.axis_width = parseFloat(document.getElementById('axis_width').value) || 0.2;
+    o.axis_fontsize = parseInt(document.getElementById('axis_fontsize').value) || 7;
+    o.facecolor = document.getElementById('facecolor').value;
+    o.transparent = document.getElementById('transparent').value === 'true';
+
+    // Dimensions (always in inches for matplotlib)
+    o.fig_size = getFigSizeInches();
+    o.dpi = parseInt(document.getElementById('dpi').value) || 300;
+
+    // Annotations
+    o.annotations = overrides.annotations || [];
+
+    // Element-specific overrides (per-element styles)
+    if (overrides.element_overrides) {
+        o.element_overrides = overrides.element_overrides;
+    }
+
+    return o;
+}
+
+async function updatePreview() {
+    setStatus('Updating...', false);
+    overrides = collectOverrides();
+    try {
+        const resp = await fetch('/update', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({overrides})
+        });
+        const data = await resp.json();
+        document.getElementById('preview-img').src = 'data:image/png;base64,' + data.image;
+
+        if (data.bboxes) {
+            elementBboxes = data.bboxes;
+        }
+        if (data.img_size) {
+            imgSize = data.img_size;
+        }
+
+        selectedElement = null;
+        hoveredElement = null;
+        updateOverlay();
+
+        setStatus('Preview updated', false);
+    } catch (e) {
+        setStatus('Error: ' + e.message, true);
+    }
+}
+
+async function saveManual() {
+    setStatus('Saving...', false);
+    try {
+        const resp = await fetch('/save', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'}
+        });
+        const data = await resp.json();
+        if (data.status === 'saved') {
+            setStatus('Saved: ' + data.path.split('/').pop(), false);
+        } else {
+            setStatus('Error: ' + data.message, true);
+        }
+    } catch (e) {
+        setStatus('Error: ' + e.message, true);
+    }
+}
+
+function resetOverrides() {
+    if (confirm('Reset all changes to original values?')) {
+        location.reload();
+    }
+}
+
+function addAnnotation() {
+    const text = document.getElementById('annot-text').value;
+    if (!text) return;
+    const x = parseFloat(document.getElementById('annot-x').value) || 0.5;
+    const y = parseFloat(document.getElementById('annot-y').value) || 0.5;
+    const size = parseInt(document.getElementById('annot-size').value) || 8;
+    if (!overrides.annotations) overrides.annotations = [];
+    overrides.annotations.push({type: 'text', text, x, y, fontsize: size});
+    document.getElementById('annot-text').value = '';
+    updateAnnotationsList();
+    updatePreview();
+}
+
+function removeAnnotation(idx) {
+    overrides.annotations.splice(idx, 1);
+    updateAnnotationsList();
+    updatePreview();
+}
+
+function updateAnnotationsList() {
+    const list = document.getElementById('annotations-list');
+    const annotations = overrides.annotations || [];
+    if (annotations.length === 0) {
+        list.innerHTML = '';
+        return;
+    }
+    list.innerHTML = annotations.map((a, i) =>
+        `<div class="annotation-item">
+            <span>${a.text.substring(0, 25)}${a.text.length > 25 ? '...' : ''} (${a.x.toFixed(2)}, ${a.y.toFixed(2)})</span>
+            <button onclick="removeAnnotation(${i})">Remove</button>
+        </div>`
+    ).join('');
+}
+
+function setStatus(msg, isError = false) {
+    const el = document.getElementById('status');
+    el.textContent = msg;
+    el.classList.toggle('error', isError);
+}
+
+// Debounced auto-update
+let updateTimer = null;
+const DEBOUNCE_DELAY = 500;
+
+function scheduleUpdate() {
+    if (updateTimer) clearTimeout(updateTimer);
+    updateTimer = setTimeout(() => {
+        updatePreview();
+    }, DEBOUNCE_DELAY);
+}
+
+// Auto-update on input changes
+document.querySelectorAll('input[type="text"], input[type="number"]').forEach(el => {
+    el.addEventListener('input', scheduleUpdate);
+    el.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            if (updateTimer) clearTimeout(updateTimer);
+            updatePreview();
+        }
+    });
+});
+
+document.querySelectorAll('input[type="checkbox"], select').forEach(el => {
+    el.addEventListener('change', () => {
+        if (updateTimer) clearTimeout(updateTimer);
+        updatePreview();
+    });
+});
+
+document.querySelectorAll('input[type="color"]').forEach(el => {
+    el.addEventListener('change', () => {
+        if (updateTimer) clearTimeout(updateTimer);
+        updatePreview();
+    });
+});
+
+// Ctrl+S keyboard shortcut to save
+document.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        saveManual();
+    }
+});
+
+// Auto-update interval system
+let autoUpdateIntervalId = null;
+
+function setAutoUpdateInterval() {
+    if (autoUpdateIntervalId) {
+        clearInterval(autoUpdateIntervalId);
+        autoUpdateIntervalId = null;
+    }
+
+    const intervalMs = parseInt(document.getElementById('auto_update_interval').value);
+    if (intervalMs > 0) {
+        autoUpdateIntervalId = setInterval(() => {
+            updatePreview();
+        }, intervalMs);
+    }
+}
+"""
+
+
+# EOF