@haniffalab/cherita-react 0.2.0-dev.2024-05-22.5ce64346 → 0.2.0-dev.2024-09-26.f9979478

package/dist/components/scatterplot/SpatialControls.js

@@ -4,30 +4,40 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SpatialControls = SpatialControls;
-require("bootstrap/dist/css/bootstrap.min.css");
-var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
-var _react = require("react");
+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 _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 _cheritaReact = require("@haniffalab/cherita-react");
+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(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 && {}.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
+    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) => {
-    console.log(eventKey); // selected event will trigger
     switch (eventKey) {
       case "DrawPolygonMode":
         setMode(() => _editModes.DrawPolygonMode);
@@ -48,30 +58,71 @@ function SpatialControls(_ref) {
         setMode(() => _editModes.ViewMode);
     }
   };
-  const deleteFeatures = (eventKey, event) => {
-    console.log(eventKey); // selected event will trigger
+  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
         })
@@ -88,7 +139,7 @@ function SpatialControls(_ref) {
         onSelect: onSelect,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Header, {
           children: "Selection tools"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
           eventKey: "DrawPolygonMode",
           children: "Draw a polygon"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
@@ -99,12 +150,12 @@ function SpatialControls(_ref) {
           children: "Modify polygons"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default.Item, {
           eventKey: "ViewMode",
-          children: "ViewMode"
+          children: "Viewing mode"
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dropdown.default.Item, {
           onClick: deleteFeatures,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
             icon: _freeSolidSvgIcons.faTrash
-          }), " Delete Plydons"]
+          }), " Delete polygons"]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
         onClick: handleShowControls,
@@ -112,10 +163,10 @@ function SpatialControls(_ref) {
           icon: _freeSolidSvgIcons.faSliders
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.OffcanvasControls, {
+    }), !!(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: _cheritaReact.ScatterplotControls
+      Controls: _ScatterplotControls.ScatterplotControls
     })]
   });
 }

package/dist/components/scatterplot/Toolbox.js

@@ -4,39 +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 _DatasetContext = require("../../context/DatasetContext");
-var _editModes = require("@nebula.gl/edit-modes");
-var _cheritaReact = require("@haniffalab/cherita-react");
+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 dataset = (0, _DatasetContext.useDataset)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "cherita-toolbox",
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_cheritaReact.ObsmKeysList, {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+      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
-        }), " CD14"]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        }), " ", 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: "Cells XXXX"
-      })]
+        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,18 +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 _reactBootstrap = require("react-bootstrap");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-var _DatasetContext = require("../../context/DatasetContext");
 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 {
@@ -33,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);
@@ -45,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));
@@ -54,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({
@@ -63,19 +62,38 @@ 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.ListGroup.Item, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            class: "d-flex gap-1",
+            className: "d-flex gap-1",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              class: "flex-grow-1",
+              className: "flex-grow-1",
               children: item.name
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
@@ -84,37 +102,45 @@ function VarNamesList(_ref) {
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
                 type: "button",
-                className: "m-0 p-0 px-1 btn-link ".concat(active === item.matrix_index && "active"),
+                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" : "",
+                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)(_reactFontawesome.FontAwesomeIcon, {
-                icon: _freeSolidSvgIcons.faTrash
+              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);
+        }, item.name);
       } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            class: "d-flex",
+            className: "d-flex",
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              class: "flex-grow-1",
+              className: "flex-grow-1",
               children: /*#__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"),
+                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: "multiVarDeselected",
+                      type: "deselect.multivar",
                       var: item
                     });
                   } else {
@@ -131,12 +157,12 @@ function VarNamesList(_ref) {
               })]
             })]
           })
-        }, item);
+        }, 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]);
@@ -155,6 +181,7 @@ function VarNamesList(_ref) {
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
             variant: "link",
             onClick: () => {
+              setVarButtons([]);
               dispatch({
                 type: mode === _constants.SELECTION_MODES.SINGLE ? "reset.var" : "reset.multiVar"
               });

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
+          })]
+        })]
+      })
+    })
+  });
+}

package/dist/constants/colorscales.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COLORSCALES = void 0;
+// From plotly https://github.com/plotly/plotly.js/blob/5bc25b490702e5ed61265207833dbd58e8ab27f1/src/components/colorscale/scales.js
+const COLORSCALES = exports.COLORSCALES = {
+  Greys: ["#000000", "#ffffff"],
+  YlGnBu: ["#081d58", "#253494", "#225ea8", "#1d91c0", "#41b6c4", "#7fcdbb", "#c7e9b4", "#edf8d9", "#ffffd9"],
+  Greens: ["#00441b", "#006d2c", "#238b45", "#41ab5d", "#74c476", "#a1d9a5", "#c7e9c0", "#e5f5e0", "#f7fcf5"],
+  YlOrRd: ["#800026", "#bd0026", "#e31a1c", "#fc4e2a", "#fd8d3c", "#feb24c", "#fed976", "#ffed9f", "#ffffcc"],
+  Bluered: ["#0000ff", "#ff0000"],
+  RdBu: ["#050aac", "#6a89f7", "#bebebe", "#dcaa84", "#e6915a", "#b20a1c"],
+  Reds: ["#dcdcdc", "#f5c39d", "#f5a069", "#b20a1c"],
+  Blues: ["#050aac", "#283cba", "#4664f5", "#5a78f5", "#6a89f7", "#dcdcdc"],
+  Picnic: ["#0000ff", "#3399ff", "#66ccff", "#99ccff", "#ccccff", "#ffffff", "#ffccff", "#ff99ff", "#ff66cc", "#ff6666", "#ff0000"],
+  Rainbow: ["#96005a", "#0000c8", "#0019ff", "#0098ff", "#2cff96", "#97ff00", "#ffe600", "#ff6f00", "#ff0000"],
+  Portland: ["#0c3383", "#0a88ba", "#f2d338", "#f28f38", "#d91e1e"],
+  Jet: ["#000083", "#003caa", "#05ffff", "#ffff00", "#fa0000", "#800000"],
+  Hot: ["#000000", "#e60000", "#ffd200", "#ffffff"],
+  Blackbody: ["#000000", "#e60000", "#e6d200", "#ffffff", "#a0c8ff"],
+  Earth: ["#000082", "#00b4b4", "#28d228", "#e6e632", "#784614", "#ffffff"],
+  Electric: ["#000000", "#1e0064", "#780064", "#a05a00", "#e6c800", "#fffadc"],
+  Viridis: ["#440154", "#48186a", "#472d7b", "#424086", "#3b528b", "#33638d", "#2c728e", "#26828e", "#21918c", "#1fa088", "#28ae80", "#3fbc73", "#5ec962", "#84d44b", "#addc30", "#d8e219", "#fde725"],
+  Cividis: ["#00204c", "#002a66", "#00346e", "#273f6c", "#3c4a6c", "#4c556b", "#5b5f6d", "#686a70", "#757575", "#838178", "#929c78", "#a19676", "#b0a572", "#c0af6d", "#d1ba65", "#e1c75c", "#f3db4f", "#ffe945"],
+  Accent: ["#7fc97f", "#beaed4", "#fdc086", "#ffff99", "#386cb0", "#f0027f", "#bf5b17", "#666666"]
+};