Task/WG-260 add map control bar

react/jest.setup.ts

@@ -1,5 +1,5 @@
 import { testDevConfiguration } from '@hazmapper/__fixtures__/appConfigurationFixture';
-import { server } from '@hazmapper/test/testUtil';
+import { server, testQueryClient } from '@hazmapper/test/testUtil';
 
 /***** A) Setup the configuration used for unit testing *****/
 jest.mock('@hazmapper/hooks/environment/getLocalAppConfiguration', () => ({
@@ -52,6 +52,9 @@ export function shouldIgnoreError(args: any[]): boolean {
 /***** C) Setup testing and also ensure that we are mocking things in tests *****/
 
 beforeAll(() => {
+  // Uncomment next line to see all handlers
+  // console.log('Registered handlers:', server.listHandlers());
+
   // Establish mocking of APIs before all tests
   server.listen({
     onUnhandledRequest: 'error',
@@ -77,6 +80,11 @@ beforeAll(() => {
   });
 });
 
+// Clear the React Query cache before each test
+beforeEach(() => {
+  testQueryClient.clear();
+});
+
 // Reset any runtime request handlers we may add during the tests
 afterEach(() => server.resetHandlers());
 

react/src/__fixtures__/projectFixtures.ts

@@ -5,82 +5,80 @@ import {
   ProjectRequest,
 } from '../types';
 
+export const designSafeProjectMock: DesignSafeProject = {
+  uuid: 'proj-uuid',
+  name: 'designsafe.project',
+  created: '2019-10-31T16:04:26.327Z',
+  lastUpdated: '2019-10-31T16:04:30.163Z',
+  associationIds: [],
+  value: {
+    dois: [],
+    coPis: [],
+    title: 'Sample DesignSafe Project',
+    users: [
+      {
+        inst: 'University of Texas at Austin (utexas.edu)',
+        role: 'pi',
+        email: '[email protected]',
+        fname: 'Fixture First Name',
+        lname: 'Fixture Last Name',
+        username: 'fixture1Username',
+      },
+      {
+        inst: 'University of Texas at Austin (utexas.edu)',
+        role: 'co_pi',
+        email: '[email protected]',
+        fname: 'Tester',
+        lname: 'Test',
+        username: 'fixture2Username',
+      },
+    ],
+    authors: [],
+    frTypes: [],
+    nhEvent: '',
+    nhTypes: [],
+    fileObjs: [],
+    fileTags: [],
+    keywords: [],
+    nhEvents: [],
+    dataTypes: [],
+    projectId: 'proj-id',
+    tombstone: false,
+    facilities: [],
+    nhLatitude: '',
+    nhLocation: '',
+    description: 'Map Test description required.',
+    nhLongitude: '',
+    projectType: 'None',
+    teamMembers: [],
+    awardNumbers: [],
+    guestMembers: [],
+    hazmapperMaps: [
+      {
+        name: 'Hazmapper_TestProject',
+        path: '/',
+        uuid: '620aeaf4-f813-4b90-ba52-bc87cfa7b07b',
+        deployment: 'production',
+      },
+    ],
+    referencedData: [],
+    associatedProjects: [],
+  },
+};
+
 export const projectMock: Project = {
   id: 1,
   uuid: 'abc123',
   name: 'Sample Project',
   description: 'A sample project for testing purposes.',
   public: true,
   system_file: 'sample-file',
-  system_id: 'sample-id',
+  system_id:
+    'project-1234' /* 'project-' prefix implies its a DesignSafe project system */,
   system_path: '/path/to/sample',
   deletable: true,
   streetview_instances: null,
-  ds_project: {
-    uuid: 'proj-uuid',
-    projectId: 'proj-id',
-    title: 'Sample DesignSafe Project',
-    value: {
-      dois: [],
-      coPis: [],
-      title: 'Hazmapper V3 PROD Map Test 2024.08.07',
-      users: [
-        {
-          inst: 'University of Texas at Austin (utexas.edu)',
-          role: 'pi',
-          email: '[email protected]',
-          fname: 'Fixture First Name',
-          lname: 'Fixture Last Name',
-          username: 'fixture1Username',
-        },
-        {
-          inst: 'University of Texas at Austin (utexas.edu)',
-          role: 'co_pi',
-          email: '[email protected]',
-          fname: 'Tester',
-          lname: 'Test',
-          username: 'fixture2Username',
-        },
-      ],
-      authors: [],
-      frTypes: [],
-      nhEvent: '',
-      nhTypes: [],
-      fileObjs: [],
-      fileTags: [],
-      keywords: [],
-      nhEvents: [],
-      dataTypes: [],
-      projectId: 'PRJ-5566',
-      tombstone: false,
-      facilities: [],
-      nhLatitude: '',
-      nhLocation: '',
-      description: 'Map Test description required.',
-      nhLongitude: '',
-      projectType: 'None',
-      teamMembers: [],
-      awardNumbers: [],
-      guestMembers: [],
-      hazmapperMaps: [
-        {
-          name: 'Hazmapper_TestProject',
-          path: '/',
-          uuid: '620aeaf4-f813-4b90-ba52-bc87cfa7b07b',
-          deployment: 'production',
-        },
-      ],
-      referencedData: [],
-      associatedProjects: [],
-    },
-  },
-};
-
-export const designSafeProjectMock: DesignSafeProject = {
-  uuid: 'proj-uuid',
-  projectId: 'proj-id',
-  title: 'Sample DesignSafe Project',
-  value: {},
+  ds_project: designSafeProjectMock,
 };
 
 export const designSafeProjectCollectionMock: DesignSafeProjectCollection = {

react/src/__fixtures__/usersFixtures.ts

@@ -0,0 +1 @@
+export const users = [{ id: 1, username: 'user' }];

react/src/components/FeatureFileTree/FeatureFileTree.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, waitFor, act } from '@testing-library/react';
 import { http, HttpResponse } from 'msw';
 import FeatureFileTree from './FeatureFileTree';
 import { server, renderInTest } from '@hazmapper/test/testUtil';
@@ -24,11 +24,13 @@ describe('FeatureFileTree', () => {
     jest.clearAllMocks();
   });
 
-  it('renders feature list correctly', () => {
-    const { getByText } = renderInTest(
-      <FeatureFileTree {...defaultTreeProps} />
-    );
+  it('renders feature list correctly', async () => {
+    let rendered;
+    await act(async () => {
+      rendered = renderInTest(<FeatureFileTree {...defaultTreeProps} />);
+    });
 
+    const { getByText } = rendered;
     expect(getByText('foo')).toBeDefined();
     expect(getByText('image1.JPG')).toBeDefined();
     expect(getByText('image2.JPG')).toBeDefined();
@@ -48,37 +50,51 @@ describe('FeatureFileTree', () => {
       )
     );
 
-    const { getByTestId } = renderInTest(
-      <FeatureFileTree {...defaultTreeProps} />,
-      `/?selectedFeature=${featureId}`
-    );
+    let rendered;
+    await act(async () => {
+      rendered = renderInTest(
+        <FeatureFileTree {...defaultTreeProps} />,
+        `/?selectedFeature=${featureId}`
+      );
+    });
 
     // Find and click delete button (as featured is selected)
+    const { getByTestId } = rendered;
     const deleteButton = getByTestId('delete-feature-button');
-    fireEvent.click(deleteButton);
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
 
     await waitFor(() => {
       expect(wasDeleted).toBeTruthy();
     });
   });
 
-  it('does not show delete button for public projects', () => {
-    const { queryByTestId } = renderInTest(
-      <FeatureFileTree {...defaultTreeProps} isPublicView={true} />,
-      '/?selectedFeature=1'
-    );
+  it('does not show delete button for public projects', async () => {
+    let rendered;
+    await act(async () => {
+      rendered = renderInTest(
+        <FeatureFileTree {...defaultTreeProps} isPublicView={true} />,
+        '/?selectedFeature=1'
+      );
+    });
 
     // Verify delete button is not present
+    const { queryByTestId } = rendered;
     const deleteButton = queryByTestId('delete-feature-button');
     expect(deleteButton).toBeNull();
   });
 
-  it('does not show delete button when no feature is selected', () => {
-    const { queryByTestId } = renderInTest(
-      <FeatureFileTree {...defaultTreeProps} isPublicView={false} />
-    );
+  it('does not show delete button when no feature is selected', async () => {
+    let rendered;
+    await act(async () => {
+      rendered = renderInTest(
+        <FeatureFileTree {...defaultTreeProps} isPublicView={false} />
+      );
+    });
 
     // Verify delete button is not present
+    const { queryByTestId } = rendered;
     const deleteButton = queryByTestId('delete-feature-button');
     expect(deleteButton).toBeNull();
   });

react/src/components/Map/Map.test.tsx

@@ -3,10 +3,16 @@ import { renderInTest } from '@hazmapper/test/testUtil';
 import Map from './Map';
 import { tileServerLayers } from '../../__fixtures__/tileServerLayerFixture';
 import { featureCollection } from '../../__fixtures__/featuresFixture';
+import { MapPositionProvider } from '@hazmapper/context/MapContext';
 
 test('renders map', () => {
   const { getByText } = renderInTest(
-    <Map baseLayers={tileServerLayers} featureCollection={featureCollection} />
+    <MapPositionProvider>
+      <Map
+        baseLayers={tileServerLayers}
+        featureCollection={featureCollection}
+      />
+    </MapPositionProvider>
   );
   expect(getByText(/Map/)).toBeDefined();
 });

react/src/components/Map/Map.tsx

@@ -20,6 +20,7 @@ import {
 import { useFeatureSelection } from '@hazmapper/hooks';
 import { MAP_CONFIG } from './config';
 import FitBoundsHandler from './FitBoundsHandler';
+import PositionTracker from './PositionTracker';
 import { createMarkerIcon, createClusterIcon } from './markerCreators';
 import { calculatePointCloudMarkerPosition } from './utils';
 
@@ -60,15 +61,15 @@ const LeafletMap: React.FC<LeafletMapProps> = ({
   baseLayers = [],
   featureCollection,
 }) => {
-  const { selectedFeatureId, setSelectedFeatureId } = useFeatureSelection();
+  const { setSelectedFeatureId } = useFeatureSelection();
 
   const handleFeatureClick = useCallback(
     (feature: any) => {
       setSelectedFeatureId(feature.id);
 
       //TODO handle clicking on streetview https://tacc-main.atlassian.net/browse/WG-392
     },
-    [selectedFeatureId]
+    [setSelectedFeatureId]
   );
 
   const activeBaseLayers = useMemo(
@@ -81,19 +82,19 @@ const LeafletMap: React.FC<LeafletMapProps> = ({
     streetviewFeatures: Feature[];
   }
 
-  // Initial accumulator state
-  const initialAccumulator: FeatureAccumulator = {
-    generalGeoJsonFeatures: [],
-    markerFeatures: [],
-    streetviewFeatures: [],
-  };
-
   const {
     generalGeoJsonFeatures,
     markerFeatures,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     streetviewFeatures /* Add streetview support https://tacc-main.atlassian.net/browse/WG-392 */,
   } = useMemo(() => {
+    // Initial accumulator state
+    const initialAccumulator: FeatureAccumulator = {
+      generalGeoJsonFeatures: [],
+      markerFeatures: [],
+      streetviewFeatures: [],
+    };
+
     return featureCollection.features.reduce<FeatureAccumulator>(
       (accumulator, feature: Feature) => {
         if (feature.geometry.type === FeatureType.Point) {
@@ -203,6 +204,7 @@ const LeafletMap: React.FC<LeafletMapProps> = ({
       {/* Handles zooming to a specific feature or to all features */}
       <FitBoundsHandler featureCollection={featureCollection} />
       <ZoomControl position="bottomright" />
+      <PositionTracker />
     </MapContainer>
   );
 };

react/src/components/Map/PositionTracker.tsx

@@ -0,0 +1,13 @@
+import { useMapMousePositionWriter } from '@hazmapper/hooks';
+
+/**
+ * Component that tracks mouse position on a Leaflet map
+ * Must be used inside a react-leaflet's MapContainer to write position state
+ * Position can be read elsewhere using useMapMousePosition hook
+ */
+const PositionTracker = () => {
+  useMapMousePositionWriter();
+  return null;
+};
+
+export default PositionTracker;