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

package/app/components/ObjectSelector.vue

@@ -1,27 +1,39 @@
-<script setup>
+<script setup lang="ts">
 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.
+interface 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 loading = ref<boolean>(false);
+const allowedGeodeObjects = ref<AllowedObjectMap>({});
 const toggleLoading = useToggle(loading);
-const multipleFilesNoCommon = ref(false);
+const multipleFilesNoCommon = ref<boolean>(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,14 +41,25 @@ async function fetchAllowedObjectsList() {
   return responses.map((response) => response.allowed_objects);
 }
 
-function setGeodeObject(geode_object_type) {
+function setGeodeObject(geode_object_type: string | undefined): void {
   if (geode_object_type) {
     emit("update_values", { geode_object_type });
     emit("increment_step");
   }
 }
 
-async function getAllowedGeodeObjects() {
+// 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): string {
+  return isLoadable
+    ? (geode_objects[key]?.tooltip ?? key)
+    : `Data not loadable with this class (${key})`;
+}
+
+function geodeObjectImage(key: string): string | undefined {
+  return geode_objects[key]?.image;
+}
+
+async function getAllowedGeodeObjects(): Promise<void> {
   toggleLoading();
   allowedGeodeObjects.value = {};
   multipleFilesNoCommon.value = false;
@@ -59,14 +82,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 +95,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,28 @@
-<script setup>
+<script setup lang="ts">
+import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 import { Status } from "@ogw_front/utils/status";
 import { useBackStore } from "@ogw_front/stores/back";
 
-const { schema } = defineProps({
-  schema: { type: Object, required: true },
-});
+interface Props {
+  schema: JsonRpcSchema;
+}
+
+const { schema } = defineProps<Props>();
+
+interface PackageVersion {
+  package: string;
+  version: string;
+}
 
 const backStore = useBackStore();
-const packages_versions = ref([]);
+const packages_versions = ref<PackageVersion[]>([]);
 
-async function get_packages_versions() {
+async function get_packages_versions(): Promise<void> {
   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): boolean | string => {
     if (value) {
       return true;
     }
     return "E-mail is required.";
   },
-  (value) => {
+  (value: string): boolean | string => {
     if (/.+@.+\..+/u.test(value)) {
       return true;
     }
@@ -38,9 +32,9 @@ const emailRules = [
   },
 ];
 
-function submit() {
+function submit(): Promise<void> {
   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";
+import { newInstance as 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): Promise<void> {
   const { offsetX, offsetY, clientX, clientY } = event;
   if (viewerStore.picking_mode === true) {
     viewerStore.set_picked_point(offsetX, offsetY);
@@ -38,9 +40,8 @@ async function get_x_y(event) {
   }
 }
 
-const connected = ref(false);
-// oxlint-disable-next-line import/no-named-as-default-member
-const view = vtkRemoteView.newInstance({
+const connected = ref<boolean>(false);
+const view = vtkRemoteView({
   rpcWheelEvent: "viewport.mouse.zoom.wheel",
 });
 
@@ -48,7 +49,7 @@ if (location.hostname.split(".")[0] === "localhost") {
   view.setInteractiveRatio(1);
 }
 
-function resize() {
+function resize(): void {
   if (view) {
     view.getCanvasView().setSize(0, 0);
     view.resize();
@@ -71,13 +72,16 @@ watch([width, height], () => {
   resize();
 });
 
-function connect() {
+function connect(): void {
   if (viewerStore.status !== Status.CONNECTED) {
     return;
   }
   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 +94,7 @@ watch(
 );
 
 watch(
-  () => props.viewId,
+  () => viewId,
   (id) => {
     if (connected.value) {
       view.setViewId(id);
@@ -103,7 +107,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,16 +1,18 @@
-<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]);
-const localPoint2 = ref([0, 0, 0]);
+const localPoint1 = ref<number[]>([0, 0, 0]);
+const localPoint2 = ref<number[]>([0, 0, 0]);
 
 watch(
   () => hybridViewerStore.ruler_point1,
@@ -47,7 +49,7 @@ watch(
   },
 );
 
-async function applyManualCoords() {
+async function applyManualCoords(): Promise<void> {
   hybridViewerStore.ruler_point1 = [...localPoint1.value];
   hybridViewerStore.ruler_point2 = [...localPoint2.value];
   await hybridViewerStore.applyRuler();

package/app/components/Screenshot.vue

@@ -1,28 +1,32 @@
-<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;
-const filename = ref("");
-const output_extension = ref("png");
-const include_background = ref(true);
-const screenshot_type = ref("file");
+const filename = ref<string>("");
+const output_extension = ref<string>("png");
+const include_background = ref<boolean>(true);
+const screenshot_type = ref<string>("file");
 
 const { copy } = useClipboardItems();
 
-async function takeScreenshot() {
+async function takeScreenshot(): Promise<void> {
   const viewerStore = useViewerStore();
   const feedbackStore = useFeedbackStore();
   const current_filename = screenshot_type.value === "file" ? filename.value : "screenshot";
@@ -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}`,
             );
           }
         }
@@ -74,7 +80,7 @@ watch(screenshot_type, (value) => {
   }
 });
 
-function handleClose() {
+function handleClose(): void {
   if (escapeFunction) {
     escapeFunction();
   }

package/app/components/SearchBar.vue

@@ -1,10 +1,16 @@
-<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>();
+
+interface Emits {
+  "update:modelValue": [value: string];
+}
+
+const emit = defineEmits<Emits>();
 </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,23 +8,28 @@ 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);
-const selectedDatasetIds = ref([]);
-const shrinkFactor = ref(DEFAULT_SHRINK_VALUE);
+const targetAllVisible = ref<boolean>(true);
+const selectedDatasetIds = ref<string[]>([]);
+const shrinkFactor = ref<number>(DEFAULT_SHRINK_VALUE);
 
 const allItems = dataStore.refAllItems();
-const availableDatasets = computed(() =>
-  allItems.value.map((item) => ({ title: item.name || item.id, value: item.id })),
+const availableDatasets = computed<{ title: string; value: string }[]>(() =>
+  allItems.value.map((item) => ({
+    title: item.name || item.id,
+    value: item.id,
+  })),
 );
 
-async function applyShrink() {
+async function applyShrink(): Promise<void> {
   const allIds = allItems.value.map((item) => item.id);
   if (allIds.length === 0) {
     return;
@@ -42,12 +47,12 @@ async function applyShrink() {
 
 const debouncedApply = useDebounceFn(() => applyShrink(), DEBOUNCE_DELAY);
 
-async function resetShrink() {
+async function resetShrink(): Promise<void> {
   shrinkFactor.value = DEFAULT_SHRINK_VALUE;
   await applyShrink();
 }
 
-async function removeShrink() {
+async function removeShrink(): Promise<void> {
   shrinkFactor.value = MAX_SHRINK_VALUE;
   const allIds = allItems.value.map((item) => item.id);
   if (allIds.length > 0) {

package/app/components/Step.vue

@@ -1,22 +1,42 @@
-<script setup>
-function truncate(text, maxLength) {
+<script setup lang="ts">
+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): string {
   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>();
+
+interface Emits {
+  reset_values: [];
+}
 
-const emit = defineEmits(["reset_values"]);
+const emit = defineEmits<Emits>();
 
 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 sortedChips = computed<string[]>(() => {
   const chips = steps.value[stepIndex]?.chips || [];
   return chips.toSorted((chipA, chipB) =>
     chipA.localeCompare(chipB, undefined, {
@@ -41,7 +61,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 +89,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"

package/app/components/Stepper.vue

@@ -1,12 +1,24 @@
-<script setup>
-import Step from "@ogw_front/components/Step";
+<script setup lang="ts">
+import Step from "@ogw_front/components/Step.vue";
+import type { useStepperTree } from "@ogw_front/composables/stepper_tree";
 
-const emit = defineEmits(["reset_values", "close"]);
-const { stepperTree } = defineProps({
-  stepperTree: { type: Object, required: true },
-});
+interface Emits {
+  reset_values: [];
+  close: [];
+}
+
+const emit = defineEmits<Emits>();
+
+interface Props {
+  stepperTree: ReturnType<typeof useStepperTree>;
+}
+
+const { stepperTree } = defineProps<Props>();
 const { state } = stepperTree;
-const { steps, current_step_index } = toRefs(state);
+const { steps, current_step_index } = toRefs(state) as unknown as {
+  steps: Ref<unknown[]>;
+  current_step_index: Ref<number>;
+};
 </script>
 
 <template>

package/app/components/ToolPanel.vue

@@ -1,19 +1,35 @@
-<script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+<script setup lang="ts">
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 
-const { title, width, closeLabel, actionLabel, clickOutside, escapeFunction } = defineProps({
-  title: { type: String, default: "" },
-  width: { type: Number, default: 260 },
-  closeLabel: { type: String, default: "Close" },
-  actionLabel: { type: String, default: undefined },
-  clickOutside: { type: Boolean, default: true },
-  escapeFunction: { type: Function, default: undefined },
-});
+const DEFAULT_PANEL_WIDTH = 260;
 
-const model = defineModel({ type: Boolean, default: false });
-const emit = defineEmits(["action"]);
+interface Props {
+  title?: string;
+  width?: number;
+  closeLabel?: string;
+  actionLabel?: string;
+  clickOutside?: boolean;
+  escapeFunction?: () => void;
+}
+
+const {
+  title = "",
+  width = DEFAULT_PANEL_WIDTH,
+  closeLabel = "Close",
+  actionLabel = undefined,
+  clickOutside = true,
+  escapeFunction = undefined,
+} = defineProps<Props>();
+
+const model = defineModel<boolean>({ default: false });
+
+interface Emits {
+  action: [];
+}
+
+const emit = defineEmits<Emits>();
 
-function close() {
+function close(): void {
   if (escapeFunction) {
     escapeFunction();
   }