task/WG-427: add file modal to point cloud (#317)

* Put supported file types in one place * Use FileBrowserModal for point clouds --------- Co-authored-by: Sal Tijerina <[email protected]>
TACC-Cloud · Feb 13, 2025 · 6d52a02 · 6d52a02
1 parent 0b9281a
commit 6d52a02
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 32 deletions.
diff --git a/react/src/components/AssetsPanel/AssetsPanel.tsx b/react/src/components/AssetsPanel/AssetsPanel.tsx
@@ -5,6 +5,7 @@ import { FeatureCollection, Project, TapisFilePath } from '@hazmapper/types';
 import { Flex, Layout, Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import { useFeatures, useImportFeature } from '@hazmapper/hooks';
+import { IMPORTABLE_FEATURE_TYPES } from '@hazmapper/utils/fileUtils';
 import FileBrowserModal from '../FileBrowserModal/FileBrowserModal';
 
 const getFilename = (projectName: string) => {
@@ -99,17 +100,6 @@ const AssetsPanel: React.FC<Props> = ({
     setIsModalOpen(!isModalOpen);
   };
 
-  const allowedFileExtensions = [
-    'shp',
-    'jpg',
-    'jpeg',
-    'json',
-    'geojson',
-    'gpx',
-    'rq',
-    'png',
-  ];
-
   const { Content, Header, Footer } = Layout;
 
   return (
@@ -138,7 +128,7 @@ const AssetsPanel: React.FC<Props> = ({
         isOpen={isModalOpen}
         toggle={toggleModal}
         onImported={handleFileImport}
-        allowedFileExtensions={allowedFileExtensions}
+        allowedFileExtensions={IMPORTABLE_FEATURE_TYPES}
       />
     </>
   );

diff --git a/react/src/components/PointCloudsPanel/PointCloudPanelButtons.tsx b/react/src/components/PointCloudsPanel/PointCloudPanelButtons.tsx
@@ -3,12 +3,14 @@ interface DeletePointCloudButtonProps {
   pointCloudId: number;
 }
 
-import React from 'react';
+import React, { useState } from 'react';
 import { Button } from 'antd';
 import { UploadOutlined, DeleteOutlined } from '@ant-design/icons';
 
-import { PointCloud } from '@hazmapper/types';
+import { PointCloud, TapisFilePath } from '@hazmapper/types';
+import FileBrowserModal from '../FileBrowserModal/FileBrowserModal';
 import { useDeletePointCloud, useImportPointCloudFile } from '@hazmapper/hooks';
+import { IMPORTABLE_POINT_CLOUD_TYPES } from '@hazmapper/utils/fileUtils';
 
 interface UploadPointCloudButtonProps {
   pointCloud: PointCloud;
@@ -17,31 +19,36 @@ interface UploadPointCloudButtonProps {
 export const UploadPointCloudButton: React.FC<UploadPointCloudButtonProps> = ({
   pointCloud,
 }) => {
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const { mutate: addPointCloudFile } = useImportPointCloudFile({
     projectId: pointCloud.project_id,
     pointCloudId: pointCloud.id,
   });
 
-  const handleAddFile = () => {
-    console.log('TODO: Opening file browser for point cloud:', pointCloud.id);
-    addPointCloudFile({
-      files: [
-        {
-          system: 'project-4072868216578445806-242ac117-0001-012',
-          path: 'point_clouds_good/red-rocks.laz',
-        },
-      ],
-    });
+  const handleFileImport = (files: TapisFilePath[]) => {
+    addPointCloudFile({ files });
+    setIsModalOpen(false);
   };
+
   return (
-    <Button
-      data-testid={`upload-point-cloud-${pointCloud.id}`}
-      size="small"
-      icon={<UploadOutlined />}
-      onClick={() => handleAddFile()}
-    >
-      Add las/laz
-    </Button>
+    <>
+      <Button
+        data-testid={`upload-point-cloud-${pointCloud.id}`}
+        size="small"
+        icon={<UploadOutlined />}
+        onClick={() => setIsModalOpen(true)}
+      >
+        Add las/laz
+      </Button>
+      {isModalOpen && (
+        <FileBrowserModal
+          isOpen={isModalOpen}
+          toggle={() => setIsModalOpen(false)}
+          onImported={handleFileImport}
+          allowedFileExtensions={IMPORTABLE_POINT_CLOUD_TYPES}
+        />
+      )}
+    </>
   );
 };
 

diff --git a/react/src/utils/fileUtils.ts b/react/src/utils/fileUtils.ts
@@ -1,6 +1,28 @@
 import { FileData } from 'chonky';
 import { TapisFilePath, File } from '@hazmapper/types';
 
+export const IMPORTABLE_FEATURE_TYPES = [
+  'shp',
+  'jpg',
+  'jpeg',
+  'json',
+  'geojson',
+  'gpx',
+  'rq',
+];
+
+export const IMPORTABLE_FEATURE_ASSET_TYPES = [
+  'jpeg',
+  'jpg',
+  'png',
+  'mp4',
+  'mov',
+  'mpeg4',
+  'webm',
+];
+
+export const IMPORTABLE_POINT_CLOUD_TYPES = ['las', 'laz'];
+
 export const serializeToChonkyFile = (
   file: File,
   allowedFileExtensions: string[]