figrecipe 0.6.0__py3-none-any.whl → 0.9.0__py3-none-any.whl

figrecipe/_editor/_templates/_scripts/_datatable/_plot.py

@@ -0,0 +1,261 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Datatable plotting JavaScript: hints, variable assignment, plotting."""
+
+from ...._plot_types_registry import generate_js_hints
+
+
+def get_js_datatable_plot() -> str:
+    """Generate JavaScript for plot type hints and variable assignment."""
+    js_hints = generate_js_hints()
+
+    return f"""
+// ============================================================================
+// Plot Type Hints (Generated from matplotlib signatures)
+// ============================================================================
+{js_hints}
+
+function initPlotTypeButtons() {{
+    const selector = document.getElementById('datatable-plot-type');
+    if (!selector) return;
+
+    selector.addEventListener('change', (e) => {{
+        datatablePlotType = e.target.value;
+        updateVarAssignSlots();
+        updatePlotButtonState();
+    }});
+}}
+
+// ============================================================================
+// Variable Assignment UI with Color-Coded Linking
+// ============================================================================
+let datatableVarColors = {{}};  // Maps varName -> colorIndex
+
+function updateVarAssignSlots() {{
+    const container = document.getElementById('var-assign-slots');
+    const varAssignDiv = document.getElementById('datatable-var-assign');
+    if (!container || !varAssignDiv) return;
+
+    const info = PLOT_TYPE_HINTS[datatablePlotType];
+    if (!info || !datatableData) {{
+        varAssignDiv.style.display = 'none';
+        return;
+    }}
+
+    // Parse variables from hint to preserve signature order
+    const hintMatch = info.hint.match(/\\((.*)\\)/);
+    const argsStr = hintMatch ? hintMatch[1] : '';
+
+    // Parse each arg, preserving order and optional status
+    const allVars = [];
+    argsStr.split(',').forEach(arg => {{
+        arg = arg.trim();
+        if (!arg || arg === 'data') return;
+        const isOptional = arg.startsWith('[') && arg.endsWith(']');
+        const varName = arg.replace(/[\\[\\]]/g, '');
+        allVars.push({{ name: varName, optional: isOptional }});
+    }});
+
+    // Reset assignments and colors
+    datatableVarAssignments = {{}};
+    datatableVarColors = {{}};
+
+    // Assign colors to each variable (0-5 cycle)
+    allVars.forEach((v, idx) => {{
+        datatableVarColors[v.name] = idx % 6;
+    }});
+
+    // Build column options
+    const columns = datatableData.columns || [];
+    let colOptions = '<option value="">--</option>';
+    columns.forEach((col, idx) => {{
+        colOptions += `<option value="${{idx}}">${{col.name}}</option>`;
+    }});
+
+    // Build slots HTML in signature order with color classes
+    let html = '';
+    let requiredIdx = 0;
+
+    allVars.forEach((v, idx) => {{
+        const isOptional = v.optional;
+        const varName = v.name;
+        const colorClass = `var-color-${{idx % 6}}`;
+
+        if (isOptional) {{
+            html += `
+            <div class="var-assign-slot optional ${{colorClass}}" data-var="${{varName}}">
+                <span class="var-name">[${{varName}}]:</span>
+                <select onchange="assignVariable('${{varName}}', this.value, false)">
+                    ${{colOptions}}
+                </select>
+            </div>`;
+        }} else {{
+            const autoAssign = requiredIdx < columns.length ? requiredIdx : '';
+            if (autoAssign !== '') {{
+                datatableVarAssignments[varName] = autoAssign;
+            }}
+            const selectedOpt = autoAssign !== '' ? colOptions.replace(`value="${{autoAssign}}"`, `value="${{autoAssign}}" selected`) : colOptions;
+            html += `
+            <div class="var-assign-slot required ${{colorClass}}${{autoAssign !== '' ? ' assigned' : ''}}" data-var="${{varName}}">
+                <span class="var-name">${{varName}}:</span>
+                <select onchange="assignVariable('${{varName}}', this.value, true)">
+                    ${{selectedOpt}}
+                </select>
+            </div>`;
+            requiredIdx++;
+        }}
+    }});
+
+    container.innerHTML = html;
+    varAssignDiv.style.display = html ? 'block' : 'none';
+
+    updatePlotButtonState();
+    updateSelectionInfo();
+    updateColumnHighlights();
+}}
+
+function updateColumnHighlights() {{
+    // Remove all existing highlights from headers
+    document.querySelectorAll('.datatable-table th').forEach(th => {{
+        th.classList.remove('var-linked', 'var-color-0', 'var-color-1', 'var-color-2', 'var-color-3', 'var-color-4', 'var-color-5');
+    }});
+
+    // Remove highlights from cells
+    document.querySelectorAll('.datatable-table td.var-linked-cell').forEach(td => {{
+        td.classList.remove('var-linked-cell');
+    }});
+
+    // Add highlights based on current assignments
+    Object.entries(datatableVarAssignments).forEach(([varName, colIdx]) => {{
+        const colorIdx = datatableVarColors[varName];
+        if (colorIdx === undefined) return;
+
+        // Find the column header using data-col attribute (more reliable)
+        const th = document.querySelector(`.datatable-table th[data-col="${{colIdx}}"]`);
+        if (th) {{
+            th.classList.add('var-linked', `var-color-${{colorIdx}}`);
+        }}
+
+        // Also highlight all cells in this column
+        document.querySelectorAll(`.datatable-table td[data-col="${{colIdx}}"]`).forEach(td => {{
+            td.classList.add('var-linked-cell');
+        }});
+    }});
+}}
+
+function assignVariable(varName, colIdx, isRequired) {{
+    const slot = event.target.closest('.var-assign-slot');
+
+    if (colIdx === '' || colIdx === null) {{
+        delete datatableVarAssignments[varName];
+        if (slot) slot.classList.remove('assigned');
+    }} else {{
+        datatableVarAssignments[varName] = parseInt(colIdx);
+        if (slot) slot.classList.add('assigned');
+    }}
+
+    updatePlotButtonState();
+    updateSelectionInfo();
+    updateColumnHighlights();
+}}
+
+function updatePlotButtonState() {{
+    const plotBtn = document.getElementById('btn-datatable-plot');
+    if (!plotBtn) return;
+
+    const info = PLOT_TYPE_HINTS[datatablePlotType];
+    if (!info) {{
+        plotBtn.disabled = true;
+        return;
+    }}
+
+    // Check if all required variables are assigned
+    const requiredVars = info.required.split(',').map(s => s.trim()).filter(s => s && s !== 'data');
+    const allAssigned = requiredVars.length === 0 || requiredVars.every(v => datatableVarAssignments[v] !== undefined);
+
+    plotBtn.disabled = !allAssigned || !datatableData;
+}}
+
+// ============================================================================
+// Plot from Variable Assignments
+// ============================================================================
+async function plotFromVarAssignments() {{
+    if (!datatableData || Object.keys(datatableVarAssignments).length === 0) return;
+
+    // Build data and columns from variable assignments
+    const plotData = {{}};
+    const columns = [];
+
+    // Order matters: required vars first, then optional
+    const info = PLOT_TYPE_HINTS[datatablePlotType];
+    const requiredVars = info.required.split(',').map(s => s.trim()).filter(s => s && s !== 'data');
+    const optionalVars = info.optional.split(',').map(s => s.replace(/[\\[\\]]/g, '').trim()).filter(s => s);
+
+    [...requiredVars, ...optionalVars].forEach(varName => {{
+        const colIdx = datatableVarAssignments[varName];
+        if (colIdx !== undefined) {{
+            const col = datatableData.columns[colIdx];
+            plotData[col.name] = datatableData.rows.map(row => row[colIdx]);
+            columns.push(col.name);
+        }}
+    }});
+
+    if (columns.length === 0) return;
+
+    // Send to backend for plotting
+    if (typeof showSpinner === 'function') showSpinner();
+
+    try {{
+        const response = await fetch('/datatable/plot', {{
+            method: 'POST',
+            headers: {{ 'Content-Type': 'application/json' }},
+            body: JSON.stringify({{
+                data: plotData,
+                columns: columns,
+                plot_type: datatablePlotType,
+                target_axis: datatableTargetAxis
+            }})
+        }});
+
+        const result = await response.json();
+
+        if (result.success) {{
+            // Update preview
+            const previewImg = document.getElementById('preview-image');
+            if (previewImg && result.image) {{
+                previewImg.src = 'data:image/png;base64,' + result.image;
+            }}
+
+            // Update bboxes
+            if (result.bboxes && typeof currentBboxes !== 'undefined') {{
+                currentBboxes = result.bboxes;
+            }}
+
+            // Reload hitmap
+            if (typeof loadHitmap === 'function') loadHitmap();
+
+            // Refresh panel selector (in case new panel was added)
+            if (typeof updatePanelSelector === 'function') updatePanelSelector();
+
+            // Clear selection
+            if (typeof clearSelection === 'function') clearSelection();
+        }} else {{
+            console.error('Plot failed:', result.error);
+            alert('Failed to create plot: ' + (result.error || 'Unknown error'));
+        }}
+    }} catch (err) {{
+        console.error('Plot request failed:', err);
+        alert('Failed to create plot: ' + err.message);
+    }} finally {{
+        if (typeof hideSpinner === 'function') hideSpinner();
+    }}
+}}
+"""
+
+
+# For backward compatibility
+JS_DATATABLE_PLOT = get_js_datatable_plot()
+
+__all__ = ["JS_DATATABLE_PLOT", "get_js_datatable_plot"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_datatable/_selection.py

@@ -0,0 +1,438 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Datatable cell selection JavaScript - multi-cell selection and highlights."""
+
+JS_DATATABLE_SELECTION = """
+// ============================================================================
+// Cell Selection State
+// ============================================================================
+let datatableCurrentCell = null;  // { row, col } - active cell for input
+let datatableSelectedCells = null;  // { startRow, startCol, endRow, endCol } - range
+let datatableIsSelecting = false;  // Mouse drag selection in progress
+let datatableEditMode = false;  // Cell is being edited
+
+// ============================================================================
+// Cell Event Listeners (Event Delegation Pattern - vis_app)
+// ============================================================================
+let datatableListenersAttached = false;
+
+function attachCellEventListeners() {
+    const table = document.querySelector('.datatable-table');
+    if (!table || datatableListenersAttached) return;
+
+    // Use event delegation - attach once to table, handle all cells
+    // This is efficient for large tables (100+ rows)
+
+    // Click to select cell (delegated)
+    table.addEventListener('click', handleCellClick);
+
+    // Double-click to edit (delegated)
+    table.addEventListener('dblclick', handleCellDoubleClick);
+
+    // Mouse drag for range selection (delegated)
+    table.addEventListener('mousedown', handleMouseDown);
+
+    // These need document-level for drag outside table
+    if (!datatableListenersAttached) {
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }
+
+    // Keyboard navigation and editing (delegated)
+    table.addEventListener('keydown', handleCellKeydown);
+
+    // Clipboard events (delegated)
+    table.addEventListener('copy', handleCopy);
+    table.addEventListener('paste', handlePaste);
+    table.addEventListener('cut', handleCut);
+
+    // Context menu (right-click)
+    if (typeof attachContextMenuListener === 'function') {
+        attachContextMenuListener();
+    }
+
+    datatableListenersAttached = true;
+}
+
+function handleCellClick(e) {
+    const cell = e.target.closest('td[data-row][data-col]');
+    if (!cell || datatableEditMode) return;
+
+    const row = parseInt(cell.dataset.row);
+    const col = parseInt(cell.dataset.col);
+
+    if (e.shiftKey && datatableCurrentCell) {
+        // Shift+click: extend selection
+        datatableSelectedCells = {
+            startRow: datatableCurrentCell.row,
+            startCol: datatableCurrentCell.col,
+            endRow: row,
+            endCol: col
+        };
+    } else {
+        // Regular click: single cell selection
+        datatableCurrentCell = { row, col };
+        datatableSelectedCells = {
+            startRow: row, startCol: col, endRow: row, endCol: col
+        };
+    }
+
+    updateCellSelectionDisplay();
+    cell.focus();
+}
+
+function handleCellDoubleClick(e) {
+    const cell = e.target.closest('td[data-row][data-col]');
+    if (!cell) return;
+    enterCellEditMode(cell);
+}
+
+function handleMouseDown(e) {
+    const cell = e.target.closest('td[data-row][data-col]');
+    if (!cell || datatableEditMode) return;
+
+    datatableIsSelecting = true;
+    const row = parseInt(cell.dataset.row);
+    const col = parseInt(cell.dataset.col);
+    datatableCurrentCell = { row, col };
+    datatableSelectedCells = {
+        startRow: row, startCol: col, endRow: row, endCol: col
+    };
+    updateCellSelectionDisplay();
+}
+
+function handleMouseMove(e) {
+    if (!datatableIsSelecting) return;
+
+    const elem = document.elementFromPoint(e.clientX, e.clientY);
+    const cell = elem?.closest('td[data-row][data-col]');
+    if (!cell) return;
+
+    const row = parseInt(cell.dataset.row);
+    const col = parseInt(cell.dataset.col);
+    datatableSelectedCells.endRow = row;
+    datatableSelectedCells.endCol = col;
+    updateCellSelectionDisplay();
+}
+
+function handleMouseUp() {
+    datatableIsSelecting = false;
+}
+
+// ============================================================================
+// Cell Selection Display
+// ============================================================================
+function updateCellSelectionDisplay() {
+    // Clear previous selection
+    document.querySelectorAll('.datatable-table td.cell-selected').forEach(td => {
+        td.classList.remove('cell-selected', 'cell-current');
+    });
+
+    if (!datatableSelectedCells) return;
+
+    const { startRow, startCol, endRow, endCol } = datatableSelectedCells;
+    const minRow = Math.min(startRow, endRow);
+    const maxRow = Math.max(startRow, endRow);
+    const minCol = Math.min(startCol, endCol);
+    const maxCol = Math.max(startCol, endCol);
+
+    // Highlight selected range
+    for (let r = minRow; r <= maxRow; r++) {
+        for (let c = minCol; c <= maxCol; c++) {
+            const cell = document.querySelector(
+                `td[data-row="${r}"][data-col="${c}"]`
+            );
+            if (cell) cell.classList.add('cell-selected');
+        }
+    }
+
+    // Mark current cell
+    if (datatableCurrentCell) {
+        const current = document.querySelector(
+            `td[data-row="${datatableCurrentCell.row}"][data-col="${datatableCurrentCell.col}"]`
+        );
+        if (current) current.classList.add('cell-current');
+    }
+}
+
+function moveToNextCell(deltaRow, deltaCol) {
+    if (!datatableCurrentCell || !datatableData) return;
+
+    let newRow = datatableCurrentCell.row + deltaRow;
+    let newCol = datatableCurrentCell.col + deltaCol;
+
+    // Wrap around columns
+    if (newCol >= datatableData.columns.length) {
+        newCol = 0;
+        newRow++;
+    } else if (newCol < 0) {
+        newCol = datatableData.columns.length - 1;
+        newRow--;
+    }
+
+    // Clamp rows
+    const maxRows = Math.min(datatableData.rows.length, 100);
+    newRow = Math.max(0, Math.min(newRow, maxRows - 1));
+
+    datatableCurrentCell = { row: newRow, col: newCol };
+    datatableSelectedCells = {
+        startRow: newRow, startCol: newCol, endRow: newRow, endCol: newCol
+    };
+    updateCellSelectionDisplay();
+
+    const nextCell = document.querySelector(
+        `td[data-row="${newRow}"][data-col="${newCol}"]`
+    );
+    if (nextCell) nextCell.focus();
+}
+
+// Calculate next cell position (shared by both functions)
+function calculateNextPosition(mode, reverse) {
+    if (!datatableCurrentCell || !datatableData) return null;
+
+    const maxRows = Math.min(datatableData.rows.length, datatableRenderedRows || 100) - 1;
+    const maxCols = datatableData.columns.length - 1;
+
+    // Get selection bounds (or just current cell if no selection)
+    let minRow = 0, minCol = 0, selMaxRow = maxRows, selMaxCol = maxCols;
+    const hasRangeSelection = datatableSelectedCells &&
+        (datatableSelectedCells.startRow !== datatableSelectedCells.endRow ||
+         datatableSelectedCells.startCol !== datatableSelectedCells.endCol);
+
+    if (hasRangeSelection) {
+        minRow = Math.min(datatableSelectedCells.startRow, datatableSelectedCells.endRow);
+        selMaxRow = Math.max(datatableSelectedCells.startRow, datatableSelectedCells.endRow);
+        minCol = Math.min(datatableSelectedCells.startCol, datatableSelectedCells.endCol);
+        selMaxCol = Math.max(datatableSelectedCells.startCol, datatableSelectedCells.endCol);
+    }
+
+    let { row, col } = datatableCurrentCell;
+
+    if (mode === 'tab') {
+        // Tab: horizontal movement (left-to-right, wrap to next row)
+        if (!reverse) {
+            if (col < selMaxCol) {
+                col++;
+            } else {
+                col = minCol;
+                row = row < selMaxRow ? row + 1 : minRow;
+            }
+        } else {
+            if (col > minCol) {
+                col--;
+            } else {
+                col = selMaxCol;
+                row = row > minRow ? row - 1 : selMaxRow;
+            }
+        }
+    } else {
+        // Enter: vertical movement (top-to-bottom, wrap to next column)
+        if (!reverse) {
+            if (row < selMaxRow) {
+                row++;
+            } else {
+                row = minRow;
+                col = col < selMaxCol ? col + 1 : minCol;
+            }
+        } else {
+            if (row > minRow) {
+                row--;
+            } else {
+                row = selMaxRow;
+                col = col > minCol ? col - 1 : selMaxCol;
+            }
+        }
+    }
+
+    return { row, col, hasRangeSelection };
+}
+
+// Smart Tab/Enter navigation (vis_app pattern) - selection mode only (no edit)
+// Tab: horizontal (left-to-right, wrap to next row)
+// Enter: vertical (top-to-bottom, wrap to next column)
+function navigateWithTabEnter(mode, reverse) {
+    const result = calculateNextPosition(mode, reverse);
+    if (!result) return;
+
+    const { row, col, hasRangeSelection } = result;
+
+    datatableCurrentCell = { row, col };
+
+    // If we have a range selection, keep it; otherwise move selection too
+    if (!hasRangeSelection) {
+        datatableSelectedCells = {
+            startRow: row, startCol: col, endRow: row, endCol: col
+        };
+    }
+
+    updateCellSelectionDisplay();
+
+    const nextCell = document.querySelector(`td[data-row="${row}"][data-col="${col}"]`);
+    if (nextCell) nextCell.focus();
+}
+
+// Smart Tab/Enter navigation AND enter edit mode (scitex-cloud pattern)
+// Used when exiting edit mode with Tab/Enter to continue editing in next cell
+function navigateWithTabEnterAndEdit(mode, reverse) {
+    const result = calculateNextPosition(mode, reverse);
+    if (!result) return;
+
+    const { row, col, hasRangeSelection } = result;
+
+    datatableCurrentCell = { row, col };
+
+    // If we have a range selection, keep it; otherwise move selection too
+    if (!hasRangeSelection) {
+        datatableSelectedCells = {
+            startRow: row, startCol: col, endRow: row, endCol: col
+        };
+    }
+
+    updateCellSelectionDisplay();
+
+    const nextCell = document.querySelector(`td[data-row="${row}"][data-col="${col}"]`);
+    if (nextCell) {
+        // Enter edit mode on the next cell (scitex-cloud behavior)
+        enterCellEditMode(nextCell);
+    }
+}
+
+// ============================================================================
+// Keyboard Navigation
+// ============================================================================
+function handleCellKeydown(e) {
+    if (datatableEditMode) return;
+
+    const cell = e.target.closest('td[data-row][data-col]');
+    if (!cell) return;
+
+    switch (e.key) {
+        case 'ArrowUp':
+            e.preventDefault();
+            moveToNextCell(-1, 0);
+            break;
+        case 'ArrowDown':
+            e.preventDefault();
+            moveToNextCell(1, 0);
+            break;
+        case 'ArrowLeft':
+            e.preventDefault();
+            moveToNextCell(0, -1);
+            break;
+        case 'ArrowRight':
+            e.preventDefault();
+            moveToNextCell(0, 1);
+            break;
+        case 'Tab':
+            e.preventDefault();
+            navigateWithTabEnter('tab', e.shiftKey);
+            break;
+        case 'Enter':
+            e.preventDefault();
+            navigateWithTabEnter('enter', e.shiftKey);
+            break;
+        case 'F2':
+            e.preventDefault();
+            enterCellEditMode(cell);
+            break;
+        case 'Delete':
+        case 'Backspace':
+            e.preventDefault();
+            clearSelectedCells();
+            break;
+        default:
+            // Type to start editing
+            if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+                enterCellEditMode(cell);
+            }
+    }
+}
+
+function clearSelectedCells() {
+    if (!datatableSelectedCells || !datatableData) return;
+
+    const { startRow, startCol, endRow, endCol } = datatableSelectedCells;
+    const minRow = Math.min(startRow, endRow);
+    const maxRow = Math.max(startRow, endRow);
+    const minCol = Math.min(startCol, endCol);
+    const maxCol = Math.max(startCol, endCol);
+
+    for (let r = minRow; r <= maxRow; r++) {
+        for (let c = minCol; c <= maxCol; c++) {
+            if (datatableData.rows[r]) {
+                datatableData.rows[r][c] = '';
+            }
+        }
+    }
+
+    renderDatatable();
+    updateCellSelectionDisplay();
+}
+
+// ============================================================================
+// Shortcuts Info Popup
+// ============================================================================
+let shortcutsPopup = null;
+
+function showShortcutsPopup() {
+    if (!shortcutsPopup) {
+        shortcutsPopup = document.createElement('div');
+        shortcutsPopup.className = 'shortcuts-popup';
+        shortcutsPopup.innerHTML = `
+            <div class="shortcuts-header">
+                <h4>Keyboard Shortcuts</h4>
+                <button class="btn-close" onclick="hideShortcutsPopup()">&times;</button>
+            </div>
+            <div class="shortcuts-content">
+                <div class="shortcut-group">
+                    <div class="shortcut-row"><kbd>Tab</kbd> Move right (wrap to next row)</div>
+                    <div class="shortcut-row"><kbd>Shift+Tab</kbd> Move left</div>
+                    <div class="shortcut-row"><kbd>Enter</kbd> Move down (wrap to next col)</div>
+                    <div class="shortcut-row"><kbd>Shift+Enter</kbd> Move up</div>
+                </div>
+                <div class="shortcut-group">
+                    <div class="shortcut-row"><kbd>F2</kbd> Edit cell</div>
+                    <div class="shortcut-row"><kbd>Esc</kbd> Cancel edit</div>
+                    <div class="shortcut-row"><kbd>Delete</kbd> Clear selected cells</div>
+                </div>
+                <div class="shortcut-group">
+                    <div class="shortcut-row"><kbd>Ctrl+C</kbd> Copy</div>
+                    <div class="shortcut-row"><kbd>Ctrl+X</kbd> Cut</div>
+                    <div class="shortcut-row"><kbd>Ctrl+V</kbd> Paste</div>
+                </div>
+                <div class="shortcut-group">
+                    <div class="shortcut-row"><kbd>Click</kbd> Select cell</div>
+                    <div class="shortcut-row"><kbd>Shift+Click</kbd> Extend selection</div>
+                    <div class="shortcut-row"><kbd>Drag</kbd> Range selection</div>
+                    <div class="shortcut-row"><kbd>Right-click</kbd> Context menu</div>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(shortcutsPopup);
+    }
+    shortcutsPopup.style.display = 'block';
+}
+
+function hideShortcutsPopup() {
+    if (shortcutsPopup) {
+        shortcutsPopup.style.display = 'none';
+    }
+}
+
+// Attach shortcuts button listener
+function initShortcutsButton() {
+    const btn = document.getElementById('btn-shortcuts-info');
+    if (btn) {
+        btn.addEventListener('click', showShortcutsPopup);
+    }
+}
+
+// Initialize on load
+if (typeof window !== 'undefined') {
+    window.addEventListener('DOMContentLoaded', initShortcutsButton);
+}
+"""
+
+__all__ = ["JS_DATATABLE_SELECTION"]
+
+# EOF