Update map view to work in Storybook

theosanderson · Sep 28, 2023 · 8174d24 · 8174d24
1 parent cf33a82
commit 8174d24
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/taxonium_component/src/Deck.jsx b/taxonium_component/src/Deck.jsx
@@ -19,6 +19,7 @@ import { TreenomeButtons } from "./components/TreenomeButtons";
 import TreenomeModal from "./components/TreenomeModal";
 import FirefoxWarning from "./components/FirefoxWarning";
 import Key from "./components/Key";
+import ColorSettingModal from "./components/ColorSettingModal";
 import TreenomeBrowser from "./components/TreenomeBrowser";
 
 const MemoizedKey = React.memo(Key);

diff --git a/taxonium_component/src/Taxonium.jsx b/taxonium_component/src/Taxonium.jsx
@@ -66,6 +66,7 @@ function Taxonium({
 
   const deckRef = useRef();
   const jbrowseRef = useRef();
+  const [mouseDownIsMinimap, setMouseDownIsMinimap] = useState(false);
 
   const [deckSize, setDeckSize] = useState(null);
   const settings = useSettings({ query, updateQuery });
@@ -74,7 +75,6 @@ function Taxonium({
     deckSize,
     deckRef,
     jbrowseRef,
-    nodes,
     mouseDownIsMinimap,
   });
 
@@ -125,8 +125,6 @@ function Taxonium({
   const { data, boundsForQueries, isCurrentlyOutsideBounds } =
     useGetDynamicData(backend, colorBy, view.viewState, config, xType);
 
-  useMemo(() => setNodes(data), [data]);
-
   const perNodeFunctions = usePerNodeFunctions(data, config);
 
   useEffect(() => {

diff --git a/taxonium_component/src/hooks/useLayers.jsx b/taxonium_component/src/hooks/useLayers.jsx
@@ -7,7 +7,7 @@ import {
   GeoJsonLayer,
 } from "@deck.gl/layers";
 
-import { useMemo, useCallback } from "react";
+import { useMemo, useCallback, useEffect } from "react";
 import useTreenomeLayers from "./useTreenomeLayers";
 import getSVGfunction from "../utils/deckglToSvg";
 
@@ -558,6 +558,7 @@ const useLayers = ({
   }
 
   const getColorByCountryCount = (country) => {
+    console.log("country ", country);
     const hookColor = colorHook.toRGB(country);
 
     const GRAY = [169, 169, 169];
@@ -570,11 +571,11 @@ const useLayers = ({
   let lineWidth = 100;
   if (viewState["map"]) lineWidth = (1 / viewState["map"].zoom) * 9000;
 
-  layers.push(
-    new GeoJsonLayer({
+  layers.push({
       id: "map",
       data: geojson.features,
       stroked: true,
+      layerType: "GeoJsonLayer",
       filled: true,
       getLineColor: [255, 255, 255],
       getLineWidth: lineWidth,
@@ -585,8 +586,7 @@ const useLayers = ({
         getFillColor: data.data.nodes,
       },
       opacity: 0.8,
-    })
-  );
+    });
 
   const layerFilter = useCallback(
     ({ layer, viewport, renderPass }) => {
@@ -615,6 +615,7 @@ const useLayers = ({
         return new ScatterplotLayer(layer);
       }
       if (layer.layerType === "LineLayer") {
+        console.log('processed ', layer);
         return new LineLayer(layer);
       }
       if (layer.layerType === "PolygonLayer") {
@@ -626,6 +627,9 @@ const useLayers = ({
       if (layer.layerType === "SolidPolygonLayer") {
         return new SolidPolygonLayer(layer);
       }
+      if (layer.layerType === "GeoJsonLayer") {
+        return new GeoJsonLayer(layer);
+      }
       console.log("could not map layer spec for ", layer);
     });
 

diff --git a/taxonium_component/src/hooks/useView.jsx b/taxonium_component/src/hooks/useView.jsx
@@ -106,7 +106,13 @@ class MyOrthographicController extends OrthographicController {
   }
 }
 
-const useView = ({ settings, deckSize, deckRef, jbrowseRef, nodes }) => {
+const useView = ({
+  settings,
+  deckSize,
+  deckRef,
+  jbrowseRef,
+  mouseDownIsMinimap,
+}) => {
   const [zoomAxis, setZoomAxis] = useState("Y");
   const [xzoom, setXzoom] = useState(window.screen.width < 600 ? -1 : 0);
   globalSetZoomAxis = setZoomAxis;
@@ -247,10 +253,6 @@ const useView = ({ settings, deckSize, deckRef, jbrowseRef, nodes }) => {
     ];
   }, [viewState.zoom, xzoom]);
 
-  useEffect(() => {
-    console.log("vs: ", viewState);
-  }, [viewState]);
-
   const onViewStateChange = useCallback(
     ({
       viewState: newViewState,