summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/components/graph/graph.tsx427
-rw-r--r--app/components/tweaks/tweaks.tsx4
-rw-r--r--app/screens/graph/graph-screen.tsx123
3 files changed, 312 insertions, 242 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 1f4f4b2..e064b38 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -12,7 +12,7 @@ import { flatten } from "ramda"
import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph"
import * as d3 from "d3-force-3d"
-import * as three from "three";
+import * as three from "three"
import SpriteText from "three-spritetext"
const CONTAINER: ViewStyle = {
@@ -55,24 +55,24 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
const fg = fgRef.current
//fg.d3Force('center').strength(0.05);
if (physics.gravityOn) {
- fg.d3Force("x", d3.forceX().strength(physics.gravity));
- fg.d3Force("y", d3.forceY().strength(physics.gravity));
+ fg.d3Force("x", d3.forceX().strength(physics.gravity))
+ fg.d3Force("y", d3.forceY().strength(physics.gravity))
if (physics.threedim) {
if (physics.galaxy) {
- fg.d3Force("y", d3.forceY().strength(physics.gravity / 5));
- fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5));
+ fg.d3Force("y", d3.forceY().strength(physics.gravity / 5))
+ fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5))
} else {
- fg.d3Force("y", d3.forceY().strength(physics.gravity));
- fg.d3Force("z", d3.forceZ().strength(physics.gravity));
+ fg.d3Force("y", d3.forceY().strength(physics.gravity))
+ fg.d3Force("z", d3.forceZ().strength(physics.gravity))
}
} else {
- fg.d3Force("z", null);
- };
+ fg.d3Force("z", null)
+ }
} else {
- fg.d3Force("x", null);
- fg.d3Force("y", null);
- physics.threedim ? fg.d3Force("z", null) : null;
- };
+ fg.d3Force("x", null)
+ fg.d3Force("y", null)
+ physics.threedim ? fg.d3Force("z", null) : null
+ }
fg.d3Force("link").strength(physics.linkStrength)
fg.d3Force("link").iterations(physics.linkIts)
physics.collision
@@ -83,103 +83,103 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
// For the expandable version of the graph
-
-
const nodesById = useMemo(() => {
-
const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node]))
- console.log(nodesById);
+ console.log(nodesById)
// link parent/children
gData.nodes.forEach((node) => {
- (((typeof physics.rootId) === "number") ? node.collapsed = node.index !== physics.rootId
- : node.collapsed = node.id !== physics.rootId)
+ typeof physics.rootId === "number"
+ ? (node.collapsed = node.index !== physics.rootId)
+ : (node.collapsed = node.id !== physics.rootId)
node.childLinks = []
})
- gData.links.forEach((link) => nodesById[link.sourceIndex].childLinks.push(link));
- return nodesById;
- }, [gData]);
- const getPrunedTree = useCallback(() => {
- const visibleNodes = [];
- const visibleLinks = [];
- (function traverseTree(node = nodesById[physics.rootId]) {
- visibleNodes.push(node);
- if (node.collapsed) return
- visibleLinks.push(...node.childLinks)
- node.childLinks
- .map(link => ((typeof link.targetIndex) === "object") ? link.targetIndex : nodesById[link.targetIndex]) // get child node
- .forEach(traverseTree);
- })();
-
- return { nodes: visibleNodes, links: visibleLinks }
- }, [nodesById])
-
- const [prunedTree, setPrunedTree] = useState(getPrunedTree())
-
- const handleNodeClick = useCallback((node) => {
- node.collapsed = !node.collapsed // toggle collapse state
- setPrunedTree(getPrunedTree())
- }, []);
+ gData.links.forEach((link) => nodesById[link.sourceIndex].childLinks.push(link))
+ return nodesById
+ }, [gData])
+ const getPrunedTree = useCallback(() => {
+ const visibleNodes = []
+ const visibleLinks = []
+ ;(function traverseTree(node = nodesById[physics.rootId]) {
+ visibleNodes.push(node)
+ if (node.collapsed) return
+ visibleLinks.push(...node.childLinks)
+ node.childLinks
+ .map((link) =>
+ typeof link.targetIndex === "object" ? link.targetIndex : nodesById[link.targetIndex],
+ ) // get child node
+ .forEach(traverseTree)
+ })()
+
+ return { nodes: visibleNodes, links: visibleLinks }
+ }, [nodesById])
+
+ const [prunedTree, setPrunedTree] = useState(getPrunedTree())
+
+ const handleNodeClick = useCallback((node) => {
+ node.collapsed = !node.collapsed // toggle collapse state
+ setPrunedTree(getPrunedTree())
+ }, [])
//highlighting
- const [highlightNodes, setHighlightNodes] = useState(new Set());
- const [highlightLinks, setHighlightLinks] = useState(new Set());
- const [hoverNode, setHoverNode] = useState(null);
+ const [highlightNodes, setHighlightNodes] = useState(new Set())
+ const [highlightLinks, setHighlightLinks] = useState(new Set())
+ const [hoverNode, setHoverNode] = useState(null)
const updateHighlight = () => {
- setHighlightNodes(highlightNodes);
- setHighlightLinks(highlightLinks);
- };
-
- const handleBackgroundClick = (event) => {
- highlightNodes.clear();
- highlightLinks.clear();
+ setHighlightNodes(highlightNodes)
+ setHighlightLinks(highlightLinks)
+ }
- setSelectedNode(null);
- updateHighlight();
- }
+ const handleBackgroundClick = (event) => {
+ highlightNodes.clear()
+ highlightLinks.clear()
- const handleNodeHover = node => {
- console.log("hover");
- if(!selectedNode){
- highlightNodes.clear();
- highlightLinks.clear();
- if (node) {
- highlightNodes.add(node);
- node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
- node.links.forEach(link => highlightLinks.add(link));
- }
+ setSelectedNode(null)
+ updateHighlight()
+ }
- setHoverNode(node || null);
- updateHighlight();
+ const handleNodeHover = (node) => {
+ console.log("hover")
+ if (!selectedNode) {
+ highlightNodes.clear()
+ highlightLinks.clear()
+ if (node) {
+ highlightNodes.add(node)
+ node.neighbors.forEach((neighbor) => highlightNodes.add(neighbor))
+ node.links.forEach((link) => highlightLinks.add(link))
+ }
+
+ setHoverNode(node || null)
+ updateHighlight()
}
- };
+ }
- const handleLinkHover = link => {
- highlightNodes.clear();
- highlightLinks.clear();
+ const handleLinkHover = (link) => {
+ highlightNodes.clear()
+ highlightLinks.clear()
if (link) {
- highlightLinks.add(link);
- highlightNodes.add(link.source);
- highlightNodes.add(link.target);
+ highlightLinks.add(link)
+ highlightNodes.add(link.source)
+ highlightNodes.add(link.target)
}
- updateHighlight();
- };
+ updateHighlight()
+ }
- // 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(()=>{
- fgRef.current.d3ReheatSimulation();
- }, [physics]);
+ // 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(() => {
+ fgRef.current.d3ReheatSimulation()
+ }, [physics])
/* const paintRing = useCallback((node, ctx) => {
-* // add ring just for highlighted nodes
-* ctx.beginPath();
-* ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false);
-* ctx.fillStyle = node === hoverNode ? 'red' : 'orange';
-* ctx.fill();
-* }, [hoverNode]);
-*/
+ * // add ring just for highlighted nodes
+ * ctx.beginPath();
+ * ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false);
+ * ctx.fillStyle = node === hoverNode ? 'red' : 'orange';
+ * ctx.fill();
+ * }, [hoverNode]);
+ */
/* autoPauseRedraw={false}
linkWidth={link => highlightLinks.has(link) ? 5 : 1}
@@ -195,26 +195,58 @@ onLinkHover={handleLinkHover}
// !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
//}
- const [selectedNode, setSelectedNode] = useState({});
+ const [selectedNode, setSelectedNode] = useState({})
+
+ //shitty handler to check for doubleClicks
+ const [doubleClick, setDoubleClick] = useState(0)
+ const [localGraphData, setLocalGraphData] = useState({ nodes: [], links: [] })
+
+ const updateLocalGraph = (node) => {
+ console.log(localGraphData)
+ localGraphData.nodes.length ? setLocalGraphData({ nodes: [], links: [] }) : null
+ let g = localGraphData
+ console.log(g.nodes)
+ g.nodes.length ? null : g.nodes.push(node) //only add the clicked node if its the first
+ node.neighbors.forEach((neighbor) => {
+ if (neighbor !== node) {
+ const newNode: boolean = g.nodes.every((existingNode) => {
+ if (existingNode === neighbor) {
+ return false
+ } else {
+ return true
+ }
+ })
+ newNode && g.nodes.push(neighbor)
+ }
+ })
+ node.links.forEach((neighborLink) => {
+ const newLink: boolean = g.links.every((existingLink) => {
+ if (existingLink === neighborLink) {
+ return false
+ } else {
+ return true
+ }
+ })
+ newLink && g.links.push(neighborLink)
+ })
+ setLocalGraphData(g)
+ }
- //shitty handler to check for doubleClicks
- const [doubleClick, setDoubleClick] = useState(0)
const selectClick = (node, event) => {
- highlightNodes.clear();
- highlightLinks.clear();
- if(event.timeStamp - doubleClick < 400){
-
+ highlightNodes.clear()
+ highlightLinks.clear()
+ console.log(localGraphData)
+ if (event.timeStamp - doubleClick < 400) {
+ updateLocalGraph(node)
}
-
if (node) {
- highlightNodes.add(node);
- node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
- node.links.forEach(link => highlightLinks.add(link));
+ highlightNodes.add(node)
+ node.neighbors.forEach((neighbor) => highlightNodes.add(neighbor))
+ node.links.forEach((link) => highlightLinks.add(link))
}
-
- setSelectedNode(node || null);
- updateHighlight();
- setDoubleClick(event.timeStamp);
+ setSelectedNode(node || null)
+ updateHighlight()
+ setDoubleClick(event.timeStamp)
}
return (
@@ -224,32 +256,35 @@ onLinkHover={handleLinkHover}
ref={fgRef}
autoPauseRedraw={false}
//graphData={gData}
- graphData={physics.collapse ? prunedTree : gData}
+ graphData={
+ localGraphData.nodes.length ? localGraphData : physics.collapse ? prunedTree : gData
+ }
nodeAutoColorBy={physics.colorful ? "id" : undefined}
nodeColor={
- !physics.colorful ? (
- (node) => {
- if (highlightNodes.size === 0) {
- return "rgb(100, 100, 100, 1)"
- } else {
- return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+ !physics.colorful
+ ? (node) => {
+ if (highlightNodes.size === 0) {
+ return "rgb(100, 100, 100, 1)"
+ } else {
+ return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+ }
+ // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
}
- // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
- }) : undefined
+ : undefined
}
linkAutoColorBy={physics.colorful ? "target" : undefined}
//linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
linkColor={
- !physics.colorful ? (
- (link) => {
- if (highlightLinks.size === 0) {
- return "rgb(50, 50, 50, 0.8)"
- } else {
- return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+ !physics.colorful
+ ? (link) => {
+ if (highlightLinks.size === 0) {
+ return "rgb(50, 50, 50, 0.8)"
+ } else {
+ return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+ }
+ // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
}
- // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
- }
- ) : undefined
+ : undefined
//highlightLinks.has(link) ? "purple" : "grey"
// !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
}
@@ -258,43 +293,65 @@ onLinkHover={handleLinkHover}
nodeLabel={(node) => node.title}
//nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
//d3VelocityDecay={visco}
- linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
+ linkWidth={(link) =>
+ highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth
+ }
linkOpacity={physics.linkOpacity}
nodeRelSize={physics.nodeRel}
- nodeVal={node => highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3}
+ nodeVal={(node) =>
+ highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3
+ }
linkDirectionalParticleWidth={physics.particleWidth}
- nodeCanvasObject={
- (node, ctx, globalScale) => {
- if (physics.labels) {
- if (globalScale > physics.labelScale || highlightNodes.has(node)) {
- const label = node.title.substring(0, Math.min(node.title.length, 30));
- const fontSize = 12 / globalScale;
- ctx.font = `${fontSize}px Sans-Serif`;
- const textWidth = ctx.measureText(label).width;
- const bckgDimensions = [textWidth * 1.1, fontSize].map(n => n + fontSize * 0.5); // some padding
- const fadeFactor = Math.min(3 * (globalScale - physics.labelScale) / physics.labelScale, 1);
-
- ctx.fillStyle = 'rgba(20, 20, 20, ' +
- (highlightNodes.size === 0 ? .5 * fadeFactor : (highlightNodes.has(node) ? 0.5 : 0.15 * fadeFactor)) + ')';
- ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
-
- ctx.textAlign = 'center';
- ctx.textBaseline = 'middle';
- ctx.fillStyle = 'rgb(255, 255, 255, ' +
- (highlightNodes.size === 0 ? fadeFactor : (highlightNodes.has(node) ? 1 : 0.3 * fadeFactor)) + ')';
- ctx.fillText(label, node.x, node.y);
-
- node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
- };
- };
- }}
- nodeCanvasObjectMode={() => 'after'}
+ nodeCanvasObject={(node, ctx, globalScale) => {
+ if (physics.labels) {
+ if (globalScale > physics.labelScale || highlightNodes.has(node)) {
+ const label = node.title.substring(0, Math.min(node.title.length, 30))
+ const fontSize = 12 / globalScale
+ ctx.font = `${fontSize}px Sans-Serif`
+ const textWidth = ctx.measureText(label).width
+ const bckgDimensions = [textWidth * 1.1, fontSize].map((n) => n + fontSize * 0.5) // some padding
+ const fadeFactor = Math.min(
+ (3 * (globalScale - physics.labelScale)) / physics.labelScale,
+ 1,
+ )
+
+ ctx.fillStyle =
+ "rgba(20, 20, 20, " +
+ (highlightNodes.size === 0
+ ? 0.5 * fadeFactor
+ : highlightNodes.has(node)
+ ? 0.5
+ : 0.15 * fadeFactor) +
+ ")"
+ ctx.fillRect(
+ node.x - bckgDimensions[0] / 2,
+ node.y - bckgDimensions[1] / 2,
+ ...bckgDimensions,
+ )
+
+ ctx.textAlign = "center"
+ ctx.textBaseline = "middle"
+ ctx.fillStyle =
+ "rgb(255, 255, 255, " +
+ (highlightNodes.size === 0
+ ? fadeFactor
+ : highlightNodes.has(node)
+ ? 1
+ : 0.3 * fadeFactor) +
+ ")"
+ ctx.fillText(label, node.x, node.y)
+
+ node.__bckgDimensions = bckgDimensions // to re-use in nodePointerAreaPaint
+ }
+ }
+ }}
+ nodeCanvasObjectMode={() => "after"}
onNodeHover={physics.hover ? handleNodeHover : null}
//onLinkHover={physics.hover ? handleLinkHover : null}
d3AlphaDecay={physics.alphaDecay}
d3AlphaMin={physics.alphaTarget}
d3VelocityDecay={physics.velocityDecay}
- onBackgroundClick={handleBackgroundClick}
+ onBackgroundClick={handleBackgroundClick}
/>
) : (
<ForceGraph3D
@@ -304,29 +361,30 @@ onLinkHover={handleLinkHover}
//graphData={physics.collapse ? prunedTree : gData}
nodeAutoColorBy={physics.colorful ? "id" : undefined}
nodeColor={
- !physics.colorful ? (
- (node) => {
- if (highlightNodes.size === 0) {
- return "rgb(100, 100, 100, 1)"
- } else {
- return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+ !physics.colorful
+ ? (node) => {
+ if (highlightNodes.size === 0) {
+ return "rgb(100, 100, 100, 1)"
+ } else {
+ return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+ }
+ // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
}
- // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
- }) : undefined
+ : undefined
}
linkAutoColorBy={physics.colorful ? "target" : undefined}
//linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
linkColor={
- !physics.colorful ? (
- (link) => {
- if (highlightLinks.size === 0) {
- return "rgb(50, 50, 50, 0.8)"
- } else {
- return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+ !physics.colorful
+ ? (link) => {
+ if (highlightLinks.size === 0) {
+ return "rgb(50, 50, 50, 0.8)"
+ } else {
+ return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+ }
+ // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
}
- // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
- }
- ) : undefined
+ : undefined
//highlightLinks.has(link) ? "purple" : "grey"
// !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
}
@@ -335,10 +393,14 @@ onLinkHover={handleLinkHover}
nodeLabel={(node) => node.title}
//nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
//d3VelocityDecay={visco}
- linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
+ linkWidth={(link) =>
+ highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth
+ }
linkOpacity={physics.linkOpacity}
nodeRelSize={physics.nodeRel}
- nodeVal={node => highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3}
+ nodeVal={(node) =>
+ highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3
+ }
linkDirectionalParticleWidth={physics.particleWidth}
onNodeHover={physics.hover ? handleNodeHover : null}
//onLinkHover={physics.hover ? handleLinkHover : null}
@@ -346,21 +408,24 @@ onLinkHover={handleLinkHover}
d3AlphaMin={physics.alphaTarget}
d3VelocityDecay={physics.velocityDecay}
nodeThreeObject={
- !physics.labels ? undefined
- : ((node) => {
+ !physics.labels
+ ? undefined
+ : (node) => {
if (highlightNodes.has(node)) {
- console.log(node.title)
- const sprite = new SpriteText(node.title.substring(0, 30));
- console.log("didnt crash here 2")
- sprite.color = "#ffffff";
- sprite.textHeight = 8;
- return sprite;
- } else { return undefined };
- })
+ console.log(node.title)
+ const sprite = new SpriteText(node.title.substring(0, 30))
+ console.log("didnt crash here 2")
+ sprite.color = "#ffffff"
+ sprite.textHeight = 8
+ return sprite
+ } else {
+ return undefined
+ }
+ }
}
nodeThreeObjectExtend={true}
/>
)}
</View>
- );
+ )
})
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index 49754d0..e52e587 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -193,6 +193,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
value={physics.threedim}
onValueChange={() => { setPhysics({ ...physics, threedim: !physics.threedim }) }}
/>
+ <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
+ value={physics.local}
+ onValueChange={() => { setPhysics({ ...physics, local: !physics.local }) }}
+ />
</View>
},
];
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
index b4ec1d9..f06afc9 100644
--- a/app/screens/graph/graph-screen.tsx
+++ b/app/screens/graph/graph-screen.tsx
@@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react"
import { observer } from "mobx-react-lite"
-import { ViewStyle } from "react-native"
+import { TouchableOpacity, ViewStyle } from "react-native"
import { Screen, Text } from "../../components"
// import { useNavigation } from "@react-navigation/native"
// import { useStores } from "../../models"
@@ -13,7 +13,7 @@ import genRandomTree from "../../data/randomdata"
import AsyncStorage from "@react-native-async-storage/async-storage"
-import axios from "axios";
+import axios from "axios"
import rando from "../../data/rando.json"
@@ -29,15 +29,14 @@ export const GraphScreen = observer(function GraphScreen() {
// Pull in navigation via hook
// const navigation = useNavigation()
-
const [physics, setPhysics] = useState({})
- const [graphData, setGraphData] = useState();
- const [nodeIds, setNodeIds] = useState([]);
+ const [graphData, setGraphData] = useState()
+ const [nodeIds, setNodeIds] = useState([])
// { "nodes": [{ "id": 1 }, { "id": 2 }], "links": [{ "target": 1, "source": 2 }] });
const physicsInit = {
charge: -350,
collision: true,
- linkStrength: .1,
+ linkStrength: 0.1,
linkIts: 1,
collapse: false,
threedim: false,
@@ -57,17 +56,20 @@ export const GraphScreen = observer(function GraphScreen() {
colorful: true,
galaxy: true,
rootId: 0,
+ local: false,
}
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);
+ const valueJson = JSON.parse(value)
console.log(Object.keys(valueJson).length + " is not " + Object.keys(physicsInit).length)
if (Object.keys(valueJson).length === Object.keys(physicsInit).length) {
- return valueJson;
- } else { return physicsInit };
+ return valueJson
+ } else {
+ return physicsInit
+ }
} else {
return physicsInit
}
@@ -78,7 +80,7 @@ export const GraphScreen = observer(function GraphScreen() {
const storeData = async (value) => {
try {
let jsonVal = JSON.stringify(value)
- console.log(jsonVal + " " + value);
+ console.log(jsonVal + " " + value)
await AsyncStorage.setItem("@physics", jsonVal)
} catch (e) {
console.log(e)
@@ -96,81 +98,80 @@ export const GraphScreen = observer(function GraphScreen() {
storeData(physics)
}, 1000)
return () => clearTimeout(timer)
- }, [physics]);
+ }, [physics])
//"ComponentOnMount"
// Get previous settings and the data from the org-roam-server
const sanitizeGraph = (data, nodeIds: string[]) => {
- const cleanLinks = [];
+ const cleanLinks = []
data.links.forEach((link, j) => {
- let target;
- let source;
+ let target
+ let source
for (let i = 0; i < nodeIds.length; i++) {
- let a = data.nodes[i];
- !a.neighbors && (a.neighbors = []);
- !a.links && (a.links = []);
+ let a = data.nodes[i]
+ !a.neighbors && (a.neighbors = [])
+ !a.links && (a.links = [])
+ // the first time around,
+ // index the node as not a part of the local graph
+ !j && (a.local=false);
if (link.target === nodeIds[i]) {
- //let a = data.nodes[i];
- //!a.neighbors && (a.neighbors = []);
- //a.neighbors.push(a);
- a.links.push(link);
- target = [a, i];
- link.target===link.source ? null : cleanLinks.push(link);
+ a.links.push(link)
+ target = [a, i]
+ link.target === link.source ? null : cleanLinks.push(link)
} else if (link.source === nodeIds[i]) {
- //let a = data.nodes[i];
- //!a.neighbors && (a.neighbors = []);
- //a.neighbors.push(a);
- a.links.push(link);
- source = [a, i];
- };
- };
+ a.links.push(link)
+ source = [a, i]
+ }
+ }
if (target && source) {
- data.nodes[target[1]].neighbors.push(source[0]);
- data.nodes[source[1]].neighbors.push(target[0]);
- link.sourceIndex=source[1];
- link.targetIndex=target[1];
+ data.nodes[target[1]].neighbors.push(source[0])
+ data.nodes[source[1]].neighbors.push(target[0])
+ link.sourceIndex = source[1]
+ link.targetIndex = target[1]
+ link.index = [j]
+ link.local = false;
}
- });
- console.log(cleanLinks);
+ })
data.links = cleanLinks;
return data;
- };
+ }
const getNodesById = (data) => {
- let temp = [];
- data.nodes.forEach((node, i) => {
- temp.push(node.id);
- node.index=i;
- }
- );
- setNodeIds(temp);
-
- return temp;
- };
+ let temp = []
+ data.nodes.forEach((node, i) => {
+ temp.push(node.id)
+ node.index = i
+ })
+ setNodeIds(temp)
+
+ return temp
+ }
useEffect(() => {
- getData().then((data) => setPhysics(data));
- axios.get("http://localhost:35901/graph")
+ getData().then((data) => setPhysics(data))
+ axios
+ .get("http://localhost:35901/graph")
.then((dataa) => {
- let nods = getNodesById(dataa.data);
- setNodeIds(nods);
- console.log(nodeIds);
- let cleanData = sanitizeGraph(dataa.data, nods);
+ let nods = getNodesById(dataa.data)
+ setNodeIds(nods)
+ console.log(nodeIds)
+ let cleanData = sanitizeGraph(dataa.data, nods)
console.log(cleanData)
- setGraphData(cleanData);
+ setGraphData(cleanData)
})
.catch((e) => {
- console.log(e);
- console.log("Couldn't get data.");
+ console.log(e)
+ console.log("Couldn't get data.")
//setGraphData(rando);
- });
+ })
}, [])
- if (!graphData) { return null }
- else {
+ if (!graphData) {
+ return null
+ } else {
return (
<Screen style={ROOT} preset="scroll">
<Tweaks physics={physics} setPhysics={setPhysics} />
- <Graph physics={physics} gData={graphData} nodeIds={nodeIds} />
+ <Graph setPhysics={setPhysics} physics={physics} gData={graphData} nodeIds={nodeIds} />
</Screen>
)
}
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-24 17:13:01 +0000