From a259c0a8ee43c96ca512e20b6bcc854457fafcef Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Wed, 6 Nov 2024 09:06:08 +0300
Subject: [PATCH] Convert components to typescript

---
 public/galaxy-charts.xml                      |  15 +++
 src/components/ApiStatus.vue                  |   4 +-
 src/components/GalaxyCharts.vue               |  78 ++++++-------
 src/components/InputConditional.vue           |  89 +++++++++------
 src/components/InputData.vue                  |  43 ++++---
 src/components/InputDataColumn.vue            |  43 +++----
 src/components/InputForm.vue                  |  69 +++++++----
 src/components/InputRepeats.vue               |  49 ++++----
 src/components/SidePanel.vue                  | 107 +++++++-----------
 src/main.js                                   |   2 +-
 src/types.ts                                  |   1 +
 .../{parseIncoming.js => parseIncoming.ts}    |  34 +++++-
 src/utilities/toBoolean.ts                    |   4 +-
 13 files changed, 295 insertions(+), 243 deletions(-)
 create mode 100644 src/types.ts
 rename src/utilities/{parseIncoming.js => parseIncoming.ts} (51%)

diff --git a/public/galaxy-charts.xml b/public/galaxy-charts.xml
index aa27f62..ca4da87 100644
--- a/public/galaxy-charts.xml
+++ b/public/galaxy-charts.xml
@@ -21,6 +21,21 @@
         <type>spec_type</type>
     </specs>
     <settings>
+        <input>
+            <label>My Data Column Label</label>
+            <help>My Data ColumnHelp</help>
+            <name>my_data_column_name</name>
+            <type>data_column</type>
+        </input>
+        <input>
+            <label>My Float Label</label>
+            <help>My Float Help</help>
+            <name>my_float_name</name>
+            <type>float</type>
+            <value>1</value>
+            <min>0</min>
+            <max>100</max>
+        </input>
         <input>
             <label>Setting: Text</label>
             <name>setting_text</name>
diff --git a/src/components/ApiStatus.vue b/src/components/ApiStatus.vue
index 788d91e..54a12ed 100644
--- a/src/components/ApiStatus.vue
+++ b/src/components/ApiStatus.vue
@@ -1,10 +1,10 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from "vue";
 import { CheckCircleIcon, ExclamationCircleIcon } from "@heroicons/vue/24/outline";
 import { NIcon, NTooltip } from "naive-ui";
 import { GalaxyApi } from "@/api/client";
 
-const props = defineProps({});
+defineProps({});
 
 const version = ref("...");
 
diff --git a/src/components/GalaxyCharts.vue b/src/components/GalaxyCharts.vue
index 207faaa..d798d11 100644
--- a/src/components/GalaxyCharts.vue
+++ b/src/components/GalaxyCharts.vue
@@ -1,51 +1,51 @@
-<script setup>
+<script setup lang="ts">
+import { computed, ref, nextTick, defineProps, defineEmits } from "vue";
 import { ArrowPathIcon, ChevronDoubleLeftIcon } from "@heroicons/vue/24/outline";
 import SidePanel from "@/components/SidePanel.vue";
 import { parsePlugin } from "@/utilities/parsePlugin";
-import { computed, ref, nextTick } from "vue";
 import { NAlert, NFloatButton, NIcon } from "naive-ui";
 import { datasetsGetUrl } from "@/api/datasets";
 import { parseIncoming } from "@/utilities/parseIncoming";
 import { useConfigStore } from "@/store/configStore";
 
-// props
-const props = defineProps({
-    config: {
-        type: Object,
-        default: () => {},
-    },
-    xml: {
-        type: String,
-        required: true,
-    },
-});
+// Define props with TypeScript
+interface Config {
+    credentials?: string;
+    dataset_id?: string;
+    dataset_url?: string;
+}
+
+const props = defineProps<{
+    config: Config;
+    xml: string;
+}>();
 
-// references
-const collapsePanel = ref(false);
-const datasetUrl = ref(null);
-const description = ref(null);
-const errorMessage = ref("");
-const html = ref(null);
-const isLoading = ref(true);
-const logo = ref(null);
-const name = ref("");
-const settingInputs = ref([]);
-const settingValues = ref({});
-const specValues = ref({});
-const trackInputs = ref([]);
-const trackValues = ref([]);
+// References with reactive types
+const collapsePanel = ref<boolean>(false);
+const datasetUrl = ref<string | null>(null);
+const description = ref<string | null>(null);
+const errorMessage = ref<string>("");
+const html = ref<string | null>(null);
+const isLoading = ref<boolean>(true);
+const logo = ref<string | null>(null);
+const name = ref<string>("");
+const settingInputs = ref<Array<Record<string, any>>>([]);
+const settingValues = ref<Record<string, any>>({});
+const specValues = ref<Record<string, any>>({});
+const trackInputs = ref<Array<Record<string, any>>>([]);
+const trackValues = ref<Array<Record<string, any>>>([]);
 
-// parse incoming visualization details
+// Parse incoming visualization details
 const { root, visualizationConfig, visualizationId, visualizationPlugin, visualizationTitle } = parseIncoming(
     props.config,
 );
 
-// store values in config
+// Store values in config store
 const configStore = useConfigStore();
 configStore.setCredentials(props.config.credentials || "include");
 configStore.setRoot(root || "/");
 
-// collect plugin details and parse incoming settings
+// Collect plugin details and parse incoming settings
 parsePlugin(props.xml, visualizationPlugin, visualizationConfig).then(({ plugin, settings, specs, tracks }) => {
     description.value = plugin.description;
     html.value = plugin.html;
@@ -59,7 +59,7 @@ parsePlugin(props.xml, visualizationPlugin, visualizationConfig).then(({ plugin,
     trackValues.value = tracks;
 });
 
-// get visualization dataset id (required)
+// Get visualization dataset ID (required)
 const datasetId = visualizationConfig.dataset_id;
 if (visualizationConfig.dataset_url) {
     datasetUrl.value = visualizationConfig.dataset_url;
@@ -73,26 +73,26 @@ if (visualizationConfig.dataset_url) {
     }
 }
 
-// determine logo url
+// Determine logo URL
 const logoUrl = computed(() => logo.value && `${root}${logo.value}`);
 
-// hide panel
+// Hide panel condition
 const hidePanel = computed(() => settingInputs.value.length === 0 && trackInputs.value.length === 0);
 
-// toggle side panel
-async function onToggle() {
+// Toggle side panel visibility
+async function onToggle(): Promise<void> {
     collapsePanel.value = !collapsePanel.value;
     await nextTick();
     window.dispatchEvent(new Event("resize"));
 }
 
-// event handler for updating settings
-function updateSettings(newSettings) {
+// Event handler for updating settings
+function updateSettings(newSettings: Record<string, any>): void {
     settingValues.value = { ...newSettings };
 }
 
-// event handler for updating tracks
-function updateTracks(newTracks) {
+// Event handler for updating tracks
+function updateTracks(newTracks: Array<Record<string, any>>): void {
     trackValues.value = [...newTracks];
 }
 </script>
diff --git a/src/components/InputConditional.vue b/src/components/InputConditional.vue
index bd7cd4d..f39681c 100644
--- a/src/components/InputConditional.vue
+++ b/src/components/InputConditional.vue
@@ -1,77 +1,98 @@
-<script setup>
+<script setup lang="ts">
 import { NSelect, NSwitch } from "naive-ui";
 import InputForm from "@/components/InputForm.vue";
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, defineProps, defineEmits, defineModel } from "vue";
 import { parseDefaults } from "@/utilities/parseDefaults";
 
-const props = defineProps({
-    datasetId: {
-        type: String,
-        required: true,
-    },
+// Define props with types
+const props = defineProps<{
+    datasetId: string;
     input: {
-        type: Object,
-        required: true,
-    },
-});
+        name: string;
+        cases?: Array<{
+            value: string;
+            inputs: Array<{ name: string; value: any }>;
+        }>;
+        test_param?: {
+            name: string;
+            type: string;
+            data?: Array<{ label: string; value: string }>;
+        };
+    };
+}>();
+
+// Define emit with event typing
+const emit = defineEmits<{
+    (event: "update:value", updatedValues: Record<string, any>): void;
+}>();
 
-// emit an event when adding or removing repeat blocks
-const emit = defineEmits(["update:value"]);
+if (!props.input.test_param) {
+    throw `The conditional '${props.input.name}' is missing a test parameter.`;
+}
+
+if (!props.input.cases || props.input.cases.length === 0) {
+    throw `The conditional '${props.input.name}' is missing a cases.`;
+}
 
-// get test parameter
+// Get test parameter
 const testParam = ref(props.input.test_param);
 
-// get test parameter name
+// Get test parameter name and validate it
 const testName = testParam.value.name;
 if (!testName) {
     console.error(`Test parameter has no name: ${props.input.name}.`);
 }
 
-// reference current test and conditional values
-const currentValue = defineModel("value");
+// Reference the model value of the conditional component
+const currentValue = defineModel<Record<string, any>>("value");
 if (!currentValue.value || !(testName in currentValue.value)) {
     console.error(`Test parameter of conditional not available: ${props.input.name}.`, currentValue.value);
 }
 
-// reference current test parameter value
-const currentTestValue = ref(currentValue.value[testName]);
+// Reference current test parameter value
+const currentTestValue = ref<string>(currentValue.value && currentValue.value[testName]);
 
-// collect input cases and identify defaults
+// Collect input cases and identify defaults
 const caseDefaults = computed(() => {
-    const result = {};
-    for (const inputCase of props.input.cases) {
-        result[inputCase.value] = parseDefaults(inputCase.inputs);
-        result[inputCase.value][testName] = inputCase.value;
+    const result: Record<string, Record<string, any>> = {};
+    if (props.input.cases && props.input.cases.length > 0) {
+        for (const inputCase of props.input.cases) {
+            result[inputCase.value] = parseDefaults(inputCase.inputs);
+            result[inputCase.value][testName] = inputCase.value;
+        }
     }
     return result;
 });
 
-// collect all input cases
+// Collect all input cases
 const caseInputs = computed(() => {
-    const result = {};
-    for (const inputCase of props.input.cases) {
-        result[inputCase.value] = inputCase.inputs;
+    const result: Record<string, Array<{ name: string; value: any }>> = {};
+    if (props.input.cases && props.input.cases.length > 0) {
+        for (const inputCase of props.input.cases) {
+            result[inputCase.value] = inputCase.inputs;
+        }
     }
     return result;
 });
 
+// Current inputs based on selected test value
 const currentInputs = computed(() => caseInputs.value[currentTestValue.value]);
 
-// handle conversion of boolean switch values to string for case evaluation
+// Handle conversion of boolean switch values to string for case evaluation
 const switchTestValue = computed({
     get() {
         return currentTestValue.value === "true";
     },
-    set(newVal) {
+    set(newVal: boolean) {
         currentTestValue.value = String(newVal);
     },
 });
 
-// update values if test value changes or conditional input elements are modified
-function onUpdate(newValues) {
+// Update values if test value changes or conditional input elements are modified
+function onUpdate(newValues?: Record<string, any>) {
     let updatedValues = { ...caseDefaults.value[currentTestValue.value] };
     if (newValues) {
-        const filteredValues = {};
+        const filteredValues: Record<string, any> = {};
         currentInputs.value.forEach((x) => {
             filteredValues[x.name] = newValues[x.name];
         });
@@ -80,7 +101,7 @@ function onUpdate(newValues) {
     emit("update:value", updatedValues);
 }
 
-// load defaults if test value changes
+// Load defaults if test value changes
 watch(
     () => currentTestValue.value,
     () => {
diff --git a/src/components/InputData.vue b/src/components/InputData.vue
index 330de9f..1a7f4c0 100644
--- a/src/components/InputData.vue
+++ b/src/components/InputData.vue
@@ -1,37 +1,33 @@
-<script setup>
-import { ref } from "vue";
-import { NSelect } from "naive-ui";
+<script setup lang="ts">
+import { ref, defineProps, defineModel } from "vue";
+import { NSelect, NIcon } from "naive-ui";
 import { GalaxyApi } from "@/api/client";
 import { CheckCircleIcon, ExclamationCircleIcon } from "@heroicons/vue/24/outline";
-import { NIcon } from "naive-ui";
 
 const LIMIT = 100;
 
-const props = defineProps({
-    extension: {
-        type: String,
-        default: "",
-    },
-    optional: {
-        type: Boolean,
-        default: false,
-    },
-});
+// Define props with TypeScript
+const props = defineProps<{
+    extension?: string;
+    optional: boolean;
+}>();
 
-// emit an event when adding or removing repeat blocks
-const currentOptions = ref([]);
-const currentValue = defineModel("value");
+// Define the model
+const currentOptions = ref<Array<{ label: string; value: any; disabled?: boolean }>>([]);
+const currentValue = defineModel<{ name: string } | null>("value");
 const isLoading = ref(false);
-const selectValue = ref(null);
+const selectValue = ref<any | null>(null);
 
-async function loadDatasets(query) {
+// Load datasets based on filters and query
+async function loadDatasets(query?: string): Promise<void> {
     isLoading.value = true;
     try {
         const extensionFilter = props.extension ? `q=extension-eq&qv=${props.extension}` : "";
         const nameFilter = query ? `q=name-contains&qv=${query}` : "";
         const { data } = await GalaxyApi().GET(`/api/datasets?limit=${LIMIT}&${extensionFilter}&${nameFilter}`);
+
         if (data && data.length > 0) {
-            const options = data.map((x) => ({
+            const options = data.map((x: { name: string }) => ({
                 label: x.name,
                 value: x,
             }));
@@ -41,17 +37,20 @@ async function loadDatasets(query) {
             }
             currentOptions.value = options;
         }
-        isLoading.value = false;
     } catch (err) {
         console.log(err);
+    } finally {
+        isLoading.value = false;
     }
 }
 
-function onUpdate() {
+// Update the current selection value
+function onUpdate(): void {
     currentValue.value = selectValue.value;
     selectValue.value = null;
 }
 
+// Load initial datasets when the component is mounted
 loadDatasets();
 </script>
 
diff --git a/src/components/InputDataColumn.vue b/src/components/InputDataColumn.vue
index bc31fbf..f48ea91 100644
--- a/src/components/InputDataColumn.vue
+++ b/src/components/InputDataColumn.vue
@@ -1,33 +1,23 @@
-<script setup>
-import { ref, watch } from "vue";
+<script setup lang="ts">
+import { ref, watch, defineProps, defineModel } from "vue";
 import { NSelect } from "naive-ui";
 import { parseColumns } from "@/utilities/parseColumns";
 import { GalaxyApi } from "@/api/client";
 
-const props = defineProps({
-    datasetId: {
-        type: String,
-        default: "",
-    },
-    isAuto: {
-        type: Boolean,
-        default: false,
-    },
-    isText: {
-        type: Boolean,
-        default: false,
-    },
-    isNumber: {
-        type: Boolean,
-        default: false,
-    },
-});
+// Define props with TypeScript
+const props = defineProps<{
+    datasetId: string;
+    isAuto: boolean;
+    isText: boolean;
+    isNumber: boolean;
+}>();
 
-// emit an event when adding or removing repeat blocks
-const currentOptions = ref([]);
-const currentValue = defineModel("value");
+// Define refs with appropriate types
+const currentOptions = ref<Array<{ label: string; value: string }>>([]);
+const currentValue = defineModel<string | null>("value");
 
-async function loadColumns() {
+// Load columns based on dataset and filters
+async function loadColumns(): Promise<void> {
     if (props.datasetId) {
         try {
             const { data: dataset } = await GalaxyApi().GET(`/api/datasets/${props.datasetId}`);
@@ -42,14 +32,17 @@ async function loadColumns() {
     }
 }
 
-function initializeValue() {
+// Initialize current value based on options
+function initializeValue(): void {
     if (currentOptions.value.length > 0 && currentValue.value === null) {
         currentValue.value = currentOptions.value[0].value;
     }
 }
 
+// Call loadColumns on component mount
 loadColumns();
 
+// Watch for changes in currentValue and re-initialize if needed
 watch(
     () => currentValue.value,
     () => initializeValue(),
diff --git a/src/components/InputForm.vue b/src/components/InputForm.vue
index 7b6ba84..78f22b5 100644
--- a/src/components/InputForm.vue
+++ b/src/components/InputForm.vue
@@ -1,5 +1,5 @@
-<script setup>
-import { ref, watch } from "vue";
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits } from "vue";
 import { NColorPicker, NInput, NInputNumber, NSelect, NSlider, NSwitch } from "naive-ui";
 import InputConditional from "@/components/InputConditional.vue";
 import InputData from "@/components/InputData.vue";
@@ -8,29 +8,48 @@ import { toBoolean } from "@/utilities/toBoolean";
 
 const NUMBER_STEP_SIZE = 0.01;
 
-const props = defineProps({
-    datasetId: {
-        type: String,
-        default: "",
-    },
-    inputs: {
-        type: Array,
-        default: () => [],
-    },
-    values: {
-        type: Object,
-        default: () => {},
-    },
-});
+// Define props with TypeScript
+interface InputOption {
+    name: string;
+    label?: string;
+    help?: string;
+    type: string;
+    min?: string;
+    max?: string;
+    rows?: string;
+    extension?: string;
+    optional?: string;
+    is_auto?: string;
+    is_text?: string;
+    is_number?: string;
+    data?: Array<{ label: string; value: string }>;
+    test_param?: {
+        name: string;
+        type: string;
+        data?: Array<{ label: string; value: string }>;
+    };
+    cases?: Array<{
+        value: string;
+        inputs: Array<{ name: string; value: any }>;
+    }>;
+}
+
+const props = defineProps<{
+    datasetId: string;
+    inputs: InputOption[];
+    values: Record<string, any>;
+}>();
 
-// create a local copy of the values prop
-const currentValues = ref(initialValues());
+// Define emit
+const emit = defineEmits<{
+    (event: "update:values", values: Record<string, any>): void;
+}>();
 
-// emit an event when values changes
-const emit = defineEmits(["update:values"]);
+// Create a local copy of the values prop
+const currentValues = ref<Record<string, any>>(initialValues());
 
-// ensure reactivity by initializing all values
-function initialValues() {
+// Initialize all values to ensure reactivity
+function initialValues(): Record<string, any> {
     const values = { ...props.values };
     props.inputs.forEach((input) => {
         if (values[input.name] === undefined) {
@@ -40,12 +59,12 @@ function initialValues() {
     return values;
 }
 
-// trigger update of values
-function onUpdate() {
+// Trigger an update of values
+function onUpdate(): void {
     emit("update:values", currentValues.value);
 }
 
-// watch incoming values
+// Watch for changes in incoming values and reinitialize
 watch(
     () => props.values,
     () => {
diff --git a/src/components/InputRepeats.vue b/src/components/InputRepeats.vue
index a75ea84..4cc7f99 100644
--- a/src/components/InputRepeats.vue
+++ b/src/components/InputRepeats.vue
@@ -1,47 +1,46 @@
-<script setup>
+<script setup lang="ts">
 import { PlusIcon, TrashIcon } from "@heroicons/vue/24/outline";
 import { NButton, NIcon } from "naive-ui";
 import InputForm from "@/components/InputForm.vue";
-import { computed } from "vue";
+import { computed, defineProps, defineEmits } from "vue";
 import { parseDefaults } from "@/utilities/parseDefaults";
 
-const props = defineProps({
-    datasetId: {
-        type: String,
-        default: "",
-    },
-    inputs: {
-        type: Array,
-        required: true,
-    },
-    valuesArray: {
-        type: Array,
-        required: true,
-    },
-});
+// Define props with TypeScript
+interface InputOption {
+    name: string;
+    type: string;
+}
+
+const props = defineProps<{
+    datasetId: string;
+    inputs: InputOption[];
+    valuesArray: Record<string, any>[];
+}>();
 
-// emit an event when adding or removing repeat blocks
-const emit = defineEmits(["update:values-array"]);
+// Define emit with TypeScript
+const emit = defineEmits<{
+    (event: "update:values-array", newValuesArray: Record<string, any>[]): void;
+}>();
 
-// collect default values to populate new repeat blocks
+// Collect default values to populate new repeat blocks
 const defaultValues = computed(() => parseDefaults(props.inputs));
 
-// add a new repeat block
-function onAdd() {
+// Add a new repeat block
+function onAdd(): void {
     const newValuesArray = [...props.valuesArray];
     newValuesArray.unshift(defaultValues.value);
     emit("update:values-array", newValuesArray);
 }
 
-// remove a repeat block
-function onRemove(index) {
+// Remove a repeat block
+function onRemove(index: number): void {
     const newValuesArray = [...props.valuesArray];
     newValuesArray.splice(index, 1);
     emit("update:values-array", newValuesArray);
 }
 
-// update a repeat block
-function onUpdate(index, values) {
+// Update a repeat block
+function onUpdate(index: number, values: Record<string, any>): void {
     const newValuesArray = [...props.valuesArray];
     newValuesArray[index] = { ...values };
     emit("update:values-array", newValuesArray);
diff --git a/src/components/SidePanel.vue b/src/components/SidePanel.vue
index 8dc5476..41889d2 100644
--- a/src/components/SidePanel.vue
+++ b/src/components/SidePanel.vue
@@ -1,5 +1,5 @@
-<script setup>
-import { computed, ref } from "vue";
+<script setup lang="ts">
+import { computed, ref, defineProps, defineEmits } from "vue";
 import {
     AdjustmentsHorizontalIcon,
     ChevronDoubleRightIcon,
@@ -14,80 +14,59 @@ import InputRepeats from "@/components/InputRepeats.vue";
 import AlertNotify from "@/components/AlertNotify.vue";
 import ApiStatus from "@/components/ApiStatus.vue";
 
-const props = defineProps({
-    datasetId: {
-        type: String,
-        default: "",
-    },
-    description: {
-        type: String,
-        default: "This visualization has no description.",
-    },
-    logoUrl: {
-        type: String,
-        default: "",
-    },
-    html: {
-        type: String,
-        default: "Visualization Title",
-    },
-    name: {
-        type: String,
-        required: true,
-    },
-    settingInputs: {
-        type: Array,
-        default: () => [],
-    },
-    settingValues: {
-        type: Object,
-        default: () => {},
-    },
-    trackInputs: {
-        type: Array,
-        default: () => [],
-    },
-    trackValues: {
-        type: Object,
-        default: () => [],
-    },
-    visualizationId: {
-        type: String,
-        default: null,
-    },
-    visualizationTitle: {
-        type: String,
-        required: true,
-    },
-});
+// Define props with TypeScript
+interface InputOption {
+    name: string;
+    type: string;
+    // Additional properties specific to each input type if needed
+}
 
-// Create a local copy of the values prop
-const currentTitle = ref(props.visualizationTitle);
-const currentVisualizationId = ref(props.visualizationId);
+const props = defineProps<{
+    datasetId: string;
+    description: string;
+    logoUrl: string;
+    html: string;
+    name: string;
+    settingInputs: InputOption[];
+    settingValues: Record<string, any>;
+    trackInputs: InputOption[];
+    trackValues: Record<string, any>[];
+    visualizationId: string | null;
+    visualizationTitle: string;
+}>();
 
-// Error message
-const message = ref("");
-const messageType = ref("");
+// Emit events with TypeScript
+const emit = defineEmits<{
+    (event: "update:tracks", newValues: Record<string, any>[]): void;
+    (event: "update:settings", newValues: Record<string, any>): void;
+    (event: "toggle"): void;
+}>();
 
-// Hide tabs
-const hideTabs = computed(() => props.settingInputs.length === 0 || props.trackInputs.length === 0);
+// Create local copies of props with reactivity
+const currentTitle = ref<string>(props.visualizationTitle);
+const currentVisualizationId = ref<string | null>(props.visualizationId);
 
-// Emit an event when values changes
-const emit = defineEmits(["update:tracks", "update:settings", "toggle"]);
+// Manage message and message type for notifications
+const message = ref<string>("");
+const messageType = ref<string>("");
+
+// Determine if tabs should be hidden based on input arrays
+const hideTabs = computed(() => props.settingInputs.length === 0 || props.trackInputs.length === 0);
 
-async function onSave() {
+// Save or create the visualization
+async function onSave(): Promise<void> {
     try {
         if (currentVisualizationId.value) {
             await visualizationsSave(currentVisualizationId.value, currentTitle.value, {
                 dataset_id: props.datasetId,
-                settings: props.values,
+                settings: props.settingValues,
             });
             message.value = "Successfully saved.";
             messageType.value = "success";
         } else {
             currentVisualizationId.value = await visualizationsCreate(props.name, currentTitle.value, {
                 dataset_id: props.datasetId,
-                settings: props.values,
+                settings: props.settingValues,
             });
             message.value = "Successfully created.";
             messageType.value = "success";
@@ -98,11 +77,13 @@ async function onSave() {
     }
 }
 
-function onUpdateSettings(newValues) {
+// Update settings handler
+function onUpdateSettings(newValues: Record<string, any>): void {
     emit("update:settings", newValues);
 }
 
-function onUpdateTracks(newValues) {
+// Update tracks handler
+function onUpdateTracks(newValues: Record<string, any>[]): void {
     emit("update:tracks", newValues);
 }
 </script>
diff --git a/src/main.js b/src/main.js
index fe17090..130cd45 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,7 +4,7 @@ import App from "./App.vue";
 const config = {
     credentials: process.env.credentials,
     dataset_url: null,
-    dataset_id: "unavailable",
+    dataset_id: "12e4b4feedfe9f3f",
     settings: {
         setting_text: "My Test Setting",
         setting_boolean: true,
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..a9b50c5
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1 @@
+type InputValueType = boolean | string | number | null | undefined;
\ No newline at end of file
diff --git a/src/utilities/parseIncoming.js b/src/utilities/parseIncoming.ts
similarity index 51%
rename from src/utilities/parseIncoming.js
rename to src/utilities/parseIncoming.ts
index 5ba17eb..afa2337 100644
--- a/src/utilities/parseIncoming.js
+++ b/src/utilities/parseIncoming.ts
@@ -1,21 +1,43 @@
-export function parseIncoming(config) {
-    // access attached data
+interface Config {
+    root?: string;
+    title?: string;
+    visualization_config?: {
+        chart_dict?: {
+            groups?: any;
+            settings?: any;
+        };
+        [key: string]: any;
+    };
+    [key: string]: any;
+}
+
+interface ParsedIncoming {
+    root: string;
+    visualizationConfig: Config;
+    visualizationId?: string;
+    visualizationPlugin?: any;
+    visualizationTitle: string;
+}
+
+export function parseIncoming(config: Config): ParsedIncoming {
+    // Access attached data
     const element = document.getElementById("app");
-    const incoming = JSON.parse(element.getAttribute("data-incoming")) || {};
+    const incoming = JSON.parse(element?.getAttribute("data-incoming") || "{}") || {};
 
-    // parse incoming data
+    // Parse incoming data
     const root = incoming.root || config?.root || "/";
     const visualizationId = incoming.visualization_id;
     const visualizationPlugin = incoming.visualization_plugin;
     const visualizationTitle = incoming.visualization_title || config?.title || "Unnamed Visualization";
 
-    // parse chart dict
+    // Parse chart dict
     let visualizationConfig = incoming.visualization_config || config;
     if (incoming.visualization_config?.chart_dict) {
         const chartDict = incoming.visualization_config.chart_dict;
         visualizationConfig.groups = chartDict.groups;
         visualizationConfig.settings = chartDict.settings;
-        delete visualizationConfig["chartDict"];
+        delete visualizationConfig["chart_dict"];
     }
+
     return { root, visualizationConfig, visualizationId, visualizationPlugin, visualizationTitle };
 }
diff --git a/src/utilities/toBoolean.ts b/src/utilities/toBoolean.ts
index 8d1c14d..868d68f 100644
--- a/src/utilities/toBoolean.ts
+++ b/src/utilities/toBoolean.ts
@@ -1,3 +1,5 @@
-export function toBoolean(value: string | boolean | undefined) {
+import { type InputValueType } from "@/types";
+
+export function toBoolean(value: InputValueType) {
     return String(value).toLowerCase() === "true";
 }