feat(neighbs): add ability to show nth neighbor

3 files changed, 33 insertions, 2 deletions

diff --git a/components/Tweaks/FilterPanel.tsx b/components/Tweaks/FilterPanel.tsx
index e375e31..ad0c5e4 100644
--- a/components/Tweaks/FilterPanel.tsx
+++ b/components/Tweaks/FilterPanel.tsx
@@ -20,8 +20,9 @@ import {
 } from '@chakra-ui/react'
 import React from 'react'
 import { TagPanel } from './TagPanel'
-import { initialFilter, TagColors } from '../config'
+import { initialFilter, initialLocal, TagColors } from '../config'
 import { TagColorPanel } from './TagColorPanel'
+import { SliderWithInfo } from './SliderWithInfo'
 
 export interface FilterPanelProps {
   filter: typeof initialFilter
@@ -31,10 +32,22 @@ export interface FilterPanelProps {
   highlightColor: string
   colorList: string[]
   tags: string[]
+  local: typeof initialLocal
+  setLocal: any
 }
 
 const FilterPanel = (props: FilterPanelProps) => {
-  const { filter, setFilter, tagColors, setTagColors, highlightColor, colorList, tags } = props
+  const {
+    filter,
+    setFilter,
+    local,
+    setLocal,
+    tagColors,
+    setTagColors,
+    highlightColor,
+    colorList,
+    tags,
+  } = props
   return (
     <Box>
       <VStack
@@ -152,6 +165,14 @@ const FilterPanel = (props: FilterPanelProps) => {
             isChecked={filter.bad}
           ></Switch>
         </Flex>
+        <SliderWithInfo
+          label="Number of neighbors in local graph"
+          value={local.neighbors}
+          onChange={(v) => setLocal({ ...local, neighbors: v })}
+          min={1}
+          max={5}
+          step={1}
+        />
       </VStack>
       <Accordion padding={0} allowToggle allowMultiple paddingLeft={3}>
         <AccordionItem>
diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx
index afd0ea7..cff0e78 100644
--- a/components/Tweaks/index.tsx
+++ b/components/Tweaks/index.tsx
@@ -20,6 +20,7 @@ import {
   initialVisuals,
   initialMouse,
   initialBehavior,
+  initialLocal,
   TagColors,
   colorList,
 } from '../config'
@@ -48,6 +49,8 @@ export interface TweakProps {
   tags: string[]
   tagColors: TagColors
   setTagColors: any
+  local: typeof initialLocal
+  setLocal: any
 }
 
 export const Tweaks = (props: TweakProps) => {
@@ -67,6 +70,8 @@ export const Tweaks = (props: TweakProps) => {
     tags,
     tagColors,
     setTagColors,
+    local,
+    setLocal,
   } = props
 
   const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false)
@@ -168,6 +173,7 @@ export const Tweaks = (props: TweakProps) => {
                 highlightColor={highlightColor}
                 colorList={colorList}
                 tags={tags}
+                {...{ local, setLocal }}
               />
             </AccordionPanel>
           </AccordionItem>
diff --git a/components/config.ts b/components/config.ts
index b3f5905..60e68f3 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -128,6 +128,10 @@ export const initialMouse = {
   backgroundExitsLocal: false,
 }
 
+export const initialLocal = {
+  neighbors: 1,
+}
+
 export const colorList = [
   'red.500',
   'orange.500',