diff options
author | Thomas F. K. Jorna <[email protected]> | 2022-01-03 17:21:18 +0100 |
---|---|---|
committer | GitHub <[email protected]> | 2022-01-03 17:21:18 +0100 |
commit | dad03e3be5b0a7c1159e0207cce11540ca830359 (patch) | |
tree | 4ae4e0a40c578e12b6d4f11a3f785c8190865f8b /components/Tweaks/HighlightingPanel.tsx | |
parent | 9ed0c5705a302a91fab2b8bcc777a12dcf9b3682 (diff) |
feat(filter): add option to filter by subdirectory (#190)
Diffstat (limited to 'components/Tweaks/HighlightingPanel.tsx')
-rw-r--r-- | components/Tweaks/HighlightingPanel.tsx | 116 |
1 files changed, 0 insertions, 116 deletions
diff --git a/components/Tweaks/HighlightingPanel.tsx b/components/Tweaks/HighlightingPanel.tsx deleted file mode 100644 index 6f71268..0000000 --- a/components/Tweaks/HighlightingPanel.tsx +++ /dev/null @@ -1,116 +0,0 @@ -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> - ) -} |