Merges in master plus edit-class fixes.
authordsc <dsc@wikimedia.org>
Mon, 16 Apr 2012 23:20:18 +0000 (16:20 -0700)
committerdsc <dsc@wikimedia.org>
Mon, 16 Apr 2012 23:20:18 +0000 (16:20 -0700)
1  2 
lib/chart/chart-option-view.co
lib/graph/graph-display-view.co
lib/graph/graph-edit-view.co
lib/server/controllers/graph.co
lib/server/server.co
lib/template/chart-scaffold.jade
lib/template/graph-display.jade
lib/template/graph-edit.jade
lib/util/cascade.co
www/css/graph.styl
www/modules.yaml

@@@ -12,8 -12,9 +12,8 @@@ DEBOUNCE_RENDER = exports.DEBOUNCE_REND
   */
  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
Simple merge
@@@ -27,14 -27,14 +27,14 @@@ GraphEditView = exports.GraphEditView 
          valueFormatter xValueFormatter yValueFormatter
      ]>
      __bind__  : <[
 -        render renderAll stopAndRender stopAndRenderAll resizeViewport
 +        render renderAll stopAndRender stopAndRenderAll resizeViewport wait unwait checkWaiting
          numberFormatter numberFormatterHTML
 -        onReady onSync onModelChange onScaffoldChange onDataChange onFirstClickRenderOptionsTab
 +        onReady onSync onModelChange onScaffoldChange 
 +        onFirstClickRenderOptionsTab onFirstClickRenderDataTab
      ]>
      __debounce__: <[ render renderAll ]>
 -    ctorName  : 'GraphEditView'
      tagName   : 'section'
-     className : 'graph graph-edit'
+     className : 'graph-edit graph'
      template  : require 'kraken/template/graph-edit'
      
      events:
          'click    .load-button'                    : 'load'
          'click    .save-button'                    : 'save'
          'click    .done-button'                    : 'done'
-         'keypress form.details input[type="text"]' : 'onKeypress'
-         'keypress form.options .value'             : 'onKeypress'
-         'submit   form.details'                    : 'onDetailsSubmit'
-         'change   select'                          : 'onDetailsSubmit'
-         'submit   form.options'                    : 'onOptionsSubmit'
-         'change   input[type="checkbox"]'          : 'onOptionsSubmit'
+         'keypress .graph-details input[type="text"]'     : 'onKeypress'
+         'submit   .graph-details'                        : 'onDetailsSubmit'
+         'change   :not(.chart-options) select'           : 'onDetailsSubmit'
+         'keypress .chart-options .value'                 : 'onKeypress'
+         'submit   .chart-options'                        : 'onOptionsSubmit'
+         'change   .chart-options input[type="checkbox"]' : 'onOptionsSubmit'
      
 -    data  : {}
 +    
 +    /**
 +     * Count of outstanding tasks until we stop the spinner.
 +     * @type Number
 +     */
 +    waitingOn : 0
 +    
 +    /**
 +     * Whether we're ready.
 +     * @type Boolean
 +     */
      ready : false
      
      
Simple merge
@@@ -184,9 -185,17 +184,8 @@@ app.get '/datasources/all', (req, res, 
              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'
@@@ -1,13 -1,3 +1,13 @@@
- form.graph-options.scaffold.form-inline
 -form.chart-options.scaffold
++form.chart-options.scaffold.form-inline
 +    
-     .graph-options-controls.control-group
++    .chart-options-controls.control-group
 +        a.collapse-all-options-button.btn(href="#") Collapse All
 +        a.expand-all-options-button.btn(href="#") Expand All
 +        
 +        .std-adv-filter-buttons.btn-group.pull-right(data-toggle="buttons-radio")
 +            a.standard-filter-button.options-filter-button.btn.active(href="#", data-filter=".tag_standard") Standard
 +            a.advanced-filter-button.options-filter-button.btn(href="#", data-filter="") Advanced
 +        
 +    
      .fields.control-group
  
@@@ -1,9 -1,10 +1,10 @@@
  include browser-helpers
  - var graph_id = view.id
- section.graph.graph-display(id=graph_id)
 -section.graph-display.graph(id=view.id)
++section.graph-display.graph(id=graph_id)
      
      .graph-name-row.page-header.row-fluid
-         h2.graph-name #{name}
+         h2.graph-name 
+             a(id="graph-title", href="#{model.toLink()}") #{name}
      
      .graph-viewport-row.row-fluid
          .viewport
@@@ -1,50 -1,43 +1,50 @@@
  - 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
@@@ -79,31 -79,13 +79,37 @@@ class Cascad
          @_data = @_lookups[0] = data
          this
      
 +    getTombstones: ->
 +        @_tombstones
 +    
 +    # setTombstones: (tombstones) ->
 +    #     @_tombstones = tombstones
 +    #     for k, v in _.collapseObject @_tombstones
 +    #         if v
 +    #             _.setNested @_tombstones, k, TOMBSTONE, {+ensure}
 +    #         else
 +    #             _.unsetNested @_tombstones, k
 +    #     this
 +    
 +    /**
 +     * @returns {Number} Number of lookup dictionaries.
 +     */
 +    size: ->
 +        @_lookups.length - 1
 +    
 +    /**
 +     * @returns {Array<Object>} The array of lookup dictionaries.
 +     */
 +    getLookups: ->
 +        @_lookups
 +    
      /**
+      * @returns {Array<Object>} The array of lookup dictionaries.
+      */
+     getLookups: ->
+         @_lookups
+     
+     /**
       * Adds a new lookup dictionary to the chain.
       * @returns {this}
       */
@@@ -158,23 -115,10 +158,23 @@@ section.grap
      
      
      /* * * *  Chart Options  * * * {{{ */
-     .graph-options
 -    .chart-options fieldset
 -        border 0px
++    .chart-options
 +        
-         .graph-options-controls
++        .chart-options-controls
 +            font-size 11px
 +            
 +            .control-group, .btn-group
 +                display inline-block
 +                font-size 11px
 +            
 +            .btn
 +                font-size 11px
 +                padding 3px 9px 3px
 +            & > .btn, & :not(.btn-group) .btn
 +                margin-right 0.75em
 +            
      
-     .field.option
+     .chart-option.field
          float left
          z-index 3
          padding 0.5em
Simple merge