@haniffalab/cherita-react 1.4.1-dev.2025-10-23.e95b5a90 → 1.4.1-dev.2025-10-23.55fbe6ff

package/dist/esm/utils/Legend.js

@@ -1,11 +1,11 @@
-import { useMemo } from "react";
-import { faDroplet } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import _ from "lodash";
-import { formatNumerical, FORMATS } from "./string";
-import { COLOR_ENCODINGS } from "../constants/constants";
-import { useSettings } from "../context/SettingsContext";
-import { rgbToHex, useColor } from "../helpers/color-helper";
+import { useMemo } from 'react';
+import { faDroplet } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import _ from 'lodash';
+import { formatNumerical, FORMATS } from './string';
+import { COLOR_ENCODINGS } from '../constants/constants';
+import { useSettings } from '../context/SettingsContext';
+import { rgbToHex, useColor } from '../helpers/color-helper';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Legend(_ref) {
   let {
@@ -13,7 +13,7 @@ export function Legend(_ref) {
     min = 0,
     max = 1,
     colorscale = null,
-    addText = ""
+    addText = ''
   } = _ref;
   const settings = useSettings();
   const {

package/dist/esm/utils/LoadingIndicators.js

@@ -1,4 +1,4 @@
-import { Box, CircularProgress, LinearProgress } from "@mui/material";
+import { Box, CircularProgress, LinearProgress } from '@mui/material';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const LoadingSpinner = _ref => {
   let {
@@ -18,7 +18,7 @@ export const LoadingSpinner = _ref => {
 export const LoadingLinear = () => {
   return /*#__PURE__*/_jsx(Box, {
     sx: {
-      width: "100%"
+      width: '100%'
     },
     children: /*#__PURE__*/_jsx(LinearProgress, {})
   });

package/dist/esm/utils/Resolver.js

@@ -3,12 +3,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { useState, useEffect, useMemo } from "react";
-import _ from "lodash";
-import { useFetch } from "./requests";
-import { PSEUDOSPATIAL_CATEGORICAL_MODES } from "../constants/constants";
-import { useDataset } from "../context/DatasetContext";
-import { useSettings } from "../context/SettingsContext";
+import { useState, useEffect, useMemo } from 'react';
+import _ from 'lodash';
+import { useFetch } from './requests';
+import { PSEUDOSPATIAL_CATEGORICAL_MODES } from '../constants/constants';
+import { useDataset } from '../context/DatasetContext';
+import { useSettings } from '../context/SettingsContext';
 const cleanSettings = settings => {
   var _settings$data$pseudo;
   // Remove obs and vars from settings that are not in data
@@ -69,7 +69,7 @@ export const useResolver = initSettings => {
   // all obs should be in initSettings.selectedObs and initSettings.labelObs
   const initObs = _.uniqBy(_.compact([initSettings.selectedObs, ..._.map(initSettings.labelObs, o => ({
     name: o
-  }))]), "name");
+  }))]), 'name');
   const initObsNames = _.map(initObs, o => o.name);
   const [obsParams] = useState({
     url: dataset.url,
@@ -82,7 +82,7 @@ export const useResolver = initSettings => {
     fetchedData: obsData,
     isPending: obsDataPending,
     serverError: obsDataError
-  } = useFetch("obs/cols", obsParams, {
+  } = useFetch('obs/cols', obsParams, {
     enabled: !!initObsNames.length
   });
 
@@ -99,7 +99,7 @@ export const useResolver = initSettings => {
     fetchedData: varData,
     isPending: varDataPending,
     serverError: varDataError
-  } = useFetch("var/cols/names", varParams, {
+  } = useFetch('var/cols/names', varParams, {
     enabled: !!varParams.names.length
   });
 
@@ -112,7 +112,7 @@ export const useResolver = initSettings => {
     fetchedData: pseudospatialData,
     isPending: pseudospatialDataPending,
     serverError: pseudospatialDataError
-  } = useFetch("masks", pseudospatialParams, {
+  } = useFetch('masks', pseudospatialParams, {
     enabled: pseudospatialEnabled,
     retry: false
   });
@@ -129,13 +129,13 @@ export const useResolver = initSettings => {
       return;
     }
     if (obsDataError) {
-      console.error("Error fetching obs data:", obsDataError);
+      console.error('Error fetching obs data:', obsDataError);
     }
     if (varDataError) {
-      console.error("Error fetching var data:", varDataError);
+      console.error('Error fetching var data:', varDataError);
     }
     if (pseudospatialDataError) {
-      console.error("Error fetching pseudospatial masks data:", pseudospatialDataError);
+      console.error('Error fetching pseudospatial masks data:', pseudospatialDataError);
     }
     const data = {
       obs: obsData ? _.fromPairs(_.map(obsData, o => [o.name, o])) : {},

package/dist/esm/utils/Skeleton.js

@@ -1,4 +1,4 @@
-import { Button, Placeholder } from "react-bootstrap";
+import { Button, Placeholder } from 'react-bootstrap';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ObsmKeysListBtn = () => {
   return /*#__PURE__*/_jsx(Placeholder, {
@@ -7,7 +7,7 @@ export const ObsmKeysListBtn = () => {
     children: /*#__PURE__*/_jsx(Placeholder, {
       xs: 6,
       style: {
-        width: "40px"
+        width: '40px'
       }
     })
   });

package/dist/esm/utils/StyledTooltip.js

@@ -6,7 +6,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { styled, Tooltip, tooltipClasses } from "@mui/material";
+import { styled, Tooltip, tooltipClasses } from '@mui/material';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const StyledTooltip = styled(_ref => {
   let {
@@ -24,15 +24,15 @@ export const StyledTooltip = styled(_ref => {
   } = _ref2;
   return {
     ["& .".concat(tooltipClasses.tooltip)]: {
-      backgroundColor: "#000",
-      color: "#fff",
+      backgroundColor: '#000',
+      color: '#fff',
       maxWidth: 220,
       fontSize: 13,
       borderRadius: 4,
       padding: theme.spacing(0.5, 1),
-      whiteSpace: "pre-line",
-      textAlign: "center",
-      boxShadow: "0 0.25rem 0.75rem rgba(0, 0, 0, 0.1)"
+      whiteSpace: 'pre-line',
+      textAlign: 'center',
+      boxShadow: '0 0.25rem 0.75rem rgba(0, 0, 0, 0.1)'
     }
   };
 });

package/dist/esm/utils/VirtualizedList.js

@@ -6,8 +6,8 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { useCallback, useEffect, useState } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { useCallback, useEffect, useState } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function VirtualizedList(_ref) {
   var _virtualItems$0$start, _virtualItems$;
@@ -17,7 +17,7 @@ export function VirtualizedList(_ref) {
       ItemComponent,
       estimateSize = () => 45,
       overscan = 25,
-      maxHeight = "65vh"
+      maxHeight = '65vh'
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const [parentNode, setParentNode] = useState(null);
@@ -37,23 +37,23 @@ export function VirtualizedList(_ref) {
   return /*#__PURE__*/_jsx("div", {
     ref: refCallback,
     style: {
-      overflowY: "auto",
+      overflowY: 'auto',
       maxHeight: maxHeight
     },
     className: "modern-scrollbars",
     children: /*#__PURE__*/_jsx("div", {
       style: {
         height: "".concat(itemVirtualizer.getTotalSize(), "px"),
-        width: "100%",
-        position: "relative",
-        willChange: "transform"
+        width: '100%',
+        position: 'relative',
+        willChange: 'transform'
       },
       children: /*#__PURE__*/_jsx("div", {
         style: {
-          position: "absolute",
+          position: 'absolute',
           top: 0,
           left: 0,
-          width: "100%",
+          width: '100%',
           transform: "translateY(".concat((_virtualItems$0$start = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.start) !== null && _virtualItems$0$start !== void 0 ? _virtualItems$0$start : 0, "px)")
         },
         children: virtualItems.map(virtualItem => /*#__PURE__*/_jsx("div", {

package/dist/esm/utils/errors.js

@@ -6,38 +6,38 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 export const parseError = err => {
   if (err === DOMException.TIMEOUT_ERR) {
     return {
-      message: "Timeout error",
+      message: 'Timeout error',
       name: err
     };
   }
   switch (err === null || err === void 0 ? void 0 : err.name) {
-    case "TypeError":
+    case 'TypeError':
       return _objectSpread(_objectSpread({}, err), {}, {
-        message: "Failed to fetch data from server"
+        message: 'Failed to fetch data from server'
       });
-    case "ReadZarrError":
+    case 'ReadZarrError':
       return _objectSpread(_objectSpread({}, err), {}, {
-        message: "Failed to read AnnData-Zarr"
+        message: 'Failed to read AnnData-Zarr'
       });
-    case "InvalidObs":
+    case 'InvalidObs':
       return _objectSpread(_objectSpread({}, err), {}, {
-        message: "Observation not found in dataset"
+        message: 'Observation not found in dataset'
       });
-    case "InvalidVar":
+    case 'InvalidVar':
       return _objectSpread(_objectSpread({}, err), {}, {
-        message: "Feature not found in dataset"
+        message: 'Feature not found in dataset'
       });
-    case "InvalidKey":
+    case 'InvalidKey':
       return _objectSpread(_objectSpread({}, err), {}, {
-        message: "Key not found in dataset"
+        message: 'Key not found in dataset'
       });
-    case "BadRequest":
+    case 'BadRequest':
       return _objectSpread(_objectSpread({}, err), {}, {
-        message: "Invalid request to server"
+        message: 'Invalid request to server'
       });
-    case "InternalServerError":
+    case 'InternalServerError':
       return _objectSpread(_objectSpread({}, err), {}, {
-        message: "Server error"
+        message: 'Server error'
       });
     default:
       return err;

package/dist/esm/utils/requests.js

@@ -3,9 +3,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { useQuery } from "@tanstack/react-query";
-import { useDebounce } from "@uidotdev/usehooks";
-import { parseError } from "./errors";
+import { useQuery } from '@tanstack/react-query';
+import { useDebounce } from '@uidotdev/usehooks';
+import { parseError } from './errors';
 export async function fetchData(endpoint, params) {
   let signal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   let ms = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 300000;
@@ -15,13 +15,13 @@ export async function fetchData(endpoint, params) {
   const timeout = setTimeout(() => {
     controller.abort(DOMException.TIMEOUT_ERR);
   }, ms || 300000);
-  if (signal) signal.addEventListener("abort", () => controller.abort());
+  if (signal) signal.addEventListener('abort', () => controller.abort());
   const response = await fetch(new URL(endpoint, apiUrl), {
-    method: "POST",
-    mode: "cors",
+    method: 'POST',
+    mode: 'cors',
     headers: {
-      "Content-Type": "application/json",
-      Accept: "application/json"
+      'Content-Type': 'application/json',
+      Accept: 'application/json'
     },
     body: JSON.stringify(params),
     signal: controller.signal

package/dist/esm/utils/search.js

@@ -1,13 +1,13 @@
-import { useState } from "react";
-import { useFetch } from "./requests";
-import { useDataset } from "../context/DatasetContext";
+import { useState } from 'react';
+import { useFetch } from './requests';
+import { useDataset } from '../context/DatasetContext';
 export const useDiseaseSearch = () => {
-  const ENDPOINT = "diseases";
+  const ENDPOINT = 'diseases';
   const dataset = useDataset();
   const [params, setParams] = useState({
     url: dataset.url,
     diseaseDatasets: dataset.diseaseDatasets,
-    text: ""
+    text: ''
   });
   const data = useFetch(ENDPOINT, params, {
     enabled: !!params.text.length,
@@ -20,12 +20,12 @@ export const useDiseaseSearch = () => {
   };
 };
 export const useVarSearch = () => {
-  const ENDPOINT = "var/names";
+  const ENDPOINT = 'var/names';
   const dataset = useDataset();
   const [params, setParams] = useState({
     url: dataset.url,
     col: dataset.varNamesCol,
-    text: ""
+    text: ''
   });
   const data = useFetch(ENDPOINT, params, {
     enabled: !!params.text.length,

package/dist/esm/utils/string.js

@@ -1,8 +1,8 @@
-import numbro from "numbro";
+import numbro from 'numbro';
 export const FORMATS = {
-  EXPONENTIAL: "exponential",
-  ABBREVIATION: "abbreviation",
-  THOUSAND: "thousand"
+  EXPONENTIAL: 'exponential',
+  ABBREVIATION: 'abbreviation',
+  THOUSAND: 'thousand'
 };
 function formatThousand(n) {
   let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
@@ -32,9 +32,9 @@ export function formatNumerical(n) {
   let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : FORMATS.THOUSAND;
   let precision = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 3;
   if (n === 0) {
-    return "0";
+    return '0';
   } else if (!n || n === undefined || isNaN(n)) {
-    return "NaN";
+    return 'NaN';
   }
   switch (format) {
     case FORMATS.EXPONENTIAL:
@@ -55,5 +55,5 @@ export function formatNumerical(n) {
   }
 }
 export function formatString(s) {
-  return s.trim().replace(/_/g, " ");
+  return s.trim().replace(/_/g, ' ');
 }

package/dist/esm/utils/zarrData.js

@@ -1,11 +1,11 @@
-import { useMemo } from "react";
-import _ from "lodash";
-import { slice } from "zarr";
-import { useSelectedObs, useSelectedVar } from "./Resolver";
-import { OBS_TYPES } from "../constants/constants";
-import { useDataset } from "../context/DatasetContext";
-import { useSettings } from "../context/SettingsContext";
-import { GET_OPTIONS, useZarr, useMultipleZarr } from "../helpers/zarr-helper";
+import { useMemo } from 'react';
+import _ from 'lodash';
+import { slice } from 'zarr';
+import { useSelectedObs, useSelectedVar } from './Resolver';
+import { OBS_TYPES } from '../constants/constants';
+import { useDataset } from '../context/DatasetContext';
+import { useSettings } from '../context/SettingsContext';
+import { GET_OPTIONS, useZarr, useMultipleZarr } from '../helpers/zarr-helper';
 
 // @TODO: support specifying slice to load from context
 export const useObsmData = function () {
@@ -15,7 +15,7 @@ export const useObsmData = function () {
   obsm = obsm || settings.selectedObsm;
   const obsmParams = useMemo(() => ({
     url: dataset.url,
-    path: "obsm/" + obsm,
+    path: 'obsm/' + obsm,
     s: [null, slice(null, 2)] // load only [:, :2]
   }), [dataset.url, obsm]);
   return useZarr(obsmParams, GET_OPTIONS, {
@@ -36,12 +36,12 @@ export const useXData = function () {
   const selectedVar = useSelectedVar();
   const xParams = useMemo(() => !selectedVar ? [] : !(selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet) ? [{
     url: dataset.url,
-    path: "X",
+    path: 'X',
     s: [null, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.matrix_index]
   }] : _.map(selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars, v => {
     return {
       url: dataset.url,
-      path: "X",
+      path: 'X',
       s: [null, v.matrix_index]
     };
   }), [dataset.url, selectedVar]);
@@ -59,7 +59,7 @@ export const useObsData = function () {
     var _obs, _obs2;
     return {
       url: dataset.url,
-      path: "obs/" + ((_obs = obs) === null || _obs === void 0 ? void 0 : _obs.name) + (((_obs2 = obs) === null || _obs2 === void 0 ? void 0 : _obs2.type) === OBS_TYPES.CATEGORICAL ? "/codes" : "")
+      path: 'obs/' + ((_obs = obs) === null || _obs === void 0 ? void 0 : _obs.name) + (((_obs2 = obs) === null || _obs2 === void 0 ? void 0 : _obs2.type) === OBS_TYPES.CATEGORICAL ? '/codes' : '')
     };
   }, [dataset.url, (_obs3 = obs) === null || _obs3 === void 0 ? void 0 : _obs3.name, (_obs4 = obs) === null || _obs4 === void 0 ? void 0 : _obs4.type]);
   return useZarr(obsParams, GET_OPTIONS, {
@@ -73,7 +73,7 @@ export const useLabelObsData = () => {
     const obs = settings.data.obs[obsName] || null;
     return {
       url: dataset.url,
-      path: "obs/" + obs.name + (obs.type === OBS_TYPES.CATEGORICAL ? "/codes" : ""),
+      path: 'obs/' + obs.name + (obs.type === OBS_TYPES.CATEGORICAL ? '/codes' : ''),
       key: obs.name
     };
   }), [dataset.url, settings.data.obs, settings.labelObs]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.4.1-dev.2025-10-23.e95b5a90",
+  "version": "1.4.1-dev.2025-10-23.55fbe6ff",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -71,19 +71,23 @@
     "babel-plugin-transform-define": "^2.1.4",
     "cpx": "^1.5.0",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^8.10.0",
+    "eslint-config-prettier": "^8.10.2",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-unused-imports": "^4.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "1.77.6",
     "stylelint": "^16.10.0",
     "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-standard-scss": "^13.1.0"
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-prettier": "^5.0.3"
   },
   "scripts": {
     "build:esm": "babel src/lib --out-dir dist/esm --copy-files --env-name esm",
@@ -128,5 +132,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "e95b5a903f92bf1e0c03c34b0b16f6dfaeab333c"
+  "prereleaseSha": "55fbe6ff40ba1d947590cb8a5f927117bab4763f"
 }

package/scss/cherita-bootstrap.scss

@@ -1,2 +1,2 @@
-@use "bootstrap/scss/bootstrap";
-@import "cherita";
+@use 'bootstrap/scss/bootstrap';
+@import 'cherita';

package/scss/cherita.scss

@@ -1,12 +1,12 @@
 // Define $prefix only if it hasn't been set already
-$prefix: "bs-" !default;
+$prefix: 'bs-' !default;
 
-@import "components/accordions";
-@import "components/lists";
-@import "components/layouts";
-@import "components/plotly";
-@import "components/plots";
-@import "components/scrollbars";
+@import 'components/accordions';
+@import 'components/lists';
+@import 'components/layouts';
+@import 'components/plotly';
+@import 'components/plots';
+@import 'components/scrollbars';
 
 .loading-spinner {
   @extend .bg-light;
@@ -119,6 +119,7 @@ $prefix: "bs-" !default;
   white-space: nowrap;
   text-overflow: ellipsis;
   pointer-events: auto;
+
   .legend-text {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -128,7 +129,7 @@ $prefix: "bs-" !default;
   }
 }
 
-@media (max-width: 600px) {
+@media (width <= 600px) {
   .cherita-spatial-footer {
     flex-direction: column;
     align-items: center;
@@ -232,13 +233,14 @@ $prefix: "bs-" !default;
 }
 
 .value-count-badge {
-  color: #000000 !important;
+  color: #000 !important;
   background-color: #dedede !important;
   font-weight: lighter;
 }
 
 .filtered-value-count-badge {
-  color: #ffffff !important;
+  color: #fff !important;
+
   // background-color: $alt-color !important;
   font-weight: normal;
 }
@@ -269,28 +271,32 @@ $gauge-padding: 0.15rem;
 
 .feature-histogram {
   @extend .feature-histogram-container;
-  border-radius: 5px;
 
+  border-radius: 5px;
   background-color: #dedede;
 }
 
+.feature-histogram-tooltip td > p {
+  font-size: 0.85rem !important;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
 .feature-histogram-tooltip .MuiChartsTooltip-markCell,
+/* stylelint-disable-next-line selector-class-pattern */
 .MuiChartsTooltip-labelCell {
   display: none;
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .feature-histogram-tooltip .MuiChartsTooltip-valueCell {
   padding: 0.5rem !important;
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .feature-histogram-tooltip .MuiChartsTooltip-valueCell > p {
   font-size: 0.85rem !important;
 }
 
-.feature-histogram-tooltip td > p {
-  font-size: 0.85rem !important;
-}
-
 .feature-disease-info-list {
   max-height: 300px;
   overflow-y: auto;
@@ -420,13 +426,14 @@ $gauge-padding: 0.15rem;
 
 .var-item-name {
   @extend .me-auto;
+
   padding-right: 0.5rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-input[type="checkbox"] {
+input[type='checkbox'] {
   cursor: pointer;
 }
 
@@ -441,7 +448,7 @@ input[type="checkbox"] {
   z-index: 10;
   width: max-content;
 
-  @media (min-width: 991px) {
+  @media (width >= 991px) {
     top: 16px;
     left: 16px;
     bottom: auto;

package/scss/components/accordions.scss

@@ -19,6 +19,7 @@
     height: 20px;
     margin-right: 10px;
   }
+
   .obs-accordion-header-span {
     font-size: 1rem;
     width: 100%;
@@ -36,6 +37,7 @@
       @extend .flex-nowrap;
     }
   }
+
   .active-icon {
     color: #0c63e4;
   }
@@ -43,5 +45,6 @@
 
 .obs-group-accordion-body {
   @extend .accordion-flush;
+
   padding: 0;
-}
+}