summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/components/graph/graph.tsx29
-rw-r--r--app/components/tweaks/tweaks.tsx63
-rw-r--r--app/screens/graph/graph-screen.tsx38
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>
)
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 23:46:06 +0000