feat: allow uploading netCDF, AMR and model files.

DARPA-ASKEM · Feb 16, 2024 · 6e10df3 · 6e10df3
1 parent 7b1328d
commit 6e10df3
Show file tree

Hide file tree

Showing 16 changed files with 872 additions and 76 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -9,29 +9,29 @@
       "request": "launch",
       "name": "HMI Client",
       "runtimeExecutable": "yarn",
-      "cwd": "${workspaceFolder}/packages/client",
+      "cwd": "${workspaceFolder}/packages/client/hmi-client",
       "runtimeArgs": ["dev"],
       // Run vite dev server using `yarn dev` and then luanch the chrome browser
       "serverReadyAction": {
         "action": "debugWithChrome",
         "pattern": "Local:[ ]+http://.+:([0-9]+)",
         "uriFormat": "http://localhost:%s",
-        "webRoot": "${workspaceFolder}/packages/client"
+        "webRoot": "${workspaceFolder}/packages/client/hmi-client/src"
       }
     },
     {
       "type": "node",
       "request": "launch",
       "name": "HMI Client (Local)",
       "runtimeExecutable": "yarn",
-      "cwd": "${workspaceFolder}/packages/client",
+      "cwd": "${workspaceFolder}/packages/client/hmi-client",
       "runtimeArgs": ["local"],
       // Run vite dev server using `yarn local` and then luanch the chrome browser
       "serverReadyAction": {
         "action": "debugWithChrome",
         "pattern": "Local:[ ]+http://.+:([0-9]+)",
         "uriFormat": "http://localhost:%s",
-        "webRoot": "${workspaceFolder}/packages/client"
+        "webRoot": "${workspaceFolder}/packages/client/hmi-client/src"
       }
     },
     {

diff --git a/packages/client/hmi-client/src/components/extracting/tera-drag-n-drop-importer.vue b/packages/client/hmi-client/src/components/extracting/tera-drag-n-drop-importer.vue
@@ -12,7 +12,7 @@
 				ref="fileInput"
 				@change="onFileChange"
 				multiple
-				accept=".pdf,.csv,.txt,.md,.py,.m,.js,.R"
+				:accept="fileInputAcceptedExtensions"
 				class="hidden-input"
 			/>
 			<label for="fileInput" class="file-label">
@@ -21,9 +21,10 @@
 					<div>Release mouse button to add files to import</div>
 				</div>
 				<div v-else class="drop-zone">
-					<div><i class="pi pi-file" style="font-size: 2.5rem" /></div>
+					<div><i class="pi pi-upload" style="font-size: 2.5rem" /></div>
 					<div>
-						Drop resources here or <span class="text-link">click to open a file browser</span>
+						Drop resources here <br />
+						or <span class="text-link">click to open a file browser</span>
 					</div>
 				</div>
 			</label>
@@ -45,7 +46,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import API from '@/api/api';
 import { AcceptedExtensions, AcceptedTypes } from '@/types/common';
 import TeraDragAndDropFilePreviewer from './tera-drag-n-drop-file-previewer.vue';
@@ -69,29 +70,13 @@ const props = defineProps({
 		type: Array<AcceptedTypes>,
 		required: true,
 		validator: (value: Array<string>) =>
-			[
-				AcceptedTypes.PDF,
-				AcceptedTypes.CSV,
-				AcceptedTypes.TXT,
-				AcceptedTypes.MD,
-				AcceptedTypes.PY,
-				AcceptedTypes.R,
-				AcceptedTypes.JL
-			].every((v) => value.includes(v))
+			Object.values(AcceptedTypes).every((v) => value.includes(v))
 	},
 	acceptExtensions: {
 		type: Array<AcceptedExtensions>,
 		required: true,
 		validator: (value: Array<string>) =>
-			[
-				AcceptedExtensions.PDF,
-				AcceptedExtensions.CSV,
-				AcceptedExtensions.TXT,
-				AcceptedExtensions.MD,
-				AcceptedExtensions.PY,
-				AcceptedExtensions.R,
-				AcceptedExtensions.JL
-			].every((v) => value.includes(v))
+			Object.values(AcceptedExtensions).every((v) => value.includes(v))
 	},
 	// custom import action can be passed in as prop
 	importAction: {
@@ -121,6 +106,10 @@ const props = defineProps({
 	}
 });
 
+const fileInputAcceptedExtensions = computed(() =>
+	props.acceptExtensions.map((v) => `.${v}`).join(',')
+);
+
 /**
  * Add file event
  * @param {File[]|undefined} addedFiles
@@ -254,12 +243,14 @@ watch(
 
 .file-label {
 	font-size: var(--font-body-small);
-	display: flex;
 	flex-direction: column;
 	cursor: pointer;
 	align-items: center;
 	padding: 2.5rem 0 2.5rem 0;
 }
+label.file-label {
+	display: flex;
+}
 
 .text-link {
 	color: var(--primary-color);

diff --git a/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue b/packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
@@ -30,6 +30,9 @@
 			</div>
 			<slot name="tab"></slot>
 		</template>
+		<template v-if="$slots.footerButtons" v-slot:footerButtons>
+			<slot name="footerButtons"></slot>
+		</template>
 	</tera-slider>
 </template>
 

diff --git a/packages/client/hmi-client/src/components/widgets/tera-slider.vue b/packages/client/hmi-client/src/components/widgets/tera-slider.vue
@@ -62,7 +62,8 @@ const sidePanelTabStyle = computed(
 <style scoped>
 .slider,
 .slider-content,
-.slider-tab {
+.slider-tab,
+footer {
 	transition: all 0.2s ease-out;
 }
 
@@ -85,7 +86,8 @@ const sidePanelTabStyle = computed(
 }
 
 .slider.open .slider-tab,
-.slider.closed .slider-content {
+.slider.closed .slider-content,
+.slider.closed footer {
 	visibility: hidden;
 	opacity: 0;
 }
@@ -104,12 +106,14 @@ footer:empty {
 
 footer {
 	position: relative;
+	overflow: hidden;
 	border-top: 1px solid var(--surface-border-light);
 	box-shadow: 0px -4px 8px -7px #b8b8b8;
 	background-color: var(--surface-section);
 	height: 5rem;
 	width: 100%;
 	display: flex;
 	align-items: center;
+	justify-content: space-evenly;
 }
 </style>
diff --git a/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue b/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue
@@ -16,7 +16,7 @@
 					<i class="pi pi-filter"></i>
 				</span>
 			</div>
-			<!-- 			
+			<!--
 			<SplitButton
 				class="new-resource-button"
 				label="New"
@@ -159,17 +159,6 @@
 				</Button>
 			</AccordionTab>
 		</Accordion>
-		<!-- This is the upload button, fixed at the bottom of the panel -->
-		<div class="fixed-upload-button">
-			<Button
-				label="Upload resources"
-				size="small"
-				icon="pi pi-cloud-upload"
-				severity="primary"
-				class="w-full"
-				@click="isUploadResourcesModalVisible = true"
-			/>
-		</div>
 
 		<div v-if="useProjects().projectLoading.value" class="skeleton-container">
 			<Skeleton v-for="i in 10" :key="i" width="85%" />
@@ -199,10 +188,6 @@
 			</tera-modal>
 		</Teleport>
 	</nav>
-	<tera-upload-resources-modal
-		:visible="isUploadResourcesModalVisible"
-		@close="isUploadResourcesModalVisible = false"
-	/>
 </template>
 
 <script setup lang="ts">
@@ -223,7 +208,6 @@ import InputText from 'primevue/inputtext';
 // import Menu from 'primevue/menu';
 import Skeleton from 'primevue/skeleton';
 import { computed, ref } from 'vue';
-import TeraUploadResourcesModal from './tera-upload-resources-modal.vue';
 
 defineProps<{
 	pageType: ProjectPages | AssetType;
@@ -306,8 +290,6 @@ function endDrag() {
 // const toggleOptionsMenu = (event) => {
 // 	optionsMenu.value.toggle(event);
 // };
-
-const isUploadResourcesModalVisible = ref(false);
 </script>
 
 <style scoped>
@@ -400,15 +382,6 @@ header {
 	border-radius: var(--border-radius);
 }
 
-.fixed-upload-button {
-	position: fixed;
-	bottom: 3rem;
-	left: 0;
-	z-index: 10;
-	width: 240px;
-	white-space: nowrap;
-	padding: 0rem 1rem 1rem;
-}
 :deep(.p-accordion .p-accordion-content) {
 	display: flex;
 	flex-direction: column;