From a26479298c060246820ed4d04464aab6bb3664e0 Mon Sep 17 00:00:00 2001
From: Ian Webster <ianw_github@ianww.com>
Date: Tue, 10 Oct 2023 00:03:33 -0700
Subject: [PATCH] webui: Add links between Datasets and Prompts

---
 src/web/nextui/src/app/datasets/DatasetDialog.tsx |  3 +--
 src/web/nextui/src/app/datasets/Datasets.tsx      | 13 ++++++++++++-
 src/web/nextui/src/app/prompts/PromptDialog.tsx   |  3 +--
 src/web/nextui/src/app/prompts/Prompts.tsx        | 13 ++++++++++++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/web/nextui/src/app/datasets/DatasetDialog.tsx b/src/web/nextui/src/app/datasets/DatasetDialog.tsx
index d786f4cbbc6..2c652bfe9f8 100644
--- a/src/web/nextui/src/app/datasets/DatasetDialog.tsx
+++ b/src/web/nextui/src/app/datasets/DatasetDialog.tsx
@@ -59,8 +59,7 @@ export default function DatasetDialog({openDialog, handleClose, testCase}: Datas
             {testCase?.prompts?.slice((page - 1) * rowsPerPage, page * rowsPerPage).sort((a, b) => b.evalId.localeCompare(a.evalId)).map((promptData, index) => (
               <TableRow key={index} hover>
                 <TableCell><Link href={`/eval/?file=${promptData.evalFilepath}`}>{promptData.evalId.slice(0, 6)}</Link></TableCell>
-                {/* TODO(ian): make this a link to the prompt */}
-                <TableCell style={{minWidth: '8em'}}>{promptData.id.slice(0, 6)}</TableCell>
+                <TableCell style={{minWidth: '8em'}}><Link href={`/prompts/?id=${promptData.id}`}>{promptData.id.slice(0, 6)}</Link></TableCell>
                 <TableCell>{promptData.prompt.metrics?.score.toFixed(2) ?? '-'}</TableCell>
                 <TableCell>
                   {
diff --git a/src/web/nextui/src/app/datasets/Datasets.tsx b/src/web/nextui/src/app/datasets/Datasets.tsx
index c11f2c29fe7..8b6f18db95c 100644
--- a/src/web/nextui/src/app/datasets/Datasets.tsx
+++ b/src/web/nextui/src/app/datasets/Datasets.tsx
@@ -11,6 +11,7 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
+import { useSearchParams } from 'next/navigation';
 
 import DatasetDialog from './DatasetDialog';
 import {API_BASE_URL} from '@/constants';
@@ -18,6 +19,8 @@ import {API_BASE_URL} from '@/constants';
 import type {TestCase, TestCasesWithMetadata} from '@/../../../types';
 
 export default function Datasets() {
+  const searchParams = useSearchParams();
+
   const [testCases, setPrompts] = useState<(TestCasesWithMetadata & {recentEvalDate: string})[]>([]);
   const [sortField, setSortField] = useState<string | null>('date');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
@@ -44,7 +47,15 @@ export default function Datasets() {
         });
         setPrompts(sortedData);
       });
-  }, [sortField, sortOrder]);
+
+    const testCaseId = searchParams?.get('id');
+    if (testCaseId) {
+      const testCaseIndex = testCases.findIndex((testCase) => testCase.id.startsWith(testCaseId));
+      if (testCaseIndex !== -1) {
+        handleClickOpen(testCaseIndex);
+      }
+    }
+  }, [sortField, sortOrder, searchParams, testCases]);
 
   const handleClickOpen = (index: number) => {
     setDialogTestCaseIndex(index);
diff --git a/src/web/nextui/src/app/prompts/PromptDialog.tsx b/src/web/nextui/src/app/prompts/PromptDialog.tsx
index 3143678b29f..7d9ecdac48b 100644
--- a/src/web/nextui/src/app/prompts/PromptDialog.tsx
+++ b/src/web/nextui/src/app/prompts/PromptDialog.tsx
@@ -55,8 +55,7 @@ const PromptDialog: React.FC<PromptDialogProps> = ({openDialog, handleClose, sel
                   <TableCell>
                     <Link href={`/eval/?file=${evalData.filePath}`}>{evalData.id.slice(0, 6)}</Link>
                   </TableCell>
-                  {/* TODO(ian): make this a link to the dataset */}
-                  <TableCell>{evalData.datasetId.slice(0, 6)}</TableCell>
+                  <TableCell><Link href={`/datasets/?id=${evalData.datasetId}`}>{evalData.datasetId.slice(0, 6)}</Link></TableCell>
                   <TableCell>{evalData.metrics?.score.toFixed(2) ?? '-'}</TableCell>
                   <TableCell>{passRate}</TableCell>
                   <TableCell>{passCount}</TableCell>
diff --git a/src/web/nextui/src/app/prompts/Prompts.tsx b/src/web/nextui/src/app/prompts/Prompts.tsx
index a80e6ad18b6..d24852ad2df 100644
--- a/src/web/nextui/src/app/prompts/Prompts.tsx
+++ b/src/web/nextui/src/app/prompts/Prompts.tsx
@@ -11,6 +11,7 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
+import { useSearchParams } from 'next/navigation';
 
 import {API_BASE_URL} from '@/constants';
 import PromptDialog from './PromptDialog';
@@ -20,6 +21,8 @@ import type {PromptWithMetadata} from '@/../../../types';
 const MAX_CELL_LENGTH = 500;
 
 export default function Prompts() {
+  const searchParams = useSearchParams();
+
   const [prompts, setPrompts] = useState<(PromptWithMetadata & {recentEvalDate: string})[]>([]);
   const [sortField, setSortField] = useState<string | null>('date');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
@@ -46,7 +49,15 @@ export default function Prompts() {
         });
         setPrompts(sortedData);
       });
-  }, [sortField, sortOrder]);
+
+    const promptId = searchParams?.get('id');
+    if (promptId) {
+      const promptIndex = prompts.findIndex((prompt) => prompt.id.startsWith(promptId));
+      if (promptIndex !== -1) {
+        handleClickOpen(promptIndex);
+      }
+    }
+  }, [sortField, sortOrder, searchParams, prompts]);
 
   const handleClickOpen = (index: number) => {
     setOpenDialog(true);