Skip to content

P
purescript-gargantext
Commit 100d4ad8 authored by Alexandre Delanoë's avatar Alexandre Delanoë
Browse files
Options

[PHYLO] Viz.

parent d9080405
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 229 additions and 0 deletions
dist/phyloscape/index.html 0 → 100644
View file @ 100d4ad8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- lib CSS -->
<link rel="stylesheet" type="text/css" href="./lib/css/qlobbe.css">
<!-- lib JS -->
<script type="text/javascript" src="./lib/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="./lib/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./lib/js/d3.min.js"></script>
<title>Mèmiescape</title>
</head>
<body>
<div id="main">
<div id="viz"></div>
</div>
<script type="text/javascript">
/*
* Draw functions
*/
function draw(phyloData) {
// set up margin
var margin = {t:0, r:30, b:15, l:0};
var w = document.getElementById("viz").offsetWidth - margin.l - margin.r,
h = $(window).height() - margin.t - margin.b;
// draw svg view
var svg = d3.select("#viz").append("svg")
.attr("width",w)
.attr("height",h);
var g = svg.append("g").attr("id","svg-view");
// draw phylomemy from an url
d3.xml(phyloData).then(data => {
var newNodes = document.importNode(data.documentElement,true);
svg.attr("viewBox", newNodes.getAttribute("viewBox"));
g.each(function(){
this.appendChild(newNodes);
})
svg.call(zoom)
d3.select("#viz")
.append('button')
.attr("type","button")
.attr("id","btn_reset")
.attr("class","btn btn-light")
.text("reset");
d3.select("#btn_reset").on("click", reset);
})
// set up d3 zoom
var transform = d3.zoomIdentity;
zoom = d3.zoom()
.scaleExtent([1, 50])
.on("zoom", zoomed);
function zoomed() {
g.attr("transform", d3.event.transform);
}
function reset() {
svg.transition().call(zoom.transform, d3.zoomIdentity);
}
}
/*
* Control functions
*/
window.onload = function() {
clean()
var url = window.location.href;
// console.log(url);
readUrl(url)
};
/* Get a Phylo file from an URL */
function readUrl(url) {
var node = url.match(/nodeId=(.*)/);
if (node != null) {
fetch("http://localhost:8008" + "/api/v1.0/node/" + node[1] + "/phylo")
//fetch("https://dev.gargantext.org" + "/api/v1.0/node/" + node[1] + "/phylo")
//fetch(window.location.origin + "/api/v1.0/node/" + node[1] + "/phylo")
.then(res => res.blob())
.then(blob => {
var reader = new FileReader();
reader.onload = (function(phyloFile) {
return function(e) {
draw(e.target.result)
};
})(blob);
reader.readAsDataURL(blob);
});
} else {
try {
throw new Error("Unable to find a nodeId");
} catch (e) {
console.log(e.name + ": " + e.message);
}
}
}
/* Clean the view each time you load a new phylomemy */
function clean() {
d3.select("svg").remove();
d3.select("#btn_reset").remove();
}
</script>
</body>
</html>
dist/phyloscape/lib/css/qlobbe.css 0 → 100644
View file @ 100d4ad8
html,body {
height: 100%;
}
hr {
border-color: #555555;
}
.alert-label {
margin-bottom: 0px;
}
.custom-file-label {
overflow: hidden;
border-color: rgb(101, 101, 127);
}
.drop-down-menu, .drop-down-menu:hover, .drop-down-menu:active, .drop-down-menu:focus {
color: #0d1824;
outline: 0;
}
.rotate {
-moz-transition: all .15s linear;
-webkit-transition: all .15s linear;
transition: all .15s linear;
}
.rotate.down {
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
.title {
color: #0d1824;
font-family: 'Montserrat', sans-serif;
text-rendering: optimizeLegibility;
font-weight: 600;
font-style: normal;
}
#btn_draw {
background-color: #63c4e2;
border-color: rgb(101, 101, 127);
}
#btn_reset {
position: absolute;
left: 15px;
top: 15px;
border-color: #555555;
}
#layer-radio {
display: none;
list-style-type: none;
padding-left: 5px;
padding-top: 10px;
}
#left_view {
padding-top: 15px;
background-color: rgb(240, 240, 243);
border-right: 1px solid #555555;
color: #0d1824;
font-family: 'Open Sans', sans-serif;
text-rendering: optimizeLegibility;
}
#options {
display: none;
}
#processing {
color: #0d1824;
background-color: rgb(240, 240, 243);
border-color: rgb(101, 101, 127);
display: none;
}
#right_view {
padding-top: 15px;
background-color: #FFF;
position: relative;
}
dist/phyloscape/lib/js/bootstrap.min.js 0 → 100644
View file @ 100d4ad8
This diff is collapsed.
dist/phyloscape/lib/js/d3.min.js 0 → 100644
View file @ 100d4ad8
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/phyloscape/lib/js/jquery-3.4.1.min.js 0 → 100644
View file @ 100d4ad8
This diff is collapsed.
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