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

package/app/components/DragAndDropInternal/DragAndDropInline.vue

@@ -1,22 +1,35 @@
-<script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+<script setup lang="ts">
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 
-const { isDragging, loading, texts, accept, showExtensions } = defineProps({
-  isDragging: { type: Boolean, required: true },
-  loading: { type: Boolean, required: true },
-  texts: {
-    type: Object,
-    default: () => ({
-      idle: "Click or drag and drop",
-      drop: "Drop files here",
-      loading: "Loading...",
-    }),
+interface DragAndDropTexts {
+  idle: string;
+  drop: string;
+  loading: string;
+}
+
+interface Props {
+  isDragging: boolean;
+  loading: boolean;
+  texts?: DragAndDropTexts;
+  accept?: string | string[];
+  showExtensions: boolean;
+}
+
+const {
+  isDragging,
+  loading,
+  texts = {
+    idle: "Click or drag and drop",
+    drop: "Drop files here",
+    loading: "Loading...",
   },
-  accept: { type: [String, Array], default: "" },
-  showExtensions: { type: Boolean, required: true },
-});
+  accept = "",
+  showExtensions,
+} = defineProps<Props>();
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits<{
+  click: [];
+}>();
 </script>
 
 <template>

package/app/components/DragAndDropInternal/DragAndDropOverlay.vue

@@ -1,22 +1,35 @@
-<script setup>
-const { isDragging, showOverlay, fullscreen, loading, texts, multiple, accept, showExtensions } =
-  defineProps({
-    isDragging: { type: Boolean, required: true },
-    showOverlay: { type: Boolean, required: true },
-    fullscreen: { type: Boolean, required: true },
-    loading: { type: Boolean, required: true },
-    texts: {
-      type: Object,
-      default: () => ({
-        idle: "Click or drag and drop",
-        drop: "Drop files here",
-        loading: "Loading...",
-      }),
-    },
-    multiple: { type: Boolean, required: true },
-    accept: { type: [String, Array], default: "" },
-    showExtensions: { type: Boolean, required: true },
-  });
+<script setup lang="ts">
+interface DragAndDropTexts {
+  idle: string;
+  drop: string;
+  loading: string;
+}
+
+interface Props {
+  isDragging: boolean;
+  showOverlay: boolean;
+  fullscreen: boolean;
+  loading: boolean;
+  texts?: DragAndDropTexts;
+  multiple: boolean;
+  accept?: string | string[];
+  showExtensions: boolean;
+}
+
+const {
+  isDragging,
+  showOverlay,
+  fullscreen,
+  loading,
+  texts = {
+    idle: "Click or drag and drop",
+    drop: "Drop files here",
+    loading: "Loading...",
+  },
+  multiple,
+  accept = "",
+  showExtensions,
+} = defineProps<Props>();
 </script>
 
 <template>

package/app/components/ExtensionSelector.vue

@@ -1,17 +1,25 @@
-<script setup>
+<script setup lang="ts">
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 
-import FetchingData from "@ogw_front/components/FetchingData";
+import FetchingData from "@ogw_front/components/FetchingData.vue";
 import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.geode_objects_and_output_extensions;
-const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
+const emit = defineEmits<{
+  update_values: [values: { output_geode_object: string; output_extension: string }];
+  increment_step: [];
+  decrement_step: [];
+}>();
 
-const { geodeObjectType, filenames } = defineProps({
-  geodeObjectType: { type: String, required: true },
-  filenames: { type: Array, required: true },
-});
-const geode_objects_and_output_extensions = ref({});
+interface Props {
+  geodeObjectType: string;
+  filenames: string[];
+}
+
+const { geodeObjectType, filenames } = defineProps<Props>();
+type OutputExtensions = Record<string, { is_saveable: boolean }>;
+
+const geode_objects_and_output_extensions = ref<Record<string, OutputExtensions>>({});
 const loading = ref(false);
 
 const toggle_loading = useToggle(loading);
@@ -20,22 +28,30 @@ async function get_output_file_extensions() {
   toggle_loading();
   geode_objects_and_output_extensions.value = {};
   const backStore = useBackStore();
-  const values = await Promise.all(
-    filenames.map(async (filename) => {
+  const values: Record<string, OutputExtensions>[] = await Promise.all(
+    filenames.map(async (filename): Promise<Record<string, OutputExtensions>> => {
       const params = { geode_object_type: geodeObjectType, filename };
       const response = await backStore.request({ schema, params });
-      return response.geode_objects_and_output_extensions;
+      return (
+        response as {
+          geode_objects_and_output_extensions: Record<string, OutputExtensions>;
+        }
+      ).geode_objects_and_output_extensions;
     }),
   );
   const all_keys = [...new Set(values.flatMap((value) => Object.keys(value)))];
   const common_keys = all_keys.filter((i) => !values.some((j) => !Object.keys(j).includes(i)));
-  const final_object = {};
+  const final_object: Record<string, OutputExtensions> = {};
   for (const key of common_keys) {
     final_object[key] = {};
     for (const value of values) {
-      for (const extension of Object.keys(value[key])) {
+      const extensions = value[key];
+      if (!extensions) {
+        continue;
+      }
+      for (const extension of Object.keys(extensions)) {
         final_object[key][extension] = {
-          is_saveable: value[key][extension].is_saveable,
+          is_saveable: extensions[extension]!.is_saveable,
         };
       }
     }
@@ -44,7 +60,7 @@ async function get_output_file_extensions() {
   toggle_loading();
 }
 
-function update_values(output_geode_object, output_extension) {
+function update_values(output_geode_object: string, output_extension: string) {
   if (output_geode_object !== "" && output_extension !== "") {
     emit("update_values", {
       output_geode_object,
@@ -67,7 +83,7 @@ await get_output_file_extensions();
       class="justify-left"
     >
       <v-card class="card ma-2 pa-2" width="100%">
-        <v-card-title v-tooltip:bottom="`Export as a ${output_geode_object}`" v-bind="props">
+        <v-card-title v-tooltip:bottom="`Export as a ${output_geode_object}`">
           {{ output_geode_object }}
         </v-card-title>
         <v-card-text>

package/app/components/FeedBack/ErrorBanner.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
 
 const feedbackStore = useFeedbackStore();
@@ -18,7 +18,6 @@ function reload() {
     <v-row>
       <v-col cols="auto" class="text-white text-center">
         <v-icon
-          v-bind="props"
           color="white"
           class="justify-right"
           v-tooltip:bottom="'We turn off our server automatically after 5 minutes of inactivity'"

package/app/components/FeedBack/Snackers.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
 
 const MARGIN_BETWEEN_SNACKERS = 60;
@@ -7,7 +7,7 @@ const FIRST_SNACKER_MARGIN = 8;
 const feedbackStore = useFeedbackStore();
 const show = ref(true);
 
-function calc_margin(index) {
+function calc_margin(index: number) {
   return `${index * MARGIN_BETWEEN_SNACKERS + FIRST_SNACKER_MARGIN}px`;
 }
 </script>
@@ -15,7 +15,7 @@ function calc_margin(index) {
 <template>
   <v-snackbar
     v-for="(feedback, index) in feedbackStore.feedbacks"
-    :key="feedback"
+    :key="feedback.id"
     v-model="show"
     :style="{ 'margin-bottom': calc_margin(index) }"
     :color="feedback.type"

package/app/components/FetchingData.vue

@@ -1,22 +1,18 @@
-<script setup>
+<script setup lang="ts">
 const DEFAULT_SIZE = 22;
 const DEFAULT_WIDTH = 3;
 
+interface Props {
+  text?: string;
+  size?: number | string;
+  width?: number | string;
+}
+
 const {
   text = "Fetching data...",
   size = DEFAULT_SIZE,
   width = DEFAULT_WIDTH,
-} = defineProps({
-  text: {
-    type: String,
-  },
-  size: {
-    type: [Number, String],
-  },
-  width: {
-    type: [Number, String],
-  },
-});
+} = defineProps<Props>();
 </script>
 
 <template>

package/app/components/FileSelector.vue

@@ -1,20 +1,26 @@
-<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";
 
 const schema = schemas.opengeodeweb_back.allowed_files;
 
-const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
+const emit = defineEmits<{
+  update_values: [values: { files: unknown[]; autoUpload: boolean }];
+  increment_step: [];
+  decrement_step: [];
+}>();
 
-const { multiple, files, autoUpload, showOverlay } = defineProps({
-  multiple: { type: Boolean, required: true },
-  files: { type: Array, default: () => [] },
-  autoUpload: { type: Boolean, default: true },
-  showOverlay: { type: Boolean, default: true },
-});
+interface Props {
+  multiple: boolean;
+  files?: File[];
+  autoUpload?: boolean;
+  showOverlay?: boolean;
+}
+
+const { multiple, files = [], autoUpload = true, showOverlay = true } = defineProps<Props>();
 
 const internal_files = ref(files);
 const internal_auto_upload = ref(autoUpload);
@@ -37,7 +43,7 @@ watch(
 
 const toggle_loading = useToggle(loading);
 
-function files_uploaded_event(value) {
+function files_uploaded_event(value: unknown[]) {
   if (value.length > 0) {
     emit("update_values", { files: value, autoUpload: false });
     emit("increment_step");
@@ -47,7 +53,9 @@ function files_uploaded_event(value) {
 async function get_allowed_files() {
   toggle_loading();
   const backStore = useBackStore();
-  const response = await backStore.request({ schema });
+  const response = (await backStore.request({ schema })) as {
+    extensions: string[];
+  };
   accept.value = response.extensions.map((extension) => `.${extension}`).join(",");
   toggle_loading();
 }

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 dragAndDropRef = useTemplateRef("dragAndDropRef");
 const csv_dialog = ref(false);
-const current_csv_file = ref(undefined);
+const current_csv_file = ref<UploadFile | undefined>(undefined);
 const current_csv_index = ref(-1);
 const loading = ref(false);
 const files_uploaded = ref(false);
 const toggle_loading = useToggle(loading);
 
-function isCsv(file) {
+function isCsv(file: UploadFile) {
   return file.name.toLowerCase().endsWith(".csv");
 }
 
-function openCsvPreviewer(file, index) {
+function openCsvPreviewer(file: UploadFile, index: number) {
   current_csv_file.value = file;
   current_csv_index.value = index;
   csv_dialog.value = true;
 }
 
-async function onCsvConfirm(result) {
+async function onCsvConfirm(result: unknown) {
+  // 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[]) {
   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) {
   internal_files.value.splice(index, 1);
   if (internal_files.value.length === 0) {
     files_uploaded.value = false;

package/app/components/GlassCard.vue

@@ -1,18 +1,22 @@
-<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));

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,9 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const DEFAULT_ELEMENT_HEIGHT = 100;
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits<{
+  click: [event: PointerEvent];
+}>();
 
 const container = useTemplateRef("viewer");
 const hybridViewerStore = useHybridViewerStore();
@@ -22,9 +24,9 @@ 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 debounce<Callback extends (...args: unknown[]) => void>(func: Callback, wait: number) {
+  let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+  return function executedFunction(...args: Parameters<Callback>) {
     function later() {
       clearTimeout(timeout);
       func(...args);
@@ -46,17 +48,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) {
   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 +75,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,19 +1,15 @@
-<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();
 
@@ -86,7 +82,7 @@ const sortedAttributes = computed(() => {
   );
 });
 
-function capitalize(val) {
+function capitalize(val: 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(() => {
+  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) {
   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,16 +1,18 @@
-<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) {