Skip to content

Commit

Permalink
feat(JAQPOT-338): create charts for pbpk models (#67)
Browse files Browse the repository at this point in the history 
* feat(JAQPOT-338): create charts for pbpk models

* fix: improve colors
  • Loading branch information
@alarv
alarv authored Oct 24, 2024
1 parent 9ff5ffd commit 5fdf615
Show file tree
Hide file tree
Showing 4 changed files with 275 additions and 106 deletions.
15 changes: 10 additions & 5 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
"react-hot-toast": "^2.4.1",
"react-markdown": "^9.0.1",
"react-multi-email": "^1.0.23",
"recharts": "^2.12.7",
"recharts": "^2.13.0",
"remark-gfm": "^4.0.0",
"sharp": "^0.33.4",
"swr": "^2.2.5"
Expand Down
212 changes: 112 additions & 100 deletions src/app/dashboard/models/[modelId]/components/DatasetResults.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ import { getKeyValue, useDisclosure } from '@nextui-org/react';
import DoaTableCell from '@/app/dashboard/models/[modelId]/components/DoaTableCell';
import FeatureEditModal from '@/app/dashboard/models/[modelId]/components/FeatureEditModal';
import DoaModal from '@/app/dashboard/models/[modelId]/components/DoaModal';
import { Tab, Tabs } from '@nextui-org/tabs';
import PBPKPlots from '@/app/dashboard/models/[modelId]/components/PBPKPlots';

const log = logger.child({ module: 'dataset' });

Expand Down Expand Up @@ -136,107 +138,117 @@ export default function DatasetResults({
const tableRows = resultTableData.rows;

return (
<div className="mb-20 mt-5 flex flex-col gap-4">
{dataset?.status === 'FAILURE' && model.isAdmin && (
<div className="max-w-xl">
<Accordion>
<AccordionItem
key="1"
aria-label="Accordion 1"
subtitle="You can only see this if you are a nerd"
title="Data for nerds"
startContent={<BugAntIcon className="size-6" />}
>
<p className="text-sm">
legacy prediction service: {model.legacyPredictionService}
</p>
<p className="text-sm">
Failure reason: {dataset?.failureReason}
</p>
</AccordionItem>
</Accordion>
</div>
)}
<h2 className="text-2xl font-bold leading-7 sm:text-3xl sm:tracking-tight">
Result
</h2>
<div>
<Link
href={`/dashboard/models/${model.id}/results/${datasetId}`}
isExternal
showAnchorIcon
className="mr-2"
>
ID {datasetId}
</Link>
{getDatasetStatusNode(dataset)}
</div>
{!isLoaded && (
<div className="flex w-full flex-col gap-2">
<Skeleton className="h-3 w-3/5 rounded-lg" />
<Skeleton className="h-3 w-4/5 rounded-lg" />
<Skeleton className="h-3 w-2/5 rounded-lg" />
<Skeleton className="w-5/5 h-3 rounded-lg" />
</div>
)}
{isLoaded && dataset?.status === 'SUCCESS' && (
<>
<div>
<Button
color="primary"
startContent={<ArrowDownTrayIcon className="size-6" />}
className="my-2"
onPress={() => downloadResultsCSV(model)}
>
Export CSV
</Button>
<div className="mb-20 mt-5">
<Tabs>
<Tab key="result" title="Result">
<div className="flex flex-col gap-4">
{dataset?.status === 'FAILURE' && model.isAdmin && (
<div className="max-w-xl">
<Accordion>
<AccordionItem
key="1"
aria-label="Accordion 1"
subtitle="You can only see this if you are a nerd"
title="Data for nerds"
startContent={<BugAntIcon className="size-6" />}
>
<p className="text-sm">
legacy prediction service: {model.legacyPredictionService}
</p>
<p className="text-sm">
Failure reason: {dataset?.failureReason}
</p>
</AccordionItem>
</Accordion>
</div>
)}
<div>
<Link
href={`/dashboard/models/${model.id}/results/${datasetId}`}
isExternal
showAnchorIcon
className="mr-2"
>
ID {datasetId}
</Link>
{getDatasetStatusNode(dataset)}
</div>
{!isLoaded && (
<div className="flex w-full flex-col gap-2">
<Skeleton className="h-3 w-3/5 rounded-lg" />
<Skeleton className="h-3 w-4/5 rounded-lg" />
<Skeleton className="h-3 w-2/5 rounded-lg" />
<Skeleton className="w-5/5 h-3 rounded-lg" />
</div>
)}
{isLoaded && dataset?.status === 'SUCCESS' && (
<>
<div>
<Button
color="primary"
startContent={<ArrowDownTrayIcon className="size-6" />}
className="my-2"
onPress={() => downloadResultsCSV(model)}
>
Export CSV
</Button>
</div>
<Table aria-label="Prediction table" className="mb-6">
<TableHeader columns={tableHeaders}>
{(column) => (
<TableColumn key={column.key}>{column.label}</TableColumn>
)}
</TableHeader>

<TableBody
items={tableRows}
loadingState={loadingState}
emptyContent={'No results to display.'}
>
{(item) => (
<TableRow key={item.key}>
{(columnKey) => {
if (columnKey === 'doa') {
return (
<TableCell>
<DoaTableCell
value={getKeyValue(item, columnKey)}
onPress={() => {
setSelectedRow(item);
onDoaModalOpen();
}}
/>
</TableCell>
);
}
return (
<TableCell>
{getKeyValue(item, columnKey)}
</TableCell>
);
}}
</TableRow>
)}
</TableBody>
</Table>
</>
)}

{selectedRow && (
<DoaModal
doaDetails={selectedRow.doaDetails}
isOpen={isDoaModalOpen}
onOpenChange={onDoaModalChange}
/>
)}
</div>
<Table aria-label="Prediction table" className="mb-6">
<TableHeader columns={tableHeaders}>
{(column) => (
<TableColumn key={column.key}>{column.label}</TableColumn>
)}
</TableHeader>

<TableBody
items={tableRows}
loadingState={loadingState}
emptyContent={'No results to display.'}
>
{(item) => (
<TableRow key={item.key}>
{(columnKey) => {
if (columnKey === 'doa') {
return (
<TableCell>
<DoaTableCell
value={getKeyValue(item, columnKey)}
onPress={() => {
setSelectedRow(item);
onDoaModalOpen();
}}
/>
</TableCell>
);
}
return (
<TableCell>{getKeyValue(item, columnKey)}</TableCell>
);
}}
</TableRow>
)}
</TableBody>
</Table>
</>
)}

{selectedRow && (
<DoaModal
doaDetails={selectedRow.doaDetails}
isOpen={isDoaModalOpen}
onOpenChange={onDoaModalChange}
/>
)}
</Tab>
{model.type === 'R_PBPK' && dataset && dataset.status === 'SUCCESS' && (
<Tab key="plots" title="Plots">
<PBPKPlots model={model} dataset={dataset} />
</Tab>
)}
</Tabs>
</div>
);
}
Loading

0 comments on commit 5fdf615

Please sign in to comment.