From 6e3ba4f86bf3f25d27af66cfcd4f5739e767b208 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Thu, 15 Jul 2021 22:48:14 +0200 Subject: prevent data writing every update --- app/components/graph/graph.tsx | 9 +- app/components/tweaks/tweaks.tsx | 470 ++++++++++++++++++++----------------- app/screens/graph/graph-screen.tsx | 127 +++++----- 3 files changed, 323 insertions(+), 283 deletions(-) (limited to 'app') diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index 14e3b60..72b9eea 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -192,6 +192,10 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { nodeLabel={(node) => "label"} // nodeVal ={(node)=> node.childLinks.length * 0.5 + 1} //d3VelocityDecay={visco} + linkWidth={physics.linkWidth} + linkOpacity={physics.linkOpacity} + nodeRelSize={physics.nodeRel} + linkDirectionalParticleWidth={physics.particleWidth} /> ) : ( node.childLinks.length + 1} - linkOpacity={0.8} //d3VelocityDecay={visco} + linkWidth={physics.linkWidth} + linkOpacity={physics.linkOpacity} + nodeRelSize={physics.nodeRel} + linkDirectionalParticleWidth={physics.particleWidth} /> )} diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx index d275a5b..6c207e9 100644 --- a/app/components/tweaks/tweaks.tsx +++ b/app/components/tweaks/tweaks.tsx @@ -34,260 +34,290 @@ export interface TweaksProps { */ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element { const { style, physics, setPhysics } = props -// const styles = flatten([CONTAINER, style]) + // const styles = flatten([CONTAINER, style]) const content = [ { title: "Physics", content: - - - { setPhysics({...physics, charge: value}) }} - value={physics.charge} - step={1}/> - - { setPhysics({...physics, linkStrength: value}) }} - value={physics.linkStrength} - step={0.1} - /> - - { setPhysics({...physics, linkIts: value}) }} - value={physics.linkIts} - step={1}/> - - {setPhysics({...physics, collision: !physics.collision})}} - /> - , + + + { setPhysics({ ...physics, charge: value }) }} + value={physics.charge} + step={1} /> + + { setPhysics({ ...physics, linkStrength: value }) }} + value={physics.linkStrength} + step={0.1} + /> + + { setPhysics({ ...physics, linkIts: value }) }} + value={physics.linkIts} + step={1} /> + + { setPhysics({ ...physics, collision: !physics.collision }) }} + /> + , }, { title: 'Visual', content: - - - { setPhysics({...physics, particles: value}) }} - value={physics.particles} - step={1}/> - , + + + { setPhysics({ ...physics, linkOpacity: value }) }} + value={physics.linkOpacity} + step={.01} /> + + { setPhysics({ ...physics, linkWidth: value }) }} + value={physics.linkWidth} + step={0.1} /> + + { setPhysics({ ...physics, nodeRel: value }) }} + value={physics.nodeRel} + step={.01} /> + + { setPhysics({ ...physics, particles: value }) }} + value={physics.particles} + step={1} /> + + { setPhysics({ ...physics, particleWidth: value }) }} + value={physics.particleWidth} + step={.1} /> + , }, { title: 'Modes', content: - - - {setPhysics({...physics, collapse: !physics.collapse})}} - /> - - {setPhysics({...physics, threedim: !physics.threedim})}} - /> - + + + { setPhysics({ ...physics, collapse: !physics.collapse }) }} + /> + + { setPhysics({ ...physics, threedim: !physics.threedim }) }} + /> + }, ]; const [activeSections, setActiveSections] = useState([]); const setSections = (sections) => { - setActiveSections( - sections.includes(undefined) ? [] : sections - ); - }; + setActiveSections( + sections.includes(undefined) ? [] : sections + ); + }; - const renderHeader = (section, _, isActive) => { - return ( - - {section.title} - - ); - }; + const renderHeader = (section, _, isActive) => { + return ( + + {section.title} + + ); + }; - const renderContent = (section, _, isActive) => { - return ( - - {section.content} - - ); - } + const renderContent = (section, _, isActive) => { + return ( + + {section.content} + + ); + } const [tweaks, setTweaks] = useState(true); if (true) { - if(tweaks){ - return( - - - {setTweaks(false)}}> - - - - - + + { setTweaks(false) }}> + + + + + - - - ); + /> + + + ); } else { - return( + return ( {setTweaks(true)}} - style={{position: "absolute", top: 50, left: 50, width: 30, color: "#ffffff", zIndex: 100}}> - + onPress={() => { setTweaks(true) }} + style={{ position: "absolute", top: 50, left: 50, width: 30, color: "#ffffff", zIndex: 100 }}> + ) } } else { - return ( - - - - { setPhysics({...physics, charge: value}) }} - value={physics.charge} - step={1}/> - - { setPhysics({...physics, linkStrength: value}) }} - value={physics.linkStrength} - step={0.1} + return ( + + + + { setPhysics({ ...physics, charge: value }) }} + value={physics.charge} + step={1} /> + + { setPhysics({ ...physics, linkStrength: value }) }} + value={physics.linkStrength} + step={0.1} /> - - { setPhysics({...physics, linkIts: value}) }} - value={physics.linkIts} - step={1}/> - - {setPhysics({...physics, collision: !physics.collision})}} + + { setPhysics({ ...physics, linkIts: value }) }} + value={physics.linkIts} + step={1} /> + + { setPhysics({ ...physics, collision: !physics.collision }) }} /> - - - { setPhysics({...physics, particles: value}) }} - value={physics.particles} - step={1}/> - - - {setPhysics({...physics, collapse: !physics.collapse})}} + + + { setPhysics({ ...physics, particles: value }) }} + value={physics.particles} + step={1} /> + + + { setPhysics({ ...physics, collapse: !physics.collapse }) }} /> - - {setPhysics({...physics, threedim: !physics.threedim})}} + + { setPhysics({ ...physics, threedim: !physics.threedim }) }} /> - - );} + + ); + } }) -const styles = StyleSheet.create ({ - container: { - flex: 1, - backgroundColor: '#111111', - position: "absolute", - zIndex: 100, - left: 50, - top: 50, - width: 300, - borderRadius: 5, - borderStyle: "solid", - }, - title: { - textAlign: 'left', - fontSize: 22, - fontWeight: '300', - marginBottom: 20, - paddingLeft: 20, - }, - header: { - backgroundColor: '#111111', - padding: 10, - paddingBottom: 20, - textAlign: "left", - }, - headerText: { - textAlign: 'left', - paddingLeft: 30, - fontSize: 16, - fontWeight: '500', - }, - content: { - padding: 20, - backgroundColor: '#000000', - }, - active: { - backgroundColor: 'rgba(0,0,0,1)', - }, - inactive: { - backgroundColor: 'rgba(20,20,20,1)', - }, - selectors: { - marginBottom: 10, - flexDirection: 'row', - justifyContent: 'center', - }, - selector: { - backgroundColor: '#111111', - padding: 10, - }, - activeSelector: { - fontWeight: 'bold', - }, - selectTitle: { - fontSize: 14, - fontWeight: '500', - padding: 10, - }, - multipleToggle: { - flexDirection: 'row', - justifyContent: 'center', - marginVertical: 30, - alignItems: 'center', - }, - multipleToggle__title: { - fontSize: 16, - marginRight: 8, - }, +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#111111', + position: "absolute", + zIndex: 100, + left: 50, + top: 50, + width: 250, + borderRadius: 5, + borderStyle: "solid", + maxHeight: "70%", + }, + title: { + textAlign: 'left', + fontSize: 22, + fontWeight: '300', + marginBottom: 20, + paddingLeft: 20, + }, + header: { + backgroundColor: '#111111', + padding: 10, + paddingBottom: 20, + textAlign: "left", + }, + headerText: { + textAlign: 'left', + paddingLeft: 30, + fontSize: 16, + fontWeight: '500', + }, + content: { + padding: 20, + backgroundColor: '#000000', + }, + active: { + backgroundColor: 'rgba(0,0,0,1)', + }, + inactive: { + backgroundColor: 'rgba(20,20,20,1)', + }, + selectors: { + marginBottom: 10, + flexDirection: 'row', + justifyContent: 'center', + }, + selector: { + backgroundColor: '#111111', + padding: 10, + }, + activeSelector: { + fontWeight: 'bold', + }, + selectTitle: { + fontSize: 14, + fontWeight: '500', + padding: 10, + }, + multipleToggle: { + flexDirection: 'row', + justifyContent: 'center', + marginVertical: 30, + alignItems: 'center', + }, + multipleToggle__title: { + fontSize: 16, + marginRight: 8, + }, }); diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx index e6fbc19..da3734a 100644 --- a/app/screens/graph/graph-screen.tsx +++ b/app/screens/graph/graph-screen.tsx @@ -9,7 +9,7 @@ import { color } from "../../theme" 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" @@ -24,79 +24,82 @@ export const GraphScreen = observer(function GraphScreen() { // Pull in navigation via hook // const navigation = useNavigation() - const [charge, setCharge] = useState(-30); - const [collision, setCollision] = useState(false); - const [linkStrength, setLinkStrength] = useState(1); - const [linkIts, setLinkIts] = useState(1); - - const [physics, setPhysics] = useState({}); + const [charge, setCharge] = useState(-30) + const [collision, setCollision] = useState(false) + const [linkStrength, setLinkStrength] = useState(1) + const [linkIts, setLinkIts] = useState(1) + const [physics, setPhysics] = useState({}) + const physicsInit = { + charge: -30, + collision: false, + linkStrength: 1, + linkIts: 1, + collapse: false, + threedim: false, + particles: 2, + linkOpacity: 1, + linkWidth: 1, + particleWidth: 1, + nodeRel: 1, + } const getData = async () => { try { - const value = await AsyncStorage.getItem('@physics') - if (value !== null) { - return JSON.parse(value); + const value = await AsyncStorage.getItem("@physics") + if (value !== null || keys(value) === keys(physicsInit)) { + return JSON.parse(value) } else { - return ( - { - charge: -30, - collision: false, - linkStrength: 1, - linkIts: 1, - collapse: false, - threedim: false, - particles: 2, - }); + console.log(physicsInit) + return physicsInit } } catch (e) { - console.log(e); + console.log(e) } - }; + } - useEffect(() => { - getData() - .then(data => setPhysics(data)); - }, []); + useEffect(() => { + getData().then((data) => setPhysics(data)) + }, []) - const storeData = async (value) => { - try { - const jsonValue = JSON.stringify(value); - await AsyncStorage.setItem('@physics', jsonValue); - console.log("Writing " + jsonValue); - } catch(e) { - console.log(e); - } - } + const storeData = async (value) => { + try { + const jsonValue = JSON.stringify(value) + await AsyncStorage.setItem("@physics", jsonValue) + console.log("Writing " + jsonValue) + } catch (e) { + console.log(e) + } + } /* const [physics, setPhysics] = useState( -* { -* charge: -30, -* collision: false, -* linkStrength: 1, -* linkIts: 1, -* collapse: false, -* threedim: false, -* particles: 2, -* }); */ - useEffect(() => { - console.log("Physics changed"); - storeData(physics); - const test = getData(); - console.log(test); - }, [physics]); + * { + * charge: -30, + * collision: false, + * linkStrength: 1, + * linkIts: 1, + * collapse: false, + * threedim: false, + * particles: 2, + * }); */ + useEffect(() => { + if (timer) { + clearTimeout(timer) + console.log("clear timer") + } + const timer = setTimeout(() => { + console.log("Physics changed") + storeData(physics) + const test = getData() + console.log(test) + }, 1000) + return () => clearTimeout(timer) + }, [physics]) - const gData = genRandomTree(); + const gData = genRandomTree() return ( - - - + + - ); -}); + ) +}) -- cgit v1.2.3