Skip to content

C
clinicaltrials
Commit de49b2af authored by Romain Loth's avatar Romain Loth
Browse files
Options

WIP port: tidy up

parent a160c4eb
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 220 deletions
explorerjs.html
View file @ de49b2af
......@@ -19,8 +19,7 @@
<link rel="stylesheet" href="libs/css2/twjs.css">
<link rel="stylesheet" href="libs/css2/selection-panels.css">
<link rel="stylesheet" href="libs/jquery-3/jquery-ui-1.12.1/jquery-ui.min.css" media="screen">
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css" media="screen">
<!-- <link rel="stylesheet" href="libs/bootstrap-3/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="libs/bootstrap-3/css/bootstrap.min.css" media="screen">
<!-- NB bs2/3 not used for main grid (graph + bars) but inside the bars -->
<link rel="stylesheet" href="libs/css2/freshslider.css" media="screen">
......@@ -34,7 +33,10 @@
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand"> <img width="20px" src="libs/img2/home.png">Mapping Risk Research</a>
<a href="#" class="navbar-brand"><img style="width:20px;" src="libs/img2/home.png"></a>
</div>
<div class="navbar-header">
<a href="#" class="navbar-brand">Mapping Risk Research</a>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
......@@ -110,7 +112,7 @@
<li>
<a>
<button type="button" id="changelevel" class="btn btn-info btn-sm" disabled>Change Level</button>
<button type="button" id="changelevel" class="btn btn-primary btn-sm" disabled>Change Level</button>
</a>
</li>
......@@ -125,8 +127,12 @@
<div id="slidercat0nodessize" class="settingslider"></div>
</a></li>
<li><a>
Colors<div class="colorgraph_div"></div>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Set Colors <img title="Set Colors" src="libs/img2/colors.png" width="20px"><span class="caret"></span>
</a>
<ul id="colorgraph-menu" class="dropdown-menu">
</ul>
</a></li>
<!--
......@@ -203,7 +209,7 @@
<span class="input-group-btn">
<button id="searchbutton"
title="Search the topic in the map"
class="btn btn-info"
class="btn btn-primary"
type="button">
<span class="glyphicon glyphicon-search">
</span>
......@@ -233,8 +239,8 @@
<input id="checkboxdiv" onclick="alertCheckBox(this);"
title="Add next search results to current selection"
class="nav btn btn-info"
type="checkbox"></input>
<p style="font-size:75%; line-height:90%">Add to selection</p>
type="checkbox">
<span style="position: relative; top: 4px; left: 5px;">Add to selection</span>
</li> <!-- /checkbox group -->
</ul> <!-- /searchnav -->
......@@ -370,8 +376,7 @@
<div class="panel panel-default" id="video_explanation">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#le_tutorial"
href="#">
<a data-toggle="collapse" data-target="#le_tutorial" href="#le_tutorial">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
&nbsp;Tutorial video
</a>
......@@ -388,8 +393,7 @@
<div class="panel panel-default" id="tips_panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#tips"
href="#">
<a data-toggle="collapse" data-target="#tips" href="#tips">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
&nbsp;Tips
</a>
......@@ -402,8 +406,7 @@
<div class="panel panel-default" id="credits_panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#credits"
href="#">
<a data-toggle="collapse" data-target="#credits" href="#credits">
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span>
&nbsp;Credits
</a>
......@@ -525,15 +528,11 @@
<script src="libs/freshslider.1.0.js" type="text/javascript" ></script>
<script src="libs/readmore.js" type="text/javascript"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/bootstrap/js/bootstrap-modal.js" type="text/javascript"></script>
<script src="libs/bootstrap/js/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="libs/bootstrap-native/bootstrap-native.min.js"></script>
<script src="tinawebJS/globalUtils.js" type="text/javascript"></script>
<!-- new sigma 1.2 imports -->
<!-- new sigma 1.2 imports -->
<script src="tinawebJS/sigma_v1.2/sigma.js" type="text/javascript" language="javascript"></script>
<script src="tinawebJS/sigma_v1.2/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
<script src="tinawebJS/sigma_v1.2/plugins/sigma.layout.forceAtlas2/worker.js"></script>
......@@ -543,7 +542,7 @@
<script src="tinawebJS/sigma_tools.js"></script>
<!-- classic tinawebJS imports -->
<!-- <script type="text/javascript" src="tinawebJS/jLouvain.js"></script> -->
<script type="text/javascript" src="tinawebJS/jLouvain.js"></script>
<!-- <script src="tinawebJS/sigma.v1.customized.js" type="text/javascript" language="javascript"></script> -->
<!-- <script src="tinawebJS/sigma.forceatlas2.js" type="text/javascript" language="javascript"></script> -->
<script src="settings_explorerjs.js" type="text/javascript" language="javascript"></script>
......
extras_explorerjs.js
View file @ de49b2af
......@@ -447,7 +447,7 @@ function trackMouse(e) {
ctx.beginPath();
// labels appear
var nds = TW.partialGraph.graph.nodes()
// var nds = TW.partialGraph.graph.nodes()
// TODO replace by a hover binding (and POSS use quadtree zone)
//
......
tinawebJS/Tinaweb.js
View file @ de49b2af
......@@ -22,65 +22,65 @@ SelectionEngine = function() {
return clickedNodes.map(Number);
}).index();
this.SelectorEngine_part02 = (function( addvalue , clicktype , prevsels , currsels ) {
console.log("Add[]:")
console.log(addvalue)
console.log("clicktype:")
console.log(clicktype)
console.log("prevsels:")
console.log(prevsels)
console.log("currsels:")
console.log(currsels)
console.log(" - - - - - - ")
var buffer = Object.keys(prevsels).map(Number).sort(this.sortNumber);
var targeted = currsels.map(Number).sort(this.sortNumber);
if(clicktype=="double" && targeted.length==0) return [];
// if(targeted.length>0) {
if(buffer.length>0) {
if(JSON.stringify(buffer)==JSON.stringify(targeted)) {
// this is just effective for Add[ ] ...
// If previous selection is equal to the current one, you've nothing :D
cancelSelection(false);
return [];
}
var inter = this.intersect_safe(buffer,targeted)
if(inter.length>0) {
var blacklist = {} , whitelist = {};
for(var i in inter) blacklist[inter[i]]=true;
for(var i in buffer){
e = buffer[i]
if(!blacklist[e]) {
whitelist[e] = true;
}
}
for(var i in targeted){
e = targeted[i]
if(!blacklist[e]) {
whitelist[e] = true;
}
}
targeted = Object.keys(whitelist).map(Number);
} else {// inter = 0 ==> click in other portion of the graph (!= current selection)
// Union!
if(addvalue) {
targeted = targeted.concat(buffer.filter(function (item) {
return targeted.indexOf(item) < 0;
}));
}
return targeted;
}
} else return targeted;
// }
return targeted;
}).index();
//
// this.SelectorEngine_part02 = (function( addvalue , clicktype , prevsels , currsels ) {
//
// console.log("Add[]:")
// console.log(addvalue)
// console.log("clicktype:")
// console.log(clicktype)
// console.log("prevsels:")
// console.log(prevsels)
// console.log("currsels:")
// console.log(currsels)
// console.log(" - - - - - - ")
//
// var buffer = Object.keys(prevsels).map(Number).sort(this.sortNumber);
// var targeted = currsels.map(Number).sort(this.sortNumber);
//
// if(clicktype=="double" && targeted.length==0) return [];
//
// // if(targeted.length>0) {
// if(buffer.length>0) {
// if(JSON.stringify(buffer)==JSON.stringify(targeted)) {
// // this is just effective for Add[ ] ...
// // If previous selection is equal to the current one, you've nothing :D
// cancelSelection(false);
// return [];
// }
// var inter = this.intersect_safe(buffer,targeted)
// if(inter.length>0) {
// var blacklist = {} , whitelist = {};
// for(var i in inter) blacklist[inter[i]]=true;
// for(var i in buffer){
// e = buffer[i]
// if(!blacklist[e]) {
// whitelist[e] = true;
// }
// }
// for(var i in targeted){
// e = targeted[i]
// if(!blacklist[e]) {
// whitelist[e] = true;
// }
// }
// targeted = Object.keys(whitelist).map(Number);
// } else {// inter = 0 ==> click in other portion of the graph (!= current selection)
// // Union!
// if(addvalue) {
// targeted = targeted.concat(buffer.filter(function (item) {
// return targeted.indexOf(item) < 0;
// }));
// }
// return targeted;
// }
// } else return targeted;
// // }
//
// return targeted;
// }).index();
// ----------------------------------------------------------8<-------------
//
this.SelectorEngine = (function( cursorsize , area , addvalue , clicktype , prevsels , currsels ) {
var targeted = []
var buffer = Object.keys(prevsels).map(Number).sort(this.sortNumber);
......@@ -151,6 +151,7 @@ SelectionEngine = function() {
return targeted;
}).index();
// uses: SelectorEngine() and MultipleSelection2()
// we assume string is normalized
this.search_n_select = function(string) {
......@@ -508,7 +509,7 @@ TinaWebJS = function ( sigmacanvas ) {
SelInst.MultipleSelection2({nodes:targeted});
cursor_size = prev_cursor_size;
}
TW.partialGraph.draw();
TW.partialGraph.refresh({skipIndexation: true});
$("input#searchinput").val("");
$("input#searchinput").autocomplete( "close" );
......@@ -550,7 +551,7 @@ TinaWebJS = function ( sigmacanvas ) {
cancelSelection(false);
SelInst.MultipleSelection2({nodes:targeted});
}
TW.partialGraph.draw();
TW.partialGraph.refresh({skipIndexation: true});
$("input#searchinput").val("");
$("input#searchinput").autocomplete( "close" );
......@@ -692,10 +693,18 @@ TinaWebJS = function ( sigmacanvas ) {
// new sigma.js gives easy access to clicked node!
theNodeId = e.data.node.id
cancelSelection(false);
SelInst.MultipleSelection2({nodes:[theNodeId]})
if (cursor_size == 0) {
// sigma already provided us the target
SelInst.MultipleSelection2({nodes:[theNodeId]})
}
// case with a selector circle cursor
else {
// cf TODO mousedown
}
})
// TODO
// TODO re-connect area click
// TW.partialGraph.bind('click', function(e) {
// console.log("===click===");
// console.log("e", e);
......@@ -734,48 +743,46 @@ TinaWebJS = function ( sigmacanvas ) {
// );
// }
// }
// -------------------------------------------/fragment from v1.customized
// Double Click
// external usage: SelectorEngine_part01() and SelectorEngine_part02()
TW.partialGraph.bind('doubleClickNode', function(e) {
console.log("===doubleClickNode===");
console.log("e", e);
})
// $('#sigma-contnr').dblclick(function(event) {// using SelectionEngine
// var area = {}
//
// // TODO replace
// console.log("customdoubleclick", event)
// area.x1 = partialGraph._core.mousecaptor.mouseX;
// area.y1 = partialGraph._core.mousecaptor.mouseY;
//
// targeted = SelInst.SelectorEngine_part01({
// cursorsize:cursor_size,
// area:area
// })
//
// if(targeted.length>0) {
// var finalSelection = SelInst.SelectorEngine_part02( {
// addvalue:checkBox ,
// clicktype:(checkBox)?"simple":"double",
// prevsels:selections,
// currsels:targeted
// });
// cancelSelection(false);
// SelInst.MultipleSelection2( {nodes:finalSelection} )
//
// } else cancelSelection(false);
//
// partialGraph.draw();
// trackMouse(event);
// });
//
// FOLLOW UP in v1 customized:
// ===========================
// .mousedown(function(e) { // using SelectionEngine
// //left click!<- normal click
// if(e.which==1){
// console.warn('new sigma.js FIX event bindings for downgraph, upgraph')
// partialGraph.dispatchEvent(
// e['type'] == 'mousedown' ?
// 'downgraph' :
// 'upgraph'
// );
// var area = {}
//
//
// // new sigma.js: (x,y) from event -- TODO check if convert coords
// area.x1 = sigma.utils.getX(e);
// area.y1 = sigma.utils.getY(e);
//
// // old version
// // area.x1 = partialGraph._core.mousecaptor.mouseX;
// // area.y1 = partialGraph._core.mousecaptor.mouseY;
//
// var targeted = SelInst.SelectorEngine( {
// cursorsize:cursor_size,
// area:area,
// addvalue:checkBox,
// clicktype:"simple",
// prevsels:selections
// } )
// if(targeted.length>0) {
// cancelSelection(false);
// SelInst.MultipleSelection2( {nodes:targeted} )
// }
// partialGraph.refresh({skipIndexation:true});
// trackMouse(e);
// }
// });
// -------------------------------------------/fragment from v1.customized
// goTo (move/zoom) events
......@@ -800,69 +807,24 @@ TinaWebJS = function ( sigmacanvas ) {
// raw events (non-sigma): handlers attached to the container
// ==========
$("#sigma-contnr")
.mousemove(function(event){
if(!isUndef(partialGraph)) {
// when selector circle cursor
if(cursor_size>0) trackMouse(event);
}
})
// TW.partialGraph.bind('overNode', function(e) {
// if(!isUndef(partialGraph)) {
// if(cursor_size>0) trackMouse(event);
// }
// })
// TW.partialGraph.bind('overNodes', function(e) {
// if(!isUndef(partialGraph)) {
// if(cursor_size>0) trackMouse(event);
// }
// })
// POSSible for the future: add tools to contextmenu
// .contextmenu(function(){
// return false;
// })
// .mousedown(function(e) { // using SelectionEngine
// //left click!<- normal click
// if(e.which==1){
// console.warn('new sigma.js FIX event bindings for downgraph, upgraph')
// partialGraph.dispatchEvent(
// e['type'] == 'mousedown' ?
// 'downgraph' :
// 'upgraph'
// );
// var area = {}
//
//
// // new sigma.js: (x,y) from event -- TODO check if convert coords
// area.x1 = sigma.utils.getX(e);
// area.y1 = sigma.utils.getY(e);
//
// // old version
// // area.x1 = partialGraph._core.mousecaptor.mouseX;
// // area.y1 = partialGraph._core.mousecaptor.mouseY;
//
// var targeted = SelInst.SelectorEngine( {
// cursorsize:cursor_size,
// area:area,
// addvalue:checkBox,
// clicktype:"simple",
// prevsels:selections
// } )
// if(targeted.length>0) {
// cancelSelection(false);
// SelInst.MultipleSelection2( {nodes:targeted} )
// }
// partialGraph.refresh({skipIndexation:true});
// trackMouse(e);
// }
// });
// sliders events
// ==============
$("#zoomSlider").slider({
orientation: "vertical",
......
tinawebJS/methods.js
View file @ de49b2af
......@@ -174,7 +174,7 @@ function RefreshState(newNOW){
$("#category-B").show();
}
TW.partialGraph.draw();
TW.partialGraph.refresh({skipIndexation: true});
}
......
tinawebJS/sigmaUtils.js
View file @ de49b2af
......@@ -163,14 +163,18 @@ SigmaUtils = function () {
};
this.toggleEdges = function() {
var now_flag = TW.partialGraph.settings('drawEdges')
TW.partialGraph.settings('drawEdges', !now_flag)
TW.partialGraph.refresh({skipIndexation:true})
}
// ================ /alternative rendering =====================
}
// ================ /alternative rendering =====================
}
//for socialgraph
function showMeSomeLabels(N){
......@@ -240,25 +244,26 @@ function getedges(){
}
function getVisibleEdges() {
return TW.partialGraph.graph.edges().filter(function(e) {
// new sigma js POSS custom index to avoid loop
return TW.partialGraph.graph.edges().filter(function(e) {
return !e['hidden'];
});
});
}
function getVisibleNodes() {
return TW.partialGraph.graph.nodes().filter(function(n) {
return !n['hidden'];
});
// new sigma js POSS custom index to avoid loop
return TW.partialGraph.graph.nodes().filter(function(n) {
return !n['hidden'];
});
}
function getNodesByAtt(att) {
return TW.partialGraph._core.graph.nodes.filter(function(n) {
return TW.partialGraph.graph.nodes().filter(function(n) {
return n['type']==att;
});
}
// new sigma.js
function find(lquery){
var results=[];
......@@ -426,28 +431,15 @@ function clustersBy(daclass) {
// [ / Scaling node colours(0-255) and sizes(3-5) ]
TW.partialGraph.refresh({skipIndexation: true});
// [ Edge-colour by source-target nodes-colours combination ]
var v_edges = getVisibleEdges();
for(var e in v_edges) {
var e_id = v_edges[e].id;
var a = v_edges[e].source.color;
var b = v_edges[e].target.color;
a = hex2rga(a);
b = hex2rga(b);
var r = (a[0] + b[0]) >> 1;
var g = (a[1] + b[1]) >> 1;
var b = (a[2] + b[2]) >> 1;
TW.partialGraph.graph.edges(e_id).color = "rgba("+[r,g,b].join(",")+",0.5)";
}
repaintEdges()
// [ / Edge-colour by source-target nodes-colours combination ]
set_ClustersLegend ( null )
TW.partialGraph.refresh();
TW.partialGraph.draw();
TW.partialGraph.refresh({skipIndexation: true});
}
......@@ -456,6 +448,22 @@ var totalsPerBinMin = {
'-1000000':0, '-75':0, '-50':0, '-25':0, '-10':0, '10':0, '25':0, '50':0, '75':0, '100':0, '125':0, '150':0
}
// Edge-colour by source-target nodes-colours combination
function repaintEdges() {
var v_edges = getVisibleEdges();
for(var e in v_edges) {
var e_id = v_edges[e].id;
var a = TW.partialGraph.graph.nodes(v_edges[e].source).color;
var b = TW.partialGraph.graph.nodes(v_edges[e].target).color;
a = hex2rga(a);
b = hex2rga(b);
var r = (a[0] + b[0]) >> 1;
var g = (a[1] + b[1]) >> 1;
var b = (a[2] + b[2]) >> 1;
TW.partialGraph.graph.edges(e_id).color = "rgba("+[r,g,b].join(",")+",0.5)";
}
}
// rewrite of clustersBy with binning and for attributes that can have negative float values
function colorsRelByBins(daclass) {
......@@ -528,29 +536,14 @@ function colorsRelByBins(daclass) {
}
}
TW.partialGraph.refresh();
TW.partialGraph.draw();
// [ Edge-colour by source-target nodes-colours combination ]
var v_edges = getVisibleEdges();
for(var e in v_edges) {
var e_id = v_edges[e].id;
var a = v_edges[e].source.color;
var b = v_edges[e].target.color;
a = hex2rga(a);
b = hex2rga(b);
var r = (a[0] + b[0]) >> 1;
var g = (a[1] + b[1]) >> 1;
var b = (a[2] + b[2]) >> 1;
TW.partialGraph._core.graph.edgesIndex[e_id].color = "rgba("+[r,g,b].join(",")+",0.5)";
}
repaintEdges()
// [ / Edge-colour by source-target nodes-colours combination ]
set_ClustersLegend ( null )
TW.partialGraph.refresh();
TW.partialGraph.draw();
TW.partialGraph.refresh({skipIndexation: true});
}
......
tinawebJS/sigma_v1.2/sigma.js
View file @ de49b2af
......@@ -11431,7 +11431,7 @@
self.dispatchEvent('click', e.data);
nodes = getNodes(e);
nodes = getNodes(e); /// <----------- cf. classic tina "targeted"
edges = getEdges(e);
if (nodes.length) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment