more ui improvements, better defaults

2 files changed, 15 insertions, 14 deletions

diff --git a/components/config.ts b/components/config.ts
index 2cc4b54..89b6dd0 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -12,9 +12,11 @@ for (let type in Easing) {
   }
 }
 
+export const algos = algorithms
+
 export const initialPhysics = {
   enabled: true,
-  charge: -350,
+  charge: -500,
   collision: true,
   collisionStrength: 20,
   centering: true,
@@ -25,7 +27,7 @@ export const initialPhysics = {
   alphaTarget: 0,
   alphaMin: 0,
   velocityDecay: 0.25,
-  gravity: 0.5,
+  gravity: 0.3,
   gravityOn: true,
 }
 
@@ -42,21 +44,20 @@ export const initialVisuals = {
   particles: false,
   particlesNumber: 0,
   particlesWidth: 4,
-  linkOpacity: 0.7,
+  linkOpacity: 0.8,
   linkWidth: 1,
   nodeRel: 4,
-  nodeOpacity: 0.9,
-  nodeResolution: 8,
+  nodeOpacity: 1,
+  nodeResolution: 12,
   labels: 2,
   labelScale: 1.5,
   highlight: true,
   highlightNodeSize: 2,
   highlightLinkSize: 2,
-  highlightAnim: false,
-  animationSpeed: 250,
-  algorithms: algorithms,
+  highlightAnim: true,
+  animationSpeed: 700,
   algorithmOptions: options,
-  algorithmName: 'CubicOut',
+  algorithmName: 'BackOut',
   linkColorScheme: 'gray.500',
   nodeColorScheme: [
     'red.500',
@@ -71,9 +72,9 @@ export const initialVisuals = {
   nodeHighlight: '',
   linkHighlight: 'purple.500',
   backgroundColor: 'white',
-  emacsNodeColor: '',
-  labelTextColor: 'white',
-  labelBackgroundColor: 'black',
+  emacsNodeColor: 'grey.800',
+  labelTextColor: 'black',
+  labelBackgroundColor: 'white',
   labelBackgroundOpacity: 0.7,
 }
 
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index e7653df..34421f1 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -128,7 +128,7 @@ export const Tweaks = (props: TweakProps) => {
           position="relative"
           boxShadow="xl"
         >
-          <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Box display="flex" justifyContent="space-between" alignItems="center" paddingRight={2}>
             <Tooltip label={'Switch to ' + threeDim ? '2D' : '3D' + ' view'}>
               <Button onClick={() => setThreeDim(!threeDim)} variant="ghost" zIndex="overlay">
                 {threeDim ? '3D' : '2D'}
@@ -300,7 +300,7 @@ export const Tweaks = (props: TweakProps) => {
                               }
                             />
                             <EnableSection
-                              label="Keeps nodes centered"
+                              label="Center nodes"
                               value={physics.centering}
                               onChange={() =>
                                 setPhysics({ ...physics, centering: !physics.centering })