parent
a3042794db
commit
ffc8494062
@ -1,3 +1,221 @@ |
||||
console.log('jxr extras to gradually add, by default could refer to branches instead then add as components proper') |
||||
console.log('arguably utils and additional interactions beyond pinche could be extras rather than core') |
||||
console.log('extra could also be empty...') |
||||
|
||||
// from https://glitch.com/edit/#!/zen-pim?path=graph-cyto-headless.html
|
||||
// see also https://observablehq.com/@utopiah/d3-pim-graph
|
||||
// motivated by https://these.arthurperret.fr/chapitre-4.html#cosmographe-et-cosmoscope
|
||||
|
||||
const cytoJson = "https://vatelier.benetou.fr/MyDemo/newtooling/wiki_graph_cyto.json" |
||||
|
||||
var cy |
||||
var jsonLoaded |
||||
|
||||
fetch(cytoJson) |
||||
.then(function (response) { |
||||
return response.json(); |
||||
}) |
||||
.then(function (json) { |
||||
// take nodes from wiki.Nodes then construct an array in elements for cytoscape format
|
||||
// or directly from JSON http://js.cytoscape.org/#notation/elements-json
|
||||
jsonLoaded = json |
||||
startCytoWithData(json) |
||||
}) |
||||
.catch(function (err) { |
||||
console.log(err); |
||||
}); |
||||
|
||||
// should instead directly use https://vatelier.net/MyDemo/newtooling/wiki_graph_cyto.json
|
||||
// generated from https://vatelier.net/MyDemo/newtooling/build_graph_cytograph.js
|
||||
// cf instead http://js.cytoscape.org/demos/tokyo-railways/tokyo-railways.json more detail
|
||||
// with details on how to load the JSON
|
||||
|
||||
function runCytoAnalysis(){ |
||||
console.log('----------------- network analysis started --------------')
|
||||
if (!cy.nodes('[id = "Analysis.Analysis"]').length) { |
||||
console.warn('Wrong dataset, cancelling') |
||||
return |
||||
} |
||||
// example of queries
|
||||
var aStar = cy.elements().aStar({ root: '[id = "Analysis.Analysis"]', goal: '[id = "Analysis.CostsAndBenefitsOfSocietalMembership"]' }) |
||||
if ( aStar.path){ |
||||
console.log("Path from Analysis.Analysis to Analysis.CostsAndBenefitsOfSocietalMembership", aStar.path.edges() , aStar.path.nodes() ) |
||||
aStar.path.select() |
||||
} |
||||
console.log( cy.nodes('[id = "Analysis.Analysis"]').neighborhood() ) |
||||
before = Date.now() |
||||
var bc = cy.elements().bc() |
||||
after = Date.now() |
||||
console.log("took ", after-before, "ms to run.") |
||||
console.log( 'bc of j: ' + bc.betweenness('[id = "Analysis.Analysis"]') ) |
||||
console.log( cy.nodes('[id = "Analysis.CostsAndBenefitsOfSocietalMembership"]').neighborhood() ) |
||||
//no need to run cy.elements().bc() again. It's done once for the whole graph.
|
||||
console.log( 'bc of j: ' + bc.betweenness('[id = "Analysis.CostsAndBenefitsOfSocietalMembership"]') ) |
||||
console.log('----------------- network analysis done -----------------') |
||||
} |
||||
|
||||
function startCytoWithData(json){ |
||||
cy = cytoscape({ |
||||
headless:true, |
||||
elements: json.elements |
||||
}) |
||||
|
||||
//runCytoAnalysis() //quite demanding, skipped for now.
|
||||
|
||||
let defaults = { |
||||
name: 'euler', |
||||
springLength: edge => 80, |
||||
springCoeff: edge => 0.0008, |
||||
mass: node => 4, |
||||
gravity: -1.2, |
||||
pull: 0.001, |
||||
theta: 0.666, |
||||
dragCoeff: 0.02, |
||||
movementThreshold: 1, |
||||
timeStep: 20, |
||||
refresh: 10, |
||||
animate: true, |
||||
animationDuration: undefined, |
||||
animationEasing: undefined, |
||||
maxIterations: 1000, |
||||
maxSimulationTime: 4000, |
||||
ungrabifyWhileSimulating: false, |
||||
fit: true, |
||||
padding: 30, |
||||
// Constrain layout bounds with one of
|
||||
// - { x1, y1, x2, y2 }
|
||||
// - { x1, y1, w, h }
|
||||
// - undefined / null : Unconstrained
|
||||
boundingBox: undefined, |
||||
|
||||
// Layout event callbacks; equivalent to `layout.one('layoutready', callback)` for example
|
||||
ready: function(){ console.log("graph ready", cy.json()) }, // on layoutready
|
||||
stop: stableGraph(), // on layoutstop
|
||||
randomize: false |
||||
}; |
||||
|
||||
// disabled for tests
|
||||
//cy.layout( defaults ).run(); // too demanding for the entire graph, should limit to a subset
|
||||
} |
||||
|
||||
function stableGraph(){ |
||||
var exportableJSON = cy.json() |
||||
console.log( 'exportable JSON', exportableJSON ); |
||||
// not actually stable!
|
||||
// still could be used as a form of caching BUT... would take into account new nodes added since
|
||||
|
||||
var node = "ReadingNotes.ApocalypticAI" |
||||
if (!cy.nodes('[id = "'+node+'"]').length) { |
||||
console.warn('Wrong dataset, cancelling') |
||||
return |
||||
} |
||||
console.log('should add/update AFrame nodes e.g', cy.elements('[id = "'+node+'"]').position()) |
||||
console.log('could add all the nodes then their links with proper attributes in order to do select() after') |
||||
// using e.g. cy.nodes().forEach( n => console.log(n.data(), n.position() ) )
|
||||
// cy.edges().forEach( e => console.log(e.data(), e.sourceEndpoint(), e.targetEndpoint() ))
|
||||
// warning, very costly!
|
||||
// run on entire wiki though whereas previous D3 instance limited to 10 pages and their targets
|
||||
} |
||||
|
||||
let edges_to_display = [] |
||||
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) ) |
||||
// layout could be done with Cytoscape but somehow seems I can't use it properly, in headless mode or not.
|
||||
x.setAttribute('update-links-on-pinchended', true) |
||||
x.setAttribute('toggle-links-on-left-pinchended', true) |
||||
console.log("linking:", rootEl, x) |
||||
edges_to_display.push({graphel:graphEl, source:rootEl, target:x}) |
||||
displayLeafs( graph, graphEl, graph[l].Id, x, --depth) |
||||
}) |
||||
} |
||||
|
||||
AFRAME.registerComponent('toggle-links-on-left-pinchended', { |
||||
init: function(){ |
||||
let graphEl = document.querySelector("#graphroot") |
||||
let el = this.el |
||||
this.el.addEventListener('lreleased', function (event) { |
||||
// if it has children (...how knowing that we are not using the hierarchy?)
|
||||
// delete them, including links (should be recursive too)
|
||||
// if not, displayLeafs( mynodes, graphEl, root.Id, rootEl, 1)
|
||||
// assumes not for now
|
||||
displayLeafs( wikiStructure, graphEl, el.getAttribute("value"), el, 1) |
||||
setTimeout( _ => { edges_to_display.map( i => addEdgeBetweenNodesFromGraph( i.graphel, i.source, i.target ))}, 2000 ) |
||||
}) |
||||
} |
||||
}) |
||||
|
||||
AFRAME.registerComponent('update-links-on-pinchended', { |
||||
init: function(){ |
||||
let rootEl = document.querySelector("#graphroot") |
||||
let el = this.el |
||||
this.el.addEventListener('released', function (event) { |
||||
Object.keys( rootEl.components ) // get all links
|
||||
.filter( i => i.indexOf(el.id) > -1 ) // keeps links related to the moved node
|
||||
.map( i => { // for each link
|
||||
let newpos = AFRAME.utils.coordinates.stringify( el.getAttribute("position") ) |
||||
let [src,tgt] = i.replace("line__","").split("__to__"); |
||||
srcpos = AFRAME.utils.coordinates.stringify( rootEl.getAttribute(i).start ) |
||||
tgtpos = AFRAME.utils.coordinates.stringify( rootEl.getAttribute(i).end ) |
||||
if (src==el.id){ |
||||
rootEl.setAttribute(i, { start: newpos, end: tgtpos }) |
||||
} else { |
||||
rootEl.setAttribute(i, { start: srcpos, end: newpos }) |
||||
} |
||||
}) |
||||
}) |
||||
} |
||||
}) |
||||
|
||||
let nodes = [] |
||||
let edges = [] |
||||
let wikiStructure = null |
||||
|
||||
fetch('https://vatelier.benetou.fr/MyDemo/newtooling/wiki_graph.json').then( r => r.json() ).then( r => displayGraph(r.Nodes) ); |
||||
// alternatively there is the issue component that could also display linked issues
|
||||
function displayGraph(mynodes){ |
||||
wikiStructure = mynodes |
||||
let startingNode = "Wiki.VirtualRealityInterface" |
||||
let root = mynodes[startingNode] |
||||
|
||||
let graphEl = document.createElement("a-entity") |
||||
graphEl.id = "graphroot" |
||||
AFRAME.scenes[0].appendChild( graphEl ) |
||||
let node_names = Object.keys( mynodes ) |
||||
|
||||
let rootEl = addNodeFromGraph(root.Id, "" + (Math.random()*2-1) + " " + (Math.random()+1) + " -" + (Math.random()*2-0.5) ) |
||||
rootEl.setAttribute('update-links-on-pinchended', true) |
||||
displayLeafs( mynodes, graphEl, root.Id, rootEl, 2) |
||||
setTimeout( _ => { edges_to_display.map( i => addEdgeBetweenNodesFromGraph( i.graphel, i.source, i.target ))}, 2000 ) |
||||
// quite unreliable
|
||||
// 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_" +crypto.randomUUID(), "node_from_graph") |
||||
let sphereEl = document.createElement("a-sphere") |
||||
sphereEl.setAttribute("radius", .1) |
||||
sphereEl.setAttribute("segments-height", 4) |
||||
sphereEl.setAttribute("segments-width", 4) |
||||
sphereEl.setAttribute("wireframe", true) |
||||
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
|
||||
} |
||||
|
||||
|
||||
Loading…
Reference in new issue