diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/Tweaks/GraphColorSelect.tsx | 64 | ||||
| -rw-r--r-- | components/Tweaks/ThemeSelect.tsx | 8 | ||||
| -rw-r--r-- | components/Tweaks/VisualsPanel.tsx | 16 | ||||
| -rw-r--r-- | components/Tweaks/index.tsx | 12 | ||||
| -rw-r--r-- | components/config.ts | 3 |
5 files changed, 100 insertions, 3 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> + ) +} 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 23ba41f..f364c4f 100644 --- a/components/Tweaks/VisualsPanel.tsx +++ b/components/Tweaks/VisualsPanel.tsx @@ -18,12 +18,13 @@ import { import React, { useCallback } from 'react' import { HighlightingPanel } from './HighlightingPanel' import { ColorsPanel } from './ColorsPanel' -import { initialVisuals } from '../config' +import { initialColoring, initialVisuals } from '../config' import { NodesNLinksPanel } from './NodesNLinksPanel' 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: typeof initialColoring + 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 cff0e78..a07559a 100644 --- a/components/Tweaks/index.tsx +++ b/components/Tweaks/index.tsx @@ -23,6 +23,7 @@ import { initialLocal, TagColors, colorList, + initialColoring, } from '../config' import FilterPanel from './FilterPanel' @@ -49,6 +50,8 @@ export interface TweakProps { tags: string[] tagColors: TagColors setTagColors: any + coloring: typeof initialColoring + setColoring: any local: typeof initialLocal setLocal: any } @@ -70,6 +73,8 @@ export const Tweaks = (props: TweakProps) => { tags, tagColors, setTagColors, + coloring, + setColoring, local, setLocal, } = props @@ -129,6 +134,9 @@ export const Tweaks = (props: TweakProps) => { setMouse(initialMouse) setPhysics(initialPhysics) setBehavior(initialBehavior) + setColoring(initialColoring) + setHighlightColor('purple.500') + setLocal(initialLocal) }} variant="subtle" size="sm" @@ -200,6 +208,10 @@ export const Tweaks = (props: TweakProps) => { highlightColor={highlightColor} setHighlightColor={setHighlightColor} threeDim={threeDim} + {...{ + coloring, + setColoring, + }} /> </AccordionPanel> </AccordionItem> diff --git a/components/config.ts b/components/config.ts index 32a4c21..d61e416 100644 --- a/components/config.ts +++ b/components/config.ts @@ -45,6 +45,9 @@ export const initialFilter = { date: [], noter: true, } +export const initialColoring = { + method: 'degree', +} export const initialVisuals = { particles: false, |