seperate 3d and local from physics

2 files changed, 24 insertions, 68 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: {