LMS-2784 Initial implementation of inspectors and filtering.

SVN: 24388

plasmid/source/html/yeastlabbrowser/body-style.css

@@ -8,3 +8,94 @@ div#vis {
 	font: 12px "Verdana", sans-serif; }	
 }
 div#vis div { padding-top: 2px;}
+
+/* Inspector */
+
+div.inspector {
+	font: 14px "Verdana", sans-serif;
+	padding: 10px;
+	border: 1px solid gray;
+	margin: 10px 2px;
+	font-weight: bold;
+}
+
+.property {
+  font-size: 10px;
+  font-weight: normal;
+}
+
+.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: black;
+	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;
+	text-decoration: underline
+}
+
+input:focus{
+background-color: white;
+}
+
+/* Legend */
+
+.legend .sequenced circle {
+   font: 14px "Verdana", sans-serif;
+   stroke-width: 1.5px;
+   fill: white;
+   stroke: DarkGreen;
+}
+
+.legend .notsequenced circle {
+   font: 14px "Verdana", sans-serif;
+   stroke-width: 1.5px;
+   fill: white;
+   stroke: DarkRed;
+}

plasmid/source/html/yeastlabbrowser/infra.js

+if (!Array.prototype.filter)
+{
+  Array.prototype.filter = function(fun /*, thisp*/)
+  {
+    var len = this.length;
+    if (typeof fun != "function")
+      throw new TypeError();
+
+    var res = new Array();
+    var thisp = arguments[1];
+    for (var i = 0; i < len; i++)
+    {
+      if (i in this)
+      {
+        var val = this[i]; // in case fun mutates this
+        if (fun.call(thisp, val, i, this))
+          res.push(val);
+      }
+    }
+
+    return res;
+  };
+}
+
+if (!Function.prototype.curry) 
+{ 
+	(function () 
+	{
+		var slice = Array.prototype.slice;
+		Function.prototype.curry = function () 
+		{
+			var target = this; 
+			var args = slice.call(arguments);
+			return function () 
+			{
+				var allArgs = args;
+				if (arguments.length > 0) 
+				{ 
+					allArgs = args.concat(slice.call(arguments));
+				}
+				return target.apply(this, allArgs); 
+			};
+		}; 
+	}())
+};
\ No newline at end of file

plasmid/source/html/yeastlabbrowser/plasmid-browser.html

@@ -9,8 +9,9 @@
 	<script type="text/javascript" src="d3.time.js"></script>
 	<script type="text/javascript" src="jquery.js"></script>
 	<script type="text/javascript" src="openbis.js"></script>
+	<script type="text/javascript" src="infra.js"></script>
 	<!-- To speed development, cache the requests -->
-	<script type="text/javascript" src="openbis-request-cache.js"></script>
+	<!-- script type="text/javascript" src="openbis-request-cache.js"></script -->
 <script>
 
 /// The openbisServer we use for our data
@@ -25,7 +26,7 @@ var plasmids = null;
 var inspectedPlasmids = [];
 
 /// The width of the inspectors section
-var inspectorsWidth = 400;
+var inspectorsWidth = 450;
 
 function getAppHeight(){
 	return Math.max($(window).height() - 50, getVisibleLeafsCountForNode(root) * 30);
@@ -41,6 +42,9 @@ var didCreateVis = false;
 /// The visualization, referenced by functions that display content
 var vis;
 
+/// The inspectors, referenced by functions that show or hide inspectors
+var inspectors;
+
 /**
  * Create the DOM elements to store the visualization (tree + inspectors)
  */
@@ -50,6 +54,15 @@ function createVis()
 	
 	// Create a div to house the tree visualization and the inspectors
 	vis = d3.select("#vis");
+	
+	// An element for the inspectors.
+	inspectors = d3.select("#inspectorsContainer")
+		.style("width", + inspectorsWidth + "px")
+		.style("position", "relative")
+		.style("overflow", "auto")
+		.style("float", "right")
+	  .style("top", "20px")
+	  .style("display", "none");
 
 	didCreateVis = true;
 }
@@ -130,22 +143,119 @@ function initializePlasmids(result)
 function resizePlasmidTable()
 {
 	var tableWidth;
+	var areInspectorsVisible;
+	var padding = 20;
 	if (inspectedPlasmids.length > 0) {
-		tableWidth = getAppWidth() - inspectorsWidth;
+		tableWidth = getAppWidth() - inspectorsWidth - padding;
+		areInspectorsVisible = true;
 	} else {
-		tableWidth = getAppWidth();
+		tableWidth = getAppWidth() - padding;
+		areInspectorsVisible = false;
 	}
 	var plasmidTableTransition = d3.select('#plasmid-table').transition().duration(1000);	
-	plasmidTableTransition.attr('width', tableWidth)	;
+	plasmidTableTransition.attr('width', tableWidth);
+	if (areInspectorsVisible) {
+		$("#inspectorsContainer").show();
+	} else {
+		$("#inspectorsContainer").hide();
+	}
 }
 
 function inspectPlasmid(plasmid)
 {
-	inspectedPlasmids.push(plasmid);
+	if (inspectedPlasmids.indexOf(plasmid) < 0) {
+		inspectedPlasmids.push(plasmid);
+	}
+	resizePlasmidTable();
+	updateInspectors(1000);
+}
+
+function closeInspector(plasmid)
+{
+	var index = inspectedPlasmids.indexOf(plasmid);
+	if (index < 0) {
+		return;
+	}
+	
+	inspectedPlasmids.splice(index, 1);
 	resizePlasmidTable();
-	console.log(plasmid);
+	updateInspectors(1000);
+}
+
+/**
+ * Draw / update node inspectors
+ */
+function updateInspectors(duration)
+{	
+		// Draw / update the inspectors	
+	var inspector = inspectors.selectAll("div.inspector").data(inspectedPlasmids, function (d) { return d.code });
+		
+	var box = inspector
+			.enter()
+		.append("div")
+		.attr("class", "inspector")
+		.text(function(d) { return d.code });
+		
+	box.append("span")
+		.attr("class", "close")
+		.on("click", closeInspector)
+		.text("x");
+	
+	inspector
+		.exit()
+	.transition()
+	.duration(duration)
+	.style("opacity", "0")
+	.remove();
+		
+	var propsTable = box.append("table").attr("class", "properties");
+	propsTable.selectAll("tr").data(function(d) { return props_to_pairs(d.properties) })
+		.enter()
+			.append("tr")
+			.selectAll("td").data(function(d) { return d }).enter()
+				.append("td")
+				.attr("class", "property")
+				.style("opacity", "0")
+				.text(function(d) { return d })
+			.transition()
+				.duration(duration)
+				.style("opacity", "1");
+				
+	var downloadTable = inspector.selectAll("table.downloads").data(function(d) { return [d] });
+	
+	downloadTable
+		.enter()
+			.append("table")
+				.attr("width", "100%")
+				.attr("class", "downloads");
+			
+/*
+	// Add a caption, but make sure there is just one (this does not work with select())
+	downloadTable.selectAll("caption")
+			.data(downloadTableCaption)
+		.enter()
+			.append("caption").text(function(d) { return d; });
+			
+	// We just want to see non-directories here
+	var downloadTableRow = downloadTable.selectAll("tr").data(filesForSequencingSample, function(d) { return d.pathInDataSet });
+	downloadTableRow
+		.enter()
+			.append("tr")
+				.append("td")
+				.style("text-align", "left")
+				.on("click", downloadTableFile)
+				.text(function(d) { return d.label; });
+	downloadTableRow
+		.exit()
+			.transition()
+				.duration(duration)
+				.style("opacity", "0")
+				.remove();
+	
+*/
 }
 
+
 /**
  * Display the samples returned by the server
  */
@@ -165,21 +275,57 @@ function displayReturnedSamples(data)
 		vis.append("p").text("No data found.");
 		return;
 	}
+
+	visualize();
+}
+
+function plasmidFilter(filter, element, index, array) {
+//	console.log("plasmidFilter called with filter "+filter);
+	
+	for (var propertyName in element.properties) {
+		if (!(element.properties[propertyName] instanceof Function)) {
+			if (element.properties[propertyName].indexOf(filter) != -1) {
+				return true;
+			}
+		}
+	}
+
+	return false;
+	//return element.properties.PLASMID_NAME.indexOf(filter) != -1;
+}
+
+function visualize(filterText)
+{
+	if (filterText == undefined) 
+	{
+		filterText = "";
+	}
 	
-	// Pick the table element of the visualization
-	d3.select("#vis").select("#plasmid-table").selectAll("tr.plasmid-table-data").data(plasmids)
+	var displayedPlasmids = plasmids.filter(plasmidFilter.curry(filterText));
+
+	var selection = d3.select("#vis").select("#plasmid-table").selectAll("tr.plasmid-table-data").data(plasmids);
 		// Code under enter is run if there is no HTML element for a data element
+	
+	selection
 		.enter()
-	.append("tr")
+		.append("tr")
 		.attr("class", "plasmid-table-data")
 		.style("cursor", "pointer")
 		.on("click", inspectPlasmid)
 		.selectAll("td").data(function(sample) { return [sample.identifier, sample.properties.PLASMID_NAME, sample.properties.OWNER]; })
 			.enter()
-		.append("td")
-		.text(String)
-	
-	console.log(data);
+			.append("td")
+			.text(String)
+
+		selection.style("display", 
+										function(data)
+										{
+											if ($.inArray(data, displayedPlasmids) != -1) {
+												return "table-row"
+											} else {
+												return  "none"
+											}
+										});
 }
 
 /**
@@ -242,6 +388,10 @@ $(document).ready(function() {
 		 openbisServer.login( $.trim($('#username').val()), $.trim($('#password').val()), function(data) { enterApp(data) })
 	});
 	
+	$('#filter-form').submit(function() {
+		visualize($('#filter').val());
+	});
+
 	openbisServer.ifRestoredSessionActive(function(data) { enterApp(data) });
 
 		// Make the ENTER key the default button
@@ -274,9 +424,17 @@ $(document).ready(function() {
 			<button id="logout-button">Logout</button>
 		</div>
 		<div id="vis">
-			<table id="plasmid-table">
+				
+			<form id="filter-form" action="javascript:">	
+				<input id="filter" type="text"> 
+				<button class="filter-button" id="filter-button" type="submit">Filter</button>
+			</form>
+
+			<table id="plasmid-table" style="float: left">
 				<tr class="plasmid-table-header"><th>Code</th><th>Name</th><th>Owner</th></tr>
 			</table>
+			
+			<span id="inspectorsContainer"></span>
 		</div>
 	</div>
 </body>