Merge pull request #43 from cbmi/issue-30

Add column headers and enable sorting on results table

varify/static/cilantro/js/templates/varify/tables/header.html

@@ -0,0 +1,21 @@
+<tr>
+    <th title='Gene' data-concept-id=5>
+        <span>Gene<i class='icon-sort'></i></span>
+    </th>
+    <th title='HGVS P' data-concept-id=21>
+        <span>HGVS P<i class='icon-sort'></i></span>
+    </th>
+    <th title='Variant Effect' data-concept-id=10>
+        <span>Effect<i class='icon-sort'></i></span>
+    </th>
+    <th title='HGVS C' data-concept-id=19>
+        <span>HGVS C<i class='icon-sort'></i></span>
+    </th>
+    <th title='Genotype' data-concept-id=16>
+        <span>Genotype<i class='icon-sort'></i></span>
+    </th>
+    <th title='Genomic Position' data-concept-id=1>
+        <span>Position<i class='icon-sort'></i></span>
+    </th>
+    <th title='Condensed Flags' class='unsortable-column'></th>
+</tr>

varify/static/scripts/coffeescript/ui/tables.coffee

@@ -1,6 +1,7 @@
 define [
     'underscore'
     './tables/body'
+    './tables/header'
     './tables/row'
     './tables/table'
 ], (_, mods...) ->

varify/static/scripts/coffeescript/ui/tables/header.coffee

@@ -0,0 +1,83 @@
+define [
+    'underscore'
+    'marionette'
+    'tpl!templates/varify/tables/header.html'
+], (_, Marionette, templates...) ->
+
+    templates = _.object ['header'], templates
+
+    class Header extends Marionette.ItemView
+        tagName: 'thead'
+
+        template: templates.header
+
+        events:
+            'click th': 'onClick'
+
+        initialize: ->
+            @data = {}
+            if not (@data.view = @options.view)
+                throw new Error 'view model required'
+
+        _getConcept: (element) ->
+            concept = parseInt(element.getAttribute('data-concept-id'))
+
+            if concept? and not isNaN(concept)
+                return concept
+
+            # It is possible we registered a click event on a child of the
+            # th element. If that is the case, try to read the concept from
+            # parent of the event target.
+            return parseInt(element.parentElement.getAttribute('data-concept-id'))
+
+        onClick: (event) =>
+            concept = @_getConcept(event.target)
+
+            if not concept? or isNaN(concept)
+                throw new Error 'Unrecognized concept ID on column'
+
+            model = _.find @data.view.facets.models, (f) ->
+                return f.get('concept') == concept
+
+            # If this column is not in the view already, add it in before
+            # updating the view sort properties.
+            if not model?
+                @data.view.facets.add({concept: concept})
+
+            _.each @data.view.facets.models, (f) ->
+                if f.get('concept') == concept
+                    direction = f.get('sort')
+
+                    if direction?
+                        if direction.toLowerCase() == "asc"
+                            f.set('sort', "desc")
+                            f.set('sort_index', 0)
+                        else
+                            f.unset('sort')
+                            f.unset('sort_index')
+                    else
+                        f.set('sort', "asc")
+                        f.set('sort_index', 0)
+                else
+                    f.unset('sort')
+                    f.unset('sort_index')
+
+            @data.view.save()
+
+        onRender: =>
+            _.each @data.view.facets.models, (f) ->
+                $sortIcon = $("th[data-concept-id=#{ f.get('concept') }] i")
+
+                if $sortIcon?
+                    $sortIcon.removeClass('icon-sort icon-sort-up icon-sort-down')
+
+                    direction = (f.get('sort') or '').toLowerCase()
+
+                    sortClass = switch direction
+                        when 'asc' then 'icon-sort-up'
+                        when 'desc' then 'icon-sort-down'
+                        else 'icon-sort'
+
+                    $sortIcon.addClass(sortClass)
+
+    { Header }

varify/static/scripts/coffeescript/ui/tables/table.coffee

@@ -2,7 +2,8 @@ define [
     'underscore'
     'marionette'
     './body'
-], (_, Marionette, body) ->
+    './header'
+], (_, Marionette, body, header) ->
 
 
     # Renders a table with one or more tbody elements each representing a
@@ -23,10 +24,20 @@ define [
             'change:currentpage': 'showCurentPage'
 
         initialize: ->
+            @data = {}
+            if not (@data.view = @options.view)
+                throw new Error 'view model required'
+
+            @header = new header.Header
+                view: @data.view
+
+            @$el.append(@header.render().el)
+
             @collection.on 'reset', =>
                 if @collection.objectCount == 0
                     @$el.hide()
                 else
+                    @header.render()
                     @$el.show()
 
         showCurentPage: (model, num, options) ->

varify/static/scripts/coffeescript/ui/workflows/results.coffee

@@ -484,6 +484,7 @@ define [
 
             @table.show new tables.ResultTable
                 collection: @data.results
+                view: @data.view
 
             @table.currentView.on 'render', () =>
                 @$('.context').stacked('restack', @$el.height())

varify/static/stylesheets/scss/style.scss

@@ -9,6 +9,11 @@ body {
     margin-top: 10px;
 }
 
+.unsortable-column {
+    cursor: auto;
+    pointer-events: none;
+}
+
 // Override Cilantro style
 .table-region {
     margin-top: 10px !important;