From 14498d7753d0b39ba167d6e51a1f1c05e686d603 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Thu, 22 Jul 2021 14:03:11 +0200 Subject: very timely commit of new tweak interface --- pages/index.tsx | 452 +++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 448 insertions(+), 4 deletions(-) (limited to 'pages/index.tsx') diff --git a/pages/index.tsx b/pages/index.tsx index fb15ddc..dcdb225 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -9,6 +9,42 @@ import { GraphData, NodeObject } from 'force-graph' import { useWindowSize } from '@react-hook/window-size' +import { + Accordion, + AccordionButton, + AccordionItem, + AccordionIcon, + AccordionPanel, + Text, + Heading, + VStack, + StackDivider, + Button, + CloseButton, + Slider, + SliderThumb, + SliderTrack, + SliderFilledTrack, + Switch, + FormControl, + FormLabel, + Box, + Container, + Icon, + IconButton, + Tooltip, + Menu, + MenuList, + MenuButton, + MenuItem, + MenuGroup, + MenuDivider, + MenuOptionGroup, + MenuItemOption, +} from '@chakra-ui/react' + +import { InfoOutlineIcon, RepeatClockIcon, ChevronDownIcon } from '@chakra-ui/icons' + // react-force-graph fails on import when server-rendered // https://github.com/vasturiano/react-force-graph/issues/155 const ForceGraph2D = ( @@ -19,6 +55,7 @@ export type NodeById = { [nodeId: string]: OrgRoamNode | undefined } export type LinksByNodeId = { [nodeId: string]: OrgRoamLink[] | undefined } const initialPhysics = { + enabled: true, charge: -350, collision: true, linkStrength: 0.1, @@ -30,15 +67,18 @@ const initialPhysics = { nodeRel: 4, labels: true, labelScale: 1.5, - alphaDecay: 0.16, + alphaDecay: 0.02, alphaTarget: 0, + alphaMin: 0, velocityDecay: 0.25, gravity: 0.5, gravityOn: true, - hover: true, colorful: true, galaxy: true, - rootId: 0, + ticks: 1, + hover: 'highlight', + click: 'select', + doubleClick: 'local', } const initialTheme = { @@ -127,6 +167,14 @@ export function GraphPage() { return (
+ { + const { infoText } = props + return ( + + + + + + ) + } + + interface SliderWithInfo { + min: number + max: number + step: number + value: number + onChange: (arg0: number) => void + label: string + infoText: string + } + + const SliderWithInfo = (props: SliderWithLabel) => { + const { min, max, step, value, onChange, label, infoText } = props + return ( + + + {label} + + + + + + + + + + + + ) + } + + interface SliderWithoutInfo { + min: number + max: number + step: number + val: number + change: (arg0: number) => void + label: string + physics: typeof initialPhysics + setPhysics: any + } + + const SliderWithoutInfo = (props: SliderWithoutInfo) => { + const { min, max, step, physics, setPhysics, label } = props + return ( + + + {label} + + setPhysics({ ...physics, gravity: value })} + min={min} + max={max} + step={step} + focusThumbOnChange={false} + > + + + + + + + ) + } + + return ( + + + + } + onClick={() => setPhysics(initialPhysics)} + /> + + + + + + + + + Physics + + setPhysics({ ...physics, enabled: !physics.enabled })} + isChecked={physics.enabled} + /> + + + } + align="stretch" + > + + + Gravity + setPhysics({ ...physics, gravityOn: !physics.gravityOn })} + isChecked={physics.gravityOn} + /> + + {physics.gravityOn && ( + + Strength + setPhysics({ ...physics, gravity: value })} + min={0} + max={1} + step={0.01} + > + + + + + + + + + )} + + + + Repulsive Force + setPhysics({ ...physics, charge: -value })} + min={0} + max={1000} + > + + + + + + + + + + + + Collision + + + setPhysics({ ...physics, collision: !physics.collision })} + isChecked={physics.collision} + /> + + {physics.collision && ( + + Strength + setPhysics({ ...physics, collisionStrength: value })} + min={0} + max={2} + > + + + + + + + + + )} + + + Link Strength + setPhysics({ ...physics, linkStrength: value })} + min={0} + max={2} + step={0.01} + > + + + + + + + + + + + + Link Iterations + + + setPhysics({ ...physics, linkIts: value })} + min={0} + max={6} + step={1} + > + + + + + + + + + + Viscosity + setPhysics({ ...physics, velocityDecay: value })} + min={0} + max={1} + step={0.01} + > + + + + + + + + + + + + + + Advanced + + + + } + align="stretch" + > + + Simulation Ticks + + + + + + + + + + + Alpha Decay + setPhysics({ ...physics, alphaDecay: value })} + min={0} + max={1} + step={0.01} + > + + + + + + + + + Alpha Minimum + setPhysics({ ...physics, alphaMin: value })} + min={0.01} + max={1} + step={0.01} + > + + + + + + + + + + + + + {/* */} + + + + + + Visual + + + } + align="stretch" + > + Ayyyy + + + + + + + Behavior + + + } + align="stretch" + > + + Hover Higlight + + }> + {physics.hover} + + + Off + On + + + + + Click + + + Double-click + + + + + + + + Visual + + + } + align="stretch" + > + Ayyyy + + + + + + ) +} + export interface GraphProps { nodeById: NodeById linksByNodeId: LinksByNodeId @@ -360,7 +804,7 @@ export const Graph = function (props: GraphProps) { }} nodeCanvasObjectMode={() => 'after'} d3AlphaDecay={physics.alphaDecay} - d3AlphaMin={physics.alphaTarget} + d3AlphaMin={physics.alphaMin} d3VelocityDecay={physics.velocityDecay} backgroundColor={'#242730'} onNodeClick={selectClick} -- cgit v1.2.3