1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
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 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>
)
}
|
