From 8b9d53389fe346259f4288f341abc2df5d5679aa Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Wed, 28 Jul 2021 15:03:38 +0200
Subject: added more node/link opacity and resolution options

---
 components/config.ts  |  4 +++-
 components/tweaks.tsx | 28 ++++++++++++++++++++++++++++
 pages/index.tsx       |  3 +++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/components/config.ts b/components/config.ts
index 80f89d1..3331288 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -22,9 +22,11 @@ export const initialPhysics = {
   particles: false,
   particlesNumber: 0,
   particlesWidth: 4,
-  linkOpacity: 0.4,
+  linkOpacity: 0.7,
   linkWidth: 1,
   nodeRel: 4,
+  nodeOpacity: 0.9,
+  nodeResolution: 8,
   labels: 2,
   labelScale: 1.5,
   alphaDecay: 0.02,
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index 7e5fd6c..bfb932c 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -300,11 +300,39 @@ export const Tweaks = (props: TweakProps) => {
                       value={physics.nodeRel}
                       onChange={(value) => setPhysics({ ...physics, nodeRel: value })}
                     />
+                    {threeDim && (
+                      <>
+                        <SliderWithInfo
+                          label="Node opacity"
+                          value={physics.nodeOpacity}
+                          min={0}
+                          max={1}
+                          onChange={(value) => setPhysics({ ...physics, nodeOpacity: value })}
+                        />
+                        <SliderWithInfo
+                          label="Node resolution"
+                          value={physics.nodeResolution}
+                          min={5}
+                          max={32}
+                          step={1}
+                          onChange={(value) => setPhysics({ ...physics, nodeResolution: value })}
+                        />
+                      </>
+                    )}
                     <SliderWithInfo
                       label="Link width"
                       value={physics.linkWidth}
                       onChange={(value) => setPhysics({ ...physics, linkWidth: value })}
                     />
+                    {threeDim && (
+                      <SliderWithInfo
+                        label="Link opacity"
+                        min={0}
+                        max={1}
+                        value={physics.linkOpacity}
+                        onChange={(value) => setPhysics({ ...physics, linkOpacity: value })}
+                      />
+                    )}
                     <Box>
                       <Flex alignItems="center" justifyContent="space-between">
                         <Text>Labels</Text>
diff --git a/pages/index.tsx b/pages/index.tsx
index d197ae5..00e87d8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -598,6 +598,9 @@ export const Graph = function (props: GraphProps) {
           {...graphCommonProps}
           nodeThreeObjectExtend={true}
           backgroundColor={theme.colors.white}
+          nodeOpacity={physics.nodeOpacity}
+          nodeResolution={physics.nodeResolution}
+          linkOpacity={physics.linkOpacity}
         />
       ) : (
         <ForceGraph2D ref={graph2dRef} {...graphCommonProps} />
-- 
cgit v1.2.3