@haniffalab/cherita-react 1.0.0-dev.2025-03-28.876db178 → 1.0.0-dev.2025-04-01.e61c9d78

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SearchBar = SearchBar;
 var _react = _interopRequireWildcard(require("react"));
+var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _SearchResults = require("./SearchResults");
@@ -40,11 +41,13 @@ function SearchBar(_ref) {
       setShowSuggestions(true);
     }
   }, [text]);
+
+  //@TODO: Abstract styles
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
     onSubmit: e => {
       e.preventDefault();
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
     ref: inputRef,
     onFocus: () => {
       setShowSuggestions(text.length > 0);
@@ -59,8 +62,21 @@ function SearchBar(_ref) {
     value: text,
     onChange: e => {
       setText(e.target.value);
+    },
+    style: {
+      paddingLeft: "2.5rem",
+      borderRadius: "5px"
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: "absolute",
+      left: "10px",
+      top: "50%",
+      transform: "translateY(-50%)",
+      pointerEvents: "none",
+      zIndex: 10
     }
-  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, {
+  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, {
     show: showSuggestions,
     onMouseDown: e => {
       e.preventDefault();

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

@@ -5,16 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.VarNamesList = VarNamesList;
 var _react = _interopRequireWildcard(require("react"));
-var _iconsMaterial = require("@mui/icons-material");
+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 _VarItem = require("./VarItem");
-var _VarListToolbar = require("./VarListToolbar");
-var _VarSet = require("./VarSet");
+var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _LoadingIndicators = require("../../utils/LoadingIndicators");
 var _requests = require("../../utils/requests");
+var _VarItem = require("./VarItem");
+var _VarListToolbar = require("./VarListToolbar");
+var _VarSet = require("./VarSet");
 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; }
@@ -110,19 +112,28 @@ function DiseaseVarList(_ref) {
   }, /*#__PURE__*/_react.default.createElement("h5", null, "Disease genes")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
     variant: "light"
   }, "No disease genes found.")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between mt-3"
-  }, /*#__PURE__*/_react.default.createElement("h5", null, "Disease genes"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "link",
+    className: "d-flex justify-content-between my-2"
+  }, /*#__PURE__*/_react.default.createElement("h5", null, "Disease genes"), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+    "aria-label": "Feature options",
+    size: "sm"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "info",
     onClick: () => {
       dispatch({
         type: "reset.disease"
       });
     }
-  }, "clear")), /*#__PURE__*/_react.default.createElement("p", null, dataset.selectedDisease?.name), /*#__PURE__*/_react.default.createElement(_VarListToolbar.VarListToolbar, {
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faTimes,
+    className: "me-1"
+  }), "Clear"))), /*#__PURE__*/_react.default.createElement("p", null, dataset.selectedDisease?.name), /*#__PURE__*/_react.default.createElement(_VarListToolbar.VarListToolbar, {
     varType: "disease"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "position-relative"
-  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, diseaseVarList)))));
+  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
+  }, diseaseVarList)))));
 }
 function VarNamesList(_ref2) {
   let {
@@ -246,10 +257,12 @@ function VarNamesList(_ref2) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "overflow-auto mt-3"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-between"
-  }, /*#__PURE__*/_react.default.createElement("h5", null, _lodash.default.capitalize(displayName)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "light",
-    className: "p-1",
+    className: "d-flex justify-content-between mb-2"
+  }, /*#__PURE__*/_react.default.createElement("h5", null, _lodash.default.capitalize(displayName)), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+    "aria-label": "Feature options",
+    size: "sm"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "info",
     onClick: () => {
       dispatch({
         type: "add.varSet",
@@ -260,8 +273,8 @@ function VarNamesList(_ref2) {
         }
       });
     }
-  }, /*#__PURE__*/_react.default.createElement(_iconsMaterial.Add, null), "New set"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "link",
+  }, "New set"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "info",
     onClick: () => {
       setVarButtons([]);
       dispatch({
@@ -271,11 +284,17 @@ function VarNamesList(_ref2) {
         type: "reset.varSets"
       });
     }
-  }, "clear"))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !varList.length ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faTimes,
+    className: "me-1"
+  }), "Clear"))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !varList.length ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Alert, {
     variant: "light"
   }, "Search for a feature.") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_VarListToolbar.VarListToolbar, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "position-relative"
-  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, null, varList)))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDiseaseVarList && /*#__PURE__*/_react.default.createElement(DiseaseVarList, {
+  }, isPending && /*#__PURE__*/_react.default.createElement(_LoadingIndicators.LoadingSpinner, null), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
+    variant: "flush",
+    className: "cherita-list"
+  }, varList)))), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDiseaseVarList && /*#__PURE__*/_react.default.createElement(DiseaseVarList, {
     makeListItem: makeListItem
   }))));
 }

package/dist/cjs/components/var-list/VarListToolbar.js

@@ -7,7 +7,6 @@ exports.VarListToolbar = VarListToolbar;
 var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _material = require("@mui/material");
 var _reactBootstrap = require("react-bootstrap");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
@@ -43,13 +42,15 @@ function VarListToolbar(_ref) {
       });
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar, {
-    className: "var-list-toolbar"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, "Sort by:"), /*#__PURE__*/_react.default.createElement(_material.ToggleButtonGroup, {
-    "aria-label": "Sort feature by",
-    size: "small",
-    className: "mh-100"
-  }, /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-end align-items-center mb-2"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButtonGroup, {
+    name: "sortfeatures",
+    "aria-label": "Sort features by",
+    size: "sm",
+    type: "radio"
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButton, {
+    id: _constants.VAR_SORT.NAME,
     value: _constants.VAR_SORT.NAME,
     "aria-label": "alphabetical",
     title: "Sort alphabetically",
@@ -61,7 +62,8 @@ function VarListToolbar(_ref) {
     icon: _freeSolidSvgIcons.faArrowDownAZ
   }) : /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faArrowUpZA
-  })), /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
+  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButton, {
+    id: _constants.VAR_SORT.MATRIX,
     value: _constants.VAR_SORT.MATRIX,
     "aria-label": "matrix value",
     title: "Sort by matrix value",
@@ -73,7 +75,8 @@ function VarListToolbar(_ref) {
     icon: _freeSolidSvgIcons.faArrowDown19
   }) : /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faArrowUp91
-  })), /*#__PURE__*/_react.default.createElement(_material.ToggleButton, {
+  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ToggleButton, {
+    id: "none",
     value: "none",
     "aria-label": "none",
     title: "No sorting",
@@ -87,5 +90,5 @@ function VarListToolbar(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faXmark
-  })))));
+  }))));
 }

package/dist/cjs/components/var-list/VarSet.js

@@ -10,10 +10,10 @@ var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _iconsMaterial = require("@mui/icons-material");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
-var _VarItem = require("./VarItem");
 var _constants = require("../../constants/constants");
 var _DatasetContext = require("../../context/DatasetContext");
 var _SearchBar = require("../search-bar/SearchBar");
+var _VarItem = require("./VarItem");
 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; }
@@ -97,7 +97,8 @@ function SingleSelectionSet(_ref) {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "mx-2"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
-    variant: "flush"
+    variant: "flush",
+    className: "cherita-list"
   }, varList)))));
 }
 function MultipleSelectionSet(_ref2) {

package/dist/cjs/utils/Skeleton.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ObsmKeysListBtn = void 0;
+var _reactBootstrap = require("react-bootstrap");
+const ObsmKeysListBtn = () => {
+  return /*#__PURE__*/React.createElement(_reactBootstrap.Placeholder, {
+    as: _reactBootstrap.Button,
+    animation: "glow"
+  }, /*#__PURE__*/React.createElement(_reactBootstrap.Placeholder, {
+    xs: 6,
+    style: {
+      width: "40px"
+    }
+  }));
+};
+exports.ObsmKeysListBtn = ObsmKeysListBtn;