@geode/opengeodeweb-front 10.34.0-rc.3 → 10.34.0-rc.5

package/README.md

@@ -1,3 +1,11 @@
 # OpenGeodeWeb-Front
 
 OpenSource Vue/Vuetify framework for web applications.
+
+## Development
+
+This codebase is written in TypeScript (`strict` mode, `noUncheckedIndexedAccess`).
+
+- `npm run typecheck` — type-checks the app/server/shared code (via `nuxt typecheck`) and the tests/scripts code (via `tsc -p tsconfig.tests.json`), which live under separate `tsconfig.json` projects since Nuxt's own generated config only covers the former.
+- `npm run lint` — runs [oxlint](https://oxc.rs/docs/guide/usage/linter.html) with autofix. The project's `.oxlintrc.json` must stay in sync with the shared [`Geode-solutions/actions`](https://github.com/Geode-solutions/actions) config, which CI re-downloads and enforces on every run.
+- `npm run test:unit` / `npm run test:integration` — run the Vitest suites under `tests/`.

package/app/assets/{geode_objects.js → geode_objects.ts}

@@ -24,7 +24,12 @@ import TriangulatedSurface2D from "@ogw_front/assets/img/geode_objects/Triangula
 import TriangulatedSurface3D from "@ogw_front/assets/img/geode_objects/TriangulatedSurface3D.svg";
 import VertexSet from "@ogw_front/assets/img/geode_objects/VertexSet.svg";
 
-export const geode_objects = {
+interface GeodeObject {
+  tooltip: string;
+  image: string;
+}
+
+const geode_objects: Record<string, GeodeObject> = {
   BRep: {
     tooltip: "BRep",
     image: BRep,
@@ -126,3 +131,5 @@ export const geode_objects = {
     image: VertexSet,
   },
 };
+
+export { geode_objects };

package/app/components/ActionButton.vue

@@ -1,17 +1,33 @@
-<script setup>
+<script setup lang="ts">
 const DEFAULT_ICON_SIZE = 28;
-const { icon, tooltip, color, size, variant, density, tooltipLocation, iconSize } = defineProps({
-  icon: { type: String, required: true },
-  tooltip: { type: String, required: true },
-  color: { type: String, default: undefined },
-  size: { type: [String, Number], default: undefined },
-  variant: { type: String, default: undefined },
-  density: { type: String, default: "comfortable" },
-  tooltipLocation: { type: String, default: "left" },
-  iconSize: { type: [String, Number], default: DEFAULT_ICON_SIZE },
-});
 
-const emit = defineEmits(["click"]);
+interface Props {
+  icon: string;
+  tooltip: string;
+  color?: string;
+  size?: string | number;
+  // Vuetify's variant/density accept narrow literal unions; kept loose here since
+  // Callers pass plain strings and this is only a typing widening, not a behavior change.
+  variant?: any;
+  density?: any;
+  tooltipLocation?: string;
+  iconSize?: string | number;
+}
+
+const {
+  icon,
+  tooltip,
+  color = undefined,
+  size = undefined,
+  variant = undefined,
+  density = "comfortable",
+  tooltipLocation = "left",
+  iconSize = DEFAULT_ICON_SIZE,
+} = defineProps<Props>();
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
 </script>
 
 <template>

package/app/components/Basic/Slider.vue

@@ -1,5 +1,5 @@
-<script setup>
-const model = defineModel({ type: Number });
+<script setup lang="ts">
+const model = defineModel<number>();
 </script>
 
 <template>

package/app/components/Basic/Switch.vue

@@ -1,5 +1,5 @@
-<script setup>
-const model = defineModel({ type: Boolean });
+<script setup lang="ts">
+const model = defineModel<boolean>();
 </script>
 
 <template>

package/app/components/CameraManager/List.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useCameraManagerStore } from "@ogw_front/stores/camera_manager";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
@@ -7,10 +7,10 @@ const hybridViewerStore = useHybridViewerStore();
 
 const savedPositions = cameraManagerStore.refAllCameraPositions();
 
-const editingId = ref(undefined);
+const editingId = ref<number | undefined>(undefined);
 const editingName = ref("");
 
-async function restorePosition(positionId) {
+async function restorePosition(positionId: number) {
   const position = await cameraManagerStore.getCameraPosition(positionId);
   if (position) {
     if (hybridViewerStore.genericRenderWindow) {
@@ -21,17 +21,17 @@ async function restorePosition(positionId) {
   }
 }
 
-async function deletePosition(positionId) {
+async function deletePosition(positionId: number) {
   await cameraManagerStore.deleteCameraPosition(positionId);
 }
 
-function startEditing(position) {
+function startEditing(position: { id?: number; name?: string }) {
   editingId.value = position.id;
-  editingName.value = position.name;
+  editingName.value = position.name ?? "";
 }
 
 async function saveRename() {
-  if (editingName.value) {
+  if (editingName.value && editingId.value !== undefined) {
     await cameraManagerStore.renameCameraPosition(editingId.value, editingName.value);
   }
   editingId.value = undefined;
@@ -55,7 +55,7 @@ async function saveRename() {
           size="x-small"
           class="mr-1"
           :data-testid="`restoreCameraPosition${position.name}Button`"
-          @click="restorePosition(position.id)"
+          @click="restorePosition(position.id!)"
         >
           <v-icon size="14">mdi-play</v-icon>
           <v-tooltip activator="parent" location="top">Restore</v-tooltip>
@@ -94,7 +94,7 @@ async function saveRename() {
             variant="text"
             size="x-small"
             color="error"
-            @click="deletePosition(position.id)"
+            @click="deletePosition(position.id!)"
           >
             <v-icon size="14">mdi-delete</v-icon>
             <v-tooltip activator="parent" location="top">Delete</v-tooltip>

package/app/components/CameraManager/Saver.vue

@@ -1,6 +1,9 @@
-<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 { useCameraManagerStore } from "@ogw_front/stores/camera_manager";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import type { CameraOptions } from "@ogw_internal/stores/hybrid_viewer/vtk_types.js";
 
 const cameraManagerStore = useCameraManagerStore();
 const hybridViewerStore = useHybridViewerStore();
@@ -13,7 +16,10 @@ async function saveCurrentPosition() {
   }
   await cameraManagerStore.saveCameraPosition(
     newPositionName.value,
-    toRaw(hybridViewerStore.camera_options),
+    // HybridViewerStore.camera_options is a loosely-typed reactive object (it's
+    // Populated dynamically from the viewer's camera state), but is always a
+    // CameraOptions shape at runtime once the viewer has synced a camera.
+    toRaw(hybridViewerStore.camera_options) as unknown as CameraOptions,
   );
   newPositionName.value = "";
 }

package/app/components/CameraManager.vue

@@ -1,15 +1,25 @@
-<script setup>
-import List from "@ogw_front/components/CameraManager/List";
-import Saver from "@ogw_front/components/CameraManager/Saver";
-import ToolPanel from "@ogw_front/components/ToolPanel";
+<script setup lang="ts">
+import List from "@ogw_front/components/CameraManager/List.vue";
+import Saver from "@ogw_front/components/CameraManager/Saver.vue";
+import ToolPanel from "@ogw_front/components/ToolPanel.vue";
 
-const emit = defineEmits(["close"]);
+const DEFAULT_PANEL_WIDTH = 260;
 
-const { showDialog, width, escapeFunction } = defineProps({
-  showDialog: { type: Boolean, required: true },
-  width: { type: Number, required: false, default: 260 },
-  escapeFunction: { type: Function, default: undefined },
-});
+const emit = defineEmits<{
+  close: [];
+}>();
+
+interface Props {
+  showDialog: boolean;
+  width?: number;
+  escapeFunction?: () => void;
+}
+
+const {
+  showDialog,
+  width = DEFAULT_PANEL_WIDTH,
+  escapeFunction = undefined,
+} = defineProps<Props>();
 
 function handleClose() {
   if (escapeFunction) {

package/app/components/CameraOrientation.vue

@@ -1,18 +1,31 @@
-<script setup>
-import ToolPanel from "@ogw_front/components/ToolPanel";
+<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 ToolPanel from "@ogw_front/components/ToolPanel.vue";
 import { applyCameraOptions } from "@ogw_internal/stores/hybrid_viewer/camera";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import type { CameraOptions } from "@ogw_internal/stores/hybrid_viewer/vtk_types.js";
 import { newInstance as vtkAnnotatedCubeActor } from "@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 
-const { panel, width, escapeFunction } = defineProps({
-  panel: { type: Boolean, default: false },
-  width: { type: Number, default: 260 },
-  escapeFunction: { type: Function, default: undefined },
-});
+const DEFAULT_PANEL_WIDTH = 260;
+
+interface Props {
+  panel?: boolean;
+  width?: number;
+  escapeFunction?: () => void;
+}
+
+const {
+  panel = false,
+  width = DEFAULT_PANEL_WIDTH,
+  escapeFunction = undefined,
+} = defineProps<Props>();
 
-const show = defineModel("show", { type: Boolean, default: false });
-const emit = defineEmits(["select"]);
+const show = defineModel<boolean>("show", { default: false });
+const emit = defineEmits<{
+  select: [value: string];
+}>();
 
 const orientations = [
   {
@@ -65,12 +78,13 @@ const orientations = [
   },
 ];
 
-const hoveredFace = ref(undefined);
+const hoveredFace = ref<string | undefined>(undefined);
 const hybridViewerStore = useHybridViewerStore();
 const cubeContainer = useTemplateRef("cubeContainer");
 
-let genericRenderWindow = undefined;
-let cubeActor = undefined;
+// VTK.js objects have no usable type declarations here; `any` is the pragmatic choice.
+let genericRenderWindow: any = undefined;
+let cubeActor: any = undefined;
 let isInteracting = false;
 
 function initVTK() {
@@ -100,7 +114,7 @@ function initVTK() {
     edgeColor: "rgba(255, 255, 255, 0.4)",
     edgeThickness: 0.1,
     resolution: 400,
-    fontSizeScale: (resolution) => resolution / 4,
+    fontSizeScale: (resolution: number) => resolution / 4,
   });
 
   for (const orientation of orientations) {
@@ -124,7 +138,7 @@ function syncCubeCamera() {
     return;
   }
   const camera = genericRenderWindow.getRenderer().getActiveCamera();
-  applyCameraOptions(camera, options);
+  applyCameraOptions(camera, options as unknown as CameraOptions);
   genericRenderWindow.getRenderer().resetCamera();
   genericRenderWindow.getRenderWindow().render();
 }
@@ -151,7 +165,7 @@ watch(hoveredFace, (newFace, oldFace) => {
   if (!cubeActor) {
     return;
   }
-  function updateFace(face, active) {
+  function updateFace(face: string | undefined, active: boolean) {
     const config = orientations.find((orientation) => orientation.face === face);
     if (config) {
       cubeActor[`set${config.vtkKey}FaceProperty`]({

package/app/components/ClippingPlaneCard.vue

@@ -1,18 +1,17 @@
-<script setup>
+<script setup lang="ts">
 import { getPlaneCssColor } from "@ogw_front/utils/clipping_planes";
 
-const { plane, index } = defineProps({
-  plane: {
-    type: Object,
-    required: true,
-  },
-  index: {
-    type: Number,
-    required: true,
-  },
-});
+interface Props {
+  plane: { origin?: number[]; normal: number[] };
+  index: number;
+}
 
-const emit = defineEmits(["remove", "flipNormal"]);
+const { plane, index } = defineProps<Props>();
+
+const emit = defineEmits<{
+  remove: [];
+  flipNormal: [];
+}>();
 </script>
 
 <template>

package/app/components/ClippingPlanes.vue

@@ -1,28 +1,35 @@
-<script setup>
+<script setup lang="ts">
 import { DEBOUNCE_DELAY, DEFAULT_NORMALS } from "@ogw_front/utils/clipping_planes";
-import ClippingPlaneCard from "@ogw_front/components/ClippingPlaneCard";
-import ToolPanel from "@ogw_front/components/ToolPanel";
+import ClippingPlaneCard from "@ogw_front/components/ClippingPlaneCard.vue";
+import ToolPanel from "@ogw_front/components/ToolPanel.vue";
 import { useClippingPlanesWidget } from "@ogw_front/composables/clipping_planes_widget";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDebounceFn } from "@vueuse/core";
 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 dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
 const targetAllVisible = ref(true);
-const selectedDatasetIds = ref([]);
-const planes = ref([{ origin: undefined, normal: [1, 0, 0] }]);
+const selectedDatasetIds = ref<string[]>([]);
+const planes = ref<{ origin?: number[]; normal: number[] }[]>([
+  { origin: undefined, normal: [1, 0, 0] },
+]);
 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,
+  })),
 );
 const widgetContainer = useTemplateRef("widgetContainer");
-let debouncedApply = undefined;
+let debouncedApply: ((...args: unknown[]) => void) | undefined = undefined;
 
 const {
   getSceneCenter,
@@ -39,7 +46,7 @@ const {
   selectedDatasetIds,
   allItems,
   hybridViewerStore,
-  debouncedApply: (...args) => debouncedApply?.(...args),
+  debouncedApply: (...args: unknown[]) => debouncedApply?.(...args),
 });
 
 async function applyClippingPlanes() {
@@ -66,15 +73,18 @@ async function applyClippingPlanes() {
 debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
 
 function addPlane() {
-  const normal = DEFAULT_NORMALS[planes.value.length % DEFAULT_NORMALS.length];
+  // Index is always in-bounds (modulo the fixed-size list); the fallbacks only
+  // Satisfy noUncheckedIndexedAccess and are never hit at runtime.
+  const normal = DEFAULT_NORMALS[planes.value.length % DEFAULT_NORMALS.length] ??
+    DEFAULT_NORMALS[0] ?? [1, 0, 0];
   planes.value.push({ origin: getSceneCenter(), normal });
 }
 
-function removePlane(index) {
+function removePlane(index: number) {
   planes.value.splice(index, 1);
 }
 
-function flipNormal(plane) {
+function flipNormal(plane: { normal: number[] }) {
   plane.normal = plane.normal.map((component) => -component);
   syncWidgets();
   applyClippingPlanes();

package/app/components/CrsSelector.vue

@@ -1,27 +1,36 @@
-<script setup>
+<script setup lang="ts">
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 import { useBackStore } from "@ogw_front/stores/back";
 
 const schema = schemas.opengeodeweb_back.geographic_coordinate_systems;
 
-const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);
+const emit = defineEmits<{
+  update_values: [values: Record<string, unknown>];
+  increment_step: [];
+  decrement_step: [];
+}>();
 
-const { geodeObjectType, keyToUpdate } = defineProps({
-  geodeObjectType: { type: String, required: true },
-  keyToUpdate: { type: String, required: true },
-});
+interface Props {
+  geodeObjectType: string;
+  keyToUpdate: string;
+}
+
+const { geodeObjectType, keyToUpdate } = defineProps<Props>();
 
 const search = ref("");
 const data_table_loading = ref(false);
-const crs_list = ref([]);
-const selected_crs = ref([]);
+const crs_list = ref<Record<string, unknown>[]>([]);
+const selected_crs = ref<unknown[]>([]);
 const toggle_loading = useToggle(data_table_loading);
 const backStore = useBackStore();
 
-function get_selected_crs(crs_code) {
-  for (let i = 0; i <= crs_list.value.length; i += 1) {
-    if (crs_list.value[i]["code"] === crs_code) {
-      return crs_list.value[i];
+function get_selected_crs(crs_code: unknown) {
+  // Pre-existing off-by-one fixed: `i <= length` read one past the end of
+  // Crs_list, which would have thrown on `undefined["code"]` at runtime.
+  for (let i = 0; i < crs_list.value.length; i += 1) {
+    const crs = crs_list.value[i];
+    if (crs && crs["code"] === crs_code) {
+      return crs;
     }
   }
 }
@@ -41,8 +50,8 @@ async function get_crs_table() {
   await backStore.request(
     { schema, params },
     {
-      response_function: (response) => {
-        crs_list.value = response.crs_list;
+      response_function: (response: unknown) => {
+        crs_list.value = (response as { crs_list: Record<string, unknown>[] }).crs_list;
       },
     },
   );
@@ -58,7 +67,7 @@ const headers = [
   },
   { title: "Code", align: "end", key: "code" },
   { title: "Name", align: "end", key: "name" },
-];
+] as const;
 
 // oxlint-disable-next-line no-top-level-await
 await get_crs_table();

package/app/components/DeleteDialog.vue

@@ -1,22 +1,22 @@
-<script setup>
+<script setup lang="ts">
 import GlassCard from "./GlassCard.vue";
 
-const { show, item, selectedCount } = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  item: {
-    type: Object,
-    default: undefined,
-  },
-  selectedCount: {
-    type: Number,
-    default: 0,
-  },
-});
+interface DeleteItem {
+  name: string;
+}
 
-const emit = defineEmits(["update:show", "confirm"]);
+interface Props {
+  show?: boolean;
+  item?: DeleteItem;
+  selectedCount?: number;
+}
+
+const { show = false, item = undefined, selectedCount = 0 } = defineProps<Props>();
+
+const emit = defineEmits<{
+  "update:show": [value: boolean];
+  confirm: [];
+}>();
 </script>
 
 <template>

package/app/components/DragAndDrop.vue

@@ -1,37 +1,54 @@
-<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 { onMounted, onUnmounted, ref } from "vue";
 import DragAndDropInline from "./DragAndDropInternal/DragAndDropInline.vue";
 import DragAndDropOverlay from "./DragAndDropInternal/DragAndDropOverlay.vue";
 
-const { multiple, accept, loading, showExtensions, fullscreen, inline, showOverlay, texts } =
-  defineProps({
-    multiple: { type: Boolean, default: false },
-    accept: { type: [String, Array], default: "" },
-    loading: { type: Boolean, default: false },
-    showExtensions: { type: Boolean, default: true },
-    fullscreen: { type: Boolean, default: false },
-    inline: { type: Boolean, default: true },
-    showOverlay: { type: Boolean, default: 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 {
+  multiple?: boolean;
+  accept?: string | string[];
+  loading?: boolean;
+  showExtensions?: boolean;
+  fullscreen?: boolean;
+  inline?: boolean;
+  showOverlay?: boolean;
+  texts?: DragAndDropTexts;
+}
 
-const emit = defineEmits(["files-selected"]);
+const {
+  multiple = false,
+  accept = "",
+  loading = false,
+  showExtensions = true,
+  fullscreen = false,
+  inline = true,
+  showOverlay = true,
+  texts = {
+    idle: "Click or drag and drop",
+    drop: "Drop files here",
+    loading: "Loading...",
+  },
+} = defineProps<Props>();
+
+const emit = defineEmits<{
+  "files-selected": [files: File[]];
+}>();
 
 const isDragging = ref(false);
 const isInternalDrag = ref(false);
 const dragCounter = ref(0);
-const fileInput = ref(undefined);
+const fileInput = ref<HTMLInputElement | undefined>(undefined);
 
 const WILDCARD_SUFFIX_LENGTH = 2;
 
-function isFileAccepted(file, acceptValue) {
+function isFileAccepted(file: File, acceptValue: string | string[] | undefined) {
   const fileName = (file.name || "").toLowerCase();
   const fileType = (file.type || "").toLowerCase();
   const isVext = fileName.endsWith(".vext");
@@ -39,7 +56,7 @@ function isFileAccepted(file, acceptValue) {
   if (!acceptValue) {
     return !isVext;
   }
-  let rules = [];
+  let rules: string[] = [];
   if (Array.isArray(acceptValue)) {
     rules = acceptValue;
   } else if (typeof acceptValue === "string") {
@@ -79,8 +96,8 @@ function triggerFileDialog() {
   fileInput.value?.click();
 }
 
-function onDragEnter(event) {
-  if (!isInternalDrag.value && event.dataTransfer.types.includes("Files")) {
+function onDragEnter(event: DragEvent) {
+  if (!isInternalDrag.value && event.dataTransfer?.types.includes("Files")) {
     dragCounter.value += 1;
     isDragging.value = true;
   }
@@ -94,23 +111,25 @@ function onDragLeave() {
   }
 }
 
-function onDragOver(event) {
-  if (!isInternalDrag.value && event.dataTransfer.types.includes("Files")) {
+function onDragOver(event: DragEvent) {
+  if (!isInternalDrag.value && event.dataTransfer?.types.includes("Files")) {
     event.preventDefault();
   }
 }
 
-function onDrop(event) {
+function onDrop(event: DragEvent) {
   event.preventDefault();
   dragCounter.value = 0;
   isDragging.value = false;
-  const files = [...event.dataTransfer.files].filter((file) => isFileAccepted(file, accept));
+  const files = [...(event.dataTransfer?.files ?? [])].filter((file) =>
+    isFileAccepted(file, accept),
+  );
   if (files.length > 0) {
     emit("files-selected", files);
   }
 }
 
-function onKeyDown(event) {
+function onKeyDown(event: KeyboardEvent) {
   if (event.key === "Escape") {
     event.preventDefault();
     event.stopPropagation();
@@ -119,12 +138,13 @@ function onKeyDown(event) {
   }
 }
 
-function handleFileSelect(event) {
-  const files = [...event.target.files];
+function handleFileSelect(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const files = [...(target.files ?? [])];
   if (files.length > 0) {
     emit("files-selected", files);
   }
-  event.target.value = "";
+  target.value = "";
 }
 
 function onInternalDragStart() {