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

package/dist/cjs/components/full-page/FullPage.js

@@ -73,34 +73,14 @@ function FullPage(_ref) {
     style: {
       height: appDimensions.height
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar, {
-    expand: "sm",
-    bg: "primary",
-    className: "cherita-navbar"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "container-fluid"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Toggle, {
-    "aria-controls": "navbarScroll"
-  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Collapse, {
-    id: "navbarScroll"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
-    className: "me-auto my-0",
-    navbarScroll: true
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, {
-    className: "d-block d-lg-none"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowObs(true)
-  }, "Observations")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowVars(true)
-  }, "Features"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
-    className: "d-flex"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowControls(true)
-  }, "Controls")))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-obs modern-scrollbars border-end h-100"
   }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, props)), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-canvas flex-grow-1"
-  }, children), /*#__PURE__*/_react.default.createElement("div", {
+  }, children({
+    setShowObs,
+    setShowVars
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-sidebar p-3"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Body, {
     className: "d-flex flex-column p-0"
@@ -122,7 +102,8 @@ function FullPage(_ref) {
     handleClose: () => setShowObs(false)
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasVars, {
     show: showVars,
-    handleClose: () => setShowVars(false)
+    handleClose: () => setShowVars(false),
+    mode: varMode
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
     show: showControls,
     handleClose: () => setShowControls(false),
@@ -133,7 +114,19 @@ function FullPage(_ref) {
   }))));
 }
 function FullPageScatterplot(props) {
-  return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null));
+  return /*#__PURE__*/_react.default.createElement(FullPage, _extends({}, props, {
+    varMode: _constants.SELECTION_MODES.SINGLE
+  }), _ref2 => {
+    let {
+      setShowObs,
+      setShowVars
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, {
+      setShowObs: setShowObs,
+      setShowVars: setShowVars,
+      isFullscreen: true
+    });
+  });
 }
 function FullPagePlots(props) {
   return /*#__PURE__*/_react.default.createElement(FullPage, _extends({}, props, {

package/dist/cjs/components/full-page/FullPagePseudospatial.js

@@ -21,6 +21,7 @@ var _SearchBar = require("../search-bar/SearchBar");
 var _VarList = require("../var-list/VarList");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function FullPage(_ref) {
   let {
     children,
@@ -73,34 +74,14 @@ function FullPage(_ref) {
     style: {
       height: appDimensions.height
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar, {
-    expand: "sm",
-    bg: "primary",
-    className: "cherita-navbar"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "container-fluid"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Toggle, {
-    "aria-controls": "navbarScroll"
-  }), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Navbar.Collapse, {
-    id: "navbarScroll"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
-    className: "me-auto my-0",
-    navbarScroll: true
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, {
-    className: "d-block d-lg-none"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowObs(true)
-  }, "Observations")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowVars(true)
-  }, "Features"))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav, {
-    className: "d-flex"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Item, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Nav.Link, {
-    onClick: () => setShowControls(true)
-  }, "Controls")))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-obs modern-scrollbars border-end h-100"
   }, /*#__PURE__*/_react.default.createElement(_ObsList.ObsColsList, props)), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-canvas flex-grow-1"
-  }, children), /*#__PURE__*/_react.default.createElement("div", {
+  }, children({
+    setShowObs,
+    setShowVars
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-app-sidebar p-3"
   }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Card.Header, {
     className: "d-flex justify-content-evenly align-items-center"
@@ -141,7 +122,8 @@ function FullPage(_ref) {
     handleClose: () => setShowObs(false)
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasVars, {
     show: showVars,
-    handleClose: () => setShowVars(false)
+    handleClose: () => setShowVars(false),
+    mode: varMode
   }), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
     show: showControls,
     handleClose: () => setShowControls(false),
@@ -157,5 +139,17 @@ function FullPage(_ref) {
   }))));
 }
 function FullPagePseudospatial(props) {
-  return /*#__PURE__*/_react.default.createElement(FullPage, props, /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, null));
+  return /*#__PURE__*/_react.default.createElement(FullPage, _extends({}, props, {
+    varMode: _constants.SELECTION_MODES.SINGLE
+  }), _ref2 => {
+    let {
+      setShowObs,
+      setShowVars
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_Scatterplot.Scatterplot, {
+      setShowObs: setShowObs,
+      setShowVars: setShowVars,
+      isFullscreen: true
+    });
+  });
 }

package/dist/cjs/components/offcanvas/index.js

@@ -24,8 +24,7 @@ function OffcanvasObs(_ref) {
   return /*#__PURE__*/_react.default.createElement(_Offcanvas.default, {
     show: show,
     onHide: handleClose,
-    scroll: true,
-    backdrop: false
+    scroll: true
   }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Header, {
     closeButton: true
   }, /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Title, null, "Categories")), /*#__PURE__*/_react.default.createElement(_Offcanvas.default.Body, {

package/dist/cjs/components/scatterplot/Scatterplot.js

@@ -39,7 +39,10 @@ const INITIAL_VIEW_STATE = {
 };
 function Scatterplot(_ref) {
   let {
-    radius = 30
+    radius = 30,
+    setShowObs,
+    setShowVars,
+    isFullscreen = false
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const {
@@ -382,7 +385,10 @@ function Scatterplot(_ref) {
     decreaseZoom: () => setViewState(v => ({
       ...v,
       zoom: v.zoom - 1
-    }))
+    })),
+    setShowObs: setShowObs,
+    setShowVars: setShowVars,
+    isFullscreen: isFullscreen
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-spatial-footer"
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -8,7 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _iconsMaterial = require("@mui/icons-material");
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
 var _editModes = require("@nebula.gl/edit-modes");
+var _reactBootstrap = require("react-bootstrap");
 var _Button = _interopRequireDefault(require("react-bootstrap/Button"));
 var _ButtonGroup = _interopRequireDefault(require("react-bootstrap/ButtonGroup"));
 var _Dropdown = _interopRequireDefault(require("react-bootstrap/Dropdown"));
@@ -27,13 +29,20 @@ function SpatialControls(_ref) {
     selectedFeatureIndexes,
     resetBounds,
     increaseZoom,
-    decreaseZoom
+    decreaseZoom,
+    setShowObs,
+    setShowVars,
+    isFullscreen
   } = _ref;
   const dataset = (0, _DatasetContext.useDataset)();
   const dispatch = (0, _DatasetContext.useDatasetDispatch)();
   const [showControls, setShowControls] = (0, _react.useState)(false);
   const handleCloseControls = () => setShowControls(false);
   const handleShowControls = () => setShowControls(true);
+  const LgBreakpoint = (0, _useMediaQuery.default)("(max-width: 991.98px)");
+  const XlBreakpoint = (0, _useMediaQuery.default)("(max-width: 1199.98px)");
+  const showObsBtn = isFullscreen ? LgBreakpoint : true;
+  const showVarsBtn = isFullscreen ? XlBreakpoint : true;
   const onSelect = (eventKey, event) => {
     switch (eventKey) {
       case "DrawPolygonMode":
@@ -85,10 +94,37 @@ function SpatialControls(_ref) {
   })));
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-spatial-controls"
-  }, /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+  }, (showObsBtn || showVarsBtn) && /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
     vertical: true,
     className: "w-100 mb-1"
+  }, showObsBtn && /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    placement: "right",
+    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+      id: "tooltip-obs"
+    }, "Browse categories")
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setShowObs(true)
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faList
+  }))), showVarsBtn && /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+    placement: "right",
+    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
+      id: "tooltip-vars"
+    }, "Search features")
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setShowVars(true)
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faSearch
+  })))), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
+    vertical: true,
+    className: "w-100"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setMode(() => _editModes.ViewMode),
+    title: "Set dragging mode",
+    active: mode === _editModes.ViewMode
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faHand
+  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: increaseZoom,
     title: "Increase zoom"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
@@ -98,24 +134,13 @@ function SpatialControls(_ref) {
     title: "Decrease zoom"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faMinus
-  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "border-bottom"
+  }), " ", /*#__PURE__*/_react.default.createElement(_Button.default, {
     onClick: resetBounds,
     title: "Reset zoom and center"
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faCrosshairs
-  })), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: handleShowControls
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faSliders
-  }))), /*#__PURE__*/_react.default.createElement(_ButtonGroup.default, {
-    vertical: true,
-    className: "w-100"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    onClick: () => setMode(() => _editModes.ViewMode),
-    title: "Set dragging mode",
-    active: mode === _editModes.ViewMode
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faHand
   })), /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
     as: _ButtonGroup.default,
     className: "caret-off",
@@ -141,7 +166,11 @@ function SpatialControls(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
     icon: _freeSolidSvgIcons.faTrash,
     className: "nav-icon"
-  }), "Delete polygons"))), !!features?.features?.length && polygonControls), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
+  }), "Delete polygons"))), !!features?.features?.length && polygonControls, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: handleShowControls
+  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
+    icon: _freeSolidSvgIcons.faSliders
+  }))), /*#__PURE__*/_react.default.createElement(_offcanvas.OffcanvasControls, {
     show: showControls,
     handleClose: handleCloseControls,
     Controls: _ScatterplotControls.ScatterplotControls

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Toolbox = Toolbox;
 var _react = _interopRequireDefault(require("react"));
-var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
 var _reactBootstrap = require("react-bootstrap");
 var _string = require("../../utils/string");
 var _ObsmList = require("../obsm-list/ObsmList");
@@ -19,22 +17,7 @@ function Toolbox(_ref) {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "cherita-toolbox"
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_ObsmList.ObsmKeysList, null), mode && /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
-    placement: "top",
-    overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
-      id: "tooltip-dropped-mode"
-    }, "The color scale is currently set to ", mode)
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    size: "sm",
-    variant: "primary",
-    style: {
-      cursor: "default"
-    },
-    "aria-disabled": "true"
-  }, /*#__PURE__*/_react.default.createElement(_reactFontawesome.FontAwesomeIcon, {
-    icon: _freeSolidSvgIcons.faDroplet,
-    className: "me-1"
-  }), " ", mode)), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_ObsmList.ObsmKeysList, null), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.OverlayTrigger, {
     placement: "top",
     overlay: /*#__PURE__*/_react.default.createElement(_reactBootstrap.Tooltip, {
       id: "tooltip-dropped-mode"

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

@@ -4,11 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SearchBar = SearchBar;
+exports.SearchModal = SearchModal;
 var _react = _interopRequireWildcard(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"));
+var _Nav = _interopRequireDefault(require("react-bootstrap/Nav"));
+var _Row = _interopRequireDefault(require("react-bootstrap/Row"));
+var _Tab = _interopRequireDefault(require("react-bootstrap/Tab"));
+var _SearchInfo = require("./SearchInfo");
 var _SearchResults = require("./SearchResults");
+var _constants = require("../../constants/constants");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -23,77 +31,164 @@ function onVarSelect(dispatch, item) {
   });
   dispatch({
     type: "set.colorEncoding",
-    value: "var"
+    value: _constants.COLOR_ENCODINGS.VAR
   });
 }
-function SearchBar(_ref) {
+function addVarSet(dispatch, _ref) {
   let {
-    searchVar = true,
-    searchDiseases = false,
-    handleSelect = onVarSelect
+    name,
+    vars
   } = _ref;
-  const [showSuggestions, setShowSuggestions] = (0, _react.useState)(false);
-  const [text, setText] = (0, _react.useState)("");
-  const inputRef = (0, _react.useRef)(null);
-  const displayText = [...(searchVar ? ["features"] : []), ...(searchDiseases ? ["diseases"] : [])].join(" and ");
-  (0, _react.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.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
+  });
+}
+const FEATURE_TYPE = {
+  VAR: "var",
+  DISEASE: "disease"
+};
+function SearchModal(_ref2) {
+  let {
+    show,
+    handleClose,
+    text,
+    setText,
+    displayText,
+    handleSelect = onVarSelect,
+    searchVar,
+    searchDiseases
+  } = _ref2;
+  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, {
+    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(_reactBootstrap.InputGroup, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Control, {
-    ref: inputRef,
-    onFocus: () => {
-      setShowSuggestions(text.length > 0);
-    },
-    onBlur: () => {
-      _lodash.default.delay(() => {
-        setShowSuggestions(false);
-      }, 150);
-    },
+  }, /*#__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);
-    },
-    style: {
-      paddingLeft: "2.5rem",
-      borderRadius: "5px"
-    }
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      position: "absolute",
-      left: "10px",
-      top: "50%",
-      transform: "translateY(-50%)",
-      pointerEvents: "none",
-      zIndex: 10
+      setSelectedResult({
+        var: null,
+        disease: null
+      });
+      setVarResultsLength(null);
+      setDiseaseResultsLength(null);
     }
-  }, /*#__PURE__*/_react.default.createElement(_Search.default, null))), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown, {
-    show: showSuggestions,
-    onMouseDown: e => {
+  }), /*#__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 && `(${varResultsLength})`)), searchDiseases && /*#__PURE__*/_react.default.createElement(_Nav.default.Item, null, /*#__PURE__*/_react.default.createElement(_Nav.default.Link, {
+    eventKey: FEATURE_TYPE.DISEASE
+  }, "Diseases", " ", !!diseaseResultsLength && `(${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 {
+        ...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 {
+        ...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"))))));
+}
+function SearchBar(_ref3) {
+  let {
+    searchVar = true,
+    searchDiseases = false
+  } = _ref3;
+  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();
-    },
-    onSelect: () => {
-      inputRef.current.blur();
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Menu, {
-    style: {
-      width: "90%"
     }
-  }, searchVar && /*#__PURE__*/_react.default.createElement(_SearchResults.VarSearchResults, {
-    text: text,
-    setShowSuggestions: setShowSuggestions,
-    handleSelect: handleSelect
-  }), searchVar && searchDiseases && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Dropdown.Divider, null), searchDiseases && /*#__PURE__*/_react.default.createElement(_SearchResults.DiseasesSearchResults, {
+  }, /*#__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,
-    setShowSuggestions: setShowSuggestions
-  }))))));
+    setText: setText,
+    displayText: displayText,
+    searchVar: searchVar,
+    searchDiseases: searchDiseases,
+    handleClose: () => setShowModal(false)
+  }));
 }