@bento-core/query-bar 1.0.0-c3dc.0 → 1.0.0-c3dc.10

package/CopyURL_README.md

@@ -0,0 +1,42 @@
+# DQB copy URL button Configuration
+
+```
+DashTemplateController.js
+
+export const setActiveFilterByPathQuery = (match) => {
+  const query = decodeURI(match.params.filterQuery || '');
+  const filterObject = JSON.parse(query);
+  const { autocomplete = [], upload = [], uploadMetadata } = filterObject;
+
+  const activeFilterValues = Object.keys(filterObject).reduce((curr, key) => {
+    if (Array.isArray(filterObject[key])) {
+      const activeFilters = filterObject[key].reduce((value, item) => ({
+        ...value,
+        [item]: true,
+      }), {});
+      return {
+        ...curr,
+        [key]: activeFilters,
+      };
+    }
+    return curr;
+  }, {});
+  store.dispatch(clearAllAndSelectFacet(activeFilterValues));
+  store.dispatch(updateAutocompleteData(autocomplete));
+  store.dispatch(updateUploadData(upload));
+  store.dispatch(updateUploadMetadata(uploadMetadata));
+};
+
+
+// redirect 
+if (match.params.filterQuery) {
+  setActiveFilterByPathQuery(match);
+  const redirectUrl = '/explore';
+  history.push(redirectUrl);
+}
+
+```
+
+# DQB copy URL button theme style
+
+``` https://github.com/CBIIT/bento-icdc-frontend/tree/v4.0.1/src/pages/dashboard/filterQueryBar```

package/README.md

@@ -60,6 +60,17 @@ const CONFIG = {
     maxItems: 2,
   },
 
+  /**
+   * set root path for copy url (COPYURL_README)
+   * @var {boolean}
+   */
+  rootPath: `${window.location.href}/`,
+  /**
+   * display copy url button (COPYURL_README)
+   * @var {boolean}
+   */
+  viewQueryURL: true,
+
   /* Component Helper Functions */
   functions: {
     /**

package/dist/assets/CopyIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 9.75715C13 10.0452 12.78 10.2714 12.5 10.2714H7.5C7.22 10.2714 7 10.0452 7 9.75715C7 9.46915 7.22 9.24287 7.5 9.24287H12.5C12.78 9.24287 13 9.46915 13 9.75715ZM12.5 11.3H7.5C7.22 11.3 7 11.5263 7 11.8143C7 12.1023 7.22 12.3286 7.5 12.3286H12.5C12.78 12.3286 13 12.1023 13 11.8143C13 11.5263 12.78 11.3 12.5 11.3ZM12.5 13.3572H7.5C7.22 13.3572 7 13.5834 7 13.8714C7 14.1594 7.22 14.3857 7.5 14.3857H12.5C12.78 14.3857 13 14.1594 13 13.8714C13 13.5834 12.78 13.3572 12.5 13.3572ZM16 8.21429V16.4429C16 17.5743 15.1 18.5 14 18.5H6C4.9 18.5 4 17.5743 4 16.4429V15.4143H2C0.9 15.4143 0 14.4886 0 13.3572V4.10001C0 2.96858 0.9 2.04286 2 2.04286H4.5C4.5 1.18915 5.17 0.500008 6 0.500008C6.83 0.500008 7.5 1.18915 7.5 2.04286H10C11.1 2.04286 12 2.96858 12 4.10001V6.15715H14C15.1 6.15715 16 7.08287 16 8.21429ZM6 6.15715H11V4.10001C11 3.53429 10.55 3.07144 10 3.07144H9V4.10001H3V3.07144H2C1.45 3.07144 1 3.53429 1 4.10001V13.3572C1 13.9229 1.45 14.3857 2 14.3857H4V8.21429C4 7.08287 4.9 6.15715 6 6.15715ZM15 8.21429C15 7.64858 14.55 7.18572 14 7.18572H6C5.45 7.18572 5 7.64858 5 8.21429V16.4429C5 17.0086 5.45 17.4714 6 17.4714H14C14.55 17.4714 15 17.0086 15 16.4429V8.21429Z" fill="#142D64"/>
+</svg>

package/dist/components/QueryUrl.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _core = require("@material-ui/core");
+var _CopyIcon = _interopRequireDefault(require("../assets/CopyIcon.svg"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+const QueryUrl = _ref => {
+  let {
+    classes,
+    filterItems,
+    localFind = {},
+    rootPath,
+    queryUrlCharacterLimit = 70,
+    generateUrl
+  } = _ref;
+  const [display, setDisplay] = (0, _react.useState)(false);
+  const toggleDisplay = () => setDisplay(prevDisplay => !prevDisplay);
+  const [open, setOpen] = (0, _react.useState)(false);
+  const toggleOpen = () => setOpen(prevOpen => !prevOpen);
+  const pathFilterParams = filterItems.reduce((acc, item) => {
+    const {
+      datafield,
+      items = []
+    } = item;
+    acc[datafield] = items;
+    return acc;
+  }, {});
+  const queryString = JSON.stringify(_objectSpread(_objectSpread({}, pathFilterParams), localFind));
+  const [url, setUrl] = (0, _react.useState)('');
+  const copyUrl = async () => {
+    toggleOpen();
+    await navigator.clipboard.writeText(url);
+  };
+  const queryRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (display && generateUrl) {
+      generateUrl(queryString, rootPath, setUrl);
+    }
+  }, [display]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: queryRef,
+    className: classes.urlContainer
+  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
+    onClick: toggleDisplay,
+    className: classes.viewLinkToggleBtn
+  }, display ? 'Hide Query URL' : 'Show Query URL'), display && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    type: "button",
+    className: (0, _clsx.default)(classes.viewLink)
+  }, url.length > queryUrlCharacterLimit ? "".concat(url.substring(0, queryUrlCharacterLimit), "...") : url), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+    arrow: true,
+    title: "Copy to Clipboard"
+  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    onClick: copyUrl,
+    className: classes.copyIconBtn
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _CopyIcon.default,
+    alt: "copy icon"
+  }))))), /*#__PURE__*/_react.default.createElement(_core.Dialog, {
+    open: open,
+    onClose: () => toggleOpen(),
+    "aria-labelledby": "alert-dialog-title",
+    "aria-describedby": "alert-dialog-description",
+    className: (0, _clsx.default)(classes.dialogBox, 'dialogBox')
+  }, /*#__PURE__*/_react.default.createElement(_core.DialogContent, {
+    className: classes.okText
+  }, /*#__PURE__*/_react.default.createElement(_core.DialogContentText, {
+    id: "alert-dialog-description"
+  }, "Your query URL has been copied!")), /*#__PURE__*/_react.default.createElement(_core.DialogActions, null, /*#__PURE__*/_react.default.createElement(_core.Button, {
+    onClick: () => toggleOpen()
+  }, "OK"))));
+};
+const styles = () => ({
+  urlContainer: {
+    display: 'flex',
+    marginTop: '3px',
+    minHeight: '10px'
+  },
+  viewLink: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    fontFamily: 'Nunito',
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: '16px',
+    letterSpacing: '0em',
+    padding: '2px 5px',
+    borderRadius: '5px',
+    float: 'left',
+    color: '#1D79A8',
+    backgroundColor: '#fff',
+    margin: '0',
+    whiteSpace: 'nowrap',
+    wordBreak: 'break-all',
+    '@media (max-width: 2560px)': {
+      maxWidth: '1800px'
+    },
+    '@media (max-width: 2000px)': {
+      maxWidth: '1500px'
+    },
+    '@media (max-width: 1600px)': {
+      maxWidth: '1100px'
+    },
+    '@media (max-width: 1300px)': {
+      maxWidth: '900px'
+    }
+  },
+  urlViewBtn: {
+    cursor: 'pointer'
+  },
+  viewLinkToggleBtn: {
+    padding: '5px 10px 5px 10px',
+    height: '20px',
+    fontFamily: 'Nunito',
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: '16px',
+    letterSpacing: '0em',
+    textAlign: 'left',
+    backgroundColor: '#1D79A8',
+    textTransform: 'none',
+    color: '#fff',
+    float: 'left',
+    margin: '0px 10px 0px 0px',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+      backgroundColor: '#1D79A8',
+      color: '#fff'
+    }
+  },
+  copyIconBtn: {
+    padding: '0px',
+    height: '20px',
+    marginLeft: '10px',
+    float: 'left'
+  }
+});
+var _default = (0, _core.withStyles)(styles)(QueryUrl);
+exports.default = _default;

package/dist/components/SliderFilter.js

@@ -17,18 +17,49 @@ var _default = _ref => {
   } = _ref;
   const {
     items,
-    section
+    section,
+    unknownAges
   } = data;
+  const getDisplayContent = () => {
+    const baseLabel = data.label;
+    const hasRange = items && items.length >= 2;
+
+    // If unknownAges is 'only', we're showing only unknown ages
+    if (unknownAges === 'only') {
+      return {
+        label: "".concat(baseLabel, " (Unknown Ages Only)"),
+        showRange: false,
+        rangeText: ''
+      };
+    }
+
+    // If unknownAges is 'exclude', we're excluding unknown ages from the range
+    if (unknownAges === 'exclude') {
+      return {
+        label: "".concat(baseLabel, " (Unknown Ages Excluded)"),
+        showRange: hasRange,
+        rangeText: hasRange ? "".concat(items[0], " \u2013 ").concat(items[1]) : ''
+      };
+    }
+
+    // Default: unknownAges is 'include' or not set
+    return {
+      label: baseLabel,
+      showRange: hasRange,
+      rangeText: hasRange ? "".concat(items[0], " \u2013 ").concat(items[1]) : ''
+    };
+  };
+  const displayContent = getDisplayContent();
   return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", null, ' ', index !== 0 ? /*#__PURE__*/_react.default.createElement("span", {
     className: classes.operators
   }, " AND ") : '', /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _clsx.default)(classes.filterName, classes["facetSection".concat(section, "Background")]),
     onClick: () => onSectionClick(data)
-  }, data.label), ' '), /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
+  }, displayContent.label), ' '), displayContent.showRange && /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
     className: classes.operators
   }, "IS BETWEEN", ' '), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _clsx.default)(classes.filterCheckboxes, classes["facetSection".concat(section)]),
     onClick: () => onItemClick(data, items[0])
-  }, "".concat(items[0], " \u2013 ").concat(items[1]))));
+  }, displayContent.rangeText)));
 };
 exports.default = _default;

package/dist/generators/QueryBarGenerator.js

@@ -9,6 +9,7 @@ var _core = require("@material-ui/core");
 var _facetFilter = require("@bento-core/facet-filter");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _FilterMap = require("../components/FilterMap");
+var _QueryUrl = _interopRequireDefault(require("../components/QueryUrl"));
 var _styles = _interopRequireDefault(require("./styles"));
 var _config = _interopRequireDefault(require("./config"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,12 +28,16 @@ const QueryBarGenerator = function QueryBarGenerator() {
   let uiConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _config.default;
   const {
     config,
-    functions
+    functions,
+    customStyles
   } = uiConfig;
   const {
     CHECKBOX
   } = _facetFilter.InputTypes;
   const maxItems = config && typeof config.maxItems === 'number' ? config.maxItems : _config.default.config.maxItems;
+  const queryURLRootPath = config && typeof config.rootPath === 'string' ? config.rootPath : _config.default.config.rootPath;
+  const viewQueryURL = config && typeof config.viewQueryURL === 'boolean' ? config.viewQueryURL : _config.default.config.viewQueryURL;
+  const queryUrlCharacterLimit = config && typeof config.queryUrlCharacterLimit === 'number' ? config.queryUrlCharacterLimit : _config.default.config.queryUrlCharacterLimit;
   const clearAll = functions && typeof functions.clearAll === 'function' ? functions.clearAll : _config.default.functions.clearAll;
   const clearUpload = functions && typeof functions.clearUpload === 'function' ? functions.clearUpload : _config.default.functions.clearUpload;
   const clearAutocomplete = functions && typeof functions.clearAutocomplete === 'function' ? functions.clearAutocomplete : _config.default.functions.clearAutocomplete;
@@ -40,8 +45,9 @@ const QueryBarGenerator = function QueryBarGenerator() {
   const resetFacetSection = functions && typeof functions.resetFacetSection === 'function' ? functions.resetFacetSection : _config.default.functions.resetFacetSection;
   const resetFacetCheckbox = functions && typeof functions.resetFacetCheckbox === 'function' ? functions.resetFacetCheckbox : _config.default.functions.resetFacetCheckbox;
   const resetFacetSlider = functions && typeof functions.resetFacetSlider === 'function' ? functions.resetFacetSlider : _config.default.functions.resetFacetSlider;
+  const generateUrl = functions && typeof functions.generateUrl === 'function' ? functions.generateUrl : _config.default.functions.generateUrl;
   return {
-    QueryBar: (0, _core.withStyles)(_styles.default, {
+    QueryBar: (0, _core.withStyles)(customStyles || _styles.default, {
       withTheme: true
     })(props => {
       const {
@@ -76,7 +82,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
         return _objectSpread(_objectSpread({}, facet), {}, {
           items: itemKeys
         });
-      }).filter(facet => facet.items.length > 0);
+      }).filter(facet => facet.items.length > 0 || facet.unknownAges && facet.unknownAges !== 'include');
       if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
         return null;
       }
@@ -91,26 +97,60 @@ const QueryBarGenerator = function QueryBarGenerator() {
         className: classes.divider
       }), /*#__PURE__*/_react.default.createElement("span", {
         className: classes.queryContainer
-      }, autocomplete.length || upload.length ? /*#__PURE__*/_react.default.createElement("span", null, upload.length && !autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground),
-        onClick: clearUpload
-      }, "INPUT PARTICIPANT SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
-        onClick: clearAutocomplete
-      }, "Participant ID"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
+      }, (autocomplete.length || upload.length) > 0 && /*#__PURE__*/_react.default.createElement("span", null, (() => {
+        const participantItems = autocomplete.filter(i => i.type === 'participantIds');
+        const participantCount = upload.length + participantItems.length;
+        if (upload.length > 0 && participantItems.length === 0) {
+          // Only upload, no participant autocomplete
+          return /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground),
+            onClick: clearUpload
+          }, "INPUT PARTICIPANT SET");
+        }
+        if (participantCount > 0) {
+          const operator = participantCount === 1 ? 'IS' : 'IN';
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
+            onClick: clearAutocomplete
+          }, "Participant ID"), /*#__PURE__*/_react.default.createElement("span", {
+            className: classes.operators
+          }, operator), operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
+            className: classes.bracketsOpen
+          }, "("), upload.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
+            onClick: clearUpload
+          }, "INPUT PARTICIPANT SET")), participantItems.slice(0, maxItems).map((d, idx, arr) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+            key: "pid-".concat(idx)
+          }, /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
+            onClick: () => deleteAutocompleteItem(d.title)
+          }, d.title), idx < arr.length - 1 && ' ')), participantItems.length > maxItems && '...', operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
+            className: classes.bracketsClose
+          }, ")"));
+        }
+        return null;
+      })(), (upload.length > 0 || autocomplete.some(i => i.type === 'participantIds')) && autocomplete.some(i => i.type === 'associatedIds') && /*#__PURE__*/_react.default.createElement("span", {
         className: classes.operators
-      }, autocomplete.length === 1 && !upload.length ? 'IS ' : 'IN ')) : null, /*#__PURE__*/_react.default.createElement("span", null, (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
-        className: classes.bracketsOpen
-      }, "(") : null, upload.length && autocomplete.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
-        onClick: clearUpload
-      }, "INPUT PARTICIPANT SET"), ' ') : null, autocomplete.slice(0, maxItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
-        key: idx,
-        onClick: () => deleteAutocompleteItem(d.title)
-      }, d.title), idx === maxItems - 1 ? null : ' ')), autocomplete.length > maxItems && '...', (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
-        className: classes.bracketsClose
-      }, ")") : null)) : null, (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
+      }, "OR"), (() => {
+        const associatedItems = autocomplete.filter(i => i.type === 'associatedIds');
+        if (associatedItems.length === 0) return null;
+        const operator = associatedItems.length === 1 ? 'IS' : 'IN';
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+          className: (0, _clsx.default)(classes.filterName, classes.localFindAssociatedIdsBackground),
+          onClick: clearAutocomplete
+        }, "Synonym"), /*#__PURE__*/_react.default.createElement("span", {
+          className: classes.operators
+        }, operator), operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
+          className: classes.bracketsOpen
+        }, "("), associatedItems.slice(0, maxItems).map((d, idx, arr) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: "aid-".concat(idx)
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindAssociatedIdsText),
+          onClick: () => deleteAutocompleteItem(d.title)
+        }, d.synonym), idx < arr.length - 1 && ' ')), associatedItems.length > maxItems && '...', operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
+          className: classes.bracketsClose
+        }, ")"));
+      })()), (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
         className: classes.operators
       }, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
         index: index,
@@ -120,7 +160,14 @@ const QueryBarGenerator = function QueryBarGenerator() {
         classes: classes,
         onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
         onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
-      }))));
+      }))), viewQueryURL && queryURLRootPath && /*#__PURE__*/_react.default.createElement(_QueryUrl.default, {
+        classes: classes,
+        localFind: localFind,
+        filterItems: mappedInputs,
+        rootPath: queryURLRootPath,
+        queryUrlCharacterLimit: queryUrlCharacterLimit,
+        generateUrl: generateUrl
+      }));
     })
   };
 };

package/dist/generators/config.js

@@ -14,6 +14,21 @@ var _default = {
      */
     maxItems: 2
   },
+  /**
+   * set root path for copy url
+   * @var {boolean}
+   */
+  rootPath: "".concat(window.location.href, "/"),
+  /**
+   * display copy url button
+   * @var {boolean}
+   */
+  viewQueryURL: false,
+  /**
+   * display copy url button
+   * @var {boolean}
+   */
+  queryUrlCharacterLimit: 70,
   /* Component Helper Functions */
   functions: {
     /**
@@ -62,7 +77,16 @@ var _default = {
      * @param {object} section the configuration object for the section
      * @returns {void}
      */
-    resetFacetSlider: section => {}
+    resetFacetSlider: section => {},
+    /**
+     * Generate a query URL by calling the interop service
+     *
+     * @param {string} queryStr the query string to encode
+     * @param {string} root the root path for the URL
+     * @param {function} setUrlCallback callback function to set the generated URL
+     * @returns {Promise<void>}
+     */
+    generateUrl: async (queryStr, root, setUrlCallback) => {}
   }
 };
 exports.default = _default;

package/dist/generators/styles.js

@@ -152,6 +152,12 @@ var _default = () => ({
   facetSectionLibraryBackground: {
     backgroundColor: '#DDEAE540',
     border: '1px solid #646464'
+  },
+  localFindAssociatedIdsBackground: {
+    backgroundColor: '#F6A700'
+  },
+  localFindAssociatedIdsText: {
+    color: '#B36B00'
   }
 });
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.0-c3dc.0",
+  "version": "1.0.0-c3dc.10",
   "description": "This package provides the Query Bar component that displays the current Facet Search and Local Find filters on the Dashboard/Explore page. It also provides the direct ability to reset all or some of the filters with the click of a button. It is designed to be implemented directly with the:",
   "main": "dist/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
     "react-redux": "^7.2.1"
   },
   "dependencies": {
-    "@bento-core/facet-filter": "^1.0.0",
+    "@bento-core/facet-filter": "^1.0.1-c3dc.10",
     "lodash": "^4.17.20"
   },
   "author": "CTOS Bento Team",

package/src/assets/CopyIcon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 9.75715C13 10.0452 12.78 10.2714 12.5 10.2714H7.5C7.22 10.2714 7 10.0452 7 9.75715C7 9.46915 7.22 9.24287 7.5 9.24287H12.5C12.78 9.24287 13 9.46915 13 9.75715ZM12.5 11.3H7.5C7.22 11.3 7 11.5263 7 11.8143C7 12.1023 7.22 12.3286 7.5 12.3286H12.5C12.78 12.3286 13 12.1023 13 11.8143C13 11.5263 12.78 11.3 12.5 11.3ZM12.5 13.3572H7.5C7.22 13.3572 7 13.5834 7 13.8714C7 14.1594 7.22 14.3857 7.5 14.3857H12.5C12.78 14.3857 13 14.1594 13 13.8714C13 13.5834 12.78 13.3572 12.5 13.3572ZM16 8.21429V16.4429C16 17.5743 15.1 18.5 14 18.5H6C4.9 18.5 4 17.5743 4 16.4429V15.4143H2C0.9 15.4143 0 14.4886 0 13.3572V4.10001C0 2.96858 0.9 2.04286 2 2.04286H4.5C4.5 1.18915 5.17 0.500008 6 0.500008C6.83 0.500008 7.5 1.18915 7.5 2.04286H10C11.1 2.04286 12 2.96858 12 4.10001V6.15715H14C15.1 6.15715 16 7.08287 16 8.21429ZM6 6.15715H11V4.10001C11 3.53429 10.55 3.07144 10 3.07144H9V4.10001H3V3.07144H2C1.45 3.07144 1 3.53429 1 4.10001V13.3572C1 13.9229 1.45 14.3857 2 14.3857H4V8.21429C4 7.08287 4.9 6.15715 6 6.15715ZM15 8.21429C15 7.64858 14.55 7.18572 14 7.18572H6C5.45 7.18572 5 7.64858 5 8.21429V16.4429C5 17.0086 5.45 17.4714 6 17.4714H14C14.55 17.4714 15 17.0086 15 16.4429V8.21429Z" fill="#142D64"/>
+</svg>

package/src/components/QueryUrl.js

@@ -0,0 +1,172 @@
+import React, { useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import {
+  Button,
+  IconButton,
+  Tooltip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  withStyles,
+} from '@material-ui/core';
+import CopyIcon from '../assets/CopyIcon.svg';
+
+const QueryUrl = ({
+  classes,
+  filterItems,
+  localFind = {},
+  rootPath,
+  queryUrlCharacterLimit = 70,
+  generateUrl,
+}) => {
+  const [display, setDisplay] = useState(false);
+  const toggleDisplay = () => setDisplay((prevDisplay) => !prevDisplay);
+
+  const [open, setOpen] = useState(false);
+  const toggleOpen = () => setOpen((prevOpen) => !prevOpen);
+
+  const pathFilterParams = filterItems.reduce((acc, item) => {
+    const { datafield, items = [] } = item;
+    acc[datafield] = items;
+    return acc;
+  }, {});
+
+  const queryString = JSON.stringify({
+    ...pathFilterParams,
+    ...localFind,
+  });
+  const [url, setUrl] = useState('');
+
+  const copyUrl = async () => {
+    toggleOpen();
+    await navigator.clipboard.writeText(url);
+  };
+
+  const queryRef = useRef(null);
+
+  useEffect(() => {
+    if (display && generateUrl) {
+      generateUrl(queryString, rootPath, setUrl);
+    }
+  }, [display]);
+
+  return (
+    <>
+      <div ref={queryRef} className={classes.urlContainer}>
+        <Button
+          onClick={toggleDisplay}
+          className={classes.viewLinkToggleBtn}
+        >
+          { (display) ? 'Hide Query URL' : 'Show Query URL'}
+        </Button>
+        {
+          (display) && (
+            <>
+              <div
+                type="button"
+                className={clsx(classes.viewLink)}
+              >
+                {url.length > queryUrlCharacterLimit ? `${url.substring(0, queryUrlCharacterLimit)}...` : url}
+              </div>
+              <Tooltip
+                arrow
+                title="Copy to Clipboard"
+              >
+                <IconButton onClick={copyUrl} className={classes.copyIconBtn}>
+                  <img src={CopyIcon} alt="copy icon" />
+                </IconButton>
+              </Tooltip>
+            </>
+          )
+        }
+      </div>
+      <Dialog
+        open={open}
+        onClose={() => toggleOpen()}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+        className={clsx(classes.dialogBox, 'dialogBox')}
+      >
+        <DialogContent className={classes.okText}>
+          <DialogContentText id="alert-dialog-description">
+            Your query URL has been copied!
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => toggleOpen()}>
+            OK
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
+
+const styles = () => ({
+  urlContainer: {
+    display: 'flex',
+    marginTop: '3px',
+    minHeight: '10px',
+  },
+  viewLink: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    fontFamily: 'Nunito',
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: '16px',
+    letterSpacing: '0em',
+    padding: '2px 5px',
+    borderRadius: '5px',
+    float: 'left',
+    color: '#1D79A8',
+    backgroundColor: '#fff',
+    margin: '0',
+    whiteSpace: 'nowrap',
+    wordBreak: 'break-all',
+    '@media (max-width: 2560px)': {
+      maxWidth: '1800px',
+    },
+    '@media (max-width: 2000px)': {
+      maxWidth: '1500px',
+    },
+    '@media (max-width: 1600px)': {
+      maxWidth: '1100px',
+    },
+    '@media (max-width: 1300px)': {
+      maxWidth: '900px',
+    },
+  },
+  urlViewBtn: {
+    cursor: 'pointer',
+  },
+  viewLinkToggleBtn: {
+    padding: '5px 10px 5px 10px',
+    height: '20px',
+    fontFamily: 'Nunito',
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: '16px',
+    letterSpacing: '0em',
+    textAlign: 'left',
+    backgroundColor: '#1D79A8',
+    textTransform: 'none',
+    color: '#fff',
+    float: 'left',
+    margin: '0px 10px 0px 0px',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+      backgroundColor: '#1D79A8',
+      color: '#fff',
+    },
+  },
+  copyIconBtn: {
+    padding: '0px',
+    height: '20px',
+    marginLeft: '10px',
+    float: 'left',
+  },
+});
+
+export default withStyles(styles)(QueryUrl);

package/src/components/SliderFilter.js

@@ -5,7 +5,39 @@ export default ({
   index, data, classes,
   onSectionClick, onItemClick,
 }) => {
-  const { items, section } = data;
+  const { items, section, unknownAges } = data;
+
+  const getDisplayContent = () => {
+    const baseLabel = data.label;
+    const hasRange = items && items.length >= 2;
+
+    // If unknownAges is 'only', we're showing only unknown ages
+    if (unknownAges === 'only') {
+      return {
+        label: `${baseLabel} (Unknown Ages Only)`,
+        showRange: false,
+        rangeText: '',
+      };
+    }
+
+    // If unknownAges is 'exclude', we're excluding unknown ages from the range
+    if (unknownAges === 'exclude') {
+      return {
+        label: `${baseLabel} (Unknown Ages Excluded)`,
+        showRange: hasRange,
+        rangeText: hasRange ? `${items[0]} – ${items[1]}` : '',
+      };
+    }
+
+    // Default: unknownAges is 'include' or not set
+    return {
+      label: baseLabel,
+      showRange: hasRange,
+      rangeText: hasRange ? `${items[0]} – ${items[1]}` : '',
+    };
+  };
+
+  const displayContent = getDisplayContent();
 
   return (
     <span>
@@ -16,23 +48,25 @@ export default ({
           className={clsx(classes.filterName, classes[`facetSection${section}Background`])}
           onClick={() => onSectionClick(data)}
         >
-          {data.label}
+          {displayContent.label}
         </span>
         {' '}
       </span>
-      <span>
-        {' '}
-        <span className={classes.operators}>
-          IS BETWEEN
+      {displayContent.showRange && (
+        <span>
           {' '}
+          <span className={classes.operators}>
+            IS BETWEEN
+            {' '}
+          </span>
+          <span
+            className={clsx(classes.filterCheckboxes, classes[`facetSection${section}`])}
+            onClick={() => onItemClick(data, items[0])}
+          >
+            {displayContent.rangeText}
+          </span>
         </span>
-        <span
-          className={clsx(classes.filterCheckboxes, classes[`facetSection${section}`])}
-          onClick={() => onItemClick(data, items[0])}
-        >
-          {`${items[0]} – ${items[1]}`}
-        </span>
-      </span>
+      )}
     </span>
   );
 };

package/src/generators/QueryBarGenerator.js

@@ -3,6 +3,7 @@ import { withStyles, Button } from '@material-ui/core';
 import { InputTypes } from '@bento-core/facet-filter';
 import clsx from 'clsx';
 import { Filter } from '../components/FilterMap';
+import QueryUrl from '../components/QueryUrl';
 import DEFAULT_STYLES from './styles';
 import DEFAULT_CONFIG from './config';
 
@@ -13,13 +14,25 @@ import DEFAULT_CONFIG from './config';
  * @returns {object} { QueryBar }
  */
 export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
-  const { config, functions } = uiConfig;
+  const { config, functions, customStyles } = uiConfig;
   const { CHECKBOX } = InputTypes;
 
   const maxItems = config && typeof config.maxItems === 'number'
     ? config.maxItems
     : DEFAULT_CONFIG.config.maxItems;
 
+  const queryURLRootPath = config && typeof config.rootPath === 'string'
+    ? config.rootPath
+    : DEFAULT_CONFIG.config.rootPath;
+
+  const viewQueryURL = config && typeof config.viewQueryURL === 'boolean'
+    ? config.viewQueryURL
+    : DEFAULT_CONFIG.config.viewQueryURL;
+
+  const queryUrlCharacterLimit = config && typeof config.queryUrlCharacterLimit === 'number'
+    ? config.queryUrlCharacterLimit
+    : DEFAULT_CONFIG.config.queryUrlCharacterLimit;
+
   const clearAll = functions && typeof functions.clearAll === 'function'
     ? functions.clearAll
     : DEFAULT_CONFIG.functions.clearAll;
@@ -48,8 +61,13 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
     ? functions.resetFacetSlider
     : DEFAULT_CONFIG.functions.resetFacetSlider;
 
+  const generateUrl = functions && typeof functions.generateUrl === 'function'
+    ? functions.generateUrl
+    : DEFAULT_CONFIG.functions.generateUrl;
+
   return {
-    QueryBar: withStyles(DEFAULT_STYLES, { withTheme: true })((props) => {
+    QueryBar: withStyles(customStyles || DEFAULT_STYLES,
+      { withTheme: true })((props) => {
       const { statusReducer, localFind, classes } = props;
 
       const { autocomplete, upload } = localFind;
@@ -73,7 +91,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
 
           return { ...facet, items: itemKeys };
         })
-        .filter((facet) => facet.items.length > 0);
+        .filter((facet) => facet.items.length > 0 || (facet.unknownAges && facet.unknownAges !== 'include'));
 
       if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
         return null;
@@ -93,70 +111,117 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
           <span className={classes.queryContainer}>
             {/* Local Find Selections */}
             {/* TODO: Refactor this into a separate component */}
-            {(autocomplete.length || upload.length) ? (
-              <span>
-                {/* Standalone case set button */}
-                {(upload.length && !autocomplete.length)
-                  ? (
+            {/* Section: Localfind Results */}
+            {(autocomplete.length || upload.length) > 0 && (
+            <span>
+              {/* Participant ID Section */}
+              {(() => {
+                const participantItems = autocomplete.filter((i) => i.type === 'participantIds');
+                const participantCount = upload.length + participantItems.length;
+
+                if (upload.length > 0 && participantItems.length === 0) {
+                  // Only upload, no participant autocomplete
+                  return (
                     <span
                       className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
                       onClick={clearUpload}
                     >
                       INPUT PARTICIPANT SET
                     </span>
-                  ) : null}
-                {autocomplete.length
-                  ? (
-                    <span>
-                      {' '}
+                  );
+                }
+
+                if (participantCount > 0) {
+                  const operator = participantCount === 1 ? 'IS' : 'IN';
+
+                  return (
+                    <>
                       <span
                         className={clsx(classes.filterName, classes.localFindBackground)}
                         onClick={clearAutocomplete}
                       >
                         Participant ID
                       </span>
-                      {' '}
-                      {' '}
-                      <span className={classes.operators}>
-                        {(autocomplete.length === 1 && !upload.length) ? 'IS ' : 'IN '}
-                      </span>
-                    </span>
-                  ) : null}
-                <span>
-                  {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
-                    ? <span className={classes.bracketsOpen}>(</span>
-                    : null}
-                  {upload.length && autocomplete.length ? (
-                    <>
-                      {' '}
-                      <span
-                        className={clsx(classes.filterCheckboxes, classes.localFind)}
-                        onClick={clearUpload}
-                      >
-                        INPUT PARTICIPANT SET
-                      </span>
-                      {' '}
-                    </>
-                  ) : null}
-                  {autocomplete.slice(0, maxItems).map((d, idx) => (
-                    <>
-                      <span
-                        className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
-                        key={idx}
-                        onClick={() => deleteAutocompleteItem(d.title)}
-                      >
-                        {d.title}
-                      </span>
-                      {idx === (maxItems - 1) ? null : ' '}
+                      <span className={classes.operators}>{operator}</span>
+
+                      {operator === 'IN' && <span className={classes.bracketsOpen}>(</span>}
+
+                      {upload.length > 0 && (
+                      <>
+                        <span
+                          className={clsx(classes.filterCheckboxes, classes.localFind)}
+                          onClick={clearUpload}
+                        >
+                          INPUT PARTICIPANT SET
+                        </span>
+                      </>
+                      )}
+
+                      {participantItems.slice(0, maxItems).map((d, idx, arr) => (
+                        <React.Fragment key={`pid-${idx}`}>
+                          <span
+                            className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
+                            onClick={() => deleteAutocompleteItem(d.title)}
+                          >
+                            {d.title}
+                          </span>
+                          {idx < arr.length - 1 && ' '}
+                        </React.Fragment>
+                      ))}
+                      {participantItems.length > maxItems && '...'}
+                      {operator === 'IN' && <span className={classes.bracketsClose}>)</span>}
                     </>
-                  ))}
-                  {autocomplete.length > maxItems && '...'}
-                  {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
-                    ? <span className={classes.bracketsClose}>)</span>
-                    : null}
-                </span>
-              </span>
-            ) : null}
+                  );
+                }
+
+                return null;
+              })()}
+
+              {/* 'or' logic */}
+              {(upload.length > 0 || autocomplete.some((i) => i.type === 'participantIds'))
+              && autocomplete.some((i) => i.type === 'associatedIds')
+              && (<span className={classes.operators}>OR</span>)}
+
+              {/* Associated ID Section */}
+              {(() => {
+                const associatedItems = autocomplete.filter((i) => i.type === 'associatedIds');
+                if (associatedItems.length === 0) return null;
+
+                const operator = associatedItems.length === 1 ? 'IS' : 'IN';
+
+                return (
+                  <>
+                    <span
+                      className={clsx(classes.filterName, classes.localFindAssociatedIdsBackground)}
+                      onClick={clearAutocomplete}
+                    >
+                      Synonym
+                    </span>
+                    <span className={classes.operators}>{operator}</span>
+                    {operator === 'IN' && <span className={classes.bracketsOpen}>(</span>}
+
+                    {associatedItems.slice(0, maxItems).map((d, idx, arr) => (
+                      <React.Fragment key={`aid-${idx}`}>
+                        <span
+                          className={
+                            clsx(classes.filterCheckboxes, classes.localFindAssociatedIdsText)
+                          }
+                          onClick={() => deleteAutocompleteItem(d.title)}
+                        >
+                          {d.synonym}
+                        </span>
+                        {idx < arr.length - 1 && ' '}
+                      </React.Fragment>
+                    ))}
+                    {associatedItems.length > maxItems && '...'}
+                    {operator === 'IN' && <span className={classes.bracketsClose}>)</span>}
+                  </>
+                );
+              })()}
+            </span>
+            )}
+
+            {/* --------------------- */}
 
             {/* Facet Sidebar Selections */}
             {((autocomplete.length || upload.length) && mappedInputs.length)
@@ -178,6 +243,18 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
               />
             ))}
           </span>
+          {
+            (viewQueryURL && queryURLRootPath) && (
+              <QueryUrl
+                classes={classes}
+                localFind={localFind}
+                filterItems={mappedInputs}
+                rootPath={queryURLRootPath}
+                queryUrlCharacterLimit={queryUrlCharacterLimit}
+                generateUrl={generateUrl}
+              />
+            )
+          }
         </div>
       );
     }),

package/src/generators/config.js

@@ -9,6 +9,22 @@ export default {
     maxItems: 2,
   },
 
+  /**
+   * set root path for copy url
+   * @var {boolean}
+   */
+  rootPath: `${window.location.href}/`,
+  /**
+   * display copy url button
+   * @var {boolean}
+   */
+  viewQueryURL: false,
+  /**
+   * display copy url button
+   * @var {boolean}
+   */
+  queryUrlCharacterLimit: 70,
+
   /* Component Helper Functions */
   functions: {
     /**
@@ -64,5 +80,15 @@ export default {
      * @returns {void}
      */
     resetFacetSlider: (section) => {},
+
+    /**
+     * Generate a query URL by calling the interop service
+     *
+     * @param {string} queryStr the query string to encode
+     * @param {string} root the root path for the URL
+     * @param {function} setUrlCallback callback function to set the generated URL
+     * @returns {Promise<void>}
+     */
+    generateUrl: async (queryStr, root, setUrlCallback) => {},
   },
 };

package/src/generators/styles.js

@@ -147,4 +147,10 @@ export default () => ({
     backgroundColor: '#DDEAE540',
     border: '1px solid #646464',
   },
+  localFindAssociatedIdsBackground: {
+    backgroundColor: '#F6A700',
+  },
+  localFindAssociatedIdsText: {
+    color: '#B36B00',
+  },
 });