@bento-core/facet-filter 1.0.1-ccdihub.37 → 1.0.1-ccdihub.39

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

@@ -36,10 +36,27 @@ const NewFacetView = _ref => {
     queryParams,
     timeUnitState,
     onTimeUnitChange,
-    unknownAgesState
+    unknownAgesState,
+    expandState,
+    onToggleFacetExpand
   } = _ref;
-  const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
-  const onExpandFacet = () => setExpand(!expand);
+  const expand = expandState[facet.datafield] !== undefined ? expandState[facet.datafield] : facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false;
+  const isUserInitiated = (0, _react.useRef)(false);
+  const prevExpandRef = (0, _react.useRef)(expand);
+  (0, _react.useEffect)(() => {
+    prevExpandRef.current = expand;
+    // Reset flag after render
+    if (isUserInitiated.current) {
+      setTimeout(() => {
+        isUserInitiated.current = false;
+      }, 0);
+    }
+  }, [expand]);
+  const onExpandFacet = () => {
+    isUserInitiated.current = true;
+    const newExpandState = !expand;
+    onToggleFacetExpand(facet.datafield, newExpandState);
+  };
   const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   const navigate = (0, _reactRouterDom.useNavigate)();
 
@@ -114,7 +131,11 @@ const NewFacetView = _ref => {
     classes: {
       root: classes.expansionPanelsideBarItem
     },
-    id: facet.section
+    id: facet.section,
+    TransitionProps: {
+      // Disable animation if change is not user-initiated
+      timeout: isUserInitiated.current ? undefined : 0
+    }
   }, CustomView ? /*#__PURE__*/_react.default.createElement(CustomView, {
     facet: facet,
     facetClasses: isActiveFacet ? "activeFacet".concat(facet.section) : "inactiveFacet".concat(facet.section)
@@ -171,14 +192,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

@@ -58,11 +58,28 @@ const SearchFacetView = _ref => {
     onSortChange,
     CustomView,
     queryParams,
-    unknownAgesState
+    unknownAgesState,
+    expandState,
+    onToggleFacetExpand
   } = _ref;
-  const [expand, setExpand] = (0, _react.useState)(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
+  const expand = expandState[facet.datafield] !== undefined ? expandState[facet.datafield] : facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false;
+  const isUserInitiated = (0, _react.useRef)(false);
+  const prevExpandRef = (0, _react.useRef)(expand);
+  (0, _react.useEffect)(() => {
+    prevExpandRef.current = expand;
+    // Reset flag after render
+    if (isUserInitiated.current) {
+      setTimeout(() => {
+        isUserInitiated.current = false;
+      }, 0);
+    }
+  }, [expand]);
+  const onExpandFacet = () => {
+    isUserInitiated.current = true;
+    const newExpandState = !expand;
+    onToggleFacetExpand(facet.datafield, newExpandState);
+  };
   const [open, setOpen] = (0, _react.useState)(false);
-  const onExpandFacet = () => setExpand(!expand);
   const query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   const navigate = (0, _reactRouterDom.useNavigate)();
   const onClearSection = () => {
@@ -132,7 +149,11 @@ const SearchFacetView = _ref => {
     classes: {
       root: classes.expansionPanelsideBarItem
     },
-    id: facet.section
+    id: facet.section,
+    TransitionProps: {
+      // Disable animation if change is not user-initiated
+      timeout: isUserInitiated.current ? undefined : 0
+    }
   }, CustomView ? /*#__PURE__*/_react.default.createElement(CustomView, {
     facet: facet,
     facetClasses: isActiveFacet ? "activeFacet".concat(facet.section) : "inactiveFacet".concat(facet.section)
@@ -151,7 +172,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 +192,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 +215,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/facet/ReduxNewFacetView.js

@@ -11,10 +11,11 @@ var _NewFacetView = _interopRequireDefault(require("./NewFacetView"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ReduxNewFacetView = props => /*#__PURE__*/_react.default.createElement(_NewFacetView.default, props);
 const mapStateToProps = state => {
-  var _state$statusReducer, _state$statusReducer2;
+  var _state$statusReducer, _state$statusReducer2, _state$statusReducer3;
   return {
     timeUnitState: (state === null || state === void 0 ? void 0 : (_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.timeUnitState) || {},
-    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer2 = state.statusReducer) === null || _state$statusReducer2 === void 0 ? void 0 : _state$statusReducer2.unknownAgesState) || {}
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer2 = state.statusReducer) === null || _state$statusReducer2 === void 0 ? void 0 : _state$statusReducer2.unknownAgesState) || {},
+    expandState: (state === null || state === void 0 ? void 0 : (_state$statusReducer3 = state.statusReducer) === null || _state$statusReducer3 === void 0 ? void 0 : _state$statusReducer3.expandState) || {}
   };
 };
 const mapDispatchToProps = dispatch => ({
@@ -29,6 +30,9 @@ const mapDispatchToProps = dispatch => ({
   },
   onUnknownAgesChange: (datafield, unknownAges) => {
     dispatch((0, _Actions.unknownAgesChange)(datafield, unknownAges));
+  },
+  onToggleFacetExpand: (datafield, expanded) => {
+    dispatch((0, _Actions.toggleFacetExpand)(datafield, expanded));
   }
 });
 var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxNewFacetView);

package/dist/components/facet/ReduxNewSearchFacetView.js

@@ -13,11 +13,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const ReduxNewSearchFacetView = props => /*#__PURE__*/_react.default.createElement(_NewSearchFacetView.default, props);
 const mapStateToProps = (state, ownProps) => {
-  var _state$statusReducer, _state$statusReducer2;
+  var _state$statusReducer, _state$statusReducer2, _state$statusReducer3;
   return {
     searchText: ((_state$statusReducer = state.statusReducer) === null || _state$statusReducer === void 0 ? void 0 : _state$statusReducer.searchState[ownProps.facet.datafield]) || '',
     sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null,
-    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer2 = state.statusReducer) === null || _state$statusReducer2 === void 0 ? void 0 : _state$statusReducer2.unknownAgesState) || {}
+    unknownAgesState: (state === null || state === void 0 ? void 0 : (_state$statusReducer2 = state.statusReducer) === null || _state$statusReducer2 === void 0 ? void 0 : _state$statusReducer2.unknownAgesState) || {},
+    expandState: (state === null || state === void 0 ? void 0 : (_state$statusReducer3 = state.statusReducer) === null || _state$statusReducer3 === void 0 ? void 0 : _state$statusReducer3.expandState) || {}
   };
 };
 const mapDispatchToProps = dispatch => ({
@@ -35,6 +36,9 @@ const mapDispatchToProps = dispatch => ({
   },
   onUnknownAgesChange: (datafield, unknownAges) => {
     dispatch((0, _Actions.unknownAgesChange)(datafield, unknownAges));
+  },
+  onToggleFacetExpand: (datafield, expanded) => {
+    dispatch((0, _Actions.toggleFacetExpand)(datafield, expanded));
   }
 });
 var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(ReduxNewSearchFacetView);

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/store/actions/ActionTypes.js

@@ -15,7 +15,8 @@ const sideBarActionTypes = {
   SORT_CHANGED: 'SORT_CHANGED',
   UPDATE_FILTER_STATE: 'UPDATE_FILTER_STATE',
   TIME_UNIT_CHANGED: 'TIME_UNIT_CHANGED',
-  UNKNOWN_AGES_CHANGED: 'UNKNOWN_AGES_CHANGED'
+  UNKNOWN_AGES_CHANGED: 'UNKNOWN_AGES_CHANGED',
+  TOGGLE_FACET_EXPAND: 'TOGGLE_FACET_EXPAND'
 };
 exports.sideBarActionTypes = sideBarActionTypes;
 const Actions = '';

package/dist/store/actions/Actions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateFilterState = exports.unknownAgesChange = exports.toggleSilder = exports.toggleCheckBox = exports.timeUnitChange = exports.sortChange = exports.searchTextChange = exports.clearSliderSection = exports.clearFacetSection = exports.clearAllFilters = exports.clearAllAndSelectFacet = void 0;
+exports.updateFilterState = exports.unknownAgesChange = exports.toggleSilder = exports.toggleFacetExpand = exports.toggleCheckBox = exports.timeUnitChange = exports.sortChange = exports.searchTextChange = exports.clearSliderSection = exports.clearFacetSection = exports.clearAllFilters = exports.clearAllAndSelectFacet = void 0;
 var _ActionTypes = require("./ActionTypes");
 const toggleCheckBox = toggleCheckBoxItem => ({
   type: _ActionTypes.sideBarActionTypes.FACET_VALUE_CHANGED,
@@ -74,4 +74,12 @@ const unknownAgesChange = (datafield, unknownAges) => ({
     unknownAges
   }
 });
-exports.unknownAgesChange = unknownAgesChange;
+exports.unknownAgesChange = unknownAgesChange;
+const toggleFacetExpand = (datafield, expanded) => ({
+  type: _ActionTypes.sideBarActionTypes.TOGGLE_FACET_EXPAND,
+  payload: {
+    datafield,
+    expanded
+  }
+});
+exports.toggleFacetExpand = toggleFacetExpand;

package/dist/store/reducers/SideBarReducer.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.onUnknownAgesChange = exports.onToggleStateUpdate = exports.onTimeUnitChange = exports.onSortChange = exports.onSearchTextChange = exports.onClearSliderSection = exports.onClearFacetSection = void 0;
+exports.onUnknownAgesChange = exports.onToggleStateUpdate = exports.onToggleFacetExpand = exports.onTimeUnitChange = exports.onSortChange = exports.onSearchTextChange = exports.onClearSliderSection = exports.onClearFacetSection = void 0;
 exports.sideBarReducerGenerator = sideBarReducerGenerator;
 exports.updateSiderValue = void 0;
 var _ActionTypes = require("../actions/ActionTypes");
@@ -16,8 +16,10 @@ const initFilterState = {
   searchState: {},
   sortState: {},
   timeUnitState: {},
-  unknownAgesState: {}
+  unknownAgesState: {},
+  expandState: {} // Add this line
 };
+
 const onToggleStateUpdate = _ref => {
   let {
     filterState,
@@ -122,6 +124,17 @@ const onUnknownAgesChange = _ref8 => {
   return updatedState;
 };
 exports.onUnknownAgesChange = onUnknownAgesChange;
+const onToggleFacetExpand = _ref9 => {
+  let {
+    datafield,
+    expanded,
+    expandState
+  } = _ref9;
+  const updatedState = _objectSpread({}, expandState);
+  updatedState[datafield] = expanded;
+  return updatedState;
+};
+exports.onToggleFacetExpand = onToggleFacetExpand;
 function sideBarReducerGenerator() {
   return {
     actionTypes: _ActionTypes.sideBarActionTypes,
@@ -196,6 +209,11 @@ function sideBarReducerGenerator() {
           return _objectSpread(_objectSpread({}, state), {}, {
             unknownAgesState: _objectSpread({}, updateState)
           });
+        case _ActionTypes.sideBarActionTypes.TOGGLE_FACET_EXPAND:
+          updateState = onToggleFacetExpand(_objectSpread(_objectSpread({}, payload), state));
+          return _objectSpread(_objectSpread({}, state), {}, {
+            expandState: _objectSpread({}, updateState)
+          });
         default:
           return state;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/facet-filter",
-  "version": "1.0.1-ccdihub.37",
+  "version": "1.0.1-ccdihub.39",
   "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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
   useLocation,
   useNavigate,
@@ -31,9 +31,30 @@ const NewFacetView = ({
   timeUnitState,
   onTimeUnitChange,
   unknownAgesState,
+  expandState,
+  onToggleFacetExpand,
 }) => {
-  const [expand, setExpand] = useState(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
-  const onExpandFacet = () => setExpand(!expand);
+  const expand = expandState[facet.datafield] !== undefined ? expandState[facet.datafield] : (facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
+
+  const isUserInitiated = useRef(false);
+  const prevExpandRef = useRef(expand);
+
+  useEffect(() => {
+    prevExpandRef.current = expand;
+    // Reset flag after render
+    if (isUserInitiated.current) {
+      setTimeout(() => {
+        isUserInitiated.current = false;
+      }, 0);
+    }
+  }, [expand]);
+
+  const onExpandFacet = () => {
+    isUserInitiated.current = true;
+    const newExpandState = !expand;
+    onToggleFacetExpand(facet.datafield, newExpandState);
+  };
+
   const query = new URLSearchParams(useLocation().search);
   const navigate = useNavigate();
 
@@ -110,6 +131,10 @@ const NewFacetView = ({
           root: classes.expansionPanelsideBarItem,
         }}
         id={facet.section}
+        TransitionProps={{
+          // Disable animation if change is not user-initiated
+          timeout: isUserInitiated.current ? undefined : 0,
+        }}
       >
         { CustomView ? (
           <CustomView
@@ -209,7 +234,7 @@ const NewFacetView = ({
                 onSortFacet(sortType.ALPHABET);
               }}
             >
-              Sort alphabetically
+              Sort Alphabetically
             </span>
             <span
               className={
@@ -221,7 +246,7 @@ const NewFacetView = ({
                 onSortFacet(sortType.NUMERIC);
               }}
             >
-              Sort by count
+              Sort by Count
             </span>
           </>
           )}

package/src/components/facet/NewSearchFacetView.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import {
   useLocation,
   useNavigate,
@@ -56,10 +56,31 @@ const SearchFacetView = ({
   CustomView,
   queryParams,
   unknownAgesState,
+  expandState,
+  onToggleFacetExpand,
 }) => {
-  const [expand, setExpand] = useState(facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
+  const expand = expandState[facet.datafield] !== undefined ? expandState[facet.datafield] : (facet.expanded !== undefined && typeof facet.expanded === 'boolean' ? facet.expanded : false);
+
+  const isUserInitiated = useRef(false);
+  const prevExpandRef = useRef(expand);
+
+  useEffect(() => {
+    prevExpandRef.current = expand;
+    // Reset flag after render
+    if (isUserInitiated.current) {
+      setTimeout(() => {
+        isUserInitiated.current = false;
+      }, 0);
+    }
+  }, [expand]);
+
+  const onExpandFacet = () => {
+    isUserInitiated.current = true;
+    const newExpandState = !expand;
+    onToggleFacetExpand(facet.datafield, newExpandState);
+  };
+
   const [open, setOpen] = useState(false);
-  const onExpandFacet = () => setExpand(!expand);
   const query = new URLSearchParams(useLocation().search);
   const navigate = useNavigate();
 
@@ -133,6 +154,10 @@ const SearchFacetView = ({
           root: classes.expansionPanelsideBarItem,
         }}
         id={facet.section}
+        TransitionProps={{
+          // Disable animation if change is not user-initiated
+          timeout: isUserInitiated.current ? undefined : 0,
+        }}
       >
         {CustomView ? (
           <CustomView
@@ -178,7 +203,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 +228,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 +263,7 @@ const SearchFacetView = ({
                     onSortChange(facet.datafield, sortType.ALPHABET);
                   }}
                 >
-                  Sort alphabetically
+                  Sort Alphabetically
                 </span>
                 <span
                   className={
@@ -249,7 +275,7 @@ const SearchFacetView = ({
                     onSortChange(facet.datafield, sortType.NUMERIC);
                   }}
                 >
-                  Sort by count
+                  Sort by Count
                 </span>
               </div>
               <SearchFilterItems

package/src/components/facet/ReduxNewFacetView.js

@@ -5,6 +5,7 @@ import {
   clearSliderSection,
   timeUnitChange,
   unknownAgesChange,
+  toggleFacetExpand,
 } from '../../store/actions/Actions';
 import NewFacetView from './NewFacetView';
 
@@ -13,6 +14,7 @@ const ReduxNewFacetView = ((props) => <NewFacetView {...props} />);
 const mapStateToProps = (state) => ({
   timeUnitState: state?.statusReducer?.timeUnitState || {},
   unknownAgesState: state?.statusReducer?.unknownAgesState || {},
+  expandState: state?.statusReducer?.expandState || {},
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -22,6 +24,9 @@ const mapDispatchToProps = (dispatch) => ({
   onUnknownAgesChange: (datafield, unknownAges) => {
     dispatch(unknownAgesChange(datafield, unknownAges));
   },
+  onToggleFacetExpand: (datafield, expanded) => {
+    dispatch(toggleFacetExpand(datafield, expanded));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ReduxNewFacetView);

package/src/components/facet/ReduxNewSearchFacetView.js

@@ -6,6 +6,7 @@ import {
   searchTextChange,
   sortChange,
   unknownAgesChange,
+  toggleFacetExpand,
 } from '../../store/actions/Actions';
 // import FacetView from './FacetView';
 import NewSearchFacetView from './NewSearchFacetView';
@@ -16,6 +17,7 @@ const mapStateToProps = (state, ownProps) => ({
   searchText: state.statusReducer?.searchState[ownProps.facet.datafield] || '',
   sortBy: state.statusReducer.sortState[ownProps.facet.datafield] || null,
   unknownAgesState: state?.statusReducer?.unknownAgesState || {},
+  expandState: state?.statusReducer?.expandState || {},
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -30,6 +32,9 @@ const mapDispatchToProps = (dispatch) => ({
   onUnknownAgesChange: (datafield, unknownAges) => {
     dispatch(unknownAgesChange(datafield, unknownAges));
   },
+  onToggleFacetExpand: (datafield, expanded) => {
+    dispatch(toggleFacetExpand(datafield, expanded));
+  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ReduxNewSearchFacetView);

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/store/actions/ActionTypes.js

@@ -10,6 +10,7 @@ export const sideBarActionTypes = {
   UPDATE_FILTER_STATE: 'UPDATE_FILTER_STATE',
   TIME_UNIT_CHANGED: 'TIME_UNIT_CHANGED',
   UNKNOWN_AGES_CHANGED: 'UNKNOWN_AGES_CHANGED',
+  TOGGLE_FACET_EXPAND: 'TOGGLE_FACET_EXPAND',
 };
 
 export const Actions = '';

package/src/store/actions/Actions.js

@@ -67,3 +67,11 @@ export const unknownAgesChange = (datafield, unknownAges) => ({
     unknownAges,
   },
 });
+
+export const toggleFacetExpand = (datafield, expanded) => ({
+  type: sideBarActionTypes.TOGGLE_FACET_EXPAND,
+  payload: {
+    datafield,
+    expanded,
+  },
+});

package/src/store/reducers/SideBarReducer.js

@@ -6,6 +6,7 @@ const initFilterState = {
   sortState: {},
   timeUnitState: {},
   unknownAgesState: {},
+  expandState: {}, // Add this line
 };
 
 export const onToggleStateUpdate = ({
@@ -100,6 +101,16 @@ export const onUnknownAgesChange = ({
   return updatedState;
 };
 
+export const onToggleFacetExpand = ({
+  datafield,
+  expanded,
+  expandState,
+}) => {
+  const updatedState = { ...expandState };
+  updatedState[datafield] = expanded;
+  return updatedState;
+};
+
 export function sideBarReducerGenerator() {
   return {
     actionTypes: sideBarActionTypes,
@@ -177,6 +188,12 @@ export function sideBarReducerGenerator() {
             ...state,
             unknownAgesState: { ...updateState },
           };
+        case sideBarActionTypes.TOGGLE_FACET_EXPAND:
+          updateState = onToggleFacetExpand({ ...payload, ...state });
+          return {
+            ...state,
+            expandState: { ...updateState },
+          };
         default:
           return state;
       }