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

package/dist/components/scatterplot/SpatialControls.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpatialControls = SpatialControls;
+var _react = _interopRequireWildcard(require("react"));
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+var _iconsMaterial = require("@mui/icons-material");
+var _editModes = require("@nebula.gl/edit-modes");
+var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
+var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
+var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
+var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
+var _ScatterplotControls = require("./ScatterplotControls");
+var _DatasetContext = require("../../context/DatasetContext");
+var _Offcanvas = require("../Offcanvas");
+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 && {}.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 SpatialControls(_ref) {
+  var _features$features;
+  let {
+    mode,
+    setMode,
+    features,
+    setFeatures,
+    selectedFeatureIndexes,
+    resetBounds,
+    increaseZoom,
+    decreaseZoom
+  } = _ref;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const [showControls, setShowControls] = (0, _react.useState)(false);
+  const handleCloseControls = () => setShowControls(false);
+  const handleShowControls = () => setShowControls(true);
+  const onSelect = (eventKey, event) => {
+    switch (eventKey) {
+      case "DrawPolygonMode":
+        setMode(() => _editModes.DrawPolygonMode);
+        break;
+      case "DrawLineStringMode":
+        setMode(() => _editModes.DrawLineStringMode);
+        break;
+      case "DrawPolygonByDraggingMode":
+        setMode(() => _editModes.DrawPolygonByDraggingMode);
+        break;
+      case "DrawRectangleMode":
+        setMode(() => _editModes.DrawRectangleMode);
+        break;
+      case "ModifyMode":
+        setMode(() => _editModes.ModifyMode);
+        break;
+      default:
+        setMode(() => _editModes.ViewMode);
+    }
+  };
+  const deleteFeatures = (_eventKey, _event) => {
+    setFeatures({
+      type: "FeatureCollection",
+      features: []
+    });
+  };
+  const polygonControls = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "mt-2",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
+      vertical: true,
+      className: "w-100",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        variant: dataset.sliceBy.polygons ? "primary" : "outline-primary",
+        title: "Filter data with polygons",
+        onClick: () => {
+          setMode(() => _editModes.ViewMode);
+          dispatch({
+            type: "toggle.slice.polygons"
+          });
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.JoinInner, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        variant: "outline-primary",
+        title: "Delete selected polygons",
+        onClick: () => {
+          const newFeatures = features.features.filter((_f, i) => !selectedFeatureIndexes.includes(i));
+          setFeatures({
+            type: "FeatureCollection",
+            features: newFeatures
+          });
+        },
+        disabled: !selectedFeatureIndexes.length,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faTrash
+        })
+      })]
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "cherita-spatial-controls",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
+      vertical: true,
+      className: "w-100",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: increaseZoom,
+        title: "Increase zoom",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faPlus
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: decreaseZoom,
+        title: "Decrease zoom",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faMinus
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: resetBounds,
+        title: "Reset zoom and center",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faCrosshairs
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: () => setMode(() => _editModes.ViewMode),
+        title: "Set dragging mode",
+        variant: mode === _editModes.ViewMode ? "primary" : "outline-primary",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faHand
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropdownButton.default, {
+        as: _ButtonGroup.default,
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faDrawPolygon
+          })
+        }),
+        drop: "end",
+        id: "bg-vertical-dropdown-1",
+        className: "caret-off",
+        onSelect: onSelect,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Header, {
+          children: "Selection tools"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+          eventKey: "DrawPolygonMode",
+          children: "Draw a polygon"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+          eventKey: "DrawPolygonByDraggingMode",
+          children: "Draw a Polygon by Dragging"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+          eventKey: "ModifyMode",
+          children: "Modify polygons"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+          eventKey: "ViewMode",
+          children: "Viewing mode"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default.Item, {
+          onClick: deleteFeatures,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faTrash
+          }), " Delete polygons"]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: handleShowControls,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faSliders
+        })
+      })]
+    }), !!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _features$features.length) && polygonControls, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Offcanvas.OffcanvasControls, {
+      show: showControls,
+      handleClose: handleCloseControls,
+      Controls: _ScatterplotControls.ScatterplotControls
+    })]
+  });
+}

package/dist/components/scatterplot/Toolbox.js

@@ -4,89 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Toolbox = Toolbox;
-require("bootstrap/dist/css/bootstrap.min.css");
-var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
 var _react = require("react");
-var _editModes = require("@nebula.gl/edit-modes");
+var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
-var _DropdownButton = _interopRequireDefault(require("react-bootstrap/DropdownButton"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _ObsmList = require("../obsm-list/ObsmList");
 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 Toolbox(_ref) {
   let {
     mode,
-    setMode,
-    features,
-    setFeatures
+    obsLength,
+    slicedLength
   } = _ref;
-  const onSelect = (eventKey, event) => {
-    console.log(eventKey); // selected event will trigger
-    switch (eventKey) {
-      case "DrawPolygonMode":
-        setMode(() => _editModes.DrawPolygonMode);
-        break;
-      case "DrawLineStringMode":
-        setMode(() => _editModes.DrawLineStringMode);
-        break;
-      case "DrawPolygonByDraggingMode":
-        setMode(() => _editModes.DrawPolygonByDraggingMode);
-        break;
-      case "DrawRectangleMode":
-        setMode(() => _editModes.DrawRectangleMode);
-        break;
-      case "ModifyMode":
-        setMode(() => _editModes.ModifyMode);
-        break;
-      default:
-        setMode(() => _editModes.ViewMode);
-    }
-  };
-  const deleteFeatures = (eventKey, event) => {
-    console.log(eventKey); // selected event will trigger
-    setFeatures({
-      type: "FeatureCollection",
-      features: []
-    });
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "cherita-toolbox",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropdownButton.default, {
-        as: _ButtonGroup.default,
-        title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
-            icon: _freeSolidSvgIcons.faArrowPointer
-          }), " Mode"]
-        }),
-        id: "bg-nested-dropdown",
-        onSelect: onSelect,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "DrawPolygonMode",
-          children: "DrawPolygonMode"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "DrawLineStringMode",
-          children: "DrawLineStringMode"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "DrawPolygonByDraggingMode",
-          children: "DrawPolygonByDraggingMode"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "DrawRectangleMode",
-          children: "DrawRectangleMode"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "ModifyMode",
-          children: "ModifyMode"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
-          eventKey: "ViewMode",
-          children: "ViewMode"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-        variant: "primary",
-        onClick: deleteFeatures,
-        children: "Delete"
-      })]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsmList.ObsmKeysList, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        size: "sm",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+          icon: _freeSolidSvgIcons.faDroplet
+        }), " ", mode]
+      }), (mode || !Number.isNaN(obsLength)) && (mode !== null && !Number.isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        size: "sm",
+        children: [slicedLength.toLocaleString(), " out of", " ", obsLength.toLocaleString(), " cells"]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        size: "sm",
+        children: [obsLength.toLocaleString(), " cells"]
+      }))]
     })
   });
 }

package/dist/components/search-bar/SearchBar.js

@@ -9,9 +9,9 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _SearchResults = require("./SearchResults");
 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 _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 SearchBar(_ref) {
   let {
     searchVar = true,

package/dist/components/search-bar/SearchResults.js

@@ -11,9 +11,9 @@ var _reactBootstrap = require("react-bootstrap");
 var _DatasetContext = require("../../context/DatasetContext");
 var _search = require("../../utils/search");
 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 _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 VarSearchResults(_ref) {
   let {
     text,

package/dist/components/var-list/VarList.js

@@ -4,16 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VarNamesList = VarNamesList;
-require("bootstrap/dist/css/bootstrap.min.css");
 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 _DatasetContext = require("../../context/DatasetContext");
-var _constants = require("../../constants/constants");
 var _reactBootstrap = require("react-bootstrap");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
 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 _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 VarNamesList(_ref) {
   var _dataset$selectedVar, _dataset$selectedDise, _dataset$selectedDise2, _dataset$selectedDise3;
   let {
@@ -31,7 +32,7 @@ function VarNamesList(_ref) {
         if (dataset.selectedVar) {
           return _lodash.default.unionWith(v, [dataset.selectedVar], _lodash.default.isEqual);
         } else {
-          return [];
+          return v;
         }
       });
       setActive((_dataset$selectedVar2 = dataset.selectedVar) === null || _dataset$selectedVar2 === void 0 ? void 0 : _dataset$selectedVar2.matrix_index);
@@ -43,7 +44,7 @@ function VarNamesList(_ref) {
         if (dataset.selectedMultiVar.length) {
           return _lodash.default.unionWith(v, dataset.selectedMultiVar, _lodash.default.isEqual);
         } else {
-          return [];
+          return v;
         }
       });
       setActive(dataset.selectedMultiVar.map(i => i.matrix_index));
@@ -52,7 +53,7 @@ function VarNamesList(_ref) {
   const selectVar = (0, _react.useCallback)(item => {
     if (mode === _constants.SELECTION_MODES.SINGLE) {
       dispatch({
-        type: "varSelected",
+        type: "select.var",
         var: item
       });
       dispatch({
@@ -61,49 +62,107 @@ function VarNamesList(_ref) {
       });
     } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
       dispatch({
-        type: "multiVarSelected",
+        type: "select.multivar",
         var: item
       });
     }
   }, [dispatch, mode]);
+  const removeVar = (0, _react.useCallback)(v => {
+    setVarButtons(b => {
+      return b.filter(i => i.name !== v.name);
+    });
+    if (mode === _constants.SELECTION_MODES.SINGLE) {
+      if (active === v.matrix_index) {
+        dispatch({
+          type: "deselect.var"
+        });
+      }
+    } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+      if (active.includes(v.matrix_index)) {
+        dispatch({
+          type: "deselect.multivar",
+          var: v
+        });
+      }
+    }
+  }, [active, dispatch, mode]);
   const makeList = (0, _react.useCallback)(vars => {
     return vars.map(item => {
       if (item && mode === _constants.SELECTION_MODES.SINGLE) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          type: "button",
-          variant: item.matrix_index !== -1 ? "outline-primary" : "outline-secondary",
-          className: "".concat(active === item.matrix_index && "active", " m-1"),
-          onClick: () => {
-            selectVar(item);
-          },
-          disabled: item.matrix_index === -1,
-          title: item.matrix_index === -1 ? "Not present in data" : "",
-          children: item.name
-        }, item.matrix_index);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "d-flex gap-1",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "flex-grow-1",
+              children: item.name
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                icon: _freeSolidSvgIcons.faCircleInfo
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                type: "button",
+                variant: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && active === item.matrix_index ? "primary" : "outline-primary",
+                className: "m-0 p-0 px-1",
+                onClick: () => {
+                  selectVar(item);
+                },
+                disabled: item.matrix_index === -1,
+                title: item.matrix_index === -1 ? "Not present in data" : "Set as color encoding",
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                  icon: _freeSolidSvgIcons.faDroplet
+                })
+              }, item.matrix_index)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                type: "button",
+                className: "m-0 p-0 px-1",
+                variant: "outline-secondary",
+                title: "Remove from list",
+                onClick: () => removeVar(item),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                  icon: _freeSolidSvgIcons.faTrash
+                })
+              })
+            })]
+          })
+        }, item.name);
       } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
-          type: "button",
-          variant: item.matrix_index !== -1 ? "outline-primary" : "outline-secondary",
-          className: "".concat(active.includes(item.matrix_index) && "active", " m-1"),
-          onClick: () => {
-            if (active.includes(item.matrix_index)) {
-              dispatch({
-                type: "multiVarDeselected",
-                var: item
-              });
-            } else {
-              selectVar(item);
-            }
-          },
-          disabled: item.matrix_index === -1,
-          title: item.matrix_index === -1 ? "Not present in data" : "",
-          children: item.name
-        }, item.matrix_index);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "d-flex",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "flex-grow-1",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                type: "button",
+                variant: item.matrix_index !== -1 && _lodash.default.includes(active, item.matrix_index) ? "primary" : "outline-primary",
+                className: "m-0 p-0 px-1",
+                onClick: () => {
+                  if (active.includes(item.matrix_index)) {
+                    dispatch({
+                      type: "deselect.multivar",
+                      var: item
+                    });
+                  } else {
+                    selectVar(item);
+                  }
+                },
+                disabled: item.matrix_index === -1,
+                title: item.matrix_index === -1 ? "Not present in data" : "",
+                children: item.name
+              }, item.matrix_index)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              children: [" ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+                icon: _freeSolidSvgIcons.faPlus
+              })]
+            })]
+          })
+        }, item.name);
       } else {
         return null;
       }
     });
-  }, [active, dispatch, mode, selectVar]);
+  }, [active, dataset.colorEncoding, dispatch, mode, removeVar, selectVar]);
   const varList = (0, _react.useMemo)(() => {
     return makeList(varButtons);
   }, [makeList, varButtons]);
@@ -122,13 +181,16 @@ function VarNamesList(_ref) {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
             variant: "link",
             onClick: () => {
+              setVarButtons([]);
               dispatch({
                 type: mode === _constants.SELECTION_MODES.SINGLE ? "reset.var" : "reset.multiVar"
               });
             },
             children: "clear"
           })]
-        }), varList]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+          children: varList
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: ((_dataset$selectedDise = dataset.selectedDisease) === null || _dataset$selectedDise === void 0 ? void 0 : _dataset$selectedDise.id) && ((_dataset$selectedDise2 = dataset.selectedDisease) === null || _dataset$selectedDise2 === void 0 || (_dataset$selectedDise2 = _dataset$selectedDise2.genes) === null || _dataset$selectedDise2 === void 0 ? void 0 : _dataset$selectedDise2.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/dist/components/violin/Violin.js

@@ -4,58 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Violin = Violin;
-exports.ViolinControls = ViolinControls;
-require("bootstrap/dist/css/bootstrap.min.css");
 var _react = _interopRequireWildcard(require("react"));
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
+var _reactFontawesome = require("@fortawesome/react-fontawesome");
+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 _DatasetContext = require("../../context/DatasetContext");
+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 ViolinControls() {
-  const dataset = (0, _DatasetContext.useDataset)();
-  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const [activeStandardScale, setActiveStandardScale] = (0, _react.useState)(dataset.controls.standardScale);
-  (0, _react.useEffect)(() => {
-    if (dataset.controls.standardScale) {
-      setActiveStandardScale(_constants.VIOLINPLOT_STANDARDSCALES.find(obs => obs.value === dataset.controls.standardScale).name);
-    }
-  }, [dataset.controls.standardScale]);
-  const standardScaleList = _constants.VIOLINPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
-    active: activeStandardScale === item.value,
-    onClick: () => {
-      dispatch({
-        type: "set.controls.standardScale",
-        standardScale: item.value
-      });
-    },
-    children: item.name
-  }, item.value));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonToolbar, {
-    children: /*#__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: activeStandardScale
-          }), /*#__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 Violin(_ref) {
   let {
     mode = _constants.VIOLIN_MODES.MULTIKEY
@@ -124,7 +85,7 @@ function Violin(_ref) {
     if (hasSelections) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "cherita-violin position-relative",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingSpinner.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
           children: mode
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
           data: data,

package/dist/components/violin/ViolinControls.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViolinControls = ViolinControls;
+var _react = _interopRequireWildcard(require("react"));
+var _reactBootstrap = require("react-bootstrap");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _jsxRuntime = require("react/jsx-runtime");
+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 && {}.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 ViolinControls() {
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const [activeStandardScale, setActiveStandardScale] = (0, _react.useState)(dataset.controls.standardScale);
+  (0, _react.useEffect)(() => {
+    if (dataset.controls.standardScale) {
+      setActiveStandardScale(_constants.VIOLINPLOT_STANDARDSCALES.find(obs => obs.value === dataset.controls.standardScale).name);
+    }
+  }, [dataset.controls.standardScale]);
+  const standardScaleList = _constants.VIOLINPLOT_STANDARDSCALES.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+    active: activeStandardScale === item.value,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.standardScale",
+        standardScale: item.value
+      });
+    },
+    children: item.name
+  }, item.value));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ButtonToolbar, {
+    children: /*#__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: activeStandardScale
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
+            children: standardScaleList
+          })]
+        })]
+      })
+    })
+  });
+}