ENG-1592, ENG-1593, ENG-1594: Wire up sidebar inputs for extraction page (#958)

sid597 · web-flow · commit 9b943144cf0d · 2026-04-17T16:22:28.000+05:30
* ENG-1592, ENG-1593, ENG-1594: Wire up sidebar inputs for extraction page PDF upload, research question textarea, and toggleable node types with shared NodeTypeDefinition type. Evidence and Claim selected by default. * Use shadcn Button/Label and default Tailwind utilities in extraction Sidebar Address PR #958 review: swap native <button>/<label> for @repo/ui Button/Label so the sidebar uses the shared component presentation, and replace arbitrary text-[Npx]/tracking-[Nem]/rounded-[Npx]/border-[Npx] classes with Tailwind defaults (text-lg/base/sm/xs, tracking-tight/wide, rounded-3xl, border-2). Adds a new Label component to @repo/ui with @radix-ui/react-label as a direct dep (previously transitive). * Drop arbitrary sidebar width/shadow in favor of Tailwind defaults Swap lg:w-[390px] + xl:w-[420px] for lg:w-96, and the custom shadow-[0_26px_52px_-38px_rgba(15,23,42,0.6)] for shadow-xl. Defers exact visual tuning to the design phase. * Enlarge research question textarea to avoid scrollbar on placeholder min-h-20 (80px) clipped the 3-line placeholder. Bump to min-h-36 (144px) so typical research questions fit without an inner scrollbar.
diff --git a/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx b/apps/website/app/(extract)/extract-nodes/components/Sidebar.tsx
@@ -1,138 +1,162 @@
+"use client";
+import { useRef } from "react";
 import { Button } from "@repo/ui/components/ui/button";
 import { Checkbox } from "@repo/ui/components/ui/checkbox";
-import { ChevronDown } from "lucide-react";
-
-const NODE_TYPES = [
-  {
-    label: "Claim",
-    description:
-      "An assertion about how something works or should work. Usually a single declarative sentence.",
-    candidateTag: "#clm-candidate",
-    color: "#7DA13E",
-  },
-  {
-    label: "Question",
-    description:
-      "An unknown being explored through research. Framed as a question that can be investigated.",
-    candidateTag: "#que-candidate",
-    color: "#99890E",
-  },
-  {
-    label: "Hypothesis",
-    description:
-      "A proposed answer to a question. Collects evidence for or against.",
-    candidateTag: "#hyp-candidate",
-    color: "#7C4DFF",
-  },
-  {
-    label: "Evidence",
-    description:
-      "A discrete observation from a published dataset or experiment. Usually in past tense with observable, model system, and method.",
-    candidateTag: "#evd-candidate",
-    color: "#dc0c4a",
-  },
-  {
-    label: "Result",
-    description:
-      "A discrete observation from ongoing research, in past tense. Includes source context.",
-    candidateTag: "#res-candidate",
-    color: "#E6A23C",
-  },
-  {
-    label: "Source",
-    description: "A referenced publication or external resource.",
-    candidateTag: "#src-candidate",
-    color: "#9E9E9E",
-  },
-  {
-    label: "Theory",
-    description: "A theoretical framework or model that explains phenomena.",
-    candidateTag: "#the-candidate",
-    color: "#8B5CF6",
-  },
-];
+import { Label } from "@repo/ui/components/ui/label";
+import { Textarea } from "@repo/ui/components/ui/textarea";
+import { ChevronDown, Upload } from "lucide-react";
+import { NODE_TYPE_DEFINITIONS } from "~/types/extraction";
 
 const SECTION_LABEL_CLASS =
-  "mb-3 block px-1 text-[18px] font-semibold tracking-[-0.016em] text-slate-800";
+  "mb-3 block px-1 text-lg font-semibold tracking-tight text-slate-800";
+
+type SidebarProps = {
+  pdfFile: File | null;
+  onFileSelect: (file: File) => void;
+  researchQuestion: string;
+  onResearchQuestionChange: (value: string) => void;
+  selectedTypes: Set<string>;
+  onToggleType: (candidateTag: string) => void;
+};
+
+export const Sidebar = ({
+  pdfFile,
+  onFileSelect,
+  researchQuestion,
+  onResearchQuestionChange,
+  selectedTypes,
+  onToggleType,
+}: SidebarProps): React.ReactElement => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file?.type === "application/pdf") {
+      onFileSelect(file);
+    }
+    event.target.value = "";
+  };
 
-export const Sidebar = (): React.ReactElement => {
   return (
-    <aside className="flex w-full shrink-0 flex-col overflow-hidden rounded-[24px] border border-slate-200/85 bg-white shadow-[0_26px_52px_-38px_rgba(15,23,42,0.6)] lg:w-[390px] xl:w-[420px]">
+    <aside className="flex w-full shrink-0 flex-col overflow-hidden rounded-3xl border border-slate-200/85 bg-white shadow-xl lg:w-96">
       <div className="flex-1 overflow-y-auto p-4 lg:p-5">
         <section className="mb-6">
           <h3 className={SECTION_LABEL_CLASS}>Paper</h3>
-          <div className="flex w-full items-start gap-3 rounded-2xl border border-slate-200 bg-white p-3.5">
-            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-gradient-to-b from-rose-500 to-rose-600">
-              <span className="text-[11px] font-bold tracking-[0.02em] text-white">
-                PDF
-              </span>
-            </div>
-            <div className="min-w-0 flex-1 pt-0.5">
-              <p className="truncate text-[16px] font-semibold leading-tight text-slate-900">
-                Yamamoto et al. - 2015 - Basolate...
-              </p>
-              <p className="mt-1 text-[14px] leading-tight text-slate-500">
-                7.8 MB &middot;{" "}
-                <span className="font-medium text-slate-500">Replace file</span>
-              </p>
-            </div>
-          </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".pdf,application/pdf"
+            className="hidden"
+            onChange={handleFileInput}
+          />
+          {pdfFile ? (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => fileInputRef.current?.click()}
+              className="group h-auto w-full items-start justify-start gap-3 whitespace-normal rounded-2xl border-slate-200 p-3.5 text-left hover:border-slate-300 hover:bg-white"
+            >
+              <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-gradient-to-b from-rose-500 to-rose-600">
+                <span className="text-xs font-bold tracking-wide text-white">
+                  PDF
+                </span>
+              </div>
+              <div className="min-w-0 flex-1 pt-0.5">
+                <p className="truncate text-base font-semibold leading-tight text-slate-900">
+                  {pdfFile.name}
+                </p>
+                <p className="mt-1 text-sm leading-tight text-slate-500">
+                  {(pdfFile.size / 1024 / 1024).toFixed(1)} MB &middot;{" "}
+                  <span className="font-medium transition-colors group-hover:text-sky-700">
+                    Replace file
+                  </span>
+                </p>
+              </div>
+            </Button>
+          ) : (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => fileInputRef.current?.click()}
+              className="h-auto w-full flex-col gap-2.5 rounded-2xl border-2 border-dashed border-slate-300 px-4 py-9 text-center hover:border-slate-400 hover:bg-slate-50 [&_svg]:size-5"
+            >
+              <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-slate-100">
+                <Upload className="text-slate-500" />
+              </div>
+              <div>
+                <p className="text-base font-semibold text-slate-800">
+                  Upload PDF
+                </p>
+                <p className="mt-1 text-sm text-slate-500">
+                  Click to choose a file
+                </p>
+              </div>
+            </Button>
+          )}
         </section>
 
         <section className="mb-6">
           <h3 className={SECTION_LABEL_CLASS}>Model</h3>
           <Button
             variant="outline"
-            className="w-full justify-between rounded-xl border-slate-300 px-3.5 py-3 text-[16px] font-medium text-slate-700"
+            className="w-full justify-between rounded-xl border-slate-300 px-3.5 py-3 text-base font-medium text-slate-700"
           >
             <span>Claude Sonnet 4.6</span>
-            <ChevronDown className="h-4 w-4 text-slate-500" />
+            <ChevronDown className="text-slate-500" />
           </Button>
         </section>
 
         <section className="mb-5">
           <h3 className={SECTION_LABEL_CLASS}>Research Question</h3>
-          <div className="w-full rounded-xl border border-slate-300 bg-white px-3.5 py-3 text-[16px] text-slate-700">
-            What are the molecular determinants of lumenoid formation in hiPSCs?
-          </div>
+          <Textarea
+            value={researchQuestion}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              onResearchQuestionChange(e.target.value)
+            }
+            placeholder="e.g., What are the molecular determinants of lumenoid formation in hiPSCs?"
+            className="min-h-36 resize-none rounded-xl border-slate-300 bg-white px-3.5 py-3 text-base text-slate-700 placeholder:text-slate-400"
+          />
         </section>
 
         <div className="mx-1 mb-5 border-t border-slate-200" />
 
         <section>
           <div className="mb-2.5 flex items-center justify-between px-1">
-            <h3 className="text-[18px] font-semibold tracking-[-0.016em] text-slate-800">
+            <h3 className="text-lg font-semibold tracking-tight text-slate-800">
               Node Types
             </h3>
-            <span className="text-[13px] font-semibold tabular-nums text-slate-500">
-              {NODE_TYPES.length}/{NODE_TYPES.length}
+            <span className="text-xs font-semibold tabular-nums text-slate-500">
+              {selectedTypes.size}/{NODE_TYPE_DEFINITIONS.length}
             </span>
           </div>
 
           <div className="space-y-1.5">
-            {NODE_TYPES.map((type) => (
-              <label
+            {NODE_TYPE_DEFINITIONS.map((type) => (
+              <Label
                 key={type.candidateTag}
                 className="flex w-full cursor-pointer items-center gap-2.5 rounded-xl border border-slate-200 bg-white px-2.5 py-2.5 text-slate-800 shadow-sm"
               >
-                <Checkbox checked />
-                <span className="min-w-0 flex-1 text-[16px] font-medium">
+                <Checkbox
+                  checked={selectedTypes.has(type.candidateTag)}
+                  onCheckedChange={() => onToggleType(type.candidateTag)}
+                />
+                <span className="min-w-0 flex-1 text-base font-medium">
                   {type.label}
                 </span>
-                <span className="shrink-0 text-[11px] font-medium text-slate-400">
+                <span className="shrink-0 text-xs font-medium text-slate-400">
                   {type.candidateTag}
                 </span>
-              </label>
+              </Label>
             ))}
           </div>
         </section>
       </div>
 
       <div className="border-t border-slate-200/90 bg-white/95 p-4 backdrop-blur-xl">
-        <p className="mb-2 text-[14px] font-medium text-slate-500">
+        <p className="mb-2 text-sm font-medium text-slate-500">
           Ready to run extraction.
         </p>
-        <Button className="w-full rounded-xl bg-slate-900 py-6 text-[17px] font-semibold text-white hover:bg-slate-800">
+        <Button className="w-full rounded-xl bg-slate-900 py-6 text-lg font-semibold text-white hover:bg-slate-800">
           Re-Extract
         </Button>
       </div>
diff --git a/apps/website/app/(extract)/extract-nodes/page.tsx b/apps/website/app/(extract)/extract-nodes/page.tsx
@@ -1,10 +1,38 @@
+"use client";
+
+import { useCallback, useState } from "react";
 import { MainContent } from "./components/MainContent";
 import { Sidebar } from "./components/Sidebar";
 
 const ExtractNodesPage = (): React.ReactElement => {
+  const [pdfFile, setPdfFile] = useState<File | null>(null);
+  const [researchQuestion, setResearchQuestion] = useState("");
+  const [selectedTypes, setSelectedTypes] = useState(
+    () => new Set(["#evd-candidate", "#clm-candidate"]),
+  );
+
+  const toggleType = useCallback((candidateTag: string) => {
+    setSelectedTypes((prev) => {
+      const next = new Set(prev);
+      if (next.has(candidateTag)) {
+        next.delete(candidateTag);
+      } else {
+        next.add(candidateTag);
+      }
+      return next;
+    });
+  }, []);
+
   return (
     <div className="flex h-full w-full flex-1 flex-col gap-4 p-4 lg:flex-row lg:gap-5 lg:p-5">
-      <Sidebar />
+      <Sidebar
+        pdfFile={pdfFile}
+        onFileSelect={setPdfFile}
+        researchQuestion={researchQuestion}
+        onResearchQuestionChange={setResearchQuestion}
+        selectedTypes={selectedTypes}
+        onToggleType={toggleType}
+      />
       <MainContent />
     </div>
   );
diff --git a/apps/website/app/types/extraction.ts b/apps/website/app/types/extraction.ts
@@ -57,3 +57,48 @@ export const EXTRACTION_RESULT_JSON_SCHEMA: Record<string, unknown> = {
 export type ExtractionResponse =
   | { success: true; data: ExtractionResult }
   | { success: false; error: string };
+
+export type NodeTypeDefinition = {
+  label: string;
+  definition: string;
+  candidateTag: string;
+  color?: string;
+};
+
+export const NODE_TYPE_DEFINITIONS: NodeTypeDefinition[] = [
+  {
+    label: "Evidence",
+    definition:
+      "A specific empirical observation from a particular study. One distinct statistical test, measurement, or analytical finding. Past tense. Includes observable, model system, method.",
+    candidateTag: "#evd-candidate",
+    color: "#DB134A",
+  },
+  {
+    label: "Claim",
+    definition:
+      "An atomic, generalized assertion about the world that proposes to answer a research question. Goes beyond data to state what it means. Specific enough to test or argue against.",
+    candidateTag: "#clm-candidate",
+    color: "#7DA13E",
+  },
+  {
+    label: "Question",
+    definition:
+      "A research question — explicitly stated or implied by a gap in the literature. Open-ended, answerable by empirical evidence.",
+    candidateTag: "#que-candidate",
+    color: "#99890E",
+  },
+  {
+    label: "Pattern",
+    definition:
+      "A conceptual class — a theoretical object, heuristic, design pattern, or methodological approach — abstracted from specific implementations.",
+    candidateTag: "#ptn-candidate",
+    color: "#E040FB",
+  },
+  {
+    label: "Artifact",
+    definition:
+      "A specific concrete system, tool, standard, dataset, or protocol that instantiates one or more patterns.",
+    candidateTag: "#art-candidate",
+    color: "#67C23A",
+  },
+];
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/packages/ui/src/components/ui/label.tsx b/packages/ui/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
