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

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

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import TriangulatedSurfaceEdgesPoints from "@ogw_front/assets/viewer_svgs/surface_points.svg";
-import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions";
+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>

package/app/components/Viewer/Surface/PolygonsOptions.vue

@@ -1,9 +1,11 @@
-<script setup>
+<script setup lang="ts">
+import ViewerContextMenuItem, {
+  type ItemProps,
+} from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import PolygonalSurfacePolygons from "@ogw_front/assets/viewer_svgs/surface_triangles.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
-import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
-import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
-
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
+import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -12,134 +14,161 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { applyBatchStyle } = useBatchStyle();
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-  tooltip: { type: String, required: false, default: "Polygons options" },
-});
+interface Texture {
+  id: string;
+  texture_name: string;
+}
+
+interface Props {
+  itemProps: ItemProps & { index: number };
+  tooltip?: string;
+}
+
+const { itemProps, tooltip = "Polygons options" } = defineProps<Props>();
 
 const id = toRef(() => itemProps.id);
 
-const visibility = computed({
+const visibility = computed<boolean>({
   get: () => dataStyleStore.meshPolygonsVisibility(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsVisibility(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed({
+const coloring_style_key = computed<string>({
   get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsActiveColoring(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const color = computed({
-  get: () => dataStyleStore.meshPolygonsColor(id.value),
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshPolygonsColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const textures = computed({
-  get: () => dataStyleStore.meshPolygonsTextures(id.value),
+const textures = computed<Texture[] | undefined>({
+  get: () => dataStyleStore.meshPolygonsTextures(id.value) as Texture[] | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsTextures(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_name = computed({
+const vertex_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue),
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_item = computed({
+const vertex_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeItem(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeItem(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeItem(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_color_map = computed({
+const vertex_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeColorMap(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeColorMap(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_no_data_color = computed({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeNoDataColor(id.value),
+const vertex_attribute_no_data_color = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.meshPolygonsVertexAttributeNoDataColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsVertexAttributeNoDataColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_name = computed({
+const polygon_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue),
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_item = computed({
+const polygon_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeItem(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeItem(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeItem(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_range = computed({
+const polygon_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, newValue[0], newValue[1]),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_color_map = computed({
+const polygon_attribute_color_map = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_no_data_color = computed({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeNoDataColor(id.value),
+const polygon_attribute_no_data_color = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.meshPolygonsPolygonAttributeNoDataColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsPolygonAttributeNoDataColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
@@ -150,6 +179,7 @@ const polygon_attribute_no_data_color = computed({
 <template>
   <ViewerContextMenuItem
     data-testid="meshPolygonsMenu"
+    :index="itemProps.index"
     :itemProps="itemProps"
     :tooltip="tooltip"
     :btnImage="PolygonalSurfacePolygons"

package/app/components/Viewer/Surface/Triangulated/TrianglesOptions.vue

@@ -1,9 +1,12 @@
-<script setup>
-import ViewerSpecificPolygonsOptions from "@ogw_front/components/Viewer/Surface/PolygonsOptions";
+<script setup lang="ts">
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import ViewerSpecificPolygonsOptions from "@ogw_front/components/Viewer/Surface/PolygonsOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Viewer/TetrahedralSolid/TetrahedraOptions.vue

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

package/app/components/Viewer/TetrahedralSolid/TrianglesOptions.vue

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

package/app/components/Viewer/Ui.vue

@@ -1,25 +1,29 @@
-<script setup>
-import OverlappingObjectsPicker from "@ogw_front/components/Viewer/OverlappingObjectsPicker";
-import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu/ContextMenu";
-import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
+<script setup lang="ts">
+import OverlappingObjectsPicker from "@ogw_front/components/Viewer/OverlappingObjectsPicker.vue";
+import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu/ContextMenu.vue";
+import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout.vue";
 import { getCurrentInstance } from "vue";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useOverlappingPicker } from "@ogw_front/composables/use_overlapping_picker";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-const { displayMenu, containerWidth, containerHeight } = defineProps({
-  displayMenu: { type: Boolean, required: true },
-  containerWidth: { type: Number, required: true },
-  containerHeight: { type: Number, required: true },
-});
+interface Props {
+  displayMenu: boolean;
+  containerWidth: number;
+  containerHeight: number;
+}
+
+const { displayMenu, containerWidth, containerHeight } = defineProps<Props>();
 
-const emit = defineEmits(["show-menu"]);
+const emit = defineEmits<{
+  "show-menu": [args: unknown];
+}>();
 const menuStore = useMenuStore();
 const viewerStore = useViewerStore();
 const hybridViewerStore = useHybridViewerStore();
 
-function stopHoverHighlight() {
+function stopHoverHighlight(): void {
   hybridViewerStore.is_hover_highlight = false;
   hybridViewerStore.clearHoverHighlight();
 }
@@ -53,7 +57,7 @@ const {
   get_viewer_id: trigger_picker,
 } = useOverlappingPicker();
 
-function get_viewer_id(x, y) {
+function get_viewer_id(x: number, y: number): string {
   const instance = getCurrentInstance();
   const containerRect = instance?.proxy?.$el
     ?.closest?.('[data-testid="hybridViewer"]')
@@ -82,7 +86,7 @@ defineExpose({ get_viewer_id });
   />
   <ViewerContextMenu
     v-if="displayMenu"
-    :id="menuStore.current_id"
+    :id="menuStore.current_id ?? ''"
     :x="menuStore.menuX"
     :y="menuStore.menuY"
     :container-width="containerWidth"
@@ -160,7 +164,8 @@ defineExpose({ get_viewer_id });
         prepend-icon="mdi-ruler"
         @click="hybridViewerStore.clearRuler()"
       >
-        Ruler &mdash; click to set point {{ hybridViewerStore.ruler_awaiting_point }}
+        Ruler &mdash; click to set point
+        {{ hybridViewerStore.ruler_awaiting_point }}
         &middot; Esc to stop
         <v-divider vertical class="mx-2 my-1" opacity="0.3" />
         <v-icon icon="mdi-close" size="small" />

package/app/components/Wrapper.vue

@@ -1,16 +1,22 @@
-<script setup>
-import Launcher from "@ogw_front/components/Launcher";
-import PackagesVersions from "@ogw_front/components/PackagesVersions";
-import Stepper from "@ogw_front/components/Stepper";
-
+<script setup lang="ts">
+import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
+import Launcher from "@ogw_front/components/Launcher.vue";
+import PackagesVersions from "@ogw_front/components/PackagesVersions.vue";
+import Stepper from "@ogw_front/components/Stepper.vue";
 import { useInfraStore } from "@ogw_front/stores/infra";
+import { useStepperTree } from "@ogw_front/composables/stepper_tree";
 
 const infraStore = useInfraStore();
 
-const { versionsSchema, appName } = defineProps({
-  versionsSchema: { type: Object, required: true },
-  appName: { type: String, required: true },
-});
+interface Props {
+  versionsSchema: JsonRpcSchema;
+  appName: string;
+}
+
+const { versionsSchema, appName } = defineProps<Props>();
+
+// Pre-existing gap (not introduced by this typing pass): this component never received an actual list of import steps, so `<Stepper>` was being rendered without its required `stepperTree` prop and would have thrown at runtime. Instantiating an (empty) stepper tree here keeps the component from crashing without inventing step content it isn't given.
+const stepperTree = useStepperTree([]);
 </script>
 
 <template>
@@ -23,7 +29,7 @@ const { versionsSchema, appName } = defineProps({
       </template>
       <template v-else>
         <v-col>
-          <Stepper />
+          <Stepper :stepper-tree="stepperTree" />
         </v-col>
         <v-col>
           <PackagesVersions :schema="versionsSchema" />

package/app/components/ZScaling.vue

@@ -1,17 +1,25 @@
-<script setup>
-import ToolPanel from "@ogw_front/components/ToolPanel";
+<script setup lang="ts">
+import ToolPanel from "@ogw_front/components/ToolPanel.vue";
 
-const zScale = defineModel({ type: Number, default: 1 });
-const show = defineModel("show", { type: Boolean, default: false });
+const zScale = defineModel<number>({ default: 1 });
+const show = defineModel<boolean>("show", { default: false });
 
-const { width, escapeFunction } = defineProps({
-  width: { type: Number, default: 260 },
-  escapeFunction: { type: Function, default: undefined },
-});
+const DEFAULT_PANEL_WIDTH = 260;
 
-const emit = defineEmits(["apply"]);
+interface Props {
+  width?: number;
+  escapeFunction?: () => void;
+}
+
+const { width = DEFAULT_PANEL_WIDTH, escapeFunction = undefined } = defineProps<Props>();
+
+interface Emits {
+  apply: [];
+}
+
+const emit = defineEmits<Emits>();
 
-function apply() {
+function apply(): void {
   emit("apply");
   show.value = false;
 }

package/app/components/csv-preview/CsvPreviewer.vue

@@ -1,13 +1,31 @@
-<script setup>
+<script setup lang="ts">
 import { useToggle } from "@vueuse/core";
 
 import CsvSettings from "./CsvSettings.vue";
 import CsvTable from "./CsvTable.vue";
 
-const { file, modelValue } = defineProps({
-  file: { type: Object, required: true },
-  modelValue: { type: Boolean, default: false },
-});
+interface CsvHeader {
+  title: string;
+  key: string;
+  align: "start" | "end" | "center";
+  sortable: boolean;
+}
+type CsvRow = Record<string, string>;
+interface CsvParseResult {
+  firstRow: number;
+  headerRow: number;
+  separator: string;
+  xColumn: number;
+  yColumn: number;
+  zColumn: number;
+}
+
+interface Props {
+  file: File;
+  modelValue?: boolean;
+}
+
+const { file, modelValue = false } = defineProps<Props>();
 
 const MAX_CONTENT_SLICE = 1000;
 const MAX_LINES_FOR_DETECTION = 5;
@@ -15,23 +33,28 @@ const MIN_AVG_COUNT = 1.5;
 const MAX_VARIANCE = 0.5;
 const PREVIEW_ROWS_LIMIT = 101;
 
-const emit = defineEmits(["update:modelValue", "confirm"]);
+interface Emits {
+  "update:modelValue": [value: boolean];
+  confirm: [result: CsvParseResult];
+}
+
+const emit = defineEmits<Emits>();
 
-const separator = ref(",");
-const headerRow = ref(0);
-const firstRow = ref(1);
+const separator = ref<string>(",");
+const headerRow = ref<number>(0);
+const firstRow = ref<number>(1);
 
-const xColumn = ref(undefined);
-const yColumn = ref(undefined);
-const zColumn = ref(undefined);
+const xColumn = ref<string | undefined>(undefined);
+const yColumn = ref<string | undefined>(undefined);
+const zColumn = ref<string | undefined>(undefined);
 
-const rawContent = ref("");
-const previewRows = ref([]);
-const previewHeaders = ref([]);
-const loading = ref(false);
+const rawContent = ref<string>("");
+const previewRows = ref<CsvRow[]>([]);
+const previewHeaders = ref<CsvHeader[]>([]);
+const loading = ref<boolean>(false);
 const toggleLoading = useToggle(loading);
 
-function autoDetectSeparator(content) {
+function autoDetectSeparator(content: string): string {
   const lines = content
     .slice(0, MAX_CONTENT_SLICE)
     .split(/\r?\n/u)
@@ -54,57 +77,55 @@ function autoDetectSeparator(content) {
   return best;
 }
 
-function parseContent() {
-  if (!rawContent.value) {
-    return;
+function splitLine(line: string): string[] {
+  if (!separator.value) {
+    return [line];
   }
-
-  const allLines = rawContent.value.split(/\r?\n/u).filter((line) => line.trim() !== "");
-
-  function splitLine(line) {
-    if (!separator.value) {
-      return [line];
+  const result = [];
+  let current = "";
+  let inQuotes = false;
+  for (const char of line) {
+    if (char === '"') {
+      inQuotes = !inQuotes;
+    } else if (char === separator.value && !inQuotes) {
+      result.push(current.trim());
+      current = "";
+    } else {
+      current += char;
     }
-    const result = [];
-    let current = "";
-    let inQuotes = false;
-    for (let index = 0; index < line.length; index += 1) {
-      const char = line[index];
-      if (char === '"') {
-        inQuotes = !inQuotes;
-      } else if (char === separator.value && !inQuotes) {
-        result.push(current.trim());
-        current = "";
-      } else {
-        current += char;
-      }
-    }
-    result.push(current.trim());
-    return result;
+  }
+  result.push(current.trim());
+  return result;
+}
+
+function parseContent(): string[] {
+  if (!rawContent.value) {
+    return [];
   }
 
+  const allLines = rawContent.value.split(/\r?\n/u).filter((line) => line.trim() !== "");
   const headerLine = allLines[headerRow.value];
   const rawHeaders = headerLine ? splitLine(headerLine) : [];
 
   previewHeaders.value = rawHeaders.map((header, index) => ({
     title: header || `Column ${index + 1}`,
     key: `col${index}`,
-    align: "start",
+    align: "start" as const,
     sortable: true,
   }));
 
   const dataLines = allLines.slice(firstRow.value, firstRow.value + PREVIEW_ROWS_LIMIT);
   previewRows.value = dataLines.map((line) => {
     const row = splitLine(line);
-    const obj = {};
+    const obj: CsvRow = {};
     for (let index = 0; index < row.length; index += 1) {
-      obj[`col${index}`] = row[index];
+      obj[`col${index}`] = row[index] ?? "";
     }
     return obj;
   });
 }
 
-function readAndParse() {
+function readAndParse(): void {
   if (!file) {
     return;
   }
@@ -112,7 +133,7 @@ function readAndParse() {
 
   const reader = new FileReader();
   reader.addEventListener("load", (event) => {
-    rawContent.value = event.target.result;
+    rawContent.value = String((event.target as FileReader | null)?.result ?? "");
     if (!separator.value || separator.value === ",") {
       separator.value = autoDetectSeparator(rawContent.value);
     }
@@ -124,7 +145,8 @@ function readAndParse() {
   });
   reader.readAsText(file, "utf8");
 }
-const computedResult = computed(() => {
+
+const computedResult = computed<CsvParseResult>(() => {
   const xIndex = previewHeaders.value.findIndex((header) => header.key === xColumn.value);
   const yIndex = previewHeaders.value.findIndex((header) => header.key === yColumn.value);
   const zIndex = previewHeaders.value.findIndex((header) => header.key === zColumn.value);
@@ -139,7 +161,7 @@ const computedResult = computed(() => {
   };
 });
 
-const isFormValid = computed(
+const isFormValid = computed<boolean>(
   () =>
     separator.value !== "" &&
     separator.value !== undefined &&
@@ -176,7 +198,7 @@ watch(
   },
 );
 
-function onConfirm() {
+function onConfirm(): void {
   emit("confirm", computedResult.value);
   emit("update:modelValue", false);
 }