88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
import {
|
|
Button,
|
|
type ButtonProps,
|
|
HStack,
|
|
Text,
|
|
Icon,
|
|
Menu,
|
|
MenuButton,
|
|
MenuList,
|
|
MenuItem,
|
|
IconButton,
|
|
Spinner,
|
|
} from "@chakra-ui/react";
|
|
import { cellPadding } from "./constants";
|
|
import {
|
|
useExperiment,
|
|
useExperimentAccess,
|
|
useHandledAsyncCallback,
|
|
useScenarios,
|
|
} from "~/utils/hooks";
|
|
import { BsGear, BsPencil, BsPlus, BsStars } from "react-icons/bs";
|
|
import { useAppStore } from "~/state/store";
|
|
import { api } from "~/utils/api";
|
|
|
|
export const ActionButton = (props: ButtonProps) => (
|
|
<Button size="sm" variant="ghost" color="gray.600" {...props} />
|
|
);
|
|
|
|
export const ScenariosHeader = () => {
|
|
const openDrawer = useAppStore((s) => s.openDrawer);
|
|
const { canModify } = useExperimentAccess();
|
|
const scenarios = useScenarios();
|
|
|
|
const experiment = useExperiment();
|
|
const createScenarioMutation = api.scenarios.create.useMutation();
|
|
const utils = api.useContext();
|
|
|
|
const [onAddScenario, loading] = useHandledAsyncCallback(
|
|
async (autogenerate: boolean) => {
|
|
if (!experiment.data) return;
|
|
await createScenarioMutation.mutateAsync({
|
|
experimentId: experiment.data.id,
|
|
autogenerate,
|
|
});
|
|
await utils.scenarios.list.invalidate();
|
|
},
|
|
[createScenarioMutation],
|
|
);
|
|
|
|
return (
|
|
<HStack w="100%" py={cellPadding.y} px={cellPadding.x} align="center" spacing={0}>
|
|
<Text fontSize={16} fontWeight="bold">
|
|
Scenarios ({scenarios.data?.count})
|
|
</Text>
|
|
{canModify && (
|
|
<Menu>
|
|
<MenuButton
|
|
as={IconButton}
|
|
mt={1}
|
|
ml={2}
|
|
variant="ghost"
|
|
aria-label="Edit Scenarios"
|
|
icon={<Icon as={loading ? Spinner : BsGear} />}
|
|
maxW={8}
|
|
minW={8}
|
|
minH={8}
|
|
maxH={8}
|
|
/>
|
|
<MenuList fontSize="md" zIndex="dropdown" mt={-1}>
|
|
<MenuItem
|
|
icon={<Icon as={BsPlus} boxSize={6} mx="-5px" />}
|
|
onClick={() => onAddScenario(false)}
|
|
>
|
|
Add Scenario
|
|
</MenuItem>
|
|
<MenuItem icon={<BsStars />} onClick={() => onAddScenario(true)}>
|
|
Autogenerate Scenario
|
|
</MenuItem>
|
|
<MenuItem icon={<BsPencil />} onClick={openDrawer}>
|
|
Add or Remove Variables
|
|
</MenuItem>
|
|
</MenuList>
|
|
</Menu>
|
|
)}
|
|
</HStack>
|
|
);
|
|
};
|