Add sub-entity tables for Map of Science comparison

Remove street view from Map of Science
Improve table UI

productMods/js/visualization/mapofscience/ComparisonDataTableWidget.js

@@ -13,9 +13,10 @@ var ComparisonDataTableWidget = Class.extend({
 		activeFilterClass: "comparison-active-filter",
 		filterInfoIconClass: "comparisonFilterInfoIcon"
 	},
-	init: function(sciMapWidget) {
+	init: function(sciMapWidget, entityTablesWidget) {
 		var me = this;
 		me.sciMapWidget = sciMapWidget;
+		me.entityTablesWidget = entityTablesWidget;
 		me.widgetType = "COMPARISON_SCIENCE_AREAS";
 		me.currentSelectedFilter = COMPARISON_TYPE.ORGANIZATION;
 		me.widget = '';
@@ -90,7 +91,7 @@ var ComparisonDataTableWidget = Class.extend({
 			scienceAreasTH.html('Person');
 		}
 		
-		var activityCountTH = $('<th>');
+		var activityCountTH = $('<th width="53">');
 		activityCountTH.html('# of pubs.');
 		activityCountTH.attr("id", "activity-count-column");
 
@@ -112,7 +113,7 @@ var ComparisonDataTableWidget = Class.extend({
 			rowsToInsert[i++] = '<tr id="' + index + '" style="color: grey;"><td>' + item.type + '</td>';
 			rowsToInsert[i++] = '<td><input class="chk" type="checkbox" value="' + index + '"/></td>';
 			rowsToInsert[i++] = '<td>' + item.label + '</td>';
-			rowsToInsert[i++] = '<td>' + item.pubs.toFixed(2) + '</td></tr>';
+			rowsToInsert[i++] = '<td>' + item.pubs + '</td></tr>';
 		});
 		
 		tbody.append(rowsToInsert.join(''));
@@ -202,19 +203,10 @@ var ComparisonDataTableWidget = Class.extend({
 		createToolTip($("#comparisonSearchInfoIcon"), $("#comparisonSearchInfoTooltipText").html(), "topLeft");
 		
 		/* Create csv download button */
-		console.log(comparisonScienceMapCsvDataUrlPrefix + me.uri);
 		var csvButton = '<hr class="subtle-hr"/><div id="main-science-areas-table-footer"><a href="' +
 						comparisonScienceMapCsvDataUrlPrefix + me.uri +
 						'" class="map-of-science-links">Save All as CSV</a></div>';
 		me.tableDiv.append(csvButton);
-		
-		/* Create mapping statistic result */
-		var totalPublications = me.pubsWithNoJournals + me.pubsWithInvalidJournals + me.pubsMapped;
-		$("#mapped-publications").text(addCommasToNumber(me.pubsMapped));
-		$("#percent-mapped-info").show();
-		$("#percent-mapped").text((100 * me.pubsMapped / totalPublications).toFixed(2));
-		$("#total-publications").text(addCommasToNumber(totalPublications));
-		
 	},
 	changeFilter: function(filterType) {
 		var me = this;
@@ -232,7 +224,6 @@ var ComparisonDataTableWidget = Class.extend({
 		ACTIVE_DISCIPLINE_SUBDISCIPLINE_FILTER = me.currentSelectedFilter;
 
 		if (me.widget) {
-			me.widget.fnSettings()._iDisplayLength = 10;
 			me.widget.fnDraw();
 			// load one item if no item is selected. Need to be improved
 			if ($("input:checkbox[class=chk]:checked").length == 0) {
@@ -253,15 +244,18 @@ var ComparisonDataTableWidget = Class.extend({
 		// Download data from server and add to markerManager if not gotten already
 		var me = this;
 		var url = scienceMapDataPrefix + uri;
-		downloader.download(url, function(data) {
+		downloader.downloadAndWait(url, function(data) {
 			me.sciMapWidget.loadEntity(data[0]);
 			
 			// This is ugly, need fix!!!
-			$("#comparisonTbody > tr[id=" + index + "]").css("color", me.sciMapWidget.getColor(me.currentSelectedFilter, me.subEntities[index].label));
+			var color = me.sciMapWidget.getColor(me.currentSelectedFilter, me.subEntities[index].label);
+			$("#comparisonTbody > tr[id=" + index + "]").css("color", color);
+			me.entityTablesWidget.loadEntity(data[0], color);
 		});
 	},
 	unloadEntity: function(key, childKey, index) {
 		this.sciMapWidget.unloadEntity(key, childKey);
+		this.entityTablesWidget.unloadEntity(childKey);
 		
 		// This is ugly, need fix!!!
 		$("#comparisonTbody > tr[id=" + index + "]").css("color", "grey");

productMods/js/visualization/mapofscience/ComparisonScimapWidget.js

@@ -1,8 +1,8 @@
 /* $This file is distributed under the terms of the license in /doc/license.txt$ */
 COMPARISON = {
-	"one":{ "name": "one", "color": "#1e90ff"},
-	"two":{ "name": "two", "color": "#ff69b4"},
-	"three":{ "name": "three", "color": "#32cd32"}
+	"one":{ "name": "one", "color": "#99CC00"},
+	"two":{ "name": "two", "color": "#FF9900"},
+	"three":{ "name": "three", "color": "#3399FF"}
 }
 
 COMPARISON_TYPE = {
@@ -127,7 +127,6 @@ var ComparisonScimapWidget = Class.extend({
 		}
 	},
 	loadJsonData: function(data) {
-		this.isUnloaded = false;
 	},
 	loadEntity: function(data) {
 		var me = this;
@@ -192,6 +191,22 @@ var ComparisonScimapWidget = Class.extend({
 			compositeManager.mouseOut(childKey);
 		}
 	},
+	mouseInNode: function(key, childKey, subdisciplineId) {
+		var compositeManager = this.getCompositeManager(key);
+		// Focus if only it is a valid manager
+		if (compositeManager == this.activeCompositeManager) {
+			// Focus all
+			compositeManager.registry.register(childKey).mouseIn(subdisciplineId);
+		}
+	},
+	mouseOutNode: function(key, childKey, subdisciplineId) {
+		var compositeManager = this.getCompositeManager(key);
+		
+		// Unfocus if only it is a valid manager
+		if (compositeManager == this.activeCompositeManager) {
+			compositeManager.registry.register(childKey).mouseOut(subdisciplineId);
+		}
+	},
 	removeManager: function(key, childKey) {
 		var compositeManager = this.getCompositeManager(key);
 		

productMods/js/visualization/mapofscience/CustomMarker.js

@@ -15,10 +15,10 @@ var ScinodePolygon = CirclePolygon.extend({
 		this.setZIndex(-size);
 	},
 	focus: function() {
-		this.setOptions({strokeWeight: 3.0});
+		this.setOptions({strokeWeight: 1.2, strokeColor: '#000'});
 	},
 	unfocus: function() {
-		this.setOptions({strokeWeight: 1.0});
+		this.setOptions({strokeWeight: 1.0, strokeColor: '#808080'});
 	},
 	setContent: function(content) {
 		this.polygon.content = content;
@@ -49,7 +49,7 @@ function createScinodeMarker(map, label, value, radius, color, latlng) {
 	var circleOptions = {
 		label: label,
 		value: value,
-		strokeColor: '#000',
+		strokeColor: '#808080',
 		strokeOpacity: 1.0,
 		strokeWeight: 1.0,
 		fillColor: color,

productMods/js/visualization/mapofscience/DataTableWidget.js

@@ -3,15 +3,17 @@
 var DataTableWidget = Class.extend({
 	
 	dom: {
-		searchBarParentContainerClass : "searchbar",
-		paginationContainerClass : "paginatedtabs",
+		searchBarParentContainerClass: "searchbar",
+		paginationContainerClass: "paginatedtabs",
 		containerID: "main-science-areas-table-container",
 		footerID: "main-science-areas-table-footer",
 		firstFilterID: "first-filter",
 		secondFilterID: "second-filter",
 		filterOptionClass: "filter-option",
 		activeFilterClass: "active-filter",
-		filterInfoIconClass: "filterInfoIcon"
+		filterInfoIconClass: "filterInfoIcon",
+		
+		percentMappedInfoID: "percent-mapped-info"
 	},
 	init: function(sciMapWidget) {
 		var me = this;
@@ -21,6 +23,7 @@ var DataTableWidget = Class.extend({
 		me.subdisciplineInfo = {};
 		me.disciplineInfo = {};
 		me.widget = '';
+		me.percentMappedDiv = $("#" + me.dom.percentMappedInfoID);
 		me.tableDiv = $('<div />');
 		$("#" + me.dom.containerID).append(this.tableDiv);
 		
@@ -71,9 +74,11 @@ var DataTableWidget = Class.extend({
 	},
 	show: function(key) {
 		this.tableDiv.show();
+		this.percentMappedDiv.show();
 	},
 	hide: function(key) {
 		this.tableDiv.hide();
+		this.percentMappedDiv.hide();
 	},
 	cleanView: function() {
 		this.hide();
@@ -233,7 +238,6 @@ var DataTableWidget = Class.extend({
 		
 		var totalPublications = me.pubsWithNoJournals + me.pubsWithInvalidJournals + me.pubsMapped;
 		$("#mapped-publications").text(addCommasToNumber(me.pubsMapped));
-		$("#percent-mapped-info").show();
 		$("#percent-mapped").text((100 * me.pubsMapped / totalPublications).toFixed(2));
 		$("#total-publications").text(addCommasToNumber(totalPublications));
 		

productMods/js/visualization/mapofscience/EntityTablesWidget.js

@@ -0,0 +1,50 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
+var EntityTablesWidget = Class.extend({
+	init: function(sciMapWidget) {
+		this.sciMapWidget = sciMapWidget;
+		this.keyToDataTable = {};
+		this.container = $('<div>');
+		$("#subEntityTableArea").append(this.container);
+		$("#subEntityTableArea").show();
+	},
+	initView: function(key) {
+		this.container.show();
+	},
+	cleanView: function(key) {
+		this.container.hide();
+	},
+	loadJsonData: function(data) {
+	},
+	loadEntity: function(data, color) {
+		var key = data.label;
+		var dataTable = this.getDataTable(key);
+		if (dataTable == null) {
+			dataTable = this._createDataTable(key, data, color);
+		}
+		dataTable.initView();
+	},
+	unloadEntity: function(key) {
+		this._removeDataTable(key);
+	},
+	getDataTable: function(key) {
+		return this.keyToDataTable[key];
+	},
+	_removeDataTable: function(key) {
+		var dataTable = this.getDataTable(key);
+		if (dataTable) {
+			dataTable.cleanView();
+			delete this.keyToDataTable[key];
+		}
+	},
+	_createDataTable: function(key, data, color) {
+		dataTable = new SimpleDataTableWidget({
+			sciMapWidget: this.sciMapWidget, 
+			container: this.container
+			});
+		data.color = color;
+		dataTable.loadJsonData(data);
+		this.keyToDataTable[key] = dataTable;
+		return dataTable;
+	}
+});

productMods/js/visualization/mapofscience/InitializeMap.js

@@ -51,6 +51,7 @@ function initMap() {
 	var mapOptions = {
 		center: centerLatLng,
 		zoom: 1,
+		streetViewControl: false,
 		mapTypeControlOptions: {
 		  mapTypeIds: []
 		}

productMods/js/visualization/mapofscience/SimpleDataTableWidget.js

@@ -0,0 +1,165 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
+var SimpleDataTableWidget = Class.extend({
+	
+	dom: {
+		paginationContainerClass : "subpaginatedtabs"
+	},
+	init: function(options) {
+		var me = this;
+		me.options = options;
+		me.sciMapWidget = options.sciMapWidget;
+		me.currentSelectedFilter = COMPARISON_TYPE.SUBDISCIPLINE;
+		me.widget = '';
+		me.tableDiv = $('<div />');
+		me.addToContainer();
+	},
+	loadJsonData: function(data) {
+		
+		var me = this;
+		me.uri = data.uri;
+		me.label = data.label;
+		me.pubsWithNoJournals = data.pubsWithNoJournals;
+		me.pubsWithInvalidJournals = data.pubsWithInvalidJournals;
+		me.pubsMapped = data.pubsMapped;
+		me.type = data.type;
+		me.color = data.color;
+		me.subdisciplineActivity = data.subdisciplineActivity;
+		me.setupView();
+	},
+	addToContainer: function() {
+		this.options.container.append(this.tableDiv);
+	},
+	removeFromContainer: function() {
+		this.tableDiv.remove();
+	},
+	hasKey: function(key) {
+		return (this.keyToMarkerManagers.hasOwnProperty(key));
+	},
+	show: function(key) {
+		this.tableDiv.show();
+	},
+	hide: function(key) {
+		this.tableDiv.hide();
+	},
+	cleanView: function() {
+		this.removeFromContainer();
+	},
+	initView: function() {
+		this.addToContainer(this.tableDiv);
+		this.show();
+	},
+	setupView: function() {
+		
+		var me = this;
+		
+		me.tableDiv.addClass("subEntityTable");
+		
+		/* Create filter */
+		entityVivoProfileURLPrefix
+		var organizationHeader = $('<div><a class="suborganization-title" href="' + 
+				entityVivoProfileURLPrefix + me.uri +'">' + 
+				truncateText(me.label, 23) + '</a><a href="' + entityMapOfScienceURLPrefix + 
+				me.label.replace(/\s+/g, '') + '"><img class="drillDownIcon" src="' + 
+				drillDownIconUrl + '" alt="drill down" title="drill down" /></a></div>');
+		me.tableDiv.append(organizationHeader);
+		
+		/* Create table */
+		var table = $('<table>');
+		table.attr('id', 'entityDatatable');
+		table.addClass('entity-datatable-table');
+		
+		/* Create table header */
+		var thead = $('<thead>');
+		var tr = $('<tr>');
+		
+		/*var levelOfScienceAreaTH = $('<th>');
+		levelOfScienceAreaTH.html('Level of Science Area');*/
+		
+		var scienceAreasTH = $('<th>');
+		scienceAreasTH.attr("id", "entity-science-areas-th");
+		scienceAreasTH.html('Sub-Disciplines');
+		
+		var activityCountTH = $('<th width="53">');
+		activityCountTH.html('# of pubs.');
+
+		//tr.append(levelOfScienceAreaTH);
+		tr.append(scienceAreasTH);
+		tr.append(activityCountTH);
+		
+		thead.append(tr);
+		table.append(thead);
+		
+		/* Create tbody and contents */
+		var tbody = $('<tbody>');
+		
+		var rowsToInsert = [];
+		var i = 0;
+		
+		$.each(me.subdisciplineActivity, function(index, density) {
+			rowsToInsert[i++] = '<tr id="' + index + '">';
+			rowsToInsert[i++] = '<td style="color:' + me.color + ';">' + truncateText(SUBDISCIPLINES[index].label, 20) + '</td>';
+			rowsToInsert[i++] = '<td style="color:' + me.color + ';">' + density.toFixed(1) + '</td></tr>';
+		});
+		
+		tbody.append(rowsToInsert.join(''));
+		table.append(tbody);
+		me.tableDiv.append(table);
+		
+		/* Register events */
+		table.children("tbody").children("tr").mouseenter(function() {
+			me.sciMapWidget.mouseInNode(me.type, me.label, $(this).attr("id"));
+		});
+		
+		table.children("tbody").children("tr").mouseleave(function() {
+			me.sciMapWidget.mouseOutNode(me.type, me.label, $(this).attr("id"));
+		});
+		
+		/* Init DataTable object */
+		me.widget = table.dataTable({
+		    "sDom": '<"' + me.dom.paginationContainerClass + '"p><"table-separator"><"datatablewrapper"t>',
+		    "aaSorting": [
+		        [1, "desc"], [0,'asc']
+		    ],
+		    "asStripClasses": [],
+		    "aoColumns": [{ "bSearchable": false },
+		                  { "bSearchable": false }], 
+		    "iDisplayLength": 10,
+		    "bInfo": true,
+		    "bFilter": false,
+		    "oLanguage": {
+				"sInfo": "_START_ - _END_ of _TOTAL_",
+				"sInfoEmpty": "No matching science areas found",
+				"sInfoFiltered": ""
+			},
+		    "sPaginationType": "gmail_style",
+		    "fnDrawCallback": function () {
+		    }
+		});
+		
+		/* Create csv download button */
+		var csvButton = '<hr class="subtle-hr" /><div id="main-science-areas-table-footer" style="background-color:' + me.color + ';"><a href="' +
+						entityMapOfScienceSubDisciplineCSVURLPrefix + me.uri +
+						'" class="map-of-science-links">Save All as CSV</a></div>';
+		me.tableDiv.append(csvButton);
+		
+		/* Create mapping statistic result */
+		var totalPublications = me.pubsWithNoJournals + me.pubsWithInvalidJournals + me.pubsMapped;
+		var mappedText = '<a class="mapped-result" href="' + entityUnmappedJournalsCSVURLPrefix + me.uri + '">' + 
+						(100 * me.pubsMapped / totalPublications).toFixed(2) + '% mapped</a>';
+		me.tableDiv.append($(mappedText));
+		me.widget.fnDraw();
+	}
+});
+
+function truncateText(text, len) {
+
+	var trunc = text;
+	
+	if (text.length > len) {
+		trunc = text.substring(0, len);
+		trunc = trunc.replace(/\w+$/, '') + '<font title="' + text + '">...</font>'
+	}
+
+	return trunc;
+}

productMods/js/visualization/mapofscience/VisModeControllers.js

@@ -125,7 +125,8 @@ var ComparisonVisModeController = VisModeController.extend({
 	initWidgets: function(map) {
 		var widgets = {};
 		widgets['scimap'] = new ComparisonScimapWidget(map);
-		widgets['sci_area_table'] = new ComparisonDataTableWidget(widgets['scimap']);
+		widgets['entity_area_table'] = new EntityTablesWidget(widgets['scimap']);
+		widgets['sci_area_table'] = new ComparisonDataTableWidget(widgets['scimap'], widgets['entity_area_table']);
 		
 		this.widgets = widgets;
 	}