Add save helper, allow nested conditionals

package.json

@@ -6,7 +6,7 @@
         "charts"
     ],
     "license": "MIT",
-    "version": "0.0.31",
+    "version": "0.0.32",
     "type": "module",
     "main": "./dist/galaxy-charts.umd.cjs",
     "module": "./dist/galaxy-charts.js",

src/App.vue

@@ -10,14 +10,15 @@ defineProps<{
 
 <template>
     <GalaxyCharts :credentials="credentials" :incoming="incoming">
-        <template #default="{ datasetId, datasetUrl, root, settings, specs, tracks }">
+        <template #default="{ datasetId, datasetUrl, root, save, settings, specs, tracks }">
             <Plugin
                 :dataset-id="datasetId"
                 :dataset-url="datasetUrl"
                 :root="root"
                 :settings="settings"
                 :specs="specs"
-                :tracks="tracks" />
+                :tracks="tracks"
+                @save="save" />
         </template>
     </GalaxyCharts>
 </template>

src/Plugin.vue

@@ -1,13 +1,19 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
+import type { InputValuesType } from "galaxy-charts";
 
 const props = defineProps<{
     datasetId: string;
     datasetUrl: string;
     root: string;
-    settings: object;
-    specs: object;
-    tracks: Array<object>;
+    settings: InputValuesType;
+    specs: Record<string, string>;
+    tracks: Array<InputValuesType>;
+}>();
+
+// Emit events with TypeScript
+const emit = defineEmits<{
+    (event: "save", newSettings: InputValuesType): void;
 }>();
 
 const viewport = ref(null);
@@ -16,6 +22,14 @@ function render() {
     /** Place your render function here! */
 }
 
+function onSave() {
+    emit("save", {
+        job_id: "xyz",
+        setting_boolean: true,
+        setting_conditional: { test_condition: "true", case_true: "set to new value" },
+    });
+}
+
 onMounted(() => {
     render();
 });
@@ -29,6 +43,7 @@ watch(
 
 <template>
     <div ref="viewport" class="h-screen p-4 overflow-auto">
+        <button @click="onSave">onSave</button>
         <div class="bg-gray-600 text-white rounded-lg p-2">
             <pre class="p-2">Settings: {{ settings }}</pre>
             <pre class="p-2">Tracks: {{ tracks }}</pre>

src/api/visualizations.ts

@@ -21,7 +21,19 @@ export async function visualizationsCreate(type: string, title: string, config:
     }
 }
 
-export async function visualizationsSave(id: string, title: string, config: VisualizationConfig): Promise<undefined> {
+export async function visualizationsSave(type: string, id: string | null, title: string, config: VisualizationConfig): Promise<string | undefined> {
+    try {
+        if (id) {
+            await visualizationsUpdate(id, title, config);
+        } else {
+            return await visualizationsCreate(type, title, config);
+        }
+    } catch (err) {
+        rethrowSimple(err);
+    }
+}
+
+export async function visualizationsUpdate(id: string, title: string, config: VisualizationConfig): Promise<undefined> {
     try {
         await GalaxyApi().PUT(`/api/visualizations/${id}`, {
             title,

src/components/GalaxyCharts.vue

@@ -8,6 +8,7 @@ import { datasetsGetUrl } from "@/api/datasets";
 import { parseIncoming } from "@/utilities/parseIncoming";
 import { useConfigStore } from "@/store/configStore";
 import { InputElementType, InputValuesType, PluginIncomingType } from "@/types";
+import { visualizationsSave } from "@/api/visualizations";
 
 const props = defineProps<{
     credentials?: RequestCredentials;
@@ -103,6 +104,23 @@ function updateVisualizationId(newVisualizationId: string): void {
 function updateVisualizationTitle(newVisualizationTitle: string): void {
     currentVisualizationTitle.value = newVisualizationTitle;
 }
+
+// Event handler for updating settings and saving visualization
+async function save(values: InputValuesType) {
+    updateSettings({ ...settingValues.value, ...values });
+    try {
+        const newVisualizationId = await visualizationsSave(name.value, visualizationId, visualizationTitle, {
+            dataset_id: datasetId,
+            settings: settingValues.value,
+            tracks: trackValues.value,
+        });
+        if (newVisualizationId) {
+            updateVisualizationId(newVisualizationId);
+        }
+    } catch (e) {
+        console.error(e);
+    }
+}
 </script>
 
 <template>
@@ -122,7 +140,8 @@ function updateVisualizationTitle(newVisualizationTitle: string): void {
             :root="root"
             :settings="settingValues"
             :specs="specValues"
-            :tracks="trackValues" />
+            :tracks="trackValues"
+            :save="save" />
         <div v-if="collapsePanel && !hidePanel">
             <n-float-button strong secondary circle class="bg-sky-100 m-2" :top="0" :right="0" @click="onToggle">
                 <n-icon><ChevronDoubleLeftIcon /></n-icon>

src/components/InputConditional.vue

@@ -38,9 +38,8 @@ const currentValue = defineModel<InputValuesType>("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<string>(currentValue.value && currentValue.value[testName]);
+const currentTestValue = ref<string>(getTestValue());
 
 // Collect input cases and identify defaults
 const caseDefaults = computed(() => {
@@ -78,6 +77,11 @@ const switchTestValue = computed({
     },
 });
 
+// Initialize test value
+function getTestValue() {
+    return currentValue.value && currentValue.value[testName];
+}
+
 // Update values if test value changes or conditional input elements are modified
 function onUpdate(newValues?: InputValuesType) {
     let updatedValues = { ...caseDefaults.value[currentTestValue.value] };
@@ -91,6 +95,14 @@ function onUpdate(newValues?: InputValuesType) {
     emit("update:value", updatedValues);
 }
 
+// Watch test value
+watch(
+    () => currentValue.value,
+    () => {
+        currentTestValue.value = getTestValue();
+    },
+);
+
 // Load defaults if test value changes
 watch(
     () => currentTestValue.value,

src/components/SidePanel.vue

@@ -7,7 +7,7 @@ import {
     Square3Stack3DIcon,
 } from "@heroicons/vue/24/outline";
 import { NButton, NIcon, NInput, NTabs, NTabPane } from "naive-ui";
-import { visualizationsCreate, visualizationsSave } from "@/api/visualizations";
+import { visualizationsCreate, visualizationsUpdate } from "@/api/visualizations";
 import { errorMessageAsString } from "@/utilities/simpleError";
 import InputForm from "@/components/InputForm.vue";
 import InputRepeats from "@/components/InputRepeats.vue";
@@ -49,7 +49,7 @@ const hideTabs = computed(() => props.settingInputs.length === 0 || props.trackI
 async function onSave(): Promise<void> {
     try {
         if (props.visualizationId) {
-            await visualizationsSave(props.visualizationId, props.visualizationTitle, {
+            await visualizationsUpdate(props.visualizationId, props.visualizationTitle, {
                 dataset_id: props.datasetId,
                 settings: props.settingValues,
                 tracks: props.trackValues,

src/utilities/parsePlugin.ts

@@ -43,9 +43,7 @@ function formatConditional(input: InputElementType, values: InputValuesType = {}
             if (inputCase.value === testValue) {
                 result[testName] = testValue;
                 if (inputCase.inputs?.length) {
-                    for (const conditionalInput of inputCase.inputs) {
-                        result[conditionalInput.name] = formatValue(conditionalInput, result[conditionalInput.name]);
-                    }
+                    parseValues(inputCase.inputs, result);
                 }
             }
         }