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' 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) const setVisualsCallback = useCallback((val) => setVisuals(val), []) 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 Colors } align="stretch" color="gray.800" > Nodes } variant="ghost" onClick={() => { const arr = visuals.nodeColorScheme ?? [] setVisuals({ ...visuals, //shuffle that guy //definitely thought of this myself nodeColorScheme: arr .map((x: any) => [Math.random(), x]) .sort(([a], [b]) => a - b) .map(([_, x]) => x), }) }} /> } size="sm" variant="ghost" onClick={() => { const arr = visuals.nodeColorScheme ?? [] setVisuals({ ...visuals, nodeColorScheme: [...arr.slice(1, arr.length), arr[0]], }) }} /> } > {visuals.nodeColorScheme.map((color) => ( ))} {' '} { if (!colors.length) { return } setVisuals({ ...visuals, nodeColorScheme: colors }) }} > {colorList.map((color) => ( c === color)} value={color} isDisabled={ visuals.nodeColorScheme.length === 1 && visuals.nodeColorScheme[0] === color } > ))} Links } > {visuals.linkColorScheme ? ( ) : ( {visuals.nodeColorScheme.map((color) => ( ))} )} {' '} setVisuals({ ...visuals, linkColorScheme: '' })} justifyContent="space-between" alignItems="center" display="flex" > {visuals.nodeColorScheme.map((color) => ( ))} {colorList.map((color) => ( setVisuals({ ...visuals, linkColorScheme: color, }) } justifyContent="space-between" alignItems="center" display="flex" > ))} Accent } > { } {' '} {colorList.map((color) => ( setHighlightColor(color)} justifyContent="space-between" alignItems="center" display="flex" > ))} Nodes & Links } align="stretch" color="gray.800" > setVisuals({ ...visuals, nodeRel: value })} /> setVisuals({ ...visuals, nodeSizeLinks: value })} /> setVisuals((prev: typeof initialVisuals) => ({ ...prev, nodeZoomSize: value, })) } /> {threeDim && ( <> setVisuals({ ...visuals, nodeOpacity: value })} /> setVisuals({ ...visuals, nodeResolution: value }) } /> )} setVisuals({ ...visuals, linkWidth: value })} /> {threeDim && ( setVisuals({ ...visuals, linkOpacity: value })} /> )} setVisuals({ ...visuals, arrows: !visuals.arrows })} > setVisuals({ ...visuals, arrowsLength: 10 * value }) } /> setVisuals({ ...visuals, arrowsPos: value })} /> setVisuals({ ...visuals, particles: !visuals.particles }) } > setVisuals({ ...visuals, particlesNumber: value }) } /> setVisuals({ ...visuals, particlesWidth: value }) } /> {/* } align="stretch" paddingLeft={7} color="gray.800" > */} Labels } align="stretch" color="gray.800" > Show labels } > {!visuals.labels ? 'Never' : visuals.labels < 2 ? 'On Highlight' : 'Always'} {' '} setVisuals({ ...visuals, labels: 0 })}> Never setVisuals({ ...visuals, labels: 1 })}> On Highlight setVisuals({ ...visuals, labels: 2 })}> Always setVisuals({ ...visuals, labels: 3 })}> Always (even in 3D) } align="stretch" paddingLeft={2} color="gray.800" > setVisuals({ ...visuals, labelFontSize: value })} /> setVisuals({ ...visuals, labelLength: value })} /> setVisuals({ ...visuals, labelWordWrap: value })} /> setVisuals({ ...visuals, labelLineSpace: value }) } /> { console.log(visuals.labelBackgroundOpacity) setVisuals({ ...visuals, labelBackgroundOpacity: value }) }} min={0} max={1} step={0.01} /> 1} animateOpacity> setVisuals({ ...visuals, labelScale: value / 5 }) } /> Highlighting } align="stretch" color="gray.800" > setVisuals({ ...visuals, highlight: !visuals.highlight }) } value={visuals.highlight} > } align="stretch" paddingLeft={0} > setVisuals({ ...visuals, highlightLinkSize: value }) } /> setVisuals({ ...visuals, highlightNodeSize: value }) } /> setVisuals({ ...visuals, highlightFade: value }) } /> {/* Highlight node color Highlight link color */} { setVisuals({ ...visuals, highlightAnim: !visuals.highlightAnim }) }} value={visuals.highlightAnim} > setVisuals({ ...visuals, animationSpeed: v })} value={visuals.animationSpeed} infoText="Slower speed has a chance of being buggy" min={50} max={1000} step={10} /> Citations } align="stretch" color="gray.800" > setVisuals({ ...visuals, citeDashes: !visuals.citeDashes }) } > setVisuals({ ...visuals, citeDashLength: value * 10 }) } /> setVisuals({ ...visuals, citeGapLength: value * 5 }) } /> setVisuals({ ...visuals, refDashes: !visuals.refDashes }) } > setVisuals({ ...visuals, refDashLength: value * 10 }) } /> setVisuals({ ...visuals, refGapLength: value * 5 }) } /> Behavior } align="stretch" paddingLeft={7} color="gray.800" > Expand Node } colorScheme="" color="black" > {mouse.local ? mouse.local[0]!.toUpperCase() + mouse.local!.slice(1) : 'Never'} {' '} setMouse({ ...mouse, local: '' })}>Never setMouse({ ...mouse, local: 'click' })}> Click setMouse({ ...mouse, local: 'double' })}> Double Click setMouse({ ...mouse, local: 'right' })}> Right Click Open in Emacs } colorScheme="" color="black" > {mouse.follow ? mouse.follow[0]!.toUpperCase() + mouse.follow!.slice(1) : 'Never'} {' '} setMouse({ ...mouse, follow: '' })}> Never setMouse({ ...mouse, follow: 'click' })}> Click setMouse({ ...mouse, follow: 'double' })}> Double Click setMouse({ ...mouse, follow: 'right' })}> Right Click Follow Emacs by... } colorScheme="" color="black" > {behavior.follow[0].toUpperCase() + behavior.follow.slice(1)} {' '} setBehavior({ ...behavior, follow: 'color' })}> Just coloring the currently opened node setBehavior({ ...behavior, follow: 'local' })}> Opening the local graph setBehavior({ ...behavior, follow: 'zoom' })}> Zooming to the current node Local graph } colorScheme="" color="black" > {behavior.localSame === 'add' ? 'Add' : 'Replace'} {' '} setBehavior({ ...behavior, localSame: 'replace' })} > Open that nodes graph setBehavior({ ...behavior, localSame: 'add' })}> Add node to 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 ( }> {displayValue} {' '} {textArray.map((option, i) => { ; {option} })} ) }