uc-cdis · ZakirG · Apr 13, 2021 · Mar 4, 2021 · Mar 11, 2021 · Mar 12, 2021
diff --git a/Dockerfile b/Dockerfile
@@ -11,7 +11,9 @@ RUN apt-get update \
         vim \
     && curl -sL https://deb.nodesource.com/setup_10.x | bash - \ 
     && apt-get install -y --no-install-recommends nodejs \
-    && rm -rf /var/lib/apt/lists/*
+    && rm -rf /var/lib/apt/lists/* \
+    && npm install -g [email protected] \
+    && npm config set maxsockets 5
 
 COPY . /guppy/
 WORKDIR /guppy

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.7.0",
+    "@gen3/ui-component": "^0.9.0",
     "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
@@ -20,6 +20,7 @@ import {
   updateCountsInInitialTabsOptions,
   sortTabsOptions,
   mergeTabOptions,
+  buildFilterStatusForURLFilter,
 } from '../Utils/filters';
 
 class ConnectedFilter extends React.Component {
@@ -32,14 +33,25 @@ class ConnectedFilter extends React.Component {
       : filterConfigsFields;
 
     this.initialTabsOptions = {};
+    let initialFilter = this.props.adminAppliedPreFilters;
+    let filterStatusArray = [];
+    let filtersApplied = {};
+    if (this.props.userFilterFromURL && Object.keys(this.props.userFilterFromURL).length > 0) {
+      filterStatusArray = buildFilterStatusForURLFilter(this.props.userFilterFromURL,
+        this.getTabsWithSearchFields());
+      filtersApplied = this.props.userFilterFromURL;
+      initialFilter = mergeFilters(this.props.userFilterFromURL, this.props.adminAppliedPreFilters);
+    }
+
     this.state = {
       allFields,
       initialAggsData: {},
       receivedAggsData: {},
       accessibility: ENUM_ACCESSIBILITY.ALL,
       adminAppliedPreFilters: { ...this.props.adminAppliedPreFilters },
-      filter: { ...this.props.adminAppliedPreFilters },
-      filtersApplied: {},
+      filter: { ...initialFilter },
+      filtersApplied,
+      filterStatusArray,
     };
     this.filterGroupRef = React.createRef();
     this.adminPreFiltersFrozen = JSON.stringify(this.props.adminAppliedPreFilters).slice();
@@ -104,7 +116,11 @@ class ConnectedFilter extends React.Component {
   handleFilterChange(filterResults) {
     this.setState({ adminAppliedPreFilters: JSON.parse(this.adminPreFiltersFrozen) });
     const mergedFilterResults = mergeFilters(filterResults, JSON.parse(this.adminPreFiltersFrozen));
-    this.setState({ filtersApplied: mergedFilterResults });
+
+    const newFilterStatusArray = buildFilterStatusForURLFilter(mergedFilterResults,
+      this.getTabsWithSearchFields());
+
+    this.setState({ filtersApplied: mergedFilterResults, filterStatusArray: newFilterStatusArray });
     askGuppyForAggregationData(
       this.props.guppyConfig.path,
       this.props.guppyConfig.type,
@@ -124,6 +140,16 @@ class ConnectedFilter extends React.Component {
     }
   }
 
+  getTabsWithSearchFields() {
+    const newTabs = this.props.filterConfig.tabs.map(({ title, fields, searchFields }) => {
+      if (searchFields) {
+        return { title, fields: searchFields.concat(fields) };
+      }
+      return { title, fields };
+    });
+    return newTabs;
+  }
+
   setFilter(filter) {
     if (this.filterGroupRef.current) {
       this.filterGroupRef.current.resetFilter();
@@ -139,6 +165,7 @@ class ConnectedFilter extends React.Component {
    * component could do some pre-processing modification about filter.
    */
   getFilterTabs() {
+    const filtersToDisplay = this.state.filtersApplied;
     if (this.props.hidden) return null;
     let processedTabsOptions = this.props.onProcessFilterAggsData(this.state.receivedAggsData);
     if (Object.keys(this.initialTabsOptions).length === 0) {
@@ -148,12 +175,12 @@ class ConnectedFilter extends React.Component {
     processedTabsOptions = updateCountsInInitialTabsOptions(
       this.initialTabsOptions,
       processedTabsOptions,
-      this.state.filtersApplied,
+      filtersToDisplay,
       // for tiered access filters
       this.props.tierAccessLimit ? this.props.accessibleFieldCheckList : [],
     );
 
-    if (Object.keys(this.state.filtersApplied).length) {
+    if (Object.keys(filtersToDisplay).length) {
       // if has applied filters, sort tab options as selected/unselected separately
       const selectedTabsOptions = {};
       const unselectedTabsOptions = {};
@@ -166,9 +193,9 @@ class ConnectedFilter extends React.Component {
           return;
         }
         processedTabsOptions[`${opt}`].histogram.forEach((entry) => {
-          if (this.state.filtersApplied[`${opt}`]
-          && this.state.filtersApplied[`${opt}`].selectedValues
-          && this.state.filtersApplied[`${opt}`].selectedValues.includes(entry.key)) {
+          if (filtersToDisplay[`${opt}`]
+          && filtersToDisplay[`${opt}`].selectedValues
+          && filtersToDisplay[`${opt}`].selectedValues.includes(entry.key)) {
             if (!selectedTabsOptions[`${opt}`]) {
               selectedTabsOptions[`${opt}`] = {};
             }
@@ -200,10 +227,10 @@ class ConnectedFilter extends React.Component {
         allSearchFields = allSearchFields.concat(tab.searchFields);
       });
       allSearchFields.forEach((field) => {
-        if (this.state.filtersApplied[`${field}`]) {
-          const { selectedValues } = this.state.filtersApplied[`${field}`];
+        if (filtersToDisplay[`${field}`]) {
+          const { selectedValues } = filtersToDisplay[`${field}`];
           if (selectedValues) {
-            this.state.filtersApplied[`${field}`].selectedValues.forEach((val) => {
+            filtersToDisplay[`${field}`].selectedValues.forEach((val) => {
               if (!selectedTabsOptions[`${field}`]) {
                 selectedTabsOptions[`${field}`] = {};
               }
@@ -221,24 +248,27 @@ class ConnectedFilter extends React.Component {
     } else {
       processedTabsOptions = sortTabsOptions(processedTabsOptions);
     }
-
     if (!processedTabsOptions || Object.keys(processedTabsOptions).length === 0) return null;
     const { fieldMapping } = this.props;
-    const tabs = this.props.filterConfig.tabs.map(({ fields, searchFields }, index) => (
-      <FilterList
-        key={index}
-        sections={
-          getFilterSections(fields, searchFields, fieldMapping, processedTabsOptions,
-            this.state.initialAggsData, this.state.adminAppliedPreFilters,
-            this.props.guppyConfig, this.arrayFields)
-        }
-        hideEmptyFilterSection={this.props.hideEmptyFilterSection}
-        tierAccessLimit={this.props.tierAccessLimit}
-        lockedTooltipMessage={this.props.lockedTooltipMessage}
-        disabledTooltipMessage={this.props.disabledTooltipMessage}
-        arrayFields={this.arrayFields}
-      />
-    ));
+    const tabs = this.props.filterConfig.tabs.map(({ fields, searchFields }, index) => {
+      const sections = getFilterSections(fields, searchFields, fieldMapping, processedTabsOptions,
+        this.state.initialAggsData, this.state.adminAppliedPreFilters,
+        this.props.guppyConfig, this.arrayFields);
+      const filterStatus = this.state.filterStatusArray
+        ? this.state.filterStatusArray[index] : null;
+      return (
+        <FilterList
+          key={index}
+          sections={sections}
+          hideEmptyFilterSection={this.props.hideEmptyFilterSection}
+          tierAccessLimit={this.props.tierAccessLimit}
+          lockedTooltipMessage={this.props.lockedTooltipMessage}
+          disabledTooltipMessage={this.props.disabledTooltipMessage}
+          arrayFields={this.arrayFields}
+          filterStatusFromParent={filterStatus}
+        />
+      );
+    });
     return tabs;
   }
 
@@ -259,12 +289,7 @@ class ConnectedFilter extends React.Component {
     }
     // If there are any search fields, insert them at the top of each tab's fields.
     const filterConfig = {
-      tabs: this.props.filterConfig.tabs.map(({ title, fields, searchFields }) => {
-        if (searchFields) {
-          return { title, fields: searchFields.concat(fields) };
-        }
-        return { title, fields };
-      }),
+      tabs: this.getTabsWithSearchFields(),
     };
     return (
       <FilterGroup
@@ -274,6 +299,8 @@ class ConnectedFilter extends React.Component {
         filterConfig={filterConfig}
         onFilterChange={(e) => this.handleFilterChange(e)}
         hideZero={this.props.hideZero}
+        filterStatusFromParent={this.state.filterStatusArray}
+        filterResultsFromParent={this.state.filtersApplied}
       />
     );
   }
@@ -307,6 +334,7 @@ ConnectedFilter.propTypes = {
   accessibleFieldCheckList: PropTypes.arrayOf(PropTypes.string),
   hideZero: PropTypes.bool,
   hidden: PropTypes.bool,
+  userFilterFromURL: PropTypes.object,
   hideEmptyFilterSection: PropTypes.bool,
 };
 
@@ -324,6 +352,7 @@ ConnectedFilter.defaultProps = {
   accessibleFieldCheckList: undefined,
   hideZero: false,
   hidden: false,
+  userFilterFromURL: {},
   hideEmptyFilterSection: false,
 };
 

diff --git a/src/components/GuppyWrapper/index.jsx b/src/components/GuppyWrapper/index.jsx
@@ -47,13 +47,19 @@ import { mergeFilters } from '../Utils/filters';
 class GuppyWrapper extends React.Component {
   constructor(props) {
     super(props);
+    let initialFilter = this.props.adminAppliedPreFilters;
+    if (Object.keys(this.props.initialFilterFromURL).length > 0) {
+      initialFilter = mergeFilters(this.props.initialFilterFromURL,
+        this.props.adminAppliedPreFilters);
+    }
+
     // to avoid asynchronizations, we store another filter as private var
-    this.filter = { ...this.props.adminAppliedPreFilters };
+    this.filter = { ...initialFilter };
     this.adminPreFiltersFrozen = JSON.stringify(this.props.adminAppliedPreFilters).slice();
     this.state = {
       gettingDataFromGuppy: false,
       aggsData: {},
-      filter: { ...this.props.adminAppliedPreFilters },
+      filter: { ...initialFilter },
       rawData: [],
       totalCount: 0,
       allFields: [],
@@ -62,6 +68,7 @@ class GuppyWrapper extends React.Component {
       unaccessibleFieldObject: undefined,
       accessibility: ENUM_ACCESSIBILITY.ALL,
       adminAppliedPreFilters: { ...this.props.adminAppliedPreFilters },
+      userFilterFromURL: { ...this.props.initialFilterFromURL },
     };
   }
 
@@ -100,7 +107,16 @@ class GuppyWrapper extends React.Component {
     this.setState({ aggsData });
   }
 
-  handleFilterChange(userFilter, accessibility) {
+  handleFilterChange(userFilterFromUserInput, accessibility) {
+    let userFilter = userFilterFromUserInput;
+
+    // Apply user filters from URL on page load. Empty out state to avoid reapplying used filters.
+    if (Object.keys(userFilter).length === 0
+      && Object.keys(this.state.userFilterFromURL).length > 0) {
+      userFilter = JSON.parse(JSON.stringify(this.state.userFilterFromURL));
+      this.setState({ userFilterFromURL: {} });
+    }
+
     this.setState({ adminAppliedPreFilters: JSON.parse(this.adminPreFiltersFrozen) });
     let filter = { ...userFilter };
     if (Object.keys(this.state.adminAppliedPreFilters).length > 0) {
@@ -352,6 +368,7 @@ GuppyWrapper.propTypes = {
   onFilterChange: PropTypes.func,
   accessibleFieldCheckList: PropTypes.arrayOf(PropTypes.string),
   adminAppliedPreFilters: PropTypes.object,
+  initialFilterFromURL: PropTypes.object,
 };
 
 GuppyWrapper.defaultProps = {
@@ -360,6 +377,7 @@ GuppyWrapper.defaultProps = {
   rawDataFields: [],
   accessibleFieldCheckList: undefined,
   adminAppliedPreFilters: {},
+  initialFilterFromURL: {},
 };
 
 export default GuppyWrapper;
diff --git a/src/components/Utils/filters.js b/src/components/Utils/filters.js
@@ -171,3 +171,35 @@ export const mergeTabOptions = (firstTabsOptions, secondTabsOptions) => {
   });
   return mergedTabOptions;
 };
+
+export const buildFilterStatusForURLFilter = (userFilter, tabs) => {
+  // Converts filter-applied form to filter-displayed form
+  // TODO: add support for search filters
+  const filteringFields = Object.keys(userFilter);
+  const filterStatusArray = tabs.map(() => ([]));
+
+  for (let tabIndex = 0; tabIndex < tabs.length; tabIndex += 1) {
+    const allFieldsForThisTab = tabs[tabIndex].fields;
+    filterStatusArray[tabIndex] = allFieldsForThisTab.map(() => ({}));
+    for (let i = 0; i < filteringFields.length; i += 1) {
+      const sectionIndex = allFieldsForThisTab.indexOf(filteringFields[i]);
+      if (sectionIndex !== -1) {
+        let userFilterSmallForm = {};
+        const filterVar = userFilter[filteringFields[i]];
+        if (typeof filterVar === 'object' && filterVar.selectedValues) {
+          // Single select values:
+          for (let j = 0; j < filterVar.selectedValues.length; j += 1) {
+            userFilterSmallForm[filterVar.selectedValues[j]] = true;
+          }
+        } else if (typeof filterVar === 'object'
+          && (filterVar.lowerBound || filterVar.upperBound)) {
+          // Range values:
+          userFilterSmallForm = [filterVar.lowerBound, filterVar.upperBound];
+        }
+        filterStatusArray[tabIndex][sectionIndex] = userFilterSmallForm;
+      }
+    }
+  }
+
+  return filterStatusArray;
+};
diff --git a/src/components/__tests__/filters.test.js b/src/components/__tests__/filters.test.js
@@ -1,6 +1,8 @@
 /* eslint-disable global-require,import/no-dynamic-require */
 // Tests for Utils/filters.js
-import { mergeFilters, updateCountsInInitialTabsOptions, sortTabsOptions } from '../Utils/filters';
+import {
+  mergeFilters, updateCountsInInitialTabsOptions, sortTabsOptions, buildFilterStatusForURLFilter,
+} from '../Utils/filters';
 
 describe('can merge simple selectedValue filters', () => {
   const userFilter = { data_format: { selectedValues: ['VCF'] } };
@@ -232,3 +234,52 @@ describe('can sort tabs options', () => {
       .toEqual(expectedSort);
   });
 });
+
+describe('can convert between filter applied and filter displayed forms', () => {
+  // Unit test for buildFilterStatusForURLFilter()
+  const inputFilterFromURL = {
+    carotid_plaque: { selectedValues: ['Plaque present', 'Plaque not present'] },
+    cac_score: { lowerBound: 33, upperBound: 97 },
+    project_id: { selectedValues: ['DEV-test'] },
+  };
+  const tabs = [
+    {
+      title: 'Medical History',
+      fields: ['cac_score', 'cac_volume', 'carotid_plaque',
+        'carotid_stenosis', 'cimt_1', 'cimt_2', 'vte_case_status',
+        'vte_followup_start_age', 'vte_prior_history', 'antihypertensive_meds',
+        'fasting_lipids', 'lipid_lowering_medication',
+      ],
+    },
+    {
+      title: 'Diagnosis',
+      fields: [
+        'bp_diastolic', 'basophil_ncnc_bld', 'eosinophil_ncnc_bld', 'hdl',
+        'hematocrit_vfr_bld', 'hemoglobin_mcnc_bld', 'ldl', 'lymphocyte_ncnc_bld',
+        'mch_entmass_rbc', 'mchc_mcnc_rbc', 'mcv_entvol_rbc', 'monocyte_ncnc_bld',
+        'neutrophil_ncnc_bld', 'platelet_ncnc_bld', 'pmv_entvol_bld', 'rbc_ncnc_bld',
+        'rdw_ratio_rbc', 'wbc_ncnc_bld',
+      ],
+    },
+    {
+      title: 'Subject',
+      fields: [
+        'project_id', 'consent_codes', 'data_type', 'data_format',
+        'race', 'annotated_sex', 'hispanic_subgroup', 'ethnicity', 'subcohort', 'weight_baseline',
+      ],
+    },
+  ];
+
+  const displayFilterExpected = [
+    [[33, 97], {}, { 'Plaque present': true, 'Plaque not present': true }, {}, {}, {},
+      {}, {}, {}, {}, {}, {}],
+    [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
+    [{ 'DEV-test': true }, {}, {}, {}, {}, {}, {}, {}, {}, {}],
+  ];
+
+  test('build filter display from url', async () => {
+    const displayFilter = buildFilterStatusForURLFilter(inputFilterFromURL, tabs);
+    expect(displayFilter)
+      .toEqual(displayFilterExpected);
+  });
+});