{stats.experimentLabel}

import { Box, Breadcrumb, BreadcrumbItem, Center, Flex, Icon, Input, Text, VStack, } from "@chakra-ui/react"; import Link from "next/link"; import { useRouter } from "next/router"; import { useState, useEffect } from "react"; import { RiFlaskLine } from "react-icons/ri"; import OutputsTable from "~/components/OutputsTable"; import ExperimentSettingsDrawer from "~/components/ExperimentSettingsDrawer/ExperimentSettingsDrawer"; import AppShell from "~/components/nav/AppShell"; import { api } from "~/utils/api"; import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks"; import { useAppStore } from "~/state/store"; import { useSyncVariantEditor } from "~/state/sync"; import { ExperimentHeaderButtons } from "~/components/experiments/ExperimentHeaderButtons/ExperimentHeaderButtons"; import Head from "next/head"; import PageHeaderContainer from "~/components/nav/PageHeaderContainer"; import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents"; // TODO: import less to fix deployment with server side props // export const getServerSideProps = async (context: GetServerSidePropsContext<{ id: string }>) => { // const experimentId = context.params?.id as string; // const helpers = createServerSideHelpers({ // router: appRouter, // ctx: createInnerTRPCContext({ session: null }), // transformer: superjson, // optional - adds superjson serialization // }); // // prefetch query // await helpers.experiments.stats.prefetch({ id: experimentId }); // return { // props: { // trpcState: helpers.dehydrate(), // }, // }; // }; export default function Experiment() { const router = useRouter(); const utils = api.useContext(); useSyncVariantEditor(); const experiment = useExperiment(); const experimentStats = api.experiments.stats.useQuery( { id: router.query.id as string }, { enabled: !!router.query.id, }, ); const stats = experimentStats.data; useEffect(() => { useAppStore.getState().sharedVariantEditor.loadMonaco().catch(console.error); }); const [label, setLabel] = useState(experiment.data?.label || ""); useEffect(() => { setLabel(experiment.data?.label || ""); }, [experiment.data?.label]); const updateMutation = api.experiments.update.useMutation(); const [onSaveLabel] = useHandledAsyncCallback(async () => { if (label && label !== experiment.data?.label && experiment.data?.id) { await updateMutation.mutateAsync({ id: experiment.data.id, updates: { label: label }, }); await Promise.all([utils.experiments.list.invalidate(), utils.experiments.get.invalidate()]); } }, [updateMutation, experiment.data?.id, experiment.data?.label, label]); if (!experiment.isLoading && !experiment.data) { return (

Experiment not found 😕

); } const canModify = experiment.data?.access.canModify ?? false; return ( <> {stats && ( )} Experiments {canModify ? ( setLabel(e.target.value)} onBlur={onSaveLabel} borderWidth={1} borderColor="transparent" fontSize={16} px={0} minW={{ base: 100, lg: 300 }} flex={1} _hover={{ borderColor: "gray.300" }} _focus={{ borderColor: "blue.500", outline: "none" }} /> ) : ( {experiment.data?.label} )} ); }