Function CodeViewer

frontend/src/components/Pipeline/CodeViewer.tsx:6–146

()

import Prism from 'prismjs';

const CodeViewer: React.FC = () => {
  const { currentPipeline } = usePipelineStore();
  const [isExecuting, setIsExecuting] = useState(false);
  const [executionResult, setExecutionResult] = useState<any>(null);

  useEffect(() => {
    // Highlight code when it changes
    Prism.highlightAll();
  }, [currentPipeline?.code]);

  const handleCopyCode = () => {
    if (currentPipeline?.code) {
      navigator.clipboard.writeText(currentPipeline.code);
      // You could add a toast notification here
    }
  };

  const handleDownloadCode = () => {
    if (currentPipeline?.code) {
      const blob = new Blob([currentPipeline.code], { type: 'text/plain' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `${currentPipeline.name.replace(/\s+/g, '_')}_scraper.py`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }
  };

  const handleExecuteCode = async () => {
    if (!currentPipeline?.code || !currentPipeline?.urls || !currentPipeline?.schema) {
      alert('Please ensure you have URLs and a schema defined before executing.');
      return;
    }

    // Check for API key
    const apiKey = localStorage.getItem('SCRAPEGRAPH_API_KEY');
    if (!apiKey) {
      alert('Please configure your ScrapeGraphAI API key in Settings before executing.');
      return;
    }

    setIsExecuting(true);
    setExecutionResult(null);

    try {
      // Use the pipeline store's runPipeline function
      await usePipelineStore.getState().runPipeline(currentPipeline.id);
      
      // Get the updated pipeline with results
      const updatedPipeline = usePipelineStore.getState().currentPipeline;
      
      if (updatedPipeline?.status === 'completed') {
        setExecutionResult({ 
          success: true, 
          results: updatedPipeline.results