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

package/app/components/Stepper.vue

@@ -1,12 +1,23 @@
-<script setup>
-import Step from "@ogw_front/components/Step";
+<script setup lang="ts">
+import type { Ref } from "vue";
+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 },
-});
+const emit = defineEmits<{
+  reset_values: [];
+  close: [];
+}>();
+
+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,17 +1,30 @@
-<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 });
+const emit = defineEmits<{
+  action: [];
+}>();
 
 function close() {
   if (escapeFunction) {

package/app/components/ViewToolbar.vue

@@ -1,13 +1,16 @@
-<script setup>
-import ActionButton from "@ogw_front/components/ActionButton";
+<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 type { Ref } from "vue";
+import ActionButton from "@ogw_front/components/ActionButton.vue";
 import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
-import CameraManager from "@ogw_front/components/CameraManager";
-import CameraOrientation from "@ogw_front/components/CameraOrientation";
-import ClippingPlanes from "@ogw_front/components/ClippingPlanes";
-import Ruler from "@ogw_front/components/Ruler";
-import Screenshot from "@ogw_front/components/Screenshot";
-import ShrinkFilter from "@ogw_front/components/ShrinkFilter";
-import ZScaling from "@ogw_front/components/ZScaling";
+import CameraManager from "@ogw_front/components/CameraManager.vue";
+import CameraOrientation from "@ogw_front/components/CameraOrientation.vue";
+import ClippingPlanes from "@ogw_front/components/ClippingPlanes.vue";
+import Ruler from "@ogw_front/components/Ruler.vue";
+import Screenshot from "@ogw_front/components/Screenshot.vue";
+import ShrinkFilter from "@ogw_front/components/ShrinkFilter.vue";
+import ZScaling from "@ogw_front/components/ZScaling.vue";
 import { onKeyStroke } from "@vueuse/core";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -24,7 +27,18 @@ const showShrinkFilter = ref(false);
 const showRuler = ref(false);
 const gridScale = ref(false);
 const zScale = ref(hybridViewerStore.zScale);
-const openSubMenus = ref({});
+const openSubMenus = ref<Record<string, boolean>>({});
+
+interface CameraOptionAction {
+  title?: string;
+  testId: string;
+  tooltip?: string;
+  icon: string;
+  iconSize?: number;
+  color?: string;
+  action?: () => void;
+  menu?: CameraOptionAction[];
+}
 
 watch(
   () => hybridViewerStore.zScale,
@@ -47,7 +61,7 @@ onKeyStroke("Escape", () => {
   }
 });
 
-function closeAllToolsExcept(toolRef) {
+function closeAllToolsExcept(toolRef: Ref<boolean>) {
   const tools = [
     showCameraOrientation,
     showCameraManager,
@@ -64,12 +78,12 @@ function closeAllToolsExcept(toolRef) {
   }
 }
 
-function toggleTool(toolRef) {
+function toggleTool(toolRef: Ref<boolean>) {
   closeAllToolsExcept(toolRef);
   toolRef.value = !toolRef.value;
 }
 
-const camera_options = computed(() => [
+const camera_options = computed<CameraOptionAction[]>(() => [
   {
     testId: "resetCameraButton",
     tooltip: "Reset camera",
@@ -234,10 +248,8 @@ const camera_options = computed(() => [
             <ActionButton
               v-bind="props"
               :data-testid="camera_option.testId"
-              :icon="
-                typeof camera_option.icon === 'function' ? camera_option.icon() : camera_option.icon
-              "
-              :tooltip="camera_option.tooltip"
+              :icon="camera_option.icon"
+              :tooltip="camera_option.tooltip ?? ''"
               :color="camera_option.color"
               :icon-size="camera_option.iconSize"
               tooltip-location="left"
@@ -249,16 +261,16 @@ const camera_options = computed(() => [
                 <ActionButton
                   :data-testid="item.testId"
                   :icon="item.icon"
-                  :tooltip="item.title"
+                  :tooltip="item.title ?? ''"
                   :color="
                     hybridViewerStore.is_hover_highlight &&
                     hybridViewerStore.hover_highlight_field_type ===
-                      item.title.toUpperCase().slice(0, -1)
+                      item.title?.toUpperCase().slice(0, -1)
                       ? 'primary'
                       : undefined
                   "
                   tooltip-location="top"
-                  @click="item.action"
+                  @click="item.action?.()"
                 />
               </v-col>
             </v-row>
@@ -268,7 +280,7 @@ const camera_options = computed(() => [
           v-else
           :data-testid="camera_option.testId"
           :icon="camera_option.icon"
-          :tooltip="camera_option.tooltip"
+          :tooltip="camera_option.tooltip ?? ''"
           :color="camera_option.color"
           :icon-size="camera_option.iconSize"
           tooltip-location="left"

package/app/components/Viewer/ContextMenu/CenterButton.vue

@@ -1,13 +1,18 @@
-<script setup>
+<script setup lang="ts">
 import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 import { useMenuStore } from "@ogw_front/stores/menu";
 
-const { isOverTreeview, isOverToolbar } = defineProps({
-  isOverTreeview: { type: Boolean, required: true },
-  isOverToolbar: { type: Boolean, default: false },
-});
+interface Props {
+  isOverTreeview: boolean;
+  isOverToolbar?: boolean;
+}
+
+const { isOverTreeview, isOverToolbar = false } = defineProps<Props>();
 
-const emit = defineEmits(["drag", "click"]);
+const emit = defineEmits<{
+  drag: [event: MouseEvent];
+  click: [event: MouseEvent];
+}>();
 
 const ADAPTIVE_BLUR_VAL = "15px";
 const ADAPTIVE_OPACITY_VAL = 0.85;
@@ -46,14 +51,14 @@ let dragMoved = false;
 let dragStartClientX = 0;
 let dragStartClientY = 0;
 
-function onMouseDown(event) {
+function onMouseDown(event: MouseEvent) {
   dragMoved = false;
   dragStartClientX = event.clientX;
   dragStartClientY = event.clientY;
   emit("drag", event);
 }
 
-function onMouseUp(event) {
+function onMouseUp(event: MouseEvent) {
   const deltaX = event.clientX - dragStartClientX;
   const deltaY = event.clientY - dragStartClientY;
   if (Math.hypot(deltaX, deltaY) > dragThreshold) {
@@ -61,7 +66,7 @@ function onMouseUp(event) {
   }
 }
 
-function onCenterClick(event) {
+function onCenterClick(event: MouseEvent) {
   event.stopPropagation();
   if (!dragMoved) {
     emit("click", event);

package/app/components/Viewer/ContextMenu/CircularItems.vue

@@ -1,12 +1,15 @@
-<script setup>
+<script setup lang="ts">
+import type { Component } from "vue";
 import { useMenuStore } from "@ogw_front/stores/menu";
 
-const { menuItems, id, metaData, menuItemCount } = defineProps({
-  menuItems: { type: Array, required: true },
-  id: { type: String, required: true },
-  metaData: { type: Object, required: true },
-  menuItemCount: { type: Number, required: true },
-});
+interface Props {
+  menuItems: Component[];
+  id: string;
+  metaData: Record<string, unknown>;
+  menuItemCount: number;
+}
+
+const { menuItems, id, metaData, menuItemCount } = defineProps<Props>();
 
 const RADIUS = 80;
 const Z_INDEX_ACTIVE_ITEM = 10;
@@ -19,7 +22,7 @@ const ANGLE_315 = 315;
 
 const menuStore = useMenuStore();
 
-function getItemStyle(index) {
+function getItemStyle(index: number) {
   const angle = (index / menuItemCount) * 2 * Math.PI;
   return {
     transform: `translate(${Math.cos(angle) * RADIUS}px, ${Math.sin(angle) * RADIUS}px)`,
@@ -29,7 +32,7 @@ function getItemStyle(index) {
   };
 }
 
-function getTooltipLocation(index) {
+function getTooltipLocation(index: number) {
   const angle = (index / menuItemCount) * FULL_ANGLE;
   if (angle < ANGLE_45 || angle >= ANGLE_315) {
     return "right";
@@ -43,7 +46,7 @@ function getTooltipLocation(index) {
   return "bottom";
 }
 
-function getTooltipOrigin(index) {
+function getTooltipOrigin(index: number) {
   const angle = (index / menuItemCount) * FULL_ANGLE;
   if (angle < ANGLE_45 || angle >= ANGLE_315) {
     return "left";

package/app/components/Viewer/ContextMenu/ContextMenu.vue

@@ -1,18 +1,23 @@
-<script setup>
-import CenterButton from "@ogw_front/components/Viewer/ContextMenu/CenterButton";
-import CircularItems from "@ogw_front/components/Viewer/ContextMenu/CircularItems";
-import InfoCard from "@ogw_front/components/Viewer/ContextMenu/InfoCard";
+<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 CenterButton from "@ogw_front/components/Viewer/ContextMenu/CenterButton.vue";
+import CircularItems from "@ogw_front/components/Viewer/ContextMenu/CircularItems.vue";
+import InfoCard from "@ogw_front/components/Viewer/ContextMenu/InfoCard.vue";
 import { useEventListener } from "@vueuse/core";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
+import type { Component } from "vue";
+
+interface Props {
+  id: string;
+  x: number;
+  y: number;
+  containerWidth: number;
+  containerHeight: number;
+}
 
-const { id, x, y, containerWidth, containerHeight } = defineProps({
-  id: { type: String, required: true },
-  x: { type: Number, required: true },
-  y: { type: Number, required: true },
-  containerWidth: { type: Number, required: true },
-  containerHeight: { type: Number, required: true },
-});
+const { id, x, y, containerWidth, containerHeight } = defineProps<Props>();
 
 const RADIUS = 80;
 const MARGIN_OFFSET = 40;
@@ -36,7 +41,7 @@ const dragStartY = ref(0);
 const menuX = ref(x);
 const menuY = ref(y);
 
-function clampPosition(posX, posY) {
+function clampPosition(posX: number, posY: number) {
   const margin = RADIUS + MARGIN_OFFSET;
   return {
     x: Math.min(Math.max(posX, margin), containerWidth - margin),
@@ -44,13 +49,13 @@ function clampPosition(posX, posY) {
   };
 }
 
-function startDrag(event) {
+function startDrag(event: MouseEvent) {
   isDragging.value = true;
   dragStartX.value = event.clientX - menuX.value;
   dragStartY.value = event.clientY - menuY.value;
 }
 
-function handleDrag(event) {
+function handleDrag(event: MouseEvent) {
   const { x: clampedX, y: clampedY } = clampPosition(
     event.clientX - dragStartX.value,
     event.clientY - dragStartY.value,
@@ -60,7 +65,7 @@ function handleDrag(event) {
   menuStore.setMenuPosition(clampedX, clampedY);
 }
 
-function stopDrag(event) {
+function stopDrag(event: MouseEvent) {
   isDragging.value = false;
   event.stopPropagation();
   menuStore.setMenuPosition(menuX.value, menuY.value);
@@ -73,7 +78,7 @@ watch(show_menu, (newVal) => {
 });
 
 watch(
-  () => [x, y, containerWidth, containerHeight],
+  () => [x, y, containerWidth, containerHeight] as const,
   ([newX, newY]) => {
     const { x: clampedX, y: clampedY } = clampPosition(newX, newY);
     menuX.value = clampedX;
@@ -86,7 +91,7 @@ watch(
 useEventListener(
   globalThis,
   "mousemove",
-  (event) => {
+  (event: MouseEvent) => {
     if (!isDragging.value) {
       return;
     }
@@ -95,14 +100,14 @@ useEventListener(
   { passive: true },
 );
 
-useEventListener(globalThis, "mouseup", (event) => {
+useEventListener(globalThis, "mouseup", (event: MouseEvent) => {
   if (!isDragging.value) {
     return;
   }
   stopDrag(event);
 });
 
-const menu_items = shallowRef([]);
+const menu_items = shallowRef<Component[]>([]);
 watch(
   () => [meta_data.value.viewer_type, meta_data.value.geode_object_type],
   ([viewer_type, geode_object_type]) => {
@@ -147,7 +152,7 @@ const isOverToolbar = computed(() => {
 
 function getMenuStyle() {
   return {
-    position: "fixed",
+    position: "fixed" as const,
     left: `${menuStore.containerLeft + menuX.value - RADIUS}px`,
     top: `${menuStore.containerTop + menuY.value - RADIUS}px`,
   };

package/app/components/Viewer/ContextMenu/ContextMenuItem.vue

@@ -1,5 +1,5 @@
-<script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+<script setup lang="ts">
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTheme } from "vuetify";
@@ -15,12 +15,22 @@ const menuStore = useMenuStore();
 const theme = useTheme();
 const primaryColor = computed(() => theme.current.value.colors.primary);
 
-const { index, itemProps, tooltip, btnImage } = defineProps({
-  index: { type: Number, required: true },
-  itemProps: { type: Object, required: true },
-  tooltip: { type: String, required: true },
-  btnImage: { type: String, required: true },
-});
+interface ItemProps {
+  id: string;
+  meta_data: Record<string, unknown>;
+  tooltip_location: "right" | "top" | "left" | "bottom";
+  tooltip_origin: "right" | "top" | "left" | "bottom";
+  totalItems: number;
+}
+
+interface Props {
+  index: number;
+  itemProps: ItemProps;
+  tooltip: string;
+  btnImage: string;
+}
+
+const { index, itemProps, tooltip, btnImage } = defineProps<Props>();
 
 const buttonCoords = computed(() => {
   const angle = (index / itemProps.totalItems) * 2 * Math.PI;
@@ -86,7 +96,7 @@ const computedItemStyles = computed(() => {
 });
 
 const is_active = computed(() => menuStore.active_item_index === index);
-const optionsRef = ref(undefined);
+const optionsRef = ref<HTMLElement | undefined>(undefined);
 const { height: optionsHeight } = useElementSize(optionsRef);
 
 const maxCardHeight = computed(() => Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET));
@@ -125,6 +135,8 @@ const optionsClass = computed(() => {
 function toggleOptions() {
   menuStore.toggleItemOptions(index);
 }
+
+export type { ItemProps };
 </script>
 <template>
   <v-sheet class="menu-item-container transition-swing" color="transparent">

package/app/components/Viewer/ContextMenu/InfoCard.vue

@@ -1,16 +1,21 @@
-<script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+<script setup lang="ts">
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 import { middleTruncate } from "@ogw_front/utils/string";
 import { useClipboard } from "@vueuse/core";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useMenuStore } from "@ogw_front/stores/menu";
 
-const { show, metaData } = defineProps({
-  show: { type: Boolean, required: true },
-  metaData: { type: Object, required: true },
-});
+interface Props {
+  show: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  metaData: Record<string, any>;
+}
 
-const emit = defineEmits(["update:show"]);
+const { show, metaData } = defineProps<Props>();
+
+const emit = defineEmits<{
+  "update:show": [value: boolean];
+}>();
 
 const COPIED_TIMEOUT = 1500;
 const MAX_SHORT_ID_LENGTH = 15;
@@ -23,15 +28,25 @@ const TRUNCATE_END_CHARS = 7;
 const { copy, copied } = useClipboard({ copiedDuring: COPIED_TIMEOUT });
 const copiedId = ref("");
 
-function isCopied(id) {
+function isCopied(id: string | undefined) {
   return copied.value && copiedId.value === id;
 }
 
 const menuStore = useMenuStore();
 const dataStore = useDataStore();
 
+interface MeshComponentInfo {
+  id?: string;
+  title?: string;
+  category?: string;
+}
+
 const componentName = ref("");
-const componentItem = ref(undefined);
+const componentItem = ref<MeshComponentInfo | undefined>(undefined);
+
+function asString(value: unknown): string | undefined {
+  return typeof value === "string" ? value : undefined;
+}
 
 watch(
   () => menuStore.current_meta_data,
@@ -42,10 +57,12 @@ watch(
       return;
     }
 
-    const modelId = newMeta.modelId || newMeta.id;
+    const modelId = asString(newMeta.modelId) ?? asString(newMeta.id);
     if (newMeta.pickedComponentId && modelId) {
       const components = await dataStore.getAllMeshComponents(modelId);
-      const comp = components.find((component) => component.id === newMeta.pickedComponentId);
+      const comp = components.find(
+        (component: MeshComponentInfo) => component.id === newMeta.pickedComponentId,
+      );
       if (comp) {
         componentName.value = comp.title;
         componentItem.value = comp;
@@ -63,7 +80,7 @@ const cleanName = computed(() => {
   if (componentName.value && meta.viewer_type === "model_component") {
     return componentName.value;
   }
-  return meta.name || "Unnamed Object";
+  return asString(meta.name) ?? "Unnamed Object";
 });
 
 const displayTitle = computed(() => {
@@ -86,7 +103,7 @@ const displayComponentTitle = computed(() => {
   );
 });
 
-async function copyId(targetId) {
+async function copyId(targetId: string | undefined) {
   if (!targetId) {
     return;
   }
@@ -98,7 +115,7 @@ async function copyId(targetId) {
   }
 }
 
-function formatId(id) {
+function formatId(id: string | undefined) {
   if (!id) {
     return "";
   }

package/app/components/Viewer/EdgedCurve/PointsOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import EdgedCurvePoints from "@ogw_front/assets/viewer_svgs/edged_curve_points.svg";
-import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions";
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>