visualizations.js

// Visualization configurations using Plotly.js
const defaultLayout = {
  paper_bgcolor: 'rgba(0,0,0,0)',
  plot_bgcolor: 'rgba(0,0,0,0)',
  font: {
    color: '#e0e0e0'
  },
  margin: {
    l: 40, r: 20, t: 20, b: 40
  }
};

function initializeVisualizations() {
  // Superposition visualization
  const superpositionData = [{
    y: quantumSystem.state.superposition.states,
    type: 'bar',
    marker: {
      color: '#6f42c1'
    }
  }];
  
  Plotly.newPlot('superposition', superpositionData, {
    ...defaultLayout,
    title: 'Quantum States'
  });

  // Gates visualization
  const gatesData = [{
    type: 'heatmap',
    z: [[1, 0], [0, 1]],
    colorscale: 'Viridis'
  }];

  Plotly.newPlot('gates', gatesData, {
    ...defaultLayout,
    title: 'Gate Operations'
  });

  // Search visualization
  const searchData = [{
    y: [0],
    type: 'scatter',
    mode: 'lines',
    line: {
      color: '#00acc1'
    }
  }];

  Plotly.newPlot('search', searchData, {
    ...defaultLayout,
    title: 'Search Probability'
  });

  // Walk visualization  
  const walkData = [{
    y: [0],
    type: 'scatter',
    mode: 'lines',
    line: {
      color: '#00acc1'
    }
  }];

  Plotly.newPlot('walks', walkData, {
    ...defaultLayout, 
    title: 'Quantum Walk'
  });

  updateStateDisplay();
}

function updateVisualizations() {
  const state = quantumSystem.getState();

  // Update superposition
  Plotly.update('superposition', {
    y: [state.state.superposition.states]
  });

  // Update gates
  const gateMatrix = state.state.gates.hadamard ? 
    [[1/Math.sqrt(2), 1/Math.sqrt(2)], [1/Math.sqrt(2), -1/Math.sqrt(2)]] :
    [[1, 0], [0, Math.exp(state.state.gates.phase)]];
  
  Plotly.update('gates', {
    z: [gateMatrix]
  });

  // Update search
  Plotly.extendTraces('search', {
    y: [[state.state.search.probability]]
  }, [0]);

  // Update walk
  if (state.state.walk.active) {
    Plotly.extendTraces('walks', {
      y: [[state.state.walk.position]]
    }, [0]);
  }

  updateStateDisplay();
}

function updateStateDisplay() {
  const state = quantumSystem.getState();
  
  // Update state display
  document.getElementById('state-display').innerHTML = `
    <pre>
    Superposition: ${state.state.superposition.active ? 'Active' : 'Inactive'}
    Gates: H=${state.state.gates.hadamard}, φ=${state.state.gates.phase.toFixed(2)}
    Search Iterations: ${state.state.search.iterations}
    Walk Position: ${state.state.walk.position.toFixed(2)}
    </pre>
  `;

  // Update metrics
  document.getElementById('metrics').innerHTML = `
    <pre>
    Coherence: ${state.metrics.coherence.toFixed(3)}
    Entanglement: ${state.metrics.entanglement.toFixed(3)}
    Efficiency: ${state.metrics.efficiency.toFixed(3)}
    </pre>
  `;
}

// Initialize visualizations when page loads
window.addEventListener('load', initializeVisualizations);