NIHVIVO-3665 - vitro components for new class hierarchy

webapp/web/css/classHierarchy.css

@@ -0,0 +1,85 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+
+table.classHierarchy {
+    margin-left:25px;
+    margin-right:25px;
+    margin-bottom:22px;
+    font-size:.8em;
+    min-width:900px;
+    max-width:900px;
+    background-color:#f8f8f8;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #f0f0f0;
+}
+table.classHierarchy td {
+    padding-left:6px;
+}
+table.classHierarchy .classDetail {
+    width:90px;
+    color:#064D68;
+    white-space: nowrap;
+}
+table.subclassTable {
+    margin-left:15px;
+    margin-bottom:4px;
+    margin-top:-4px;
+    display:none;
+}
+td.subclassCell {
+    font-size:1.2em;
+    padding-bottom:4px;
+}
+section#container div {
+    width:925px;
+    background-color:#f2f2f2;
+    vertical-align:middle;
+    height:26px;
+}
+section#container div a {
+    margin-left: 6px;
+    font-weight: bold;
+}
+section#container div span {
+    padding-right: 10px;
+    float: right;
+}
+span.headerSpanPlus {
+    width: 12px;
+    background: url(../images/vitro_plus_sign.gif) left center no-repeat;
+}
+span.headerSpanMinus {
+    width: 12px;
+    background: url(../images/vitro_minus_sign.gif) left center no-repeat;
+}
+span.subclassExpandPlus {
+    padding-right: 14px;
+    background: url(../images/vitro_plus_sign.gif) left center no-repeat;
+}
+span.subclassExpandMinus {
+    padding-right: 14px;
+    background: url(../images/vitro_minus_sign.gif) left center no-repeat;
+}
+span#expandAll {
+    margin-right: 10px;
+    float: right;
+    font-size: 0.85em;
+}
+div#expandLink {
+    margin-top:-10px;
+    width:100%;
+    margin-bottom:24px;
+}
+label#displayOptions {
+    display:inline-block;
+    padding-right:6px;
+    margin-top:20px;
+}
+table.innerDefinition {
+    margin-top:-5px;
+    margin-left:4px;
+    margin-right:4px;
+    margin-bottom:4px;
+    line-height:20px;
+}
+

webapp/web/js/siteAdmin/classHierarchyUtils.js

@@ -0,0 +1,269 @@
+/* $This file is distributed under the terms of the license in /doc/license.txt$ */
+  
+    var classHierarchyUtils = {
+    onLoad: function(urlBase,displayOption) {
+        this.imagePath = urlBase + "/images/";
+        this.initObjects();
+        this.expandAll.hide();
+
+        if ( displayOption == "all" ) {
+            this.buildAllClassesHtml();
+        }
+        else if ( displayOption == "group" ) {
+            this.buildClassGroupHtml();
+        }
+        else {
+            this.buildClassHierarchyHtml();
+            this.wireExpandLink();
+        }
+        
+        if ( displayOption == "asserted" || displayOption == "inferred" ) {
+            this.expandAll.show();
+        }
+        this.bindEventListeners();
+    },
+
+    initObjects: function() { 
+        this.expandAll = $('span#expandAll').find('a');   
+        this.classCounter = 1;
+        this.expandCounter = 1;
+        this.classHtml = "";
+        this.clickableSpans = [] ;
+        this.form = $('form#classHierarchyForm');
+        this.select = $('select#displayOption');
+        this.addClass = $('input#addClass');
+    },
+
+    bindEventListeners: function() {
+        this.select.change(function() {
+            if ( classHierarchyUtils.select.val() == "all") {
+                classHierarchyUtils.form.attr("action", "listVClassWebapps");
+            }
+            else if ( classHierarchyUtils.select.val() == "group") {
+                classHierarchyUtils.form.attr("action", "listGroups");
+            }
+            
+            classHierarchyUtils.form.submit();
+        });
+        this.addClass.click(function() {
+            classHierarchyUtils.form.attr("action", "vclass_retry");
+            classHierarchyUtils.form.submit();
+        });
+    },
+     
+    buildClassHierarchyHtml: function() {
+
+        $.each(json, function() {
+            $newClassSection = jQuery("<section></section>", {
+                id: "classContainer" + classHierarchyUtils.classCounter
+            });
+            var descendants = "";
+            var headerSpan = "";
+            
+            if ( this.children.length ) {
+                descendants = classHierarchyUtils.getTheChildren(this);
+                headerSpan = "<span class='headerSpanPlus' id='headerSpan" + classHierarchyUtils.classCounter 
+                              + "' view='less'>&nbsp;</span>";
+            }
+
+            classHierarchyUtils.classHtml += "<div>" + this.name + headerSpan + "</div>" + "<table class='classHierarchy' id='classHierarchy" 
+                                      + classHierarchyUtils.classCounter + "'>" ;
+
+            if ( this.data.shortDef.length > 0 ) {
+                classHierarchyUtils.classHtml += "<tr><td colspan='2'>" + this.data.shortDef + "</td></tr>";
+            }
+
+            if ( this.data.classGroup.length > 0 ) {
+                classHierarchyUtils.classHtml += "<tr><td class='classDetail'>Class Group:</td><td>" + this.data.classGroup + "</td></tr>";
+            }
+
+            classHierarchyUtils.classHtml += "<tr><td class='classDetail'>Ontology:</td><td>" + this.data.ontology + "</td></tr>";
+
+ 
+            classHierarchyUtils.classHtml += descendants;
+
+            classHierarchyUtils.classHtml += "</table>";
+       //     alert(classHierarchyUtils.classHtml);
+            $newClassSection.html(classHierarchyUtils.classHtml);
+            $newClassSection.appendTo($('section#container'));
+            classHierarchyUtils.makeHeaderSpansClickable(classHierarchyUtils.classCounter);
+            classHierarchyUtils.makeSubclassSpansClickable();
+            classHierarchyUtils.clickableSpans = [] ;
+            classHierarchyUtils.classHtml = "";
+            classHierarchyUtils.classCounter += 1;
+        });
+    },
+
+    getTheChildren: function(node) {
+        var childDetails = "";
+        var ctr = 0
+        $.each(node.children, function() {
+            if ( ctr == 0 ) {
+                childDetails += "<tr><td class='classDetail'>Subclasses:</td>";
+                ctr = ctr + 1;
+            }
+            else {
+                childDetails += "<tr><td></td>" ;
+            }
+
+            childDetails += "<td class='subclassCell'><span class='subclassExpandPlus' id='subclassExpand" 
+                            + classHierarchyUtils.expandCounter + "'>&nbsp;</span>" 
+                            + this.name + "</td></tr><tr><td></td><td><table id='subclassTable" 
+                            + classHierarchyUtils.expandCounter + "' class='subclassTable'>";
+
+            classHierarchyUtils.clickableSpans.push('subclassExpand' + classHierarchyUtils.expandCounter);
+            
+            classHierarchyUtils.expandCounter += 1;
+            
+            if ( this.data.shortDef.length > 0 ) {
+                childDetails += "<tr><td colspan='2'>" + this.data.shortDef + "</td></tr>";
+            }
+
+            if ( this.data.classGroup.length > 0 ) {
+                childDetails += "<tr><td class='classDetail'>Class Group:</td><td>" + this.data.classGroup + "</td></tr>";
+            }
+
+            childDetails += "<tr><td class='classDetail'>Ontology:</td><td>" + this.data.ontology + "</td></tr>";
+
+            if ( this.children ) {
+                var grandChildren = classHierarchyUtils.getTheChildren(this);
+                childDetails += grandChildren;
+            }
+        });
+        childDetails += "</table></td></tr>";
+        return childDetails;
+    },
+    
+    makeHeaderSpansClickable: function(ctr) {
+
+        var $clickableHeader = $('section#classContainer' + ctr).find('span.headerSpanPlus');
+
+        $clickableHeader.click(function() {
+            if ( $clickableHeader.attr('view') == "less" ) {
+                $clickableHeader.addClass("headerSpanMinus");
+                $('table#classHierarchy' + ctr).find('span').addClass("subclassExpandMinus");
+                $('table#classHierarchy' + ctr).find('table.subclassTable').show();
+                $clickableHeader.attr('view', 'more' );
+            }
+            else {
+                $clickableHeader.removeClass("headerSpanMinus");
+                $('table#classHierarchy' + ctr).find('span').removeClass("subclassExpandMinus");
+                $('table#classHierarchy' + ctr).find('table.subclassTable').hide();
+                $clickableHeader.attr('view', 'less' );
+            }
+        });
+    },//    $('myOjbect').css('background-image', 'url(' + imageUrl + ')');
+    
+    makeSubclassSpansClickable: function() {
+        $.each(classHierarchyUtils.clickableSpans, function() {
+            var currentSpan = this;
+            var $clickableSpan = $('section#container').find('span#' + currentSpan);
+            var $subclassTable = $('section#container').find('table#subclassTable' + currentSpan.replace("subclassExpand",""));
+
+            $clickableSpan.click(function() {
+                if ( $subclassTable.is(':visible') ) {
+                    $subclassTable.hide();
+                    $subclassTable.find('table.subclassTable').hide();
+                    $subclassTable.find('span').removeClass("subclassExpandMinus");
+                    $clickableSpan.removeClass("subclassExpandMinus");
+                }
+                else {
+                    $subclassTable.show();
+                    $clickableSpan.addClass("subclassExpandMinus");
+                }
+            });
+        });
+    },
+    
+    wireExpandLink: function() {
+        this.expandAll.click(function() {
+            if ( classHierarchyUtils.expandAll.text() == "expand all" ) {
+                classHierarchyUtils.expandAll.text("collapse all");
+                $('span.headerSpanPlus').addClass("headerSpanMinus");
+                $('table.classHierarchy').find('span').addClass("subclassExpandMinus");
+                $('table.classHierarchy').find('table.subclassTable').show();
+                $('section#container').find('span.headerSpanPlus').attr('view','more');
+            }
+            else {
+                classHierarchyUtils.expandAll.text("expand all");
+                $('span.headerSpanPlus').removeClass("headerSpanMinus");
+                $('table.classHierarchy').find('span').removeClass("subclassExpandMinus");
+                $('table.classHierarchy').find('table.subclassTable').hide();
+                $('section#container').find('span.headerSpanPlus').attr('view','less');
+            }
+        });
+    },
+     
+    buildAllClassesHtml: function() {
+
+        $.each(json, function() {
+            $newClassSection = jQuery("<section></section>", {
+                id: "classContainer" + classHierarchyUtils.classCounter
+            });
+            
+            classHierarchyUtils.classHtml += "<div>" + this.name + "</div>" + "<table class='classHierarchy' id='classHierarchy" 
+                                      + classHierarchyUtils.classCounter + "'>" ;
+
+            if ( this.data.shortDef.length > 0 ) {
+                classHierarchyUtils.classHtml += "<tr><td colspan='2'>" + this.data.shortDef + "</td></tr>";
+            }
+
+            if ( this.data.classGroup.length > 0 ) {
+                classHierarchyUtils.classHtml += "<tr><td class='classDetail'>Class Group:</td><td>" + this.data.classGroup + "</td></tr>";
+            }
+
+            classHierarchyUtils.classHtml += "<tr><td class='classDetail'>Ontology:</td><td>" + this.data.ontology + "</td></tr>";
+
+            classHierarchyUtils.classHtml += "</table>";
+
+            $newClassSection.html(classHierarchyUtils.classHtml);
+            $newClassSection.appendTo($('section#container'));
+            classHierarchyUtils.classHtml = "";
+            classHierarchyUtils.classCounter += 1;
+        });
+    },
+
+    buildClassGroupHtml: function() {
+
+        $.each(json, function() {
+            $newClassSection = jQuery("<section></section>", {
+                id: "classContainer" + classHierarchyUtils.classCounter
+            });
+            var descendants = "";
+            
+            if ( this.children.length ) {
+                var ctr = 0;
+                $.each(this.children, function() {
+                    if ( ctr == 0 ) {
+                        descendants += "<tr><td class='classDetail'>Classes:</td>";
+                        ctr = ctr + 1;
+                    }
+                    else {
+                        descendants += "<tr><td></td>" ;
+                    }
+
+                    descendants += "<td class='subclassCell'>" + this.name + "</td></tr>";
+                    descendants += "<tr><td></td><td><table class='innerDefinition'><tr><td>" + this.data.shortDef + "</td></tr></table></td></tr>";
+                    
+                });
+                descendants += "</table></td></tr>";
+            }
+
+            classHierarchyUtils.classHtml += "<div>" + this.name + "</div>" + "<table class='classHierarchy' id='classHierarchy" 
+                                      + classHierarchyUtils.classCounter + "'>" ;
+
+            if ( this.data.displayRank.length > 0 ) {
+                classHierarchyUtils.classHtml += "<tr><td class='classDetail'>Display Rank:</td><td>" + this.data.displayRank + "</td></tr>"
+            }
+ 
+            classHierarchyUtils.classHtml += descendants;
+
+            classHierarchyUtils.classHtml += "</table>";
+       //     alert(classHierarchyUtils.classHtml);
+            $newClassSection.html(classHierarchyUtils.classHtml);
+            $newClassSection.appendTo($('section#container'));
+            classHierarchyUtils.classHtml = "";
+            classHierarchyUtils.classCounter += 1;
+        });
+    }
+}

webapp/web/templates/freemarker/body/siteAdmin/siteAdmin-classHierarchy.ftl

@@ -0,0 +1,43 @@
+<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
+
+<section role="region">
+    
+    <h2>${pageTitle!}</h2>
+
+    <#if !displayOption?has_content>
+        <#assign displayOption = "asserted">
+    </#if>
+    <form name="classHierarchyForm" id="classHierarchyForm" action="showClassHierarchy" method="post" role="classHierarchy">
+        <label id="displayOptionLabel" class="inline">Display Options</label>
+        <select id="displayOption" name="displayOption">
+            <option value="asserted" <#if displayOption == "asserted">selected</#if> >Asserted Class Hierarchy</option>
+            <option  value="inferred" <#if displayOption == "inferred">selected</#if> >Inferred Class Hierarchy</option>
+            <option value="all" <#if displayOption == "all">selected</#if> >All Classes</option>
+            <option value="group" <#if displayOption == "group">selected</#if> >Classes by Class Group</option>
+        </select>
+        <input id="addClass" value="Add New Class" class="form-button" type="submit" />
+    </form>
+        
+    
+
+
+    <div id="expandLink"><span id="expandAll" ><a href="#" title="expand all">expand all</a></span></div>
+    <section id="container">
+
+    </section>
+</section>
+<script language="javascript" type="text/javascript" >
+    var json = [${jsonTree!}];
+</script>
+
+<script language="javascript" type="text/javascript" >
+$(document).ready(function() {
+    classHierarchyUtils.onLoad("${urls.base!}","${displayOption!}");
+});    
+</script>
+
+${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/classHierarchy.css" />')}
+
+${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>',
+              '<script type="text/javascript" src="${urls.base}/js/siteAdmin/classHierarchyUtils.js"></script>')}
+