made graph interactively tweakable

6 files changed, 2225 insertions, 31 deletions

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 592e00b..934901f 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -6,13 +6,12 @@ import { color, typography } from "../../theme"
 import { Text } from "../"
 import { flatten } from "ramda"
 
-import data from "../../data/miserables.json"
-import genRandomTree from "../../data/randomdata";
+//import data from "../../data/miserables.json"
+//import genRandomTree from "../../data/randomdata";
+import rando from "../../data/rando.json"
 
 import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from 'react-force-graph';
-import { GraphData, ForceGraphMethods } from "react-force-graph-2d";
 import * as d3 from "d3-force";
-import  Slider  from '@react-native-community/slider';
 
 const CONTAINER: ViewStyle = {
   justifyContent: "center",
@@ -29,53 +28,43 @@ export interface GraphProps {
    * An optional style override useful for padding & margin.
    */
   style?: StyleProp<ViewStyle>
+    physics
+    gData
 }
 
 /**
  * Describe your component here
  */
 export const Graph = observer(function Graph(props: GraphProps) {
-  const { style } = props
+  const { style, physics, gData } = props
   const styles = flatten([CONTAINER, style])
 
     const fgRef= useRef();
 
 
     const GROUPS: number =12;
-    const gData = genRandomTree();
+    //const gData = genRandomTree(200);
 
-    const [charge, setCharge] = useState(-30);
-    const [link, setLink] = useState(-30);
+    //const [charge, setCharge] = useState(-30);
+    //const [link, setLink] = useState(-30);
 
     useEffect(()=> {
       const fg = fgRef.current;
 
-        fg.d3Force('charge').strength(charge);
-        fg.d3Force('center').strength(0.05);
-        fg.d3Force('link').strength(0.1);
-        fg.d3Force('link').iterations(4);
-        fg.d3Force('collide', d3.forceCollide().radius(20));
+        //fg.d3Force('center').strength(0.05);
+        fg.d3Force('link').strength(physics.linkStrength);
+        fg.d3Force('link').iterations(physics.linkIts);
+        physics.collision ? fg.d3Force('collide', d3.forceCollide().radius(20)) : fg.d3Force('collide',null);
+        fg.d3Force('charge').strength(physics.charge);
   });
 
     return (
     <View>
-    <Slider style={{position: "absolute", zIndex: 100, width: "20%", height: 40}}
-        minimumValue={-100}
-        maximumValue={10}
-        onValueChange={(value)=>{setCharge(value)}}
-        value={charge}
-    />
-    <Slider style={{position: "absolute", top: 50, zIndex: 100, width: "20%", height: 40}}
-        minimumValue={-100}
-        maximumValue={0}
-        onValueChange={(value)=>{setCharge(value)}}
-        value={charge}
-    />
     <ForceGraph2D
       ref={fgRef}
-      graphData={gData}
+      graphData={rando}
       nodeAutoColorBy={d => d.id%GROUPS}
-      linkAutoColorBy={d => gData.nodes[d.source].id%GROUPS}
+      linkAutoColorBy={d => rando.nodes[d.source].id%GROUPS}
       linkColor={"#ffffff"}
       linkWidth={2}
       //d3VelocityDecay={visco}
diff --git a/app/components/index.ts b/app/components/index.ts
index 9feec07..b770c09 100644
--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -11,3 +11,4 @@ export * from "./text-field/text-field"
 export * from "./wallpaper/wallpaper"
 export * from "./auto-image/auto-image"
 export * from "./graph/graph"
+export * from "./tweaks/tweaks"
diff --git a/app/components/tweaks/tweaks.story.tsx b/app/components/tweaks/tweaks.story.tsx
new file mode 100644
index 0000000..7ff70d6
--- /dev/null
+++ b/app/components/tweaks/tweaks.story.tsx
@@ -0,0 +1,15 @@
+import * as React from "react"
+import { storiesOf } from "@storybook/react-native"
+import { StoryScreen, Story, UseCase } from "../../../storybook/views"
+import { color } from "../../theme"
+import { Tweaks } from "./tweaks"
+
+storiesOf("Tweaks", module)
+  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
+  .add("Style Presets", () => (
+    <Story>
+      <UseCase text="Primary" usage="The primary.">
+        <Tweaks style={{ backgroundColor: color.error }} />
+      </UseCase>
+    </Story>
+  ))
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
new file mode 100644
index 0000000..d1c8c2a
--- /dev/null
+++ b/app/components/tweaks/tweaks.tsx
@@ -0,0 +1,62 @@
+import * as React from "react"
+import { StyleProp, Switch, TextStyle, View, ViewStyle } from "react-native"
+import { observer } from "mobx-react-lite"
+import { color, typography } from "../../theme"
+import { Text } from "../"
+import { flatten } from "ramda"
+import Slider from "@react-native-community/slider"
+import { useState } from "react"
+
+const CONTAINER: ViewStyle = {
+    justifyContent: "center",
+}
+
+const TEXT: TextStyle = {
+    fontFamily: typography.primary,
+    fontSize: 14,
+    color: color.primary,
+}
+
+export interface TweaksProps {
+    /**
+     * An optional style override useful for padding & margin.
+     */
+    style?: StyleProp<ViewStyle>
+    physics
+    setPhysics
+}
+
+/**
+ * Describe your component here
+ */
+export const Tweaks = observer(function Tweaks(props: TweaksProps) {
+    const { style, physics, setPhysics } = props
+    const styles = flatten([CONTAINER, style])
+
+    return (
+        <>
+            <Slider style={{ position: "absolute", top: 50,  zIndex: 100, width: "20%", height: 40 }}
+                minimumValue={-100}
+                maximumValue={0}
+        onValueChange={(value) => { setPhysics({...physics, charge: value}) }}
+                value={physics.charge}
+                step={1}/>
+            <Slider style={{ position: "absolute", top: 100,  zIndex: 100, width: "20%", height: 40 }}
+                minimumValue={0}
+                maximumValue={10}
+                    onValueChange={(value) => { setPhysics({...physics, linkStrength: value}) }}
+                value={physics.linkStrength}
+                step={1}/>
+            <Slider style={{ position: "absolute", top: 150,  zIndex: 100, width: "20%", height: 40 }}
+                minimumValue={1}
+                maximumValue={5}
+                    onValueChange={(value) => { setPhysics({...physics, linkIts: value}) }}
+                value={physics.linkIts}
+                step={1}/>
+            <Switch style={{ position: "absolute", top: 200,  zIndex: 100, width: "5", height: 40 }}
+                value={physics.collision}
+                    onValueChange={()=>{setPhysics({...physics, collision: !physics.collision})}}
+                />
+        </>
+    )
+})
diff --git a/app/data/rando.json b/app/data/rando.json
new file mode 100644
index 0000000..b50386b
--- /dev/null
+++ b/app/data/rando.json
@@ -0,0 +1,2102 @@
+{
+  "nodes": [
+    {
+      "id": 0
+    },
+    {
+      "id": 1
+    },
+    {
+      "id": 2
+    },
+    {
+      "id": 3
+    },
+    {
+      "id": 4
+    },
+    {
+      "id": 5
+    },
+    {
+      "id": 6
+    },
+    {
+      "id": 7
+    },
+    {
+      "id": 8
+    },
+    {
+      "id": 9
+    },
+    {
+      "id": 10
+    },
+    {
+      "id": 11
+    },
+    {
+      "id": 12
+    },
+    {
+      "id": 13
+    },
+    {
+      "id": 14
+    },
+    {
+      "id": 15
+    },
+    {
+      "id": 16
+    },
+    {
+      "id": 17
+    },
+    {
+      "id": 18
+    },
+    {
+      "id": 19
+    },
+    {
+      "id": 20
+    },
+    {
+      "id": 21
+    },
+    {
+      "id": 22
+    },
+    {
+      "id": 23
+    },
+    {
+      "id": 24
+    },
+    {
+      "id": 25
+    },
+    {
+      "id": 26
+    },
+    {
+      "id": 27
+    },
+    {
+      "id": 28
+    },
+    {
+      "id": 29
+    },
+    {
+      "id": 30
+    },
+    {
+      "id": 31
+    },
+    {
+      "id": 32
+    },
+    {
+      "id": 33
+    },
+    {
+      "id": 34
+    },
+    {
+      "id": 35
+    },
+    {
+      "id": 36
+    },
+    {
+      "id": 37
+    },
+    {
+      "id": 38
+    },
+    {
+      "id": 39
+    },
+    {
+      "id": 40
+    },
+    {
+      "id": 41
+    },
+    {
+      "id": 42
+    },
+    {
+      "id": 43
+    },
+    {
+      "id": 44
+    },
+    {
+      "id": 45
+    },
+    {
+      "id": 46
+    },
+    {
+      "id": 47
+    },
+    {
+      "id": 48
+    },
+    {
+      "id": 49
+    },
+    {
+      "id": 50
+    },
+    {
+      "id": 51
+    },
+    {
+      "id": 52
+    },
+    {
+      "id": 53
+    },
+    {
+      "id": 54
+    },
+    {
+      "id": 55
+    },
+    {
+      "id": 56
+    },
+    {
+      "id": 57
+    },
+    {
+      "id": 58
+    },
+    {
+      "id": 59
+    },
+    {
+      "id": 60
+    },
+    {
+      "id": 61
+    },
+    {
+      "id": 62
+    },
+    {
+      "id": 63
+    },
+    {
+      "id": 64
+    },
+    {
+      "id": 65
+    },
+    {
+      "id": 66
+    },
+    {
+      "id": 67
+    },
+    {
+      "id": 68
+    },
+    {
+      "id": 69
+    },
+    {
+      "id": 70
+    },
+    {
+      "id": 71
+    },
+    {
+      "id": 72
+    },
+    {
+      "id": 73
+    },
+    {
+      "id": 74
+    },
+    {
+      "id": 75
+    },
+    {
+      "id": 76
+    },
+    {
+      "id": 77
+    },
+    {
+      "id": 78
+    },
+    {
+      "id": 79
+    },
+    {
+      "id": 80
+    },
+    {
+      "id": 81
+    },
+    {
+      "id": 82
+    },
+    {
+      "id": 83
+    },
+    {
+      "id": 84
+    },
+    {
+      "id": 85
+    },
+    {
+      "id": 86
+    },
+    {
+      "id": 87
+    },
+    {
+      "id": 88
+    },
+    {
+      "id": 89
+    },
+    {
+      "id": 90
+    },
+    {
+      "id": 91
+    },
+    {
+      "id": 92
+    },
+    {
+      "id": 93
+    },
+    {
+      "id": 94
+    },
+    {
+      "id": 95
+    },
+    {
+      "id": 96
+    },
+    {
+      "id": 97
+    },
+    {
+      "id": 98
+    },
+    {
+      "id": 99
+    },
+    {
+      "id": 100
+    },
+    {
+      "id": 101
+    },
+    {
+      "id": 102
+    },
+    {
+      "id": 103
+    },
+    {
+      "id": 104
+    },
+    {
+      "id": 105
+    },
+    {
+      "id": 106
+    },
+    {
+      "id": 107
+    },
+    {
+      "id": 108
+    },
+    {
+      "id": 109
+    },
+    {
+      "id": 110
+    },
+    {
+      "id": 111
+    },
+    {
+      "id": 112
+    },
+    {
+      "id": 113
+    },
+    {
+      "id": 114
+    },
+    {
+      "id": 115
+    },
+    {
+      "id": 116
+    },
+    {
+      "id": 117
+    },
+    {
+      "id": 118
+    },
+    {
+      "id": 119
+    },
+    {
+      "id": 120
+    },
+    {
+      "id": 121
+    },
+    {
+      "id": 122
+    },
+    {
+      "id": 123
+    },
+    {
+      "id": 124
+    },
+    {
+      "id": 125
+    },
+    {
+      "id": 126
+    },
+    {
+      "id": 127
+    },
+    {
+      "id": 128
+    },
+    {
+      "id": 129
+    },
+    {
+      "id": 130
+    },
+    {
+      "id": 131
+    },
+    {
+      "id": 132
+    },
+    {
+      "id": 133
+    },
+    {
+      "id": 134
+    },
+    {
+      "id": 135
+    },
+    {
+      "id": 136
+    },
+    {
+      "id": 137
+    },
+    {
+      "id": 138
+    },
+    {
+      "id": 139
+    },
+    {
+      "id": 140
+    },
+    {
+      "id": 141
+    },
+    {
+      "id": 142
+    },
+    {
+      "id": 143
+    },
+    {
+      "id": 144
+    },
+    {
+      "id": 145
+    },
+    {
+      "id": 146
+    },
+    {
+      "id": 147
+    },
+    {
+      "id": 148
+    },
+    {
+      "id": 149
+    },
+    {
+      "id": 150
+    },
+    {
+      "id": 151
+    },
+    {
+      "id": 152
+    },
+    {
+      "id": 153
+    },
+    {
+      "id": 154
+    },
+    {
+      "id": 155
+    },
+    {
+      "id": 156
+    },
+    {
+      "id": 157
+    },
+    {
+      "id": 158
+    },
+    {
+      "id": 159
+    },
+    {
+      "id": 160
+    },
+    {
+      "id": 161
+    },
+    {
+      "id": 162
+    },
+    {
+      "id": 163
+    },
+    {
+      "id": 164
+    },
+    {
+      "id": 165
+    },
+    {
+      "id": 166
+    },
+    {
+      "id": 167
+    },
+    {
+      "id": 168
+    },
+    {
+      "id": 169
+    },
+    {
+      "id": 170
+    },
+    {
+      "id": 171
+    },
+    {
+      "id": 172
+    },
+    {
+      "id": 173
+    },
+    {
+      "id": 174
+    },
+    {
+      "id": 175
+    },
+    {
+      "id": 176
+    },
+    {
+      "id": 177
+    },
+    {
+      "id": 178
+    },
+    {
+      "id": 179
+    },
+    {
+      "id": 180
+    },
+    {
+      "id": 181
+    },
+    {
+      "id": 182
+    },
+    {
+      "id": 183
+    },
+    {
+      "id": 184
+    },
+    {
+      "id": 185
+    },
+    {
+      "id": 186
+    },
+    {
+      "id": 187
+    },
+    {
+      "id": 188
+    },
+    {
+      "id": 189
+    },
+    {
+      "id": 190
+    },
+    {
+      "id": 191
+    },
+    {
+      "id": 192
+    },
+    {
+      "id": 193
+    },
+    {
+      "id": 194
+    },
+    {
+      "id": 195
+    },
+    {
+      "id": 196
+    },
+    {
+      "id": 197
+    },
+    {
+      "id": 198
+    },
+    {
+      "id": 199
+    },
+    {
+      "id": 200
+    },
+    {
+      "id": 201
+    },
+    {
+      "id": 202
+    },
+    {
+      "id": 203
+    },
+    {
+      "id": 204
+    },
+    {
+      "id": 205
+    },
+    {
+      "id": 206
+    },
+    {
+      "id": 207
+    },
+    {
+      "id": 208
+    },
+    {
+      "id": 209
+    },
+    {
+      "id": 210
+    },
+    {
+      "id": 211
+    },
+    {
+      "id": 212
+    },
+    {
+      "id": 213
+    },
+    {
+      "id": 214
+    },
+    {
+      "id": 215
+    },
+    {
+      "id": 216
+    },
+    {
+      "id": 217
+    },
+    {
+      "id": 218
+    },
+    {
+      "id": 219
+    },
+    {
+      "id": 220
+    },
+    {
+      "id": 221
+    },
+    {
+      "id": 222
+    },
+    {
+      "id": 223
+    },
+    {
+      "id": 224
+    },
+    {
+      "id": 225
+    },
+    {
+      "id": 226
+    },
+    {
+      "id": 227
+    },
+    {
+      "id": 228
+    },
+    {
+      "id": 229
+    },
+    {
+      "id": 230
+    },
+    {
+      "id": 231
+    },
+    {
+      "id": 232
+    },
+    {
+      "id": 233
+    },
+    {
+      "id": 234
+    },
+    {
+      "id": 235
+    },
+    {
+      "id": 236
+    },
+    {
+      "id": 237
+    },
+    {
+      "id": 238
+    },
+    {
+      "id": 239
+    },
+    {
+      "id": 240
+    },
+    {
+      "id": 241
+    },
+    {
+      "id": 242
+    },
+    {
+      "id": 243
+    },
+    {
+      "id": 244
+    },
+    {
+      "id": 245
+    },
+    {
+      "id": 246
+    },
+    {
+      "id": 247
+    },
+    {
+      "id": 248
+    },
+    {
+      "id": 249
+    },
+    {
+      "id": 250
+    },
+    {
+      "id": 251
+    },
+    {
+      "id": 252
+    },
+    {
+      "id": 253
+    },
+    {
+      "id": 254
+    },
+    {
+      "id": 255
+    },
+    {
+      "id": 256
+    },
+    {
+      "id": 257
+    },
+    {
+      "id": 258
+    },
+    {
+      "id": 259
+    },
+    {
+      "id": 260
+    },
+    {
+      "id": 261
+    },
+    {
+      "id": 262
+    },
+    {
+      "id": 263
+    },
+    {
+      "id": 264
+    },
+    {
+      "id": 265
+    },
+    {
+      "id": 266
+    },
+    {
+      "id": 267
+    },
+    {
+      "id": 268
+    },
+    {
+      "id": 269
+    },
+    {
+      "id": 270
+    },
+    {
+      "id": 271
+    },
+    {
+      "id": 272
+    },
+    {
+      "id": 273
+    },
+    {
+      "id": 274
+    },
+    {
+      "id": 275
+    },
+    {
+      "id": 276
+    },
+    {
+      "id": 277
+    },
+    {
+      "id": 278
+    },
+    {
+      "id": 279
+    },
+    {
+      "id": 280
+    },
+    {
+      "id": 281
+    },
+    {
+      "id": 282
+    },
+    {
+      "id": 283
+    },
+    {
+      "id": 284
+    },
+    {
+      "id": 285
+    },
+    {
+      "id": 286
+    },
+    {
+      "id": 287
+    },
+    {
+      "id": 288
+    },
+    {
+      "id": 289
+    },
+    {
+      "id": 290
+    },
+    {
+      "id": 291
+    },
+    {
+      "id": 292
+    },
+    {
+      "id": 293
+    },
+    {
+      "id": 294
+    },
+    {
+      "id": 295
+    },
+    {
+      "id": 296
+    },
+    {
+      "id": 297
+    },
+    {
+      "id": 298
+    },
+    {
+      "id": 299
+    }
+  ],
+  "links": [
+    {
+      "source": 1,
+      "target": 0
+    },
+    {
+      "source": 2,
+      "target": 0
+    },
+    {
+      "source": 3,
+      "target": 0
+    },
+    {
+      "source": 4,
+      "target": 2
+    },
+    {
+      "source": 5,
+      "target": 3
+    },
+    {
+      "source": 6,
+      "target": 1
+    },
+    {
+      "source": 7,
+      "target": 2
+    },
+    {
+      "source": 8,
+      "target": 6
+    },
+    {
+      "source": 9,
+      "target": 3
+    },
+    {
+      "source": 10,
+      "target": 6
+    },
+    {
+      "source": 11,
+      "target": 1
+    },
+    {
+      "source": 12,
+      "target": 9
+    },
+    {
+      "source": 13,
+      "target": 5
+    },
+    {
+      "source": 14,
+      "target": 2
+    },
+    {
+      "source": 15,
+      "target": 10
+    },
+    {
+      "source": 16,
+      "target": 11
+    },
+    {
+      "source": 17,
+      "target": 11
+    },
+    {
+      "source": 18,
+      "target": 9
+    },
+    {
+      "source": 19,
+      "target": 7
+    },
+    {
+      "source": 20,
+      "target": 3
+    },
+    {
+      "source": 21,
+      "target": 5
+    },
+    {
+      "source": 22,
+      "target": 13
+    },
+    {
+      "source": 23,
+      "target": 20
+    },
+    {
+      "source": 24,
+      "target": 2
+    },
+    {
+      "source": 25,
+      "target": 23
+    },
+    {
+      "source": 26,
+      "target": 6
+    },
+    {
+      "source": 27,
+      "target": 17
+    },
+    {
+      "source": 28,
+      "target": 13
+    },
+    {
+      "source": 29,
+      "target": 21
+    },
+    {
+      "source": 30,
+      "target": 12
+    },
+    {
+      "source": 31,
+      "target": 4
+    },
+    {
+      "source": 32,
+      "target": 2
+    },
+    {
+      "source": 33,
+      "target": 20
+    },
+    {
+      "source": 34,
+      "target": 27
+    },
+    {
+      "source": 35,
+      "target": 16
+    },
+    {
+      "source": 36,
+      "target": 5
+    },
+    {
+      "source": 37,
+      "target": 9
+    },
+    {
+      "source": 38,
+      "target": 12
+    },
+    {
+      "source": 39,
+      "target": 11
+    },
+    {
+      "source": 40,
+      "target": 16
+    },
+    {
+      "source": 41,
+      "target": 27
+    },
+    {
+      "source": 42,
+      "target": 11
+    },
+    {
+      "source": 43,
+      "target": 29
+    },
+    {
+      "source": 44,
+      "target": 9
+    },
+    {
+      "source": 45,
+      "target": 39
+    },
+    {
+      "source": 46,
+      "target": 38
+    },
+    {
+      "source": 47,
+      "target": 13
+    },
+    {
+      "source": 48,
+      "target": 25
+    },
+    {
+      "source": 49,
+      "target": 30
+    },
+    {
+      "source": 50,
+      "target": 37
+    },
+    {
+      "source": 51,
+      "target": 44
+    },
+    {
+      "source": 52,
+      "target": 36
+    },
+    {
+      "source": 53,
+      "target": 10
+    },
+    {
+      "source": 54,
+      "target": 48
+    },
+    {
+      "source": 55,
+      "target": 2
+    },
+    {
+      "source": 56,
+      "target": 52
+    },
+    {
+      "source": 57,
+      "target": 55
+    },
+    {
+      "source": 58,
+      "target": 49
+    },
+    {
+      "source": 59,
+      "target": 50
+    },
+    {
+      "source": 60,
+      "target": 21
+    },
+    {
+      "source": 61,
+      "target": 2
+    },
+    {
+      "source": 62,
+      "target": 41
+    },
+    {
+      "source": 63,
+      "target": 14
+    },
+    {
+      "source": 64,
+      "target": 46
+    },
+    {
+      "source": 65,
+      "target": 19
+    },
+    {
+      "source": 66,
+      "target": 56
+    },
+    {
+      "source": 67,
+      "target": 42
+    },
+    {
+      "source": 68,
+      "target": 63
+    },
+    {
+      "source": 69,
+      "target": 23
+    },
+    {
+      "source": 70,
+      "target": 62
+    },
+    {
+      "source": 71,
+      "target": 29
+    },
+    {
+      "source": 72,
+      "target": 70
+    },
+    {
+      "source": 73,
+      "target": 72
+    },
+    {
+      "source": 74,
+      "target": 36
+    },
+    {
+      "source": 75,
+      "target": 42
+    },
+    {
+      "source": 76,
+      "target": 7
+    },
+    {
+      "source": 77,
+      "target": 45
+    },
+    {
+      "source": 78,
+      "target": 4
+    },
+    {
+      "source": 79,
+      "target": 37
+    },
+    {
+      "source": 80,
+      "target": 44
+    },
+    {
+      "source": 81,
+      "target": 42
+    },
+    {
+      "source": 82,
+      "target": 1
+    },
+    {
+      "source": 83,
+      "target": 43
+    },
+    {
+      "source": 84,
+      "target": 21
+    },
+    {
+      "source": 85,
+      "target": 41
+    },
+    {
+      "source": 86,
+      "target": 18
+    },
+    {
+      "source": 87,
+      "target": 57
+    },
+    {
+      "source": 88,
+      "target": 58
+    },
+    {
+      "source": 89,
+      "target": 63
+    },
+    {
+      "source": 90,
+      "target": 4
+    },
+    {
+      "source": 91,
+      "target": 14
+    },
+    {
+      "source": 92,
+      "target": 80
+    },
+    {
+      "source": 93,
+      "target": 74
+    },
+    {
+      "source": 94,
+      "target": 65
+    },
+    {
+      "source": 95,
+      "target": 92
+    },
+    {
+      "source": 96,
+      "target": 26
+    },
+    {
+      "source": 97,
+      "target": 44
+    },
+    {
+      "source": 98,
+      "target": 47
+    },
+    {
+      "source": 99,
+      "target": 89
+    },
+    {
+      "source": 100,
+      "target": 2
+    },
+    {
+      "source": 101,
+      "target": 76
+    },
+    {
+      "source": 102,
+      "target": 92
+    },
+    {
+      "source": 103,
+      "target": 58
+    },
+    {
+      "source": 104,
+      "target": 84
+    },
+    {
+      "source": 105,
+      "target": 99
+    },
+    {
+      "source": 106,
+      "target": 95
+    },
+    {
+      "source": 107,
+      "target": 101
+    },
+    {
+      "source": 108,
+      "target": 34
+    },
+    {
+      "source": 109,
+      "target": 60
+    },
+    {
+      "source": 110,
+      "target": 25
+    },
+    {
+      "source": 111,
+      "target": 11
+    },
+    {
+      "source": 112,
+      "target": 79
+    },
+    {
+      "source": 113,
+      "target": 107
+    },
+    {
+      "source": 114,
+      "target": 24
+    },
+    {
+      "source": 115,
+      "target": 43
+    },
+    {
+      "source": 116,
+      "target": 4
+    },
+    {
+      "source": 117,
+      "target": 76
+    },
+    {
+      "source": 118,
+      "target": 43
+    },
+    {
+      "source": 119,
+      "target": 106
+    },
+    {
+      "source": 120,
+      "target": 26
+    },
+    {
+      "source": 121,
+      "target": 109
+    },
+    {
+      "source": 122,
+      "target": 98
+    },
+    {
+      "source": 123,
+      "target": 5
+    },
+    {
+      "source": 124,
+      "target": 35
+    },
+    {
+      "source": 125,
+      "target": 80
+    },
+    {
+      "source": 126,
+      "target": 106
+    },
+    {
+      "source": 127,
+      "target": 15
+    },
+    {
+      "source": 128,
+      "target": 49
+    },
+    {
+      "source": 129,
+      "target": 9
+    },
+    {
+      "source": 130,
+      "target": 109
+    },
+    {
+      "source": 131,
+      "target": 72
+    },
+    {
+      "source": 132,
+      "target": 62
+    },
+    {
+      "source": 133,
+      "target": 61
+    },
+    {
+      "source": 134,
+      "target": 107
+    },
+    {
+      "source": 135,
+      "target": 125
+    },
+    {
+      "source": 136,
+      "target": 56
+    },
+    {
+      "source": 137,
+      "target": 98
+    },
+    {
+      "source": 138,
+      "target": 50
+    },
+    {
+      "source": 139,
+      "target": 120
+    },
+    {
+      "source": 140,
+      "target": 72
+    },
+    {
+      "source": 141,
+      "target": 85
+    },
+    {
+      "source": 142,
+      "target": 13
+    },
+    {
+      "source": 143,
+      "target": 55
+    },
+    {
+      "source": 144,
+      "target": 12
+    },
+    {
+      "source": 145,
+      "target": 125
+    },
+    {
+      "source": 146,
+      "target": 41
+    },
+    {
+      "source": 147,
+      "target": 79
+    },
+    {
+      "source": 148,
+      "target": 33
+    },
+    {
+      "source": 149,
+      "target": 8
+    },
+    {
+      "source": 150,
+      "target": 23
+    },
+    {
+      "source": 151,
+      "target": 10
+    },
+    {
+      "source": 152,
+      "target": 119
+    },
+    {
+      "source": 153,
+      "target": 119
+    },
+    {
+      "source": 154,
+      "target": 152
+    },
+    {
+      "source": 155,
+      "target": 52
+    },
+    {
+      "source": 156,
+      "target": 149
+    },
+    {
+      "source": 157,
+      "target": 114
+    },
+    {
+      "source": 158,
+      "target": 79
+    },
+    {
+      "source": 159,
+      "target": 149
+    },
+    {
+      "source": 160,
+      "target": 103
+    },
+    {
+      "source": 161,
+      "target": 123
+    },
+    {
+      "source": 162,
+      "target": 112
+    },
+    {
+      "source": 163,
+      "target": 94
+    },
+    {
+      "source": 164,
+      "target": 67
+    },
+    {
+      "source": 165,
+      "target": 113
+    },
+    {
+      "source": 166,
+      "target": 1
+    },
+    {
+      "source": 167,
+      "target": 3
+    },
+    {
+      "source": 168,
+      "target": 100
+    },
+    {
+      "source": 169,
+      "target": 22
+    },
+    {
+      "source": 170,
+      "target": 118
+    },
+    {
+      "source": 171,
+      "target": 116
+    },
+    {
+      "source": 172,
+      "target": 79
+    },
+    {
+      "source": 173,
+      "target": 141
+    },
+    {
+      "source": 174,
+      "target": 72
+    },
+    {
+      "source": 175,
+      "target": 4
+    },
+    {
+      "source": 176,
+      "target": 159
+    },
+    {
+      "source": 177,
+      "target": 147
+    },
+    {
+      "source": 178,
+      "target": 86
+    },
+    {
+      "source": 179,
+      "target": 138
+    },
+    {
+      "source": 180,
+      "target": 107
+    },
+    {
+      "source": 181,
+      "target": 90
+    },
+    {
+      "source": 182,
+      "target": 123
+    },
+    {
+      "source": 183,
+      "target": 121
+    },
+    {
+      "source": 184,
+      "target": 158
+    },
+    {
+      "source": 185,
+      "target": 44
+    },
+    {
+      "source": 186,
+      "target": 184
+    },
+    {
+      "source": 187,
+      "target": 135
+    },
+    {
+      "source": 188,
+      "target": 13
+    },
+    {
+      "source": 189,
+      "target": 73
+    },
+    {
+      "source": 190,
+      "target": 41
+    },
+    {
+      "source": 191,
+      "target": 13
+    },
+    {
+      "source": 192,
+      "target": 132
+    },
+    {
+      "source": 193,
+      "target": 156
+    },
+    {
+      "source": 194,
+      "target": 146
+    },
+    {
+      "source": 195,
+      "target": 16
+    },
+    {
+      "source": 196,
+      "target": 1
+    },
+    {
+      "source": 197,
+      "target": 55
+    },
+    {
+      "source": 198,
+      "target": 143
+    },
+    {
+      "source": 199,
+      "target": 128
+    },
+    {
+      "source": 200,
+      "target": 176
+    },
+    {
+      "source": 201,
+      "target": 74
+    },
+    {
+      "source": 202,
+      "target": 174
+    },
+    {
+      "source": 203,
+      "target": 86
+    },
+    {
+      "source": 204,
+      "target": 181
+    },
+    {
+      "source": 205,
+      "target": 152
+    },
+    {
+      "source": 206,
+      "target": 88
+    },
+    {
+      "source": 207,
+      "target": 52
+    },
+    {
+      "source": 208,
+      "target": 195
+    },
+    {
+      "source": 209,
+      "target": 175
+    },
+    {
+      "source": 210,
+      "target": 49
+    },
+    {
+      "source": 211,
+      "target": 176
+    },
+    {
+      "source": 212,
+      "target": 11
+    },
+    {
+      "source": 213,
+      "target": 204
+    },
+    {
+      "source": 214,
+      "target": 40
+    },
+    {
+      "source": 215,
+      "target": 70
+    },
+    {
+      "source": 216,
+      "target": 213
+    },
+    {
+      "source": 217,
+      "target": 49
+    },
+    {
+      "source": 218,
+      "target": 67
+    },
+    {
+      "source": 219,
+      "target": 203
+    },
+    {
+      "source": 220,
+      "target": 35
+    },
+    {
+      "source": 221,
+      "target": 172
+    },
+    {
+      "source": 222,
+      "target": 51
+    },
+    {
+      "source": 223,
+      "target": 44
+    },
+    {
+      "source": 224,
+      "target": 35
+    },
+    {
+      "source": 225,
+      "target": 184
+    },
+    {
+      "source": 226,
+      "target": 101
+    },
+    {
+      "source": 227,
+      "target": 88
+    },
+    {
+      "source": 228,
+      "target": 200
+    },
+    {
+      "source": 229,
+      "target": 59
+    },
+    {
+      "source": 230,
+      "target": 138
+    },
+    {
+      "source": 231,
+      "target": 101
+    },
+    {
+      "source": 232,
+      "target": 30
+    },
+    {
+      "source": 233,
+      "target": 3
+    },
+    {
+      "source": 234,
+      "target": 140
+    },
+    {
+      "source": 235,
+      "target": 177
+    },
+    {
+      "source": 236,
+      "target": 168
+    },
+    {
+      "source": 237,
+      "target": 126
+    },
+    {
+      "source": 238,
+      "target": 131
+    },
+    {
+      "source": 239,
+      "target": 237
+    },
+    {
+      "source": 240,
+      "target": 219
+    },
+    {
+      "source": 241,
+      "target": 121
+    },
+    {
+      "source": 242,
+      "target": 158
+    },
+    {
+      "source": 243,
+      "target": 92
+    },
+    {
+      "source": 244,
+      "target": 111
+    },
+    {
+      "source": 245,
+      "target": 188
+    },
+    {
+      "source": 246,
+      "target": 1
+    },
+    {
+      "source": 247,
+      "target": 158
+    },
+    {
+      "source": 248,
+      "target": 239
+    },
+    {
+      "source": 249,
+      "target": 194
+    },
+    {
+      "source": 250,
+      "target": 82
+    },
+    {
+      "source": 251,
+      "target": 175
+    },
+    {
+      "source": 252,
+      "target": 219
+    },
+    {
+      "source": 253,
+      "target": 80
+    },
+    {
+      "source": 254,
+      "target": 18
+    },
+    {
+      "source": 255,
+      "target": 73
+    },
+    {
+      "source": 256,
+      "target": 169
+    },
+    {
+      "source": 257,
+      "target": 54
+    },
+    {
+      "source": 258,
+      "target": 200
+    },
+    {
+      "source": 259,
+      "target": 107
+    },
+    {
+      "source": 260,
+      "target": 252
+    },
+    {
+      "source": 261,
+      "target": 204
+    },
+    {
+      "source": 262,
+      "target": 95
+    },
+    {
+      "source": 263,
+      "target": 235
+    },
+    {
+      "source": 264,
+      "target": 127
+    },
+    {
+      "source": 265,
+      "target": 141
+    },
+    {
+      "source": 266,
+      "target": 217
+    },
+    {
+      "source": 267,
+      "target": 93
+    },
+    {
+      "source": 268,
+      "target": 125
+    },
+    {
+      "source": 269,
+      "target": 249
+    },
+    {
+      "source": 270,
+      "target": 247
+    },
+    {
+      "source": 271,
+      "target": 256
+    },
+    {
+      "source": 272,
+      "target": 268
+    },
+    {
+      "source": 273,
+      "target": 69
+    },
+    {
+      "source": 274,
+      "target": 93
+    },
+    {
+      "source": 275,
+      "target": 244
+    },
+    {
+      "source": 276,
+      "target": 62
+    },
+    {
+      "source": 277,
+      "target": 193
+    },
+    {
+      "source": 278,
+      "target": 265
+    },
+    {
+      "source": 279,
+      "target": 116
+    },
+    {
+      "source": 280,
+      "target": 101
+    },
+    {
+      "source": 281,
+      "target": 168
+    },
+    {
+      "source": 282,
+      "target": 267
+    },
+    {
+      "source": 283,
+      "target": 7
+    },
+    {
+      "source": 284,
+      "target": 128
+    },
+    {
+      "source": 285,
+      "target": 200
+    },
+    {
+      "source": 286,
+      "target": 5
+    },
+    {
+      "source": 287,
+      "target": 79
+    },
+    {
+      "source": 288,
+      "target": 146
+    },
+    {
+      "source": 289,
+      "target": 77
+    },
+    {
+      "source": 290,
+      "target": 120
+    },
+    {
+      "source": 291,
+      "target": 217
+    },
+    {
+      "source": 292,
+      "target": 24
+    },
+    {
+      "source": 293,
+      "target": 278
+    },
+    {
+      "source": 294,
+      "target": 225
+    },
+    {
+      "source": 295,
+      "target": 159
+    },
+    {
+      "source": 296,
+      "target": 21
+    },
+    {
+      "source": 297,
+      "target": 240
+    },
+    {
+      "source": 298,
+      "target": 139
+    },
+    {
+      "source": 299,
+      "target": 155
+    }
+  ]
+}
\ No newline at end of file
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
index 4ba2ee0..bba2955 100644
--- a/app/screens/graph/graph-screen.tsx
+++ b/app/screens/graph/graph-screen.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { observer } from "mobx-react-lite"
 import { ViewStyle } from "react-native"
 import { Screen, Text } from "../../components"
@@ -7,6 +7,9 @@ import { Screen, Text } from "../../components"
 import { color } from "../../theme"
 
 import { Graph } from "../../components"
+import { Tweaks } from "../../components"
+
+import genRandomTree from "../../data/randomdata";
 
 const ROOT: ViewStyle = {
   backgroundColor: color.palette.black,
@@ -19,10 +22,32 @@ export const GraphScreen = observer(function GraphScreen() {
 
   // Pull in navigation via hook
   // const navigation = useNavigation()
+  const [charge, setCharge] = useState(-30);
+  const [collision, setCollision] = useState(false);
+  const [linkStrength, setLinkStrength] = useState(1);
+  const [linkIts, setLinkIts] = useState(1);
+
+  const [physics, setPhysics] = useState(
+  {
+      charge: -30,
+      collision: false,
+      linkStrength: 1,
+      linkIts: 1
+  });
+
+    const gData = genRandomTree();
+
   return (
     <Screen style={ROOT} preset="scroll">
       <Text preset="header" text="Graph" />
-      <Graph/>
+      <Tweaks
+        physics={physics}
+        setPhysics={setPhysics}
+      />
+      <Graph
+        physics={physics}
+        gData = {gData}
+      />
     </Screen>
-  )
-})
+  );
+});