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

Update colors throughout app

Browse Source
This commit is contained in:
David Corbitt
2023-08-12 02:32:09 -07:00
parent ce6936f753
commit 723c0f7505
11 changed files with 84 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/src/components/OutputsTable/ScenarioRow.tsx
View File

@@ -10,6 +10,7 @@ const ScenarioRow = (props: {
variants: PromptVariant[];
canHide: boolean;
rowStart: number;
isLast: boolean;
}) => {
const [isHovered, setIsHovered] = useState(false);
@@ -21,10 +22,12 @@ const ScenarioRow = (props: {
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
sx={isHovered ? highlightStyle : undefined}
bgColor="white"
borderLeftWidth={1}
{...borders}
rowStart={props.rowStart}
colStart={1}
borderBottomLeftRadius={props.isLast ? 8 : 0}
>
<ScenarioEditor scenario={props.scenario} hovered={isHovered} canHide={props.canHide} />
</GridItem>
@@ -34,8 +37,10 @@ const ScenarioRow = (props: {
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
sx={isHovered ? highlightStyle : undefined}
bgColor="white"
rowStart={props.rowStart}
colStart={i + 2}
borderBottomRightRadius={props.isLast && i === props.variants.length - 1 ? 8 : 0}
{...borders}
>
<OutputCell key={variant.id} scenario={props.scenario} variant={variant} />

15
app/src/components/OutputsTable/ScenariosHeader.tsx
View File

@@ -48,7 +48,20 @@ export const ScenariosHeader = () => {
);
return (
<HStack w="100%" pb={cellPadding.y} pt={0} align="center" spacing={0}>
<HStack
w="100%"
py={cellPadding.y}
px={cellPadding.x}
align="center"
spacing={0}
borderTopRightRadius={8}
borderTopLeftRadius={8}
bgColor="white"
borderWidth={1}
borderBottomWidth={0}
borderColor="gray.300"
mt={8}
>
<Text fontSize={16} fontWeight="bold">
Scenarios ({scenarios.data?.count})
</Text>

14
app/src/components/OutputsTable/index.tsx
View File

@@ -53,20 +53,29 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
colStart: i + 2,
borderLeftWidth: i === 0 ? 1 : 0,
marginLeft: i === 0 ? "-1px" : 0,
backgroundColor: "gray.100",
backgroundColor: "white",
};
const isFirst = i === 0;
const isLast = i === variants.data.length - 1;
return (
<Fragment key={variant.uiId}>
<VariantHeader
variant={variant}
canHide={variants.data.length > 1}
rowStart={1}
borderTopLeftRadius={isFirst ? 8 : 0}
borderTopRightRadius={isLast ? 8 : 0}
{...sharedProps}
/>
<GridItem rowStart={2} {...sharedProps}>
<VariantEditor variant={variant} />
</GridItem>
<GridItem rowStart={3} {...sharedProps}>
<GridItem
rowStart={3}
{...sharedProps}
borderBottomLeftRadius={isFirst ? 8 : 0}
borderBottomRightRadius={isLast ? 8 : 0}
>
<VariantStats variant={variant} />
</GridItem>
</Fragment>
@@ -90,6 +99,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
scenario={scenario}
variants={variants.data}
canHide={visibleScenariosCount > 1}
isLast={i === visibleScenariosCount - 1}
/>
))}
<GridItem

5
app/src/components/Paginator.tsx
View File

@@ -54,6 +54,7 @@ const Paginator = ({
value={pageSize}
onChange={(e) => updatePageSize(parseInt(e.target.value))}
w={20}
backgroundColor="white"
>
{pageSizeOptions.map((option) => (
<option key={option} value={option}>
@@ -76,6 +77,7 @@ const Paginator = ({
isDisabled={page === 1}
aria-label="Go to first page"
icon={<Icon as={FiChevronsLeft} boxSize={5} strokeWidth={1.5} />}
bgColor="white"
/>
<IconButton
variant="outline"
@@ -84,6 +86,7 @@ const Paginator = ({
isDisabled={page === 1}
aria-label="Previous page"
icon={<Icon as={FiChevronLeft} boxSize={5} strokeWidth={1.5} />}
bgColor="white"
/>
{condense && (
<Text>
@@ -97,6 +100,7 @@ const Paginator = ({
isDisabled={page === lastPage}
aria-label="Next page"
icon={<Icon as={FiChevronRight} boxSize={5} strokeWidth={1.5} />}
bgColor="white"
/>
<IconButton
variant="outline"
@@ -105,6 +109,7 @@ const Paginator = ({
isDisabled={page === lastPage}
aria-label="Go to last page"
icon={<Icon as={FiChevronsRight} boxSize={5} strokeWidth={1.5} />}
bgColor="white"
/>
</HStack>
</HStack>

6
app/src/components/VariantHeader/VariantHeader.tsx
View File

@@ -75,7 +75,7 @@ export default function VariantHeader(
padding={0}
sx={{
position: "sticky",
top: "0",
top: "-2",
// Ensure that the menu always appears above the sticky header of other variants
zIndex: menuOpen ? "dropdown" : 10,
}}
@@ -84,6 +84,7 @@ export default function VariantHeader(
>
<HStack
spacing={2}
py={2}
alignItems="flex-start"
minH={headerMinHeight}
draggable={!isInputHovered}
@@ -102,7 +103,8 @@ export default function VariantHeader(
setIsDragTarget(false);
}}
onDrop={onReorder}
backgroundColor={isDragTarget ? "gray.200" : "gray.100"}
backgroundColor={isDragTarget ? "gray.200" : "white"}
borderTopLeftRadius={gridItemProps.borderTopLeftRadius}
h="full"
>
<Icon

4
app/src/components/dashboard/LoggedCallsTable.tsx
View File

@@ -9,11 +9,11 @@ export default function LoggedCallsTable() {
const { data: loggedCalls } = useLoggedCalls();
return (
<Card variant="outline" width="100%" overflow="hidden">
<Card width="100%" overflow="hidden">
<CardHeader>
<HStack justifyContent="space-between">
<Heading as="h3" size="sm">
Logged Calls
Request Logs
</Heading>
<Button as={Link} href="/request-logs" variant="ghost" colorScheme="blue">
<Text>View All</Text>

47
app/src/components/experiments/ExperimentCard.tsx
View File

@@ -7,6 +7,7 @@ import {
Spinner,
AspectRatio,
SkeletonText,
Card,
} from "@chakra-ui/react";
import { RiFlaskLine } from "react-icons/ri";
import { formatTimePast } from "~/utils/dayjs";
@@ -29,17 +30,21 @@ type ExperimentData = {
export const ExperimentCard = ({ exp }: { exp: ExperimentData }) => {
return (
<AspectRatio ratio={1.2} w="full">
<VStack
as={Link}
href={{ pathname: "/experiments/[id]", query: { id: exp.id } }}
bg="gray.50"
<Card
w="full"
h="full"
cursor="pointer"
p={4}
bg="white"
borderRadius={4}
_hover={{ bg: "gray.100" }}
transition="background 0.2s"
cursor="pointer"
borderColor="gray.200"
borderWidth={1}
p={4}
>
<VStack
as={Link}
w="full"
h="full"
href={{ pathname: "/experiments/[id]", query: { id: exp.id } }}
justify="space-between"
>
<HStack w="full" color="gray.700" justify="center">
@@ -57,7 +62,7 @@ export const ExperimentCard = ({ exp }: { exp: ExperimentData }) => {
<Text flex={1}>Updated {formatTimePast(exp.updatedAt)}</Text>
</HStack>
</VStack>
</AspectRatio>
</Card>
);
};
@@ -89,30 +94,30 @@ export const NewExperimentCard = () => {
}, [createMutation, router, selectedProjectId]);
return (
<AspectRatio ratio={1.2} w="full">
<VStack
align="center"
justify="center"
_hover={{ cursor: "pointer", bg: "gray.50" }}
transition="background 0.2s"
<Card
w="full"
h="full"
cursor="pointer"
borderColor="gray.200"
borderWidth={1}
p={4}
onClick={createExperiment}
bg="white"
borderRadius={4}
_hover={{ bg: "gray.100" }}
transition="background 0.2s"
aspectRatio={1.2}
>
<VStack align="center" justify="center" w="full" h="full" p={4} onClick={createExperiment}>
<Icon as={isLoading ? Spinner : BsPlusSquare} boxSize={8} />
<Text display={{ base: "none", md: "block" }} ml={2}>
New Experiment
</Text>
</VStack>
</AspectRatio>
</Card>
);
};
export const ExperimentCardSkeleton = () => (
<AspectRatio ratio={1.2} w="full">
<VStack align="center" borderColor="gray.200" borderWidth={1} p={4} bg="gray.50">
<VStack align="center" borderColor="gray.200" borderWidth={1} p={4} bg="white">
<SkeletonText noOfLines={1} w="80%" />
<SkeletonText noOfLines={2} w="60%" />
<SkeletonText noOfLines={1} w="80%" />

2
app/src/components/requestLogs/LoggedCallsTable.tsx
View File

@@ -8,7 +8,7 @@ export default function LoggedCallsTable() {
const { data: loggedCalls } = useLoggedCalls();
return (
<Card variant="outline" width="100%" overflow="hidden">
<Card width="100%" overflow="hidden">
<Table>
<TableHeader />
<Tbody>

26
app/src/pages/dashboard/index.tsx
View File

@@ -15,14 +15,10 @@ import {
Tr,
Td,
Divider,
Breadcrumb,
BreadcrumbItem,
} from "@chakra-ui/react";
import { Ban, DollarSign, Hash } from "lucide-react";
import AppShell from "~/components/nav/AppShell";
import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
import { useSelectedProject } from "~/utils/hooks";
import { api } from "~/utils/api";
import LoggedCallsTable from "~/components/dashboard/LoggedCallsTable";
@@ -38,24 +34,14 @@ export default function Dashboard() {
return (
<AppShell title="Dashboard" requireAuth>
<PageHeaderContainer>
<Breadcrumb>
<BreadcrumbItem>
<ProjectBreadcrumbContents />
</BreadcrumbItem>
<BreadcrumbItem isCurrentPage>
<Text>Dashboard</Text>
</BreadcrumbItem>
</Breadcrumb>
</PageHeaderContainer>
<VStack px={8} py={4} alignItems="flex-start" spacing={4}>
<VStack px={8} py={8} alignItems="flex-start" spacing={4}>
<Text fontSize="2xl" fontWeight="bold">
{selectedProject?.name}
Dashboard
</Text>
<Divider />
<VStack margin="auto" spacing={4} align="stretch" w="full">
<HStack gap={4} align="start">
<Card variant="outline" flex={1}>
<Card flex={1}>
<CardHeader>
<Heading as="h3" size="sm">
Usage Statistics
@@ -66,7 +52,7 @@ export default function Dashboard() {
</CardBody>
</Card>
<VStack spacing="4" width="300px" align="stretch">
<Card variant="outline">
<Card>
<CardBody>
<Stat>
<HStack>
@@ -79,7 +65,7 @@ export default function Dashboard() {
</Stat>
</CardBody>
</Card>
<Card variant="outline">
<Card>
<CardBody>
<Stat>
<HStack>
@@ -94,7 +80,7 @@ export default function Dashboard() {
</Stat>
</CardBody>
</Card>
<Card variant="outline" overflow="hidden">
<Card overflow="hidden">
<Stat>
<CardHeader>
<HStack>

1
app/src/pages/project/settings/index.tsx
View File

@@ -80,6 +80,7 @@ export default function Settings() {
borderWidth={1}
borderRadius={4}
borderColor="gray.300"
bgColor="white"
p={6}
spacing={6}
>

20
app/src/pages/request-logs/index.tsx
View File

@@ -1,25 +1,17 @@
import { Text, VStack, Breadcrumb, BreadcrumbItem } from "@chakra-ui/react";
import { Text, VStack, Divider } from "@chakra-ui/react";
import AppShell from "~/components/nav/AppShell";
import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
import LoggedCallTable from "~/components/requestLogs/LoggedCallsTable";
import LoggedCallsPaginator from "~/components/requestLogs/LoggedCallsPaginator";
export default function LoggedCalls() {
return (
<AppShell title="Request Logs" requireAuth>
<PageHeaderContainer>
<Breadcrumb>
<BreadcrumbItem>
<ProjectBreadcrumbContents />
</BreadcrumbItem>
<BreadcrumbItem isCurrentPage>
<Text>Request Logs</Text>
</BreadcrumbItem>
</Breadcrumb>
</PageHeaderContainer>
<VStack px={8} py={4} alignItems="flex-start" spacing={4}>
<VStack px={8} py={8} alignItems="flex-start" spacing={4} w="full">
<Text fontSize="2xl" fontWeight="bold">
Request Logs
</Text>
<Divider />
<LoggedCallTable />
<LoggedCallsPaginator />
</VStack>