Skip to content

M
memiescape
Commit 837babb1 authored by qlobbe's avatar qlobbe
Browse files
Options

working on the compas

parent 22a07b08
Show whitespace changes
Inline Side-by-side
Showing with 254 additions and 65 deletions
index.html
View file @ 837babb1
......@@ -6,6 +6,13 @@
<!-- lib CSS -->
<link rel="stylesheet" type="text/css" href="./lib/css/qlobbe.css">
<!-- lib JS -->
<script type="text/javascript" src="./lib/js/d3.min.js"></script>
<script type="text/javascript" src="./lib/js/viz.js"></script>
<script type="text/javascript" src="./lib/js/full.render.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title>Mèmiescape</title>
</head>
......@@ -14,26 +21,147 @@
<div class="title font-bold">Mèmiescape</div>
<div class="folder">
<form>
<input type="file"id="input-file">
<label for="input-file">Load a phylomemy ...</label>
<input type="submit" value="Draw"></input>
</form>
<!-- Nous avons ici notre label et l'input afférent -->
<label for="file" class="label-file">Choisir une image</label>
<input id="file" class="input-file" type="file">
<label for="file-path" class="input-file">load a phylomemy →</label>
<input type="file" id="file-path">
<label id="file-name" class="input-name"></label>
<button id="draw" class="input-draw">draw</button>
</div>
<div class="info"></div>
<div class="timeline">Timeline</div>
<div class="compass">Compass</div>
<div class="phylomemy">Phylomemy</div>
<div class="counter font-small">
<div id="count" class="inline"></div>
<div id="branch-name" class="inline"></div>
</div>
<div id="selector" class="branch-selector"></div>
<div class="compass"></div>
<div class="phylomemy" id="#phylo">Phylomemy</div>
<div class="focus">Focus</div>
<div class="footer font-bold font-small">iscpif // cnrs // 2019</div>
</body>
<script type="text/javascript">
// display the Draw button after loading a phylo
document.querySelector("#file-path").onchange = function(){
document.querySelector("#file-name").textContent = this.files[0].name;
document.querySelector("#draw").style.display = "inline-block";
}
// draw the phylo
document.querySelector("#draw").onclick = function() {
var file = document.getElementById("file-path").files[0];
var reader = new FileReader();
reader.onload = (function(f) {
return function(e) {
var viz = new Viz();
viz.renderJSONObject(e.target.result).then(function(json) {
draw(json)
});
};
})(file);
reader.readAsText(file, "UTF-8");
}
function drawCompass(peaks,groups,periods) {
/*
* branch selector
*/
ReactDOM.render(React.createElement(counter, {
branchCount: peaks.length,
groupCount: groups.length,
from: periods[0].from,
to: periods[periods.length -1].to
}), document.getElementById('count'));
var $container = $('#selector'),
width = $container.width(),
height = $container.height();
var svg1 = d3.select("#selector")
.append("svg")
.attr("width",'100%')
.attr("height",'100%')
.attr('preserveAspectRatio','xMinYMin')
.attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
.append("g");
var w = 0.004 * width,
p = 0.5 * w;
while (peaks.length * (w + p) > width) {
w = w - 1;
}
for (var i = 0; i < peaks.length; i++) {
svg1.append("rect")
.attr("x", i * (w + p))
.attr("y", 0)
.attr("width",w)
.attr("height","100%")
.attr("class","branch-rect")
.attr("label",peaks[i].label.replace("|","//"))
.attr("groups",Math.floor(peaks[i].nbGroups))
.on("mouseover", function(d) {
ReactDOM.render(React.createElement(branchName, {
name: " • " + d3.select(this).attr("label"),
groups: " • " + d3.select(this).attr("groups") + " groups "
}), document.getElementById('branch-name'));
})
.on("mouseout", function(d) {
ReactDOM.render(React.createElement(branchName, {
name: ''
}), document.getElementById('branch-name'));
});
}
svg1.append("text")
.attr("id","branch-name")
.attr("class","font-small")
.attr("x",peaks.length * (w + p) + p)
.attr("y","50%")
.attr("dy","3px");
/*
* compass
*/
}
function draw(dotData) {
var peaks = dotData.objects.filter(node => node.nodeType == "peak")
var groups = dotData.objects.filter(node => node.nodeType == "group")
var periods = dotData.objects.filter(node => node.nodeType == "period")
drawCompass(peaks,groups,periods)
}
</script>
<!-- lib react -->
<script src="./lib/js/react.development.js"></script>
<script src="./lib/js/react-dom.development.js"></script>
<script src="react-elements.js"></script>
</html>
\ No newline at end of file
lib/css/qlobbe.css
View file @ 837babb1
......@@ -21,20 +21,48 @@
/* classes */
.branch-rect {
fill: #0d1824;
cursor: pointer;
}
.branch-rect:hover {
fill:#f8381f;
}
.branch-selector {
/*background: #409C78;*/
grid-column: 2 / 16;
grid-row: 3;
}
.compass {
background: #55A26C;
grid-column: 2 / 16;
grid-row: 4;
}
/*
.compass:before {
content: "";
height: 1px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
display: block;
}*/
.counter {
/*background: #409C78;*/
grid-column: 2 / 16;
grid-row: 2;
text-align: left;
}
.focus {
background: #55A26C;
grid-column: 2 / 16;
grid-row: 4;
grid-row: 6;
}
.folder {
grid-column: 4 / 16;
grid-column: 2 / 16;
grid-row: 1;
}
......@@ -44,43 +72,100 @@
}
.font-small {
color: #0d1824;
font-size: 12px;
}
.footer {
grid-column: 2 / 16;
grid-row: 5;
grid-row: 7;
}
.inline {
display: inline-block;
}
.input-draw {
background-color: white;
border: 1.5px solid #0d1824;
display: none;
cursor: pointer;
}
.input-draw:hover {
background-color: #0d1824;
color: white;
}
.input-file {
border-bottom: 1.5px solid #0d1824;
display: inline-block;
cursor: pointer;
}
.input-name {
font-style: italic;
opacity: 0.7;
font-size: 14px;
padding-left: 6px;
padding-right: 6px;
}
.phylomemy {
background: #2B9087;
grid-column: 2 / 16;
grid-row: 3;
grid-row: 5;
}
.timeline {
background: #409C78;
grid-column: 1 / 2;
grid-row: 3;
grid-row: 5;
}
.title {
grid-column: 2 / 3;
grid-column: 1 / 2;
grid-row: 1;
/*background: #B9AE49;*/
}
/* elements */
body {
font-family: "Inter-Regular";
font-size: 16px;
/*margin: 1%;*/
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: 3% 10% 70% auto 3%;
grid-gap:10px;
grid-template-rows: 2% 1% 3% 5% 70% auto 2%;
grid-gap: 10px;
height: calc(100vh - 20px);
color: #0d1824;
}
/*hr {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}*/
hr.style-two {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
hr.style-one {
border: 0;
height: 1px;
background: #333;
background-image: linear-gradient(to right, #ccc, #333, #ccc);
}
#branch-name {
color: #f8381f;
}
#file-path {
display: none;
}
lib/js/utils.js deleted 100644 → 0
View file @ 22a07b08
/*
* Utils functions
*/
/* Normalize the value of the input file element */
function processInput(ele) {
var fileName = ele.val();
fileName = fileName.replace("C:\\fakepath\\", "");
ele.next('.custom-file-label').html(fileName);
document.getElementById("btn_draw").disabled = false;
}
/* Read an svg file from the input element */
function readFile(callback) {
var file = document.getElementById("get_file").files[0];
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
callback(e.target.result)
};
})(file);
reader.readAsDataURL(file);
}
/* Toggle a div after a click */
function toggleDiv(id,to) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
setTimeout(function (){
e.style.display = 'block';
}, to);
}
/* Clean the view each time you load a new phylomemy */
function clean() {
d3.select("svg").remove();
d3.select("#btn_reset").remove();
}
\ No newline at end of file
react-elements.js 0 → 100644
View file @ 837babb1
class counter extends React.Component {
render() {
return React.createElement(
"div", null,
"↱ ", this.props.branchCount, " branches • ", this.props.groupCount, " groups • from ", this.props.from, " to ", this.props.to
);
}
}
class branchName extends React.Component {
render() {
return React.createElement(
"div", null,
this.props.name, this.props.groups
);
}
}
\ No newline at end of file
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