diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-10-17 01:28:40 +0200 |
---|---|---|
committer | GitHub <[email protected]> | 2021-10-17 01:28:40 +0200 |
commit | 6ed792c982991b679d1c50060f4ca25b2eb1b9ca (patch) | |
tree | c1f4e920c0cfa2e9a2dfa1605d242e25cd28bfdd /components/Tweaks/GraphColorSelect.tsx | |
parent | ca2fa3dc8d405d0ec451f16b9fcc72cde6bbf470 (diff) | |
parent | d1f02171bd4727fb0c09657d6fe0f21f5cde9617 (diff) |
Merge pull request #120 from org-roam/feat/community-detection
Feat/community detection
Diffstat (limited to 'components/Tweaks/GraphColorSelect.tsx')
-rw-r--r-- | components/Tweaks/GraphColorSelect.tsx | 64 |
1 files changed, 64 insertions, 0 deletions
diff --git a/components/Tweaks/GraphColorSelect.tsx b/components/Tweaks/GraphColorSelect.tsx new file mode 100644 index 0000000..60fd8cf --- /dev/null +++ b/components/Tweaks/GraphColorSelect.tsx @@ -0,0 +1,64 @@ +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' +import { initialColoring } from '../config' + +export interface GraphColorSelectProps { + coloring: typeof initialColoring + 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.method === 'degree' ? 'Links' : 'Communities'} + </MenuButton> + <Portal> + <MenuList minW={10} zIndex="popover" bgColor="gray.200"> + <MenuItem + onClick={() => + setColoring((curr: typeof initialColoring) => ({ ...curr, method: 'degree' })) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + Number of links + </MenuItem> + <MenuItem + onClick={() => + setColoring((curr: typeof initialColoring) => ({ ...curr, method: 'community' })) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + Communities + </MenuItem> + </MenuList> + </Portal> + </Menu> + </Flex> + ) +} |