From 6e3ba4f86bf3f25d27af66cfcd4f5739e767b208 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Thu, 15 Jul 2021 22:48:14 +0200
Subject: prevent data writing every update

---
 app/components/graph/graph.tsx   |   9 +-
 app/components/tweaks/tweaks.tsx | 470 +++++++++++++++++++++------------------
 2 files changed, 258 insertions(+), 221 deletions(-)

(limited to 'app/components')

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 14e3b60..72b9eea 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -192,6 +192,10 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
           nodeLabel={(node) => "label"}
           // nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
           //d3VelocityDecay={visco}
+          linkWidth={physics.linkWidth}
+          linkOpacity={physics.linkOpacity}
+          nodeRelSize={physics.nodeRel}
+          linkDirectionalParticleWidth={physics.particleWidth}
         />
       ) : (
         <ForceGraph3D
@@ -207,8 +211,11 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
           }
           onNodeClick={!physics.collapse ? null : handleNodeClick}
           nodeVal={(node) => node.childLinks.length + 1}
-          linkOpacity={0.8}
         //d3VelocityDecay={visco}
+          linkWidth={physics.linkWidth}
+          linkOpacity={physics.linkOpacity}
+          nodeRelSize={physics.nodeRel}
+          linkDirectionalParticleWidth={physics.particleWidth}
         />
       )}
     </View>
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index d275a5b..6c207e9 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -34,260 +34,290 @@ export interface TweaksProps {
  */
 export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element {
     const { style, physics, setPhysics } = props
-//    const styles = flatten([CONTAINER, style])
+    //    const styles = flatten([CONTAINER, style])
 
     const content = [
         {
             title: "Physics",
             content:
-        <View>
-        <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge}/>
-            <Slider style={{height: 40 , width: "90%"}}
-                minimumValue={-400}
-                maximumValue={100}
-        onValueChange={(value) => { setPhysics({...physics, charge: value}) }}
-                value={physics.charge}
-                step={1}/>
-        <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength}/>
-            <Slider style={{height: 40 , width: "90%"}}
-                minimumValue={0}
-                maximumValue={2}
-                    onValueChange={(value) => { setPhysics({...physics, linkStrength: value}) }}
-                value={physics.linkStrength}
-                step={0.1}
-                />
-            <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts}/>
-            <Slider style={{ height: 40 , width: "90%"}}
-                minimumValue={1}
-                maximumValue={10}
-                    onValueChange={(value) => { setPhysics({...physics, linkIts: value}) }}
-                value={physics.linkIts}
-                step={1}/>
-            <Text preset="fieldLabel" text="Collision"/>
-            <Switch style={{width: "5", height: 20, marginVertical: 10 }}
-                value={physics.collision}
-                    onValueChange={()=>{setPhysics({...physics, collision: !physics.collision})}}
-                />
-            </View>,
+                <View>
+                    <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
+                    <Slider style={{ height: 40, width: "90%" }}
+                        minimumValue={-400}
+                        maximumValue={100}
+                        onValueChange={(value) => { setPhysics({ ...physics, charge: value }) }}
+                        value={physics.charge}
+                        step={1} />
+                    <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
+                    <Slider style={{ height: 40, width: "90%" }}
+                        minimumValue={0}
+                        maximumValue={2}
+                        onValueChange={(value) => { setPhysics({ ...physics, linkStrength: value }) }}
+                        value={physics.linkStrength}
+                        step={0.1}
+                    />
+                    <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
+                    <Slider style={{ height: 40, width: "90%" }}
+                        minimumValue={1}
+                        maximumValue={10}
+                        onValueChange={(value) => { setPhysics({ ...physics, linkIts: value }) }}
+                        value={physics.linkIts}
+                        step={1} />
+                    <Text preset="fieldLabel" text="Collision" />
+                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
+                        value={physics.collision}
+                        onValueChange={() => { setPhysics({ ...physics, collision: !physics.collision }) }}
+                    />
+                </View>,
         },
         {
             title: 'Visual',
             content:
-            <View>
-            <Text preset="fieldLabel" text={"Particles: " + physics.particles}/>
-            <Slider style={{ height: 40 , width: "90%"}}
-                minimumValue={0}
-                maximumValue={5}
-                    onValueChange={(value) => { setPhysics({...physics, particles: value}) }}
-                value={physics.particles}
-                step={1}/>
-            </View>,
+                <View>
+                    <Text preset="fieldLabel" text={"Line Opacity: " + physics.linkOpacity} />
+                    <Slider style={{ height: 40, width: "90%" }}
+                        minimumValue={0}
+                        maximumValue={1}
+                        onValueChange={(value) => { setPhysics({ ...physics, linkOpacity: value }) }}
+                        value={physics.linkOpacity}
+                        step={.01} />
+                    <Text preset="fieldLabel" text={"Line width: " + physics.linkWidth} />
+                    <Slider style={{ height: 40, width: "90%" }}
+                        minimumValue={.1}
+                        maximumValue={10}
+                        onValueChange={(value) => { setPhysics({ ...physics, linkWidth: value }) }}
+                        value={physics.linkWidth}
+                        step={0.1} />
+                    <Text preset="fieldLabel" text={"Node size: " + physics.nodeRel} />
+                    <Slider style={{ height: 40, width: "90%" }}
+                        minimumValue={1}
+                        maximumValue={10}
+                        onValueChange={(value) => { setPhysics({ ...physics, nodeRel: value }) }}
+                        value={physics.nodeRel}
+                        step={.01} />
+                    <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
+                    <Slider style={{ height: 40, width: "90%" }}
+                        minimumValue={0}
+                        maximumValue={10}
+                        onValueChange={(value) => { setPhysics({ ...physics, particles: value }) }}
+                        value={physics.particles}
+                        step={1} />
+                    <Text preset="fieldLabel" text={"Particle Size: " + physics.particleWidth} />
+                    <Slider style={{ height: 40, width: "90%" }}
+                        minimumValue={1}
+                        maximumValue={10}
+                        onValueChange={(value) => { setPhysics({ ...physics, particleWidth: value }) }}
+                        value={physics.particleWidth}
+                        step={.1} />
+                </View>,
         },
         {
             title: 'Modes',
             content:
-        <View>
-            <Text preset="fieldLabel" text="Expandable Graph"/>
-            <Switch style={{width: "5", height: 20, marginVertical: 10 }}
-                value={physics.collapse}
-                    onValueChange={()=>{setPhysics({...physics, collapse: !physics.collapse})}}
-                />
-            <Text preset="fieldLabel" text="3D"/>
-            <Switch style={{width: "5", height: 20, marginVertical: 10 }}
-                value={physics.threedim}
-                    onValueChange={()=>{setPhysics({...physics, threedim: !physics.threedim})}}
-                />
-        </View>
+                <View>
+                    <Text preset="fieldLabel" text="Expandable Graph" />
+                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
+                        value={physics.collapse}
+                        onValueChange={() => { setPhysics({ ...physics, collapse: !physics.collapse }) }}
+                    />
+                    <Text preset="fieldLabel" text="3D" />
+                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
+                        value={physics.threedim}
+                        onValueChange={() => { setPhysics({ ...physics, threedim: !physics.threedim }) }}
+                    />
+                </View>
         },
     ];
 
     const [activeSections, setActiveSections] = useState([]);
 
     const setSections = (sections) => {
-    setActiveSections(
-      sections.includes(undefined) ? [] : sections
-    );
-  };
+        setActiveSections(
+            sections.includes(undefined) ? [] : sections
+        );
+    };
 
-  const renderHeader = (section, _, isActive) => {
-    return (
-      <Animatable.View
-        duration={400}
-        style={[styles.header, isActive ? styles.active : styles.inactive]}
-        transition="backgroundColor"
-      >
-        <Text style={styles.headerText}>{section.title}</Text>
-      </Animatable.View>
-    );
-  };
+    const renderHeader = (section, _, isActive) => {
+        return (
+            <Animatable.View
+                duration={400}
+                style={[styles.header, isActive ? styles.active : styles.inactive]}
+                transition="backgroundColor"
+            >
+                <Text style={styles.headerText}>{section.title}</Text>
+            </Animatable.View>
+        );
+    };
 
-  const renderContent = (section, _, isActive) => {
-    return (
-      <Animatable.View
-        duration={400}
-        style={[styles.content, isActive ? styles.active : styles.inactive]}
-        transition="backgroundColor"
-      >
-          {section.content}
-      </Animatable.View>
-    );
-  }
+    const renderContent = (section, _, isActive) => {
+        return (
+            <Animatable.View
+                duration={400}
+                style={[styles.content, isActive ? styles.active : styles.inactive]}
+                transition="backgroundColor"
+            >
+                {section.content}
+            </Animatable.View>
+        );
+    }
     const [tweaks, setTweaks] = useState(true);
     if (true) {
-        if(tweaks){
-        return(
-             <View style={styles.container}>
-            <View style={{height: 30, width: "100%", backgroundColor: "rgb(20,20,20)"}}>
-            <TouchableOpacity style={{width: 30, color: "#ffffff", textAlign: "center", marginLeft: "auto", padding: 5}}
-            onPress={()=>{setTweaks(false)}}>
-                    <Icon name="close-circle" color="#ffffff" size={20}/>
-            </TouchableOpacity>
-            </View>
-        <ScrollView>
-            <Accordion
-            activeSections={activeSections}
-            sections={content}
-            touchAbleComponent={TouchableOpacity}
-            expandMultiple={true}
-            renderHeader = {renderHeader}
-                        renderContent = {renderContent}
-                duration={200}
-                onChange={setSections}
-                renderAsFlatList={false}
+        if (tweaks) {
+            return (
+                <View style={styles.container}>
+                    <View style={{ height: 30, width: "100%", backgroundColor: "rgb(20,20,20)" }}>
+                        <TouchableOpacity style={{ width: 30, color: "#ffffff", textAlign: "center", marginLeft: "auto", padding: 5 }}
+                            onPress={() => { setTweaks(false) }}>
+                            <Icon name="close-circle" color="#ffffff" size={20} />
+                        </TouchableOpacity>
+                    </View>
+                    <ScrollView>
+                        <Accordion
+                            activeSections={activeSections}
+                            sections={content}
+                            touchAbleComponent={TouchableOpacity}
+                            expandMultiple={true}
+                            renderHeader={renderHeader}
+                            renderContent={renderContent}
+                            duration={200}
+                            onChange={setSections}
+                            renderAsFlatList={false}
 
-            />
-            </ScrollView>
-            </View>
-        );
+                        />
+                    </ScrollView>
+                </View>
+            );
         } else {
-            return(
+            return (
                 <TouchableOpacity
-                onPress={()=>{setTweaks(true)}}
-                style={{position: "absolute", top: 50, left: 50, width: 30, color: "#ffffff", zIndex: 100}}>
-                    <Icon name="cog" color="#ffffff" size={30}/>
+                    onPress={() => { setTweaks(true) }}
+                    style={{ position: "absolute", top: 50, left: 50, width: 30, color: "#ffffff", zIndex: 100 }}>
+                    <Icon name="cog" color="#ffffff" size={30} />
                 </TouchableOpacity>
             )
         }
     } else {
-    return (
-        <View style={{position: "absolute", top: "5%", left: "5%", zIndex: 100, width: 300, backgroundColor: "#000000", padding: 20}}>
-        <Text preset="bold" text="Physics"/>
-        <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge}/>
-            <Slider style={{height: 40 , width: "90%"}}
-                minimumValue={-400}
-                maximumValue={100}
-        onValueChange={(value) => { setPhysics({...physics, charge: value}) }}
-                value={physics.charge}
-                step={1}/>
-        <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength}/>
-            <Slider style={{height: 40 , width: "90%"}}
-                minimumValue={0}
-                maximumValue={2}
-                    onValueChange={(value) => { setPhysics({...physics, linkStrength: value}) }}
-                value={physics.linkStrength}
-                step={0.1}
+        return (
+            <View style={{ position: "absolute", top: "5%", left: "5%", zIndex: 100, width: 300, backgroundColor: "#000000", padding: 20 }}>
+                <Text preset="bold" text="Physics" />
+                <Text preset="fieldLabel" text={"Repulsive force: " + physics.charge} />
+                <Slider style={{ height: 40, width: "90%" }}
+                    minimumValue={-400}
+                    maximumValue={100}
+                    onValueChange={(value) => { setPhysics({ ...physics, charge: value }) }}
+                    value={physics.charge}
+                    step={1} />
+                <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
+                <Slider style={{ height: 40, width: "90%" }}
+                    minimumValue={0}
+                    maximumValue={2}
+                    onValueChange={(value) => { setPhysics({ ...physics, linkStrength: value }) }}
+                    value={physics.linkStrength}
+                    step={0.1}
                 />
-            <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts}/>
-            <Slider style={{ height: 40 , width: "90%"}}
-                minimumValue={1}
-                maximumValue={10}
-                    onValueChange={(value) => { setPhysics({...physics, linkIts: value}) }}
-                value={physics.linkIts}
-                step={1}/>
-            <Text preset="fieldLabel" text="Collision"/>
-            <Switch style={{width: "5", height: 20, marginVertical: 10 }}
-                value={physics.collision}
-                    onValueChange={()=>{setPhysics({...physics, collision: !physics.collision})}}
+                <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
+                <Slider style={{ height: 40, width: "90%" }}
+                    minimumValue={1}
+                    maximumValue={10}
+                    onValueChange={(value) => { setPhysics({ ...physics, linkIts: value }) }}
+                    value={physics.linkIts}
+                    step={1} />
+                <Text preset="fieldLabel" text="Collision" />
+                <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
+                    value={physics.collision}
+                    onValueChange={() => { setPhysics({ ...physics, collision: !physics.collision }) }}
                 />
-            <Text preset="bold" text="Visual"/>
-            <Text preset="fieldLabel" text={"Particles: " + physics.particles}/>
-            <Slider style={{ height: 40 , width: "90%"}}
-                minimumValue={0}
-                maximumValue={5}
-                    onValueChange={(value) => { setPhysics({...physics, particles: value}) }}
-                value={physics.particles}
-                step={1}/>
-            <Text preset="bold" text="Modes"/>
-            <Text preset="fieldLabel" text="Expandable Graph"/>
-            <Switch style={{width: "5", height: 20, marginVertical: 10 }}
-                value={physics.collapse}
-                    onValueChange={()=>{setPhysics({...physics, collapse: !physics.collapse})}}
+                <Text preset="bold" text="Visual" />
+                <Text preset="fieldLabel" text={"Particles: " + physics.particles} />
+                <Slider style={{ height: 40, width: "90%" }}
+                    minimumValue={0}
+                    maximumValue={5}
+                    onValueChange={(value) => { setPhysics({ ...physics, particles: value }) }}
+                    value={physics.particles}
+                    step={1} />
+                <Text preset="bold" text="Modes" />
+                <Text preset="fieldLabel" text="Expandable Graph" />
+                <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
+                    value={physics.collapse}
+                    onValueChange={() => { setPhysics({ ...physics, collapse: !physics.collapse }) }}
                 />
-            <Text preset="fieldLabel" text="3D"/>
-            <Switch style={{width: "5", height: 20, marginVertical: 10 }}
-                value={physics.threedim}
-                    onValueChange={()=>{setPhysics({...physics, threedim: !physics.threedim})}}
+                <Text preset="fieldLabel" text="3D" />
+                <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
+                    value={physics.threedim}
+                    onValueChange={() => { setPhysics({ ...physics, threedim: !physics.threedim }) }}
                 />
-        </View>
-    );}
+            </View>
+        );
+    }
 })
 
-const styles = StyleSheet.create ({
-  container: {
-    flex: 1,
-    backgroundColor: '#111111',
-    position: "absolute",
-    zIndex: 100,
-    left: 50,
-    top: 50,
-    width: 300,
-    borderRadius: 5,
-    borderStyle: "solid",
-  },
-  title: {
-    textAlign: 'left',
-    fontSize: 22,
-    fontWeight: '300',
-    marginBottom: 20,
-    paddingLeft: 20,
-  },
-  header: {
-    backgroundColor: '#111111',
-    padding: 10,
-    paddingBottom: 20,
-    textAlign: "left",
-  },
-  headerText: {
-    textAlign: 'left',
-    paddingLeft: 30,
-    fontSize: 16,
-    fontWeight: '500',
-  },
-  content: {
-    padding: 20,
-    backgroundColor: '#000000',
-  },
-  active: {
-    backgroundColor: 'rgba(0,0,0,1)',
-  },
-  inactive: {
-    backgroundColor: 'rgba(20,20,20,1)',
-  },
-  selectors: {
-    marginBottom: 10,
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  selector: {
-    backgroundColor: '#111111',
-    padding: 10,
-  },
-  activeSelector: {
-    fontWeight: 'bold',
-  },
-  selectTitle: {
-    fontSize: 14,
-    fontWeight: '500',
-    padding: 10,
-  },
-  multipleToggle: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginVertical: 30,
-    alignItems: 'center',
-  },
-  multipleToggle__title: {
-    fontSize: 16,
-    marginRight: 8,
-  },
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#111111',
+        position: "absolute",
+        zIndex: 100,
+        left: 50,
+        top: 50,
+        width: 250,
+        borderRadius: 5,
+        borderStyle: "solid",
+        maxHeight: "70%",
+    },
+    title: {
+        textAlign: 'left',
+        fontSize: 22,
+        fontWeight: '300',
+        marginBottom: 20,
+        paddingLeft: 20,
+    },
+    header: {
+        backgroundColor: '#111111',
+        padding: 10,
+        paddingBottom: 20,
+        textAlign: "left",
+    },
+    headerText: {
+        textAlign: 'left',
+        paddingLeft: 30,
+        fontSize: 16,
+        fontWeight: '500',
+    },
+    content: {
+        padding: 20,
+        backgroundColor: '#000000',
+    },
+    active: {
+        backgroundColor: 'rgba(0,0,0,1)',
+    },
+    inactive: {
+        backgroundColor: 'rgba(20,20,20,1)',
+    },
+    selectors: {
+        marginBottom: 10,
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+    selector: {
+        backgroundColor: '#111111',
+        padding: 10,
+    },
+    activeSelector: {
+        fontWeight: 'bold',
+    },
+    selectTitle: {
+        fontSize: 14,
+        fontWeight: '500',
+        padding: 10,
+    },
+    multipleToggle: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginVertical: 30,
+        alignItems: 'center',
+    },
+    multipleToggle__title: {
+        fontSize: 16,
+        marginRight: 8,
+    },
 });
-- 
cgit v1.2.3