@haniffalab/cherita-react 1.3.0 → 1.3.1-dev.2025-10-29.6de4119f

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

@@ -3,31 +3,41 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-import React, { useState } from "react";
-import CloseIcon from "@mui/icons-material/Close";
-import SearchIcon from "@mui/icons-material/Search";
-import { Button, Form, FormGroup, InputGroup, Modal } from "react-bootstrap";
-import Col from "react-bootstrap/Col";
-import Container from "react-bootstrap/Container";
-import Nav from "react-bootstrap/Nav";
-import Row from "react-bootstrap/Row";
-import Tab from "react-bootstrap/Tab";
-import { DiseaseInfo, VarInfo } from "./SearchInfo";
-import { DiseasesSearchResults, VarSearchResults } from "./SearchResults";
-import { COLOR_ENCODINGS } from "../../constants/constants";
-function onVarSelect(dispatch, item) {
+import { useState } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import SearchIcon from '@mui/icons-material/Search';
+import _ from 'lodash';
+import { Button, Form, FormGroup, InputGroup, Modal } from 'react-bootstrap';
+import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
+import Nav from 'react-bootstrap/Nav';
+import Row from 'react-bootstrap/Row';
+import Tab from 'react-bootstrap/Tab';
+import { DiseaseInfo, VarInfo } from './SearchInfo';
+import { DiseasesSearchResults, VarSearchResults } from './SearchResults';
+import { COLOR_ENCODINGS } from '../../constants/constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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: COLOR_ENCODINGS.VAR
   });
+};
+const debounceSelect = _.debounce(select, 500);
+function onVarSelect(dispatch, item) {
+  dispatch({
+    type: 'add.var',
+    var: item
+  });
+  debounceSelect(dispatch, item);
 }
 function addVarSet(dispatch, _ref) {
   let {
@@ -35,7 +45,7 @@ function addVarSet(dispatch, _ref) {
     vars
   } = _ref;
   dispatch({
-    type: "add.var",
+    type: 'add.var',
     var: {
       name: name,
       vars: vars,
@@ -44,8 +54,8 @@ function addVarSet(dispatch, _ref) {
   });
 }
 const FEATURE_TYPE = {
-  VAR: "var",
-  DISEASE: "disease"
+  VAR: 'var',
+  DISEASE: 'disease'
 };
 export function SearchModal(_ref2) {
   let {
@@ -58,130 +68,177 @@ export function SearchModal(_ref2) {
     searchVar,
     searchDiseases
   } = _ref2;
-  const [tab, setTab] = useState("var");
+  const [tab, setTab] = useState('var');
   const [selectedResult, setSelectedResult] = useState({
     var: null,
     disease: null
   });
   const [varResultsLength, setVarResultsLength] = useState(null);
   const [diseaseResultsLength, setDiseaseResultsLength] = useState(null);
-  return /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/_jsxs(Modal, {
     show: show,
     onHide: handleClose,
-    size: "xl"
-  }, /*#__PURE__*/React.createElement(Modal.Header, {
-    className: "bg-primary"
-  }, /*#__PURE__*/React.createElement(Container, {
-    className: "gx-0"
-  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
-    xs: 12
-  }, /*#__PURE__*/React.createElement(Form, {
-    onSubmit: e => {
-      e.preventDefault();
-    }
-  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex align-items-center"
-  }, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, /*#__PURE__*/React.createElement(SearchIcon, null)), /*#__PURE__*/React.createElement(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.createElement(Button, {
-    variant: "light",
-    onClick: handleClose
-  }, /*#__PURE__*/React.createElement(CloseIcon, null)))))))))), /*#__PURE__*/React.createElement(Modal.Body, {
-    className: "p-0"
-  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
-    xs: 12,
-    md: 8
-  }, /*#__PURE__*/React.createElement(Tab.Container, {
-    activeKey: tab,
-    onSelect: k => setTab(k)
-  }, /*#__PURE__*/React.createElement(Row, {
-    className: "w-100"
-  }, /*#__PURE__*/React.createElement(Col, {
-    sm: 3,
-    className: "py-3 border-end"
-  }, /*#__PURE__*/React.createElement(Nav, {
-    variant: "pills",
-    className: "flex-column"
-  }, searchVar && /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
-    eventKey: FEATURE_TYPE.VAR
-  }, "Genes", " ", !!varResultsLength && "(".concat(varResultsLength, ")"))), searchDiseases && /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
-    eventKey: FEATURE_TYPE.DISEASE
-  }, "Diseases", " ", !!diseaseResultsLength && "(".concat(diseaseResultsLength, ")"))))), /*#__PURE__*/React.createElement(Col, {
-    sm: 9,
-    className: "py-3"
-  }, /*#__PURE__*/React.createElement(Tab.Content, null, searchVar && /*#__PURE__*/React.createElement(Tab.Pane, {
-    eventKey: FEATURE_TYPE.VAR
-  }, /*#__PURE__*/React.createElement(VarSearchResults, {
-    text: text,
-    handleSelect: handleSelect,
-    selectedResult: selectedResult.var,
-    setSelectedResult: item => setSelectedResult(prev => {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        var: item
-      });
-    }),
-    setResultsLength: setVarResultsLength
-  })), searchDiseases && /*#__PURE__*/React.createElement(Tab.Pane, {
-    eventKey: FEATURE_TYPE.DISEASE
-  }, /*#__PURE__*/React.createElement(DiseasesSearchResults, {
-    text: text,
-    selectedResult: selectedResult.disease,
-    setSelectedResult: item => setSelectedResult(prev => {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        disease: item
-      });
-    }),
-    setResultsLength: setDiseaseResultsLength
-  }))))))), /*#__PURE__*/React.createElement(Col, {
-    xs: 12,
-    md: 4,
-    className: "bg-light p-3 search-modal-info"
-  }, selectedResult[tab] ? tab === FEATURE_TYPE.DISEASE ? /*#__PURE__*/React.createElement(DiseaseInfo, {
-    disease: selectedResult.disease,
-    handleSelect: handleSelect,
-    addVarSet: addVarSet
-  }) : /*#__PURE__*/React.createElement(VarInfo, {
-    varItem: selectedResult.var
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: "text-muted"
-  }, "No result selected"))))));
+    size: "xl",
+    children: [/*#__PURE__*/_jsx(Modal.Header, {
+      className: "bg-primary",
+      children: /*#__PURE__*/_jsx(Container, {
+        className: "gx-0",
+        children: /*#__PURE__*/_jsx(Row, {
+          children: /*#__PURE__*/_jsx(Col, {
+            xs: 12,
+            children: /*#__PURE__*/_jsx(Form, {
+              onSubmit: e => {
+                e.preventDefault();
+              },
+              children: /*#__PURE__*/_jsx(FormGroup, {
+                children: /*#__PURE__*/_jsx("div", {
+                  className: "d-flex align-items-center",
+                  children: /*#__PURE__*/_jsxs(InputGroup, {
+                    children: [/*#__PURE__*/_jsx(InputGroup.Text, {
+                      children: /*#__PURE__*/_jsx(SearchIcon, {})
+                    }), /*#__PURE__*/_jsx(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__*/_jsx(Button, {
+                      variant: "light",
+                      onClick: handleClose,
+                      children: /*#__PURE__*/_jsx(CloseIcon, {})
+                    })]
+                  })
+                })
+              })
+            })
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(Modal.Body, {
+      className: "p-0",
+      children: /*#__PURE__*/_jsx(Container, {
+        children: /*#__PURE__*/_jsxs(Row, {
+          children: [/*#__PURE__*/_jsx(Col, {
+            xs: 12,
+            md: 8,
+            children: /*#__PURE__*/_jsx(Tab.Container, {
+              activeKey: tab,
+              onSelect: k => setTab(k),
+              children: /*#__PURE__*/_jsxs(Row, {
+                className: "w-100",
+                children: [/*#__PURE__*/_jsx(Col, {
+                  sm: 3,
+                  className: "py-3 border-end",
+                  children: /*#__PURE__*/_jsxs(Nav, {
+                    variant: "pills",
+                    className: "flex-column",
+                    children: [searchVar && /*#__PURE__*/_jsx(Nav.Item, {
+                      children: /*#__PURE__*/_jsxs(Nav.Link, {
+                        eventKey: FEATURE_TYPE.VAR,
+                        children: ["Genes", ' ', !!varResultsLength && "(".concat(varResultsLength, ")")]
+                      })
+                    }), searchDiseases && /*#__PURE__*/_jsx(Nav.Item, {
+                      children: /*#__PURE__*/_jsxs(Nav.Link, {
+                        eventKey: FEATURE_TYPE.DISEASE,
+                        children: ["Diseases", ' ', !!diseaseResultsLength && "(".concat(diseaseResultsLength, ")")]
+                      })
+                    })]
+                  })
+                }), /*#__PURE__*/_jsx(Col, {
+                  sm: 9,
+                  className: "py-3",
+                  children: /*#__PURE__*/_jsxs(Tab.Content, {
+                    children: [searchVar && /*#__PURE__*/_jsx(Tab.Pane, {
+                      eventKey: FEATURE_TYPE.VAR,
+                      children: /*#__PURE__*/_jsx(VarSearchResults, {
+                        text: text,
+                        handleSelect: handleSelect,
+                        selectedResult: selectedResult.var,
+                        setSelectedResult: item => setSelectedResult(prev => {
+                          return _objectSpread(_objectSpread({}, prev), {}, {
+                            var: item
+                          });
+                        }),
+                        setResultsLength: setVarResultsLength
+                      })
+                    }), searchDiseases && /*#__PURE__*/_jsx(Tab.Pane, {
+                      eventKey: FEATURE_TYPE.DISEASE,
+                      children: /*#__PURE__*/_jsx(DiseasesSearchResults, {
+                        text: text,
+                        selectedResult: selectedResult.disease,
+                        setSelectedResult: item => setSelectedResult(prev => {
+                          return _objectSpread(_objectSpread({}, prev), {}, {
+                            disease: item
+                          });
+                        }),
+                        setResultsLength: setDiseaseResultsLength
+                      })
+                    })]
+                  })
+                })]
+              })
+            })
+          }), /*#__PURE__*/_jsx(Col, {
+            xs: 12,
+            md: 4,
+            className: "bg-light p-3 search-modal-info",
+            children: selectedResult[tab] ? tab === FEATURE_TYPE.DISEASE ? /*#__PURE__*/_jsx(DiseaseInfo, {
+              disease: selectedResult.disease,
+              handleSelect: handleSelect,
+              addVarSet: addVarSet
+            }) : /*#__PURE__*/_jsx(VarInfo, {
+              varItem: selectedResult.var
+            }) : /*#__PURE__*/_jsx("div", {
+              className: "text-muted",
+              children: "No result selected"
+            })
+          })]
+        })
+      })
+    })]
+  });
 }
 export function SearchBar(_ref3) {
   let {
     searchVar = true,
     searchDiseases = false
   } = _ref3;
-  const [text, setText] = useState("");
-  const displayText = [...(searchVar ? ["features"] : []), ...(searchDiseases ? ["diseases"] : [])].join(" and ");
+  const [text, setText] = useState('');
+  const displayText = [...(searchVar ? ['features'] : []), ...(searchDiseases ? ['diseases'] : [])].join(' and ');
   const [showModal, setShowModal] = useState(false);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
-    onSubmit: e => {
-      e.preventDefault();
-    }
-  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, /*#__PURE__*/React.createElement(SearchIcon, null)), /*#__PURE__*/React.createElement(Form.Control, {
-    onClick: () => setShowModal(true),
-    type: "text",
-    placeholder: "Search " + displayText,
-    defaultValue: text
-  })))), /*#__PURE__*/React.createElement(SearchModal, {
-    show: showModal,
-    text: text,
-    setText: setText,
-    displayText: displayText,
-    searchVar: searchVar,
-    searchDiseases: searchDiseases,
-    handleClose: () => setShowModal(false)
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(Form, {
+      onSubmit: e => {
+        e.preventDefault();
+      },
+      children: /*#__PURE__*/_jsx(FormGroup, {
+        children: /*#__PURE__*/_jsxs(InputGroup, {
+          children: [/*#__PURE__*/_jsx(InputGroup.Text, {
+            children: /*#__PURE__*/_jsx(SearchIcon, {})
+          }), /*#__PURE__*/_jsx(Form.Control, {
+            onClick: () => setShowModal(true),
+            type: "text",
+            placeholder: 'Search ' + displayText,
+            defaultValue: text
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(SearchModal, {
+      show: showModal,
+      text: text,
+      setText: setText,
+      displayText: displayText,
+      searchVar: searchVar,
+      searchDiseases: searchDiseases,
+      handleClose: () => setShowModal(false)
+    })]
+  });
 }

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

@@ -3,21 +3,23 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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); }
-import React, { useState, useEffect } from "react";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import _ from "lodash";
-import { Button, ListGroup } from "react-bootstrap";
-import { VAR_SORT } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { useFetch } from "../../utils/requests";
-import { VarDiseaseInfo } from "../var-list/VarItem";
+import { useState, useEffect } from 'react';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import _ from 'lodash';
+import { Button, ListGroup } from 'react-bootstrap';
+import { VAR_SORT } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { useFetch } from '../../utils/requests';
+import { VarDiseaseInfo } from '../var-list/VarItem';
+import { sortMeans, useVarMean } from '../var-list/VarList';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function VarInfo(_ref) {
   let {
     varItem
   } = _ref;
-  const ENDPOINT = "disease/gene";
+  const ENDPOINT = 'disease/gene';
   const dataset = useDataset();
   const [params, setParams] = useState({
     geneName: varItem.name,
@@ -39,50 +41,27 @@ export function VarInfo(_ref) {
     enabled: !!dataset.diseaseDatasets.length
   });
   const hasDiseaseInfo = !isPending && !serverError && !!(fetchedData !== null && fetchedData !== void 0 && fetchedData.length);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h5", null, varItem.name), !!dataset.diseaseDatasets.length && isPending && /*#__PURE__*/React.createElement("p", null, "Loading..."), hasDiseaseInfo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h6", null, "Associated diseases"), /*#__PURE__*/React.createElement(VarDiseaseInfo, {
-    data: fetchedData
-  })));
-}
-const useVarMean = function (varKeys) {
-  let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  const ENDPOINT = "matrix/mean";
-  const dataset = useDataset();
-  const [params, setParams] = useState({
-    url: dataset.url,
-    varKeys: _.map(varKeys, v => v.isSet ? {
-      name: v.name,
-      indices: v.vars.map(v => v.index)
-    } : v.index),
-    // obsIndices:
-    varNamesCol: dataset.varNamesCol
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("h5", {
+      children: varItem.name
+    }), !!dataset.diseaseDatasets.length && isPending && /*#__PURE__*/_jsx("p", {
+      children: "Loading..."
+    }), hasDiseaseInfo && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("h6", {
+        children: "Associated diseases"
+      }), /*#__PURE__*/_jsx(VarDiseaseInfo, {
+        data: fetchedData
+      })]
+    })]
   });
-  useEffect(() => {
-    setParams(p => {
-      return _objectSpread(_objectSpread({}, p), {}, {
-        varKeys: _.map(varKeys, v => v.isSet ? {
-          name: v.name,
-          indices: v.vars.map(v => v.index)
-        } : v.index)
-      });
-    });
-  }, [varKeys]);
-  return useFetch(ENDPOINT, params, {
-    enabled: enabled,
-    refetchOnMount: false
-  });
-};
-
-// ensure nulls are lowest values
-const sortMeans = (i, means) => {
-  return means[i.name] || _.min(_.values(means)) - 1;
-};
+}
 export function DiseaseInfo(_ref2) {
   let {
     disease,
     handleSelect,
     addVarSet
   } = _ref2;
-  const ENDPOINT = "disease/genes";
+  const ENDPOINT = 'disease/genes';
   const dataset = useDataset();
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
@@ -119,55 +98,71 @@ export function DiseaseInfo(_ref2) {
         }, settings.varSort.disease.sortOrder));
       }
     } else if (settings.varSort.disease.sort === VAR_SORT.NAME) {
-      setSortedDiseaseVars(_.orderBy(diseaseVars, "name", settings.varSort.disease.sortOrder));
+      setSortedDiseaseVars(_.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 = _.map(sortedDiseaseVars, v => {
-    return /*#__PURE__*/React.createElement(ListGroup.Item, {
-      key: v.gene_id
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "d-flex justify-content-between align-items-center w-100"
-    }, v.name, /*#__PURE__*/React.createElement("div", {
-      className: "d-flex align-items-center gap-1"
-    }, /*#__PURE__*/React.createElement(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.createElement(FontAwesomeIcon, {
-      icon: faPlus
-    })))));
+    return /*#__PURE__*/_jsx(ListGroup.Item, {
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "d-flex justify-content-between align-items-center w-100",
+        children: [v.name, /*#__PURE__*/_jsx("div", {
+          className: "d-flex align-items-center gap-1",
+          children: /*#__PURE__*/_jsx(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__*/_jsx(FontAwesomeIcon, {
+              icon: faPlus
+            })
+          })
+        })]
+      })
+    }, v.gene_id);
   });
   const isPending = diseaseData.isPending || varMeans.isPending && settings.varSort.disease.sort === VAR_SORT.MATRIX;
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h5", null, disease.disease_name), /*#__PURE__*/React.createElement("h6", null, "Implicated genes"), isPending ? /*#__PURE__*/React.createElement("p", null, "Loading...") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-end mb-2"
-  }, /*#__PURE__*/React.createElement(Button, {
-    size: "sm",
-    title: "Add all as a set",
-    onClick: () => {
-      addVarSet(dispatch, {
-        name: disease.disease_name,
-        vars: _.map(diseaseVars, v => {
-          return {
-            index: v.index,
-            name: v.name,
-            matrix_index: v.matrix_index
-          };
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("h5", {
+      children: disease.disease_name
+    }), /*#__PURE__*/_jsx("h6", {
+      children: "Implicated genes"
+    }), isPending ? /*#__PURE__*/_jsx("p", {
+      children: "Loading..."
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "d-flex justify-content-end mb-2",
+        children: /*#__PURE__*/_jsxs(Button, {
+          size: "sm",
+          title: "Add all as a set",
+          onClick: () => {
+            addVarSet(dispatch, {
+              name: disease.disease_name,
+              vars: _.map(diseaseVars, v => {
+                return {
+                  index: v.index,
+                  name: v.name,
+                  matrix_index: v.matrix_index
+                };
+              })
+            });
+          },
+          children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: faPlus
+          }), " Add all as a set"]
         })
-      });
-    }
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faPlus
-  }), " Add all as a set")), /*#__PURE__*/React.createElement(ListGroup, {
-    className: "overflow-scroll"
-  }, diseaseVarList)));
+      }), /*#__PURE__*/_jsx(ListGroup, {
+        className: "overflow-scroll",
+        children: diseaseVarList
+      })]
+    })]
+  });
 }