diff options
Diffstat (limited to 'components/Tweaks')
-rw-r--r-- | components/Tweaks/GraphColorSelect.tsx | 59 | ||||
-rw-r--r-- | components/Tweaks/ThemeSelect.tsx | 8 | ||||
-rw-r--r-- | components/Tweaks/VisualsPanel.tsx | 14 | ||||
-rw-r--r-- | components/Tweaks/index.tsx | 8 |
4 files changed, 87 insertions, 2 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> + ) +} diff --git a/components/Tweaks/ThemeSelect.tsx b/components/Tweaks/ThemeSelect.tsx index 6a6b5d8..d5a7f54 100644 --- a/components/Tweaks/ThemeSelect.tsx +++ b/components/Tweaks/ThemeSelect.tsx @@ -22,7 +22,13 @@ export const ThemeSelect = () => { <Flex alignItems="center" justifyContent="space-between" pl={7} pr={2}> <Text>Theme</Text> <Menu isLazy placement="bottom" closeOnSelect={false}> - <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}> + <MenuButton + as={Button} + size="sm" + colorScheme="" + color="black" + rightIcon={<ChevronDownIcon />} + > {emacsTheme[0]} </MenuButton> <MenuList minW={10} zIndex="popover" bgColor="gray.200"> diff --git a/components/Tweaks/VisualsPanel.tsx b/components/Tweaks/VisualsPanel.tsx index d3c8415..015acfc 100644 --- a/components/Tweaks/VisualsPanel.tsx +++ b/components/Tweaks/VisualsPanel.tsx @@ -24,6 +24,7 @@ import { LabelsPanel } from './LabelsPanel' import { CitationsPanel } from './CitationsPanel' import { ColorMenu } from './ColorMenu' import { ThemeSelect } from './ThemeSelect' +import { GraphColorSelect } from './GraphColorSelect' export interface VisualsPanelProps { visuals: typeof initialVisuals @@ -31,14 +32,25 @@ export interface VisualsPanelProps { highlightColor: string setHighlightColor: any threeDim: boolean + coloring: string + setColoring: any } export const VisualsPanel = (props: VisualsPanelProps) => { - const { visuals, setVisuals, highlightColor, setHighlightColor, threeDim } = props + const { + coloring, + setColoring, + visuals, + setVisuals, + highlightColor, + setHighlightColor, + threeDim, + } = props const setVisualsCallback = useCallback((val) => setVisuals(val), []) return ( <VStack justifyContent="flex-start" align="stretch"> <ThemeSelect /> + <GraphColorSelect {...{ coloring, setColoring }} /> <Accordion allowToggle defaultIndex={[0]} paddingLeft={3}> <AccordionItem> <AccordionButton> diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx index afd0ea7..078ee99 100644 --- a/components/Tweaks/index.tsx +++ b/components/Tweaks/index.tsx @@ -48,6 +48,8 @@ export interface TweakProps { tags: string[] tagColors: TagColors setTagColors: any + coloring: string + setColoring: any } export const Tweaks = (props: TweakProps) => { @@ -67,6 +69,8 @@ export const Tweaks = (props: TweakProps) => { tags, tagColors, setTagColors, + coloring, + setColoring, } = props const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false) @@ -194,6 +198,10 @@ export const Tweaks = (props: TweakProps) => { highlightColor={highlightColor} setHighlightColor={setHighlightColor} threeDim={threeDim} + {...{ + coloring, + setColoring, + }} /> </AccordionPanel> </AccordionItem> |