-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #54 from ProvideQ/feat/demonstrators
Demonstrators
- Loading branch information
Showing
10 changed files
with
290 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import { | ||
| Button, | ||
| FormControl, | ||
| FormLabel, | ||
| HStack, | ||
| Spinner, | ||
| Text, | ||
| Tooltip, | ||
| VStack, | ||
| } from "@chakra-ui/react"; | ||
| import { useEffect, useState } from "react"; | ||
| import { getInvalidProblemDto } from "../../api/data-model/ProblemDto"; | ||
| import { ProblemState } from "../../api/data-model/ProblemState"; | ||
| import { SolverSetting } from "../../api/data-model/SolverSettings"; | ||
| import { fetchSolverSettings, postProblem } from "../../api/ToolboxAPI"; | ||
| import { settingComponentMap } from "../solvers/settings/SettingsView"; | ||
|
|
||
| export interface DemonstratorProps { | ||
| demonstratorId: string; | ||
| onSolved: (solution: string) => void; | ||
| } | ||
|
|
||
| enum DemonstratorState { | ||
| IDLE, | ||
| SOLVING, | ||
| SOLVED, | ||
| } | ||
|
|
||
| function getHumanReadableState(state: DemonstratorState) { | ||
| switch (state) { | ||
| case DemonstratorState.IDLE: | ||
| return "Go"; | ||
| case DemonstratorState.SOLVING: | ||
| return ( | ||
| <HStack gap="1rem"> | ||
| <Text>Running</Text> | ||
| <Spinner speed="1s" width="10px" height="10px" thickness="1px" /> | ||
| </HStack> | ||
| ); | ||
| case DemonstratorState.SOLVED: | ||
| return "Run again"; | ||
| } | ||
| } | ||
|
|
||
| const demonstratorTypeId = "demonstrator"; | ||
|
|
||
| export const Demonstrator = (props: DemonstratorProps) => { | ||
| const [settings, setSettings] = useState<SolverSetting[]>([]); | ||
| const [state, setState] = useState<DemonstratorState>(DemonstratorState.IDLE); | ||
| const [error, setError] = useState<string>(""); | ||
|
|
||
| useEffect(() => { | ||
| fetchSolverSettings(demonstratorTypeId, props.demonstratorId).then( | ||
| setSettings | ||
| ); | ||
| }, [props.demonstratorId]); | ||
|
|
||
| function updateSetting(newSetting: SolverSetting) { | ||
| const index = settings.findIndex( | ||
| (setting) => setting.name === newSetting.name | ||
| ); | ||
| if (index !== -1) { | ||
| settings.splice(index, 1, newSetting); | ||
| } | ||
|
|
||
| setSettings([...settings]); | ||
| } | ||
|
|
||
| return ( | ||
| <VStack spacing={5}> | ||
| {settings.map((setting) => { | ||
| const SettingComponent = settingComponentMap[setting.type]; | ||
| return ( | ||
| <FormControl | ||
| key={setting.name} | ||
| id={setting.name} | ||
| isRequired={setting.required} | ||
| > | ||
| <Tooltip label={setting.description}> | ||
| <FormLabel>{setting.name}</FormLabel> | ||
| </Tooltip> | ||
| <SettingComponent setting={setting} updateSetting={updateSetting} /> | ||
| </FormControl> | ||
| ); | ||
| })} | ||
|
|
||
| <Button | ||
| bg="kitGreen" | ||
| width="100%" | ||
| _hover={{ | ||
| bg: | ||
| state === DemonstratorState.SOLVING ? "kitGreen" : "kitGreenAlpha", | ||
| }} | ||
| textColor="white" | ||
| onClick={() => { | ||
| if (state === DemonstratorState.SOLVING) return; | ||
|
|
||
| setState(DemonstratorState.SOLVING); | ||
| postProblem(demonstratorTypeId, { | ||
| ...getInvalidProblemDto(), | ||
| input: "", | ||
| solverId: props.demonstratorId, | ||
| state: ProblemState.SOLVING, | ||
| solverSettings: settings, | ||
| }).then((problemDto) => { | ||
| setState(DemonstratorState.SOLVED); | ||
| if (problemDto.error) { | ||
| setError(problemDto.error); | ||
| props.onSolved(""); | ||
| } else if (problemDto.solution?.debugData) { | ||
| setError(problemDto.solution.debugData); | ||
| props.onSolved(""); | ||
| } else { | ||
| setError(""); | ||
| props.onSolved(problemDto.solution.solutionData); | ||
| } | ||
| }); | ||
| }} | ||
| > | ||
| {getHumanReadableState(state)} | ||
| </Button> | ||
|
|
||
| {error && <Text color="red">{error}</Text>} | ||
| </VStack> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { Badge, Box, LinkBox, LinkOverlay } from "@chakra-ui/react"; | ||
| import NextLink from "next/link"; | ||
|
|
||
| export interface CardProps { | ||
| href: string; | ||
| new?: boolean; | ||
| tags?: string[]; | ||
| title: string; | ||
| description: string; | ||
| } | ||
|
|
||
| export const Card = (props: CardProps & { refer: string }) => { | ||
| return ( | ||
| <LinkBox maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden"> | ||
| <Box p="6"> | ||
| <Box display="flex" alignItems="baseline"> | ||
| {props.new && ( | ||
| <Badge borderRadius="full" px="2" colorScheme="blue" mr="2"> | ||
| New! | ||
| </Badge> | ||
| )} | ||
| <Box | ||
| color="gray.500" | ||
| fontWeight="semibold" | ||
| letterSpacing="wide" | ||
| fontSize="xs" | ||
| textTransform="uppercase" | ||
| > | ||
| {props.tags && | ||
| props.tags.map((tag) => ( | ||
| <Badge | ||
| key={tag} | ||
| borderRadius="full" | ||
| px="2" | ||
| colorScheme="teal" | ||
| mr="2" | ||
| > | ||
| {tag} | ||
| </Badge> | ||
| ))} | ||
| </Box> | ||
| </Box> | ||
|
|
||
| <Box | ||
| mt="2" | ||
| mb="1" | ||
| fontWeight="semibold" | ||
| as="h4" | ||
| lineHeight="tight" | ||
| noOfLines={1} | ||
| > | ||
| <NextLink href={props.href} passHref> | ||
| <LinkOverlay>{props.title}</LinkOverlay> | ||
| </NextLink> | ||
| </Box> | ||
|
|
||
| <Box>{props.description}</Box> | ||
|
|
||
| <Box fontWeight="semibold" mt="4"> | ||
| {props.refer} → | ||
| </Box> | ||
| </Box> | ||
| </LinkBox> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import { Card, CardProps } from "./Card"; | ||
|
|
||
| export const DemonstratorCard = (props: CardProps) => { | ||
| return <Card {...props} refer="Demonstrate" />; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { Grid, GridItem, GridProps } from "@chakra-ui/react"; | ||
| import { DemonstratorCard } from "./DemonstratorCard"; | ||
|
|
||
| export const DemonstratorChooser = (props: GridProps) => ( | ||
| <Grid templateColumns="repeat(2, 1fr)" gap={6} {...props}> | ||
| <GridItem> | ||
| <DemonstratorCard | ||
| new={true} | ||
| href="demonstrate/MixedIntegerProgramming" | ||
| title="Mixed Integer Programming" | ||
| description="The MIP problem is a mathematical optimization problem where some or all of the variables are restricted to be integers." | ||
| /> | ||
| </GridItem> | ||
| </Grid> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,5 @@ | ||
| import { Badge, Box, LinkBox, LinkOverlay } from "@chakra-ui/react"; | ||
| import NextLink from "next/link"; | ||
| import { Card, CardProps } from "./Card"; | ||
|
|
||
| interface ProblemCardProps { | ||
| href: string; | ||
| new: boolean; | ||
| tags: string[]; | ||
| problemName: string; | ||
| description: string; | ||
| } | ||
|
|
||
| export const ProblemCard = (props: ProblemCardProps) => { | ||
| return ( | ||
| <LinkBox maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden"> | ||
| <Box p="6"> | ||
| <Box display="flex" alignItems="baseline"> | ||
| {props.new && ( | ||
| <Badge borderRadius="full" px="2" colorScheme="blue" mr="2"> | ||
| New! | ||
| </Badge> | ||
| )} | ||
| <Box | ||
| color="gray.500" | ||
| fontWeight="semibold" | ||
| letterSpacing="wide" | ||
| fontSize="xs" | ||
| textTransform="uppercase" | ||
| > | ||
| {props.tags.map((tag) => ( | ||
| <Badge | ||
| key={tag} | ||
| borderRadius="full" | ||
| px="2" | ||
| colorScheme="teal" | ||
| mr="2" | ||
| > | ||
| {tag} | ||
| </Badge> | ||
| ))} | ||
| </Box> | ||
| </Box> | ||
|
|
||
| <Box | ||
| mt="2" | ||
| mb="1" | ||
| fontWeight="semibold" | ||
| as="h4" | ||
| lineHeight="tight" | ||
| noOfLines={1} | ||
| > | ||
| <NextLink href={props.href} passHref> | ||
| <LinkOverlay>{props.problemName}</LinkOverlay> | ||
| </NextLink> | ||
| </Box> | ||
|
|
||
| <Box>{props.description}</Box> | ||
|
|
||
| <Box fontWeight="semibold" mt="4"> | ||
| Solve this problem → | ||
| </Box> | ||
| </Box> | ||
| </LinkBox> | ||
| ); | ||
| export const ProblemCard = (props: CardProps) => { | ||
| return <Card {...props} refer="Solve this problem" />; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.