summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-09-21 20:38:12 +0200
committerThomas F. K. Jorna <[email protected]>2021-09-21 20:38:39 +0200
commitcffebb920e7b29985fa90979dbdb56f795980f41 (patch)
treee5fa8af6f402672c272b356180843b9a208c5d11 /components
parent078ee08b62fbd2f260e3209b205d957107a1f42a (diff)
chore: separated out visuals panel and some subpanels
Diffstat (limited to 'components')
-rw-r--r--components/tweaks.tsx768
1 files changed, 8 insertions, 760 deletions
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index d6f5ba1..1a7e72c 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -54,6 +54,7 @@ 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
@@ -94,8 +95,6 @@ export const Tweaks = (props: TweakProps) => {
const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false)
const { highlightColor, setHighlightColor } = useContext(ThemeContext)
- const setVisualsCallback = useCallback((val) => setVisuals(val), [])
-
return !showTweaks ? (
<Box
position="absolute"
@@ -212,764 +211,13 @@ export const Tweaks = (props: TweakProps) => {
<Heading size="sm">Visual</Heading>
</AccordionButton>
<AccordionPanel>
- <VStack justifyContent="flex-start" align="stretch">
- <Accordion allowToggle defaultIndex={[0]} paddingLeft={3}>
- <AccordionItem>
- <AccordionButton>
- <Flex justifyContent="space-between" w="100%">
- <Text>Colors</Text>
- <AccordionIcon marginRight={2} />
- </Flex>
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- color="gray.800"
- >
- <Box>
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Nodes</Text>
- <Tooltip label="Shuffle node colors">
- <IconButton
- aria-label="Shuffle node colors"
- size="sm"
- icon={<RepeatIcon />}
- 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),
- })
- }}
- />
- </Tooltip>
- <Tooltip label="Cycle node colors">
- <IconButton
- aria-label="Shift node colors"
- icon={<ArrowRightIcon />}
- size="sm"
- variant="ghost"
- onClick={() => {
- const arr = visuals.nodeColorScheme ?? []
- setVisuals({
- ...visuals,
- nodeColorScheme: [...arr.slice(1, arr.length), arr[0]],
- })
- }}
- />
- </Tooltip>
- <Menu isLazy placement="right" closeOnSelect={false} matchWidth>
- <MenuButton
- width={20}
- as={Button}
- colorScheme=""
- color="black"
- rightIcon={<ChevronDownIcon />}
- >
- <Flex height={6} width={6} flexDirection="column" flexWrap="wrap">
- {visuals.nodeColorScheme.map((color) => (
- <Box
- key={color}
- bgColor={color}
- flex="1 1 8px"
- borderRadius="2xl"
- ></Box>
- ))}
- </Flex>
- </MenuButton>
- <Portal>
- {' '}
- <MenuList minW={10} zIndex="popover" bgColor="gray.200">
- <MenuOptionGroup
- width={500}
- type="checkbox"
- defaultValue={visuals.nodeColorScheme}
- onChange={(colors) => {
- if (!colors.length) {
- return
- }
- setVisuals({ ...visuals, nodeColorScheme: colors })
- }}
- >
- {colorList.map((color) => (
- <MenuItemOption
- key={color}
- isChecked={visuals.nodeColorScheme.some((c) => c === color)}
- value={color}
- isDisabled={
- visuals.nodeColorScheme.length === 1 &&
- visuals.nodeColorScheme[0] === color
- }
- >
- <Box
- justifyContent="space-between"
- alignItems="center"
- display="flex"
- >
- <Box
- bgColor={color}
- borderRadius="sm"
- height={6}
- width={6}
- ></Box>
- </Box>
- </MenuItemOption>
- ))}
- </MenuOptionGroup>
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Links</Text>
- <Menu isLazy placement="right">
- <MenuButton
- as={Button}
- colorScheme=""
- color="black"
- rightIcon={<ChevronDownIcon />}
- >
- <Box>
- {visuals.linkColorScheme ? (
- <Box
- bgColor={visuals.linkColorScheme}
- borderRadius="sm"
- height={6}
- width={6}
- ></Box>
- ) : (
- <Flex
- height={6}
- width={6}
- flexDirection="column"
- flexWrap="wrap"
- >
- {visuals.nodeColorScheme.map((color) => (
- <Box
- key={color}
- bgColor={color}
- flex="1 1 8px"
- borderRadius="2xl"
- ></Box>
- ))}
- </Flex>
- )}
- </Box>
- </MenuButton>
- <Portal>
- {' '}
- <MenuList minW={10} zIndex="popover" bgColor="gray.200">
- <MenuItem
- onClick={() => setVisuals({ ...visuals, linkColorScheme: '' })}
- justifyContent="space-between"
- alignItems="center"
- display="flex"
- >
- <Flex
- height={6}
- width={6}
- flexDirection="column"
- flexWrap="wrap"
- >
- {visuals.nodeColorScheme.map((color) => (
- <Box
- key={color}
- bgColor={color}
- flex="1 1 8px"
- borderRadius="2xl"
- ></Box>
- ))}
- </Flex>
- </MenuItem>
- {colorList.map((color) => (
- <MenuItem
- key={color}
- onClick={() =>
- setVisuals({
- ...visuals,
- linkColorScheme: color,
- })
- }
- justifyContent="space-between"
- alignItems="center"
- display="flex"
- >
- <Box
- bgColor={color}
- borderRadius="sm"
- height={6}
- width={6}
- ></Box>
- </MenuItem>
- ))}
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Accent</Text>
- <Menu isLazy placement="right">
- <MenuButton
- as={Button}
- colorScheme=""
- color="black"
- rightIcon={<ChevronDownIcon />}
- >
- {
- <Box
- bgColor={highlightColor}
- borderRadius="sm"
- height={6}
- width={6}
- ></Box>
- }
- </MenuButton>
- <Portal>
- {' '}
- <MenuList minW={10} zIndex="popover" bgColor="gray.200">
- {colorList.map((color) => (
- <MenuItem
- key={color}
- onClick={() => setHighlightColor(color)}
- justifyContent="space-between"
- alignItems="center"
- display="flex"
- >
- <Box
- bgColor={color}
- borderRadius="sm"
- height={6}
- width={6}
- ></Box>
- </MenuItem>
- ))}
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- <ColorMenu
- colorList={colorList}
- label="Link highlight"
- setVisuals={setVisualsCallback}
- value="linkHighlight"
- visValue={visuals.linkHighlight}
- />
- <ColorMenu
- colorList={colorList}
- label="Node highlight"
- setVisuals={setVisualsCallback}
- value="nodeHighlight"
- visValue={visuals.nodeHighlight}
- />
- <ColorMenu
- colorList={colorList}
- label="Background"
- setVisuals={setVisualsCallback}
- value="backgroundColor"
- visValue={visuals.backgroundColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Emacs node"
- setVisuals={setVisualsCallback}
- value="emacsNodeColor"
- visValue={visuals.emacsNodeColor}
- />
- </Box>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton>
- <Flex justifyContent="space-between" w="100%">
- <Text>Nodes & Links</Text>
- <AccordionIcon marginRight={2} />
- </Flex>
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- color="gray.800"
- >
- <Box>
- <SliderWithInfo
- label="Node size"
- value={visuals.nodeRel}
- onChange={(value) => setVisuals({ ...visuals, nodeRel: value })}
- />
- <SliderWithInfo
- label="Node connections size scale"
- value={visuals.nodeSizeLinks}
- min={0}
- max={2}
- onChange={(value) => setVisuals({ ...visuals, nodeSizeLinks: value })}
- />
- <SliderWithInfo
- label="Node zoom invariance"
- value={visuals.nodeZoomSize}
- min={0}
- max={2}
- infoText="How much the graph will try to keep the nodesize consistent across zoom scales. 0 is no consistency, node will always be their true size, 1 is linear, 2 is quadratic."
- onChange={(value) =>
- setVisuals((prev: typeof initialVisuals) => ({
- ...prev,
- nodeZoomSize: value,
- }))
- }
- />
- {threeDim && (
- <>
- <SliderWithInfo
- label="Node opacity"
- value={visuals.nodeOpacity}
- min={0}
- max={1}
- onChange={(value) => setVisuals({ ...visuals, nodeOpacity: value })}
- />
- <SliderWithInfo
- label="Node resolution"
- value={visuals.nodeResolution}
- min={5}
- max={32}
- step={1}
- onChange={(value) =>
- setVisuals({ ...visuals, nodeResolution: value })
- }
- />
- </>
- )}
- <SliderWithInfo
- label="Link width"
- value={visuals.linkWidth}
- onChange={(value) => setVisuals({ ...visuals, linkWidth: value })}
- />
- {threeDim && (
- <SliderWithInfo
- label="Link opacity"
- min={0}
- max={1}
- value={visuals.linkOpacity}
- onChange={(value) => setVisuals({ ...visuals, linkOpacity: value })}
- />
- )}
- <EnableSection
- label="Link arrows"
- value={visuals.arrows}
- onChange={() => setVisuals({ ...visuals, arrows: !visuals.arrows })}
- >
- <SliderWithInfo
- label="Arrow size"
- value={visuals.arrowsLength / 10}
- onChange={(value) =>
- setVisuals({ ...visuals, arrowsLength: 10 * value })
- }
- />
- <SliderWithInfo
- label="Arrow Position"
- value={visuals.arrowsPos}
- min={0}
- max={1}
- step={0.01}
- onChange={(value) => setVisuals({ ...visuals, arrowsPos: value })}
- />
- <ColorMenu
- colorList={colorList}
- label="Arrow Color"
- key="arrow"
- setVisuals={setVisualsCallback}
- value="arrowsColor"
- visValue={visuals.arrowsColor}
- />
- </EnableSection>
- <EnableSection
- label="Directional Particles"
- value={visuals.particles}
- onChange={() =>
- setVisuals({ ...visuals, particles: !visuals.particles })
- }
- >
- <SliderWithInfo
- label="Particle Number"
- value={visuals.particlesNumber}
- max={5}
- step={1}
- onChange={(value) =>
- setVisuals({ ...visuals, particlesNumber: value })
- }
- />
- <SliderWithInfo
- label="Particle Size"
- value={visuals.particlesWidth}
- onChange={(value) =>
- setVisuals({ ...visuals, particlesWidth: value })
- }
- />
- </EnableSection>
- </Box>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- {/* <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- paddingLeft={7}
- color="gray.800"
- > */}
- <AccordionItem>
- <AccordionButton>
- <Flex justifyContent="space-between" w="100%">
- <Text>Labels</Text>
- <AccordionIcon marginRight={2} />
- </Flex>
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- color="gray.800"
- >
- <Box>
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Show labels</Text>
- <Menu isLazy placement="right">
- <MenuButton
- as={Button}
- colorScheme=""
- color="black"
- rightIcon={<ChevronDownIcon />}
- >
- {!visuals.labels
- ? 'Never'
- : visuals.labels < 2
- ? 'On Highlight'
- : 'Always'}
- </MenuButton>
- <Portal>
- {' '}
- <MenuList zIndex="popover" bgColor="gray.200">
- <MenuItem onClick={() => setVisuals({ ...visuals, labels: 0 })}>
- Never
- </MenuItem>
- <MenuItem onClick={() => setVisuals({ ...visuals, labels: 1 })}>
- On Highlight
- </MenuItem>
- <MenuItem onClick={() => setVisuals({ ...visuals, labels: 2 })}>
- Always
- </MenuItem>
- <MenuItem onClick={() => setVisuals({ ...visuals, labels: 3 })}>
- Always (even in 3D)
- </MenuItem>
- </MenuList>
- </Portal>
- </Menu>
- </Flex>
- <VStack
- spacing={1}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.400" />}
- align="stretch"
- paddingLeft={2}
- color="gray.800"
- >
- <SliderWithInfo
- label="Label font size"
- value={visuals.labelFontSize}
- min={5}
- max={20}
- step={0.5}
- onChange={(value) => setVisuals({ ...visuals, labelFontSize: value })}
- />
- <SliderWithInfo
- label="Max. label characters"
- value={visuals.labelLength}
- min={10}
- max={100}
- step={1}
- onChange={(value) => setVisuals({ ...visuals, labelLength: value })}
- />
- <SliderWithInfo
- label="Max. label line length"
- value={visuals.labelWordWrap}
- min={10}
- max={100}
- step={1}
- onChange={(value) => setVisuals({ ...visuals, labelWordWrap: value })}
- />
- <SliderWithInfo
- label="Space between label lines"
- value={visuals.labelLineSpace}
- min={0.2}
- max={3}
- step={0.1}
- onChange={(value) =>
- setVisuals({ ...visuals, labelLineSpace: value })
- }
- />
- <ColorMenu
- colorList={colorList}
- label="Text"
- setVisuals={setVisualsCallback}
- value="labelTextColor"
- visValue={visuals.labelTextColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Background"
- setVisuals={setVisualsCallback}
- value="labelBackgroundColor"
- visValue={visuals.labelBackgroundColor}
- />
- <Collapse in={!!visuals.labelBackgroundColor} animateOpacity>
- <Box paddingTop={2}>
- <SliderWithInfo
- label="Background opacity"
- value={visuals.labelBackgroundOpacity}
- onChange={(value) => {
- console.log(visuals.labelBackgroundOpacity)
- setVisuals({ ...visuals, labelBackgroundOpacity: value })
- }}
- min={0}
- max={1}
- step={0.01}
- />
- </Box>
- </Collapse>
- <Collapse in={visuals.labels > 1} animateOpacity>
- <Box paddingTop={2}>
- <SliderWithInfo
- label="Label Appearance Scale"
- value={visuals.labelScale * 5}
- onChange={(value) =>
- setVisuals({ ...visuals, labelScale: value / 5 })
- }
- />
- </Box>
- </Collapse>
- </VStack>
- </Box>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton>
- <Flex justifyContent="space-between" w="100%">
- <Text>Highlighting</Text>
- <AccordionIcon marginRight={2} />
- </Flex>
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- color="gray.800"
- >
- <Box>
- <EnableSection
- label="Highlight"
- onChange={() =>
- setVisuals({ ...visuals, highlight: !visuals.highlight })
- }
- value={visuals.highlight}
- >
- <VStack
- spacing={1}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.400" />}
- align="stretch"
- paddingLeft={0}
- >
- <SliderWithInfo
- label="Highlight Link Thickness"
- value={visuals.highlightLinkSize}
- onChange={(value) =>
- setVisuals({ ...visuals, highlightLinkSize: value })
- }
- />
- <SliderWithInfo
- label="Highlight Node Size"
- value={visuals.highlightNodeSize}
- onChange={(value) =>
- setVisuals({ ...visuals, highlightNodeSize: value })
- }
- />
- <SliderWithInfo
- min={0}
- max={1}
- label="Highlight Fade"
- value={visuals.highlightFade}
- onChange={(value) =>
- setVisuals({ ...visuals, highlightFade: value })
- }
- />
- {/*<Flex justifyContent="space-between">
- <Text> Highlight node color </Text>
- </Flex>
- <Flex justifyContent="space-between">
- <Text> Highlight link color </Text>
- </Flex>*/}
- <EnableSection
- label="Highlight Animation"
- onChange={() => {
- setVisuals({ ...visuals, highlightAnim: !visuals.highlightAnim })
- }}
- value={visuals.highlightAnim}
- >
- <SliderWithInfo
- label="Animation speed"
- onChange={(v) => setVisuals({ ...visuals, animationSpeed: v })}
- value={visuals.animationSpeed}
- infoText="Slower speed has a chance of being buggy"
- min={50}
- max={1000}
- step={10}
- />
- <Select
- placeholder={visuals.algorithmName}
- onChange={(v) => {
- setVisuals({ ...visuals, algorithmName: v.target.value })
- }}
- >
- {visuals.algorithmOptions.map((opt: string) => (
- <option key={opt} value={opt}>
- {opt}
- </option>
- ))}
- </Select>
- </EnableSection>
- </VStack>
- </EnableSection>
- </Box>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- <AccordionItem>
- <AccordionButton>
- <Flex justifyContent="space-between" w="100%">
- <Text>Citations</Text>
- <AccordionIcon marginRight={2} />
- </Flex>
- </AccordionButton>
- <AccordionPanel>
- <VStack
- spacing={2}
- justifyContent="flex-start"
- divider={<StackDivider borderColor="gray.500" />}
- align="stretch"
- color="gray.800"
- >
- <Box>
- <EnableSection
- label="Dash cite links"
- infoText="Add dashes to citation links made with org-roam-bibtex"
- value={visuals.citeDashes}
- onChange={() =>
- setVisuals({ ...visuals, citeDashes: !visuals.citeDashes })
- }
- >
- <SliderWithInfo
- label="Dash length"
- value={visuals.citeDashLength / 10}
- onChange={(value) =>
- setVisuals({ ...visuals, citeDashLength: value * 10 })
- }
- />
- <SliderWithInfo
- label="Gap length"
- value={visuals.citeGapLength / 5}
- onChange={(value) =>
- setVisuals({ ...visuals, citeGapLength: value * 5 })
- }
- />
- </EnableSection>
- <ColorMenu
- colorList={colorList}
- label="Citation node color"
- setVisuals={setVisualsCallback}
- value={'citeNodeColor'}
- visValue={visuals.citeNodeColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Citation link color"
- setVisuals={setVisualsCallback}
- value={'citeLinkColor'}
- visValue={visuals.citeLinkColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Reference link highlight"
- setVisuals={setVisualsCallback}
- value={'citeLinkHighlightColor'}
- visValue={visuals.citeLinkHighlightColor}
- />
- <EnableSection
- label="Dash ref links"
- infoText="Add dashes to citation links, whose target has a note, made with org-roam-bibtex"
- value={visuals.refDashes}
- onChange={() =>
- setVisuals({ ...visuals, refDashes: !visuals.refDashes })
- }
- >
- <SliderWithInfo
- label="Dash length"
- value={visuals.refDashLength / 10}
- onChange={(value) =>
- setVisuals({ ...visuals, refDashLength: value * 10 })
- }
- />
- <SliderWithInfo
- label="Gap length"
- value={visuals.refGapLength / 5}
- onChange={(value) =>
- setVisuals({ ...visuals, refGapLength: value * 5 })
- }
- />
- </EnableSection>
- <ColorMenu
- colorList={colorList}
- label="Reference node color"
- setVisuals={setVisualsCallback}
- value={'refNodeColor'}
- visValue={visuals.refNodeColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Reference link color"
- setVisuals={setVisualsCallback}
- value={'refLinkColor'}
- visValue={visuals.refLinkColor}
- />
- <ColorMenu
- colorList={colorList}
- label="Reference link highlight"
- setVisuals={setVisualsCallback}
- value={'refLinkHighlightColor'}
- visValue={visuals.refLinkHighlightColor}
- />
- </Box>
- </VStack>
- </AccordionPanel>
- </AccordionItem>
- </Accordion>
- </VStack>
+ <VisualsPanel
+ visuals={visuals}
+ setVisuals={setVisuals}
+ highlightColor={highlightColor}
+ setHighlightColor={setHighlightColor}
+ threeDim={threeDim}
+ />
</AccordionPanel>
</AccordionItem>
<AccordionItem>