Fix #2325: Restrict zooming and panning on the data inspector

harshasiddartha · harshasiddartha · commit 45c5c58f4c64 · 2025-11-01T17:08:35.000+05:30
- Fetch TileJSON when inspector dialog opens
- Extract bounds, minzoom, maxzoom, and center from TileJSON
- Configure map with initialViewState and restrictions
- Apply bounds restrictions to prevent panning outside dataset extent
- Set min/max zoom limits based on TileJSON data
- Fit map to bounds when available, otherwise use center
- Update tests to mock TileJSON fetch calls
diff --git a/martin/martin-ui/__tests__/components/dialogs/tile-inspect.test.tsx b/martin/martin-ui/__tests__/components/dialogs/tile-inspect.test.tsx
@@ -1,15 +1,24 @@
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, render, waitFor } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { TileInspectDialog } from '@/components/dialogs/tile-inspect';
 import type { TileSource } from '@/lib/types';
+import { buildMartinUrl } from '@/lib/api';
 
 interface MockComponentProps {
   children?: ReactNode;
   className?: string;
   [key: string]: unknown;
 }
 
+// Mock the buildMartinUrl function
+vi.mock('@/lib/api', () => ({
+  buildMartinUrl: vi.fn((path: string) => `http://localhost:3000${path}`),
+}));
+
+// Mock fetch globally
+global.fetch = vi.fn();
+
 // Mock the UI dialog components
 vi.mock('@/components/ui/dialog', () => ({
   Dialog: ({
@@ -64,18 +73,28 @@ describe('TileInspectDialog', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    // Default mock for fetch - return empty TileJSON
+    vi.mocked(global.fetch).mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        tiles: [],
+      }),
+    } as Response);
   });
 
   afterEach(() => {
     cleanup();
   });
 
-  it('renders dialog with correct title and source information', () => {
+  it('renders dialog with correct title and source information', async () => {
     const { container } = render(
       <TileInspectDialog name="test-tiles" onCloseAction={mockOnClose} source={mockTileSource} />,
     );
 
-    expect(container.textContent).toContain('Inspect Tile Source:');
+    await waitFor(() => {
+      expect(container.textContent).toContain('Inspect Tile Source:');
+    });
+
     expect(container.textContent).toContain('test-tiles');
     expect(container.textContent).toContain('Source Information');
     expect(container.textContent).toContain('image/png');
@@ -165,6 +184,31 @@ describe('TileInspectDialog', () => {
     expect(container.textContent).toContain('Encoding:');
   });
 
+  it('fetches TileJSON when dialog opens', async () => {
+    const mockTileJSON = {
+      tiles: ['http://localhost:3000/test-tiles/{z}/{x}/{y}'],
+      minzoom: 5,
+      maxzoom: 15,
+      bounds: [-180, -85, 180, 85],
+      center: [0, 0, 10],
+    };
+
+    vi.mocked(global.fetch).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockTileJSON,
+    } as Response);
+
+    render(
+      <TileInspectDialog name="test-tiles" onCloseAction={mockOnClose} source={mockTileSource} />,
+    );
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalledWith(
+        buildMartinUrl('/test-tiles'),
+      );
+    });
+  });
+
   it('conditionally renders optional fields', () => {
     const sourceWithoutOptionals: TileSource = {
       content_type: 'image/png',
diff --git a/martin/martin-ui/src/components/dialogs/tile-inspect.tsx b/martin/martin-ui/src/components/dialogs/tile-inspect.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useId, useRef } from 'react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -17,6 +17,23 @@ import { Database } from 'lucide-react';
 import { Popup } from 'maplibre-gl';
 import { buildMartinUrl } from '@/lib/api';
 
+interface TileJSON {
+  tilejson?: string;
+  name?: string;
+  description?: string;
+  version?: string;
+  attribution?: string;
+  scheme?: string;
+  tiles: string[];
+  grids?: string[];
+  data?: string[];
+  minzoom?: number;
+  maxzoom?: number;
+  bounds?: [number, number, number, number]; // [west, south, east, north]
+  center?: [number, number, number]; // [longitude, latitude, zoom]
+  vector_layers?: unknown[];
+}
+
 interface TileInspectDialogProps {
   name: string;
   source: TileSource;
@@ -27,6 +44,86 @@ export function TileInspectDialog({ name, source, onCloseAction }: TileInspectDi
   const id = useId();
   const mapRef = useRef<MapRef>(null);
   const inspectControlRef = useRef<MaplibreInspect>(null);
+  const [tileJSON, setTileJSON] = useState<TileJSON | null>(null);
+
+  const configureMapBounds = useCallback(() => {
+    if (!mapRef.current || !tileJSON) {
+      return;
+    }
+
+    const map = mapRef.current.getMap();
+
+    // Set minzoom and maxzoom restrictions
+    if (tileJSON.minzoom !== undefined) {
+      map.setMinZoom(tileJSON.minzoom);
+    }
+    if (tileJSON.maxzoom !== undefined) {
+      map.setMaxZoom(tileJSON.maxzoom);
+    }
+
+    // Set bounds restrictions if available
+    if (tileJSON.bounds) {
+      const [west, south, east, north] = tileJSON.bounds;
+      map.setMaxBounds([
+        [west, south],
+        [east, north],
+      ]);
+    }
+
+    // Fit to bounds or center if available
+    if (tileJSON.bounds) {
+      const [west, south, east, north] = tileJSON.bounds;
+      map.fitBounds(
+        [
+          [west, south],
+          [east, north],
+        ],
+        {
+          padding: 50,
+          maxZoom: tileJSON.maxzoom,
+        },
+      );
+    } else if (tileJSON.center) {
+      const [lng, lat, zoom] = tileJSON.center;
+      map.setCenter([lng, lat]);
+      if (zoom !== undefined) {
+        map.setZoom(zoom);
+      }
+    }
+  }, [tileJSON]);
+
+  // Fetch TileJSON when dialog opens
+  useEffect(() => {
+    let cancelled = false;
+
+    fetch(buildMartinUrl(`/${name}`))
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Failed to fetch TileJSON: ${response.statusText}`);
+        }
+        return response.json();
+      })
+      .then((data: TileJSON) => {
+        if (!cancelled) {
+          setTileJSON(data);
+        }
+      })
+      .catch((error) => {
+        console.error('Error fetching TileJSON:', error);
+        // Continue without TileJSON restrictions if fetch fails
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [name]);
+
+  // Reconfigure bounds when TileJSON loads after map is already initialized
+  useEffect(() => {
+    if (tileJSON && mapRef.current) {
+      configureMapBounds();
+    }
+  }, [tileJSON, configureMapBounds]);
 
   const addInspectorToMap = useCallback(() => {
     if (!mapRef.current) {
@@ -54,12 +151,15 @@ export function TileInspectDialog({ name, source, onCloseAction }: TileInspectDi
     });
 
     map.addControl(inspectControlRef.current);
-  }, [name]);
+
+    // Configure bounds after adding inspector
+    configureMapBounds();
+  }, [name, configureMapBounds]);
   const isImageSource = ['image/gif', 'image/jpeg', 'image/png', 'image/webp'].includes(
     source.content_type,
   );
   return (
-    <Dialog onOpenChange={(v) => !v && onCloseAction()} open={true}>
+    <Dialog onOpenChange={(v: boolean) => !v && onCloseAction()} open={true}>
       <DialogContent className="max-w-6xl w-full p-6 max-h-[90vh] overflow-auto">
         <DialogHeader className="mb-6">
           <DialogTitle className="text-2xl flex items-center justify-between">
@@ -78,6 +178,31 @@ export function TileInspectDialog({ name, source, onCloseAction }: TileInspectDi
               <MapLibreMap
                 ref={mapRef}
                 reuseMaps={false}
+                onLoad={() => {
+                  // Configure bounds for raster sources after map loads
+                  if (tileJSON) {
+                    configureMapBounds();
+                  }
+                }}
+                initialViewState={
+                  tileJSON?.center
+                    ? {
+                        longitude: tileJSON.center[0],
+                        latitude: tileJSON.center[1],
+                        zoom: tileJSON.center[2] ?? 0,
+                      }
+                    : undefined
+                }
+                minZoom={tileJSON?.minzoom}
+                maxZoom={tileJSON?.maxzoom}
+                maxBounds={
+                  tileJSON?.bounds
+                    ? [
+                        [tileJSON.bounds[0], tileJSON.bounds[1]],
+                        [tileJSON.bounds[2], tileJSON.bounds[3]],
+                      ]
+                    : undefined
+                }
                 style={{
                   height: '500px',
                   width: '100%',
@@ -91,6 +216,25 @@ export function TileInspectDialog({ name, source, onCloseAction }: TileInspectDi
                 onLoad={addInspectorToMap}
                 ref={mapRef}
                 reuseMaps={false}
+                initialViewState={
+                  tileJSON?.center
+                    ? {
+                        longitude: tileJSON.center[0],
+                        latitude: tileJSON.center[1],
+                        zoom: tileJSON.center[2] ?? 0,
+                      }
+                    : undefined
+                }
+                minZoom={tileJSON?.minzoom}
+                maxZoom={tileJSON?.maxzoom}
+                maxBounds={
+                  tileJSON?.bounds
+                    ? [
+                        [tileJSON.bounds[0], tileJSON.bounds[1]],
+                        [tileJSON.bounds[2], tileJSON.bounds[3]],
+                      ]
+                    : undefined
+                }
                 style={{
                   height: '500px',
                   width: '100%',
