could not use graph with interaction #252

const fs = require('fs');

function readCSV(filePath) {
    const content = fs.readFileSync(filePath, 'utf-8');
    const lines = content.trim().split('\n');
    const headers = lines[0].split(',').map(h => h.trim());
    const rows = lines.slice(1).map(line => {
        const values = line.split(',').map(v => v.trim());
        const row = {};
        headers.forEach((header, index) => {
            row[header] = values[index];
        });
        return row;
    });
    return { headers, rows };
}

function extractColumnData(rows, columnName) {
    return rows.map((row, index) => ({
        x: index,
        y: parseFloat(row[columnName])
    }));
}

function visualizeSingle(csvPath, columnName) {
    const { rows } = readCSV(csvPath);
    const data = extractColumnData(rows, columnName);
    
    return {
        kind: { plotly: true },
        data: [{
            x: data.map(d => d.x),
            y: data.map(d => d.y),
            type: 'scatter',
            mode: 'lines+markers',
            name: columnName
        }]
    };
}

function visualizeCompare(csvPath, columnNames) {
    const { rows } = readCSV(csvPath);
    
    const colors = [
        '#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd',
        '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf'
    ];
    
    const traces = columnNames.map((columnName, index) => {
        const data = extractColumnData(rows, columnName);
        return {
            x: data.map(d => d.x),
            y: data.map(d => d.y),
            type: 'scatter',
            mode: 'lines+markers',
            name: columnName,
            line: { 
                color: colors[index % colors.length] 
            }
        };
    });
    
    return {
        kind: { plotly: true },
        data: traces
    };
}

function visualize3D(csvPath, xColumn, yColumn, zColumn) {
    const { rows } = readCSV(csvPath);
    
    const xData = rows.map(row => parseFloat(row[xColumn]));
    const yData = rows.map(row => parseFloat(row[yColumn]));
    const zData = rows.map(row => parseFloat(row[zColumn]));
    
    return {
        kind: { plotly: true },
        data: [{
            x: xData,
            y: yData,
            z: zData,
            type: 'scatter3d',
            mode: 'markers',
            marker: {
                size: 4,
                color: zData,
                colorscale: 'Viridis',
                showscale: true,
                colorbar: {
                    title: zColumn,
                    thickness: 15,
                    len: 0.7
                }
            },
            hovertemplate: 
                `<b>${xColumn}</b>: %{x:.4f}<br>` +
                `<b>${yColumn}</b>: %{y:.4f}<br>` +
                `<b>${zColumn}</b>: %{z:.4f}<extra></extra>`
        }],
        layout: {
            scene: {
                xaxis: { title: xColumn },
                yaxis: { title: yColumn },
                zaxis: { title: zColumn },
                camera: {
                    eye: { x: 1.5, y: 1.5, z: 1.5 }
                }
            },
            hovermode: 'closest',
            dragmode: 'orbit'
        },
        config: {
            displayModeBar: true,
            displaylogo: false,
            responsive: true,
            scrollZoom: true
        }
    };
}

function visualize3D_line(csvPath, xColumn, yColumn, zColumn) {
    const { rows } = readCSV(csvPath);
    
    const xData = rows.map(row => parseFloat(row[xColumn]));
    const yData = rows.map(row => parseFloat(row[yColumn]));
    const zData = rows.map(row => parseFloat(row[zColumn]));
    
    return {
        kind: { plotly: true },
        data: [{
            x: xData,
            y: yData,
            z: zData,
            type: 'scatter3d',
            mode: 'lines+markers',
            line: {
                width: 4,
                color: zData,
                colorscale: 'Viridis'
            },
            marker: {
                size: 3,
                color: zData,
                colorscale: 'Viridis',
                showscale: true
            }
        }],
        layout: {
            scene: {
                xaxis: { title: xColumn },
                yaxis: { title: yColumn },
                zaxis: { title: zColumn }
            },
            dragmode: 'orbit'
        },
        config: {
            displayModeBar: true,
            displaylogo: false,
            responsive: true,
            scrollZoom: true
        }
    };
}

function createVisualization(csvPath, config) {
    if (config.type === 'single') {
        return visualizeSingle(csvPath, config.column);
    } else if (config.type === 'compare') {
        return visualizeCompare(csvPath, config.columns);
    } else if (config.type === '3d') {
        return visualize3D(csvPath, config.xColumn, config.yColumn, config.zColumn);
    } else if (config.type === '3d-line') {
        return visualize3D_line(csvPath, config.xColumn, config.yColumn, config.zColumn);
    }
}


// ==================== USAGE ====================

const csvPath = 'tt.csv';

const viz3d_scatter = createVisualization(csvPath, {
    type: '3d',
    xColumn: 'AverageVVals',
    yColumn: 'AveragePenalty',
    zColumn: 'AverageEpRet'
});

const viz3d_line = createVisualization(csvPath, {
    type: '3d-line',
    xColumn: 'AverageVVals',
    yColumn: 'AveragePenalty',
    zColumn: 'AverageEpRet'
});

const viz2d_compare = createVisualization(csvPath, {
    type: 'compare',
    columns: ['AverageVVals','AverageCVVals','AverageAdv','AverageCAdv','AverageLossPi','AverageLossV','AverageRatio','AverageDeltaLossPi',"AverageDeltaLossV",'AverageVVals', 'AveragePenalty', 'AverageClipFrac','AverageKL','AverageEntropy']

});

debugger;