@haniffalab/cherita-react 1.3.0 → 1.3.1

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

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SearchBar = SearchBar;
 exports.SearchModal = SearchModal;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
+var _lodash = _interopRequireDefault(require("lodash"));
 var _reactBootstrap = require("react-bootstrap");
 var _Col = _interopRequireDefault(require("react-bootstrap/Col"));
 var _Container = _interopRequireDefault(require("react-bootstrap/Container"));
@@ -17,26 +18,34 @@ var _Tab = _interopRequireDefault(require("react-bootstrap/Tab"));
 var _SearchInfo = require("./SearchInfo");
 var _SearchResults = require("./SearchResults");
 var _constants = require("../../constants/constants");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function onVarSelect(dispatch, item) {
+const select = (dispatch, item) => {
   dispatch({
-    type: "select.var",
+    type: 'select.var',
     var: item
   });
   dispatch({
-    type: "select.multivar",
+    type: 'select.multivar',
     var: item
   });
   dispatch({
-    type: "set.colorEncoding",
+    type: 'set.colorEncoding',
     value: _constants.COLOR_ENCODINGS.VAR
   });
+};
+const debounceSelect = _lodash.default.debounce(select, 500);
+function onVarSelect(dispatch, item) {
+  dispatch({
+    type: 'add.var',
+    var: item
+  });
+  debounceSelect(dispatch, item);
 }
 function addVarSet(dispatch, _ref) {
   let {
@@ -44,7 +53,7 @@ function addVarSet(dispatch, _ref) {
     vars
   } = _ref;
   dispatch({
-    type: "add.var",
+    type: 'add.var',
     var: {
       name: name,
       vars: vars,
@@ -53,8 +62,8 @@ function addVarSet(dispatch, _ref) {
   });
 }
 const FEATURE_TYPE = {
-  VAR: "var",
-  DISEASE: "disease"
+  VAR: 'var',
+  DISEASE: 'disease'
 };
 function SearchModal(_ref2) {
   let {
@@ -67,130 +76,177 @@ function SearchModal(_ref2) {
     searchVar,
     searchDiseases
   } = _ref2;
-  const [tab, setTab] = (0, _react.useState)("var");
+  const [tab, setTab] = (0, _react.useState)('var');
   const [selectedResult, setSelectedResult] = (0, _react.useState)({
     var: null,
     disease: null
   });
   const [varResultsLength, setVarResultsLength] = (0, _react.useState)(null);
   const [diseaseResultsLength, setDiseaseResultsLength] = (0, _react.useState)(null);
-  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Modal, {
     show: show,
     onHide: handleClose,
-    size: "xl"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, {
-    className: "bg-primary"
-  }, /*#__PURE__*/_react.default.createElement(_Container.default, {
-    className: "gx-0"
-  }, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-    xs: 12
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
-    onSubmit: e => {
-      e.preventDefault();
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex align-items-center"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, /*#__PURE__*/_react.default.createElement(_Search.default, null)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
-    autoFocus: true,
-    type: "text",
-    placeholder: "Search " + displayText,
-    value: text,
-    onChange: e => {
-      setText(e.target.value);
-      setSelectedResult({
-        var: null,
-        disease: null
-      });
-      setVarResultsLength(null);
-      setDiseaseResultsLength(null);
-    }
-  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "light",
-    onClick: handleClose
-  }, /*#__PURE__*/_react.default.createElement(_Close.default, null)))))))))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, {
-    className: "p-0"
-  }, /*#__PURE__*/_react.default.createElement(_Container.default, null, /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Col.default, {
-    xs: 12,
-    md: 8
-  }, /*#__PURE__*/_react.default.createElement(_Tab.default.Container, {
-    activeKey: tab,
-    onSelect: k => setTab(k)
-  }, /*#__PURE__*/_react.default.createElement(_Row.default, {
-    className: "w-100"
-  }, /*#__PURE__*/_react.default.createElement(_Col.default, {
-    sm: 3,
-    className: "py-3 border-end"
-  }, /*#__PURE__*/_react.default.createElement(_Nav.default, {
-    variant: "pills",
-    className: "flex-column"
-  }, searchVar && /*#__PURE__*/_react.default.createElement(_Nav.default.Item, null, /*#__PURE__*/_react.default.createElement(_Nav.default.Link, {
-    eventKey: FEATURE_TYPE.VAR
-  }, "Genes", " ", !!varResultsLength && "(".concat(varResultsLength, ")"))), searchDiseases && /*#__PURE__*/_react.default.createElement(_Nav.default.Item, null, /*#__PURE__*/_react.default.createElement(_Nav.default.Link, {
-    eventKey: FEATURE_TYPE.DISEASE
-  }, "Diseases", " ", !!diseaseResultsLength && "(".concat(diseaseResultsLength, ")"))))), /*#__PURE__*/_react.default.createElement(_Col.default, {
-    sm: 9,
-    className: "py-3"
-  }, /*#__PURE__*/_react.default.createElement(_Tab.default.Content, null, searchVar && /*#__PURE__*/_react.default.createElement(_Tab.default.Pane, {
-    eventKey: FEATURE_TYPE.VAR
-  }, /*#__PURE__*/_react.default.createElement(_SearchResults.VarSearchResults, {
-    text: text,
-    handleSelect: handleSelect,
-    selectedResult: selectedResult.var,
-    setSelectedResult: item => setSelectedResult(prev => {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        var: item
-      });
-    }),
-    setResultsLength: setVarResultsLength
-  })), searchDiseases && /*#__PURE__*/_react.default.createElement(_Tab.default.Pane, {
-    eventKey: FEATURE_TYPE.DISEASE
-  }, /*#__PURE__*/_react.default.createElement(_SearchResults.DiseasesSearchResults, {
-    text: text,
-    selectedResult: selectedResult.disease,
-    setSelectedResult: item => setSelectedResult(prev => {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        disease: item
-      });
-    }),
-    setResultsLength: setDiseaseResultsLength
-  }))))))), /*#__PURE__*/_react.default.createElement(_Col.default, {
-    xs: 12,
-    md: 4,
-    className: "bg-light p-3 search-modal-info"
-  }, selectedResult[tab] ? tab === FEATURE_TYPE.DISEASE ? /*#__PURE__*/_react.default.createElement(_SearchInfo.DiseaseInfo, {
-    disease: selectedResult.disease,
-    handleSelect: handleSelect,
-    addVarSet: addVarSet
-  }) : /*#__PURE__*/_react.default.createElement(_SearchInfo.VarInfo, {
-    varItem: selectedResult.var
-  }) : /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-muted"
-  }, "No result selected"))))));
+    size: "xl",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Modal.Header, {
+      className: "bg-primary",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
+        className: "gx-0",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+            xs: 12,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
+              onSubmit: e => {
+                e.preventDefault();
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.FormGroup, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: "d-flex align-items-center",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
+                      autoFocus: true,
+                      type: "text",
+                      placeholder: 'Search ' + displayText,
+                      value: text,
+                      onChange: e => {
+                        setText(e.target.value);
+                        setSelectedResult({
+                          var: null,
+                          disease: null
+                        });
+                        setVarResultsLength(null);
+                        setDiseaseResultsLength(null);
+                      }
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+                      variant: "light",
+                      onClick: handleClose,
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
+                    })]
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Modal.Body, {
+      className: "p-0",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Row.default, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+            xs: 12,
+            md: 8,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default.Container, {
+              activeKey: tab,
+              onSelect: k => setTab(k),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Row.default, {
+                className: "w-100",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+                  sm: 3,
+                  className: "py-3 border-end",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Nav.default, {
+                    variant: "pills",
+                    className: "flex-column",
+                    children: [searchVar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.default.Item, {
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Nav.default.Link, {
+                        eventKey: FEATURE_TYPE.VAR,
+                        children: ["Genes", ' ', !!varResultsLength && "(".concat(varResultsLength, ")")]
+                      })
+                    }), searchDiseases && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nav.default.Item, {
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Nav.default.Link, {
+                        eventKey: FEATURE_TYPE.DISEASE,
+                        children: ["Diseases", ' ', !!diseaseResultsLength && "(".concat(diseaseResultsLength, ")")]
+                      })
+                    })]
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+                  sm: 9,
+                  className: "py-3",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Tab.default.Content, {
+                    children: [searchVar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default.Pane, {
+                      eventKey: FEATURE_TYPE.VAR,
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.VarSearchResults, {
+                        text: text,
+                        handleSelect: handleSelect,
+                        selectedResult: selectedResult.var,
+                        setSelectedResult: item => setSelectedResult(prev => {
+                          return _objectSpread(_objectSpread({}, prev), {}, {
+                            var: item
+                          });
+                        }),
+                        setResultsLength: setVarResultsLength
+                      })
+                    }), searchDiseases && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default.Pane, {
+                      eventKey: FEATURE_TYPE.DISEASE,
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchResults.DiseasesSearchResults, {
+                        text: text,
+                        selectedResult: selectedResult.disease,
+                        setSelectedResult: item => setSelectedResult(prev => {
+                          return _objectSpread(_objectSpread({}, prev), {}, {
+                            disease: item
+                          });
+                        }),
+                        setResultsLength: setDiseaseResultsLength
+                      })
+                    })]
+                  })
+                })]
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Col.default, {
+            xs: 12,
+            md: 4,
+            className: "bg-light p-3 search-modal-info",
+            children: selectedResult[tab] ? tab === FEATURE_TYPE.DISEASE ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchInfo.DiseaseInfo, {
+              disease: selectedResult.disease,
+              handleSelect: handleSelect,
+              addVarSet: addVarSet
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchInfo.VarInfo, {
+              varItem: selectedResult.var
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "text-muted",
+              children: "No result selected"
+            })
+          })]
+        })
+      })
+    })]
+  });
 }
 function SearchBar(_ref3) {
   let {
     searchVar = true,
     searchDiseases = false
   } = _ref3;
-  const [text, setText] = (0, _react.useState)("");
-  const displayText = [...(searchVar ? ["features"] : []), ...(searchDiseases ? ["diseases"] : [])].join(" and ");
+  const [text, setText] = (0, _react.useState)('');
+  const displayText = [...(searchVar ? ['features'] : []), ...(searchDiseases ? ['diseases'] : [])].join(' and ');
   const [showModal, setShowModal] = (0, _react.useState)(false);
-  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.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.InputGroup.Text, null, /*#__PURE__*/_react.default.createElement(_Search.default, null)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
-    onClick: () => setShowModal(true),
-    type: "text",
-    placeholder: "Search " + displayText,
-    defaultValue: text
-  })))), /*#__PURE__*/_react.default.createElement(SearchModal, {
-    show: showModal,
-    text: text,
-    setText: setText,
-    displayText: displayText,
-    searchVar: searchVar,
-    searchDiseases: searchDiseases,
-    handleClose: () => setShowModal(false)
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form, {
+      onSubmit: e => {
+        e.preventDefault();
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.FormGroup, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.InputGroup, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.InputGroup.Text, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Search.default, {})
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Form.Control, {
+            onClick: () => setShowModal(true),
+            type: "text",
+            placeholder: 'Search ' + displayText,
+            defaultValue: text
+          })]
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchModal, {
+      show: showModal,
+      text: text,
+      setText: setText,
+      displayText: displayText,
+      searchVar: searchVar,
+      searchDiseases: searchDiseases,
+      handleClose: () => setShowModal(false)
+    })]
+  });
 }

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DiseaseInfo = DiseaseInfo;
 exports.VarInfo = VarInfo;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -15,8 +15,9 @@ var _DatasetContext = require("../../context/DatasetContext");
 var _SettingsContext = require("../../context/SettingsContext");
 var _requests = require("../../utils/requests");
 var _VarItem = require("../var-list/VarItem");
+var _VarList = require("../var-list/VarList");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -26,7 +27,7 @@ function VarInfo(_ref) {
   let {
     varItem
   } = _ref;
-  const ENDPOINT = "disease/gene";
+  const ENDPOINT = 'disease/gene';
   const dataset = (0, _DatasetContext.useDataset)();
   const [params, setParams] = (0, _react.useState)({
     geneName: varItem.name,
@@ -48,50 +49,27 @@ function VarInfo(_ref) {
     enabled: !!dataset.diseaseDatasets.length
   });
   const hasDiseaseInfo = !isPending && !serverError && !!(fetchedData !== null && fetchedData !== void 0 && fetchedData.length);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h5", null, varItem.name), !!dataset.diseaseDatasets.length && isPending && /*#__PURE__*/_react.default.createElement("p", null, "Loading..."), hasDiseaseInfo && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", null, "Associated diseases"), /*#__PURE__*/_react.default.createElement(_VarItem.VarDiseaseInfo, {
-    data: fetchedData
-  })));
-}
-const useVarMean = function (varKeys) {
-  let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  const ENDPOINT = "matrix/mean";
-  const dataset = (0, _DatasetContext.useDataset)();
-  const [params, setParams] = (0, _react.useState)({
-    url: dataset.url,
-    varKeys: _lodash.default.map(varKeys, v => v.isSet ? {
-      name: v.name,
-      indices: v.vars.map(v => v.index)
-    } : v.index),
-    // obsIndices:
-    varNamesCol: dataset.varNamesCol
-  });
-  (0, _react.useEffect)(() => {
-    setParams(p => {
-      return _objectSpread(_objectSpread({}, p), {}, {
-        varKeys: _lodash.default.map(varKeys, v => v.isSet ? {
-          name: v.name,
-          indices: v.vars.map(v => v.index)
-        } : v.index)
-      });
-    });
-  }, [varKeys]);
-  return (0, _requests.useFetch)(ENDPOINT, params, {
-    enabled: enabled,
-    refetchOnMount: false
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+      children: varItem.name
+    }), !!dataset.diseaseDatasets.length && isPending && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "Loading..."
+    }), hasDiseaseInfo && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h6", {
+        children: "Associated diseases"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VarItem.VarDiseaseInfo, {
+        data: fetchedData
+      })]
+    })]
   });
-};
-
-// ensure nulls are lowest values
-const sortMeans = (i, means) => {
-  return means[i.name] || _lodash.default.min(_lodash.default.values(means)) - 1;
-};
+}
 function DiseaseInfo(_ref2) {
   let {
     disease,
     handleSelect,
     addVarSet
   } = _ref2;
-  const ENDPOINT = "disease/genes";
+  const ENDPOINT = 'disease/genes';
   const dataset = (0, _DatasetContext.useDataset)();
   const settings = (0, _SettingsContext.useSettings)();
   const dispatch = (0, _SettingsContext.useSettingsDispatch)();
@@ -119,64 +97,80 @@ function DiseaseInfo(_ref2) {
       setDiseaseVars(diseaseData.fetchedData);
     }
   }, [diseaseData.fetchedData, diseaseData.isPending, diseaseData.serverError]);
-  const varMeans = useVarMean(diseaseVars, !!(diseaseVars !== null && diseaseVars !== void 0 && diseaseVars.length) && settings.varSort.disease.sort === _constants.VAR_SORT.MATRIX);
+  const varMeans = (0, _VarList.useVarMean)(diseaseVars, !!(diseaseVars !== null && diseaseVars !== void 0 && diseaseVars.length) && settings.varSort.disease.sort === _constants.VAR_SORT.MATRIX);
   (0, _react.useEffect)(() => {
     if (settings.varSort.disease.sort === _constants.VAR_SORT.MATRIX) {
       if (!varMeans.isPending && !varMeans.serverError) {
         setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, o => {
-          return sortMeans(o, varMeans.fetchedData);
+          return (0, _VarList.sortMeans)(o, varMeans.fetchedData);
         }, settings.varSort.disease.sortOrder));
       }
     } else if (settings.varSort.disease.sort === _constants.VAR_SORT.NAME) {
-      setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, "name", settings.varSort.disease.sortOrder));
+      setSortedDiseaseVars(_lodash.default.orderBy(diseaseVars, 'name', settings.varSort.disease.sortOrder));
     } else {
       setSortedDiseaseVars(diseaseVars);
     }
   }, [settings.varSort.disease.sort, settings.varSort.disease.sortOrder, diseaseVars, varMeans.fetchedData, varMeans.isPending, varMeans.serverError]);
   const diseaseVarList = _lodash.default.map(sortedDiseaseVars, v => {
-    return /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup.Item, {
-      key: v.gene_id
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "d-flex justify-content-between align-items-center w-100"
-    }, v.name, /*#__PURE__*/_react.default.createElement("div", {
-      className: "d-flex align-items-center gap-1"
-    }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-      type: "button",
-      className: "m-0 p-0 px-1",
-      variant: "outline-secondary",
-      title: "Add to list",
-      onClick: () => {
-        handleSelect(dispatch, {
-          name: v.name,
-          index: v.index,
-          matrix_index: v.matrix_index
-        });
-      }
-    }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-      icon: _freeSolidSvgIcons.faPlus
-    })))));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "d-flex justify-content-between align-items-center w-100",
+        children: [v.name, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "d-flex align-items-center gap-1",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+            type: "button",
+            className: "m-0 p-0 px-1",
+            variant: "outline-secondary",
+            title: "Add to list",
+            onClick: () => {
+              handleSelect(dispatch, {
+                name: v.name,
+                index: v.index,
+                matrix_index: v.matrix_index
+              });
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faPlus
+            })
+          })
+        })]
+      })
+    }, v.gene_id);
   });
   const isPending = diseaseData.isPending || varMeans.isPending && settings.varSort.disease.sort === _constants.VAR_SORT.MATRIX;
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h5", null, disease.disease_name), /*#__PURE__*/_react.default.createElement("h6", null, "Implicated genes"), isPending ? /*#__PURE__*/_react.default.createElement("p", null, "Loading...") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex justify-content-end mb-2"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    size: "sm",
-    title: "Add all as a set",
-    onClick: () => {
-      addVarSet(dispatch, {
-        name: disease.disease_name,
-        vars: _lodash.default.map(diseaseVars, v => {
-          return {
-            index: v.index,
-            name: v.name,
-            matrix_index: v.matrix_index
-          };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
+      children: disease.disease_name
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h6", {
+      children: "Implicated genes"
+    }), isPending ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      children: "Loading..."
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "d-flex justify-content-end mb-2",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactBootstrap.Button, {
+          size: "sm",
+          title: "Add all as a set",
+          onClick: () => {
+            addVarSet(dispatch, {
+              name: disease.disease_name,
+              vars: _lodash.default.map(diseaseVars, v => {
+                return {
+                  index: v.index,
+                  name: v.name,
+                  matrix_index: v.matrix_index
+                };
+              })
+            });
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+            icon: _freeSolidSvgIcons.faPlus
+          }), " Add all as a set"]
         })
-      });
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faPlus
-  }), " Add all as a set")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.ListGroup, {
-    className: "overflow-scroll"
-  }, diseaseVarList)));
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+        className: "overflow-scroll",
+        children: diseaseVarList
+      })]
+    })]
+  });
 }