summaryrefslogtreecommitdiff
path: root/components/Tweaks/VisualsPanel.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
committerThomas F. K. Jorna <[email protected]>2021-09-25 16:11:31 +0200
commitee8539a9351374a719c9026f85d85e7b4ea6e8f5 (patch)
treef9220fd304bd3669523df39ddaa0992919ccc4a6 /components/Tweaks/VisualsPanel.tsx
parent075d3831ffae63f128bcaabf9fc5e70ade41ad33 (diff)
chore: move tweaks to separate subfolder
Diffstat (limited to 'components/Tweaks/VisualsPanel.tsx')
-rw-r--r--components/Tweaks/VisualsPanel.tsx100
1 files changed, 100 insertions, 0 deletions
diff --git a/components/Tweaks/VisualsPanel.tsx b/components/Tweaks/VisualsPanel.tsx
new file mode 100644
index 0000000..559975d
--- /dev/null
+++ b/components/Tweaks/VisualsPanel.tsx
@@ -0,0 +1,100 @@
+import {
+ Text,
+ Accordion,
+ AccordionButton,
+ AccordionItem,
+ Flex,
+ VStack,
+ AccordionIcon,
+ AccordionPanel,
+} from '@chakra-ui/react'
+import React, { useCallback } from 'react'
+import { HighlightingPanel } from './HighlightingPanel'
+import { ColorsPanel } from './ColorsPanel'
+import { initialVisuals } from '../config'
+import { NodesNLinksPanel } from './NodesNLinksPanel'
+import { LabelsPanel } from './LabelsPanel'
+import { CitationsPanel } from './CitationsPanel'
+
+export interface VisualsPanelProps {
+ visuals: typeof initialVisuals
+ setVisuals: any
+ highlightColor: string
+ setHighlightColor: any
+ threeDim: boolean
+}
+
+export const VisualsPanel = (props: VisualsPanelProps) => {
+ const { visuals, setVisuals, highlightColor, setHighlightColor, threeDim } = props
+ const setVisualsCallback = useCallback((val) => setVisuals(val), [])
+ return (
+ <VStack justifyContent="flex-start" align="stretch">
+ <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>
+ )
+}