summaryrefslogtreecommitdiff
path: root/components/Tweaks/NodesNLinksPanel.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
committerThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
commitee8539a9351374a719c9026f85d85e7b4ea6e8f5 (patch)
treef9220fd304bd3669523df39ddaa0992919ccc4a6 /components/Tweaks/NodesNLinksPanel.tsx
parent075d3831ffae63f128bcaabf9fc5e70ade41ad33 (diff)
chore: move tweaks to separate subfolder
Diffstat (limited to 'components/Tweaks/NodesNLinksPanel.tsx')
-rw-r--r--components/Tweaks/NodesNLinksPanel.tsx131
1 files changed, 131 insertions, 0 deletions
diff --git a/components/Tweaks/NodesNLinksPanel.tsx b/components/Tweaks/NodesNLinksPanel.tsx
new file mode 100644
index 0000000..dba927c
--- /dev/null
+++ b/components/Tweaks/NodesNLinksPanel.tsx
@@ -0,0 +1,131 @@
+import { Box, StackDivider, VStack } from '@chakra-ui/react'
+import React from 'react'
+import { ColorMenu } from './ColorMenu'
+import { colorList, initialVisuals } from '../config'
+import { EnableSection } from './EnableSection'
+import { SliderWithInfo } from './SliderWithInfo'
+
+export interface NodesNLinksPanelProps {
+ visuals: typeof initialVisuals
+ setVisuals: any
+ threeDim: boolean
+}
+
+export const NodesNLinksPanel = (props: NodesNLinksPanelProps) => {
+ const { visuals, setVisuals, threeDim } = props
+ return (
+ <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={setVisuals}
+ 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>
+ )
+}