summaryrefslogtreecommitdiff
path: root/pages
diff options
context:
space:
mode:
Diffstat (limited to 'pages')
-rw-r--r--pages/index.tsx58
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>
)
}