Improve title and id handling

galaxyproject · Nov 13, 2024 · 32f29e2 · 32f29e2
1 parent 01e8f99
commit 32f29e2
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 19 deletions.
diff --git a/src/components/GalaxyCharts.vue b/src/components/GalaxyCharts.vue
@@ -14,6 +14,11 @@ const props = defineProps<{
     incoming?: PluginIncomingType;
 }>();
 
+// Parse incoming visualization details
+const { root, visualizationConfig, visualizationId, visualizationPlugin, visualizationTitle } = parseIncoming(
+    props.incoming,
+);
+
 // References with reactive types
 const collapsePanel = ref<boolean>(false);
 const datasetUrl = ref<string>("");
@@ -29,10 +34,9 @@ const specValues = ref<InputValuesType>({});
 const trackInputs = ref<Array<InputElementType>>([]);
 const trackValues = ref<Array<InputValuesType>>([]);
 
-// Parse incoming visualization details
-const { root, visualizationConfig, visualizationId, visualizationPlugin, visualizationTitle } = parseIncoming(
-    props.incoming,
-);
+// Create local copies of props with reactivity
+const currentVisualizationId = ref<string | null>(visualizationId);
+const currentVisualizationTitle = ref<string>(visualizationTitle);
 
 // Store values in config store
 const configStore = useConfigStore();
@@ -89,6 +93,16 @@ function updateSettings(newSettings: InputValuesType): void {
 function updateTracks(newTracks: Array<InputValuesType>): void {
     trackValues.value = [...newTracks];
 }
+
+// Event handler for updating visualization id
+function updateVisualizationId(newVisualizationId: string): void {
+    currentVisualizationId.value = newVisualizationId;
+}
+
+// Event handler for updating title
+function updateVisualizationTitle(newVisualizationTitle: string): void {
+    currentVisualizationTitle.value = newVisualizationTitle;
+}
 </script>
 
 <template>
@@ -125,10 +139,12 @@ function updateTracks(newTracks: Array<InputValuesType>): void {
             :setting-values="settingValues"
             :track-inputs="trackInputs"
             :track-values="trackValues"
-            :visualization-id="visualizationId"
-            :visualization-title="visualizationTitle"
+            :visualization-id="currentVisualizationId"
+            :visualization-title="currentVisualizationTitle"
             @update:settings="updateSettings"
             @update:tracks="updateTracks"
+            @update:visualization-id="updateVisualizationId"
+            @update:visualization-title="updateVisualizationTitle"
             @toggle="onToggle" />
     </div>
 </template>

diff --git a/src/components/SidePanel.vue b/src/components/SidePanel.vue
@@ -25,21 +25,19 @@ const props = defineProps<{
     settingValues: InputValuesType;
     trackInputs: InputElementType[];
     trackValues: InputValuesType[];
-    visualizationId: string | null | undefined;
+    visualizationId: string | null;
     visualizationTitle: string;
 }>();
 
 // Emit events with TypeScript
 const emit = defineEmits<{
     (event: "update:tracks", newValues: InputValuesType[]): void;
     (event: "update:settings", newValues: InputValuesType): void;
+    (event: "update:visualization-id", newId: string): void;
+    (event: "update:visualization-title", newTitle: string): void;
     (event: "toggle"): void;
 }>();
 
-// Create local copies of props with reactivity
-const currentTitle = ref<string>(props.visualizationTitle);
-const currentVisualizationId = ref<string | null | undefined>(props.visualizationId);
-
 // Manage message and message type for notifications
 const message = ref<string>("");
 const messageType = ref<MessageType>("info");
@@ -50,20 +48,26 @@ const hideTabs = computed(() => props.settingInputs.length === 0 || props.trackI
 // Save or create the visualization
 async function onSave(): Promise<void> {
     try {
-        if (currentVisualizationId.value) {
-            await visualizationsSave(currentVisualizationId.value, currentTitle.value, {
+        if (props.visualizationId) {
+            await visualizationsSave(props.visualizationId, props.visualizationTitle, {
                 dataset_id: props.datasetId,
                 settings: props.settingValues,
             });
             message.value = "Successfully saved.";
             messageType.value = "success";
         } else {
-            currentVisualizationId.value = await visualizationsCreate(props.name, currentTitle.value, {
+            const newVisualizationId = await visualizationsCreate(props.name, props.visualizationTitle, {
                 dataset_id: props.datasetId,
                 settings: props.settingValues,
             });
-            message.value = "Successfully created.";
-            messageType.value = "success";
+            if (newVisualizationId) {
+                message.value = "Successfully created.";
+                messageType.value = "success";
+                emit("update:visualization-id", newVisualizationId);
+            } else {
+                message.value = "Something went wrong.";
+                messageType.value = "error";
+            }
         }
     } catch (err) {
         message.value = errorMessageAsString(err);
@@ -80,6 +84,11 @@ function onUpdateSettings(newValues: InputValuesType): void {
 function onUpdateTracks(newValues: InputValuesType[]): void {
     emit("update:tracks", newValues);
 }
+
+// Update title handler
+function onUpdateVisualizationTitle(newTitle: string): void {
+    emit("update:visualization-title", newTitle);
+}
 </script>
 
 <template>
@@ -128,7 +137,7 @@ function onUpdateTracks(newValues: InputValuesType[]): void {
         <div class="px-4 pb-2">
             <div class="font-bold">Title</div>
             <div class="text-xs py-1">Specify a visualization title.</div>
-            <n-input v-model:value="currentTitle" />
+            <n-input :value="visualizationTitle" @input="onUpdateVisualizationTitle" />
         </div>
         <n-tabs type="line" animated class="px-4" :tab-class="hideTabs ? '!hidden' : ''">
             <n-tab-pane v-if="trackInputs.length > 0" name="tracks">

diff --git a/src/utilities/parseIncoming.ts b/src/utilities/parseIncoming.ts
@@ -3,7 +3,7 @@ import type { PluginConfigType, PluginIncomingType, PluginType } from "@/types";
 interface ParsedIncoming {
     root: string;
     visualizationConfig: PluginConfigType;
-    visualizationId?: string;
+    visualizationId: string | null;
     visualizationPlugin: PluginType;
     visualizationTitle: string;
 }
@@ -18,7 +18,7 @@ export function parseIncoming(incoming?: PluginIncomingType): ParsedIncoming {
     // Parse incoming data
     const root = incoming?.root ?? "/";
     const visualizationConfig = incoming?.visualization_config ?? {};
-    const visualizationId = incoming?.visualization_id ?? "";
+    const visualizationId = incoming?.visualization_id ?? null;
     const visualizationPlugin = incoming?.visualization_plugin ?? {};
     const visualizationTitle = incoming?.visualization_title ?? "Unnamed Visualization";