added graph button

5 files changed, 34 insertions, 20 deletions

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 8b041b5..83cc40a 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -271,7 +271,7 @@ onLinkHover={handleLinkHover}
   }
 
   return (
-    <View>
+    <View style={style}>
       {!physics.threedim ? (
         <ForceGraph2D
           ref={fgRef}
diff --git a/app/components/index.ts b/app/components/index.ts
index 9ec6a91..8858b2f 100644
--- a/app/components/index.ts
+++ b/app/components/index.ts
@@ -12,4 +12,5 @@ export * from "./wallpaper/wallpaper"
 export * from "./auto-image/auto-image"
 export * from "./graph/graph"
 export * from "./tweaks/tweaks"
-export * from "./local/local"
+export * from "./local-button/local-button"
+export * from "./graph-ui/graph-ui"
diff --git a/app/components/local/local.tsx b/app/components/local/local.tsx
index 82ea0ee..e6984fc 100644
--- a/app/components/local/local.tsx
+++ b/app/components/local/local.tsx
@@ -1,9 +1,10 @@
 import * as React from "react"
-import { StyleProp, TextStyle, View, ViewStyle } from "react-native"
+import { StyleProp, TextStyle, TouchableOpacity, View, ViewStyle } from "react-native"
 import { observer } from "mobx-react-lite"
 import { color, typography } from "../../theme"
 import { Text } from "../"
 import { flatten } from "ramda"
+import Icon from "react-native-vector-icons/MaterialCommunityIcons"
 
 const CONTAINER: ViewStyle = {
   justifyContent: "center",
@@ -25,13 +26,13 @@ export interface LocalProps {
 /**
  * Describe your component here
  */
-export const Local = observer(function Local(props: LocalProps) {
+export const LocalButton = observer(function LocalButton(props: LocalProps): boolean {
   const { style } = props
   const styles = flatten([CONTAINER, style])
 
   return (
-    <View style={styles}>
-      <Text style={TEXT}>Hello</Text>
-    </View>
+      <Icon color="#a99f1f" name="graph"
+          style={{position:"absolute", zIndex: 100, width: 500}}
+      />
   )
 })
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index 3bfeb6e..08a5e2a 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -133,10 +133,12 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
               setPhysics({ ...physics, collision: !physics.collision })
             }}
           />
-          <Text preset="fieldLabel" text={"Alhpa Decay: " + physics.alphaDecay} />
+          <Text preset="fieldLabel" text={"Alpha Decay: " + physics.alphaDecay} />
           <Slider
+            style={styles.slider}
             minimumTrackTintColor="#a991f1"
             maximumTrackTintColor="#242730"
+            thumbTintColor="#a991f1"
             minimumValue={0}
             maximumValue={1}
             onValueChange={(value) => {
@@ -585,16 +587,19 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    //flex: 1,
     backgroundColor: "#2a2e38",
-    position: "absolute",
-    zIndex: 100,
-    left: 50,
-    top: 50,
-    width: 250,
-    borderRadius: 5,
+    position: "relative",
+    zIndex: 5,
+    marginLeft: "3%",
+    marginTop: "3%",
+    maxWidth: 275,
+    borderRadius: 10,
     borderStyle: "solid",
-    maxHeight: "70%",
+    borderWidth: 10,
+    borderColor: "#2a2e38",
+      height: "25%",
+    maxHeight: "80%",
     paddingBottom: 20,
   },
   title: {
@@ -602,7 +607,7 @@ const styles = StyleSheet.create({
     fontSize: 22,
     fontWeight: "300",
     marginBottom: 20,
-    paddingLeft: 20,
+    paddingLeft: 10,
   },
   header: {
     backgroundColor: "#2a2e38",
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
index f537128..c578fd4 100644
--- a/app/screens/graph/graph-screen.tsx
+++ b/app/screens/graph/graph-screen.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react"
 import { observer } from "mobx-react-lite"
-import { TouchableOpacity, ViewStyle } from "react-native"
+import { TouchableOpacity, View, ViewStyle } from "react-native"
 import { Screen, Text } from "../../components"
 // import { useNavigation } from "@react-navigation/native"
 // import { useStores } from "../../models"
@@ -22,6 +22,8 @@ const ROOT: ViewStyle = {
   flex: 1,
 }
 
+import { LocalButton } from "../../components/"
+import { GraphUi } from "../../components/graph-ui/graph-ui"
 export const GraphScreen = observer(function GraphScreen() {
   // Pull in one of our MST stores
   // const { someStore, anotherStore } = useStores()
@@ -169,9 +171,14 @@ export const GraphScreen = observer(function GraphScreen() {
     return null
   } else {
     return (
-      <Screen style={ROOT} preset="scroll">
+      <Screen style={ROOT} preset="fixed">
+        <View style={{flex:1, flexDirection: "row", height: "100%", width: "100%",position: "absolute", zIndex:150}}>
         <Tweaks physics={physics} setPhysics={setPhysics} />
-        <Graph setPhysics={setPhysics} physics={physics} gData={graphData} nodeIds={nodeIds} />
+        <LocalButton style={{marginLeft: "auto", marginRight:"3%", marginTop: "3%", zIndex: 5, position: "relative"}}  physics={physics} setPhysics={setPhysics} />
+        <Graph
+        style={{position: "absolute"}}
+            setPhysics={setPhysics} physics={physics} gData={graphData} nodeIds={nodeIds} />
+        </View>
       </Screen>
     )
   }