var SELECTED_GRAPH_NODE = "";
function createSocialNetworkGraphKey() {
var tb1 = new Element("div", {'id':'graphkeydivtoolbar','class':'toolbarrow col-12'});
var key = new Element("div", {'id':'key','class':'row mb-3'});
var text = "";
text += '
The most connected
';
text += 'Highly connected
';
text += 'Moderately connected
';
text += 'Slightly connected
';
text += 'Selected item
';
key.insert(text);
var count = new Element("div", {'id':'graphConnectionCount','class':'col-auto'});
key.insert(count);
tb1.insert(key);
return tb1;
}
/**
* Create the key for the graph node types etc...
* @return a div holding the graph key.
*/
function createNetworkGraphKey() {
var tb1 = new Element("div", {'id':'graphkeydivtoolbar','class':'toolbarrow col-12'});
var key = new Element("div", {'id':'key','class':'row mb-3'});
var text = "";
if (hasChallenge) {
text += 'Challenge
';
}
text+= 'Req. / Issue
';
if (hasClaim){
text += 'Claim
';
}
if (hasSolution) {
text += 'Capability
';
}
text += 'Evidence
';
text += 'Resource
';
text += 'Selected item
';
text += 'Focal item
';
key.insert(text);
var count = new Element("div", {'id':'graphConnectionCount','class':'col-auto'});
key.insert(count);
tb1.insert(key);
return tb1;
}
/**
* Create the key for the graph node types etc...
* @return a div holding the graph key.
*/
function createNetworkOrgGraphKey() {
var tb1 = new Element("div", {'id':'graphkeydivtoolbar','class':'toolbarrow'});
var key = new Element("div", {'id':'key','class':'row mb-3'});
var text = "";
if (hasChallenge) {
text += 'Challenge
';
}
text+= 'Req. / Issue
';
if (hasClaim){
text += 'Claim
';
}
if (hasSolution) {
text += 'Capability
';
}
text += 'Evidence
';
text += 'Resource
';
text += 'Person/Organization
';
text += 'Project
';
text += 'Selected item
';
text += 'Focal item
';
key.insert(text);
tb1.insert(key);
var count = new Element("div", {'id':'graphConnectionCount','class':'col-auto'});
tb1.insert(count);
return tb1;
}
/**
* Create the basic graph toolbar for all network graphs
*/
function createBasicGraphToolbar(forcedirectedGraph, contentarea) {
var tb2 = new Element("div", {'id':'graphmaintoolbar','class':'graphmaintoolbar toolbarrow col-12'});
var button = new Element("button", {'id':'expandbutton','title':'Resize the Map', "class":"d-none"});
var icon = new Element("img", {'id':'expandicon', 'src':"https://big.evidence-hub.net/images/enlarge2.gif", 'title':'Resize the Map'});
button.insert(icon);
tb2.insert(button);
var link = new Element("a", {'id':'expandlink', 'title':'Resize the Map', "class":"col-auto map-btn"});
link.insert(' Enlarge Map');
var handler = function() {
if ($('header').style.display == "none") {
$('linkbuttonsvn').update(' Enlarge Map');
reduceMap(contentarea, forcedirectedGraph);
} else {
$('linkbuttonsvn').update(' Reduce Map');
enlargeMap(contentarea, forcedirectedGraph);
}
};
Event.observe(link,"click", handler);
Event.observe(button,"click", handler);
tb2.insert(link);
var zoomOut = new Element("button", {'class':'btn btn-link', 'title':'Zoom out'});
zoomOut.insert(' Zoom out');
var zoomOuthandler = function() {
zoomFD(forcedirectedGraph, 5.0);
};
Event.observe(zoomOut,"click", zoomOuthandler);
tb2.insert(zoomOut);
var zoomIn = new Element("button", {'class':'btn btn-link', 'title':'Zoom in'});
zoomIn.insert(' Zoom in');
var zoomInhandler = function() {
zoomFD(forcedirectedGraph, -5.0);
};
Event.observe(zoomIn,"click", zoomInhandler);
tb2.insert(zoomIn);
var zoom1to1 = new Element("button", {'class':'btn btn-link', 'title':'Zoom this network graph to 100% and center on the Focal item'});
zoom1to1.insert(' 1:1 focus');
var zoom1to1handler = function() {
zoomFDFull(forcedirectedGraph);
};
Event.observe(zoom1to1,"click", zoom1to1handler);
tb2.insert(zoom1to1);
var zoomFit = new Element("button", {'class':'btn btn-link', 'title':'Scale graph down if required and move to make it all fit in the visible area'});
zoomFit.insert(' Fit all');
var zoomFithandler = function() {
zoomFDFit(forcedirectedGraph);
};
Event.observe(zoomFit,"click", zoomFithandler);
tb2.insert(zoomFit);
var printButton = new Element("button", {'class':'btn btn-link', 'title':'Print this network graph'});
printButton.insert(' Print this network graph');
var printButtonhandler = function() {
printCanvas(forcedirectedGraph);
};
Event.observe(printButton,"click", printButtonhandler);
tb2.insert(printButton);
return tb2;
}
/**
* Create the graph toolbar for Social network graphs
*/
function createSocialGraphToolbar(forcedirectedGraph,contentarea) {
var tb2 = createBasicGraphToolbar(forcedirectedGraph,contentarea);
var button3 = new Element("button", {'id':'viewdetailbutton','class':'d-none','title':'Open the home page of the currently selected person'});
tb2.insert(button3);
var view3 = new Element("a", {'id':'viewdetaillink', "class":"map-btn", 'title':"Open the home page of the currently selected person"});
view3.insert(' Explore Selected Person');
var handler3 = function() {
var node = getSelectFDNode(forcedirectedGraph);
if (node != null && node != "") {
var userid = node.getData('oriuser').userid;
if (userid != "") {
viewUserHome(userid);
} else {
alert("Please make sure you have made a selection in the map.");
}
}
};
Event.observe(button3,"click", handler3);
Event.observe(view3,"click", handler3);
tb2.insert(view3);
var hint2 = "Show all connections for the selected link";
var link2 = "Explore Selected Link";
var button2 = new Element("button", {'id':'viewdetailbutton',"class":"d-none",'title':hint2});
tb2.insert(button2);
// console.log(hint);
var view = new Element("a", {'id':'viewdetaillink', "class":"map-btn", 'title': hint2});
var spancontent = "";
view.insert(" "+link2+"");
var handler2 = function() {
var adj = getSelectFDLink(forcedirectedGraph);
var connectionids = adj.getData('connections');
if (connectionids != "") {
showMultiConnections(connectionids);
} else {
alert("Please make sure you have made a selection in the map.");
}
};
Event.observe(button2,"click", handler2);
Event.observe(view,"click", handler2);
tb2.insert(view);
return tb2;
}
/**
* Create the graph toolbar for Node network graphs
*/
function createGraphToolbar(forcedirectedGraph,contentarea) {
var tb2 = createBasicGraphToolbar(forcedirectedGraph,contentarea);
var hint2 = "Open the full details page for the currently selected item";
var link2 = "Explore Selected Item";
var button2 = new Element("button", {'id':'viewdetailbutton','class':'btn btn-link','title':hint2});
button2.insert(" "+link2+"");
tb2.insert(button2);
var handler2 = function() {
var node = getSelectFDNode(forcedirectedGraph);
if (node != null && node != "") {
var nodeid = node.id;
var nodetype = node.getData('nodetype');
var width = getWindowWidth();
var height = getWindowHeight()-20;
viewNodeDetails(nodeid, nodetype, width, height);
} else {
alert("Please make sure you have made a selection in the map.");
}
};
Event.observe(button2,"click", handler2);
var hint3 = "Open the Author home page for the currently selected item";
var link3 = "Explore Author of Selected Item";
var button3 = new Element("button", {'id':'viewdetailbutton','class':'btn btn-link','title':hint3});
button3.insert(" "+link3+"");
tb2.insert(button3);
var handler3 = function() {
var node = getSelectFDNode(forcedirectedGraph);
if (node != null && node != "") {
var userid = node.getData('oriuser').userid;
if (userid != "") {
viewUserHome(userid);
} else {
alert("Please make sure you have made a selection in the map.");
}
}
};
Event.observe(button3,"click", handler3);
return tb2;
}
/**
* Calulate the width and height of the visible graph area
* depending if it is reduced or enlarged at present.
*/
function resizeFDGraph(graphview, contentarea, withInner){
if ($('header')&& $('header').style.display == "none") {
var width = $(contentarea).offsetWidth - 35;
var height = getWindowHeight();
//alert(height);
if ($('graphkeydivtoolbar')) {
height -= $('graphkeydivtoolbar').offsetHeight;
}
if ($('graphmaintoolbar')) {
height -= $('graphmaintoolbar').offsetHeight;
}
//if ($('nodearealineartitle')) {
// height -= $('nodearealineartitle').offsetHeight;
//}
height -= 20;
//alert(height);
$(graphview.config.injectInto+'-outer').style.width = width+"px";
$(graphview.config.injectInto+'-outer').style.height = height+"px";
//if (withInner) {
resizeFDGraphCanvas(graphview, width, height);
//}
} else {
var size = calulateInitialGraphViewport(contentarea)
$(graphview.config.injectInto+'-outer').style.width = size.width+"px";
$(graphview.config.injectInto+'-outer').style.height = size.height+"px";
//if (withInner) {
resizeFDGraphCanvas(graphview, width, height);
//}
}
// GRAB FOCUS
graphview.canvas.getPos(true);
}
function calulateInitialGraphViewport(areaname) {
var w = $(areaname).offsetWidth - 30;
var h = getWindowHeight();
//alert(h);
if ($('header')) {
h -= $('header').offsetHeight;
}
// The explore views toolbar
if ($('nodearealineartitle')) {
h -= $('nodearealineartitle').offsetHeight;
}
if ($('headertoolbar')) {
h -= $('headertoolbar').offsetHeight;
h -= 30;
}
if ($('graphkeydivtoolbar')) {
h -= $('graphkeydivtoolbar').offsetHeight;
}
if ($('graphmaintoolbar')) {
h -= $('graphmaintoolbar').offsetHeight;
}
// Main social Network
if ($('tabs')) { // +user social uses this
h -= $('tabs').offsetHeight;
}
if ($('tab-content-user-title')) {
h -= $('tab-content-user-title').offsetHeight;
h -= 35;
}
if ($('tab-content-user-search')) {
h -= $('tab-content-user-search').offsetHeight;
}
if ($('usertabs')) {
h -= $('usertabs').offsetHeight;
}
// User social network
if ($('context')) {
h -= $('context').offsetHeight;
}
if ($('tab-content-user-bar')) {
h -= $('tab-content-user-bar').offsetHeight;
h -= 20;
}
//alert(h);
return {width:w, height:h};
}
/**
* Called to set the screen to standard view
*/
function reduceMap(contentarea, forcedirectedGraph) {
if ($('header')) {
$('header').style.display="flex";
}
// The explore views toolbar
if ($('headertoolbar')) {
$('headertoolbar').style.display="flex";
}
if ($('nodearealineartitle')) {
$('nodearealineartitle').style.display="flex";
}
// Main social Network
if ($('tabs')) { // +user social uses this
$('tabs').style.display="flex";
}
if ($('tab-content-user-title')) {
$('tab-content-user-title').style.display="flex";
}
if ($('tab-content-user-search')) {
$('tab-content-user-search').style.display="flex";
}
if ($('usertabs')) {
$('usertabs').style.display="flex";
}
// User social network
if ($('context')) {
$('context').style.display="flex";
}
if ($('tab-content-user-bar')) {
$('tab-content-user-bar').style.display="flex";
}
resizeFDGraph(forcedirectedGraph, contentarea, true);
}
/**
* Called to remove some screen realestate to increase map area.
*/
function enlargeMap(contentarea, forcedirectedGraph) {
if ($('header')) {
$('header').style.display="none";
}
// The explore views toolbar
if ($('headertoolbar')) {
$('headertoolbar').style.display="none";
}
if ($('nodearealineartitle')) {
$('nodearealineartitle').style.display="none";
}
// Main social Network
if ($('tabs')) { // +user social uses this
$('tabs').style.display="none";
}
if ($('tab-content-user-title')) {
$('tab-content-user-title').style.display="none";
}
if ($('tab-content-user-search')) {
$('tab-content-user-search').style.display="none";
}
if ($('usertabs')) {
$('usertabs').style.display="none";
}
// User social network
if ($('context')) {
$('context').style.display="none";
}
if ($('tab-content-user-bar')) {
$('tab-content-user-bar').style.display="none";
}
resizeFDGraph(forcedirectedGraph, contentarea, true);
}
/**
* Called by the Applet to open the applet help
*/
function showHelp() {
loadDialog('help', URL_ROOT+'help/networkmap.php');
}
/**
* Called by the Applet to go to the home page of the given userid
*/
function viewUserHome(userid) {
var width = getWindowWidth();
var height = getWindowHeight()-20;
loadDialog('userdetails', URL_ROOT+"user.php?userid="+userid, width,height);
}
/**
* Called by the Applet to go to the multi connection expanded view for the given connection
*/
function showMultiConnections(connectionids) {
loadDialog("multiconnections", URL_ROOT+"ui/popups/showmulticonns.php?connectionids="+connectionids, 790, 450);
}
/**
* Check if the current brwoser supports HTML5 Canvas.
* Return true if it does, else false.
*/
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}