*/
  ChartOptionView = exports.ChartOptionView = FieldView.extend do # {{{
      # __bind__  : <[ onClick ]>
-     tagName   : 'div'
-     className : 'field option'
 -    ctorName  : 'ChartOptionView'
+     tagName   : 'section'
+     className : 'chart-option field'
      template  : require 'kraken/template/chart-option'
      
      isCollapsed : true
   * @class View for configuring a chart type.
   */
  ChartOptionScaffold = exports.ChartOptionScaffold = Scaffold.extend do # {{{
 -    ctorName       : 'ChartOptionScaffold'
 +    __bind__       : <[ collapseAll expandAll ]>
      tagName        : 'form'
-     className      : 'options scaffold'
+     className      : 'chart-options scaffold'
      template       : require 'kraken/template/chart-scaffold'
 +    
      collectionType : ChartOptionList
      subviewType    : ChartOptionView
      fields         : '.fields'
          container = if @fields then @$el.find @fields else @$el
          container
              .addClass 'isotope'
-             .find '.field.option' .addClass 'isotope-item'
+             .find '.chart-option.field' .addClass 'isotope-item'
          container.isotope do
              # itemPositionDataEnabled : true
-             itemSelector : '.field.option'
 -            itemSelector    : '.chart-option.field'
 -            layoutMode      : 'masonry'
 -            masonry         : columnWidth : 10
 -            getSortData :
++            itemSelector : '.chart-option.field'
 +            layoutMode   : 'masonry'
 +            masonry      : { columnWidth:10 }
 +            filter       : @getOptionsFilter()
 +            sortBy       : 'category'
 +            getSortData  : 
                  category: ($el) ->
                      $el.data 'model' .getCategory()
 -            sortBy: 'category'
 +        this
 +    
 +    getOptionsFilter: ->
 +        data = @$el.find '.options-filter-button.active' .toArray().map -> $ it .data()
 +        sel = data.reduce do
 +            (sel, d) ->
 +                sel += that if d.filter
 +                sel
 +            ''
 +        sel
 +    
 +    collapseAll: ->
 +        _.invoke @_subviews, 'collapse', true
 +        # @renderSubviews()
 +        false
 +    
 +    expandAll: ->
 +        _.invoke @_subviews, 'collapse', false
 +        # @renderSubviews()
 +        false
 +    
      
      /**
       * Add a ChartOption to this scaffold, rerendering the isotope
 
              console.error that if err.stack
              res.send { error:String(err), partial_data:data }
  
- ds = app.controller require './controllers/datasource'
- # ds.map 'get', 'all', ds.allData.bind(ds)
++app.controller require './controllers/datasource'
  
 -# temporarily hardcoded until funciton to get JSON out of 
 -# files in a directory is finished.  Also need to fix
 -# controller method action mapping.
 -app.get '/graphslist' (req, res) ->
 -    data = [
 -        {"options":{"animatedZooms":true,"avoidMinZero":false,"axis":null,"axisLabelColor":"#666666","axisLabelFontSize":11,"axisLabelFormatter":null,"axisLabelWidth":50,"axisLineColor":'#AAAAAA',"axisLineWidth":0.3,"axisTickSize":3,"colorSaturation":1,"colorValue":0.5,"colors":['#FF0097','#EF8158','#83BB32','#182B53','#4596FF','#553DC9','#AD3238','#00FFBC','#F1D950'],"connectSeparatedPoints":false,"customBars":false,"dateWindow":null,"delimiter":",","digitsAfterDecimal":2,"displayAnnotations":false,"drawPoints":true,"drawXAxis":true,"drawXGrid":true,"drawYAxis":true,"drawYGrid":true,"errorBars":false,"file":null,"fillAlpha":0.15,"fillGraph":false,"fractions":false,"gridLineColor":'#D8D8D8',"gridLineWidth":0.3,"hideOverlayOnMouseOut":false,"highlightCircleSize":4,"includeZero":false,"interactionModel":null,"isZoomedIgnoreProgrammaticZoom":false,"labels":null,"labelsDiv":null,"labelsDivStyles":null,"labelsDivWidth":250,"labelsKMB":true,"labelsKMG2":false,"labelsSeparateLines":true,"labelsShowZeroValues":true,"legend":"always","logscale":true,"maxNumberWidth":30,"panEdgeFraction":null,"pixelsPerLabel":null,"pixelsPerXLabel":null,"pixelsPerYLabel":null,"pointSize":1,"rangeSelectorHeight":40,"rangeSelectorPlotFillColor":'#A7B1C4',"rangeSelectorPlotStrokeColor":"#808FAB","rightGap":20,"rollPeriod":1,"showLabelsOnHighlight":true,"showRangeSelector":false,"showRoller":false,"sigFigs":null,"sigma":2,"stackedGraph":false,"stepPlot":false,"strokePattern":null,"strokeWidth":2,"ticker":null,"title":null,"titleHeight":18,"valueFormatter":null,"valueRange":null,"visibility":null,"wilsonInterval":true,"xAxisHeight":null,"xAxisLabelFormatter":null,"xAxisLabelWidth":55,"xLabelHeight":18,"xValueFormatter":null,"xValueParser":null,"xlabel":null,"y2label":null,"yAxisLabelFormatter":null,"yAxisLabelWidth":50,"yLabelWidth":18,"yValueFormatter":null,"ylabel":"Number of Editors"},"slug":"active_editors","name":"Active Wikimedia Editors for All Wikimedia Projects (5+ edits per month)","desc":"","dataset":"/data/datasources/rc/rc_active_editors_count.csv","width":"auto","height":320,"chartType":"dygraphs","parents":["root"],"id":"active_editors"},
 -        {"options":{"animatedZooms":true,"avoidMinZero":false,"axis":null,"axisLabelColor":"#666666","axisLabelFontSize":11,"axisLabelFormatter":null,"axisLabelWidth":50,"axisLineColor":'#AAAAAA',"axisLineWidth":0.3,"axisTickSize":3,"colorSaturation":1,"colorValue":0.5,"colors":['#FF0097','#EF8158','#83BB32','#182B53','#4596FF','#553DC9','#AD3238','#00FFBC','#F1D950'],"connectSeparatedPoints":false,"customBars":false,"dateWindow":null,"delimiter":",","digitsAfterDecimal":2,"displayAnnotations":false,"drawPoints":true,"drawXAxis":true,"drawXGrid":true,"drawYAxis":true,"drawYGrid":true,"errorBars":false,"file":null,"fillAlpha":0.15,"fillGraph":false,"fractions":false,"gridLineColor":'#D8D8D8',"gridLineWidth":0.3,"hideOverlayOnMouseOut":false,"highlightCircleSize":4,"includeZero":false,"interactionModel":null,"isZoomedIgnoreProgrammaticZoom":false,"labels":null,"labelsDiv":null,"labelsDivStyles":null,"labelsDivWidth":250,"labelsKMB":true,"labelsKMG2":false,"labelsSeparateLines":true,"labelsShowZeroValues":true,"legend":"always","logscale":true,"maxNumberWidth":30,"panEdgeFraction":null,"pixelsPerLabel":null,"pixelsPerXLabel":null,"pixelsPerYLabel":null,"pointSize":1,"rangeSelectorHeight":40,"rangeSelectorPlotFillColor":'#A7B1C4',"rangeSelectorPlotStrokeColor":"#808FAB","rightGap":20,"rollPeriod":1,"showLabelsOnHighlight":true,"showRangeSelector":false,"showRoller":false,"sigFigs":null,"sigma":2,"stackedGraph":false,"stepPlot":false,"strokePattern":null,"strokeWidth":2,"ticker":null,"title":null,"titleHeight":18,"valueFormatter":null,"valueRange":null,"visibility":null,"wilsonInterval":true,"xAxisHeight":null,"xAxisLabelFormatter":null,"xAxisLabelWidth":55,"xLabelHeight":18,"xValueFormatter":null,"xValueParser":null,"xlabel":null,"y2label":null,"yAxisLabelFormatter":null,"yAxisLabelWidth":50,"yLabelWidth":18,"yValueFormatter":null,"ylabel":"Number of visitors"},"slug":"unique_visitors","name":"Unique Visitors per Region (comScore)","desc":"","dataset":"/data/datasources/rc/rc_comscore_region_uv.csv","width":"auto","height":320,"chartType":"dygraphs","parents":["root"],"id":"unique_visitors"},
 -        {"options":{"animatedZooms":true,"avoidMinZero":false,"axis":null,"axisLabelColor":"#666666","axisLabelFontSize":11,"axisLabelFormatter":null,"axisLabelWidth":50,"axisLineColor":'#AAAAAA',"axisLineWidth":0.3,"axisTickSize":3,"colorSaturation":1,"colorValue":0.5,"colors":['#FF0097','#EF8158','#83BB32','#182B53','#4596FF','#553DC9','#AD3238','#00FFBC','#F1D950'],"connectSeparatedPoints":false,"customBars":false,"dateWindow":null,"delimiter":",","digitsAfterDecimal":2,"displayAnnotations":false,"drawPoints":true,"drawXAxis":true,"drawXGrid":true,"drawYAxis":true,"drawYGrid":true,"errorBars":false,"file":null,"fillAlpha":0.15,"fillGraph":false,"fractions":false,"gridLineColor":'#D8D8D8',"gridLineWidth":0.3,"hideOverlayOnMouseOut":false,"highlightCircleSize":4,"includeZero":false,"interactionModel":null,"isZoomedIgnoreProgrammaticZoom":false,"labels":null,"labelsDiv":null,"labelsDivStyles":null,"labelsDivWidth":250,"labelsKMB":true,"labelsKMG2":false,"labelsSeparateLines":true,"labelsShowZeroValues":true,"legend":"always","logscale":true,"maxNumberWidth":30,"panEdgeFraction":null,"pixelsPerLabel":null,"pixelsPerXLabel":null,"pixelsPerYLabel":null,"pointSize":1,"rangeSelectorHeight":40,"rangeSelectorPlotFillColor":'#A7B1C4',"rangeSelectorPlotStrokeColor":"#808FAB","rightGap":20,"rollPeriod":1,"showLabelsOnHighlight":true,"showRangeSelector":false,"showRoller":false,"sigFigs":null,"sigma":2,"stackedGraph":false,"stepPlot":false,"strokePattern":null,"strokeWidth":2,"ticker":null,"title":null,"titleHeight":18,"valueFormatter":null,"valueRange":null,"visibility":null,"wilsonInterval":true,"xAxisHeight":null,"xAxisLabelFormatter":null,"xAxisLabelWidth":55,"xLabelHeight":18,"xValueFormatter":null,"xValueParser":null,"xlabel":null,"y2label":null,"yAxisLabelFormatter":null,"yAxisLabelWidth":50,"yLabelWidth":18,"yValueFormatter":null,"ylabel":"Number of Articles"},"slug":"articles","name":"Wikipedia Articles","desc":"","dataset":"/data/datasources/rc/rc_article_count.csv","width":"auto","height":320,"chartType":"dygraphs","parents":["root"],"id":"articles"},
 -    ]
 -    res.send data
  
  app.get '/', (req, res) ->
      res.render 'dashboard'
 
  - var graph_id = view.id || model.id || model.cid
- section.graph.graph-edit(id=graph_id)
+ section.graph-edit.graph(id=graph_id)
 -    form.graph-details.form-horizontal
 -        
 -        .name-row.row-fluid.control-group
 -            //- label.name.control-label(for="#{id}_name"): h3 Graph Name
 -            input.span6.name(type='text', id="#{graph_id}_name", name="name", placeholder='Graph Name', value=name)
 -        
 -        .row-fluid
 -            .viewport
 -            .graph-label
 -        
 -        .row-fluid
 -            .graph-settings.tabbable
 -                //- nav.navbar: div.navbar-inner: div.container
 -                nav
 -                    .graph-controls.pull-right
 -                        .btn-group
 -                            a.redraw-button.btn(href="#")
 -                                i.icon-refresh
 -                                |  Redraw
 -                        .btn-group
 -                            a.load-button.btn(href="#")
 -                                i.icon-download
 -                                |  Revert
 -                            a.save-button.btn(href="#")
 -                                i.icon-upload
 -                                |  Save
 -                            a.done-button.btn-primary.btn(href="#")
 -                                i.icon-ok-sign.icon-white
 -                                |  Done
 -                    ul.nav.subnav.nav-pills
 -                        li:         h3 Graph
 -                        li.active:  a(href="##{graph_id}-tab-info", data-toggle="tab") Info
 -                        li:         a(href="##{graph_id}-tab-data", data-toggle="tab") Data
 -                        li: a.graph-options-tab(href="##{graph_id}-tab-options", data-toggle="tab") Options
 -                    
 -                
 -                .tab-content
 -                    .graph-info-pane.tab-pane.active(id="#{graph_id}-tab-info")
 +    
 +    //- Graph Name field is not part of the form due to the layout.
-     .graph-name-row.row-fluid.control-group
++    .graph-name-row.graph-details.row-fluid.control-group
 +        //- label.name.control-label(for="#{id}_name"): h3 Graph Name
 +        input.span6.graph-name(type='text', id="#{graph_id}_name", name="name", placeholder='Graph Name', value=name)
 +    
 +    .graph-viewport-row.row-fluid
 +        .viewport
 +        .graph-label
 +    
 +    .graph-settings-row.row-fluid
 +        .graph-settings.tabbable
 +            
 +            //--- Main Tabs ---//
 +            nav.graph-settings-nav
 +                .graph-controls.pull-right
 +                    .btn-group
 +                        a.redraw-button.btn(href="#")
 +                            i.icon-refresh
 +                            |  Redraw
 +                    .btn-group
 +                        a.load-button.btn(href="#")
 +                            i.icon-download
 +                            |  Revert
 +                        a.save-button.btn(href="#")
 +                            i.icon-upload
 +                            |  Save
 +                        a.done-button.btn-primary.btn(href="#")
 +                            i.icon-ok-sign.icon-white
 +                            |  Done
 +                ul.nav.subnav.nav-pills
 +                    li
 +                        .graph-spinner
 +                        h3 Graph
 +                    li.active:  a.graph-info-tab(href="##{graph_id}-tab-info", data-toggle="tab") Info
 +                    li:         a.graph-data-tab(href="##{graph_id}-tab-data", data-toggle="tab") Data
 +                    li:         a.graph-options-tab(href="##{graph_id}-tab-options", data-toggle="tab") Options
 +                .nav-shadow-shim
 +                .nav-shadow
 +            
 +            
 +            //--- Tab Panes ---//
 +            .graph-tab-content.tab-content
 +                .graph-info-pane.tab-pane.active(id="#{graph_id}-tab-info")
 +                    form.graph-details.form-horizontal
                          .row-fluid
                              .half.control-group
                                  .control-group