@matdata/yasgui 5.1.0 → 5.2.0

package/package.json

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

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,7 @@ export interface PersistedJson {
   lastClosedTab: { index: number; tab: Tab.PersistedJson } | undefined;
   prefixes?: string;
   autoCaptureEnabled?: boolean;
+  customEndpointButtons?: EndpointButton[];
 }
 function getDefaults(): PersistedJson {
   return {
@@ -20,6 +21,7 @@ function getDefaults(): PersistedJson {
     lastClosedTab: undefined,
     prefixes: "",
     autoCaptureEnabled: true,
+    customEndpointButtons: [],
   };
 }
 
@@ -152,6 +154,13 @@ 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();

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;
 }
@@ -57,12 +68,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 +96,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 +117,7 @@ export class Tab extends EventEmitter {
 
     //yasr
     this.yasrWrapperEl = document.createElement("div");
+    this.yasrWrapperEl.className = "yasrWrapperEl";
 
     this.initTabSettingsMenu();
     this.rootEl.appendChild(editorWrapper);
@@ -222,10 +241,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 +325,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);

package/src/TabSettingsModal.scss

@@ -256,3 +256,105 @@
     background: var(--yasgui-border-color, #d0d0d0);
   }
 }
+
+.endpointButtonsList {
+  margin: 15px 0;
+  border: 1px solid var(--yasgui-border-color, #ddd);
+  border-radius: 4px;
+  padding: 10px;
+  background: var(--yasgui-bg-secondary, #f7f7f7);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.endpointButtonItem {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  margin-bottom: 8px;
+  background: var(--yasgui-bg-primary, #fff);
+  border: 1px solid var(--yasgui-border-color, #ddd);
+  border-radius: 3px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .buttonLabel {
+    font-weight: 600;
+    min-width: 100px;
+    color: var(--yasgui-text-primary, #333);
+  }
+
+  .buttonEndpoint {
+    flex: 1;
+    margin-left: 10px;
+    color: var(--yasgui-text-secondary, #666);
+    font-size: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .removeButton {
+    margin-left: auto;
+    background: transparent;
+    border: none;
+    color: var(--yasgui-error-color, #d32f2f);
+    font-size: 20px;
+    cursor: pointer;
+    padding: 0 8px;
+    line-height: 1;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+}
+
+.emptyMessage {
+  color: var(--yasgui-text-muted, #999);
+  font-style: italic;
+  text-align: center;
+  padding: 20px;
+}
+
+.addEndpointButtonForm {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  input {
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid var(--yasgui-border-color, #ddd);
+    border-radius: 3px;
+    background: var(--yasgui-bg-primary, #fff);
+    color: var(--yasgui-text-primary, #333);
+    font-size: 14px;
+
+    &:focus {
+      outline: none;
+      border-color: var(--yasgui-accent-color, #337ab7);
+    }
+
+    &::placeholder {
+      color: var(--yasgui-text-muted, #999);
+    }
+  }
+
+  .addEndpointButton {
+    padding: 8px 16px;
+    background: var(--yasgui-accent-color, #337ab7);
+    color: white;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 14px;
+    white-space: nowrap;
+
+    &:hover {
+      background: var(--yasgui-link-hover, #286090);
+    }
+  }
+}

package/src/TabSettingsModal.ts

@@ -126,8 +126,14 @@ export default class TabSettingsModal {
     addClass(prefixTab, "modalTabButton");
     prefixTab.onclick = () => this.switchTab("prefix");
 
+    const endpointsTab = document.createElement("button");
+    endpointsTab.textContent = "Endpoint Buttons";
+    addClass(endpointsTab, "modalTabButton");
+    endpointsTab.onclick = () => this.switchTab("endpoints");
+
     tabsContainer.appendChild(requestTab);
     tabsContainer.appendChild(prefixTab);
+    tabsContainer.appendChild(endpointsTab);
     body.appendChild(tabsContainer);
 
     // Tab content containers
@@ -141,8 +147,14 @@ export default class TabSettingsModal {
     prefixContent.id = "prefix-content";
     this.drawPrefixSettings(prefixContent);
 
+    const endpointsContent = document.createElement("div");
+    addClass(endpointsContent, "modalTabContent");
+    endpointsContent.id = "endpoints-content";
+    this.drawEndpointButtonsSettings(endpointsContent);
+
     body.appendChild(requestContent);
     body.appendChild(prefixContent);
+    body.appendChild(endpointsContent);
 
     this.modalContent.appendChild(body);
 
@@ -174,7 +186,11 @@ export default class TabSettingsModal {
     const contents = this.modalContent.querySelectorAll(".modalTabContent");
 
     buttons.forEach((btn, index) => {
-      if ((tabName === "request" && index === 0) || (tabName === "prefix" && index === 1)) {
+      if (
+        (tabName === "request" && index === 0) ||
+        (tabName === "prefix" && index === 1) ||
+        (tabName === "endpoints" && index === 2)
+      ) {
         addClass(btn as HTMLElement, "active");
       } else {
         removeClass(btn as HTMLElement, "active");
@@ -342,6 +358,9 @@ export default class TabSettingsModal {
       this.tab.setRequestConfig(updates);
     }
 
+    // Refresh endpoint buttons to show any changes
+    this.tab.refreshEndpointButtons();
+
     this.close();
   }
 
@@ -437,6 +456,117 @@ export default class TabSettingsModal {
     this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
   }
 
+  private drawEndpointButtonsSettings(container: HTMLElement) {
+    const section = document.createElement("div");
+    addClass(section, "settingsSection");
+
+    const label = document.createElement("label");
+    label.textContent = "Custom Endpoint Buttons";
+    addClass(label, "settingsLabel");
+
+    const help = document.createElement("div");
+    help.textContent = "Add custom endpoint buttons that will appear next to the endpoint textbox.";
+    addClass(help, "settingsHelp");
+
+    section.appendChild(label);
+    section.appendChild(help);
+
+    // List of existing buttons
+    const buttonsList = document.createElement("div");
+    addClass(buttonsList, "endpointButtonsList");
+    this.renderEndpointButtonsList(buttonsList);
+    section.appendChild(buttonsList);
+
+    // Form to add new button
+    const addForm = document.createElement("div");
+    addClass(addForm, "addEndpointButtonForm");
+
+    const labelInput = document.createElement("input");
+    labelInput.type = "text";
+    labelInput.placeholder = "Button label (e.g., DBpedia)";
+    addClass(labelInput, "endpointButtonLabelInput");
+
+    const endpointInput = document.createElement("input");
+    endpointInput.type = "url";
+    endpointInput.placeholder = "Endpoint URL (e.g., https://dbpedia.org/sparql)";
+    addClass(endpointInput, "endpointButtonEndpointInput");
+
+    const addButton = document.createElement("button");
+    addButton.textContent = "+ Add Button";
+    addClass(addButton, "addEndpointButton");
+    addButton.type = "button";
+    addButton.onclick = () => {
+      const labelValue = labelInput.value.trim();
+      const endpointValue = endpointInput.value.trim();
+
+      if (!labelValue || !endpointValue) {
+        alert("Please enter both a label and an endpoint URL.");
+        return;
+      }
+
+      // Add to persistent config
+      const currentButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
+      currentButtons.push({ label: labelValue, endpoint: endpointValue });
+      this.tab.yasgui.persistentConfig.setCustomEndpointButtons(currentButtons);
+
+      // Clear inputs
+      labelInput.value = "";
+      endpointInput.value = "";
+
+      // Refresh list
+      this.renderEndpointButtonsList(buttonsList);
+    };
+
+    addForm.appendChild(labelInput);
+    addForm.appendChild(endpointInput);
+    addForm.appendChild(addButton);
+    section.appendChild(addForm);
+
+    container.appendChild(section);
+  }
+
+  private renderEndpointButtonsList(container: HTMLElement) {
+    container.innerHTML = "";
+    const customButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
+
+    if (customButtons.length === 0) {
+      const emptyMsg = document.createElement("div");
+      emptyMsg.textContent = "No custom buttons yet. Add one below.";
+      addClass(emptyMsg, "emptyMessage");
+      container.appendChild(emptyMsg);
+      return;
+    }
+
+    customButtons.forEach((btn, index) => {
+      const item = document.createElement("div");
+      addClass(item, "endpointButtonItem");
+
+      const labelSpan = document.createElement("span");
+      labelSpan.textContent = `${btn.label}`;
+      addClass(labelSpan, "buttonLabel");
+
+      const endpointSpan = document.createElement("span");
+      endpointSpan.textContent = btn.endpoint;
+      addClass(endpointSpan, "buttonEndpoint");
+
+      const removeBtn = document.createElement("button");
+      removeBtn.textContent = "×";
+      addClass(removeBtn, "removeButton");
+      removeBtn.type = "button";
+      removeBtn.onclick = () => {
+        const currentButtons = this.tab.yasgui.persistentConfig.getCustomEndpointButtons();
+        currentButtons.splice(index, 1);
+        this.tab.yasgui.persistentConfig.setCustomEndpointButtons(currentButtons);
+        this.renderEndpointButtonsList(container);
+      };
+
+      item.appendChild(labelSpan);
+      item.appendChild(endpointSpan);
+      item.appendChild(removeBtn);
+      container.appendChild(item);
+    });
+  }
+
   private getThemeToggleIcon(): string {
     const currentTheme = this.tab.yasgui.getTheme();
     // In dark mode, show moon icon (clicking will switch to light)

package/src/defaults.ts

@@ -30,6 +30,8 @@ export default function initialize(): Config<CatalogueItem> {
     yasr: Yasr.defaults,
     theme: undefined,
     showThemeToggle: true,
+    orientation: "vertical",
+    endpointButtons: undefined,
     endpointCatalogueOptions: {
       getData: () => {
         return [

package/src/endpointSelect.scss

@@ -119,4 +119,38 @@
       opacity: 0.8;
     }
   }
+
+  .endpointButtonsContainer {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: 4px;
+  }
+
+  .endpointButton {
+    border: 1px solid var(--yasgui-endpoint-button-border, #337ab7);
+    background-color: var(--yasgui-endpoint-button-bg, #337ab7);
+    color: var(--yasgui-endpoint-button-text, #ffffff);
+    border-radius: 3px;
+    cursor: pointer;
+    padding: 4px 12px;
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: var(--yasgui-endpoint-button-hover-bg, #286090);
+      border-color: var(--yasgui-endpoint-button-hover-border, #286090);
+    }
+
+    &:active {
+      transform: translateY(1px);
+    }
+
+    &:focus {
+      outline: 2px solid var(--yasgui-endpoint-button-focus, #5cb3fd);
+      outline-offset: 2px;
+    }
+  }
 }

package/src/index.scss

@@ -11,8 +11,8 @@
     left: 0;
     right: 0;
     z-index: 9999;
-    background: white;
-    border-bottom: 1px solid #ddd;
+    background: var(--yasgui-bg-primary);
+    border-bottom: 1px solid var(--yasgui-border-color);
     padding: 5px;
     margin: 0;
 

package/src/index.ts

@@ -31,6 +31,10 @@ if (window) {
 export type YasguiRequestConfig = Omit<RequestConfig<Yasgui>, "adjustQueryBeforeRequest"> & {
   adjustQueryBeforeRequest: RequestConfig<Yasqe>["adjustQueryBeforeRequest"];
 };
+export interface EndpointButton {
+  endpoint: string;
+  label: string;
+}
 export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
   /**
    * Autofocus yasqe on load or tab switch
@@ -41,6 +45,7 @@ export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
   tabName: string;
   corsProxy: string | undefined;
   endpointCatalogueOptions: EndpointSelectConfig<EndpointObject>;
+  endpointButtons?: EndpointButton[];
   //The function allows us to modify the config before we pass it on to a tab
   populateFromUrl: boolean | ((configFromUrl: PersistedTabJson) => PersistedTabJson);
   autoAddOnInit: boolean;
@@ -55,6 +60,12 @@ export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
   nonSslDomain?: string;
   theme?: Theme;
   showThemeToggle?: boolean;
+  /**
+   * Layout orientation: 'vertical' (default) or 'horizontal' (side-by-side)
+   * 'vertical': YASQE on top, YASR below
+   * 'horizontal': YASQE on left, YASR on right
+   */
+  orientation?: "vertical" | "horizontal";
 }
 export type PartialConfig = {
   [P in keyof Config]?: Config[P] extends object ? Partial<Config[P]> : Config[P];

package/src/tab.scss

@@ -18,9 +18,57 @@
       left: 0;
       right: 0;
       z-index: 9999;
-      background: white;
-      border-bottom: 1px solid #ddd;
+      background: var(--yasgui-bg-primary);
+      border-bottom: 1px solid var(--yasgui-border-color);
       padding: 5px;
+
+      // Hide the layout orientation toggle button in fullscreen mode
+      .orientationToggle {
+        display: none;
+      }
+    }
+
+    // Horizontal layout (side-by-side)
+    &.orientation-horizontal {
+      &.active {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        // Allow flexible height - can use 100vh or be constrained by parent
+        min-height: var(--yasgui-min-height);
+        height: calc(100vh - var(--yasgui-header-height));
+      }
+
+      .editorwrapper {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      // Make YASQE fill the vertical space in horizontal mode
+      .yasqe {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+
+        .CodeMirror {
+          height: 100% !important;
+        }
+      }
+
+      .yasrWrapperEl {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      .yasr {
+        margin-top: 0;
+        height: 100%;
+      }
     }
   }
   .yasr {

package/src/themes.scss

@@ -36,6 +36,18 @@
   --yasgui-fallback-border: #d1d1d1;
   --yasgui-resize-handle: #d1d1d1;
   --yasgui-nav-bg: #eee;
+  --yasgui-match-highlight-bg: #dbdeed;
+
+  // Layout dimensions (used for horizontal orientation)
+  --yasgui-header-height: 100px; // Height to subtract from viewport in horizontal layout
+  --yasgui-min-height: 400px; // Minimum height for horizontal layout panels
+
+  --yasgui-endpoint-button-bg: #337ab7;
+  --yasgui-endpoint-button-border: #337ab7;
+  --yasgui-endpoint-button-text: #ffffff;
+  --yasgui-endpoint-button-hover-bg: #286090;
+  --yasgui-endpoint-button-hover-border: #286090;
+  --yasgui-endpoint-button-focus: #5cb3fd;
 }
 
 [data-theme="dark"] {
@@ -73,6 +85,13 @@
   --yasgui-fallback-border: #3e3e42;
   --yasgui-resize-handle: #3e3e42;
   --yasgui-nav-bg: #2d2d30;
+  --yasgui-match-highlight-bg: #3a4a5a;
+  --yasgui-endpoint-button-bg: #4fc3f7;
+  --yasgui-endpoint-button-border: #4fc3f7;
+  --yasgui-endpoint-button-text: #1e1e1e;
+  --yasgui-endpoint-button-hover-bg: #81d4fa;
+  --yasgui-endpoint-button-hover-border: #81d4fa;
+  --yasgui-endpoint-button-focus: #81d4fa;
 }
 
 // Apply theme colors to Yasgui components
@@ -255,6 +274,10 @@
     fill: var(--yasgui-error-color);
   }
 
+  .cm-matchhighlight {
+    background-color: var(--yasgui-match-highlight-bg);
+  }
+
   // Yasqe buttons theming (share, query, fullscreen)
   .yasqe_buttons {
     svg {