@haniffalab/cherita-react 1.3.0 → 1.3.1-dev.2025-10-29.6de4119f

package/dist/esm/components/obs-list/ObsList.js

@@ -3,23 +3,24 @@ 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 React, { useContext, useEffect, useMemo, useState } from "react";
-import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import CommentIcon from "@mui/icons-material/Comment";
-import JoinInnerIcon from "@mui/icons-material/JoinInner";
-import WaterDropIcon from "@mui/icons-material/WaterDrop";
-import _ from "lodash";
-import { Alert } from "react-bootstrap";
-import Accordion from "react-bootstrap/Accordion";
-import { useAccordionButton } from "react-bootstrap/AccordionButton";
-import AccordionContext from "react-bootstrap/AccordionContext";
-import { CategoricalObs, ContinuousObs } from "./ObsItem";
-import { COLOR_ENCODINGS, DEFAULT_OBS_GROUP, OBS_TYPES } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { LoadingSpinner } from "../../utils/LoadingIndicators";
-import { useFetch } from "../../utils/requests";
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { faChevronDown, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import CommentIcon from '@mui/icons-material/Comment';
+import JoinInnerIcon from '@mui/icons-material/JoinInner';
+import WaterDropIcon from '@mui/icons-material/WaterDrop';
+import _ from 'lodash';
+import { Alert } from 'react-bootstrap';
+import Accordion from 'react-bootstrap/Accordion';
+import { useAccordionButton } from 'react-bootstrap/AccordionButton';
+import AccordionContext from 'react-bootstrap/AccordionContext';
+import { COLOR_ENCODINGS, DEFAULT_OBS_GROUP, OBS_TYPES } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { LoadingSpinner } from '../../utils/LoadingIndicators';
+import { useFetch } from '../../utils/requests';
+import { CategoricalObs, ContinuousObs } from './ObsItem';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ObsAccordionToggle = _ref => {
   let {
     children,
@@ -33,46 +34,55 @@ const ObsAccordionToggle = _ref => {
   const decoratedOnClick = useAccordionButton(eventKey, () => {
     handleAccordionToggle(eventKey, isCurrentEventKey);
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: "obs-accordion-header ".concat(isCurrentEventKey ? "active" : ""),
-    onClick: decoratedOnClick
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "obs-accordion-header-chevron"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: isCurrentEventKey ? faChevronDown : faChevronRight
-  })), /*#__PURE__*/React.createElement("span", {
-    className: "obs-accordion-header-title"
-  }, children));
+  return /*#__PURE__*/_jsxs("div", {
+    className: "obs-accordion-header ".concat(isCurrentEventKey ? 'active' : ''),
+    onClick: decoratedOnClick,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: "obs-accordion-header-chevron",
+      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: isCurrentEventKey ? faChevronDown : faChevronRight
+      })
+    }), /*#__PURE__*/_jsx("span", {
+      className: "obs-accordion-header-span",
+      children: children
+    })]
+  });
 };
 export function ObsColsList(_ref2) {
-  var _settings$selectedObs;
+  var _settings$selectedObs, _settings$selectedObs3, _settings$selectedObs4;
   let {
     showColor = true,
-    enableObsGroups = true
+    enableObsGroups = true,
+    showSelectedAsActive = false,
+    showHistograms = true
   } = _ref2;
-  const ENDPOINT = "obs/cols";
+  const ENDPOINT = 'obs/cols';
   const dataset = useDataset();
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
   const [enableGroups, setEnableGroups] = useState(enableObsGroups);
   const [obsCols, setObsCols] = useState(null);
-  const [active, setActive] = useState([...[(_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name]]);
-  const [params, setParams] = useState({
-    url: dataset.url
-  });
+  const [active, setActive] = useState([...(settings.selectedObs ? [(_settings$selectedObs = settings.selectedObs) === null || _settings$selectedObs === void 0 ? void 0 : _settings$selectedObs.name] : [])]);
   const obsGroups = useMemo(() => {
     var _dataset$obsGroups;
     return _objectSpread({
       default: _.union(DEFAULT_OBS_GROUP, (_dataset$obsGroups = dataset.obsGroups) === null || _dataset$obsGroups === void 0 ? void 0 : _dataset$obsGroups.default)
-    }, _.omit(dataset.obsGroups, "default"));
+    }, _.omit(dataset.obsGroups, 'default'));
   }, [dataset.obsGroups]);
+  const [params, setParams] = useState(_objectSpread({
+    url: dataset.url
+  }, enableGroups ? {
+    cols: _.flatten(_.values(obsGroups))
+  } : {}));
   useEffect(() => {
     setParams(p => {
       return _objectSpread(_objectSpread({}, p), {}, {
         url: dataset.url
-      });
+      }, enableGroups ? {
+        cols: _.flatten(_.values(obsGroups))
+      } : {});
     });
-  }, [dataset.url]);
+  }, [dataset.url, enableGroups, obsGroups]);
   const {
     fetchedData,
     isPending,
@@ -102,25 +112,34 @@ export function ObsColsList(_ref2) {
         return d.type !== OBS_TYPES.DISCRETE;
       });
       setObsCols(_.keyBy(_.map(filteredData, d => {
+        var _settings$selectedObs2;
+        if (((_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.name) === d.name) {
+          return _objectSpread(_objectSpread({}, d), {}, {
+            omit: settings.selectedObs.omit || []
+          });
+        }
         return _objectSpread(_objectSpread({}, d), {}, {
-          codesMap: _.invert(d.codes),
           omit: []
         });
-      }), "name"));
+      }), 'name'));
     }
-  }, [fetchedData, isPending, obsGroups, serverError, enableGroups]);
+  }, [fetchedData, isPending, obsGroups, serverError, enableGroups, (_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.name, (_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.omit]);
   useEffect(() => {
-    if (obsCols) {
-      var _settings$selectedObs2;
-      if (!obsCols[(_settings$selectedObs2 = settings.selectedObs) === null || _settings$selectedObs2 === void 0 ? void 0 : _settings$selectedObs2.name]) {
-        setActive([]);
+    if (obsCols && settings.selectedObs) {
+      const {
+        name
+      } = settings.selectedObs;
+      if (!obsCols[name]) {
         dispatch({
-          type: "select.obs",
+          type: 'select.obs',
           obs: null
         });
+        if (active.includes(name)) {
+          setActive(prev => _.without(prev, name));
+        }
       }
     }
-  }, [settings.selectedObs, dispatch, obsCols]);
+  }, [settings.selectedObs, dispatch, obsCols, active]);
   const handleAccordionToggle = (itemName, isCurrentEventKey) => {
     if (isCurrentEventKey) {
       _.delay(() => setActive(prev => _.without(prev, itemName)), 250);
@@ -129,8 +148,8 @@ export function ObsColsList(_ref2) {
     }
   };
   const toggleAll = item => {
-    var _settings$selectedObs3;
-    const omit = item.omit.length ? [] : _.map(item.values, v => item.codes[v]);
+    var _settings$selectedObs5;
+    const omit = item.omit.length ? [] : item.values;
     setObsCols(o => {
       return _objectSpread(_objectSpread({}, o), {}, {
         [item.name]: _objectSpread(_objectSpread({}, item), {}, {
@@ -138,9 +157,9 @@ export function ObsColsList(_ref2) {
         })
       });
     });
-    if (((_settings$selectedObs3 = settings.selectedObs) === null || _settings$selectedObs3 === void 0 ? void 0 : _settings$selectedObs3.name) === item.name) {
+    if (((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name) === item.name) {
       dispatch({
-        type: "select.obs",
+        type: 'select.obs',
         obs: _objectSpread(_objectSpread({}, item), {}, {
           omit: omit
         })
@@ -148,46 +167,42 @@ export function ObsColsList(_ref2) {
     }
   };
   const toggleLabel = item => {
-    const inLabelObs = _.some(settings.labelObs, i => i.name === item.name);
+    const inLabelObs = _.includes(settings.labelObs, item.name);
     if (inLabelObs) {
       dispatch({
-        type: "remove.label.obs",
+        type: 'remove.label.obs',
         obsName: item.name
       });
     } else {
       dispatch({
-        type: "add.label.obs",
-        obs: {
-          name: item.name,
-          type: item.type,
-          codesMap: item.codesMap
-        }
+        type: 'add.label.obs',
+        obs: item
       });
     }
   };
   const toggleSlice = item => {
     dispatch({
-      type: "toggle.slice.obs",
+      type: 'toggle.slice.obs',
       obs: item
     });
   };
   const toggleColor = item => {
     dispatch({
-      type: "select.obs",
+      type: 'select.obs',
       obs: item
     });
     dispatch({
-      type: "set.colorEncoding",
+      type: 'set.colorEncoding',
       value: COLOR_ENCODINGS.OBS
     });
   };
   const toggleObs = (item, value) => {
-    var _settings$selectedObs4;
+    var _settings$selectedObs6;
     let omit;
-    if (_.includes(item.omit, item.codes[value])) {
-      omit = item.omit.filter(i => i !== item.codes[value]);
+    if (_.includes(item.omit, value)) {
+      omit = item.omit.filter(i => i !== value);
     } else {
-      omit = [...item.omit, item.codes[value]];
+      omit = [...item.omit, value];
     }
     setObsCols(o => {
       return _objectSpread(_objectSpread({}, o), {}, {
@@ -196,9 +211,9 @@ export function ObsColsList(_ref2) {
         })
       });
     });
-    if (((_settings$selectedObs4 = settings.selectedObs) === null || _settings$selectedObs4 === void 0 ? void 0 : _settings$selectedObs4.name) === item.name) {
+    if (((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name) {
       dispatch({
-        type: "select.obs",
+        type: 'select.obs',
         obs: _objectSpread(_objectSpread({}, item), {}, {
           omit: omit
         })
@@ -206,101 +221,123 @@ export function ObsColsList(_ref2) {
     }
   };
   const obsItem = item => {
-    var _settings$selectedObs5, _settings$selectedObs6;
+    var _settings$selectedObs7, _settings$selectedObs8;
     if (!item) {
       return null;
     }
     if (item.type === OBS_TYPES.DISCRETE) {
       return null;
     }
-    const inLabelObs = _.some(settings.labelObs, i => i.name === item.name);
-    const inSliceObs = settings.sliceBy.obs && ((_settings$selectedObs5 = settings.selectedObs) === null || _settings$selectedObs5 === void 0 ? void 0 : _settings$selectedObs5.name) === item.name;
-    const isColorEncoding = settings.colorEncoding === COLOR_ENCODINGS.OBS && ((_settings$selectedObs6 = settings.selectedObs) === null || _settings$selectedObs6 === void 0 ? void 0 : _settings$selectedObs6.name) === item.name;
-    return /*#__PURE__*/React.createElement("div", {
+    const inLabelObs = _.includes(settings.labelObs, item.name);
+    const inSliceObs = settings.sliceBy.obs && ((_settings$selectedObs7 = settings.selectedObs) === null || _settings$selectedObs7 === void 0 ? void 0 : _settings$selectedObs7.name) === item.name;
+    const isColorEncoding = (showSelectedAsActive || settings.colorEncoding === COLOR_ENCODINGS.OBS) && ((_settings$selectedObs8 = settings.selectedObs) === null || _settings$selectedObs8 === void 0 ? void 0 : _settings$selectedObs8.name) === item.name;
+    return /*#__PURE__*/_jsxs("div", {
       className: "accordion-item",
-      key: item.name
-    }, /*#__PURE__*/React.createElement(ObsAccordionToggle, {
-      eventKey: item.name,
-      handleAccordionToggle: handleAccordionToggle
-    }, /*#__PURE__*/React.createElement("div", null, item.name), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
-      className: "mx-1 cursor-pointer ".concat(inLabelObs ? "active-icon" : "text-muted opacity-50"),
-      onClick: event => {
-        event.stopPropagation();
-        toggleLabel(item);
-      },
-      title: "Add to tooltip"
-    }, /*#__PURE__*/React.createElement(CommentIcon, null)), /*#__PURE__*/React.createElement("span", {
-      className: "mx-1 cursor-pointer ".concat(inSliceObs ? "active-icon" : "text-muted opacity-50"),
-      onClick: event => {
-        event.stopPropagation();
-        toggleSlice(item);
-      },
-      title: "Filter applied"
-    }, /*#__PURE__*/React.createElement(JoinInnerIcon, null)), /*#__PURE__*/React.createElement("span", {
-      className: "mx-1 cursor-pointer ".concat(isColorEncoding ? "active-icon" : "text-muted opacity-50"),
-      onClick: event => {
-        event.stopPropagation();
-        toggleColor(item);
-      },
-      title: "Is color encoding"
-    }, /*#__PURE__*/React.createElement(WaterDropIcon, null)))), /*#__PURE__*/React.createElement(Accordion.Collapse, {
-      eventKey: item.name
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "obs-accordion-body"
-    }, active.includes(item.name) && (item.type === OBS_TYPES.CATEGORICAL || item.type === OBS_TYPES.BOOLEAN ? /*#__PURE__*/React.createElement(CategoricalObs, {
-      key: item.name,
-      obs: item,
-      toggleAll: () => toggleAll(item),
-      toggleObs: value => toggleObs(item, value),
-      toggleLabel: () => toggleLabel(item),
-      toggleSlice: () => toggleSlice(item),
-      toggleColor: () => toggleColor(item),
-      showColor: showColor && isColorEncoding
-    }) : /*#__PURE__*/React.createElement(ContinuousObs, {
-      key: item.name,
-      obs: item,
-      toggleAll: () => toggleAll(item),
-      toggleObs: value => toggleObs(item, value),
-      toggleLabel: () => toggleLabel(item),
-      toggleSlice: () => toggleSlice(item),
-      toggleColor: () => toggleColor(item)
-    })))));
+      children: [/*#__PURE__*/_jsxs(ObsAccordionToggle, {
+        eventKey: item.name,
+        handleAccordionToggle: handleAccordionToggle,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "accordion-header-title",
+          children: item.name
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "accordion-header-toolbar",
+          children: [/*#__PURE__*/_jsx("span", {
+            className: "mx-1 cursor-pointer ".concat(inLabelObs ? 'active-icon' : 'text-muted opacity-50'),
+            onClick: event => {
+              event.stopPropagation();
+              toggleLabel(item);
+            },
+            title: "Add to tooltip",
+            children: /*#__PURE__*/_jsx(CommentIcon, {})
+          }), /*#__PURE__*/_jsx("span", {
+            className: "mx-1 cursor-pointer ".concat(inSliceObs ? 'active-icon' : 'text-muted opacity-50'),
+            onClick: event => {
+              event.stopPropagation();
+              toggleSlice(item);
+            },
+            title: "Filter applied",
+            children: /*#__PURE__*/_jsx(JoinInnerIcon, {})
+          }), /*#__PURE__*/_jsx("span", {
+            className: "mx-1 cursor-pointer ".concat(isColorEncoding ? 'active-icon' : 'text-muted opacity-50'),
+            onClick: event => {
+              event.stopPropagation();
+              toggleColor(item);
+            },
+            title: showSelectedAsActive ? 'Is selected' : 'Is color encoding',
+            children: /*#__PURE__*/_jsx(WaterDropIcon, {})
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Accordion.Collapse, {
+        eventKey: item.name,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "obs-accordion-body",
+          children: active.includes(item.name) && (item.type === OBS_TYPES.CATEGORICAL || item.type === OBS_TYPES.BOOLEAN ? /*#__PURE__*/_jsx(CategoricalObs, {
+            obs: item,
+            toggleAll: () => toggleAll(item),
+            toggleObs: value => toggleObs(item, value),
+            toggleLabel: () => toggleLabel(item),
+            toggleSlice: () => toggleSlice(item),
+            toggleColor: () => toggleColor(item),
+            showColor: showColor && isColorEncoding,
+            showHistograms: showHistograms
+          }, item.name) : /*#__PURE__*/_jsx(ContinuousObs, {
+            obs: item,
+            toggleAll: () => toggleAll(item),
+            toggleObs: value => toggleObs(item, value),
+            toggleLabel: () => toggleLabel(item),
+            toggleSlice: () => toggleSlice(item),
+            toggleColor: () => toggleColor(item),
+            showHistograms: showHistograms
+          }, item.name))
+        })
+      })]
+    }, item.name);
   };
   const groupList = _.map(_.keys(obsGroups), group => {
     const key = "group-".concat(group);
     const groupItems = _.compact(_.map(_.sortBy(obsGroups[group], o => _.lowerCase(o.name)), item => {
       return obsItem(obsCols === null || obsCols === void 0 ? void 0 : obsCols[item]);
     }));
-    if (group === "default") {
+    if (group === 'default') {
       return groupItems;
     } else {
-      return /*#__PURE__*/React.createElement(Accordion.Item, {
-        key: key,
+      return /*#__PURE__*/_jsxs(Accordion.Item, {
         eventKey: key,
-        className: "obs-group-accordion-item"
-      }, /*#__PURE__*/React.createElement(Accordion.Header, {
-        className: "obs-group-accordion-header"
-      }, group), /*#__PURE__*/React.createElement(Accordion.Body, {
-        className: "obs-group-accordion-body"
-      }, groupItems));
+        className: "obs-group-accordion-item",
+        children: [/*#__PURE__*/_jsx(Accordion.Header, {
+          className: "obs-group-accordion-header",
+          children: group
+        }), /*#__PURE__*/_jsx(Accordion.Body, {
+          className: "obs-group-accordion-body",
+          children: groupItems
+        })]
+      }, key);
     }
   });
-  const obsList = enableGroups ? /*#__PURE__*/React.createElement(React.Fragment, null, groupList) : _.map(_.sortBy(obsCols, o => _.lowerCase(o.name)), item => obsItem(item));
+  const obsList = enableGroups ? /*#__PURE__*/_jsx(_Fragment, {
+    children: groupList
+  }) : _.map(_.sortBy(obsCols, o => _.lowerCase(o.name)), item => obsItem(item));
   const defaultActiveGroup = enableGroups ? "group-".concat(_.findKey(obsGroups, g => g.includes(active === null || active === void 0 ? void 0 : active[0]))) : null;
   if (!serverError) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "position-relative h-100"
-    }, isPending ? /*#__PURE__*/React.createElement(LoadingSpinner, null) : !!obsCols && !_.size(obsCols) ? /*#__PURE__*/React.createElement(Alert, {
-      variant: "danger"
-    }, "No observations found.") : /*#__PURE__*/React.createElement(Accordion, {
-      flush: true,
-      defaultActiveKey: [...active, ...[defaultActiveGroup]],
-      alwaysOpen: true,
-      className: "obs-accordion"
-    }, obsList));
+    return /*#__PURE__*/_jsx("div", {
+      className: "position-relative h-100",
+      children: isPending ? /*#__PURE__*/_jsx(LoadingSpinner, {}) : !!obsCols && !_.size(obsCols) ? /*#__PURE__*/_jsx(Alert, {
+        variant: "danger",
+        children: "No observations found."
+      }) : /*#__PURE__*/_jsx(Accordion, {
+        flush: true,
+        defaultActiveKey: [...active, ...[defaultActiveGroup]],
+        alwaysOpen: true,
+        className: "obs-accordion",
+        children: obsList
+      })
+    });
   } else {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
-      variant: "danger"
-    }, serverError.message));
+    return /*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(Alert, {
+        variant: "danger",
+        children: serverError.message
+      })
+    });
   }
 }

package/dist/esm/components/obs-list/ObsToolbar.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { Form } from "react-bootstrap";
+import { Form } from 'react-bootstrap';
+import { jsx as _jsx } from "react/jsx-runtime";
 export function ObsToolbar(_ref) {
   let {
     item,
@@ -7,7 +7,7 @@ export function ObsToolbar(_ref) {
     onToggleAllObs
   } = _ref;
   const allToggledOn = !item.omit.length;
-  return showToggleAllObs && /*#__PURE__*/React.createElement(Form.Check, {
+  return showToggleAllObs && /*#__PURE__*/_jsx(Form.Check, {
     type: "switch",
     id: "custom-switch",
     label: "Toggle all",

package/dist/esm/components/obsm-list/ObsmList.js

@@ -3,14 +3,20 @@ 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 React, { useEffect, useState } from "react";
-import { Button, ButtonGroup, Dropdown, DropdownButton, OverlayTrigger, Tooltip } from "react-bootstrap";
-import { useDataset } from "../../context/DatasetContext";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { useFetch } from "../../utils/requests";
-import { ObsmKeysListBtn } from "../../utils/Skeleton";
-export function ObsmKeysList() {
-  const ENDPOINT = "obsm/keys";
+import { useEffect, useState } from 'react';
+import _ from 'lodash';
+import { Button, ButtonGroup, Dropdown, DropdownButton, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { DEFAULT_OBSM_KEYS } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { useFetch } from '../../utils/requests';
+import { ObsmKeysListBtn } from '../../utils/Skeleton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ObsmKeysList(_ref) {
+  let {
+    setHasObsm
+  } = _ref;
+  const ENDPOINT = 'obsm/keys';
   const dataset = useDataset();
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
@@ -34,48 +40,81 @@ export function ObsmKeysList() {
     refetchOnMount: false
   });
   useEffect(() => {
-    if (!isPending && !serverError && fetchedData) {
-      setObsmKeysList(fetchedData);
-    }
-  }, [fetchedData, isPending, serverError]);
-  useEffect(() => {
-    if (settings.selectedObsm) {
-      setActive(settings.selectedObsm);
+    if (!isPending && !serverError) {
+      if (!fetchedData || !fetchedData.length) {
+        setHasObsm(false);
+      } else {
+        setHasObsm(true);
+        setObsmKeysList(fetchedData);
+
+        // Set default obsm if in keys list and not selected
+        if (!settings.selectedObsm) {
+          // Follow DEFAULT_OBSM_KEYS order
+          _.each(DEFAULT_OBSM_KEYS, k => {
+            const defaultObsm = _.find(fetchedData, item => item.toLowerCase() === k);
+            if (defaultObsm) {
+              dispatch({
+                type: 'select.obsm',
+                obsm: defaultObsm
+              });
+              return false; // break
+            }
+          });
+        }
+      }
+      if (settings.selectedObsm) {
+        // If selected obsm is not in keys list, reset to null
+        if (!_.includes(fetchedData || [], settings.selectedObsm)) {
+          dispatch({
+            type: 'select.obsm',
+            obsm: null
+          });
+        } else {
+          setActive(settings.selectedObsm);
+        }
+      }
     }
-  }, [settings.selectedObsm]);
+  }, [dispatch, fetchedData, isPending, serverError, setHasObsm, settings.selectedObsm]);
   const obsmList = obsmKeysList.map(item => {
-    return /*#__PURE__*/React.createElement(Dropdown.Item, {
-      key: item,
-      className: "custom ".concat(active === item && "active"),
+    return /*#__PURE__*/_jsx(Dropdown.Item, {
+      className: "custom ".concat(active === item && 'active'),
       onClick: () => {
         dispatch({
-          type: "select.obsm",
+          type: 'select.obsm',
           obsm: item
         });
-      }
+      },
+      children: item
     }, item);
   });
   if (!serverError) {
     if (isPending) {
-      return /*#__PURE__*/React.createElement(ObsmKeysListBtn, null);
+      return /*#__PURE__*/_jsx(ObsmKeysListBtn, {});
     }
-    return /*#__PURE__*/React.createElement(DropdownButton, {
+    return /*#__PURE__*/_jsxs(DropdownButton, {
       as: ButtonGroup,
-      title: settings.selectedObsm || "Select an embedding",
-      variant: settings.selectedObsm ? "primary" : "warning",
+      title: settings.selectedObsm || 'Select an embedding',
+      variant: settings.selectedObsm ? 'primary' : 'warning',
       id: "bg-nested-dropdown",
-      size: "sm"
-    }, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Embeddings"), obsmList);
+      size: "sm",
+      children: [/*#__PURE__*/_jsx(Dropdown.Header, {
+        children: "Embeddings"
+      }), obsmList]
+    });
   } else {
-    return /*#__PURE__*/React.createElement(OverlayTrigger, {
+    return /*#__PURE__*/_jsx(OverlayTrigger, {
       placement: "top",
       delay: {
         show: 100,
         hide: 200
       },
-      overlay: /*#__PURE__*/React.createElement(Tooltip, null, serverError.message)
-    }, /*#__PURE__*/React.createElement(Button, {
-      variant: "danger"
-    }, "Error"));
+      overlay: /*#__PURE__*/_jsx(Tooltip, {
+        children: serverError.message
+      }),
+      children: /*#__PURE__*/_jsx(Button, {
+        variant: "danger",
+        children: "Error"
+      })
+    });
   }
 }