@matdata/yasgui 5.1.0 → 5.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
   "description": "Yet Another SPARQL GUI",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",

package/src/ConfigExportImport.ts

@@ -0,0 +1,391 @@
+/**
+ * Export/Import Configuration Module
+ * Handles serialization and deserialization of YASGUI configuration to/from RDF Turtle format
+ */
+
+import { PersistedJson } from "./PersistentConfig";
+
+// YASGUI Configuration Ontology
+export const YASGUI_NS = "https://yasgui.matdata.eu/ontology#";
+export const RDF_NS = "http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+export const RDFS_NS = "http://www.w3.org/2000/01/rdf-schema#";
+export const XSD_NS = "http://www.w3.org/2001/XMLSchema#";
+export const DCTERMS_NS = "http://purl.org/dc/terms/";
+export const SD_NS = "http://www.w3.org/ns/sparql-service-description#";
+export const SP_NS = "http://spinrdf.org/sp#";
+export const HTTP_NS = "http://www.w3.org/2011/http#";
+export const SCHEMA_NS = "https://schema.org/";
+
+/**
+ * Serialize configuration to Turtle format
+ */
+export function serializeToTurtle(config: PersistedJson): string {
+  const lines: string[] = [];
+
+  // Prefixes
+  lines.push(`@prefix yasgui: <${YASGUI_NS}> .`);
+  lines.push(`@prefix rdf: <${RDF_NS}> .`);
+  lines.push(`@prefix rdfs: <${RDFS_NS}> .`);
+  lines.push(`@prefix xsd: <${XSD_NS}> .`);
+  lines.push(`@prefix dcterms: <${DCTERMS_NS}> .`);
+  lines.push(`@prefix sd: <${SD_NS}> .`);
+  lines.push(`@prefix sp: <${SP_NS}> .`);
+  lines.push(`@prefix http: <${HTTP_NS}> .`);
+  lines.push(`@prefix schema: <${SCHEMA_NS}> .`);
+  lines.push("");
+
+  // Main configuration node
+  const now = new Date().toISOString();
+  lines.push(`[] a yasgui:Configuration ;`);
+  lines.push(`  dcterms:created "${now}"^^xsd:dateTime ;`);
+
+  // Theme
+  if (config.theme) {
+    lines.push(`  yasgui:theme "${config.theme}" ;`);
+  }
+
+  // Orientation
+  if (config.orientation) {
+    lines.push(`  yasgui:orientation "${config.orientation}" ;`);
+  }
+
+  // Endpoint history
+  if (config.endpointHistory && config.endpointHistory.length > 0) {
+    lines.push(`  yasgui:endpointHistory (`);
+    config.endpointHistory.forEach((endpoint) => {
+      lines.push(`    "${escapeTurtleString(endpoint)}"`);
+    });
+    lines.push(`  ) ;`);
+  }
+
+  // Active tab
+  if (config.active) {
+    lines.push(`  yasgui:activeTab "${escapeTurtleString(config.active)}" ;`);
+  }
+
+  // Prefixes
+  if (config.prefixes) {
+    lines.push(`  yasgui:prefixesValue """${escapeTurtleString(config.prefixes)}""" ;`);
+  }
+
+  // Auto capture enabled
+  if (config.autoCaptureEnabled !== undefined) {
+    lines.push(`  yasgui:autoCaptureEnabled "${config.autoCaptureEnabled}"^^xsd:boolean ;`);
+  }
+
+  // Custom endpoint buttons
+  if (config.customEndpointButtons && config.customEndpointButtons.length > 0) {
+    lines.push(`  yasgui:customEndpointButton [`);
+    config.customEndpointButtons.forEach((button, index) => {
+      const isLast = index === config.customEndpointButtons!.length - 1;
+      lines.push(`    rdfs:label "${escapeTurtleString(button.label)}" ;`);
+      lines.push(`    sd:endpoint "${escapeTurtleString(button.endpoint)}"${isLast ? "" : " ;"}`);
+      if (!isLast) {
+        lines.push(`  ] , [`);
+      }
+    });
+    lines.push(`  ] ;`);
+  }
+
+  // Tabs
+  if (config.tabs && config.tabs.length > 0) {
+    lines.push(`  yasgui:tab [`);
+    config.tabs.forEach((tabId, tabIndex) => {
+      const tabConfig = config.tabConfig[tabId];
+      const isLastTab = tabIndex === config.tabs.length - 1;
+
+      lines.push(`    dcterms:identifier "${escapeTurtleString(tabId)}" ;`);
+      lines.push(`    rdfs:label "${escapeTurtleString(tabConfig.name)}" ;`);
+
+      // Orientation (if different from default)
+      if (tabConfig.orientation) {
+        lines.push(`    yasgui:orientation "${escapeTurtleString(tabConfig.orientation)}" ;`);
+      }
+
+      // Query
+      if (tabConfig.yasqe?.value) {
+        lines.push(`    sp:text """${escapeTurtleString(tabConfig.yasqe.value)}""" ;`);
+      }
+
+      // Editor height
+      if (tabConfig.yasqe?.editorHeight) {
+        lines.push(`    schema:height "${escapeTurtleString(tabConfig.yasqe.editorHeight)}" ;`);
+      }
+
+      // Request config
+      if (tabConfig.requestConfig) {
+        const reqConfig = tabConfig.requestConfig;
+        if (reqConfig.endpoint && typeof reqConfig.endpoint === "string") {
+          lines.push(`    sd:endpoint "${escapeTurtleString(reqConfig.endpoint)}" ;`);
+        }
+        if (reqConfig.method && typeof reqConfig.method === "string") {
+          lines.push(`    yasgui:requestMethod "${escapeTurtleString(reqConfig.method)}" ;`);
+        }
+        if (reqConfig.acceptHeaderSelect && typeof reqConfig.acceptHeaderSelect === "string") {
+          lines.push(`    yasgui:acceptHeaderSelect [`);
+          lines.push(`      http:headerName "Accept" ;`);
+          lines.push(`      http:headerValue "${escapeTurtleString(reqConfig.acceptHeaderSelect)}"`);
+          lines.push(`    ] ;`);
+        }
+        if (reqConfig.acceptHeaderGraph && typeof reqConfig.acceptHeaderGraph === "string") {
+          lines.push(`    yasgui:acceptHeaderGraph [`);
+          lines.push(`      http:headerName "Accept" ;`);
+          lines.push(`      http:headerValue "${escapeTurtleString(reqConfig.acceptHeaderGraph)}"`);
+          lines.push(`    ] ;`);
+        }
+      }
+
+      // YASR settings
+      if (tabConfig.yasr?.settings) {
+        const yasrSettings = tabConfig.yasr.settings;
+        if (yasrSettings.selectedPlugin) {
+          lines.push(`    yasgui:selectedPlugin "${escapeTurtleString(yasrSettings.selectedPlugin)}" ;`);
+        }
+      }
+
+      // Remove trailing semicolon from last property
+      const lastLine = lines[lines.length - 1];
+      if (lastLine.endsWith(" ;")) {
+        lines[lines.length - 1] = lastLine.slice(0, -2);
+      }
+
+      if (!isLastTab) {
+        lines.push(`  ] , [`);
+      }
+    });
+    lines.push(`  ] .`);
+  } else {
+    // Remove trailing semicolon if no tabs
+    const lastLine = lines[lines.length - 1];
+    if (lastLine.endsWith(" ;")) {
+      lines[lines.length - 1] = lastLine.slice(0, -2) + " .";
+    }
+  }
+
+  return lines.join("\n");
+}
+
+/**
+ * Escape special characters in Turtle strings
+ */
+function escapeTurtleString(str: string): string {
+  return str
+    .replace(/\\/g, "\\\\")
+    .replace(/"/g, '\\"')
+    .replace(/\n/g, "\\n")
+    .replace(/\r/g, "\\r")
+    .replace(/\t/g, "\\t");
+}
+
+/**
+ * Unescape Turtle string
+ */
+function unescapeTurtleString(str: string): string {
+  return str
+    .replace(/\\n/g, "\n")
+    .replace(/\\r/g, "\r")
+    .replace(/\\t/g, "\t")
+    .replace(/\\"/g, '"')
+    .replace(/\\\\/g, "\\");
+}
+
+/**
+ * Parse Turtle format back to configuration
+ * This is a simplified parser focused on the structure we generate.
+ *
+ * Note: This parser is designed to handle the specific Turtle format
+ * produced by serializeToTurtle(). For production use with arbitrary
+ * Turtle input, consider using a robust RDF library like N3.js.
+ * The current implementation uses regex patterns that work well for
+ * our serialization output but may not handle all valid Turtle syntax.
+ */
+export function parseFromTurtle(turtle: string): Partial<PersistedJson> {
+  const config: Partial<PersistedJson> = {
+    endpointHistory: [],
+    tabs: [],
+    tabConfig: {},
+    customEndpointButtons: [],
+  };
+
+  try {
+    // Extract endpoint history
+    const endpointHistoryMatch = turtle.match(/yasgui:endpointHistory\s*\(([\s\S]*?)\)/);
+    if (endpointHistoryMatch) {
+      const endpoints = endpointHistoryMatch[1].match(/"([^"]*)"/g);
+      if (endpoints) {
+        config.endpointHistory = endpoints.map((e) => unescapeTurtleString(e.slice(1, -1)));
+      }
+    }
+
+    // Extract active tab
+    const activeTabMatch = turtle.match(/yasgui:activeTab\s+"([^"]*)"/);
+    if (activeTabMatch) {
+      config.active = unescapeTurtleString(activeTabMatch[1]);
+    }
+
+    // Extract prefixes
+    const prefixesMatch = turtle.match(/yasgui:prefixesValue\s+"""([\s\S]*?)"""/);
+    if (prefixesMatch) {
+      config.prefixes = unescapeTurtleString(prefixesMatch[1]);
+    }
+
+    // Extract auto capture enabled
+    const autoCaptureMatch = turtle.match(/yasgui:autoCaptureEnabled\s+"([^"]*)"/);
+    if (autoCaptureMatch) {
+      config.autoCaptureEnabled = autoCaptureMatch[1] === "true";
+    }
+
+    // Extract theme
+    const themeMatch = turtle.match(/yasgui:theme\s+"([^"]*)"/);
+    if (themeMatch && (themeMatch[1] === "light" || themeMatch[1] === "dark")) {
+      config.theme = themeMatch[1] as "light" | "dark";
+    }
+
+    // Extract orientation
+    const orientationMatch = turtle.match(/yasgui:orientation\s+"([^"]*)"/);
+    if (orientationMatch && (orientationMatch[1] === "vertical" || orientationMatch[1] === "horizontal")) {
+      config.orientation = orientationMatch[1] as "vertical" | "horizontal";
+    }
+
+    // Extract custom endpoint buttons
+    const buttonPattern =
+      /yasgui:customEndpointButton\s+\[([\s\S]*?)rdfs:label\s+"([^"]*)"\s*;\s*sd:endpoint\s+"([^"]*)"/g;
+    let buttonMatch;
+    while ((buttonMatch = buttonPattern.exec(turtle)) !== null) {
+      config.customEndpointButtons!.push({
+        label: unescapeTurtleString(buttonMatch[2]),
+        endpoint: unescapeTurtleString(buttonMatch[3]),
+      });
+    }
+
+    // Extract tabs - simplified parsing
+    const tabPattern =
+      /dcterms:identifier\s+"([^"]*)"\s*;\s*rdfs:label\s+"([^"]*)"\s*;[\s\S]*?(?=dcterms:identifier|yasgui:customEndpointButton|\]\.|\]\s*,\s*\[)/g;
+    const tabBlocks = turtle.match(/yasgui:tab\s+\[([\s\S]*)\]\s*\./);
+
+    if (tabBlocks) {
+      const tabsContent = tabBlocks[1];
+      const tabIdMatches = [...tabsContent.matchAll(/dcterms:identifier\s+"([^"]*)"/g)];
+      const tabNameMatches = [...tabsContent.matchAll(/rdfs:label\s+"([^"]*)"/g)];
+      const queryMatches = [...tabsContent.matchAll(/sp:text\s+"""([\s\S]*?)"""/g)];
+      const endpointMatches = [...tabsContent.matchAll(/sd:endpoint\s+"([^"]*)"/g)];
+      const methodMatches = [...tabsContent.matchAll(/yasgui:requestMethod\s+"([^"]*)"/g)];
+
+      // Extract tab-level orientation
+      const tabOrientationMatches = [...tabsContent.matchAll(/yasgui:orientation\s+"([^"]*)"/g)];
+
+      tabIdMatches.forEach((match, index) => {
+        const tabId = unescapeTurtleString(match[1]);
+        const tabName = tabNameMatches[index] ? unescapeTurtleString(tabNameMatches[index][1]) : "Query";
+        const query = queryMatches[index] ? unescapeTurtleString(queryMatches[index][1]) : "";
+        const endpoint = endpointMatches[index] ? unescapeTurtleString(endpointMatches[index][1]) : "";
+        const method = methodMatches[index] ? unescapeTurtleString(methodMatches[index][1]) : "POST";
+        const orientation = tabOrientationMatches[index]
+          ? (unescapeTurtleString(tabOrientationMatches[index][1]) as "vertical" | "horizontal")
+          : undefined;
+
+        config.tabs!.push(tabId);
+        config.tabConfig![tabId] = {
+          id: tabId,
+          name: tabName,
+          yasqe: {
+            value: query,
+          },
+          requestConfig: {
+            queryArgument: undefined,
+            endpoint: endpoint,
+            method: method as "GET" | "POST",
+            acceptHeaderGraph: "text/turtle",
+            acceptHeaderSelect: "application/sparql-results+json",
+            acceptHeaderUpdate: "application/sparql-results+json",
+            namedGraphs: [],
+            defaultGraphs: [],
+            args: [],
+            headers: {},
+            withCredentials: false,
+            adjustQueryBeforeRequest: false,
+          },
+          yasr: {
+            settings: {},
+            response: undefined,
+          },
+          orientation: orientation,
+        };
+      });
+    }
+  } catch (error) {
+    console.error("Error parsing Turtle configuration:", error);
+    throw new Error("Failed to parse configuration. Please check the format.");
+  }
+
+  return config;
+}
+
+/**
+ * Download configuration as a file
+ */
+export function downloadConfigAsFile(config: PersistedJson, filename: string = "yasgui-config.ttl") {
+  const turtle = serializeToTurtle(config);
+  const blob = new Blob([turtle], { type: "text/turtle;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
+/**
+ * Copy configuration to clipboard
+ */
+export async function copyConfigToClipboard(config: PersistedJson): Promise<void> {
+  const turtle = serializeToTurtle(config);
+  try {
+    await navigator.clipboard.writeText(turtle);
+  } catch (error) {
+    // Fallback for older browsers
+    const textArea = document.createElement("textarea");
+    textArea.value = turtle;
+    textArea.style.position = "fixed";
+    textArea.style.left = "-999999px";
+    document.body.appendChild(textArea);
+    textArea.select();
+    try {
+      document.execCommand("copy");
+    } finally {
+      document.body.removeChild(textArea);
+    }
+  }
+}
+
+/**
+ * Read configuration from file
+ */
+export function readConfigFromFile(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (e.target?.result) {
+        resolve(e.target.result as string);
+      } else {
+        reject(new Error("Failed to read file"));
+      }
+    };
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsText(file);
+  });
+}
+
+/**
+ * Read configuration from clipboard
+ */
+export async function readConfigFromClipboard(): Promise<string> {
+  try {
+    return await navigator.clipboard.readText();
+  } catch (error) {
+    throw new Error("Failed to read from clipboard. Please paste the content manually.");
+  }
+}

package/src/PersistentConfig.ts

@@ -1,5 +1,5 @@
 import { Storage as YStorage } from "@matdata/yasgui-utils";
-import Yasgui from "./";
+import Yasgui, { EndpointButton } from "./";
 import * as Tab from "./Tab";
 export var storageNamespace = "triply";
 export interface PersistedJson {
@@ -10,6 +10,9 @@ export interface PersistedJson {
   lastClosedTab: { index: number; tab: Tab.PersistedJson } | undefined;
   prefixes?: string;
   autoCaptureEnabled?: boolean;
+  customEndpointButtons?: EndpointButton[];
+  theme?: "light" | "dark";
+  orientation?: "vertical" | "horizontal";
 }
 function getDefaults(): PersistedJson {
   return {
@@ -20,6 +23,7 @@ function getDefaults(): PersistedJson {
     lastClosedTab: undefined,
     prefixes: "",
     autoCaptureEnabled: true,
+    customEndpointButtons: [],
   };
 }
 
@@ -152,8 +156,30 @@ export default class PersistentConfig {
     this.persistedJson.autoCaptureEnabled = enabled;
     this.toStorage();
   }
+  public getCustomEndpointButtons(): EndpointButton[] {
+    return this.persistedJson.customEndpointButtons || [];
+  }
+  public setCustomEndpointButtons(buttons: EndpointButton[]) {
+    this.persistedJson.customEndpointButtons = buttons;
+    this.toStorage();
+  }
   public static clear() {
     const storage = new YStorage(storageNamespace);
     storage.removeNamespace();
   }
+
+  /**
+   * Get the current persisted configuration (for export purposes)
+   */
+  public getPersistedConfig(): PersistedJson {
+    return this.persistedJson;
+  }
+
+  /**
+   * Update the persisted configuration (for import purposes)
+   */
+  public updatePersistedConfig(config: Partial<PersistedJson>) {
+    Object.assign(this.persistedJson, config);
+    this.toStorage();
+  }
 }

package/src/Tab.ts

@@ -9,6 +9,17 @@ import * as shareLink from "./linkUtils";
 import EndpointSelect from "./endpointSelect";
 import "./tab.scss";
 import { getRandomId, default as Yasgui, YasguiRequestConfig } from "./";
+
+// Layout orientation toggle icons
+const HORIZONTAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24" class="svgImg">
+  <rect x="2" y="4" width="9" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
+  <rect x="13" y="4" width="9" height="16" stroke="currentColor" stroke-width="2" fill="none"/>
+</svg>`;
+
+const VERTICAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24" class="svgImg">
+  <rect x="2" y="2" width="20" height="8" stroke="currentColor" stroke-width="2" fill="none"/>
+  <rect x="2" y="12" width="20" height="10" stroke="currentColor" stroke-width="2" fill="none"/>
+</svg>`;
 export interface PersistedJsonYasr extends YasrPersistentConfig {
   responseSummary: Parser.ResponseSummary;
 }
@@ -24,6 +35,7 @@ export interface PersistedJson {
     response: Parser.ResponseSummary | undefined;
   };
   requestConfig: YasguiRequestConfig;
+  orientation?: "vertical" | "horizontal";
 }
 export interface Tab {
   on(event: string | symbol, listener: (...args: any[]) => void): this;
@@ -57,12 +69,16 @@ export class Tab extends EventEmitter {
   private yasqeWrapperEl: HTMLDivElement | undefined;
   private yasrWrapperEl: HTMLDivElement | undefined;
   private endpointSelect: EndpointSelect | undefined;
+  private endpointButtonsContainer: HTMLDivElement | undefined;
   private settingsModal?: TabSettingsModal;
+  private currentOrientation: "vertical" | "horizontal";
+  private orientationToggleButton?: HTMLButtonElement;
   constructor(yasgui: Yasgui, conf: PersistedJson) {
     super();
     if (!conf || conf.id === undefined) throw new Error("Expected a valid configuration to initialize tab with");
     this.yasgui = yasgui;
     this.persistentJson = conf;
+    this.currentOrientation = this.yasgui.config.orientation || "vertical";
   }
   public name() {
     return this.persistentJson.name;
@@ -81,6 +97,9 @@ export class Tab extends EventEmitter {
     this.rootEl.setAttribute("role", "tabpanel");
     this.rootEl.setAttribute("aria-labelledby", "tab-" + this.persistentJson.id);
 
+    // Apply orientation class
+    addClass(this.rootEl, `orientation-${this.currentOrientation}`);
+
     // We group controlbar and Yasqe, so that users can easily .appendChild() to the .editorwrapper div
     // to add a div that goes alongside the controlbar and editor, while YASR still goes full width
     // Useful for adding an infos div that goes alongside the editor without needing to rebuild the whole Yasgui class
@@ -99,6 +118,7 @@ export class Tab extends EventEmitter {
 
     //yasr
     this.yasrWrapperEl = document.createElement("div");
+    this.yasrWrapperEl.className = "yasrWrapperEl";
 
     this.initTabSettingsMenu();
     this.rootEl.appendChild(editorWrapper);
@@ -151,8 +171,8 @@ export class Tab extends EventEmitter {
         }
       }
     }
-    // Ctrl+Shift+F - Switch between fullscreen modes
-    else if (event.ctrlKey && event.shiftKey && event.key === "F") {
+    // F9 - Switch between fullscreen modes
+    else if (event.key === "F9") {
       event.preventDefault();
       const yasqeFullscreen = this.yasqe?.getIsFullscreen();
       const yasrFullscreen = this.yasr?.getIsFullscreen();
@@ -222,10 +242,63 @@ export class Tab extends EventEmitter {
   }
   private initControlbar() {
     this.initEndpointSelectField();
+    this.initOrientationToggle();
+    this.initEndpointButtons();
     if (this.yasgui.config.endpointInfo && this.controlBarEl) {
       this.controlBarEl.appendChild(this.yasgui.config.endpointInfo());
     }
   }
+
+  private initOrientationToggle() {
+    if (!this.controlBarEl) return;
+
+    this.orientationToggleButton = document.createElement("button");
+    this.orientationToggleButton.className = "tabContextButton orientationToggle";
+    this.orientationToggleButton.setAttribute("aria-label", "Toggle layout orientation");
+    this.orientationToggleButton.title = "Toggle layout orientation";
+
+    this.updateOrientationToggleIcon();
+
+    this.orientationToggleButton.addEventListener("click", () => {
+      this.toggleOrientation();
+    });
+
+    this.controlBarEl.appendChild(this.orientationToggleButton);
+  }
+
+  private updateOrientationToggleIcon() {
+    if (!this.orientationToggleButton) return;
+
+    // Show the icon for the layout we'll switch TO (not the current layout)
+    this.orientationToggleButton.innerHTML =
+      this.currentOrientation === "vertical" ? HORIZONTAL_LAYOUT_ICON : VERTICAL_LAYOUT_ICON;
+    this.orientationToggleButton.title =
+      this.currentOrientation === "vertical" ? "Switch to horizontal layout" : "Switch to vertical layout";
+  }
+
+  public toggleOrientation() {
+    if (!this.rootEl) return;
+
+    // Remove old orientation class
+    removeClass(this.rootEl, `orientation-${this.currentOrientation}`);
+
+    // Toggle orientation
+    this.currentOrientation = this.currentOrientation === "vertical" ? "horizontal" : "vertical";
+
+    // Add new orientation class
+    addClass(this.rootEl, `orientation-${this.currentOrientation}`);
+
+    // Update button icon
+    this.updateOrientationToggleIcon();
+
+    // Refresh components to adjust to new layout
+    if (this.yasqe) {
+      this.yasqe.refresh();
+    }
+    if (this.yasr) {
+      this.yasr.refresh();
+    }
+  }
   public getYasqe() {
     return this.yasqe;
   }
@@ -253,6 +326,54 @@ export class Tab extends EventEmitter {
     });
   }
 
+  private initEndpointButtons() {
+    if (!this.controlBarEl) throw new Error("Need to initialize wrapper elements before drawing endpoint buttons");
+
+    // Create container if it doesn't exist
+    if (!this.endpointButtonsContainer) {
+      this.endpointButtonsContainer = document.createElement("div");
+      addClass(this.endpointButtonsContainer, "endpointButtonsContainer");
+      this.controlBarEl.appendChild(this.endpointButtonsContainer);
+    }
+
+    this.refreshEndpointButtons();
+  }
+
+  public refreshEndpointButtons() {
+    if (!this.endpointButtonsContainer) return;
+
+    // Clear existing buttons
+    this.endpointButtonsContainer.innerHTML = "";
+
+    // Merge config buttons with custom user buttons
+    const configButtons = this.yasgui.config.endpointButtons || [];
+    const customButtons = this.yasgui.persistentConfig.getCustomEndpointButtons();
+    const allButtons = [...configButtons, ...customButtons];
+
+    if (allButtons.length === 0) {
+      // Hide container if no buttons
+      this.endpointButtonsContainer.style.display = "none";
+      return;
+    }
+
+    // Show container
+    this.endpointButtonsContainer.style.display = "flex";
+
+    allButtons.forEach((buttonConfig) => {
+      const button = document.createElement("button");
+      addClass(button, "endpointButton");
+      button.textContent = buttonConfig.label;
+      button.title = `Set endpoint to ${buttonConfig.endpoint}`;
+      button.setAttribute("aria-label", `Set endpoint to ${buttonConfig.endpoint}`);
+
+      button.addEventListener("click", () => {
+        this.setEndpoint(buttonConfig.endpoint);
+      });
+
+      this.endpointButtonsContainer!.appendChild(button);
+    });
+  }
+
   private checkEndpointForCors(endpoint: string) {
     if (this.yasgui.config.corsProxy && !(endpoint in Yasgui.corsEnabled)) {
       const askUrl = new URL(endpoint);