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

package/app/stores/data_style.ts

@@ -0,0 +1,167 @@
+import type {
+  ModelComponentStyle,
+  ModelComponentTypeStyle,
+  ObjectStyle,
+} from "@ogw_internal/stores/data_style/types";
+import type { Table } from "dexie";
+import { database } from "@ogw_internal/database/database.js";
+import { getDefaultStyle } from "@ogw_front/utils/default_styles";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useMeshStyle } from "@ogw_internal/stores/data_style/mesh/index";
+import { useModelStyle } from "@ogw_internal/stores/data_style/model/index";
+
+interface DataStyleSnapshot {
+  readonly styles: Record<string, ObjectStyle>;
+  readonly componentStyles: Record<string, ModelComponentStyle>;
+  readonly modelComponentTypeStyles: Record<string, ModelComponentTypeStyle>;
+}
+
+// The database's table map is dynamically assembled at runtime (see internal/database/database.ts), so its exported type is a loose `{}`; cast it to the shape it actually has at runtime rather than widening every call site.
+type DatabaseTables = Record<string, Table<Record<string, unknown>, string> | undefined>;
+
+// `noUncheckedIndexedAccess` sees these as possibly undefined even though they're always registered before this store is used; guard defensively rather than asserting.
+function requireTable<TableValue>(table: TableValue | undefined, name: string): TableValue {
+  if (table === undefined) {
+    throw new Error(`Database table not initialized: ${name}`);
+  }
+  return table;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+// oxlint-disable-next-line max-lines-per-function
+export const useDataStyleStore = defineStore("dataStyle", () => {
+  const dataStyleState = useDataStyleState();
+  const meshStyleStore = useMeshStyle();
+  const modelStyleStore = useModelStyle();
+  const dataStore = useDataStore();
+  // oxlint-disable-next-line no-unsafe-type-assertion -- the database Proxy is typed as `{}` at its export site; this cast documents its real runtime shape.
+  const typedDatabase = database as unknown as DatabaseTables;
+  const data_style_db = requireTable(typedDatabase.data_style, "data_style");
+  const model_component_type_datastyle_db = requireTable(
+    typedDatabase.model_component_type_datastyle,
+    "model_component_type_datastyle",
+  );
+  const component_datastyle_db = requireTable(
+    typedDatabase.model_component_datastyle,
+    "model_component_datastyle",
+  );
+
+  async function addDataStyle(id: string, geode_object: string): Promise<void> {
+    const defaultStyle = getDefaultStyle(geode_object);
+    await data_style_db.put(
+      structuredClone({ id, ...(isRecord(defaultStyle) ? defaultStyle : {}) }),
+    );
+  }
+
+  async function setVisibility(id: string, visibility: boolean): Promise<unknown> {
+    const item = await dataStore.item(id);
+    if (!(await dataStore.isItemViewable(item))) {
+      return dataStyleState.mutateStyle(id, { visibility });
+    }
+
+    const { viewer_type } = item;
+
+    if (viewer_type === "mesh") {
+      return meshStyleStore.setMeshVisibility(id, visibility);
+    }
+    if (viewer_type === "model") {
+      return modelStyleStore.setModelVisibility(id, visibility);
+    }
+    throw new Error("Unknown viewer_type");
+  }
+
+  async function applyDefaultStyle(id: string): Promise<unknown[]> {
+    const item = await dataStore.item(id);
+    if (!(await dataStore.isItemViewable(item))) {
+      throw new Error(`applyDefaultStyle called for non-viewable item: ${id}`);
+    }
+
+    const { viewer_type } = item;
+
+    if (viewer_type === "mesh") {
+      return meshStyleStore.applyMeshStyle(id);
+    }
+    if (viewer_type === "model") {
+      return modelStyleStore.applyModelStyle(id);
+    }
+    throw new Error(`Unknown viewer_type: ${viewer_type}`);
+  }
+
+  function exportStores(): DataStyleSnapshot {
+    return {
+      styles: dataStyleState.styles.value,
+      componentStyles: dataStyleState.componentStyles.value,
+      modelComponentTypeStyles: dataStyleState.modelComponentTypeStyles.value,
+    };
+  }
+
+  // oxlint-disable-next-line prefer-readonly-parameter-types -- ObjectStyle (external type) has a mutable index signature and mutable nested StyleValues fields that can't be marked readonly from here.
+  async function importStores(snapshot: DataStyleSnapshot): Promise<void> {
+    const stylesSnapshot = snapshot.styles;
+    const componentStylesSnapshot = snapshot.componentStyles;
+    const modelComponentTypeStylesSnapshot = snapshot.modelComponentTypeStyles;
+
+    await dataStyleState.clear();
+
+    const style_promises = Object.entries(stylesSnapshot).map(
+      // oxlint-disable-next-line prefer-readonly-parameter-types -- same external ObjectStyle limitation as above.
+      async ([id, style]: readonly [string, ObjectStyle]) => {
+        const key = await data_style_db.put(structuredClone({ ...style, id }));
+        return key;
+      },
+    );
+    const component_style_promises = Object.values(componentStylesSnapshot).map(
+      async (style: ModelComponentStyle) => {
+        const key = await component_datastyle_db.put(structuredClone(style));
+        return key;
+      },
+    );
+    const model_component_type_style_promises = Object.values(modelComponentTypeStylesSnapshot).map(
+      async (style: ModelComponentTypeStyle) => {
+        const key = await model_component_type_datastyle_db.put(structuredClone(style));
+        return key;
+      },
+    );
+
+    await Promise.all([
+      ...style_promises,
+      ...component_style_promises,
+      ...model_component_type_style_promises,
+    ]);
+  }
+
+  async function applyAllStylesFromState(): Promise<void> {
+    const ids = Object.keys(dataStyleState.styles.value);
+    const promises = ids.map(async (id) => {
+      const meta = await dataStore.item(id);
+      if (!(await dataStore.isItemViewable(meta))) {
+        return;
+      }
+      const viewerType = meta.viewer_type;
+      if (viewerType === "mesh") {
+        await meshStyleStore.applyMeshStyle(id);
+      } else if (viewerType === "model") {
+        await modelStyleStore.applyModelStyle(id);
+      }
+    });
+    await Promise.all(promises);
+  }
+
+  return {
+    addDataStyle,
+    applyDefaultStyle,
+    setVisibility,
+    exportStores,
+    importStores,
+    applyAllStylesFromState,
+    ...dataStyleState,
+    ...meshStyleStore,
+    ...modelStyleStore,
+  };
+});
+
+export type { DataStyleSnapshot };

package/app/stores/{feedback.js → feedback.ts}

@@ -3,16 +3,27 @@ import { v4 as uuidv4 } from "uuid";
 const MILLISECONDS_IN_SECOND = 1000;
 const DEFAULT_FEEDBACKS_TIMEOUT_SECONDS = 10;
 
+type FeedbackType = "error" | "success" | "warning";
+
+interface Feedback {
+  id: string;
+  type: FeedbackType;
+  code?: number;
+  route?: string;
+  name?: string;
+  description?: string;
+}
+
 export const useFeedbackStore = defineStore("feedback", {
   state: () => ({
-    feedbacks: [],
+    feedbacks: [] as Feedback[],
     server_error: false,
     feedbacks_timeout_miliseconds: DEFAULT_FEEDBACKS_TIMEOUT_SECONDS * MILLISECONDS_IN_SECOND,
   }),
   actions: {
-    async add_error(code, route, name, description) {
+    add_error(code: number, route: string, name: string, description: string) {
       const feedbackId = uuidv4();
-      await this.feedbacks.push({
+      this.feedbacks.push({
         id: feedbackId,
         type: "error",
         code,
@@ -24,9 +35,9 @@ export const useFeedbackStore = defineStore("feedback", {
         this.delete_feedback(feedbackId);
       }, this.feedbacks_timeout_miliseconds);
     },
-    async add_success(description) {
+    add_success(description: string) {
       const feedbackId = uuidv4();
-      await this.feedbacks.push({
+      this.feedbacks.push({
         id: feedbackId,
         type: "success",
         description,
@@ -35,9 +46,9 @@ export const useFeedbackStore = defineStore("feedback", {
         this.delete_feedback(feedbackId);
       }, this.feedbacks_timeout_miliseconds);
     },
-    async add_warning(description) {
+    add_warning(description: string) {
       const feedbackId = uuidv4();
-      await this.feedbacks.push({
+      this.feedbacks.push({
         id: feedbackId,
         type: "warning",
         description,
@@ -46,7 +57,7 @@ export const useFeedbackStore = defineStore("feedback", {
         this.delete_feedback(feedbackId);
       }, this.feedbacks_timeout_miliseconds);
     },
-    delete_feedback(feedbackId) {
+    delete_feedback(feedbackId: string) {
       this.feedbacks = this.feedbacks.filter((feedback) => feedback.id !== feedbackId);
     },
     delete_server_error() {

package/app/stores/{hybrid_viewer.js → hybrid_viewer.ts}

@@ -1,30 +1,31 @@
+import {
+  type ViewStreamLike,
+  useHybridViewerViewport,
+} from "@ogw_internal/stores/hybrid_viewer/viewport";
 import {
   applySnapshot,
   getCameraOptions,
   useHybridViewerCamera,
 } from "@ogw_internal/stores/hybrid_viewer/camera";
 import { BACKGROUND_COLOR } from "@ogw_internal/stores/hybrid_viewer/constants";
+import type { CameraOptions } from "@ogw_internal/stores/hybrid_viewer/vtk_types";
 import { useHybridViewerBrightness } from "@ogw_internal/stores/hybrid_viewer/brightness";
+import { useHybridViewerCore } from "@ogw_internal/stores/hybrid_viewer/core";
 import { useHybridViewerFilters } from "@ogw_internal/stores/hybrid_viewer/filters";
 import { useHybridViewerHighlight } from "@ogw_internal/stores/hybrid_viewer/highlight";
 import { useHybridViewerRuler } from "@ogw_internal/stores/hybrid_viewer/ruler";
 import { useHybridViewerScene } from "@ogw_internal/stores/hybrid_viewer/scene";
-import { useHybridViewerViewport } from "@ogw_internal/stores/hybrid_viewer/viewport";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 
 import { Status } from "@ogw_front/utils/status";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
 // oxlint-disable max-lines-per-function, max-statements
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const viewerStore = useViewerStore();
-  const genericRenderWindow = reactive({});
-  const status = ref(Status.NOT_CREATED);
-  const is_moving = ref(false);
-  const is_picking = ref(false);
-  let imageStyle = undefined;
+  const { genericRenderWindow, status, is_moving, is_picking, remoteRender } =
+    useHybridViewerCore();
+  let imageStyle: CSSStyleDeclaration | undefined = undefined;
 
   const brightnessStore = useHybridViewerBrightness();
   const sceneStore = useHybridViewerScene();
@@ -40,14 +41,19 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     if (!genericRenderWindow.value) {
       return;
     }
+    // oxlint-disable-next-line no-unsafe-assignment -- vtk.js has no types for getApiSpecificRenderWindow(); narrowed below.
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
-    const canvas = webGLRenderWindow.getCanvas();
-    if (canvas && canvas.parentElement) {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- trusted vtk.js OpenGL render window API boundary.
+    const openGLRenderWindow = webGLRenderWindow as unknown as {
+      getCanvas: () => HTMLCanvasElement;
+    };
+    const canvas = openGLRenderWindow.getCanvas();
+    if (canvas.parentElement) {
       canvas.parentElement.style.cursor = value ? "crosshair" : "default";
     }
   });
 
-  async function initHybridViewer() {
+  async function initHybridViewer(): Promise<void> {
     if (status.value !== Status.NOT_CREATED) {
       return;
     }
@@ -56,19 +62,38 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       background: BACKGROUND_COLOR,
       listenWindowResize: false,
     });
-    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+    const webGLRenderWindow =
+      // oxlint-disable-next-line no-unsafe-type-assertion -- trusted vtk.js OpenGL render window API boundary.
+      genericRenderWindow.value.getApiSpecificRenderWindow() as unknown as {
+        getReferenceByName: (name: string) => { style: CSSStyleDeclaration };
+        setBackgroundImage: (image: unknown) => void;
+      };
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
-    Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
+    Object.assign(imageStyle, {
+      transition: "opacity 0.1s ease-in",
+      zIndex: 1,
+    });
     await viewerStore.ws_connect();
-    const imageStream = viewerStore.client.getImageStream();
+    // oxlint-disable-next-line no-unsafe-type-assertion -- trusted @kitware/vtk.js WebSocket client API boundary.
+    const clientApi = viewerStore.client as unknown as {
+      getImageStream: () => {
+        createViewStream: (id: string) => ViewStreamLike;
+      };
+    };
+    const imageStream = clientApi.getImageStream();
     viewportStore.viewStream.value = imageStream.createViewStream("-1");
-    viewportStore.viewStream.value.onImageReady((event) => {
+    viewportStore.viewStream.value?.onImageReady((event: { image: unknown }) => {
       if (is_moving.value) {
         return;
       }
-      brightnessStore.latestImage.value = event.image;
+      // oxlint-disable no-unsafe-type-assertion -- image payload shape is guaranteed by the viewer's onImageReady contract.
+      const latestImage = event.image as typeof brightnessStore.latestImage.value;
+      // oxlint-enable no-unsafe-type-assertion
+      brightnessStore.latestImage.value = latestImage;
       webGLRenderWindow.setBackgroundImage(event.image);
-      imageStyle.opacity = 1;
+      if (imageStyle) {
+        imageStyle.opacity = "1";
+      }
     });
     const renderer = genericRenderWindow.value.getRenderer();
     const camera = renderer.getActiveCamera();
@@ -79,36 +104,15 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     status.value = Status.CREATED;
   }
 
-  let renderPromise = undefined;
-  let renderPending = false;
-
-  function remoteRender() {
-    if (renderPromise) {
-      renderPending = true;
-      return renderPromise;
-    }
-
-    renderPromise = (async () => {
-      try {
-        const schema = viewer_schemas.opengeodeweb_viewer.viewer.render;
-        await viewerStore.request({ schema });
-      } finally {
-        renderPromise = undefined;
-        if (renderPending) {
-          renderPending = false;
-          await remoteRender();
-        }
-      }
-    })();
-    return renderPromise;
-  }
-
-  function exportStores() {
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
+  function exportStores(): {
+    zScale: number;
+    camera_options: CameraOptions | Record<string, unknown>;
+  } {
+    const renderer = genericRenderWindow.value?.getRenderer();
+    const camera = renderer?.getActiveCamera();
     return {
       zScale: sceneStore.zScale.value,
-      camera_options: getCameraOptions(camera) || cameraStore.camera_options,
+      camera_options: (camera ? getCameraOptions(camera) : undefined) ?? cameraStore.camera_options,
     };
   }
 

package/app/stores/infra.ts

@@ -0,0 +1,106 @@
+import { Status } from "@ogw_front/utils/status";
+import { appMode } from "@ogw_shared/app_mode";
+import { setAppBaseUrl } from "@ogw_shared/scripts";
+import { useCloudStore } from "@ogw_front/stores/cloud";
+
+interface ElectronApi {
+  electronAPI: {
+    project_folder_path: (args: { projectFolderPath: string }) => void;
+  };
+}
+
+declare global {
+  // oxlint-disable-next-line no-var -- required for global augmentation
+  var electronAPI: ElectronApi["electronAPI"];
+}
+
+export const useInfraStore = defineStore("infra", {
+  state: () => ({
+    app_mode: useRuntimeConfig().public.MODE,
+    status: Status.NOT_CREATED,
+    microservices: [] as Microservice[],
+    domain_name: globalThis.location.hostname,
+  }),
+  getters: {
+    microservices_connected(): boolean {
+      return this.microservices.every((store: Microservice) => store.status === Status.CONNECTED);
+    },
+    microservices_busy(): boolean {
+      return this.microservices.some((store: Microservice) => store.is_busy === true);
+    },
+  },
+  actions: {
+    register_microservice(store: Microservice) {
+      const store_name = store.$id;
+
+      if (
+        !this.microservices.some((microservice: Microservice) => microservice.$id === store_name)
+      ) {
+        this.microservices.push(store);
+      }
+    },
+    unregister_microservice(microserviceId: string) {
+      this.microservices = this.microservices.filter(
+        (microservice: Microservice) => microservice.$id !== microserviceId,
+      );
+    },
+    async create_backend(email?: string) {
+      if (this.status === Status.CREATED) {
+        return undefined;
+      }
+      await navigator.locks.request("infra.create_backend", async () => {
+        if (this.status === Status.CREATED) {
+          return;
+        }
+        this.status = Status.CREATING;
+        if (this.app_mode === appMode.CLOUD) {
+          const cloudStore = useCloudStore();
+          await cloudStore.launch(email ?? "");
+        } else {
+          const { useAppStore } = await import("@ogw_front/stores/app");
+          const appStore = useAppStore();
+          await appStore.createProjectFolder();
+          if (this.app_mode === appMode.DESKTOP) {
+            globalThis.electronAPI.project_folder_path({
+              projectFolderPath: appStore.projectFolderPath,
+            });
+          }
+          await setAppBaseUrl(appStore.base_url);
+          const microservices_with_launch = this.microservices.filter(
+            (store: Microservice) => store.launch,
+          );
+          const launch_promises = microservices_with_launch.map(async (store: Microservice) => {
+            const result = await store.launch?.({
+              projectFolderPath: appStore.projectFolderPath,
+            });
+            return result;
+          });
+          const { registerRunningExtensions } = await import("@ogw_front/utils/extension");
+          launch_promises.push(registerRunningExtensions());
+          await Promise.all(launch_promises);
+        }
+        this.status = Status.CREATED;
+        return this.create_connection();
+      });
+      return undefined;
+    },
+    async create_connection() {
+      await Promise.all(
+        this.microservices.map(async (store: Microservice) => {
+          await store.connect();
+        }),
+      );
+    },
+  },
+  share: {
+    omit: ["microservices"],
+  },
+});
+
+export interface Microservice {
+  $id: string;
+  status?: string;
+  is_busy?: boolean;
+  launch?: (params: Record<string, unknown>) => Promise<unknown>;
+  connect: () => Promise<void>;
+}

package/app/stores/{menu.js → menu.ts}

@@ -1,42 +1,63 @@
 // PointSet components
-import PointSetPointsOptions from "@ogw_front/components/Viewer/PointSet/SpecificPointsOptions";
+import PointSetPointsOptions from "@ogw_front/components/Viewer/PointSet/SpecificPointsOptions.vue";
 
 // EdgedCurve components
-import EdgedCurveEdgesOptions from "@ogw_front/components/Viewer/EdgedCurve/SpecificEdgesOptions";
-import EdgedCurvePointsOptions from "@ogw_front/components/Viewer/EdgedCurve/PointsOptions";
+import EdgedCurveEdgesOptions from "@ogw_front/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue";
+import EdgedCurvePointsOptions from "@ogw_front/components/Viewer/EdgedCurve/PointsOptions.vue";
 
 // Surface components
-import SurfaceEdgesOptions from "@ogw_front/components/Viewer/Surface/EdgesOptions";
-import SurfacePointsOptions from "@ogw_front/components/Viewer/Surface/PointsOptions";
-import SurfacePolygonsOptions from "@ogw_front/components/Viewer/Surface/PolygonsOptions";
+import SurfaceEdgesOptions from "@ogw_front/components/Viewer/Surface/EdgesOptions.vue";
+import SurfacePointsOptions from "@ogw_front/components/Viewer/Surface/PointsOptions.vue";
+import SurfacePolygonsOptions from "@ogw_front/components/Viewer/Surface/PolygonsOptions.vue";
 
 // TriangulatedSurface components
-import TriangulatedSurfaceTrianglesOptions from "@ogw_front/components/Viewer/Surface/Triangulated/TrianglesOptions";
+import TriangulatedSurfaceTrianglesOptions from "@ogw_front/components/Viewer/Surface/Triangulated/TrianglesOptions.vue";
 
 // Grid 2D components
-import Grid2DCellsOptions from "@ogw_front/components/Viewer/Grid/2D/CellsOptions";
-import Grid2DEdgesOptions from "@ogw_front/components/Viewer/Grid/2D/EdgesOptions";
-import Grid2DPointsOptions from "@ogw_front/components/Viewer/Grid/2D/PointsOptions";
+import Grid2DCellsOptions from "@ogw_front/components/Viewer/Grid/2D/CellsOptions.vue";
+import Grid2DEdgesOptions from "@ogw_front/components/Viewer/Grid/2D/EdgesOptions.vue";
+import Grid2DPointsOptions from "@ogw_front/components/Viewer/Grid/2D/PointsOptions.vue";
 
 // Grid 3D components
-import Grid3DCellsOptions from "@ogw_front/components/Viewer/Grid/3D/CellsOptions";
-import Grid3DEdgesOptions from "@ogw_front/components/Viewer/Grid/3D/EdgesOptions";
-import Grid3DPointsOptions from "@ogw_front/components/Viewer/Grid/3D/PointsOptions";
+import Grid3DCellsOptions from "@ogw_front/components/Viewer/Grid/3D/CellsOptions.vue";
+import Grid3DEdgesOptions from "@ogw_front/components/Viewer/Grid/3D/EdgesOptions.vue";
+import Grid3DPointsOptions from "@ogw_front/components/Viewer/Grid/3D/PointsOptions.vue";
 
 // Solid components
-import SolidEdgesOptions from "@ogw_front/components/Viewer/Solid/EdgesOptions";
-import SolidPointsOptions from "@ogw_front/components/Viewer/Solid/PointsOptions";
-import SolidPolygonsOptions from "@ogw_front/components/Viewer/Solid/PolygonsOptions";
-import SolidPolyhedraOptions from "@ogw_front/components/Viewer/Solid/SpecificPolyhedraOptions";
+import SolidEdgesOptions from "@ogw_front/components/Viewer/Solid/EdgesOptions.vue";
+import SolidPointsOptions from "@ogw_front/components/Viewer/Solid/PointsOptions.vue";
+import SolidPolygonsOptions from "@ogw_front/components/Viewer/Solid/PolygonsOptions.vue";
+import SolidPolyhedraOptions from "@ogw_front/components/Viewer/Solid/SpecificPolyhedraOptions.vue";
 
 // TetrahedralSolid components
-import TetrahedralSolidTetrahedraOptions from "@ogw_front/components/Viewer/TetrahedralSolid/TetrahedraOptions";
-import TetrahedralSolidTrianglesOptions from "@ogw_front/components/Viewer/TetrahedralSolid/TrianglesOptions";
+import TetrahedralSolidTetrahedraOptions from "@ogw_front/components/Viewer/TetrahedralSolid/TetrahedraOptions.vue";
+import TetrahedralSolidTrianglesOptions from "@ogw_front/components/Viewer/TetrahedralSolid/TrianglesOptions.vue";
 
 // Model components
-import ModelEdgesOptions from "@ogw_front/components/Viewer/Generic/Model/EdgesOptions";
-import ModelPointsOptions from "@ogw_front/components/Viewer/Generic/Model/PointsOptions";
-import ModelStyleOptions from "@ogw_front/components/Viewer/Generic/Model/ModelStyleOptions";
+import ModelEdgesOptions from "@ogw_front/components/Viewer/Generic/Model/EdgesOptions.vue";
+import ModelPointsOptions from "@ogw_front/components/Viewer/Generic/Model/PointsOptions.vue";
+import ModelStyleOptions from "@ogw_front/components/Viewer/Generic/Model/ModelStyleOptions.vue";
+
+import type { Component } from "vue";
+
+type MenuItems = Component[];
+
+interface MenuMetaData {
+  viewer_type?: string;
+  geode_object_type?: string;
+  [key: string]: unknown;
+}
+
+interface OpenMenuOptions {
+  readonly id: string;
+  readonly x: number | undefined;
+  readonly y: number | undefined;
+  readonly width: number;
+  readonly height: number;
+  readonly top: number;
+  readonly left: number;
+  readonly meta_data: MenuMetaData | undefined;
+}
 
 const PointSet_menu = [PointSetPointsOptions];
 
@@ -85,7 +106,7 @@ const StructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleO
 
 const ModelComponent_menu = [ModelEdgesOptions, ModelPointsOptions, ModelStyleOptions];
 
-const menusData = {
+const menusData: Record<string, Record<string, MenuItems>> = {
   mesh: {
     EdgedCurve2D: EdgedCurve_menu,
     EdgedCurve3D: EdgedCurve_menu,
@@ -122,24 +143,33 @@ const menusData = {
 export const useMenuStore = defineStore("menu", () => {
   const menus = shallowRef(menusData);
   const display_menu = ref(false);
-  const current_id = ref(undefined);
+  const current_id = ref<string | undefined>(undefined);
   const menuX = ref(0);
   const menuY = ref(0);
   const containerWidth = ref(window.innerWidth);
   const containerHeight = ref(window.innerHeight);
   const containerTop = ref(0);
   const containerLeft = ref(0);
-  const active_item_index = ref(undefined);
-  const current_meta_data = ref({});
-
-  function getMenuItems(objectType, geodeObject) {
-    if (!objectType || !geodeObject || !menus.value[objectType]) {
+  const active_item_index = ref<number | undefined>(undefined);
+  const current_meta_data = ref<MenuMetaData>({});
+
+  function getMenuItems(
+    objectType: string | undefined,
+    geodeObject: string | undefined,
+  ): MenuItems {
+    if (
+      objectType === undefined ||
+      objectType === "" ||
+      geodeObject === undefined ||
+      geodeObject === "" ||
+      !menus.value[objectType]
+    ) {
       return [];
     }
-    return menus.value[objectType][geodeObject] || [];
+    return menus.value[objectType]?.[geodeObject] ?? [];
   }
 
-  function closeMenu() {
+  function closeMenu(): void {
     active_item_index.value = undefined;
     current_id.value = undefined;
     current_meta_data.value = {};
@@ -148,8 +178,9 @@ export const useMenuStore = defineStore("menu", () => {
     display_menu.value = false;
   }
 
-  async function openMenu(id, x, y, width, height, top, left, meta_data) {
-    await closeMenu();
+  function openMenu(options: OpenMenuOptions): void {
+    const { id, x, y, width, height, top, left, meta_data } = options;
+    closeMenu();
 
     if (meta_data) {
       const items = getMenuItems(meta_data.viewer_type, meta_data.geode_object_type);
@@ -159,7 +190,7 @@ export const useMenuStore = defineStore("menu", () => {
     }
 
     current_id.value = id;
-    current_meta_data.value = meta_data || {};
+    current_meta_data.value = meta_data ?? {};
 
     if (x !== undefined && y !== undefined) {
       menuX.value = x;
@@ -174,12 +205,12 @@ export const useMenuStore = defineStore("menu", () => {
     display_menu.value = true;
   }
 
-  function setMenuPosition(x, y) {
+  function setMenuPosition(x: number, y: number): void {
     menuX.value = x;
     menuY.value = y;
   }
 
-  function toggleItemOptions(index) {
+  function toggleItemOptions(index: number): void {
     if (active_item_index.value === index) {
       active_item_index.value = undefined;
     } else {