@haniffalab/cherita-react 1.4.1-dev.2025-10-22.61540191 → 1.4.1-dev.2025-10-23.3179e534

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 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";
@@ -12,6 +12,7 @@ import { OffcanvasControls } from "../offcanvas";
 import { ScatterplotControls } from "./ScatterplotControls";
 import { BREAKPOINTS } from "../../constants/constants";
 import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function SpatialControls(_ref) {
   var _features$features;
   let {
@@ -63,109 +64,136 @@ export function SpatialControls(_ref) {
       features: []
     });
   };
-  const polygonControls = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    active: settings.sliceBy.polygons,
-    title: "Filter data with polygons",
-    onClick: () => {
-      setMode(() => ViewMode);
-      dispatch({
-        type: "toggle.slice.polygons"
-      });
-    }
-  }, /*#__PURE__*/React.createElement(JoinInner, null)), /*#__PURE__*/React.createElement(Button, {
-    title: "Delete selected polygons",
-    onClick: () => {
-      const newFeatures = features.features.filter((_f, i) => !selectedFeatureIndexes.includes(i));
-      setFeatures({
-        type: "FeatureCollection",
-        features: newFeatures
-      });
-    },
-    disabled: !selectedFeatureIndexes.length
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faTrash
-  })));
-  return /*#__PURE__*/React.createElement("div", {
-    className: "cherita-spatial-controls"
-  }, (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, {
-    icon: faPlus
-  })), /*#__PURE__*/React.createElement(Button, {
-    onClick: decreaseZoom,
-    title: "Decrease zoom"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faMinus
-  })), /*#__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(Dropdown, {
-    as: ButtonGroup,
-    className: "caret-off",
-    drop: "end",
-    onSelect: onSelect
-  }, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
-    id: "dropdown-autoclose-outside",
-    className: "caret-off ".concat(mode === DrawPolygonByDraggingMode || mode === ModifyMode ? "active" : "")
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faDrawPolygon
-  })), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Polygon tools"), /*#__PURE__*/React.createElement(Dropdown.Item, {
-    eventKey: "DrawPolygonByDraggingMode"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faDrawPolygon,
-    className: "nav-icon"
-  }), "Draw a polygon"), /*#__PURE__*/React.createElement(Dropdown.Item, {
-    eventKey: "ModifyMode"
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faPen,
-    className: "nav-icon"
-  }), "Modify polygons"), /*#__PURE__*/React.createElement(Dropdown.Item, {
-    onClick: deleteFeatures
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faTrash,
-    className: "nav-icon"
-  }), "Delete polygons"))), !!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _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
-  }));
+  const polygonControls = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      active: settings.sliceBy.polygons,
+      title: "Filter data with polygons",
+      onClick: () => {
+        setMode(() => ViewMode);
+        dispatch({
+          type: "toggle.slice.polygons"
+        });
+      },
+      children: /*#__PURE__*/_jsx(JoinInner, {})
+    }), /*#__PURE__*/_jsx(Button, {
+      title: "Delete selected polygons",
+      onClick: () => {
+        const newFeatures = features.features.filter((_f, i) => !selectedFeatureIndexes.includes(i));
+        setFeatures({
+          type: "FeatureCollection",
+          features: newFeatures
+        });
+      },
+      disabled: !selectedFeatureIndexes.length,
+      children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+        icon: faTrash
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: "cherita-spatial-controls",
+    children: [(showObsBtn || showVarsBtn) && /*#__PURE__*/_jsxs(ButtonGroup, {
+      vertical: true,
+      className: "w-100 mb-1",
+      children: [showObsBtn && /*#__PURE__*/_jsx(OverlayTrigger, {
+        placement: "right",
+        overlay: /*#__PURE__*/_jsx(Tooltip, {
+          id: "tooltip-obs",
+          children: "Browse categories"
+        }),
+        children: /*#__PURE__*/_jsx(Button, {
+          onClick: () => setShowObs(true),
+          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: faList
+          })
+        })
+      }), showVarsBtn && /*#__PURE__*/_jsx(OverlayTrigger, {
+        placement: "right",
+        overlay: /*#__PURE__*/_jsx(Tooltip, {
+          id: "tooltip-vars",
+          children: "Search features"
+        }),
+        children: /*#__PURE__*/_jsx(Button, {
+          onClick: () => setShowVars(true),
+          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: faSearch
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ButtonGroup, {
+      vertical: true,
+      className: "w-100",
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: () => setMode(() => ViewMode),
+        title: "Set dragging mode",
+        active: mode === ViewMode,
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faHand
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: increaseZoom,
+        title: "Increase zoom",
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faPlus
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: decreaseZoom,
+        title: "Decrease zoom",
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faMinus
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "border-bottom"
+      }), " ", /*#__PURE__*/_jsx(Button, {
+        onClick: resetBounds,
+        title: "Reset zoom and center",
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faCrosshairs
+        })
+      }), /*#__PURE__*/_jsxs(Dropdown, {
+        as: ButtonGroup,
+        className: "caret-off",
+        drop: "end",
+        onSelect: onSelect,
+        children: [/*#__PURE__*/_jsx(Dropdown.Toggle, {
+          id: "dropdown-autoclose-outside",
+          className: "caret-off ".concat(mode === DrawPolygonByDraggingMode || mode === ModifyMode ? "active" : ""),
+          children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+            icon: faDrawPolygon
+          })
+        }), /*#__PURE__*/_jsxs(Dropdown.Menu, {
+          children: [/*#__PURE__*/_jsx(Dropdown.Header, {
+            children: "Polygon tools"
+          }), /*#__PURE__*/_jsxs(Dropdown.Item, {
+            eventKey: "DrawPolygonByDraggingMode",
+            children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+              icon: faDrawPolygon,
+              className: "nav-icon"
+            }), "Draw a polygon"]
+          }), /*#__PURE__*/_jsxs(Dropdown.Item, {
+            eventKey: "ModifyMode",
+            children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+              icon: faPen,
+              className: "nav-icon"
+            }), "Modify polygons"]
+          }), /*#__PURE__*/_jsxs(Dropdown.Item, {
+            onClick: deleteFeatures,
+            children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
+              icon: faTrash,
+              className: "nav-icon"
+            }), "Delete polygons"]
+          })]
+        })]
+      }), !!(features !== null && features !== void 0 && (_features$features = features.features) !== null && _features$features !== void 0 && _features$features.length) && polygonControls, /*#__PURE__*/_jsx(Button, {
+        onClick: handleShowControls,
+        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
+          icon: faSliders
+        })
+      })]
+    }), /*#__PURE__*/_jsx(OffcanvasControls, {
+      show: showControls,
+      handleClose: handleCloseControls,
+      Controls: ScatterplotControls
+    })]
+  });
 }

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

@@ -1,38 +1,50 @@
-import React from "react";
 import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { formatNumerical } from "../../utils/string";
 import { ObsmKeysList } from "../obsm-list/ObsmList";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function Toolbox(_ref) {
   let {
     mode,
     obsLength,
-    slicedLength
+    slicedLength,
+    setHasObsm
   } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "cherita-toolbox"
-  }, /*#__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"
-    }, "You have selected ", formatNumerical(slicedLength), " out of", " ", formatNumerical(obsLength), " cells")
-  }, /*#__PURE__*/React.createElement(Button, {
-    size: "sm",
-    variant: "primary",
-    style: {
-      cursor: "default"
-    },
-    "aria-disabled": "true"
-  }, formatNumerical(slicedLength), " of ", formatNumerical(obsLength), " ", "cells")) : /*#__PURE__*/React.createElement(OverlayTrigger, {
-    placement: "top",
-    overlay: /*#__PURE__*/React.createElement(Tooltip, {
-      id: "tooltip-dropped-mode"
-    }, "You are viewing ", formatNumerical(obsLength), " cells")
-  }, /*#__PURE__*/React.createElement(Button, {
-    size: "sm",
-    variant: "primary",
-    style: {
-      cursor: "default"
-    },
-    "aria-disabled": "true"
-  }, formatNumerical(obsLength), " cells")))));
+  return /*#__PURE__*/_jsx("div", {
+    className: "cherita-toolbox",
+    children: /*#__PURE__*/_jsxs(ButtonGroup, {
+      children: [/*#__PURE__*/_jsx(ObsmKeysList, {
+        setHasObsm: setHasObsm
+      }), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/_jsx(OverlayTrigger, {
+        placement: "top",
+        overlay: /*#__PURE__*/_jsxs(Tooltip, {
+          id: "tooltip-dropped-mode",
+          children: ["You have selected ", formatNumerical(slicedLength), " out of", " ", formatNumerical(obsLength), " cells"]
+        }),
+        children: /*#__PURE__*/_jsxs(Button, {
+          size: "sm",
+          variant: "primary",
+          style: {
+            cursor: "default"
+          },
+          "aria-disabled": "true",
+          children: [formatNumerical(slicedLength), " of ", formatNumerical(obsLength), " ", "cells"]
+        })
+      }) : /*#__PURE__*/_jsx(OverlayTrigger, {
+        placement: "top",
+        overlay: /*#__PURE__*/_jsxs(Tooltip, {
+          id: "tooltip-dropped-mode",
+          children: ["You are viewing ", formatNumerical(obsLength), " cells"]
+        }),
+        children: /*#__PURE__*/_jsxs(Button, {
+          size: "sm",
+          variant: "primary",
+          style: {
+            cursor: "default"
+          },
+          "aria-disabled": "true",
+          children: [formatNumerical(obsLength), " cells"]
+        })
+      }))]
+    })
+  });
 }

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

@@ -3,7 +3,7 @@ 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 { useState } from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import SearchIcon from "@mui/icons-material/Search";
 import _ from "lodash";
@@ -16,6 +16,7 @@ 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",
@@ -74,98 +75,136 @@ export function SearchModal(_ref2) {
   });
   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 {
@@ -175,22 +214,31 @@ export function SearchBar(_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();
-    }
-  }, /*#__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)
+    })]
+  });
 }