diff options
Diffstat (limited to 'app')
-rw-r--r-- | app/components/graph/graph.tsx | 29 | ||||
-rw-r--r-- | app/components/tweaks/tweaks.tsx | 63 | ||||
-rw-r--r-- | app/screens/graph/graph-screen.tsx | 38 |
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> ) |