diff options
author | Thomas F. K. Jorna <[email protected]> | 2022-01-03 17:21:18 +0100 |
---|---|---|
committer | GitHub <[email protected]> | 2022-01-03 17:21:18 +0100 |
commit | dad03e3be5b0a7c1159e0207cce11540ca830359 (patch) | |
tree | 4ae4e0a40c578e12b6d4f11a3f785c8190865f8b /components/Tweaks/NodesNLinksPanel.tsx | |
parent | 9ed0c5705a302a91fab2b8bcc777a12dcf9b3682 (diff) |
feat(filter): add option to filter by subdirectory (#190)
Diffstat (limited to 'components/Tweaks/NodesNLinksPanel.tsx')
-rw-r--r-- | components/Tweaks/NodesNLinksPanel.tsx | 131 |
1 files changed, 0 insertions, 131 deletions
diff --git a/components/Tweaks/NodesNLinksPanel.tsx b/components/Tweaks/NodesNLinksPanel.tsx deleted file mode 100644 index 3321ae3..0000000 --- a/components/Tweaks/NodesNLinksPanel.tsx +++ /dev/null @@ -1,131 +0,0 @@ -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 degree size multiplier" - 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> - ) -} |