@haniffalab/cherita-react 1.0.0 → 1.1.0

package/dist/esm/components/full-page/FullPage.js

@@ -0,0 +1,143 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useEffect, useRef, useState } from "react";
+import { Card, Container, Modal, Nav, Navbar } from "react-bootstrap";
+import { SELECTION_MODES, VIOLIN_MODES } from "../../constants/constants";
+import { DatasetProvider } from "../../context/DatasetContext";
+import { Dotplot } from "../dotplot/Dotplot";
+import { Heatmap } from "../heatmap/Heatmap";
+import { Matrixplot } from "../matrixplot/Matrixplot";
+import { ObsColsList } from "../obs-list/ObsList";
+import { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from "../offcanvas";
+import { Scatterplot } from "../scatterplot/Scatterplot";
+import { ScatterplotControls } from "../scatterplot/ScatterplotControls";
+import { SearchBar } from "../search-bar/SearchBar";
+import { VarNamesList } from "../var-list/VarList";
+import { Violin } from "../violin/Violin";
+export function FullPage(_ref) {
+  let {
+    children,
+    varMode = SELECTION_MODES.SINGLE,
+    ...props
+  } = _ref;
+  const appRef = useRef();
+  const [appDimensions, setAppDimensions] = useState({
+    width: 0,
+    height: 0
+  });
+  const [showObs, setShowObs] = useState(false);
+  const [showObsm, setShowObsm] = useState(false);
+  const [showVars, setShowVars] = useState(false);
+  const [showControls, setShowControls] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (appRef.current) {
+        // Get the distance from the top of the page to the target element
+        const rect = appRef.current.getBoundingClientRect();
+        const distanceFromTop = rect.top + window.scrollY;
+
+        // Calculate the available height for the Cherita app
+        const availableHeight = window.innerHeight - distanceFromTop;
+
+        // Update the dimensions to fit the viewport minus the navbar height
+        setAppDimensions({
+          width: appRef.current.offsetWidth,
+          height: availableHeight
+        });
+      }
+    };
+    window.addEventListener("resize", updateDimensions);
+    updateDimensions(); // Initial update
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: appRef,
+    className: "cherita-app",
+    style: {
+      height: appDimensions.height
+    }
+  }, /*#__PURE__*/React.createElement(DatasetProvider, props, /*#__PURE__*/React.createElement(Container, {
+    fluid: true,
+    className: "d-flex g-0",
+    style: {
+      height: appDimensions.height
+    }
+  }, /*#__PURE__*/React.createElement(Navbar, {
+    expand: "sm",
+    bg: "primary",
+    className: "cherita-navbar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "container-fluid"
+  }, /*#__PURE__*/React.createElement(Navbar.Toggle, {
+    "aria-controls": "navbarScroll"
+  }), /*#__PURE__*/React.createElement(Navbar.Collapse, {
+    id: "navbarScroll"
+  }, /*#__PURE__*/React.createElement(Nav, {
+    className: "me-auto my-0",
+    navbarScroll: true
+  }, /*#__PURE__*/React.createElement(Nav.Item, {
+    className: "d-block d-lg-none"
+  }, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowObs(true)
+  }, "Observations")), /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowVars(true)
+  }, "Features"))), /*#__PURE__*/React.createElement(Nav, {
+    className: "d-flex"
+  }, /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowControls(true)
+  }, "Controls")))))), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-obs modern-scrollbars border-end h-100"
+  }, /*#__PURE__*/React.createElement(ObsColsList, props)), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-canvas flex-grow-1"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-sidebar p-3"
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Card.Body, {
+    className: "d-flex flex-column p-0"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sidebar-features modern-scrollbars"
+  }, /*#__PURE__*/React.createElement(SearchBar, {
+    searchDiseases: true,
+    searchVar: true
+  }), /*#__PURE__*/React.createElement(VarNamesList, {
+    mode: varMode
+  })))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
+    show: showModal,
+    onHide: () => setShowModal(false),
+    centered: true
+  }, /*#__PURE__*/React.createElement(Modal.Header, {
+    closeButton: true
+  }), /*#__PURE__*/React.createElement(Modal.Body, null)), /*#__PURE__*/React.createElement(OffcanvasObs, {
+    show: showObs,
+    handleClose: () => setShowObs(false)
+  }), /*#__PURE__*/React.createElement(OffcanvasVars, {
+    show: showVars,
+    handleClose: () => setShowVars(false)
+  }), /*#__PURE__*/React.createElement(OffcanvasControls, {
+    show: showControls,
+    handleClose: () => setShowControls(false),
+    Controls: ScatterplotControls
+  }), /*#__PURE__*/React.createElement(OffcanvasObsm, {
+    show: showObsm,
+    handleClose: () => setShowObsm(false)
+  }))));
+}
+export function FullPageScatterplot(props) {
+  return /*#__PURE__*/React.createElement(FullPage, props, /*#__PURE__*/React.createElement(Scatterplot, null));
+}
+export function FullPagePlots(props) {
+  return /*#__PURE__*/React.createElement(FullPage, _extends({}, props, {
+    varMode: SELECTION_MODES.MULTIPLE
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "container-fluid w-100 h-100 d-flex flex-column overflow-y-auto"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Heatmap, null)), /*#__PURE__*/React.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Matrixplot, null)), /*#__PURE__*/React.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Dotplot, null)), /*#__PURE__*/React.createElement("div", {
+    className: "row flex-grow-1"
+  }, /*#__PURE__*/React.createElement(Violin, {
+    mode: VIOLIN_MODES.GROUPBY
+  }))));
+}

package/dist/esm/components/full-page/FullPagePseudospatial.js

@@ -0,0 +1,151 @@
+import React, { useEffect, useRef, useState } from "react";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button, Card, Container, Modal, Nav, Navbar } from "react-bootstrap";
+import { SELECTION_MODES } from "../../constants/constants";
+import { DatasetProvider } from "../../context/DatasetContext";
+import { ObsColsList } from "../obs-list/ObsList";
+import { OffcanvasControls, OffcanvasObs, OffcanvasObsm, OffcanvasVars } from "../offcanvas";
+import { Pseudospatial } from "../pseudospatial/Pseudospatial";
+import { PseudospatialToolbar } from "../pseudospatial/PseudospatialToolbar";
+import { Scatterplot } from "../scatterplot/Scatterplot";
+import { ScatterplotControls } from "../scatterplot/ScatterplotControls";
+import { SearchBar } from "../search-bar/SearchBar";
+import { VarNamesList } from "../var-list/VarList";
+export function FullPage(_ref) {
+  let {
+    children,
+    varMode = SELECTION_MODES.SINGLE,
+    ...props
+  } = _ref;
+  const appRef = useRef();
+  const [appDimensions, setAppDimensions] = useState({
+    width: 0,
+    height: 0
+  });
+  const [showObs, setShowObs] = useState(false);
+  const [showObsm, setShowObsm] = useState(false);
+  const [showVars, setShowVars] = useState(false);
+  const [showControls, setShowControls] = useState(false);
+  const [showPseudospatialControls, setShowPseudospatialControls] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  const [pseudospatialPlotType, setpseudospatialPlotType] = useState(null);
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (appRef.current) {
+        // Get the distance from the top of the page to the target element
+        const rect = appRef.current.getBoundingClientRect();
+        const distanceFromTop = rect.top + window.scrollY;
+
+        // Calculate the available height for the Cherita app
+        const availableHeight = window.innerHeight - distanceFromTop;
+
+        // Update the dimensions to fit the viewport minus the navbar height
+        setAppDimensions({
+          width: appRef.current.offsetWidth,
+          height: availableHeight
+        });
+      }
+    };
+    window.addEventListener("resize", updateDimensions);
+    updateDimensions(); // Initial update
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: appRef,
+    className: "cherita-app",
+    style: {
+      height: appDimensions.height
+    }
+  }, /*#__PURE__*/React.createElement(DatasetProvider, props, /*#__PURE__*/React.createElement(Container, {
+    fluid: true,
+    className: "d-flex g-0",
+    style: {
+      height: appDimensions.height
+    }
+  }, /*#__PURE__*/React.createElement(Navbar, {
+    expand: "sm",
+    bg: "primary",
+    className: "cherita-navbar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "container-fluid"
+  }, /*#__PURE__*/React.createElement(Navbar.Toggle, {
+    "aria-controls": "navbarScroll"
+  }), /*#__PURE__*/React.createElement(Navbar.Collapse, {
+    id: "navbarScroll"
+  }, /*#__PURE__*/React.createElement(Nav, {
+    className: "me-auto my-0",
+    navbarScroll: true
+  }, /*#__PURE__*/React.createElement(Nav.Item, {
+    className: "d-block d-lg-none"
+  }, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowObs(true)
+  }, "Observations")), /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowVars(true)
+  }, "Features"))), /*#__PURE__*/React.createElement(Nav, {
+    className: "d-flex"
+  }, /*#__PURE__*/React.createElement(Nav.Item, null, /*#__PURE__*/React.createElement(Nav.Link, {
+    onClick: () => setShowControls(true)
+  }, "Controls")))))), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-obs modern-scrollbars border-end h-100"
+  }, /*#__PURE__*/React.createElement(ObsColsList, props)), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-canvas flex-grow-1"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "cherita-app-sidebar p-3"
+  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Card.Header, {
+    className: "d-flex justify-content-evenly align-items-center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    onClick: () => setShowModal(true)
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowUpRightFromSquare
+  }))), /*#__PURE__*/React.createElement(Card.Body, {
+    className: "d-flex flex-column p-0"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sidebar-pseudospatial"
+  }, /*#__PURE__*/React.createElement(Pseudospatial, {
+    className: "sidebar-pseudospatial",
+    plotType: pseudospatialPlotType,
+    setPlotType: setpseudospatialPlotType,
+    setShowControls: setShowPseudospatialControls
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "sidebar-features modern-scrollbars"
+  }, /*#__PURE__*/React.createElement(SearchBar, {
+    searchDiseases: true,
+    searchVar: true
+  }), /*#__PURE__*/React.createElement(VarNamesList, {
+    mode: varMode
+  })))))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
+    show: showModal,
+    onHide: () => setShowModal(false),
+    centered: true
+  }, /*#__PURE__*/React.createElement(Modal.Header, {
+    closeButton: true
+  }), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(Pseudospatial, {
+    plotType: pseudospatialPlotType,
+    setPlotType: setpseudospatialPlotType,
+    setShowControls: setShowPseudospatialControls,
+    height: 500
+  }))), /*#__PURE__*/React.createElement(OffcanvasObs, {
+    show: showObs,
+    handleClose: () => setShowObs(false)
+  }), /*#__PURE__*/React.createElement(OffcanvasVars, {
+    show: showVars,
+    handleClose: () => setShowVars(false)
+  }), /*#__PURE__*/React.createElement(OffcanvasControls, {
+    show: showControls,
+    handleClose: () => setShowControls(false),
+    Controls: ScatterplotControls
+  }), /*#__PURE__*/React.createElement(OffcanvasControls, {
+    show: showPseudospatialControls,
+    handleClose: () => setShowPseudospatialControls(false),
+    Controls: PseudospatialToolbar,
+    plotType: pseudospatialPlotType
+  }), /*#__PURE__*/React.createElement(OffcanvasObsm, {
+    show: showObsm,
+    handleClose: () => setShowObsm(false)
+  }))));
+}
+export function FullPagePseudospatial(props) {
+  return /*#__PURE__*/React.createElement(FullPage, props, /*#__PURE__*/React.createElement(Scatterplot, null));
+}

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)))));
+}