From dad03e3be5b0a7c1159e0207cce11540ca830359 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Mon, 3 Jan 2022 17:21:18 +0100 Subject: feat(filter): add option to filter by subdirectory (#190) --- components/Tweaks/Visual/ColorMenu.tsx | 88 +++++++++ components/Tweaks/Visual/ColorsPanel.tsx | 237 +++++++++++++++++++++++++ components/Tweaks/Visual/GraphColorSelect.tsx | 64 +++++++ components/Tweaks/Visual/HighlightingPanel.tsx | 116 ++++++++++++ components/Tweaks/Visual/LabelsPanel.tsx | 162 +++++++++++++++++ components/Tweaks/Visual/NodesNLinksPanel.tsx | 131 ++++++++++++++ components/Tweaks/Visual/ThemeSelect.tsx | 63 +++++++ components/Tweaks/Visual/VisualsPanel.tsx | 121 +++++++++++++ 8 files changed, 982 insertions(+) create mode 100644 components/Tweaks/Visual/ColorMenu.tsx create mode 100644 components/Tweaks/Visual/ColorsPanel.tsx create mode 100644 components/Tweaks/Visual/GraphColorSelect.tsx create mode 100644 components/Tweaks/Visual/HighlightingPanel.tsx create mode 100644 components/Tweaks/Visual/LabelsPanel.tsx create mode 100644 components/Tweaks/Visual/NodesNLinksPanel.tsx create mode 100644 components/Tweaks/Visual/ThemeSelect.tsx create mode 100644 components/Tweaks/Visual/VisualsPanel.tsx (limited to 'components/Tweaks/Visual') diff --git a/components/Tweaks/Visual/ColorMenu.tsx b/components/Tweaks/Visual/ColorMenu.tsx new file mode 100644 index 0000000..a792f12 --- /dev/null +++ b/components/Tweaks/Visual/ColorMenu.tsx @@ -0,0 +1,88 @@ +import { ChevronDownIcon } from '@chakra-ui/icons' +import { + Text, + Box, + Button, + Flex, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + PopoverTrigger, + PopoverContent, + Popover, +} from '@chakra-ui/react' +import React, { useCallback } from 'react' +import { initialVisuals } from '../../config' + +export interface ColorMenuProps { + label: string + colorList: string[] + value: string + visValue: string + setVisuals?: any + noEmpty?: boolean +} + +export const ColorMenu = (props: ColorMenuProps) => { + const { label, colorList, value, visValue, setVisuals, noEmpty } = props + + const clickCallback = useCallback( + (color) => + setVisuals((curr: typeof initialVisuals) => { + return { + ...curr, + [value]: color, + } + }), + [], + ) + return ( + + {label} + + + + + + + + {!noEmpty && ( + clickCallback('')} + justifyContent="space-between" + alignItems="center" + display="flex" + m={1} + > + + + )} + {colorList.map((color: string) => ( + clickCallback(color)} + justifyContent="space-between" + alignItems="center" + display="flex" + > + + + ))} + + + + + + ) +} diff --git a/components/Tweaks/Visual/ColorsPanel.tsx b/components/Tweaks/Visual/ColorsPanel.tsx new file mode 100644 index 0000000..fe4cd7b --- /dev/null +++ b/components/Tweaks/Visual/ColorsPanel.tsx @@ -0,0 +1,237 @@ +import { ArrowRightIcon, ChevronDownIcon, RepeatIcon } from '@chakra-ui/icons' +import { + Text, + Box, + Flex, + IconButton, + StackDivider, + Tooltip, + VStack, + MenuButton, + Menu, + Portal, + MenuList, + MenuOptionGroup, + MenuItemOption, + Button, + MenuItem, +} from '@chakra-ui/react' +import React from 'react' +import { ColorMenu } from './ColorMenu' +import { colorList, initialVisuals } from '../../config' + +export interface ColorsPanelProps { + visuals: typeof initialVisuals + setVisualsCallback: any + highlightColor: string + setHighlightColor: any +} + +export const ColorsPanel = (props: ColorsPanelProps) => { + const { visuals, setVisualsCallback, highlightColor, setHighlightColor } = props + + return ( + } + align="stretch" + color="gray.800" + > + + + Nodes + + } + variant="ghost" + onClick={() => { + const arr = visuals.nodeColorScheme ?? [] + setVisualsCallback({ + ...visuals, + //shuffle that guy + //definitely thought of this myself + nodeColorScheme: arr + .map((x: any) => [Math.random(), x]) + .sort(([a], [b]) => a - b) + .map(([_, x]) => x), + }) + }} + /> + + + } + size="sm" + variant="ghost" + onClick={() => { + const arr = visuals.nodeColorScheme ?? [] + setVisualsCallback({ + ...visuals, + nodeColorScheme: [...arr.slice(1, arr.length), arr[0]], + }) + }} + /> + + + } + > + + {visuals.nodeColorScheme.map((color) => ( + + ))} + + + + {' '} + + { + if (!colors.length) { + return + } + setVisualsCallback({ ...visuals, nodeColorScheme: colors }) + }} + > + {colorList.map((color) => ( + c === color)} + value={color} + isDisabled={ + visuals.nodeColorScheme.length === 1 && visuals.nodeColorScheme[0] === color + } + > + + + + + ))} + + + + + + + Links + + }> + + {visuals.linkColorScheme ? ( + + ) : ( + + {visuals.nodeColorScheme.map((color) => ( + + ))} + + )} + + + + {' '} + + setVisualsCallback({ ...visuals, linkColorScheme: '' })} + justifyContent="space-between" + alignItems="center" + display="flex" + > + + {visuals.nodeColorScheme.map((color) => ( + + ))} + + + {colorList.map((color) => ( + + setVisualsCallback({ + ...visuals, + linkColorScheme: color, + }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + + + ))} + + + + + + Accent + + }> + {} + + + {' '} + + {colorList.map((color) => ( + setHighlightColor(color)} + justifyContent="space-between" + alignItems="center" + display="flex" + > + + + ))} + + + + + + + + + + + ) +} diff --git a/components/Tweaks/Visual/GraphColorSelect.tsx b/components/Tweaks/Visual/GraphColorSelect.tsx new file mode 100644 index 0000000..5b49672 --- /dev/null +++ b/components/Tweaks/Visual/GraphColorSelect.tsx @@ -0,0 +1,64 @@ +import React, { useContext } from 'react' +import { + Box, + Button, + Flex, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + Text, +} from '@chakra-ui/react' +import { ChevronDownIcon } from '@chakra-ui/icons' +import { initialColoring } from '../../config' + +export interface GraphColorSelectProps { + coloring: typeof initialColoring + setColoring: any +} + +export const GraphColorSelect = (props: GraphColorSelectProps) => { + type Theme = { [key: string]: string } + const { coloring, setColoring } = props + return ( + + Graph coloring + + } + > + {coloring.method === 'degree' ? 'Links' : 'Communities'} + + + + + setColoring((curr: typeof initialColoring) => ({ ...curr, method: 'degree' })) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + Number of links + + + setColoring((curr: typeof initialColoring) => ({ ...curr, method: 'community' })) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + Communities + + + + + + ) +} diff --git a/components/Tweaks/Visual/HighlightingPanel.tsx b/components/Tweaks/Visual/HighlightingPanel.tsx new file mode 100644 index 0000000..357d137 --- /dev/null +++ b/components/Tweaks/Visual/HighlightingPanel.tsx @@ -0,0 +1,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 ( + } + align="stretch" + color="gray.800" + > + + + setVisuals((visuals: typeof initialVisuals) => ({ + ...visuals, + highlight: !visuals.highlight, + })) + } + value={visuals.highlight} + > + } + align="stretch" + paddingLeft={0} + > + + setVisuals((visuals: typeof initialVisuals) => ({ + ...visuals, + highlightLinkSize: value, + })) + } + /> + + setVisuals((visuals: typeof initialVisuals) => ({ + ...visuals, + highlightNodeSize: value, + })) + } + /> + + setVisuals((visuals: typeof initialVisuals) => ({ + ...visuals, + highlightFade: value, + })) + } + /> + { + setVisuals((visuals: typeof initialVisuals) => ({ + ...visuals, + highlightAnim: !visuals.highlightAnim, + })) + }} + value={visuals.highlightAnim} + > + + 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} + /> + + + + + + + ) +} diff --git a/components/Tweaks/Visual/LabelsPanel.tsx b/components/Tweaks/Visual/LabelsPanel.tsx new file mode 100644 index 0000000..b0044f1 --- /dev/null +++ b/components/Tweaks/Visual/LabelsPanel.tsx @@ -0,0 +1,162 @@ +import { ChevronDownIcon } from '@chakra-ui/icons' +import { + Box, + Button, + Collapse, + Flex, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + StackDivider, + VStack, + Text, +} from '@chakra-ui/react' +import React from 'react' +import { ColorMenu } from './ColorMenu' +import { colorList, initialVisuals } from '../../config' +import { SliderWithInfo } from '../SliderWithInfo' + +export interface LabelsPanelProps { + visuals: typeof initialVisuals + setVisuals: any +} +export const LabelsPanel = (props: LabelsPanelProps) => { + const { visuals, setVisuals } = props + return ( + } + align="stretch" + color="gray.800" + > + + Show labels + + }> + {!visuals.labels ? 'Never' : visuals.labels < 2 ? 'On Highlight' : 'Always'} + + + {' '} + + setVisuals({ ...visuals, labels: 0 })}>Never + setVisuals({ ...visuals, labels: 1 })}> + On Highlight + + setVisuals({ ...visuals, labels: 2 })}>Always + setVisuals({ ...visuals, labels: 3 })}> + Always (even in 3D) + + + + + + 1} animateOpacity> + + setVisuals({ ...visuals, labelScale: value / 2 })} + /> + + + + setVisuals((curr: typeof initialVisuals) => ({ + ...curr, + labelDynamicStrength: value, + })) + } + /> + 0}> + + setVisuals((curr: typeof initialVisuals) => ({ + ...curr, + labelDynamicDegree: value, + })) + } + /> + + + + + + + + + { + console.log(visuals.labelBackgroundOpacity) + setVisuals({ ...visuals, labelBackgroundOpacity: value }) + }} + min={0} + max={1} + step={0.01} + /> + + + + setVisuals({ ...visuals, labelFontSize: value })} + /> + setVisuals({ ...visuals, labelLength: value })} + /> + setVisuals({ ...visuals, labelWordWrap: value })} + /> + setVisuals({ ...visuals, labelLineSpace: value })} + /> + + ) +} diff --git a/components/Tweaks/Visual/NodesNLinksPanel.tsx b/components/Tweaks/Visual/NodesNLinksPanel.tsx new file mode 100644 index 0000000..40072fb --- /dev/null +++ b/components/Tweaks/Visual/NodesNLinksPanel.tsx @@ -0,0 +1,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 ( + } + align="stretch" + color="gray.800" + > + + setVisuals({ ...visuals, nodeRel: value })} + /> + setVisuals({ ...visuals, nodeSizeLinks: value })} + /> + + setVisuals((prev: typeof initialVisuals) => ({ + ...prev, + nodeZoomSize: value, + })) + } + /> + {threeDim && ( + <> + setVisuals({ ...visuals, nodeOpacity: value })} + /> + setVisuals({ ...visuals, nodeResolution: value })} + /> + + )} + setVisuals({ ...visuals, linkWidth: value })} + /> + {threeDim && ( + setVisuals({ ...visuals, linkOpacity: value })} + /> + )} + setVisuals({ ...visuals, arrows: !visuals.arrows })} + > + setVisuals({ ...visuals, arrowsLength: 10 * value })} + /> + setVisuals({ ...visuals, arrowsPos: value })} + /> + + + setVisuals({ ...visuals, particles: !visuals.particles })} + > + setVisuals({ ...visuals, particlesNumber: value })} + /> + setVisuals({ ...visuals, particlesWidth: value })} + /> + + + + ) +} diff --git a/components/Tweaks/Visual/ThemeSelect.tsx b/components/Tweaks/Visual/ThemeSelect.tsx new file mode 100644 index 0000000..eed6daf --- /dev/null +++ b/components/Tweaks/Visual/ThemeSelect.tsx @@ -0,0 +1,63 @@ +import React, { useContext } from 'react' +import { + Box, + Button, + Flex, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + Text, +} from '@chakra-ui/react' + +import { themes } from '../../themes' +import { ChevronDownIcon } from '@chakra-ui/icons' +import { ThemeContext } from '../../../util/themecontext' + +export const ThemeSelect = () => { + type Theme = { [key: string]: string } + const { emacsTheme, setEmacsTheme, highlightColor } = useContext(ThemeContext) + return ( + + Theme + + } + > + {emacsTheme[0]} + + + ''} + justifyContent="space-between" + alignItems="center" + display="flex" + > + + + {Object.keys(themes).map((theme: string, i: number) => ( + setEmacsTheme([theme, themes[theme]])} + justifyContent="space-between" + alignItems="center" + display="flex" + > + {theme} + + {Object.values(themes[theme as string]).map((color: string) => { + return + })} + + + ))} + + + + ) +} diff --git a/components/Tweaks/Visual/VisualsPanel.tsx b/components/Tweaks/Visual/VisualsPanel.tsx new file mode 100644 index 0000000..82b365f --- /dev/null +++ b/components/Tweaks/Visual/VisualsPanel.tsx @@ -0,0 +1,121 @@ +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 { ThemeSelect } from './ThemeSelect' +import { CitationsPanel } from '../NodesNLinks/CitationsPanel' +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 ( + + + + + + + + Colors + + + + + + + + + + + Nodes & Links + + + + + + + + + + + Labels + + + + + + + + + + + Highlighting + + + + + + + + + + + Citations + + + + + + + + + + ) +} -- cgit v1.2.3