From e07a71553b39c950835edc6bbef770acb8e42a0b Mon Sep 17 00:00:00 2001
From: felmer <felmer>
Date: Tue, 26 Jun 2012 11:47:19 +0000
Subject: [PATCH] SP-173: scripts improved
SVN: 25860
---
.../demo-proteomics-aggregation/script.py | 1 -
.../source/html/demoapp/proteomics-demo.js | 369 +++---------------
rtd_phosphonetx/source/html/demoapp/tree.css | 132 +------
3 files changed, 53 insertions(+), 449 deletions(-)
diff --git a/rtd_phosphonetx/source/core-plugins/dev-demo/1/dss/reporting-plugins/demo-proteomics-aggregation/script.py b/rtd_phosphonetx/source/core-plugins/dev-demo/1/dss/reporting-plugins/demo-proteomics-aggregation/script.py
index e769bb41bc1..d9b0b260950 100644
--- a/rtd_phosphonetx/source/core-plugins/dev-demo/1/dss/reporting-plugins/demo-proteomics-aggregation/script.py
+++ b/rtd_phosphonetx/source/core-plugins/dev-demo/1/dss/reporting-plugins/demo-proteomics-aggregation/script.py
@@ -120,4 +120,3 @@ def aggregate(parameters, tableBuilder):
row.setCell(SEARCH_EXPERIMENT_PERM_ID, permId)
row.setCell(ACCESION_NUMBER, resultRow.get('accession_number'))
row.setCell(DESCRIPTION, resultRow.get('description'))
- result.close()
diff --git a/rtd_phosphonetx/source/html/demoapp/proteomics-demo.js b/rtd_phosphonetx/source/html/demoapp/proteomics-demo.js
index 529e4cffbed..964f52b240f 100644
--- a/rtd_phosphonetx/source/html/demoapp/proteomics-demo.js
+++ b/rtd_phosphonetx/source/html/demoapp/proteomics-demo.js
@@ -10,107 +10,10 @@ var model = null;
/// The visualization, referenced by functions that display content
var vis;
-/// The Tree layout
-var tree = null;
-
-function getAppHeight(){
- return Math.max($(window).height() - 50, model.getVisibleLeafsCount() * 30);
-}
-
-function getAppWidth(){
- return $(window).width();
-}
-
-
-/**
- * A model for table visualizations.
- */
-function DataTableModel(data) {
- this.data = data;
- this.headers = data.result.columns;
- this.rows = data.result.rows;
- this.getRows = function() { return this.rows; }
- this.getHeaders = function() { return this.headers; }
- this.getVisibleLeafsCount = function() { return this.rows.length; }
-}
-
-/**
- * An element in the tree. Consists of:
- * - code Should be unique
- * - label For displaying
- * - type For differentiating between different types of tree elements
- *
- * A tree element keeps track of its children.
- */
-function TreeElement(code, label, permId, type) {
- this.code = code;
- this.label = label;
- this.permId = permId;
- this.type = type;
- this.children = [];
- this.childMap = {};
-}
-
-TreeElement.prototype.addChild = function(element) {
- this.children.push(element);
- this.childMap[element.code] = element;
-}
-
-TreeElement.prototype.getChild = function(code) {
- return this.childMap[code];
-}
-
-TreeElement.prototype.getOrCreateChild = function(code, label, permId, type) {
- var child = this.childMap[code];
- if (null == child) {
- child = new TreeElement(code, label, permId, type);
- this.addChild(child);
- }
-
- return child;
-}
-
-/**
- * A model for tree visualizations.
- */
-function DataTreeModel(data) {
- this.data = data;
- this.headers = data.result.columns;
- this.rows = data.result.rows;
- this.initializeTreeModel();
- this.getVisibleLeafsCount = function() { return this.rows.length; }
-}
-
-/**
- * Restructure the rows into a hieararchical form.
- */
-DataTreeModel.prototype.initializeTreeModel = function() {
- // The rows are expected to be structured thusly:
- // BIO Experiment, BIO Sample, MS Inj Sample, Search Experiment, ACC#, Desc
- this.root = new TreeElement('PROT', '', 'ROOT');
- var root = this.root;
-
- // Construct the tree
- this.rows.forEach(function(each) {
- var bioExpCode = each[0].value;
- var bioSampCode = each[1].value;
- var msInjSampCode = each[2].value;
- var searchExpCode = each[3].value;
- var searchPermId = each[4].value;
- var acc = each[5].value;
- var desc = each[6].value;
-
- var bioExp = root.getOrCreateChild(bioExpCode, bioExpCode, null, 'BIO-EXP');
- var bioSamp = bioExp.getOrCreateChild(bioSampCode, bioSampCode, null, 'BIO-SAMP');
- var msInjSamp = bioSamp.getOrCreateChild(msInjSampCode, msInjSampCode, null, 'MS-INJ');
- var searchExp = msInjSamp.getOrCreateChild(searchExpCode, searchExpCode, searchPermId, 'MS-SEARCH');
- var proteinLabel = acc + " : " + desc;
- var protein = searchExp.getOrCreateChild(acc, proteinLabel, null, 'PROTEIN');
- });
-}
-
var didCreateVis = false;
+var indexOfLinkedColumn = 3;
+
/**
* Create the DOM elements to store the visualization (tree + inspectors)
*/
@@ -124,50 +27,9 @@ function createVis()
didCreateVis = true;
}
-function translateSrc(d)
-{
- var translate;
- if (d.parent != undefined) {
- var y0 = (null != d.parent.y0) ? d.parent.y0 : d.parent.y;
- var x0 = (null != d.parent.x0) ? d.parent.x0 : d.parent.x;
- translate = "translate(" + y0 + "," + x0 + ")";
- } else {
- translate = "translate(" + 0 + "," + 0 + ")";
- }
-
- return translate;
-}
-
-function translateDst(d)
-{
- d.x0 = d.x;
- d.y0 = d.y;
- var translate = "translate(" + d.y + "," + d.x + ")";
-
- return translate;
-}
-
-/**
- * Convert properties to pairs
- */
-function props_to_pairs(d)
-{
- var pairs = [];
- for (var prop in d) {
- var pair = [prop, d[prop]];
- pairs.push(pair);
- }
- pairs.sort(function(a, b) {
- if (a[0] == b[0]) return 0;
- // Sort in reverse lexicographical
- return (a[0] < b[0]) ? -1 : 1;
- });
- return pairs;
-}
-
function displayReturnedResults(data)
{
- $("#waiting").hide();
+ $("#waiting").hide();
if (data.error) {
console.log(data.error);
@@ -175,76 +37,7 @@ function displayReturnedResults(data)
return;
}
- var showResultsInTable = false;
- if (showResultsInTable) {
- model = new DataTableModel(data);
- displayResultsInTable();
- } else {
- displayResultsAsGraph(createDataModel(data));
-// model = new DataTreeModel(data);
-// displayResultsInTree();
- }
-}
-
-/**
- * Display the samples returned by the server in a table.
- */
-function displayResultsInTable()
-{
- // This will show the object in the log -- helpful for debugging
- // console.log(data);
- clearVis();
-
- var headers = model.getHeaders();
- var rows = model.getRows();
-
- var table = vis.append("table").data([rows]);
- table.enter().append("table").attr("class", "result");
-
- var headerRow = table.selectAll("tr.headers").data([headers])
- .enter().append("tr").attr("class", "headers");
-
- headerRow.selectAll("th").data(function(d) { return d })
- .enter().append("th").text(function(d) { return d.title });
-
- var row = table.selectAll("tr.rows").data(rows);
- row.enter().append("tr").attr("class", function(d,i) { if (i % 2 == 0) return "evenRow"; else return "oddRow"; });
-
- row.selectAll("td").data(function(d) { return d })
- .enter()
- .append("td")
- .style("padding", "0px 5px")
- .text(function(d) { return d.value });
-}
-
-function classForNode(d) {
- // Use whether the node has open children or not to compute the class
- var cssClass = "node " + d.type;
- if (d.inspected) cssClass = cssClass + " inspected";
- cssClass = cssClass + " sequenced";
- return cssClass;
-}
-
-function getTextAnchorType(d){
- return d.type == 'PROTEIN' ? 'start' : 'end';
-}
-
-// Toggle children on click.
-function clickedNode(treeNode) {
- var url;
- switch(treeNode.type) {
- case 'MS-SEARCH':
- url = openbisUrl + "/?#entity=EXPERIMENT&permId=" + treeNode.permId;
- break;
- default:
- url = null;
- }
- if (null != url) window.open(url, '_blank');
-}
-
-function hasChildren(d)
-{
- return d.children.length > 0;
+ displayResultsAsGraph(createDataModel(data));
}
function displayResultsAsGraph(data)
@@ -252,8 +45,8 @@ function displayResultsAsGraph(data)
clearVis();
if (data.length == 0)
{
- vis.append("p").text("Nothing found.");
- return;
+ vis.append("p").text("Nothing found.");
+ return;
}
var xOffset = 30,
@@ -281,32 +74,45 @@ function displayResultsAsGraph(data)
+ "Q" + 3*xStep/4 + "," + y1 + "," + xStep + "," + y1
+ "L" + xStep + "," + y1;
})
+
+ var node = g.selectAll("g").data(function(d) { return d[0]; })
+ .enter().append("svg:g")
+ .attr("class", "node")
+ .attr("transform", function(d,i) { return "translate(0, " + (i * yStep) + ")"; });
- g.selectAll("circle").data(function(d) { return d[0]; })
- .enter().append("svg:circle")
- .attr("class", "circle")
- .attr("cx", 0)
- .attr("cy", function(d, i) { return i * yStep; })
- .attr("r", 5);
-
- g.selectAll("text").data(function(d) { return d[0]; })
- .enter().append("svg:text")
- .text(function(d) { return d; })
+ node.append("svg:circle").attr("r", 5);
+
+ node.append("svg:text")
+ .text(function(d) { return d.label; })
+ .attr("class", function(d) { return d.level == indexOfLinkedColumn ? "linked" : "notLinked";})
.attr("text-anchor", "left")
- .attr("class", "nt")
.attr("x", -10)
- .attr("y", function(d, i) { return 18 + i * yStep; });
+ .attr("y", 18)
+ .on("click", function(d) { if (d.level == indexOfLinkedColumn) {
+ window.open(openbisUrl + "/?#entity=EXPERIMENT&permId=" + d.permId, '_blank');
+ }
+ });
+}
+
+
+function Node(level, label, permId) {
+ this.level = level;
+ this.label = label;
+ this.permId = permId;
}
+
function createDataModel(tableModel)
{
var rows = tableModel.result.rows
var maps = [];
+ var permIds = {};
for (n = 0; n < rows.length; n++) {
row = rows[n];
+ permIds[row[indexOfLinkedColumn].value] = row[4].value;
row[5].value = row[5].value + ": " + row[6].value; // concatenate accession number with description
- row.splice(6, 1);
+ row.splice(6, 1); // remove description
row.splice(4, 1); // remove search experiment perm id
for (i = 0; i < row.length; i++) {
map = maps[i];
@@ -326,18 +132,21 @@ function createDataModel(tableModel)
}
}
var data = [];
- var maxNumber = 0;
for (i = 0; i < maps.length; i++) {
var map = maps[i];
var elements = [];
for (element in map) {
- elements.push(element);
+ var permId = null;
+ if (i == indexOfLinkedColumn)
+ {
+ permId = permIds[element];
+ }
+ elements.push(new Node(i, element, permId));
}
- maxNumber = Math.max(maxNumber, elements.length);
elements.sort();
var indexMap = {};
for (j = 0; j < elements.length; j++) {
- indexMap[elements[j]] = j;
+ indexMap[elements[j].label] = j;
}
data.push([elements, [], indexMap]);
}
@@ -349,7 +158,7 @@ function createDataModel(tableModel)
var indexMap = data[i + 1][2];
for (j = 0; j < from.length; j++) {
element = from[j];
- linkedElements = map[element];
+ linkedElements = map[element.label];
for (linkedElement in linkedElements) {
links.push([j, indexMap[linkedElement]]);
}
@@ -359,97 +168,6 @@ function createDataModel(tableModel)
return data;
}
-
-/**
- * Display the samples returned by the server in a tree.
- */
-function displayResultsInTree()
-{
- var duration = 500;
- var treeVis = vis.selectAll("svg").data([model.root]);
- treeVis.enter()
- .append("svg:svg");
-
- // Adjust a size of the vis
- treeVis
- .attr("width", getAppWidth() - 50)
- .attr("height", getAppHeight());
-
- // Adjust a size of the tree
- tree = d3.layout.tree().size([getAppHeight(), getAppWidth() - 300])
-
- // Update the root and compute the new layout
- var nodes = tree.nodes(model.root);
-
- // Draw / update the links
- var link = treeVis.selectAll("path.link").data(tree.links(nodes), function(d) { return d.code });
-
- link.enter().append("svg:path")
- .attr("class", "link")
- .attr("d", function(d) {
- var y0 = (null != d.source.y0) ? d.source.y0 : d.source.y;
- var x0 = (null != d.source.x0) ? d.source.x0 : d.source.x;
- var o = {x: x0, y: y0};
- return diagonal({source: o, target: o});
- })
- .transition()
- .duration(duration)
- .attr("d", diagonal);
-
- link.transition()
- .duration(duration)
- .attr("d", diagonal);
-
- link.exit().transition()
- .duration(duration)
- .attr("d", function(d) {
- var y0 = (null != d.source.y0) ? d.source.y0 : d.source.y;
- var x0 = (null != d.source.x0) ? d.source.x0 : d.source.x;
- var o = {x: x0, y: y0};
- return diagonal({source: o, target: o});
- })
- .remove();
-
- // Draw / update the nodes
- var node = treeVis.selectAll("g.node").data(nodes, function(d) { return d.code });
-
- var nodeEnter =
- node.enter().append("svg:g")
- .attr("class", classForNode)
- .attr("transform", translateSrc)
- .on("click", clickedNode);
-
- nodeEnter.append("svg:circle")
- .attr("r", 5.5);
-
- nodeEnter.append("svg:text")
- .text(function(d) { return d.label });
-
- nodeEnter
- .transition()
- .duration(duration)
- .attr("transform", translateDst);
-
-
- // Transition nodes to their new position.
- node.transition()
- .duration(duration)
- .attr("class", classForNode)
- .attr("transform", translateDst);
-
- // Move the text elements to the appropriate position
- node.selectAll("text").transition()
- .duration(duration)
- .attr("dx", function(d) { return hasChildren(d) ? 0 : 8 })
- .attr("dy", function(d) { return hasChildren(d) ? -10 : 3 })
- .attr("text-anchor", function(d) { return getTextAnchorType(d) });
-
- node.exit().transition()
- .duration(duration)
- .attr("transform", translateSrc)
- .remove();
-}
-
function clearVis()
{
$('#vis > *').remove();
@@ -460,7 +178,7 @@ function clearVis()
*/
function queryForResults(parameters)
{
- $("#waiting").show();
+ $("#waiting").show();
openbisServer.createReportFromAggregationService("DSS1", "demo-proteomics-aggregation", parameters, displayReturnedResults);
// openbisServer.createReportFromAggregationService("STANDARD", "demo-proteomics-aggregation", parameters, displayReturnedResults);
}
@@ -468,7 +186,8 @@ function queryForResults(parameters)
function enterApp(data)
{
- if(data.result == null){
+ if(data.result == null)
+ {
alert("Login or password incorrect");
$("#username").focus();
return;
@@ -479,5 +198,5 @@ function enterApp(data)
$('#openbis-logo').height(30);
- createVis()
+ createVis();
}
\ No newline at end of file
diff --git a/rtd_phosphonetx/source/html/demoapp/tree.css b/rtd_phosphonetx/source/html/demoapp/tree.css
index 1068c42897f..10846319987 100644
--- a/rtd_phosphonetx/source/html/demoapp/tree.css
+++ b/rtd_phosphonetx/source/html/demoapp/tree.css
@@ -4,10 +4,18 @@
stroke-width: 1.5px;
}
+.link {
+ fill: none;
+ stroke: #ccc;
+ stroke-width: 1.5px;
+ z-index: -1;
+}
+
.line {
fill: none;
stroke: steelblue;
stroke-width: 1px;
+}
.node {
font: 12px "Verdana", sans-serif;
@@ -17,129 +25,7 @@
left: -15px;
}
-.nt {
- fill: none;
- stroke: #56e;
- stroke-width: 1px;
-}
-
-.node:hover{
+.linked:hover {
font-weight: bold;
}
-
-.link {
- fill: none;
- stroke: #ccc;
- stroke-width: 1.5px;
- z-index: -1;
-}
-
-.SAMPLE.inspected {
- font-weight: bold
-}
-
-.SAMPLE.sequenced circle {
- stroke: DarkGreen;
-}
-
-.SAMPLE.sequenced:hover circle {
- fill: DarkGreen;
-}
-
-.SAMPLE.notsequenced circle {
- stroke: DarkRed;
-}
-
-.SAMPLE.notsequenced:hover circle {
- fill: DarkRed;
-}
-
-/* Inspector */
-
-div.inspector {
- font: 12px "Verdana", sans-serif;
- padding: 10px;
- border: 1px solid gray;
- margin: 10px 2px;
- font-weight: bold;
-}
-
-.property {
- font-size: 10px;
-}
-
-.properties {
- width: 100%;
-}
-
-.properties tr:nth-child(odd) {
- background-color:#eee;
-}
-
-.properties tr:nth-child(even) {
- background-color:#fff;
-}
-
-.close {
- float: right;
-}
-
-.close:hover {
- opacity: 0.5;
- color: #AAA;
- cursor: pointer;
-}
-
-.downloads {
- color: steelblue;
- background-color: #E3E3E3;
-}
-
-table.downloads {
- font-family: "Trebuchet MS", sans-serif;
- font-size: 14px;
- table-layout: fixed;
- border-collapse: collapse;
- margin: 0px;
- padding: 0px;
-}
-
-/*
-.downloads caption {
- text-align: left;
-}
-*/
-
-.downloads tr {
- padding: 0px;
-}
-
-.downloads td {
- border: 2px solid #FFFFFF;
- padding: 2px;
-}
-
-.downloads td:hover {
- cursor: pointer;
- font-weight: bold;
-}
-
-input:focus{
-background-color: white;
-}
-
-/* Legend */
-
-.legend .sequenced circle {
- stroke-width: 1.5px;
- fill: white;
- stroke: DarkGreen;
-}
-
-.legend .notsequenced circle {
- stroke-width: 1.5px;
- fill: white;
- stroke: DarkRed;
-}
-
--
GitLab