@geode/opengeodeweb-front 10.40.0-rc.1 → 10.40.0-rc.2

package/app/components/DragAndDrop.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
 import DragAndDropInline from "./DragAndDropInternal/DragAndDropInline.vue";
 import DragAndDropOverlay from "./DragAndDropInternal/DragAndDropOverlay.vue";
+import type { UploadFile } from "@ogw_front/utils/upload_path";
 
 interface DragAndDropTexts {
   idle: string;
@@ -18,6 +18,7 @@ interface Props {
   inline?: boolean;
   showOverlay?: boolean;
   texts?: DragAndDropTexts;
+  directory?: boolean;
 }
 
 const {
@@ -33,10 +34,20 @@ const {
     drop: "Drop files here",
     loading: "Loading...",
   },
+  directory = false,
+  // oxlint-disable-next-line vue/max-props
 } = defineProps<Props>();
 
+const displayed_texts = computed<DragAndDropTexts>(() =>
+  directory
+    ? { ...texts, idle: "Click or drag and drop a folder", drop: "Drop the folder here" }
+    : texts,
+);
+
 const emit = defineEmits<{
-  "files-selected": [files: File[]];
+  "files-selected": [files: UploadFile[]];
+  "folders-ignored": [];
+  "folder-read-error": [message: string];
 }>();
 
 const isDragging = ref(false);
@@ -115,10 +126,70 @@ function onDragOver(event: DragEvent): void {
   }
 }
 
+async function readAllEntries(reader: FileSystemDirectoryReader): Promise<FileSystemEntry[]> {
+  // oxlint-disable-next-line promise/avoid-new
+  const batch = await new Promise<FileSystemEntry[]>((resolve, reject) => {
+    reader.readEntries(resolve, reject);
+  });
+  if (batch.length === 0) {
+    return [];
+  }
+  return [...batch, ...(await readAllEntries(reader))];
+}
+
+async function filesFromEntry(entry: FileSystemEntry, path: string): Promise<UploadFile[]> {
+  if (entry.isFile) {
+    // oxlint-disable-next-line promise/avoid-new
+    const file = await new Promise<File>((resolve, reject) => {
+      // oxlint-disable-next-line no-unsafe-type-assertion -- isFile guarantees a FileSystemFileEntry
+      (entry as FileSystemFileEntry).file(resolve, reject);
+    });
+    return [Object.assign(file, { relativePath: path })];
+  }
+  // oxlint-disable-next-line no-unsafe-type-assertion -- not a file, so a FileSystemDirectoryEntry
+  const children = await readAllEntries((entry as FileSystemDirectoryEntry).createReader());
+  const nested = await Promise.all(
+    children.map((child) => filesFromEntry(child, `${path}/${child.name}`)),
+  );
+  return nested.flat();
+}
+
+async function emitDroppedEntries(entries: FileSystemEntry[]): Promise<void> {
+  try {
+    const groups = await Promise.all(
+      entries.map(async (entry) => {
+        const files = await filesFromEntry(entry, entry.name);
+        // Files inside a dropped folder are all needed: never filtered out.
+        return entry.isDirectory ? files : files.filter((file) => isFileAccepted(file, accept));
+      }),
+    );
+    const files = groups.flat();
+    if (files.length > 0) {
+      emit("files-selected", files);
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    emit("folder-read-error", message);
+  }
+}
+
 function onDrop(event: DragEvent): void {
   event.preventDefault();
   dragCounter.value = 0;
   isDragging.value = false;
+  // Entries must be read synchronously: the DataTransfer is emptied once the event returns.
+  const entries = [...(event.dataTransfer?.items ?? [])]
+    .map((item) => item.webkitGetAsEntry?.())
+    .filter((entry): entry is FileSystemEntry => entry !== null && entry !== undefined);
+  if (entries.some((entry) => entry.isDirectory)) {
+    if (directory) {
+      void emitDroppedEntries(entries);
+      return;
+    }
+    emit("folders-ignored");
+    void emitDroppedEntries(entries.filter((entry) => entry.isFile));
+    return;
+  }
   const files = [...(event.dataTransfer?.files ?? [])].filter((file) =>
     isFileAccepted(file, accept),
   );
@@ -181,7 +252,7 @@ defineExpose({ triggerFileDialog });
     v-if="inline"
     :is-dragging
     :loading
-    :texts
+    :texts="displayed_texts"
     :accept
     :show-extensions
     @click="triggerFileDialog"
@@ -193,13 +264,21 @@ defineExpose({ triggerFileDialog });
     :show-overlay
     :fullscreen
     :loading
-    :texts
+    :texts="displayed_texts"
     :multiple
     :accept
     :show-extensions
   />
 
-  <input ref="fileInput" type="file" class="d-none" :multiple :accept @change="handleFileSelect" />
+  <input
+    ref="fileInput"
+    type="file"
+    class="d-none"
+    :multiple
+    :accept
+    :webkitdirectory="directory"
+    @change="handleFileSelect"
+  />
 </template>
 
 <style>

package/app/components/FileSelector.vue

@@ -8,7 +8,7 @@ import { useBackStore } from "@ogw_front/stores/back";
 const schema = schemas.opengeodeweb_back.allowed_files;
 
 interface Emits {
-  update_values: [values: { files: unknown[]; autoUpload: boolean }];
+  update_values: [values: { files: unknown[]; autoUpload: boolean; time_series?: string[] }];
   increment_step: [];
   decrement_step: [];
 }
@@ -20,13 +20,21 @@ interface Props {
   files?: File[];
   autoUpload?: boolean;
   showOverlay?: boolean;
+  timeSeries?: boolean;
 }
 
-const { multiple, files = [], autoUpload = true, showOverlay = true } = defineProps<Props>();
+const {
+  multiple,
+  files = [],
+  autoUpload = true,
+  showOverlay = true,
+  timeSeries = false,
+} = defineProps<Props>();
 
 const internal_files = ref<File[]>(files);
 const internal_auto_upload = ref<boolean>(autoUpload);
 const accept = ref<string>("");
+const time_series = ref<string[]>([]);
 const loading = ref<boolean>(false);
 
 watch(
@@ -47,7 +55,12 @@ const toggle_loading = useToggle(loading);
 
 function files_uploaded_event(value: unknown[]): void {
   if (value.length > 0) {
-    emit("update_values", { files: value, autoUpload: false });
+    emit(
+      "update_values",
+      timeSeries
+        ? { files: value, autoUpload: false, time_series: time_series.value }
+        : { files: value, autoUpload: false },
+    );
     emit("increment_step");
   }
 }
@@ -56,7 +69,10 @@ async function get_allowed_files(): Promise<void> {
   toggle_loading();
   const backStore = useBackStore();
   const response = await backStore.request({ schema });
-  accept.value = response.extensions.map((extension) => `.${extension}`).join(",");
+  time_series.value = timeSeries ? response.time_series_extensions : [];
+  accept.value = [...response.data_extensions, ...time_series.value]
+    .map((extension) => `.${extension}`)
+    .join(",");
   toggle_loading();
 }
 

package/app/components/FileUploader.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import { foldersIgnoredWarning } from "@ogw_front/utils/upload_path";
 import { useBackStore } from "@ogw_front/stores/back";
+import { useFeedbackStore } from "@ogw_front/stores/feedback";
 
 import CsvPreviewer from "@ogw_front/components/csv-preview/CsvPreviewer.vue";
 import DragAndDrop from "@ogw_front/components/DragAndDrop.vue";
@@ -72,6 +74,10 @@ async function onCsvConfirm(result: unknown): Promise<void> {
   csv_dialog.value = false;
 }
 
+function warnFoldersIgnored(): void {
+  useFeedbackStore().add_warning(foldersIgnoredWarning);
+}
+
 function processSelectedFiles(selected_files: UploadFile[]): void {
   if (multiple) {
     internal_files.value = [...internal_files.value, ...selected_files];
@@ -154,6 +160,7 @@ watch(
       :accept
       :inline="false"
       @files-selected="processSelectedFiles"
+      @folders-ignored="warnFoldersIgnored"
     />
   </template>
   <DragAndDrop
@@ -166,6 +173,7 @@ watch(
     :inline="!internal_files.length"
     :show-overlay="showOverlay"
     @files-selected="processSelectedFiles"
+    @folders-ignored="warnFoldersIgnored"
   />
 
   <v-card-text v-if="internal_files.length" class="mt-6 pa-0">

package/app/components/MissingFilesSelector.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
 
+import { matchExpectedFiles, uploadPath } from "@ogw_front/utils/upload_path";
+import DragAndDrop from "@ogw_front/components/DragAndDrop.vue";
 import FetchingData from "@ogw_front/components/FetchingData.vue";
 import FileUploader from "@ogw_front/components/FileUploader.vue";
 import { useBackStore } from "@ogw_front/stores/back";
+import { useFeedbackStore } from "@ogw_front/stores/feedback";
 
 // Files carry extra app-specific bookkeeping fields once picked up here.
-type UploadFile = File & { isConfigured?: boolean };
+type UploadFile = File & { isConfigured?: boolean; relativePath?: string };
 interface FilePlan {
   has_missing_files: boolean;
   mandatory_files: string[];
   additional_files: string[];
 }
 
-const schema = schemas.opengeodeweb_back.missing_files;
+const schema = schemas.opengeodeweb_back.data_missing_files;
+const time_series_schema = schemas.opengeodeweb_back.time_series_missing_files;
 
 interface Emits {
   update_values: [value: { additional_files: UploadFile[] }];
@@ -28,9 +32,16 @@ interface Props {
   geodeObjectType: string;
   filenames: string[];
   files?: UploadFile[];
+  timeSeries?: boolean;
 }
 
-const { multiple, geodeObjectType, filenames, files = [] } = defineProps<Props>();
+const {
+  multiple,
+  geodeObjectType,
+  filenames,
+  files = [],
+  timeSeries = false,
+} = defineProps<Props>();
 
 const accept = ref<string>("");
 const loading = ref<boolean>(false);
@@ -38,6 +49,7 @@ const has_missing_files = ref<boolean>(false);
 const mandatory_files = ref<string[]>([]);
 const additional_files = ref<string[]>([]);
 const toggle_loading = useToggle(loading);
+const uploading = ref<boolean>(false);
 
 function files_uploaded_event(value: UploadFile[]): void {
   emit("update_values", { additional_files: value });
@@ -63,6 +75,9 @@ async function missing_files(): Promise<void> {
         additional_files: [],
       });
     }
+    if (timeSeries) {
+      return backStore.request({ schema: time_series_schema, params: { filename } });
+    }
     const params = { geode_object_type: geodeObjectType, filename };
     return backStore.request({ schema, params });
   });
@@ -88,12 +103,61 @@ async function missing_files(): Promise<void> {
   toggle_loading();
 }
 
+// Time series: uploads the missing files found in the selected folder, then the files they
+// Reference in turn, until nothing is missing. The folder layout does not matter.
+async function upload_missing_from(
+  folder_files: UploadFile[],
+  uploaded: UploadFile[],
+): Promise<void> {
+  const expected = [...mandatory_files.value, ...additional_files.value];
+  const match = matchExpectedFiles(
+    folder_files.map((file) => uploadPath(file)),
+    expected,
+  );
+  if (match.status === "ambiguous") {
+    useFeedbackStore().add_warning(
+      `Several matching files for ${match.path}, select a more specific folder`,
+    );
+    return;
+  }
+  const found = expected.flatMap((expected_path, index) => {
+    const file = folder_files[match.indices[index] ?? -1];
+    return file && !uploaded.includes(file)
+      ? [Object.assign(file, { relativePath: expected_path })]
+      : [];
+  });
+  if (found.length === 0) {
+    useFeedbackStore().add_warning(`The selected folder does not contain: ${expected.join(", ")}`);
+    return;
+  }
+  const backStore = useBackStore();
+  await Promise.all(found.map((file) => backStore.upload(file)));
+  emit("update_values", { additional_files: [...uploaded, ...found] });
+  await missing_files();
+  if (has_missing_files.value) {
+    await upload_missing_from(folder_files, [...uploaded, ...found]);
+  }
+}
+
+async function upload_folder(folder_files: UploadFile[]): Promise<void> {
+  uploading.value = true;
+  try {
+    await upload_missing_from(folder_files, []);
+  } finally {
+    uploading.value = false;
+  }
+}
+
+function warn_folder_read_error(message: string): void {
+  useFeedbackStore().add_warning(`Could not read the dropped folder: ${message}`);
+}
+
 // oxlint-disable-next-line no-top-level-await
 await missing_files();
 </script>
 
 <template>
-  <FetchingData v-if="loading" />
+  <FetchingData v-if="loading || uploading" />
   <v-container v-else-if="has_missing_files">
     <v-row v-if="mandatory_files.length" align="center">
       <v-col cols="auto" class="pa-0">
@@ -115,7 +179,15 @@ await missing_files();
     </v-row>
     <v-row>
       <v-col cols="12">
+        <DragAndDrop
+          v-if="timeSeries"
+          directory
+          :show-extensions="false"
+          @files-selected="upload_folder"
+          @folder-read-error="warn_folder_read_error"
+        />
         <FileUploader
+          v-else
           v-bind="{ multiple, accept, files, autoUpload: false }"
           @files_uploaded="files_uploaded_event"
         />

package/app/components/TimeSeriesTargetSelector.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
+
+import FetchingData from "@ogw_front/components/FetchingData.vue";
+import { useBackStore } from "@ogw_front/stores/back";
+import { useDataStore } from "@ogw_front/stores/data";
+
+const schema = schemas.opengeodeweb_back.time_series_allowed_objects;
+
+interface Target {
+  id: string;
+  name: string;
+  geode_object_type: string;
+}
+
+const emit = defineEmits<{
+  update_values: [values: { target_id: string; geode_object_type: string }];
+  increment_step: [];
+  decrement_step: [];
+}>();
+
+const { filename } = defineProps<{ filename: string }>();
+
+const loading = ref(true);
+const targets = ref<Target[]>([]);
+
+async function get_targets(): Promise<void> {
+  const backStore = useBackStore();
+  const dataStore = useDataStore();
+  const [{ allowed_objects }, items] = await Promise.all([
+    backStore.request({ schema, params: { filename } }),
+    dataStore.allItems(),
+  ]);
+  targets.value = items
+    .filter((item) => allowed_objects.includes(item.geode_object_type))
+    .map(({ id, name, geode_object_type }) => ({ id, name, geode_object_type }));
+  loading.value = false;
+}
+
+function select(target: Target): void {
+  emit("update_values", { target_id: target.id, geode_object_type: target.geode_object_type });
+  emit("increment_step");
+}
+
+// oxlint-disable-next-line no-top-level-await
+await get_targets();
+</script>
+
+<template>
+  <FetchingData v-if="loading" />
+  <v-alert
+    v-else-if="targets.length === 0"
+    data-testid="noTimeSeriesTarget"
+    type="warning"
+    variant="tonal"
+  >
+    No compatible model loaded. Import a model (BRep) first, then drop the time series again.
+  </v-alert>
+  <v-list v-else bg-color="transparent">
+    <v-list-item
+      v-for="target in targets"
+      :key="target.id"
+      data-testid="timeSeriesTarget"
+      :title="target.name"
+      :subtitle="target.geode_object_type"
+      prepend-icon="mdi-cube-outline"
+      @click="select(target)"
+    />
+  </v-list>
+</template>

package/app/utils/import_workflow.ts

@@ -150,4 +150,29 @@ async function importWorkflowFromSnapshot(items: readonly NewDataItem[]): Promis
   });
   return ids;
 }
-export { importFile, importWorkflow, importWorkflowFromSnapshot, importItem };
+
+// The time series only adds attributes to the model, so the viewer object is reloaded under the same id with its stored style.
+async function applyTimeSeriesWorkflow(filename: string, id: string): Promise<string> {
+  const backStore = useBackStore();
+  const dataStore = useDataStore();
+  const dataStyleStore = useDataStyleStore();
+  const hybridViewerStore = useHybridViewerStore();
+  await backStore.request({
+    schema: back_schemas.opengeodeweb_back.apply_time_series,
+    params: { id, filename },
+  });
+  const item = await dataStore.item(id);
+  await dataStore.deregisterObject(id);
+  await dataStore.registerObject(id, item.name ?? id);
+  await dataStyleStore.applyDefaultStyle(id);
+  await hybridViewerStore.remoteRender();
+  return id;
+}
+
+export {
+  importFile,
+  importWorkflow,
+  importWorkflowFromSnapshot,
+  importItem,
+  applyTimeSeriesWorkflow,
+};

package/app/utils/upload_path.ts

@@ -0,0 +1,75 @@
+// Files carry extra app-specific bookkeeping fields once picked up by the uploader.
+type UploadFile = File & { relativePath?: string; isConfigured?: boolean; displayName?: string };
+
+// Path of the file inside the back upload folder: keeps the folder tree of a dropped directory.
+function uploadPath(file: UploadFile): string {
+  for (const candidate of [file.relativePath, file.webkitRelativePath]) {
+    if (candidate !== undefined && candidate !== "") {
+      return candidate;
+    }
+  }
+  return file.name;
+}
+
+function fileExtension(path: string): string {
+  const name = path.slice(path.lastIndexOf("/") + 1);
+  const index = name.lastIndexOf(".");
+  return index === -1 ? "" : name.slice(index + 1).toLowerCase();
+}
+
+type FileMatch =
+  | { status: "matched"; indices: (number | undefined)[] }
+  | { status: "ambiguous"; path: string };
+
+// Number of folders the two paths have in common, in order: 0 when the file names differ.
+function matchScore(path: string, expected_path: string): number {
+  const segments = path.split("/");
+  const expected_segments = expected_path.split("/");
+  if (segments.at(-1) !== expected_segments.at(-1)) {
+    return 0;
+  }
+  // Longest common subsequence of the path segments
+  let previous = Array.from({ length: expected_segments.length + 1 }, () => 0);
+  for (const segment of segments) {
+    const current = [0];
+    for (const [index, expected_segment] of expected_segments.entries()) {
+      current.push(
+        segment === expected_segment
+          ? (previous[index] ?? 0) + 1
+          : Math.max(previous[index + 1] ?? 0, current[index] ?? 0),
+      );
+    }
+    previous = current;
+  }
+  return previous.at(-1) ?? 0;
+}
+
+// Finds each expected file in a selected folder, whatever the folder layout: a selected file is
+// Kept for an expected path when each is the other's closest match (most folders in common).
+// Gives, for each expected path, the index of its selected path (undefined when not found).
+function matchExpectedFiles(paths: readonly string[], expected: readonly string[]): FileMatch {
+  const scores = expected.map((expected_path) =>
+    paths.map((path) => matchScore(path, expected_path)),
+  );
+  const path_best_scores = paths.map((_path, index) =>
+    Math.max(0, ...scores.map((expected_scores) => expected_scores[index] ?? 0)),
+  );
+  const indices: (number | undefined)[] = [];
+  for (const [expected_index, expected_scores] of scores.entries()) {
+    const best = Math.max(0, ...expected_scores);
+    const candidates = expected_scores.flatMap((score, index) =>
+      best > 0 && score === best && path_best_scores[index] === best ? [index] : [],
+    );
+    if (candidates.length > 1) {
+      return { status: "ambiguous", path: expected[expected_index] ?? "" };
+    }
+    indices.push(candidates[0]);
+  }
+  return { status: "matched", indices };
+}
+
+// Shared by every drop zone that refuses folders.
+const foldersIgnoredWarning = "Folders can't be dropped here";
+
+export { fileExtension, foldersIgnoredWarning, matchExpectedFiles, uploadPath };
+export type { UploadFile };

package/internal/utils/upload_file.ts

@@ -3,6 +3,7 @@ import { CHUNK_SIZE_BYTES } from "@ogw_shared/utils/file.js";
 import type { Microservice } from "./api_fetch.js";
 import { consola } from "consola";
 import { fetchRaw } from "@ogw_shared/utils/fetch_raw.js";
+import { uploadPath } from "@ogw_front/utils/upload_path";
 import { useFeedbackStore } from "@ogw_front/stores/feedback.js";
 
 interface UploadFileParams {
@@ -86,7 +87,7 @@ async function upload_file(
     const chunk = file.slice(start, start + CHUNK_SIZE_BYTES);
     const query = new URLSearchParams({
       ...params,
-      filename: file.name,
+      filename: uploadPath(file),
       chunk_index: String(chunkIndex),
       total_chunks: String(totalChunks),
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.40.0-rc.1",
+  "version": "10.40.0-rc.2",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {