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
|
import {
Text,
Accordion,
AccordionButton,
AccordionItem,
Flex,
VStack,
AccordionIcon,
AccordionPanel,
MenuButton,
Menu,
Button,
Box,
Portal,
MenuList,
MenuItem,
} from '@chakra-ui/react'
import React, { useCallback } from 'react'
import { HighlightingPanel } from './HighlightingPanel'
import { ColorsPanel } from './ColorsPanel'
import { initialColoring, initialVisuals } from '../config'
import { NodesNLinksPanel } from './NodesNLinksPanel'
import { LabelsPanel } from './LabelsPanel'
import { CitationsPanel } from './CitationsPanel'
import { ColorMenu } from './ColorMenu'
import { ThemeSelect } from './ThemeSelect'
import { GraphColorSelect } from './GraphColorSelect'
export interface VisualsPanelProps {
visuals: typeof initialVisuals
setVisuals: any
highlightColor: string
setHighlightColor: any
threeDim: boolean
coloring: typeof initialColoring
setColoring: any
}
export const VisualsPanel = (props: VisualsPanelProps) => {
const {
coloring,
setColoring,
visuals,
setVisuals,
highlightColor,
setHighlightColor,
threeDim,
} = props
const setVisualsCallback = useCallback((val) => setVisuals(val), [])
return (
<VStack justifyContent="flex-start" align="stretch">
<ThemeSelect />
<GraphColorSelect {...{ coloring, setColoring }} />
<Accordion allowToggle defaultIndex={[0]} paddingLeft={3}>
<AccordionItem>
<AccordionButton>
<Flex justifyContent="space-between" w="100%">
<Text>Colors</Text>
<AccordionIcon marginRight={2} />
</Flex>
</AccordionButton>
<AccordionPanel>
<ColorsPanel
visuals={visuals}
setVisualsCallback={setVisualsCallback}
highlightColor={highlightColor}
setHighlightColor={setHighlightColor}
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<AccordionButton>
<Flex justifyContent="space-between" w="100%">
<Text>Nodes & Links</Text>
<AccordionIcon marginRight={2} />
</Flex>
</AccordionButton>
<AccordionPanel>
<NodesNLinksPanel
visuals={visuals}
setVisuals={setVisualsCallback}
threeDim={threeDim}
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<AccordionButton>
<Flex justifyContent="space-between" w="100%">
<Text>Labels</Text>
<AccordionIcon marginRight={2} />
</Flex>
</AccordionButton>
<AccordionPanel>
<LabelsPanel visuals={visuals} setVisuals={setVisualsCallback} />
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<AccordionButton>
<Flex justifyContent="space-between" w="100%">
<Text>Highlighting</Text>
<AccordionIcon marginRight={2} />
</Flex>
</AccordionButton>
<AccordionPanel>
<HighlightingPanel visuals={visuals} setVisuals={setVisualsCallback} />
</AccordionPanel>
</AccordionItem>
<AccordionItem>
<AccordionButton>
<Flex justifyContent="space-between" w="100%">
<Text>Citations</Text>
<AccordionIcon marginRight={2} />
</Flex>
</AccordionButton>
<AccordionPanel>
<CitationsPanel visuals={visuals} setVisuals={setVisualsCallback} />
</AccordionPanel>
</AccordionItem>
</Accordion>
</VStack>
)
}
|
