ml-visjs-graph
Version:
Graph visualization for triples stored in MarkLogic, based on the VisJS Network library
1 lines • 12.5 kB
JavaScript
if(void 0===mlvisjsTpls)var mlvisjsTpls={};mlvisjsTpls["ml-visjs-graph.js/mlvisjs-graph.html"]='<div class="row mlvisjs-graph default-style">\n <div class="col-md-12 graph-controls">\n <form class="form-inline">\n <div class="checkbox physics-enabled">\n <label>\n <input type="checkbox" name="physicsEnabled" checked="checked">\n Enable Physics\n </label>\n </div>\n <div class="form-group layout">\n <label class="sr-only" class="form-control" for="layout"> Layout: </label>\n <select name="layout">\n <option value="standard">Standard</option>\n <option value="hierarchyTop">Hierarchy - Top</option>\n <option value="hierarchyBottom">Hierarchy - Bottom</option>\n <option value="hierarchyLeft">Hierarchy - Left</option>\n <option value="hierarchyRight">Hierarchy - Right</option>\n </select>\n </div>\n </form>\n </div>\n <vis-network class="col-md-12"></vis-network>\n</div>\n';var vis=vis||require("vis"),mlvisjs=function(){"use strict";var t=["afterDrawing","animationFinished","beforeDrawing","blurEdge","blurNode","click","configChange","deselectEdge","deselectNode","doubleClick","dragEnd","dragging","dragStart","hidePopup","hold","hoverEdge","hoverNode","initRedraw","oncontext","release","resize","select","selectEdge","selectNode","showPopup","stabilizationIterationsDone","stabilizationProgress","stabilized","startStabilizing","zoom"],n=["currentTimeTick","click","contextmenu","doubleClick","drop","mouseOver","mouseDown","mouseUp","mouseMove","groupDragged","changed","rangechange","rangechanged","select","itemover","itemout","timechange","timechanged"],s="forceAtlas2Based",a={layout:{hierarchical:!1,randomSeed:2},manipulation:{enabled:!1},interaction:{navigationButtons:!0},height:"500px",nodes:{size:30,borderWidth:2,shadow:!0,borderWidthSelected:6,color:{background:"white"},font:{size:12}},physics:{enabled:!0,solver:s,forceAtlas2Based:{gravitationalConstant:-200,centralGravity:.01,springLength:100,springConstant:.08,damping:.4,avoidOverlap:0},maxVelocity:150,minVelocity:6,stabilization:{enabled:!0,iterations:1e3,updateInterval:100,onlyDynamicEdges:!1,fit:!1},timestep:.5,adaptiveTimestep:!0},edges:{width:2,shadow:!0,arrows:{to:{enabled:!0,scaleFactor:.75}},font:{size:10,align:"top"},smooth:{type:"curvedCW",roundness:.1}}},r={},l={NW:"#848484",NE:"#428484",SW:"#844284",SE:"#848442",N:"#424284",E:"#428442",S:"#844242",W:"#424242"},p=function(e){var t=this;if(!vis||!vis.DataSet||!vis.Network)throw"Error: vis.DataSet and vis.Network not found, required by mlvisjs";t.container=e;var o=new vis.DataSet,i=new vis.DataSet,n={nodes:o,edges:i};t.nodes=o,t.edges=i,t.options=d(a),t.orbColors=d(l),t.physics=!0,t.solver=s,t.network=new vis.Network(t.container,n,d(t.options)),t.setEvents(),t.setLayout(),t.setPhysics(),t.setSolver()};p.prototype={setData:function(e,t,o,i){var n,s,a,r=this;if(0<arguments.length){if(r.nodes&&e)n=r.nodes.getIds(),s=e.map(function(e){return e.id}),a=n.filter(function(e){return!s.includes(e)}),r.nodes.remove(a),r.nodes.update(e),t&&r.nodes.setOptions(d(t));else if(e)throw"Error: nodes DataSet not initialized";if(r.edges&&o)n=r.edges.getIds(),s=o.map(function(e){return e.id}),a=n.filter(function(e){return!s.includes(e)}),r.edges.remove(a),r.edges.update(o),i&&r.edges.setOptions(d(i));else if(o)throw"Error: edges DataSet not initialized"}else{var l={nodes:e=new vis.DataSet,edges:o=new vis.DataSet};r.nodes=e,r.edges=o,t&&r.nodes.setOptions(d(t)),i&&r.edges.setOptions(d(i)),r.network&&(r.network.setData(l),r.network.fit())}},setEvents:function(e){var o,v=this;v.network&&(0===arguments.length&&t.forEach(function(e){v.network.off(e)}),(e=e||{}).stabilized=e.stabilized||function(){},e.afterDrawing=e.afterDrawing||function(){},c(e,function(t,e){if(h(t))switch(String(e)){case"click":v.network.on(e,function(e){o=!1,window.setTimeout(function(){o||t.call(v,e)},300)});break;case"doubleClick":v.network.on(e,function(e){o=!0,t.call(v,e)});break;case"afterDrawing":v.network.on(e,function(e){var m=e,o=v.network.getPositions();v.nodes.forEach(function(e){var u=o[e.id];if(u){e.orbs=e.orbs||{};var t=e.edgeCount||e.linkCount;t&&0<t&&!e.orbs.NW&&(e.orbs.NW={label:""+t}),c(e.orbs,function(e,t){var o=u.x,i=u.y;t.match(/W/)?o-=t.match(/[NS]/)?22:30:t.match(/E/)&&(o+=t.match(/[NS]/)?22:30),t.match(/N/)?i-=t.match(/[WE]/)?22:30:t.match(/S/)&&(i+=t.match(/[WE]/)?22:30);var n=e.label,s=e.font||"10px Arial",a=n&&f(n,s)||{width:e.width||10,height:e.height||10},r=Math.round((e.width||Math.max(a.width,a.height)||10)/2)+3,l=e.lineStyle||"white",c=e.background||v.orbColors[t],h=e.lineWidth||1,p=e.textColor||"white";if(m.strokeStyle=l,m.fillStyle=c,m.lineWidth=h,m.circle(o,i,Math.max(r,10)),m.fill(),m.stroke(),n)m.font=s,m.fillStyle=p,m.fillText(n,o-a.width/2,i+1);else if(e.image){var d=new Image;d.src=e.image,m.drawImage(d,o-a.width/2,i-a.height/2,a.width,a.height)}})}}),t.call(v,e)});break;case"onload":t(v);break;default:v.network.on(e,t)}}))},setOptions:function(e){var n=this;void 0!==e?(n.options=n.options||d(a),Object.keys(e).forEach(function(o){var i=e[o];"object"!=typeof i||null===i||Array.isArray(i)||"[object Date]"===Object.prototype.toString.call(i)?n.options[o]=i:(n.options[o]=n.options[o]||{},Object.keys(i).forEach(function(e){var t=i[e];n.options[o][e]=d(t)}))})):n.options=d(a),n.network&&n.network.setOptions(d(n.options))},setOrbColors:function(e){var o=this;void 0!==e?c(e,function(e,t){o.orbColors[t]=e}):o.orbColors=d(l),o.network&&o.network.redraw()},setPhysics:function(e){var t=this;t.physics=void 0===e||e,t.network&&(t.options.physics=t.options.physics||{},t.options.physics.enabled=t.physics,t.network.setOptions({physics:{enabled:t.physics}}),t.physics&&t.network.stabilize())},setSolver:function(e){var t=this;t.solver=void 0!==e?e:s,t.options.physics=t.options.physics||{},t.options.physics.solver=t.solver,t.options.layout=t.options.layout||{},t.options.layout.hierarchical=t.options.layout.hierarchical||{},t.options.layout.hierarchical.enabled="hierarchicalRepulsion"===t.solver,t.network&&(t.network.setOptions({physics:{solver:t.solver},layout:{hierarchical:{enabled:"hierarchicalRepulsion"===t.solver}}}),t.network.stabilize())},setLayout:function(e){var t=this;t.layout=void 0!==e?e:"standard",t.options.layout=t.options.layout||{},t.options.layout.hierarchical=t.options.layout.hierarchical||{},"standard"===t.layout?t.options.layout.hierarchical.enabled=!1:"hierarchyTop"===t.layout?(t.solver="hierarchicalRepulsion",t.options.layout.hierarchical={enabled:!0,direction:"UD",sortMethod:"directed"},t.options.edges&&t.options.edges.smooth&&"vertical"===t.options.edges.smooth.type&&(t.options.edges.smooth.type="horizontal")):"hierarchyBottom"===t.layout?(t.solver="hierarchicalRepulsion",t.options.layout.hierarchical={enabled:!0,direction:"DU",sortMethod:"directed"},t.options.edges&&t.options.edges.smooth&&"vertical"===t.options.edges.smooth.type&&(t.options.edges.smooth.type="horizontal")):"hierarchyLeft"===t.layout?(t.solver="hierarchicalRepulsion",t.options.layout.hierarchical={enabled:!0,direction:"LR",sortMethod:"directed"},t.options.edges&&t.options.edges.smooth&&"horizontal"===t.options.edges.smooth.type&&(t.options.edges.smooth.type="vertical")):"hierarchyRight"===t.layout&&(t.solver="hierarchicalRepulsion",t.options.layout.hierarchical={enabled:!0,direction:"RL",sortMethod:"directed"},t.options.edges&&t.options.edges.smooth&&"horizontal"===t.options.edges.smooth.type&&(t.options.edges.smooth.type="vertical")),t.options.physics=t.options.physics||{},t.options.physics.solver=t.solver,t.network&&(t.network.setOptions({physics:{solver:t.solver},layout:{hierarchical:d(t.options.layout.hierarchical)},edges:{smooth:d(t.options.edges.smooth)}}),t.network.stabilize())}};var e=function(e,t,o,s,a){var r=this;r.container=e,r.templateUri=t||"ml-visjs-graph.js/mlvisjs-graph.html",r.templateCache=o;var i,n,l,c,h=function(e,t){e.innerHTML=t;var o=e.getElementsByTagName("vis-network");if(1===o.length){r.network=new p(o[0]);var i=e.querySelectorAll('input[name="physicsEnabled"]');1===i.length?(i[0].checked=r.network.physics,i[0].onchange=function(e){e.preventDefault(),r.network.setPhysics(i[0].checked)}):1<i.length?a("Only one physicsEnabled input supported in the graph template"):a("No physicsEnabled input found in the graph template");var n=e.querySelectorAll('select[name="layout"]');1===n.length?(n[0].value=r.network.layout,n[0].onchange=function(e){e.preventDefault(),r.network.setLayout(n[0].value)}):1<n.length?a("Only one layout selector supported in the graph template"):a("No layout selector found in the graph template"),s(r)}else 1<o.length?a("Only one vis-network supported in the graph template"):a("No vis-network found in the graph template")};r.template=o&&o.get(r.templateUri),r.template?h(r.container,r.template):"ml-visjs-graph.js/mlvisjs-graph.html"===r.templateUri?(r.template=mlvisjsTpls["ml-visjs-graph.js/mlvisjs-graph.html"],r.templateCache&&r.templateCache.put(r.templateUri,r.template),h(r.container,r.template)):(i=r.templateUri,n=function(e){r.template=e,r.templateCache&&r.templateCache.put(r.templateUri,r.template),h(r.container,r.template)},l=function(e){a(e)},(c=new XMLHttpRequest).open("GET",i,!0),c.onreadystatechange=function(){4===c.readyState&&(200<=c.status&&c.status<400?n(c.responseText):l(c.responseText))},c.send(null))};e.prototype={setPhysics:function(e){var t=this.container.querySelectorAll('input[name="physicsEnabled"]');1===t.length&&(t[0].checked=e,this.network&&this.network.setPhysics(e))},setLayout:function(e){var t=this.container.querySelectorAll('select[name="layout"]');1===t.length&&(t[0].value=e,this.network&&this.network.setLayout(e))},setStyling:function(e){this.styling=e;var t=this.container.firstElementChild;t.className=t.className.split(" ").filter(function(e){return e.indexOf("-style")<0}).join(" ")+" "+e+"-style"}};var o=function(e){var t=this;if(!vis||!vis.DataSet||!vis.Timeline)throw"Error: vis.DataSet and vis.Timeline not found, required by mlvisjs";t.container=e;var o=new vis.DataSet,i=new vis.DataSet;t.items=o,t.groups=i,t.options=d(r),t.timeline=new vis.Timeline(t.container,t.items,t.groups,d(t.options)),t.setEvents()};return o.prototype={setData:function(e,t,o,i){var n,s,a,r=this;if(0<arguments.length){if(r.items&&e)n=r.items.getIds(),s=e.map(function(e){return e.id}),a=n.filter(function(e){return!s.includes(e)}),r.items.remove(a),r.items.update(e),t&&r.items.setOptions(d(t));else if(e)throw"Error: items DataSet not initialized";if(r.groups&&o)n=r.groups.getIds(),s=o.map(function(e){return e.id}),a=n.filter(function(e){return!s.includes(e)}),r.groups.remove(a),r.groups.update(o),i&&r.groups.setOptions(d(i));else if(o)throw"Error: groups DataSet not initialized"}else{var l={items:e=new vis.DataSet,groups:o=new vis.DataSet};r.items=e,r.groups=o,t&&r.items.setOptions(d(t)),i&&r.groups.setOptions(d(i)),r.timeline&&(r.timeline.setData(l),r.timeline.fit())}},setEvents:function(e){var o,i=this;i.timeline&&(0===arguments.length&&n.forEach(function(e){i.timeline.off(e)}),c(e=e||{},function(t,e){if(h(t))switch(String(e)){case"click":i.timeline.on(e,function(e){o=!1,window.setTimeout(function(){o||t.call(i,e)},300)});break;case"doubleClick":i.timeline.on(e,function(e){o=!0,t.call(i,e)});break;case"onload":t(i);break;default:i.timeline.on(e,t)}}))},setOptions:function(e){var n=this;void 0!==e?(n.options=n.options||d(r),Object.keys(e).forEach(function(o){var i=e[o];"object"!=typeof i||null===i||Array.isArray(i)||"[object Date]"===Object.prototype.toString.call(i)?n.options[o]=i:(n.options[o]=n.options[o]||{},Object.keys(i).forEach(function(e){var t=i[e];n.options[o][e]=d(t)}))})):n.options=d(r),n.timeline&&n.timeline.setOptions(d(n.options))}},{Network:p,Graph:e,Timeline:o};function c(e,t,o){var i;if(e)for(i in e)e.hasOwnProperty(i)&&t.call(o,e[i],i,e);return e}function f(e,t){void 0===f.e&&(f.e=document.createElement("span")),f.e.style.font=t,f.e.innerText=e,document.body.appendChild(f.e);var o={width:f.e.offsetWidth,height:f.e.offsetHeight};return document.body.removeChild(f.e),o}function h(e){return"function"==typeof e}function d(o){return Array.isArray(o)?o.map(function(e){return d(e)}):"[object Date]"===Object.prototype.toString.call(o)?new Date(o.valueOf()):"object"==typeof o&&null!==o?Object.keys(o).reduce(function(e,t){return e[t]=d(o[t]),e},{}):o}}();("undefined"!=typeof module&&null!==module?module:{}).exports=this.mlvisjs=mlvisjs;