display real data but with random layout

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
 </script>
 <div id="observablehq-key">
@@ -2124,61 +2196,14 @@ function stableGraph(){
       <a-entity light="type: directional; color: #FFF; intensity: 1.4" position="-0.5 1 1"></a-entity>
       <a-sky hide-on-enter-ar src="../content/nebula.jpg"></a-sky>
 
-      <a-text target value="instructions : pinch generateRandomPlace then adjust tiles" position="0 1.65 -0.2" scale="0.1 0.1 0.1"></a-text>
+      <a-text target value="instructions : pinch displayGraph() to start navigating in it" position="0 1.65 -0.2" scale="0.1 0.1 0.1"></a-text>
-      <a-text target value="jxr generateRandomPlace()" position="0 1.35 -0.1" scale="0.1 0.1 0.1"></a-text>
+      <a-text target value="jxr displayGraph()" position="0 1.35 -0.1" scale="0.1 0.1 0.1"></a-text>
-      <a-text target value="jxr rescalePlace()" position="0 1.45 -0.1" scale="0.1 0.1 0.1"></a-text>
       <a-text target value="jxr qs #rig sa position 0 0 10" position="0 1.55 .5" rotation="0 180 0" scale="0.1 0.1 0.1"></a-text>
       <!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position -->
 
       <a-troika-text value="SpaSca : Spatial Scaffolding" anchor="left" outline-width="5%" font="../content/ChakraPetch-Regular.ttf" position="-5.26197 6.54224 -1.81284"
 	scale="4 4 5" rotation="90 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #c061cb"></a-troika-text>
 
-      <a-entity id="featureN">
-	      <a-image rotation="0 180 0" position="-2 2 10.5" scale=".5 .5 .5" src="../content/features/containers.jpg"></a-image>
-	      <a-text rotation="0 180 0" target value="containers" position="-2 2.25 10.5" scale=".5 .5 .5"></a-text>
-	      <a-text rotation="0 180 0" target value="use the dxr prefix to send data to containers\n(requires backend)" position="-2 1.55 10.5" scale=".1 .1 .1"></a-text>
-	      <a-text rotation="0 180 0" target value="dxr python print(7)" position="-2 1.35 10.5" scale="0.1 0.1 0.1"></a-text>
-      </a-entity>
-	<a-image rotation="0 180 0" position="-1 2 10.5" scale=".5 .5 .5" src="../content/features/wireframe.jpg"></a-image>
-	<a-image rotation="0 180 0" position="0 2 10.5" scale=".5 .5 .5" src="../content/features/remarkable_sketch.jpg"></a-image>
-	<a-image rotation="0 180 0" position="1 2 10.5" scale=".5 .5 .5" src="../content/features/browsing_history.jpg"></a-image>
-	<a-image rotation="0 180 0" position="2 2 10.5" scale=".5 .5 .5" src="../content/features/codeembedding.jpg"></a-image>
-	<a-image rotation="0 180 0" position="3 2 10.5" scale=".5 .5 .5" src="../content/features/grouping.jpg"></a-image>
-	<a-image rotation="0 180 0" position="4 2 10.5" scale=".5 .5 .5" src="../content/features/inspector.jpg"></a-image>
-	<a-image rotation="0 180 0" position="5 2 10.5" scale=".5 .5 .5" src="../content/features/javascript_with_shortcuts.jpg"></a-image>
-	<a-image rotation="0 180 0" position="6 2 10.5" scale=".5 .5 .5" src="../content/features/load_3D_models.jpg"></a-image>
-	<a-image rotation="0 180 0" position="7 2 10.5" scale=".5 .5 .5" src="../content/features/math_plot.jpg"></a-image>
-	<a-image rotation="0 180 0" position="8 2 10.5" scale=".5 .5 .5" src="../content/features/networked_input.jpg"></a-image>
-	<a-image rotation="0 180 0" position="9 2 10.5" scale=".5 .5 .5" src="../content/features/observable_notebook.jpg"></a-image>
-	<a-text rotation="0 180 0" target="" value="Features" position="4.70348 3.07329 10.2" scale="" text=""></a-text>
-	      <a-text rotation="0 180 0" target value="containers" position="-1 2.25 10.5" scale=".5 .5 .5"></a-text>
-	      <a-text rotation="0 180 0" target value="use the dxr prefix to send data to containers\n(requires backend)" position="-1 1.55 10.5" scale=".1 .1 .1"></a-text>
-	      <a-text rotation="0 180 0" target value="dxr python print(7)" position="-1 1.35 10.5" scale="0.1 0.1 0.1"></a-text>
-	      <a-text rotation="0 180 0" target value="containers" position="0 2.25 10.5" scale=".5 .5 .5"></a-text>
-	      <a-text rotation="0 180 0" target value="use the dxr prefix to send data to containers\n(requires backend)" position="0 1.55 10.5" scale=".1 .1 .1"></a-text>
-	      <a-text rotation="0 180 0" target value="dxr python print(7)" position="0 1.35 10.5" scale="0.1 0.1 0.1"></a-text>
-	      <a-text rotation="0 180 0" target value="containers" position="1 2.25 10.5" scale=".5 .5 .5"></a-text>
-	      <a-text rotation="0 180 0" target value="use the dxr prefix to send data to containers\n(requires backend)" position="1 1.55 10.5" scale=".1 .1 .1"></a-text>
-	      <a-text rotation="0 180 0" target value="dxr python print(7)" position="1 1.35 10.5" scale="0.1 0.1 0.1"></a-text>
-	      <a-text rotation="0 180 0" target value="potato" position="2 2.25 10.5" scale=".5 .5 .5"></a-text>
-	      <a-text rotation="0 180 0" target value="use the dxr prefix to send data to containers\n(requires backend)" position="2 1.55 10.5" scale=".1 .1 .1"></a-text>
-	      <a-text rotation="0 180 0" target value="dxr python print(7)" position="2 1.35 10.5" scale="0.1 0.1 0.1"></a-text>
-	      <a-text rotation="0 180 0" target value="containers" position="3 2.25 10.5" scale=".5 .5 .5"></a-text>
-	      <a-text rotation="0 180 0" target value="use the dxr prefix to send data to containers\n(requires backend)" position="3 1.55 10.5" scale=".1 .1 .1"></a-text>
-	      <a-text rotation="0 180 0" target value="dxr python print(7)" position="3 1.35 10.5" scale="0.1 0.1 0.1"></a-text>
-	      <a-text rotation="0 180 0" target value="containers" position="4 2.25 10.5" scale=".5 .5 .5"></a-text>
-	      <a-text rotation="0 180 0" target value="use the dxr prefix to send data to containers\n(requires backend)" position="4 1.55 10.5" scale=".1 .1 .1"></a-text>
-	      <a-text rotation="0 180 0" target value="dxr python print(7)" position="4 1.35 10.5" scale="0.1 0.1 0.1"></a-text>
-	      <a-text rotation="0 180 0" target value="containers" position="5 2.25 10.5" scale=".5 .5 .5"></a-text>
-	      <a-text rotation="0 180 0" target value="use the dxr prefix to send data to containers\n(requires backend)" position="5 1.55 10.5" scale=".1 .1 .1"></a-text>
-	      <a-text rotation="0 180 0" target value="dxr python print(7)" position="5 1.35 10.5" scale="0.1 0.1 0.1"></a-text>
-	      <a-text rotation="0 180 0" target value="containers" position="6 2.25 10.5" scale=".5 .5 .5"></a-text>
-	      <a-text rotation="0 180 0" target value="use the dxr prefix to send data to containers\n(requires backend)" position="6 1.55 10.5" scale=".1 .1 .1"></a-text>
-	      <a-text rotation="0 180 0" target value="dxr python print(7)" position="6 1.35 10.5" scale="0.1 0.1 0.1"></a-text>
-	      <a-text rotation="0 180 0" target value="containers" position="-2 2.25 10.5" scale=".5 .5 .5"></a-text>
-	      <a-text rotation="0 180 0" target value="use the dxr prefix to send data to containers\n(requires backend)" position="-2 1.55 10.5" scale=".1 .1 .1"></a-text>
-	      <a-text rotation="0 180 0" target value="dxr python print(7)" position="-2 1.35 10.5" scale="0.1 0.1 0.1"></a-text>
-
     </a-scene>
   </body>
 </html>