path: root/components/tweaks.tsx

import {
  CloseIcon,
  RepeatClockIcon,
  ChevronDownIcon,
  SettingsIcon,
  InfoOutlineIcon,
  RepeatIcon,
  ArrowRightIcon,
} from '@chakra-ui/icons'
import {
  Accordion,
  AccordionButton,
  AccordionIcon,
  AccordionItem,
  AccordionPanel,
  Box,
  Button,
  Flex,
  IconButton,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  MenuOptionGroup,
  MenuItemOption,
  Select,
  Slider,
  SliderFilledTrack,
  SliderThumb,
  SliderTrack,
  StackDivider,
  Switch,
  Text,
  Tooltip,
  VStack,
  Heading,
  Collapse,
  Grid,
} from '@chakra-ui/react'
import React, { useState, useContext } from 'react'
import Scrollbars from 'react-custom-scrollbars-2'
import { initialPhysics, initialFilter, initialVisuals, Visuals } from './config'

import { ThemeContext } from '../pages/themecontext'

export interface TweakProps {
  physics: typeof initialPhysics
  setPhysics: any
  threeDim: boolean
  setThreeDim: (newValue: boolean) => void
  filter: typeof initialFilter
  setFilter: any
  visuals: typeof initialVisuals
  setVisuals: any
}

export const Tweaks = (props: TweakProps) => {
  const { physics, setPhysics, threeDim, setThreeDim, filter, setFilter, visuals, setVisuals } =
    props
  const [showTweaks, setShowTweaks] = useState(true)
  const { highlightColor, setHighlightColor } = useContext(ThemeContext)
  const colorList = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'pink', 'purple', 'gray']
  const grays = ['100', '200', '300', '400', '500', '600', '700', '800', '900']
  return (
    <>
      <Box
        position="relative"
        zIndex="overlay"
        marginTop={10}
        marginLeft={10}
        display={showTweaks ? 'none' : 'block'}
      >
        <IconButton
          aria-label="Settings"
          icon={<SettingsIcon />}
          onClick={() => setShowTweaks(true)}
        />
      </Box>
      <Collapse in={showTweaks} animateOpacity>
        <Box
          bg="alt.100"
          w={300}
          marginTop={10}
          marginLeft={10}
          borderRadius="xl"
          maxH={650}
          paddingBottom={5}
          zIndex={300}
          position="relative"
          boxShadow="xl"
        >
          <Box display="flex" justifyContent="space-between" alignItems="center">
            <Tooltip label={'Switch to ' + threeDim ? '2D' : '3D' + ' view'}>
              <Button onClick={() => setThreeDim(!threeDim)} variant="ghost" zIndex="overlay">
                {threeDim ? '3D' : '2D'}
              </Button>
            </Tooltip>
            <Box display="flex" alignItems="center">
              <Tooltip label="Reset settings to defaults">
                <IconButton
                  aria-label="Reset Defaults"
                  icon={<RepeatClockIcon />}
                  onClick={() => setPhysics(initialPhysics)}
                  variant="none"
                  size="sm"
                />
              </Tooltip>
              <IconButton
                size="sm"
                icon={<CloseIcon />}
                aria-label="Close Tweak Panel"
                variant="ghost"
                onClick={() => setShowTweaks(false)}
              />
            </Box>
          </Box>
          <Scrollbars
            autoHeight
            autoHeightMax={600}
            autoHide
            renderThumbVertical={({ style, ...props }) => (
              <Box
                {...props}
                style={{
                  ...style,
                  borderRadius: 10,
                }}
                bg={highlightColor + '.500'}
              />
            )}
          >
            <Accordion allowMultiple allowToggle color="black" paddingRight={2}>
              <AccordionItem>
                <AccordionButton>
                  <AccordionIcon marginRight={2} />
                  <Heading size="sm">Filter</Heading>
                </AccordionButton>
                <AccordionPanel>
                  <VStack
                    spacing={2}
                    justifyContent="flex-start"
                    divider={<StackDivider borderColor="gray.500" />}
                    align="stretch"
                    paddingLeft={7}
                    color="gray.800"
                  >
                    <Flex justifyContent="space-between">
                      <Text>Orphans</Text>
                      <Switch
                        onChange={() => {
                          setFilter({ ...filter, orphans: !filter.orphans })
                        }}
                        isChecked={filter.orphans}
                      ></Switch>
                    </Flex>
                    <Flex justifyContent="space-between">
                      <Text>Link nodes with parent file</Text>
                      <Switch
                        onChange={() => {
                          setFilter({ ...filter, parents: !filter.parents })
                        }}
                        isChecked={filter.parents}
                      ></Switch>
                    </Flex>
                  </VStack>
                </AccordionPanel>
              </AccordionItem>
              <AccordionItem>
                <AccordionButton display="flex" justifyContent="space-between">
                  <Box display="flex">
                    <AccordionIcon marginRight={2} />
                    <Heading size="sm">Physics</Heading>
                  </Box>
                  <Switch
                    id="physicsOn"
                    onChange={() => setPhysics({ ...physics, enabled: !physics.enabled })}
                    isChecked={physics.enabled}
                  />
                </AccordionButton>
                <AccordionPanel>
                  <VStack
                    spacing={2}
                    justifyContent="flex-start"
                    divider={<StackDivider borderColor="gray.500" />}
                    align="stretch"
                    paddingLeft={7}
                    color="gray.800"
                  >
                    <EnableSection
                      label="Gravity"
                      value={physics.gravityOn}
                      onChange={() => setPhysics({ ...physics, gravityOn: !physics.gravityOn })}
                    >
                      <SliderWithInfo
                        label="Strength"
                        value={physics.gravity * 10}
                        onChange={(v) => setPhysics({ ...physics, gravity: v / 10 })}
                      />
                    </EnableSection>
                    <SliderWithInfo
                      value={-physics.charge / 100}
                      onChange={(value) => setPhysics({ ...physics, charge: -100 * value })}
                      label="Repulsive Force"
                    />
                    <EnableSection
                      label="Collision"
                      infoText="Perfomance sap, disable if slow"
                      value={physics.collision}
                      onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
                    >
                      <SliderWithInfo
                        value={physics.collisionStrength / 5}
                        onChange={(value) =>
                          setPhysics({ ...physics, collisionStrength: value * 5 })
                        }
                        label="Collision Radius"
                        infoText="Easy with this one, high values can lead to a real jiggly mess"
                      />
                    </EnableSection>
                    <SliderWithInfo
                      value={physics.linkStrength * 5}
                      onChange={(value) => setPhysics({ ...physics, linkStrength: value / 5 })}
                      label="Link Force"
                    />
                    <SliderWithInfo
                      label="Link Iterations"
                      value={physics.linkIts}
                      onChange={(value) => setPhysics({ ...physics, linkIts: value })}
                      min={0}
                      max={6}
                      step={1}
                      infoText="How many links down the line the physics of a single node affects (Slow)"
                    />
                    <SliderWithInfo
                      label="Viscosity"
                      value={physics.velocityDecay * 10}
                      onChange={(value) => setPhysics({ ...physics, velocityDecay: value / 10 })}
                    />
                  </VStack>
                  <Box>
                    <Accordion allowToggle>
                      <AccordionItem>
                        <AccordionButton>
                          <Text>Advanced</Text>
                          <AccordionIcon marginRight={2} />
                        </AccordionButton>
                        <AccordionPanel>
                          <VStack
                            spacing={2}
                            justifyContent="flex-start"
                            divider={<StackDivider borderColor="gray.500" />}
                            align="stretch"
                            paddingLeft={3}
                            color="gray.800"
                          >
                            <SliderWithInfo
                              label="Stabilization rate"
                              value={physics.alphaDecay * 50}
                              onChange={(value) =>
                                setPhysics({ ...physics, alphaDecay: value / 50 })
                              }
                            />
                            <EnableSection
                              label="Keeps nodes centered"
                              value={physics.centering}
                              onChange={() =>
                                setPhysics({ ...physics, centering: !physics.centering })
                              }
                              infoText="Keeps the nodes in the center of the viewport. If disabled you can drag the nodes anywhere you want."
                            >
                              <SliderWithInfo
                                label="Centering Strength"
                                value={physics.centeringStrength}
                                max={2}
                                step={0.01}
                                onChange={(v) => setPhysics({ ...physics, centeringStrength: v })}
                              />
                            </EnableSection>
                          </VStack>
                        </AccordionPanel>
                      </AccordionItem>
                    </Accordion>
                  </Box>
                  {/* </VStack> */}
                </AccordionPanel>
              </AccordionItem>
              <AccordionItem>
                <AccordionButton>
                  <AccordionIcon marginRight={2} />
                  <Heading size="sm">Visual</Heading>
                </AccordionButton>
                <AccordionPanel>
                  <VStack>
                    <Accordion allowToggle defaultIndex={[0]} width={250} marginLeft={10}>
                      <AccordionItem>
                        <AccordionButton>
                          <Flex justifyContent="space-between" w="100%">
                            <Text>Colors</Text>
                            <AccordionIcon marginRight={2} />
                          </Flex>
                        </AccordionButton>
                        <AccordionPanel>
                          <VStack
                            spacing={2}
                            justifyContent="flex-start"
                            divider={<StackDivider borderColor="gray.500" />}
                            align="stretch"
                            color="gray.800"
                          >
                            <Box>
                              <Flex alignItems="center" justifyContent="space-between">
                                <Text>Nodes</Text>
                                <Tooltip label="Shuffle node colors">
                                  <IconButton
                                    size="sm"
                                    icon={<RepeatIcon />}
                                    variant="ghost"
                                    onClick={() => {
                                      const arr = visuals.nodeColorScheme ?? []
                                      setVisuals({
                                        ...visuals,
                                        //shuffle that guy
                                        //definitely thought of this myself
                                        nodeColorScheme: arr
                                          .map((x) => [Math.random(), x])
                                          .sort(([a], [b]) => a - b)
                                          .map(([_, x]) => x),
                                      })
                                    }}
                                  />
                                </Tooltip>
                                <Tooltip label="Cycle node colors">
                                  <IconButton
                                    icon={<ArrowRightIcon />}
                                    size="sm"
                                    variant="ghost"
                                    onClick={() => {
                                      const arr = visuals.nodeColorScheme ?? []
                                      setVisuals({
                                        ...visuals,
                                        nodeColorScheme: [...arr.slice(1, arr.length), arr[0]],
                                      })
                                    }}
                                  />
                                </Tooltip>
                                <Menu closeOnSelect={false}>
                                  <MenuButton
                                    width={20}
                                    as={Button}
                                    colorScheme=""
                                    color="black"
                                    rightIcon={<ChevronDownIcon />}
                                  >
                                    <Flex
                                      height={6}
                                      width={6}
                                      flexDirection="column"
                                      flexWrap="wrap"
                                    >
                                      {visuals.nodeColorScheme.map((color) => (
                                        <Box
                                          key={color}
                                          bgColor={color + '.500'}
                                          flex="1 1 8px"
                                          borderRadius="2xl"
                                        ></Box>
                                      ))}
                                    </Flex>
                                  </MenuButton>
                                  <MenuList bgColor="gray.200" width={50}>
                                    <MenuOptionGroup
                                      type="checkbox"
                                      defaultValue={visuals.nodeColorScheme}
                                      onChange={(colors) => {
                                        setVisuals({ ...visuals, nodeColorScheme: colors })
                                        console.log(visuals.nodeColorScheme)
                                      }}
                                    >
                                      {colorList.map((color) => (
                                        <MenuItemOption
                                          key={color}
                                          isChecked={visuals.nodeColorScheme.some(
                                            (c) => c === color,
                                          )}
                                          value={color}
                                        >
                                          <Box
                                            justifyContent="space-between"
                                            alignItems="center"
                                            display="flex"
                                          >
                                            <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text>
                                            <Box
                                              bgColor={color + '.500'}
                                              borderRadius="sm"
                                              height={6}
                                              width={6}
                                            ></Box>
                                          </Box>
                                        </MenuItemOption>
                                      ))}
                                    </MenuOptionGroup>
                                  </MenuList>
                                </Menu>
                              </Flex>
                              <Flex alignItems="center" justifyContent="space-between">
                                <Text>Links</Text>
                                <Menu isLazy>
                                  <MenuButton
                                    as={Button}
                                    colorScheme=""
                                    color="black"
                                    rightIcon={<ChevronDownIcon />}
                                  >
                                    <Box>
                                      {visuals.linkColorScheme ? (
                                        <Box
                                          bgColor={'gray.' + visuals.linkColorScheme}
                                          borderRadius="sm"
                                          height={6}
                                          width={6}
                                        ></Box>
                                      ) : (
                                        <Flex
                                          height={6}
                                          width={6}
                                          flexDirection="column"
                                          flexWrap="wrap"
                                        >
                                          {visuals.nodeColorScheme.map((color) => (
                                            <Box
                                              key={color}
                                              bgColor={color + '.500'}
                                              flex="1 1 8px"
                                              borderRadius="2xl"
                                            ></Box>
                                          ))}
                                        </Flex>
                                      )}
                                    </Box>
                                  </MenuButton>
                                  <MenuList bgColor="gray.200" width={50}>
                                    <MenuItem
                                      onClick={() =>
                                        setVisuals({ ...visuals, linkColorScheme: '' })
                                      }
                                      justifyContent="space-between"
                                      alignItems="center"
                                      display="flex"
                                    >
                                      <Text>Match nodes</Text>
                                      <Flex
                                        height={6}
                                        width={6}
                                        flexDirection="column"
                                        flexWrap="wrap"
                                      >
                                        {visuals.nodeColorScheme.map((color) => (
                                          <Box
                                            key={color}
                                            bgColor={color + '.500'}
                                            flex="1 1 8px"
                                            borderRadius="2xl"
                                          ></Box>
                                        ))}
                                      </Flex>
                                    </MenuItem>
                                    {grays.map((color) => (
                                      <MenuItem
                                        key={color}
                                        onClick={() =>
                                          setVisuals({
                                            ...visuals,
                                            linkColorScheme: color,
                                          })
                                        }
                                        justifyContent="space-between"
                                        alignItems="center"
                                        display="flex"
                                      >
                                        <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text>
                                        <Box
                                          bgColor={'gray.' + color}
                                          borderRadius="sm"
                                          height={6}
                                          width={6}
                                        ></Box>
                                      </MenuItem>
                                    ))}
                                  </MenuList>
                                </Menu>
                              </Flex>
                              <Flex alignItems="center" justifyContent="space-between">
                                <Text>Accent</Text>
                                <Menu isLazy>
                                  <MenuButton
                                    as={Button}
                                    colorScheme=""
                                    color="black"
                                    rightIcon={<ChevronDownIcon />}
                                  >
                                    {
                                      <Box
                                        bgColor={highlightColor + '.500'}
                                        borderRadius="sm"
                                        height={6}
                                        width={6}
                                      ></Box>
                                    }
                                  </MenuButton>
                                  <MenuList bgColor="gray.200" width={50}>
                                    {colorList.map((color) => (
                                      <MenuItem
                                        key={color}
                                        onClick={() => setHighlightColor(color)}
                                        justifyContent="space-between"
                                        alignItems="center"
                                        display="flex"
                                      >
                                        <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text>
                                        <Box
                                          bgColor={color + '.500'}
                                          borderRadius="sm"
                                          height={6}
                                          width={6}
                                        ></Box>
                                      </MenuItem>
                                    ))}
                                  </MenuList>
                                </Menu>
                              </Flex>
                              <Flex alignItems="center" justifyContent="space-between">
                                <Text>Link Highlight</Text>
                                <Menu isLazy>
                                  <MenuButton
                                    as={Button}
                                    colorScheme=""
                                    color="black"
                                    rightIcon={<ChevronDownIcon />}
                                  >
                                    {
                                      <Box
                                        bgColor={visuals.linkHighlight + '.500'}
                                        borderRadius="sm"
                                        height={6}
                                        width={6}
                                      ></Box>
                                    }
                                  </MenuButton>
                                  <MenuList bgColor="gray.200" width={50}>
                                    <MenuItem
                                      key={'none'}
                                      onClick={() => setVisuals({ ...visuals, linkHighlight: '' })}
                                      justifyContent="space-between"
                                      alignItems="center"
                                      display="flex"
                                    >
                                      <Text>Match current color</Text>
                                    </MenuItem>
                                    {colorList.map((color) => (
                                      <MenuItem
                                        key={color}
                                        onClick={() =>
                                          setVisuals({ ...visuals, linkHighlight: color })
                                        }
                                        justifyContent="space-between"
                                        alignItems="center"
                                        display="flex"
                                      >
                                        <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text>
                                        <Box
                                          bgColor={color + '.500'}
                                          borderRadius="sm"
                                          height={6}
                                          width={6}
                                        ></Box>
                                      </MenuItem>
                                    ))}
                                  </MenuList>
                                </Menu>
                              </Flex>
                              <Flex alignItems="center" justifyContent="space-between">
                                <Text>Node Highlight</Text>
                                <Menu isLazy>
                                  <MenuButton
                                    as={Button}
                                    colorScheme=""
                                    color="black"
                                    rightIcon={<ChevronDownIcon />}
                                  >
                                    {
                                      <Box
                                        bgColor={visuals.nodeHighlight + '.500'}
                                        borderRadius="sm"
                                        height={6}
                                        width={6}
                                      ></Box>
                                    }
                                  </MenuButton>
                                  <MenuList bgColor="gray.200" width={50}>
                                    <MenuItem
                                      key={'none'}
                                      onClick={() => setVisuals({ ...visuals, nodeHighlight: '' })}
                                      justifyContent="space-between"
                                      alignItems="center"
                                      display="flex"
                                    >
                                      <Text>Match current color</Text>
                                    </MenuItem>
                                    {colorList.map((color) => (
                                      <MenuItem
                                        key={color}
                                        onClick={() =>
                                          setVisuals({ ...visuals, nodeHighlight: color })
                                        }
                                        justifyContent="space-between"
                                        alignItems="center"
                                        display="flex"
                                      >
                                        <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text>
                                        <Box
                                          bgColor={color + '.500'}
                                          borderRadius="sm"
                                          height={6}
                                          width={6}
                                        ></Box>
                                      </MenuItem>
                                    ))}
                                  </MenuList>
                                </Menu>
                              </Flex>
                              <Flex alignItems="center" justifyContent="space-between">
                                <Text>Background</Text>
                                <Menu isLazy>
                                  <MenuButton
                                    as={Button}
                                    colorScheme=""
                                    color="black"
                                    rightIcon={<ChevronDownIcon />}
                                  >
                                    {
                                      <Box
                                        bgColor={'gray.' + visuals.backgroundColor}
                                        borderRadius="sm"
                                        height={6}
                                        width={6}
                                      ></Box>
                                    }
                                  </MenuButton>
                                  <MenuList bgColor="gray.200" width={50}>
                                    {grays.map((color) => (
                                      <MenuItem
                                        key={color}
                                        onClick={() =>
                                          setVisuals({ ...visuals, backgroundColor: color })
                                        }
                                        justifyContent="space-between"
                                        alignItems="center"
                                        display="flex"
                                      >
                                        <Text>{color[0]!.toUpperCase() + color!.slice(1)}</Text>
                                        <Box
                                          bgColor={'gray.' + color}
                                          borderRadius="sm"
                                          height={6}
                                          width={6}
                                        ></Box>
                                      </MenuItem>
                                    ))}
                                  </MenuList>
                                </Menu>
                              </Flex>
                            </Box>
                          </VStack>
                        </AccordionPanel>
                      </AccordionItem>
                    </Accordion>
                    <VStack
                      spacing={2}
                      justifyContent="flex-start"
                      divider={<StackDivider borderColor="gray.500" />}
                      align="stretch"
                      paddingLeft={7}
                      color="gray.800"
                    >
                      <SliderWithInfo
                        label="Node size"
                        value={physics.nodeRel}
                        onChange={(value) => setPhysics({ ...physics, nodeRel: value })}
                      />
                      {threeDim && (
                        <>
                          <SliderWithInfo
                            label="Node opacity"
                            value={physics.nodeOpacity}
                            min={0}
                            max={1}
                            onChange={(value) => setPhysics({ ...physics, nodeOpacity: value })}
                          />
                          <SliderWithInfo
                            label="Node resolution"
                            value={physics.nodeResolution}
                            min={5}
                            max={32}
                            step={1}
                            onChange={(value) => setPhysics({ ...physics, nodeResolution: value })}
                          />
                        </>
                      )}
                      <SliderWithInfo
                        label="Link width"
                        value={physics.linkWidth}
                        onChange={(value) => setPhysics({ ...physics, linkWidth: value })}
                      />
                      {threeDim && (
                        <SliderWithInfo
                          label="Link opacity"
                          min={0}
                          max={1}
                          value={physics.linkOpacity}
                          onChange={(value) => setPhysics({ ...physics, linkOpacity: value })}
                        />
                      )}
                      <Box>
                        <Flex alignItems="center" justifyContent="space-between">
                          <Text>Labels</Text>
                          <Menu>
                            <MenuButton
                              as={Button}
                              colorScheme=""
                              color="black"
                              rightIcon={<ChevronDownIcon />}
                            >
                              {!physics.labels
                                ? 'Never'
                                : physics.labels < 2
                                ? 'On Highlight'
                                : 'Always'}
                            </MenuButton>
                            <MenuList bgColor="gray.200">
                              <MenuItem onClick={() => setPhysics({ ...physics, labels: 0 })}>
                                Never
                              </MenuItem>
                              <MenuItem onClick={() => setPhysics({ ...physics, labels: 1 })}>
                                On Highlight
                              </MenuItem>
                              <MenuItem onClick={() => setPhysics({ ...physics, labels: 2 })}>
                                Always
                              </MenuItem>
                            </MenuList>
                          </Menu>
                        </Flex>
                        <Collapse in={physics.labels > 1} animateOpacity>
                          <Box paddingLeft={4} paddingTop={2}>
                            <SliderWithInfo
                              label="Label Appearance Scale"
                              value={physics.labelScale * 5}
                              onChange={(value) =>
                                setPhysics({ ...physics, labelScale: value / 5 })
                              }
                            />
                          </Box>
                        </Collapse>
                      </Box>
                      <EnableSection
                        label="Directional Particles"
                        value={physics.particles}
                        onChange={() => setPhysics({ ...physics, particles: !physics.particles })}
                      >
                        <SliderWithInfo
                          label="Particle Number"
                          value={physics.particlesNumber}
                          max={5}
                          step={1}
                          onChange={(value) => setPhysics({ ...physics, particlesNumber: value })}
                        />
                        <SliderWithInfo
                          label="Particle Size"
                          value={physics.particlesWidth}
                          onChange={(value) => setPhysics({ ...physics, particlesWidth: value })}
                        />
                      </EnableSection>
                      <EnableSection
                        label="Highlight"
                        onChange={() => setPhysics({ ...physics, highlight: !physics.highlight })}
                        value={physics.highlight}
                      >
                        <VStack
                          spacing={1}
                          justifyContent="flex-start"
                          divider={<StackDivider borderColor="gray.400" />}
                          align="stretch"
                          paddingLeft={0}
                        >
                          <SliderWithInfo
                            label="Highlight Link Thickness"
                            value={physics.highlightLinkSize}
                            onChange={(value) =>
                              setPhysics({ ...physics, highlightLinkSize: value })
                            }
                          />
                          <SliderWithInfo
                            label="Highlight Node Size"
                            value={physics.highlightNodeSize}
                            onChange={(value) =>
                              setPhysics({ ...physics, highlightNodeSize: value })
                            }
                          />
                          {/*<Flex justifyContent="space-between">
                          <Text> Highlight node color </Text>
                        </Flex>
                        <Flex justifyContent="space-between">
                          <Text> Highlight link color </Text>
                            </Flex>*/}
                          <EnableSection
                            label="Highlight Animation"
                            onChange={() => {
                              setPhysics({ ...physics, highlightAnim: !physics.highlightAnim })
                            }}
                            value={physics.highlightAnim}
                          >
                            <SliderWithInfo
                              label="Animation speed"
                              onChange={(v) => setPhysics({ ...physics, animationSpeed: v })}
                              value={physics.animationSpeed}
                              infoText="Slower speed has a chance of being buggy"
                              min={50}
                              max={1000}
                              step={10}
                            />
                            <Select
                              placeholder={physics.algorithmName}
                              onChange={(v) => {
                                setPhysics({ ...physics, algorithmName: v.target.value })
                              }}
                            >
                              {physics.algorithmOptions.map((opt: string) => (
                                <option key={opt} value={opt}>
                                  {opt}
                                </option>
                              ))}
                            </Select>
                            {/* <DropDownMenu
                    displayValue={physics.algorithmName}
                    textArray={physics.algorithmOptions}
                    onClickArray={physics.algorithmOptions.map((option) =>
                      setPhysics({ ...physics, algorithmName: { option } }),
                    )}
                  /> */}
                          </EnableSection>
                        </VStack>
                      </EnableSection>
                    </VStack>
                  </VStack>
                </AccordionPanel>
              </AccordionItem>
              <AccordionItem>
                <AccordionButton>
                  <AccordionIcon marginRight={2} />
                  <Heading size="sm">Behavior</Heading>
                </AccordionButton>
                <AccordionPanel>
                  <VStack
                    spacing={2}
                    justifyContent="flex-start"
                    divider={<StackDivider borderColor="gray.500" />}
                    align="stretch"
                    paddingLeft={7}
                    color="gray.800"
                  ></VStack>
                </AccordionPanel>
              </AccordionItem>
            </Accordion>
          </Scrollbars>
        </Box>
      </Collapse>
    </>
  )
}

export interface InfoTooltipProps {
  infoText?: string | boolean
}
export const InfoTooltip = (props: InfoTooltipProps) => {
  const { infoText } = props
  return (
    <Box paddingLeft="1">
      <Tooltip label={infoText} placement="top" color="gray.100" bg="gray.800" hasArrow>
        <InfoOutlineIcon />
      </Tooltip>
    </Box>
  )
}
export interface SliderWithInfoProps {
  min?: number
  max?: number
  step?: number
  value: number
  onChange: (arg0: number) => void
  label: string
  infoText?: string
}
export const SliderWithInfo = ({
  min = 0,
  max = 10,
  step = 0.1,
  value = 1,
  ...rest
}: SliderWithInfoProps) => {
  const { onChange, label, infoText } = rest
  const { highlightColor } = useContext(ThemeContext)
  return (
    <Box>
      <Box display="flex" alignItems="flex-end">
        <Text>{label}</Text>
        {infoText && <InfoTooltip infoText={infoText} />}
      </Box>
      <Slider value={value} onChange={onChange} min={min} max={max} step={step}>
        <SliderTrack>
          <SliderFilledTrack />
        </SliderTrack>
        <Tooltip bg={highlightColor + '.500'} label={value.toFixed(1)}>
          <SliderThumb bg="white" />
        </Tooltip>
      </Slider>
    </Box>
  )
}

export interface EnableSectionProps {
  label: string
  value: boolean | number
  onChange: () => void
  infoText?: string
  children: React.ReactNode
}

export const EnableSection = (props: EnableSectionProps) => {
  const { value, onChange, label, infoText, children } = props
  return (
    <Box>
      <Box display="flex" justifyContent="space-between">
        <Box display="flex" alignItems="center">
          <Text>{label}</Text>
          {infoText && <InfoTooltip infoText={infoText} />}
        </Box>
        <Switch isChecked={!!value} onChange={onChange} />
      </Box>
      <Collapse in={!!value} animateOpacity>
        <Box paddingLeft={4} paddingTop={2}>
          {children}
        </Box>
      </Collapse>
    </Box>
  )
}

export interface DropDownMenuProps {
  textArray: string[]
  onClickArray: (() => void)[]
  displayValue: string
}

export const DropDownMenu = (props: DropDownMenuProps) => {
  const { textArray, onClickArray, displayValue } = props
  return (
    <Menu>
      <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
        {displayValue}
      </MenuButton>
      <MenuList>
        {textArray.map((option, i) => {
          ;<MenuItem onClick={onClickArray[i]}> {option} </MenuItem>
        })}
      </MenuList>
    </Menu>
  )
}