summaryrefslogtreecommitdiff
path: root/components/Tweaks/NodesNLinksPanel.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2022-01-03 17:21:18 +0100
committerGitHub <[email protected]>2022-01-03 17:21:18 +0100
commitdad03e3be5b0a7c1159e0207cce11540ca830359 (patch)
tree4ae4e0a40c578e12b6d4f11a3f785c8190865f8b /components/Tweaks/NodesNLinksPanel.tsx
parent9ed0c5705a302a91fab2b8bcc777a12dcf9b3682 (diff)
feat(filter): add option to filter by subdirectory (#190)
Diffstat (limited to 'components/Tweaks/NodesNLinksPanel.tsx')
-rw-r--r--components/Tweaks/NodesNLinksPanel.tsx131
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>
- )
-}