@haniffalab/cherita-react 0.2.0-dev.2024-09-26.775b9a06 → 0.2.0-dev.2024-09-26.1ea62883

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

@@ -0,0 +1,316 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleSelectionItem = SingleSelectionItem;
+exports.VarItem = VarItem;
+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 _xCharts = require("@mui/x-charts");
+var _colorPalettes = require("@mui/x-charts/colorPalettes");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _reactBootstrap = require("react-bootstrap");
+var _constants = require("../../constants/constants");
+var _DatasetContext = require("../../context/DatasetContext");
+var _FilterContext = require("../../context/FilterContext");
+var _LoadingIndicators = require("../../utils/LoadingIndicators");
+var _requests = require("../../utils/requests");
+var _string = require("../../utils/string");
+var _VirtualizedList = require("../../utils/VirtualizedList");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+function VarHistogram(_ref) {
+  var _fetchedData$bin_edge;
+  let {
+    item
+  } = _ref;
+  const ENDPOINT = "var/histograms";
+  const dataset = (0, _DatasetContext.useDataset)();
+  const filteredData = (0, _FilterContext.useFilteredData)();
+  const isSliced = dataset.sliceBy.obs || dataset.sliceBy.polygons;
+  const [params, setParams] = (0, _react.useState)({
+    url: dataset.url,
+    var_index: item.matrix_index,
+    obs_indices: isSliced && Array.from(filteredData.obsIndices || [])
+  });
+  (0, _react.useEffect)(() => {
+    setParams(p => {
+      return {
+        ...p,
+        obs_indices: isSliced && Array.from(filteredData.obsIndices || [])
+      };
+    });
+  }, [filteredData.obsIndices, isSliced]);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = (0, _requests.useDebouncedFetch)(ENDPOINT, params, {
+    refetchOnMount: false
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "feature-histogram-container",
+    children: isPending ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicators.LoadingLinear, {}) : !serverError && fetchedData ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "feature-histogram m-1",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xCharts.SparkLineChart, {
+        plotType: "bar",
+        data: fetchedData.log10,
+        margin: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        },
+        colors: isSliced ? _colorPalettes.mangoFusionPalette : _colorPalettes.blueberryTwilightPalette,
+        showHighlight: true,
+        showTooltip: true,
+        valueFormatter: (v, _ref2) => {
+          let {
+            dataIndex
+          } = _ref2;
+          return "".concat((0, _string.prettyNumerical)(fetchedData.hist[dataIndex]));
+        },
+        xAxis: {
+          data: _lodash.default.range((_fetchedData$bin_edge = fetchedData.bin_edges) === null || _fetchedData$bin_edge === void 0 ? void 0 : _fetchedData$bin_edge.length) || null,
+          valueFormatter: v => "Bin [".concat((0, _string.prettyNumerical)(fetchedData.bin_edges[v][0]), ", ").concat((0, _string.prettyNumerical)(fetchedData.bin_edges[v][1])).concat(v === fetchedData.bin_edges.length - 1 ? "]" : ")")
+        },
+        slotProps: {
+          popper: {
+            className: "feature-histogram-tooltip"
+          }
+        }
+      })
+    }) : null
+  });
+}
+function VarDiseaseInfoItem(item) {
+  var _item$metadata;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup.Item, {
+    className: "feature-disease-info",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [item.disease_name, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Table, {
+        striped: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("tbody", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              children: "Confidence"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              children: item.confidence || "unknown"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("td", {
+              children: ["Organ", item.organs.length > 1 ? "s" : ""]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+              children: item.organs.map(o => o.name).join(", ")
+            })]
+          }), !!((_item$metadata = item.metadata) !== null && _item$metadata !== void 0 && _item$metadata.length) && item.metadata.map(m => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                children: m.key
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                children: m.value
+              })]
+            });
+          })]
+        })
+      })]
+    })
+  });
+}
+function VarDiseaseInfo(_ref3) {
+  let {
+    data
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.ListGroup, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualizedList.VirtualizedList, {
+        getDataAtIndex: index => data[index],
+        count: data.length,
+        estimateSize: 70,
+        maxHeight: "40vh",
+        ItemComponent: VarDiseaseInfoItem
+      })
+    })
+  });
+}
+function SingleSelectionItem(_ref4) {
+  let {
+    item,
+    isActive,
+    selectVar,
+    removeVar,
+    isDiseaseGene = false,
+    showSetColorEncoding = true,
+    showRemove = true
+  } = _ref4;
+  const ENDPOINT = "disease/gene";
+  const [openInfo, setOpenInfo] = (0, _react.useState)(false);
+  const dataset = (0, _DatasetContext.useDataset)();
+  const params = {
+    geneName: item.name,
+    diseaseDatasets: dataset.diseaseDatasets
+  };
+  const isNotInData = item.matrix_index === -1;
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = (0, _requests.useFetch)(ENDPOINT, params);
+  const hasDiseaseInfo = !isPending && !serverError && !!fetchedData.length;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "d-flex justify-content-between ".concat(hasDiseaseInfo ? "cursor-pointer" : ""),
+      onClick: () => {
+        setOpenInfo(o => !o);
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "d-flex justify-content-between align-items-center w-100",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: item.name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "d-flex align-items-center gap-1",
+          children: [hasDiseaseInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.MoreVert, {}), !isDiseaseGene && /*#__PURE__*/(0, _jsxRuntime.jsx)(VarHistogram, {
+            item: item
+          }), showSetColorEncoding && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+            type: "button",
+            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",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faDroplet
+            })
+          }, item.matrix_index), (!isDiseaseGene || !showRemove) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+            type: "button",
+            className: "m-0 p-0 px-1",
+            variant: "outline-secondary",
+            title: "Remove from list",
+            onClick: e => {
+              e.stopPropagation();
+              removeVar();
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFontawesome.FontAwesomeIcon, {
+              icon: _freeSolidSvgIcons.faTrash
+            })
+          })]
+        })]
+      })
+    }), hasDiseaseInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Collapse, {
+      in: openInfo,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "mt-2",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(VarDiseaseInfo, {
+          data: fetchedData
+        })
+      })
+    })]
+  });
+}
+function MultipleSelectionItem(_ref5) {
+  let {
+    item,
+    isActive,
+    toggleVar
+  } = _ref5;
+  const isNotInData = item.matrix_index === -1;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "d-flex",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "flex-grow-1",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactBootstrap.Button, {
+          type: "button",
+          variant: isActive ? "primary" : "outline-primary",
+          className: "m-0 p-0 px-1",
+          onClick: toggleVar,
+          disabled: isNotInData,
+          title: isNotInData ? "Not present in data" : item.name,
+          children: item.name
+        }, item.matrix_index)
+      })
+    })
+  });
+}
+function VarItem(_ref6) {
+  let {
+    item,
+    active,
+    setVarButtons,
+    mode = _constants.SELECTION_MODES.SINGLE,
+    isDiseaseGene = false
+  } = _ref6;
+  const dataset = (0, _DatasetContext.useDataset)();
+  const dispatch = (0, _DatasetContext.useDatasetDispatch)();
+  const selectVar = () => {
+    if (mode === _constants.SELECTION_MODES.SINGLE) {
+      dispatch({
+        type: "select.var",
+        var: item
+      });
+      dispatch({
+        type: "set.colorEncoding",
+        value: "var"
+      });
+    } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+      dispatch({
+        type: "select.multivar",
+        var: item
+      });
+    }
+  };
+  const removeVar = () => {
+    setVarButtons(b => {
+      return b.filter(i => i.name !== item.name);
+    });
+    if (mode === _constants.SELECTION_MODES.SINGLE) {
+      if (active === item.matrix_index) {
+        dispatch({
+          type: "reset.var"
+        });
+      }
+    } else if (mode === _constants.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 === _constants.SELECTION_MODES.SINGLE) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(SingleSelectionItem, {
+      item: item,
+      isActive: dataset.colorEncoding === _constants.COLOR_ENCODINGS.VAR && active === item.matrix_index,
+      selectVar: selectVar,
+      removeVar: removeVar,
+      isDiseaseGene: isDiseaseGene
+    });
+  } else if (mode === _constants.SELECTION_MODES.MULTIPLE) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(MultipleSelectionItem, {
+      item: item,
+      isActive: item.matrix_index !== -1 && _lodash.default.includes(active, item.matrix_index),
+      toggleVar: toggleVar
+    });
+  } else {
+    return null;
+  }
+}