diff options
Diffstat (limited to 'app')
-rw-r--r-- | app/components/graph/graph.tsx | 61 | ||||
-rw-r--r-- | app/components/tweaks/tweaks.tsx | 7 | ||||
-rw-r--r-- | app/screens/graph/graph-screen.tsx | 16 |
3 files changed, 50 insertions, 34 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index ff41ea9..7db642e 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -82,44 +82,45 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { }) // For the expandable version of the graph - const rootId = 0 + + const nodesById = useMemo(() => { - const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.id, node])) + const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node])) + console.log(nodesById); // link parent/children gData.nodes.forEach((node) => { - node.collapsed = node.id !== rootId + (((typeof physics.rootId) === "number") ? node.collapsed = node.index !== physics.rootId + : node.collapsed = node.id !== physics.rootId) node.childLinks = [] - node.parentLink = [] }) - gData.links.forEach((link) => nodesById[link.source].childLinks.push(link)) + 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 nodesById - }, [gData]) + return { nodes: visibleNodes, links: visibleLinks } + }, [nodesById]) - /* const getPrunedTree = useCallback(() => { -* const visibleNodes = []; -* const visibleLinks = []; -* (function traverseTree(node = nodesById[rootId]) { -* visibleNodes.push(node); -* if (node.collapsed) return -* visibleLinks.push(...node.childLinks) -* node.childLinks -* .map((link) => (typeof link.target === "object" ? link.target : nodesById[link.target])) // get child node -* .forEach(traverseTree) -* })() + const [prunedTree, setPrunedTree] = useState(getPrunedTree()) -* return { nodes: visibleNodes, links: visibleLinks } -* }, [nodesById]) + const handleNodeClick = useCallback((node) => { + node.collapsed = !node.collapsed // toggle collapse state + setPrunedTree(getPrunedTree()) + }, []); -* 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); @@ -184,8 +185,8 @@ onLinkHover={handleLinkHover} <ForceGraph2D ref={fgRef} autoPauseRedraw={false} - graphData={gData} - //graphData={physics.collapse ? prunedTree : gData} + //graphData={gData} + graphData={physics.collapse ? prunedTree : gData} nodeAutoColorBy={physics.colorful ? "id" : undefined} nodeColor={ !physics.colorful ? ( @@ -215,7 +216,7 @@ onLinkHover={handleLinkHover} // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" } linkDirectionalParticles={physics.particles} - //onNodeClick={!physics.collapse ? null : handleNodeClick} + onNodeClick={!physics.collapse ? undefined : handleNodeClick} nodeLabel={(node) => node.title} //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1} //d3VelocityDecay={visco} diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx index d2b5bd1..49754d0 100644 --- a/app/components/tweaks/tweaks.tsx +++ b/app/components/tweaks/tweaks.tsx @@ -181,6 +181,13 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.collapse} onValueChange={() => { setPhysics({ ...physics, collapse: !physics.collapse }) }} /> + <Text preset="fieldLabel" text={"Change starting point: " + physics.rootId} /> + <Slider style={{ height: 40, width: "90%" }} + minimumValue={0} + maximumValue={600} + onValueChange={(value) => { setPhysics({ ...physics, rootId: value }) }} + value={physics.rootId} + step={1} /> <Text preset="fieldLabel" text="3D" /> <Switch style={{ width: "5", height: 20, marginVertical: 10 }} value={physics.threedim} diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx index ebca953..b4ec1d9 100644 --- a/app/screens/graph/graph-screen.tsx +++ b/app/screens/graph/graph-screen.tsx @@ -56,6 +56,7 @@ export const GraphScreen = observer(function GraphScreen() { hover: true, colorful: true, galaxy: true, + rootId: 0, } const getData = async () => { @@ -101,7 +102,7 @@ export const GraphScreen = observer(function GraphScreen() { // Get previous settings and the data from the org-roam-server const sanitizeGraph = (data, nodeIds: string[]) => { const cleanLinks = []; - data.links.forEach((link) => { + data.links.forEach((link, j) => { let target; let source; for (let i = 0; i < nodeIds.length; i++) { @@ -114,7 +115,7 @@ export const GraphScreen = observer(function GraphScreen() { //a.neighbors.push(a); a.links.push(link); target = [a, i]; - cleanLinks.push(link); + link.target===link.source ? null : cleanLinks.push(link); } else if (link.source === nodeIds[i]) { //let a = data.nodes[i]; //!a.neighbors && (a.neighbors = []); @@ -122,10 +123,12 @@ export const GraphScreen = observer(function GraphScreen() { 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]; } }); console.log(cleanLinks); @@ -135,8 +138,13 @@ export const GraphScreen = observer(function GraphScreen() { const getNodesById = (data) => { let temp = []; - data.nodes.forEach(node => temp.push(node.id)); + data.nodes.forEach((node, i) => { + temp.push(node.id); + node.index=i; + } + ); setNodeIds(temp); + return temp; }; |