Team:Heidelberg/js/notebook tree

From 2014.igem.org

Revision as of 16:22, 17 October 2014 by Silvan (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

var Graph = new (function () { var self = this; var graph;

var firstDate = 1403301600;//1407861000; var date = firstDate;

var heightOfSecond = 100 / 86400; // = 300 Pixel per day?! var viewportHeight = 300 / heightOfSecond; var bufferHeight = 1000 / heightOfSecond; var scrollSpeed = 6000; // = 20 minutes

var width, height;

var nodes; var links;

var force; var fnodes = []; var flinks = [];

var chunks = {"Toolbox":[{"begin":1388786400,"end":1388530800},{"begin":1392300000,"end":1392072300},{"begin":1397206800,"end":1396951200},{"begin":1402063200,"end":1402056000},{"begin":1402329600,"end":1402234200},{"begin":1402826400,"end":1402825080},{"begin":1403289600,"end":1403172000},{"begin":1403560800,"end":1403390400},{"begin":1403857800,"end":1403789400},{"begin":1404118800,"end":1403958600},{"begin":1404393600,"end":1404388800},{"begin":1404662880,"end":1404660346},{"begin":1404924000,"end":1404849600},{"begin":1405191600,"end":1405186800},{"begin":1405452600,"end":1405447200},{"begin":1405717200,"end":1405641000},{"begin":1405980000,"end":1405980000},{"begin":1406280360,"end":1406278800},{"begin":1406541600,"end":1406539200},{"begin":1406803080,"end":1406757600},{"begin":1407067200,"end":1407067200},{"begin":1407330000,"end":1407330000},{"begin":1407589800,"end":1407580200},{"begin":1407855900,"end":1407855600},{"begin":1408116600,"end":1408115700},{"begin":1408376820,"end":1408376700},{"begin":1408636800,"end":1408636800},{"begin":1408901400,"end":1408901220},{"begin":1409170800,"end":1409170200},{"begin":1409432400,"end":1409432400},{"begin":1409695200,"end":1409695200},{"begin":1409956200,"end":1409955000},{"begin":1410217140,"end":1410215400},{"begin":1410480000,"end":1410453000},{"begin":1410771600,"end":1410771600},{"begin":1411034400,"end":1411034400},{"begin":1411295400,"end":1411295400},{"begin":1411596000,"end":1411596000},{"begin":1411857480,"end":1411855200},{"begin":1412123040,"end":1412114700},{"begin":1412393700,"end":1412380800},{"begin":1412674080,"end":1412655300},{"begin":1412940600,"end":1412905020},],"LOV":[{"begin":1388790000,"end":1388530800},{"begin":1392300000,"end":1392044400},{"begin":1402063200,"end":1402000800},{"begin":1402329600,"end":1402234200},{"begin":1402826400,"end":1402825080},{"begin":1403289600,"end":1403172000},{"begin":1403560800,"end":1403560800},{"begin":1403863200,"end":1403863200},{"begin":1404126000,"end":1404064800},{"begin":1404462720,"end":1404424800},{"begin":1404770400,"end":1404770400},{"begin":1405066800,"end":1404938700},{"begin":1405371600,"end":1405371600},{"begin":1405706400,"end":1405641000},{"begin":1405980000,"end":1405871100},{"begin":1406280360,"end":1406278800},{"begin":1406541600,"end":1406500200},{"begin":1406803080,"end":1406757600},{"begin":1407067200,"end":1407024000},{"begin":1407330000,"end":1407323460},{"begin":1407628800,"end":1407623400},{"begin":1407889800,"end":1407841200},{"begin":1408219200,"end":1408140000},{"begin":1408536900,"end":1408536000},{"begin":1408800600,"end":1408744800},{"begin":1409068800,"end":1409065200},{"begin":1409329800,"end":1409329800},{"begin":1409592000,"end":1409589000},{"begin":1409860800,"end":1409847600},{"begin":1410201000,"end":1410192000},{"begin":1410469200,"end":1410469200},{"begin":1410732000,"end":1410732000},{"begin":1411008600,"end":1410991200},{"begin":1411275480,"end":1411252200},{"begin":1411538400,"end":1411531500},{"begin":1411801200,"end":1411794960},{"begin":1412085600,"end":1412082000},{"begin":1412347680,"end":1412345340},{"begin":1412608140,"end":1412577300},{"begin":1412883900,"end":1412877600},],"DNMT1":[{"begin":1388786400,"end":1388530800},{"begin":1402063200,"end":1402000800},{"begin":1402390800,"end":1402174800},{"begin":1402826400,"end":1402581600},{"begin":1403355600,"end":1403355600},{"begin":1403863200,"end":1403820000},{"begin":1404150480,"end":1403953200},{"begin":1404489600,"end":1404424800},{"begin":1404900000,"end":1404722700},{"begin":1405720800,"end":1405615500},{"begin":1406413800,"end":1406293200},{"begin":1406916000,"end":1406656800},{"begin":1407189600,"end":1407024000},{"begin":1407485700,"end":1407321900},{"begin":1407882600,"end":1407841200},{"begin":1408573800,"end":1408399800},{"begin":1408894500,"end":1408821780},{"begin":1409608800,"end":1409349600},{"begin":1409942700,"end":1409841600},{"begin":1410215340,"end":1410199200},{"begin":1410512400,"end":1410420600},{"begin":1410782400,"end":1410781200},{"begin":1411052400,"end":1411036200},{"begin":1411313580,"end":1411232400},{"begin":1411654500,"end":1411601100},{"begin":1411916400,"end":1411916400},{"begin":1412181900,"end":1412181900},],"Lyso":[{"begin":1388790000,"end":1388530800},{"begin":1397206800,"end":1396951200},{"begin":1402063200,"end":1401984600},{"begin":1402826400,"end":1402825080},{"begin":1403289600,"end":1403101800},{"begin":1403560800,"end":1403560800},{"begin":1405706400,"end":1405706400},{"begin":1406073600,"end":1405871100},{"begin":1406754000,"end":1406642400},{"begin":1407016800,"end":1407016800},{"begin":1407279600,"end":1407263400},{"begin":1407548400,"end":1407518100},{"begin":1407848400,"end":1407799800},{"begin":1408116600,"end":1408115700},{"begin":1408399200,"end":1408312800},{"begin":1408707000,"end":1408656240},{"begin":1409004000,"end":1408834560},{"begin":1409324400,"end":1409320800},{"begin":1409608800,"end":1409603400},{"begin":1409922000,"end":1409768100},{"begin":1410296400,"end":1410213600},{"begin":1410624000,"end":1410618600},{"begin":1410942600,"end":1410904800},{"begin":1411205400,"end":1411153200},{"begin":1411567200,"end":1411558200},{"begin":1411898400,"end":1411855200},{"begin":1412168400,"end":1412164800},{"begin":1412442000,"end":1412442000},],"Xyla":[{"begin":1388790000,"end":1388530800},{"begin":1402063200,"end":1401973800},{"begin":1403084280,"end":1403084280},{"begin":1405630800,"end":1405630800},{"begin":1405900200,"end":1405871100},{"begin":1406280360,"end":1406278800},{"begin":1406541600,"end":1406500200},{"begin":1407882600,"end":1407799800},{"begin":1408219200,"end":1408217040},{"begin":1408485600,"end":1408484700},{"begin":1408749960,"end":1408744800},{"begin":1409061600,"end":1408834560},{"begin":1409502600,"end":1409429700},{"begin":1409862600,"end":1409781600},{"begin":1410418800,"end":1410418800},{"begin":1410703200,"end":1410688800},{"begin":1411034400,"end":1410962400},{"begin":1411331400,"end":1411320600},{"begin":1411749000,"end":1411742700},{"begin":1412013600,"end":1411941600},{"begin":1412276400,"end":1412269200},],"General":[{"begin":1388790000,"end":1388790000},{"begin":1402063200,"end":1402056000},{"begin":1402329600,"end":1402261200},{"begin":1402826400,"end":1402825080},{"begin":1403289600,"end":1403172000},{"begin":1403560800,"end":1403390400},{"begin":1403870400,"end":1403856000},{"begin":1404151200,"end":1404043200},{"begin":1404578400,"end":1404576000},{"begin":1404846600,"end":1404832260},{"begin":1405156920,"end":1405066500},{"begin":1406073600,"end":1406047200},{"begin":1406365200,"end":1406235600},{"begin":1406707200,"end":1406671200},{"begin":1407011400,"end":1406934000},{"begin":1407279600,"end":1407257040},{"begin":1407542400,"end":1407512700},{"begin":1407855900,"end":1407794400},{"begin":1408148100,"end":1408130100},{"begin":1408493700,"end":1408476000},{"begin":1408878000,"end":1408626000},{"begin":1409140800,"end":1409058000},{"begin":1409435940,"end":1409405580},{"begin":1409698800,"end":1409486400},{"begin":1410184800,"end":1410159600},{"begin":1410465600,"end":1410264000},{"begin":1410865200,"end":1410825240},{"begin":1411191000,"end":1411088400},{"begin":1411680600,"end":1411421400},{"begin":1412013600,"end":1411992000},{"begin":1412424000,"end":1412377200},],}; var chunksLoaded = { };

var mapping = { "p/3cuNZHSvzbmc5wGLz" : "Make a liquid culture", "p/3wt4jvadcLzkvFn9X" : "Make a liquid culture", "p/4jCgLAziJ2DSmmcvR" : "Streak bacteria onto an agar plate", "p/53yEPDJz7oRihLz3M" : "Dilute DNA", "p/5K8vL8t4egnG8SRtc" : "PCA", "p/9S64Hy4vyzPvM4aiC" : "DNA purification (\"PCR Purification\")", "p/9TiKPrpdykEiSHFcy" : "Make a liquid culture", "p/ATv6a4HMeQZMa9WYX" : "Dilute DNA", "p/Ae7BXywPx8nNApvPK" : "Golden Gate Assembly", "p/CdKqzhX6FqmmHYKdE" : "Maxens neues Protokoll", "p/D9hHrT2Ere5rrcuXK" : "Make competent cells", "p/E8wraGbztRq8EsET7" : "Make a glycerol stock", "p/ENCvtL4jWZQW72hE5" : "Restriction digest", "p/F2oNT7tGTyGFCjAB9" : "Make competent cells", "p/FY69K4x7xdaJT6Lzk" : "Pick a colony from an agar plate", "p/HA9CLF2Z4kgY3J5rE" : "Make a liquid culture", "p/JPmjNykwWASQiD9PX" : "Agarose Gel Electrophoresis", "p/NgpLzurL2RKFojWWA" : "PCR", "p/Nm75fDvHCr38nXJBo" : "Plasmid Preparation", "p/P6LsqW4xkJYaXHFJN" : "Heat shock transformation", "p/PxYonEdgff39dmkhq" : "DNA purification (\"PCR Purification\")", "p/TD9txcymCuToDta7x" : "Annealing of complementary oligonucleotides", "p/WSMMH3bg6CcrcAJ3x" : "PCR", "p/ZuE3NijkBg4WwpzKc" : "Recovery of plasmid DNA from filter paper", "p/bSEHCZgLpXJ6nb9ze" : "Streak bacteria onto an agar plate", "p/gM7FyZeyNrM4hwxZk" : "Dissolve plasmid DNA from the registry distribution", "p/hmhE7AHgjXE8Khw6M" : "Gel extraction", "p/jT9cdZ9T5JgFDEJXe" : "Heat shock transformation", "p/kKiCHxutJLzPKayCC" : "Streak bacteria onto an agar plate", "p/kxBySpW3SnbWuYMRw" : "Streak bacteria onto an agar plate", "p/mJNyMCoEko3JKRv5x" : "Heat shock transformation", "p/maDx7F6ry8Mw5JmKf" : "Pick a colony from an agar plate", "p/ms6uHrB9Fv23Tge2J" : "Make a glycerol stock", "p/mzGLz4CZBhmDHNivi" : "Make Medium", "p/n4Sg8s8AfhMEtQtFH" : "Ligation", "p/oFoQguhSKQKC2Hfms" : "Gather bacteria from an agar plate", "p/ojKqKzgeLkvNvLDgw" : "Heat shock transformation", "p/ovMK2ktEeSommgLa2" : "Heat shock transformation", "p/pk9LqRH9ot8JiKx23" : "Make a glycerol stock", "p/qGNf5sATkiC4P7RqF" : "Gather bacteria from an agar plate", "p/v97Nktv4idauP3hYh" : "Make competent cells", "p/vB88pigyWbKvmKir6" : "Pick a colony from an agar plate", "p/vj752RxeBbHsHi83w" : "Pick a colony from an agar plate", "p/xBmBAjXPQntkvc8d5" : "Make a glycerol stock", "p/z46dHCjoZpLkNgm4k" : "CPEC" }

var colorMapping = {"Make a liquid culture":"#1f77b4","Streak bacteria onto an agar plate":"#aec7e8","Dilute DNA":"#ff7f0e","PCA":"#ffbb78","DNA purification (\"PCR Purification\")":"#2ca02c","Golden Gate Assembly":"#98df8a","Maxens neues Protokoll":"#d62728","Make competent cells":"#ff9896","Make a glycerol stock":"#9467bd","Restriction digest":"#c5b0d5","Pick a colony from an agar plate":"#8c564b","Agarose Gel Electrophoresis":"#c49c94","PCR":"#e377c2","Plasmid Preparation":"#f7b6d2","Heat shock transformation":"#7f7f7f","Annealing of complementary oligonucleotides":"#c7c7c7","Recovery of plasmid DNA from filter paper":"#bcbd22","Dissolve plasmid DNA from the registry distribution":"#dbdb8d","Gel extraction":"#17becf","Make Medium":"#9edae5","Ligation":"#1f77b4","Gather bacteria from an agar plate":"#aec7e8","CPEC":"#ff7f0e"};

self.init = function (project) { self.project = project;

$svg = $("#graph"); width = $svg.width(); height = $svg.height(); $svg.bind('DOMMouseScroll mousewheel', handleScrolling);

graph = d3.selectAll("#graph");

nodes = graph.selectAll(".node"); links = graph.selectAll(".link"); force = d3.layout.force() .charge(-250) .linkDistance(function (d) { var dist = getHeight(d.target.date) - getHeight(d.source.date); var minDist = 15; if (dist < minDist) dist = minDist; return dist; }) .linkStrength(.1) .gravity(0) .size([width, height]) .nodes(fnodes) .links(flinks) .on("tick", tick);

ko.computed(function () { for (var ii = 0; ii < chunksLoaded.length; ii++) { chunksLoaded[ii].xhr.abort(); } chunksLoaded = false; var projectName = self.project(); date = Math.max(Math.min(date, chunks[projectName][chunks[projectName].length - 1].end - viewportHeight + 50 / heightOfSecond), chunks[projectName][0].begin - 50/heightOfSecond); setDate(date); }); };

function update () { var nodeData = [], linkData = []; $.each(chunksLoaded, function (chunk) { nodeData.push.apply(nodeData, chunk.nodes); linkData.push.apply(nodeData, chunk.links); });

nodes .data(nodeData, function (d) { return d.id; } ) .enter() .call(force.drag) .each(function (d) { d.y = (d.date - firstDate) * heightOfSecond; fnodes.push(d); });

nodes .exit() .each(function (d) { removeByID(fnodes, d.id); }) .remove();

links = links.filter(function(d) { return findByID(d.target) !== undefined && findByID(d.source) !== undefined; }); links.forEach(function(d) { d.source = findByID(d.source); d.target = findByID(d.target); });

links .data(links) .enter() .append("line") .each(function (d) { flinks.push(d); }) .on("click", function (d){if(d3.event.defaultPrevented) return ; scrollToDate(d.target.date-100000);}) .attr("class", "link");

links .exit() .each(function (d) { //var index = flinks.indexOf(findByID(d)); if(index >-1) flinks.splice(index, 1); removeLinksByIDs(flinks, d.source.id, d.target.id); }) .remove();

nodes .append("circle") .attr("class", "node") .attr("fill", function (d) { return colorMapping[mapping[d.type]]; }) .on("click", function () { if (d3.event.defaultPrevented) return; alert("Silvan show Overlay"); }) .append("svg:title") .text(function(d){return mapping[d.type] + ", " + d.groups;})

force.start();

updateVis(); }

updateVis(); }

function updateVis(){ node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y - (date - firstDate) * heightOfSecond; });

link .attr("x1", function(d) { if(d.source !== undefined) return d.source.x; else return d.target.x; }) .attr("y1", function(d) { if(d.source !== undefined) return d.source.y - (date - firstDate) * heightOfSecond; else return 0;}) .attr("x2", function(d) { if(d.target !== undefined) return d.target.x; else return d.source.x; }) .attr("y2", function(d) { if(d.target !== undefined) return d.target.y - (date - firstDate) * heightOfSecond; else return viewportHeight * heightOfSecond;}); }

function setDate(d){ date = d; setDateRange(d - bufferHeight, d + viewportHeight + bufferHeight); }

if(h) return 1; else return 0.1; }); }

if(h) return 0.1; else return 1.0; }); for(i = 0; i < array.length; i=i+1){ if(unhighlightedData.indexOf(array[i]) === -1) unhighlightedData.push(array[i]); } }

//////***************************************Helper Function*************************************/

function findByID(id){ return $.grep(fnodes, function(e){return e === id || e.id === id;})[0]; }

function removeByID(array, id){ var index = -1; for(i = 0; i<array.length; i=i+1){ if(array[i].id === id){ index = i; break; } } array.splice(index, 1); }

function getHeight(date){ return (date - firstDate)*heightOfSecond;

}

/***************************************************************************************************/

/************************************Scrolling and JSON loading stuff*******************************/

var dataUpdated = false;

var loadingData = false;

function extractAndMergeData(a, b){ return a.concat(b.data); }

function getFileURL(file) { var md5Name = md5(file); return '/wiki/images/' + md5Name.substr(0, 1) + '/' + md5Name.substr(0, 2) + '/' + file; }