@haniffalab/cherita-react 0.1.0 → 0.1.1

package/src/index.js

@@ -1,10 +1,6 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-  <React.StrictMode>
-    <App dataset_url="https://storage.googleapis.com/haniffalab/test/breast_cancer-visium-anndata.zarr" />
-  </React.StrictMode>
-);
+export { ObsColsList } from "./lib/components/ObsList";
+export { VarNamesList } from "./lib/components/VarList";
+export { Heatmap } from "./lib/components/Heatmap";
+export { Dotplot } from "./lib/components/Dotplot";
+export { PLOTLY_COLORSCALES } from "./lib/constants/constants";
+export { DatasetProvider } from "./lib/context/DatasetContext";

package/src/lib/components/Dotplot.js

@@ -0,0 +1,116 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import Dropdown from "react-bootstrap/Dropdown";
+import { React, useCallback, useEffect, useRef, useState } from "react";
+import Plot from "react-plotly.js";
+import { useDataset, useDatasetDispatch } from "./DatasetContext";
+import { PLOTLY_COLORSCALES } from "./lib/constants/constants";
+
+export function DotplotControls() {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  let [active, setActive] = useState(dataset.colorscale);
+
+  useEffect(() => {
+    setActive(dataset.colorscale);
+  }, [dataset.colorscale]);
+
+  const colormapList = PLOTLY_COLORSCALES.map((item) => (
+    <Dropdown.Item
+      key={item}
+      active={active === item}
+      onClick={() => {
+        dispatch({
+          type: "colorscaleSelected",
+          colorscale: item,
+        });
+      }}
+    >
+      {item}
+    </Dropdown.Item>
+  ));
+
+  return (
+    <Dropdown>
+      <Dropdown.Toggle id="dropdownColorscale" variant="light">
+        {dataset.colorscale}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>{colormapList}</Dropdown.Menu>
+    </Dropdown>
+  );
+}
+
+export function Dotplot() {
+  const dataset = useDataset();
+  const colorscale = useRef(dataset.colorscale);
+  let [data, setData] = useState([]);
+  let [layout, setLayout] = useState({});
+  let [hasSelections, setHasSelections] = useState(false);
+
+  const updateColorscale = useCallback((colorscale) => {
+    setLayout((l) => {
+      return {
+        ...l,
+        coloraxis: { ...l.coloraxis, colorscale: colorscale },
+      };
+    });
+  }, []);
+
+  useEffect(() => {
+    if (dataset.selectedObs && dataset.selectedMultiVar.length) {
+      setHasSelections(true);
+      fetch(new URL("dotplot", process.env.REACT_APP_API_URL), {
+        method: "POST",
+        mode: "cors",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          url: dataset.url,
+          selectedObs: dataset.selectedObs,
+          selectedMultiVar: dataset.selectedMultiVar,
+        }),
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          setData(data.data);
+          setLayout(data.layout);
+          updateColorscale(colorscale.current);
+        });
+    } else {
+      setHasSelections(false);
+    }
+  }, [
+    dataset.url,
+    dataset.selectedObs,
+    dataset.selectedMultiVar,
+    updateColorscale,
+  ]);
+
+  useEffect(() => {
+    console.log("update colorscale");
+    colorscale.current = dataset.colorscale;
+    updateColorscale(colorscale.current);
+  }, [dataset.colorscale, updateColorscale]);
+
+  if (hasSelections) {
+    return (
+      <div className="container text-center">
+        <h5>{dataset.url}</h5>
+        <DotplotControls />
+        <Plot
+          data={data}
+          layout={layout}
+          useResizeHandler={true}
+          style={{ width: "100%", height: "100%" }}
+        />
+      </div>
+    );
+  }
+  return (
+    <div className="h-100">
+      <h5>{dataset.url}</h5>
+      <p>Select OBS and VAR</p>
+    </div>
+  );
+}

package/src/{Heatmap.js → lib/components/Heatmap.js}

@@ -1,107 +1,115 @@
-import "bootstrap/dist/css/bootstrap.min.css";
-import Dropdown from "react-bootstrap/Dropdown";
-import { React, useEffect, useState } from "react";
-import Plot from "react-plotly.js";
-import { useDataset, useDatasetDispatch } from "./DatasetContext";
-import { PLOTLY_COLORSCALES } from "./constants";
-
-export function HeatmapControls() {
-  const dataset = useDataset();
-  const dispatch = useDatasetDispatch();
-  let [active, setActive] = useState(dataset.colorscale);
-
-  useEffect(() => {
-    setActive(dataset.colorscale);
-  }, [dataset.colorscale]);
-
-  const colormapList = PLOTLY_COLORSCALES.map((item) => (
-    <Dropdown.Item
-      key={item}
-      active={active === item}
-      onClick={() => {
-        setActive(item);
-        dispatch({
-          type: "colorscaleSelected",
-          colorscale: item,
-        });
-      }}
-    >
-      {item}
-    </Dropdown.Item>
-  ));
-
-  return (
-    <Dropdown>
-      <Dropdown.Toggle id="dropdownColorscale" variant="light">
-        {dataset.colorscale}
-      </Dropdown.Toggle>
-      <Dropdown.Menu>{colormapList}</Dropdown.Menu>
-    </Dropdown>
-  );
-}
-
-export function Heatmap() {
-  const dataset = useDataset();
-  let [data, setData] = useState([]);
-  let [layout, setLayout] = useState({});
-  let [hasSelections, setHasSelections] = useState(false);
-  let [colorscale, setColorscale] = useState(dataset.colorscale);
-
-  useEffect(() => {
-    if (dataset.selectedObs && dataset.selectedMultiVar.length) {
-      setHasSelections(true);
-      fetch(new URL("heatmap", process.env.REACT_APP_API_URL), {
-        method: "POST",
-        mode: "cors",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-        },
-        body: JSON.stringify({
-          url: dataset.url,
-          selectedObs: dataset.selectedObs,
-          selectedMultiVar: dataset.selectedMultiVar,
-        }),
-      })
-        .then((response) => response.json())
-        .then((data) => {
-          setData(data.data);
-          setLayout(data.layout);
-          setColorscale(null);
-        });
-    } else {
-      setHasSelections(false);
-    }
-  }, [dataset.url, dataset.selectedObs, dataset.selectedMultiVar]);
-
-  useEffect(() => {
-    console.log("update colorscale");
-    setColorscale(dataset.colorscale);
-    setData((d) =>
-      d.map((i) => {
-        return { ...i, colorscale: dataset.colorscale };
-      })
-    );
-  }, [colorscale, dataset.colorscale]);
-
-  if (hasSelections) {
-    return (
-      <div className="container text-center">
-        <h5>{dataset.url}</h5>
-        <HeatmapControls />
-        <Plot
-          data={data}
-          layout={layout}
-          useResizeHandler={true}
-          style={{ width: "100%", height: "100%" }}
-        />
-      </div>
-    );
-  }
-  return (
-    <div className="h-100">
-      <h5>{dataset.url}</h5>
-      <p>Select OBS and VAR</p>
-    </div>
-  );
-}
+import "bootstrap/dist/css/bootstrap.min.css";
+import Dropdown from "react-bootstrap/Dropdown";
+import { React, useCallback, useEffect, useRef, useState } from "react";
+import Plot from "react-plotly.js";
+import { useDataset, useDatasetDispatch } from "./DatasetContext";
+import { PLOTLY_COLORSCALES } from "./lib/constants/constants";
+
+export function HeatmapControls() {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  let [active, setActive] = useState(dataset.colorscale);
+
+  useEffect(() => {
+    setActive(dataset.colorscale);
+  }, [dataset.colorscale]);
+
+  const colormapList = PLOTLY_COLORSCALES.map((item) => (
+    <Dropdown.Item
+      key={item}
+      active={active === item}
+      onClick={() => {
+        dispatch({
+          type: "colorscaleSelected",
+          colorscale: item,
+        });
+      }}
+    >
+      {item}
+    </Dropdown.Item>
+  ));
+
+  return (
+    <Dropdown>
+      <Dropdown.Toggle id="dropdownColorscale" variant="light">
+        {dataset.colorscale}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>{colormapList}</Dropdown.Menu>
+    </Dropdown>
+  );
+}
+
+export function Heatmap() {
+  const dataset = useDataset();
+  const colorscale = useRef(dataset.colorscale);
+  let [data, setData] = useState([]);
+  let [layout, setLayout] = useState({});
+  let [hasSelections, setHasSelections] = useState(false);
+
+  const updateColorscale = useCallback((colorscale) => {
+    setData((d) =>
+      d.map((i) => {
+        return { ...i, colorscale: colorscale };
+      })
+    );
+  }, []);
+
+  useEffect(() => {
+    if (dataset.selectedObs && dataset.selectedMultiVar.length) {
+      setHasSelections(true);
+      fetch(new URL("heatmap", process.env.REACT_APP_API_URL), {
+        method: "POST",
+        mode: "cors",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          url: dataset.url,
+          selectedObs: dataset.selectedObs,
+          selectedMultiVar: dataset.selectedMultiVar,
+        }),
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          setData(data.data);
+          setLayout(data.layout);
+          updateColorscale(colorscale.current);
+        });
+    } else {
+      setHasSelections(false);
+    }
+  }, [
+    dataset.url,
+    dataset.selectedObs,
+    dataset.selectedMultiVar,
+    updateColorscale,
+  ]);
+
+  useEffect(() => {
+    console.log("update colorscale");
+    colorscale.current = dataset.colorscale;
+    updateColorscale(colorscale.current);
+  }, [dataset.colorscale, updateColorscale]);
+
+  if (hasSelections) {
+    return (
+      <div className="container text-center">
+        <h5>{dataset.url}</h5>
+        <HeatmapControls />
+        <Plot
+          data={data}
+          layout={layout}
+          useResizeHandler={true}
+          style={{ width: "100%", height: "100%" }}
+        />
+      </div>
+    );
+  }
+  return (
+    <div className="h-100">
+      <h5>{dataset.url}</h5>
+      <p>Select OBS and VAR</p>
+    </div>
+  );
+}

package/src/{ObsList.js → lib/components/ObsList.js}

@@ -1,53 +1,56 @@
-import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap/dist/js/bootstrap.bundle.min.js";
-import { React, useEffect, useState } from "react";
-import { useDataset, useDatasetDispatch } from "./DatasetContext";
-
-export function ObsColsList() {
-  const dataset = useDataset();
-  const dispatch = useDatasetDispatch();
-  const [obsColsList, setObsColsList] = useState([]);
-  let [active, setActive] = useState(null);
-
-  useEffect(() => {
-    fetch(new URL("obs/cols", process.env.REACT_APP_API_URL), {
-      method: "POST",
-      mode: "cors",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-      },
-      body: JSON.stringify({ url: dataset.url }),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        setObsColsList(data);
-      });
-  }, [dataset.url]);
-
-  const obsList = obsColsList.map((item) => (
-    <button
-      type="button"
-      key={item}
-      className={`list-group-item list-grou-item-action ${
-        active === item && "active"
-      }`}
-      onClick={() => {
-        setActive(item);
-        dispatch({
-          type: "obsSelected",
-          obs: item,
-        });
-      }}
-    >
-      {item}
-    </button>
-  ));
-
-  return (
-    <div className="h-100">
-      <h5>{dataset.url}</h5>
-      <div className="list-group overflow-auto mh-100">{obsList}</div>
-    </div>
-  );
-}
+import "bootstrap/dist/css/bootstrap.min.css";
+import "bootstrap/dist/js/bootstrap.bundle.min.js";
+import { React, useEffect, useState } from "react";
+import { useDataset, useDatasetDispatch } from "./DatasetContext";
+
+export function ObsColsList() {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  const [obsColsList, setObsColsList] = useState([]);
+  let [active, setActive] = useState(null);
+
+  useEffect(() => {
+    fetch(new URL("obs/cols", process.env.REACT_APP_API_URL), {
+      method: "POST",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({ url: dataset.url }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        setObsColsList(data);
+      });
+  }, [dataset.url]);
+
+  useEffect(() => {
+    setActive(dataset.selectedObs);
+  }, [dataset.selectedObs]);
+
+  const obsList = obsColsList.map((item) => (
+    <button
+      type="button"
+      key={item}
+      className={`list-group-item list-grou-item-action ${
+        active === item && "active"
+      }`}
+      onClick={() => {
+        dispatch({
+          type: "obsSelected",
+          obs: item,
+        });
+      }}
+    >
+      {item}
+    </button>
+  ));
+
+  return (
+    <div className="h-100">
+      <h5>{dataset.url}</h5>
+      <div className="list-group overflow-auto mh-100">{obsList}</div>
+    </div>
+  );
+}