@haniffalab/cherita-react 1.2.0-dev.2025-04-29.181538d6 → 1.2.0-dev.2025-05-16.4367ee63

package/dist/esm/components/scatterplot/SpatialControls.js

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
-import { faCrosshairs, faDrawPolygon, faHand, faMinus, faPen, faPlus, faSliders, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faCrosshairs, faDrawPolygon, faHand, faList, faMinus, faPen, faPlus, faSearch, faSliders, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { JoinInner } from "@mui/icons-material";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { DrawLineStringMode, DrawPolygonByDraggingMode, DrawPolygonMode, DrawRectangleMode, ModifyMode, ViewMode } from "@nebula.gl/edit-modes";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import Button from "react-bootstrap/Button";
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import Dropdown from "react-bootstrap/Dropdown";
@@ -18,13 +20,20 @@ export function SpatialControls(_ref) {
     selectedFeatureIndexes,
     resetBounds,
     increaseZoom,
-    decreaseZoom
+    decreaseZoom,
+    setShowObs,
+    setShowVars,
+    isFullscreen
   } = _ref;
   const dataset = useDataset();
   const dispatch = useDatasetDispatch();
   const [showControls, setShowControls] = useState(false);
   const handleCloseControls = () => setShowControls(false);
   const handleShowControls = () => setShowControls(true);
+  const LgBreakpoint = useMediaQuery("(max-width: 991.98px)");
+  const XlBreakpoint = useMediaQuery("(max-width: 1199.98px)");
+  const showObsBtn = isFullscreen ? LgBreakpoint : true;
+  const showVarsBtn = isFullscreen ? XlBreakpoint : true;
   const onSelect = (eventKey, event) => {
     switch (eventKey) {
       case "DrawPolygonMode":
@@ -76,10 +85,37 @@ export function SpatialControls(_ref) {
   })));
   return /*#__PURE__*/React.createElement("div", {
     className: "cherita-spatial-controls"
-  }, /*#__PURE__*/React.createElement(ButtonGroup, {
+  }, (showObsBtn || showVarsBtn) && /*#__PURE__*/React.createElement(ButtonGroup, {
     vertical: true,
     className: "w-100 mb-1"
+  }, showObsBtn && /*#__PURE__*/React.createElement(OverlayTrigger, {
+    placement: "right",
+    overlay: /*#__PURE__*/React.createElement(Tooltip, {
+      id: "tooltip-obs"
+    }, "Browse categories")
   }, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setShowObs(true)
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faList
+  }))), showVarsBtn && /*#__PURE__*/React.createElement(OverlayTrigger, {
+    placement: "right",
+    overlay: /*#__PURE__*/React.createElement(Tooltip, {
+      id: "tooltip-vars"
+    }, "Search features")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setShowVars(true)
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faSearch
+  })))), /*#__PURE__*/React.createElement(ButtonGroup, {
+    vertical: true,
+    className: "w-100"
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setMode(() => ViewMode),
+    title: "Set dragging mode",
+    active: mode === ViewMode
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faHand
+  })), /*#__PURE__*/React.createElement(Button, {
     onClick: increaseZoom,
     title: "Increase zoom"
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -89,24 +125,13 @@ export function SpatialControls(_ref) {
     title: "Decrease zoom"
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faMinus
-  })), /*#__PURE__*/React.createElement(Button, {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "border-bottom"
+  }), " ", /*#__PURE__*/React.createElement(Button, {
     onClick: resetBounds,
     title: "Reset zoom and center"
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faCrosshairs
-  })), /*#__PURE__*/React.createElement(Button, {
-    onClick: handleShowControls
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faSliders
-  }))), /*#__PURE__*/React.createElement(ButtonGroup, {
-    vertical: true,
-    className: "w-100"
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: () => setMode(() => ViewMode),
-    title: "Set dragging mode",
-    active: mode === ViewMode
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faHand
   })), /*#__PURE__*/React.createElement(Dropdown, {
     as: ButtonGroup,
     className: "caret-off",
@@ -132,7 +157,11 @@ export function SpatialControls(_ref) {
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faTrash,
     className: "nav-icon"
-  }), "Delete polygons"))), !!features?.features?.length && polygonControls), /*#__PURE__*/React.createElement(OffcanvasControls, {
+  }), "Delete polygons"))), !!features?.features?.length && polygonControls, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleShowControls
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faSliders
+  }))), /*#__PURE__*/React.createElement(OffcanvasControls, {
     show: showControls,
     handleClose: handleCloseControls,
     Controls: ScatterplotControls

package/dist/esm/components/scatterplot/Toolbox.js

@@ -1,6 +1,4 @@
 import React from "react";
-import { faDroplet } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { formatNumerical } from "../../utils/string";
 import { ObsmKeysList } from "../obsm-list/ObsmList";
@@ -12,22 +10,7 @@ export function Toolbox(_ref) {
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: "cherita-toolbox"
-  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(ObsmKeysList, null), mode && /*#__PURE__*/React.createElement(OverlayTrigger, {
-    placement: "top",
-    overlay: /*#__PURE__*/React.createElement(Tooltip, {
-      id: "tooltip-dropped-mode"
-    }, "The color scale is currently set to ", mode)
-  }, /*#__PURE__*/React.createElement(Button, {
-    size: "sm",
-    variant: "primary",
-    style: {
-      cursor: "default"
-    },
-    "aria-disabled": "true"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faDroplet,
-    className: "me-1"
-  }), " ", mode)), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/React.createElement(OverlayTrigger, {
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(ObsmKeysList, null), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/React.createElement(OverlayTrigger, {
     placement: "top",
     overlay: /*#__PURE__*/React.createElement(Tooltip, {
       id: "tooltip-dropped-mode"

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

@@ -1,8 +1,15 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
 import SearchIcon from "@mui/icons-material/Search";
-import _ from "lodash";
-import { Dropdown, Form, FormGroup, InputGroup } from "react-bootstrap";
+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) {
   dispatch({
     type: "select.var",
@@ -14,77 +21,164 @@ function onVarSelect(dispatch, item) {
   });
   dispatch({
     type: "set.colorEncoding",
-    value: "var"
+    value: COLOR_ENCODINGS.VAR
   });
 }
-export function SearchBar(_ref) {
+function addVarSet(dispatch, _ref) {
   let {
-    searchVar = true,
-    searchDiseases = false,
-    handleSelect = onVarSelect
+    name,
+    vars
   } = _ref;
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const [text, setText] = useState("");
-  const inputRef = useRef(null);
-  const displayText = [...(searchVar ? ["features"] : []), ...(searchDiseases ? ["diseases"] : [])].join(" and ");
-  useEffect(() => {
-    if (text.length > 0) {
-      setShowSuggestions(true);
+  dispatch({
+    type: "add.varSet",
+    varSet: {
+      name: name,
+      vars: vars,
+      isSet: true
     }
-  }, [text]);
-
-  //@TODO: Abstract styles
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
+  });
+}
+const FEATURE_TYPE = {
+  VAR: "var",
+  DISEASE: "disease"
+};
+export function SearchModal(_ref2) {
+  let {
+    show,
+    handleClose,
+    text,
+    setText,
+    displayText,
+    handleSelect = onVarSelect,
+    searchVar,
+    searchDiseases
+  } = _ref2;
+  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, {
+    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(InputGroup, null, /*#__PURE__*/React.createElement(Form.Control, {
-    ref: inputRef,
-    onFocus: () => {
-      setShowSuggestions(text.length > 0);
-    },
-    onBlur: () => {
-      _.delay(() => {
-        setShowSuggestions(false);
-      }, 150);
-    },
+  }, /*#__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);
-    },
-    style: {
-      paddingLeft: "2.5rem",
-      borderRadius: "5px"
+      setSelectedResult({
+        var: null,
+        disease: null
+      });
+      setVarResultsLength(null);
+      setDiseaseResultsLength(null);
     }
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: "absolute",
-      left: "10px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      pointerEvents: "none",
-      zIndex: 10
-    }
-  }, /*#__PURE__*/React.createElement(SearchIcon, null))), /*#__PURE__*/React.createElement(Dropdown, {
-    show: showSuggestions,
-    onMouseDown: e => {
+  }), /*#__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 && `(${varResultsLength})`)), searchDiseases && /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
+    eventKey: FEATURE_TYPE.DISEASE
+  }, "Diseases", " ", !!diseaseResultsLength && `(${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 {
+        ...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 {
+        ...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"))))));
+}
+export function SearchBar(_ref3) {
+  let {
+    searchVar = true,
+    searchDiseases = false
+  } = _ref3;
+  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();
-    },
-    onSelect: () => {
-      inputRef.current.blur();
-    }
-  }, /*#__PURE__*/React.createElement(Dropdown.Menu, {
-    style: {
-      width: "90%"
     }
-  }, searchVar && /*#__PURE__*/React.createElement(VarSearchResults, {
-    text: text,
-    setShowSuggestions: setShowSuggestions,
-    handleSelect: handleSelect
-  }), searchVar && searchDiseases && /*#__PURE__*/React.createElement(Dropdown.Divider, null), searchDiseases && /*#__PURE__*/React.createElement(DiseasesSearchResults, {
+  }, /*#__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,
-    setShowSuggestions: setShowSuggestions
-  }))))));
+    setText: setText,
+    displayText: displayText,
+    searchVar: searchVar,
+    searchDiseases: searchDiseases,
+    handleClose: () => setShowModal(false)
+  }));
 }

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

@@ -0,0 +1,165 @@
+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, useDatasetDispatch } from "../../context/DatasetContext";
+import { useFetch } from "../../utils/requests";
+import { VarDiseaseInfo } from "../var-list/VarItem";
+export function VarInfo(_ref) {
+  let {
+    varItem
+  } = _ref;
+  const ENDPOINT = "disease/gene";
+  const dataset = useDataset();
+  const [params, setParams] = useState({
+    geneName: varItem.name,
+    diseaseDatasets: dataset.diseaseDatasets
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        geneName: varItem.name
+      };
+    });
+  }, [varItem.name]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params, {
+    refetchOnMount: false,
+    enabled: !!dataset.diseaseDatasets.length
+  });
+  const hasDiseaseInfo = !isPending && !serverError && !!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
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...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 dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [diseaseVars, setDiseaseVars] = useState([]);
+  const [sortedDiseaseVars, setSortedDiseaseVars] = useState([]);
+  const [params, setParams] = useState({
+    url: dataset.url,
+    col: dataset.varNamesCol,
+    diseaseDatasets: dataset.diseaseDatasets,
+    diseaseId: disease.id
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        diseaseId: disease.id
+      };
+    });
+  }, [disease]);
+  const diseaseData = useFetch(ENDPOINT, params, {
+    enabled: !!params.diseaseId,
+    refetchOnMount: true
+  });
+  useEffect(() => {
+    if (!diseaseData.isPending && !diseaseData.serverError) {
+      setDiseaseVars(diseaseData.fetchedData);
+    }
+  }, [diseaseData.fetchedData, diseaseData.isPending, diseaseData.serverError]);
+  const varMeans = useVarMean(diseaseVars, !!diseaseVars?.length && dataset.varSort.disease.sort === VAR_SORT.MATRIX);
+  useEffect(() => {
+    if (dataset.varSort.disease.sort === VAR_SORT.MATRIX) {
+      if (!varMeans.isPending && !varMeans.serverError) {
+        setSortedDiseaseVars(_.orderBy(diseaseVars, o => {
+          return sortMeans(o, varMeans.fetchedData);
+        }, dataset.varSort.disease.sortOrder));
+      }
+    } else if (dataset.varSort.disease.sort === VAR_SORT.NAME) {
+      setSortedDiseaseVars(_.orderBy(diseaseVars, "name", dataset.varSort.disease.sortOrder));
+    } else {
+      setSortedDiseaseVars(diseaseVars);
+    }
+  }, [dataset.varSort.disease.sort, dataset.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, v);
+      }
+    }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faPlus
+    })))));
+  });
+  const isPending = diseaseData.isPending || varMeans.isPending && dataset.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
+          };
+        })
+      });
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faPlus
+  }), " Add all as a set")), /*#__PURE__*/React.createElement(ListGroup, {
+    className: "overflow-scroll"
+  }, diseaseVarList)));
+}