Skip to content
Permalink
Browse files

Merge branch 'feature-c/browser-rework-update' into 'dev'

Feature c/browser rework update

Closes #2462

See merge request vidjil/vidjil!541
  • Loading branch information
mikael-s committed Dec 6, 2019
2 parents d6a49af + bd6e09b commit 2ef3187e5a30b01f37f538f67fcce9f6a1e06dd9
@@ -281,6 +281,8 @@ <h2>Add clones from sequences</h2>
<div id="fps" style="display: none"> </div>
<div id="header_messages" class="message_container header"></div>

<div id='updateIcon' style="display: none; align-items: center; background: transparent; width:1px"></div>

<div id='live-ajax' style="display: flex; align-items: center">
<div id='live-ajax-msg'>
</div>
@@ -463,6 +463,7 @@ Builder.prototype = {
build_top_container: function () {
var self = this;
var parent = document.getElementById("top_info");
if (parent == null) return;
parent.removeAllChildren();
parent.appendChild(document.createTextNode(this.m.getPrintableAnalysisName()));

@@ -74,7 +74,8 @@
* */
function Graph(id, model, database) {
//
View.call(this, model);
View.call(this, model);
this.useSmartUpdateElemStyle = false;

this.id = id;
this.resizeW = 1; //coeff d'agrandissement/réduction largeur
@@ -319,7 +320,7 @@ Graph.prototype = {
this.text_position_x = 60;
this.text_position_x2 = div_width - 60;

this.update(speed);
this.smartUpdate(speed);
},

/* ************************************************ *
@@ -331,22 +332,11 @@ Graph.prototype = {
* */
update : function (speed) {
speed = typeof speed !== 'undefined' ? speed : 500;
var startTime = new Date()
.getTime();
var elapsedTime = 0;

this.initAxis()
.initData()
.updateRes()
.updateClones()
.draw(speed);

elapsedTime = new Date()
.getTime() - startTime;

// console.log("update Graph: " + elapsedTime + "ms");

return this
},

/* update resolution curves
@@ -431,7 +421,7 @@ Graph.prototype = {
document.getElementById("clones_container")
.appendChild(line);
}
this.drawClones(0);
this.drawClones(0, list);

return this
},
@@ -1254,7 +1244,7 @@ Graph.prototype = {
selected_clones = this.g_clone;
if (typeof list != "undefined"){
selected_clones = this.g_clone.filter(function(d, i) {
if (list.indeOf(d.id) != -1) return true;
if (list.indexOf(d.id) != -1) return true;
return false
});
}
@@ -1381,7 +1371,7 @@ Graph.prototype = {

shouldRefresh: function() {
this.init();
this.update();
this.smartUpdate();
this.resize();
}

@@ -31,6 +31,41 @@
*
*/

function CloneDom(div) {
var self=this;

this.div_elem = div;
this.div = {};
this.div_content = {};
}

CloneDom.prototype = {

getDiv: function(divName){
//if first time => find the div in dom and store it
if (typeof (this.div[divName]) == "undefined")
this.div[divName] = this.div_elem.getElementsByClassName(divName)[0];

return this.div[divName];
},

updateDivContent: function(divName, newContent){
var div = this.getDiv(divName);

var currentContent = this.div_content[divName];
if (currentContent != newContent){
div.innerHTML = newContent;
this.div_content[divName] = newContent;
}
},

clearDivContent: function(divName){
var div = this.getDiv(divName);

div.removeAllChildren();
this.div_content[divName] = '';
}
}

/**
* List view - build a list of clones/data and keep them up to date with the model
@@ -157,7 +192,7 @@ List.prototype = {
div.id = i;

div_list_clones.appendChild(div);
this.index[i] = div;
this.index[i] = new CloneDom(div);
}

for (var j = 0; j < this.m.clones.length; j++) {
@@ -345,21 +380,14 @@ List.prototype = {
* update all content for list and data list
* */
update: function () {
var startTime = new Date()
.getTime();
var elapsedTime = 0;


var list = [];
for (var i = 0; i < this.m.clones.length; i++) {
list.push(i);
}
this.updateElem(list);
this.update_data_list()

elapsedTime = new Date()
.getTime() - startTime;
//console.log("update List: " + elapsedTime + "ms");

//TODO check order
document.getElementById("list_sort_select").selectedIndex = 0;
},
@@ -412,7 +440,7 @@ List.prototype = {
if (clone.hasSizeConstant())
span_name.className += " cloneName";
span_name.ondblclick = function () {
self.editName(cloneID, this);
self.editName(cloneID);
}
span_name.onclick = function (e) {
self.clickList(e, cloneID);
@@ -458,7 +486,9 @@ List.prototype = {
var clone = this.m.clone(cloneID);

var self = this;
var div_elem = this.index[cloneID];

var cloneDom = this.index[cloneID];
var div_elem = cloneDom.div_elem;

// pas testé; vraiment necessaire ?
if (!( (clone.isActive() && this.m.clusters[cloneID].length !== 0) ||
@@ -477,34 +507,40 @@ List.prototype = {
div_elem.style.display = "block";

//complete namebox/cloneName
var span_name = div_elem.getElementsByClassName("nameBox")[0];
var span_name = cloneDom.getDiv("nameBox");
if (clone.hasSizeConstant())
span_name = div_elem.getElementsByClassName("cloneName")[0];
span_name = cloneDom.getDiv("cloneName");
if (typeof span_name == "undefined") return false;
if (typeof span_name == "undefined") console.log(cloneID);
span_name.innerHTML = clone.getShortName();
span_name.title = clone.getNameAndCode();
span_name.style.color = clone.getColor();

if (clone.hasSizeConstant())
cloneDom.updateDivContent("cloneName", clone.getShortName());
else
cloneDom.updateDivContent("nameBox", clone.getShortName());

//update clone axis
var span_axis = div_elem.getElementsByClassName("axisBox")[0];
var span_axis = cloneDom.getDiv("axisBox");
span_axis.style.color = clone.getColor();
var axis = this.selectedAxis;
span_axis.removeAllChildren();
span_axis.appendChild(axis.pretty ? axis.pretty(axis.fct(clone)) : document.createTextNode(axis.fct(clone)));
cloneDom.updateDivContent("axisBox", axis.pretty ? axis.pretty(axis.fct(clone)).outerHTML : document.createTextNode(axis.fct(clone)).outerHTML)
//span_axis.appendChild(axis.pretty ? axis.pretty(axis.fct(clone)) : document.createTextNode(axis.fct(clone)));
// span_axis.setAttribute('title', clone.getPrintableSize());

//update cluster icon
var span_cluster = div_elem.getElementsByClassName("clusterBox")[0];
span_cluster.removeAllChildren();
var span_cluster = cloneDom.getDiv("clusterBox");

if (this.m.clusters[cloneID].length > 1) {
if (clone.split) {
span_cluster.onclick = cluster_hide;
span_cluster.appendChild(icon('icon-minus', 'Hide the subclones'));
cloneDom.updateDivContent("clusterBox", icon('icon-minus', 'Hide the subclones').outerHTML)
//span_cluster.appendChild(icon('icon-minus', 'Hide the subclones'));
this.showClusterContent(cloneID, false)
} else {
span_cluster.onclick = cluster_show;
span_cluster.appendChild(icon('icon-plus', 'Show the subclones'));
cloneDom.updateDivContent("clusterBox", icon('icon-plus', 'Show the subclones').outerHTML)
//span_cluster.appendChild(icon('icon-plus', 'Show the subclones'));
this.hideClusterContent(cloneID, false)
}
self.div_cluster(document.getElementById("cluster" + cloneID), cloneID);
@@ -614,14 +650,14 @@ List.prototype = {
* @param {integer} cloneID - clone index
* @param {dom_object} elem - div where will be the edit field
* */
editName: function (cloneID, elem) {
editName: function (cloneID) {
var self = this;
if (document.getElementById("new_name")) {
this.update();
}
var divParent = elem;
var divParent = this.index[cloneID].getDiv("nameBox");
var old_event = divParent.onclick;
divParent.removeAllChildren();
this.index[cloneID].clearDivContent("nameBox");

if (cloneID[0] == 's')
cloneID = cloneID.substr(3);
@@ -656,6 +692,7 @@ List.prototype = {
a.onclick = function (event) {
event.preventDefault()
event.stopPropagation()
self.index[cloneID]= new CloneDom(self.index[cloneID].div_elem);
var newName = document.getElementById("new_name")
.value;
self.m.clone(cloneID).changeName(newName);
@@ -668,7 +705,7 @@ List.prototype = {
/**
* */
buildElem: function (cloneID) {
var div = this.index[cloneID];
var div = this.index[cloneID].div_elem;
div.style.display = "block";
if (!this.m.clone(cloneID).isActive()) div.style.display = "none";
div.removeAllChildren();
@@ -690,7 +727,7 @@ List.prototype = {
updateElemStyle: function (list) {
for (var i = 0; i < list.length; i++) {

var div = this.index[list[i]];
var div = this.index[list[i]].div_elem;

var clone = this.m.clone(list[i])

@@ -834,13 +871,10 @@ List.prototype = {
showClusterContent: function(cloneID, update){
var self = this
var fct;
if (update == true || update == undefined) {
fct = function () { self.m.updateElem([cloneID]) }
} else if (update == false) {
fct = function(){}
}
if (update == true || update == undefined)
self.m.updateElem([cloneID])
$("#cluster" + cloneID)
.show(50, fct );
.show(50);
},

/**
@@ -863,13 +897,10 @@ List.prototype = {
hideClusterContent: function(cloneID, update){
var self = this
var fct;
if (update == true || update == undefined) {
fct = function () { self.m.updateElem([cloneID]) }
} else if (update == false) {
fct = function(){}
}
if (update == true || update == undefined)
self.m.updateElem([cloneID])
$("#cluster" + cloneID)
.hide(50, fct );
.hide(50);
},

/**

0 comments on commit 2ef3187

Please sign in to comment.
You can’t perform that action at this time.