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

can add scenarios and it mostly works

Browse Source
This commit is contained in:
Kyle Corbitt
2023-06-23 20:00:46 -07:00
parent c497b74208
commit 8534477236
13 changed files with 278 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,14 +1,11 @@
import { useMemo } from "react";
import { RouterOutputs, api } from "~/utils/api";
import { type PromptVariant } from "./types";
import VariantHeader from "./VariantHeader";
import OutputCell from "./OutputCell";
import ScenarioHeader from "./ScenarioHeader";
import React from "react";
import { Box, Heading } from "@chakra-ui/react";
const cellPaddingX = 4;
const cellPaddingY = 2;
import { Box, Grid, GridItem, Heading } from "@chakra-ui/react";
import NewScenarioButton from "./NewScenarioButton";
export default function OutputsTable({ experimentId }: { experimentId: string | undefined }) {
const variants = api.promptVariants.list.useQuery(
@@ -24,37 +21,48 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
if (!variants.data || !scenarios.data) return null;
return (
<Box p={4}>
<div
style={{
display: "grid",
gridTemplateColumns: `200px repeat(${variants.data.length}, minmax(300px, 1fr))`,
overflowX: "auto",
}}
>
<Box px={cellPaddingX} py={cellPaddingY} display="flex" sx={{}}>
<Heading size="md" fontWeight="bold">
Scenario
</Heading>
</Box>
{variants.data.map((variant) => (
<Box key={variant.uiId} px={cellPaddingX} py={cellPaddingY}>
<VariantHeader key={variant.uiId} variant={variant} />
</Box>
))}
{scenarios.data.map((scenario) => (
<React.Fragment key={scenario.uiId}>
<Box px={cellPaddingX} py={cellPaddingY}>
<ScenarioHeader scenario={scenario} />
</Box>
{variants.data.map((variant) => (
<Box key={variant.id} px={cellPaddingX} py={cellPaddingY}>
<OutputCell key={variant.id} scenario={scenario} variant={variant} />
</Box>
))}
</React.Fragment>
))}
</div>
</Box>
<Grid
p={4}
display="grid"
gridTemplateColumns={`200px repeat(${variants.data.length}, minmax(300px, 1fr))`}
overflowX="auto"
sx={{
"> *": {
borderColor: "gray.300",
borderBottomWidth: 1,
paddingX: 4,
paddingY: 2,
},
"> *:last-child": {
borderRightWidth: 0,
},
}}
>
<GridItem display="flex" alignItems="flex-end">
<Heading size="md" fontWeight="bold">
Scenario
</Heading>
</GridItem>
{variants.data.map((variant) => (
<GridItem key={variant.uiId}>
<VariantHeader key={variant.uiId} variant={variant} />
</GridItem>
))}
{scenarios.data.map((scenario) => (
<React.Fragment key={scenario.uiId}>
<GridItem>
<ScenarioHeader scenario={scenario} />
</GridItem>
{variants.data.map((variant) => (
<GridItem key={variant.id}>
<OutputCell key={variant.id} scenario={scenario} variant={variant} />
</GridItem>
))}
</React.Fragment>
))}
<GridItem borderBottomWidth={0} w="100%" colSpan={variants.data.length + 1} px={0} py={0}>
<NewScenarioButton />
</GridItem>
</Grid>
);
}