1 files changed, 116 insertions, 0 deletions
diff --git a/components/HighlightingPanel.tsx b/components/HighlightingPanel.tsx
new file mode 100644
index 0000000..b3900e2
--- /dev/null
+++ b/components/HighlightingPanel.tsx
@@ -0,0 +1,116 @@
+import { Box, Select, StackDivider, VStack } from '@chakra-ui/react'
+import React from 'react'
+import { initialVisuals } from './config'
+import { EnableSection } from './EnableSection'
+import { SliderWithInfo } from './SliderWithInfo'
+
+export interface HighlightingPanelProps {
+  visuals: typeof initialVisuals
+  setVisuals: any
+}
+export const HighlightingPanel = (props: HighlightingPanelProps) => {
+  const { visuals, setVisuals } = props
+  return (
+    <VStack
+      spacing={2}
+      justifyContent="flex-start"
+      divider={<StackDivider borderColor="gray.500" />}
+      align="stretch"
+      color="gray.800"
+    >
+      <Box>
+        <EnableSection
+          label="Highlight"
+          onChange={() =>
+            setVisuals((visuals: typeof initialVisuals) => ({
+              ...visuals,
+              highlight: !visuals.highlight,
+            }))
+          }
+          value={visuals.highlight}
+        >
+          <VStack
+            spacing={1}
+            justifyContent="flex-start"
+            divider={<StackDivider borderColor="gray.400" />}
+            align="stretch"
+            paddingLeft={0}
+          >
+            <SliderWithInfo
+              label="Highlight Link Thickness"
+              value={visuals.highlightLinkSize}
+              onChange={(value) =>
+                setVisuals((visuals: typeof initialVisuals) => ({
+                  ...visuals,
+                  highlightLinkSize: value,
+                }))
+              }
+            />
+            <SliderWithInfo
+              label="Highlight Node Size"
+              value={visuals.highlightNodeSize}
+              onChange={(value) =>
+                setVisuals((visuals: typeof initialVisuals) => ({
+                  ...visuals,
+                  highlightNodeSize: value,
+                }))
+              }
+            />
+            <SliderWithInfo
+              min={0}
+              max={1}
+              label="Highlight Fade"
+              value={visuals.highlightFade}
+              onChange={(value) =>
+                setVisuals((visuals: typeof initialVisuals) => ({
+                  ...visuals,
+                  highlightFade: value,
+                }))
+              }
+            />
+            <EnableSection
+              label="Highlight Animation"
+              onChange={() => {
+                setVisuals((visuals: typeof initialVisuals) => ({
+                  ...visuals,
+                  highlightAnim: !visuals.highlightAnim,
+                }))
+              }}
+              value={visuals.highlightAnim}
+            >
+              <SliderWithInfo
+                label="Animation speed"
+                onChange={(v) =>
+                  setVisuals((visuals: typeof initialVisuals) => ({
+                    ...visuals,
+                    animationSpeed: v,
+                  }))
+                }
+                value={visuals.animationSpeed}
+                infoText="Slower speed has a chance of being buggy"
+                min={50}
+                max={1000}
+                step={10}
+              />
+              <Select
+                placeholder={visuals.algorithmName}
+                onChange={(v) => {
+                  setVisuals((visuals: typeof initialVisuals) => ({
+                    ...visuals,
+                    algorithmName: v.target.value,
+                  }))
+                }}
+              >
+                {visuals.algorithmOptions.map((opt: string) => (
+                  <option key={opt} value={opt}>
+                    {opt}
+                  </option>
+                ))}
+              </Select>
+            </EnableSection>
+          </VStack>
+        </EnableSection>
+      </Box>
+    </VStack>
+  )
+}