4 files changed, 97 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>