prettifying the ux

2023-06-26 06:26:19 -07:00
parent cde22ac4bf
commit e6fdd2d5c5
13 changed files with 141 additions and 222 deletions
--- a/package.json
+++ b/package.json
@@ -16,8 +16,6 @@
    "@emotion/react": "^11.11.1",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.0",
-    "@fontsource/poppins": "^5.0.3",
-    "@fontsource/roboto": "^5.0.3",
    "@monaco-editor/react": "^4.5.1",
    "@next-auth/prisma-adapter": "^1.0.5",
    "@prisma/client": "^4.14.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,12 +20,6 @@ dependencies:
  '@emotion/styled':
    specifier: ^11.11.0
    version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.6)(react@18.2.0)
-  '@fontsource/poppins':
-    specifier: ^5.0.3
-    version: 5.0.3
-  '@fontsource/roboto':
-    specifier: ^5.0.3
-    version: 5.0.3
  '@monaco-editor/react':
    specifier: ^4.5.1
    version: 4.5.1(monaco-editor@0.39.0)(react-dom@18.2.0)(react@18.2.0)
@@ -1682,14 +1676,6 @@ packages:
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  /@fontsource/poppins@5.0.3:
-    resolution: {integrity: sha512-5lL2vmvmh4zbknTh1nVH9pTWyhYqAlYMHIAnkNhqo5qwMZGlr+coM1dtMwiQHRBgmHAl3ZvJ35Bj0s8cpmXZbg==}
-    dev: false
-
-  /@fontsource/roboto@5.0.3:
-    resolution: {integrity: sha512-jbZDFwEFARDlo8TqG7th/xjhuq87GYfFpFb+uxuy+0Ng1bhRVgBRWlLj8+WIKhCTOr+h4QXbjpybLWFLUirOwQ==}
-    dev: false
-
  /@humanwhocodes/config-array@0.11.10:
    resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
    engines: {node: '>=10.10.0'}
--- a/src/components/OutputsTable/EditableVariantLabel.tsx
+++ b/src/components/OutputsTable/EditableVariantLabel.tsx
@@ -1,40 +0,0 @@
-import { useRef } from "react";
-import { type PromptVariant } from "./types";
-import { api } from "~/utils/api";
-import { useHandledAsyncCallback } from "~/utils/hooks";
-import { Heading } from "@chakra-ui/react";
-
-export default function EditableVariantLabel(props: { variant: PromptVariant }) {
-  const labelRef = useRef<HTMLHeadingElement | null>(null);
-
-  const mutation = api.promptVariants.update.useMutation();
-
-  const [onBlur] = useHandledAsyncCallback(async () => {
-    const newLabel = labelRef.current?.innerText;
-    if (newLabel && newLabel !== props.variant.label) {
-      await mutation.mutateAsync({
-        id: props.variant.id,
-        updates: { label: newLabel },
-      });
-    }
-  }, [mutation, props.variant.id, props.variant.label]);
-
-  return (
-    <Heading
-      fontWeight="bold"
-      size="md"
-      ref={labelRef}
-      contentEditable
-      suppressContentEditableWarning
-      borderWidth={1}
-      borderColor="transparent"
-      _hover={{ borderColor: "gray.300" }}
-      _focus={{ borderColor: "blue.500", outline: "none" }}
-      onBlur={onBlur}
-      px={4}
-      py={2}
-    >
-      {props.variant.label}
-    </Heading>
-  );
-}
--- a/src/components/OutputsTable/NewVariantButton.tsx
+++ b/src/components/OutputsTable/NewVariantButton.tsx
@@ -2,6 +2,7 @@ import { Button, Tooltip } from "@chakra-ui/react";
 import { BsPlus } from "react-icons/bs";
 import { api } from "~/utils/api";
 import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
+import { cellPadding, headerMinHeight } from "../constants";

 export default function NewVariantButton() {
  const experiment = useExperiment();
@@ -21,16 +22,19 @@ export default function NewVariantButton() {
      <Button
        w="100%"
        borderRadius={0}
-        alignItems="flex-start"
+        alignItems="center"
        justifyContent="center"
        fontWeight="normal"
-        bgColor="blue.100"
-        _hover={{ bgColor: "blue.200" }}
-        py={2}
-        px={0}
+        bgColor="transparent"
+        _hover={{ bgColor: "gray.100" }}
+        px={cellPadding.x}
+        // py={cellPadding.y}
        onClick={onClick}
+        height="unset"
+        minH={headerMinHeight}
      >
        <BsPlus size={24} />
+        New Variant
      </Button>
    </Tooltip>
  );
--- a/src/components/OutputsTable/OutputCell.tsx
+++ b/src/components/OutputsTable/OutputCell.tsx
@@ -3,6 +3,13 @@ import { PromptVariant, Scenario } from "./types";
 import { Center, Spinner, Text } from "@chakra-ui/react";
 import { useExperiment } from "~/utils/hooks";
 import { JSONSerializable } from "~/server/types";
+import { cellPadding } from "../constants";
+
+const CellShell = ({ children }: { children: React.ReactNode }) => (
+  <Center h="100%" w="100%" px={cellPadding.x} py={cellPadding.y}>
+    {children}
+  </Center>
+);

 export default function OutputCell({
  scenario,
@@ -36,23 +43,21 @@ export default function OutputCell({

  if (disabledReason)
    return (
-      <Center h="100%">
+      <CellShell>
        <Text color="gray.500">{disabledReason}</Text>
-      </Center>
+      </CellShell>
    );

  if (output.isLoading)
    return (
-      <Center h="100%">
+      <CellShell>
        <Spinner />
-      </Center>
+      </CellShell>
    );

-  if (!output.data) return <Center h="100%">No output</Center>;
+  if (!output.data) return <CellShell>No output</CellShell>;

  return (
-    <Center h="100%">
-      {JSON.stringify(output.data.output.choices[0].message.content, null, 2)}
-    </Center>
+    <CellShell>{JSON.stringify(output.data.output.choices[0].message.content, null, 2)}</CellShell>
  );
 }
--- a/src/components/OutputsTable/ScenarioEditor.tsx
+++ b/src/components/OutputsTable/ScenarioEditor.tsx
@@ -6,8 +6,9 @@ import { useState } from "react";
 import ResizeTextarea from "react-textarea-autosize";

 import { Box, Button, Flex, HStack, Stack, Textarea } from "@chakra-ui/react";
+import { cellPadding } from "../constants";

-export default function ScenarioHeader({ scenario }: { scenario: Scenario }) {
+export default function ScenarioEditor({ scenario }: { scenario: Scenario }) {
  const savedValues = scenario.variableValues as Record<string, string>;
  const utils = api.useContext();

@@ -30,7 +31,7 @@ export default function ScenarioHeader({ scenario }: { scenario: Scenario }) {
  }, [mutation, values]);

  return (
-    <Stack>
+    <Stack px={cellPadding.x} py={cellPadding.y}>
      {variableLabels.map((key) => {
        const value = values[key] ?? "";
        const layoutDirection = value.length > 20 ? "column" : "row";
--- a/src/components/OutputsTable/VariantHeader.tsx
+++ b/src/components/OutputsTable/VariantHeader.tsx
@@ -1,53 +1,66 @@
-import { useCallback } from "react";
-import type { PromptVariant } from "./types";
+import { useRef } from "react";
+import { type PromptVariant } from "./types";
 import { api } from "~/utils/api";
-import { type JSONSerializable } from "~/server/types";
-import VariantConfigEditor from "./VariantConfigEditor";
-import EditableVariantLabel from "./EditableVariantLabel";
-import { Stack, useToast } from "@chakra-ui/react";
+import { useHandledAsyncCallback } from "~/utils/hooks";
+import { Button, HStack, Heading, Tooltip } from "@chakra-ui/react";
+import { BsX } from "react-icons/bs";
+import { cellPadding, headerMinHeight } from "../constants";

-export default function VariantHeader({ variant }: { variant: PromptVariant }) {
-  const replaceWithConfig = api.promptVariants.replaceWithConfig.useMutation();
+export default function VariantHeader(props: { variant: PromptVariant }) {
  const utils = api.useContext();
-  const toast = useToast();

-  const onSave = useCallback(
-    async (currentConfig: string) => {
-      let parsedConfig: JSONSerializable;
-      try {
-        parsedConfig = JSON.parse(currentConfig) as JSONSerializable;
-      } catch (e) {
-        toast({
-          title: "Invalid JSON",
-          description: "Please fix the JSON before saving.",
-          status: "error",
-        });
-        return;
-      }
-
-      if (parsedConfig === null) {
-        toast({
-          title: "Invalid JSON",
-          description: "Please fix the JSON before saving.",
-          status: "error",
-        });
-        return;
-      }
-
-      await replaceWithConfig.mutateAsync({
-        id: variant.id,
-        config: currentConfig,
+  const labelRef = useRef<HTMLHeadingElement | null>(null);
+  const updateMutation = api.promptVariants.update.useMutation();
+  const [onSaveLabel] = useHandledAsyncCallback(async () => {
+    const newLabel = labelRef.current?.innerText;
+    if (newLabel && newLabel !== props.variant.label) {
+      await updateMutation.mutateAsync({
+        id: props.variant.id,
+        updates: { label: newLabel },
      });
+    }
+  }, [updateMutation, props.variant.id, props.variant.label]);

-      await utils.promptVariants.list.invalidate();
-    },
-    [variant.id, replaceWithConfig, utils.promptVariants.list, toast]
-  );
+  const hideMutation = api.promptVariants.hide.useMutation();
+  const [onHide] = useHandledAsyncCallback(async () => {
+    await hideMutation.mutateAsync({
+      id: props.variant.id,
+    });
+    await utils.promptVariants.list.invalidate();
+  }, [hideMutation, props.variant.id]);

  return (
-    <Stack w="100%">
-      <EditableVariantLabel variant={variant} />
-      <VariantConfigEditor variant={variant} />
-    </Stack>
+    <HStack spacing={4} alignItems="center" minH={headerMinHeight}>
+      <Heading
+        fontWeight="bold"
+        size="md"
+        ref={labelRef}
+        contentEditable
+        suppressContentEditableWarning
+        borderWidth={1}
+        borderColor="transparent"
+        _hover={{ borderColor: "gray.300" }}
+        _focus={{ borderColor: "blue.500", outline: "none" }}
+        onBlur={onSaveLabel}
+        flex={1}
+        px={cellPadding.x}
+        // py={cellPadding.y}
+      >
+        {props.variant.label}
+      </Heading>
+      <Tooltip label="Hide Variant" hasArrow>
+        <Button
+          variant="ghost"
+          colorScheme="gray"
+          size="sm"
+          onClick={onHide}
+          borderRadius={0}
+          // px={cellPadding.x}
+          // py={cellPadding.y}
+        >
+          <BsX size={24} />
+        </Button>
+      </Tooltip>
+    </HStack>
  );
 }
--- a/src/components/OutputsTable/index.tsx
+++ b/src/components/OutputsTable/index.tsx
@@ -1,15 +1,21 @@
 import { RouterOutputs, api } from "~/utils/api";
 import { Scenario, type PromptVariant } from "./types";
-import VariantHeader from "./VariantHeader";
 import OutputCell from "./OutputCell";
-import ScenarioHeader from "./ScenarioHeader";
+import ScenarioEditor from "./ScenarioEditor";
 import React, { useState } from "react";
-import { Box, Grid, GridItem, Heading } from "@chakra-ui/react";
+import { Box, Grid, GridItem, Heading, SystemStyleObject } from "@chakra-ui/react";
 import NewScenarioButton from "./NewScenarioButton";
 import NewVariantButton from "./NewVariantButton";
-import EditableVariantLabel from "./EditableVariantLabel";
+import VariantHeader from "./VariantHeader";
 import VariantConfigEditor from "./VariantConfigEditor";

+const stickyHeaderStyle: SystemStyleObject = {
+  position: "sticky",
+  top: 0,
+  backgroundColor: "#fff",
+  zIndex: 1,
+};
+
 const ScenarioRow = (props: { scenario: Scenario; variants: PromptVariant[] }) => {
  const [isHovered, setIsHovered] = useState(false);

@@ -22,16 +28,16 @@ const ScenarioRow = (props: { scenario: Scenario; variants: PromptVariant[] }) =
      <GridItem
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
-        sx={isHovered ? highlightStyle : null}
+        sx={isHovered ? highlightStyle : undefined}
      >
-        <ScenarioHeader scenario={props.scenario} />
+        <ScenarioEditor scenario={props.scenario} />
      </GridItem>
      {props.variants.map((variant) => (
        <GridItem
          key={variant.id}
          onMouseEnter={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
-          sx={isHovered ? highlightStyle : null}
+          sx={isHovered ? highlightStyle : undefined}
        >
          <OutputCell key={variant.id} scenario={props.scenario} variant={variant} />
        </GridItem>
@@ -57,14 +63,12 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
    <Grid
      p={4}
      display="grid"
-      gridTemplateColumns={`200px repeat(${variants.data.length}, minmax(300px, 1fr)) 40px`}
+      gridTemplateColumns={`200px repeat(${variants.data.length}, minmax(300px, 1fr)) auto`}
      sx={{
        "> *": {
          borderColor: "gray.300",
          borderBottomWidth: 1,
          borderRightWidth: 1,
-          paddingX: 4,
-          paddingY: 2,
        },
        "> *:last-child": {
          borderRightWidth: 0,
@@ -72,25 +76,24 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
      }}
    >
      <GridItem display="flex" alignItems="flex-end" rowSpan={2}>
-        <Heading size="md" fontWeight="bold">
-          Scenario
-        </Heading>
+        <Box sx={stickyHeaderStyle} flex={1}>
+          <Heading size="md" fontWeight="bold">
+            Scenario
+          </Heading>
+        </Box>
      </GridItem>
      {variants.data.map((variant) => (
-        <GridItem
-          key={variant.uiId}
-          padding={0}
-          sx={{ position: "sticky", top: 0, backgroundColor: "#fff", zIndex: 1 }}
-        >
-          <EditableVariantLabel variant={variant} />
+        <GridItem key={variant.uiId} padding={0} sx={stickyHeaderStyle}>
+          <VariantHeader variant={variant} />
        </GridItem>
      ))}
      <GridItem
-        borderBottomWidth={0}
        rowSpan={scenarios.data.length + 1}
        padding={0}
-        borderRightWidth={0}
-        sx={{ position: "sticky", top: 0, backgroundColor: "#fff", zIndex: 1 }}
+        // Have to use `style` instead of emotion style props to work around css specificity issues conflicting with the "> *" selector on Grid
+        style={{ borderRightWidth: 0, borderBottomWidth: 0 }}
+        sx={stickyHeaderStyle}
+        className="new-variant-button"
      >
        <NewVariantButton />
      </GridItem>
--- a/src/components/constants.ts
+++ b/src/components/constants.ts
@@ -0,0 +1,6 @@
+export const cellPadding = {
+  x: 4,
+  y: 2,
+};
+
+export const headerMinHeight = 8;
--- a/src/components/nav/AppNav.tsx
+++ b/src/components/nav/AppNav.tsx
@@ -3,13 +3,17 @@ import Head from "next/head";

 export default function AppNav(props: { children: React.ReactNode; title?: string }) {
  return (
-    <Flex minH="100vh" align="stretch">
+    <Flex minH="100vh">
      <Head>
        <title>{props.title ? `${props.title} | Prompt Bench` : "Prompt Bench"}</title>
      </Head>
      {/* Placeholder for now */}
-      <Box bgColor="gray.100" height="100vh" width="200px" />
-      <Box flex={1}>{props.children}</Box>
+      <Box bgColor="gray.100" flexShrink={0} width="200px">
+        Nav Sidebar
+      </Box>
+      <Box flex={1} overflowX="auto" overflowY="auto" h="100vh">
+        {props.children}
+      </Box>
    </Flex>
  );
 }
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,79 +0,0 @@
-import styles from "./index.module.css";
-import { signIn, signOut, useSession } from "next-auth/react";
-import Head from "next/head";
-import Link from "next/link";
-import { api } from "~/utils/api";
-
-export default function Home() {
-  const hello = api.example.hello.useQuery({ text: "from tRPC" });
-
-  return (
-    <>
-      <Head>
-        <title>Create T3 App</title>
-        <meta name="description" content="Generated by create-t3-app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className={styles.main}>
-        <div className={styles.container}>
-          <h1 className={styles.title}>
-            Create <span className={styles.pinkSpan}>T3</span> App
-          </h1>
-          <div className={styles.cardRow}>
-            <Link
-              className={styles.card}
-              href="https://create.t3.gg/en/usage/first-steps"
-              target="_blank"
-            >
-              <h3 className={styles.cardTitle}>First Steps →</h3>
-              <div className={styles.cardText}>
-                Just the basics - Everything you need to know to set up your database and
-                authentication.
-              </div>
-            </Link>
-            <Link
-              className={styles.card}
-              href="https://create.t3.gg/en/introduction"
-              target="_blank"
-            >
-              <h3 className={styles.cardTitle}>Documentation →</h3>
-              <div className={styles.cardText}>
-                Learn more about Create T3 App, the libraries it uses, and how to deploy it.
-              </div>
-            </Link>
-          </div>
-          <div className={styles.showcaseContainer}>
-            <p className={styles.showcaseText}>
-              {hello.data ? hello.data.greeting : "Loading tRPC query..."}
-            </p>
-            <AuthShowcase />
-          </div>
-        </div>
-      </main>
-    </>
-  );
-}
-
-function AuthShowcase() {
-  const { data: sessionData } = useSession();
-
-  const { data: secretMessage } = api.example.getSecretMessage.useQuery(
-    undefined, // no input
-    { enabled: sessionData?.user !== undefined }
-  );
-
-  return (
-    <div className={styles.authContainer}>
-      <p className={styles.showcaseText}>
-        {sessionData && <span>Logged in as {sessionData.user?.name}</span>}
-        {secretMessage && <span> - {secretMessage}</span>}
-      </p>
-      <button
-        className={styles.loginButton}
-        onClick={sessionData ? () => void signOut() : () => void signIn()}
-      >
-        {sessionData ? "Sign out" : "Sign in"}
-      </button>
-    </div>
-  );
-}
--- a/src/server/api/routers/promptVariants.router.ts
+++ b/src/server/api/routers/promptVariants.router.ts
@@ -75,6 +75,23 @@ export const promptVariantsRouter = createTRPCRouter({
      });
    }),

+  hide: publicProcedure
+    .input(
+      z.object({
+        id: z.string(),
+      })
+    )
+    .mutation(async ({ input }) => {
+      return await prisma.promptVariant.update({
+        where: {
+          id: input.id,
+        },
+        data: {
+          visible: false,
+        },
+      });
+    }),
+
  replaceWithConfig: publicProcedure
    .input(
      z.object({
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -1,11 +1,12 @@
 import { extendTheme } from "@chakra-ui/react";
-import "@fontsource/poppins";
-import "@fontsource/roboto";
+
+const systemFont =
+  'ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"';

 const theme = extendTheme({
  fonts: {
-    heading: "Poppins, sans-serif",
-    body: "Roboto, sans-serif",
+    heading: systemFont,
+    body: systemFont,
  },
 });