NIHVIVO-1997 Removed pie charts and class group browse from menu pages due to current limitations of individual counts for classes. This should all be brought back from the dead in the future once we implement counts based on most specific type.

webapp/web/css/menupage/menupage.css

@@ -59,22 +59,15 @@ ul#vgraph-classes a {
 }
 /* FIND BY ------>  */
 #find-by {
-    width: 230px;
     float: right;
-    margin-top: 20px;
+    margin: 0 2em .4em 0;
 }
 #find-by h3 {
-    padding: 0 25px 12px 12px;
+    padding: 0 0 .2em .8em;
     border-bottom: 0;
 }
-ul#find-filters {
-    float: left;
-    width: 230px;
-}
 ul#find-filters li {
-    display: block;
+    float: left;
-    height: 35px;
-    line-height: 35px;
     padding-left: 10px;
 }
 ul#find-filters li:last-child { 
@@ -83,8 +76,6 @@ ul#find-filters li:last-child {
 ul#find-filters a {
     display: block;
     padding-left: 15px;
-    width: 265px;
-    height: 35px;
 }
 /* RESEARCHERS ------>  */
 #researchers {
@@ -158,7 +149,6 @@ ul#find-filters a {
     clear: both;
     width: 90%;
     margin: 0 auto;
-    margin-top: 40px;
     overflow: hidden;
 }
 #browse-by h2 {
@@ -223,6 +213,10 @@ ul#alpha-browse-individuals a {
     margin-right: 17px;
     min-height: 170px;
 }
+h3.selected-class {
+    margin: 0 0 0 1em;
+    padding: .8em 0 0 0;
+}
 #individuals-in-class ul {
     list-style: none;
 }

webapp/web/js/browseClassGroupsPie.js

@@ -1,95 +0,0 @@
-/* $This file is distributed under the terms of the license in /doc/license.txt$ */
-
-var browseClassGroups = {
-    // Initial page setup
-    onLoad: function() {
-        this.mergeFromTemplate();
-        this.initObjects();
-    },
-    
-    // Add variables from browse template
-    mergeFromTemplate: function() {
-        $.extend(this, browseData);
-    },
-    
-    // Create references to frequently used elements for convenience
-    initObjects: function() {
-        this.browseClassLinks = $('#vgraph-classes li a');
-    },
-    
-    // Retrieve classes 
-    graphSetup: function() {
-        var values = [],
-            labels = [],
-            uris = [];
-        this.browseClassLinks.each(function() {
-            var count = $(this).children('span').text();
-            var count = parseInt(count.slice(1, -1), 10);
-            var percentage = parseInt(Math.round((count / browseClassGroups.classGroupIndividualCount) * 100), 10);
-            var name = $(this).text();
-            var countStart = name.lastIndexOf(' (');
-            var name = name.substring(0, countStart);
-            // alert(name +' | ' + count +' | '+ percentage);
-            if ( percentage > 0) {
-                values.push(percentage);
-                var name = name +' ('+ percentage +'%)';
-                labels.push(name);
-                uris.push($(this).attr("data-uri"));
-            }
-        });
-        
-        // Send the parameters to build the pie chart
-        graphClasses.piechart(values, labels, uris);
-    }
-};
-
-var graphClasses = {
-    // Build the pie chart using gRaphael
-    piechart: function(values, labels, uris) {
-        // Clear the existing pie chart
-        $('#menupage-graph').empty();
-        
-        // Create the canvas
-        var r = Raphael("menupage-graph", 500, 300);
-        
-        // Setup the colors for the slices
-        // colors = ['#192933', '#26404E', '#294656', '#194c68', '#487A96', '#63A8CE', '#67AED6','#758A96', '#9DB9C9' ];
-        colors = ['#143D52', '#1F5C7A', '#297AA3', '#3399CC', '#5CADD6', '#85C2E0', '#ADD6EB', '#ADCBDD', '#D6EBF5', '#E9F1F5' ];
-        // Reverse colors to see how it looks with larger slices in lighter hues:
-        // colors = colors.reverse();
-        
-        // Now draw the pie chart
-        var pie = r.g.piechart(150, 142, 100, values, {legend: labels, legendmark: "square", legendpos: "east", colors: colors});
-        pie.hover(function () {
-            this.sector.stop();
-            this.sector.scale(1.1, 1.1, this.cx, this.cy);
-            if (this.label) {
-                this.label[0].stop();
-                this.label[0].scale(1.5);
-                this.label[1].attr({"font-weight": 800});
-            }
-        }, function () {
-            this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
-            if (this.label) {
-                this.label[0].animate({scale: 1}, 500, "bounce");
-                this.label[1].attr({"font-weight": 400});
-            }
-        });
-        
-        // Can't reliably link the slices at the moment. Will come up with a solution if we end up sticking with the pie charts
-        // $('path').click(function() {
-        //     var index = $('path').index(this);
-        //     var uri = uris[index];
-        //     // var link = browseClassGroups.baseUrl + '/individuallist?vclassId=' + encodeURIComponent(uri);
-        //     window.location = "#browse-by";
-        //     browseByVClass.getIndividuals(uri);
-        //     return false;
-        // });
-    }
-};
-
-$(document).ready(function() {
-    browseClassGroups.onLoad();
-    browseClassGroups.graphSetup();
-    // graphClasses.piechart();
-});

webapp/web/js/menupage/browseByVClass.js

@@ -87,7 +87,8 @@ var browseByVClass = {
             scroll = true;
         }
         
-        // First wipe currently displayed individuals and existing pagination
+        // First wipe currently displayed class heading, individuals, and existing pagination
+        $('h3.selected-class').remove();
         this.individualsInVClass.empty();
         $('nav.pagination').remove();
         
@@ -98,6 +99,9 @@ var browseByVClass = {
                 browseByVClass.pagination(pages, page);
             }
             
+            selectedClassHeading = '<h3 class="selected-class">'+ results.vclass.name +'</h3>';
+            browseByVClass.individualsContainer.prepend(selectedClassHeading);
+            
             $.each(results.individuals, function(i, item) {
                 label = results.individuals[i].label;
                 moniker = results.individuals[i].moniker;
@@ -127,9 +131,9 @@ var browseByVClass = {
             browseByVClass.selectedVClass(results.vclass.URI);
             browseByVClass.selectedAlpha(alpha);
             
-            // Scroll to the top of the browse section unless told otherwise
+            // Scroll to #menupage-intro page unless told otherwise
             if ( scroll != false ) {
-                $.scrollTo('#browse-by', 500);
+                $.scrollTo('#menupage-intro', 500);
             }
         });
     },

webapp/web/js/raphael/g.pie.js

@@ -1,205 +0,0 @@
-/*
- * g.Raphael 0.4.1 - Charting library, based on Raphaël
- *
- * Copyright (c) 2009 Dmitry Baranovskiy (http://g.raphaeljs.com)
- * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
- */
-Raphael.fn.g.piechart = function (cx, cy, r, values, opts) {
-    opts = opts || {};
-    var paper = this,
-        sectors = [],
-        covers = this.set(),
-        chart = this.set(),
-        series = this.set(),
-        order = [],
-        len = values.length,
-        angle = 0,
-        total = 0,
-        others = 0,
-        cut = 9,
-        defcut = true;
-    chart.covers = covers;
-    if (len == 1) {
-        series.push(this.circle(cx, cy, r).attr({fill: this.g.colors[0], stroke: opts.stroke || "#fff", "stroke-width": opts.strokewidth == null ? 1 : opts.strokewidth}));
-        covers.push(this.circle(cx, cy, r).attr(this.g.shim));
-        total = values[0];
-        values[0] = {value: values[0], order: 0, valueOf: function () { return this.value; }};
-        series[0].middle = {x: cx, y: cy};
-        series[0].mangle = 180;
-    } else {
-        function sector(cx, cy, r, startAngle, endAngle, fill) {
-            var rad = Math.PI / 180,
-                x1 = cx + r * Math.cos(-startAngle * rad),
-                x2 = cx + r * Math.cos(-endAngle * rad),
-                xm = cx + r / 2 * Math.cos(-(startAngle + (endAngle - startAngle) / 2) * rad),
-                y1 = cy + r * Math.sin(-startAngle * rad),
-                y2 = cy + r * Math.sin(-endAngle * rad),
-                ym = cy + r / 2 * Math.sin(-(startAngle + (endAngle - startAngle) / 2) * rad),
-                res = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(Math.abs(endAngle - startAngle) > 180), 1, x2, y2, "z"];
-            res.middle = {x: xm, y: ym};
-            return res;
-        }
-        for (var i = 0; i < len; i++) {
-            total += values[i];
-            values[i] = {value: values[i], order: i, valueOf: function () { return this.value; }};
-        }
-        values.sort(function (a, b) {
-            return b.value - a.value;
-        });
-        for (i = 0; i < len; i++) {
-            if (defcut && values[i] * 360 / total <= 1.5) {
-                cut = i;
-                defcut = false;
-            }
-            if (i > cut) {
-                defcut = false;
-                values[cut].value += values[i];
-                values[cut].others = true;
-                others = values[cut].value;
-            }
-        }
-        len = Math.min(cut + 1, values.length);
-        others && values.splice(len) && (values[cut].others = true);
-        for (i = 0; i < len; i++) {
-            var mangle = angle - 360 * values[i] / total / 2;
-            if (!i) {
-                angle = 90 - mangle;
-                mangle = angle - 360 * values[i] / total / 2;
-            }
-            if (opts.init) {
-                var ipath = sector(cx, cy, 1, angle, angle - 360 * values[i] / total).join(",");
-            }
-            var path = sector(cx, cy, r, angle, angle -= 360 * values[i] / total);
-            var p = this.path(opts.init ? ipath : path).attr({fill: opts.colors && opts.colors[i] || Raphael.getColor("#194c68") || "#666", stroke: opts.stroke || "#fff", "stroke-width": (opts.strokewidth == null ? 1 : opts.strokewidth), "stroke-linejoin": "round"});
-            p.value = values[i];
-            p.middle = path.middle;
-            p.mangle = mangle;
-            sectors.push(p);
-            series.push(p);
-            opts.init && p.animate({path: path.join(",")}, (+opts.init - 1) || 1000, ">");
-        }
-        for (i = 0; i < len; i++) {
-            p = paper.path(sectors[i].attr("path")).attr(this.g.shim);
-            opts.href && opts.href[i] && p.attr({href: opts.href[i]});
-            p.attr = function () {};
-            covers.push(p);
-            series.push(p);
-        }
-    }
-
-    chart.hover = function (fin, fout) {
-        fout = fout || function () {};
-        var that = this;
-        for (var i = 0; i < len; i++) {
-            (function (sector, cover, j) {
-                var o = {
-                    sector: sector,
-                    cover: cover,
-                    cx: cx,
-                    cy: cy,
-                    mx: sector.middle.x,
-                    my: sector.middle.y,
-                    mangle: sector.mangle,
-                    r: r,
-                    value: values[j],
-                    total: total,
-                    label: that.labels && that.labels[j]
-                };
-                cover.mouseover(function () {
-                    fin.call(o);
-                }).mouseout(function () {
-                    fout.call(o);
-                });
-            })(series[i], covers[i], i);
-        }
-        return this;
-    };
-    // x: where label could be put
-    // y: where label could be put
-    // value: value to show
-    // total: total number to count %
-    chart.each = function (f) {
-        var that = this;
-        for (var i = 0; i < len; i++) {
-            (function (sector, cover, j) {
-                var o = {
-                    sector: sector,
-                    cover: cover,
-                    cx: cx,
-                    cy: cy,
-                    x: sector.middle.x,
-                    y: sector.middle.y,
-                    mangle: sector.mangle,
-                    r: r,
-                    value: values[j],
-                    total: total,
-                    label: that.labels && that.labels[j]
-                };
-                f.call(o);
-            })(series[i], covers[i], i);
-        }
-        return this;
-    };
-    chart.click = function (f) {
-        var that = this;
-        for (var i = 0; i < len; i++) {
-            (function (sector, cover, j) {
-                var o = {
-                    sector: sector,
-                    cover: cover,
-                    cx: cx,
-                    cy: cy,
-                    mx: sector.middle.x,
-                    my: sector.middle.y,
-                    mangle: sector.mangle,
-                    r: r,
-                    value: values[j],
-                    total: total,
-                    label: that.labels && that.labels[j]
-                };
-                cover.click(function () { f.call(o); });
-            })(series[i], covers[i], i);
-        }
-        return this;
-    };
-    chart.inject = function (element) {
-        element.insertBefore(covers[0]);
-    };
-    var legend = function (labels, otherslabel, mark, dir) {
-        var x = cx + r + r / 5,
-            y = cy,
-            h = y + 10;
-        labels = labels || [];
-        dir = (dir && dir.toLowerCase && dir.toLowerCase()) || "east";
-        mark = paper.g.markers[mark && mark.toLowerCase()] || "disc";
-        chart.labels = paper.set();
-        for (var i = 0; i < len; i++) {
-            var clr = series[i].attr("fill"),
-                j = values[i].order,
-                txt;
-            values[i].others && (labels[j] = otherslabel || "Others");
-            labels[j] = paper.g.labelise(labels[j], values[i], total);
-            chart.labels.push(paper.set());
-            chart.labels[i].push(paper.g[mark](x + 5, h, 5).attr({fill: clr, stroke: "none"}));
-            chart.labels[i].push(txt = paper.text(x + 20, h, labels[j] || values[j]).attr(paper.g.txtattr).attr({fill: opts.legendcolor || "#000", "text-anchor": "start"}));
-            covers[i].label = chart.labels[i];
-            h += txt.getBBox().height * 1.2;
-        }
-        var bb = chart.labels.getBBox(),
-            tr = {
-                east: [0, -bb.height / 2],
-                west: [-bb.width - 2 * r - 20, -bb.height / 2],
-                north: [-r - bb.width / 2, -r - bb.height - 10],
-                south: [-r - bb.width / 2, r + 10]
-            }[dir];
-        chart.labels.translate.apply(chart.labels, tr);
-        chart.push(chart.labels);
-    };
-    if (opts.legend) {
-        legend(opts.legend, opts.legendothers, opts.legendmark, opts.legendpos);
-    }
-    chart.push(series, covers);
-    chart.series = series;
-    chart.covers = covers;
-    return chart;
-};

webapp/web/templates/freemarker/body/menupage/menupage.ftl

@@ -6,20 +6,6 @@
     <section id="menupage-intro" role="region">
         <h3>${page.title}</h3>
         
-        <section id="menupage-content" role="region">
-            <#-- This will allow us to keep menupage.ftl generic and keep vivo-specific extensions in VIVO -->
-            <#if visualizationLink??>
-                ${visualizationLink}
-            </#if>
-            
-            <h4>Visual Graph</h4>
-            
-            <#include "menupage-vClassesInClassgroup.ftl">
-            
-            <section id="menupage-graph" role="region">
-                <img src="${urls.images}/menupage/visual-graph-generic-class.jpg" width="500" height="283" alt ="" />
-            </section>
-        </section>
     </section>
     
     <#include "menupage-browse.ftl">

webapp/web/templates/freemarker/body/partials/menupage/menupage-browse.ftl

@@ -3,8 +3,6 @@
 <#-- Template for browsing individuals in class groups for menupages -->
 
 <section id="browse-by" role="region">
-    <h2>Browse by</h2>
-    
     <nav role="navigation">
         <ul id="browse-classes">
             <#list vClassGroup as vClass>

webapp/web/templates/freemarker/body/partials/menupage/menupage-scripts.ftl

@@ -21,22 +21,13 @@ template variable with the domain name for an AJAX request with visualizations.
     </#if>
 </#list>
 
-<#-- classGroupIndividualCount is assigned in menupage-vClassesInClassGroup.ftl -->
 <script type="text/javascript">
     var menupageData = {
         baseUrl: '${domainName + urls.base}',
         dataServiceUrl: '${domainName + urls.base}/dataservice?getLuceneIndividualsByVClass=1&vclassId=',
         defaultBrowseVClassUri: '${firstNonEmptyVClass}'
     };
-    
-    var browseData = {
-        classGroupUri: '${classGroupUri!}',
-        classGroupIndividualCount: '${classGroupIndividualCount!}'
-    };
 </script>
 
 <#-- Script to enable browsing individuals within a class -->
 ${scripts.add("/js/jquery_plugins/jquery.scrollTo-min.js", "/js/menupage/browseByVClass.js")}
-
-<#-- Scripts required to create the visual graphs -->
-${scripts.add("/js/raphael/raphael.js", "/js/raphael/g.raphael.js", "/js/raphael/g.pie.js", "/js/browseClassGroupsPie.js")}