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
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 (
)
}