uc-cdis · qingyashu · Feb 20, 2020 · Feb 18, 2020 · Feb 18, 2020 · Feb 18, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   "homepage": "https://github.com/uc-cdis/guppy#readme",
   "dependencies": {
     "@elastic/elasticsearch": "^7.0.0-rc.1",
-    "@gen3/ui-component": "0.3.11",
+    "@gen3/ui-component": "^0.3.15",
     "apollo-server": "^2.4.8",
     "apollo-server-express": "^2.4.8",
     "array.prototype.flat": "^1.2.2",

diff --git a/src/components/ConnectedFilter/index.jsx b/src/components/ConnectedFilter/index.jsx
@@ -31,8 +31,8 @@ class ConnectedFilter extends React.Component {
       initialAggsData: {},
       receivedAggsData: {},
       accessibility: ENUM_ACCESSIBILITY.ALL,
-      adminAppliedPreFilters: Object.assign({}, this.props.adminAppliedPreFilters),
-      filter: Object.assign({}, this.props.adminAppliedPreFilters),
+      adminAppliedPreFilters: { ...this.props.adminAppliedPreFilters },
+      filter: { ...this.props.adminAppliedPreFilters },
       filtersApplied: {},
     };
     this.filterGroupRef = React.createRef();
@@ -70,6 +70,7 @@ class ConnectedFilter extends React.Component {
    * component could do some pre-processing modification about filter.
    */
   getFilterTabs() {
+    if (this.props.hidden) return null;
     let processedTabsOptions = this.props.onProcessFilterAggsData(this.state.receivedAggsData);
     if (Object.keys(this.initialTabsOptions).length === 0) {
       this.initialTabsOptions = processedTabsOptions;
@@ -78,7 +79,6 @@ class ConnectedFilter extends React.Component {
     processedTabsOptions = updateCountsInInitialTabsOptions(
       this.initialTabsOptions, processedTabsOptions, this.state.filtersApplied,
     );
-
     processedTabsOptions = sortTabsOptions(processedTabsOptions);
 
     if (!processedTabsOptions || Object.keys(processedTabsOptions).length === 0) return null;
@@ -155,6 +155,7 @@ class ConnectedFilter extends React.Component {
   }
 
   render() {
+    if (this.props.hidden) return null;
     const filterTabs = this.getFilterTabs();
     if (!filterTabs || filterTabs.length === 0) {
       return null;
@@ -165,7 +166,7 @@ class ConnectedFilter extends React.Component {
         className={this.props.className}
         tabs={filterTabs}
         filterConfig={this.props.filterConfig}
-        onFilterChange={e => this.handleFilterChange(e)}
+        onFilterChange={(e) => this.handleFilterChange(e)}
         hideZero={this.props.hideZero}
       />
     );
@@ -198,6 +199,7 @@ ConnectedFilter.propTypes = {
   disabledTooltipMessage: PropTypes.string,
   accessibleFieldCheckList: PropTypes.arrayOf(PropTypes.string),
   hideZero: PropTypes.bool,
+  hidden: PropTypes.bool,
 };
 
 ConnectedFilter.defaultProps = {
@@ -206,13 +208,14 @@ ConnectedFilter.defaultProps = {
   className: '',
   fieldMapping: [],
   tierAccessLimit: undefined,
-  onProcessFilterAggsData: data => (data),
+  onProcessFilterAggsData: (data) => (data),
   onUpdateAccessLevel: () => {},
   adminAppliedPreFilters: {},
   lockedTooltipMessage: '',
   disabledTooltipMessage: '',
   accessibleFieldCheckList: undefined,
   hideZero: false,
+  hidden: false,
 };
 
 export default ConnectedFilter;
diff --git a/src/components/ConnectedFilter/utils.js b/src/components/ConnectedFilter/utils.js
@@ -1,8 +1,8 @@
 
-export const getFilterGroupConfig = filterConfig => ({
-  tabs: filterConfig.tabs.map(t => ({
+export const getFilterGroupConfig = (filterConfig) => ({
+  tabs: filterConfig.tabs.map((t) => ({
     title: t.title,
-    fields: t.filters.map(f => f.field),
+    fields: t.filters.map((f) => f.field),
   })),
 });
 
@@ -27,7 +27,7 @@ const getSingleFilterOption = (histogramResult, initHistogramRes) => {
     return rangeOptions;
   }
 
-  const textOptions = histogramResult.histogram.map(item => ({
+  const textOptions = histogramResult.histogram.map((item) => ({
     text: item.key,
     filterType: 'singleSelect',
     count: item.count,
@@ -38,20 +38,20 @@ const getSingleFilterOption = (histogramResult, initHistogramRes) => {
 
 const capitalizeFirstLetter = (str) => {
   const res = str.replace(/_/gi, ' ');
-  return res.replace(/\w\S*/g, txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+  return res.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
 };
 
 export const getFilterSections = (
   fields, fieldMapping, tabsOptions, initialTabsOptions, adminAppliedPreFilters,
 ) => {
   const sections = fields.map((field) => {
-    const overrideName = fieldMapping.find(entry => (entry.field === field));
+    const overrideName = fieldMapping.find((entry) => (entry.field === field));
     const label = overrideName ? overrideName.name : capitalizeFirstLetter(field);
 
-    const tabsOptionsFiltered = Object.assign({}, tabsOptions[field]);
+    const tabsOptionsFiltered = { ...tabsOptions[field] };
     if (Object.keys(adminAppliedPreFilters).includes(field)) {
       tabsOptionsFiltered.histogram = tabsOptionsFiltered.histogram.filter(
-        x => adminAppliedPreFilters[field].selectedValues.includes(x.key),
+        (x) => adminAppliedPreFilters[field].selectedValues.includes(x.key),
       );
     }
 
@@ -78,7 +78,7 @@ export const excludeSelfFilterFromAggsData = (receivedAggsData, filterResults) =
       let resultHistogram = [];
       if (typeof filterResults[field].selectedValues !== 'undefined') {
         const { selectedValues } = filterResults[field];
-        resultHistogram = histogram.filter(bucket => selectedValues.includes(bucket.key));
+        resultHistogram = histogram.filter((bucket) => selectedValues.includes(bucket.key));
       }
       resultAggsData[field] = { histogram: resultHistogram };
     } else {

diff --git a/src/components/GuppyWrapper/index.jsx b/src/components/GuppyWrapper/index.jsx
@@ -47,20 +47,20 @@ class GuppyWrapper extends React.Component {
   constructor(props) {
     super(props);
     // to avoid asynchronizations, we store another filter as private var
-    this.filter = Object.assign({}, this.props.adminAppliedPreFilters);
+    this.filter = { ...this.props.adminAppliedPreFilters };
     this.adminPreFiltersFrozen = JSON.stringify(this.props.adminAppliedPreFilters).slice();
     this.state = {
       gettingDataFromGuppy: false,
       aggsData: {},
-      filter: Object.assign({}, this.props.adminAppliedPreFilters),
+      filter: { ...this.props.adminAppliedPreFilters },
       rawData: [],
       totalCount: 0,
       allFields: [],
       rawDataFields: [],
       accessibleFieldObject: undefined,
       unaccessibleFieldObject: undefined,
       accessibility: ENUM_ACCESSIBILITY.ALL,
-      adminAppliedPreFilters: Object.assign({}, this.props.adminAppliedPreFilters),
+      adminAppliedPreFilters: { ...this.props.adminAppliedPreFilters },
     };
   }
 
@@ -178,7 +178,7 @@ class GuppyWrapper extends React.Component {
 
   handleFilterChange(userFilter, accessibility) {
     this.setState({ adminAppliedPreFilters: JSON.parse(this.adminPreFiltersFrozen) });
-    let filter = Object.assign({}, userFilter);
+    let filter = { ...userFilter };
     if (Object.keys(this.state.adminAppliedPreFilters).length > 0) {
       filter = mergeFilters(userFilter, this.state.adminAppliedPreFilters);
     }
@@ -269,7 +269,7 @@ class GuppyWrapper extends React.Component {
       filter,
       this.state.accessibility,
     )
-      .then(count => downloadDataFromGuppy(
+      .then((count) => downloadDataFromGuppy(
         this.props.guppyConfig.path,
         type,
         count,
@@ -286,9 +286,9 @@ class GuppyWrapper extends React.Component {
 
   render() {
     return (
-      <React.Fragment>
+      <>
         {
-          React.Children.map(this.props.children, child => React.cloneElement(child, {
+          React.Children.map(this.props.children, (child) => React.cloneElement(child, {
             // pass data to children
             aggsData: this.state.aggsData,
             aggsDataIsLoading: this.state.gettingDataFromGuppy,
@@ -316,7 +316,7 @@ class GuppyWrapper extends React.Component {
             accessibleFieldCheckList: this.props.accessibleFieldCheckList,
           }))
         }
-      </React.Fragment>
+      </>
     );
   }
 }

diff --git a/src/components/Utils/filters.js b/src/components/Utils/filters.js
@@ -10,12 +10,12 @@
    * or keep constant the amount of data shown when combined with a user filter).
   * */
 export const mergeFilters = (userFilter, adminAppliedPreFilter) => {
-  const filterAB = Object.assign({}, userFilter);
+  const filterAB = { ...userFilter };
   Object.keys(adminAppliedPreFilter).forEach((key) => {
     if (Object.prototype.hasOwnProperty.call(userFilter, key)
           && Object.prototype.hasOwnProperty.call(adminAppliedPreFilter, key)) {
       const userFilterSubset = userFilter[key].selectedValues.filter(
-        x => adminAppliedPreFilter[key].selectedValues.includes(x),
+        (x) => adminAppliedPreFilter[key].selectedValues.includes(x),
       );
       if (userFilterSubset.length > 0) {
         // The user-applied filter is more exclusive than the admin-applied filter.
@@ -32,20 +32,6 @@ export const mergeFilters = (userFilter, adminAppliedPreFilter) => {
   return filterAB;
 };
 
-function isFilterOptionToBeHidden(option, filtersApplied, fieldName) {
-  if (option.count > 0) {
-    return false;
-  }
-
-  if (typeof filtersApplied !== 'undefined'
-      && filtersApplied[fieldName]
-      && filtersApplied[fieldName].selectedValues.includes(option.key)) {
-    return false;
-  }
-
-  return true;
-}
-
 /**
    * This function updates the counts in the initial set of tab options
    * calculated from unfiltered data.
@@ -55,41 +41,48 @@ function isFilterOptionToBeHidden(option, filtersApplied, fieldName) {
 export const updateCountsInInitialTabsOptions = (
   initialTabsOptions, processedTabsOptions, filtersApplied,
 ) => {
-  const updatedTabsOptions = JSON.parse(JSON.stringify(initialTabsOptions));
-  const initialFields = Object.keys(initialTabsOptions);
-  for (let i = 0; i < initialFields.length; i += 1) {
-    const fieldName = initialFields[i];
-    const initialFieldOptions = initialTabsOptions[fieldName].histogram.map(x => x.key);
-    let processedFieldOptions = [];
-    if (Object.prototype.hasOwnProperty.call(processedTabsOptions, fieldName)) {
-      processedFieldOptions = processedTabsOptions[fieldName].histogram.map(x => x.key);
-    }
-
-    for (let j = 0; j < initialFieldOptions.length; j += 1) {
-      const optionName = initialFieldOptions[j];
-      let newCount;
-      if (processedFieldOptions.includes(optionName)) {
-        newCount = processedTabsOptions[fieldName].histogram.filter(
-          x => x.key === optionName,
-        )[0].count;
-      } else {
-        newCount = 0;
-      }
-      for (let k = 0; k < updatedTabsOptions[fieldName].histogram.length; k += 1) {
-        const option = updatedTabsOptions[fieldName].histogram[k];
-        if (option.key === optionName) {
-          updatedTabsOptions[fieldName].histogram[k].count = newCount;
-          if (isFilterOptionToBeHidden(
-            updatedTabsOptions[fieldName].histogram[k], filtersApplied, fieldName,
-          )) {
-            updatedTabsOptions[fieldName].histogram.splice(k, 1);
-            break;
+  const updatedTabsOptions = {};
+  try {
+    Object.keys(initialTabsOptions).forEach((field) => {
+      updatedTabsOptions[field] = { histogram: [] };
+      const { histogram } = initialTabsOptions[field];
+      histogram.forEach((opt) => {
+        const { key } = opt;
+        if (typeof (key) !== 'string') { // key is a range, just copy the histogram
+          updatedTabsOptions[field].histogram = initialTabsOptions[field].histogram;
+          if (processedTabsOptions[field]
+            && processedTabsOptions[field].histogram
+            && processedTabsOptions[field].histogram.length > 0
+            && updatedTabsOptions[field].histogram) {
+            const newCount = processedTabsOptions[field].histogram[0].count;
+            updatedTabsOptions[field].histogram[0].count = newCount;
           }
+          return;
+        }
+        const findOpt = processedTabsOptions[field].histogram.find((o) => o.key === key);
+        if (findOpt) {
+          const { count } = findOpt;
+          updatedTabsOptions[field].histogram.push({ key, count });
+        }
+      });
+      if (filtersApplied[field]) {
+        if (filtersApplied[field].selectedValues) {
+          filtersApplied[field].selectedValues.forEach((optKey) => {
+            if (!updatedTabsOptions[field].histogram.find((o) => o.key === optKey)) {
+              updatedTabsOptions[field].histogram.push({ key: optKey, count: 0 });
+            }
+          });
         }
       }
-    }
+    });
+  } catch (err) {
+    /* eslint-disable no-console */
+    // hopefully we won't get here but in case of
+    // out-of-index error or obj undefined error
+    console.err('error when processing filter data', err);
+    console.trace();
+    /* eslint-enable no-console */
   }
-
   return updatedTabsOptions;
 };
 
@@ -102,7 +95,7 @@ function sortCountThenAlpha(a, b) {
 
 export const sortTabsOptions = (tabsOptions) => {
   const fields = Object.keys(tabsOptions);
-  const sortedTabsOptions = Object.assign({}, tabsOptions);
+  const sortedTabsOptions = { ...tabsOptions };
   for (let x = 0; x < fields.length; x += 1) {
     const field = fields[x];