summaryrefslogtreecommitdiff
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/components/graph/graph.tsx107
-rw-r--r--app/screens/graph/graph-screen.tsx106
2 files changed, 118 insertions, 95 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 7e0b77e..14de37a 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -121,48 +121,49 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
*
* return rando;
* }, []);
-* const [highlightNodes, setHighlightNodes] = useState(new Set());
-* const [highlightLinks, setHighlightLinks] = useState(new Set());
-* const [hoverNode, setHoverNode] = useState(null);
-*
-* const updateHighlight = () => {
-* setHighlightNodes(highlightNodes);
-* setHighlightLinks(highlightLinks);
-* };
-*
-* const handleNodeHover = node => {
-* 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();
-*
-* if (link) {
-* highlightLinks.add(link);
-* highlightNodes.add(link.source);
-* highlightNodes.add(link.target);
-* }
-*
-* updateHighlight();
-* };
-*
-* 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]);
+ */
+ const [highlightNodes, setHighlightNodes] = useState(new Set());
+ const [highlightLinks, setHighlightLinks] = useState(new Set());
+ const [hoverNode, setHoverNode] = useState(null);
+
+ const updateHighlight = () => {
+ setHighlightNodes(highlightNodes);
+ setHighlightLinks(highlightLinks);
+ };
+
+ const handleNodeHover = node => {
+ 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();
+
+ if (link) {
+ highlightLinks.add(link);
+ highlightNodes.add(link.source);
+ highlightNodes.add(link.target);
+ }
+
+ updateHighlight();
+ };
+
+ /* 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]);
*/
/* autoPauseRedraw={false}
@@ -183,6 +184,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
{!physics.threedim ? (
<ForceGraph2D
ref={fgRef}
+ autoPauseRedraw={false}
graphData={gData}
//graphData={physics.collapse ? prunedTree : gData}
nodeAutoColorBy="id"
@@ -194,12 +196,14 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
nodeLabel={(node) => node.title}
//nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
//d3VelocityDecay={visco}
- linkWidth={physics.linkWidth}
+ linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
linkOpacity={physics.linkOpacity}
nodeRelSize={physics.nodeRel}
+ nodeVal={node => highlightNodes.has(node) ? 10 : 5}
linkDirectionalParticleWidth={physics.particleWidth}
- nodeCanvasObject={(node, ctx, globalScale) => {
- if(physics.labels){
+ nodeCanvasObject={
+ (node, ctx, globalScale) => {
+ if(physics.labels) {
if(globalScale > physics.labelScale ) {
const label = node.title.substring(0, Math.min(node.title.length, 30));
const fontSize = 12/globalScale;
@@ -216,15 +220,12 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
ctx.fillText(label, node.x, node.y);
node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
- }
- }
- }}
- nodePointerAreaPaint={(node, color, ctx) => {
- ctx.fillStyle = color;
- const bckgDimensions = node.__bckgDimensions;
- bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+ };
+ };
}}
- nodeCanvasObjectMode={()=>'after'}
+ nodeCanvasObjectMode={()=> 'after'}
+ onNodeHover={handleNodeHover}
+ onLinkHover={handleLinkHover}
/>
) : (
<ForceGraph3D
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
index 6fa7539..6a01927 100644
--- a/app/screens/graph/graph-screen.tsx
+++ b/app/screens/graph/graph-screen.tsx
@@ -94,50 +94,72 @@ 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, i) => {
- for (i=0; i<=nodeIds.length; i++){
- if (link.target === nodeIds[i]) {
+ data.links.forEach((link) => {
+ 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 = []);
+ 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];
cleanLinks.push(link);
- break;
- };
+ } 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];
+ };
};
+ if (target && source) {
+ console.log(link);
+ console.log("target" + target);
+ console.log("source" + source);
+ data.nodes[target[1]].neighbors.push(source[0]);
+ data.nodes[source[1]].neighbors.push(target[0]);
+ }
});
- console.log(cleanLinks);
- data.links = cleanLinks;
- return data;
- };
+ console.log(cleanLinks);
+ data.links = cleanLinks;
+ return data;
+ };
- const getNodesById = (data) => {
- let temp = [];
- data.nodes.forEach(node => temp.push(node.id));
- setNodeIds(temp);
- return temp;
- };
+ const getNodesById = (data) => {
+ let temp = [];
+ data.nodes.forEach(node => temp.push(node.id));
+ setNodeIds(temp);
+ return temp;
+ };
- useEffect(() => {
- 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);
- console.log(cleanData)
- setGraphData(cleanData);
- })
- .catch((e) => {
- console.log(e);
- console.log("Couldn't get data.");
- //setGraphData(rando);
- });
- }, [])
- if (!graphData) { return null }
- else {
- return (
- <Screen style={ROOT} preset="scroll">
- <Tweaks physics={physics} setPhysics={setPhysics} />
- <Graph physics={physics} gData={graphData} nodeIds={nodeIds}/>
- </Screen>
- )
- }
- })
+ useEffect(() => {
+ 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);
+ console.log(cleanData)
+ setGraphData(cleanData);
+ })
+ .catch((e) => {
+ console.log(e);
+ console.log("Couldn't get data.");
+ //setGraphData(rando);
+ });
+ }, [])
+ if (!graphData) { return null }
+ else {
+ return (
+ <Screen style={ROOT} preset="scroll">
+ <Tweaks physics={physics} setPhysics={setPhysics} />
+ <Graph physics={physics} gData={graphData} nodeIds={nodeIds} />
+ </Screen>
+ )
+ }
+})
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-24 03:01:06 +0000