diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-10-16 23:54:48 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-10-16 23:54:48 +0200 |
commit | 0895967f20ef33bc0f32c99bac0a93761915b87f (patch) | |
tree | b427a25eb977e00107b7f2aa4cbf7271e2e0e633 /components/Tweaks/GraphColorSelect.tsx | |
parent | 64b579b4d6e989ea7c71840a1dde2c3dc360365d (diff) |
feat(algos): ability to select coloring
Diffstat (limited to 'components/Tweaks/GraphColorSelect.tsx')
-rw-r--r-- | components/Tweaks/GraphColorSelect.tsx | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/components/Tweaks/GraphColorSelect.tsx b/components/Tweaks/GraphColorSelect.tsx new file mode 100644 index 0000000..b52dde2 --- /dev/null +++ b/components/Tweaks/GraphColorSelect.tsx @@ -0,0 +1,59 @@ +import React, { useContext } from 'react' +import { + Box, + Button, + Flex, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + Text, +} from '@chakra-ui/react' +import { ChevronDownIcon } from '@chakra-ui/icons' + +export interface GraphColorSelectProps { + coloring: string + setColoring: any +} + +export const GraphColorSelect = (props: GraphColorSelectProps) => { + type Theme = { [key: string]: string } + const { coloring, setColoring } = props + return ( + <Flex alignItems="center" justifyContent="space-between" pl={7} pr={2}> + <Text>Graph coloring</Text> + <Menu isLazy placement="right"> + <MenuButton + as={Button} + size="sm" + colorScheme="" + color="black" + rightIcon={<ChevronDownIcon />} + > + {coloring === 'degree' ? 'Links' : 'Communities'} + </MenuButton> + <Portal> + <MenuList minW={10} zIndex="popover" bgColor="gray.200"> + <MenuItem + onClick={() => setColoring('degree')} + justifyContent="space-between" + alignItems="center" + display="flex" + > + Number of links + </MenuItem> + <MenuItem + onClick={() => setColoring('community')} + justifyContent="space-between" + alignItems="center" + display="flex" + > + Communities + </MenuItem> + </MenuList> + </Portal> + </Menu> + </Flex> + ) +} |