@haniffalab/cherita-react 1.0.0-dev.2025-03-13.bda9e1a6 → 1.0.0-dev.2025-03-24.e68f9e22

package/dist/esm/components/heatmap/Heatmap.js

@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import _ from "lodash";
+import { Alert } from "react-bootstrap";
+import Plot from "react-plotly.js";
+import { useDataset } from "../../context/DatasetContext";
+import { useFilteredData } from "../../context/FilterContext";
+import { LoadingSpinner } from "../../utils/LoadingIndicators";
+import { useDebouncedFetch } from "../../utils/requests";
+export function Heatmap() {
+  const ENDPOINT = "heatmap";
+  const dataset = useDataset();
+  const {
+    obsIndices,
+    isSliced
+  } = useFilteredData();
+  const colorscale = useRef(dataset.controls.colorScale);
+  const [data, setData] = useState([]);
+  const [layout, setLayout] = useState({});
+  const [hasSelections, setHasSelections] = useState(false);
+  const [params, setParams] = useState({
+    url: dataset.url,
+    obsCol: dataset.selectedObs,
+    obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+    varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+      name: i.name,
+      indices: i.vars.map(v => v.index)
+    } : i.index),
+    obsIndices: isSliced ? [...(obsIndices || [])] : null,
+    varNamesCol: dataset.varNamesCol
+  });
+  useEffect(() => {
+    if (dataset.selectedObs && dataset.selectedMultiVar.length) {
+      setHasSelections(true);
+    } else {
+      setHasSelections(false);
+    }
+    setParams(p => {
+      return {
+        ...p,
+        url: dataset.url,
+        obsCol: dataset.selectedObs,
+        obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+          name: i.name,
+          indices: i.vars.map(v => v.index)
+        } : i.index),
+        obsIndices: isSliced ? [...(obsIndices || [])] : null,
+        varNamesCol: dataset.varNamesCol
+      };
+    });
+  }, [dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
+  const updateColorscale = useCallback(colorscale => {
+    setLayout(l => {
+      return {
+        ...l,
+        coloraxis: {
+          ...l.coloraxis,
+          colorscale: colorscale
+        }
+      };
+    });
+  }, []);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useDebouncedFetch(ENDPOINT, params, 500, {
+    enabled: !!params.obsCol && !!params.varKeys.length
+  });
+  useEffect(() => {
+    if (hasSelections && !isPending && !serverError) {
+      setData(fetchedData.data);
+      setLayout(fetchedData.layout);
+      updateColorscale(colorscale.current);
+    }
+  }, [fetchedData, hasSelections, isPending, serverError, updateColorscale]);
+  useEffect(() => {
+    colorscale.current = dataset.controls.colorScale;
+    updateColorscale(colorscale.current);
+  }, [dataset.controls.colorScale, updateColorscale]);
+  if (!serverError) {
+    if (hasSelections) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "cherita-heatmap position-relative"
+      }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
+        data: data,
+        layout: layout,
+        useResizeHandler: true,
+        style: {
+          maxWidth: "100%",
+          maxHeight: "100%"
+        }
+      }));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cherita-heatmap"
+    }, /*#__PURE__*/React.createElement(Alert, {
+      variant: "light"
+    }, "Select features and a category"));
+  } else {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
+      variant: "danger"
+    }, serverError.message));
+  }
+}

package/dist/esm/components/heatmap/HeatmapControls.js

@@ -0,0 +1,23 @@
+import React from "react";
+import _ from "lodash";
+import { Dropdown } from "react-bootstrap";
+import { COLORSCALES } from "../../constants/colorscales";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+export function HeatmapControls() {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const colormapList = _.keys(COLORSCALES).map(key => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: key,
+    active: dataset.controls.colorScale === key,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.colorScale",
+        colorScale: key
+      });
+    }
+  }, key));
+  return /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    id: "dropdownColorscale",
+    variant: "light"
+  }, dataset.controls.colorScale), /*#__PURE__*/React.createElement(Dropdown.Menu, null, colormapList));
+}

package/dist/esm/components/matrixplot/Matrixplot.js

@@ -0,0 +1,107 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import _ from "lodash";
+import { Alert } from "react-bootstrap";
+import Plot from "react-plotly.js";
+import { useDataset } from "../../context/DatasetContext";
+import { useFilteredData } from "../../context/FilterContext";
+import { LoadingSpinner } from "../../utils/LoadingIndicators";
+import { useDebouncedFetch } from "../../utils/requests";
+export function Matrixplot() {
+  const ENDPOINT = "matrixplot";
+  const dataset = useDataset();
+  const {
+    obsIndices,
+    isSliced
+  } = useFilteredData();
+  const colorscale = useRef(dataset.controls.colorScale);
+  const [data, setData] = useState([]);
+  const [layout, setLayout] = useState({});
+  const [hasSelections, setHasSelections] = useState(false);
+  const [params, setParams] = useState({
+    url: dataset.url,
+    obsCol: dataset.selectedObs,
+    obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+    varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+      name: i.name,
+      indices: i.vars.map(v => v.index)
+    } : i.index),
+    obsIndices: isSliced ? [...(obsIndices || [])] : null,
+    standardScale: dataset.controls.standardScale,
+    varNamesCol: dataset.varNamesCol
+  });
+  useEffect(() => {
+    if (dataset.selectedObs && dataset.selectedMultiVar.length) {
+      setHasSelections(true);
+    } else {
+      setHasSelections(false);
+    }
+    setParams(p => {
+      return {
+        ...p,
+        url: dataset.url,
+        obsCol: dataset.selectedObs,
+        obsValues: !dataset.selectedObs?.omit.length ? null : _.difference(_.values(dataset.selectedObs?.codes), dataset.selectedObs?.omit).map(c => dataset.selectedObs?.codesMap[c]),
+        varKeys: dataset.selectedMultiVar.map(i => i.isSet ? {
+          name: i.name,
+          indices: i.vars.map(v => v.index)
+        } : i.index),
+        obsIndices: isSliced ? [...(obsIndices || [])] : null,
+        standardScale: dataset.controls.standardScale,
+        varNamesCol: dataset.varNamesCol
+      };
+    });
+  }, [dataset.controls.standardScale, dataset.selectedMultiVar, dataset.selectedObs, dataset.url, dataset.varNamesCol, obsIndices, isSliced]);
+  const updateColorscale = useCallback(colorscale => {
+    setLayout(l => {
+      return {
+        ...l,
+        coloraxis: {
+          ...l.coloraxis,
+          colorscale: colorscale
+        }
+      };
+    });
+  }, []);
+  const {
+    fetchedData,
+    isPending,
+    serverError
+  } = useDebouncedFetch(ENDPOINT, params, 500, {
+    enabled: !!params.obsCol && !!params.varKeys.length
+  });
+  useEffect(() => {
+    if (hasSelections && !isPending && !serverError) {
+      setData(fetchedData.data);
+      setLayout(fetchedData.layout);
+      updateColorscale(colorscale.current);
+    }
+  }, [fetchedData, hasSelections, isPending, serverError, updateColorscale]);
+  useEffect(() => {
+    colorscale.current = dataset.controls.colorScale;
+    updateColorscale(colorscale.current);
+  }, [dataset.controls.colorScale, updateColorscale]);
+  if (!serverError) {
+    if (hasSelections) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "cherita-matrixplot position-relative"
+      }, isPending && /*#__PURE__*/React.createElement(LoadingSpinner, null), /*#__PURE__*/React.createElement(Plot, {
+        data: data,
+        layout: layout,
+        useResizeHandler: true,
+        style: {
+          maxWidth: "100%",
+          maxHeight: "100%"
+        }
+      }));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: "cherita-matrixplot"
+    }, /*#__PURE__*/React.createElement(Alert, {
+      variant: "light"
+    }, "Select features and a category"));
+  } else {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Alert, {
+      variant: "danger"
+    }, serverError.message));
+  }
+}

package/dist/esm/components/matrixplot/MatrixplotControls.js

@@ -0,0 +1,38 @@
+import React from "react";
+import _ from "lodash";
+import { Dropdown, ButtonGroup, ButtonToolbar, InputGroup } from "react-bootstrap";
+import { COLORSCALES } from "../../constants/colorscales";
+import { MATRIXPLOT_SCALES } from "../../constants/constants";
+import { useDataset, useDatasetDispatch } from "../../context/DatasetContext";
+export function MatrixplotControls() {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const colorScaleList = _.keys(COLORSCALES).map(key => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: key,
+    active: dataset.controls.colorScale === key,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.colorScale",
+        colorScale: key
+      });
+    }
+  }, key));
+  const standardScaleList = _.values(MATRIXPLOT_SCALES).map(scale => /*#__PURE__*/React.createElement(Dropdown.Item, {
+    key: scale.value,
+    active: dataset.controls.scale.matrixplot.name === scale.name,
+    onClick: () => {
+      dispatch({
+        type: "set.controls.scale",
+        plot: "matrixplot",
+        scale: scale
+      });
+    }
+  }, scale.name));
+  return /*#__PURE__*/React.createElement(ButtonToolbar, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    id: "dropdownColorscale",
+    variant: "light"
+  }, dataset.controls.colorScale), /*#__PURE__*/React.createElement(Dropdown.Menu, null, colorScaleList))), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(InputGroup.Text, null, "Standard scale"), /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    id: "dropdownStandardScale",
+    variant: "light"
+  }, dataset.controls.scale.matrixplot.name), /*#__PURE__*/React.createElement(Dropdown.Menu, null, standardScaleList)))));
+}