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

basic table with no info

Browse Source
This commit is contained in:
Kyle Corbitt
2023-06-22 08:05:22 -07:00
parent 0f3c381e1d
commit 788911898b
10 changed files with 227 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/OutputsTable/index.tsx Normal file
View File

@@ -0,0 +1,64 @@
import { MRT_ColumnDef, MantineReactTable } from "mantine-react-table";
import { useMemo } from "react";
import { RouterOutputs, api } from "~/utils/api";
type CellData = {
variant: NonNullable<RouterOutputs["promptVariants"]["list"]>[0];
scenario: NonNullable<RouterOutputs["scenarios"]["list"]>[0];
};
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 });
const variants = api.promptVariants.list.useQuery({ experimentId: experimentId });
const scenarios = api.scenarios.list.useQuery({ experimentId: experimentId });
const columns = useMemo<MRT_ColumnDef<TableRow>[]>(
() => [
{
id: "scenario",
header: "Scenario",
Cell: ({ row }) => {
return <div>{JSON.stringify(row.original.scenario.variableValues)}</div>;
},
},
...(variants.data?.map(
(variant): MRT_ColumnDef<TableRow> => ({
id: variant.id,
header: variant.label,
Cell: ({ row }) => {
const cellData = row.original[variant.id];
return (
<div>
{row.original.scenario.id} | {variant.id}
</div>
);
},
})
) ?? []),
],
[variants.data]
);
const tableData = useMemo(
() =>
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 <div>OutputsTable</div>;
}

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

@@ -1,5 +1,5 @@
import { useState } from "react";
import { createStyles, Navbar, Group, Code, getStylesRef, rem } from "@mantine/core";
import { createStyles, Navbar, Group, Code, getStylesRef, rem, Box } from "@mantine/core";
import {
IconBellRinging,
IconFingerprint,
@@ -11,6 +11,7 @@ import {
IconSwitchHorizontal,
IconLogout,
} from "@tabler/icons-react";
import Head from "next/head";
// import { MantineLogo } from '@mantine/ds';
const useStyles = createStyles((theme) => ({
@@ -78,7 +79,7 @@ const data = [
{ link: "", label: "Other Settings", icon: IconSettings },
];
export default function AppNav({ children }: { children: React.ReactNode }) {
export default function AppNav(props: { children: React.ReactNode; title?: string }) {
const { classes, cx } = useStyles();
const [active, setActive] = useState("Billing");
@@ -99,7 +100,10 @@ export default function AppNav({ children }: { children: React.ReactNode }) {
return (
<Group h="100vh">
<Navbar height="100%" width={{ sm: 300 }} p="md">
<Head>
<title>{props.title && `${props.title} | `}Prompt Bench</title>
</Head>
<Navbar height="100%" width={{ sm: 250 }} p="md">
<Navbar.Section grow>
<Group className={classes.header} position="apart">
{/* <MantineLogo size={28} /> */}
@@ -120,7 +124,7 @@ export default function AppNav({ children }: { children: React.ReactNode }) {
</a>
</Navbar.Section>
</Navbar>
{children}
<Box sx={{ flex: 1 }}>{props.children}</Box>
</Group>
);
}

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

@@ -1,9 +1,27 @@
import { Center } from "@mantine/core";
import { useRouter } from "next/router";
import OutputsTable from "~/components/OutputsTable";
import AppNav from "~/components/nav/AppNav";
import { api } from "~/utils/api";
export default function Experiment() {
const router = useRouter();
const experiment = api.experiments.get.useQuery({ id: router.query.id as string });
if (!experiment.data) {
return (
<AppNav title="Experiment not found">
<Center>
<div>Experiment not found 😕</div>
</Center>
</AppNav>
);
}
return (
<AppNav>
<div>test content</div>
<AppNav title={experiment.data.label}>
<OutputsTable experimentId={router.query.id as string} />
</AppNav>
);
}

4
src/server/api/root.router.ts
View File

@@ -1,5 +1,7 @@
import { promptVariantsRouter } from "~/server/api/routers/promptVariants.router";
import { createTRPCRouter } from "~/server/api/trpc";
import { experimentsRouter } from "./routers/experiments.router";
import { scenariosRouter } from "./routers/scenarios.router";
/**
* This is the primary router for your server.
@@ -8,6 +10,8 @@ import { createTRPCRouter } from "~/server/api/trpc";
*/
export const appRouter = createTRPCRouter({
promptVariants: promptVariantsRouter,
experiments: experimentsRouter,
scenarios: scenariosRouter,
});
// export type definition of API

13
src/server/api/routers/experiments.router.ts Normal file
View File

@@ -0,0 +1,13 @@
import { z } from "zod";
import { createTRPCRouter, publicProcedure, protectedProcedure } from "~/server/api/trpc";
import { prisma } from "~/server/db";
export const experimentsRouter = createTRPCRouter({
get: publicProcedure.input(z.object({ id: z.string() })).query(async ({ input }) => {
return await prisma.experiment.findFirst({
where: {
id: input.id,
},
});
}),
});

6
src/server/api/routers/promptVariants.router.ts
View File

@@ -3,15 +3,11 @@ import { createTRPCRouter, publicProcedure, protectedProcedure } from "~/server/
import { prisma } from "~/server/db";
export const promptVariantsRouter = createTRPCRouter({
getAll: publicProcedure.input(z.object({ experimentId: z.string() })).query(async ({ input }) => {
list: publicProcedure.input(z.object({ experimentId: z.string() })).query(async ({ input }) => {
return await prisma.promptVariant.findMany({
where: {
experimentId: input.experimentId,
},
});
}),
getSecretMessage: protectedProcedure.query(() => {
return "you can now see this secret message!";
}),
});

13
src/server/api/routers/scenarios.router.ts Normal file
View File

@@ -0,0 +1,13 @@
import { z } from "zod";
import { createTRPCRouter, publicProcedure, protectedProcedure } from "~/server/api/trpc";
import { prisma } from "~/server/db";
export const scenariosRouter = createTRPCRouter({
list: publicProcedure.input(z.object({ experimentId: z.string() })).query(async ({ input }) => {
return await prisma.testScenario.findMany({
where: {
experimentId: input.experimentId,
},
});
}),
});