Merge branch 'main' into task/WG-427-add-file-modal-to-point-cloud

TACC-Cloud · Feb 13, 2025 · 8289378 · 8289378
2 parents 4796013 + 0b9281a
commit 8289378
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 37 deletions.
diff --git a/react/src/components/AssetsPanel/AssetsPanel.module.css b/react/src/components/AssetsPanel/AssetsPanel.module.css
@@ -25,5 +25,5 @@
 
 .middleSection > div {
   flex: 1;
-  overflow: auto;
+  max-height: 95%;
 }
diff --git a/react/src/components/AssetsPanel/AssetsPanel.tsx b/react/src/components/AssetsPanel/AssetsPanel.tsx
@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import styles from './AssetsPanel.module.css';
 import FeatureFileTree from '@hazmapper/components/FeatureFileTree';
 import { FeatureCollection, Project, TapisFilePath } from '@hazmapper/types';
-import { Button } from '@tacc/core-components';
+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';
@@ -51,7 +52,11 @@ const DownloadFeaturesButton: React.FC<DownloadFeaturesButtonProps> = ({
   });
 
   return (
-    <Button isLoading={isDownloading} onClick={() => triggerDownload()}>
+    <Button
+      loading={isDownloading}
+      onClick={() => triggerDownload()}
+      type="primary"
+    >
       Export to GeoJSON
     </Button>
   );
@@ -95,30 +100,37 @@ const AssetsPanel: React.FC<Props> = ({
     setIsModalOpen(!isModalOpen);
   };
 
+  const { Content, Header, Footer } = Layout;
+
   return (
-    <div className={styles.root}>
-      <div className={styles.topSection}>
-        <FileBrowserModal
-          isOpen={isModalOpen}
-          toggle={toggleModal}
-          onImported={handleFileImport}
-          allowedFileExtensions={IMPORTABLE_FEATURE_TYPES}
-        />
-        <Button onClick={toggleModal} type="secondary" iconNameBefore="add">
-          Import from DesignSafe
-        </Button>
-      </div>
-      <div className={styles.middleSection}>
-        <FeatureFileTree
-          projectId={project.id}
-          isPublicView={isPublicView}
-          featureCollection={featureCollection}
-        />
-      </div>
-      <div className={styles.bottomSection}>
-        <DownloadFeaturesButton project={project} isPublicView={isPublicView} />
-      </div>
-    </div>
+    <>
+      <Flex vertical className={styles.root} flex={1}>
+        <Header className={styles.topSection}>
+          <Button onClick={toggleModal} icon={<PlusOutlined />}>
+            Import from DesignSafe
+          </Button>
+        </Header>
+        <Content className={styles.middleSection}>
+          <FeatureFileTree
+            projectId={project.id}
+            isPublicView={isPublicView}
+            featureCollection={featureCollection}
+          />
+        </Content>
+        <Footer className={styles.bottomSection}>
+          <DownloadFeaturesButton
+            project={project}
+            isPublicView={isPublicView}
+          />
+        </Footer>
+      </Flex>
+      <FileBrowserModal
+        isOpen={isModalOpen}
+        toggle={toggleModal}
+        onImported={handleFileImport}
+        allowedFileExtensions={IMPORTABLE_FEATURE_TYPES}
+      />
+    </>
   );
 };
 

diff --git a/react/src/components/Panel/Panel.tsx b/react/src/components/Panel/Panel.tsx
@@ -11,7 +11,7 @@ const Panel: React.FC<LayoutProps & { panelTitle: string }> = ({
 
   return (
     <Layout {...props}>
-      <Flex vertical className={styles.root}>
+      <Flex vertical className={styles.root} flex={1}>
         <Header className={styles.header}>{panelTitle}</Header>
         <Content>{children}</Content>
       </Flex>

diff --git a/react/src/pages/MapProject/MapProject.module.css b/react/src/pages/MapProject/MapProject.module.css
@@ -5,18 +5,11 @@
   height: 100vh;
 }
 
-.container {
+.basePanelContainer {
   height: calc(
-    100vh - var(--hazmapper-header-navbar-height) -
+    100% - var(--hazmapper-header-navbar-height) -
       var(--hazmapper-control-bar-height)
   );
-  width: 100%;
-  display: flex;
-  flex: 1;
-}
-
-.basePanelContainer {
-  height: 100%;
   background-color: var(--global-color-primary--xx-light);
   position: fixed;
   left: var(--hazmapper-panel-navbar-width);

diff --git a/react/src/pages/MapProject/MapProject.tsx b/react/src/pages/MapProject/MapProject.tsx
@@ -238,7 +238,6 @@ const LoadedMapProject: React.FC<LoadedMapProject> = ({
             <Sider width="auto">
               <Flex
                 style={{
-                  overflowY: 'auto',
                   height: '100%',
                 }}
               >