@haniffalab/cherita-react 0.1.0 → 0.1.1

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

@@ -1,153 +1,114 @@
-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>
-  );
-}
+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/{constants.js → lib/constants/constants.js}

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

package/src/{DatasetContext.js → lib/context/DatasetContext.js}

@@ -1,68 +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);
-    }
-  }
-}
+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/public/index.html

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

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