npm - @haniffalab/cherita-react - Versions diffs - 0.1.0 - Mend

@haniffalab/cherita-react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/.eslintrc.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+    "extends": [
+        "react-app",
+        "prettier"
+    ]
+}

package/README.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ # react-wt.js

package/package.json ADDED Viewed

@@ -0,0 +1,46 @@
+{
+  "name": "@haniffalab/cherita-react",
+  "version": "0.1.0",
+  "author": "",
+  "license": "",
+  "dependencies": {
+    "bootstrap": "^5.3.0",
+    "jquery": "^3.7.0",
+    "plotly.js": "^2.23.2",
+    "popper.js": "^1.16.1",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.7.4",
+    "react-dom": "^18.2.0",
+    "react-plotly.js": "^2.6.0",
+    "react-scripts": "^5.0.1"
+  },
+  "devDependencies": {
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-react-app": "^7.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "prettier"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/public/index.html ADDED Viewed

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/src/App.js ADDED Viewed

@@ -0,0 +1,30 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import React from "react";
+import { Heatmap } from "./Heatmap.js";
+import { DatasetProvider } from "./DatasetContext.js";
+import { ObsColsList } from "./ObsList.js";
+import { MultiVarNamesList } from "./VarList.js";
+export default function App({ dataset_url }) {
+  return (
+    <DatasetProvider dataset_url={dataset_url}>
+      <div className="container-fluid" style={{ height: "100vh" }}>
+        <div className="row h-50">
+          <div className="col-3 h-100">
+            <ObsColsList />
+          </div>
+          <div className="col-3 h-100">
+            {/* <VarNamesList /> */}
+            <MultiVarNamesList />
+          </div>
+          <div className="col-6 h-100">
+            <Heatmap />
+          </div>
+        </div>
+        <div className="row h-50">
+          <Heatmap />
+        </div>
+      </div>
+    </DatasetProvider>
+  );
+}

package/src/DatasetContext.js ADDED Viewed

@@ -0,0 +1,68 @@
+import { createContext, useContext, useReducer } from "react";
+export const DatasetContext = createContext(null);
+export const DatasetDispatchContext = createContext(null);
+export function DatasetProvider({ dataset_url, children }) {
+  const [dataset, dispatch] = useReducer(datasetReducer, {
+    url: dataset_url,
+    selectedObs: null,
+    selectedVar: null,
+    selectedMultiObs: [],
+    selectedMultiVar: [],
+    colorscale: "Viridis",
+  });
+  return (
+    <DatasetContext.Provider value={dataset}>
+      <DatasetDispatchContext.Provider value={dispatch}>
+        {children}
+      </DatasetDispatchContext.Provider>
+    </DatasetContext.Provider>
+  );
+}
+export function useDataset() {
+  return useContext(DatasetContext);
+}
+export function useDatasetDispatch() {
+  return useContext(DatasetDispatchContext);
+}
+function datasetReducer(dataset, action) {
+  switch (action.type) {
+    case "setDataset": {
+      return action.dataset;
+    }
+    case "obsSelected": {
+      return { ...dataset, selectedObs: action.obs };
+    }
+    case "varSelected": {
+      return { ...dataset, selectedVar: action.var };
+    }
+    case "multiVarSelected": {
+      return {
+        ...dataset,
+        selectedMultiVar: [...dataset.selectedMultiVar, action.var],
+      };
+    }
+    case "multiVarDeselected": {
+      return {
+        ...dataset,
+        selectedMultiVar: dataset.selectedMultiVar.filter(
+          (a) => a !== action.var
+        ),
+      };
+    }
+    case "colorscaleSelected": {
+      return {
+        ...dataset,
+        colorscale: action.colorscale,
+      };
+    }
+    default: {
+      throw Error("Unknown action: " + action.type);
+    }
+  }
+}

package/src/Heatmap.js ADDED Viewed

@@ -0,0 +1,107 @@
+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>
+  );
+}

package/src/ObsList.js ADDED Viewed

@@ -0,0 +1,53 @@
+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>
+  );
+}

package/src/VarList.js ADDED Viewed

@@ -0,0 +1,153 @@
+import "bootstrap/dist/css/bootstrap.min.css";
+import { React, useEffect, useState } from "react";
+import { useDataset, useDatasetDispatch } from "./DatasetContext";
+export function VarNamesList() {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  let [varNames, setVarNames] = useState([]);
+  let [active, setActive] = useState([]);
+  useEffect(() => {
+    fetch(new URL("var/names", 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) => {
+        setVarNames(data);
+      });
+  }, [dataset.url]);
+  const varList = varNames.map((item) => (
+    <button
+      type="button"
+      key={item}
+      className={`list-group-item list-grou-item-action ${
+        active === item && "active"
+      }`}
+      onClick={() => {
+        setActive(item);
+        dispatch({
+          type: "varSelected",
+          var: item,
+        });
+      }}
+    >
+      {item}
+    </button>
+  ));
+  return (
+    <div className="h-100">
+      <h5>{dataset.url}</h5>
+      <div className="list-group overflow-auto mh-100">{varList}</div>
+    </div>
+  );
+}
+export function MultiVarNamesList() {
+  const dataset = useDataset();
+  const dispatch = useDatasetDispatch();
+  let [varNames, setVarNames] = useState([]);
+  let [active, setActive] = useState([]);
+  useEffect(() => {
+    fetch(new URL("var/names", 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) => {
+        setVarNames(data);
+      });
+  }, [dataset.url]);
+  const varList = varNames.map((item) => (
+    <button
+      type="button"
+      key={item}
+      className={`list-group-item list-grou-item-action ${
+        active.includes(item) && "active"
+      }`}
+      onClick={() => {
+        if (active.includes(item)) {
+          setActive(active.filter((a) => a !== item));
+          dispatch({
+            type: "multiVarDeselected",
+            var: item,
+          });
+        } else {
+          setActive([...active, item]);
+          dispatch({
+            type: "multiVarSelected",
+            var: item,
+          });
+        }
+      }}
+    >
+      {item}
+    </button>
+  ));
+  return (
+    <div className="h-100">
+      <h5>{dataset.url}</h5>
+      <div className="list-group overflow-auto mh-100">{varList}</div>
+    </div>
+  );
+}
+export function VarColsList() {
+  const dataset = useDataset();
+  let [varColsList, setVarColsList] = useState([]);
+  let [active, setActive] = useState([]);
+  useEffect(() => {
+    fetch(new URL("var/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) => {
+        setVarColsList(data);
+      });
+  }, [dataset]);
+  const varList = varColsList.map((item) => (
+    <button
+      type="button"
+      key={item}
+      className={`list-group-item list-grou-item-action ${
+        active === item && "active"
+      }`}
+      onClick={() => {
+        setActive(item);
+      }}
+    >
+      {item}
+    </button>
+  ));
+  return (
+    <div className="h-100">
+      <h5>{dataset.url}</h5>
+      <div className="list-group overflow-auto mh-100">{varList}</div>
+    </div>
+  );
+}

package/src/constants.js ADDED Viewed

@@ -0,0 +1,20 @@
+export const PLOTLY_COLORSCALES = [
+  "Blackbody",
+  "Bluered",
+  "Blues",
+  "Cividis",
+  "Earth",
+  "Electric",
+  "Greens",
+  "Greys",
+  "Hot",
+  "Jet",
+  "Picnic",
+  "Portland",
+  "Rainbow",
+  "RdBu",
+  "Reds",
+  "Viridis",
+  "YlGnBu",
+  "YlOrRd",
+];

package/src/index.js ADDED Viewed

@@ -0,0 +1,10 @@
+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>
+);