alihan/OpenPipe-llm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some styling improvements

Browse Source
This commit is contained in:
Kyle Corbitt
2023-06-22 11:48:39 -07:00
parent 788911898b
commit 0fa3af4e9f
5 changed files with 65 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.env.example
View File

@@ -23,3 +23,6 @@ NEXTAUTH_URL="http://localhost:3000"
# Next Auth Discord Provider
DISCORD_CLIENT_ID=""
DISCORD_CLIENT_SECRET=""
NODE_ENV="development"
OPENAI_API_KEY=""

44
src/components/OutputsTable/index.tsx
View File

@@ -11,18 +11,29 @@ type TableRow = {
scenario: NonNullable<RouterOutputs["scenarios"]["list"]>[0];
} & Record<string, CellData>;
export default function OutputsTable({ experimentId }: { experimentId: string }) {
const experiment = api.experiments.get.useQuery({ id: experimentId });
export default function OutputsTable({ experimentId }: { experimentId: string | undefined }) {
const experiment = api.experiments.get.useQuery(
{ id: experimentId as string },
{ enabled: !!experimentId }
);
const variants = api.promptVariants.list.useQuery({ experimentId: experimentId });
const variants = api.promptVariants.list.useQuery(
{ experimentId: experimentId as string },
{ enabled: !!experimentId }
);
const scenarios = api.scenarios.list.useQuery({ experimentId: experimentId });
const scenarios = api.scenarios.list.useQuery(
{ experimentId: experimentId as string },
{ enabled: !!experimentId }
);
const columns = useMemo<MRT_ColumnDef<TableRow>[]>(
() => [
{
id: "scenario",
header: "Scenario",
enableColumnDragging: false,
size: 200,
Cell: ({ row }) => {
return <div>{JSON.stringify(row.original.scenario.variableValues)}</div>;
},
@@ -31,6 +42,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string })
(variant): MRT_ColumnDef<TableRow> => ({
id: variant.id,
header: variant.label,
// size: 300,
Cell: ({ row }) => {
const cellData = row.original[variant.id];
return (
@@ -50,15 +62,29 @@ export default function OutputsTable({ experimentId }: { experimentId: string })
scenarios.data?.map((scenario) => {
return {
scenario,
// ...variants.data?.reduce(
// (acc, variant) => ({ ...acc, [variant.id]: { variant, scenario } }),
// {} as Record<string, CellData>
// ),
} as TableRow;
}) ?? [],
[variants.data, scenarios.data]
);
return <MantineReactTable columns={columns} data={tableData} enableFullScreenToggle={false} />;
return (
<MantineReactTable
mantinePaperProps={{
withBorder: false,
shadow: "none",
}}
columns={columns}
data={tableData}
enableBottomToolbar={false}
enableTopToolbar={false}
enableColumnDragging
enableGlobalFilter={false}
enableFilters={false}
enableDensityToggle={false}
enableFullScreenToggle={false}
enableHiding={false}
enableRowDragging
/>
);
// return <div>OutputsTable</div>;
}

13
src/components/nav/AppNav.tsx
View File

@@ -60,10 +60,10 @@ const useStyles = createStyles((theme) => ({
linkActive: {
"&, &:hover": {
backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color,
backgroundColor: theme.fn.variant({ variant: "dark", color: theme.primaryColor }).background,
color: theme.fn.variant({ variant: "dark", color: theme.primaryColor }).color,
[`& .${getStylesRef("icon")}`]: {
color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color,
color: theme.fn.variant({ variant: "dark", color: theme.primaryColor }).color,
},
},
},
@@ -99,14 +99,13 @@ export default function AppNav(props: { children: React.ReactNode; title?: strin
));
return (
<Group h="100vh">
<Box mih="100vh" sx={{ display: "flex" }}>
<Head>
<title>{props.title && `${props.title} | `}Prompt Bench</title>
</Head>
<Navbar height="100%" width={{ sm: 250 }} p="md">
<Navbar height="100vh" width={{ sm: 250 }} p="md" bg="gray.1">
<Navbar.Section grow>
<Group className={classes.header} position="apart">
{/* <MantineLogo size={28} /> */}
<Code sx={{ fontWeight: 700 }}>v3.1.2</Code>
</Group>
{links}
@@ -125,6 +124,6 @@ export default function AppNav(props: { children: React.ReactNode; title?: strin
</Navbar.Section>
</Navbar>
<Box sx={{ flex: 1 }}>{props.children}</Box>
</Group>
</Box>
);
}

12
src/pages/experiments/[id].tsx
View File

@@ -1,4 +1,4 @@
import { Center } from "@mantine/core";
import { Box, Center } from "@mantine/core";
import { useRouter } from "next/router";
import OutputsTable from "~/components/OutputsTable";
import AppNav from "~/components/nav/AppNav";
@@ -7,7 +7,11 @@ import { api } from "~/utils/api";
export default function Experiment() {
const router = useRouter();
const experiment = api.experiments.get.useQuery({ id: router.query.id as string });
console.log(router.query.id);
const experiment = api.experiments.get.useQuery(
{ id: router.query.id as string },
{ enabled: !!router.query.id }
);
if (!experiment.data) {
return (
@@ -21,7 +25,9 @@ export default function Experiment() {
return (
<AppNav title={experiment.data.label}>
<OutputsTable experimentId={router.query.id as string} />
<Box sx={{ minHeight: "100vh" }}>
<OutputsTable experimentId={router.query.id as string | undefined} />
</Box>
</AppNav>
);
}

12
src/utils/hooks.ts Normal file
View File

@@ -0,0 +1,12 @@
import { useRouter } from "next/router";
import { api } from "~/utils/api";
export const useExperiment = () => {
const router = useRouter();
const experiment = api.experiments.get.useQuery(
{ id: router.query.id as string },
{ enabled: !!router.query.id }
);
return experiment;
};