added random graph with colored edged

10 files changed, 764 insertions, 0 deletions

diff --git a/.log/ti-201457.log b/.log/ti-201457.log
new file mode 100644
index 0000000..59d15a4
--- /dev/null
+++ b/.log/ti-201457.log
@@ -0,0 +1,43 @@
+[15:25:00.945] Global cache location '/home/thomas/.cache/typescript/4.2', safe file path '/home/thomas/Projects/emacs/OrgRoamForceGraphReact/node_modules/typescript/lib/typingSafeList.json', types map path /home/thomas/Projects/emacs/OrgRoamForceGraphReact/node_modules/typescript/lib/typesMap.json
+[15:25:00.946] Processing cache location '/home/thomas/.cache/typescript/4.2'
+[15:25:00.946] Trying to find '/home/thomas/.cache/typescript/4.2/package.json'...
+[15:25:00.947] Loaded content of '/home/thomas/.cache/typescript/4.2/package.json': {"private":true,"dependencies":{"types-registry":"^0.1.543"},"devDependencies":{"@types/component-emitter":"^1.2.10","@types/cytoscape":"^3.14.14","@types/heap":"^0.2.28","@types/lodash.debounce":"^4.0.6","@types/md5":"^2.3.0","@types/react":"^17.0.3","@types/react-dom":"^17.0.2"}}
+[15:25:00.948] Loaded content of '/home/thomas/.cache/typescript/4.2/package-lock.json'
+[15:25:00.961] Adding entry into typings cache: 'component-emitter' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/component-emitter/index.d.ts'
+[15:25:00.964] Adding entry into typings cache: 'cytoscape' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/cytoscape/index.d.ts'
+[15:25:00.967] Adding entry into typings cache: 'heap' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/heap/index.d.ts'
+[15:25:00.969] Adding entry into typings cache: 'lodash.debounce' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/lodash.debounce/index.d.ts'
+[15:25:00.971] Adding entry into typings cache: 'md5' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/md5/index.d.ts'
+[15:25:00.976] Adding entry into typings cache: 'react' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/react/index.d.ts'
+[15:25:00.979] Adding entry into typings cache: 'react-dom' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/react-dom/index.d.ts'
+[15:25:00.979] Finished processing cache location '/home/thomas/.cache/typescript/4.2'
+[15:25:00.980] Process id: 201464
+[15:25:00.980] NPM location: /home/thomas/.local/share/nvm/v15.12.0/bin/npm (explicit '--npmLocation' not  provided)
+[15:25:00.980] validateDefaultNpmLocation: false
+[15:25:00.980] Npm config file: /home/thomas/.cache/typescript/4.2/package.json
+[15:25:00.980] Updating types-registry npm package...
+[15:25:00.980] Exec: /home/thomas/.local/share/nvm/v15.12.0/bin/npm install --ignore-scripts types-registry@latest
+[15:25:01.885]     Succeeded. stdout:
+    
+    changed 1 package, and audited 14 packages in 769ms
+
+found 0 vulnerabilities
+
+[15:25:01.886] Updated types-registry npm package
+[15:41:19.858] Got install request {"projectName":"/dev/null/inferredProject1*","fileNames":[],"compilerOptions":{"module":1,"target":3,"jsx":1,"allowJs":true,"allowSyntheticDefaultImports":true,"allowNonTsExtensions":true,"noEmitForJsFiles":true},"typeAcquisition":{"enable":true,"include":[],"exclude":[]},"unresolvedImports":[],"projectRootPath":"/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data","kind":"discover"}
+[15:41:19.892] Loaded safelist from types map file '/home/thomas/Projects/emacs/OrgRoamForceGraphReact/node_modules/typescript/lib/typesMap.json'
+[15:41:19.893] Explicitly included types: []
+[15:41:19.894] Inferred typings from unresolved imports: []
+[15:41:19.894] Result: {"cachedTypingPaths":[],"newTypingNames":[],"filesToWatch":["/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data/bower_components","/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data/node_modules"]}
+[15:41:19.894] Finished typings discovery: {"cachedTypingPaths":[],"newTypingNames":[],"filesToWatch":["/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data/bower_components","/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data/node_modules"]}
+[15:41:19.899] DirectoryWatcher:: Added:: WatchInfo: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data/bower_components
+[15:41:19.900] DirectoryWatcher:: Added:: WatchInfo: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data/bower_components 1 undefined Project: /dev/null/inferredProject1* watcher already invoked: false
+[15:41:19.905] Elapsed:: 5.105758994817734ms DirectoryWatcher:: Added:: WatchInfo: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data/bower_components 1 undefined Project: /dev/null/inferredProject1* watcher already invoked: false
+[15:41:19.905] DirectoryWatcher:: Added:: WatchInfo: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data/node_modules
+[15:41:19.906] DirectoryWatcher:: Added:: WatchInfo: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data/node_modules 1 undefined Project: /dev/null/inferredProject1* watcher already invoked: false
+[15:41:19.906] Elapsed:: 0.19689100980758667ms DirectoryWatcher:: Added:: WatchInfo: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data/node_modules 1 undefined Project: /dev/null/inferredProject1* watcher already invoked: false
+[15:41:19.907] Sending response:
+    {"projectName":"/dev/null/inferredProject1*","typeAcquisition":{"enable":true,"include":[],"exclude":[]},"compilerOptions":{"module":1,"target":3,"jsx":1,"allowJs":true,"allowSyntheticDefaultImports":true,"allowNonTsExtensions":true,"noEmitForJsFiles":true},"typings":[],"unresolvedImports":[],"kind":"action::set"}
+[15:41:19.908] Response has been sent.
+[15:41:19.909] No new typings were requested as a result of typings discovery
+[15:59:43.803] Parent process has exited, shutting down...
diff --git a/.log/ti-207025.log b/.log/ti-207025.log
new file mode 100644
index 0000000..0fd064c
--- /dev/null
+++ b/.log/ti-207025.log
@@ -0,0 +1,26 @@
+[16:02:14.803] Global cache location '/home/thomas/.cache/typescript/4.2', safe file path '/home/thomas/Projects/emacs/OrgRoamForceGraphReact/node_modules/typescript/lib/typingSafeList.json', types map path /home/thomas/Projects/emacs/OrgRoamForceGraphReact/node_modules/typescript/lib/typesMap.json
+[16:02:14.804] Processing cache location '/home/thomas/.cache/typescript/4.2'
+[16:02:14.804] Trying to find '/home/thomas/.cache/typescript/4.2/package.json'...
+[16:02:14.805] Loaded content of '/home/thomas/.cache/typescript/4.2/package.json': {"private":true,"dependencies":{"types-registry":"^0.1.549"},"devDependencies":{"@types/component-emitter":"^1.2.10","@types/cytoscape":"^3.14.14","@types/heap":"^0.2.28","@types/lodash.debounce":"^4.0.6","@types/md5":"^2.3.0","@types/react":"^17.0.3","@types/react-dom":"^17.0.2"}}
+[16:02:14.805] Loaded content of '/home/thomas/.cache/typescript/4.2/package-lock.json'
+[16:02:14.815] Adding entry into typings cache: 'component-emitter' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/component-emitter/index.d.ts'
+[16:02:14.818] Adding entry into typings cache: 'cytoscape' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/cytoscape/index.d.ts'
+[16:02:14.821] Adding entry into typings cache: 'heap' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/heap/index.d.ts'
+[16:02:14.823] Adding entry into typings cache: 'lodash.debounce' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/lodash.debounce/index.d.ts'
+[16:02:14.825] Adding entry into typings cache: 'md5' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/md5/index.d.ts'
+[16:02:14.831] Adding entry into typings cache: 'react' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/react/index.d.ts'
+[16:02:14.834] Adding entry into typings cache: 'react-dom' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/react-dom/index.d.ts'
+[16:02:14.834] Finished processing cache location '/home/thomas/.cache/typescript/4.2'
+[16:02:14.835] Process id: 207032
+[16:02:14.835] NPM location: /home/thomas/.local/share/nvm/v15.12.0/bin/npm (explicit '--npmLocation' not  provided)
+[16:02:14.835] validateDefaultNpmLocation: false
+[16:02:14.835] Npm config file: /home/thomas/.cache/typescript/4.2/package.json
+[16:02:14.835] Updating types-registry npm package...
+[16:02:14.835] Exec: /home/thomas/.local/share/nvm/v15.12.0/bin/npm install --ignore-scripts types-registry@latest
+[16:02:15.808]     Succeeded. stdout:
+    
+    up to date, audited 14 packages in 820ms
+
+found 0 vulnerabilities
+
+[16:02:15.808] Updated types-registry npm package
diff --git a/.log/ti-219513.log b/.log/ti-219513.log
new file mode 100644
index 0000000..d8e11ba
--- /dev/null
+++ b/.log/ti-219513.log
@@ -0,0 +1,26 @@
+[17:25:20.045] Global cache location '/home/thomas/.cache/typescript/4.2', safe file path '/home/thomas/Projects/emacs/OrgRoamForceGraphReact/node_modules/typescript/lib/typingSafeList.json', types map path /home/thomas/Projects/emacs/OrgRoamForceGraphReact/node_modules/typescript/lib/typesMap.json
+[17:25:20.055] Processing cache location '/home/thomas/.cache/typescript/4.2'
+[17:25:20.055] Trying to find '/home/thomas/.cache/typescript/4.2/package.json'...
+[17:25:20.060] Loaded content of '/home/thomas/.cache/typescript/4.2/package.json': {"private":true,"dependencies":{"types-registry":"^0.1.549"},"devDependencies":{"@types/component-emitter":"^1.2.10","@types/cytoscape":"^3.14.14","@types/heap":"^0.2.28","@types/lodash.debounce":"^4.0.6","@types/md5":"^2.3.0","@types/react":"^17.0.3","@types/react-dom":"^17.0.2"}}
+[17:25:20.061] Loaded content of '/home/thomas/.cache/typescript/4.2/package-lock.json'
+[17:25:20.135] Adding entry into typings cache: 'component-emitter' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/component-emitter/index.d.ts'
+[17:25:20.155] Adding entry into typings cache: 'cytoscape' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/cytoscape/index.d.ts'
+[17:25:20.219] Adding entry into typings cache: 'heap' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/heap/index.d.ts'
+[17:25:20.240] Adding entry into typings cache: 'lodash.debounce' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/lodash.debounce/index.d.ts'
+[17:25:20.267] Adding entry into typings cache: 'md5' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/md5/index.d.ts'
+[17:25:20.287] Adding entry into typings cache: 'react' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/react/index.d.ts'
+[17:25:20.327] Adding entry into typings cache: 'react-dom' => '/home/thomas/.cache/typescript/4.2/node_modules/@types/react-dom/index.d.ts'
+[17:25:20.328] Finished processing cache location '/home/thomas/.cache/typescript/4.2'
+[17:25:20.380] Process id: 219521
+[17:25:20.381] NPM location: /home/thomas/.local/share/nvm/v15.12.0/bin/npm (explicit '--npmLocation' not  provided)
+[17:25:20.381] validateDefaultNpmLocation: false
+[17:25:20.382] Npm config file: /home/thomas/.cache/typescript/4.2/package.json
+[17:25:20.383] Updating types-registry npm package...
+[17:25:20.384] Exec: /home/thomas/.local/share/nvm/v15.12.0/bin/npm install --ignore-scripts types-registry@latest
+[17:25:23.448]     Succeeded. stdout:
+    
+    up to date, audited 14 packages in 3s
+
+found 0 vulnerabilities
+
+[17:25:23.448] Updated types-registry npm package
diff --git a/.log/tsserver.log b/.log/tsserver.log
new file mode 100644
index 0000000..9f896ca
--- /dev/null
+++ b/.log/tsserver.log
@@ -0,0 +1,196 @@
+Info 0    [17:25:19.053] Starting TS Server
+Info 1    [17:25:19.059] Version: 4.2.3
+Info 2    [17:25:19.063] Arguments: /home/thomas/.local/share/nvm/v15.12.0/bin/node /home/thomas/Projects/emacs/OrgRoamForceGraphReact/node_modules/.bin/tsserver --logFile /home/thomas/Projects/emacs/OrgRoamForceGraphReact/.log/tsserver.log --logVerbosity info --cancellationPipeName /tmp/8afa2fb16cc5f15f3721aa249ebffecc/tscancellation*
+Info 3    [17:25:19.063] Platform: linux NodeVersion: 15 CaseSensitive: true
+Info 4    [17:25:19.063] ServerMode: undefined syntaxOnly: false hasUnknownServerMode: undefined
+Info 5    [17:25:22.567] Search path: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/graph
+Info 6    [17:25:22.577] For info: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/graph/graph.tsx :: Config file name: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json
+Info 7    [17:25:22.577] Opened configuration file /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json
+Info 8    [17:25:22.844] Config: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json : {
+ "rootNames": [
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/app.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/auto-image/auto-image.story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/auto-image/auto-image.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/bullet-item/bullet-item.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/button/button.presets.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/button/button.props.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/button/button.story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/button/button.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/checkbox/checkbox.props.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/checkbox/checkbox.story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/checkbox/checkbox.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/form-row/form-row.presets.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/form-row/form-row.props.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/form-row/form-row.story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/form-row/form-row.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/graph/graph.story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/graph/graph.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/header/header.props.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/header/header.story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/header/header.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/icon/icon.props.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/icon/icon.story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/icon/icon.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/icon/icons/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/screen/screen.presets.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/screen/screen.props.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/screen/screen.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/switch/switch.props.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/switch/switch.story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/switch/switch.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/text/text.presets.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/text/text.props.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/text/text.story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/text/text.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/text-field/text-field.story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/text-field/text-field.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/wallpaper/wallpaper.presets.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/wallpaper/wallpaper.props.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/wallpaper/wallpaper.story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/components/wallpaper/wallpaper.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/data/randomdata.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/i18n/i18n.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/i18n/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/i18n/translate.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/models/environment.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/models/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/models/character/character.test.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/models/character/character.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/models/character-store/character-store.test.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/models/character-store/character-store.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/models/extensions/with-environment.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/models/extensions/with-root-store.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/models/root-store/root-store-context.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/models/root-store/root-store.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/models/root-store/setup-root-store.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/navigators/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/navigators/main-navigator.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/navigators/navigation-utilities.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/navigators/root-navigator.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/screens/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/screens/demo/demo-list-screen.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/screens/demo/demo-screen.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/screens/graph/graph-screen.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/screens/welcome/welcome-screen.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/api/api-config.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/api/api-problem.test.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/api/api-problem.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/api/api.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/api/api.types.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/api/character-api.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/api/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/reactotron/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/reactotron/reactotron-config.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/reactotron/reactotron.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/reactotron/tron.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/services/reactotron/tron.web.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/theme/color.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/theme/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/theme/palette.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/theme/spacing.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/theme/timing.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/theme/typography.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/theme/fonts/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/utils/delay.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/utils/ignore-warnings.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/utils/keychain.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/utils/validate.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/utils/storage/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/utils/storage/storage.test.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/app/utils/storage/storage.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/test/i18n.test.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/test/mock-async-storage.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/test/mock-file.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/test/mock-i18n.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/test/mock-react-native-image.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/test/mock-reactotron.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/test/setup.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/test/storyshots.test.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/storybook/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/storybook/storybook-registry.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/storybook/storybook.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/storybook/toggle-storybook.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/storybook/toggle-storybook.web.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/storybook/views/index.ts",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/storybook/views/story-screen.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/storybook/views/story.tsx",
+  "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/storybook/views/use-case.tsx"
+ ],
+ "options": {
+  "allowJs": false,
+  "allowSyntheticDefaultImports": true,
+  "experimentalDecorators": true,
+  "jsx": 3,
+  "module": 5,
+  "moduleResolution": 2,
+  "noImplicitAny": false,
+  "noImplicitReturns": true,
+  "noImplicitThis": true,
+  "noUnusedLocals": true,
+  "sourceMap": true,
+  "target": 99,
+  "lib": [
+   "lib.esnext.d.ts",
+   "lib.dom.d.ts"
+  ],
+  "skipLibCheck": true,
+  "resolveJsonModule": true,
+  "configFilePath": "/home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json"
+ }
+}
+Info 9    [17:25:23.081] Starting updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json
+Info 10   [17:25:30.507] Finishing updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json Version: 1 structureChanged: true Elapsed: 7424.192016988993ms
+Info 11   [17:25:30.511] Project '/home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json' (Configured)
+Info 12   [17:25:30.511] 	Files (656)
+
+Info 13   [17:25:30.511] -----------------------------------------------
+Info 14   [17:25:30.588] Starting updateGraphWorker: Project: /dev/null/autoImportProviderProject1*
+Info 15   [17:25:31.818] Finishing updateGraphWorker: Project: /dev/null/autoImportProviderProject1* Version: 1 structureChanged: true Elapsed: 1229.860110014677ms
+Info 16   [17:25:31.819] Project '/dev/null/autoImportProviderProject1*' (AutoImportProvider)
+Info 17   [17:25:31.819] 	Files (264)
+
+Info 18   [17:25:31.819] -----------------------------------------------
+
+Info 1989 [17:25:48.568] Finishing updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json Version: 325 structureChanged: false Elapsed: 55.324847012758255ms
+Info 1990 [17:25:48.568] Different program with same set of files:: structureIsReused:: 2
+Info 1991 [17:25:49.186] Starting updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json
+Info 1992 [17:25:49.226] Finishing updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json Version: 326 structureChanged: false Elapsed: 39.83478197455406ms
+Info 1993 [17:25:49.227] Different program with same set of files:: structureIsReused:: 2
+Info 1994 [17:25:50.717] Starting updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json
+Info 1995 [17:25:50.764] Finishing updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json Version: 327 structureChanged: false Elapsed: 47.25856599211693ms
+Info 1996 [17:25:50.764] Different program with same set of files:: structureIsReused:: 2
+Info 1997 [17:25:55.537] Starting updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json
+Info 1998 [17:25:55.571] Finishing updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json Version: 328 structureChanged: false Elapsed: 33.41049098968506ms
+Info 1999 [17:25:55.571] Different program with same set of files:: structureIsReused:: 2
+Info 2000 [17:25:59.176] Starting updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json
+Info 2001 [17:25:59.210] Finishing updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json Version: 329 structureChanged: false Elapsed: 33.759974986314774ms
+Info 2002 [17:25:59.210] Different program with same set of files:: structureIsReused:: 2
+Info 2003 [17:26:00.505] Starting updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json
+Info 2004 [17:26:00.582] Finishing updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json Version: 330 structureChanged: false Elapsed: 76.56874299049377ms
+Info 2005 [17:26:00.582] Different program with same set of files:: structureIsReused:: 2
+Info 2006 [17:26:00.588] getCompletionData: Get current token: 0.0553629994392395
+Info 2007 [17:26:00.588] getCompletionData: Is inside comment: 0.02347099781036377
+Info 2008 [17:26:00.588] getCompletionData: Get previous token 1: 0.13465499877929688
+Info 2009 [17:26:00.589] getCompletionsAtPosition: isCompletionListBlocker: 0.5165380239486694
+Info 2010 [17:26:00.589] Returning an empty list because completion was requested in an invalid position.
+Info 2011 [17:26:00.589] getCompletionData: Get current token: 0.017889976501464844
+Info 2012 [17:26:00.589] getCompletionData: Is inside comment: 0.0063520073890686035
+Info 2013 [17:26:00.591] getCompletionData: Get previous token 1: 1.8408959805965424
+Info 2014 [17:26:00.591] getCompletionsAtPosition: isCompletionListBlocker: 0.035869985818862915
+Info 2015 [17:26:00.591] Returning an empty list because completion was requested in an invalid position.
+Info 2016 [17:26:00.592] getCompletionData: Get current token: 0.01839900016784668
+Info 2017 [17:26:00.592] getCompletionData: Is inside comment: 0.008116006851196289
+Info 2018 [17:26:00.592] getCompletionData: Get previous token 1: 0.0751589834690094
+Info 2019 [17:26:00.592] getCompletionsAtPosition: isCompletionListBlocker: 0.0272350013256073
+Info 2020 [17:26:00.592] Returning an empty list because completion was requested in an invalid position.
+Info 2021 [17:26:00.661] Starting updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json
+Info 2022 [17:26:00.688] Finishing updateGraphWorker: Project: /home/thomas/Projects/emacs/OrgRoamForceGraphReact/tsconfig.json Version: 331 structureChanged: false Elapsed: 26.25129398703575ms
+Info 2023 [17:26:00.688] Different program with same set of files:: structureIsReused:: 2
+Info 2024 [17:26:00.688] getCompletionData: Get current token: 0.017984002828598022
+Info 2025 [17:26:00.688] getCompletionData: Is inside comment: 0.004801005125045776
+Info 2026 [17:26:00.688] getCompletionData: Get previous token 1: 0.0829710066318512
+Info 2027 [17:26:00.688] getCompletionsAtPosition: isCompletionListBlocker: 0.1481350064277649
+Info 2028 [17:26:00.702] getSymbolsFromOtherSourceFileExports: Using cached list
+Info 2029 [17:26:00.731] getCompletionData: Semantic work: 42.382359981536865
+Info 2030 [17:26:00.755] getCompletionsAtPosition: getCompletionEntriesFromSymbols: 20.829847007989883
diff --git a/app/components/graph/graph.story.tsx b/app/components/graph/graph.story.tsx
new file mode 100644
index 0000000..e5385e6
--- /dev/null
+++ b/app/components/graph/graph.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 { Graph } from "./graph"
+
+storiesOf("Graph", module)
+  .addDecorator((fn) => <StoryScreen>{fn()}</StoryScreen>)
+  .add("Style Presets", () => (
+    <Story>
+      <UseCase text="Primary" usage="The primary.">
+        <Graph style={{ backgroundColor: color.error }} />
+      </UseCase>
+    </Story>
+  ))
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
new file mode 100644
index 0000000..d41cfc7
--- /dev/null
+++ b/app/components/graph/graph.tsx
@@ -0,0 +1,71 @@
+import * as React from "react"
+import { StyleProp, 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 data from "../../data/miserables.json"
+import genRandomTree from "../../data/randomdata";
+
+import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from 'react-force-graph';
+import  Slider  from '@react-native-community/slider';
+
+const CONTAINER: ViewStyle = {
+  justifyContent: "center",
+}
+
+const TEXT: TextStyle = {
+  fontFamily: typography.primary,
+  fontSize: 14,
+  color: color.primary,
+}
+
+export interface GraphProps {
+  /**
+   * An optional style override useful for padding & margin.
+   */
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Describe your component here
+ */
+export const Graph = observer(function Graph(props: GraphProps) {
+  const { style } = props
+  const styles = flatten([CONTAINER, style])
+
+  //  const fgRef= React.useRef();
+
+
+    const GROUPS=12;
+    const gData = genRandomTree();
+
+    const [visco, setVisco] = React.useState(0.4);
+
+ // React.useEffect(()=> {
+ //     const fg = fgRef.current;
+
+ //     fg.d3Force('center', visco);
+ // });
+
+    return (
+    <View>
+    <Slider style={{position: "absolute", zIndex: 100, width: "20%", height: 40}}
+        minimumValue={0}
+        maximumValue={1}
+        onValueChange={(value)=>{setVisco(value)}}
+        value={visco}
+    />
+    <ForceGraph2D
+   //   ref={fgRef}
+      graphData={gData}
+      nodeAutoColorBy={d => d.id%GROUPS}
+      linkAutoColorBy={d => gData.nodes[d.source].id%GROUPS}
+      linkColor={"#ffffff"}
+      linkWidth={2}
+      d3VelocityDecay={visco}
+      />
+    </View>
+  )
+})
diff --git a/app/data/miserables.json b/app/data/miserables.json
new file mode 100644
index 0000000..7db9285
--- /dev/null
+++ b/app/data/miserables.json
@@ -0,0 +1,337 @@
+{
+  "nodes": [
+    {"id": "Myriel", "group": 1},
+    {"id": "Napoleon", "group": 1},
+    {"id": "Mlle.Baptistine", "group": 1},
+    {"id": "Mme.Magloire", "group": 1},
+    {"id": "CountessdeLo", "group": 1},
+    {"id": "Geborand", "group": 1},
+    {"id": "Champtercier", "group": 1},
+    {"id": "Cravatte", "group": 1},
+    {"id": "Count", "group": 1},
+    {"id": "OldMan", "group": 1},
+    {"id": "Labarre", "group": 2},
+    {"id": "Valjean", "group": 2},
+    {"id": "Marguerite", "group": 3},
+    {"id": "Mme.deR", "group": 2},
+    {"id": "Isabeau", "group": 2},
+    {"id": "Gervais", "group": 2},
+    {"id": "Tholomyes", "group": 3},
+    {"id": "Listolier", "group": 3},
+    {"id": "Fameuil", "group": 3},
+    {"id": "Blacheville", "group": 3},
+    {"id": "Favourite", "group": 3},
+    {"id": "Dahlia", "group": 3},
+    {"id": "Zephine", "group": 3},
+    {"id": "Fantine", "group": 3},
+    {"id": "Mme.Thenardier", "group": 4},
+    {"id": "Thenardier", "group": 4},
+    {"id": "Cosette", "group": 5},
+    {"id": "Javert", "group": 4},
+    {"id": "Fauchelevent", "group": 0},
+    {"id": "Bamatabois", "group": 2},
+    {"id": "Perpetue", "group": 3},
+    {"id": "Simplice", "group": 2},
+    {"id": "Scaufflaire", "group": 2},
+    {"id": "Woman1", "group": 2},
+    {"id": "Judge", "group": 2},
+    {"id": "Champmathieu", "group": 2},
+    {"id": "Brevet", "group": 2},
+    {"id": "Chenildieu", "group": 2},
+    {"id": "Cochepaille", "group": 2},
+    {"id": "Pontmercy", "group": 4},
+    {"id": "Boulatruelle", "group": 6},
+    {"id": "Eponine", "group": 4},
+    {"id": "Anzelma", "group": 4},
+    {"id": "Woman2", "group": 5},
+    {"id": "MotherInnocent", "group": 0},
+    {"id": "Gribier", "group": 0},
+    {"id": "Jondrette", "group": 7},
+    {"id": "Mme.Burgon", "group": 7},
+    {"id": "Gavroche", "group": 8},
+    {"id": "Gillenormand", "group": 5},
+    {"id": "Magnon", "group": 5},
+    {"id": "Mlle.Gillenormand", "group": 5},
+    {"id": "Mme.Pontmercy", "group": 5},
+    {"id": "Mlle.Vaubois", "group": 5},
+    {"id": "Lt.Gillenormand", "group": 5},
+    {"id": "Marius", "group": 8},
+    {"id": "BaronessT", "group": 5},
+    {"id": "Mabeuf", "group": 8},
+    {"id": "Enjolras", "group": 8},
+    {"id": "Combeferre", "group": 8},
+    {"id": "Prouvaire", "group": 8},
+    {"id": "Feuilly", "group": 8},
+    {"id": "Courfeyrac", "group": 8},
+    {"id": "Bahorel", "group": 8},
+    {"id": "Bossuet", "group": 8},
+    {"id": "Joly", "group": 8},
+    {"id": "Grantaire", "group": 8},
+    {"id": "MotherPlutarch", "group": 9},
+    {"id": "Gueulemer", "group": 4},
+    {"id": "Babet", "group": 4},
+    {"id": "Claquesous", "group": 4},
+    {"id": "Montparnasse", "group": 4},
+    {"id": "Toussaint", "group": 5},
+    {"id": "Child1", "group": 10},
+    {"id": "Child2", "group": 10},
+    {"id": "Brujon", "group": 4},
+    {"id": "Mme.Hucheloup", "group": 8}
+  ],
+  "links": [
+    {"source": "Napoleon", "target": "Myriel", "value": 1},
+    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8},
+    {"source": "Mme.Magloire", "target": "Myriel", "value": 10},
+    {"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6},
+    {"source": "CountessdeLo", "target": "Myriel", "value": 1},
+    {"source": "Geborand", "target": "Myriel", "value": 1},
+    {"source": "Champtercier", "target": "Myriel", "value": 1},
+    {"source": "Cravatte", "target": "Myriel", "value": 1},
+    {"source": "Count", "target": "Myriel", "value": 2},
+    {"source": "OldMan", "target": "Myriel", "value": 1},
+    {"source": "Valjean", "target": "Labarre", "value": 1},
+    {"source": "Valjean", "target": "Mme.Magloire", "value": 3},
+    {"source": "Valjean", "target": "Mlle.Baptistine", "value": 3},
+    {"source": "Valjean", "target": "Myriel", "value": 5},
+    {"source": "Marguerite", "target": "Valjean", "value": 1},
+    {"source": "Mme.deR", "target": "Valjean", "value": 1},
+    {"source": "Isabeau", "target": "Valjean", "value": 1},
+    {"source": "Gervais", "target": "Valjean", "value": 1},
+    {"source": "Listolier", "target": "Tholomyes", "value": 4},
+    {"source": "Fameuil", "target": "Tholomyes", "value": 4},
+    {"source": "Fameuil", "target": "Listolier", "value": 4},
+    {"source": "Blacheville", "target": "Tholomyes", "value": 4},
+    {"source": "Blacheville", "target": "Listolier", "value": 4},
+    {"source": "Blacheville", "target": "Fameuil", "value": 4},
+    {"source": "Favourite", "target": "Tholomyes", "value": 3},
+    {"source": "Favourite", "target": "Listolier", "value": 3},
+    {"source": "Favourite", "target": "Fameuil", "value": 3},
+    {"source": "Favourite", "target": "Blacheville", "value": 4},
+    {"source": "Dahlia", "target": "Tholomyes", "value": 3},
+    {"source": "Dahlia", "target": "Listolier", "value": 3},
+    {"source": "Dahlia", "target": "Fameuil", "value": 3},
+    {"source": "Dahlia", "target": "Blacheville", "value": 3},
+    {"source": "Dahlia", "target": "Favourite", "value": 5},
+    {"source": "Zephine", "target": "Tholomyes", "value": 3},
+    {"source": "Zephine", "target": "Listolier", "value": 3},
+    {"source": "Zephine", "target": "Fameuil", "value": 3},
+    {"source": "Zephine", "target": "Blacheville", "value": 3},
+    {"source": "Zephine", "target": "Favourite", "value": 4},
+    {"source": "Zephine", "target": "Dahlia", "value": 4},
+    {"source": "Fantine", "target": "Tholomyes", "value": 3},
+    {"source": "Fantine", "target": "Listolier", "value": 3},
+    {"source": "Fantine", "target": "Fameuil", "value": 3},
+    {"source": "Fantine", "target": "Blacheville", "value": 3},
+    {"source": "Fantine", "target": "Favourite", "value": 4},
+    {"source": "Fantine", "target": "Dahlia", "value": 4},
+    {"source": "Fantine", "target": "Zephine", "value": 4},
+    {"source": "Fantine", "target": "Marguerite", "value": 2},
+    {"source": "Fantine", "target": "Valjean", "value": 9},
+    {"source": "Mme.Thenardier", "target": "Fantine", "value": 2},
+    {"source": "Mme.Thenardier", "target": "Valjean", "value": 7},
+    {"source": "Thenardier", "target": "Mme.Thenardier", "value": 13},
+    {"source": "Thenardier", "target": "Fantine", "value": 1},
+    {"source": "Thenardier", "target": "Valjean", "value": 12},
+    {"source": "Cosette", "target": "Mme.Thenardier", "value": 4},
+    {"source": "Cosette", "target": "Valjean", "value": 31},
+    {"source": "Cosette", "target": "Tholomyes", "value": 1},
+    {"source": "Cosette", "target": "Thenardier", "value": 1},
+    {"source": "Javert", "target": "Valjean", "value": 17},
+    {"source": "Javert", "target": "Fantine", "value": 5},
+    {"source": "Javert", "target": "Thenardier", "value": 5},
+    {"source": "Javert", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Javert", "target": "Cosette", "value": 1},
+    {"source": "Fauchelevent", "target": "Valjean", "value": 8},
+    {"source": "Fauchelevent", "target": "Javert", "value": 1},
+    {"source": "Bamatabois", "target": "Fantine", "value": 1},
+    {"source": "Bamatabois", "target": "Javert", "value": 1},
+    {"source": "Bamatabois", "target": "Valjean", "value": 2},
+    {"source": "Perpetue", "target": "Fantine", "value": 1},
+    {"source": "Simplice", "target": "Perpetue", "value": 2},
+    {"source": "Simplice", "target": "Valjean", "value": 3},
+    {"source": "Simplice", "target": "Fantine", "value": 2},
+    {"source": "Simplice", "target": "Javert", "value": 1},
+    {"source": "Scaufflaire", "target": "Valjean", "value": 1},
+    {"source": "Woman1", "target": "Valjean", "value": 2},
+    {"source": "Woman1", "target": "Javert", "value": 1},
+    {"source": "Judge", "target": "Valjean", "value": 3},
+    {"source": "Judge", "target": "Bamatabois", "value": 2},
+    {"source": "Champmathieu", "target": "Valjean", "value": 3},
+    {"source": "Champmathieu", "target": "Judge", "value": 3},
+    {"source": "Champmathieu", "target": "Bamatabois", "value": 2},
+    {"source": "Brevet", "target": "Judge", "value": 2},
+    {"source": "Brevet", "target": "Champmathieu", "value": 2},
+    {"source": "Brevet", "target": "Valjean", "value": 2},
+    {"source": "Brevet", "target": "Bamatabois", "value": 1},
+    {"source": "Chenildieu", "target": "Judge", "value": 2},
+    {"source": "Chenildieu", "target": "Champmathieu", "value": 2},
+    {"source": "Chenildieu", "target": "Brevet", "value": 2},
+    {"source": "Chenildieu", "target": "Valjean", "value": 2},
+    {"source": "Chenildieu", "target": "Bamatabois", "value": 1},
+    {"source": "Cochepaille", "target": "Judge", "value": 2},
+    {"source": "Cochepaille", "target": "Champmathieu", "value": 2},
+    {"source": "Cochepaille", "target": "Brevet", "value": 2},
+    {"source": "Cochepaille", "target": "Chenildieu", "value": 2},
+    {"source": "Cochepaille", "target": "Valjean", "value": 2},
+    {"source": "Cochepaille", "target": "Bamatabois", "value": 1},
+    {"source": "Pontmercy", "target": "Thenardier", "value": 1},
+    {"source": "Boulatruelle", "target": "Thenardier", "value": 1},
+    {"source": "Eponine", "target": "Mme.Thenardier", "value": 2},
+    {"source": "Eponine", "target": "Thenardier", "value": 3},
+    {"source": "Anzelma", "target": "Eponine", "value": 2},
+    {"source": "Anzelma", "target": "Thenardier", "value": 2},
+    {"source": "Anzelma", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Woman2", "target": "Valjean", "value": 3},
+    {"source": "Woman2", "target": "Cosette", "value": 1},
+    {"source": "Woman2", "target": "Javert", "value": 1},
+    {"source": "MotherInnocent", "target": "Fauchelevent", "value": 3},
+    {"source": "MotherInnocent", "target": "Valjean", "value": 1},
+    {"source": "Gribier", "target": "Fauchelevent", "value": 2},
+    {"source": "Mme.Burgon", "target": "Jondrette", "value": 1},
+    {"source": "Gavroche", "target": "Mme.Burgon", "value": 2},
+    {"source": "Gavroche", "target": "Thenardier", "value": 1},
+    {"source": "Gavroche", "target": "Javert", "value": 1},
+    {"source": "Gavroche", "target": "Valjean", "value": 1},
+    {"source": "Gillenormand", "target": "Cosette", "value": 3},
+    {"source": "Gillenormand", "target": "Valjean", "value": 2},
+    {"source": "Magnon", "target": "Gillenormand", "value": 1},
+    {"source": "Magnon", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9},
+    {"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2},
+    {"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2},
+    {"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1},
+    {"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1},
+    {"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1},
+    {"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2},
+    {"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1},
+    {"source": "Lt.Gillenormand", "target": "Cosette", "value": 1},
+    {"source": "Marius", "target": "Mlle.Gillenormand", "value": 6},
+    {"source": "Marius", "target": "Gillenormand", "value": 12},
+    {"source": "Marius", "target": "Pontmercy", "value": 1},
+    {"source": "Marius", "target": "Lt.Gillenormand", "value": 1},
+    {"source": "Marius", "target": "Cosette", "value": 21},
+    {"source": "Marius", "target": "Valjean", "value": 19},
+    {"source": "Marius", "target": "Tholomyes", "value": 1},
+    {"source": "Marius", "target": "Thenardier", "value": 2},
+    {"source": "Marius", "target": "Eponine", "value": 5},
+    {"source": "Marius", "target": "Gavroche", "value": 4},
+    {"source": "BaronessT", "target": "Gillenormand", "value": 1},
+    {"source": "BaronessT", "target": "Marius", "value": 1},
+    {"source": "Mabeuf", "target": "Marius", "value": 1},
+    {"source": "Mabeuf", "target": "Eponine", "value": 1},
+    {"source": "Mabeuf", "target": "Gavroche", "value": 1},
+    {"source": "Enjolras", "target": "Marius", "value": 7},
+    {"source": "Enjolras", "target": "Gavroche", "value": 7},
+    {"source": "Enjolras", "target": "Javert", "value": 6},
+    {"source": "Enjolras", "target": "Mabeuf", "value": 1},
+    {"source": "Enjolras", "target": "Valjean", "value": 4},
+    {"source": "Combeferre", "target": "Enjolras", "value": 15},
+    {"source": "Combeferre", "target": "Marius", "value": 5},
+    {"source": "Combeferre", "target": "Gavroche", "value": 6},
+    {"source": "Combeferre", "target": "Mabeuf", "value": 2},
+    {"source": "Prouvaire", "target": "Gavroche", "value": 1},
+    {"source": "Prouvaire", "target": "Enjolras", "value": 4},
+    {"source": "Prouvaire", "target": "Combeferre", "value": 2},
+    {"source": "Feuilly", "target": "Gavroche", "value": 2},
+    {"source": "Feuilly", "target": "Enjolras", "value": 6},
+    {"source": "Feuilly", "target": "Prouvaire", "value": 2},
+    {"source": "Feuilly", "target": "Combeferre", "value": 5},
+    {"source": "Feuilly", "target": "Mabeuf", "value": 1},
+    {"source": "Feuilly", "target": "Marius", "value": 1},
+    {"source": "Courfeyrac", "target": "Marius", "value": 9},
+    {"source": "Courfeyrac", "target": "Enjolras", "value": 17},
+    {"source": "Courfeyrac", "target": "Combeferre", "value": 13},
+    {"source": "Courfeyrac", "target": "Gavroche", "value": 7},
+    {"source": "Courfeyrac", "target": "Mabeuf", "value": 2},
+    {"source": "Courfeyrac", "target": "Eponine", "value": 1},
+    {"source": "Courfeyrac", "target": "Feuilly", "value": 6},
+    {"source": "Courfeyrac", "target": "Prouvaire", "value": 3},
+    {"source": "Bahorel", "target": "Combeferre", "value": 5},
+    {"source": "Bahorel", "target": "Gavroche", "value": 5},
+    {"source": "Bahorel", "target": "Courfeyrac", "value": 6},
+    {"source": "Bahorel", "target": "Mabeuf", "value": 2},
+    {"source": "Bahorel", "target": "Enjolras", "value": 4},
+    {"source": "Bahorel", "target": "Feuilly", "value": 3},
+    {"source": "Bahorel", "target": "Prouvaire", "value": 2},
+    {"source": "Bahorel", "target": "Marius", "value": 1},
+    {"source": "Bossuet", "target": "Marius", "value": 5},
+    {"source": "Bossuet", "target": "Courfeyrac", "value": 12},
+    {"source": "Bossuet", "target": "Gavroche", "value": 5},
+    {"source": "Bossuet", "target": "Bahorel", "value": 4},
+    {"source": "Bossuet", "target": "Enjolras", "value": 10},
+    {"source": "Bossuet", "target": "Feuilly", "value": 6},
+    {"source": "Bossuet", "target": "Prouvaire", "value": 2},
+    {"source": "Bossuet", "target": "Combeferre", "value": 9},
+    {"source": "Bossuet", "target": "Mabeuf", "value": 1},
+    {"source": "Bossuet", "target": "Valjean", "value": 1},
+    {"source": "Joly", "target": "Bahorel", "value": 5},
+    {"source": "Joly", "target": "Bossuet", "value": 7},
+    {"source": "Joly", "target": "Gavroche", "value": 3},
+    {"source": "Joly", "target": "Courfeyrac", "value": 5},
+    {"source": "Joly", "target": "Enjolras", "value": 5},
+    {"source": "Joly", "target": "Feuilly", "value": 5},
+    {"source": "Joly", "target": "Prouvaire", "value": 2},
+    {"source": "Joly", "target": "Combeferre", "value": 5},
+    {"source": "Joly", "target": "Mabeuf", "value": 1},
+    {"source": "Joly", "target": "Marius", "value": 2},
+    {"source": "Grantaire", "target": "Bossuet", "value": 3},
+    {"source": "Grantaire", "target": "Enjolras", "value": 3},
+    {"source": "Grantaire", "target": "Combeferre", "value": 1},
+    {"source": "Grantaire", "target": "Courfeyrac", "value": 2},
+    {"source": "Grantaire", "target": "Joly", "value": 2},
+    {"source": "Grantaire", "target": "Gavroche", "value": 1},
+    {"source": "Grantaire", "target": "Bahorel", "value": 1},
+    {"source": "Grantaire", "target": "Feuilly", "value": 1},
+    {"source": "Grantaire", "target": "Prouvaire", "value": 1},
+    {"source": "MotherPlutarch", "target": "Mabeuf", "value": 3},
+    {"source": "Gueulemer", "target": "Thenardier", "value": 5},
+    {"source": "Gueulemer", "target": "Valjean", "value": 1},
+    {"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Gueulemer", "target": "Javert", "value": 1},
+    {"source": "Gueulemer", "target": "Gavroche", "value": 1},
+    {"source": "Gueulemer", "target": "Eponine", "value": 1},
+    {"source": "Babet", "target": "Thenardier", "value": 6},
+    {"source": "Babet", "target": "Gueulemer", "value": 6},
+    {"source": "Babet", "target": "Valjean", "value": 1},
+    {"source": "Babet", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Babet", "target": "Javert", "value": 2},
+    {"source": "Babet", "target": "Gavroche", "value": 1},
+    {"source": "Babet", "target": "Eponine", "value": 1},
+    {"source": "Claquesous", "target": "Thenardier", "value": 4},
+    {"source": "Claquesous", "target": "Babet", "value": 4},
+    {"source": "Claquesous", "target": "Gueulemer", "value": 4},
+    {"source": "Claquesous", "target": "Valjean", "value": 1},
+    {"source": "Claquesous", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Claquesous", "target": "Javert", "value": 1},
+    {"source": "Claquesous", "target": "Eponine", "value": 1},
+    {"source": "Claquesous", "target": "Enjolras", "value": 1},
+    {"source": "Montparnasse", "target": "Javert", "value": 1},
+    {"source": "Montparnasse", "target": "Babet", "value": 2},
+    {"source": "Montparnasse", "target": "Gueulemer", "value": 2},
+    {"source": "Montparnasse", "target": "Claquesous", "value": 2},
+    {"source": "Montparnasse", "target": "Valjean", "value": 1},
+    {"source": "Montparnasse", "target": "Gavroche", "value": 1},
+    {"source": "Montparnasse", "target": "Eponine", "value": 1},
+    {"source": "Montparnasse", "target": "Thenardier", "value": 1},
+    {"source": "Toussaint", "target": "Cosette", "value": 2},
+    {"source": "Toussaint", "target": "Javert", "value": 1},
+    {"source": "Toussaint", "target": "Valjean", "value": 1},
+    {"source": "Child1", "target": "Gavroche", "value": 2},
+    {"source": "Child2", "target": "Gavroche", "value": 2},
+    {"source": "Child2", "target": "Child1", "value": 3},
+    {"source": "Brujon", "target": "Babet", "value": 3},
+    {"source": "Brujon", "target": "Gueulemer", "value": 3},
+    {"source": "Brujon", "target": "Thenardier", "value": 3},
+    {"source": "Brujon", "target": "Gavroche", "value": 1},
+    {"source": "Brujon", "target": "Eponine", "value": 1},
+    {"source": "Brujon", "target": "Claquesous", "value": 1},
+    {"source": "Brujon", "target": "Montparnasse", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Joly", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1}
+  ]
+}
diff --git a/app/data/randomdata.js b/app/data/randomdata.js
new file mode 100644
index 0000000..55e5598
--- /dev/null
+++ b/app/data/randomdata.js
@@ -0,0 +1,11 @@
+function genRandomTree(N = 300, reverse = false) {
+  return {
+    nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+    .filter(id => id)
+    .map(id => ({
+      [reverse ? 'target' : 'source']: id,
+      [reverse ? 'source' : 'target']: Math.round(Math.random() * (id-1))
+    }))
+  };
+}
diff --git a/app/data/randomdata.tsx b/app/data/randomdata.tsx
new file mode 100644
index 0000000..f24a2ba
--- /dev/null
+++ b/app/data/randomdata.tsx
@@ -0,0 +1,11 @@
+export default function genRandomTree(N = 300, reverse = false) {
+  return {
+    nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+    .filter(id => id)
+    .map(id => ({
+      [reverse ? 'target' : 'source']: id,
+      [reverse ? 'source' : 'target']: Math.round(Math.random() * (id-1))
+    }))
+  };
+}
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
new file mode 100644
index 0000000..4ba2ee0
--- /dev/null
+++ b/app/screens/graph/graph-screen.tsx
@@ -0,0 +1,28 @@
+import React from "react"
+import { observer } from "mobx-react-lite"
+import { ViewStyle } from "react-native"
+import { Screen, Text } from "../../components"
+// import { useNavigation } from "@react-navigation/native"
+// import { useStores } from "../../models"
+import { color } from "../../theme"
+
+import { Graph } from "../../components"
+
+const ROOT: ViewStyle = {
+  backgroundColor: color.palette.black,
+  flex: 1,
+}
+
+export const GraphScreen = observer(function GraphScreen() {
+  // Pull in one of our MST stores
+  // const { someStore, anotherStore } = useStores()
+
+  // Pull in navigation via hook
+  // const navigation = useNavigation()
+  return (
+    <Screen style={ROOT} preset="scroll">
+      <Text preset="header" text="Graph" />
+      <Graph/>
+    </Screen>
+  )
+})