feat(algos): ability to select coloring

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>