(MIDRC-666): add guppy defaultFilter functionality (#1508)

* MIDRC-666: add guppy defaultFilter functionality

Author: ocshawn

docs/multi_tab_explorer.md

@@ -32,6 +32,11 @@ An example of this new `explorerConfig` is (some contents are omitted for concis
             "asTextAggFields": [
               "consortium_id",
               ...
+            ],
+            "defaultFilters": [
+              {
+                "field": "redacted", "values": ["No"]
+              }
             ]
           }
         ]

docs/portal_config.md

@@ -395,6 +395,12 @@ Below is an example, with inline comments describing what each JSON block config
           ],
           "asTextAggFields": [ // optional; GraphQL fields that would be aggregated as text fields. Only meaningful to numeric fields that HAS NOT been specified in the "charts" section before, there is no behavior differences if used on text fields
             "consortium_id"
+          ],
+          "defaultFilters": [ // optional; select default filters on page load
+            {
+              "field": "redacted", // field name
+              "values": ["No"] // selected values on page load
+            }
           ]
         }
       ]

src/GuppyDataExplorer/GuppyDataExplorer.jsx

@@ -21,6 +21,8 @@ class GuppyDataExplorer extends React.Component {
   constructor(props) {
     super(props);
     let initialFilter = {};
+    let defaultFilters = {};
+    let hasInitialFilter = false;
 
     if (isEnabled('explorerStoreFilterInURL')) {
       const stateFromURL = getQueryParameter('filters');
@@ -30,6 +32,7 @@ class GuppyDataExplorer extends React.Component {
           const isValidJSON = IsValidJSONString(decodedFilter);
           if (isValidJSON) {
             initialFilter = JSON.parse(decodedFilter).filter;
+            hasInitialFilter = true;
           }
         } catch (err) {
           // eslint-disable-next-line no-console
@@ -38,10 +41,32 @@ class GuppyDataExplorer extends React.Component {
       }
     }
 
+    if (!hasInitialFilter && this.props.filterConfig.tabs.length > 0) {
+      const defaultFilterArr = this.props.filterConfig.tabs.reduce((accumulator, currentValue) => {
+        const df = currentValue.defaultFilters;
+        if (df && df.length > 0) {
+          return [...accumulator, ...df];
+        }
+        return accumulator;
+      }, []);
+
+      defaultFilters = defaultFilterArr.reduce((tabAccumulator, tabDefaultFilter) => {
+        if (tabDefaultFilter.field && tabDefaultFilter.values.length > 0) {
+          // if it already exists add values to it
+          if (tabAccumulator[tabDefaultFilter.field]) {
+            tabAccumulator[tabDefaultFilter.field].selectedValues.push(...tabDefaultFilter.values);
+            return tabAccumulator;
+          }
+          return { ...tabAccumulator, [tabDefaultFilter.field]: { selectedValues: tabDefaultFilter.values } };
+        }
+        return tabAccumulator;
+      }, {});
+    }
+
     this.state = {
       aggsData: {},
       filter: {},
-      initialFilterFromURL: initialFilter,
+      initialFilterFromURL: hasInitialFilter ? initialFilter : defaultFilters,
       encodableExplorerStateForURL: { filter: initialFilter },
     };
   }

src/GuppyDataExplorer/configTypeDef.js

@@ -23,6 +23,10 @@ export const FilterConfigType = PropTypes.shape({
   tabs: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,
     fields: PropTypes.arrayOf(PropTypes.string),
+    defaultFilters: PropTypes.arrayOf(PropTypes.shape({
+      field: PropTypes.string,
+      values: PropTypes.arrayOf(PropTypes.string),
+    })),
   })),
 });