- Linting and asset style fixes

- Adds padding to questionnaire image caption - Adds better scrolling behavior to geometry table
TACC-Cloud · Jan 10, 2025 · e22a933 · e22a933
1 parent 5a575a4
commit e22a933
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 75 deletions.
diff --git a/react/src/__fixtures__/featuresFixture.ts b/react/src/__fixtures__/featuresFixture.ts
@@ -288,56 +288,46 @@ export const mockVideoFeature: Feature = {
   ],
 };
 
-export const mockQuestionnaireFeature : Feature = {
-  "id": 2466139,
-  "project_id": 94,
-  "type": "Feature",
-  "geometry": {
-    "type": "Point",
-    "coordinates": [
-      -122.306436952,
-      47.653046488
-    ]
+export const mockQuestionnaireFeature: Feature = {
+  id: 2466139,
+  project_id: 94,
+  type: 'Feature',
+  geometry: {
+    type: 'Point',
+    coordinates: [-122.306436952, 47.653046488],
   },
-  "properties": {
-    "_hazmapper": {
-      "questionnaire": {
-        "assets": [
+  properties: {
+    _hazmapper: {
+      questionnaire: {
+        assets: [
           {
-            "filename": "Q11-Photo-001.jpg",
-            "coordinates": [
-              -122.30645555555556,
-              47.65306388888889
-            ]
+            filename: 'Q11-Photo-001.jpg',
+            coordinates: [-122.30645555555556, 47.65306388888889],
           },
           {
-            "filename": "Q12-Photo-001.jpg",
-            "coordinates": [
-              -122.30648611111111,
-              47.65299722222222
-            ]
+            filename: 'Q12-Photo-001.jpg',
+            coordinates: [-122.30648611111111, 47.65299722222222],
           },
           {
-            "filename": "Q13-Photo-001.jpg",
-            "coordinates": [
-              -122.3064611111111,
-              47.652975
-            ]
-          }
-        ]
-      }
-    }
+            filename: 'Q13-Photo-001.jpg',
+            coordinates: [-122.3064611111111, 47.652975],
+          },
+        ],
+      },
+    },
   },
-  "styles": {},
-  "assets": [
+  styles: {},
+  assets: [
     {
-      "id": 2037094,
-      "path": "94/816c47f4-b34d-4a30-b0d8-e92b11ba100c",
-      "uuid": "816c47f4-b34d-4a30-b0d8-e92b11ba100c",
-      "asset_type": "questionnaire",
-      "original_path": "project-3891343857756007955-242ac117-0001-012/RApp/asif27/Home/GNSS Base Station Setup (Copy 1) 1690582474191.rqa/GNSS Base Station Setup (Copy 1) 1690582474191.rq",
-      "original_name": null,
-      "display_path": "project-3891343857756007955-242ac117-0001-012/RApp/asif27/Home/GNSS Base Station Setup (Copy 1) 1690582474191.rqa/GNSS Base Station Setup (Copy 1) 1690582474191.rq"
-    }
-  ]
-}
+      id: 2037094,
+      path: '94/816c47f4-b34d-4a30-b0d8-e92b11ba100c',
+      uuid: '816c47f4-b34d-4a30-b0d8-e92b11ba100c',
+      asset_type: 'questionnaire',
+      original_path:
+        'project-3891343857756007955-242ac117-0001-012/RApp/asif27/Home/GNSS Base Station Setup (Copy 1) 1690582474191.rqa/GNSS Base Station Setup (Copy 1) 1690582474191.rq',
+      original_name: null,
+      display_path:
+        'project-3891343857756007955-242ac117-0001-012/RApp/asif27/Home/GNSS Base Station Setup (Copy 1) 1690582474191.rqa/GNSS Base Station Setup (Copy 1) 1690582474191.rq',
+    },
+  ],
+};
diff --git a/react/src/components/AssetDetail/AssetDetail.module.css b/react/src/components/AssetDetail/AssetDetail.module.css
@@ -89,6 +89,7 @@ th {
 .caption {
   color: #1f5c7a;
   font-size: 0.8em;
+  padding-bottom: 0.8em;
 }
 .questionnaireImage {
   width: 100%;

diff --git a/react/src/components/AssetDetail/AssetDetail.test.tsx b/react/src/components/AssetDetail/AssetDetail.test.tsx
@@ -28,11 +28,7 @@ describe('AssetDetail', () => {
     const { getByText } = render(<AssetDetail {...AssetModalProps} />);
     const assetGeometry = screen.getByTestId('asset-geometry');
     await act(async () => {
-      render(
-        <AssetGeometry
-          selectedFeature={mockImgFeature}
-        />
-      );
+      render(<AssetGeometry selectedFeature={mockImgFeature} />);
     });
     // Check for title, button, and tables
     expect(getByText('Photo 4.jpg')).toBeDefined();

diff --git a/react/src/components/AssetDetail/AssetGeometry.tsx b/react/src/components/AssetDetail/AssetGeometry.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import _ from 'lodash';
 import * as turf from '@turf/turf';
 import { Feature, FeatureType } from '@hazmapper/types';
+import styles from './AssetDetail.module.css';
 
 interface AssetGeometryProps {
   selectedFeature: Feature;
@@ -18,7 +19,7 @@ const AssetGeometry: React.FC<AssetGeometryProps> = ({ selectedFeature }) => {
   const geometryType = selectedFeature.geometry.type;
 
   return (
-    <>
+    <div className={styles.metadataTable}>
       {geometryType === FeatureType.Point && (
         <table>
           <thead>
@@ -111,7 +112,7 @@ const AssetGeometry: React.FC<AssetGeometryProps> = ({ selectedFeature }) => {
           </tbody>
         </table>
       )}
-    </>
+    </div>
   );
 };
 

diff --git a/react/src/components/AssetDetail/AssetQuestionnaire.test.tsx b/react/src/components/AssetDetail/AssetQuestionnaire.test.tsx
@@ -14,22 +14,15 @@ jest.mock('antd', () => ({
   Carousel: forwardRef(({ children }: any, ref: any) => {
     // Assign the mock methods to the ref
     React.useImperativeHandle(ref, () => mockCarouselRef);
-    return (
-      <div data-testid="mock-carousel">
-        {children}
-      </div>
-    );
+    return <div data-testid="mock-carousel">{children}</div>;
   }),
   Space: ({ children }: any) => <div data-testid="mock-space">{children}</div>,
   Flex: ({ children }: any) => <div data-testid="mock-flex">{children}</div>,
 }));
 
 jest.mock('@tacc/core-components', () => ({
   Button: ({ children, onClick, iconNameBefore }: any) => (
-    <button 
-      onClick={onClick}
-      data-testid={`button-${iconNameBefore}`}
-    >
+    <button onClick={onClick} data-testid={`button-${iconNameBefore}`}>
       {iconNameBefore}
       {children}
     </button>
@@ -60,15 +53,24 @@ describe('AssetQuestionnaire', () => {
     });
 
     const images = screen.getAllByRole('img');
-    expect(images).toHaveLength(mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets.length);
-
-    mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets.forEach((asset, index) => {
-      const image = images[index];
-      const expectedPreviewPath = `${mockFeatureSource}/${asset.filename}`.replace(/\.([^.]+)$/, '.preview.$1');
-
-      expect(image.getAttribute('src')).toBe(expectedPreviewPath);
-      expect(image.getAttribute('alt')).toBe(asset.filename);
-    });
+    expect(images).toHaveLength(
+      mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets
+        .length
+    );
+
+    mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets.forEach(
+      (asset, index) => {
+        const image = images[index];
+        const expectedPreviewPath =
+          `${mockFeatureSource}/${asset.filename}`.replace(
+            /\.([^.]+)$/,
+            '.preview.$1'
+          );
+
+        expect(image.getAttribute('src')).toBe(expectedPreviewPath);
+        expect(image.getAttribute('alt')).toBe(asset.filename);
+      }
+    );
   });
 
   it('renders navigation buttons', async () => {
@@ -78,7 +80,7 @@ describe('AssetQuestionnaire', () => {
 
     const prevButton = screen.getByTestId('button-push-left');
     const nextButton = screen.getByTestId('button-push-right');
-    
+
     expect(prevButton).toBeTruthy();
     expect(nextButton).toBeTruthy();
   });
@@ -88,10 +90,12 @@ describe('AssetQuestionnaire', () => {
       setup();
     });
 
-    mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets.forEach((asset) => {
-      const caption = screen.getByText(asset.filename);
-      expect(caption).toBeTruthy();
-    });
+    mockQuestionnaireFeature?.properties?._hazmapper.questionnaire.assets.forEach(
+      (asset) => {
+        const caption = screen.getByText(asset.filename);
+        expect(caption).toBeTruthy();
+      }
+    );
   });
 
   it('handles carousel navigation', async () => {