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