summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-10-16 22:41:27 +0200
committerThomas F. K. Jorna <[email protected]>2021-10-16 22:41:27 +0200
commitf69c94297de4168175d02e9ead985b7420cb0bfc (patch)
tree101f62cdaaf52473a2cf324ed23b55f86740261c /components
parent15fdbd4e9e36c858709651e035fe1339dba3a1e9 (diff)
feat(labels): better defaults
Diffstat (limited to 'components')
-rw-r--r--components/Tweaks/NodesNLinksPanel.tsx2
-rw-r--r--components/Tweaks/PhysicsPanel.tsx56
-rw-r--r--components/config.ts8
3 files changed, 33 insertions, 33 deletions
diff --git a/components/Tweaks/NodesNLinksPanel.tsx b/components/Tweaks/NodesNLinksPanel.tsx
index dba927c..3321ae3 100644
--- a/components/Tweaks/NodesNLinksPanel.tsx
+++ b/components/Tweaks/NodesNLinksPanel.tsx
@@ -28,7 +28,7 @@ export const NodesNLinksPanel = (props: NodesNLinksPanelProps) => {
onChange={(value) => setVisuals({ ...visuals, nodeRel: value })}
/>
<SliderWithInfo
- label="Node connections size scale"
+ label="Node degree size multiplier"
value={visuals.nodeSizeLinks}
min={0}
max={2}
diff --git a/components/Tweaks/PhysicsPanel.tsx b/components/Tweaks/PhysicsPanel.tsx
index 05fdba8..cd18f03 100644
--- a/components/Tweaks/PhysicsPanel.tsx
+++ b/components/Tweaks/PhysicsPanel.tsx
@@ -65,37 +65,15 @@ export const PhysicsPanel = (props: PhysicsPanelProps) => {
onChange={(v) => setPhysicsCallback(v, 'charge', -1 / 100)}
label="Repulsive Force"
/>
- <EnableSection
- label="Collision"
- infoText="Perfomance sap, disable if slow"
- value={physics.collision}
- onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
- >
- <SliderWithInfo
- value={physics.collisionStrength / 5}
- onChange={(v) => setPhysicsCallback(v, 'collisionStrength', 1 / 5)}
- label="Collision Radius"
- infoText="Easy with this one, high values can lead to a real jiggly mess"
- />
- </EnableSection>
<SliderWithInfo
value={physics.linkStrength * 5}
onChange={(v) => setPhysicsCallback(v, 'linkStrength', 5)}
label="Link Force"
/>
<SliderWithInfo
- label="Link Iterations"
- value={physics.linkIts}
- onChange={(v) => 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)"
- />
- <SliderWithInfo
- label="Viscosity"
- value={physics.velocityDecay * 10}
- onChange={(v) => setPhysicsCallback(v, 'velocityDecay', 10)}
+ label="Stabilization rate"
+ value={physics.alphaDecay * 50}
+ onChange={(v) => setPhysicsCallback(v, 'alphaDecay', 50)}
/>
</VStack>
<Box>
@@ -114,10 +92,32 @@ export const PhysicsPanel = (props: PhysicsPanelProps) => {
paddingLeft={3}
color="gray.800"
>
+ <EnableSection
+ label="Collision"
+ infoText="Perfomance sap, disable if slow"
+ value={physics.collision}
+ onChange={() => setPhysics({ ...physics, collision: !physics.collision })}
+ >
+ <SliderWithInfo
+ value={physics.collisionStrength / 5}
+ onChange={(v) => setPhysicsCallback(v, 'collisionStrength', 1 / 5)}
+ label="Collision Radius"
+ infoText="Easy with this one, high values can lead to a real jiggly mess"
+ />
+ </EnableSection>
+ <SliderWithInfo
+ label="Link iterations"
+ value={physics.linkIts}
+ onChange={(v) => 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)"
+ />
<SliderWithInfo
- label="Stabilization rate"
- value={physics.alphaDecay * 50}
- onChange={(v) => setPhysicsCallback(v, 'alphaDecay', 50)}
+ label="Viscosity"
+ value={physics.velocityDecay * 10}
+ onChange={(v) => setPhysicsCallback(v, 'velocityDecay', 10)}
/>
<EnableSection
label="Center nodes"
diff --git a/components/config.ts b/components/config.ts
index a5d859e..32a4c21 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -56,11 +56,11 @@ export const initialVisuals = {
arrowsColor: '',
linkOpacity: 0.8,
linkWidth: 1,
- nodeRel: 4,
+ nodeRel: 3,
nodeOpacity: 1,
nodeResolution: 12,
labels: 2,
- labelScale: 1,
+ labelScale: 1.5,
labelFontSize: 10,
labelLength: 40,
labelWordWrap: 25,
@@ -69,12 +69,12 @@ export const initialVisuals = {
labelDynamicStrength: 0.5,
highlight: true,
highlightNodeSize: 1.1,
- highlightLinkSize: 1,
+ highlightLinkSize: 0.7,
highlightFade: 0.8,
highlightAnim: true,
animationSpeed: 360,
algorithmOptions: options,
- algorithmName: 'SinusoidalOut',
+ algorithmName: 'CircularOut',
linkColorScheme: 'gray.500',
nodeColorScheme: [
'red.500',