diff options
| -rw-r--r-- | pages/index.tsx | 58 |
1 files changed, 55 insertions, 3 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index 3237785..1b7eb79 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -294,10 +294,20 @@ export interface TweakProps { threeDim: boolean } export const Tweaks = function (props: TweakProps) { - const { physics, setPhysics, threeDim} = props + const { physics, setPhysics, threeDim } = props return ( - <Container zIndex="overlay" position="absolute" bg="white" w="xs"> + <Box + zIndex="overlay" + position="absolute" + bg="white" + w="xs" + marginTop="2%" + marginLeft="2%" + borderRadius="md" + maxH="80%" + overflowY="scroll" + > <Box display="flex" justifyContent="flex-end"> <Tooltip label="Reset settings to defaults"> <IconButton @@ -422,6 +432,48 @@ export const Tweaks = function (props: TweakProps) { divider={<StackDivider borderColor="gray.200" />} align="stretch" > + <SliderWithInfo + label="Node size" + value={physics.nodeRel} + onChange={(value) => setPhysics({ ...physics, nodeRel: value })} + /> + <SliderWithInfo + label="Link width" + value={physics.linkWidth} + onChange={(value) => setPhysics({ ...physics, linkWidth: value })} + /> + <EnableSlider + enableLabel="Labels" + enableValue={physics.labels} + onEnableValueChange={() => setPhysics({ ...physics, labels: !physics.labels })} + label="Label Appearance Scale" + value={physics.labelScale * 5} + onChange={(value) => setPhysics({ ...physics, labelScale: value / 5 })} + /> + <Box> + <EnableSlider + enableLabel="Directional Particles" + enableValue={physics.particles ? true : false} + onEnableValueChange={() => + setPhysics({ ...physics, labels: physics.particles ? 0 : 1 }) + } + label="Particle Number" + value={physics.particles} + max={5} + step={1} + onChange={(value) => setPhysics({ ...physics, particles: value })} + /> + <SliderWithInfo + label="Particle Size" + value={physics.particleWidth} + onChange={(value) => setPhysics({ ...physics, particleWidth: value })} + /> + </Box> + <SliderWithInfo + label="Node size" + value={physics.nodeRel} + onChange={(value) => setPhysics({ ...physics, nodeRel: value })} + /> <Text>Ayyyy</Text> </VStack> </AccordionPanel> @@ -476,7 +528,7 @@ export const Tweaks = function (props: TweakProps) { </AccordionPanel> </AccordionItem> </Accordion> - </Container> + </Box> ) } |