@haniffalab/cherita-react 1.0.0-dev.2025-03-13.bda9e1a6 → 1.0.0-dev.2025-03-13.274a553c

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

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import { faPlus, faMinus, faCrosshairs, faHand, faDrawPolygon, faTrash, faSliders } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { JoinInner } from "@mui/icons-material";
+import { DrawPolygonMode, DrawLineStringMode, DrawPolygonByDraggingMode, DrawRectangleMode, ViewMode, ModifyMode } from "@nebula.gl/edit-modes";
+import Button from "react-bootstrap/Button";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import Dropdown from "react-bootstrap/Dropdown";
+import DropdownButton from "react-bootstrap/DropdownButton";
+import { ScatterplotControls } from "./ScatterplotControls";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+import { OffcanvasControls } from "../offcanvas";
+export function SpatialControls(_ref) {
+  let {
+    mode,
+    setMode,
+    features,
+    setFeatures,
+    selectedFeatureIndexes,
+    resetBounds,
+    increaseZoom,
+    decreaseZoom
+  } = _ref;
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [showControls, setShowControls] = useState(false);
+  const handleCloseControls = () => setShowControls(false);
+  const handleShowControls = () => setShowControls(true);
+  const onSelect = (eventKey, event) => {
+    switch (eventKey) {
+      case "DrawPolygonMode":
+        setMode(() => DrawPolygonMode);
+        break;
+      case "DrawLineStringMode":
+        setMode(() => DrawLineStringMode);
+        break;
+      case "DrawPolygonByDraggingMode":
+        setMode(() => DrawPolygonByDraggingMode);
+        break;
+      case "DrawRectangleMode":
+        setMode(() => DrawRectangleMode);
+        break;
+      case "ModifyMode":
+        setMode(() => ModifyMode);
+        break;
+      default:
+        setMode(() => ViewMode);
+    }
+  };
+  const deleteFeatures = (_eventKey, _event) => {
+    setFeatures({
+      type: "FeatureCollection",
+      features: []
+    });
+  };
+  const polygonControls = /*#__PURE__*/React.createElement("div", {
+    className: "mt-2"
+  }, /*#__PURE__*/React.createElement(ButtonGroup, {
+    vertical: true,
+    className: "w-100"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: dataset.sliceBy.polygons ? "primary" : "outline-primary",
+    title: "Filter data with polygons",
+    onClick: () => {
+      setMode(() => ViewMode);
+      dispatch({
+        type: "toggle.slice.polygons"
+      });
+    }
+  }, /*#__PURE__*/React.createElement(JoinInner, null)), /*#__PURE__*/React.createElement(Button, {
+    variant: "outline-primary",
+    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"
+  }, /*#__PURE__*/React.createElement(ButtonGroup, {
+    vertical: true,
+    className: "w-100"
+  }, /*#__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(Button, {
+    onClick: resetBounds,
+    title: "Reset zoom and center"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faCrosshairs
+  })), /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setMode(() => ViewMode),
+    title: "Set dragging mode",
+    variant: mode === ViewMode ? "primary" : "outline-primary"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faHand
+  })), /*#__PURE__*/React.createElement(DropdownButton, {
+    as: ButtonGroup,
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faDrawPolygon
+    })),
+    drop: "end",
+    id: "bg-vertical-dropdown-1",
+    className: "caret-off",
+    onSelect: onSelect
+  }, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Selection tools"), /*#__PURE__*/React.createElement(Dropdown.Item, {
+    eventKey: "DrawPolygonMode"
+  }, "Draw a polygon"), /*#__PURE__*/React.createElement(Dropdown.Item, {
+    eventKey: "DrawPolygonByDraggingMode"
+  }, "Draw a Polygon by Dragging"), /*#__PURE__*/React.createElement(Dropdown.Item, {
+    eventKey: "ModifyMode"
+  }, "Modify polygons"), /*#__PURE__*/React.createElement(Dropdown.Item, {
+    eventKey: "ViewMode"
+  }, "Viewing mode"), /*#__PURE__*/React.createElement(Dropdown.Item, {
+    onClick: deleteFeatures
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTrash
+  }), " Delete polygons")), /*#__PURE__*/React.createElement(Button, {
+    onClick: handleShowControls
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faSliders
+  }))), !!features?.features?.length && polygonControls, /*#__PURE__*/React.createElement(OffcanvasControls, {
+    show: showControls,
+    handleClose: handleCloseControls,
+    Controls: ScatterplotControls
+  }));
+}

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { faDroplet } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Button from "react-bootstrap/Button";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import { formatNumerical } from "../../utils/string";
+import { ObsmKeysList } from "../obsm-list/ObsmList";
+export function Toolbox(_ref) {
+  let {
+    mode,
+    obsLength,
+    slicedLength
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "cherita-toolbox"
+  }, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(ObsmKeysList, null), /*#__PURE__*/React.createElement(Button, {
+    size: "sm"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faDroplet
+  }), " ", mode), (mode || !isNaN(obsLength)) && (mode !== null && !isNaN(slicedLength) && slicedLength !== obsLength ? /*#__PURE__*/React.createElement(Button, {
+    size: "sm"
+  }, formatNumerical(slicedLength), " out of", " ", formatNumerical(obsLength), " cells") : /*#__PURE__*/React.createElement(Button, {
+    size: "sm"
+  }, formatNumerical(obsLength), " cells"))));
+}

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

@@ -0,0 +1,74 @@
+import React, { useEffect, useState, useRef } from "react";
+import _ from "lodash";
+import { Form, FormGroup, Dropdown } from "react-bootstrap";
+import { DiseasesSearchResults, VarSearchResults } from "./SearchResults";
+function onVarSelect(dispatch, item) {
+  dispatch({
+    type: "select.var",
+    var: item
+  });
+  dispatch({
+    type: "select.multivar",
+    var: item
+  });
+  dispatch({
+    type: "set.colorEncoding",
+    value: "var"
+  });
+}
+export function SearchBar(_ref) {
+  let {
+    searchVar = true,
+    searchDiseases = false,
+    handleSelect = onVarSelect
+  } = _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);
+    }
+  }, [text]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form, {
+    onSubmit: e => {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Form.Control, {
+    ref: inputRef,
+    onFocus: () => {
+      setShowSuggestions(text.length > 0);
+    },
+    onBlur: () => {
+      _.delay(() => {
+        setShowSuggestions(false);
+      }, 150);
+    },
+    type: "text",
+    placeholder: "Search " + displayText,
+    value: text,
+    onChange: e => {
+      setText(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(Dropdown, {
+    show: showSuggestions,
+    onMouseDown: 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, {
+    text: text,
+    setShowSuggestions: setShowSuggestions
+  }))))));
+}

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

@@ -0,0 +1,139 @@
+import React, { useState, useEffect, useMemo, useDeferredValue } from "react";
+import _ from "lodash";
+import { Dropdown } from "react-bootstrap";
+import { useDatasetDispatch } from "../../context/DatasetContext";
+import { useDiseaseSearch, useVarSearch } from "../../utils/search";
+export function VarSearchResults(_ref) {
+  let {
+    text,
+    setShowSuggestions,
+    handleSelect
+  } = _ref;
+  const [suggestions, setSuggestions] = useState([]);
+  const dispatch = useDatasetDispatch();
+  const {
+    setParams,
+    data: {
+      fetchedData = [],
+      isPending,
+      serverError
+    }
+  } = useVarSearch();
+  const deferredData = useDeferredValue(suggestions);
+  const isStale = deferredData !== fetchedData;
+  const updateParams = useMemo(() => {
+    const setData = text => {
+      if (text.length) {
+        setParams(p => {
+          return {
+            ...p,
+            text: text
+          };
+        });
+      } else {
+        setSuggestions([]);
+        setShowSuggestions(false);
+      }
+    };
+    return _.debounce(setData, 300);
+  }, [setParams, setShowSuggestions]);
+  useEffect(() => {
+    updateParams(text);
+  }, [text, updateParams]);
+  useEffect(() => {
+    if (!isPending && !serverError) {
+      setSuggestions(fetchedData);
+      setShowSuggestions(true);
+    }
+  }, [fetchedData, isPending, serverError, setShowSuggestions]);
+  const suggestionsList = useMemo(() => {
+    return deferredData?.map(item => {
+      return /*#__PURE__*/React.createElement(Dropdown.Item, {
+        key: item.name,
+        as: "button",
+        disabled: isStale,
+        onClick: () => {
+          handleSelect(dispatch, item);
+          _.delay(() => {
+            setShowSuggestions(false);
+          }, 150);
+        }
+      }, item.name);
+    });
+  }, [deferredData, dispatch, handleSelect, isStale, setShowSuggestions]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Features"), /*#__PURE__*/React.createElement("div", {
+    className: "search-results"
+  }, deferredData?.length ? suggestionsList : /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: "empty",
+    as: "button",
+    disabled: true
+  }, !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data")));
+}
+export function DiseasesSearchResults(_ref2) {
+  let {
+    text,
+    setShowSuggestions
+  } = _ref2;
+  const [suggestions, setSuggestions] = useState([]);
+  const dispatch = useDatasetDispatch();
+  const {
+    setParams,
+    data: {
+      fetchedData = [],
+      isPending,
+      serverError
+    }
+  } = useDiseaseSearch();
+  const deferredData = useDeferredValue(suggestions);
+  const isStale = deferredData !== fetchedData;
+  const updateParams = useMemo(() => {
+    const setData = text => {
+      if (text.length) {
+        setParams(p => {
+          return {
+            ...p,
+            text: text
+          };
+        });
+      } else {
+        setSuggestions([]);
+      }
+    };
+    return _.debounce(setData, 300);
+  }, [setParams]);
+  useEffect(() => {
+    updateParams(text);
+  }, [text, updateParams]);
+  useEffect(() => {
+    if (!isPending && !serverError) {
+      setSuggestions(fetchedData);
+      setShowSuggestions(true);
+    }
+  }, [fetchedData, isPending, serverError, setShowSuggestions]);
+  const suggestionsList = useMemo(() => {
+    return deferredData?.map(item => {
+      return /*#__PURE__*/React.createElement(Dropdown.Item, {
+        key: item.id,
+        as: "button",
+        disabled: isStale,
+        onClick: () => {
+          dispatch({
+            type: "select.disease",
+            id: item.disease_id,
+            name: item.disease_name
+          });
+          _.delay(() => {
+            setShowSuggestions(false);
+          }, 150);
+        }
+      }, item.disease_name);
+    });
+  }, [deferredData, dispatch, isStale, setShowSuggestions]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown.Header, null, "Diseases"), /*#__PURE__*/React.createElement("div", {
+    className: "search-results"
+  }, deferredData?.length ? suggestionsList : /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: "empty",
+    as: "button",
+    disabled: true
+  }, !serverError ? isStale || isPending ? "Loading..." : "No items found" : "Failed to fetch data")));
+}

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

@@ -0,0 +1,250 @@
+import React, { useEffect, useState } from "react";
+import { faDroplet, 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, useDatasetDispatch } from "../../context/DatasetContext";
+import { useFilteredData } from "../../context/FilterContext";
+import { Histogram } from "../../utils/Histogram";
+import { useFetch, useDebouncedFetch } from "../../utils/requests";
+import { VirtualizedList } from "../../utils/VirtualizedList";
+function VarHistogram(_ref) {
+  let {
+    item
+  } = _ref;
+  const ENDPOINT = "var/histograms";
+  const dataset = useDataset();
+  const {
+    obsIndices
+  } = useFilteredData();
+  // @TODO: consider using Filter's isSliced; would trigger more re-renders/requests
+  // const { obsIndices, isSliced } = useFilteredData();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+  const [params, setParams] = useState({
+    url: dataset.url,
+    varKey: item.matrix_index,
+    obsIndices: isSliced ? [...(obsIndices || [])] : null
+  });
+  useEffect(() => {
+    setParams(p => {
+      return {
+        ...p,
+        obsIndices: isSliced ? [...(obsIndices || [])] : null
+      };
+    });
+  }, [obsIndices, isSliced]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useDebouncedFetch(ENDPOINT, params, {
+    refetchOnMount: false
+  });
+  return !serverError && /*#__PURE__*/React.createElement(Histogram, {
+    data: fetchedData,
+    isPending: isPending,
+    altColor: isSliced
+  });
+}
+function VarDiseaseInfoItem(item) {
+  const dispatch = useDatasetDispatch();
+  return /*#__PURE__*/React.createElement(ListGroup.Item, {
+    key: item.disease_name,
+    className: "feature-disease-info"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "btn btn-link",
+    onClick: () => {
+      dispatch({
+        type: "select.disease",
+        id: item.disease_id,
+        name: item.disease_name
+      });
+    }
+  }, item.disease_name), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Table, {
+    striped: true
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Confidence"), /*#__PURE__*/React.createElement("td", null, item.confidence || "unknown")), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, "Organ", item.organs.length > 1 ? "s" : ""), /*#__PURE__*/React.createElement("td", null, item.organs.map(o => o.name).join(", "))), !_.isEmpty(item.metadata) && _.map(item.metadata, (value, key) => {
+    if (value !== null && value !== undefined) {
+      return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, key), /*#__PURE__*/React.createElement("td", null, value));
+    }
+  })))));
+}
+function VarDiseaseInfo(_ref2) {
+  let {
+    data
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListGroup, null, /*#__PURE__*/React.createElement(VirtualizedList, {
+    getDataAtIndex: index => data[index],
+    count: data.length,
+    estimateSize: 140,
+    maxHeight: "100%",
+    ItemComponent: VarDiseaseInfoItem
+  })));
+}
+export function SingleSelectionItem(_ref3) {
+  let {
+    item,
+    isActive,
+    selectVar,
+    removeVar,
+    isDiseaseGene = false,
+    showSetColorEncoding = true,
+    showRemove = true
+  } = _ref3;
+  const ENDPOINT = "disease/gene";
+  const [openInfo, setOpenInfo] = useState(false);
+  const dataset = useDataset();
+  const params = {
+    geneName: item.name,
+    diseaseDatasets: dataset.diseaseDatasets
+  };
+  const isNotInData = item.matrix_index === -1;
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useFetch(ENDPOINT, params, {
+    refetchOnMount: false,
+    enabled: !!dataset.diseaseDatasets.length
+  });
+  const hasDiseaseInfo = !isPending && !serverError && !!fetchedData.length;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `d-flex justify-content-between ${hasDiseaseInfo ? "cursor-pointer" : ""}`,
+    onClick: () => {
+      setOpenInfo(o => !o);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-between align-items-center w-100"
+  }, /*#__PURE__*/React.createElement("div", null, item.name), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-center gap-1"
+  }, hasDiseaseInfo && /*#__PURE__*/React.createElement(MoreVert, null), !isDiseaseGene && /*#__PURE__*/React.createElement(VarHistogram, {
+    item: item
+  }), showSetColorEncoding && /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    key: item.matrix_index,
+    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"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faDroplet
+  })), (!isDiseaseGene || !showRemove) && /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    className: "m-0 p-0 px-1",
+    variant: "outline-secondary",
+    title: "Remove from list",
+    onClick: e => {
+      e.stopPropagation();
+      removeVar();
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTrash
+  }))))), hasDiseaseInfo && /*#__PURE__*/React.createElement(Collapse, {
+    in: openInfo
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mt-2 var-disease-info-collapse"
+  }, /*#__PURE__*/React.createElement(VarDiseaseInfo, {
+    data: fetchedData
+  }))));
+}
+function MultipleSelectionItem(_ref4) {
+  let {
+    item,
+    isActive,
+    toggleVar
+  } = _ref4;
+  const isNotInData = item.matrix_index === -1;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    key: item.matrix_index,
+    variant: isActive ? "primary" : "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: toggleVar,
+    disabled: isNotInData,
+    title: isNotInData ? "Not present in data" : item.name
+  }, item.name))));
+}
+export function VarItem(_ref5) {
+  let {
+    item,
+    active,
+    setVarButtons,
+    mode = SELECTION_MODES.SINGLE,
+    isDiseaseGene = false
+  } = _ref5;
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const selectVar = () => {
+    if (mode === SELECTION_MODES.SINGLE) {
+      dispatch({
+        type: "select.var",
+        var: item
+      });
+      dispatch({
+        type: "set.colorEncoding",
+        value: "var"
+      });
+    } else if (mode === SELECTION_MODES.MULTIPLE) {
+      dispatch({
+        type: "select.multivar",
+        var: item
+      });
+    }
+  };
+  const removeVar = () => {
+    setVarButtons(b => {
+      return b.filter(i => i.name !== item.name);
+    });
+    if (mode === SELECTION_MODES.SINGLE) {
+      if (active === item.matrix_index) {
+        dispatch({
+          type: "reset.var"
+        });
+      }
+    } else if (mode === SELECTION_MODES.MULTIPLE) {
+      if (active.includes(item.matrix_index)) {
+        dispatch({
+          type: "deselect.multivar",
+          var: item
+        });
+      }
+    }
+  };
+  const toggleVar = () => {
+    if (active.includes(item.matrix_index)) {
+      dispatch({
+        type: "deselect.multivar",
+        var: item
+      });
+    } else {
+      selectVar(item);
+    }
+  };
+  if (item && mode === SELECTION_MODES.SINGLE) {
+    return /*#__PURE__*/React.createElement(SingleSelectionItem, {
+      item: item,
+      isActive: dataset.colorEncoding === COLOR_ENCODINGS.VAR && active === item.matrix_index,
+      selectVar: selectVar,
+      removeVar: removeVar,
+      isDiseaseGene: isDiseaseGene
+    });
+  } else if (mode === SELECTION_MODES.MULTIPLE) {
+    return /*#__PURE__*/React.createElement(MultipleSelectionItem, {
+      item: item,
+      isActive: item.matrix_index !== -1 && _.includes(active, item.matrix_index),
+      toggleVar: toggleVar
+    });
+  } else {
+    return null;
+  }
+}