diff --git a/webapp/web/css/browseClassGroups.css b/webapp/web/css/browseClassGroups.css
index 33bef6bbb..c9b2fb129 100644
--- a/webapp/web/css/browseClassGroups.css
+++ b/webapp/web/css/browseClassGroups.css
@@ -64,18 +64,18 @@ ul#browse-classgroups .count-classes {
background: #fff;
min-height: 230px;
}
-ul#classgroup-list {
+ul#classes-in-classgroup {
float: left;
width: 90%;
padding: 0 10px 15px 22px;
margin-top: 20px;
margin-bottom: 10px;
}
-ul#classgroup-list.vis {
+ul#classes-in-classgroup.vis {
width: 44%;
border-right: 1px solid #DDE5E4;
}
-ul#classgroup-list li {
+ul#classes-in-classgroup li {
display: block;
float: left;
width: 100%;
@@ -84,17 +84,17 @@ ul#classgroup-list li {
height: 35px;
line-height: 35px;
}
-ul#classgroup-list li:last-child {
+ul#classes-in-classgroup li:last-child {
border-bottom: none
}
-ul#classgroup-list a {
+ul#classes-in-classgroup a {
display: block;
padding-left: 15px;
height: 35px;
color: #5e6363;
text-decoration: none;
}
-ul#classgroup-list .count-individuals {
+ul#classes-in-classgroup .count-individuals {
font-size: 12px;
}
/* VISUALIZATION ------> */
diff --git a/webapp/web/js/browseClassGroups.js b/webapp/web/js/browseClassGroups.js
index 6858d608e..dc8579902 100644
--- a/webapp/web/js/browseClassGroups.js
+++ b/webapp/web/js/browseClassGroups.js
@@ -5,17 +5,17 @@ var browseClassGroups = {
onLoad: function() {
this.mergeFromTemplate();
this.initObjects();
- // this.bindEventListeners();
+ this.bindEventListeners();
},
- // Add variables from menupage template
+ // Add variables from browse template
mergeFromTemplate: function() {
$.extend(this, browseData);
},
// Create references to frequently used elements for convenience
initObjects: function() {
- this.vClassesInClassGroup = $('ul#classgroup-list');
+ this.vClassesInClassGroup = $('ul#classes-in-classgroup');
this.browseClassGroupLinks = $('#browse-classgroups li a');
},
@@ -26,6 +26,25 @@ var browseClassGroups = {
uri = $(this).attr("data-uri");
browseClassGroups.getVClasses(uri);
return false;
+ });
+
+ // Call the bar chart highlighter listener
+ this.chartHighlighterListener();
+ },
+
+ // Listener for bar chart highlighting -- separate from the rest because it needs to be callable
+ chartHighlighterListener: function() {
+ // This essentially replicates the native Raphael hover behavior (see chart.hover below)
+ // but allows us to trigger it via jQuery from the list of classes adjacent to the chart
+ $('ul#classes-in-classgroup li a').hover(function() {
+ var classIndex = $('ul#classes-in-classgroup li a').index(this);
+ $('#visual-graph svg path').eq(classIndex).attr('fill', '#ccc');
+ $('#visual-graph svg text').eq(classIndex).toggle();
+ return false;
+ }, function() {
+ var classIndex = $('ul#classes-in-classgroup li a').index(this);
+ $('#visual-graph svg path').eq(classIndex).attr('fill', '#999');
+ $('#visual-graph svg text').eq(classIndex).toggle();
})
},
@@ -36,6 +55,7 @@ var browseClassGroups = {
}
},
+ // Where all the magic happens -- gonna fetch me some classes
getVClasses: function(classgroupUri, alpha) {
url = this.dataServiceUrl + encodeURIComponent(classgroupUri);
if ( alpha && alpha != "all") {
@@ -45,72 +65,92 @@ var browseClassGroups = {
// First wipe currently displayed classes
this.vClassesInClassGroup.empty();
+ var values = [],
+ labels = [],
+ uris = [];
+
$.getJSON(url, function(results) {
- $.each(results.vClasses, function(i, item) {
- name = results.vClasses[i].name;
- uri = results.vClasses[i].URI;
- indivCount = results.vClasses[i].individualCount;
+ $.each(results.classes, function(i, item) {
+ name = results.classes[i].name;
+ uri = results.classes[i].URI;
+ indivCount = results.classes[i].entityCount;
indexUrl = browseClassGroups.baseUrl + '/individuallist?vclassId=' + encodeURIComponent(uri);
- // Build the content of each list item, piecing together each component
- listItem = '
';
- listItem += ''+ name +'';
- // Include the moniker only if it's not empty and not equal to the VClass name
- listItem += ' (${indivCount})'
- listItem += '
';
- browseClassGroups.vClassesInClassGroup.append(listItem);
+ // Only add to the arrays and render classes when they aren't empty
+ if ( indivCount > 0 ) {
+ values.push(parseInt(indivCount, 10));
+ labels.push(name + ' (' + parseInt(indivCount, 10) +')');
+ uris.push(uri);
+
+ // Build the content of each list item, piecing together each component
+ listItem = '
';
+ browseClassGroups.vClassesInClassGroup.append(listItem);
+ }
})
- // set selected class group
- browseClassGroups.selectedClassGroup(results.vclassGroup.URI);
+ // Set selected class group
+ browseClassGroups.selectedClassGroup(results.classGroupUri);
+
+ // Update the graph
+ graphClassGroups.barchart(values, labels, uris);
+
+ // Call the bar highlighter listener
+ browseClassGroups.chartHighlighterListener();
});
},
- selectedClassGroup: function(vclassUri) {
+ // Toggle the active class group so it's clear which is selected
+ selectedClassGroup: function(classGroupUri) {
// Remove active class on all vClasses
- $('#browse-childClasses li a.selected').removeClass('selected');
- // Can't figure out why using this.selectedBrowseVClass doesn't work here
- // this.selectedBrowseVClass.removeClass('selected');
+ $('#browse-classgroups li a.selected').removeClass('selected');
// Add active class for requested vClass
- $('#browse-childClasses li a[data-uri="'+ vclassUri +'"]').addClass('selected');
+ $('#browse-classgroups li a[data-uri="'+ classGroupUri +'"]').addClass('selected');
}
};
var graphClassGroups = {
-
- barchart: function() {
- var values = [],
- labels = [];
- uris = [];
- $("tr").each(function() {
- values.push(parseInt($("td", this).text(), 10));
- labels.push($("th", this).text());
- uris.push($("th", this).attr("data-uri"));
- });
+ // Build the bar chart using gRaphael
+ barchart: function(values, labels, uris) {
+ // Clear the existing bar chart
+ $('#visual-graph').empty();
+
var height = values.length * 37;
// Create the canvas
- var r = Raphael("pieViz", 300, height + 10);
+ var r = Raphael("visual-graph", 300, height + 10);
- // Hide the table containing the data to be graphed
- $('table.graph-data').addClass('hidden');
var chart = r.g.hbarchart(0, 16, 300, height, [values], {type:"soft", singleColor:"#999"});
// Add the class names as labels and then hide them
chart.label(labels, true);
- // getting a JS error in the console when trying to add the class
+ // Getting a JS error in the console when trying to add the class
// "setting a property that has only a getter"
// $('svg text').addClass('hidden');
// so using .hide() instead
$('svg text').hide();
// Was unable to append within