@haniffalab/cherita-react 0.1.1 → 0.1.2

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@haniffalab/cherita-react",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "",
   "license": "",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "files": ["dist"],
   "dependencies": {
     "bootstrap": "^5.3.0",
     "jquery": "^3.7.0",

package/.eslintrc.json

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

package/babel.config.json

@@ -1,6 +0,0 @@
-{
-    "presets": [
-      "@babel/preset-react",
-      "@babel/preset-env"
-    ]
-  }

package/src/index.js

@@ -1,6 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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/lib/components/Heatmap.js

@@ -1,115 +0,0 @@
-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/lib/components/ObsList.js

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

package/src/lib/components/VarList.js

@@ -1,114 +0,0 @@
-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]);
-
-  useEffect(() => {
-    setActive(dataset.selectedVar);
-  }, [dataset.selectedVar]);
-
-  const varList = varNames.map((item) => (
-    <button
-      type="button"
-      key={item}
-      className={`list-group-item list-grou-item-action ${
-        active === item && "active"
-      }`}
-      onClick={() => {
-        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]);
-
-  useEffect(() => {
-    setActive(dataset.selectedMultiVar);
-  }, [dataset.selectedMultiVar]);
-
-  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)) {
-          dispatch({
-            type: "multiVarDeselected",
-            var: item,
-          });
-        } else {
-          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>
-  );
-}

package/src/lib/constants/constants.js

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

package/src/lib/context/DatasetContext.js

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