seperate 3d and local from physics

3 files changed, 55 insertions, 75 deletions

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 83cc40a..366b3b2 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -34,13 +34,17 @@ export interface GraphProps {
   gData
   setPhysics
   nodeIds: string[]
+  threeDim
+    setThreeDim
+    local
+    setLocal
 }
 
 /**
  * Describe your component here
  */
 export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
-  const { style, physics, setPhysics, gData, nodeIds } = props
+  const { style, physics, setPhysics, gData, threeDim, setThreeDim, local, setLocal } = props
   const styles = flatten([CONTAINER, style])
 
   const fgRef = useRef()
@@ -58,12 +62,12 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
     if (physics.gravityOn) {
       fg.d3Force("x", d3.forceX().strength(physics.gravity))
       fg.d3Force("y", d3.forceY().strength(physics.gravity))
-      if (physics.threedim) {
+      if (threeDim) {
         if (physics.galaxy) {
-          fg.d3Force("y", d3.forceY().strength(physics.gravity / 5))
+          fg.d3Force("x", d3.forceX().strength(physics.gravity / 5))
           fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5))
         } else {
-          fg.d3Force("y", d3.forceY().strength(physics.gravity))
+          fg.d3Force("x", d3.forceX().strength(physics.gravity))
           fg.d3Force("z", d3.forceZ().strength(physics.gravity))
         }
       } else {
@@ -72,7 +76,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
     } else {
       fg.d3Force("x", null)
       fg.d3Force("y", null)
-      physics.threedim ? fg.d3Force("z", null) : null
+      threeDim ? fg.d3Force("z", null) : null
     }
     fg.d3Force("link").strength(physics.linkStrength)
     fg.d3Force("link").iterations(physics.linkIts)
@@ -170,7 +174,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
   // Normally the graph doesn't update when you just change the physics parameters
   // This forces the graph to make a small update when you do
   useEffect(() => {
-    !physics.threedim && fgRef.current.d3ReheatSimulation()
+    fgRef.current.d3ReheatSimulation()
   }, [physics])
   /* const paintRing = useCallback((node, ctx) => {
    *   // add ring just for highlighted nodes
@@ -202,7 +206,7 @@ onLinkHover={handleLinkHover}
   const [localGraphData, setLocalGraphData] = useState({ nodes: [], links: [] })
 
   useEffect(() => {
-    localGraphData.nodes.length && !physics.local && setPhysics({ ...physics, local: true })
+    localGraphData.nodes.length && !local && setLocal(true)
   }, [localGraphData])
 
   const getLocalGraphData = (node) => {
@@ -270,14 +274,19 @@ onLinkHover={handleLinkHover}
     setDoubleClick(event.timeStamp)
   }
 
+    useEffect(()=>{
+       if(local && selectedNode) {
+         getLocalGraphData(selectedNode)
+       }
+    }, [local])
   return (
     <View style={style}>
-      {!physics.threedim ? (
+      {!threeDim ? (
         <ForceGraph2D
           ref={fgRef}
           //autoPauseRedraw={false}
           //graphData={gData}
-          graphData={physics.local ? localGraphData : gData}
+          graphData={local ? localGraphData : gData}
           //nodeAutoColorBy={physics.colorful ? (node)=>node.index%GROUPS : undefined}
           nodeColor={
             !physics.colorful
@@ -412,7 +421,7 @@ onLinkHover={handleLinkHover}
       ) : (
         <ForceGraph3D
           ref={fgRef}
-          graphData={!physics.local ? gData : localGraphData}
+          graphData={!local ? gData : localGraphData}
           //graphData={gData}
           nodeColor={
             !physics.colorful
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index 08a5e2a..d6f4d8c 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -328,58 +328,6 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
       title: "Modes",
       content: (
         <View>
-          <Text preset="fieldLabel" text="Expandable Graph" />
-                    <Switch
-            color="#a991f1"
-            trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
-            }}
-            style={styles.switch}
-            value={physics.collapse}
-            onValueChange={() => {
-              setPhysics({ ...physics, collapse: !physics.collapse })
-            }}
-          />
-          <Text preset="fieldLabel" text={"Change starting point: " + physics.rootId} />
-          <Slider
-            minimumTrackTintColor="#a991f1"
-            maximumTrackTintColor="#242730"
-            thumbTintColor="#a991f1"
-            style={styles.slider}
-            minimumValue={0}
-            maximumValue={600}
-            onValueChange={(value) => {
-              setPhysics({ ...physics, rootId: value })
-            }}
-            value={physics.rootId}
-            step={1}
-          />
-          <Text preset="fieldLabel" text="3D" />
-                    <Switch
-            color="#a991f1"
-            trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
-            }}
-            style={styles.switch}
-            value={physics.threedim}
-            onValueChange={() => {
-              setPhysics({ ...physics, threedim: !physics.threedim })
-            }}
-          />
-                    <Switch
-            color="#a991f1"
-            trackColor={{
-                false: "#62686E",
-                true: "#a991f1"
-            }}
-            style={styles.switch}
-            value={physics.local}
-            onValueChange={() => {
-              setPhysics({ ...physics, local: !physics.local })
-            }}
-          />
         </View>
       ),
     },
@@ -587,19 +535,18 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
 
 const styles = StyleSheet.create({
   container: {
-    //flex: 1,
+    display: "flex",
     backgroundColor: "#2a2e38",
-    position: "relative",
+    position: "absolute",
     zIndex: 5,
-    marginLeft: "3%",
-    marginTop: "3%",
+    marginLeft: "2%",
+    marginTop: "2%",
     maxWidth: 275,
     borderRadius: 10,
     borderStyle: "solid",
     borderWidth: 10,
     borderColor: "#2a2e38",
-      height: "25%",
-    maxHeight: "80%",
+      maxHeight: "80%",
     paddingBottom: 20,
   },
   title: {
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
index c578fd4..cee0bf7 100644
--- a/app/screens/graph/graph-screen.tsx
+++ b/app/screens/graph/graph-screen.tsx
@@ -24,6 +24,7 @@ const ROOT: ViewStyle = {
 
 import { LocalButton } from "../../components/"
 import { GraphUi } from "../../components/graph-ui/graph-ui"
+import { Switch } from "react-native-elements"
 export const GraphScreen = observer(function GraphScreen() {
   // Pull in one of our MST stores
   // const { someStore, anotherStore } = useStores()
@@ -40,10 +41,8 @@ export const GraphScreen = observer(function GraphScreen() {
     collision: true,
     linkStrength: 0.1,
     linkIts: 1,
-    collapse: false,
-    threedim: false,
     particles: 2,
-    linkOpacity: 1,
+    linkOpacity: 0.4,
     linkWidth: 1,
     particleWidth: 4,
     nodeRel: 4,
@@ -58,7 +57,6 @@ export const GraphScreen = observer(function GraphScreen() {
     colorful: true,
     galaxy: true,
     rootId: 0,
-      local: false,
   }
 
   const getData = async () => {
@@ -167,17 +165,43 @@ export const GraphScreen = observer(function GraphScreen() {
         //setGraphData(rando);
       })
   }, [])
+
+  const [threeDim, setThreeDim] = useState(false);
+    const [local, setLocal] = useState(false);
+
   if (!graphData) {
     return null
   } else {
     return (
       <Screen style={ROOT} preset="fixed">
-        <View style={{flex:1, flexDirection: "row", height: "100%", width: "100%",position: "absolute", zIndex:150}}>
+        <View style={{display: "flex", flexDirection: "row", height: "100%", width: "100%",position: "absolute", zIndex:150}}>
         <Tweaks physics={physics} setPhysics={setPhysics} />
-        <LocalButton style={{marginLeft: "auto", marginRight:"3%", marginTop: "3%", zIndex: 5, position: "relative"}}  physics={physics} setPhysics={setPhysics} />
+        <View style={{marginLeft: "auto", marginRight:"2%", marginTop: "2%", zIndex: 5, position: "relative", height: "15%" }}>
+        <LocalButton  local={local} setLocal={setLocal} />
+        <View style={{display: "flex", flexDirection: "row", alignItems: "center",justifyContent: "center", paddingTop: "2%"}}>
+        <Text preset="header" text="3D" style={{marginLeft: 10}} />
+                    <Switch
+            color="#a991f1"
+            trackColor={{
+                false: "#62686E",
+                true: "#a991f1"
+            }}
+            style={{
+    height: 25,
+                        marginVertical: 10,
+            marginLeft: 20}}
+            value={threeDim}
+            onValueChange={() => {
+              setThreeDim(!threeDim)
+            }}
+          />
+        </View>
+        </View>
         <Graph
         style={{position: "absolute"}}
-            setPhysics={setPhysics} physics={physics} gData={graphData} nodeIds={nodeIds} />
+            setPhysics={setPhysics} physics={physics} gData={graphData} nodeIds={nodeIds}
+        threeDim={threeDim} setThreeDim={setThreeDim}
+        local={local} setLocal={setLocal}/>
         </View>
       </Screen>
     )