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

package/app/components/Loading/EcoMessages.vue

@@ -1,10 +1,9 @@
-<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(() => [
   {
@@ -26,7 +25,13 @@ const ecoMessages = computed(() => [
 
 const MESSAGE_INTERVAL_MS = 5000;
 const currentMessage = ref(0);
-let interval = undefined;
+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(
+  () => ecoMessages.value[currentMessage.value] ?? FALLBACK_ECO_MESSAGE,
+);
 
 onMounted(() => {
   interval = setInterval(() => {
@@ -54,18 +59,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();
 
@@ -22,7 +18,7 @@ const extensionStores = computed(() =>
 const show = ref(false);
 const progress = ref(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,34 +1,48 @@
-<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 };
+type 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"]);
+const emit = defineEmits<{
+  update_values: [value: { additional_files: UploadFile[] }];
+  increment_step: [];
+  decrement_step: [];
+}>();
+
+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 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[]) {
   emit("update_values", { additional_files: value });
   emit("increment_step");
 }
 
-function isCsvFile(filename) {
+function isCsvFile(filename: string) {
   return filename.toLowerCase().endsWith(".csv") || filename.toLowerCase().endsWith(".csv.json");
 }
 
@@ -39,7 +53,7 @@ async function missing_files() {
   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,

package/app/components/ObjectSelector.vue

@@ -1,27 +1,38 @@
-<script setup>
+<script setup lang="ts">
+// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
+// oxlint-disable eslint/sort-imports
 import FetchingData from "@ogw_front/components/FetchingData.vue";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
 import { resolveAllowedObjects } from "@ogw_shared/utils/response_handlers/load.js";
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 import { useBackStore } from "@ogw_front/stores/back";
 
+// Mirrors the (unexported) shape produced by shared/utils/response_handlers/load.ts.
+type AllowedObject = { is_loadable: number; object_priority?: number };
+type AllowedObjectMap = Record<string, AllowedObject>;
+
 const schema = schemas.opengeodeweb_back.allowed_objects;
 
-const emit = defineEmits(["update_values", "increment_step"]);
+const emit = defineEmits<{
+  update_values: [value: { geode_object_type: string }];
+  increment_step: [];
+}>();
+
+interface Props {
+  filenames: string[];
+}
 
-const { filenames } = defineProps({
-  filenames: { type: Array, required: true },
-});
+const { filenames } = defineProps<Props>();
 
 const backStore = useBackStore();
 
 const loading = ref(false);
-const allowedGeodeObjects = ref({});
+const allowedGeodeObjects = ref<AllowedObjectMap>({});
 const toggleLoading = useToggle(loading);
 const multipleFilesNoCommon = ref(false);
 
-async function fetchAllowedObjectsList() {
-  const promiseArray = filenames.map((filename) => {
+async function fetchAllowedObjectsList(): Promise<AllowedObjectMap[]> {
+  const promiseArray = filenames.map((filename): Promise<{ allowed_objects: AllowedObjectMap }> => {
     const params = { filename };
     return backStore.request({ schema, params });
   });
@@ -29,13 +40,24 @@ async function fetchAllowedObjectsList() {
   return responses.map((response) => response.allowed_objects);
 }
 
-function setGeodeObject(geode_object_type) {
+function setGeodeObject(geode_object_type: string | undefined) {
   if (geode_object_type) {
     emit("update_values", { geode_object_type });
     emit("increment_step");
   }
 }
 
+// The geode_objects lookup is fixed and keyed by known object type names; a missing entry only happens if the backend reports a type this table doesn't know about.
+function geodeObjectTooltip(key: string, isLoadable: boolean) {
+  return isLoadable
+    ? (geode_objects[key]?.tooltip ?? key)
+    : `Data not loadable with this class (${key})`;
+}
+
+function geodeObjectImage(key: string) {
+  return geode_objects[key]?.image;
+}
+
 async function getAllowedGeodeObjects() {
   toggleLoading();
   allowedGeodeObjects.value = {};
@@ -59,14 +81,7 @@ await getAllowedGeodeObjects();
   <FetchingData v-if="loading" />
   <v-row v-else-if="Object.keys(allowedGeodeObjects).length" class="justify-left">
     <v-col v-for="(value, key) in allowedGeodeObjects" :key="key" cols="3" md="4">
-      <v-tooltip
-        :text="
-          value['is_loadable']
-            ? geode_objects[key].tooltip
-            : `Data not loadable with this class (${key})`
-        "
-        location="bottom"
-      >
+      <v-tooltip :text="geodeObjectTooltip(key, Boolean(value['is_loadable']))" location="bottom">
         <template v-slot:activator="{ props }">
           <span v-bind="props">
             <v-card
@@ -79,7 +94,7 @@ await getAllowedGeodeObjects();
               :elevation="value['is_loadable'] ? 5 : 3"
             >
               <v-img
-                :src="geode_objects[key].image"
+                :src="geodeObjectImage(key)"
                 cover
                 :class="!value['is_loadable'] ? 'disabled' : undefined"
               />

package/app/components/PackagesVersions.vue

@@ -1,20 +1,27 @@
-<script setup>
+<script setup lang="ts">
+// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
+// oxlint-disable eslint/sort-imports
 import { Status } from "@ogw_front/utils/status";
 import { useBackStore } from "@ogw_front/stores/back";
+import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 
-const { schema } = defineProps({
-  schema: { type: Object, required: true },
-});
+interface Props {
+  schema: JsonRpcSchema;
+}
+
+const { schema } = defineProps<Props>();
+
+type PackageVersion = { package: string; version: string };
 
 const backStore = useBackStore();
-const packages_versions = ref([]);
+const packages_versions = ref<PackageVersion[]>([]);
 
 async function get_packages_versions() {
   await backStore.request(
     { schema },
     {
-      response_function: (response) => {
-        packages_versions.value = response.versions;
+      response_function: (response: unknown) => {
+        packages_versions.value = (response as { versions: PackageVersion[] }).versions;
       },
     },
   );

package/app/components/Recaptcha.vue

@@ -1,36 +1,30 @@
-<script setup>
+<script setup lang="ts">
 import { useInfraStore } from "@ogw_front/stores/infra";
 
-const { buttonLabel, buttonColor, color } = defineProps({
-  buttonLabel: {
-    type: String,
-    required: false,
-    default: "Load the app",
-  },
-  buttonColor: {
-    type: String,
-    required: false,
-    default: "white",
-  },
-  color: {
-    type: String,
-    required: false,
-    default: undefined,
-  },
-});
+interface Props {
+  buttonLabel?: string;
+  buttonColor?: string;
+  color?: string;
+}
+
+const {
+  buttonLabel = "Load the app",
+  buttonColor = "white",
+  color = undefined,
+} = defineProps<Props>();
 
 const name = ref("");
 const email = ref("");
 const launch = ref(false);
 const valid = ref(false);
 const emailRules = [
-  (value) => {
+  (value: string) => {
     if (value) {
       return true;
     }
     return "E-mail is required.";
   },
-  (value) => {
+  (value: string) => {
     if (/.+@.+\..+/u.test(value)) {
       return true;
     }
@@ -40,7 +34,7 @@ const emailRules = [
 
 function submit() {
   const infraStore = useInfraStore();
-  return infraStore.create_backend(name.value, email.value, launch.value);
+  return infraStore.create_backend(email.value);
 }
 </script>
 
@@ -61,7 +55,7 @@ function submit() {
           </VRow>
           <VRow>
             <VCol>
-              <VCheckbox label="Load the app" v-model="load" />
+              <VCheckbox label="Load the app" v-model="launch" />
             </VCol>
           </VRow>
         </VContainer>

package/app/components/RemoteRenderingView.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useElementSize, useWindowSize } from "@vueuse/core";
 
 import { Status } from "@ogw_front/utils/status";
@@ -8,13 +8,15 @@ import { useQuickColormap } from "@ogw_front/composables/use_quick_colormap";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker.vue";
-import ViewToolbar from "@ogw_front/components/ViewToolbar";
+import ViewToolbar from "@ogw_front/components/ViewToolbar.vue";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import vtkRemoteView from "@kitware/vtk.js/Rendering/Misc/RemoteView";
 
-const { viewId } = defineProps({
-  viewId: { type: String, default: "-1" },
-});
+interface Props {
+  viewId?: string;
+}
+
+const { viewId = "-1" } = defineProps<Props>();
 
 const viewerStore = useViewerStore();
 const menuStore = useMenuStore();
@@ -26,7 +28,7 @@ const { width: windowWidth, height: windowHeight } = useWindowSize();
 
 const { pickColormap, quickColormap } = useQuickColormap();
 
-async function get_x_y(event) {
+async function get_x_y(event: PointerEvent) {
   const { offsetX, offsetY, clientX, clientY } = event;
   if (viewerStore.picking_mode === true) {
     viewerStore.set_picked_point(offsetX, offsetY);
@@ -77,7 +79,10 @@ function connect() {
   }
   const session = viewerStore.client.getConnection().getSession();
   view.setSession(session);
-  view.setViewId(props.viewId);
+  // Pre-existing bug fixed: `props` was never defined here (props were destructured
+  // Directly from defineProps above), so this threw a ReferenceError whenever
+  // Connect() ran. `viewId` is the same (reactive) destructured prop value.
+  view.setViewId(viewId);
   connected.value = true;
   view.render();
 }
@@ -90,7 +95,7 @@ watch(
 );
 
 watch(
-  () => props.viewId,
+  () => viewId,
   (id) => {
     if (connected.value) {
       view.setViewId(id);
@@ -103,7 +108,9 @@ onMounted(async () => {
   if (import.meta.client) {
     window.addEventListener("resize", resize);
     await nextTick();
-    view.setContainer(viewer.value.$el);
+    if (viewer.value) {
+      view.setContainer(viewer.value.$el);
+    }
     connect();
     resize();
   }

package/app/components/Ruler.vue

@@ -1,12 +1,14 @@
-<script setup>
-import ToolPanel from "@ogw_front/components/ToolPanel";
+<script setup lang="ts">
+import ToolPanel from "@ogw_front/components/ToolPanel.vue";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-const { escapeFunction } = defineProps({
-  escapeFunction: { type: Function, default: undefined },
-});
+interface Props {
+  escapeFunction?: () => void;
+}
+
+const { escapeFunction = undefined } = defineProps<Props>();
 
-const show = defineModel("show", { type: Boolean, default: false });
+const show = defineModel<boolean>("show", { default: false });
 const hybridViewerStore = useHybridViewerStore();
 
 const localPoint1 = ref([0, 0, 0]);

package/app/components/Screenshot.vue

@@ -1,17 +1,21 @@
-<script setup>
-import ToolPanel from "@ogw_front/components/ToolPanel";
+<script setup lang="ts">
+import ToolPanel from "@ogw_front/components/ToolPanel.vue";
 import fileDownload from "js-file-download";
 import { useClipboardItems } from "@vueuse/core";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-const show = defineModel({ type: Boolean, default: false });
+const DEFAULT_PANEL_WIDTH = 260;
 
-const { width, escapeFunction } = defineProps({
-  width: { type: Number, default: 260 },
-  escapeFunction: { type: Function, default: undefined },
-});
+const show = defineModel<boolean>({ default: false });
+
+interface Props {
+  width?: number;
+  escapeFunction?: () => void;
+}
+
+const { width = DEFAULT_PANEL_WIDTH, escapeFunction = undefined } = defineProps<Props>();
 
 const output_extensions =
   viewer_schemas.opengeodeweb_viewer.viewer.take_screenshot.properties.output_extension.enum;
@@ -38,21 +42,23 @@ async function takeScreenshot() {
       params,
     },
     {
-      response_function: async (response) => {
+      response_function: async (response: unknown) => {
+        const { blob } = response as { blob: BlobPart };
         if (screenshot_type.value === "file") {
-          fileDownload(response.blob, `${current_filename}.${output_extension.value}`);
+          fileDownload(blob, `${current_filename}.${output_extension.value}`);
           feedbackStore.add_success("Screenshot downloaded");
         } else {
           try {
-            const pngBlob = new Blob([response.blob], { type: "image/png" });
+            const pngBlob = new Blob([blob], { type: "image/png" });
             await copy([new ClipboardItem({ "image/png": pngBlob })]);
             feedbackStore.add_success("Screenshot copied to clipboard");
           } catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
             feedbackStore.add_error(
-              undefined,
-              undefined,
+              0,
+              "",
               "Clipboard Error",
-              `Failed to copy screenshot to clipboard: ${error.message}`,
+              `Failed to copy screenshot to clipboard: ${message}`,
             );
           }
         }

package/app/components/SearchBar.vue

@@ -1,10 +1,14 @@
-<script setup>
-const { modelValue, label } = defineProps({
-  modelValue: { type: String, default: "" },
-  label: { type: String, default: "" },
-});
+<script setup lang="ts">
+interface Props {
+  modelValue?: string;
+  label?: string;
+}
 
-const emit = defineEmits(["update:modelValue"]);
+const { modelValue = "", label = "" } = defineProps<Props>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
 </script>
 
 <template>

package/app/components/ShrinkFilter.vue

@@ -1,5 +1,5 @@
-<script setup>
-import ToolPanel from "@ogw_front/components/ToolPanel";
+<script setup lang="ts">
+import ToolPanel from "@ogw_front/components/ToolPanel.vue";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDebounceFn } from "@vueuse/core";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -8,11 +8,13 @@ const DEFAULT_SHRINK_VALUE = 0.8;
 const MAX_SHRINK_VALUE = 1;
 const DEBOUNCE_DELAY = 100;
 
-const { escapeFunction } = defineProps({
-  escapeFunction: { type: Function, default: undefined },
-});
+interface Props {
+  escapeFunction?: () => void;
+}
+
+const { escapeFunction = undefined } = defineProps<Props>();
 
-const show = defineModel("show", { type: Boolean, default: false });
+const show = defineModel<boolean>("show", { default: false });
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
 const targetAllVisible = ref(true);
@@ -21,7 +23,10 @@ const shrinkFactor = ref(DEFAULT_SHRINK_VALUE);
 
 const allItems = dataStore.refAllItems();
 const availableDatasets = computed(() =>
-  allItems.value.map((item) => ({ title: item.name || item.id, value: item.id })),
+  allItems.value.map((item) => ({
+    title: item.name || item.id,
+    value: item.id,
+  })),
 );
 
 async function applyShrink() {

package/app/components/Step.vue

@@ -1,20 +1,39 @@
-<script setup>
-function truncate(text, maxLength) {
+<script setup lang="ts">
+import type { Ref } from "vue";
+import type { useStepperTree } from "@ogw_front/composables/stepper_tree";
+
+interface StepConfig {
+  step_title: string;
+  chips?: string[];
+  component: {
+    component_name: string;
+    component_options?: Record<string, unknown>;
+  };
+}
+
+function truncate(text: string, maxLength: number) {
   if (text.length > maxLength) {
     return `${text.slice(0, maxLength)}...`;
   }
   return text;
 }
 
-const { stepIndex, stepperTree } = defineProps({
-  stepIndex: { type: Number, required: true },
-  stepperTree: { type: Object, required: true },
-});
+interface Props {
+  stepIndex: number;
+  stepperTree: ReturnType<typeof useStepperTree>;
+}
+
+const { stepIndex, stepperTree } = defineProps<Props>();
 
-const emit = defineEmits(["reset_values"]);
+const emit = defineEmits<{
+  reset_values: [];
+}>();
 
 const { state, increment_step, decrement_step, update_values } = stepperTree;
-const { current_step_index, steps } = toRefs(state);
+const { current_step_index, steps } = toRefs(state) as unknown as {
+  current_step_index: Ref<number>;
+  steps: Ref<StepConfig[]>;
+};
 
 const sortedChips = computed(() => {
   const chips = steps.value[stepIndex]?.chips || [];
@@ -41,7 +60,7 @@ const sortedChips = computed(() => {
           class="text-subtitle-1 font-weight-bold mb-0 transition-swing"
           :class="current_step_index === stepIndex ? 'text-primary' : 'text-grey-darken-1'"
         >
-          {{ steps[stepIndex].step_title }}
+          {{ steps[stepIndex]!.step_title }}
         </p>
 
         <v-sheet
@@ -69,8 +88,8 @@ const sortedChips = computed(() => {
       <component
         v-if="stepIndex === current_step_index"
         :key="stepIndex"
-        :is="steps[stepIndex].component.component_name"
-        v-bind="steps[stepIndex].component.component_options"
+        :is="steps[stepIndex]!.component.component_name"
+        v-bind="steps[stepIndex]!.component.component_options"
         @increment_step="increment_step"
         @decrement_step="decrement_step"
         @update_values="update_values"