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 # Next Auth Discord Provider
DISCORD_CLIENT_ID="" DISCORD_CLIENT_ID=""
DISCORD_CLIENT_SECRET="" 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]; scenario: NonNullable<RouterOutputs["scenarios"]["list"]>[0];
} & Record<string, CellData>; } & Record<string, CellData>;
export default function OutputsTable({ experimentId }: { experimentId: string }) { export default function OutputsTable({ experimentId }: { experimentId: string | undefined }) {
const experiment = api.experiments.get.useQuery({ id: experimentId }); 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>[]>( const columns = useMemo<MRT_ColumnDef<TableRow>[]>(
() => [ () => [
{ {
id: "scenario", id: "scenario",
header: "Scenario", header: "Scenario",
enableColumnDragging: false,
size: 200,
Cell: ({ row }) => { Cell: ({ row }) => {
return <div>{JSON.stringify(row.original.scenario.variableValues)}</div>; return <div>{JSON.stringify(row.original.scenario.variableValues)}</div>;
}, },
@@ -31,6 +42,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string })
(variant): MRT_ColumnDef<TableRow> => ({ (variant): MRT_ColumnDef<TableRow> => ({
id: variant.id, id: variant.id,
header: variant.label, header: variant.label,
// size: 300,
Cell: ({ row }) => { Cell: ({ row }) => {
const cellData = row.original[variant.id]; const cellData = row.original[variant.id];
return ( return (
@@ -50,15 +62,29 @@ export default function OutputsTable({ experimentId }: { experimentId: string })
scenarios.data?.map((scenario) => { scenarios.data?.map((scenario) => {
return { return {
scenario, scenario,
// ...variants.data?.reduce(
// (acc, variant) => ({ ...acc, [variant.id]: { variant, scenario } }),
// {} as Record<string, CellData>
// ),
} as TableRow; } as TableRow;
}) ?? [], }) ?? [],
[variants.data, scenarios.data] [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>; // return <div>OutputsTable</div>;
} }

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

@@ -60,10 +60,10 @@ const useStyles = createStyles((theme) => ({
linkActive: { linkActive: {
"&, &:hover": { "&, &:hover": {
backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background, backgroundColor: theme.fn.variant({ variant: "dark", color: theme.primaryColor }).background,
color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color, color: theme.fn.variant({ variant: "dark", color: theme.primaryColor }).color,
[`& .${getStylesRef("icon")}`]: { [`& .${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 ( return (
<Group h="100vh"> <Box mih="100vh" sx={{ display: "flex" }}>
<Head> <Head>
<title>{props.title && `${props.title} | `}Prompt Bench</title> <title>{props.title && `${props.title} | `}Prompt Bench</title>
</Head> </Head>
<Navbar height="100%" width={{ sm: 250 }} p="md"> <Navbar height="100vh" width={{ sm: 250 }} p="md" bg="gray.1">
<Navbar.Section grow> <Navbar.Section grow>
<Group className={classes.header} position="apart"> <Group className={classes.header} position="apart">
{/* <MantineLogo size={28} /> */}
<Code sx={{ fontWeight: 700 }}>v3.1.2</Code> <Code sx={{ fontWeight: 700 }}>v3.1.2</Code>
</Group> </Group>
{links} {links}
@@ -125,6 +124,6 @@ export default function AppNav(props: { children: React.ReactNode; title?: strin
</Navbar.Section> </Navbar.Section>
</Navbar> </Navbar>
<Box sx={{ flex: 1 }}>{props.children}</Box> <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 { useRouter } from "next/router";
import OutputsTable from "~/components/OutputsTable"; import OutputsTable from "~/components/OutputsTable";
import AppNav from "~/components/nav/AppNav"; import AppNav from "~/components/nav/AppNav";
@@ -7,7 +7,11 @@ import { api } from "~/utils/api";
export default function Experiment() { export default function Experiment() {
const router = useRouter(); 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) { if (!experiment.data) {
return ( return (
@@ -21,7 +25,9 @@ export default function Experiment() {
return ( return (
<AppNav title={experiment.data.label}> <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> </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;
};