From ee8539a9351374a719c9026f85d85e7b4ea6e8f5 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Sat, 25 Sep 2021 16:11:31 +0200 Subject: chore: move tweaks to separate subfolder --- components/BehaviorPanel.tsx | 148 -------------------- components/CitationsPanel.tsx | 102 -------------- components/ColorMenu.tsx | 71 ---------- components/ColorsPanel.tsx | 237 -------------------------------- components/DropDownMenu.tsx | 28 ---- components/EnableSection.tsx | 31 ----- components/FilterPanel.tsx | 171 ----------------------- components/HighlightingPanel.tsx | 116 ---------------- components/InfoTooltip.tsx | 17 --- components/LabelsPanel.tsx | 139 ------------------- components/NodesNLinksPanel.tsx | 131 ------------------ components/PhysicsPanel.tsx | 143 ------------------- components/SliderWithInfo.tsx | 48 ------- components/TagColorPanel.tsx | 138 ------------------- components/TagPanel.tsx | 59 -------- components/Tweaks/BehaviorPanel.tsx | 148 ++++++++++++++++++++ components/Tweaks/CitationsPanel.tsx | 102 ++++++++++++++ components/Tweaks/ColorMenu.tsx | 71 ++++++++++ components/Tweaks/ColorsPanel.tsx | 237 ++++++++++++++++++++++++++++++++ components/Tweaks/DropDownMenu.tsx | 28 ++++ components/Tweaks/EnableSection.tsx | 31 +++++ components/Tweaks/FilterPanel.tsx | 171 +++++++++++++++++++++++ components/Tweaks/HighlightingPanel.tsx | 116 ++++++++++++++++ components/Tweaks/InfoTooltip.tsx | 17 +++ components/Tweaks/LabelsPanel.tsx | 139 +++++++++++++++++++ components/Tweaks/NodesNLinksPanel.tsx | 131 ++++++++++++++++++ components/Tweaks/PhysicsPanel.tsx | 143 +++++++++++++++++++ components/Tweaks/SliderWithInfo.tsx | 48 +++++++ components/Tweaks/TagColorPanel.tsx | 138 +++++++++++++++++++ components/Tweaks/TagPanel.tsx | 59 ++++++++ components/Tweaks/VisualsPanel.tsx | 100 ++++++++++++++ components/Tweaks/index.tsx | 217 +++++++++++++++++++++++++++++ components/VisualsPanel.tsx | 117 ---------------- components/tweaks.tsx | 217 ----------------------------- pages/index.tsx | 2 +- 35 files changed, 1897 insertions(+), 1914 deletions(-) delete mode 100644 components/BehaviorPanel.tsx delete mode 100644 components/CitationsPanel.tsx delete mode 100644 components/ColorMenu.tsx delete mode 100644 components/ColorsPanel.tsx delete mode 100644 components/DropDownMenu.tsx delete mode 100644 components/EnableSection.tsx delete mode 100644 components/FilterPanel.tsx delete mode 100644 components/HighlightingPanel.tsx delete mode 100644 components/InfoTooltip.tsx delete mode 100644 components/LabelsPanel.tsx delete mode 100644 components/NodesNLinksPanel.tsx delete mode 100644 components/PhysicsPanel.tsx delete mode 100644 components/SliderWithInfo.tsx delete mode 100644 components/TagColorPanel.tsx delete mode 100644 components/TagPanel.tsx create mode 100644 components/Tweaks/BehaviorPanel.tsx create mode 100644 components/Tweaks/CitationsPanel.tsx create mode 100644 components/Tweaks/ColorMenu.tsx create mode 100644 components/Tweaks/ColorsPanel.tsx create mode 100644 components/Tweaks/DropDownMenu.tsx create mode 100644 components/Tweaks/EnableSection.tsx create mode 100644 components/Tweaks/FilterPanel.tsx create mode 100644 components/Tweaks/HighlightingPanel.tsx create mode 100644 components/Tweaks/InfoTooltip.tsx create mode 100644 components/Tweaks/LabelsPanel.tsx create mode 100644 components/Tweaks/NodesNLinksPanel.tsx create mode 100644 components/Tweaks/PhysicsPanel.tsx create mode 100644 components/Tweaks/SliderWithInfo.tsx create mode 100644 components/Tweaks/TagColorPanel.tsx create mode 100644 components/Tweaks/TagPanel.tsx create mode 100644 components/Tweaks/VisualsPanel.tsx create mode 100644 components/Tweaks/index.tsx delete mode 100644 components/VisualsPanel.tsx delete mode 100644 components/tweaks.tsx diff --git a/components/BehaviorPanel.tsx b/components/BehaviorPanel.tsx deleted file mode 100644 index 09558af..0000000 --- a/components/BehaviorPanel.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import { ChevronDownIcon } from '@chakra-ui/icons' -import { - Button, - Flex, - Menu, - MenuButton, - MenuItem, - MenuList, - Portal, - StackDivider, - VStack, - Text, -} from '@chakra-ui/react' -import React from 'react' -import { initialBehavior, initialMouse } from './config' -import { InfoTooltip } from './InfoTooltip' -import { SliderWithInfo } from './SliderWithInfo' - -export interface BehaviorPanelProps { - behavior: typeof initialBehavior - setBehavior: any - mouse: typeof initialMouse - setMouse: any -} -export const BehaviorPanel = (props: BehaviorPanelProps) => { - const { behavior, setBehavior, mouse, setMouse } = props - return ( - } - align="stretch" - paddingLeft={7} - color="gray.800" - > - - - Expand Node - - - - } colorScheme="" color="black"> - - {mouse.local ? mouse.local[0]!.toUpperCase() + mouse.local!.slice(1) : 'Never'} - - - - {' '} - - setMouse({ ...mouse, local: '' })}>Never - setMouse({ ...mouse, local: 'click' })}>Click - setMouse({ ...mouse, local: 'double' })}> - Double Click - - setMouse({ ...mouse, local: 'right' })}> - Right Click - - - - - - - Open in Emacs - - } colorScheme="" color="black"> - - {mouse.follow ? mouse.follow[0]!.toUpperCase() + mouse.follow!.slice(1) : 'Never'} - - - - {' '} - - setMouse({ ...mouse, follow: '' })}>Never - setMouse({ ...mouse, follow: 'click' })}>Click - setMouse({ ...mouse, follow: 'double' })}> - Double Click - - setMouse({ ...mouse, follow: 'right' })}> - Right Click - - - - - - - Follow Emacs by... - - } colorScheme="" color="black"> - {behavior.follow[0].toUpperCase() + behavior.follow.slice(1)} - - - {' '} - - setBehavior({ ...behavior, follow: 'color' })}> - Just coloring the currently opened node - - setBehavior({ ...behavior, follow: 'local' })}> - Opening the local graph - - setBehavior({ ...behavior, follow: 'zoom' })}> - Zooming to the current node - - - - - - - - Local graph - - - - } colorScheme="" color="black"> - {behavior.localSame === 'add' ? 'Add' : 'Replace'} - - - {' '} - - setBehavior({ ...behavior, localSame: 'replace' })}> - Open that nodes graph - - setBehavior({ ...behavior, localSame: 'add' })}> - Add node to local graph - - - - - - setBehavior({ ...behavior, zoomSpeed: value })} - /> - setBehavior({ ...behavior, zoomPadding: value })} - infoText="How much to zoom out to accomodate all nodes when changing the view." - /> - - ) -} diff --git a/components/CitationsPanel.tsx b/components/CitationsPanel.tsx deleted file mode 100644 index c34b0df..0000000 --- a/components/CitationsPanel.tsx +++ /dev/null @@ -1,102 +0,0 @@ -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 CitationsPanelProps { - visuals: typeof initialVisuals - setVisuals: any -} -export const CitationsPanel = (props: CitationsPanelProps) => { - const { visuals, setVisuals } = props - return ( - } - align="stretch" - color="gray.800" - > - - setVisuals({ ...visuals, citeDashes: !visuals.citeDashes })} - > - setVisuals({ ...visuals, citeDashLength: value * 10 })} - /> - setVisuals({ ...visuals, citeGapLength: value * 5 })} - /> - - - - - setVisuals({ ...visuals, refDashes: !visuals.refDashes })} - > - setVisuals({ ...visuals, refDashLength: value * 10 })} - /> - setVisuals({ ...visuals, refGapLength: value * 5 })} - /> - - - - - - - ) -} diff --git a/components/ColorMenu.tsx b/components/ColorMenu.tsx deleted file mode 100644 index 1bbf087..0000000 --- a/components/ColorMenu.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { ChevronDownIcon } from '@chakra-ui/icons' -import { - Text, - Box, - Button, - Flex, - Menu, - MenuButton, - MenuItem, - MenuList, - Portal, -} 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 -} - -export const ColorMenu = (props: ColorMenuProps) => { - const { label, colorList, value, visValue, setVisuals } = props - - const clickCallback = useCallback( - (color) => - setVisuals((curr: typeof initialVisuals) => { - return { - ...curr, - [value]: color, - } - }), - [], - ) - return ( - - {label} - - }> - {} - - - {' '} - - clickCallback('')} - justifyContent="space-between" - alignItems="center" - display="flex" - > - - - {colorList.map((color: string) => ( - clickCallback(color)} - justifyContent="space-between" - alignItems="center" - display="flex" - > - - - ))} - - - - - ) -} diff --git a/components/ColorsPanel.tsx b/components/ColorsPanel.tsx deleted file mode 100644 index 6846a93..0000000 --- a/components/ColorsPanel.tsx +++ /dev/null @@ -1,237 +0,0 @@ -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/DropDownMenu.tsx b/components/DropDownMenu.tsx deleted file mode 100644 index fbd854b..0000000 --- a/components/DropDownMenu.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { ChevronDownIcon } from '@chakra-ui/icons' -import { Button, Menu, MenuButton, MenuItem, MenuList, Portal } from '@chakra-ui/react' -import React from 'react' - -export interface DropDownMenuProps { - textArray: string[] - onClickArray: (() => void)[] - displayValue: string -} - -export const DropDownMenu = (props: DropDownMenuProps) => { - const { textArray, onClickArray, displayValue } = props - return ( - - }> - {displayValue} - - - {' '} - - {textArray.map((option, i) => { - ; {option} - })} - - - - ) -} diff --git a/components/EnableSection.tsx b/components/EnableSection.tsx deleted file mode 100644 index b7981b3..0000000 --- a/components/EnableSection.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Text, Box, Collapse, Switch } from '@chakra-ui/react' -import React from 'react' -import { InfoTooltip } from './InfoTooltip' - -export interface EnableSectionProps { - label: string - value: boolean | number - onChange: () => void - infoText?: string - children: React.ReactNode -} - -export const EnableSection = (props: EnableSectionProps) => { - const { value, onChange, label, infoText, children } = props - return ( - - - - {label} - {infoText && } - - - - - - {children} - - - - ) -} diff --git a/components/FilterPanel.tsx b/components/FilterPanel.tsx deleted file mode 100644 index 871c3d6..0000000 --- a/components/FilterPanel.tsx +++ /dev/null @@ -1,171 +0,0 @@ -import { ChevronDownIcon } from '@chakra-ui/icons' -import { - Text, - Box, - Button, - Flex, - Menu, - MenuButton, - StackDivider, - VStack, - Portal, - MenuList, - MenuItem, - Switch, - Accordion, - AccordionItem, - AccordionButton, - AccordionIcon, - AccordionPanel, -} from '@chakra-ui/react' -import React from 'react' -import { TagPanel } from './TagPanel' -import { initialFilter, TagColors } from './config' -import { TagColorPanel } from './TagColorPanel' - -export interface FilterPanelProps { - filter: typeof initialFilter - setFilter: any - tagColors: TagColors - setTagColors: any - highlightColor: string - colorList: string[] - tags: string[] -} - -const FilterPanel = (props: FilterPanelProps) => { - const { filter, setFilter, tagColors, setTagColors, highlightColor, colorList, tags } = props - return ( - - } - align="stretch" - paddingLeft={7} - color="gray.800" - > - - Link children to... - - } colorScheme="" color="black"> - {(() => { - switch (filter.parent) { - case 'parent': - return File - case 'heading': - return Heading - default: - return Nothing - } - })()} - - - {' '} - - - setFilter((curr: typeof initialFilter) => ({ ...curr, parent: '' })) - } - > - Nothing - - - setFilter((curr: typeof initialFilter) => ({ - ...curr, - parent: 'parent', - })) - } - > - Parent file node - - - setFilter((curr: typeof initialFilter) => ({ - ...curr, - parent: 'heading', - })) - } - > - Next highest heading node - - - - - - - Orphans - { - setFilter((curr: typeof initialFilter) => { - return { ...curr, orphans: !curr.orphans } - }) - }} - isChecked={filter.orphans} - > - - - Citations without note files - { - setFilter({ ...filter, filelessCites: !filter.filelessCites }) - }} - isChecked={filter.filelessCites} - > - - - Non-existant nodes - { - setTagColors({ ...tagColors, bad: 'white' }) - setFilter({ ...filter, bad: !filter.bad }) - }} - isChecked={filter.bad} - > - - - - - - Tag filters - - - - - - - - - - Tag Colors - - - - - - - - - ) -} - -export default FilterPanel diff --git a/components/HighlightingPanel.tsx b/components/HighlightingPanel.tsx deleted file mode 100644 index b3900e2..0000000 --- a/components/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 ( - } - 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/InfoTooltip.tsx b/components/InfoTooltip.tsx deleted file mode 100644 index 02c2fad..0000000 --- a/components/InfoTooltip.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { InfoOutlineIcon } from '@chakra-ui/icons' -import { Box, Tooltip } from '@chakra-ui/react' -import React from 'react' - -export interface InfoTooltipProps { - infoText?: string | boolean -} -export const InfoTooltip = (props: InfoTooltipProps) => { - const { infoText } = props - return ( - - - - - - ) -} diff --git a/components/LabelsPanel.tsx b/components/LabelsPanel.tsx deleted file mode 100644 index eb7dc34..0000000 --- a/components/LabelsPanel.tsx +++ /dev/null @@ -1,139 +0,0 @@ -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) - - - - - - } - align="stretch" - paddingLeft={2} - color="gray.800" - > - setVisuals({ ...visuals, labelFontSize: value })} - /> - setVisuals({ ...visuals, labelLength: value })} - /> - setVisuals({ ...visuals, labelWordWrap: value })} - /> - setVisuals({ ...visuals, labelLineSpace: value })} - /> - - - - - { - console.log(visuals.labelBackgroundOpacity) - setVisuals({ ...visuals, labelBackgroundOpacity: value }) - }} - min={0} - max={1} - step={0.01} - /> - - - 1} animateOpacity> - - setVisuals({ ...visuals, labelScale: value / 5 })} - /> - - - - - - ) -} diff --git a/components/NodesNLinksPanel.tsx b/components/NodesNLinksPanel.tsx deleted file mode 100644 index f19a3e2..0000000 --- a/components/NodesNLinksPanel.tsx +++ /dev/null @@ -1,131 +0,0 @@ -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/PhysicsPanel.tsx b/components/PhysicsPanel.tsx deleted file mode 100644 index 1bdfaa0..0000000 --- a/components/PhysicsPanel.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import { - Text, - Accordion, - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, - Box, - Flex, - StackDivider, - Switch, - VStack, -} from '@chakra-ui/react' -import React, { useCallback } from 'react' -import { initialPhysics } from './config' -import { EnableSection } from './EnableSection' -import { SliderWithInfo } from './SliderWithInfo' - -export interface PhysicsPanelProps { - physics: typeof initialPhysics - setPhysics: any -} - -export const PhysicsPanel = (props: PhysicsPanelProps) => { - const { physics, setPhysics } = props - const setPhysicsCallback = useCallback((val: number, phys: string, scale: number) => { - setPhysics((curr: typeof initialPhysics) => { - return { ...curr, [phys]: val / scale } - }) - }, []) - return ( - - } - align="stretch" - paddingLeft={7} - color="gray.800" - > - setPhysics({ ...physics, gravityOn: !physics.gravityOn })} - > - - Also in local - { - setPhysics((curr: typeof initialPhysics) => { - return { ...curr, gravityLocal: !curr.gravityLocal } - }) - }} - isChecked={physics.gravityLocal} - > - - setPhysicsCallback(v, 'gravity', 10)} - /> - - setPhysicsCallback(v, 'charge', -1 / 100)} - label="Repulsive Force" - /> - setPhysics({ ...physics, collision: !physics.collision })} - > - setPhysicsCallback(v, 'collisionStrength', 1 / 5)} - label="Collision Radius" - infoText="Easy with this one, high values can lead to a real jiggly mess" - /> - - setPhysicsCallback(v, 'linkStrength', 5)} - label="Link Force" - /> - setPhysicsCallback(v, 'linkIts', 1)} - min={0} - max={6} - step={1} - infoText="How many links down the line the physics of a single node affects (Slow)" - /> - setPhysicsCallback(v, 'velocityDecay', 10)} - /> - - - - - - Advanced - - - - } - align="stretch" - paddingLeft={3} - color="gray.800" - > - setPhysicsCallback(v, 'alphaDecay', 50)} - /> - setPhysics({ ...physics, centering: !physics.centering })} - infoText="Keeps the nodes in the center of the viewport. If disabled you can drag the nodes anywhere you want." - > - setPhysicsCallback(v, 'centeringStrength', 1)} - /> - - - - - - - - ) -} diff --git a/components/SliderWithInfo.tsx b/components/SliderWithInfo.tsx deleted file mode 100644 index d4f0372..0000000 --- a/components/SliderWithInfo.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { - Text, - Box, - Slider, - SliderFilledTrack, - SliderThumb, - SliderTrack, - Tooltip, -} from '@chakra-ui/react' -import React, { useContext } from 'react' -import { ThemeContext } from '../util/themecontext' -import { InfoTooltip } from './InfoTooltip' - -export interface SliderWithInfoProps { - min?: number - max?: number - step?: number - value: number - onChange: (arg0: number) => void - label: string - infoText?: string -} -export const SliderWithInfo = ({ - min = 0, - max = 10, - step = 0.1, - value = 1, - ...rest -}: SliderWithInfoProps) => { - const { onChange, label, infoText } = rest - const { highlightColor } = useContext(ThemeContext) - return ( - - - {label} - {infoText && } - - - - - - - - - - - ) -} diff --git a/components/TagColorPanel.tsx b/components/TagColorPanel.tsx deleted file mode 100644 index f9a9815..0000000 --- a/components/TagColorPanel.tsx +++ /dev/null @@ -1,138 +0,0 @@ -import { DeleteIcon } from '@chakra-ui/icons' -import { - Text, - Box, - Flex, - IconButton, - Menu, - MenuButton, - MenuItem, - MenuList, - Portal, - StackDivider, - VStack, - Button, -} from '@chakra-ui/react' -import { CUIAutoComplete } from 'chakra-ui-autocomplete' -import React, { useState } from 'react' -import { TagColors } from './config' - -export interface TagColorPanelProps { - tags: string[] - highlightColor: string - colorList: string[] - tagColors: TagColors - setTagColors: any -} -export const TagColorPanel = (props: TagColorPanelProps) => { - const { colorList, tagColors, setTagColors, highlightColor, tags } = props - const tagArray = tags.map((tag) => { - return { value: tag, label: tag } - }) - - const [selectedItems, setSelectedItems] = useState( - Object.keys(tagColors).map((tag) => { - return { value: tag, label: tag } - }), - ) - - return ( - - { - if (changes.selectedItems) { - setSelectedItems(Array.from(new Set(changes.selectedItems))) - setTagColors( - Object.fromEntries( - Array.from(new Set(changes.selectedItems)).map((item) => { - return [item.label, tagColors[item.label] ?? 'gray.600'] - }), - ), - ) - } - }} - listItemStyleProps={{ overflow: 'hidden' }} - highlightItemBg="gray.400" - toggleButtonStyleProps={{ variant: 'outline' }} - inputStyleProps={{ - focusBorderColor: highlightColor, - color: 'gray.800', - borderColor: 'gray.600', - }} - tagStyleProps={{ - display: 'none', - rounded: 'full', - bg: highlightColor, - height: 8, - paddingLeft: 4, - fontWeight: 'bold', - }} - hideToggleButton - itemRenderer={(selected) => selected.label} - /> - } - align="stretch" - color="gray.800" - > - {Object.keys(tagColors).map((tag) => { - return ( - - - {tag} - - - - {} - - - {' '} - - {colorList.map((color: string) => ( - - setTagColors({ - ...tagColors, - [tag]: color, - }) - } - justifyContent="space-between" - alignItems="center" - display="flex" - > - - - ))} - - - - } - onClick={() => { - setTagColors( - Object.fromEntries( - Array.from(new Set(selectedItems)).map((item) => { - return [item.label, tagColors[item.label] ?? 'gray.600'] - }), - ), - ) - setSelectedItems(selectedItems.filter((item) => item.value !== tag)) - }} - /> - - ) - })} - - - ) -} diff --git a/components/TagPanel.tsx b/components/TagPanel.tsx deleted file mode 100644 index 545102b..0000000 --- a/components/TagPanel.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { CUIAutoComplete } from 'chakra-ui-autocomplete' -import React, { useState } from 'react' -import { initialFilter } from './config' - -export interface TagPanelProps { - tags: string[] - filter: typeof initialFilter - setFilter: any - highlightColor: string - mode: string -} - -export const TagPanel = (props: TagPanelProps) => { - const { filter, setFilter, tags, highlightColor, mode } = props - const tagArray = tags.map((tag) => { - return { value: tag, label: tag } - }) - - const currentTags = mode === 'blacklist' ? 'tagsBlacklist' : 'tagsWhitelist' - const [selectedItems, setSelectedItems] = useState( - filter[currentTags].map((tag) => { - return { value: tag, label: tag } - }), - ) - - return ( - null} - disableCreateItem={true} - selectedItems={selectedItems} - onSelectedItemsChange={(changes) => { - if (changes.selectedItems) { - setSelectedItems(changes.selectedItems) - setFilter({ ...filter, [currentTags]: changes.selectedItems.map((item) => item.value) }) - } - }} - listItemStyleProps={{ overflow: 'hidden' }} - highlightItemBg="gray.400" - toggleButtonStyleProps={{ variant: 'outline' }} - inputStyleProps={{ - focusBorderColor: highlightColor, - color: 'gray.800', - borderColor: 'gray.600', - }} - tagStyleProps={{ - rounded: 'full', - bg: highlightColor, - height: 8, - paddingLeft: 4, - fontWeight: 'bold', - }} - hideToggleButton - itemRenderer={(selected) => selected.label} - /> - ) -} diff --git a/components/Tweaks/BehaviorPanel.tsx b/components/Tweaks/BehaviorPanel.tsx new file mode 100644 index 0000000..8edb986 --- /dev/null +++ b/components/Tweaks/BehaviorPanel.tsx @@ -0,0 +1,148 @@ +import { ChevronDownIcon } from '@chakra-ui/icons' +import { + Button, + Flex, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + StackDivider, + VStack, + Text, +} from '@chakra-ui/react' +import React from 'react' +import { initialBehavior, initialMouse } from '../config' +import { InfoTooltip } from './InfoTooltip' +import { SliderWithInfo } from './SliderWithInfo' + +export interface BehaviorPanelProps { + behavior: typeof initialBehavior + setBehavior: any + mouse: typeof initialMouse + setMouse: any +} +export const BehaviorPanel = (props: BehaviorPanelProps) => { + const { behavior, setBehavior, mouse, setMouse } = props + return ( + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + + + Expand Node + + + + } colorScheme="" color="black"> + + {mouse.local ? mouse.local[0]!.toUpperCase() + mouse.local!.slice(1) : 'Never'} + + + + {' '} + + setMouse({ ...mouse, local: '' })}>Never + setMouse({ ...mouse, local: 'click' })}>Click + setMouse({ ...mouse, local: 'double' })}> + Double Click + + setMouse({ ...mouse, local: 'right' })}> + Right Click + + + + + + + Open in Emacs + + } colorScheme="" color="black"> + + {mouse.follow ? mouse.follow[0]!.toUpperCase() + mouse.follow!.slice(1) : 'Never'} + + + + {' '} + + setMouse({ ...mouse, follow: '' })}>Never + setMouse({ ...mouse, follow: 'click' })}>Click + setMouse({ ...mouse, follow: 'double' })}> + Double Click + + setMouse({ ...mouse, follow: 'right' })}> + Right Click + + + + + + + Follow Emacs by... + + } colorScheme="" color="black"> + {behavior.follow[0].toUpperCase() + behavior.follow.slice(1)} + + + {' '} + + setBehavior({ ...behavior, follow: 'color' })}> + Just coloring the currently opened node + + setBehavior({ ...behavior, follow: 'local' })}> + Opening the local graph + + setBehavior({ ...behavior, follow: 'zoom' })}> + Zooming to the current node + + + + + + + + Local graph + + + + } colorScheme="" color="black"> + {behavior.localSame === 'add' ? 'Add' : 'Replace'} + + + {' '} + + setBehavior({ ...behavior, localSame: 'replace' })}> + Open that nodes graph + + setBehavior({ ...behavior, localSame: 'add' })}> + Add node to local graph + + + + + + setBehavior({ ...behavior, zoomSpeed: value })} + /> + setBehavior({ ...behavior, zoomPadding: value })} + infoText="How much to zoom out to accomodate all nodes when changing the view." + /> + + ) +} diff --git a/components/Tweaks/CitationsPanel.tsx b/components/Tweaks/CitationsPanel.tsx new file mode 100644 index 0000000..93e923c --- /dev/null +++ b/components/Tweaks/CitationsPanel.tsx @@ -0,0 +1,102 @@ +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 CitationsPanelProps { + visuals: typeof initialVisuals + setVisuals: any +} +export const CitationsPanel = (props: CitationsPanelProps) => { + const { visuals, setVisuals } = props + return ( + } + align="stretch" + color="gray.800" + > + + setVisuals({ ...visuals, citeDashes: !visuals.citeDashes })} + > + setVisuals({ ...visuals, citeDashLength: value * 10 })} + /> + setVisuals({ ...visuals, citeGapLength: value * 5 })} + /> + + + + + setVisuals({ ...visuals, refDashes: !visuals.refDashes })} + > + setVisuals({ ...visuals, refDashLength: value * 10 })} + /> + setVisuals({ ...visuals, refGapLength: value * 5 })} + /> + + + + + + + ) +} diff --git a/components/Tweaks/ColorMenu.tsx b/components/Tweaks/ColorMenu.tsx new file mode 100644 index 0000000..1bbf087 --- /dev/null +++ b/components/Tweaks/ColorMenu.tsx @@ -0,0 +1,71 @@ +import { ChevronDownIcon } from '@chakra-ui/icons' +import { + Text, + Box, + Button, + Flex, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, +} 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 +} + +export const ColorMenu = (props: ColorMenuProps) => { + const { label, colorList, value, visValue, setVisuals } = props + + const clickCallback = useCallback( + (color) => + setVisuals((curr: typeof initialVisuals) => { + return { + ...curr, + [value]: color, + } + }), + [], + ) + return ( + + {label} + + }> + {} + + + {' '} + + clickCallback('')} + justifyContent="space-between" + alignItems="center" + display="flex" + > + + + {colorList.map((color: string) => ( + clickCallback(color)} + justifyContent="space-between" + alignItems="center" + display="flex" + > + + + ))} + + + + + ) +} diff --git a/components/Tweaks/ColorsPanel.tsx b/components/Tweaks/ColorsPanel.tsx new file mode 100644 index 0000000..de0a2b8 --- /dev/null +++ b/components/Tweaks/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/DropDownMenu.tsx b/components/Tweaks/DropDownMenu.tsx new file mode 100644 index 0000000..fbd854b --- /dev/null +++ b/components/Tweaks/DropDownMenu.tsx @@ -0,0 +1,28 @@ +import { ChevronDownIcon } from '@chakra-ui/icons' +import { Button, Menu, MenuButton, MenuItem, MenuList, Portal } from '@chakra-ui/react' +import React from 'react' + +export interface DropDownMenuProps { + textArray: string[] + onClickArray: (() => void)[] + displayValue: string +} + +export const DropDownMenu = (props: DropDownMenuProps) => { + const { textArray, onClickArray, displayValue } = props + return ( + + }> + {displayValue} + + + {' '} + + {textArray.map((option, i) => { + ; {option} + })} + + + + ) +} diff --git a/components/Tweaks/EnableSection.tsx b/components/Tweaks/EnableSection.tsx new file mode 100644 index 0000000..b7981b3 --- /dev/null +++ b/components/Tweaks/EnableSection.tsx @@ -0,0 +1,31 @@ +import { Text, Box, Collapse, Switch } from '@chakra-ui/react' +import React from 'react' +import { InfoTooltip } from './InfoTooltip' + +export interface EnableSectionProps { + label: string + value: boolean | number + onChange: () => void + infoText?: string + children: React.ReactNode +} + +export const EnableSection = (props: EnableSectionProps) => { + const { value, onChange, label, infoText, children } = props + return ( + + + + {label} + {infoText && } + + + + + + {children} + + + + ) +} diff --git a/components/Tweaks/FilterPanel.tsx b/components/Tweaks/FilterPanel.tsx new file mode 100644 index 0000000..df1dd81 --- /dev/null +++ b/components/Tweaks/FilterPanel.tsx @@ -0,0 +1,171 @@ +import { ChevronDownIcon } from '@chakra-ui/icons' +import { + Text, + Box, + Button, + Flex, + Menu, + MenuButton, + StackDivider, + VStack, + Portal, + MenuList, + MenuItem, + Switch, + Accordion, + AccordionItem, + AccordionButton, + AccordionIcon, + AccordionPanel, +} from '@chakra-ui/react' +import React from 'react' +import { TagPanel } from './TagPanel' +import { initialFilter, TagColors } from '../config' +import { TagColorPanel } from './TagColorPanel' + +export interface FilterPanelProps { + filter: typeof initialFilter + setFilter: any + tagColors: TagColors + setTagColors: any + highlightColor: string + colorList: string[] + tags: string[] +} + +const FilterPanel = (props: FilterPanelProps) => { + const { filter, setFilter, tagColors, setTagColors, highlightColor, colorList, tags } = props + return ( + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + + Link children to... + + } colorScheme="" color="black"> + {(() => { + switch (filter.parent) { + case 'parent': + return File + case 'heading': + return Heading + default: + return Nothing + } + })()} + + + {' '} + + + setFilter((curr: typeof initialFilter) => ({ ...curr, parent: '' })) + } + > + Nothing + + + setFilter((curr: typeof initialFilter) => ({ + ...curr, + parent: 'parent', + })) + } + > + Parent file node + + + setFilter((curr: typeof initialFilter) => ({ + ...curr, + parent: 'heading', + })) + } + > + Next highest heading node + + + + + + + Orphans + { + setFilter((curr: typeof initialFilter) => { + return { ...curr, orphans: !curr.orphans } + }) + }} + isChecked={filter.orphans} + > + + + Citations without note files + { + setFilter({ ...filter, filelessCites: !filter.filelessCites }) + }} + isChecked={filter.filelessCites} + > + + + Non-existant nodes + { + setTagColors({ ...tagColors, bad: 'white' }) + setFilter({ ...filter, bad: !filter.bad }) + }} + isChecked={filter.bad} + > + + + + + + Tag filters + + + + + + + + + + Tag Colors + + + + + + + + + ) +} + +export default FilterPanel diff --git a/components/Tweaks/HighlightingPanel.tsx b/components/Tweaks/HighlightingPanel.tsx new file mode 100644 index 0000000..6f71268 --- /dev/null +++ b/components/Tweaks/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/InfoTooltip.tsx b/components/Tweaks/InfoTooltip.tsx new file mode 100644 index 0000000..02c2fad --- /dev/null +++ b/components/Tweaks/InfoTooltip.tsx @@ -0,0 +1,17 @@ +import { InfoOutlineIcon } from '@chakra-ui/icons' +import { Box, Tooltip } from '@chakra-ui/react' +import React from 'react' + +export interface InfoTooltipProps { + infoText?: string | boolean +} +export const InfoTooltip = (props: InfoTooltipProps) => { + const { infoText } = props + return ( + + + + + + ) +} diff --git a/components/Tweaks/LabelsPanel.tsx b/components/Tweaks/LabelsPanel.tsx new file mode 100644 index 0000000..013409e --- /dev/null +++ b/components/Tweaks/LabelsPanel.tsx @@ -0,0 +1,139 @@ +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) + + + + + + } + align="stretch" + paddingLeft={2} + color="gray.800" + > + setVisuals({ ...visuals, labelFontSize: value })} + /> + setVisuals({ ...visuals, labelLength: value })} + /> + setVisuals({ ...visuals, labelWordWrap: value })} + /> + setVisuals({ ...visuals, labelLineSpace: value })} + /> + + + + + { + console.log(visuals.labelBackgroundOpacity) + setVisuals({ ...visuals, labelBackgroundOpacity: value }) + }} + min={0} + max={1} + step={0.01} + /> + + + 1} animateOpacity> + + setVisuals({ ...visuals, labelScale: value / 5 })} + /> + + + + + + ) +} diff --git a/components/Tweaks/NodesNLinksPanel.tsx b/components/Tweaks/NodesNLinksPanel.tsx new file mode 100644 index 0000000..dba927c --- /dev/null +++ b/components/Tweaks/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/PhysicsPanel.tsx b/components/Tweaks/PhysicsPanel.tsx new file mode 100644 index 0000000..05fdba8 --- /dev/null +++ b/components/Tweaks/PhysicsPanel.tsx @@ -0,0 +1,143 @@ +import { + Text, + Accordion, + AccordionButton, + AccordionIcon, + AccordionItem, + AccordionPanel, + Box, + Flex, + StackDivider, + Switch, + VStack, +} from '@chakra-ui/react' +import React, { useCallback } from 'react' +import { initialPhysics } from '../config' +import { EnableSection } from './EnableSection' +import { SliderWithInfo } from './SliderWithInfo' + +export interface PhysicsPanelProps { + physics: typeof initialPhysics + setPhysics: any +} + +export const PhysicsPanel = (props: PhysicsPanelProps) => { + const { physics, setPhysics } = props + const setPhysicsCallback = useCallback((val: number, phys: string, scale: number) => { + setPhysics((curr: typeof initialPhysics) => { + return { ...curr, [phys]: val / scale } + }) + }, []) + return ( + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + setPhysics({ ...physics, gravityOn: !physics.gravityOn })} + > + + Also in local + { + setPhysics((curr: typeof initialPhysics) => { + return { ...curr, gravityLocal: !curr.gravityLocal } + }) + }} + isChecked={physics.gravityLocal} + > + + setPhysicsCallback(v, 'gravity', 10)} + /> + + setPhysicsCallback(v, 'charge', -1 / 100)} + label="Repulsive Force" + /> + setPhysics({ ...physics, collision: !physics.collision })} + > + setPhysicsCallback(v, 'collisionStrength', 1 / 5)} + label="Collision Radius" + infoText="Easy with this one, high values can lead to a real jiggly mess" + /> + + setPhysicsCallback(v, 'linkStrength', 5)} + label="Link Force" + /> + setPhysicsCallback(v, 'linkIts', 1)} + min={0} + max={6} + step={1} + infoText="How many links down the line the physics of a single node affects (Slow)" + /> + setPhysicsCallback(v, 'velocityDecay', 10)} + /> + + + + + + Advanced + + + + } + align="stretch" + paddingLeft={3} + color="gray.800" + > + setPhysicsCallback(v, 'alphaDecay', 50)} + /> + setPhysics({ ...physics, centering: !physics.centering })} + infoText="Keeps the nodes in the center of the viewport. If disabled you can drag the nodes anywhere you want." + > + setPhysicsCallback(v, 'centeringStrength', 1)} + /> + + + + + + + + ) +} diff --git a/components/Tweaks/SliderWithInfo.tsx b/components/Tweaks/SliderWithInfo.tsx new file mode 100644 index 0000000..f70faae --- /dev/null +++ b/components/Tweaks/SliderWithInfo.tsx @@ -0,0 +1,48 @@ +import { + Text, + Box, + Slider, + SliderFilledTrack, + SliderThumb, + SliderTrack, + Tooltip, +} from '@chakra-ui/react' +import React, { useContext } from 'react' +import { ThemeContext } from '../../util/themecontext' +import { InfoTooltip } from './InfoTooltip' + +export interface SliderWithInfoProps { + min?: number + max?: number + step?: number + value: number + onChange: (arg0: number) => void + label: string + infoText?: string +} +export const SliderWithInfo = ({ + min = 0, + max = 10, + step = 0.1, + value = 1, + ...rest +}: SliderWithInfoProps) => { + const { onChange, label, infoText } = rest + const { highlightColor } = useContext(ThemeContext) + return ( + + + {label} + {infoText && } + + + + + + + + + + + ) +} diff --git a/components/Tweaks/TagColorPanel.tsx b/components/Tweaks/TagColorPanel.tsx new file mode 100644 index 0000000..0a595e8 --- /dev/null +++ b/components/Tweaks/TagColorPanel.tsx @@ -0,0 +1,138 @@ +import { DeleteIcon } from '@chakra-ui/icons' +import { + Text, + Box, + Flex, + IconButton, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + StackDivider, + VStack, + Button, +} from '@chakra-ui/react' +import { CUIAutoComplete } from 'chakra-ui-autocomplete' +import React, { useState } from 'react' +import { TagColors } from '../config' + +export interface TagColorPanelProps { + tags: string[] + highlightColor: string + colorList: string[] + tagColors: TagColors + setTagColors: any +} +export const TagColorPanel = (props: TagColorPanelProps) => { + const { colorList, tagColors, setTagColors, highlightColor, tags } = props + const tagArray = tags.map((tag) => { + return { value: tag, label: tag } + }) + + const [selectedItems, setSelectedItems] = useState( + Object.keys(tagColors).map((tag) => { + return { value: tag, label: tag } + }), + ) + + return ( + + { + if (changes.selectedItems) { + setSelectedItems(Array.from(new Set(changes.selectedItems))) + setTagColors( + Object.fromEntries( + Array.from(new Set(changes.selectedItems)).map((item) => { + return [item.label, tagColors[item.label] ?? 'gray.600'] + }), + ), + ) + } + }} + listItemStyleProps={{ overflow: 'hidden' }} + highlightItemBg="gray.400" + toggleButtonStyleProps={{ variant: 'outline' }} + inputStyleProps={{ + focusBorderColor: highlightColor, + color: 'gray.800', + borderColor: 'gray.600', + }} + tagStyleProps={{ + display: 'none', + rounded: 'full', + bg: highlightColor, + height: 8, + paddingLeft: 4, + fontWeight: 'bold', + }} + hideToggleButton + itemRenderer={(selected) => selected.label} + /> + } + align="stretch" + color="gray.800" + > + {Object.keys(tagColors).map((tag) => { + return ( + + + {tag} + + + + {} + + + {' '} + + {colorList.map((color: string) => ( + + setTagColors({ + ...tagColors, + [tag]: color, + }) + } + justifyContent="space-between" + alignItems="center" + display="flex" + > + + + ))} + + + + } + onClick={() => { + setTagColors( + Object.fromEntries( + Array.from(new Set(selectedItems)).map((item) => { + return [item.label, tagColors[item.label] ?? 'gray.600'] + }), + ), + ) + setSelectedItems(selectedItems.filter((item) => item.value !== tag)) + }} + /> + + ) + })} + + + ) +} diff --git a/components/Tweaks/TagPanel.tsx b/components/Tweaks/TagPanel.tsx new file mode 100644 index 0000000..545102b --- /dev/null +++ b/components/Tweaks/TagPanel.tsx @@ -0,0 +1,59 @@ +import { CUIAutoComplete } from 'chakra-ui-autocomplete' +import React, { useState } from 'react' +import { initialFilter } from './config' + +export interface TagPanelProps { + tags: string[] + filter: typeof initialFilter + setFilter: any + highlightColor: string + mode: string +} + +export const TagPanel = (props: TagPanelProps) => { + const { filter, setFilter, tags, highlightColor, mode } = props + const tagArray = tags.map((tag) => { + return { value: tag, label: tag } + }) + + const currentTags = mode === 'blacklist' ? 'tagsBlacklist' : 'tagsWhitelist' + const [selectedItems, setSelectedItems] = useState( + filter[currentTags].map((tag) => { + return { value: tag, label: tag } + }), + ) + + return ( + null} + disableCreateItem={true} + selectedItems={selectedItems} + onSelectedItemsChange={(changes) => { + if (changes.selectedItems) { + setSelectedItems(changes.selectedItems) + setFilter({ ...filter, [currentTags]: changes.selectedItems.map((item) => item.value) }) + } + }} + listItemStyleProps={{ overflow: 'hidden' }} + highlightItemBg="gray.400" + toggleButtonStyleProps={{ variant: 'outline' }} + inputStyleProps={{ + focusBorderColor: highlightColor, + color: 'gray.800', + borderColor: 'gray.600', + }} + tagStyleProps={{ + rounded: 'full', + bg: highlightColor, + height: 8, + paddingLeft: 4, + fontWeight: 'bold', + }} + hideToggleButton + itemRenderer={(selected) => selected.label} + /> + ) +} 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 ( + + + + + + Colors + + + + + + + + + + + Nodes & Links + + + + + + + + + + + Labels + + + + + + + + + + + Highlighting + + + + + + + + + + + Citations + + + + + + + + + + ) +} diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx new file mode 100644 index 0000000..c60e670 --- /dev/null +++ b/components/Tweaks/index.tsx @@ -0,0 +1,217 @@ +import { CloseIcon, RepeatClockIcon, SettingsIcon } from '@chakra-ui/icons' +import { + Accordion, + AccordionButton, + AccordionIcon, + AccordionItem, + AccordionPanel, + Box, + Button, + IconButton, + Tooltip, + Heading, +} from '@chakra-ui/react' + +import React, { useContext } from 'react' +import Scrollbars from 'react-custom-scrollbars-2' +import { + initialPhysics, + initialFilter, + initialVisuals, + initialMouse, + initialBehavior, + TagColors, + colorList, +} from '../config' + +import FilterPanel from './FilterPanel' + +import { ThemeContext } from '../../util/themecontext' +import { usePersistantState } from '../../util/persistant-state' +import { PhysicsPanel } from './PhysicsPanel' +import { VisualsPanel } from './VisualsPanel' +import { BehaviorPanel } from './BehaviorPanel' + +export interface TweakProps { + physics: typeof initialPhysics + setPhysics: any + threeDim: boolean + setThreeDim: (newValue: boolean) => void + filter: typeof initialFilter + setFilter: any + visuals: typeof initialVisuals + setVisuals: any + mouse: typeof initialMouse + setMouse: any + behavior: typeof initialBehavior + setBehavior: any + tags: string[] + tagColors: TagColors + setTagColors: any +} + +export const Tweaks = (props: TweakProps) => { + const { + physics, + setPhysics, + threeDim, + setThreeDim, + filter, + setFilter, + visuals, + setVisuals, + mouse, + setMouse, + behavior, + setBehavior, + tags, + tagColors, + setTagColors, + } = props + const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false) + const { highlightColor, setHighlightColor } = useContext(ThemeContext) + + return !showTweaks ? ( + + } + onClick={() => setShowTweaks(true)} + /> + + ) : ( + + + + + + + + } + onClick={() => { + setVisuals(initialVisuals) + setFilter(initialFilter) + setMouse(initialMouse) + setPhysics(initialPhysics) + setBehavior(initialBehavior) + }} + variant="none" + size="sm" + /> + + } + aria-label="Close Tweak Panel" + variant="ghost" + onClick={() => setShowTweaks(false)} + /> + + + ( + + )} + > + + + + + Filter + + + + + + + + + + Physics + + + + + + + + + + Visual + + + + + + + + + Behavior + + + + + + + + + ) +} diff --git a/components/VisualsPanel.tsx b/components/VisualsPanel.tsx deleted file mode 100644 index 1b6fceb..0000000 --- a/components/VisualsPanel.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import { ArrowRightIcon, ChevronDownIcon } from '@chakra-ui/icons' -import { - Text, - Accordion, - AccordionButton, - AccordionItem, - Box, - Flex, - IconButton, - Menu, - MenuButton, - MenuItemOption, - MenuList, - MenuOptionGroup, - Portal, - Tooltip, - VStack, - AccordionIcon, - AccordionPanel, - MenuItem, - Collapse, - StackDivider, - Button, -} from '@chakra-ui/react' -import React, { useCallback } from 'react' -import { ColorMenu } from './ColorMenu' -import { EnableSection } from './EnableSection' -import { SliderWithInfo } from './SliderWithInfo' -import { HighlightingPanel } from './HighlightingPanel' -import { ColorsPanel } from './ColorsPanel' -import { colorList, 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 ( - - - - - - Colors - - - - - - - - - - - Nodes & Links - - - - - - - - - - - Labels - - - - - - - - - - - Highlighting - - - - - - - - - - - Citations - - - - - - - - - - ) -} diff --git a/components/tweaks.tsx b/components/tweaks.tsx deleted file mode 100644 index a78c7f4..0000000 --- a/components/tweaks.tsx +++ /dev/null @@ -1,217 +0,0 @@ -import { CloseIcon, RepeatClockIcon, SettingsIcon } from '@chakra-ui/icons' -import { - Accordion, - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, - Box, - Button, - IconButton, - Tooltip, - Heading, -} from '@chakra-ui/react' - -import React, { useContext } from 'react' -import Scrollbars from 'react-custom-scrollbars-2' -import { - initialPhysics, - initialFilter, - initialVisuals, - initialMouse, - initialBehavior, - TagColors, - colorList, -} from './config' - -import FilterPanel from './FilterPanel' - -import { ThemeContext } from '../util/themecontext' -import { usePersistantState } from '../util/persistant-state' -import { PhysicsPanel } from './PhysicsPanel' -import { VisualsPanel } from './VisualsPanel' -import { BehaviorPanel } from './BehaviorPanel' - -export interface TweakProps { - physics: typeof initialPhysics - setPhysics: any - threeDim: boolean - setThreeDim: (newValue: boolean) => void - filter: typeof initialFilter - setFilter: any - visuals: typeof initialVisuals - setVisuals: any - mouse: typeof initialMouse - setMouse: any - behavior: typeof initialBehavior - setBehavior: any - tags: string[] - tagColors: TagColors - setTagColors: any -} - -export const Tweaks = (props: TweakProps) => { - const { - physics, - setPhysics, - threeDim, - setThreeDim, - filter, - setFilter, - visuals, - setVisuals, - mouse, - setMouse, - behavior, - setBehavior, - tags, - tagColors, - setTagColors, - } = props - const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false) - const { highlightColor, setHighlightColor } = useContext(ThemeContext) - - return !showTweaks ? ( - - } - onClick={() => setShowTweaks(true)} - /> - - ) : ( - - - - - - - - } - onClick={() => { - setVisuals(initialVisuals) - setFilter(initialFilter) - setMouse(initialMouse) - setPhysics(initialPhysics) - setBehavior(initialBehavior) - }} - variant="none" - size="sm" - /> - - } - aria-label="Close Tweak Panel" - variant="ghost" - onClick={() => setShowTweaks(false)} - /> - - - ( - - )} - > - - - - - Filter - - - - - - - - - - Physics - - - - - - - - - - Visual - - - - - - - - - Behavior - - - - - - - - - ) -} diff --git a/pages/index.tsx b/pages/index.tsx index c7f3c42..c7713ed 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -33,7 +33,7 @@ import { TagColors, colorList, } from '../components/config' -import { Tweaks } from '../components/tweaks' +import { Tweaks } from '../components/Tweaks' import { ContextMenu } from '../components/contextmenu' import { ThemeContext, ThemeContextProps } from '../util/themecontext' -- cgit v1.2.3