Fix/guppy crash (#1427)

* debug

* fix having undefined fields

* update lock

* update lock

Author: mfshao

package-lock.json

@@ -13,7 +13,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@gen3/guppy": "^0.17.0",
+    "@gen3/guppy": "^0.17.1",
     "@gen3/ui-component": "^0.11.4",
     "@reactour/tour": "^2.12.0",
     "@upsetjs/venn.js": "^1.4.2",

package.json

@@ -60,7 +60,34 @@ class ExplorerFilter extends React.Component {
     return null;
   }
 
-  componentDidUpdate() {
+  /**
+   * Little helper function to apply accessibility filters to aggregation histogram results
+   * @param {*} accessibleValues list of values that user has access to
+   * @param {*} histogram raw histogram array
+   * @returns modified histogram after applying accessibility filters
+   */
+  applyAccessibleFilter = (accessibleValues, histogram) => {
+    if (!Array.isArray(histogram)) {
+      throw new Error('Invalid histogram format');
+    }
+    return histogram.filter(({ key }) => {
+      const accessible = accessibleValues.includes(key);
+      switch (this.state.selectedAccessFilter) {
+      case 'all-data':
+        return true; // always show all items if 'all-data'
+      case 'with-access':
+        return accessible; // only show accessible items if 'with-access'
+      case 'without-access':
+        return !accessible; // only show unaccessible items if 'without-access'
+      default:
+        throw new Error('Invalid access filter option');
+      }
+    })
+      .map(({ key, count }) => ({
+        key,
+        count,
+        accessible: accessibleValues.includes(key),
+      }));
   }
 
   /**
@@ -87,26 +114,12 @@ class ExplorerFilter extends React.Component {
       // if the field is in accessibleFieldObject, add "accessible=false"
       // to those items which are unaccessible
       const accessibleValues = this.props.accessibleFieldObject[field];
-      const newHistogram = aggsData[field].histogram
-        .filter(({ key }) => {
-          const accessible = accessibleValues.includes(key);
-          switch (this.state.selectedAccessFilter) {
-          case 'all-data':
-            return true; // always show all items if 'all-data'
-          case 'with-access':
-            return accessible; // only show accessible items if 'with-access'
-          case 'without-access':
-            return !accessible; // only show unaccessible items if 'without-access'
-          default:
-            throw new Error('Invalid access filter option');
-          }
-        })
-        .map(({ key, count }) => ({
-          key,
-          count,
-          accessible: accessibleValues.includes(key),
-        }));
+      const newHistogram = this.applyAccessibleFilter(accessibleValues, aggsData[field].histogram);
       res[field] = { histogram: newHistogram };
+      if (Array.isArray(aggsData[field].asTextHistogram)) {
+        const newAsTextHistogram = this.applyAccessibleFilter(accessibleValues, aggsData[field].asTextHistogram);
+        res[field] = { ...res[field], asTextHistogram: newAsTextHistogram };
+      }
       return res;
     }, {});
     return newAggsData;