summaryrefslogtreecommitdiff
path: root/app/screens/graph
diff options
context:
space:
mode:
Diffstat (limited to 'app/screens/graph')
-rw-r--r--app/screens/graph/graph-screen.tsx200
1 files changed, 117 insertions, 83 deletions
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
index a97fe68..8c35590 100644
--- a/app/screens/graph/graph-screen.tsx
+++ b/app/screens/graph/graph-screen.tsx
@@ -1,31 +1,30 @@
-import React, { useEffect, useState } from "react"
-import { observer } from "mobx-react-lite"
-import { TouchableOpacity, View, ViewStyle } from "react-native"
-import { Screen, Text } from "../../components"
+import React, { useEffect, useState } from 'react'
+import { observer } from 'mobx-react-lite'
+import { TouchableOpacity, View, ViewStyle } from 'react-native'
+import { Screen, Text } from '../../components'
// import { useNavigation } from "@react-navigation/native"
// import { useStores } from "../../models"
-import { color } from "../../theme"
+import { color } from '../../theme'
-import { Graph } from "../../components"
-import { Tweaks } from "../../components"
+import { Graph } from '../../components'
+import { Tweaks } from '../../components'
-import genRandomTree from "../../data/randomdata"
+import genRandomTree from '../../data/randomdata'
-import AsyncStorage from "@react-native-async-storage/async-storage"
+import AsyncStorage from '@react-native-async-storage/async-storage'
-import axios from "axios"
-
-import rando from "../../data/rando.json"
+import axios from 'axios'
+import rando from '../../data/rando.json'
const ROOT: ViewStyle = {
backgroundColor: color.palette.black,
flex: 1,
}
-import { LocalButton } from "../../components/"
-import { GraphUi } from "../../components/graph-ui/graph-ui"
-import { Switch } from "react-native-elements"
+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()
@@ -62,11 +61,11 @@ export const GraphScreen = observer(function GraphScreen() {
const getData = async () => {
try {
- const value: string = await AsyncStorage.getItem("@physics")
+ const value: string = await AsyncStorage.getItem('@physics')
if (value !== null) {
const valueJson = JSON.parse(value)
if (Object.keys(valueJson).length === Object.keys(physicsInit).length) {
- valueJson.local=false;
+ valueJson.local = false
return valueJson
} else {
return physicsInit
@@ -81,8 +80,8 @@ export const GraphScreen = observer(function GraphScreen() {
const storeData = async (value) => {
try {
let jsonVal = JSON.stringify(value)
- console.log(jsonVal + " " + value)
- await AsyncStorage.setItem("@physics", jsonVal)
+ console.log(jsonVal + ' ' + value)
+ await AsyncStorage.setItem('@physics', jsonVal)
} catch (e) {
console.log(e)
}
@@ -114,7 +113,7 @@ export const GraphScreen = observer(function GraphScreen() {
!a.links && (a.links = [])
// the first time around,
// index the node as not a part of the local graph
- !j && (a.local=false);
+ !j && (a.local = false)
if (link.target === data.nodes[i].id) {
a.links.push(link)
target = [a, i]
@@ -130,51 +129,53 @@ export const GraphScreen = observer(function GraphScreen() {
link.sourceIndex = source[1]
link.targetIndex = target[1]
link.index = [j]
- link.local = false;
+ link.local = false
}
})
- data.links = cleanLinks;
- return data;
+ data.links = cleanLinks
+ return data
}
-
-const [theme, setTheme] = useState({
-base1: "#1c1f24",
-base2: "#21272d",
-base3: "#23272e",
-base4: "#484854",
-base5: "#62686E",
-base6: "#757B80",
-base7: "#9ca0a4",
-base8: "#DFDFDF",
-bg: "#242730",
-"bg-alt": "#2a2e38",
-blue: "#51afef",
-cyan: "#5cEfFF",
-"dark-blue": "#1f5582",
-"dark-cyan": "#6A8FBF",
-fg: "#bbc2cf",
-"fg-alt": "#5D656B",
-green: "#7bc275",
-grey: "#484854",
-magenta: "#C57BDB",
-orange: "#e69055",
-red: "#ff665c",
-teal: "#4db5bd",
-violet: "#a991f1",
-yellow: "#FCCE7B",
- });
+ const [theme, setTheme] = useState({
+ base1: '#1c1f24',
+ base2: '#21272d',
+ base3: '#23272e',
+ base4: '#484854',
+ base5: '#62686E',
+ base6: '#757B80',
+ base7: '#9ca0a4',
+ base8: '#DFDFDF',
+ bg: '#242730',
+ 'bg-alt': '#2a2e38',
+ blue: '#51afef',
+ cyan: '#5cEfFF',
+ 'dark-blue': '#1f5582',
+ 'dark-cyan': '#6A8FBF',
+ fg: '#bbc2cf',
+ 'fg-alt': '#5D656B',
+ green: '#7bc275',
+ grey: '#484854',
+ magenta: '#C57BDB',
+ orange: '#e69055',
+ red: '#ff665c',
+ teal: '#4db5bd',
+ violet: '#a991f1',
+ yellow: '#FCCE7B',
+ })
useEffect(() => {
getData().then((data) => setPhysics(data))
- axios.get("http://localhost:35901/theme")
- .then((theme)=>{setTheme(theme.data);
- console.log(theme.data)})
+ axios
+ .get('http://localhost:35901/theme')
+ .then((theme) => {
+ setTheme(theme.data)
+ console.log(theme.data)
+ })
.catch((e) => {
- console.log("No theme found")
+ console.log('No theme found')
})
axios
- .get("http://localhost:35901/graph")
+ .get('http://localhost:35901/graph')
.then((dataa) => {
let cleanData = sanitizeGraph(dataa.data)
console.log(cleanData)
@@ -185,45 +186,78 @@ yellow: "#FCCE7B",
console.log("Couldn't get data.")
//setGraphData(rando);
})
- }, []);
+ }, [])
- const [threeDim, setThreeDim] = useState(false);
- const [local, setLocal] = useState(false);
+ const [threeDim, setThreeDim] = useState(false)
+ const [local, setLocal] = useState(false)
if (!graphData) {
return null
} else {
return (
<Screen style={ROOT} preset="fixed">
- <View style={{display: "flex", flexDirection: "row", height: "100%", width: "100%",position: "absolute", zIndex:150}}>
- <Tweaks 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"
- }}
+ <View
+ style={{
+ display: 'flex',
+ flexDirection: 'row',
+ height: '100%',
+ width: '100%',
+ position: 'absolute',
+ zIndex: 150,
+ }}
+ >
+ <Tweaks physics={physics} setPhysics={setPhysics} />
+ <View
style={{
- height: 25,
- marginVertical: 10,
- marginLeft: 20}}
- value={threeDim}
- onValueChange={() => {
- setThreeDim(!threeDim)
+ 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}
+ threeDim={threeDim}
+ setThreeDim={setThreeDim}
+ local={local}
+ setLocal={setLocal}
/>
</View>
- </View>
- <Graph
- style={{position: "absolute"}}
- setPhysics={setPhysics} physics={physics} gData={graphData} nodeIds={nodeIds}
- threeDim={threeDim} setThreeDim={setThreeDim}
- local={local} setLocal={setLocal}/>
- </View>
</Screen>
)
}
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-24 18:28:48 +0000