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 ( } align="stretch" color="gray.800" > setVisuals((visuals: typeof initialVisuals) => ({ ...visuals, highlight: !visuals.highlight, })) } value={visuals.highlight} > } align="stretch" paddingLeft={0} > setVisuals((visuals: typeof initialVisuals) => ({ ...visuals, highlightLinkSize: value, })) } /> setVisuals((visuals: typeof initialVisuals) => ({ ...visuals, highlightNodeSize: value, })) } /> setVisuals((visuals: typeof initialVisuals) => ({ ...visuals, highlightFade: value, })) } /> { setVisuals((visuals: typeof initialVisuals) => ({ ...visuals, highlightAnim: !visuals.highlightAnim, })) }} value={visuals.highlightAnim} > 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} /> ) }