import {
CloseIcon,
RepeatClockIcon,
ChevronDownIcon,
SettingsIcon,
RepeatIcon,
ArrowRightIcon,
} from '@chakra-ui/icons'
import {
Accordion,
AccordionButton,
AccordionIcon,
AccordionItem,
AccordionPanel,
Box,
Button,
Flex,
IconButton,
Menu,
MenuButton,
MenuItem,
MenuList,
MenuOptionGroup,
MenuItemOption,
Select,
StackDivider,
Switch,
Text,
Tooltip,
VStack,
Heading,
Collapse,
Portal,
} from '@chakra-ui/react'
import React, { useContext, useCallback } from 'react'
import Scrollbars from 'react-custom-scrollbars-2'
import {
initialPhysics,
initialFilter,
initialVisuals,
initialMouse,
initialBehavior,
TagColors,
colorList,
} from './config'
import FilterPanel from './FilterPanel'
import { ColorMenu } from './ColorMenu'
import { ThemeContext } from '../util/themecontext'
import { usePersistantState } from '../util/persistant-state'
import { SliderWithInfo } from './SliderWithInfo'
import { EnableSection } from './EnableSection'
import { InfoTooltip } from './InfoTooltip'
import { PhysicsPanel } from './PhysicsPanel'
import { VisualsPanel } from './VisualsPanel'
export interface TweakProps {
physics: typeof initialPhysics
setPhysics: any
threeDim: boolean
setThreeDim: (newValue: boolean) => void
filter: typeof initialFilter
setFilter: any
visuals: typeof initialVisuals
setVisuals: any
mouse: typeof initialMouse
setMouse: any
behavior: typeof initialBehavior
setBehavior: any
tags: string[]
tagColors: TagColors
setTagColors: any
}
export const Tweaks = (props: TweakProps) => {
const {
physics,
setPhysics,
threeDim,
setThreeDim,
filter,
setFilter,
visuals,
setVisuals,
mouse,
setMouse,
behavior,
setBehavior,
tags,
tagColors,
setTagColors,
} = props
const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false)
const { highlightColor, setHighlightColor } = useContext(ThemeContext)
return !showTweaks ? (
}
onClick={() => setShowTweaks(true)}
/>
) : (
}
onClick={() => {
setVisuals(initialVisuals)
setFilter(initialFilter)
setMouse(initialMouse)
setPhysics(initialPhysics)
setBehavior(initialBehavior)
}}
variant="none"
size="sm"
/>
}
aria-label="Close Tweak Panel"
variant="ghost"
onClick={() => setShowTweaks(false)}
/>
(
)}
>
Filter
Physics
Visual
Behavior
}
align="stretch"
paddingLeft={7}
color="gray.800"
>
Expand Node
Open in Emacs
Follow Emacs by...
Local graph
setBehavior({ ...behavior, zoomSpeed: value })}
/>
setBehavior({ ...behavior, zoomPadding: value })}
infoText="How much to zoom out to accomodate all nodes when changing the view."
/>
)
}
export interface DropDownMenuProps {
textArray: string[]
onClickArray: (() => void)[]
displayValue: string
}
export const DropDownMenu = (props: DropDownMenuProps) => {
const { textArray, onClickArray, displayValue } = props
return (
)
}