for #63, basic categorical filter works

hds-lab · Mar 2, 2015 · 3dbc9f7 · 3dbc9f7
1 parent 12d6adb
commit 3dbc9f7
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 12 deletions.
diff --git a/msgvis/apps/api/serializers.py b/msgvis/apps/api/serializers.py
@@ -99,7 +99,7 @@ class FilterSerializer(serializers.Serializer):
     min_time = serializers.DateTimeField(required=False)
     max_time = serializers.DateTimeField(required=False)
 
-    levels = serializers.ListSerializer(child=serializers.CharField(), required=False)
+    levels = serializers.ListSerializer(child=serializers.CharField(allow_null=True), required=False)
 
     value = serializers.CharField(required=False)
 

diff --git a/msgvis/static/SparQs/charts.js b/msgvis/static/SparQs/charts.js
@@ -332,7 +332,6 @@
                 height: $element.parent().height()
             };
             var $d3_element = d3.select($element[0]);
-            console.log(elementSize);
             var svg = $d3_element.append("svg");
             svg.attr("width", elementSize.width);
             svg.attr("height", elementSize.height);
@@ -352,7 +351,6 @@
                     setup_dimension_scale(scope.dimension, elementSize.width);
                 }
                 create_bar($element, scope.dimension, attrs.levelValue);
-                console.log("link2");
             }
         };
 
@@ -361,7 +359,6 @@
                     if (newVals) return render_bar(scope, $element, attrs);
             }, false);
 
-            console.log("link");
         }
 
         return {

diff --git a/msgvis/static/SparQs/controllers.js b/msgvis/static/SparQs/controllers.js
@@ -225,6 +225,8 @@
         $scope.onQuantitativeBrushed = function(min, max) {
             $scope.$digest();
         }
+
+
     };
 
     FilterController.$inject = [

diff --git a/msgvis/static/SparQs/services/dimensions_service.js b/msgvis/static/SparQs/services/dimensions_service.js
@@ -51,7 +51,7 @@
                 max: _getter_setter('max', Math.round),
                 min_time: _getter_setter('min_time'),
                 max_time: _getter_setter('max_time'),
-                levels: _getter_setter('levels'),
+                levels: [],
                 is_empty: function () {
                     if (angular.equals(this.data, {})) {
                         return true;
@@ -77,6 +77,7 @@
                 saved: function () {
                     this.old_data = angular.copy(this.data);
                     this.dirty = false;
+                    debugger;
                 }
             });
 
@@ -115,6 +116,9 @@
                 is_time: function () {
                     return this.type == 'TimeDimension';
                 },
+                is_categorical: function () {
+                    return this.type == 'CategoricalDimension';
+                },
                 serialize_filter: function () {
                     return angular.extend({
                         dimension: this.key
@@ -136,10 +140,20 @@
                     }
                 },
                 set_distribution: function(datatable) {
-                    this._loading = false;
-                    this.table = datatable.table;
-                    this.domain = datatable.domains[this.key];
-                    this.distribution = this.get_distribution_in_order(this.table, this.domain);
+                    var dimension = this;
+
+                    dimension._loading = false;
+                    dimension.table = datatable.table;
+                    dimension.domain = datatable.domains[dimension.key];
+                    dimension.distribution = dimension.get_distribution_in_order(dimension.table, dimension.domain);
+                    if ( dimension.is_categorical() ){
+                        dimension.filter.levels = dimension.domain.slice(0);
+                        var list = dimension.filter.levels();
+                        for ( var i = 0 ; i < list.length ; i++ ){
+                            if (list[i] == null)
+                                list[i] = "No " + dimension.key;
+                        }
+                    }
                 },
                 get_distribution_in_order: function(table, domain) {
                     if (!table || !domain) {
@@ -164,11 +178,23 @@
                             d = "No " + dimension.key;
                         distribution.push({
                             level: d,
-                            value: distribution_map[d]
+                            value: distribution_map[d],
+                            show: true
                         });
                     });
 
                     return distribution;
+                },
+                change_level: function(d){
+                    if (d.show == true){
+                        this.filter.levels.push(d.level);
+                    }else{
+                        var idx = this.filter.levels.indexOf(d.level);
+                        if(idx != -1) {
+                            this.filter.levels.splice(idx, 1);
+                        }
+                    }
+                    this.filter.dirty = true;
 
                 }
             });

diff --git a/msgvis/static/sparqs.less b/msgvis/static/sparqs.less
@@ -531,6 +531,11 @@ body {
            fill: steelblue;
         }
     }
+    .dimension-level-filter{
+        margin: 0px 3px;
+        padding: 0px 3px;
+        background-color: #555;
+    }
 
 }
 

diff --git a/msgvis/templates/explorer.html b/msgvis/templates/explorer.html
@@ -228,15 +228,21 @@ <h3>
                         </div>
 
                         <div class="form-group" ng-switch-when="CategoricalDimension">
-
+                            <!-- TODO: search
                             <div class="search">
                                 <input type="text" />
                             </div>
+
                             <hr />
+                            <div>
+                                <span >Select All</span> <span>Unselected All</span>
+                            </div>
+                            -->
+
                             <div class="dimension-levels">
                                 <div class=dimension-level ng-repeat="d in filtering.dimension.distribution">
                                     <div class="level-name">
-                                        <label><input type="checkbox" checked="checked" /> {$ d.level $} </label>
+                                        <label><input type="checkbox" ng-model="d.show" ng-change="filtering.dimension.change_level(d)" /> {$ d.level $} </label>
                                     </div>
                                     <div class="level-value">{$ d.value $}</div>
                                     <div class="level-bar">
@@ -249,6 +255,10 @@ <h3>
                             </div>
                             <hr />
                             <div class="selected-levels">
+                                <strong>The following levels will be filtered out:</strong> <br />
+                                <span class=dimension-level-filter ng-repeat="d in filtering.dimension.distribution" ng-show="!d.show">
+                                    {$ d.level $}
+                                </span>
 
                             </div>