Check in map of science's comparison view for 1.4 release testing
Remaining works: - support csv download for sub-entity - show sub-entity mapping results
This commit is contained in:
kongchinhua
parent
60a87403d1
commit
be65655c7e
14 changed files with 895 additions and 316 deletions
|
|
@ -0,0 +1,267 @@
|
|||
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||
|
||||
var ComparisonDataTableWidget = Class.extend({
|
||||
|
||||
dom: {
|
||||
searchBarParentContainerClass : "comparisonSearchbar",
|
||||
paginationContainerClass : "paginatedtabs",
|
||||
containerID: "main-science-areas-table-container",
|
||||
footerID: "main-science-areas-table-footer",
|
||||
firstFilterID: "comparison-first-filter",
|
||||
secondFilterID: "comparison-second-filter",
|
||||
filterOptionClass: "comparison-filter-option",
|
||||
activeFilterClass: "comparison-active-filter",
|
||||
filterInfoIconClass: "comparisonFilterInfoIcon"
|
||||
},
|
||||
init: function(sciMapWidget) {
|
||||
var me = this;
|
||||
me.sciMapWidget = sciMapWidget;
|
||||
me.widgetType = "COMPARISON_SCIENCE_AREAS";
|
||||
me.currentSelectedFilter = COMPARISON_TYPE.ORGANIZATION;
|
||||
me.widget = '';
|
||||
me.tableDiv = $('<div />');
|
||||
$("#" + me.dom.containerID).append(this.tableDiv);
|
||||
},
|
||||
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.subEntities = data.subEntities;
|
||||
|
||||
me.setupView();
|
||||
},
|
||||
hasKey: function(key) {
|
||||
return (this.keyToMarkerManagers.hasOwnProperty(key));
|
||||
},
|
||||
show: function(key) {
|
||||
this.tableDiv.show();
|
||||
},
|
||||
hide: function(key) {
|
||||
this.tableDiv.hide();
|
||||
},
|
||||
cleanView: function() {
|
||||
this.hide();
|
||||
},
|
||||
initView: function() {
|
||||
this.show();
|
||||
this.changeFilter(this.currentSelectedFilter);
|
||||
},
|
||||
setupView: function() {
|
||||
|
||||
var me = this;
|
||||
|
||||
/* Create filter */
|
||||
var dom = me.dom;
|
||||
var filter = $('<div class="science-areas-filter">' +
|
||||
'<span id="' + dom.firstFilterID + '" class="' + dom.filterOptionClass + ' ' + dom.activeFilterClass + '">Organizations</span> | ' +
|
||||
'<span id="' + dom.secondFilterID + '" class="' + dom.filterOptionClass + '">People</span>' +
|
||||
'<img class="' + dom.filterInfoIconClass + '" id="comparisonImageIconTwo" src="'+ infoIconUrl +'" alt="information icon" title="" /></div>');
|
||||
me.tableDiv.append(filter);
|
||||
createToolTip($("#comparisonImageIconTwo"), $("#comparisonToolTipTwo").html(), "topLeft");
|
||||
initFilter(dom);
|
||||
|
||||
/* Create table */
|
||||
var table = $('<table>');
|
||||
table.attr('id', 'comparisonDatatable');
|
||||
table.addClass('datatable-table');
|
||||
|
||||
var thead = $('<thead>');
|
||||
var tr = $('<tr>');
|
||||
|
||||
var levelOfScienceAreaTH = $('<th>');
|
||||
levelOfScienceAreaTH.html('Entity Type');
|
||||
|
||||
var checkBoxTH = $('<th>');
|
||||
checkBoxTH.html('');
|
||||
|
||||
var scienceAreasTH = $('<th>');
|
||||
scienceAreasTH.attr("id", "comparison-science-areas-th");
|
||||
if (this.currentSelectedFilter === COMPARISON_TYPE.ORGANIZATION ) {
|
||||
scienceAreasTH.html('Organization');
|
||||
} else {
|
||||
scienceAreasTH.html('Person');
|
||||
}
|
||||
|
||||
var activityCountTH = $('<th>');
|
||||
activityCountTH.html('# of pubs.');
|
||||
activityCountTH.attr("id", "activity-count-column");
|
||||
|
||||
tr.append(levelOfScienceAreaTH);
|
||||
tr.append(checkBoxTH);
|
||||
tr.append(scienceAreasTH);
|
||||
tr.append(activityCountTH);
|
||||
|
||||
thead.append(tr);
|
||||
|
||||
table.append(thead);
|
||||
|
||||
var tbody = $('<tbody id="comparisonTbody">');
|
||||
|
||||
var rowsToInsert = [];
|
||||
var i = 0;
|
||||
|
||||
$.each(me.subEntities, function(index, item) {
|
||||
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>';
|
||||
});
|
||||
|
||||
tbody.append(rowsToInsert.join(''));
|
||||
|
||||
table.append(tbody);
|
||||
me.tableDiv.append(table);
|
||||
|
||||
table.children("tbody").children("tr").mouseenter(function() {
|
||||
|
||||
var item = me.subEntities[$(this).attr("id")];
|
||||
me.sciMapWidget.mouseIn(item.type, item.label);
|
||||
});
|
||||
|
||||
table.children("tbody").children("tr").mouseleave(function() {
|
||||
|
||||
var item = me.subEntities[$(this).attr("id")];
|
||||
me.sciMapWidget.mouseOut(item.type, item.label);
|
||||
});
|
||||
|
||||
$('.chk').click(function() {
|
||||
var element = $(this);
|
||||
var index = element.attr("value");
|
||||
var item = me.subEntities[index];
|
||||
var color = "grey";
|
||||
if (element.attr('checked')) {
|
||||
if ($("input:checkbox[class=chk]:checked").length > 3) {
|
||||
element.attr('checked', false);
|
||||
alert("The maximum number of items for comparison is 3.");
|
||||
} else {
|
||||
me.loadEntity(item.uri, index);
|
||||
}
|
||||
} else {
|
||||
me.unloadEntity(item.type, item.label, index);
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* GMAIL_STYLE_PAGINATION_CONTAINER_CLASS, ACTIVE_DISCIPLINE_SUBDISCIPLINE_FILTER has to be declared
|
||||
* for the filter & pagination to work properly.
|
||||
* */
|
||||
GMAIL_STYLE_PAGINATION_CONTAINER_CLASS = me.dom.paginationContainerClass;
|
||||
ACTIVE_DISCIPLINE_SUBDISCIPLINE_FILTER = me.currentSelectedFilter;
|
||||
|
||||
if($.inArray(disciplineOrSubdisciplineDataTableFilter, $.fn.dataTableExt.afnFiltering) < 0) {
|
||||
$.fn.dataTableExt.afnFiltering.push(disciplineOrSubdisciplineDataTableFilter);
|
||||
}
|
||||
|
||||
me.widget = table.dataTable({
|
||||
"sDom": '<"' + me.dom.searchBarParentContainerClass
|
||||
+ '"f><"filterInfo"i><"'
|
||||
+ me.dom.paginationContainerClass + '"p><"table-separator"><"datatablewrapper"t>',
|
||||
"aaSorting": [
|
||||
[3, "desc"], [2,'asc']
|
||||
],
|
||||
"asStripClasses": [],
|
||||
"aoColumns": [{ "bVisible": false, "bSearchable": false },
|
||||
null,
|
||||
null,
|
||||
null],
|
||||
"iDisplayLength": 10,
|
||||
"bInfo": true,
|
||||
"oLanguage": {
|
||||
"sInfo": "_START_ - _END_ of _TOTAL_",
|
||||
"sInfoEmpty": "No matching science areas found",
|
||||
"sInfoFiltered": ""
|
||||
},
|
||||
"sPaginationType": "gmail_style",
|
||||
"fnDrawCallback": function () {
|
||||
|
||||
/* We check whether max number of allowed comparisions (currently 10) is reached
|
||||
* here as well becasue the only function that is guaranteed to be called during
|
||||
* page navigation is this. No need to bind it to the nav-buttons becuase 1. It is over-ridden
|
||||
* by built-in navigation events & this is much cleaner.
|
||||
* */
|
||||
// checkIfColorLimitIsReached();
|
||||
}
|
||||
});
|
||||
|
||||
/* Create search box */
|
||||
var searchInputBox = $("." + me.dom.searchBarParentContainerClass).find("input[type=text]");
|
||||
searchInputBox.css("width", "140px");
|
||||
searchInputBox.after("<span id='comparison-reset-search' title='Clear search query'>X</span>"
|
||||
+ "<img class='comparisonFilterInfoIcon' id='comparisonSearchInfoIcon' src='" + infoIconUrl + "' alt='information icon' title='' />");
|
||||
$("#comparison-reset-search").live('click', function() {
|
||||
me.widget.fnFilter("");
|
||||
});
|
||||
createToolTip($("#comparisonSearchInfoIcon"), $("#comparisonSearchInfoTooltipText").html(), "topLeft");
|
||||
|
||||
/* Create csv download button */
|
||||
var csvButton = '<hr class="subtle-hr"/><div id="main-science-areas-table-footer"><a id="csv" href="' +
|
||||
entityMapOfScienceSubDisciplineCSVURL +
|
||||
'" 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;
|
||||
if (filterType === COMPARISON_TYPE.ORGANIZATION) {
|
||||
|
||||
$("#comparison-science-areas-th").html("Organization");
|
||||
me.currentSelectedFilter = COMPARISON_TYPE.ORGANIZATION;
|
||||
$("a#csv").attr("href", entityMapOfScienceSubDisciplineCSVURL);
|
||||
} else {
|
||||
|
||||
$("#comparison-science-areas-th").html("Person");
|
||||
me.currentSelectedFilter = COMPARISON_TYPE.PERSON;
|
||||
$("a#csv").attr("href", entityMapOfScienceDisciplineCSVURL);
|
||||
|
||||
}
|
||||
|
||||
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) {
|
||||
$("input:checkbox[class=chk]").each(function(){
|
||||
var item = me.subEntities[$(this).attr("value")];
|
||||
if (item.type == me.currentSelectedFilter) {
|
||||
// click event didn't work at this point???
|
||||
$(this).click();
|
||||
me.loadEntity(item.uri, $(this).attr("value"));
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
loadEntity: function(uri, index) {
|
||||
|
||||
// Download data from server and add to markerManager if not gotten already
|
||||
var me = this;
|
||||
var url = scienceMapDataPrefix + uri;
|
||||
downloader.download(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));
|
||||
});
|
||||
},
|
||||
unloadEntity: function(key, childKey, index) {
|
||||
this.sciMapWidget.unloadEntity(key, childKey);
|
||||
|
||||
// This is ugly, need fix!!!
|
||||
$("#comparisonTbody > tr[id=" + index + "]").css("color", "grey");
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue