@haniffalab/cherita-react 0.1.12-dev.2024-02-12.197c465a → 0.1.12-dev.2024-02-12.f6d21b70

package/dist/components/dotplot/Dotplot.js

@@ -14,6 +14,7 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
 var _requests = require("../../utils/requests");
 var _reactBootstrap = require("react-bootstrap");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -269,8 +270,8 @@ function Dotplot() {
   }, [dataset.controls.colorAxis.cmin, dataset.controls.colorAxis.cmax]);
   if (hasSelections) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-dotplot"
-    }, /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      className: "cherita-dotplot position-relative"
+    }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
       layout: layout,
       useResizeHandler: true,

package/dist/components/heatmap/Heatmap.js

@@ -13,6 +13,7 @@ var _reactPlotly = _interopRequireDefault(require("react-plotly.js"));
 var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
 var _requests = require("../../utils/requests");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -117,8 +118,8 @@ function Heatmap() {
   }, [dataset.controls.colorScale, updateColorscale]);
   if (hasSelections) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-heatmap"
-    }, /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      className: "cherita-heatmap position-relative"
+    }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
       layout: layout,
       useResizeHandler: true,

package/dist/components/matrixplot/Matrixplot.js

@@ -14,6 +14,7 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
 var _reactBootstrap = require("react-bootstrap");
 var _requests = require("../../utils/requests");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -135,8 +136,8 @@ function Matrixplot() {
   }, [dataset.controls.colorScale, updateColorscale]);
   if (hasSelections) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-matrixplot"
-    }, /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      className: "cherita-matrixplot position-relative"
+    }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
       layout: layout,
       useResizeHandler: true,

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

@@ -13,6 +13,7 @@ var _requests = require("../../utils/requests");
 var _reactBootstrap = require("react-bootstrap");
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _color = require("../../helpers/color");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -133,7 +134,9 @@ function ObsColsList() {
     return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Item, {
       key: item.name,
       eventKey: item.name
-    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Header, null, item.name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Body, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, item.values.map(function (value, index) {
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Header, null, item.name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion.Body, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+      variant: "flush"
+    }, item.values.map(function (value, index) {
       return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
         key: index
       }, value, /*#__PURE__*/_react.default.createElement("span", {
@@ -168,18 +171,21 @@ function ObsColsList() {
     });
   }, [obsColsList]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: ""
-  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-relative"
+  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "list-group overflow-auto"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Accordion, {
+    flush: true,
     activeKey: active,
     onSelect: function onSelect(key) {
-      dispatch({
-        type: "obsSelected",
-        obs: obsColsList.find(function (obs) {
-          return obs.name === key;
-        })
-      });
+      if (key != null) {
+        dispatch({
+          type: "obsSelected",
+          obs: obsColsList.find(function (obs) {
+            return obs.name === key;
+          })
+        });
+      }
     }
   }, obsList)));
 }

package/dist/components/violin/Violin.js

@@ -14,6 +14,7 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _constants = require("../../constants/constants");
 var _reactBootstrap = require("react-bootstrap");
 var _requests = require("../../utils/requests");
+var _LoadingSpinner = require("../../utils/LoadingSpinner");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -132,8 +133,8 @@ function Violin(_ref) {
   }, [fetchedData, hasSelections, isPending, serverError]);
   if (hasSelections) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "cherita-violin"
-    }, /*#__PURE__*/_react.default.createElement("h5", null, mode), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+      className: "cherita-violin position-relative"
+    }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement("h5", null, mode), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
       data: data,
       layout: layout,
       useResizeHandler: true,

package/dist/utils/LoadingSpinner.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoadingSpinner = LoadingSpinner;
+require("bootstrap/dist/css/bootstrap.min.css");
+var _reactBootstrap = require("react-bootstrap");
+function LoadingSpinner(_ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "icon" : _ref$type,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? "Loading..." : _ref$text;
+  if (type === "message") {
+    return /*#__PURE__*/React.createElement("div", {
+      className: " h-100 w-100 d-flex z-1 bg-light opacity-75 position-absolute justify-content-center align-items-center "
+    }, /*#__PURE__*/React.createElement(_reactBootstrap.Button, {
+      variant: "primary",
+      disabled: true
+    }, /*#__PURE__*/React.createElement(_reactBootstrap.Spinner, {
+      as: "span",
+      animation: "border",
+      size: "sm",
+      role: "status",
+      "aria-hidden": "true"
+    }), text));
+  } else {
+    return /*#__PURE__*/React.createElement("div", {
+      className: " h-100 w-100 d-flex z-1 bg-light opacity-75 position-absolute justify-content-center align-items-center "
+    }, /*#__PURE__*/React.createElement(_reactBootstrap.Spinner, {
+      animation: "border",
+      variant: "primary",
+      role: "status"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "visually-hidden"
+    }, text)));
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.1.12-dev.2024-02-12.197c465a",
+  "version": "0.1.12-dev.2024-02-12.f6d21b70",
   "author": "",
   "license": "",
   "main": "dist/index.js",
@@ -78,5 +78,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "197c465a7ab68f15b9b2c3032d372302ac6dee77"
+  "prereleaseSha": "f6d21b70934071cac3bb5899d8aead080a15b135"
 }