@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.21

package/app/components/FileUploader.vue

@@ -1,46 +1,64 @@
-<script setup>
+<script setup lang="ts">
 import { useBackStore } from "@ogw_front/stores/back";
 
-import CsvPreviewer from "@ogw_front/components/csv-preview/CsvPreviewer";
-import DragAndDrop from "@ogw_front/components/DragAndDrop";
+import CsvPreviewer from "@ogw_front/components/csv-preview/CsvPreviewer.vue";
+import DragAndDrop from "@ogw_front/components/DragAndDrop.vue";
 
-const emit = defineEmits(["files_uploaded", "decrement_step", "reset_values"]);
+// Files carry extra app-specific bookkeeping fields once picked up here.
+type UploadFile = File & { isConfigured?: boolean; displayName?: string };
 
-const { multiple, accept, files, autoUpload, showOverlay, mini } = defineProps({
-  multiple: { type: Boolean, default: false },
-  accept: { type: [String, Array], default: "" },
-  files: { type: Array, default: () => [] },
-  autoUpload: { type: Boolean, default: true },
-  showOverlay: { type: Boolean, default: false },
-  mini: { type: Boolean, default: false },
-});
+const emit = defineEmits<{
+  files_uploaded: [files: UploadFile[]];
+  decrement_step: [];
+  reset_values: [];
+}>();
+
+interface Props {
+  multiple?: boolean;
+  accept?: string | string[];
+  files?: UploadFile[];
+  autoUpload?: boolean;
+  showOverlay?: boolean;
+  mini?: boolean;
+}
+
+const {
+  multiple = false,
+  accept = "",
+  files = [],
+  autoUpload = true,
+  showOverlay = false,
+  mini = false,
+} = defineProps<Props>();
 
 const backStore = useBackStore();
-const internal_files = ref(files);
+const internal_files = ref<UploadFile[]>(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 csv_dialog = ref<boolean>(false);
+const current_csv_file = ref<UploadFile | undefined>(undefined);
+const current_csv_index = ref<number>(-1);
+const loading = ref<boolean>(false);
+const files_uploaded = ref<boolean>(false);
 const toggle_loading = useToggle(loading);
 
-function isCsv(file) {
+function isCsv(file: UploadFile): boolean {
   return file.name.toLowerCase().endsWith(".csv");
 }
 
-function openCsvPreviewer(file, index) {
+function openCsvPreviewer(file: UploadFile, index: number): void {
   current_csv_file.value = file;
   current_csv_index.value = index;
   csv_dialog.value = true;
 }
 
-async function onCsvConfirm(result) {
+async function onCsvConfirm(result: unknown): Promise<void> {
+  // Only reachable while the CsvPreviewer dialog (gated on current_csv_file) is open.
+  const currentFile = current_csv_file.value;
+  if (!currentFile) {
+    return;
+  }
   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 base_name = currentFile.name.slice(0, currentFile.name.lastIndexOf("."));
   const json_filename = `${base_name}.json`;
 
   const blob = new Blob([json_content], { type: "application/json" });
@@ -48,21 +66,24 @@ async function onCsvConfirm(result) {
     type: "application/json",
   });
 
-  current_csv_file.value.isConfigured = true;
+  currentFile.isConfigured = true;
   await backStore.upload(json_file);
   internal_files.value = [...internal_files.value];
   csv_dialog.value = false;
 }
 
-function processSelectedFiles(selected_files) {
+function processSelectedFiles(selected_files: UploadFile[]): void {
   if (multiple) {
     internal_files.value = [...internal_files.value, ...selected_files];
   } else {
-    internal_files.value = [selected_files[0]];
+    const [firstFile] = selected_files;
+    if (firstFile) {
+      internal_files.value = [firstFile];
+    }
   }
 }
 
-function removeFile(index) {
+function removeFile(index: number): void {
   internal_files.value.splice(index, 1);
   if (internal_files.value.length === 0) {
     files_uploaded.value = false;
@@ -70,7 +91,7 @@ function removeFile(index) {
   }
 }
 
-async function upload_files() {
+async function upload_files(): Promise<void> {
   toggle_loading();
   const promise_array = internal_files.value.map((file) => backStore.upload(file));
   await Promise.all(promise_array);

package/app/components/GlassCard.vue

@@ -1,21 +1,25 @@
-<script setup>
+<script setup lang="ts">
 import { computed, useAttrs } from "vue";
 import { onKeyStroke } from "@vueuse/core";
 
-const { variant, rounded, padding, theme, escapeFunction } = defineProps({
-  variant: {
-    type: String,
-    default: "panel",
-    validator: (valid) => ["panel", "ui"].includes(valid),
-  },
-  rounded: { type: String, default: "xl" },
-  padding: { type: String, default: "pa-6" },
-  theme: { type: String, default: undefined },
-  escapeFunction: { type: Function, default: undefined },
-});
+interface Props {
+  variant?: "panel" | "ui";
+  rounded?: string;
+  padding?: string;
+  theme?: string;
+  escapeFunction?: () => void;
+}
+
+const {
+  variant = "panel",
+  rounded = "xl",
+  padding = "pa-6",
+  theme = undefined,
+  escapeFunction = undefined,
+} = defineProps<Props>();
 
 const attrs = useAttrs();
-const isInteractive = computed(() => Boolean(attrs.onClick));
+const isInteractive = computed<boolean>(() => Boolean(attrs.onClick));
 
 onKeyStroke("Escape", () => {
   if (escapeFunction) {

package/app/components/HybridRenderingView.vue

@@ -1,7 +1,7 @@
-<script setup>
+<script setup lang="ts">
 import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker.vue";
-import HybridViewerTooltip from "@ogw_front/components/HybridViewerTooltip";
-import ViewToolbar from "@ogw_front/components/ViewToolbar";
+import HybridViewerTooltip from "@ogw_front/components/HybridViewerTooltip.vue";
+import ViewToolbar from "@ogw_front/components/ViewToolbar.vue";
 
 import { useDataStore } from "@ogw_front/stores/data";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -11,7 +11,11 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const DEFAULT_ELEMENT_HEIGHT = 100;
 
-const emit = defineEmits(["click"]);
+interface Emits {
+  click: [event: PointerEvent];
+}
+
+const emit = defineEmits<Emits>();
 
 const container = useTemplateRef("viewer");
 const hybridViewerStore = useHybridViewerStore();
@@ -22,10 +26,10 @@ const dataStore = useDataStore();
 const { width: elementWidth, height: elementHeight } = useElementSize(container);
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 
-function debounce(func, wait) {
-  let timeout = undefined;
-  return function executedFunction(...args) {
-    function later() {
+function debounce<Callback extends (...args: unknown[]) => void>(func: Callback, wait: number) {
+  let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+  return function executedFunction(...args: Parameters<Callback>): void {
+    function later(): void {
       clearTimeout(timeout);
       func(...args);
     }
@@ -46,17 +50,26 @@ onMounted(async () => {
   if (import.meta.client) {
     await hybridViewerStore.initHybridViewer();
     await nextTick();
-    hybridViewerStore.setContainer(container);
+    // UseTemplateRef's inferred type is broader than the { $el: HTMLElement } shape
+    // SetContainer expects; this element is only ever a component instance with $el
+    // (see the `containerEl.$el` usages below).
+    hybridViewerStore.setContainer(container as never);
     debouncedResize();
   }
 });
 
 const { pickColormap, quickColormap } = useQuickColormap();
 
-async function handleClick(event) {
+async function handleClick(event: PointerEvent): Promise<void> {
   const { offsetX, offsetY, clientX, clientY } = event;
+  // Only ever fired from the pointerup handler bound to this same element.
+  const containerEl = container.value;
+  if (!containerEl) {
+    return;
+  }
+
   if (hybridViewerStore.is_ruler_active) {
-    const rect = container.value.$el.getBoundingClientRect();
+    const rect = containerEl.$el.getBoundingClientRect();
     const x = event.clientX - rect.left;
     const y = elementHeight.value - (event.clientY - rect.top);
     await hybridViewerStore.handleRulerClick(x, y);
@@ -64,7 +77,7 @@ async function handleClick(event) {
   }
 
   if (viewerStore.picking_mode) {
-    const rect = container.value.$el.getBoundingClientRect();
+    const rect = containerEl.$el.getBoundingClientRect();
     const x = event.clientX - rect.left;
     const y = elementHeight.value - (event.clientY - rect.top);
     await viewerStore.set_picked_point(x, y);

package/app/components/HybridViewerTooltip.vue

@@ -1,26 +1,22 @@
-<script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+<script setup lang="ts">
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const TOOLTIP_SCREEN_MARGIN = 10;
 
-const { containerWidth, containerHeight } = defineProps({
-  containerWidth: {
-    type: Number,
-    required: true,
-  },
-  containerHeight: {
-    type: Number,
-    required: true,
-  },
-});
+interface Props {
+  containerWidth: number;
+  containerHeight: number;
+}
+
+const { containerWidth, containerHeight } = defineProps<Props>();
 
 const hybridViewerStore = useHybridViewerStore();
 
 const tooltipRef = useTemplateRef("tooltip");
 const { width: tooltipWidth, height: tooltipHeight } = useElementSize(tooltipRef);
 
-const tooltipStyle = computed(() => {
+const tooltipStyle = computed<Record<string, string>>(() => {
   if (!hybridViewerStore.hoverData) {
     return {};
   }
@@ -52,7 +48,7 @@ const tooltipStyle = computed(() => {
   };
 });
 
-const originalIndex = computed(() => {
+const originalIndex = computed<number | undefined>(() => {
   const attributes = hybridViewerStore.hoverData?.attributes || {};
   const originalId =
     attributes.vtkOriginalCellIds ??
@@ -69,14 +65,14 @@ const RESERVED_ATTRIBUTE_KEYS = new Set([
   "vtkOriginalPointIds",
 ]);
 
-const hasOtherAttributes = computed(() => {
+const hasOtherAttributes = computed<boolean>(() => {
   const attributes = hybridViewerStore.hoverData?.attributes || {};
   return Object.keys(attributes).some(
     (key) => key !== "vtkOriginalCellIds" && key !== "vtkOriginalPointIds",
   );
 });
 
-const sortedAttributes = computed(() => {
+const sortedAttributes = computed<[string, unknown][]>(() => {
   const attributes = hybridViewerStore.hoverData?.attributes || {};
   return (
     Object.entries(attributes)
@@ -86,7 +82,7 @@ const sortedAttributes = computed(() => {
   );
 });
 
-function capitalize(val) {
+function capitalize(val: string): string {
   if (!val) {
     return "";
   }
@@ -94,7 +90,17 @@ function capitalize(val) {
   return spaced.charAt(0).toUpperCase() + spaced.slice(1);
 }
 
-function formatAttributeValue(val) {
+const fieldTypeLabel = computed<string>(() => {
+  const fieldType = hybridViewerStore.hoverData?.fieldType;
+  return typeof fieldType === "string" ? capitalize(fieldType.toLowerCase()) : "";
+});
+
+const coordinates = computed<number[] | undefined>(() => {
+  const value = hybridViewerStore.hoverData?.attributes.coordinates;
+  return Array.isArray(value) ? (value as number[]) : undefined;
+});
+
+function formatAttributeValue(val: unknown): string {
   if (Array.isArray(val)) {
     const formattedValues = val.map((value) => {
       if (typeof value === "number") {
@@ -134,7 +140,7 @@ function formatAttributeValue(val) {
               hybridViewerStore.hoverData.component?.id ||
               hybridViewerStore.hoverData.blockName ||
               hybridViewerStore.hoverData.modelName ||
-              `${capitalize(hybridViewerStore.hoverData.fieldType.toLowerCase())} #${hybridViewerStore.hoverData.pickedId}`
+              `${fieldTypeLabel} #${hybridViewerStore.hoverData.pickedId}`
             }}
           </span>
         </v-col>
@@ -160,15 +166,11 @@ function formatAttributeValue(val) {
       <template v-if="hasOtherAttributes">
         <v-divider class="my-2" opacity="0.15" />
         <v-row no-gutters class="flex-column ga-1">
-          <v-col
-            v-if="hybridViewerStore.hoverData.attributes.coordinates"
-            class="d-flex justify-space-between ga-3"
-          >
+          <v-col v-if="coordinates" class="d-flex justify-space-between ga-3">
             <span class="tooltip-label">Position:</span>
             <span class="tooltip-value font-mono">
-              [ {{ Number(hybridViewerStore.hoverData.attributes.coordinates[0]).toFixed(3) }},
-              {{ Number(hybridViewerStore.hoverData.attributes.coordinates[1]).toFixed(3) }},
-              {{ Number(hybridViewerStore.hoverData.attributes.coordinates[2]).toFixed(3) }} ]
+              [ {{ Number(coordinates[0]).toFixed(3) }}, {{ Number(coordinates[1]).toFixed(3) }},
+              {{ Number(coordinates[2]).toFixed(3) }} ]
             </span>
           </v-col>
           <template v-for="[name, val] in sortedAttributes" :key="name">

package/app/components/InfraConnected.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useInfraStore } from "@ogw_front/stores/infra";
 
 const infraStore = useInfraStore();

package/app/components/Launcher.vue

@@ -1,23 +1,25 @@
-<script setup>
-import Loading from "@ogw_front/components/Loading";
-import Recaptcha from "@ogw_front/components/Recaptcha";
+<script setup lang="ts">
+import Loading from "@ogw_front/components/Loading.vue";
+import Recaptcha from "@ogw_front/components/Recaptcha.vue";
 import { Status } from "@ogw_front/utils/status";
 import { appMode } from "@ogw_shared/app_mode";
 import { useInfraStore } from "@ogw_front/stores/infra";
 
-const { appName, email, isUserAuthenticated, logo } = defineProps({
-  appName: { type: String, required: true },
-  email: { type: String, default: undefined },
-  isUserAuthenticated: { type: Boolean, default: false },
-  logo: { type: String, required: false, default: "" },
-});
+interface Props {
+  appName: string;
+  email?: string;
+  isUserAuthenticated?: boolean;
+  logo?: string;
+}
+
+const { appName, email = undefined, isUserAuthenticated = false, logo = "" } = defineProps<Props>();
 
 const infraStore = useInfraStore();
 if (infraStore.app_mode !== appMode.CLOUD) {
   infraStore.create_backend();
 }
 
-function cloudCreateBackend() {
+function cloudCreateBackend(): Promise<void> {
   return infraStore.create_backend(email);
 }
 </script>

package/app/components/Loading/EcoMessages.vue

@@ -1,12 +1,17 @@
-<script setup>
-const { appName } = defineProps({
-  appName: {
-    type: String,
-    required: true,
-  },
-});
+<script setup lang="ts">
+interface Props {
+  appName: string;
+}
+
+const { appName } = defineProps<Props>();
 
-const ecoMessages = computed(() => [
+interface EcoMessage {
+  icon: string;
+  title: string;
+  message: string;
+}
+
+const ecoMessages = computed<EcoMessage[]>(() => [
   {
     icon: "mdi-leaf",
     title: "Why the wait?",
@@ -25,8 +30,14 @@ const ecoMessages = computed(() => [
 ]);
 
 const MESSAGE_INTERVAL_MS = 5000;
-const currentMessage = ref(0);
-let interval = undefined;
+const currentMessage = ref<number>(0);
+let interval: ReturnType<typeof setInterval> | undefined = undefined;
+
+// Fallback only guards against noUncheckedIndexedAccess; currentMessage is always kept in range by the modulo below, so it is never actually used.
+const FALLBACK_ECO_MESSAGE = { icon: "", title: "", message: "" };
+const currentEcoMessage = computed<EcoMessage>(
+  () => ecoMessages.value[currentMessage.value] ?? FALLBACK_ECO_MESSAGE,
+);
 
 onMounted(() => {
   interval = setInterval(() => {
@@ -54,18 +65,18 @@ onUnmounted(() => {
           class="d-flex align-center ga-3 pa-0 mb-2 mb-sm-3 text-body-1 text-sm-subtitle-1 font-weight-bold text-white text-wrap"
         >
           <v-icon
-            :icon="ecoMessages[currentMessage].icon"
+            :icon="currentEcoMessage.icon"
             color="white"
             size="22"
             style="filter: drop-shadow(0 0 6px rgba(var(--v-theme-primary), 0.6))"
           />
-          {{ ecoMessages[currentMessage].title }}
+          {{ currentEcoMessage.title }}
         </v-card-title>
         <v-card-text
           class="pa-0 text-body-2 text-white text-left"
           style="opacity: 0.85; line-height: 1.7"
         >
-          {{ ecoMessages[currentMessage].message }}
+          {{ currentEcoMessage.message }}
         </v-card-text>
       </v-card>
     </v-scroll-y-reverse-transition>

package/app/components/Loading/Header.vue

@@ -1,10 +1,9 @@
-<script setup>
-const { logo } = defineProps({
-  logo: {
-    type: String,
-    default: "",
-  },
-});
+<script setup lang="ts">
+interface Props {
+  logo?: string;
+}
+
+const { logo = "" } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Loading/Progress.vue

@@ -1,10 +1,9 @@
-<script setup>
-const { progress } = defineProps({
-  progress: {
-    type: Number,
-    required: true,
-  },
-});
+<script setup lang="ts">
+interface Props {
+  progress: number;
+}
+
+const { progress } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Loading.vue

@@ -1,17 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import { Status } from "@ogw_front/utils/status";
 import { useInfraStore } from "@ogw_front/stores/infra";
 
-const { logo, appName } = defineProps({
-  logo: {
-    type: String,
-    default: "",
-  },
-  appName: {
-    type: String,
-    required: true,
-  },
-});
+interface Props {
+  logo?: string;
+  appName: string;
+}
+
+const { logo = "", appName } = defineProps<Props>();
 
 const infraStore = useInfraStore();
 
@@ -19,10 +15,10 @@ const extensionStores = computed(() =>
   infraStore.microservices.filter((store) => store.$id !== "back" && store.$id !== "viewer"),
 );
 
-const show = ref(false);
-const progress = ref(0);
+const show = ref<boolean>(false);
+const progress = ref<number>(0);
 
-let progressInterval = undefined;
+let progressInterval: ReturnType<typeof setInterval> | undefined = undefined;
 
 const PROGRESS_THRESHOLD = 90;
 const MAX_PROGRESS = 99;

package/app/components/MissingFilesSelector.vue

@@ -1,45 +1,61 @@
-<script setup>
+<script setup lang="ts">
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
-import FetchingData from "@ogw_front/components/FetchingData";
-import FileUploader from "@ogw_front/components/FileUploader";
+import FetchingData from "@ogw_front/components/FetchingData.vue";
+import FileUploader from "@ogw_front/components/FileUploader.vue";
 import { useBackStore } from "@ogw_front/stores/back";
 
+// Files carry extra app-specific bookkeeping fields once picked up here.
+type UploadFile = File & { isConfigured?: boolean };
+interface FilePlan {
+  has_missing_files: boolean;
+  mandatory_files: string[];
+  additional_files: string[];
+}
+
 const schema = schemas.opengeodeweb_back.missing_files;
 
-const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
+interface Emits {
+  update_values: [value: { additional_files: UploadFile[] }];
+  increment_step: [];
+  decrement_step: [];
+}
+
+const emit = defineEmits<Emits>();
+
+interface Props {
+  multiple: boolean;
+  geodeObjectType: string;
+  filenames: string[];
+  files?: UploadFile[];
+}
 
-const { multiple, geodeObjectType, filenames, files } = defineProps({
-  multiple: { type: Boolean, required: true },
-  geodeObjectType: { type: String, required: true },
-  filenames: { type: Array, required: true },
-  files: { type: Array, required: false, default: () => [] },
-});
+const { multiple, geodeObjectType, filenames, files = [] } = defineProps<Props>();
 
-const accept = ref("");
-const loading = ref(false);
-const has_missing_files = ref(false);
-const mandatory_files = ref([]);
-const additional_files = ref([]);
+const accept = ref<string>("");
+const loading = ref<boolean>(false);
+const has_missing_files = ref<boolean>(false);
+const mandatory_files = ref<string[]>([]);
+const additional_files = ref<string[]>([]);
 const toggle_loading = useToggle(loading);
 
-function files_uploaded_event(value) {
+function files_uploaded_event(value: UploadFile[]): void {
   emit("update_values", { additional_files: value });
   emit("increment_step");
 }
 
-function isCsvFile(filename) {
+function isCsvFile(filename: string): boolean {
   return filename.toLowerCase().endsWith(".csv") || filename.toLowerCase().endsWith(".csv.json");
 }
 
-async function missing_files() {
+async function missing_files(): Promise<void> {
   toggle_loading();
   has_missing_files.value = false;
   mandatory_files.value = [];
   additional_files.value = [];
   const backStore = useBackStore();
 
-  const promise_array = filenames.map((filename) => {
+  const promise_array: Promise<FilePlan>[] = filenames.map((filename): Promise<FilePlan> => {
     if (isCsvFile(filename)) {
       return Promise.resolve({
         has_missing_files: false,