MediaWiki:Graph.js: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Graph.js (view source)

Revision as of 10:34, 2 June 2020

4,540 bytes added ,  2 June 2020
no edit summary
No edit summary
No edit summary
 
Line 840: Line 840:
];
];


// unique  
////////////////////////
// all the function used for drawing and fixing the data
////////////////////////
 
////////////////////////
// first part, unique  
////////////////////////
 
// all the code used in this first part is used uniquely in this part, and is used to get the right data to display on every pages of the wiki zoo


function getAllUrlParams(url) {
function getAllUrlParams(url) {
Line 880: Line 888:
}
}


// useless for now
function arraysEqual(a,b) {
function arraysEqual(a,b) {


Line 897: Line 906:


function getdirectasczoo(nodeid){
function getdirectasczoo(nodeid){
    // get all direct ascendant of an item
    // return an array of them
   for (i=0;i<zooData.length;i++){
   for (i=0;i<zooData.length;i++){
     if (typeof zooData[i].requires  !== 'undefined') {
     if (typeof zooData[i].requires  !== 'undefined') {
Line 912: Line 924:


function getdirectdeszoo(nodeid){
function getdirectdeszoo(nodeid){
    // get all direct descendant of an item
    // return an array of them
   let directdes = [];
   let directdes = [];
   for (i=0;i<zooData.length;i++){
   for (i=0;i<zooData.length;i++){
Line 936: Line 951:


function getasczoo(nodeids){
function getasczoo(nodeids){
    // return an array of every ascendant of an item, including the ascendant of them recursively
   nodestest.length=0;
   nodestest.length=0;
   bool=false;
   bool=false;
Line 941: Line 957:
     nodestest.push(getdirectasczoo(nodeids[j]));
     nodestest.push(getdirectasczoo(nodeids[j]));
   }
   }
  // we find the ascendant of all the nodes selected (or the unique one to start)
   nodesids=nodestest.flat();
   nodesids=nodestest.flat();
   let uniquenodes=  [...new Set(nodesids)];
   let uniquenodes=  [...new Set(nodesids)];
   var bool = false;
   var bool = false;
  // we test if in this iteration all the asc are included in the array of ascendant, what would mean that the search is over
   for (i=0;i<nodeids.length;i++){
   for (i=0;i<nodeids.length;i++){
     if( !nodeids.includes(uniquenodes[i]) ){
     if( !nodeids.includes(uniquenodes[i]) ){
Line 950: Line 968:
     }
     }
   }
   }
  //if new elements are found, we find the ascendants again
   if (bool==true){
   if (bool==true){
     return getasczoo(uniquenodes);
     return getasczoo(uniquenodes);
Line 958: Line 977:


function getdeszoo(nodeids){
function getdeszoo(nodeids){
    // we find the desc of the desc.. and return them in an array, other method
   return nodeids
   return nodeids
   .reduce(
   .reduce(
Line 966: Line 986:


function lineagezoo(nodeid){
function lineagezoo(nodeid){
    // we concatenate all the ascendant and descendant in an unique array lineage returned


   let lineage=[];
   let lineage=[];
Line 979: Line 1,000:
}
}


 
// get the url of current page
function getProperUrl(){
function getProperUrl(){
   var url = window.location.toString();
   var url = window.location.toString();
Line 990: Line 1,011:


function noParty() {
function noParty() {
    // we want to express the requirement of an element that is a protocol party in its parent protocol
    // so that every protocol requires the the requirement of its party
    // we find every protocol party, then search for their parent, and add its requirement to the parents
    // finally delete the protocol party from the data
   for (i=0;i<zooData.length;i++){
   for (i=0;i<zooData.length;i++){
     if(zooData[i]['category']=='protocol_party'){
     if(zooData[i]['category']=='protocol_party'){
Line 1,010: Line 1,035:


function unique(){
function unique(){
    // we use the proper data for the page we are in
   if (typeof getAllUrlParams().title  !== 'undefined'){
   if (typeof getAllUrlParams().title  !== 'undefined'){
     var titre= getAllUrlParams().title;
     var titre= getAllUrlParams().title;
    // if we are on not on the main page or the graph page, we dont need to erase anything from the data
     if (getAllUrlParams().title.length >0 && getAllUrlParams().title != "main_page" && getAllUrlParams().title != "graphs" ){
     if (getAllUrlParams().title.length >0 && getAllUrlParams().title != "main_page" && getAllUrlParams().title != "graphs" ){
      for (i=0;i<zooData.length;i++){
    // we find the right item from zoo data by comparing its .uri entry to match witch the current url
    for (i=0;i<zooData.length;i++){
         if ( typeof zooData[i].uri  !== 'undefined'){
         if ( typeof zooData[i].uri  !== 'undefined'){
           if (zooData[i].uri==getProperUrl()){
           if (zooData[i].uri==getProperUrl()){
Line 1,021: Line 1,050:
         }
         }
       }
       }
      // we then select only the lineage of this right item from the zoo
      // by creating a new zoo from the selected id returned by the lineage function
       var toKeep= lineagezoo(selected);
       var toKeep= lineagezoo(selected);
       var newZoo= [];
       var newZoo= [];
Line 1,030: Line 1,061:
         }
         }
       }
       }
      // finally we erase all zoodata and replace it by all the items found
       let unique = [...new Set(newZoo)];
       let unique = [...new Set(newZoo)];
       zooData.length=0;
       zooData.length=0;
Line 1,036: Line 1,068:
       }
       }
     }
     }
    // if we are in these pages we erase the protocol party to show uniquely the graph without complexing it with all the protocol party
     else {noParty();}
     else {noParty();}
   }
   }
Line 1,045: Line 1,078:


// transformation data for protocol_party and graphs in pages
// transformation data for protocol_party and graphs in pages
// first function called


unique();
unique();


// loading data
////////////////////////
// second part, loading data and displaying data
////////////////////////
 
// creating the nodes and the edges
const nodes = zooData.map(n => {
const nodes = zooData.map(n => {
     return {
     return {
Line 1,068: Line 1,106:
});
});


// we can change parameters of the edges like their colors
const edges = zooData.reduce(
const edges = zooData.reduce(
     (edges, node) => {
     (edges, node) => {
Line 1,085: Line 1,124:
var which= true;
var which= true;
var textbutton="";
var textbutton="";


function buttonclicked(){
function buttonclicked(){
    // function called on onclick on the button element displayed in the graph page
    // empty the graph, redrawing it and changing the button text
     if (which == true){
     if (which == true){
         which=false;
         which=false;
Line 1,105: Line 1,147:


function redrawAll() {
function redrawAll() {
    // function used to draw the graph from all the parameters expressed before
     var container = document.getElementById('mynetwork');
     var container = document.getElementById('mynetwork');
     var options = {
     var options = {
Line 1,151: Line 1,194:


function visitWikiNode(params) {
function visitWikiNode(params) {
    // onclick on an item of the graph to redirect on its uri
     const selectedNodeId = params.nodes[0];
     const selectedNodeId = params.nodes[0];
     const selectedNode = allNodes[selectedNodeId];
     const selectedNode = allNodes[selectedNodeId];
Line 1,156: Line 1,200:
}  
}  


////////////////////////
// third part : get the right interactions when clicking nodes
////////////////////////


// resources
// resources
Line 1,162: Line 1,209:


const Rhighlight = (nodeIds, nodeIds2) => {
const Rhighlight = (nodeIds, nodeIds2) => {
    //coloring the nodes the right way so that the highliting looks right
    // its a contextual fix of the normal behaviour of the library
     for (let nodeId in allNodes) {
     for (let nodeId in allNodes) {
         if (nodeIds2.includes(nodeId)){ allNodes[nodeId].color = 'rgba(50, 126, 130,0.5)';}
         if (nodeIds2.includes(nodeId)){ allNodes[nodeId].color = 'rgba(50, 126, 130,0.5)';}
Line 1,171: Line 1,220:


const getDoables = (selectedResources) => {
const getDoables = (selectedResources) => {
 
    // finding all the right ressources doable with the ressource selected, and its children, recursively
     const RgetDirectDesc = (nodeId) => {
     const RgetDirectDesc = (nodeId) => {
         const desc = edges
         const desc = edges
Line 1,240: Line 1,289:


function emptyR(){
function emptyR(){
    // empty the list of selected node
     selectNode({nodes:[]});
     selectNode({nodes:[]});
}
}
Line 1,245: Line 1,295:


function RselectNode(params) {
function RselectNode(params) {
 
    // getting the right selection of nodes (that will be correctly highlighted)
    // fixing the normal behaviour of the library
    
    
     var booltest= false;
     var booltest= false;
Line 1,263: Line 1,314:


    
    
 
    // we find the fathers of every item which is a subtype that is include in the selected resources
     let father = [];
     let father = [];
     for (var i=0; i<zooData.length;i++){
     for (var i=0; i<zooData.length;i++){
Line 1,275: Line 1,326:
     }
     }


    // we add them to the selection, and re run again the resources function, to get their doables
     let selection= selectedResources.concat(father);
     let selection= selectedResources.concat(father);
     const impliedDoables = getDoables(selection);
     const impliedDoables = getDoables(selection);


    // then we search in the zoodata the items that has a subtype, then compare them to the selected item
    // then their sons are selected and added to an array of items that will be highlighted differently
     let fathers=[];
     let fathers=[];
     for (i=0;i<zooData.length;i++){
     for (i=0;i<zooData.length;i++){
Line 1,304: Line 1,359:
     }
     }


    // we highlight the selected items and their subtype
     Rhighlight(impliedDoables,highlightsub);
     Rhighlight(impliedDoables,highlightsub);


Line 1,310: Line 1,366:
         if (allNodes.hasOwnProperty(nodeId)) { updateArray.push(allNodes[nodeId]); }
         if (allNodes.hasOwnProperty(nodeId)) { updateArray.push(allNodes[nodeId]); }
     }
     }
    // we update the dataset
     nodesDataset.update(updateArray);
     nodesDataset.update(updateArray);
}
}
Line 1,317: Line 1,374:


const highlight = (nodeIds, nodeIds2) => {
const highlight = (nodeIds, nodeIds2) => {
    //parameters of highlighting
     for (let nodeId in allNodes) {
     for (let nodeId in allNodes) {
         if (nodeIds2.includes(nodeId)){ allNodes[nodeId].color = 'rgba(50, 126, 130,0.5)';}
         if (nodeIds2.includes(nodeId)){ allNodes[nodeId].color = 'rgba(50, 126, 130,0.5)';}
Line 1,328: Line 1,386:


function edgesfix(nodesids){
function edgesfix(nodesids){
    // fixing the display ot the edges so that  the colors match their "from" node
     if (nodesids.length!==0){
     if (nodesids.length!==0){
         for (i=0;i<edges.length;i++){
         for (i=0;i<edges.length;i++){
Line 1,348: Line 1,407:
}
}


// boolean that calls the the resources or the lineage graph
var which= true;
var which= true;
var textbutton="";
var textbutton="";


 
//useless, this function is directly in the "display the graph" part
 
function trace(){
function trace(){
     if (which==true){ selectNode;}
     if (which==true){ selectNode;}
Line 1,358: Line 1,417:
}
}


// get the selected lineage
const selectLineage = (params) => {
const selectLineage = (params) => {
     const selectedNodeId = params.nodes[0];
     const selectedNodeId = params.nodes[0];
Line 1,399: Line 1,460:


function emptyL(){
function emptyL(){
    //empty the selection of nodes
     selectNode({nodes:[]});
     selectNode({nodes:[]});
}
}


function sons(params){
function sons(params){
 
// same as in the ressources, all the subtypes are selected
     const selectedNodeId = params.nodes[0];
     const selectedNodeId = params.nodes[0];
     var sons= [];
     var sons= [];
Line 1,438: Line 1,500:


function selectNode(params) {
function selectNode(params) {
    // function called on click if this is the lineage graph selected


     const lineage = selectLineage(params);
     const lineage = selectLineage(params);
Line 1,456: Line 1,519:
     }
     }


    // we update the dataset, and the edgesset because of the edgesfix
     nodesDataset.update(updateArray);
     nodesDataset.update(updateArray);
     edgesDataset.update(edges);
     edgesDataset.update(edges);
Line 1,463: Line 1,527:
redrawAll();
redrawAll();


///////////////////
// final part: animation
///////////////////
// if we are in the knowledge graph page, the graph start by an animation
if (document.getElementById('biggraph')){
if (document.getElementById('biggraph')){
setTimeout(showAnimation,100);
setTimeout(showAnimation,100);


// the animation is divided in two part, the focus on a random item, then returning on a larger view
function showAnimation() {
function showAnimation() {
     focusOnOne();
     focusOnOne();
Line 1,473: Line 1,544:


function focusOnOne() {
function focusOnOne() {
    // the focus is made on a random node with all the options above
     var alea= Math.floor(Math.random() * 87);
     var alea= Math.floor(Math.random() * 87);
     var nodeId=network["body"]["nodeIndices"][alea];
     var nodeId=network["body"]["nodeIndices"][alea];
Line 1,487: Line 1,559:


function notFocus() {
function notFocus() {
     var nodeId ="q_coin";
    // the larger view is made from a selected node with all the options above
     var nodeId ="q_coin";  
    // the node "from the middle" needs to be changed to suit the datas if the layout change
     var options = {
     var options = {
         scale: 0.1,
         scale: 0.1,
Cyril
299

edits

Retrieved from "https://wiki.veriqloud.fr/index.php?title=Special:MobileDiff/4297"

Navigation menu