@haniffalab/cherita-react 0.2.0-dev.2024-05-21.ca7d726c → 0.2.0-dev.2024-09-26.f9979478

package/dist/components/matrixplot/Matrixplot.js

@@ -4,70 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Matrixplot = Matrixplot;
-exports.MatrixplotControls = MatrixplotControls;
-require("bootstrap/dist/css/bootstrap.min.css");
 var _react = _interopRequireWildcard(require("react"));
+var _reactBootstrap = require("react-bootstrap");
 var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
-var _constants = require("../../constants/constants");
-var _reactBootstrap = require("react-bootstrap");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-var _LoadingSpinner = require("../../utils/LoadingSpinner");
 var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function MatrixplotControls() {
-  const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const colorScaleList = _constants.PLOTLY_COLORSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
-    active: dataset.controls.colorScale === item,
-    onClick: () => {
-      dispatch({
-        type: "set.controls.colorScale",
-        colorScale: item
-      });
-    },
-    children: item
-  }, item));
-  const standardScaleList = _constants.MATRIXPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
-    active: dataset.controls.standardScale === item.name,
-    onClick: () => {
-      dispatch({
-        type: "set.controls.standardScale",
-        standardScale: item.value
-      });
-    },
-    children: item.name
-  }, item.value));
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonToolbar, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
-          id: "dropdownColorscale",
-          variant: "light",
-          children: dataset.controls.colorScale
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
-          children: colorScaleList
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
-          children: "Standard scale"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
-            id: "dropdownStandardScale",
-            variant: "light",
-            children: dataset.controls.standardScale
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
-            children: standardScaleList
-          })]
-        })]
-      })
-    })]
-  });
-}
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function Matrixplot() {
   const ENDPOINT = "matrixplot";
   const dataset = (0, _DatasetContext.useDataset)();
@@ -132,7 +78,7 @@ function Matrixplot() {
     if (hasSelections) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "cherita-matrixplot position-relative",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
+        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
           data: data,
           layout: layout,
           useResizeHandler: true,

package/dist/components/matrixplot/MatrixplotControls.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MatrixplotControls = MatrixplotControls;
+var _react = _interopRequireDefault(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _colorscales = require("../../constants/colorscales");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function MatrixplotControls() {
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const colorScaleList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    active: dataset.controls.colorScale === key,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.colorScale",
+        colorScale: key
+      });
+    },
+    children: key
+  }, key));
+  const standardScaleList = _constants.MATRIXPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    active: dataset.controls.standardScale === item.name,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.standardScale",
+        standardScale: item.value
+      });
+    },
+    children: item.name
+  }, item.value));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonToolbar, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
+          id: "dropdownColorscale",
+          variant: "light",
+          children: dataset.controls.colorScale
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
+          children: colorScaleList
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonGroup, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
+          children: "Standard scale"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Dropdown, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Toggle, {
+            id: "dropdownStandardScale",
+            variant: "light",
+            children: dataset.controls.standardScale
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
+            children: standardScaleList
+          })]
+        })]
+      })
+    })]
+  });
+}

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

@@ -4,19 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ObsColsList = ObsColsList;
-require("bootstrap/dist/css/bootstrap.min.css");
-require("bootstrap/dist/js/bootstrap.bundle.min.js");
-var _lodash = _interopRequireDefault(require("lodash"));
 var _react = _interopRequireWildcard(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _ObsValueList = require("./ObsValueList");
+var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
+var _colorHelper = require("../../helpers/color-helper");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-var _chromaJs = _interopRequireDefault(require("chroma-js"));
-var _LoadingSpinner = require("../../utils/LoadingSpinner");
-var _reactBootstrap = require("react-bootstrap");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const N_BINS = 5;
 function binContinuous(data) {
   let nBins = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : N_BINS;
@@ -47,17 +49,19 @@ function binDiscrete(data) {
   };
 }
 function ObsColsList() {
-  var _dataset$selectedObs;
+  var _dataset$selectedObs, _dataset$selectedObs4, _dataset$selectedObs6;
   const ENDPOINT = "obs/cols";
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const [obsColsList, setObsColsList] = (0, _react.useState)([]);
-  const [obs, setObs] = (0, _react.useState)([]);
-  const [updatedObsColsList, setUpdatedObsColsList] = (0, _react.useState)(false);
+  const [obsCols, setObsCols] = (0, _react.useState)({});
+  const [updatedObsCols, setupdatedObsCols] = (0, _react.useState)(false);
   const [active, setActive] = (0, _react.useState)((_dataset$selectedObs = dataset.selectedObs) === null || _dataset$selectedObs === void 0 ? void 0 : _dataset$selectedObs.name);
   const [params, setParams] = (0, _react.useState)({
     url: dataset.url
   });
+  const {
+    getColor
+  } = (0, _colorHelper.useColor)();
   (0, _react.useEffect)(() => {
     setParams(p => {
       return {
@@ -73,101 +77,265 @@ function ObsColsList() {
   } = (0, _requests.useFetch)(ENDPOINT, params, {
     refetchOnMount: false
   });
-  const validateSelection = (0, _react.useCallback)(selectedObs => {
-    if (updatedObsColsList) {
-      if (!_lodash.default.some(obsColsList, selectedObs)) {
+  const validateSelection = (0, _react.useCallback)(obs => {
+    if (!_lodash.default.isEqual(_lodash.default.omit(obsCols[obs.name], ["omit"]), _lodash.default.omit(obs, ["omit"]))) return false;
+    if (!_lodash.default.isEqual(obsCols[obs.name].omit, obs.omit)) {
+      setObsCols(o => {
+        return {
+          ...o,
+          [obs.name]: {
+            ...o[obs.name],
+            omit: obs.omit
+          }
+        };
+      });
+    }
+    return true;
+  }, [obsCols]);
+  (0, _react.useEffect)(() => {
+    if (updatedObsCols) {
+      if (dataset.selectedObs) {
+        if (validateSelection(dataset.selectedObs)) {
+          setActive(dataset.selectedObs.name);
+        } else {
+          dispatch({
+            type: "select.obs",
+            obs: null
+          });
+          setActive(null);
+        }
+      } else {
         setActive(null);
-        dispatch({
-          type: "obsSelected",
-          obs: null
-        });
       }
     }
-  }, [dispatch, obsColsList, updatedObsColsList]);
+  }, [dataset.selectedObs, dispatch, updatedObsCols, validateSelection]);
+
+  // @TODO: change api to return all obs and truncate here
   (0, _react.useEffect)(() => {
     if (!isPending && !serverError) {
-      setObs(fetchedData.reduce((result, key) => {
-        const colors = _chromaJs.default.scale("Accent").colors(key.n_values, "rgb");
-        result[key.name] = {
-          type: key.type
-        };
-        if (key.type === "categorical") {
-          result[key.name]["is_truncated"] = key.is_truncated;
-          result[key.name]["n_values"] = key.n_values;
-          result[key.name]["values"] = key.values;
-          result[key.name]["state"] = key.values.map((value, index) => {
-            return {
-              value: value,
-              color: (0, _chromaJs.default)(colors[index]).rgb(),
-              checked: true
-            };
-          });
-        }
-        return result;
-      }, {}));
-      setObsColsList(fetchedData.map(d => {
-        if (d.type === "continuous") {
+      setObsCols(_lodash.default.keyBy(_lodash.default.map(fetchedData, d => {
+        if (d.type === _constants.OBS_TYPES.CONTINUOUS) {
           d = binContinuous(d);
-        }
-        if (d.type === "discrete") {
+        } else if (d.type === _constants.OBS_TYPES.DISCRETE) {
           d = binDiscrete(d);
         }
-        return d;
-      }));
-      setUpdatedObsColsList(true);
+        return {
+          ...d,
+          omit: []
+        };
+      }), "name"));
+      setupdatedObsCols(true);
     }
   }, [fetchedData, isPending, serverError]);
-  (0, _react.useEffect)(() => {
-    if (dataset.selectedObs) {
-      validateSelection(dataset.selectedObs);
-      setActive(dataset.selectedObs.name);
-    } else {
-      setActive(null);
-    }
-  }, [dataset.selectedObs, validateSelection]);
-  (0, _react.useEffect)(() => {
-    dispatch({
-      type: "set.obs",
-      value: obs
+  const toggleAll = (0, _react.useCallback)((item, checked, active) => {
+    const omit = checked ? [] : _lodash.default.map(item.values, v => item.codes[v]);
+    setObsCols(o => {
+      return {
+        ...o,
+        [item.name]: {
+          ...item,
+          omit: omit
+        }
+      };
     });
-  }, [obs, dispatch]);
+    if (active === item.name) {
+      dispatch({
+        type: "select.obs",
+        obs: {
+          ...item,
+          omit: omit
+        }
+      });
+    }
+  }, [dispatch]);
   const categoricalList = (0, _react.useCallback)(function (item) {
+    var _dataset$selectedObs2, _dataset$selectedObs3;
     let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    const codesMap = _lodash.default.invert(item.codes);
+    const inLabelObs = _lodash.default.some(dataset.labelObs, i => _lodash.default.isEqual(i, {
+      name: item.name,
+      type: item.type,
+      codesMap: codesMap
+    }));
+    const min = _lodash.default.min(_lodash.default.values(item.codes));
+    const max = _lodash.default.max(_lodash.default.values(item.codes));
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
       className: item.name === active ? "cherita-accordion-active" : "",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Header, {
         children: item.name
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Body, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
-          variant: "flush",
-          children: item.values.map((value, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ListGroup, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "d-flex justify-content-between",
+              className: "d-flex",
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "text-wrap text-break",
-                children: value
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                className: "cm-string cm-color",
-                style: {
-                  backgroundColor: "rgb(".concat(obs[item.name]["state"][index]["color"], ")")
-                }
+                className: "flex-grow-1",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Check, {
+                  // prettier-ignore
+                  type: "switch",
+                  id: "custom-switch",
+                  label: "Toggle all",
+                  checked: !item.omit.length,
+                  onChange: () => {
+                    toggleAll(item, !!item.omit.length, active);
+                  }
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonGroup, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                    variant: inLabelObs ? "primary" : "outline-primary",
+                    size: "sm",
+                    onClick: () => {
+                      if (inLabelObs) {
+                        dispatch({
+                          type: "remove.label.obs",
+                          obsName: item.name
+                        });
+                      } else {
+                        dispatch({
+                          type: "add.label.obs",
+                          obs: {
+                            name: item.name,
+                            type: item.type,
+                            codesMap: codesMap
+                          }
+                        });
+                      }
+                    },
+                    title: "Add to tooltip",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                      icon: _freeSolidSvgIcons.faFont
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                    variant: dataset.sliceBy.obs && ((_dataset$selectedObs2 = dataset.selectedObs) === null || _dataset$selectedObs2 === void 0 ? void 0 : _dataset$selectedObs2.name) === item.name ? "primary" : "outline-primary",
+                    size: "sm",
+                    onClick: () => {
+                      dispatch({
+                        type: "toggle.slice.obs",
+                        obs: item
+                      });
+                    },
+                    title: "Slice to selected",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                      icon: _freeSolidSvgIcons.faEye
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                    variant: dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_dataset$selectedObs3 = dataset.selectedObs) === null || _dataset$selectedObs3 === void 0 ? void 0 : _dataset$selectedObs3.name) === item.name ? "primary" : "outline-primary",
+                    size: "sm",
+                    onClick: () => {
+                      dispatch({
+                        type: "select.obs",
+                        obs: item
+                      });
+                      dispatch({
+                        type: "set.colorEncoding",
+                        value: "obs"
+                      });
+                    },
+                    title: "Set as color encoding",
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                      icon: _freeSolidSvgIcons.faDroplet
+                    })
+                  })]
+                })
               })]
             })
-          }, index))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsValueList.ObsValueList, {
+            item: item,
+            onChange: value => {
+              const newItem = {
+                ...item,
+                omit: !_lodash.default.includes(item.omit, item.codes[value]) ? [...item.omit, item.codes[value]] : _lodash.default.filter(item.omit, o => o !== item.codes[value])
+              };
+              setObsCols(o => {
+                return {
+                  ...o,
+                  [item.name]: newItem
+                };
+              });
+              if (active === item.name) {
+                dispatch({
+                  type: "select.obs",
+                  obs: newItem
+                });
+              }
+            },
+            getFillColor: value => {
+              return "rgb(".concat(getColor((item.codes[value] - min) / (max - min), true, _lodash.default.includes(item.omit, item.codes[value]), {
+                alpha: 1
+              }, "obs"), ")");
+            }
+          })]
         })
       })]
     }, item.name);
-  }, [obs]);
+  }, [dataset.labelObs, dataset.sliceBy.obs, (_dataset$selectedObs4 = dataset.selectedObs) === null || _dataset$selectedObs4 === void 0 ? void 0 : _dataset$selectedObs4.name, dataset.colorEncoding, toggleAll, dispatch, getColor]);
   const continuousList = (0, _react.useCallback)(function (item) {
+    var _dataset$selectedObs5;
     let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    const inLabelObs = _lodash.default.some(dataset.labelObs, i => _lodash.default.isEqual(i, {
+      name: item.name,
+      type: item.type
+    }));
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
       eventKey: item.name,
       className: item.name === active ? "cherita-accordion-active" : "",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion.Header, {
         children: item.name
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Body, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "d-flex justify-content-end",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.ButtonGroup, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                  variant: inLabelObs ? "primary" : "outline-primary",
+                  size: "sm",
+                  onClick: () => {
+                    if (inLabelObs) {
+                      dispatch({
+                        type: "remove.label.obs",
+                        obsName: item.name
+                      });
+                    } else {
+                      dispatch({
+                        type: "add.label.obs",
+                        obs: {
+                          name: item.name,
+                          type: item.type
+                        }
+                      });
+                    }
+                  },
+                  title: "Add to tooltip",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                    icon: _freeSolidSvgIcons.faFont
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                  variant: dataset.colorEncoding === _constants.COLOR_ENCODINGS.OBS && ((_dataset$selectedObs5 = dataset.selectedObs) === null || _dataset$selectedObs5 === void 0 ? void 0 : _dataset$selectedObs5.name) === item.name ? "primary" : "outline-primary",
+                  size: "sm",
+                  onClick: key => {
+                    if (key != null) {
+                      dispatch({
+                        type: "select.obs",
+                        obs: item
+                      });
+                      dispatch({
+                        type: "set.colorEncoding",
+                        value: "obs"
+                      });
+                    }
+                  },
+                  title: "Set as color encoding",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                    icon: _freeSolidSvgIcons.faDroplet
+                  })
+                })]
+              })
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
           children: ["Min: ", item.min]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
           children: ["Max: ", item.max]
@@ -180,7 +348,7 @@ function ObsColsList() {
         })]
       })]
     }, item.name);
-  }, []);
+  }, [dataset.colorEncoding, dataset.labelObs, (_dataset$selectedObs6 = dataset.selectedObs) === null || _dataset$selectedObs6 === void 0 ? void 0 : _dataset$selectedObs6.name, dispatch]);
   const otherList = (0, _react.useCallback)(function (item) {
     let active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Accordion.Item, {
@@ -193,35 +361,25 @@ function ObsColsList() {
       })]
     }, item.name);
   }, []);
-  const obsList = (0, _react.useMemo)(() => obsColsList.map(item => {
-    if (item.type === "categorical") {
+  const obsList = (0, _react.useMemo)(() => _lodash.default.keys(obsCols).map(o => {
+    const item = obsCols[o];
+    if (item.type === _constants.OBS_TYPES.CATEGORICAL) {
       return categoricalList(item, active);
-    } else if (item.type === "continuous") {
+    } else if (item.type === _constants.OBS_TYPES.CONTINUOUS) {
       return continuousList(item, active);
     } else {
       return otherList(item, active);
     }
-  }), [obsColsList, categoricalList, active, continuousList, otherList]);
+  }), [obsCols, categoricalList, active, continuousList, otherList]);
   if (!serverError) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "position-relative",
+      className: "position-relative h-100",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "list-group overflow-auto",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion, {
+        className: "list-group overflow-auto h-100",
+        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Accordion, {
           flush: true,
           defaultActiveKey: active,
-          onSelect: key => {
-            if (key != null) {
-              dispatch({
-                type: "obsSelected",
-                obs: obsColsList.find(obs => obs.name === key)
-              });
-              dispatch({
-                type: "set.colorEncoding",
-                value: "obs"
-              });
-            }
-          },
+          alwaysOpen: true,
           children: obsList
         })]
       })