@bento-core/facet-filter 1.0.1-ccdihub.36 → 1.0.1-ccdihub.38

package/dist/components/facet/NewFacetStyle.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _Search_Icon = _interopRequireDefault(require("./assets/Search_Icon.svg"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = () => ({
   expansionPanelDetailsRoot: {
     display: 'block'
@@ -21,7 +19,6 @@ var _default = () => ({
   },
   subSectionSummaryText: {
     marginLeft: '10px',
-    lineHeight: 0,
     color: '#323232',
     fontFamily: 'Raleway',
     fontSize: '13px',
@@ -64,10 +61,7 @@ var _default = () => ({
   sortGroupItemCounts: {
     cursor: 'pointer',
     fontFamily: 'Nunito',
-    fontSize: '10px',
-    float: 'right',
-    marginRight: '10px',
-    marginTop: '5px'
+    fontSize: '10px'
   },
   highlight: {
     color: '#b2c6d6'
@@ -85,19 +79,18 @@ var _default = () => ({
     position: 'relative'
   },
   searchBox: {
-    fontSize: '11px',
+    fontSize: '14px',
     fontFamily: 'Nunito',
     width: 'calc(100% - 26px)',
     height: '30px',
     marginTop: '12px',
     borderRadius: '5px',
-    background: "url(".concat(_Search_Icon.default, ") right 5px center no-repeat"),
     marginLeft: '6px',
     border: '1px solid',
     padding: '5px'
   },
   searchBoxWithText: {
-    fontSize: '11px',
+    fontSize: '14px',
     fontFamily: 'Nunito',
     width: 'calc(100% - 26px)',
     height: '30px',
@@ -108,23 +101,38 @@ var _default = () => ({
     padding: '5px'
   },
   expandedDisplayButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     backgroundColor: '#4D889E !important',
     color: 'white',
     width: 'calc(100% - 26px)',
     height: '30px',
     marginBottom: '5px',
     marginLeft: '6px',
+    padding: '6px 11px',
     borderRadius: '5px',
-    fontSize: '12px',
+    fontFamily: 'Nunito',
+    fontSize: '11px',
     fontWeight: '600',
     top: '8px'
   },
+  expandedDisplayCount: {
+    marginLeft: '4px',
+    fontFamily: 'Nunito',
+    fontSize: '11px',
+    fontWeight: '600',
+    lineHeight: '17px',
+    color: '#ffffff',
+    backgroundColor: '#5D98AE',
+    padding: '1px 2px'
+  },
   clearTextButton: {
     padding: '0px',
     height: '20px',
     position: 'absolute',
     right: '14px',
-    top: '14px'
+    top: '16px'
   },
   timeUnitToggle: {
     marginLeft: '8px',

package/dist/components/facet/NewFacetView.js

@@ -171,14 +171,14 @@ const NewFacetView = _ref => {
     onClick: () => {
       onSortFacet(_Sort.sortType.ALPHABET);
     }
-  }, "Sort alphabetically"), /*#__PURE__*/_react.default.createElement("span", {
+  }, "Sort Alphabetically"), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _clsx.default)(classes.sortGroupItemCounts, {
       [classes.highlight]: sortBy === _Sort.sortType.NUMERIC
     }),
     onClick: () => {
       onSortFacet(_Sort.sortType.NUMERIC);
     }
-  }, "Sort by count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
+  }, "Sort by Count"))), /*#__PURE__*/_react.default.createElement(_FilterItems.default, {
     facet: facet,
     queryParams: queryParams,
     sortBy: sortBy,

package/dist/components/facet/NewSearchFacetView.js

@@ -151,7 +151,7 @@ const SearchFacetView = _ref => {
     className: searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox,
     value: searchText,
     type: "text",
-    placeholder: "e.g. Sarcoma, Neoplasm",
+    placeholder: "e.g. Sarcoma, Neoplasm, phs087...",
     onChange: e => onSearchTextChange(facet.datafield, e.target.value)
   }), searchText && searchText.trim() !== '' && /*#__PURE__*/_react.default.createElement(_core.IconButton, {
     "aria-label": "close",
@@ -171,7 +171,9 @@ const SearchFacetView = _ref => {
     variant: "text",
     className: classes.expandedDisplayButton,
     onClick: () => setOpen(!open)
-  }, "VIEW EXPANDED DISPLAY (".concat(checkedItems.length + newUncheckedFullList.length, ")")))), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, "VIEW EXPANDED DISPLAY", /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.expandedDisplayCount
+  }, "".concat(checkedItems.length + newUncheckedFullList.length))))), facetValues.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: classes.sortGroup
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: classes.sortGroupIcon
@@ -192,14 +194,14 @@ const SearchFacetView = _ref => {
     onClick: () => {
       onSortChange(facet.datafield, _Sort.sortType.ALPHABET);
     }
-  }, "Sort alphabetically"), /*#__PURE__*/_react.default.createElement("span", {
+  }, "Sort Alphabetically"), /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _clsx.default)(classes.sortGroupItemCounts, {
       [classes.highlight]: sortBy === _Sort.sortType.NUMERIC
     }),
     onClick: () => {
       onSortChange(facet.datafield, _Sort.sortType.NUMERIC);
     }
-  }, "Sort by count")), /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
+  }, "Sort by Count")), /*#__PURE__*/_react.default.createElement(_SearchFilterItems.default, {
     searchText: searchText,
     facet: facet,
     queryParams: queryParams,

package/dist/components/inputs/FilterItemStyle.js

@@ -37,8 +37,8 @@ var _default = () => ({
     maxHeight: '400px',
     overflowY: 'auto',
     overflowX: 'hidden',
-    borderTop: '2px solid #AEAEAE',
-    borderBottom: '2px solid #AEAEAE',
+    borderTop: '1px solid #AEAEAE',
+    borderBottom: '1px solid #AEAEAE',
     marginRight: '-1px',
     '&::-webkit-scrollbar': {
       width: '12px',

package/dist/components/inputs/checkbox/CheckboxStyle.js

@@ -30,11 +30,11 @@ var _default = () => ({
   checkboxName: {
     margin: '0',
     color: '#000000',
-    fontSize: '16px',
+    fontSize: '15px',
     fontWeight: 300,
     marginTop: '1.5px',
     fontFamily: 'Nunito',
-    lineHeight: '120%'
+    lineHeight: '16px'
   }
 });
 exports.default = _default;

package/dist/components/inputs/checkbox/CheckboxView.js

@@ -135,11 +135,11 @@ const CheckBoxView = _ref => {
       ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
       ["".concat(checkedSection, "SubjectChecked")]: isChecked
     })
-  }, "(".concat(subjects.toLocaleString(), ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
+  }, "".concat(subjects.toLocaleString()))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
     style: {
-      backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
+      backgroundColor: isChecked ? '#AEAEAE' : '#B1B1B1',
       margin: '0px',
-      height: isChecked ? '2px' : '1px'
+      height: isChecked ? '0.5px' : '0.5px'
     }
   }));
 };

package/dist/components/inputs/checkbox/SearchCheckboxView.js

@@ -135,11 +135,11 @@ const CheckBoxView = _ref => {
       ["".concat(checkedSection, "SubjectUnChecked")]: !isChecked,
       ["".concat(checkedSection, "SubjectChecked")]: isChecked
     })
-  }, "(".concat(subjects.toLocaleString(), ")"))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
+  }, "".concat(subjects.toLocaleString()))), /*#__PURE__*/_react.default.createElement(_core.Divider, {
     style: {
-      backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
+      backgroundColor: isChecked ? '#AEAEAE' : '#B1B1B1',
       margin: '0px',
-      height: isChecked ? '2px' : '1px'
+      height: isChecked ? '0.5px' : '0.5px'
     }
   }));
 };

package/dist/components/inputs/checkbox/assets/checkedbox.svg

@@ -1,4 +1,4 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="14" height="14" fill="#6D5F5B"/>
+<rect width="14" height="14" fill="#477C90"/>
 <path d="M3 6.52174L4.95652 10L12 2" stroke="white" stroke-width="2"/>
 </svg>

package/dist/components/inputs/slider/SliderView.js

@@ -110,12 +110,17 @@ const SliderView = _ref => {
   };
   const [sliderValue, setSliderValue] = (0, _react.useState)([getDisplayValue(lowerBoundValue), getDisplayValue(upperBoundValue)]);
   (0, _react.useEffect)(() => {
+    // Don't reset slider values if "Only" is selected - preserve current values
+    if (unknownAges === 'only') {
+      return; // Keep current slider values
+    }
+
     if (filterState && datafield && filterState[datafield]) {
       setSliderValue([getDisplayValue(filterState[datafield][0]), getDisplayValue(filterState[datafield][1])]);
     } else {
       setSliderValue([getDisplayValue(minLowerBound), getDisplayValue(maxUpperBound)]);
     }
-  }, [facet, timeUnit]);
+  }, [facet, timeUnit, unknownAges]);
   const handleChangeSlider = (index, value) => {
     if (!value.includes('')) {
       setSliderValue([...value]);
@@ -134,14 +139,26 @@ const SliderView = _ref => {
       const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
       navigate("/explore".concat(queryStr));
 
-      // Reset slider to default values for display
-      const defaultValues = [getDisplayValue(minLowerBound), getDisplayValue(maxUpperBound)];
-      setSliderValue(defaultValues);
+      // Keep the current slider values for display (don't reset to defaults)
+      // The slider will be disabled but show the user's previous selection
+      // setSliderValue remains unchanged - keep current values
 
-      // Clear the slider state in the parent component
+      // Clear the slider state in the parent component (don't use age range in query)
       onSliderToggle(_objectSpread({
         sliderValue: []
       }, facet));
+    } else if (unknownAges === 'only' && newUnknownAges !== 'only') {
+      // When switching away from "only", restore the slider values to the query
+      const currentSliderValues = [convertToDays(sliderValue[0]), convertToDays(sliderValue[1])];
+      const paramValue = {};
+      paramValue[datafield] = currentSliderValues;
+      const queryStr = (0, _util.generateQueryStr)(query, queryParams, paramValue);
+      navigate("/explore".concat(queryStr));
+
+      // Restore the slider state in the parent component
+      onSliderToggle(_objectSpread({
+        sliderValue: currentSliderValues
+      }, facet));
     }
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-ccdihub.36",
+  "version": "1.0.1-ccdihub.38",
   "description": "### Bento core sidebar design:",
   "main": "dist/index.js",
   "scripts": {

package/src/components/facet/NewFacetStyle.js

@@ -1,5 +1,3 @@
-import SearchIcon from './assets/Search_Icon.svg';
-
 export default () => ({
   expansionPanelDetailsRoot: {
     display: 'block',
@@ -15,7 +13,6 @@ export default () => ({
   },
   subSectionSummaryText: {
     marginLeft: '10px',
-    lineHeight: 0,
     color: '#323232',
     fontFamily: 'Raleway',
     fontSize: '13px',
@@ -59,9 +56,6 @@ export default () => ({
     cursor: 'pointer',
     fontFamily: 'Nunito',
     fontSize: '10px',
-    float: 'right',
-    marginRight: '10px',
-    marginTop: '5px',
   },
   highlight: {
     color: '#b2c6d6',
@@ -79,19 +73,18 @@ export default () => ({
     position: 'relative',
   },
   searchBox: {
-    fontSize: '11px',
+    fontSize: '14px',
     fontFamily: 'Nunito',
     width: 'calc(100% - 26px)',
     height: '30px',
     marginTop: '12px',
     borderRadius: '5px',
-    background: `url(${SearchIcon}) right 5px center no-repeat`,
     marginLeft: '6px',
     border: '1px solid',
     padding: '5px',
   },
   searchBoxWithText: {
-    fontSize: '11px',
+    fontSize: '14px',
     fontFamily: 'Nunito',
     width: 'calc(100% - 26px)',
     height: '30px',
@@ -102,23 +95,38 @@ export default () => ({
     padding: '5px',
   },
   expandedDisplayButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     backgroundColor: '#4D889E !important',
     color: 'white',
     width: 'calc(100% - 26px)',
     height: '30px',
     marginBottom: '5px',
     marginLeft: '6px',
+    padding: '6px 11px',
     borderRadius: '5px',
-    fontSize: '12px',
+    fontFamily: 'Nunito',
+    fontSize: '11px',
     fontWeight: '600',
     top: '8px',
   },
+  expandedDisplayCount: {
+    marginLeft: '4px',
+    fontFamily: 'Nunito',
+    fontSize: '11px',
+    fontWeight: '600',
+    lineHeight: '17px',
+    color: '#ffffff',
+    backgroundColor: '#5D98AE',
+    padding: '1px 2px',
+  },
   clearTextButton: {
     padding: '0px',
     height: '20px',
     position: 'absolute',
     right: '14px',
-    top: '14px',
+    top: '16px',
   },
   timeUnitToggle: {
     marginLeft: '8px',

package/src/components/facet/NewFacetView.js

@@ -209,7 +209,7 @@ const NewFacetView = ({
                 onSortFacet(sortType.ALPHABET);
               }}
             >
-              Sort alphabetically
+              Sort Alphabetically
             </span>
             <span
               className={
@@ -221,7 +221,7 @@ const NewFacetView = ({
                 onSortFacet(sortType.NUMERIC);
               }}
             >
-              Sort by count
+              Sort by Count
             </span>
           </>
           )}

package/src/components/facet/NewSearchFacetView.js

@@ -178,7 +178,7 @@ const SearchFacetView = ({
                   className={searchText && searchText.trim() !== '' ? classes.searchBoxWithText : classes.searchBox}
                   value={searchText}
                   type="text"
-                  placeholder="e.g. Sarcoma, Neoplasm"
+                  placeholder="e.g. Sarcoma, Neoplasm, phs087..."
                   onChange={(e) => onSearchTextChange(facet.datafield, e.target.value)}
                 />
                 {
@@ -203,7 +203,8 @@ const SearchFacetView = ({
               </div>
               <div className={classes.searchContainer}>
                 <Button variant="text" className={classes.expandedDisplayButton} onClick={() => setOpen(!open)}>
-                  {`VIEW EXPANDED DISPLAY (${checkedItems.length + newUncheckedFullList.length})`}
+                  VIEW EXPANDED DISPLAY
+                  <span className={classes.expandedDisplayCount}>{`${checkedItems.length + newUncheckedFullList.length}`}</span>
                 </Button>
               </div>
             </>
@@ -237,7 +238,7 @@ const SearchFacetView = ({
                     onSortChange(facet.datafield, sortType.ALPHABET);
                   }}
                 >
-                  Sort alphabetically
+                  Sort Alphabetically
                 </span>
                 <span
                   className={
@@ -249,7 +250,7 @@ const SearchFacetView = ({
                     onSortChange(facet.datafield, sortType.NUMERIC);
                   }}
                 >
-                  Sort by count
+                  Sort by Count
                 </span>
               </div>
               <SearchFilterItems

package/src/components/inputs/FilterItemStyle.js

@@ -31,8 +31,8 @@ export default () => ({
     maxHeight: '400px',
     overflowY: 'auto',
     overflowX: 'hidden',
-    borderTop: '2px solid #AEAEAE',
-    borderBottom: '2px solid #AEAEAE',
+    borderTop: '1px solid #AEAEAE',
+    borderBottom: '1px solid #AEAEAE',
     marginRight: '-1px',
     '&::-webkit-scrollbar': {
       width: '12px',

package/src/components/inputs/checkbox/CheckboxStyle.js

@@ -24,10 +24,10 @@ export default () => ({
   checkboxName: {
     margin: '0',
     color: '#000000',
-    fontSize: '16px',
+    fontSize: '15px',
     fontWeight: 300,
     marginTop: '1.5px',
     fontFamily: 'Nunito',
-    lineHeight: '120%',
+    lineHeight: '16px',
   },
 });

package/src/components/inputs/checkbox/CheckboxView.js

@@ -162,14 +162,14 @@ const CheckBoxView = ({
             [`${checkedSection}SubjectChecked`]: isChecked,
           })}
         >
-          {`(${subjects.toLocaleString()})`}
+          {`${subjects.toLocaleString()}`}
         </Typography>
       </ListItem>
       <Divider
         style={{
-          backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
+          backgroundColor: isChecked ? '#AEAEAE' : '#B1B1B1',
           margin: '0px',
-          height: isChecked ? '2px' : '1px',
+          height: isChecked ? '0.5px' : '0.5px',
         }}
       />
     </>

package/src/components/inputs/checkbox/SearchCheckboxView.js

@@ -162,14 +162,14 @@ const CheckBoxView = ({
             [`${checkedSection}SubjectChecked`]: isChecked,
           })}
         >
-          {`(${subjects.toLocaleString()})`}
+          {`${subjects.toLocaleString()}`}
         </Typography>
       </ListItem>
       <Divider
         style={{
-          backgroundColor: isChecked ? '#FFFFFF' : '#b1b1b1',
+          backgroundColor: isChecked ? '#AEAEAE' : '#B1B1B1',
           margin: '0px',
-          height: isChecked ? '2px' : '1px',
+          height: isChecked ? '0.5px' : '0.5px',
         }}
       />
     </>

package/src/components/inputs/checkbox/assets/checkedbox.svg

@@ -1,4 +1,4 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="14" height="14" fill="#6D5F5B"/>
+<rect width="14" height="14" fill="#477C90"/>
 <path d="M3 6.52174L4.95652 10L12 2" stroke="white" stroke-width="2"/>
 </svg>

package/src/components/inputs/slider/SliderView.js

@@ -115,6 +115,11 @@ const SliderView = ({
     getDisplayValue(upperBoundValue),
   ]);
   useEffect(() => {
+    // Don't reset slider values if "Only" is selected - preserve current values
+    if (unknownAges === 'only') {
+      return; // Keep current slider values
+    }
+
     if (filterState && datafield && filterState[datafield]) {
       setSliderValue([
         getDisplayValue(filterState[datafield][0]),
@@ -123,7 +128,7 @@ const SliderView = ({
     } else {
       setSliderValue([getDisplayValue(minLowerBound), getDisplayValue(maxUpperBound)]);
     }
-  }, [facet, timeUnit]);
+  }, [facet, timeUnit, unknownAges]);
 
   const handleChangeSlider = (index, value) => {
     if (!value.includes('')) {
@@ -145,12 +150,22 @@ const SliderView = ({
       const queryStr = generateQueryStr(query, queryParams, paramValue);
       navigate(`/explore${queryStr}`);
 
-      // Reset slider to default values for display
-      const defaultValues = [getDisplayValue(minLowerBound), getDisplayValue(maxUpperBound)];
-      setSliderValue(defaultValues);
+      // Keep the current slider values for display (don't reset to defaults)
+      // The slider will be disabled but show the user's previous selection
+      // setSliderValue remains unchanged - keep current values
 
-      // Clear the slider state in the parent component
+      // Clear the slider state in the parent component (don't use age range in query)
       onSliderToggle({ sliderValue: [], ...facet });
+    } else if (unknownAges === 'only' && newUnknownAges !== 'only') {
+      // When switching away from "only", restore the slider values to the query
+      const currentSliderValues = [convertToDays(sliderValue[0]), convertToDays(sliderValue[1])];
+      const paramValue = {};
+      paramValue[datafield] = currentSliderValues;
+      const queryStr = generateQueryStr(query, queryParams, paramValue);
+      navigate(`/explore${queryStr}`);
+
+      // Restore the slider state in the parent component
+      onSliderToggle({ sliderValue: currentSliderValues, ...facet });
     }
   };