fix(rangeFacet): 2356 radios selected by default

- simplify by removing ability to pass in different conversion factors Closes #2356
NCI-GDC · May 13, 2016 · f265f40 · f265f40
1 parent 4b8d29d
commit f265f40
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 92 deletions.
diff --git a/app/scripts/components/facets/facets.controllers.ts b/app/scripts/components/facets/facets.controllers.ts
@@ -291,103 +291,80 @@ module ngApp.components.facets.controllers {
     error: string = undefined;
     lowerBound: number = null;
     upperBound: number = null;
+    conversionFactor: number = 365.25;
+    selectedUnit: string = 'years';
+    displayedMax: number = 0;
+    displayedMin: number = 0;
 
     /* @ngInject */
     constructor(private $scope: IRangeFacetScope,
                 private LocationService: ILocationService,
                 private FacetService: IFacetService) {
 
       $scope.data = {};
-      $scope.dataUnitConverted = [];
       $scope.lowerBoundOriginalDays = null;
       $scope.upperBoundOriginalDays = null;
 
-      if(!$scope.unitsMap) {
-        $scope.unitsMap = [
-              {
-                "label": "none",
-                "conversionDivisor": 1,
-              }
-            ];
-      }
-
-      $scope.selectedUnit = $scope.unitsMap[0];
-
       this.refresh();
       $scope.$on("$locationChangeSuccess", () => this.refresh());
 
       $scope.$watch("facet", (n, o) => {
-        if ((n === o && ($scope.min !== undefined || $scope.max !== undefined)) || n === undefined) {
+        if (n === o) {
           return;
         }
-        if(n) {
+        if (n) {
           $scope.data = n;
-          $scope.dataUnitConverted = this.unitConversion($scope.data);
-          this.getMaxMin($scope.dataUnitConverted);
+          this.convertMaxMin();
         } else {
           this.error = n;
         }
       });
 
-      var _this = this;
-      $scope.unitClicked = function(selectedUnitMap: Object) {
-        $scope.selectedUnit = selectedUnitMap;
-        _this.$scope.dataUnitConverted = _this.unitConversion($scope.data);
-        _this.getMaxMin($scope.dataUnitConverted);
-        if (selectedUnitMap.label === 'years') {
-          _this.lowerBound = _this.$scope.lowerBoundOriginalDays ? Math.ceil(_this.$scope.lowerBoundOriginalDays / _this.$scope.selectedUnit.conversionDivisor) : null;
-          _this.upperBound = _this.$scope.upperBoundOriginalDays ? Math.ceil((_this.$scope.upperBoundOriginalDays + 1 - _this.$scope.selectedUnit.conversionDivisor) / _this.$scope.selectedUnit.conversionDivisor) : null;
-        } else {
-          _this.lowerBound = _this.$scope.lowerBoundOriginalDays ? Math.floor(_this.$scope.lowerBoundOriginalDays / _this.$scope.selectedUnit.conversionDivisor) : null;
-          _this.upperBound = _this.$scope.upperBoundOriginalDays ? Math.ceil(_this.$scope.upperBoundOriginalDays / _this.$scope.selectedUnit.conversionDivisor) : null;
-        }
-      };
+    }
 
+    // when textboxes change convert to days right away and store
+    // when conversions are done after, it's always from days.
+    inputChanged() {
+      if (this.selectedUnit === 'years') {
+        this.$scope.upperBoundOriginalDays = this.upperBound ? Math.floor(this.upperBound * this.conversionFactor + this.conversionFactor - 1) : null;
+        this.$scope.lowerBoundOriginalDays = this.lowerBound ? Math.floor(this.lowerBound * this.conversionFactor) : null;
+      } else if (this.selectedUnit === 'days'){
+        this.$scope.upperBoundOriginalDays = this.upperBound;
+        this.$scope.lowerBoundOriginalDays = this.lowerBound;
+      }
     }
 
-    unitConversion(data: Object[]): Object[] {
-      if(this.$scope.unitsMap) {
-        return _.reduce(data, (acc, v, k) => {
-          acc[k] = Math.floor(v/this.$scope.selectedUnit.conversionDivisor);
-          return acc;
-        }, {});
-      } else {
-        return data;
+    unitClicked(): void {
+      this.convertUserInputs();
+      this.convertMaxMin();
+    }
+
+    convertUserInputs() {
+      if (this.selectedUnit === 'days') {
+        this.lowerBound = this.$scope.lowerBoundOriginalDays;
+        this.upperBound = this.$scope.upperBoundOriginalDays;
+      } else if (this.selectedUnit === 'years') {
+        this.lowerBound = this.$scope.lowerBoundOriginalDays ? Math.ceil(this.$scope.lowerBoundOriginalDays / this.conversionFactor) : null;
+        this.upperBound = this.$scope.upperBoundOriginalDays ? Math.ceil((this.$scope.upperBoundOriginalDays + 1 - this.conversionFactor) / this.conversionFactor) : null;
       }
     }
 
-    getMaxMin(data: Object[]): void {
-      this.$scope.min = data.min;
-      this.$scope.max = data.max;
+    convertMaxMin() {
+      if (this.selectedUnit === 'days') {
+        this.displayedMin = this.$scope.data.min;
+        this.displayedMax = this.$scope.data.max;
+      } else if (this.selectedUnit === 'years') {
+        this.displayedMin = Math.floor(this.$scope.data.min / this.conversionFactor);
+        this.displayedMax = Math.floor(this.$scope.data.max / this.conversionFactor);
+      }
     }
 
     refresh(): void {
       this.activesWithOperator = this.FacetService.getActivesWithOperator(this.$scope.field);
       this.$scope.lowerBoundOriginalDays = this.activesWithOperator['>='] || null;
       this.$scope.upperBoundOriginalDays = this.activesWithOperator['<='] || null;
-      if (_.has(this.activesWithOperator, '>=')) {
-        this.lowerBound = Math.ceil(this.activesWithOperator['>='] / this.$scope.selectedUnit.conversionDivisor);
-      } else {
-        this.lowerBound = null;
-      }
-      if (_.has(this.activesWithOperator, '<=')) {
-        if (this.$scope.selectedUnit.label === 'years') {
-          this.upperBound = Math.ceil((this.activesWithOperator['<='] + 1 - this.$scope.selectedUnit.conversionDivisor) / this.$scope.selectedUnit.conversionDivisor);
-        } else {
-          this.upperBound = Math.ceil(this.activesWithOperator['<='] / this.$scope.selectedUnit.conversionDivisor);
-        }
-      } else {
-        this.upperBound = null;
-      }
-    }
-
-    inputChanged() {
-      if (this.$scope.selectedUnit.label === 'years') {
-        this.$scope.upperBoundOriginalDays = this.upperBound ? Math.floor(this.upperBound * this.$scope.selectedUnit.conversionDivisor + this.$scope.selectedUnit.conversionDivisor - 1) : null;
-      } else {
-        this.$scope.upperBoundOriginalDays = this.upperBound ? Math.floor(this.upperBound * this.$scope.selectedUnit.conversionDivisor) : null;
-      }
-      this.$scope.lowerBoundOriginalDays = this.lowerBound ? Math.floor(this.lowerBound * this.$scope.selectedUnit.conversionDivisor) : null;
+      this.convertMaxMin();
+      this.convertUserInputs();
     }
 
     setBounds() {

diff --git a/app/scripts/components/facets/facets.directives.ts b/app/scripts/components/facets/facets.directives.ts
@@ -106,9 +106,9 @@ module ngApp.components.facets.directives {
         facet: "=",
         title: "@",
         field: "@",
-        unitsMap: "=",
+        convertDays: "@",
         removable: "@",
-        removeFunction: "&",
+        removeFunction: "&"
       },
       replace: true,
       templateUrl: "components/facets/templates/range-facet.html",

diff --git a/app/scripts/components/facets/facets.models.ts b/app/scripts/components/facets/facets.models.ts
@@ -34,6 +34,7 @@ module ngApp.components.facets.models {
     min: number;
     data: any;
     unitsMap: Object[];
+    convertDays: boolean;
   }
 
   export interface IDateFacetScope extends ng.IScope {

diff --git a/app/scripts/components/facets/templates/facets-section.html b/app/scripts/components/facets/templates/facets-section.html
@@ -25,9 +25,9 @@
                data-title="{{ f.title | facetTitlefy }}"
                data-facet="aggregations[f.name]"
                data-remove-function="removeFacet(f.name)"
-               data-units-map="f.unitsMap"
                data-removable="{{ f.removable }}"
                data-collapsed="{{ f.collapsed }}"
+               data-convert-days="{{ f.convertDays }}"
                ></range-facet>
 
   <date-facet data-ng-if="f.facetType === 'datetime'"

diff --git a/app/scripts/components/facets/templates/range-facet.html b/app/scripts/components/facets/templates/range-facet.html
@@ -16,18 +16,16 @@ <h4 class="list-group-item-heading facet-title">
     </span>
   </h4>
   <div data-ng-show="!rfc.collapsed">
-    <div class="radio-inline"
-         data-ng-if="unitsMap.length > 1"
-         data-ng-repeat="unitMap in unitsMap">
-        <label data-ng-click="$parent.unitClicked(unitMap)" for={{unitMap.label}}>
-          <input type="radio"
-                 data-ng-model="$parent.selectedUnit"
-                 data-ng-value="unitMap"
-                 id="{{unitMap.label}}"
-                 name="{{field}}">
-            {{ unitMap.label | humanify }}
-        </label>
-      </div>
+    <form name="{{field}}-radio" ng-if="convertDays">
+      <label for="{{field}}-years-radio">
+        <input type="radio" ng-model="rfc.selectedUnit" value="years" data-ng-change="rfc.unitClicked()" id="{{field}}-years-radio">
+          Years
+      </label>
+      <label for="{{field}}-days-radio">
+        <input type="radio" ng-model="rfc.selectedUnit" value="days" data-ng-change="rfc.unitClicked()" id="{{field}}-days-radio">
+          Days
+      </label><br/>
+    </form>
     <p data-ng-if="rfc.error">
       {{rfc.error}}
     </p>
@@ -37,8 +35,8 @@ <h4 class="list-group-item-heading facet-title">
              type="number"
              class="form-control"
              style="border-radius: 0px;"
-             placeholder="{{ min }}"
-             title="Min: {{min | number}}; Max: {{ max | number}}"
+             placeholder="{{ rfc.displayedMin }}"
+             title="Min: {{ rfc.displayedMin | number}}; Max: {{ rfc.displayedMax | number}}"
              data-ng-model="rfc.lowerBound"
              aria-label="Min {{ field }}"
              data-ng-change="rfc.inputChanged()">
@@ -47,8 +45,8 @@ <h4 class="list-group-item-heading facet-title">
              type="number"
              class="form-control"
              style="border-radius: 0px"
-             placeholder="{{ max }}"
-             title="Min: {{min | number}}; Max: {{max | number}}"
+             placeholder="{{ rfc.displayedMax }}"
+             title="Min: {{ rfc.displayedMin | number}}; Max: {{ rfc.displayedMax | number}}"
              data-ng-model="rfc.upperBound"
              aria-label="Max {{ field }}"
              data-ng-change="rfc.inputChanged()">

diff --git a/app/scripts/search/search.cases.table.service.ts b/app/scripts/search/search.cases.table.service.ts
@@ -219,16 +219,7 @@ module ngApp.search.cases.table.service {
             {name: "project.project_id", title: "Project", collapsed: false, facetType: "terms"},
             {name: "project.disease_type", title: "Disease Type", collapsed: false, facetType: "terms"},
             {name: "demographic.gender", title: "Gender", collapsed: false, facetType: "terms"},
-            {name: "diagnoses.age_at_diagnosis", title: "Age at diagnosis", collapsed: false, facetType: "range", unitsMap: [
-              {
-                "label": "years",
-                "conversionDivisor": 365.25,
-              },
-              {
-                "label": "days",
-                "conversionDivisor": 1,
-              }
-            ]},
+            {name: "diagnoses.age_at_diagnosis", title: "Age at diagnosis", collapsed: false, facetType: "range", convertDays: true},
             {name: "diagnoses.vital_status", title: "Vital Status", collapsed: false, facetType: "terms"},
             {name: "diagnoses.days_to_death", title: "Days to Death", collapsed: false, facetType: "range", hasGraph: true},
             {name: "demographic.race", title: "Race", collapsed: false, facetType: "terms"},