Draft: animated horizontal zoom

taxonium_web_client/src/Deck.jsx

@@ -15,6 +15,12 @@ import { DeckButtons } from "./components/DeckButtons";
 import DeckSettingsModal from "./components/DeckSettingsModal";
 import FirefoxWarning from "./components/FirefoxWarning";
 
+//create your forceUpdate hook
+function useForceUpdate(){
+  const [value, setValue] = useState(0); // integer state
+  return () => setValue(value => value + 1); // update the state to force render
+}
+
 function Deck({
   data,
   search,
@@ -32,6 +38,12 @@ function Deck({
   deckSize,
   isCurrentlyOutsideBounds,
 }) {
+  const zoomAnimation = useRef({
+    startTime: null,
+    endTime: null,
+    startZoom: null,
+    endZoom: null,
+  });
   const deckRef = useRef();
   const snapshot = useSnapshot(deckRef);
   const [deckSettingsOpen, setDeckSettingsOpen] = useState(false);

taxonium_web_client/src/Taxonium.jsx

@@ -8,11 +8,12 @@ import useSearch from "./hooks/useSearch";
 import useColorBy from "./hooks/useColorBy";
 import useNodeDetails from "./hooks/useNodeDetails";
 import useHoverDetails from "./hooks/useHoverDetails";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState, useRef } from "react";
 import useBackend from "./hooks/useBackend";
 import useConfig from "./hooks/useConfig";
 import { useSettings } from "./hooks/useSettings";
 
+
 const URL_ON_FAIL = window.location.hostname.includes(".epicov.org")
   ? "https://www.epicov.org/epi3/frontend"
   : process.env.REACT_APP_URL_ON_FAIL;

taxonium_web_client/src/hooks/useView.js

@@ -1,11 +1,17 @@
-import { useState, useMemo, useCallback } from "react";
+import { useState, useMemo, useCallback, useRef, useEffect } from "react";
 import {toast} from 'react-hot-toast'
 import {
   OrthographicView,
   OrthographicController,
   //OrthographicViewport,
 } from "@deck.gl/core";
 
+function useForceUpdate(){
+  const [value, setValue] = useState(0); // integer state
+  return () => setValue(value => value + 1); // update the state to force render
+}
+
+
 let globalSetZoomAxis = () => {};
 class MyOrthographicController extends OrthographicController {
   // on construction
@@ -96,6 +102,8 @@ class MyOrthographicController extends OrthographicController {
 }
 
 const useView = ({ settings, deckSize }) => {
+
+  const forceUpdate = useForceUpdate();
   const [zoomAxis, setZoomAxis] = useState("Y");
   const [xzoom, setXzoom] = useState(0);
   globalSetZoomAxis = setZoomAxis;
@@ -107,7 +115,17 @@ const useView = ({ settings, deckSize }) => {
     bearing: 0,
     minimap: { zoom: -3, target: [250, 1000] },
   });
-  //console.log("useView", viewState);
+
+  const zoomAnimation = useRef({
+    startTime: null,
+    endTime: null,
+    startZoom: null,
+    endZoom: null,
+    zooming: null,
+    zoomAxis: null,
+  });
+
+
 
   const views = useMemo(() => {
     return [
@@ -238,7 +256,7 @@ const useView = ({ settings, deckSize }) => {
     [zoomAxis, xzoom, deckSize]
   );
 
-  const zoomIncrement = useCallback(
+  const zoomIncrementBasic = useCallback(
     (increment, overrideZoomAxis) => {
       const newViewState = { ...viewState };
       newViewState.zoom += increment;
@@ -253,6 +271,43 @@ const useView = ({ settings, deckSize }) => {
     [viewState, onViewStateChange]
   );
 
+  const zoomIncrement = useCallback(
+    (increment, overrideZoomAxis) => {
+      const finalZoom = viewState.zoom + increment;
+      zoomAnimation.current.zooming = true;
+      zoomAnimation.current.zoomAxis = overrideZoomAxis;
+      zoomAnimation.current.startZoom = viewState.zoom;
+      zoomAnimation.current.endZoom = finalZoom;
+      zoomAnimation.current.startTime = Date.now();
+      zoomAnimation.current.endTime = zoomAnimation.current.startTime + 1000;
+      forceUpdate();
+    },
+    [viewState, onViewStateChange]
+  );
+
+
+  useEffect(() => {
+    if(zoomAnimation.current.zooming){
+       const {startTime, endTime, startZoom, endZoom, zoomAxis} = zoomAnimation.current;
+       const now = Date.now();
+       if(now > endTime){
+         const remaining_difference = endZoom - viewState.zoom;
+         zoomIncrementBasic(remaining_difference, zoomAxis);
+         zoomAnimation.current.zooming = false;
+       }
+       else{
+         const elapsed_time = now - startTime;
+         const target_zoom = startZoom + elapsed_time * (endZoom - startZoom) / (endTime - startTime);
+         const difference = target_zoom - viewState.zoom;
+         zoomIncrementBasic(difference, zoomAxis);
+         setTimeout(() => {
+           forceUpdate();
+         }
+         , 10);
+       }
+     }
+   }, [viewState.zoom, zoomAxis, forceUpdate, zoomAnimation.current.zooming, zoomIncrementBasic]);
+
   const output = useMemo(() => {
     return {
       viewState,