fix: small errors in user study (#211)

* feat: have global system prompt and decription * fix: don't auto collapse output schema in UI * fix: don't delete the sorting functionality, hide observability cols, and other nits * feat: add documentation * fix: fixing errors from user study
ucbepic · Nov 26, 2024 · ae9b797 · ae9b797
1 parent b7a026c
commit ae9b797
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 60 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -37,7 +37,7 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tanstack/react-query": "^5.59.15",
     "@tanstack/react-table": "^8.20.5",
-    "@tanstack/react-virtual": "^3.10.8",
+    "@tanstack/react-virtual": "^3.10.9",
     "@types/mime-types": "^2.1.4",
     "@types/react-resizable": "^3.0.8",
     "ai": "^3.4.29",
@@ -53,6 +53,7 @@
     "js-yaml": "^4.1.0",
     "json2csv": "^6.0.0-alpha.2",
     "lodash": "^4.17.21",
+    "lodash.throttle": "^4.1.1",
     "lucide-react": "^0.441.0",
     "next": "14.2.11",
     "re-resizable": "^6.10.0",

diff --git a/website/src/app/api/utils.ts b/website/src/app/api/utils.ts
@@ -1,6 +1,5 @@
 import yaml from "js-yaml";
 import path from "path";
-import os from "os";
 import { Operation, SchemaItem } from "@/app/types";
 
 export function generatePipelineConfig(
@@ -35,9 +34,14 @@ export function generatePipelineConfig(
   }
 
   // Fix the output schema of all operations to ensure correct typing
-  const updatedOperations: Record<string, any> = operations.map(
-    (op: Operation) => {
-      const newOp: Record<string, any> = {
+  const updatedOperations = operations
+    .map((op: Operation) => {
+      // Skip if visibility is false
+      if (!op.visibility) {
+        return null;
+      }
+
+      const newOp: Record<string, unknown> = {
         ...op,
         ...op.otherKwargs,
       };
@@ -54,6 +58,7 @@ export function generatePipelineConfig(
       delete newOp.otherKwargs;
       delete newOp.id;
       delete newOp.llmType;
+      delete newOp.visibility;
 
       // Convert numeric strings in otherKwargs to numbers
       Object.entries(newOp).forEach(([key, value]) => {
@@ -119,7 +124,7 @@ export function generatePipelineConfig(
       if (op.type === "sample" && op.otherKwargs?.method === "custom") {
         try {
           newOp.samples = JSON.parse(op.otherKwargs.samples);
-        } catch (e) {
+        } catch (error) {
           console.warn(
             "Failed to parse custom samples as JSON, using raw value"
           );
@@ -139,8 +144,13 @@ export function generatePipelineConfig(
           ),
         },
       };
-    }
-  );
+    })
+    .filter((op) => op !== null);
+
+  // Add check for empty operations
+  if (updatedOperations.length === 0) {
+    throw new Error("No valid operations found in pipeline configuration");
+  }
 
   // Fetch all operations up until and including the operation_id
   const operationsToRun = operations.slice(

diff --git a/website/src/app/api/writePipelineConfig/route.ts b/website/src/app/api/writePipelineConfig/route.ts
@@ -51,14 +51,28 @@ export async function POST(request: Request) {
     const pipelineDir = path.join(homeDir, ".docetl", "pipelines");
     const configDir = path.join(pipelineDir, "configs");
     const nameDir = path.join(pipelineDir, name, "intermediates");
-    await fs.mkdir(configDir, { recursive: true });
-    await fs.mkdir(nameDir, { recursive: true });
-    const filePath = path.join(configDir, `${name}.yaml`);
-    await fs.writeFile(filePath, yamlString, "utf8");
 
-    return NextResponse.json({ filePath, inputPath, outputPath });
+    try {
+      await fs.mkdir(configDir, { recursive: true });
+      await fs.mkdir(nameDir, { recursive: true });
+      const filePath = path.join(configDir, `${name}.yaml`);
+      await fs.writeFile(filePath, yamlString, "utf8");
+
+      return NextResponse.json({ filePath, inputPath, outputPath });
+    } catch (fsError) {
+      console.error("File system error:", fsError);
+      return NextResponse.json(
+        `Failed to write pipeline configuration: ${fsError.message}`,
+        { status: 500 }
+      );
+    }
   } catch (error) {
-    console.error(error);
-    return NextResponse.json({ error: error }, { status: 500 });
+    console.error("Pipeline configuration error:", error);
+    return NextResponse.json(
+      error instanceof Error
+        ? error.message
+        : "An unexpected error occurred while creating the pipeline configuration",
+      { status: 500 }
+    );
   }
 }
diff --git a/website/src/app/types.ts b/website/src/app/types.ts
@@ -30,6 +30,7 @@ export type Operation = {
   runIndex?: number;
   sample?: number;
   shouldOptimizeResult?: string;
+  visibility: boolean;
 };
 
 export type OutputRow = Record<string, string>;

diff --git a/website/src/components/OperationCard.tsx b/website/src/components/OperationCard.tsx
@@ -25,6 +25,8 @@ import {
   ListCollapse,
   Wand2,
   ChevronDown,
+  Eye,
+  EyeOff,
 } from "lucide-react";
 import { Operation, SchemaItem } from "@/app/types";
 import { usePipelineContext } from "@/contexts/PipelineContext";
@@ -62,6 +64,7 @@ const OperationHeader: React.FC<{
   disabled: boolean;
   currOp: boolean;
   expanded: boolean;
+  visibility: boolean;
   optimizeResult?: string;
   onEdit: (name: string) => void;
   onDelete: () => void;
@@ -71,6 +74,7 @@ const OperationHeader: React.FC<{
   onOptimize: () => void;
   onAIEdit: (instruction: string) => void;
   onToggleExpand: () => void;
+  onToggleVisibility: () => void;
 }> = React.memo(
   ({
     name,
@@ -79,6 +83,7 @@ const OperationHeader: React.FC<{
     disabled,
     currOp,
     expanded,
+    visibility,
     optimizeResult,
     onEdit,
     onDelete,
@@ -88,6 +93,7 @@ const OperationHeader: React.FC<{
     onOptimize,
     onAIEdit,
     onToggleExpand,
+    onToggleVisibility,
   }) => {
     const [isEditing, setIsEditing] = useState(false);
     const [editedName, setEditedName] = useState(name);
@@ -105,7 +111,11 @@ const OperationHeader: React.FC<{
     return (
       <div className="relative flex items-center justify-between py-3 px-4">
         {/* Left side buttons */}
-        <div className="flex space-x-1 absolute left-1">
+        <div
+          className={`flex space-x-1 absolute left-1 ${
+            !visibility ? "opacity-50" : ""
+          }`}
+        >
           <Button
             variant="ghost"
             size="sm"
@@ -177,28 +187,24 @@ const OperationHeader: React.FC<{
           >
             <Settings size={14} className="text-gray-500" />
           </Button>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="p-0.25 h-6 w-6"
-                  disabled={disabled}
-                  onClick={onShowOutput}
-                >
-                  <ListCollapse size={14} className="text-primary" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Show outputs</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex items-center gap-1 px-2 h-6"
+            disabled={disabled}
+            onClick={onShowOutput}
+          >
+            <ListCollapse size={14} className="text-primary" />
+            <span className="text-xs text-primary">Show outputs</span>
+          </Button>
         </div>
 
         {/* Centered title */}
-        <div className="flex-grow flex justify-center">
+        <div
+          className={`flex-grow flex justify-center ${
+            !visibility ? "opacity-50" : ""
+          }`}
+        >
           {isEditing ? (
             <Input
               value={editedName}
@@ -222,15 +228,43 @@ const OperationHeader: React.FC<{
           )}
         </div>
 
-        {/* Right side delete button */}
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onDelete}
-          className="hover:bg-red-100 absolute right-1 p-1 h-7 w-7"
-        >
-          <Trash2 size={15} className="text-red-500" />
-        </Button>
+        {/* Right side buttons */}
+        <div className="absolute right-1 flex items-center space-x-0">
+          <Button
+            variant={visibility ? "ghost" : "default"}
+            size="sm"
+            className={`flex items-center gap-1 px-2 h-6 ${
+              !visibility
+                ? "bg-green-100 hover:bg-green-200"
+                : "hover:bg-green-100"
+            }`}
+            onClick={onToggleVisibility}
+          >
+            {visibility ? (
+              <>
+                <EyeOff size={14} className="text-gray-500" />
+                <span className="text-xs text-gray-500">Skip operation</span>
+              </>
+            ) : (
+              <>
+                <Eye size={14} className="text-green-700" />
+                <span className="text-xs font-medium text-green-700">
+                  Include operation
+                </span>
+              </>
+            )}
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onDelete}
+            className={`hover:bg-red-100 p-1 h-7 w-7 ${
+              !visibility ? "opacity-50" : ""
+            }`}
+          >
+            <Trash2 size={15} className="text-red-500" />
+          </Button>
+        </div>
       </div>
     );
   }
@@ -798,6 +832,18 @@ export const OperationCard: React.FC<{ index: number }> = ({ index }) => {
     [debouncedUpdate]
   );
 
+  const handleVisibilityToggle = useCallback(() => {
+    if (!operation) return;
+
+    const updatedOperation = {
+      ...operation,
+      visibility:
+        operation.visibility === undefined ? false : !operation.visibility,
+    };
+
+    handleOperationUpdate(updatedOperation);
+  }, [operation, handleOperationUpdate]);
+
   if (!operation) {
     return <SkeletonCard />;
   }
@@ -822,7 +868,7 @@ export const OperationCard: React.FC<{ index: number }> = ({ index }) => {
               pipelineOutput?.operationId === operation.id
                 ? "bg-white border-blue-500 border-2"
                 : "bg-white"
-            }`}
+            } ${!operation.visibility ? "opacity-50" : ""}`}
           >
             {/* Move the drag handle div outside of the ml-5 container */}
             <div
@@ -841,6 +887,7 @@ export const OperationCard: React.FC<{ index: number }> = ({ index }) => {
                 disabled={isLoadingOutputs || pipelineOutput === undefined}
                 currOp={operation.id === pipelineOutput?.operationId}
                 expanded={isExpanded}
+                visibility={operation.visibility}
                 optimizeResult={operation.shouldOptimizeResult}
                 onEdit={(name) => {
                   dispatch({ type: "UPDATE_NAME", payload: name });
@@ -857,8 +904,9 @@ export const OperationCard: React.FC<{ index: number }> = ({ index }) => {
                 onOptimize={onOptimize}
                 onAIEdit={handleAIEdit}
                 onToggleExpand={() => dispatch({ type: "TOGGLE_EXPAND" })}
+                onToggleVisibility={handleVisibilityToggle}
               />
-              {isExpanded && (
+              {isExpanded && operation.visibility !== false && (
                 <>
                   <CardContent className="py-2 px-3">
                     {createOperationComponent(

diff --git a/website/src/components/Output.tsx b/website/src/components/Output.tsx
@@ -264,7 +264,7 @@ export const Output: React.FC = () => {
     };
 
     fetchData();
-  }, [output, operation, isLoadingOutputs]);
+  }, [output, isLoadingOutputs]);
 
   const columns: ColumnType<any>[] = React.useMemo(() => {
     const importantColumns = operation?.output?.schema