{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"; export default function Experiment() { const router = useRouter(); const utils = api.useContext(); useSyncVariantEditor(); const experiment = useExperiment(); const experimentStats = api.experiments.stats.useQuery( { id: experiment.data?.id as string }, { enabled: !!experiment.data?.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} )} ); }