@haniffalab/cherita-react 1.2.0-dev.2025-04-30.0a204a1c → 1.2.0-dev.2025-05-16.4367ee63

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

@@ -4,13 +4,13 @@ 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, useDatasetDispatch } from "../../context/DatasetContext";
 import { LoadingSpinner } from "../../utils/LoadingIndicators";
 import { useFetch } from "../../utils/requests";
-import { VarItem } from "./VarItem";
-import { VarListToolbar } from "./VarListToolbar";
-import { VarSet } from "./VarSet";
 const useVarMean = function (varKeys) {
   let enabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   const ENDPOINT = "matrix/mean";
@@ -45,93 +45,11 @@ const useVarMean = function (varKeys) {
 const sortMeans = (i, means) => {
   return means[i.name] || _.min(_.values(means)) - 1;
 };
-
-// @TODO: display where disease data comes from
-// add to disease dataset metadata
-function DiseaseVarList(_ref) {
-  let {
-    makeListItem
-  } = _ref;
-  const ENDPOINT = "disease/genes";
-  const dataset = useDataset();
-  const dispatch = useDatasetDispatch();
-  const [diseaseVars, setDiseaseVars] = useState([]);
-  const [sortedDiseaseVars, setSortedDiseaseVars] = useState([]);
-  const [params, setParams] = useState({
-    url: dataset.url,
-    col: dataset.varNamesCol,
-    diseaseId: dataset.selectedDisease?.id,
-    diseaseDatasets: dataset.diseaseDatasets
-  });
-  useEffect(() => {
-    setParams(p => {
-      return {
-        ...p,
-        diseaseId: dataset.selectedDisease?.id
-      };
-    });
-  }, [dataset.selectedDisease]);
-  const diseaseData = useFetch(ENDPOINT, params, {
-    enabled: !!params.diseaseId,
-    refetchOnMount: false
-  });
-  useEffect(() => {
-    if (!diseaseData.isPending && !diseaseData.serverError) {
-      setDiseaseVars(diseaseData.fetchedData);
-    }
-  }, [diseaseData.fetchedData, diseaseData.isPending, diseaseData.serverError]);
-  const varMeans = useVarMean(diseaseVars, !!diseaseVars?.length && dataset.varSort.disease.sort === VAR_SORT.MATRIX);
-  useEffect(() => {
-    if (dataset.varSort.disease.sort === VAR_SORT.MATRIX) {
-      if (!varMeans.isPending && !varMeans.serverError) {
-        setSortedDiseaseVars(_.orderBy(diseaseVars, o => {
-          return sortMeans(o, varMeans.fetchedData);
-        }, dataset.varSort.disease.sortOrder));
-      }
-    } else if (dataset.varSort.disease.sort === VAR_SORT.NAME) {
-      setSortedDiseaseVars(_.orderBy(diseaseVars, "name", dataset.varSort.disease.sortOrder));
-    } else {
-      setSortedDiseaseVars(diseaseVars);
-    }
-  }, [dataset.varSort.disease.sort, dataset.varSort.disease.sortOrder, diseaseVars, varMeans.fetchedData, varMeans.isPending, varMeans.serverError]);
-  const diseaseVarList = _.map(sortedDiseaseVars, item => {
-    return makeListItem(item, true);
-  });
-  const isPending = diseaseData.isPending || varMeans.isPending && dataset.varSort.disease.sort === VAR_SORT.MATRIX;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, dataset.selectedDisease && (!isPending && !diseaseVars?.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-between mt-3"
-  }, /*#__PURE__*/React.createElement("h5", null, "Disease genes")), /*#__PURE__*/React.createElement(Alert, {
-    variant: "light"
-  }, "No disease genes found.")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "d-flex justify-content-between my-2"
-  }, /*#__PURE__*/React.createElement("h5", null, "Disease genes"), /*#__PURE__*/React.createElement(ButtonGroup, {
-    "aria-label": "Feature options",
-    size: "sm"
-  }, /*#__PURE__*/React.createElement(Button, {
-    variant: "info",
-    onClick: () => {
-      dispatch({
-        type: "reset.disease"
-      });
-    }
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faTimes,
-    className: "me-1"
-  }), "Clear"))), /*#__PURE__*/React.createElement("p", null, dataset.selectedDisease?.name), /*#__PURE__*/React.createElement(VarListToolbar, {
-    varType: "disease"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "position-relative"
-  }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(ListGroup, {
-    variant: "flush",
-    className: "cherita-list"
-  }, diseaseVarList)))));
-}
-export function VarNamesList(_ref2) {
+export function VarNamesList(_ref) {
   let {
     mode = SELECTION_MODES.SINGLE,
-    displayName = "genes",
-    showDiseaseVarList = true
-  } = _ref2;
+    displayName = "genes"
+  } = _ref;
   const dataset = useDataset();
   const dispatch = useDatasetDispatch();
   const [varButtons, setVarButtons] = useState(mode === SELECTION_MODES.SINGLE ? dataset.selectedVar ? _.unionWith([dataset.selectedVar], dataset.varSets, _.isEqual) : [...dataset.varSets] : [...dataset.selectedMultiVar, ...dataset.varSets]);
@@ -285,7 +203,5 @@ export function VarNamesList(_ref2) {
   }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(ListGroup, {
     variant: "flush",
     className: "cherita-list"
-  }, varList)))), /*#__PURE__*/React.createElement(React.Fragment, null, showDiseaseVarList && /*#__PURE__*/React.createElement(DiseaseVarList, {
-    makeListItem: makeListItem
-  }))));
+  }, varList))))));
 }

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

@@ -1,13 +1,12 @@
 import React, { useState } from "react";
-import { faCircleInfo, faDroplet, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faChevronDown, faChevronUp, faCircleInfo, faDroplet, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { List } from "@mui/icons-material";
 import _ from "lodash";
 import { Button, Collapse, ListGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
+import { SingleSelectionItem } from "./VarItem";
 import { COLOR_ENCODINGS, SELECTION_MODES } from "../../constants/constants";
 import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
-import { SearchBar } from "../search-bar/SearchBar";
-import { SingleSelectionItem } from "./VarItem";
+import { SearchModal } from "../search-bar/SearchBar";
 
 // @TODO: add button to score genes and plot
 
@@ -24,10 +23,11 @@ function SingleSelectionSet(_ref) {
     isActive,
     selectSet,
     removeSet,
-    removeSetVar,
-    showSearchBar = true
+    removeSetVar
   } = _ref;
   const [openSet, setOpenSet] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [searchText, setSearchText] = useState("");
   const varList = set.vars.length ? _.map(set.vars, v => {
     return /*#__PURE__*/React.createElement(ListGroup.Item, {
       key: v.name
@@ -46,16 +46,38 @@ function SingleSelectionSet(_ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "d-flex justify-content-between align-items-center w-100"
-  }, /*#__PURE__*/React.createElement("div", null, set.name), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ellipsis-text",
+    title: set.name
+  }, set.name), /*#__PURE__*/React.createElement("div", {
     className: "d-flex align-items-center gap-1"
   }, /*#__PURE__*/React.createElement(OverlayTrigger, {
     placement: "top",
     overlay: /*#__PURE__*/React.createElement(Tooltip, null, "This set represents the mean value of its features")
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faCircleInfo
-  })), /*#__PURE__*/React.createElement(List, null), /*#__PURE__*/React.createElement(Button, {
+  })), /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    variant: "outline-primary",
+    className: "m-0 p-0 px-1",
+    disabled: !set.vars.length,
+    title: "Open set"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: openSet ? faChevronUp : faChevronDown
+  })), /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    variant: "outline-primary",
+    className: "m-0 p-0 px-1",
+    onClick: e => {
+      e.stopPropagation();
+      setShowModal(true);
+    },
+    disabled: !set.vars.length,
+    title: "Add to set"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faPlus
+  })), /*#__PURE__*/React.createElement(Button, {
     type: "button",
-    key: set.name,
     variant: isActive ? "primary" : "outline-primary",
     className: "m-0 p-0 px-1",
     onClick: e => {
@@ -81,17 +103,21 @@ function SingleSelectionSet(_ref) {
     in: openSet
   }, /*#__PURE__*/React.createElement("div", {
     className: "mt-2"
-  }, showSearchBar &&
-  /*#__PURE__*/
-  // @TODO: fix how results are displayed, should be placed on top of parent components
-  React.createElement(SearchBar, {
-    handleSelect: (d, i) => addVarToSet(d, set, i)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "mx-2"
   }, /*#__PURE__*/React.createElement(ListGroup, {
     variant: "flush",
-    className: "cherita-list"
-  }, varList)))));
+    className: "cherita-list var-set-list"
+  }, varList))), /*#__PURE__*/React.createElement(SearchModal, {
+    show: showModal,
+    handleClose: () => setShowModal(false),
+    text: searchText,
+    setText: setSearchText,
+    displayText: "features",
+    handleSelect: (d, i) => {
+      addVarToSet(d, set, i);
+    },
+    searchVar: true,
+    searchDiseases: false
+  }));
 }
 function MultipleSelectionSet(_ref2) {
   let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "1.2.0-dev.2025-04-30.0a204a1c",
+  "version": "1.2.0-dev.2025-05-16.4367ee63",
   "author": "Haniffa Lab",
   "license": "MIT",
   "keywords": [
@@ -124,5 +124,5 @@
     "url": "https://github.com/haniffalab/cherita-react/issues"
   },
   "homepage": "https://github.com/haniffalab/cherita-react#readme",
-  "prereleaseSha": "0a204a1c659c6b7f9438049af143289feccd943b"
+  "prereleaseSha": "4367ee63df5209cda070f21e714ac5c6ccaa1e2c"
 }

package/scss/cherita.scss

@@ -395,3 +395,9 @@ $gauge-padding: 0.15rem;
   margin-right: 0.4rem;
   width: 1rem;
 }
+
+.ellipsis-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/scss/components/layouts.scss

@@ -102,3 +102,8 @@
     }
   }
 }
+
+.search-modal-info {
+  overflow-y: auto;
+  border-left: 1px solid #dee2e6;
+}

package/scss/components/lists.scss

@@ -13,6 +13,10 @@
     color: var(--#{$prefix}body-color);
     background-color: var(--#{$prefix}tertiary-bg);
     border-radius: var(--#{$prefix}border-radius);
+    cursor: pointer;
+  }
+  .list-group-item.active {
+    background-color: var(--#{$prefix}secondary-bg);
   }
 }
 .obs-statistics {
@@ -24,3 +28,10 @@
   background-color: var(--#{$prefix}tertiary-bg);
   border-radius: var(--#{$prefix}border-radius);
 }
+
+.cherita-list.var-set-list {
+  .list-group-item {
+    padding-right: 0;
+    padding-left: 0.35rem;
+  }
+}