Merge pull request #36 from carbonplan/katamartin/lock-zoom

carbonplan · Apr 25, 2024 · 27498a8 · 27498a8
2 parents d6e26c4 + b24f5e9
commit 27498a8
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 68 deletions.
diff --git a/components/data/dataset.js b/components/data/dataset.js
@@ -66,12 +66,10 @@ class Dataset {
         name: variableName,
         selectors,
         centerPoint: level0.centerPoint,
-        lockZoom: this.pyramid ? false : level0.lockZoom,
       }
       this.variableMetadata[variableName] = metadata
     }
 
-    this.lockZoom = metadata.lockZoom
     this.variable = variableName
 
     return { centerPoint: metadata.centerPoint, selectors: metadata.selectors }

diff --git a/components/data/level.js b/components/data/level.js
@@ -29,7 +29,6 @@ class Level {
     const {
       centerPoint,
       axes,
-      lockZoom,
       nullValue,
       northPole,
       chunk_separator,
@@ -42,7 +41,6 @@ class Level {
       name: variableName,
       centerPoint,
       axes,
-      lockZoom,
       nullValue,
       northPole,
       chunk_separator,

diff --git a/components/map-container.js b/components/map-container.js
@@ -8,7 +8,6 @@ const MapContainer = ({ children, setMapProps }) => {
   const moveListener = useRef(null)
   const [cursor, setCursor] = useState('grab')
   const hasData = useStore((state) => !!state.data)
-  const lockZoom = useStore((state) => state.dataset?.lockZoom ?? true)
 
   const panMap = useCallback((offset) => {
     setMapProps((prev) => ({
@@ -17,25 +16,6 @@ const MapContainer = ({ children, setMapProps }) => {
     }))
   }, [])
 
-  const zoomMap = useCallback(
-    (delta, offset = [0, 0]) => {
-      if (lockZoom) return
-      setMapProps((prev) => {
-        delta = delta * prev.scale
-        const updatedScale =
-          prev.scale + delta < 0 ? prev.scale : prev.scale + delta
-        return {
-          ...prev,
-          scale: updatedScale,
-          translate: prev.translate.map(
-            (d, i) => offset[i] - ((offset[i] - d) / prev.scale) * updatedScale
-          ),
-        }
-      })
-    },
-    [lockZoom]
-  )
-
   const handler = useCallback(
     ({ key, keyCode, metaKey, ...rest }) => {
       if (document.activeElement !== container.current) {
@@ -57,16 +37,10 @@ const MapContainer = ({ children, setMapProps }) => {
           }
 
           panMap(offset)
-        } else if (key === '=') {
-          // zoom in
-          zoomMap(1)
-        } else if (key === '-') {
-          // zoom out
-          zoomMap(-1)
         }
       }
     },
-    [hasData, panMap, zoomMap]
+    [hasData, panMap]
   )
   useEffect(() => {
     window.addEventListener('keydown', handler)
@@ -104,21 +78,6 @@ const MapContainer = ({ children, setMapProps }) => {
     }
   })
 
-  const handleWheel = useCallback(
-    (event) => {
-      const height = container.current.clientHeight
-      const width = container.current.clientWidth
-      const { x, y } = container.current.getBoundingClientRect()
-      const point = [event.clientX - x, event.clientY - y]
-
-      const offset = [(point[0] / width) * 2 - 1, (point[1] / height) * 2 - 1]
-      const delta = event.deltaY / -150
-
-      zoomMap(delta, offset)
-    },
-    [panMap, zoomMap]
-  )
-
   return (
     <Box
       sx={{
@@ -140,7 +99,6 @@ const MapContainer = ({ children, setMapProps }) => {
       tabIndex={0}
       onMouseDown={handleMouseDown}
       onMouseUp={handleMouseUp}
-      onWheel={handleWheel}
       id='container'
     >
       {children}

diff --git a/components/nav.js b/components/nav.js
@@ -90,7 +90,10 @@ const Nav = ({ mapProps, setMapProps, sx }) => {
 
       const mapProjection = getProjection(mapProps)
       const mapPoint = mapProjection(center)
-      const offset = [1 - (mapPoint[0] / 800) * 2, 1 - (mapPoint[1] / 400) * 2]
+      const offset = [
+        1 - (mapPoint[0] / 800) * 2,
+        1 - (mapPoint[1] / (800 * ASPECTS[mapProjection.id])) * 2,
+      ]
 
       setMapProps((prev) => ({
         ...prev,

diff --git a/components/proxy-map.js b/components/proxy-map.js
@@ -28,7 +28,7 @@ const ProxyMap = () => {
     count: 255,
     format: 'rgb',
   })
-  const { northPole, nullValue, lockZoom } = useStore(
+  const { northPole, nullValue } = useStore(
     (state) => state.dataset?.level?.variable || {}
   )
   const clim = useStore((state) => state.clim)
@@ -48,22 +48,12 @@ const ProxyMap = () => {
 
   useEffect(() => {
     if (!mapPropsInitialized.current && chunkBounds) {
-      const bounds = lockZoom
-        ? chunkBounds
-        : {
-            lat: [-90, 90],
-            lon: [-180, 180],
-          }
-      const p = getMapProps(bounds, projectionName)
+      const p = getMapProps(chunkBounds, projectionName)
 
-      if (p.scale < 1) {
-        setMapProps({ ...p, scale: 1, translate: [0, 0] })
-      } else {
-        setMapProps(p)
-      }
+      setMapProps(p)
       mapPropsInitialized.current = true
     }
-  }, [!!chunkBounds, projectionName, lockZoom])
+  }, [!!chunkBounds, projectionName])
 
   useEffect(() => {
     if (!dataset) {
@@ -141,7 +131,6 @@ const ProxyMap = () => {
             position: 'fixed',
             bottom: '18px',
             right: '18px',
-            opacity: lockZoom ? 1 : 0,
             transition: '0.1s',
           }}
         />

diff --git a/components/utils/data.js b/components/utils/data.js
@@ -293,10 +293,6 @@ export const getVariableLevelInfo = async (
     }
   }, {})
 
-  const lockZoom = [axes.X.index, axes.Y.index].some(
-    (index) => arrays[name].shape[index] / arrays[name].chunk_shape[index] > 4
-  )
-
   return {
     centerPoint: [
       axes.X.array.data[Math.round((axes.X.array.data.length - 1) / 2)],
@@ -312,7 +308,6 @@ export const getVariableLevelInfo = async (
           ]
         : undefined,
     axes,
-    lockZoom,
     chunk_separator,
     chunk_shape,
     nullValue,
@@ -713,6 +708,8 @@ const inferCfAxes = (metadata, pyramid) => {
         return { ...base, X: 'lon', Y: 'lat' }
       } else if (['latitude', 'longitude'].every((d) => dims.includes(d))) {
         return { ...base, X: 'longitude', Y: 'latitude' }
+      } else if (['nlat', 'nlon'].every((d) => dims.includes(d))) {
+        return { ...base, X: 'nlon', Y: 'nlat' }
       } else if (!pyramid && ['rlat', 'rlon'].every((d) => dims.includes(d))) {
         // For non-pyramids, also check for rotated X/Y coordinate names
         return { ...base, X: 'rlon', Y: 'rlat' }