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

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

@@ -0,0 +1,256 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Datatable table rendering JavaScript with smart cell truncation."""
+
+JS_DATATABLE_TABLE = """
+// ============================================================================
+// Render Datatable (with span-wrapped cells for smart truncation)
+// ============================================================================
+function renderDatatable() {
+    const content = document.getElementById('datatable-content');
+    if (!content || !datatableData) return;
+
+    const { columns, rows } = datatableData;
+
+    // Build table HTML with span-wrapped content (vis_app pattern)
+    let html = '<table class="datatable-table" tabindex="0">';
+
+    // Header row
+    html += '<thead><tr>';
+    html += '<th class="row-num">#</th>';
+    columns.forEach((col, idx) => {
+        const isSelected = datatableSelectedColumns.has(idx);
+        html += `<th class="${isSelected ? 'selected' : ''}" data-col="${idx}">
+            <div class="datatable-col-header">
+                <input type="checkbox"
+                       data-col-idx="${idx}"
+                       ${isSelected ? 'checked' : ''}
+                       onchange="toggleColumnSelection(${idx})">
+                <span class="col-name" title="${col.name}">${col.name}</span>
+                <span class="col-type">${col.type === 'numeric' ? 'N' : 'S'}</span>
+            </div>
+        </th>`;
+    });
+    html += '</tr></thead>';
+
+    // Data rows (limit to first 100 for performance)
+    html += '<tbody>';
+    const maxRows = Math.min(rows.length, 100);
+    for (let i = 0; i < maxRows; i++) {
+        html += `<tr data-row-idx="${i}">`;
+        html += `<td class="row-num">${i + 1}</td>`;
+        columns.forEach((col, colIdx) => {
+            const value = rows[i][colIdx];
+            const displayValue = value === null || value === undefined ? '' : value;
+            // Wrap in span for smart truncation without interfering with editing
+            html += `<td data-row="${i}" data-col="${colIdx}" tabindex="0" title="${displayValue}">
+                <span class="cell-text">${displayValue}</span>
+            </td>`;
+        });
+        html += '</tr>';
+    }
+    html += '</tbody></table>';
+
+    content.innerHTML = html;
+
+    // Attach cell event listeners for selection/editing/clipboard
+    if (typeof attachCellEventListeners === 'function') {
+        attachCellEventListeners();
+    }
+
+    // Update selection info
+    updateSelectionInfo();
+
+    // Hide dropzone, show content
+    const dropzone = document.getElementById('datatable-dropzone');
+    if (dropzone) dropzone.style.display = 'none';
+    const toolbar = document.querySelector('.datatable-toolbar');
+    if (toolbar) toolbar.style.display = 'flex';
+}
+
+// ============================================================================
+// Column Selection (for backward compatibility)
+// ============================================================================
+function toggleColumnSelection(colIdx) {
+    if (datatableSelectedColumns.has(colIdx)) {
+        datatableSelectedColumns.delete(colIdx);
+    } else {
+        datatableSelectedColumns.add(colIdx);
+    }
+
+    const isSelected = datatableSelectedColumns.has(colIdx);
+
+    // Update header styling
+    const th = document.querySelector(`th:has(input[data-col-idx="${colIdx}"])`);
+    if (th) {
+        th.classList.toggle('selected', isSelected);
+    }
+
+    // Update entire column cells highlighting
+    document.querySelectorAll(`td[data-col="${colIdx}"]`).forEach(td => {
+        td.classList.toggle('col-selected', isSelected);
+    });
+
+    updateSelectionInfo();
+}
+
+function updateSelectionInfo() {
+    const info = document.getElementById('datatable-selection-info');
+
+    if (info) {
+        // Count assigned variables
+        const assignedCount = Object.keys(datatableVarAssignments).length;
+        if (assignedCount > 0) {
+            info.innerHTML = `<span class="selected-count">${assignedCount}</span> variable${assignedCount !== 1 ? 's' : ''} assigned`;
+        } else {
+            info.innerHTML = `<span class="selected-count">0</span> variables assigned`;
+        }
+    }
+}
+
+// ============================================================================
+// Canvas-Datatable Linking: Highlight columns for selected canvas element
+// ============================================================================
+let datatableLinkedCallId = null;
+
+function highlightDatatableForElement(callId) {
+    datatableLinkedCallId = callId;
+
+    // Clear previous highlights (headers and data cells)
+    document.querySelectorAll('.datatable-table .canvas-linked').forEach(el => {
+        el.classList.remove('canvas-linked');
+    });
+
+    if (!callId || !datatableData) return;
+
+    const columns = datatableData.columns || [];
+    const matchedIndices = [];
+
+    // Strategy 1: Match columns by prefix pattern (e.g., scatter_x, scatter_y)
+    columns.forEach((col, idx) => {
+        if (col.name.startsWith(callId + '_') || col.name === callId) {
+            matchedIndices.push(idx);
+            // Highlight header
+            const th = document.querySelector(`.datatable-table th:nth-child(${idx + 2})`);
+            if (th) th.classList.add('canvas-linked');
+        }
+    });
+
+    // Highlight data cells in matched columns
+    matchedIndices.forEach(idx => {
+        document.querySelectorAll(`.datatable-table tr td:nth-child(${idx + 2})`).forEach(td => {
+            td.classList.add('canvas-linked');
+        });
+    });
+
+    let hasMatch = matchedIndices.length > 0;
+
+    // Strategy 2: If in a matching tab, highlight ALL columns in that tab
+    // (handles shared x-data case for line plots where x column isn't prefixed)
+    if (typeof datatableTabs !== 'undefined' && typeof activeTabId !== 'undefined') {
+        const activeTab = datatableTabs[activeTabId];
+        if (activeTab && (activeTab.callId === callId || activeTab.name === callId)) {
+            columns.forEach((col, idx) => {
+                // Highlight header
+                const th = document.querySelector(`.datatable-table th:nth-child(${idx + 2})`);
+                if (th) {
+                    th.classList.add('canvas-linked');
+                    hasMatch = true;
+                }
+                // Highlight data cells
+                document.querySelectorAll(`.datatable-table tr td:nth-child(${idx + 2})`).forEach(td => {
+                    td.classList.add('canvas-linked');
+                });
+            });
+        }
+    }
+
+    // Expand datatable panel if collapsed and has linked columns
+    const panel = document.getElementById('datatable-panel');
+    if (hasMatch && panel && !panel.classList.contains('expanded')) {
+        panel.classList.add('expanded');
+    }
+}
+
+function clearDatatableHighlight() {
+    datatableLinkedCallId = null;
+    document.querySelectorAll('.datatable-table .canvas-linked').forEach(el => {
+        el.classList.remove('canvas-linked');
+    });
+}
+
+// Full sync: highlight columns + auto-select plot type + set target panel
+function syncDatatableToElement(element) {
+    if (!element) {
+        clearDatatableHighlight();
+        return;
+    }
+
+    // Skip highlighting for panel/axes selections - they don't have data columns
+    const elemType = element.type || '';
+    if (elemType === 'axes' || elemType === 'panel' || (element.label && element.label.startsWith('Panel '))) {
+        console.log('[Highlight] Skipping panel/axes element');
+        return;
+    }
+
+    const callId = element.call_id || element.label;
+
+    // 1. Highlight matching columns
+    highlightDatatableForElement(callId);
+
+    // 2. Auto-select plot type if element has a function type
+    if (element.function) {
+        const plotSelect = document.getElementById('datatable-plot-type');
+        if (plotSelect) {
+            // Find matching option
+            const options = plotSelect.querySelectorAll('option');
+            for (const opt of options) {
+                if (opt.value === element.function) {
+                    plotSelect.value = element.function;
+                    datatablePlotType = element.function;
+                    if (typeof updateVarAssignSlots === 'function') updateVarAssignSlots();
+                    break;
+                }
+            }
+        }
+    }
+
+    // 3. Set target panel to the element's axis
+    if (element.ax_index !== undefined) {
+        const targetSelect = document.getElementById('datatable-target-panel');
+        if (targetSelect) {
+            targetSelect.value = element.ax_index;
+            datatableTargetAxis = element.ax_index;
+        }
+    }
+
+    // 4. Switch to matching datatable tab
+    if (typeof datatableTabs !== 'undefined') {
+        // Try multiple matching strategies
+        const elemKey = element.key || '';
+        const elemType = element.type || '';
+
+        for (const [tabId, tabState] of Object.entries(datatableTabs)) {
+            const tabName = (tabState.callId || tabState.name || '').toLowerCase();
+            // Match: exact callId, name match, or element key contains tab name
+            const matches = (callId && (tabState.callId === callId || tabState.name === callId)) ||
+                           (elemKey && elemKey.toLowerCase().includes(tabName)) ||
+                           (elemType && tabName.includes(elemType.toLowerCase()));
+            if (matches) {
+                if (activeTabId !== tabId && typeof selectTab === 'function') {
+                    // Use internal flag to prevent sync loop
+                    window._syncingFromCanvasToData = true;
+                    selectTab(tabId);
+                    window._syncingFromCanvasToData = false;
+                    console.log('[Datatable] Canvas->Data: Switched to tab', tabName);
+                }
+                break;
+            }
+        }
+    }
+}
+"""
+
+__all__ = ["JS_DATATABLE_TABLE"]
+
+# EOF

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

@@ -0,0 +1,354 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Datatable tab management JavaScript."""
+
+JS_DATATABLE_TABS = """
+// ============================================================================
+// Multi-Tab Datatable State
+// ============================================================================
+let datatableTabs = {};  // Maps tabId -> {data, selectedColumns, varAssignments, plotType, targetAxis}
+let activeTabId = null;
+let tabCounter = 0;
+
+// ============================================================================
+// Tab Management
+// ============================================================================
+function initDatatableTabs() {
+    console.log('[Datatable] initDatatableTabs called');
+    const newTabBtn = document.getElementById('btn-new-tab');
+    if (newTabBtn) {
+        newTabBtn.addEventListener('click', createNewTab);
+    }
+
+    // Load tabs from figure data
+    loadTabsFromFigure();
+}
+
+function loadTabsFromFigure() {
+    // Fetch existing plot data and calls to get axis info
+    Promise.all([
+        fetch('/datatable/data').then(r => r.json()),
+        fetch('/calls').then(r => r.json())
+    ]).then(([data, calls]) => {
+        console.log('[Datatable] Loaded data:', data.columns?.length || 0, 'columns');
+        if (data.columns && data.columns.length > 0) {
+            // Build a map of call_id -> axis index from calls
+            // calls is an object: {call_id: {function, ax_key, ...}, ...}
+            const callToAxis = {};
+            const callToFunction = {};
+            Object.entries(calls).forEach(([callId, call]) => {
+                // Extract axis index from ax_key (e.g., "ax_0_1" -> row=0, col=1 -> panel index)
+                let axIndex = 0;
+                if (call.ax_key) {
+                    const match = call.ax_key.match(/ax_(\\d+)_(\\d+)/);
+                    if (match) {
+                        const row = parseInt(match[1]);
+                        const col = parseInt(match[2]);
+                        // For now, use simple linear indexing (works for 1xN grids)
+                        // TODO: get actual ncols from axes_positions for proper MxN support
+                        axIndex = col > 0 ? col : row;
+                    }
+                }
+                callToAxis[callId] = axIndex;
+                callToFunction[callId] = call.function || 'plot';
+            });
+
+            // Group columns by call_id (e.g., plot_000_x, plot_000_y -> plot_000)
+            // First pass: identify which columns belong to each group
+            const groups = {};
+            const colIndexMap = {};  // Maps callId -> [column indices]
+            data.columns.forEach((col, idx) => {
+                // Extract call_id from column name (e.g., "plot_000_x" -> "plot_000")
+                const match = col.name.match(/^(.+?)_[xy]$/);
+                const callId = match ? match[1] : col.name;
+                if (!groups[callId]) {
+                    groups[callId] = {
+                        columns: [],
+                        axIndex: callToAxis[callId] !== undefined ? callToAxis[callId] : 0,
+                        plotType: callToFunction[callId] || 'plot'
+                    };
+                    colIndexMap[callId] = [];
+                }
+                // Store column with new index for this group
+                groups[callId].columns.push({
+                    ...col,
+                    index: groups[callId].columns.length
+                });
+                colIndexMap[callId].push(idx);
+            });
+
+            // Second pass: extract rows for each group (only relevant columns)
+            Object.keys(groups).forEach(callId => {
+                const indices = colIndexMap[callId];
+                groups[callId].rows = data.rows.map(row =>
+                    indices.map(idx => row[idx])
+                );
+            });
+
+            // Create a tab for each group with element colors
+            console.log('[Datatable] Creating tabs for', Object.keys(groups).length, 'groups:', Object.keys(groups));
+            Object.entries(groups).forEach(([callId, groupData]) => {
+                // Get element color from colorMap (populated by hitmap)
+                const elemColor = typeof getGroupRepresentativeColor === 'function'
+                    ? getGroupRepresentativeColor(callId, null)
+                    : null;
+                console.log('[Datatable] Creating tab:', callId, 'with', groupData.columns?.length, 'columns,', groupData.rows?.length, 'rows');
+                createTab(callId, groupData, false, groupData.axIndex, groupData.plotType, elemColor);
+            });
+
+            // Select first tab
+            const firstTabId = Object.keys(datatableTabs)[0];
+            if (firstTabId) {
+                selectTab(firstTabId);
+            }
+
+            // Retry color update after hitmap loads (may not be ready yet)
+            setTimeout(() => { if (typeof updateTabColors === 'function') updateTabColors(); }, 500);
+        }
+    }).catch(err => {
+        console.error('Failed to load tabs from figure:', err);
+    });
+}
+
+function createTab(name, data = null, select = true, axIndex = null, plotType = 'plot', elementColor = null) {
+    const tabId = `tab_${tabCounter++}`;
+    const tabList = document.getElementById('datatable-tab-list');
+
+    // Create tab element with axis badge
+    const tab = document.createElement('button');
+    tab.className = 'datatable-tab';
+    tab.dataset.tabId = tabId;
+    // Use letters A, B, C... to match subplot labels in figure
+    const axLabel = axIndex !== null ? String.fromCharCode(65 + axIndex) : null;  // 65 is 'A'
+    const axBadge = axLabel ? `<span class="tab-axis" title="Panel ${axLabel}">${axLabel}</span>` : '';
+    tab.innerHTML = `
+        ${axBadge}
+        <span class="tab-name" title="${name}">${name}</span>
+        <span class="tab-close" onclick="event.stopPropagation(); closeTab('${tabId}')">&times;</span>
+    `;
+    tab.onclick = () => selectTab(tabId);
+
+    // Apply element color if available
+    if (elementColor) {
+        tab.style.setProperty('--element-color', elementColor);
+    }
+
+    tabList.appendChild(tab);
+
+    // Initialize tab state with axis association
+    datatableTabs[tabId] = {
+        name: name,
+        data: data,
+        selectedColumns: new Set(),
+        varAssignments: {},
+        varColors: {},
+        plotType: plotType,
+        targetAxis: axIndex,  // Associated axis
+        callId: name,  // Original call_id for linking
+        elementColor: elementColor  // Element's original color
+    };
+
+    if (select) {
+        selectTab(tabId);
+    }
+
+    return tabId;
+}
+
+function createNewTab() {
+    const name = `Data ${tabCounter + 1}`;
+    // Auto-create large empty editable table (matches createNewCSV defaults)
+    const numRows = 100;
+    const numCols = 5;
+
+    const columns = [];
+    for (let i = 0; i < numCols; i++) {
+        // Default to 'string' type so users can type anything
+        columns.push({ name: `col${i + 1}`, type: 'string', index: i });
+    }
+
+    const rows = [];
+    for (let i = 0; i < numRows; i++) {
+        rows.push(new Array(numCols).fill(''));
+    }
+
+    const defaultData = { columns, rows };
+    createTab(name, defaultData, true);
+}
+
+function selectTab(tabId) {
+    if (!datatableTabs[tabId]) return;
+
+    // Save current tab state
+    saveCurrentTabState();
+
+    // Update active tab
+    activeTabId = tabId;
+
+    // Update tab UI
+    document.querySelectorAll('.datatable-tab').forEach(tab => {
+        tab.classList.toggle('active', tab.dataset.tabId === tabId);
+    });
+
+    // Restore tab state
+    restoreTabState(tabId);
+}
+
+function closeTab(tabId) {
+    const tab = document.querySelector(`.datatable-tab[data-tab-id="${tabId}"]`);
+    if (tab) {
+        tab.remove();
+    }
+
+    delete datatableTabs[tabId];
+
+    // If closing active tab, select another
+    if (activeTabId === tabId) {
+        const remainingTabs = Object.keys(datatableTabs);
+        if (remainingTabs.length > 0) {
+            selectTab(remainingTabs[0]);
+        } else {
+            activeTabId = null;
+            clearDatatableDisplay();
+        }
+    }
+}
+
+function saveCurrentTabState() {
+    if (!activeTabId || !datatableTabs[activeTabId]) return;
+
+    datatableTabs[activeTabId].data = datatableData;
+    datatableTabs[activeTabId].selectedColumns = new Set(datatableSelectedColumns);
+    datatableTabs[activeTabId].varAssignments = {...datatableVarAssignments};
+    datatableTabs[activeTabId].varColors = {...datatableVarColors};
+    datatableTabs[activeTabId].plotType = datatablePlotType;
+    datatableTabs[activeTabId].targetAxis = datatableTargetAxis;
+}
+
+function restoreTabState(tabId) {
+    const state = datatableTabs[tabId];
+    if (!state) return;
+
+    // Restore global state
+    datatableData = state.data;
+    datatableSelectedColumns = new Set(state.selectedColumns);
+    datatableVarAssignments = {...state.varAssignments};
+    datatableVarColors = state.varColors ? {...state.varColors} : {};
+    datatablePlotType = state.plotType || 'plot';
+    datatableTargetAxis = state.targetAxis;
+
+    // Update UI
+    if (datatableData) {
+        // Use renderEditableTable for direct editing capability
+        if (typeof renderEditableTable === 'function') {
+            renderEditableTable();
+        } else {
+            renderDatatable();
+        }
+
+        // Show toolbar, hide entire import section
+        const importSection = document.getElementById('datatable-import-section');
+        if (importSection) importSection.style.display = 'none';
+        const toolbar = document.querySelector('.datatable-toolbar');
+        if (toolbar) toolbar.style.display = 'flex';
+
+        // Restore plot type selection
+        const plotTypeSelect = document.getElementById('datatable-plot-type');
+        if (plotTypeSelect) plotTypeSelect.value = datatablePlotType;
+
+        // Restore target panel selection
+        const targetPanelSelect = document.getElementById('datatable-target-panel');
+        if (targetPanelSelect && datatableTargetAxis !== null) {
+            targetPanelSelect.value = datatableTargetAxis;
+        }
+
+        // Update variable assignment UI
+        updateVarAssignSlots();
+    } else {
+        clearDatatableDisplay();
+    }
+}
+
+function clearDatatableDisplay() {
+    const content = document.getElementById('datatable-content');
+    if (content) content.innerHTML = '';
+
+    // Show import section with dropzone
+    const importSection = document.getElementById('datatable-import-section');
+    if (importSection) importSection.style.display = 'block';
+
+    const toolbar = document.querySelector('.datatable-toolbar');
+    if (toolbar) toolbar.style.display = 'none';
+
+    const varAssign = document.getElementById('datatable-var-assign');
+    if (varAssign) varAssign.style.display = 'none';
+
+    updateSelectionInfo();
+}
+
+// Override loadExistingData to use tabs
+function loadExistingData() {
+    // This is now handled by loadTabsFromFigure
+    // But we still call initDatatableTabs
+    initDatatableTabs();
+}
+
+// Override handleParsedData to work with tabs
+const originalHandleParsedData = typeof handleParsedData === 'function' ? handleParsedData : null;
+
+function handleParsedDataWithTabs(parsedData) {
+    if (!activeTabId) {
+        // Create a new tab for imported data
+        createNewTab();
+    }
+
+    // Store in current tab
+    datatableTabs[activeTabId].data = parsedData;
+    datatableData = parsedData;
+
+    renderDatatable();
+
+    // Show toolbar, hide entire import section
+    const importSection = document.getElementById('datatable-import-section');
+    if (importSection) importSection.style.display = 'none';
+    const toolbar = document.querySelector('.datatable-toolbar');
+    if (toolbar) toolbar.style.display = 'flex';
+
+    updateVarAssignSlots();
+}
+
+// Hook into handleParsedData
+if (typeof window !== 'undefined') {
+    window.handleParsedData = handleParsedDataWithTabs;
+}
+
+// Update tab colors after colorMap is loaded
+function updateTabColors() {
+    if (typeof colorMap === 'undefined' || !colorMap) return;
+    if (typeof getGroupRepresentativeColor !== 'function') return;
+
+    Object.entries(datatableTabs).forEach(([tabId, tabState]) => {
+        if (tabState.callId) {
+            // Always get the latest color from colorMap (override any stale color)
+            const elemColor = getGroupRepresentativeColor(tabState.callId, null);
+            if (elemColor) {
+                tabState.elementColor = elemColor;
+                const tabEl = document.querySelector(`.datatable-tab[data-tab-id="${tabId}"]`);
+                if (tabEl) {
+                    tabEl.style.setProperty('--element-color', elemColor);
+                }
+            }
+        }
+    });
+}
+
+// Export for hitmap to call after colorMap is loaded
+if (typeof window !== 'undefined') {
+    window.updateTabColors = updateTabColors;
+}
+
+"""
+
+__all__ = ["JS_DATATABLE_TABS"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_element_editor.py

@@ -94,7 +94,18 @@ function showDynamicCallProperties(element) {
 
     container.innerHTML = '';
 
-    const callId = element.call_id || element.label;
+    // Get call_id - try element directly, then colorMap, then label
+    let callId = element.call_id;
+    if (!callId && element.key && typeof colorMap !== 'undefined') {
+        // Look up call_id from colorMap (hitmap has this info)
+        const colorInfo = colorMap[element.key];
+        if (colorInfo && colorInfo.call_id) {
+            callId = colorInfo.call_id;
+        }
+    }
+    if (!callId) {
+        callId = element.label;
+    }
 
     // If no call data found, show basic element info instead
     if (!callId || !callsData[callId]) {
@@ -286,7 +297,11 @@ async function handleDynamicParamChange(callId, param, input) {
             loadHitmap();
             updateHitRegions();
 
-            if (callsData[callId]) {
+            // Sync callsData from server response (source of truth)
+            if (callsData[callId] && data.updated_call) {
+                callsData[callId].kwargs = data.updated_call.kwargs;
+            } else if (callsData[callId]) {
+                // Fallback: manual update
                 if (value === null) {
                     delete callsData[callId].kwargs[param];
                 } else {