Function SchemaEditor

frontend/src/components/Pipeline/SchemaEditor.tsx:12–167

()

}

const SchemaEditor: React.FC = () => {
  const { currentPipeline, updatePipeline } = usePipelineStore();
  const [fields, setFields] = useState<SchemaField[]>([]);
  const [newField, setNewField] = useState<SchemaField>({
    name: '',
    type: 'str',
    description: ''
  });

  useEffect(() => {
    // Convert schema object to fields array
    if (currentPipeline?.schema) {
      const schemaFields = Object.entries(currentPipeline.schema).map(([name, type]) => ({
        name,
        type: typeof type === 'string' ? type : 'str',
        description: ''
      }));
      setFields(schemaFields);
    }
  }, [currentPipeline?.schema]);

  const handleAddField = () => {
    if (!newField.name.trim() || !currentPipeline) return;

    const updatedFields = [...fields, newField];
    setFields(updatedFields);
    
    // Update pipeline schema
    const schema = updatedFields.reduce((acc, field) => ({
      ...acc,
      [field.name]: field.type
    }), {});
    
    updatePipeline(currentPipeline.id, { schema });
    
    // Reset form
    setNewField({ name: '', type: 'str', description: '' });
  };

  const handleRemoveField = (index: number) => {
    if (!currentPipeline) return;
    
    const updatedFields = fields.filter((_, i) => i !== index);
    setFields(updatedFields);
    
    // Update pipeline schema
    const schema = updatedFields.reduce((acc, field) => ({
      ...acc,
      [field.name]: field.type
    }), {});
    
    updatePipeline(currentPipeline.id, { schema });
  };

  const fieldTypes = [
    { value: 'str', label: 'String' },
    { value: 'int', label: 'Integer' },
    { value: 'float', label: 'Float' },