feat/query: Filter/color by queries

components/TagMenu.tsx

@@ -14,7 +14,6 @@ import {
 import React from 'react'
 import { colorList, initialFilter, TagColors } from './config'
 import { Collapse } from './Sidebar/Collapse'
-import { ColorMenu } from './Tweaks/ColorMenu'
 
 export interface TagMenuProps {
   setTagColors: any

components/Tweaks/ColorMenu.tsx

@@ -17,34 +17,25 @@ import React, { useCallback } from 'react'
 import { initialVisuals } from '../config'
 
 export interface ColorMenuProps {
-  label: string
+  label?: string
   colorList: string[]
-  value: string
-  visValue: string
-  setVisuals?: any
+  stateVal: string
+  onClick: any
   noEmpty?: boolean
 }
 
 export const ColorMenu = (props: ColorMenuProps) => {
-  const { label, colorList, value, visValue, setVisuals, noEmpty } = props
+  const { label, colorList, stateVal, onClick, noEmpty } = props
+
+  const clickCallback = useCallback((color: string) => onClick(color), [])
 
-  const clickCallback = useCallback(
-    (color) =>
-      setVisuals((curr: typeof initialVisuals) => {
-        return {
-          ...curr,
-          [value]: color,
-        }
-      }),
-    [],
-  )
   return (
     <Flex alignItems="center" justifyContent="space-between">
-      <Text>{label}</Text>
+      {label && <Text>{label}</Text>}
       <Popover isLazy placement="right">
         <PopoverTrigger>
           <Button colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
-            {<Box bgColor={visValue} borderRadius="sm" height={6} width={6}></Box>}
+            {<Box bgColor={stateVal} borderRadius="sm" height={6} width={6}></Box>}
           </Button>
         </PopoverTrigger>
         <Portal>

components/Tweaks/ColorsPanel.tsx

@@ -19,6 +19,7 @@ import {
 import React from 'react'
 import { ColorMenu } from './ColorMenu'
 import { colorList, initialVisuals } from '../config'
+import { useCallback } from 'react'
 
 export interface ColorsPanelProps {
   visuals: typeof initialVisuals
@@ -29,6 +30,12 @@ export interface ColorsPanelProps {
 
 export const ColorsPanel = (props: ColorsPanelProps) => {
   const { visuals, setVisualsCallback, highlightColor, setHighlightColor } = props
+  const colorCallback = useCallback((key: string, color: string) => {
+    setVisualsCallback((curr: typeof initialVisuals) => ({
+      ...curr,
+      [key]: color,
+    }))
+  }, [])
 
   return (
     <VStack
@@ -49,15 +56,15 @@ export const ColorsPanel = (props: ColorsPanelProps) => {
               variant="ghost"
               onClick={() => {
                 const arr = visuals.nodeColorScheme ?? []
-                setVisualsCallback({
-                  ...visuals,
+                setVisualsCallback((curr: typeof initialVisuals) => ({
+                  ...curr,
                   //shuffle that guy
                   //definitely thought of this myself
                   nodeColorScheme: arr
                     .map((x: any) => [Math.random(), x])
                     .sort(([a], [b]) => a - b)
                     .map(([_, x]) => x),
-                })
+                }))
               }}
             />
           </Tooltip>
@@ -69,10 +76,10 @@ export const ColorsPanel = (props: ColorsPanelProps) => {
               variant="ghost"
               onClick={() => {
                 const arr = visuals.nodeColorScheme ?? []
-                setVisualsCallback({
-                  ...visuals,
+                setVisualsCallback((curr: typeof initialVisuals) => ({
+                  ...curr,
                   nodeColorScheme: [...arr.slice(1, arr.length), arr[0]],
-                })
+                }))
               }}
             />
           </Tooltip>
@@ -85,7 +92,7 @@ export const ColorsPanel = (props: ColorsPanelProps) => {
               rightIcon={<ChevronDownIcon />}
             >
               <Flex height={6} width={6} flexDirection="column" flexWrap="wrap">
-                {visuals.nodeColorScheme.map((color) => (
+                {visuals.nodeColorScheme?.map((color) => (
                   <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box>
                 ))}
               </Flex>
@@ -101,16 +108,20 @@ export const ColorsPanel = (props: ColorsPanelProps) => {
                     if (!colors.length) {
                       return
                     }
-                    setVisualsCallback({ ...visuals, nodeColorScheme: colors })
+                    setVisualsCallback((curr: typeof initialVisuals) => ({
+                      ...curr,
+                      nodeColorScheme: colors,
+                    }))
                   }}
                 >
                   {colorList.map((color) => (
                     <MenuItemOption
                       key={color}
-                      isChecked={visuals.nodeColorScheme.some((c) => c === color)}
+                      isChecked={visuals.nodeColorScheme?.some((c) => c === color)}
                       value={color}
                       isDisabled={
-                        visuals.nodeColorScheme.length === 1 && visuals.nodeColorScheme[0] === color
+                        visuals.nodeColorScheme?.length === 1 &&
+                        visuals.nodeColorScheme[0] === color
                       }
                     >
                       <Box justifyContent="space-between" alignItems="center" display="flex">
@@ -137,7 +148,7 @@ export const ColorsPanel = (props: ColorsPanelProps) => {
                   ></Box>
                 ) : (
                   <Flex height={6} width={6} flexDirection="column" flexWrap="wrap">
-                    {visuals.nodeColorScheme.map((color) => (
+                    {visuals.nodeColorScheme?.map((color) => (
                       <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box>
                     ))}
                   </Flex>
@@ -148,13 +159,18 @@ export const ColorsPanel = (props: ColorsPanelProps) => {
               {' '}
               <MenuList minW={10} zIndex="popover" bgColor="gray.200">
                 <MenuItem
-                  onClick={() => setVisualsCallback({ ...visuals, linkColorScheme: '' })}
+                  onClick={() =>
+                    setVisualsCallback((curr: typeof initialVisuals) => ({
+                      ...curr,
+                      linkColorScheme: '',
+                    }))
+                  }
                   justifyContent="space-between"
                   alignItems="center"
                   display="flex"
                 >
                   <Flex height={6} width={6} flexDirection="column" flexWrap="wrap">
-                    {visuals.nodeColorScheme.map((color) => (
+                    {visuals.nodeColorScheme?.map((color) => (
                       <Box key={color} bgColor={color} flex="1 1 8px" borderRadius="2xl"></Box>
                     ))}
                   </Flex>
@@ -163,10 +179,10 @@ export const ColorsPanel = (props: ColorsPanelProps) => {
                   <MenuItem
                     key={color}
                     onClick={() =>
-                      setVisualsCallback({
-                        ...visuals,
+                      setVisualsCallback((curr: typeof initialVisuals) => ({
+                        ...curr,
                         linkColorScheme: color,
-                      })
+                      }))
                     }
                     justifyContent="space-between"
                     alignItems="center"
@@ -179,57 +195,55 @@ export const ColorsPanel = (props: ColorsPanelProps) => {
             </Portal>
           </Menu>
         </Flex>
-        <Flex alignItems="center" justifyContent="space-between">
-          <Text>Accent</Text>
-          <Menu isLazy placement="right">
-            <MenuButton as={Button} colorScheme="" color="black" rightIcon={<ChevronDownIcon />}>
-              {<Box bgColor={highlightColor} borderRadius="sm" height={6} width={6}></Box>}
-            </MenuButton>
-            <Portal>
-              {' '}
-              <MenuList minW={10} zIndex="popover" bgColor="gray.200">
-                {colorList.map((color) => (
-                  <MenuItem
-                    key={color}
-                    onClick={() => setHighlightColor(color)}
-                    justifyContent="space-between"
-                    alignItems="center"
-                    display="flex"
-                  >
-                    <Box bgColor={color} borderRadius="sm" height={6} width={6}></Box>
-                  </MenuItem>
-                ))}
-              </MenuList>
-            </Portal>
-          </Menu>
-        </Flex>
+        <ColorMenu
+          colorList={colorList}
+          label="Accent"
+          onClick={(color: string) => setHighlightColor(color)}
+          stateVal={highlightColor}
+        />
         <ColorMenu
           colorList={colorList}
           label="Link highlight"
-          setVisuals={setVisualsCallback}
-          value="linkHighlight"
-          visValue={visuals.linkHighlight}
+          onClick={(color: string) =>
+            setVisualsCallback((curr: typeof initialVisuals) => ({
+              ...curr,
+              linkHighlight: color,
+            }))
+          }
+          stateVal={visuals.linkHighlight}
         />
         <ColorMenu
           colorList={colorList}
           label="Node highlight"
-          setVisuals={setVisualsCallback}
-          value="nodeHighlight"
-          visValue={visuals.nodeHighlight}
+          onClick={(color: string) =>
+            setVisualsCallback((curr: typeof initialVisuals) => ({
+              ...curr,
+              nodeHighlight: color,
+            }))
+          }
+          stateVal={visuals.nodeHighlight}
         />
         <ColorMenu
           colorList={colorList}
           label="Background"
-          setVisuals={setVisualsCallback}
-          value="backgroundColor"
-          visValue={visuals.backgroundColor}
+          onClick={(color: string) =>
+            setVisualsCallback((curr: typeof initialVisuals) => ({
+              ...curr,
+              backgroundColor: color,
+            }))
+          }
+          stateVal={visuals.backgroundColor}
         />
         <ColorMenu
           colorList={colorList}
           label="Emacs node"
-          setVisuals={setVisualsCallback}
-          value="emacsNodeColor"
-          visValue={visuals.emacsNodeColor}
+          onClick={(color: string) =>
+            setVisualsCallback((curr: typeof initialVisuals) => ({
+              ...curr,
+              emacsNodeColor: color,
+            }))
+          }
+          stateVal={visuals.emacsNodeColor}
         />
       </Box>
     </VStack>

components/Tweaks/HighlightingPanel.tsx

@@ -101,7 +101,7 @@ export const HighlightingPanel = (props: HighlightingPanelProps) => {
                   }))
                 }}
               >
-                {visuals.algorithmOptions.map((opt: string) => (
+                {visuals.algorithmOptions?.map((opt: string) => (
                   <option key={opt} value={opt}>
                     {opt}
                   </option>

components/Tweaks/LabelsPanel.tsx

@@ -68,45 +68,61 @@ export const LabelsPanel = (props: LabelsPanelProps) => {
             min={5}
             max={20}
             step={0.5}
-            onChange={(value) => setVisuals({ ...visuals, labelFontSize: value })}
+            onChange={(value) =>
+              setVisuals((curr: typeof initialVisuals) => ({ ...curr, labelFontSize: value }))
+            }
           />
           <SliderWithInfo
             label="Max. label characters"
             value={visuals.labelLength}
             min={10}
             max={100}
             step={1}
-            onChange={(value) => setVisuals({ ...visuals, labelLength: value })}
+            onChange={(value) =>
+              setVisuals((curr: typeof initialVisuals) => ({ ...curr, labelLength: value }))
+            }
           />
           <SliderWithInfo
             label="Max. label line length"
             value={visuals.labelWordWrap}
             min={10}
             max={100}
             step={1}
-            onChange={(value) => setVisuals({ ...visuals, labelWordWrap: value })}
+            onChange={(value) =>
+              setVisuals((curr: typeof initialVisuals) => ({ ...curr, labelWordWrap: value }))
+            }
           />
           <SliderWithInfo
             label="Space between label lines"
             value={visuals.labelLineSpace}
             min={0.2}
             max={3}
             step={0.1}
-            onChange={(value) => setVisuals({ ...visuals, labelLineSpace: value })}
+            onChange={(value) =>
+              setVisuals((curr: typeof initialVisuals) => ({ ...curr, labelLineSpace: value }))
+            }
           />
           <ColorMenu
             colorList={colorList}
             label="Text"
-            setVisuals={setVisuals}
-            value="labelTextColor"
-            visValue={visuals.labelTextColor}
+            onClick={(color: string) =>
+              setVisuals((curr: typeof initialVisuals) => ({
+                ...curr,
+                labelTextColor: color,
+              }))
+            }
+            stateVal={visuals.labelTextColor}
           />
           <ColorMenu
             colorList={colorList}
             label="Background"
-            setVisuals={setVisuals}
-            value="labelBackgroundColor"
-            visValue={visuals.labelBackgroundColor}
+            onClick={(color: string) =>
+              setVisuals((curr: typeof initialVisuals) => ({
+                ...curr,
+                labelBackgroundColor: color,
+              }))
+            }
+            stateVal={visuals.labelBackgroundColor}
           />
           <Collapse in={!!visuals.labelBackgroundColor} animateOpacity>
             <Box paddingTop={2}>
@@ -115,7 +131,10 @@ export const LabelsPanel = (props: LabelsPanelProps) => {
                 value={visuals.labelBackgroundOpacity}
                 onChange={(value) => {
                   console.log(visuals.labelBackgroundOpacity)
-                  setVisuals({ ...visuals, labelBackgroundOpacity: value })
+                  setVisuals((curr: typeof initialVisuals) => ({
+                    ...curr,
+                    labelBackgroundOpacity: value,
+                  }))
                 }}
                 min={0}
                 max={1}
@@ -128,7 +147,9 @@ export const LabelsPanel = (props: LabelsPanelProps) => {
               <SliderWithInfo
                 label="Label Appearance Scale"
                 value={visuals.labelScale * 5}
-                onChange={(value) => setVisuals({ ...visuals, labelScale: value / 5 })}
+                onChange={(value) =>
+                  setVisuals((curr: typeof initialVisuals) => ({ ...curr, labelScale: value / 5 }))
+                }
               />
             </Box>
           </Collapse>