Adjust code to implement constructed url feature.

packages/facet-filter/package.json

@@ -16,6 +16,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@bento-core/util": "1.0.1-ccdihub.1",
     "lodash": "^4.17.20"
   },
   "peerDependencies": {
@@ -24,7 +25,8 @@
     "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.0",
-    "react-redux": "^7.2.1"
+    "react-redux": "^7.2.1",
+    "react-router-dom": "^5.1.2"
   },
   "author": "CTOS Bento Team",
   "license": "ISC",

packages/facet-filter/src/FacetFilterController.js

@@ -25,6 +25,7 @@ const FacetFilterController = (props) => {
     data,
     facetsConfig,
     facetSectionConfig,
+    queryParams,
   } = props;
 
   const filterState = {};

packages/facet-filter/src/FacetFilterView.js

@@ -15,6 +15,7 @@ const BentoFacetFilter = ({
   sideBarSections,
   CustomFacetSection,
   CustomFacetView,
+  queryParams,
 }) => {
   return (
     <>
@@ -32,6 +33,7 @@ const BentoFacetFilter = ({
               {section.items.map((facet) => (
                 <FacetView
                   facet={facet}
+                  queryParams={queryParams}
                   CustomView={CustomFacetView}
                 >
                   <List className={`List_${facet.label}`}>

packages/facet-filter/src/components/facet/FacetView.js

@@ -19,6 +19,7 @@ const FacetView = ({
   onClearFacetSection,
   onClearSliderSection,
   CustomView,
+  queryParams,
 }) => {
   const [expand, setExpand] = useState(false);
   const onExpandFacet = () => setExpand(!expand);
@@ -152,6 +153,7 @@ const FacetView = ({
 }
         <FilterItems
           facet={facet}
+          queryParams={queryParams}
           sortBy={sortBy}
         />
       </Accordion>
@@ -161,6 +163,7 @@ const FacetView = ({
             <List id="filter_Items">
               <FilterItems
                 facet={displayFacet}
+                queryParams={queryParams}
               />
             </List>
           </>

packages/facet-filter/src/components/inputs/FilterItems.js

@@ -8,6 +8,7 @@ import { sortBySection } from '../../utils/Sort';
 
 const FilterItems = ({
   facet,
+  queryParams,
   sortBy,
 }) => {
   const { type, datafield, section } = facet;
@@ -21,10 +22,11 @@ const FilterItems = ({
             checkboxItem={{ ...item, index, section }}
             datafield={datafield}
             facet={facet}
+            queryParams={queryParams}
           />
         ));
       case InputTypes.SLIDER:
-        return (<ReduxSlider facet={facet} />);
+        return (<ReduxSlider facet={facet} queryParams={queryParams} />);
       default:
         return (<></>);
     }

packages/facet-filter/src/components/inputs/checkbox/CheckboxView.js

@@ -6,6 +6,11 @@
 /* eslint-disable object-shorthand */
 /* eslint-disable react/jsx-one-expression-per-line */
 import React from 'react';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import { generateQueryStr } from '@bento-core/util';
 import { withStyles } from '@material-ui/core/styles';
 import {
   Checkbox,
@@ -33,6 +38,7 @@ const CheckBoxView = ({
   datafield,
   onToggle,
   facet,
+  queryParams,
 }) => {
   const {
     name,
@@ -43,6 +49,10 @@ const CheckBoxView = ({
     tooltip,
     label,
   } = checkboxItem;
+
+  const query = new URLSearchParams(useLocation().search);
+  const navigate = useNavigate();
+
   const indexType = index % 2 === 0 ? 'Even' : 'Odd';
   const checkedSection = `${section}`.toLowerCase().replace(' ', '_');
 
@@ -54,6 +64,28 @@ const CheckBoxView = ({
       datafield: datafield,
       isChecked: !isChecked,
     };
+    const checkedValues = query.get(datafield);
+    const paramValue = {};
+    if (toggleCheckBoxItem.isChecked) {
+      if (checkedValues) {
+        const newValues = checkedValues.split('|');
+        newValues.push(name);
+        paramValue[datafield] = newValues.join('|');
+      } else {
+        paramValue[datafield] = name;
+      }
+    } else if (checkedValues) {
+      const newValues = checkedValues.split('|');
+      const idx = newValues.indexOf(name);
+      if (idx > -1) {
+        newValues.splice(idx, 1);
+      }
+      paramValue[datafield] = newValues.length > 0 ? newValues.join('|') : '';
+    } else {
+      paramValue[datafield] = '';
+    }
+    const queryStr = generateQueryStr(query, queryParams, paramValue);
+    navigate(`/explore${queryStr}`);
     onToggle(toggleCheckBoxItem);
   };
 

packages/facet-filter/src/components/inputs/slider/SliderView.js

@@ -3,6 +3,11 @@
 /* eslint-disable react/jsx-indent */
 /* eslint-disable object-curly-newline */
 import React, { useEffect, useState } from 'react';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import { generateQueryStr } from '@bento-core/util';
 import { withStyles, Slider, Typography, Box } from '@material-ui/core';
 // import styles from './SliderStyle';
 import { silderTypes } from '../Types';
@@ -13,11 +18,15 @@ const SliderView = ({
   facet,
   onSliderToggle,
   filterState,
+  queryParams,
 }) => {
   const { minLowerBound, maxUpperBound, quantifier, datafield, facetValues } = facet;
   const lowerBoundValue = facetValues[0];
   const upperBoundValue = facetValues[1];
 
+  const query = new URLSearchParams(useLocation().search);
+  const navigate = useNavigate();
+
   // Determines whether the lower bound and upper bound values are valid
   const isValid = () => {
     const checks = [
@@ -30,6 +39,10 @@ const SliderView = ({
   };
   const handleChangeCommittedSlider = (value) => {
     if (!value.includes('')) {
+      const paramValue = {};
+      paramValue[datafield] = value;
+      const queryStr = generateQueryStr(query, queryParams, paramValue);
+      navigate(`/explore${queryStr}`);
       onSliderToggle({ sliderValue: value, ...facet });
     }
   };

packages/facet-filter/src/index.js

@@ -22,6 +22,7 @@ export {
   clearFacetSection,
   clearSliderSection,
   clearAllAndSelectFacet,
+  updateFilterState,
 } from './store/actions/Actions';
 export {
   generateFacetSectionView,

packages/facet-filter/src/store/actions/ActionTypes.js

@@ -5,6 +5,7 @@ export const sideBarActionTypes = {
   CLEAR_FACET_SECTION: 'CLEAR_FACET_SECTION',
   CLEAR_SLIDER_SECTION: 'CLEAR_SLIDER_SECTION',
   CLEAR_AND_SELECT_FACET_VALUE: 'CLEAR_AND_SELECT_FACET_VALUE',
+  UPDATE_FILTER_STATE: 'UPDATE_FILTER_STATE',
 };
 
 export const Actions = '';

packages/facet-filter/src/store/actions/Actions.js

@@ -30,3 +30,8 @@ export const clearAllAndSelectFacet = (facetValue) => ({
   type: sideBarActionTypes.CLEAR_AND_SELECT_FACET_VALUE,
   payload: facetValue,
 });
+
+export const updateFilterState = (filterState) => ({
+  type: sideBarActionTypes.UPDATE_FILTER_STATE,
+  payload: filterState,
+});

packages/facet-filter/src/store/reducers/SideBarReducer.js

@@ -95,6 +95,10 @@ export function sideBarReducerGenerator() {
           return {
             filterState: payload,
           };
+        case sideBarActionTypes.UPDATE_FILTER_STATE:
+          return {
+            filterState: payload,
+          };
         default:
           return state;
       }

packages/local-find/package.json

@@ -22,10 +22,12 @@
     "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.0",
-    "react-redux": "^7.2.1"
+    "react-redux": "^7.2.1",
+    "react-router-dom": "^5.1.2"
   },
   "dependencies": {
     "@bento-core/tool-tip": "^1.0.0",
+    "@bento-core/util": "1.0.1-ccdihub.1",
     "lodash": "^4.17.20"
   },
   "author": "CTOS Bento Team",

packages/local-find/src/SearchBox/SearchBoxGenerator.js

@@ -1,5 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
 import { withStyles } from '@material-ui/core';
 import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
 import { isEqual } from 'lodash';
@@ -25,6 +29,10 @@ export const SearchBoxGenerator = (uiConfig = DEFAULT_CONFIG) => {
     ? functions.onChange
     : DEFAULT_CONFIG.functions.onChange;
 
+  const updateBrowserUrl = functions && typeof functions.updateBrowserUrl === 'function'
+    ? functions.updateBrowserUrl
+    : DEFAULT_CONFIG.functions.updateBrowserUrl;
+
   const getSuggestions = functions && typeof functions.getSuggestions === 'function'
     ? functions.getSuggestions
     : DEFAULT_CONFIG.functions.getSuggestions;
@@ -57,6 +65,9 @@ export const SearchBoxGenerator = (uiConfig = DEFAULT_CONFIG) => {
         classes, autocomplete, applySearch,
       } = props;
 
+      const query = new URLSearchParams(useLocation().search);
+      const navigate = useNavigate();
+
       const [open, setOpen] = useState(false);
       const [value, setValue] = useState(autocomplete || []);
       const [options, setOptions] = useState([]);
@@ -100,6 +111,7 @@ export const SearchBoxGenerator = (uiConfig = DEFAULT_CONFIG) => {
         // Call the onChange function if the selection has changed
         if (!isEqual(newUniqueValue, value)) {
           onChange(newUniqueValue, reason, deleted);
+          updateBrowserUrl(query, navigate, newUniqueValue);
           applySearch(newUniqueValue);
           setValue(newUniqueValue);
         }

packages/local-find/src/SearchBox/config.js

@@ -21,6 +21,14 @@ export const DEFAULT_CONFIG_SEARCHBAR = {
      */
     onChange: (newValue = [], reason, deleted) => {},
 
+    /**
+     * A function that is called when the autocomplete selection changes
+     *
+     * @param void
+     * @return void
+     */
+    updateBrowserUrl: () => {},
+
     /**
      * Perform autocomplete search on the API
      *

packages/local-find/src/SearchView.js

@@ -1,5 +1,10 @@
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+import { generateQueryStr } from '@bento-core/util';
 import { Button } from '@material-ui/core';
 import SearchList from './SearchBox/components/SearchList';
 import { resetUploadData } from './store/actions/Actions';
@@ -21,9 +26,12 @@ import { resetUploadData } from './store/actions/Actions';
 const SearchView = (props) => {
   const {
     classes, hidden, state, resetUpload,
-    UploadModal, SearchBox, config,
+    UploadModal, SearchBox, config, queryParams,
   } = props;
 
+  const query = new URLSearchParams(useLocation().search);
+  const navigate = useNavigate();
+
   const [showCasesModal, setShowCasesModal] = useState(false);
   const matchedFiles = state && state.upload ? state.upload : [];
 
@@ -36,6 +44,18 @@ const SearchView = (props) => {
     ? config.searchLabel
     : null;
 
+  /**
+       * Handles the deletion of upload set
+       */
+  const onDelete = () => {
+    const paramValue = {
+      participant_upload: '',
+    };
+    const queryStr = generateQueryStr(query, queryParams, paramValue);
+    navigate(`/explore${queryStr}`);
+    resetUpload();
+  };
+
   return (
     <div
       className={classes.searchContainer}
@@ -56,7 +76,7 @@ const SearchView = (props) => {
           classes={{ divider: classes.customDivider, listPadding: classes.customListPadding }}
           items={['INPUT SET']}
           id="localFindCaseUploadSet"
-          onDelete={resetUpload}
+          onDelete={onDelete}
         />
       ) : null}
       <SearchBox classes={classes} />

packages/local-find/src/UploadModal/UploadModalGenerator.js

@@ -1,5 +1,9 @@
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
+import {
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
 import {
   Modal, Button, Typography,
   TextareaAutosize, IconButton, withStyles,
@@ -52,6 +56,10 @@ export const UploadModalGenerator = (uiConfig = DEFAULT_CONFIG) => {
     ? functions.modalClosed
     : DEFAULT_CONFIG.functions.modalClosed;
 
+  const updateBrowserUrl = functions && typeof functions.updateBrowserUrl === 'function'
+    ? functions.updateBrowserUrl
+    : DEFAULT_CONFIG.functions.updateBrowserUrl;
+
   const searchMatches = functions && typeof functions.searchMatches === 'function'
     ? functions.searchMatches
     : DEFAULT_CONFIG.functions.searchMatches;
@@ -98,6 +106,9 @@ export const UploadModalGenerator = (uiConfig = DEFAULT_CONFIG) => {
         onApplySearch, updateMetadata,
       } = props;
 
+      const query = new URLSearchParams(useLocation().search);
+      const navigate = useNavigate();
+
       const {
         FileUploader: uploaderClasses,
         // SummaryTable: summaryClasses,
@@ -127,6 +138,7 @@ export const UploadModalGenerator = (uiConfig = DEFAULT_CONFIG) => {
       };
 
       const applySearchWrapper = () => {
+        updateBrowserUrl(query, navigate, filename, fileContent, matchIds, unmatchedIds);
         onApplySearch(matchIds);
         updateMetadata({
           filename,

packages/local-find/src/UploadModal/config.js

@@ -15,6 +15,14 @@ export const DEFAULT_CONFIG_UPLOADMODAL = {
 
   // Helper functions used by the component
   functions: {
+    /**
+     * Callback function called when the submit button is clicked.
+     *
+     * @param void
+     * @return void
+     */
+    updateBrowserUrl: () => {},
+
     /**
      * Callback function called when the modal is closed.
      *