feat(electron): plotting

added simple plotting tools

electron/index.html

@@ -42,7 +42,7 @@
             <div class="primary-sidebar-footer">
                 <div class="version-info">v1.0.0</div>
                 <button id="info-btn" class="info-button" title="About 4DSTAR">
-                    <span class="info-icon">ℹ️</span>
+                    <span class="info-icon">ⓘ</span>
                     <span class="info-label">Info</span>
                 </button>
             </div>
@@ -295,6 +295,7 @@
                 <div class="tab-nav">
                     <button class="tab-link active" data-tab="opat-overview-tab">File Information</button>
                     <button class="tab-link" data-tab="opat-explorer-tab">Data Explorer</button>
+                    <button class="tab-link" data-tab="opat-plotting-tab">Plotting</button>
                 </div>
 
                 <div id="opat-tab-content">
@@ -325,6 +326,72 @@
                             </div>
                         </div>
                     </div>
+
+                    <div id="opat-plotting-tab" class="tab-pane hidden">
+                        <div class="opat-info-section">
+                            <h4 class="opat-section-title">Plot Configuration</h4>
+                            <div class="plot-controls">
+                                <div class="plot-control-row">
+                                    <div class="plot-control-group">
+                                        <label for="plot-index-selector" class="opat-label">Index Vector:</label>
+                                        <select id="plot-index-selector" class="opat-select">
+                                            <option value="">-- Select an Index Vector --</option>
+                                        </select>
+                                    </div>
+                                    <div class="plot-control-group">
+                                        <label for="plot-table-selector" class="opat-label">Data Table:</label>
+                                        <select id="plot-table-selector" class="opat-select">
+                                            <option value="">-- Select a Table --</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="plot-control-row">
+                                    <div class="plot-control-group">
+                                        <label for="plot-x-axis" class="opat-label">X-Axis:</label>
+                                        <select id="plot-x-axis" class="opat-select">
+                                            <option value="">-- Select X Variable --</option>
+                                        </select>
+                                    </div>
+                                    <div class="plot-control-group">
+                                        <label for="plot-y-axis" class="opat-label">Y-Axis:</label>
+                                        <select id="plot-y-axis" class="opat-select">
+                                            <option value="">-- Select Y Variable --</option>
+                                        </select>
+                                    </div>
+                                </div>
+                                <div class="plot-control-row">
+                                    <div class="plot-control-group">
+                                        <label for="plot-type" class="opat-label">Plot Type:</label>
+                                        <select id="plot-type" class="opat-select">
+                                            <option value="scatter">Scatter Plot</option>
+                                            <option value="line">Line Plot</option>
+                                            <option value="heatmap">Heatmap</option>
+                                            <option value="contour">Contour Plot</option>
+                                        </select>
+                                    </div>
+                                    <div class="plot-control-group">
+                                        <label for="plot-title" class="opat-label">Plot Title:</label>
+                                        <input type="text" id="plot-title" class="opat-input" placeholder="Enter plot title">
+                                    </div>
+                                </div>
+                                <div class="plot-actions">
+                                    <button id="create-plot-btn" class="action-button primary">Create Plot</button>
+                                    <button id="save-plot-btn" class="action-button secondary" disabled>Save as PNG</button>
+                                    <button id="clear-plot-btn" class="action-button secondary" disabled>Clear Plot</button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="opat-info-section">
+                            <h4 class="opat-section-title">Plot Display</h4>
+                            <div id="plot-container" class="plot-container">
+                                <div id="plot-placeholder" class="plot-placeholder">
+                                    <p>Configure your plot settings above and click "Create Plot" to generate a visualization.</p>
+                                </div>
+                                <div id="plot-display" class="plot-display hidden"></div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -546,6 +613,7 @@
     <div id="spinner" class="spinner hidden"></div>
 
     <script src="opatParser.js"></script>
+    <script src="node_modules/plotly.js-dist/plotly.js"></script>
     <script src="renderer-refactored.js"></script>
 </body>
 

electron/package-lock.json

@@ -13,6 +13,7 @@
         "adm-zip": "^0.5.14",
         "fs-extra": "^11.0.0",
         "js-yaml": "^4.1.0",
+        "plotly.js-dist": "^2.26.0",
         "python-shell": "^5.0.0"
       },
       "devDependencies": {
@@ -3057,6 +3058,12 @@
         "node": ">=10.4.0"
       }
     },
+    "node_modules/plotly.js-dist": {
+      "version": "2.35.3",
+      "resolved": "https://registry.npmjs.org/plotly.js-dist/-/plotly.js-dist-2.35.3.tgz",
+      "integrity": "sha512-dqB9+FUyBFZN04xWnZoYwaeeF4Jj9T/m0CHYmoozmPC3R4Dy0TRJsHgbRVLPxgYQqodzniVUj17+2wmJuGaZAg==",
+      "license": "MIT"
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",

electron/package.json

@@ -31,7 +31,8 @@
     "js-yaml": "^4.1.0",
     "adm-zip": "^0.5.14",
     "@electron/remote": "^2.0.0",
-    "python-shell": "^5.0.0"
+    "python-shell": "^5.0.0",
+    "plotly.js-dist": "^2.26.0"
   },
   "build": {
     "appId": "com.fourdst.bundlemanager",

electron/renderer-refactored.js

@@ -12,6 +12,7 @@ const uiComponents = require('./renderer/ui-components');
 const eventHandlers = require('./renderer/event-handlers');
 const opatHandler = require('./renderer/opat-handler');
 const fillWorkflow = require('./renderer/fill-workflow');
+const opatPlotting = require('./renderer/opat-plotting');
 
 // Initialize all modules with their dependencies
 function initializeModules() {
@@ -23,7 +24,8 @@ function initializeModules() {
     uiComponents,
     eventHandlers,
     opatHandler,
-    fillWorkflow
+    fillWorkflow,
+    opatPlotting
   };
   
   // Initialize each module with its dependencies
@@ -32,6 +34,7 @@ function initializeModules() {
   eventHandlers.initializeDependencies(deps);
   opatHandler.initializeDependencies(deps);
   fillWorkflow.initializeDependencies(deps);
+  opatPlotting.initializePlottingDependencies(deps);
   
   console.log('[RENDERER] All modules initialized with dependencies');
 }
@@ -84,5 +87,6 @@ window.uiComponents = uiComponents;
 window.eventHandlers = eventHandlers;
 window.opatHandler = opatHandler;
 window.fillWorkflow = fillWorkflow;
+window.opatPlotting = opatPlotting;
 
 // === REGENERATED CODE END ===

electron/renderer/opat-handler.js

@@ -2,7 +2,7 @@
 // Extracted from renderer.js to centralize OPAT file parsing and display logic
 
 // Import dependencies (these will be injected when integrated)
-let stateManager, domManager;
+let stateManager, domManager, opatPlotting;
 
 // OPAT File Inspector variables
 let opatFileInput, opatBrowseBtn, opatView, opatCloseBtn;
@@ -29,6 +29,11 @@ function initializeOPATElements() {
     // Initialize OPAT tab navigation
     initializeOPATTabs();
     
+    // Initialize plotting elements if module is available
+    if (opatPlotting) {
+        opatPlotting.initializePlottingElements();
+    }
+    
     // Add window resize listener to update table heights
     window.updateTableHeights = function() {
         const newHeight = Math.max(300, window.innerHeight - 450);
@@ -82,6 +87,11 @@ function resetOPATViewerState() {
     if (opatIndexSelector) opatIndexSelector.innerHTML = '<option value="">-- Select an index vector --</option>';
     if (opatTablesDisplay) opatTablesDisplay.innerHTML = '';
     if (opatTableDataContent) opatTableDataContent.innerHTML = '';
+    
+    // Reset plotting state if module is available
+    if (opatPlotting) {
+        opatPlotting.resetPlottingState();
+    }
 }
 
 // Handle OPAT file selection
@@ -100,21 +110,24 @@ async function handleOPATFileSelection(event) {
         stateManager.setOPATFile(currentOPATFile);
         
         displayOPATFileInfo();
+        displayAllTableTags();
         populateIndexSelector();
         
-        // Show OPAT view and hide other views
+        // Populate plotting selectors if module is available
+        if (opatPlotting) {
+            opatPlotting.populatePlotIndexSelector();
+        }
+        
+        // Show OPAT view
         hideAllViews();
         opatView.classList.remove('hidden');
         
-        // Update title with filename
-        document.getElementById('opat-title').textContent = `OPAT File Inspector - ${file.name}`;
-        
         domManager.hideSpinner();
-        
+        console.log('OPAT file loaded successfully');
     } catch (error) {
-        console.error('Error parsing OPAT file:', error);
+        console.error('Error loading OPAT file:', error);
         domManager.hideSpinner();
-        domManager.showModal('Error', `Failed to parse OPAT file: ${error.message}`);
+        alert('Error loading OPAT file: ' + error.message);
     }
 }
 
@@ -376,6 +389,7 @@ function showCategoryHomeScreen(category) {
 function initializeDependencies(deps) {
     stateManager = deps.stateManager;
     domManager = deps.domManager;
+    opatPlotting = deps.opatPlotting;
 }
 
 module.exports = {

electron/renderer/opat-plotting.js

@@ -0,0 +1,833 @@
+// OPAT plotting module for the 4DSTAR Bundle Manager
+// Handles interactive plotting functionality using Plotly.js
+
+// Import dependencies (these will be injected when integrated)
+let stateManager, domManager;
+
+// Plotting UI elements
+let plotIndexSelector, plotTableSelector, plotXAxis, plotYAxis, plotType, plotTitle;
+let createPlotBtn, savePlotBtn, clearPlotBtn;
+let plotContainer, plotPlaceholder, plotDisplay;
+
+// Current plot state
+let currentPlotData = null;
+let currentPlotLayout = null;
+
+// Initialize plotting UI elements
+function initializePlottingElements() {
+    plotIndexSelector = document.getElementById('plot-index-selector');
+    plotTableSelector = document.getElementById('plot-table-selector');
+    plotXAxis = document.getElementById('plot-x-axis');
+    plotYAxis = document.getElementById('plot-y-axis');
+    plotType = document.getElementById('plot-type');
+    plotTitle = document.getElementById('plot-title');
+    
+    createPlotBtn = document.getElementById('create-plot-btn');
+    savePlotBtn = document.getElementById('save-plot-btn');
+    clearPlotBtn = document.getElementById('clear-plot-btn');
+    
+    plotContainer = document.getElementById('plot-container');
+    plotPlaceholder = document.getElementById('plot-placeholder');
+    plotDisplay = document.getElementById('plot-display');
+
+    // Check if elements were found
+    const elements = {
+        plotIndexSelector, plotTableSelector, plotXAxis, plotYAxis, plotType, plotTitle,
+        createPlotBtn, savePlotBtn, clearPlotBtn, plotContainer, plotPlaceholder, plotDisplay
+    };
+    
+    const missingElements = Object.entries(elements)
+        .filter(([name, element]) => !element)
+        .map(([name]) => name);
+    
+    if (missingElements.length > 0) {
+        console.warn('[OPAT_PLOTTING] Missing elements:', missingElements);
+        console.warn('[OPAT_PLOTTING] Will retry initialization when needed');
+        return; // Don't add event listeners if elements are missing
+    }
+
+    // Event listeners (only add if all elements are present)
+    plotIndexSelector.addEventListener('change', handlePlotIndexChange);
+    plotTableSelector.addEventListener('change', handlePlotTableChange);
+    createPlotBtn.addEventListener('click', handleCreatePlot);
+    savePlotBtn.addEventListener('click', handleSavePlot);
+    clearPlotBtn.addEventListener('click', handleClearPlot);
+    
+    // Set up a backup event listener setup function for later use
+    setupEventListenersIfNeeded();
+
+    console.log('[OPAT_PLOTTING] All plotting elements found and initialized successfully');
+}
+
+// Setup event listeners if they weren't set up during initial initialization
+function setupEventListenersIfNeeded() {
+    // This function can be called later to ensure event listeners are properly set up
+    // even if elements weren't available during initial setup
+    
+    const selectElements = {
+        'plot-index-selector': handlePlotIndexChange,
+        'plot-table-selector': handlePlotTableChange
+    };
+    
+    const buttonElements = {
+        'create-plot-btn': handleCreatePlot,
+        'save-plot-btn': handleSavePlot,
+        'clear-plot-btn': handleClearPlot
+    };
+    
+    // Add change listeners to select elements
+    for (const [elementId, handler] of Object.entries(selectElements)) {
+        const element = document.getElementById(elementId);
+        if (element && !element.hasAttribute('data-plotting-change-listener')) {
+            element.addEventListener('change', handler);
+            element.setAttribute('data-plotting-change-listener', 'true');
+            console.log(`[OPAT_PLOTTING] Added change listener to ${elementId}`);
+        }
+    }
+    
+    // Add click listeners to button elements
+    for (const [elementId, handler] of Object.entries(buttonElements)) {
+        const element = document.getElementById(elementId);
+        if (element && !element.hasAttribute('data-plotting-click-listener')) {
+            element.addEventListener('click', handler);
+            element.setAttribute('data-plotting-click-listener', 'true');
+            console.log(`[OPAT_PLOTTING] Added click listener to ${elementId}`);
+        }
+    }
+}
+
+// Populate plot index selector when OPAT file is loaded
+function populatePlotIndexSelector() {
+    console.log('[OPAT_PLOTTING] populatePlotIndexSelector called');
+    
+    // Always try to find the element fresh, in case it wasn't available during initial setup
+    const selector = document.getElementById('plot-index-selector');
+    if (!selector) {
+        console.error('[OPAT_PLOTTING] Could not find plot-index-selector element in DOM');
+        return;
+    }
+    
+    // Update our reference
+    plotIndexSelector = selector;
+
+    const opatFile = stateManager.getOPATFile();
+    if (!opatFile) {
+        console.warn('[OPAT_PLOTTING] No OPAT file available');
+        plotIndexSelector.innerHTML = '<option value="">-- No OPAT file loaded --</option>';
+        return;
+    }
+
+    console.log('[OPAT_PLOTTING] OPAT file found with', opatFile.cards.size, 'cards');
+    plotIndexSelector.innerHTML = '<option value="">-- Select an Index Vector --</option>';
+    
+    let optionCount = 0;
+    for (const [indexName, card] of opatFile.cards) {
+        const option = document.createElement('option');
+        option.value = indexName;
+        option.textContent = `${indexName} (${card.tableData.size} tables)`;
+        plotIndexSelector.appendChild(option);
+        optionCount++;
+        console.log('[OPAT_PLOTTING] Added option:', indexName);
+    }
+
+    console.log(`[OPAT_PLOTTING] Successfully populated ${optionCount} index vectors`);
+    
+    // Also initialize other selectors if they weren't found during initial setup
+    if (!plotTableSelector) {
+        plotTableSelector = document.getElementById('plot-table-selector');
+    }
+    if (!plotXAxis) {
+        plotXAxis = document.getElementById('plot-x-axis');
+    }
+    if (!plotYAxis) {
+        plotYAxis = document.getElementById('plot-y-axis');
+    }
+    
+    // Ensure event listeners are set up
+    ensureEventListenersAreSetup();
+}
+
+// Ensure event listeners are properly set up (called when needed)
+function ensureEventListenersAreSetup() {
+    console.log('[OPAT_PLOTTING] Ensuring event listeners are set up');
+    
+    // Check and set up index selector listener
+    const indexSelector = document.getElementById('plot-index-selector');
+    if (indexSelector && !indexSelector.hasAttribute('data-plotting-change-listener')) {
+        indexSelector.addEventListener('change', handlePlotIndexChange);
+        indexSelector.setAttribute('data-plotting-change-listener', 'true');
+        console.log('[OPAT_PLOTTING] Added change listener to plot-index-selector');
+    }
+    
+    // Check and set up table selector listener
+    const tableSelector = document.getElementById('plot-table-selector');
+    if (tableSelector && !tableSelector.hasAttribute('data-plotting-change-listener')) {
+        tableSelector.addEventListener('change', handlePlotTableChange);
+        tableSelector.setAttribute('data-plotting-change-listener', 'true');
+        console.log('[OPAT_PLOTTING] Added change listener to plot-table-selector');
+    }
+    
+    // Check and set up create plot button listener
+    const createPlotBtn = document.getElementById('create-plot-btn');
+    if (createPlotBtn && !createPlotBtn.hasAttribute('data-plotting-click-listener')) {
+        createPlotBtn.addEventListener('click', handleCreatePlot);
+        createPlotBtn.setAttribute('data-plotting-click-listener', 'true');
+        console.log('[OPAT_PLOTTING] Added click listener to create-plot-btn');
+    }
+    
+    // Check and set up save plot button listener
+    const savePlotBtn = document.getElementById('save-plot-btn');
+    if (savePlotBtn && !savePlotBtn.hasAttribute('data-plotting-click-listener')) {
+        savePlotBtn.addEventListener('click', handleSavePlot);
+        savePlotBtn.setAttribute('data-plotting-click-listener', 'true');
+        console.log('[OPAT_PLOTTING] Added click listener to save-plot-btn');
+    }
+    
+    // Update our references
+    if (indexSelector) plotIndexSelector = indexSelector;
+    if (tableSelector) plotTableSelector = tableSelector;
+    if (createPlotBtn) createPlotButton = createPlotBtn;
+    if (savePlotBtn) savePlotButton = savePlotBtn;
+}
+
+// Handle index vector selection change
+function handlePlotIndexChange() {
+    console.log('[OPAT_PLOTTING] handlePlotIndexChange called');
+    
+    // Ensure we have references to the elements
+    if (!plotIndexSelector) plotIndexSelector = document.getElementById('plot-index-selector');
+    if (!plotTableSelector) plotTableSelector = document.getElementById('plot-table-selector');
+    if (!plotXAxis) plotXAxis = document.getElementById('plot-x-axis');
+    if (!plotYAxis) plotYAxis = document.getElementById('plot-y-axis');
+    
+    if (!plotIndexSelector || !plotTableSelector || !plotXAxis || !plotYAxis) {
+        console.error('[OPAT_PLOTTING] Missing required elements for index change');
+        return;
+    }
+
+    const selectedIndex = plotIndexSelector.value;
+    console.log('[OPAT_PLOTTING] Selected index:', selectedIndex);
+    
+    plotTableSelector.innerHTML = '<option value="">-- Select a Table --</option>';
+    plotXAxis.innerHTML = '<option value="">-- Select X Variable --</option>';
+    plotYAxis.innerHTML = '<option value="">-- Select Y Variable --</option>';
+
+    if (!selectedIndex) {
+        console.log('[OPAT_PLOTTING] No index selected, returning');
+        return;
+    }
+
+    const opatFile = stateManager.getOPATFile();
+    if (!opatFile) return;
+
+    const card = opatFile.cards.get(selectedIndex);
+    if (!card) return;
+
+    // Populate table selector
+    for (const [tableName, tableData] of card.tableData) {
+        const option = document.createElement('option');
+        option.value = tableName;
+        option.textContent = `${tableName} (${tableData.N_R}×${tableData.N_C})`;
+        plotTableSelector.appendChild(option);
+    }
+
+    console.log(`[OPAT_PLOTTING] Populated ${card.tableData.size} tables for index ${selectedIndex}`);
+}
+
+// Handle table selection change
+function handlePlotTableChange() {
+    console.log('[OPAT_PLOTTING] handlePlotTableChange called');
+    
+    // Ensure we have references to the elements
+    if (!plotIndexSelector) plotIndexSelector = document.getElementById('plot-index-selector');
+    if (!plotTableSelector) plotTableSelector = document.getElementById('plot-table-selector');
+    if (!plotXAxis) plotXAxis = document.getElementById('plot-x-axis');
+    if (!plotYAxis) plotYAxis = document.getElementById('plot-y-axis');
+    
+    if (!plotIndexSelector || !plotTableSelector || !plotXAxis || !plotYAxis) {
+        console.error('[OPAT_PLOTTING] Missing required elements for table change');
+        return;
+    }
+
+    const selectedIndex = plotIndexSelector.value;
+    const selectedTable = plotTableSelector.value;
+    
+    console.log('[OPAT_PLOTTING] Selected index:', selectedIndex, 'Selected table:', selectedTable);
+    
+    plotXAxis.innerHTML = '<option value="">-- Select X Variable --</option>';
+    plotYAxis.innerHTML = '<option value="">-- Select Y Variable --</option>';
+
+    if (!selectedIndex || !selectedTable) {
+        console.log('[OPAT_PLOTTING] No index or table selected, returning');
+        return;
+    }
+
+    const opatFile = stateManager.getOPATFile();
+    if (!opatFile) {
+        console.error('[OPAT_PLOTTING] No OPAT file available');
+        return;
+    }
+
+    const card = opatFile.cards.get(selectedIndex);
+    if (!card) {
+        console.error('[OPAT_PLOTTING] Card not found for index:', selectedIndex);
+        return;
+    }
+
+    const tableData = card.tableData.get(selectedTable);
+    if (!tableData) {
+        console.error('[OPAT_PLOTTING] Table data not found for table:', selectedTable);
+        return;
+    }
+
+    // Get the table index entry for names
+    const tableIndexEntry = card.tableIndex.get(selectedTable);
+    if (!tableIndexEntry) {
+        console.error('[OPAT_PLOTTING] Table index entry not found for table:', selectedTable);
+        return;
+    }
+
+    console.log('[OPAT_PLOTTING] Table info:', {
+        rowName: tableIndexEntry.rowName,
+        columnName: tableIndexEntry.columnName,
+        numRows: tableData.N_R,
+        numColumns: tableData.N_C,
+        rowValuesLength: tableData.rowValues?.length,
+        columnValuesLength: tableData.columnValues?.length
+    });
+
+    // Populate axis selectors with row and column values
+    const variables = [];
+    
+    // Add row values as the primary option (typically the independent variable)
+    if (tableData.rowValues && tableData.rowValues.length > 0) {
+        const rowName = tableIndexEntry.rowName.trim() || 'Row Values';
+        variables.push({ 
+            name: rowName, 
+            value: '__row_values__',
+            isDefault: true,
+            type: 'row'
+        });
+    }
+    
+    // Add column values as the secondary option
+    if (tableData.columnValues && tableData.columnValues.length > 0) {
+        const columnName = tableIndexEntry.columnName.trim() || 'Column Values';
+        variables.push({ 
+            name: columnName, 
+            value: '__column_values__',
+            isDefault: true,
+            type: 'column'
+        });
+    }
+    
+    // Add individual row options with their actual values
+    if (tableData.rowValues && tableData.rowValues.length > 0) {
+        const rowName = tableIndexEntry.rowName.trim() || 'Row';
+        for (let i = 0; i < Math.min(tableData.rowValues.length, 20); i++) { // Limit to 20 for UI performance
+            const value = tableData.rowValues[i];
+            const displayValue = typeof value === 'number' ? value.toPrecision(4) : value;
+            variables.push({
+                name: `Data Row ${i + 1} (${rowName} = ${displayValue})`,
+                value: `row_${i}`,
+                isDefault: false,
+                type: 'row_data',
+                index: i
+            });
+        }
+    }
+    
+    // Add individual column options with their actual values
+    if (tableData.columnValues && tableData.columnValues.length > 0) {
+        const columnName = tableIndexEntry.columnName.trim() || 'Column';
+        for (let i = 0; i < Math.min(tableData.columnValues.length, 20); i++) { // Limit to 20 for UI performance
+            const value = tableData.columnValues[i];
+            const displayValue = typeof value === 'number' ? value.toPrecision(4) : value;
+            variables.push({
+                name: `Data Column ${i + 1} (${columnName} = ${displayValue})`,
+                value: `col_${i}`,
+                isDefault: false,
+                type: 'column_data',
+                index: i
+            });
+        }
+    }
+    
+    // Add data columns as additional options (for accessing the actual table data)
+    for (let i = 0; i < Math.min(tableData.N_C, 10); i++) { // Limit for UI performance
+        variables.push({ 
+            name: `Table Data Column ${i + 1}`, 
+            value: `data_col_${i}`,
+            isDefault: false,
+            type: 'data'
+        });
+    }
+
+    // Populate the select elements
+    variables.forEach((variable, index) => {
+        const xOption = document.createElement('option');
+        xOption.value = variable.value;
+        xOption.textContent = variable.name;
+        plotXAxis.appendChild(xOption);
+
+        const yOption = document.createElement('option');
+        yOption.value = variable.value;
+        yOption.textContent = variable.name;
+        plotYAxis.appendChild(yOption);
+    });
+
+    // Set default selections: row values for X-axis, column values for Y-axis
+    const rowVariable = variables.find(v => v.type === 'row');
+    const columnVariable = variables.find(v => v.type === 'column');
+    
+    if (rowVariable) {
+        plotXAxis.value = rowVariable.value;
+        console.log('[OPAT_PLOTTING] Set default X-axis to:', rowVariable.name);
+    }
+    
+    if (columnVariable) {
+        plotYAxis.value = columnVariable.value;
+        console.log('[OPAT_PLOTTING] Set default Y-axis to:', columnVariable.name);
+    }
+
+    console.log(`[OPAT_PLOTTING] Populated ${variables.length} variables for table ${selectedTable}`);
+}
+
+// Handle create plot button click
+async function handleCreatePlot() {
+    console.log('[OPAT_PLOTTING] handleCreatePlot called');
+    
+    // Ensure we have references to all elements
+    if (!plotIndexSelector) plotIndexSelector = document.getElementById('plot-index-selector');
+    if (!plotTableSelector) plotTableSelector = document.getElementById('plot-table-selector');
+    if (!plotXAxis) plotXAxis = document.getElementById('plot-x-axis');
+    if (!plotYAxis) plotYAxis = document.getElementById('plot-y-axis');
+    if (!plotType) plotType = document.getElementById('plot-type');
+    if (!plotTitle) plotTitle = document.getElementById('plot-title');
+    
+    if (!plotIndexSelector || !plotTableSelector || !plotXAxis || !plotYAxis || !plotType || !plotTitle) {
+        console.error('[OPAT_PLOTTING] Missing required elements for plot creation');
+        return;
+    }
+
+    const selectedIndex = plotIndexSelector.value;
+    const selectedTable = plotTableSelector.value;
+    const xVariable = plotXAxis.value;
+    const yVariable = plotYAxis.value;
+    const plotTypeValue = plotType.value;
+    const titleText = plotTitle.value || 'OPAT Data Plot';
+
+    console.log('[OPAT_PLOTTING] Plot parameters:', {
+        selectedIndex, selectedTable, xVariable, yVariable, plotTypeValue, titleText
+    });
+
+    if (!selectedIndex || !selectedTable || !xVariable || !yVariable) {
+        console.warn('[OPAT_PLOTTING] Missing required fields');
+        alert('Please select all required fields (Index Vector, Table, X-Axis, Y-Axis)');
+        return;
+    }
+
+    try {
+        domManager.showSpinner();
+        
+        // Get button references
+        const createBtn = document.getElementById('create-plot-btn');
+        const saveBtn = document.getElementById('save-plot-btn');
+        const clearBtn = document.getElementById('clear-plot-btn');
+        
+        if (createBtn) createBtn.disabled = true;
+
+        const plotData = await generatePlotData(selectedIndex, selectedTable, xVariable, yVariable, plotTypeValue);
+        const layout = generatePlotLayout(titleText, xVariable, yVariable);
+
+        await createPlotlyPlot(plotData, layout);
+
+        // Enable save and clear buttons
+        if (saveBtn) saveBtn.disabled = false;
+        if (clearBtn) clearBtn.disabled = false;
+
+        console.log('[OPAT_PLOTTING] Plot created successfully');
+    } catch (error) {
+        console.error('[OPAT_PLOTTING] Error creating plot:', error);
+        alert('Error creating plot: ' + error.message);
+    } finally {
+        domManager.hideSpinner();
+        const createBtn = document.getElementById('create-plot-btn');
+        if (createBtn) createBtn.disabled = false;
+    }
+}
+
+// Generate plot data from OPAT table
+async function generatePlotData(indexName, tableName, xVariable, yVariable, plotTypeValue) {
+    const opatFile = stateManager.getOPATFile();
+    const card = opatFile.cards.get(indexName);
+    const tableData = card.tableData.get(tableName);
+
+    const xData = extractVariableData(tableData, xVariable);
+    const yData = extractVariableData(tableData, yVariable);
+
+    let trace;
+    
+    switch (plotTypeValue) {
+        case 'scatter':
+            trace = {
+                x: xData,
+                y: yData,
+                mode: 'markers',
+                type: 'scatter',
+                marker: {
+                    color: '#3b82f6',
+                    size: 6,
+                    opacity: 0.7
+                },
+                name: `${tableName}`
+            };
+            break;
+            
+        case 'line':
+            trace = {
+                x: xData,
+                y: yData,
+                mode: 'lines+markers',
+                type: 'scatter',
+                line: {
+                    color: '#3b82f6',
+                    width: 2
+                },
+                marker: {
+                    color: '#3b82f6',
+                    size: 4
+                },
+                name: `${tableName}`
+            };
+            break;
+            
+        case 'heatmap':
+            // For heatmap, we need 2D data
+            const zData = reshapeDataForHeatmap(tableData);
+            trace = {
+                z: zData,
+                type: 'heatmap',
+                colorscale: 'Viridis',
+                name: `${tableName}`
+            };
+            break;
+            
+        case 'contour':
+            // For contour, we need 2D data
+            const contourData = reshapeDataForHeatmap(tableData);
+            trace = {
+                z: contourData,
+                type: 'contour',
+                colorscale: 'Viridis',
+                name: `${tableName}`
+            };
+            break;
+            
+        default:
+            throw new Error(`Unsupported plot type: ${plotTypeValue}`);
+    }
+
+    return [trace];
+}
+
+// Extract variable data from table
+function extractVariableData(tableData, variable) {
+    console.log('[OPAT_PLOTTING] Extracting variable data for:', variable);
+    
+    // Extract row values (the actual row axis values from the OPAT table)
+    if (variable === '__row_values__') {
+        if (tableData.rowValues && tableData.rowValues.length > 0) {
+            console.log('[OPAT_PLOTTING] Using row values, length:', tableData.rowValues.length);
+            return Array.from(tableData.rowValues);
+        } else {
+            console.warn('[OPAT_PLOTTING] No row values available, using indices');
+            return Array.from({ length: tableData.N_R }, (_, i) => i);
+        }
+    }
+    
+    // Extract column values (the actual column axis values from the OPAT table)
+    if (variable === '__column_values__') {
+        if (tableData.columnValues && tableData.columnValues.length > 0) {
+            console.log('[OPAT_PLOTTING] Using column values, length:', tableData.columnValues.length);
+            return Array.from(tableData.columnValues);
+        } else {
+            console.warn('[OPAT_PLOTTING] No column values available, using indices');
+            return Array.from({ length: tableData.N_C }, (_, i) => i);
+        }
+    }
+    
+    // Legacy support for row/column indices
+    if (variable === '__row_index__') {
+        return Array.from({ length: tableData.N_R }, (_, i) => i);
+    }
+    
+    if (variable === '__col_index__') {
+        return Array.from({ length: tableData.N_C }, (_, i) => i);
+    }
+    
+    // Extract data from a specific row (all columns for that row)
+    if (variable.startsWith('row_')) {
+        const rowIndex = parseInt(variable.split('_')[1]);
+        console.log('[OPAT_PLOTTING] Extracting data from row:', rowIndex);
+        const data = [];
+        
+        for (let col = 0; col < tableData.N_C; col++) {
+            try {
+                const value = tableData.getValue(rowIndex, col, 0); // Use getValue method like OPAT explorer
+                data.push(typeof value === 'number' ? value : parseFloat(value) || 0);
+            } catch (error) {
+                console.warn('[OPAT_PLOTTING] Error extracting data at row', rowIndex, 'col', col, ':', error);
+                data.push(0);
+            }
+        }
+        
+        return data;
+    }
+    
+    // Extract data from a specific column (all rows for that column)
+    if (variable.startsWith('col_')) {
+        const colIndex = parseInt(variable.split('_')[1]);
+        console.log('[OPAT_PLOTTING] Extracting data from column:', colIndex);
+        const data = [];
+        
+        for (let row = 0; row < tableData.N_R; row++) {
+            try {
+                const value = tableData.getValue(row, colIndex, 0); // Use getValue method like OPAT explorer
+                data.push(typeof value === 'number' ? value : parseFloat(value) || 0);
+            } catch (error) {
+                console.warn('[OPAT_PLOTTING] Error extracting data at row', row, 'col', colIndex, ':', error);
+                data.push(0);
+            }
+        }
+        
+        return data;
+    }
+
+    // Extract data from specific data columns (legacy table data access)
+    if (variable.startsWith('data_col_')) {
+        const colIndex = parseInt(variable.split('_')[2]);
+        console.log('[OPAT_PLOTTING] Extracting data column:', colIndex);
+        const data = [];
+        
+        for (let row = 0; row < tableData.N_R; row++) {
+            try {
+                const value = tableData.getValue(row, colIndex, 0); // Use getValue method like OPAT explorer
+                data.push(typeof value === 'number' ? value : parseFloat(value) || 0);
+            } catch (error) {
+                console.warn('[OPAT_PLOTTING] Error extracting data at row', row, 'col', colIndex, ':', error);
+                data.push(0);
+            }
+        }
+        
+        return data;
+    }
+    
+    throw new Error(`Unknown variable: ${variable}`);
+}
+
+// Reshape data for heatmap/contour plots
+function reshapeDataForHeatmap(tableData) {
+    const data = [];
+    for (let row = 0; row < Math.min(tableData.N_R, 50); row++) { // Limit for performance
+        const rowData = [];
+        for (let col = 0; col < Math.min(tableData.N_C, 50); col++) {
+            try {
+                const value = tableData.getValue(row, col, 0); // Use getValue method like OPAT explorer
+                rowData.push(typeof value === 'number' ? value : parseFloat(value) || 0);
+            } catch (error) {
+                rowData.push(0);
+            }
+        }
+        data.push(rowData);
+    }
+    return data;
+}
+
+// Generate plot layout
+function generatePlotLayout(title, xVariable, yVariable) {
+    const isDarkMode = document.body.classList.contains('dark-mode');
+    
+    return {
+        title: {
+            text: title,
+            font: {
+                color: isDarkMode ? '#f3f4f6' : '#1f2937',
+                size: 16
+            }
+        },
+        xaxis: {
+            title: {
+                text: formatVariableName(xVariable),
+                font: {
+                    color: isDarkMode ? '#d1d5db' : '#374151'
+                }
+            },
+            tickfont: {
+                color: isDarkMode ? '#9ca3af' : '#6b7280'
+            },
+            gridcolor: isDarkMode ? '#4b5563' : '#e5e7eb'
+        },
+        yaxis: {
+            title: {
+                text: formatVariableName(yVariable),
+                font: {
+                    color: isDarkMode ? '#d1d5db' : '#374151'
+                }
+            },
+            tickfont: {
+                color: isDarkMode ? '#9ca3af' : '#6b7280'
+            },
+            gridcolor: isDarkMode ? '#4b5563' : '#e5e7eb'
+        },
+        plot_bgcolor: isDarkMode ? '#374151' : 'white',
+        paper_bgcolor: isDarkMode ? '#374151' : 'white',
+        font: {
+            color: isDarkMode ? '#f3f4f6' : '#1f2937'
+        },
+        margin: { t: 50, r: 50, b: 50, l: 50 }
+    };
+}
+
+// Format variable name for display
+function formatVariableName(variable) {
+    if (variable === '__row_index__') return 'Row Index';
+    if (variable === '__col_index__') return 'Column Index';
+    if (variable.startsWith('col_')) {
+        const colIndex = parseInt(variable.split('_')[1]);
+        return `Column ${colIndex + 1}`;
+    }
+    return variable;
+}
+
+// Create Plotly plot
+async function createPlotlyPlot(data, layout) {
+    console.log('[OPAT_PLOTTING] createPlotlyPlot called');
+    
+    currentPlotData = data;
+    currentPlotLayout = layout;
+
+    // Get DOM elements
+    const placeholder = document.getElementById('plot-placeholder');
+    const display = document.getElementById('plot-display');
+    
+    if (!placeholder || !display) {
+        console.error('[OPAT_PLOTTING] Missing plot container elements');
+        throw new Error('Plot container elements not found');
+    }
+
+    // Hide placeholder and show plot display
+    placeholder.classList.add('hidden');
+    display.classList.remove('hidden');
+
+    // Create the plot
+    await Plotly.newPlot(display, data, layout, {
+        responsive: true,
+        displayModeBar: true,
+        modeBarButtonsToAdd: ['downloadImage'],
+        toImageButtonOptions: {
+            format: 'png',
+            filename: 'opat_plot',
+            height: 500,
+            width: 700,
+            scale: 2
+        }
+    });
+}
+
+// Handle save plot button click
+async function handleSavePlot() {
+    if (!currentPlotData || !currentPlotLayout) {
+        alert('No plot to save');
+        return;
+    }
+
+    try {
+        // Use Plotly's built-in download functionality
+        const filename = plotTitle.value ? 
+            plotTitle.value.replace(/[^a-z0-9]/gi, '_').toLowerCase() : 
+            'opat_plot';
+
+        await Plotly.downloadImage(plotDisplay, {
+            format: 'png',
+            width: 1200,
+            height: 800,
+            filename: filename
+        });
+
+        console.log('[OPAT_PLOTTING] Plot saved as PNG');
+    } catch (error) {
+        console.error('[OPAT_PLOTTING] Error saving plot:', error);
+        alert('Error saving plot: ' + error.message);
+    }
+}
+
+// Handle clear plot button click
+function handleClearPlot() {
+    if (plotDisplay && currentPlotData) {
+        Plotly.purge(plotDisplay);
+    }
+
+    currentPlotData = null;
+    currentPlotLayout = null;
+
+    // Show placeholder and hide plot display (with null checks)
+    if (plotDisplay) {
+        plotDisplay.classList.add('hidden');
+    }
+    if (plotPlaceholder) {
+        plotPlaceholder.classList.remove('hidden');
+    }
+
+    // Disable save and clear buttons (with null checks)
+    if (savePlotBtn) {
+        savePlotBtn.disabled = true;
+    }
+    if (clearPlotBtn) {
+        clearPlotBtn.disabled = true;
+    }
+
+    console.log('[OPAT_PLOTTING] Plot cleared');
+}
+
+// Reset plotting state when OPAT file changes
+function resetPlottingState() {
+    handleClearPlot();
+    
+    // Reset selectors with null checks
+    if (plotIndexSelector) {
+        plotIndexSelector.innerHTML = '<option value="">-- Select an Index Vector --</option>';
+    }
+    if (plotTableSelector) {
+        plotTableSelector.innerHTML = '<option value="">-- Select a Table --</option>';
+    }
+    if (plotXAxis) {
+        plotXAxis.innerHTML = '<option value="">-- Select X Variable --</option>';
+    }
+    if (plotYAxis) {
+        plotYAxis.innerHTML = '<option value="">-- Select Y Variable --</option>';
+    }
+    if (plotTitle) {
+        plotTitle.value = '';
+    }
+
+    console.log('[OPAT_PLOTTING] Plotting state reset');
+}
+
+// Initialize dependencies (called when module is loaded)
+function initializePlottingDependencies(deps) {
+    stateManager = deps.stateManager;
+    domManager = deps.domManager;
+}
+
+module.exports = {
+    initializePlottingDependencies,
+    initializePlottingElements,
+    populatePlotIndexSelector,
+    handlePlotIndexChange,
+    handlePlotTableChange,
+    handleCreatePlot,
+    handleSavePlot,
+    handleClearPlot,
+    resetPlottingState
+};

electron/styles.css

@@ -1931,6 +1931,145 @@ body.dark-mode .info-tab-pane a {
   flex-direction: column;
 }
 
+/* OPAT Plotting Tab Styling */
+.plot-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.plot-control-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+@media (max-width: 768px) {
+  .plot-control-row {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+}
+
+.plot-control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.opat-input {
+  padding: 8px 12px;
+  background: white;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  color: #374151;
+  transition: border-color 0.2s ease;
+}
+
+.opat-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+body.dark-mode .opat-input {
+  background: #4b5563;
+  border: 1px solid #6b7280;
+  color: #f3f4f6;
+}
+
+body.dark-mode .opat-input:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.plot-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-start;
+  align-items: center;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+body.dark-mode .plot-actions {
+  border-top: 1px solid #4b5563;
+}
+
+.plot-container {
+  min-height: 500px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+body.dark-mode .plot-container {
+  background: #374151;
+  border: 1px solid #4b5563;
+}
+
+.plot-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 500px;
+  color: #9ca3af;
+  font-style: italic;
+  text-align: center;
+  padding: 20px;
+}
+
+body.dark-mode .plot-placeholder {
+  color: #6b7280;
+}
+
+.plot-display {
+  width: 100%;
+  height: 500px;
+}
+
+/* Plotly.js theme integration */
+.plot-display .plotly {
+  background-color: transparent !important;
+}
+
+body.dark-mode .plot-display .plotly {
+  background-color: transparent !important;
+}
+
+/* Custom plotly toolbar styling */
+.plot-display .modebar {
+  background: rgba(255, 255, 255, 0.9) !important;
+  border-radius: 6px !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+  border: 1px solid #e5e7eb !important;
+}
+
+body.dark-mode .plot-display .modebar {
+  background: rgba(55, 65, 81, 0.9) !important;
+  border: 1px solid #4b5563 !important;
+}
+
+.plot-display .modebar-btn {
+  color: #374151 !important;
+}
+
+body.dark-mode .plot-display .modebar-btn {
+  color: #f3f4f6 !important;
+}
+
+.plot-display .modebar-btn:hover {
+  background: rgba(59, 130, 246, 0.1) !important;
+}
+
+body.dark-mode .plot-display .modebar-btn:hover {
+  background: rgba(59, 130, 246, 0.2) !important;
+}
+
 .opat-table-container {
   flex: 1;
   display: flex;