feat: add sample pipeline for supreme court hearing transcripts (#250)

* chore: ui nits

* chore: ui nits

* feat: add tutorial for the supreme court hearings

website/src/app/api/downloadTutorialDataset/route.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const fileId = searchParams.get("fileId");
+
+  if (!fileId) {
+    return new NextResponse("File ID is required", { status: 400 });
+  }
+
+  try {
+    const driveUrl = `https://drive.google.com/uc?export=download&id=${fileId}`;
+    const response = await fetch(driveUrl);
+
+    if (!response.ok) {
+      throw new Error("Failed to download file from Google Drive");
+    }
+
+    const data = await response.blob();
+    return new NextResponse(data);
+  } catch (error) {
+    console.error("Error downloading tutorial dataset:", error);
+    return new NextResponse("Failed to download tutorial dataset", {
+      status: 500,
+    });
+  }
+}

website/src/app/api/utils.ts

@@ -193,27 +193,14 @@ export function generatePipelineConfig(
   );
 
   // Fix type errors by asserting the pipeline config type
-  const pipelineConfig: {
-    datasets: any;
-    default_model: string;
-    optimizer_config: any;
-    operations: any[];
-    pipeline: {
-      steps: any[];
-      output: {
-        type: string;
-        path: string;
-        intermediate_dir: string;
-      };
-    };
-    system_prompt: Record<string, unknown>;
-    llm_api_keys?: Record<string, string>;
-  } = {
+  const pipelineConfig: any = {
     datasets,
     default_model,
-    optimizer_config: {
-      force_decompose: true,
-    },
+    ...(enable_observability && {
+      optimizer_config: {
+        force_decompose: true,
+      },
+    }),
     operations: updatedOperations,
     pipeline: {
       steps: [

website/src/app/globals.css

@@ -190,3 +190,31 @@
 .news-ticker:hover {
   cursor: pointer;
 }
+
+/* Add these styles */
+[data-panel] {
+  transition: none; /* Remove transition during resize */
+}
+
+[data-panel-group] {
+  transition: width 50ms ease, height 50ms ease;
+}
+
+/* Replace the resize handle styles with these cleaner versions */
+[data-resize-handle] {
+  position: relative;
+}
+
+[data-resize-handle][data-dragging="true"] {
+  background-color: rgb(96 165 250); /* blue-400 */
+}
+
+[data-dragging="true"] {
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Remove the previous ::before pseudo-element styles */
+[data-dragging="true"]::before {
+  display: none;
+}

website/src/app/playground/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef, Suspense } from "react";
 import { Scroll, Info, Save, Monitor, AlertCircle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
@@ -30,6 +30,11 @@ const DatasetView = dynamic(
   () => import("@/components/DatasetView").then((mod) => mod.default),
   {
     ssr: false,
+    loading: () => (
+      <div className="h-full flex items-center justify-center">
+        <div className="animate-spin h-6 w-6 border-2 border-primary border-r-transparent rounded-full" />
+      </div>
+    ),
   }
 );
 const PipelineGUI = dynamic(
@@ -99,6 +104,7 @@ const NamespaceDialog = dynamic(
 );
 import { ThemeProvider, useTheme, Theme } from "@/contexts/ThemeContext";
 import { APIKeysDialog } from "@/components/APIKeysDialog";
+import { TutorialsDialog, TUTORIALS } from "@/components/TutorialsDialog";
 
 const LeftPanelIcon: React.FC<{ isActive: boolean }> = ({ isActive }) => (
   <svg
@@ -206,6 +212,43 @@ const LoadingScreen: React.FC = () => (
   </div>
 );
 
+const PerformanceWrapper: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+}> = ({ children, className }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [size, setSize] = useState<{ width: number; height: number }>();
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Capture size on mount and resize
+  useEffect(() => {
+    if (ref.current) {
+      const observer = new ResizeObserver((entries) => {
+        if (!isDragging) {
+          const { width, height } = entries[0].contentRect;
+          setSize({ width, height });
+        }
+      });
+
+      observer.observe(ref.current);
+      return () => observer.disconnect();
+    }
+  }, [isDragging]);
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+      style={{
+        visibility: isDragging ? "hidden" : "visible",
+      }}
+      data-dragging={isDragging}
+    >
+      {children}
+    </div>
+  );
+};
+
 const CodeEditorPipelineApp: React.FC = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [isMobileView, setIsMobileView] = useState(false);
@@ -216,6 +259,9 @@ const CodeEditorPipelineApp: React.FC = () => {
   const [showChat, setShowChat] = useState(false);
   const [showNamespaceDialog, setShowNamespaceDialog] = useState(false);
   const [showAPIKeysDialog, setShowAPIKeysDialog] = useState(false);
+  const [showTutorialsDialog, setShowTutorialsDialog] = useState(false);
+  const [selectedTutorial, setSelectedTutorial] =
+    useState<(typeof TUTORIALS)[0]>();
   const { theme, setTheme } = useTheme();
 
   const {
@@ -229,6 +275,10 @@ const CodeEditorPipelineApp: React.FC = () => {
     unsavedChanges,
     namespace,
     setNamespace,
+    setOperations,
+    setPipelineName,
+    setSampleSize,
+    setDefaultModel,
   } = usePipelineContext();
 
   useEffect(() => {
@@ -358,8 +408,10 @@ const CodeEditorPipelineApp: React.FC = () => {
   const panelToggleStyles =
     "flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors duration-200";
   const mainContentStyles = "flex-grow overflow-hidden bg-gray-50";
-  const resizeHandleStyles =
-    "w-2 bg-gray-100 hover:bg-blue-200 transition-colors duration-200";
+  const resizeHandleStyles = `
+    w-2 bg-gray-100 hover:bg-blue-200 transition-colors duration-200
+    data-[dragging=true]:bg-blue-400
+  `;
 
   return (
     <BookmarkProvider>
@@ -446,6 +498,22 @@ const CodeEditorPipelineApp: React.FC = () => {
                   >
                     Show Documentation
                   </MenubarItem>
+                  <MenubarSub>
+                    <MenubarSubTrigger>Tutorials</MenubarSubTrigger>
+                    <MenubarSubContent>
+                      {TUTORIALS.map((tutorial) => (
+                        <MenubarItem
+                          key={tutorial.id}
+                          onSelect={() => {
+                            setSelectedTutorial(tutorial);
+                            setShowTutorialsDialog(true);
+                          }}
+                        >
+                          {tutorial.title}
+                        </MenubarItem>
+                      ))}
+                    </MenubarSubContent>
+                  </MenubarSub>
                   <MenubarItem onSelect={() => setShowChat(!showChat)}>
                     Show Chat
                   </MenubarItem>
@@ -576,10 +644,17 @@ const CodeEditorPipelineApp: React.FC = () => {
         <ResizablePanelGroup
           direction="horizontal"
           className={mainContentStyles}
+          onDragStart={() => (document.body.style.cursor = "col-resize")}
+          onDragEnd={() => (document.body.style.cursor = "default")}
         >
           {showFileExplorer && (
             <ResizablePanel defaultSize={10} minSize={6} className="h-full">
-              <ResizablePanelGroup direction="vertical" className="h-full">
+              <ResizablePanelGroup
+                direction="vertical"
+                className="h-full"
+                onDragStart={() => (document.body.style.cursor = "row-resize")}
+                onDragEnd={() => (document.body.style.cursor = "default")}
+              >
                 <ResizablePanel
                   defaultSize={40}
                   minSize={20}
@@ -620,13 +695,20 @@ const CodeEditorPipelineApp: React.FC = () => {
           )}
 
           <ResizablePanel defaultSize={60} minSize={30} className="h-full">
-            <ResizablePanelGroup direction="vertical" className="h-full">
+            <ResizablePanelGroup
+              direction="vertical"
+              className="h-full"
+              onDragStart={() => (document.body.style.cursor = "row-resize")}
+              onDragEnd={() => (document.body.style.cursor = "default")}
+            >
               <ResizablePanel
                 defaultSize={60}
                 minSize={5}
                 className="overflow-auto"
               >
-                <PipelineGUI />
+                <PerformanceWrapper className="h-full">
+                  <PipelineGUI />
+                </PerformanceWrapper>
               </ResizablePanel>
               {showOutput && (
                 <ResizableHandle withHandle className={resizeHandleStyles} />
@@ -637,7 +719,9 @@ const CodeEditorPipelineApp: React.FC = () => {
                   minSize={20}
                   className="overflow-auto"
                 >
-                  <Output />
+                  <PerformanceWrapper className="h-full">
+                    <Output />
+                  </PerformanceWrapper>
                 </ResizablePanel>
               )}
             </ResizablePanelGroup>
@@ -651,7 +735,17 @@ const CodeEditorPipelineApp: React.FC = () => {
                 minSize={10}
                 className="h-full overflow-auto"
               >
-                <DatasetView file={currentFile} />
+                <PerformanceWrapper className="h-full">
+                  <Suspense
+                    fallback={
+                      <div className="h-full flex items-center justify-center">
+                        <div className="animate-spin h-6 w-6 border-2 border-primary border-r-transparent rounded-full" />
+                      </div>
+                    }
+                  >
+                    <DatasetView file={currentFile} />
+                  </Suspense>
+                </PerformanceWrapper>
               </ResizablePanel>
             </>
           )}
@@ -670,6 +764,23 @@ const CodeEditorPipelineApp: React.FC = () => {
           open={showAPIKeysDialog}
           onOpenChange={setShowAPIKeysDialog}
         />
+        <TutorialsDialog
+          open={showTutorialsDialog}
+          onOpenChange={setShowTutorialsDialog}
+          selectedTutorial={selectedTutorial}
+          namespace={namespace}
+          onFileUpload={(file: File) =>
+            setFiles((prevFiles) => [...prevFiles, file])
+          }
+          setCurrentFile={setCurrentFile}
+          setOperations={setOperations}
+          setPipelineName={setPipelineName}
+          setSampleSize={setSampleSize}
+          setDefaultModel={setDefaultModel}
+          setFiles={setFiles}
+          currentFile={currentFile}
+          files={files}
+        />
       </div>
     </BookmarkProvider>
   );

website/src/app/types.ts

@@ -1,8 +1,9 @@
 export type File = {
   name: string;
   path: string;
-  type: "json" | "document";
+  type: "json" | "document" | "pipeline-yaml";
   parentFolder?: string;
+  blob?: Blob;
 };
 
 export type Operation = {

website/src/components/DatasetView.tsx

@@ -21,6 +21,7 @@ import {
 import { ChevronRight } from "lucide-react";
 import { Database } from "lucide-react";
 import { File } from "@/app/types";
+import { cn } from "@/lib/utils";
 
 interface FileChunk {
   content: string;
@@ -408,7 +409,11 @@ const DatasetView: React.FC<{ file: File | null }> = ({ file }) => {
         </span>
         <div className="flex flex-wrap gap-1 mt-2">
           {keys.map((key) => (
-            <Badge key={key} variant="default">
+            <Badge
+              key={key}
+              variant="default"
+              className="transition-none hover:bg-primary hover:text-primary-foreground"
+            >
               {key}
             </Badge>
           ))}