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
|
import { Box, Select, StackDivider, VStack } from '@chakra-ui/react'
import React from 'react'
import { initialVisuals } from './config'
import { EnableSection } from './EnableSection'
import { SliderWithInfo } from './SliderWithInfo'
export interface HighlightingPanelProps {
visuals: typeof initialVisuals
setVisuals: any
}
export const HighlightingPanel = (props: HighlightingPanelProps) => {
const { visuals, setVisuals } = props
return (
<VStack
spacing={2}
justifyContent="flex-start"
divider={<StackDivider borderColor="gray.500" />}
align="stretch"
color="gray.800"
>
<Box>
<EnableSection
label="Highlight"
onChange={() =>
setVisuals((visuals: typeof initialVisuals) => ({
...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: typeof initialVisuals) => ({
...visuals,
highlightLinkSize: value,
}))
}
/>
<SliderWithInfo
label="Highlight Node Size"
value={visuals.highlightNodeSize}
onChange={(value) =>
setVisuals((visuals: typeof initialVisuals) => ({
...visuals,
highlightNodeSize: value,
}))
}
/>
<SliderWithInfo
min={0}
max={1}
label="Highlight Fade"
value={visuals.highlightFade}
onChange={(value) =>
setVisuals((visuals: typeof initialVisuals) => ({
...visuals,
highlightFade: value,
}))
}
/>
<EnableSection
label="Highlight Animation"
onChange={() => {
setVisuals((visuals: typeof initialVisuals) => ({
...visuals,
highlightAnim: !visuals.highlightAnim,
}))
}}
value={visuals.highlightAnim}
>
<SliderWithInfo
label="Animation speed"
onChange={(v) =>
setVisuals((visuals: typeof initialVisuals) => ({
...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: typeof initialVisuals) => ({
...visuals,
algorithmName: v.target.value,
}))
}}
>
{visuals.algorithmOptions.map((opt: string) => (
<option key={opt} value={opt}>
{opt}
</option>
))}
</Select>
</EnableSection>
</VStack>
</EnableSection>
</Box>
</VStack>
)
}
|
