From 56f215cde151ff554b061c99be419fa0896fcf0e Mon Sep 17 00:00:00 2001 From: Fabien Benetou Date: Mon, 16 Jan 2023 11:29:36 +0100 Subject: [PATCH] display real data but with random layout --- index.html | 123 ++++++++++++++++++++++++++++++++--------------------- 1 file changed, 74 insertions(+), 49 deletions(-) diff --git a/index.html b/index.html index 7df253b..443cac1 100644 --- a/index.html +++ b/index.html @@ -2083,6 +2083,78 @@ function stableGraph(){ // run on entire wiki though whereas previous D3 instance limited to 10 pages and their targets } +function displayLeafs(graph, graphEl, rootId, rootEl, depth=3){ + console.log( graph[rootId].Id ) + if (depth<1) return + graph[rootId].Targets.map( l => { + console.log( "-", graph[l].Id ) + let x = addNodeFromGraph(graph[l].Id, "" + (Math.random()*2) + " " + (Math.random()*2) + " -" + (Math.random()*2) ) + //nodes.push(x) + console.log("linking:", rootEl, x) + setTimeout( _ => { addEdgeBetweenNodesFromGraph(graphEl, rootEl, x) }, 2000) // otherwise null positions + // might need to delay that differently + //edges.push({source:root, target:x}) + displayLeafs( graph, graphEl, graph[l].Id, x, --depth) + }) +} + +fetch('https://vatelier.benetou.fr/MyDemo/newtooling/wiki_graph.json').then( r => r.json() ).then( r => displayGraph(r.Nodes) ); +function displayGraph(mynodes){ + // add few nodes with few edges for testing + // then loading from wiki JSON file + // layout could be done with Cytoscape but somehow seems I can't use it properly, in headless mode or not. + let startingNode = "Wiki.VirtualRealityInterface" + let root = mynodes[startingNode] + + let graphEl = document.createElement("a-entity") + AFRAME.scenes[0].appendChild( graphEl ) + let nodes = [] + let edges = [] + let node_names = Object.keys( mynodes ) + + let rootEl = addNodeFromGraph(root.Id, "" + (Math.random()*2) + " " + (Math.random()*2) + " -" + (Math.random()*2) ) + displayLeafs( mynodes, graphEl, root.Id, rootEl, 2) + + // random graph, no preferential attachement + /* + for (var i=0;i<10;i++){ + let random_name = node_names[Math.floor(Math.random()*node_names.length)] + let x = addNodeFromGraph(random_name, "" + (Math.random()*2) + " " + (Math.random()*2) + " -" + (Math.random()*2) ) + nodes.push(x) + } + for (var i=0;i<10;i++){ + let a = nodes[Math.floor(Math.random()*nodes.length)] + let b = nodes[Math.floor(Math.random()*nodes.length)] + setTimeout( _ => { addEdgeBetweenNodesFromGraph(graphEl, a,b) }, 100) // otherwise null positions + edges.push({source:a, target:b}) + } + */ + // should listen to an event instead to insure that nodes are all created before +} + +function addNodeFromGraph(name, position="0 0 0"){ + // add sphere, with its name, make it a target + // define what "it" is knowing we can't move a children with an offset + // consequently parenting should be done by the text + let el = addNewNote(name, position, ".1 .1 .1", "node_" +Date.now(), "node_from_graph") + let sphereEl = document.createElement("a-sphere") + sphereEl.setAttribute("radius", .1) + sphereEl.setAttribute("opacity", .2) + sphereEl.setAttribute("position", "0 -.1 0") + el.appendChild(sphereEl) + // position shouldn't have to be offset + return el +} + +function addEdgeBetweenNodesFromGraph(graphEl, a, b){ + // a.setAttribute( "line-link-entities", {source: a.id, target: b.id} ) doesn't seem work, back to basics for now + graphEl.setAttribute("line__"+a.id+"__to__"+b.id, { + start: AFRAME.utils.coordinates.stringify( a.getAttribute("position") ) , + end: AFRAME.utils.coordinates.stringify( b.getAttribute("position") ) + }) + // not that this doesn't take into account the parent node moving +} + // could change model opacity based on hand position, fading out when within a (very small here) safe space
@@ -2124,61 +2196,14 @@ function stableGraph(){ - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -