@bento-core/query-bar 1.0.0-c3dc.7 → 1.0.0-c3dc.9

package/dist/components/QueryUrl.js

@@ -22,7 +22,8 @@ const QueryUrl = _ref => {
     filterItems,
     localFind = {},
     rootPath,
-    queryUrlCharacterLimit = 70
+    queryUrlCharacterLimit = 70,
+    generateUrl
   } = _ref;
   const [display, setDisplay] = (0, _react.useState)(false);
   const toggleDisplay = () => setDisplay(prevDisplay => !prevDisplay);
@@ -36,13 +37,18 @@ const QueryUrl = _ref => {
     acc[datafield] = items;
     return acc;
   }, {});
-  const query = JSON.stringify(_objectSpread(_objectSpread({}, pathFilterParams), localFind));
-  const url = rootPath.slice(0, -1).concat("?filterQuery=".concat(encodeURIComponent(query)));
+  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

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

@@ -45,6 +45,7 @@ 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)(customStyles || _styles.default, {
       withTheme: true
@@ -81,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;
       }
@@ -164,7 +165,8 @@ const QueryBarGenerator = function QueryBarGenerator() {
         localFind: localFind,
         filterItems: mappedInputs,
         rootPath: queryURLRootPath,
-        queryUrlCharacterLimit: queryUrlCharacterLimit
+        queryUrlCharacterLimit: queryUrlCharacterLimit,
+        generateUrl: generateUrl
       }));
     })
   };

package/dist/generators/config.js

@@ -77,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.0-c3dc.7",
+  "version": "1.0.0-c3dc.9",
   "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.1-c3dc.3",
+    "@bento-core/facet-filter": "^1.0.1-c3dc.9",
     "lodash": "^4.17.20"
   },
   "author": "CTOS Bento Team",

package/src/components/QueryUrl.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import {
   Button,
@@ -18,6 +18,7 @@ const QueryUrl = ({
   localFind = {},
   rootPath,
   queryUrlCharacterLimit = 70,
+  generateUrl,
 }) => {
   const [display, setDisplay] = useState(false);
   const toggleDisplay = () => setDisplay((prevDisplay) => !prevDisplay);
@@ -31,11 +32,11 @@ const QueryUrl = ({
     return acc;
   }, {});
 
-  const query = JSON.stringify({
+  const queryString = JSON.stringify({
     ...pathFilterParams,
     ...localFind,
   });
-  const url = rootPath.slice(0, -1).concat(`?filterQuery=${encodeURIComponent(query)}`);
+  const [url, setUrl] = useState('');
 
   const copyUrl = async () => {
     toggleOpen();
@@ -44,6 +45,12 @@ const QueryUrl = ({
 
   const queryRef = useRef(null);
 
+  useEffect(() => {
+    if (display && generateUrl) {
+      generateUrl(queryString, rootPath, setUrl);
+    }
+  }, [display]);
+
   return (
     <>
       <div ref={queryRef} className={classes.urlContainer}>

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

@@ -61,6 +61,10 @@ 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(customStyles || DEFAULT_STYLES,
       { withTheme: true })((props) => {
@@ -87,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;
@@ -247,6 +251,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                 filterItems={mappedInputs}
                 rootPath={queryURLRootPath}
                 queryUrlCharacterLimit={queryUrlCharacterLimit}
+                generateUrl={generateUrl}
               />
             )
           }

package/src/generators/config.js

@@ -80,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) => {},
   },
 };