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/TagMenu.tsx | 2 +- components/Tweaks/Behavior/BehaviorPanel.tsx | 170 ++++++++++++++++ components/Tweaks/BehaviorPanel.tsx | 170 ---------------- components/Tweaks/CitationsPanel.tsx | 102 ---------- components/Tweaks/ColorMenu.tsx | 88 -------- components/Tweaks/ColorsPanel.tsx | 237 ---------------------- components/Tweaks/Filter/FilterPanel.tsx | 245 +++++++++++++++++++++++ components/Tweaks/Filter/TagColorPanel.tsx | 139 +++++++++++++ components/Tweaks/FilterPanel.tsx | 220 -------------------- components/Tweaks/GraphColorSelect.tsx | 64 ------ components/Tweaks/HighlightingPanel.tsx | 116 ----------- components/Tweaks/LabelsPanel.tsx | 162 --------------- components/Tweaks/NodesNLinks/CitationsPanel.tsx | 102 ++++++++++ components/Tweaks/NodesNLinksPanel.tsx | 131 ------------ components/Tweaks/OptionPanel.tsx | 74 +++++++ components/Tweaks/Physics/PhysicsPanel.tsx | 143 +++++++++++++ components/Tweaks/PhysicsPanel.tsx | 143 ------------- components/Tweaks/TagColorPanel.tsx | 140 ------------- components/Tweaks/TagPanel.tsx | 70 ------- components/Tweaks/ThemeSelect.tsx | 63 ------ 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 +++++++++++ components/Tweaks/VisualsPanel.tsx | 122 ----------- components/Tweaks/index.tsx | 8 +- components/config.ts | 2 + 31 files changed, 1862 insertions(+), 1833 deletions(-) create mode 100644 components/Tweaks/Behavior/BehaviorPanel.tsx delete mode 100644 components/Tweaks/BehaviorPanel.tsx delete mode 100644 components/Tweaks/CitationsPanel.tsx delete mode 100644 components/Tweaks/ColorMenu.tsx delete mode 100644 components/Tweaks/ColorsPanel.tsx create mode 100644 components/Tweaks/Filter/FilterPanel.tsx create mode 100644 components/Tweaks/Filter/TagColorPanel.tsx delete mode 100644 components/Tweaks/FilterPanel.tsx delete mode 100644 components/Tweaks/GraphColorSelect.tsx delete mode 100644 components/Tweaks/HighlightingPanel.tsx delete mode 100644 components/Tweaks/LabelsPanel.tsx create mode 100644 components/Tweaks/NodesNLinks/CitationsPanel.tsx delete mode 100644 components/Tweaks/NodesNLinksPanel.tsx create mode 100644 components/Tweaks/OptionPanel.tsx create mode 100644 components/Tweaks/Physics/PhysicsPanel.tsx delete mode 100644 components/Tweaks/PhysicsPanel.tsx delete mode 100644 components/Tweaks/TagColorPanel.tsx delete mode 100644 components/Tweaks/TagPanel.tsx delete mode 100644 components/Tweaks/ThemeSelect.tsx 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 delete mode 100644 components/Tweaks/VisualsPanel.tsx (limited to 'components') diff --git a/components/TagMenu.tsx b/components/TagMenu.tsx index 4841cbf..3108b34 100644 --- a/components/TagMenu.tsx +++ b/components/TagMenu.tsx @@ -14,7 +14,7 @@ import { import React from 'react' import { colorList, initialFilter, TagColors } from './config' import { Collapse } from './Sidebar/Collapse' -import { ColorMenu } from './Tweaks/ColorMenu' +import { ColorMenu } from './Tweaks/Visual/ColorMenu' export interface TagMenuProps { setTagColors: any diff --git a/components/Tweaks/Behavior/BehaviorPanel.tsx b/components/Tweaks/Behavior/BehaviorPanel.tsx new file mode 100644 index 0000000..8b39c93 --- /dev/null +++ b/components/Tweaks/Behavior/BehaviorPanel.tsx @@ -0,0 +1,170 @@ +import { ChevronDownIcon } from '@chakra-ui/icons' +import { + Button, + Flex, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + StackDivider, + VStack, + Text, + Box, + Switch, +} 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" + > + + Preview node + + } colorScheme="" color="black"> + + {mouse.preview ? mouse.preview[0]!.toUpperCase() + mouse.preview!.slice(1) : 'Never'} + + + + {' '} + + setMouse({ ...mouse, preview: '' })}>Never + setMouse({ ...mouse, preview: 'click' })}>Click + setMouse({ ...mouse, preview: 'double' })}> + Double Click + + + + + + + + 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/BehaviorPanel.tsx b/components/Tweaks/BehaviorPanel.tsx deleted file mode 100644 index 5d61730..0000000 --- a/components/Tweaks/BehaviorPanel.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import { ChevronDownIcon } from '@chakra-ui/icons' -import { - Button, - Flex, - Menu, - MenuButton, - MenuItem, - MenuList, - Portal, - StackDivider, - VStack, - Text, - Box, - Switch, -} 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" - > - - Preview node - - } colorScheme="" color="black"> - - {mouse.preview ? mouse.preview[0]!.toUpperCase() + mouse.preview!.slice(1) : 'Never'} - - - - {' '} - - setMouse({ ...mouse, preview: '' })}>Never - setMouse({ ...mouse, preview: 'click' })}>Click - setMouse({ ...mouse, preview: 'double' })}> - Double Click - - - - - - - - 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 deleted file mode 100644 index 93e923c..0000000 --- a/components/Tweaks/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/Tweaks/ColorMenu.tsx b/components/Tweaks/ColorMenu.tsx deleted file mode 100644 index b87f76b..0000000 --- a/components/Tweaks/ColorMenu.tsx +++ /dev/null @@ -1,88 +0,0 @@ -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/ColorsPanel.tsx b/components/Tweaks/ColorsPanel.tsx deleted file mode 100644 index de0a2b8..0000000 --- a/components/Tweaks/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/Tweaks/Filter/FilterPanel.tsx b/components/Tweaks/Filter/FilterPanel.tsx new file mode 100644 index 0000000..55ff3e5 --- /dev/null +++ b/components/Tweaks/Filter/FilterPanel.tsx @@ -0,0 +1,245 @@ +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, { useContext } from 'react' +import { OptionPanel } from '../OptionPanel' +import { initialFilter, initialLocal, TagColors } from '../../config' +import { TagColorPanel } from './TagColorPanel' +import { SliderWithInfo } from '../SliderWithInfo' +import { VariablesContext } from '../../../util/variablesContext' + +export interface FilterPanelProps { + filter: typeof initialFilter + setFilter: any + tagColors: TagColors + setTagColors: any + highlightColor: string + colorList: string[] + tags: string[] + local: typeof initialLocal + setLocal: any +} + +const FilterPanel = (props: FilterPanelProps) => { + const { + filter, + setFilter, + local, + setLocal, + tagColors, + setTagColors, + highlightColor, + colorList, + tags, + } = props + const { roamDir, subDirs } = useContext(VariablesContext) + return ( + + } + align="stretch" + paddingLeft={7} + color="gray.800" + > + + Link children to + + } + colorScheme="" + color="black" + size="sm" + > + {(() => { + 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} + > + + + Dailies + { + setFilter((curr: typeof initialFilter) => { + return { ...curr, dailies: !curr.dailies } + }) + }} + isChecked={filter.dailies} + > + + + Org-noter pages + { + setFilter((curr: typeof initialFilter) => { + return { ...curr, noter: !curr.noter } + }) + }} + isChecked={filter.noter} + > + + + Citations without note files + { + setFilter({ ...filter, filelessCites: !filter.filelessCites }) + }} + isChecked={filter.filelessCites} + > + + + Non-existent nodes + { + setTagColors({ ...tagColors, bad: 'white' }) + setFilter({ ...filter, bad: !filter.bad }) + }} + isChecked={filter.bad} + > + + setLocal({ ...local, neighbors: v })} + min={1} + max={5} + step={1} + /> + + + + + Directory filters + + + + + + + + + + Tag filters + + + + + + + + + + Tag colors + + + + + + + + + ) +} + +export default FilterPanel diff --git a/components/Tweaks/Filter/TagColorPanel.tsx b/components/Tweaks/Filter/TagColorPanel.tsx new file mode 100644 index 0000000..eb458dc --- /dev/null +++ b/components/Tweaks/Filter/TagColorPanel.tsx @@ -0,0 +1,139 @@ +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={{ + height: 8, + focusBorderColor: highlightColor, + color: 'gray.800', + borderColor: 'gray.500', + }} + 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/FilterPanel.tsx b/components/Tweaks/FilterPanel.tsx deleted file mode 100644 index ad0c5e4..0000000 --- a/components/Tweaks/FilterPanel.tsx +++ /dev/null @@ -1,220 +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, initialLocal, TagColors } from '../config' -import { TagColorPanel } from './TagColorPanel' -import { SliderWithInfo } from './SliderWithInfo' - -export interface FilterPanelProps { - filter: typeof initialFilter - setFilter: any - tagColors: TagColors - setTagColors: any - highlightColor: string - colorList: string[] - tags: string[] - local: typeof initialLocal - setLocal: any -} - -const FilterPanel = (props: FilterPanelProps) => { - const { - filter, - setFilter, - local, - setLocal, - tagColors, - setTagColors, - highlightColor, - colorList, - tags, - } = props - return ( - - } - align="stretch" - paddingLeft={7} - color="gray.800" - > - - Link children to - - } - colorScheme="" - color="black" - size="sm" - > - {(() => { - 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} - > - - - Dailies - { - setFilter((curr: typeof initialFilter) => { - return { ...curr, dailies: !curr.dailies } - }) - }} - isChecked={filter.dailies} - > - - - Org-noter pages - { - setFilter((curr: typeof initialFilter) => { - return { ...curr, noter: !curr.noter } - }) - }} - isChecked={filter.noter} - > - - - Citations without note files - { - setFilter({ ...filter, filelessCites: !filter.filelessCites }) - }} - isChecked={filter.filelessCites} - > - - - Non-existent nodes - { - setTagColors({ ...tagColors, bad: 'white' }) - setFilter({ ...filter, bad: !filter.bad }) - }} - isChecked={filter.bad} - > - - setLocal({ ...local, neighbors: v })} - min={1} - max={5} - step={1} - /> - - - - - Tag filters - - - - - - - - - - Tag colors - - - - - - - - - ) -} - -export default FilterPanel diff --git a/components/Tweaks/GraphColorSelect.tsx b/components/Tweaks/GraphColorSelect.tsx deleted file mode 100644 index 60fd8cf..0000000 --- a/components/Tweaks/GraphColorSelect.tsx +++ /dev/null @@ -1,64 +0,0 @@ -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/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 ( - } - 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/LabelsPanel.tsx b/components/Tweaks/LabelsPanel.tsx deleted file mode 100644 index 2b66e85..0000000 --- a/components/Tweaks/LabelsPanel.tsx +++ /dev/null @@ -1,162 +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) - - - - - - 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/NodesNLinks/CitationsPanel.tsx b/components/Tweaks/NodesNLinks/CitationsPanel.tsx new file mode 100644 index 0000000..aebddca --- /dev/null +++ b/components/Tweaks/NodesNLinks/CitationsPanel.tsx @@ -0,0 +1,102 @@ +import { Box, StackDivider, VStack } from '@chakra-ui/react' +import React from 'react' +import { ColorMenu } from '../Visual/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/NodesNLinksPanel.tsx b/components/Tweaks/NodesNLinksPanel.tsx deleted file mode 100644 index 3321ae3..0000000 --- a/components/Tweaks/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/Tweaks/OptionPanel.tsx b/components/Tweaks/OptionPanel.tsx new file mode 100644 index 0000000..870028b --- /dev/null +++ b/components/Tweaks/OptionPanel.tsx @@ -0,0 +1,74 @@ +import { CUIAutoComplete } from 'chakra-ui-autocomplete' +import React, { useContext, useState } from 'react' +import { ThemeContext } from '../../util/themecontext' +import { initialFilter } from '../config' + +export interface OptionPanelProps { + options: string[] + filter: typeof initialFilter + setFilter: any + listName: 'tagsBlacklist' | 'tagsWhitelist' | 'dirsAllowlist' | 'dirsBlocklist' + displayName: string + labelFilter?: string +} + +export const OptionPanel = (props: OptionPanelProps) => { + const { filter, listName, labelFilter, displayName, setFilter, options = [] } = props + const { highlightColor } = useContext(ThemeContext) + const optionArray = options.map((option) => { + return { value: option, label: labelFilter ? option.replace(labelFilter, '') : option } + }) + + const [selectedItems, setSelectedItems] = useState( + filter[listName].map((option) => { + return { + value: option, + label: labelFilter ? (option as string)?.replace(labelFilter, '') : option, + } + }), + ) + + return ( + null} + disableCreateItem={true} + selectedItems={selectedItems} + onSelectedItemsChange={(changes) => { + if (changes.selectedItems) { + setSelectedItems(changes.selectedItems) + setFilter({ ...filter, [listName]: changes.selectedItems.map((item) => item.value) }) + } + }} + listItemStyleProps={{ overflow: 'hidden' }} + highlightItemBg="gray.400" + toggleButtonStyleProps={{ variant: 'outline' }} + inputStyleProps={{ + mt: 2, + height: 8, + focusBorderColor: highlightColor, + color: 'gray.800', + borderColor: 'gray.500', + }} + tagStyleProps={{ + justifyContent: 'flex-start', + //variant: 'subtle', + fontSize: 10, + borderColor: highlightColor, + borderWidth: 1, + borderRadius: 'md', + color: highlightColor, + bg: '', + height: 4, + mb: 2, + //paddingLeft: 4, + //fontWeight: 'bold', + }} + hideToggleButton + itemRenderer={(selected) => selected.label} + /> + ) +} diff --git a/components/Tweaks/Physics/PhysicsPanel.tsx b/components/Tweaks/Physics/PhysicsPanel.tsx new file mode 100644 index 0000000..82dd6b7 --- /dev/null +++ b/components/Tweaks/Physics/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" + /> + setPhysicsCallback(v, 'linkStrength', 5)} + label="Link Force" + /> + setPhysicsCallback(v, 'alphaDecay', 50)} + /> + + + + + + Advanced + + + + } + align="stretch" + paddingLeft={3} + color="gray.800" + > + 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, '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)} + /> + 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/PhysicsPanel.tsx b/components/Tweaks/PhysicsPanel.tsx deleted file mode 100644 index cd18f03..0000000 --- a/components/Tweaks/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" - /> - setPhysicsCallback(v, 'linkStrength', 5)} - label="Link Force" - /> - setPhysicsCallback(v, 'alphaDecay', 50)} - /> - - - - - - Advanced - - - - } - align="stretch" - paddingLeft={3} - color="gray.800" - > - 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, '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)} - /> - 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/TagColorPanel.tsx b/components/Tweaks/TagColorPanel.tsx deleted file mode 100644 index d20b540..0000000 --- a/components/Tweaks/TagColorPanel.tsx +++ /dev/null @@ -1,140 +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={{ - height: 8, - focusBorderColor: highlightColor, - color: 'gray.800', - borderColor: 'gray.500', - }} - 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 deleted file mode 100644 index 58f4b7d..0000000 --- a/components/Tweaks/TagPanel.tsx +++ /dev/null @@ -1,70 +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 name = mode === 'blacklist' ? 'blocklist' : 'allowlist' - 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={{ - mt: 2, - height: 8, - focusBorderColor: highlightColor, - color: 'gray.800', - borderColor: 'gray.500', - }} - tagStyleProps={{ - justifyContent: 'flex-start', - //variant: 'subtle', - fontSize: 10, - borderColor: highlightColor, - borderWidth: 1, - borderRadius: 'md', - color: highlightColor, - bg: '', - height: 4, - mb: 2, - //paddingLeft: 4, - //fontWeight: 'bold', - }} - hideToggleButton - itemRenderer={(selected) => selected.label} - /> - ) -} diff --git a/components/Tweaks/ThemeSelect.tsx b/components/Tweaks/ThemeSelect.tsx deleted file mode 100644 index d5a7f54..0000000 --- a/components/Tweaks/ThemeSelect.tsx +++ /dev/null @@ -1,63 +0,0 @@ -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/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 + + + + + + + + + + ) +} diff --git a/components/Tweaks/VisualsPanel.tsx b/components/Tweaks/VisualsPanel.tsx deleted file mode 100644 index f364c4f..0000000 --- a/components/Tweaks/VisualsPanel.tsx +++ /dev/null @@ -1,122 +0,0 @@ -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 { CitationsPanel } from './CitationsPanel' -import { ColorMenu } from './ColorMenu' -import { ThemeSelect } from './ThemeSelect' -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 - - - - - - - - - - ) -} diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx index a07559a..039885c 100644 --- a/components/Tweaks/index.tsx +++ b/components/Tweaks/index.tsx @@ -26,13 +26,13 @@ import { initialColoring, } from '../config' -import FilterPanel from './FilterPanel' +import FilterPanel from './Filter/FilterPanel' import { ThemeContext } from '../../util/themecontext' import { usePersistantState } from '../../util/persistant-state' -import { PhysicsPanel } from './PhysicsPanel' -import { VisualsPanel } from './VisualsPanel' -import { BehaviorPanel } from './BehaviorPanel' +import { PhysicsPanel } from './Physics/PhysicsPanel' +import { BehaviorPanel } from './Behavior/BehaviorPanel' +import { VisualsPanel } from './Visual/VisualsPanel' export interface TweakProps { physics: typeof initialPhysics diff --git a/components/config.ts b/components/config.ts index d61e416..cbcb880 100644 --- a/components/config.ts +++ b/components/config.ts @@ -39,6 +39,8 @@ export const initialFilter = { filelessCites: false, tagsBlacklist: [], tagsWhitelist: [], + dirsBlocklist: [], + dirsAllowlist: [], bad: true, nodes: [], links: [], -- cgit v1.2.3