@haniffalab/cherita-react 0.2.0-dev.2025-01-17.f9a0f419 → 0.2.0-dev.2025-01-28.7a60aa67

package/dist/components/full-page/FullPage.js

@@ -22,15 +22,14 @@ var _ScatterplotControls = require("../scatterplot/ScatterplotControls");
 var _SearchBar = require("../search-bar/SearchBar");
 var _VarList = require("../var-list/VarList");
 var _Violin = require("../violin/Violin");
-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 FullPage(_ref) {
-  let {
-    children,
-    varMode = _constants.SELECTION_MODES.SINGLE,
-    ...props
-  } = _ref;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function FullPage({
+  children,
+  varMode = _constants.SELECTION_MODES.SINGLE,
+  ...props
+}) {
   const targetRef = (0, _react.useRef)();
   const [showObs, setShowObs] = (0, _react.useState)(false);
   const [showObsm, setShowObsm] = (0, _react.useState)(false);
@@ -43,17 +42,12 @@ function FullPage(_ref) {
   (0, _react.useLayoutEffect)(() => {
     function updateDimensions() {
       if (targetRef.current) {
-        // Log the full viewport height
-        console.log("Full viewport height:", window.innerHeight);
-
         // Get the distance from the top of the page to the target element
         const rect = targetRef.current.getBoundingClientRect();
         const distanceFromTop = rect.top + window.scrollY;
-        console.log("Distance from top of the page:", distanceFromTop);
 
         // Calculate the available height for the Cherita app
         const availableHeight = window.innerHeight - distanceFromTop;
-        console.log("Available height for Cherita app:", availableHeight);
 
         // Update the dimensions to fit the viewport minus the navbar height
         setDimensions({
@@ -66,155 +60,107 @@ function FullPage(_ref) {
     updateDimensions(); // Initial update
     return () => window.removeEventListener("resize", updateDimensions);
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     ref: targetRef,
     className: "cherita-app",
     style: {
       height: dimensions.height
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatasetContext.DatasetProvider, {
-      ...props,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "row g-0",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "cherita-app-obs",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObsList.ObsColsList, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "cherita-app-plot",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "position-relative",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Navbar, {
-              expand: "sm",
-              bg: "primary",
-              className: "cherita-navbar",
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-                className: "container-fluid",
-                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Navbar.Toggle, {
-                  "aria-controls": "navbarScroll"
-                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Navbar.Collapse, {
-                  id: "navbarScroll",
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Nav, {
-                    className: "me-auto my-0",
-                    navbarScroll: true,
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Item, {
-                      className: "d-block d-lg-none",
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Link, {
-                        onClick: () => setShowObs(true),
-                        children: "Observations"
-                      })
-                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Item, {
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Link, {
-                        onClick: () => setShowVars(true),
-                        children: "Features"
-                      })
-                    })]
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav, {
-                    className: "d-flex",
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Item, {
-                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Nav.Link, {
-                        onClick: () => setShowControls(true),
-                        children: "Controls"
-                      })
-                    })
-                  })]
-                })]
-              })
-            })
-          }), children]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "cherita-app-var",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Card, {
-            className: "cherita-app-features",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Card.Body, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBar.SearchBar, {
-                searchDiseases: true,
-                searchVar: true
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarList.VarNamesList, {
-                mode: varMode
-              })]
-            })
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: "col",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_offcanvas.OffcanvasObs, {
-            show: showObs,
-            handleClose: () => setShowObs(false)
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_offcanvas.OffcanvasVars, {
-            show: showVars,
-            handleClose: () => setShowVars(false)
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_offcanvas.OffcanvasControls, {
-            show: showControls,
-            handleClose: () => setShowControls(false),
-            Controls: _ScatterplotControls.ScatterplotControls
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_offcanvas.OffcanvasObsm, {
-            show: showObsm,
-            handleClose: () => setShowObsm(false)
-          })]
-        })]
-      })
-    })
-  });
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DatasetContext.DatasetProvider, props, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row g-0"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "cherita-app-obs"
+  }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cherita-app-plot"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "position-relative"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar, {
+    expand: "sm",
+    bg: "primary",
+    className: "cherita-navbar"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "container-fluid"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Toggle, {
+    "aria-controls": "navbarScroll"
+  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Collapse, {
+    id: "navbarScroll"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
+    className: "me-auto my-0",
+    navbarScroll: true
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, {
+    className: "d-block d-lg-none"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowObs(true)
+  }, "Observations")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowVars(true)
+  }, "Features"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
+    className: "d-flex"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
+    onClick: () => setShowControls(true)
+  }, "Controls"))))))), children), /*#__PURE__*/_react.default.createElement("div", {
+    className: "cherita-app-var"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card, {
+    className: "cherita-app-features"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Body, null, /*#__PURE__*/_react.default.createElement(_SearchBar.SearchBar, {
+    searchDiseases: true,
+    searchVar: true
+  }), /*#__PURE__*/_react.default.createElement(_VarList.VarNamesList, {
+    mode: varMode
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col"
+  }, /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObs, {
+    show: showObs,
+    handleClose: () => setShowObs(false)
+  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasVars, {
+    show: showVars,
+    handleClose: () => setShowVars(false)
+  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
+    show: showControls,
+    handleClose: () => setShowControls(false),
+    Controls: _ScatterplotControls.ScatterplotControls
+  }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasObsm, {
+    show: showObsm,
+    handleClose: () => setShowObsm(false)
+  })))));
 }
 function FullPageScatterplot(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullPage, {
-    ...props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scatterplot.Scatterplot, {})
-  });
+  return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null));
 }
 function FullPagePseudospatial(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullPage, {
-    ...props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "container-fluid h-100",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "row",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "col-12 col-lg-7",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scatterplot.Scatterplot, {})
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "col-12 col-lg-5",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "container-fluid h-100 d-flex align-itemms-center justify-content-center",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-              className: "row w-100 py-3",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "col-12",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                  className: "p-2",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pseudospatial.Pseudospatial, {})
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                className: "col-12",
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pseudospatial.PseudospatialImage, {})
-              })]
-            })
-          })
-        })]
-      })
-    })
-  });
+  return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement("div", {
+    className: "container-fluid h-100"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-12 col-lg-7"
+  }, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-12 col-lg-5"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "container-fluid h-100 d-flex align-itemms-center justify-content-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row w-100 py-3"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-12"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-2"
+  }, /*#__PURE__*/_react.default.createElement(_Pseudospatial.Pseudospatial, null))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "col-12"
+  }, /*#__PURE__*/_react.default.createElement(_Pseudospatial.PseudospatialImage, null))))))));
 }
 function FullPagePlots(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullPage, {
-    ...props,
-    varMode: _constants.SELECTION_MODES.MULTIPLE,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "container-fluid w-100 h-100 d-flex flex-column overflow-y-auto",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "row flex-grow-1",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heatmap.Heatmap, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "row flex-grow-1",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Matrixplot.Matrixplot, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "row flex-grow-1",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dotplot.Dotplot, {})
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "row flex-grow-1",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Violin.Violin, {
-          mode: _constants.VIOLIN_MODES.GROUPBY
-        })
-      })]
-    })
-  });
+  return /*#__PURE__*/_react.default.createElement(FullPage, _extends({}, props, {
+    varMode: _constants.SELECTION_MODES.MULTIPLE
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "container-fluid w-100 h-100 d-flex flex-column overflow-y-auto"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/_react.default.createElement(_Heatmap.Heatmap, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/_react.default.createElement(_Matrixplot.Matrixplot, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/_react.default.createElement(_Dotplot.Dotplot, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/_react.default.createElement(_Violin.Violin, {
+    mode: _constants.VIOLIN_MODES.GROUPBY
+  }))));
 }

package/dist/components/heatmap/Heatmap.js

@@ -12,7 +12,6 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-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; }
@@ -90,32 +89,26 @@ function Heatmap() {
   }, [dataset.controls.colorScale, updateColorscale]);
   if (!serverError) {
     if (hasSelections) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "cherita-heatmap position-relative",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
-          data: data,
-          layout: layout,
-          useResizeHandler: true,
-          style: {
-            maxWidth: "100%",
-            maxHeight: "100%"
-          }
-        })]
-      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "cherita-heatmap position-relative"
+      }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+        data: data,
+        layout: layout,
+        useResizeHandler: true,
+        style: {
+          maxWidth: "100%",
+          maxHeight: "100%"
+        }
+      }));
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "cherita-heatmap",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "light",
-        children: "Select features and a category"
-      })
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "cherita-heatmap"
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+      variant: "light"
+    }, "Select features and a category"));
   } else {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "danger",
-        children: serverError.message
-      })
-    });
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+      variant: "danger"
+    }, serverError.message));
   }
 }

package/dist/components/heatmap/HeatmapControls.js

@@ -9,28 +9,22 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _colorscales = require("../../constants/colorscales");
 var _DatasetContext = require("../../context/DatasetContext");
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function HeatmapControls() {
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
-  const colormapList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+  const colormapList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    key: key,
     active: dataset.controls.colorScale === key,
     onClick: () => {
       dispatch({
         type: "set.controls.colorScale",
         colorScale: key
       });
-    },
-    children: key
+    }
   }, key));
-  return /*#__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: colormapList
-    })]
-  });
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
+    id: "dropdownColorscale",
+    variant: "light"
+  }, dataset.controls.colorScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, colormapList));
 }

package/dist/components/matrixplot/Matrixplot.js

@@ -12,7 +12,6 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _FilterContext = require("../../context/FilterContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
-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; }
@@ -92,32 +91,26 @@ function Matrixplot() {
   }, [dataset.controls.colorScale, updateColorscale]);
   if (!serverError) {
     if (hasSelections) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "cherita-matrixplot position-relative",
-        children: [isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingSpinner, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactPlotly.default, {
-          data: data,
-          layout: layout,
-          useResizeHandler: true,
-          style: {
-            maxWidth: "100%",
-            maxHeight: "100%"
-          }
-        })]
-      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "cherita-matrixplot position-relative"
+      }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactPlotly.default, {
+        data: data,
+        layout: layout,
+        useResizeHandler: true,
+        style: {
+          maxWidth: "100%",
+          maxHeight: "100%"
+        }
+      }));
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "cherita-matrixplot",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "light",
-        children: "Select features and a category"
-      })
-    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "cherita-matrixplot"
+    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+      variant: "light"
+    }, "Select features and a category"));
   } else {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Alert, {
-        variant: "danger",
-        children: serverError.message
-      })
-    });
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+      variant: "danger"
+    }, serverError.message));
   }
 }

package/dist/components/matrixplot/MatrixplotControls.js

@@ -10,22 +10,22 @@ 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, {
+  const colorScaleList = _lodash.default.keys(_colorscales.COLORSCALES).map(key => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    key: key,
     active: dataset.controls.colorScale === key,
     onClick: () => {
       dispatch({
         type: "set.controls.colorScale",
         colorScale: key
       });
-    },
-    children: key
+    }
   }, key));
-  const standardScaleList = _lodash.default.values(_constants.MATRIXPLOT_SCALES).map(scale => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Item, {
+  const standardScaleList = _lodash.default.values(_constants.MATRIXPLOT_SCALES).map(scale => /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Item, {
+    key: scale.value,
     active: dataset.controls.scale.matrixplot.name === scale.name,
     onClick: () => {
       dispatch({
@@ -33,34 +33,13 @@ function MatrixplotControls() {
         plot: "matrixplot",
         scale: scale
       });
-    },
-    children: scale.name
-  }, scale.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.scale.matrixplot.name
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Dropdown.Menu, {
-            children: standardScaleList
-          })]
-        })]
-      })
-    })]
-  });
+    }
+  }, scale.name));
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonToolbar, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
+    id: "dropdownColorscale",
+    variant: "light"
+  }, dataset.controls.colorScale), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, colorScaleList))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Standard scale"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Toggle, {
+    id: "dropdownStandardScale",
+    variant: "light"
+  }, dataset.controls.scale.matrixplot.name), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, null, standardScaleList)))));
 }