webui: Add links between Datasets and Prompts

sparticleinc · Oct 10, 2023 · a264792 · a264792
1 parent 211c869
commit a264792
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git 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
@@ -11,13 +11,16 @@ 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';
 
 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
@@ -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
@@ -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);