@geode/opengeodeweb-front 10.18.0-rc.2 → 10.18.0-rc.3

package/app/components/FileUploader.vue

@@ -1,36 +1,59 @@
 <script setup>
 import { useGeodeStore } from "@ogw_front/stores/geode";
-import { useTemplateRef } from "vue";
 
+import CsvPreviewer from "@ogw_front/components/csv-preview/CsvPreviewer";
 import DragAndDrop from "@ogw_front/components/DragAndDrop";
 
 const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
 
-const {
-  multiple,
-  accept,
-  files,
-  auto_upload,
-  mini,
-  show_overlay: showOverlay,
-} = defineProps({
-  multiple: { type: Boolean, required: true },
-  accept: { type: String, required: true },
-  files: { type: Array, required: false, default: [] },
-  auto_upload: { type: Boolean, required: false, default: false },
-  mini: { type: Boolean, required: false, default: false },
-  show_overlay: { type: Boolean, required: false, default: true },
+const { multiple, accept, files, auto_upload, showOverlay, mini } = defineProps({
+  multiple: { type: Boolean, default: false },
+  accept: { type: String, default: "" },
+  files: { type: Array, default: () => [] },
+  auto_upload: { type: Boolean, default: true },
+  showOverlay: { type: Boolean, default: false },
+  mini: { type: Boolean, default: false },
 });
 
 const geodeStore = useGeodeStore();
-
 const internal_files = ref(files);
+const dragAndDropRef = useTemplateRef("dragAndDropRef");
+const csv_dialog = ref(false);
+const current_csv_file = ref(undefined);
+const current_csv_index = ref(-1);
 const loading = ref(false);
 const files_uploaded = ref(false);
-const dragAndDropRef = useTemplateRef("dragAndDropRef");
-
 const toggle_loading = useToggle(loading);
 
+function isCsv(file) {
+  return file.name.toLowerCase().endsWith(".csv");
+}
+
+function openCsvPreviewer(file, index) {
+  current_csv_file.value = file;
+  current_csv_index.value = index;
+  csv_dialog.value = true;
+}
+
+async function onCsvConfirm(result) {
+  const json_content = JSON.stringify(result, undefined, 2);
+  const base_name = current_csv_file.value.name.slice(
+    0,
+    current_csv_file.value.name.lastIndexOf("."),
+  );
+  const json_filename = `${base_name}.json`;
+
+  const blob = new Blob([json_content], { type: "application/json" });
+  const json_file = new File([blob], json_filename, {
+    type: "application/json",
+  });
+
+  current_csv_file.value.isConfigured = true;
+  await geodeStore.upload(json_file);
+  internal_files.value = [...internal_files.value];
+  csv_dialog.value = false;
+}
+
 function processSelectedFiles(selected_files) {
   if (multiple) {
     internal_files.value = [...internal_files.value, ...selected_files];
@@ -52,11 +75,32 @@ async function upload_files() {
   const promise_array = internal_files.value.map((file) => geodeStore.upload(file));
   await Promise.all(promise_array);
   files_uploaded.value = true;
-  emit("files_uploaded", internal_files.value);
-
   toggle_loading();
+  emit("files_uploaded", internal_files.value);
 }
 
+watch(
+  () => internal_files.value,
+  async (newFiles) => {
+    if (newFiles.length === 0) {
+      return;
+    }
+    const unconfiguredCsv = newFiles.find((file) => isCsv(file) && !file.isConfigured);
+
+    if (unconfiguredCsv) {
+      openCsvPreviewer(unconfiguredCsv, internal_files.value.indexOf(unconfiguredCsv));
+      return;
+    }
+
+    const allConfigured = newFiles.every((file) => !isCsv(file) || file.isConfigured);
+
+    if (auto_upload && allConfigured) {
+      await upload_files();
+    }
+  },
+  { deep: true },
+);
+
 if (files.length > 0) {
   internal_files.value = files;
   if (auto_upload) {
@@ -71,33 +115,26 @@ watch(
   },
   { deep: true },
 );
-
-watch(internal_files, (value) => {
-  files_uploaded.value = false;
-  if (auto_upload && value.length > 0) {
-    upload_files();
-  }
-});
 </script>
 
 <template>
-  <DragAndDrop
-    v-if="!internal_files.length"
-    ref="dragAndDropRef"
-    :multiple
-    :accept
-    :loading
-    :show-extensions="false"
-    :inline="true"
-    :show-overlay="showOverlay"
-    :texts="{
-      idle: 'Select files',
-      drop: 'Drop files here',
-      loading: 'Loading...',
-    }"
-    @files-selected="processSelectedFiles"
-  />
-
+  <template v-if="mini">
+    <v-btn
+      icon="mdi-plus"
+      variant="text"
+      color="primary"
+      :loading="loading"
+      class="mt-2"
+      @click="dragAndDropRef?.triggerFileDialog"
+    />
+    <DragAndDrop
+      ref="dragAndDropRef"
+      class="d-none"
+      :multiple
+      :accept
+      @files-selected="processSelectedFiles"
+    />
+  </template>
   <DragAndDrop
     v-else
     ref="dragAndDropRef"
@@ -105,7 +142,7 @@ watch(internal_files, (value) => {
     :accept
     :loading
     :show-extensions="false"
-    :inline="false"
+    :inline="!internal_files.length"
     :show-overlay="showOverlay"
     @files-selected="processSelectedFiles"
   />
@@ -132,23 +169,50 @@ watch(internal_files, (value) => {
     </v-sheet>
 
     <v-sheet class="d-flex flex-wrap ga-2" color="transparent">
-      <v-chip
-        v-for="(file, index) in internal_files"
-        :key="index"
-        closable
-        size="default"
-        color="white"
-        variant="outlined"
-        class="font-weight-medium glass-ui border-opacity-10 px-4"
-        style="background: rgba(255, 255, 255, 0.05) !important"
-        @click:close="removeFile(index)"
-      >
-        <v-icon start size="18" color="primary">mdi-file-outline</v-icon>
-        <span class="text-white">{{ file.name }}</span>
-        <template #close>
-          <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
-        </template>
-      </v-chip>
+      <template v-for="(file, index) in internal_files" :key="index">
+        <v-chip
+          closable
+          size="default"
+          color="white"
+          variant="outlined"
+          class="font-weight-medium glass-ui border-opacity-10 px-4"
+          style="background: rgba(255, 255, 255, 0.05) !important"
+          @click:close="removeFile(index)"
+        >
+          <v-icon start size="18" :color="isCsv(file) && file.isConfigured ? 'success' : 'primary'">
+            {{
+              isCsv(file)
+                ? file.isConfigured
+                  ? "mdi-file-check"
+                  : "mdi-file-table"
+                : "mdi-file-outline"
+            }}
+          </v-icon>
+          <span class="text-white">{{ file.displayName || file.name }}</span>
+
+          <v-tooltip v-if="isCsv(file)" text="Configure CSV" location="bottom">
+            <template #activator="{ props: tooltipProps }">
+              <v-btn
+                v-bind="tooltipProps"
+                icon="mdi-cog"
+                variant="flat"
+                :color="file.isConfigured ? 'success' : 'primary'"
+                :class="['ml-2', { 'pulse-animation': !file.isConfigured }]"
+                width="24"
+                height="24"
+                density="compact"
+                @click.stop="openCsvPreviewer(file, index)"
+              >
+                <v-icon size="14">mdi-cog</v-icon>
+              </v-btn>
+            </template>
+          </v-tooltip>
+
+          <template #close>
+            <v-icon size="16" class="ml-2 opacity-60 hover-opacity-100">mdi-close-circle</v-icon>
+          </template>
+        </v-chip>
+      </template>
     </v-sheet>
   </v-card-text>
 
@@ -164,24 +228,40 @@ watch(internal_files, (value) => {
       @click="upload_files"
     >
       <v-icon start size="22">mdi-cloud-upload</v-icon>
-      Upload {{ internal_files.length }} file<span v-if="internal_files.length > 1">s</span>
+      Upload
+      {{ internal_files.length }}
+      file<span v-if="internal_files.length > 1">s</span>
     </v-btn>
   </v-card-actions>
+
+  <CsvPreviewer
+    v-if="current_csv_file"
+    v-model="csv_dialog"
+    :file="current_csv_file"
+    @confirm="onCsvConfirm"
+  />
 </template>
 
 <style scoped>
-.border-dashed {
-  border: 2px dashed rgba(255, 255, 255, 0.1) !important;
-  transition: all 0.3s ease;
+.glass-ui {
+  background: rgba(255, 255, 255, 0.05) !important;
+  backdrop-filter: blur(10px);
 }
-
-.border-dashed:hover {
-  border-color: rgba(var(--v-theme-primary), 0.4) !important;
-  background: rgba(var(--v-theme-primary), 0.02) !important;
+.hover-opacity-100:hover {
+  opacity: 1 !important;
 }
-
-.custom-upload-btn {
-  letter-spacing: 0.5px;
-  box-shadow: 0 4px 15px rgba(var(--v-theme-primary), 0.3);
+.pulse-animation {
+  animation: pulse 2s infinite;
+}
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--v-theme-primary), 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(var(--v-theme-primary), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--v-theme-primary), 0);
+  }
 }
 </style>

package/app/components/MissingFilesSelector.vue

@@ -9,10 +9,11 @@ const schema = schemas.opengeodeweb_back.missing_files;
 
 const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
 
-const { multiple, geode_object_type, filenames } = defineProps({
+const { multiple, geode_object_type, filenames, files } = defineProps({
   multiple: { type: Boolean, required: true },
   geode_object_type: { type: String, required: true },
   filenames: { type: Array, required: true },
+  files: { type: Array, required: false, default: () => [] },
 });
 
 const accept = ref("");
@@ -34,12 +35,17 @@ async function missing_files() {
   additional_files.value = [];
   const geodeStore = useGeodeStore();
 
-  const promise_array = filenames.map(async (filename) => {
-    const response = await geodeStore.request(schema, {
-      geode_object_type,
-      filename,
-    });
-    return response;
+  const promise_array = filenames.map((filename) => {
+    const isCsvFile =
+      filename.toLowerCase().endsWith(".csv") || filename.toLowerCase().endsWith(".csv.json");
+    if (isCsvFile) {
+      return Promise.resolve({
+        has_missing_files: false,
+        mandatory_files: [],
+        additional_files: [],
+      });
+    }
+    return geodeStore.request(schema, { geode_object_type, filename });
   });
   const values = await Promise.all(promise_array);
   for (const value of values) {
@@ -49,11 +55,19 @@ async function missing_files() {
     mandatory_files.value = [...mandatory_files.value, ...value.mandatory_files];
     additional_files.value = [...additional_files.value, ...value.additional_files];
   }
-  if (has_missing_files.value) {
-    accept.value = [...mandatory_files.value, ...additional_files.value]
-      .map((filename) => `.${filename.split(".").pop()}`)
-      .join(",");
-  } else {
+  const unconfigured_csvs = files.filter(
+    (file) =>
+      (file.name.toLowerCase().endsWith(".csv") || file.name.toLowerCase().endsWith(".csv.json")) &&
+      !file.isConfigured,
+  );
+  if (unconfigured_csvs.length > 0) {
+    has_missing_files.value = true;
+    if (accept.value === "") {
+      accept.value = ".json";
+    }
+  }
+
+  if (!has_missing_files.value) {
     emit("increment_step");
   }
   toggle_loading();
@@ -85,7 +99,10 @@ await missing_files();
     </v-row>
     <v-row>
       <v-col cols="12">
-        <FileUploader v-bind="{ multiple, accept }" @files_uploaded="files_uploaded_event" />
+        <FileUploader
+          v-bind="{ multiple, accept, files, auto_upload: false }"
+          @files_uploaded="files_uploaded_event"
+        />
       </v-col>
     </v-row>
     <v-row>

package/app/components/ObjectSelector.vue

@@ -62,12 +62,20 @@ async function get_allowed_objects() {
     const load_scores = allowed_objects_list.map((obj) => obj[key].is_loadable);
     const priorities = allowed_objects_list
       .map((obj) => obj[key].object_priority)
-      .filter((priority) => priority !== undefined && priority !== null);
+      .filter((priority) => priority !== undefined);
     final_object[key] = { is_loadable: Math.min(...load_scores) };
     if (priorities.length > 0) {
       final_object[key].object_priority = Math.max(...priorities);
     }
   }
+  const isCsv = filenames.some(
+    (filename) =>
+      filename.toLowerCase().endsWith(".csv") || filename.toLowerCase().endsWith(".csv.json"),
+  );
+  if (isCsv && !final_object["PointSet3D"]) {
+    final_object["PointSet3D"] = { is_loadable: 1, object_priority: 100 };
+  }
+
   allowed_objects.value = final_object;
   const selected_object = select_geode_object(final_object);
   if (selected_object) {

package/app/components/csv-preview/CsvPreviewer.vue

@@ -0,0 +1,277 @@
+<script setup>
+import CsvSettings from "./CsvSettings.vue";
+import CsvTable from "./CsvTable.vue";
+import { useToggle } from "@vueuse/core";
+
+const { file, modelValue } = defineProps({
+  file: { type: Object, required: true },
+  modelValue: { type: Boolean, default: false },
+});
+
+const MAX_CONTENT_SLICE = 1000;
+const MAX_LINES_FOR_DETECTION = 5;
+const MIN_AVG_COUNT = 1.5;
+const MAX_VARIANCE = 0.5;
+const PREVIEW_ROWS_LIMIT = 101;
+
+const emit = defineEmits(["update:modelValue", "confirm"]);
+
+const separator = ref(",");
+const headerRow = ref(0);
+const firstRow = ref(1);
+
+const xColumn = ref(undefined);
+const yColumn = ref(undefined);
+const zColumn = ref(undefined);
+
+const rawContent = ref("");
+const previewRows = ref([]);
+const previewHeaders = ref([]);
+const loading = ref(false);
+const toggleLoading = useToggle(loading);
+
+function autoDetectSeparator(content) {
+  const lines = content
+    .slice(0, MAX_CONTENT_SLICE)
+    .split(/\r?\n/u)
+    .slice(0, MAX_LINES_FOR_DETECTION);
+  const candidates = [",", ";", "\t", "|"];
+  let best = ",";
+  let maxCount = -1;
+
+  for (const candidate of candidates) {
+    const counts = lines.map((line) => line.split(candidate).length);
+    const average = counts.reduce((total, count) => total + count, 0) / counts.length;
+    const variance =
+      counts.reduce((total, count) => total + (count - average) ** 2, 0) / counts.length;
+
+    if (average > MIN_AVG_COUNT && variance < MAX_VARIANCE && average > maxCount) {
+      maxCount = average;
+      best = candidate;
+    }
+  }
+  return best;
+}
+
+function readAndParse() {
+  if (!file) {
+    return;
+  }
+  toggleLoading(true);
+
+  const reader = new FileReader();
+  reader.addEventListener("load", (event) => {
+    rawContent.value = event.target.result;
+    if (!separator.value || separator.value === ",") {
+      separator.value = autoDetectSeparator(rawContent.value);
+    }
+    parseContent();
+    toggleLoading(false);
+  });
+  reader.addEventListener("error", () => {
+    toggleLoading(false);
+  });
+  reader.readAsText(file, "utf8");
+}
+
+function parseContent() {
+  if (!rawContent.value) {
+    return;
+  }
+
+  const allLines = rawContent.value.split(/\r?\n/u).filter((line) => line.trim() !== "");
+
+  function splitLine(line) {
+    if (!separator.value) {
+      return [line];
+    }
+    const result = [];
+    let current = "";
+    let inQuotes = false;
+    for (let index = 0; index < line.length; index += 1) {
+      const char = line[index];
+      if (char === '"') {
+        inQuotes = !inQuotes;
+      } else if (char === separator.value && !inQuotes) {
+        result.push(current.trim());
+        current = "";
+      } else {
+        current += char;
+      }
+    }
+    result.push(current.trim());
+    return result;
+  }
+
+  const headerLine = allLines[headerRow.value];
+  const rawHeaders = headerLine ? splitLine(headerLine) : [];
+
+  previewHeaders.value = rawHeaders.map((header, index) => ({
+    title: header || `Column ${index + 1}`,
+    key: `col${index}`,
+    align: "start",
+    sortable: true,
+  }));
+
+  const dataLines = allLines.slice(firstRow.value, firstRow.value + PREVIEW_ROWS_LIMIT);
+  previewRows.value = dataLines.map((line) => {
+    const row = splitLine(line);
+    const obj = {};
+    for (let index = 0; index < row.length; index += 1) {
+      obj[`col${index}`] = row[index];
+    }
+    return obj;
+  });
+}
+const computedResult = computed(() => {
+  const xIndex = previewHeaders.value.findIndex((header) => header.key === xColumn.value);
+  const yIndex = previewHeaders.value.findIndex((header) => header.key === yColumn.value);
+  const zIndex = previewHeaders.value.findIndex((header) => header.key === zColumn.value);
+
+  return {
+    firstRow: firstRow.value,
+    headerRow: headerRow.value,
+    separator: separator.value,
+    xColumn: xIndex === -1 ? 0 : xIndex,
+    yColumn: yIndex === -1 ? 1 : yIndex,
+    zColumn: zIndex === -1 ? 2 : zIndex,
+  };
+});
+
+watch([separator, headerRow, firstRow], () => {
+  parseContent();
+  xColumn.value = undefined;
+  yColumn.value = undefined;
+  zColumn.value = undefined;
+});
+
+watch(
+  () => modelValue,
+  (val) => {
+    if (val) {
+      readAndParse();
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => file,
+  (newFile) => {
+    if (newFile && modelValue) {
+      readAndParse();
+    }
+  },
+);
+
+function onConfirm() {
+  emit("confirm", computedResult.value);
+  emit("update:modelValue", false);
+}
+</script>
+
+<template>
+  <v-dialog
+    :model-value="modelValue"
+    @update:model-value="emit('update:modelValue', $event)"
+    max-width="1200px"
+  >
+    <v-card class="glass-ui rounded-xl overflow-hidden border-opacity-10" color="grey-darken-4">
+      <v-toolbar color="transparent" flat class="px-4">
+        <v-icon icon="mdi-file-table" size="32" color="primary" class="ml-1" />
+        <v-toolbar-title class="text-h6 font-weight-bold text-white">
+          CSV Previewer & Configuration
+        </v-toolbar-title>
+        <v-spacer />
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          color="white"
+          @click="emit('update:modelValue', false)"
+        />
+      </v-toolbar>
+
+      <v-divider class="border-opacity-10" />
+
+      <div class="previewer-grid">
+        <CsvSettings
+          v-model:separator="separator"
+          v-model:header-row="headerRow"
+          v-model:first-row="firstRow"
+          v-model:x-column="xColumn"
+          v-model:y-column="yColumn"
+          v-model:z-column="zColumn"
+          :headers="previewHeaders"
+        />
+
+        <CsvTable
+          :headers="previewHeaders"
+          :rows="previewRows"
+          :loading="loading"
+          :coordinates="{ x: xColumn, y: yColumn, z: zColumn }"
+          :separator="separator"
+          :header-row="headerRow"
+          :first-row="firstRow"
+        />
+      </div>
+
+      <v-divider class="border-opacity-10" />
+
+      <v-card-actions class="pa-4 bg-white-opacity-5">
+        <v-spacer />
+        <v-btn
+          variant="text"
+          class="text-none px-6"
+          color="white"
+          @click="emit('update:modelValue', false)"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          variant="flat"
+          color="primary"
+          class="text-none px-8 rounded-lg font-weight-bold"
+          @click="onConfirm"
+          :disabled="!previewHeaders.length"
+        >
+          Confirm
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+.glass-ui {
+  background: rgba(30, 30, 30, 0.8) !important;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.previewer-grid {
+  display: grid;
+  grid-template-columns: 350px 1fr;
+  height: 70vh;
+  overflow: hidden;
+}
+
+.bg-white-opacity-5 {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+</style>

package/app/components/csv-preview/CsvSettings.vue

@@ -0,0 +1,170 @@
+<script setup>
+const { separator, headerRow, firstRow, xColumn, yColumn, zColumn, headers } = defineProps({
+  separator: { type: String, required: true },
+  headerRow: { type: Number, required: true },
+  firstRow: { type: Number, required: true },
+  xColumn: { type: String, default: undefined },
+  yColumn: { type: String, default: undefined },
+  zColumn: { type: String, default: undefined },
+  headers: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits([
+  "update:separator",
+  "update:headerRow",
+  "update:firstRow",
+  "update:xColumn",
+  "update:yColumn",
+  "update:zColumn",
+]);
+
+const separators = [
+  { title: "Comma (,)", value: "," },
+  { title: "Semicolon (;)", value: ";" },
+  { title: "Tab (\\t)", value: "\t" },
+  { title: "Pipe (|)", value: "|" },
+];
+
+const internalSeparator = computed({
+  get: () => separator,
+  set: (value) => emit("update:separator", value),
+});
+
+const internalHeaderRow = computed({
+  get: () => headerRow,
+  set: (value) => emit("update:headerRow", value),
+});
+
+const internalFirstRow = computed({
+  get: () => firstRow,
+  set: (value) => emit("update:firstRow", value),
+});
+
+const internalXColumn = computed({
+  get: () => xColumn,
+  set: (value) => emit("update:xColumn", value),
+});
+
+const internalYColumn = computed({
+  get: () => yColumn,
+  set: (value) => emit("update:yColumn", value),
+});
+
+const internalZColumn = computed({
+  get: () => zColumn,
+  set: (value) => emit("update:zColumn", value),
+});
+</script>
+
+<template>
+  <div class="pa-6 overflow-y-auto border-e border-opacity-10 bg-white-opacity-5">
+    <div class="text-overline mb-4 text-primary font-weight-bold">Parser Settings</div>
+
+    <v-select
+      v-model="internalSeparator"
+      :items="separators"
+      label="Separator"
+      variant="outlined"
+      density="compact"
+      class="mb-4"
+      rounded="lg"
+    />
+
+    <v-text-field
+      v-if="!separators.find((s) => s.value === separator)"
+      v-model="internalSeparator"
+      label="Custom Separator"
+      variant="outlined"
+      density="compact"
+      placeholder="Enter character"
+      class="mb-4"
+      rounded="lg"
+    />
+
+    <v-divider class="my-6 border-opacity-10" />
+
+    <div class="text-overline mb-4 text-primary font-weight-bold">Row Configuration</div>
+
+    <v-text-field
+      v-model.number="internalHeaderRow"
+      type="number"
+      label="Header Row"
+      variant="outlined"
+      density="compact"
+      hint="Index of the row containing headers"
+      persistent-hint
+      class="mb-4"
+      min="0"
+      rounded="lg"
+    />
+
+    <v-text-field
+      v-model.number="internalFirstRow"
+      type="number"
+      label="First Data Row"
+      variant="outlined"
+      density="compact"
+      hint="Index of the first row containing data"
+      persistent-hint
+      class="mb-6"
+      min="0"
+      rounded="lg"
+    />
+
+    <v-divider class="my-6 border-opacity-10" />
+
+    <div class="text-overline mb-4 text-primary font-weight-bold">Spatial Mapping</div>
+
+    <v-select
+      v-model="internalXColumn"
+      :items="headers"
+      item-title="title"
+      item-value="key"
+      label="X Column"
+      variant="outlined"
+      density="compact"
+      prepend-inner-icon="mdi-axis-x-arrow"
+      color="light-blue-accent-3"
+      class="mb-2"
+      clearable
+      rounded="lg"
+    />
+
+    <v-select
+      v-model="internalYColumn"
+      :items="headers"
+      item-title="title"
+      item-value="key"
+      label="Y Column"
+      variant="outlined"
+      density="compact"
+      prepend-inner-icon="mdi-axis-y-arrow"
+      color="light-green-accent-3"
+      class="mb-2"
+      clearable
+      rounded="lg"
+    />
+
+    <v-select
+      v-model="internalZColumn"
+      :items="headers"
+      item-title="title"
+      item-value="key"
+      label="Z Column"
+      variant="outlined"
+      density="compact"
+      prepend-inner-icon="mdi-axis-z-arrow"
+      color="red-accent-3"
+      class="mb-8"
+      clearable
+      rounded="lg"
+    />
+    <div class="pb-12" />
+  </div>
+</template>
+
+<style scoped>
+.bg-white-opacity-5 {
+  background: rgba(255, 255, 255, 0.03);
+}
+</style>

package/app/components/csv-preview/CsvTable.vue

@@ -0,0 +1,112 @@
+<script setup>
+const { headers, rows, loading, coordinates, separator, headerRow, firstRow } = defineProps({
+  headers: { type: Array, required: true },
+  rows: { type: Array, required: true },
+  loading: { type: Boolean, default: false },
+  coordinates: { type: Object, default: () => ({ x: undefined, y: undefined, z: undefined }) },
+  separator: { type: String, default: "," },
+  headerRow: { type: Number, default: 0 },
+  firstRow: { type: Number, default: 1 },
+});
+
+function getColumnClass(key) {
+  if (key === coordinates.x) {
+    return "x-col-highlight";
+  }
+  if (key === coordinates.y) {
+    return "y-col-highlight";
+  }
+  if (key === coordinates.z) {
+    return "z-col-highlight";
+  }
+  return "";
+}
+</script>
+
+<template>
+  <div class="d-flex flex-column bg-black-opacity-20 overflow-hidden">
+    <div class="pa-4 d-flex align-center border-b border-opacity-10">
+      <v-icon icon="mdi-table-eye" size="small" class="mr-2 opacity-60" />
+      <span class="text-subtitle-2 font-weight-medium opacity-80">
+        Live Preview (First 100 rows)
+      </span>
+      <v-spacer />
+      <v-chip v-if="loading" size="x-small" color="primary" variant="flat">
+        <v-progress-circular indeterminate size="12" width="2" class="mr-2" />
+        Parsing...
+      </v-chip>
+    </div>
+
+    <v-data-table
+      :key="`${separator}-${headerRow}-${firstRow}`"
+      :headers="headers"
+      :items="rows"
+      class="bg-transparent"
+      density="compact"
+      hover
+      hide-default-footer
+      :loading="loading"
+      fixed-header
+      height="100%"
+    >
+      <template v-for="header in headers" v-slot:[`item.${header.key}`]="{ item }">
+        <div :class="getColumnClass(header.key)" class="px-2 py-1 rounded text-truncate">
+          {{ item[header.key] }}
+        </div>
+      </template>
+
+      <template #no-data>
+        <div class="d-flex flex-column align-center justify-center h-100 py-12 opacity-40">
+          <v-icon size="64" icon="mdi-table-off" />
+          <div class="text-h6 mt-2">No preview available</div>
+          <div class="text-caption">Check your parser settings</div>
+        </div>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<style scoped>
+.bg-black-opacity-20 {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+:deep(.v-data-table__th) {
+  background: #1e1e1e !important; /* Solid background to prevent overlap transparency */
+  color: rgba(var(--v-theme-primary), 0.9) !important;
+  font-weight: bold !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.5px;
+  min-width: 150px !important;
+  white-space: nowrap !important;
+}
+
+:deep(.v-data-table__td) {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+  color: rgba(255, 255, 255, 0.8) !important;
+}
+
+:deep(.v-data-table__tr:hover td) {
+  background: rgba(var(--v-theme-primary), 0.05) !important;
+}
+
+.x-col-highlight {
+  background: rgba(0, 176, 255, 0.2) !important;
+  color: #00b0ff !important;
+  font-weight: bold;
+}
+
+.y-col-highlight {
+  background: rgba(100, 221, 23, 0.2) !important;
+  color: #64dd17 !important;
+  font-weight: bold;
+}
+
+.z-col-highlight {
+  background: rgba(255, 23, 68, 0.2) !important;
+  color: #ff1744 !important;
+  font-weight: bold;
+}
+</style>

package/app/utils/import_workflow.js

@@ -9,26 +9,16 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const SECOND = 1000;
-
 async function importWorkflow(files) {
-  console.log("importWorkflow", { files });
-  const start = Date.now();
-  const promise_array = [];
-  for (const file of files) {
-    const { filename, geode_object_type } = file;
-    console.log({ filename }, { geode_object_type });
-    promise_array.push(importFile(filename, geode_object_type));
-  }
-  const results = await Promise.all(promise_array);
+  const results = await Promise.all(
+    files.map(({ filename, geode_object_type }) => importFile(filename, geode_object_type)),
+  );
   const hybridViewerStore = useHybridViewerStore();
   hybridViewerStore.remoteRender();
-  console.log("importWorkflow completed in", (Date.now() - start) / SECOND);
   return results;
 }
 
 function buildImportItemFromPayloadApi(value, geode_object_type) {
-  console.log("buildImportItemFromPayloadApi", { value, geode_object_type });
   return {
     geode_object_type,
     ...value,

package/package.json

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

package/tests/unit/components/CrsSelector.nuxt.test.js

@@ -17,7 +17,7 @@ describe("crs selector", () => {
   beforeEach(() => {
     pinia = setupActivePinia();
     geodeStore = useGeodeStore();
-    geodeStore.base_url = "";
+    geodeStore.base_url = "/";
   });
 
   test("default behavior", async () => {

package/tests/unit/components/ExtensionSelector.nuxt.test.js

@@ -21,7 +21,7 @@ const geodeStore = useGeodeStore();
 
 describe("extension selector", () => {
   beforeEach(() => {
-    geodeStore.base_url = "";
+    geodeStore.base_url = "/";
 
     geodeStore.request = vi.fn(() => {
       const response = {

package/tests/unit/components/FileSelector.nuxt.test.js

@@ -21,7 +21,7 @@ const upload_file_schema = schemas.opengeodeweb_back.upload_file;
 describe("file selector", () => {
   const pinia = setupActivePinia();
   const geodeStore = useGeodeStore();
-  geodeStore.base_url = "";
+  geodeStore.base_url = "/";
 
   test("select file", async () => {
     registerEndpoint(allowed_files_schema.$id, {
@@ -52,6 +52,7 @@ describe("file selector", () => {
       writable: true,
     });
     await v_file_input.trigger("change");
+    await flushPromises();
     const v_btn = wrapper.findComponent(components.VBtn);
     await v_btn.trigger("click");
     await flushPromises();

package/tests/unit/components/FileUploader.nuxt.test.js

@@ -18,7 +18,7 @@ const upload_file_schema = schemas.opengeodeweb_back.upload_file;
 describe("file uploader", () => {
   const pinia = setupActivePinia();
   const geodeStore = useGeodeStore();
-  geodeStore.base_url = "";
+  geodeStore.base_url = "/";
 
   registerEndpoint(upload_file_schema.$id, {
     method: upload_file_schema.methods[FIRST_INDEX],
@@ -37,7 +37,7 @@ describe("file uploader", () => {
         global: {
           plugins: [vuetify, pinia],
         },
-        props: { multiple: false, accept: "*.txt" },
+        props: { multiple: false, accept: "*.txt", auto_upload: false },
       });
 
       const v_file_input = wrapper.find('input[type="file"]');
@@ -46,6 +46,7 @@ describe("file uploader", () => {
         writable: true,
       });
       await v_file_input.trigger("change");
+      await flushPromises();
       const v_btn = wrapper.findComponent(components.VBtn);
 
       await v_btn.trigger("click");

package/tests/unit/components/Inspector/InspectionButton.nuxt.test.js

@@ -12,7 +12,7 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 describe("inspector inspection button", () => {
   const pinia = setupActivePinia();
   const geodeStore = useGeodeStore();
-  geodeStore.base_url = "";
+  geodeStore.base_url = "/";
 
   test("with issues", async () => {
     const inspection_result = {

package/tests/unit/components/MissingFilesSelector.nuxt.test.js

@@ -20,7 +20,7 @@ const upload_file_schema = schemas.opengeodeweb_back.upload_file;
 describe("missing files selector", () => {
   const pinia = setupActivePinia();
   const geodeStore = useGeodeStore();
-  geodeStore.base_url = "";
+  geodeStore.base_url = "/";
 
   test("select file", async () => {
     geodeStore.request = vi.fn((schema, params, callbacks) => {
@@ -57,6 +57,7 @@ describe("missing files selector", () => {
       writable: true,
     });
     await v_file_input.trigger("change");
+    await flushPromises();
     const v_btn = file_uploader.findComponent(components.VBtn);
 
     registerEndpoint(upload_file_schema.$id, {

package/tests/unit/components/ObjectSelector.nuxt.test.js

@@ -19,7 +19,7 @@ const { allowed_objects } = schemas.opengeodeweb_back;
 describe("object selector", () => {
   const pinia = setupActivePinia();
   const geodeStore = useGeodeStore();
-  geodeStore.base_url = "";
+  geodeStore.base_url = "/";
 
   test("loadable with one class", async () => {
     const response = {

package/tests/unit/components/PackagesVersions.nuxt.test.js

@@ -11,7 +11,7 @@ describe("packages versions", () => {
   test("mount", async () => {
     const pinia = setupActivePinia();
     const geodeStore = useGeodeStore();
-    geodeStore.base_url = "";
+    geodeStore.base_url = "/";
 
     const schema = {
       $id: "/versions",