From eef204000abc79c9a83f3ce268f051dcfff6bf7d Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Mon, 26 Jul 2021 01:42:10 +0200 Subject: file viewer, prettier things --- components/config.ts | 23 +- components/tweaks.tsx | 725 ++++++++++++++++++++++++++++---------------------- 2 files changed, 426 insertions(+), 322 deletions(-) (limited to 'components') diff --git a/components/config.ts b/components/config.ts index 41d5345..e7a51e2 100644 --- a/components/config.ts +++ b/components/config.ts @@ -13,7 +13,7 @@ export const initialPhysics = { linkOpacity: 0.4, linkWidth: 1, nodeRel: 4, - labels: true, + labels: 2, labelScale: 1.5, alphaDecay: 0.02, alphaTarget: 0, @@ -49,6 +49,27 @@ export const initialFilter = { date: [], } +export const initialMouse = { + hover: { + highlight: true, + select: false, + follow: false, + local: false, + }, + click: { + highlight: true, + select: false, + follow: true, + local: true, + }, + doubleClick: { + highlight: true, + select: false, + follow: false, + local: false, + }, +} + function getAlgos(option?: boolean) { const options: string[] = [] const algorithms: { [name: string]: (percent: number) => number } = {} diff --git a/components/tweaks.tsx b/components/tweaks.tsx index d337b59..61eecf4 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -1,4 +1,10 @@ -import { RepeatClockIcon, ChevronDownIcon, SettingsIcon, InfoOutlineIcon } from '@chakra-ui/icons' +import { + CloseIcon, + RepeatClockIcon, + ChevronDownIcon, + SettingsIcon, + InfoOutlineIcon, +} from '@chakra-ui/icons' import { Accordion, AccordionButton, @@ -6,6 +12,7 @@ import { AccordionItem, AccordionPanel, Box, + BoxProps, Button, CloseButton, Flex, @@ -24,8 +31,12 @@ import { Text, Tooltip, VStack, + useDisclosure, + Heading, + SlideFade, + Collapse, } from '@chakra-ui/react' -import { useState } from 'react' +import React, { useState } from 'react' import Scrollbars from 'react-custom-scrollbars-2' import { initialPhysics, initialFilter } from './config' @@ -42,346 +53,414 @@ export const Tweaks = (props: TweakProps) => { const { physics, setPhysics, threeDim, filter, setFilter } = props const [showTweaks, setShowTweaks] = useState(true) - if (!showTweaks) { - return ( - + return ( + <> + } onClick={() => setShowTweaks(true)} /> - ) - } - - return ( - - - - } - onClick={() => setPhysics(initialPhysics)} - colorScheme="purple" - /> - - setShowTweaks(false)} /> - - ( - - )} - > - - - - - Filter - - - - Orphans - { - setFilter({ ...filter, orphans: !filter.orphans }) - }} - isChecked={filter.orphans} - > - - - Link nodes with parent file - { - setFilter({ ...filter, parents: !filter.parents }) - }} - isChecked={filter.parents} - > - - - - - - - - Physics - - setPhysics({ ...physics, enabled: !physics.enabled })} - isChecked={physics.enabled} + + + + + } + onClick={() => setPhysics(initialPhysics)} colorScheme="purple" + variant="none" + size="sm" /> - - - } - align="stretch" - > - setPhysics({ ...physics, gravityOn: !physics.gravityOn })} - > - setPhysics({ ...physics, gravity: v / 10 })} - /> - - setPhysics({ ...physics, charge: -100 * value })} - label="Repulsive Force" - /> - setPhysics({ ...physics, collision: !physics.collision })} - > - setPhysics({ ...physics, collisionStrength: value / 10 })} - label="Strength" + + } + aria-label="Close Tweak Panel" + variant="ghost" + onClick={() => setShowTweaks(false)} + /> + + ( + + )} + > + + + + + Filter + + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + + Orphans + { + setFilter({ ...filter, orphans: !filter.orphans }) + }} + isChecked={filter.orphans} + > + + + Link nodes with parent file + { + setFilter({ ...filter, parents: !filter.parents }) + }} + isChecked={filter.parents} + > + + + + + + + + + Physics + + setPhysics({ ...physics, enabled: !physics.enabled })} + isChecked={physics.enabled} + colorScheme="purple" /> - - setPhysics({ ...physics, linkStrength: value / 5 })} - label="Link Force" - /> - setPhysics({ ...physics, linkIts: value })} - min={0} - max={6} - step={1} - infoText="How many links down the line the physics of a single node affects (Slow)" - /> - setPhysics({ ...physics, velocityDecay: value / 10 })} - /> - - - - - - Advanced - - - + + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + setPhysics({ ...physics, gravityOn: !physics.gravityOn })} + > + setPhysics({ ...physics, gravity: v / 10 })} + /> + + setPhysics({ ...physics, charge: -100 * value })} + label="Repulsive Force" + /> + setPhysics({ ...physics, collision: !physics.collision })} + > + + setPhysics({ ...physics, collisionStrength: value / 10 }) + } + label="Strength" + /> + + setPhysics({ ...physics, linkStrength: value / 5 })} + label="Link Force" + /> + setPhysics({ ...physics, linkIts: value })} + min={0} + max={6} + step={1} + infoText="How many links down the line the physics of a single node affects (Slow)" + /> + setPhysics({ ...physics, velocityDecay: value / 10 })} + /> + + + + + + Advanced + + + + } + align="stretch" + paddingLeft={3} + color="gray.800" + > + setPhysics({ ...physics, iterations: v })} + infoText="Number of times the physics simulation iterates per simulation step" + /> + + setPhysics({ ...physics, alphaDecay: value / 50 }) + } + /> + + + + + + {/* */} + + + + + + Visual + + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + setPhysics({ ...physics, colorful: !physics.colorful })} + value={physics.colorful} + > + Child + + setPhysics({ ...physics, nodeRel: value })} + /> + setPhysics({ ...physics, linkWidth: value })} + /> + + + Labels + + }> + {!physics.labels + ? 'Never' + : physics.labels < 2 + ? 'On Highlight' + : 'Always'} + + + setPhysics({ ...physics, labels: 0 })}> + Never + + setPhysics({ ...physics, labels: 1 })}> + On Highlight + + setPhysics({ ...physics, labels: 2 })}> + Always + + + + + 1} animateOpactiy> + + setPhysics({ ...physics, labelScale: value / 5 })} + /> + + + + setPhysics({ ...physics, particles: !physics.particles })} + > + setPhysics({ ...physics, particlesNumber: value })} + /> + setPhysics({ ...physics, particlesWidth: value })} + /> + + setPhysics({ ...physics, highlight: !physics.highlight })} + value={physics.highlight} + > } + divider={} align="stretch" + paddingLeft={0} > setPhysics({ ...physics, iterations: v })} - infoText="Number of times the physics simulation iterates per simulation step" + label="Highlight Link Thickness" + value={physics.highlightLinkSize} + onChange={(value) => setPhysics({ ...physics, highlightLinkSize: value })} /> setPhysics({ ...physics, alphaDecay: value / 50 })} + label="Highlight Node Size" + value={physics.highlightNodeSize} + onChange={(value) => setPhysics({ ...physics, highlightNodeSize: value })} /> - - - - - - {/* */} - - - - - - Visual - - - } - align="stretch" - > - setPhysics({ ...physics, colorful: !physics.colorful })} - value={physics.colorful} - > - Child - - setPhysics({ ...physics, nodeRel: value })} - /> - setPhysics({ ...physics, linkWidth: value })} - /> - setPhysics({ ...physics, labels: !physics.labels })} - > - setPhysics({ ...physics, labelScale: value / 5 })} - /> - - setPhysics({ ...physics, particles: !physics.particles })} - > - setPhysics({ ...physics, particlesNumber: value })} - /> - setPhysics({ ...physics, particlesWidth: value })} - /> - - { - setPhysics({ ...physics, highlightAnim: !physics.highlightAnim }) - }} - value={physics.highlightAnim} - > - setPhysics({ ...physics, animationSpeed: v })} - value={physics.animationSpeed} - infoText="Slower speed has a chance of being buggy" - min={50} - max={1000} - step={10} - /> - - {/* + Highlight node color + + + Highlight link color + */} + { + setPhysics({ ...physics, highlightAnim: !physics.highlightAnim }) + }} + value={physics.highlightAnim} + > + setPhysics({ ...physics, animationSpeed: v })} + value={physics.animationSpeed} + infoText="Slower speed has a chance of being buggy" + min={50} + max={1000} + step={10} + /> + + {/* setPhysics({ ...physics, algorithmName: { option } }), )} /> */} - - setPhysics({ ...physics, highlight: !physics.highlight })} - value={physics.highlight} - > - setPhysics({ ...physics, highlightLinkSize: value })} - /> - setPhysics({ ...physics, highlightNodeSize: value })} - /> - - Highlight node color - - - Highlight link color - - - - - - - - - Behavior - - - } - align="stretch" - > - - Hover Higlight - - }> - {physics.hover} - - - Off - On - - - - - Click - - - Double-click - - - - - - - + + + + + + + + + + Behavior + + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + + Hover Higlight + + }> + {physics.hover} + + + Off + On + + + + + Click + + + Double-click + + + + + + + + + ) } + export interface InfoTooltipProps { infoText?: string | boolean } @@ -429,8 +508,8 @@ export const SliderWithInfo = ({ - - + + @@ -456,14 +535,18 @@ export const EnableSection = (props: EnableSectionProps) => { - {value && children} + + + {children} + + ) } export interface DropDownMenuProps { textArray: string[] - onClickArray: any + onClickArray: (() => void)[] displayValue: string } -- cgit v1.2.3