import { RepeatClockIcon, ChevronDownIcon, SettingsIcon, InfoOutlineIcon } from '@chakra-ui/icons' import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Button, CloseButton, Flex, IconButton, Menu, MenuButton, MenuItem, MenuList, Select, Slider, SliderFilledTrack, SliderThumb, SliderTrack, StackDivider, Switch, Text, Tooltip, VStack, } from '@chakra-ui/react' import { useState } from 'react' import Scrollbars from 'react-custom-scrollbars-2' import { initialPhysics, initialFilter } from './config' export interface TweakProps { physics: typeof initialPhysics setPhysics: any threeDim: boolean setThreeDim: (newValue: boolean) => void filter: typeof initialFilter setFilter: any } export const Tweaks = (props: TweakProps) => { const { physics, setPhysics, threeDim, filter, setFilter } = props const [showTweaks, setShowTweaks] = useState(true) if (!showTweaks) { return } onClick={() => setShowTweaks(true)} /> } return ( } onClick={() => setPhysics(initialPhysics)} colorScheme="purple" /> setShowTweaks(false)} /> ( )} > Filter Kill orphans { setFilter({ ...filter, orphans: !filter.orphans }) }} isChecked={filter.orphans} > Link nodes with parent file { setFilter({ ...filter, parents: !filter.parents }) }} isChecked={filter.parents} > Physics setPhysics({ ...physics, enabled: !physics.enabled })} isChecked={physics.enabled} colorScheme="purple" /> } align="stretch" > setPhysics({ ...physics, gravityOn: !physics.gravityOn })} > setPhysics({ ...physics, gravity: v / 10 })} /> setPhysics({ ...physics, charge: -100 * value })} label="Repulsive Force" /> setPhysics({ ...physics, collision: !physics.collision })} > setPhysics({ ...physics, collisionStrength: value / 10 })} label="Strength" /> setPhysics({ ...physics, linkStrength: value / 5 })} label="Link Force" /> 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)" /> setPhysics({ ...physics, velocityDecay: value / 10 })} /> Advanced } align="stretch" > setPhysics({ ...physics, iterations: v })} infoText="Number of times the physics simulation iterates per simulation step" /> setPhysics({ ...physics, alphaDecay: value / 50 })} /> {/* */} Visual } align="stretch" > setPhysics({ ...physics, colorful: !physics.colorful })} value={physics.colorful} > Child setPhysics({ ...physics, nodeRel: value })} /> setPhysics({ ...physics, linkWidth: value })} /> setPhysics({ ...physics, labels: !physics.labels })} > setPhysics({ ...physics, labelScale: value / 5 })} /> setPhysics({ ...physics, particles: !physics.particles })} > setPhysics({ ...physics, particlesNumber: value })} /> setPhysics({ ...physics, particlesWidth: value })} /> { setPhysics({ ...physics, highlightAnim: !physics.highlightAnim }) }} value={physics.highlightAnim} > setPhysics({ ...physics, animationSpeed: v })} value={physics.animationSpeed} infoText="Slower speed has a chance of being buggy" min={50} max={1000} step={10} /> {/* setPhysics({ ...physics, algorithmName: { option } }), )} /> */} setPhysics({ ...physics, highlight: !physics.highlight })} value={physics.highlight} > setPhysics({ ...physics, highlightLinkSize: value })} /> setPhysics({ ...physics, highlightNodeSize: value })} /> Highlight node color Highlight link color Behavior } align="stretch" > Hover Higlight }> {physics.hover} Off On Click Double-click ) } export interface InfoTooltipProps { infoText?: string | boolean } export const InfoTooltip = (props: InfoTooltipProps) => { const { infoText } = props return ( ) } 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 return ( {label} {infoText && } ) } 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 ( {label} {infoText && } {value && children} ) } export interface DropDownMenuProps { textArray: string[] onClickArray: any displayValue: string } export const DropDownMenu = (props: DropDownMenuProps) => { const { textArray, onClickArray, displayValue } = props return ( }> {displayValue} {textArray.map((option, i) => { ; {option} })} ) }