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

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

@@ -3,14 +3,14 @@ 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 { useDeferredValue, useEffect, useMemo, useState } 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 { useSettingsDispatch } from "../../context/SettingsContext";
-import { useDiseaseSearch, useVarSearch } from "../../utils/search";
-import { VirtualizedList } from "../../utils/VirtualizedList";
+import { useDeferredValue, useEffect, useMemo, useState } 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 { useSettingsDispatch } from '../../context/SettingsContext';
+import { useDiseaseSearch, useVarSearch } from '../../utils/search';
+import { VirtualizedList } from '../../utils/VirtualizedList';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function VarSearchResults(_ref) {
   let {
@@ -104,7 +104,7 @@ export function VarSearchResults(_ref) {
         }) : /*#__PURE__*/_jsx(ListGroup.Item, {
           as: "button",
           disabled: true,
-          children: !text.length ? "Search features" : !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data"
+          children: !text.length ? 'Search features' : !serverError ? isStale || isPending ? 'Loading...' : 'No items found' : 'Failed to fetch data'
         }, "empty")
       })
     })
@@ -185,7 +185,7 @@ export function DiseasesSearchResults(_ref2) {
         }) : /*#__PURE__*/_jsx(ListGroup.Item, {
           as: "button",
           disabled: true,
-          children: !text.length ? "Search diseases" : !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data"
+          children: !text.length ? 'Search diseases' : !serverError ? isStale || isPending ? 'Loading...' : 'No items found' : 'Failed to fetch data'
         }, "empty")
       })
     })

package/dist/esm/components/toolbar/Toolbar.js

@@ -1,6 +1,6 @@
-import { faList, faSearch, faSliders } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Container, Nav, Navbar } from "react-bootstrap";
+import { faList, faSearch, faSliders } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Container, Nav, Navbar } from 'react-bootstrap';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const Toolbar = _ref => {
   let {
@@ -62,7 +62,7 @@ export const ObsPlotlyToolbar = _ref2 => {
     onClick
   } = _ref2;
   return {
-    name: "Categories",
+    name: 'Categories',
     icon: {
       width: 512,
       height: 512,
@@ -76,7 +76,7 @@ export const VarPlotlyToolbar = _ref3 => {
     onClick
   } = _ref3;
   return {
-    name: "Features",
+    name: 'Features',
     icon: {
       width: 512,
       height: 512,
@@ -90,7 +90,7 @@ export const ControlsPlotlyToolbar = _ref4 => {
     onClick
   } = _ref4;
   return {
-    name: "Controls",
+    name: 'Controls',
     icon: {
       width: 512,
       height: 512,

package/dist/esm/components/var-list/VarItem.js

@@ -3,24 +3,24 @@ 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 { useEffect, useState } from "react";
-import { faDroplet, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { MoreVert } from "@mui/icons-material";
-import _ from "lodash";
-import { Button, Collapse, ListGroup, Table } from "react-bootstrap";
-import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
-import { useFilteredData } from "../../context/FilterContext";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { Histogram } from "../../utils/Histogram";
-import { useDebouncedFetch, useFetch } from "../../utils/requests";
+import { useEffect, useState } from 'react';
+import { faDroplet, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { MoreVert } from '@mui/icons-material';
+import _ from 'lodash';
+import { Button, Collapse, ListGroup, Table } from 'react-bootstrap';
+import { COLOR_ENCODINGS, SELECTION_MODES } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { Histogram } from '../../utils/Histogram';
+import { useDebouncedFetch, useFetch } from '../../utils/requests';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function VarHistogram(_ref) {
   let {
     item
   } = _ref;
-  const ENDPOINT = "var/histograms";
+  const ENDPOINT = 'var/histograms';
   const dataset = useDataset();
   const settings = useSettings();
   const {
@@ -70,13 +70,13 @@ function VarDiseaseInfoItem(item) {
           children: [/*#__PURE__*/_jsx("td", {
             children: "Confidence"
           }), /*#__PURE__*/_jsx("td", {
-            children: item.confidence || "unknown"
+            children: item.confidence || 'unknown'
           })]
         }), /*#__PURE__*/_jsxs("tr", {
           children: [/*#__PURE__*/_jsxs("td", {
-            children: ["Organ", item.organs.length > 1 ? "s" : ""]
+            children: ["Organ", item.organs.length > 1 ? 's' : '']
           }), /*#__PURE__*/_jsx("td", {
-            children: item.organs.map(o => o.name).join(", ")
+            children: item.organs.map(o => o.name).join(', ')
           })]
         }), !_.isEmpty(item.metadata) && _.map(item.metadata, (value, key) => {
           if (value !== null && value !== undefined) {
@@ -114,7 +114,7 @@ export function SelectionItem(_ref3) {
     showRemove = true,
     isMultiple = false
   } = _ref3;
-  const ENDPOINT = "disease/gene";
+  const ENDPOINT = 'disease/gene';
   const [openInfo, setOpenInfo] = useState(false);
   const dataset = useDataset();
   const params = {
@@ -133,7 +133,7 @@ export function SelectionItem(_ref3) {
   const hasDiseaseInfo = !isPending && !serverError && !!(fetchedData !== null && fetchedData !== void 0 && fetchedData.length);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
-      className: hasDiseaseInfo ? "cursor-pointer" : "",
+      className: hasDiseaseInfo ? 'cursor-pointer' : '',
       onClick: () => {
         setOpenInfo(o => !o);
       },
@@ -149,14 +149,14 @@ export function SelectionItem(_ref3) {
             item: item
           }), showSetColorEncoding && /*#__PURE__*/_jsxs(Button, {
             type: "button",
-            variant: isActive ? "primary" : isNotInData ? "outline-secondary" : "outline-primary",
+            variant: isActive ? 'primary' : isNotInData ? 'outline-secondary' : 'outline-primary',
             className: "m-0 p-0 px-1",
             onClick: e => {
               e.stopPropagation();
               selectVar();
             },
             disabled: isNotInData,
-            title: isNotInData ? "Not present in data" : "Set as color encoding",
+            title: isNotInData ? 'Not present in data' : 'Set as color encoding',
             children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {
               icon: faDroplet
             }), isMultiple && /*#__PURE__*/_jsx(FontAwesomeIcon, {
@@ -193,17 +193,17 @@ export function SelectionItem(_ref3) {
 const select = (dispatch, mode, item) => {
   if (mode === SELECTION_MODES.SINGLE) {
     dispatch({
-      type: "select.var",
+      type: 'select.var',
       var: item
     });
   } else if (mode === SELECTION_MODES.MULTIPLE) {
     dispatch({
-      type: "select.multivar",
+      type: 'select.multivar',
       var: item
     });
   }
   dispatch({
-    type: "set.colorEncoding",
+    type: 'set.colorEncoding',
     value: COLOR_ENCODINGS.VAR
   });
 };
@@ -219,19 +219,19 @@ export function VarItem(_ref4) {
   const selectVar = () => debounceSelect(dispatch, mode, item);
   const removeVar = () => {
     dispatch({
-      type: "remove.var",
+      type: 'remove.var',
       var: item
     });
     if (mode === SELECTION_MODES.SINGLE) {
       if (active === item.matrix_index) {
         dispatch({
-          type: "reset.var"
+          type: 'reset.var'
         });
       }
     } else if (mode === SELECTION_MODES.MULTIPLE) {
       if (active.includes(item.matrix_index)) {
         dispatch({
-          type: "deselect.multivar",
+          type: 'deselect.multivar',
           var: item
         });
       }
@@ -239,7 +239,7 @@ export function VarItem(_ref4) {
   };
   const toggleVar = () => {
     dispatch({
-      type: "toggle.multivar",
+      type: 'toggle.multivar',
       var: item
     });
   };

package/dist/esm/components/var-list/VarList.js

@@ -3,26 +3,26 @@ 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 { useEffect, useState } from "react";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import _ from "lodash";
-import { Alert, Button, ListGroup } from "react-bootstrap";
-import ButtonGroup from "react-bootstrap/ButtonGroup";
-import { VarItem } from "./VarItem";
-import { VarListToolbar } from "./VarListToolbar";
-import { VarSet } from "./VarSet";
-import { SELECTION_MODES, VAR_SORT } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
-import { useFilteredData } from "../../context/FilterContext";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { LoadingSpinner } from "../../utils/LoadingIndicators";
-import { useFetch } from "../../utils/requests";
-import { useSelectedMultiVar, useSelectedVar, useSettingsVars } from "../../utils/Resolver";
+import { useEffect, useState } from 'react';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import _ from 'lodash';
+import { Alert, Button, ListGroup } from 'react-bootstrap';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
+import { VarItem } from './VarItem';
+import { VarListToolbar } from './VarListToolbar';
+import { VarSet } from './VarSet';
+import { SELECTION_MODES, VAR_SORT } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { LoadingSpinner } from '../../utils/LoadingIndicators';
+import { useFetch } from '../../utils/requests';
+import { useSelectedMultiVar, useSelectedVar, useSettingsVars } from '../../utils/Resolver';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export const useVarMean = function (varKeys) {
   let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  const ENDPOINT = "matrix/mean";
+  const ENDPOINT = 'matrix/mean';
   const dataset = useDataset();
   const {
     obsIndices
@@ -60,7 +60,7 @@ export const sortMeans = (i, means) => {
 export function VarNamesList(_ref) {
   let {
     mode = SELECTION_MODES.SINGLE,
-    displayName = "genes"
+    displayName = 'genes'
   } = _ref;
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
@@ -90,7 +90,7 @@ export function VarNamesList(_ref) {
         }, settings.varSort.var.sortOrder));
       }
     } else if (settings.varSort.var.sort === VAR_SORT.NAME) {
-      setSortedVars(_.orderBy(settingsVars, "name", settings.varSort.var.sortOrder));
+      setSortedVars(_.orderBy(settingsVars, 'name', settings.varSort.var.sortOrder));
     } else {
       setSortedVars(settingsVars);
     }
@@ -146,7 +146,7 @@ export function VarNamesList(_ref) {
           variant: "info",
           onClick: () => {
             dispatch({
-              type: "add.var",
+              type: 'add.var',
               var: {
                 name: newSetName(),
                 vars: [],
@@ -159,7 +159,7 @@ export function VarNamesList(_ref) {
           variant: "info",
           onClick: () => {
             dispatch({
-              type: "reset.vars"
+              type: 'reset.vars'
             });
           },
           children: [/*#__PURE__*/_jsx(FontAwesomeIcon, {

package/dist/esm/components/var-list/VarListToolbar.js

@@ -1,15 +1,15 @@
-import { useState } from "react";
-import { faArrowDown19, faArrowDownAZ, faArrowUp91, faArrowUpZA, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ToggleButton, ToggleButtonGroup } from "react-bootstrap";
-import { VAR_SORT, VAR_SORT_ORDER } from "../../constants/constants";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
+import { useState } from 'react';
+import { faArrowDown19, faArrowDownAZ, faArrowUp91, faArrowUpZA, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
+import { VAR_SORT, VAR_SORT_ORDER } from '../../constants/constants';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
 
 // @TODO: set option for "var" and "disease"
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function VarListToolbar(_ref) {
   let {
-    varType = "var"
+    varType = 'var'
   } = _ref;
   const settings = useSettings();
   const dispatch = useSettingsDispatch();
@@ -20,7 +20,7 @@ export function VarListToolbar(_ref) {
     if (sort !== sortValue) {
       setSort(sortValue);
       dispatch({
-        type: "set.varSort",
+        type: 'set.varSort',
         var: varType,
         sort: sortValue,
         sortOrder: sortOrder
@@ -29,7 +29,7 @@ export function VarListToolbar(_ref) {
       const newSortOrder = sortOrder === VAR_SORT_ORDER.ASC ? VAR_SORT_ORDER.DESC : VAR_SORT_ORDER.ASC;
       setSortOrder(newSortOrder);
       dispatch({
-        type: "set.varSort",
+        type: 'set.varSort',
         var: varType,
         sort: sortValue,
         sortOrder: newSortOrder
@@ -79,7 +79,7 @@ export function VarListToolbar(_ref) {
         onClick: () => {
           setSort(VAR_SORT.NONE);
           dispatch({
-            type: "set.varSort.sort",
+            type: 'set.varSort.sort',
             var: varType,
             sort: VAR_SORT.NONE
           });

package/dist/esm/components/var-list/VarSet.js

@@ -1,18 +1,18 @@
-import { useState } from "react";
-import { faChevronDown, faChevronUp, faCircleInfo, faDroplet, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import _ from "lodash";
-import { Button, Collapse, ListGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
-import { SelectionItem } from "./VarItem";
-import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
-import { useSettings, useSettingsDispatch } from "../../context/SettingsContext";
-import { SearchModal } from "../search-bar/SearchBar";
+import { useState } from 'react';
+import { faChevronDown, faChevronUp, faCircleInfo, faDroplet, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import _ from 'lodash';
+import { Button, Collapse, ListGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { SelectionItem } from './VarItem';
+import { COLOR_ENCODINGS, SELECTION_MODES } from '../../constants/constants';
+import { useSettings, useSettingsDispatch } from '../../context/SettingsContext';
+import { SearchModal } from '../search-bar/SearchBar';
 
 // @TODO: add button to score genes and plot
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const addVarToSet = (dispatch, set, v) => {
   dispatch({
-    type: "add.varSet.var",
+    type: 'add.varSet.var',
     varSet: set,
     var: v
   });
@@ -28,7 +28,7 @@ function SelectionSet(_ref) {
   } = _ref;
   const [openSet, setOpenSet] = useState(false);
   const [showModal, setShowModal] = useState(false);
-  const [searchText, setSearchText] = useState("");
+  const [searchText, setSearchText] = useState('');
   const varList = set.vars.length ? _.map(set.vars, v => {
     return /*#__PURE__*/_jsx(ListGroup.Item, {
       children: /*#__PURE__*/_jsx(SelectionItem, {
@@ -88,7 +88,7 @@ function SelectionSet(_ref) {
             })
           }), /*#__PURE__*/_jsxs(Button, {
             type: "button",
-            variant: isActive ? "primary" : "outline-primary",
+            variant: isActive ? 'primary' : 'outline-primary',
             className: "m-0 p-0 px-1",
             onClick: e => {
               e.stopPropagation();
@@ -133,7 +133,7 @@ function SelectionSet(_ref) {
       handleClose: () => setShowModal(false),
       text: searchText,
       setText: setSearchText,
-      displayText: "features",
+      displayText: 'features',
       handleSelect: (d, i) => {
         addVarToSet(d, set, i);
       },
@@ -153,16 +153,16 @@ export function VarSet(_ref2) {
   const selectSet = () => {
     if (mode === SELECTION_MODES.SINGLE) {
       dispatch({
-        type: "select.var",
+        type: 'select.var',
         var: set
       });
       dispatch({
-        type: "set.colorEncoding",
-        value: "var"
+        type: 'set.colorEncoding',
+        value: 'var'
       });
     } else if (mode === SELECTION_MODES.MULTIPLE) {
       dispatch({
-        type: "select.multivar",
+        type: 'select.multivar',
         var: set
       });
     }
@@ -171,32 +171,32 @@ export function VarSet(_ref2) {
     if (mode === SELECTION_MODES.SINGLE) {
       if (active === set.name) {
         dispatch({
-          type: "reset.var"
+          type: 'reset.var'
         });
       }
     } else if (mode === SELECTION_MODES.MULTIPLE) {
       if (active.includes(set.name)) {
         dispatch({
-          type: "deselect.multivar",
+          type: 'deselect.multivar',
           var: set
         });
       }
     }
     dispatch({
-      type: "remove.var",
+      type: 'remove.var',
       var: set
     });
   };
   const removeSetVar = v => {
     dispatch({
-      type: "remove.varSet.var",
+      type: 'remove.varSet.var',
       varSet: set,
       var: v
     });
   };
   const toggleSet = () => {
     dispatch({
-      type: "toggle.multivar",
+      type: 'toggle.multivar',
       var: set
     });
   };

package/dist/esm/components/violin/Violin.js

@@ -3,22 +3,22 @@ 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 { useEffect, useState } from "react";
-import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import _ from "lodash";
-import { Badge, Button } from "react-bootstrap";
-import Plot from "react-plotly.js";
-import { PLOTLY_MODEBAR_BUTTONS, VIOLIN_MODES } from "../../constants/constants";
-import { useDataset } from "../../context/DatasetContext";
-import { useFilteredData } from "../../context/FilterContext";
-import { useSettings } from "../../context/SettingsContext";
-import { LoadingSpinner } from "../../utils/LoadingIndicators";
-import { useDebouncedFetch } from "../../utils/requests";
-import { useSelectedMultiVar, useSelectedObs, useSelectedVar } from "../../utils/Resolver";
-import { StyledTooltip } from "../../utils/StyledTooltip";
-import { PlotAlert } from "../full-page/PlotAlert";
-import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from "../toolbar/Toolbar";
+import { useEffect, useMemo, useState } from 'react';
+import { faCircleInfo } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import _ from 'lodash';
+import { Badge, Button } from 'react-bootstrap';
+import Plot from 'react-plotly.js';
+import { PLOTLY_MODEBAR_BUTTONS, VIOLIN_MODES } from '../../constants/constants';
+import { useDataset } from '../../context/DatasetContext';
+import { useFilteredData } from '../../context/FilterContext';
+import { useSettings } from '../../context/SettingsContext';
+import { LoadingSpinner } from '../../utils/LoadingIndicators';
+import { useDebouncedFetch } from '../../utils/requests';
+import { useSelectedMultiVar, useSelectedObs, useSelectedVar } from '../../utils/Resolver';
+import { StyledTooltip } from '../../utils/StyledTooltip';
+import { PlotAlert } from '../full-page/PlotAlert';
+import { ControlsPlotlyToolbar, ObsPlotlyToolbar, VarPlotlyToolbar } from '../toolbar/Toolbar';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function Violin(_ref) {
   let {
@@ -32,7 +32,7 @@ export function Violin(_ref) {
     plotType,
     setPlotType
   } = _ref;
-  const ENDPOINT = "violin";
+  const ENDPOINT = 'violin';
   const dataset = useDataset();
   const settings = useSettings();
   const {
@@ -45,7 +45,7 @@ export function Violin(_ref) {
   const selectedMultiVar = useSelectedMultiVar();
   const selectedVar = useSelectedVar();
   const selectedObs = useSelectedObs();
-  const [params, setParams] = useState(_objectSpread({
+  const params = useMemo(() => _objectSpread({
     url: dataset.url,
     mode: mode,
     scale: settings.controls.scale.violinplot,
@@ -67,7 +67,7 @@ export function Violin(_ref) {
       obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
       obsIndices: isSliced ? [...(obsIndices || [])] : null
     }
-  }[mode]));
+  }[mode]), [dataset.url, dataset.varNamesCol, isSliced, mode, obsIndices, selectedMultiVar, selectedObs, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.isSet, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name, selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars, settings.controls.scale.violinplot]);
   // @TODO: set default scale
 
   useEffect(() => {
@@ -77,39 +77,12 @@ export function Violin(_ref) {
       } else {
         setHasSelections(false);
       }
-      setParams(p => {
-        return _objectSpread(_objectSpread({}, p), {}, {
-          url: dataset.url,
-          mode: mode,
-          varKeys: selectedMultiVar.map(i => i.isSet ? {
-            name: i.name,
-            indices: i.vars.map(v => v.index)
-          } : i.index),
-          scale: settings.controls.scale.violinplot,
-          varNamesCol: dataset.varNamesCol
-        });
-      });
     } else if (mode === VIOLIN_MODES.GROUPBY) {
       if (selectedObs && selectedVar) {
         setHasSelections(true);
       } else {
         setHasSelections(false);
       }
-      setParams(p => {
-        return _objectSpread(_objectSpread({}, p), {}, {
-          url: dataset.url,
-          mode: mode,
-          varKey: selectedVar !== null && selectedVar !== void 0 && selectedVar.isSet ? {
-            name: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.name,
-            indices: selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.vars.map(v => v.index)
-          } : selectedVar === null || selectedVar === void 0 ? void 0 : selectedVar.index,
-          obsCol: selectedObs,
-          obsValues: !(selectedObs !== null && selectedObs !== void 0 && selectedObs.omit.length) ? null : _.difference(selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.values, selectedObs === null || selectedObs === void 0 ? void 0 : selectedObs.omit),
-          obsIndices: isSliced ? [...(obsIndices || [])] : null,
-          scale: settings.controls.scale.violinplot,
-          varNamesCol: dataset.varNamesCol
-        });
-      });
     }
   }, [settings.controls.scale.violinplot, selectedMultiVar, selectedObs, selectedVar, dataset.url, dataset.varNamesCol, obsIndices, isSliced, mode]);
   const {
@@ -117,12 +90,15 @@ export function Violin(_ref) {
     isPending,
     serverError
   } = useDebouncedFetch(ENDPOINT, params, 500, {
-    enabled: mode === VIOLIN_MODES.MULTIKEY && (!!params.varKeys.length || !!params.obsKeys.length) || mode === VIOLIN_MODES.GROUPBY && !!params.varKey && !!params.obsCol
+    isEnabled: mode === VIOLIN_MODES.MULTIKEY && (params => !!params.varKeys.length || !!params.obsKeys.length) || mode === VIOLIN_MODES.GROUPBY && (params => !!params.varKey && !!params.obsCol)
   });
   useEffect(() => {
-    if (hasSelections && !isPending && !serverError) {
+    if (hasSelections && !!fetchedData && !isPending && !serverError) {
       setData(fetchedData.data);
       setLayout(fetchedData.layout);
+    } else {
+      setData([]);
+      setLayout({});
     }
   }, [fetchedData, hasSelections, isPending, serverError]);
   const customModeBarButtons = _.compact([showObsBtn && ObsPlotlyToolbar({
@@ -142,15 +118,15 @@ export function Violin(_ref) {
           children: [/*#__PURE__*/_jsx("div", {
             className: "flex-grow-1 position-relative",
             style: {
-              minHeight: "0"
+              minHeight: '0'
             },
             children: /*#__PURE__*/_jsx(Plot, {
               data: data,
               layout: layout,
               useResizeHandler: true,
               style: {
-                width: "100%",
-                height: "100%"
+                width: '100%',
+                height: '100%'
               },
               config: {
                 displaylogo: false,
@@ -188,25 +164,25 @@ export function Violin(_ref) {
       setPlotType: setPlotType,
       children: [mode === VIOLIN_MODES.MULTIKEY && /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
-        children: ["Select one or more", " ", showVarsBtn ? /*#__PURE__*/_jsx(Button, {
+        children: ["Select one or more", ' ', showVarsBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowVars,
           children: "features"
-        }) : "features", " ", "to display their expression distributions across all observations."]
+        }) : 'features', ' ', "to display their expression distributions across all observations."]
       }), mode === VIOLIN_MODES.GROUPBY && /*#__PURE__*/_jsxs("p", {
         className: "p-0 m-0",
-        children: ["Select a", " ", showObsBtn ? /*#__PURE__*/_jsx(Button, {
+        children: ["Select a", ' ', showObsBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowObs,
           children: "category"
-        }) : "category", " ", "to group observations, and choose a", " ", showVarsBtn ? /*#__PURE__*/_jsx(Button, {
+        }) : 'category', ' ', "to group observations, and choose a", ' ', showVarsBtn ? /*#__PURE__*/_jsx(Button, {
           variant: "link",
           className: "border-0 p-0 align-baseline",
           onClick: setShowVars,
           children: "feature"
-        }) : "feature", " ", "to view its distribution within each group."]
+        }) : 'feature', ' ', "to view its distribution within each group."]
       })]
     });
   } else {
@@ -215,7 +191,7 @@ export function Violin(_ref) {
       heading: "Error displaying the violin plot",
       plotType: plotType,
       setPlotType: setPlotType,
-      children: serverError.message || "An unexpected error occurred while generating the plot."
+      children: serverError.message || 'An unexpected error occurred while generating the plot.'
     });
   }
 }