fix: apply lazy loading so that the output settings are generated when the user opens the settings window

Author: MathiasVDA

packages/yasgui/src/TabSettingsModal.ts

@@ -203,7 +203,8 @@ export default class TabSettingsModal {
     const outputContent = document.createElement("div");
     addClass(outputContent, "modalTabContent");
     outputContent.id = "output-content";
-    this.drawOutputSettings(outputContent);
+    // Output settings will be loaded when tab is accessed
+    outputContent.setAttribute("data-needs-init", "true");
 
     const editorContent = document.createElement("div");
     addClass(editorContent, "modalTabContent");
@@ -268,10 +269,11 @@ export default class TabSettingsModal {
         (tabName === "request" && index === 0) ||
         (tabName === "endpoints" && index === 1) ||
         (tabName === "prefix" && index === 2) ||
-        (tabName === "editor" && index === 3) ||
-        (tabName === "importexport" && index === 4) ||
-        (tabName === "shortcuts" && index === 5) ||
-        (tabName === "about" && index === 6)
+        (tabName === "output" && index === 3) ||
+        (tabName === "editor" && index === 4) ||
+        (tabName === "importexport" && index === 5) ||
+        (tabName === "shortcuts" && index === 6) ||
+        (tabName === "about" && index === 7)
       ) {
         addClass(btn as HTMLElement, "active");
       } else {
@@ -287,6 +289,12 @@ export default class TabSettingsModal {
           content.innerHTML = "";
           this.drawEditorSettings(content as HTMLElement);
         }
+        // Load output settings if switching to output tab and it hasn't been loaded yet
+        if (tabName === "output" && content.getAttribute("data-needs-init") === "true") {
+          content.removeAttribute("data-needs-init");
+          content.innerHTML = "";
+          this.drawOutputSettings(content as HTMLElement);
+        }
         // Refresh endpoints list when switching to endpoints tab
         if (tabName === "endpoints") {
           const endpointsList = content.querySelector(".endpointsTable");
@@ -341,11 +349,26 @@ export default class TabSettingsModal {
   }
 
   private drawOutputSettings(container: HTMLElement) {
-    const yasr = this.tab.getYasr();
+    // Ensure yasr is instantiated
+    let yasr = this.tab.getYasr();
+    if (!yasr) {
+      // Initialize yasr if it hasn't been created yet
+      try {
+        yasr = this.tab.initYasr();
+      } catch (e) {
+        // If initialization fails, show a helpful message
+        const notice = document.createElement("p");
+        addClass(notice, "settingsHelp");
+        notice.textContent = "Unable to load output settings. Please try again.";
+        container.appendChild(notice);
+        return;
+      }
+    }
+
     if (!yasr) {
       const notice = document.createElement("p");
       addClass(notice, "settingsHelp");
-      notice.textContent = "Output settings will be available after running a query.";
+      notice.textContent = "Output settings are not available yet.";
       container.appendChild(notice);
       return;
     }
@@ -359,7 +382,7 @@ export default class TabSettingsModal {
 
     // Get available plugins
     const availablePlugins = yasr.getAvailablePlugins();
-    const currentOrder = yasr.getPluginOrder() || { select: [], construct: [] };
+    const currentOrder = this.tab.yasgui.persistentConfig.getPluginOrder() || { select: [], construct: [] };
 
     // Initialize with priority-based order if empty
     if (!currentOrder.select || currentOrder.select.length === 0) {
@@ -447,8 +470,8 @@ export default class TabSettingsModal {
     container.appendChild(constructSection);
 
     // Initialize drag and drop
-    this.initializePluginOrderDragDrop(selectList, "select", yasr);
-    this.initializePluginOrderDragDrop(constructList, "construct", yasr);
+    this.initializePluginOrderDragDrop(selectList, "select");
+    this.initializePluginOrderDragDrop(constructList, "construct");
   }
 
   private createPluginOrderItem(pluginName: string, pluginLabel: string): HTMLLIElement {
@@ -471,7 +494,7 @@ export default class TabSettingsModal {
     return item;
   }
 
-  private initializePluginOrderDragDrop(listEl: HTMLElement, queryType: "select" | "construct", yasr: any) {
+  private initializePluginOrderDragDrop(listEl: HTMLElement, queryType: "select" | "construct") {
     sortablejs.create(listEl, {
       animation: 150,
       handle: ".pluginOrderDragHandle",
@@ -489,18 +512,18 @@ export default class TabSettingsModal {
           }
         });
 
-        // Save the new order
-        const currentOrder = yasr.getPluginOrder() || { select: [], construct: [] };
+        // Save the new order to global config
+        const currentOrder = this.tab.yasgui.persistentConfig.getPluginOrder() || { select: [], construct: [] };
         if (queryType === "select") {
           currentOrder.select = newOrder;
         } else {
           currentOrder.construct = newOrder;
         }
-        yasr.setPluginOrder(currentOrder);
+        this.tab.yasgui.persistentConfig.setPluginOrder(currentOrder);
 
         // Show feedback
         this.showNotification(
-          `${queryType === "select" ? "SELECT/ASK" : "CONSTRUCT/DESCRIBE"} plugin order updated`,
+          `${queryType === "select" ? "SELECT/ASK" : "CONSTRUCT/DESCRIBE"} plugin order updated (applies to all tabs)`,
           "success",
         );
       },