@matdata/yasgui 5.8.1 → 5.9.0

package/package.json

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

package/src/PersistentConfig.ts

@@ -15,6 +15,7 @@ export interface PersistedJson {
   theme?: "light" | "dark";
   orientation?: "vertical" | "horizontal";
   showSnippetsBar?: boolean;
+  disabledDevButtons?: string[]; // Endpoints of developer-configured buttons that are disabled by user
 }
 function getDefaults(): PersistedJson {
   return {
@@ -234,4 +235,37 @@ export default class PersistentConfig {
     Object.assign(this.persistedJson, config);
     this.toStorage();
   }
+
+  /**
+   * Get list of disabled developer-configured endpoint buttons
+   */
+  public getDisabledDevButtons(): string[] {
+    return this.persistedJson.disabledDevButtons || [];
+  }
+
+  /**
+   * Set list of disabled developer-configured endpoint buttons
+   */
+  public setDisabledDevButtons(endpoints: string[]) {
+    this.persistedJson.disabledDevButtons = endpoints;
+    this.toStorage();
+  }
+
+  /**
+   * Toggle a developer button enabled/disabled state
+   */
+  public toggleDevButton(endpoint: string, enabled: boolean) {
+    const disabled = this.getDisabledDevButtons();
+    if (enabled) {
+      // Remove from disabled list
+      const filtered = disabled.filter((e) => e !== endpoint);
+      this.setDisabledDevButtons(filtered);
+    } else {
+      // Add to disabled list
+      if (!disabled.includes(endpoint)) {
+        disabled.push(endpoint);
+        this.setDisabledDevButtons(disabled);
+      }
+    }
+  }
 }

package/src/Tab.ts

@@ -12,16 +12,23 @@ import { getRandomId, default as Yasgui, YasguiRequestConfig } from "./";
 import * as OAuth2Utils from "./OAuth2Utils";
 
 // Layout orientation toggle icons
-const HORIZONTAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24" class="svgImg">
+const HORIZONTAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24">
   <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">
+const VERTICAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24">
   <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>`;
 
+// Overflow dropdown icon (three horizontal dots / ellipsis menu)
+const OVERFLOW_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
+  <circle cx="5" cy="12" r="2"/>
+  <circle cx="12" cy="12" r="2"/>
+  <circle cx="19" cy="12" r="2"/>
+</svg>`;
+
 export interface PersistedJsonYasr extends YasrPersistentConfig {
   responseSummary: Parser.ResponseSummary;
 }
@@ -75,6 +82,10 @@ export class Tab extends EventEmitter {
   private yasrWrapperEl: HTMLDivElement | undefined;
   private endpointSelect: EndpointSelect | undefined;
   private endpointButtonsContainer: HTMLDivElement | undefined;
+  private endpointOverflowButton: HTMLButtonElement | undefined;
+  private endpointOverflowDropdown: HTMLDivElement | undefined;
+  private endpointButtonConfigs: Array<{ endpoint: string; label: string }> = [];
+  private resizeObserver: ResizeObserver | undefined;
   private settingsModal?: TabSettingsModal;
   private currentOrientation: "vertical" | "horizontal";
   private orientationToggleButton?: HTMLButtonElement;
@@ -337,6 +348,8 @@ export class Tab extends EventEmitter {
         // Refresh components to adjust to new layout
         if (tab.yasqe) {
           tab.yasqe.refresh();
+          // Trigger snippets overflow detection after layout change
+          tab.yasqe.refreshSnippetsBar();
         }
         if (tab.yasr) {
           tab.yasr.refresh();
@@ -385,16 +398,202 @@ export class Tab extends EventEmitter {
     }
 
     this.refreshEndpointButtons();
+    this.initEndpointButtonsResizeObserver();
+  }
+
+  private initEndpointButtonsResizeObserver() {
+    if (!this.controlBarEl || !this.endpointButtonsContainer) return;
+
+    // Clean up existing observer
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+
+    // Create resize observer to detect when we need to show overflow
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateEndpointButtonsOverflow();
+    });
+
+    this.resizeObserver.observe(this.controlBarEl);
+  }
+
+  private updateEndpointButtonsOverflow() {
+    if (!this.endpointButtonsContainer || !this.controlBarEl) return;
+
+    // Get all actual endpoint buttons (not the overflow button)
+    const buttons = Array.from(
+      this.endpointButtonsContainer.querySelectorAll(".endpointButton:not(.endpointOverflowBtn)"),
+    ) as HTMLButtonElement[];
+
+    if (buttons.length === 0) {
+      this.hideOverflowButton();
+      return;
+    }
+
+    // Get the container's available width
+    const containerRect = this.controlBarEl.getBoundingClientRect();
+    const containerWidth = containerRect.width;
+
+    // Calculate the space used by other elements (endpoint select, settings buttons, etc.)
+    const endpointButtonsRect = this.endpointButtonsContainer.getBoundingClientRect();
+    const buttonsContainerLeft = endpointButtonsRect.left - containerRect.left;
+
+    // Estimate available space for endpoint buttons (leave some margin for overflow button)
+    const overflowButtonWidth = 40; // Approximate width of overflow button
+    const availableWidth = containerWidth - buttonsContainerLeft - overflowButtonWidth - 20; // 20px margin
+
+    // Make all buttons temporarily visible to measure
+    buttons.forEach((btn) => btn.classList.remove("endpointButtonHidden"));
+
+    // Check if buttons overflow
+    let totalWidth = 0;
+    let overflowIndex = -1;
+
+    for (let i = 0; i < buttons.length; i++) {
+      const btn = buttons[i];
+      const btnWidth = btn.offsetWidth + 4; // Include gap
+      totalWidth += btnWidth;
+
+      if (totalWidth > availableWidth && overflowIndex === -1) {
+        overflowIndex = i;
+      }
+    }
+
+    if (overflowIndex === -1) {
+      // All buttons fit, hide overflow button
+      this.hideOverflowButton();
+      buttons.forEach((btn) => btn.classList.remove("endpointButtonHidden"));
+    } else {
+      // Some buttons need to go into overflow
+      buttons.forEach((btn, index) => {
+        if (index >= overflowIndex) {
+          btn.classList.add("endpointButtonHidden");
+        } else {
+          btn.classList.remove("endpointButtonHidden");
+        }
+      });
+      this.showOverflowButton(overflowIndex);
+    }
+  }
+
+  private showOverflowButton(overflowStartIndex: number) {
+    if (!this.endpointButtonsContainer) return;
+
+    // Create overflow button if it doesn't exist
+    if (!this.endpointOverflowButton) {
+      this.endpointOverflowButton = document.createElement("button");
+      addClass(this.endpointOverflowButton, "endpointOverflowBtn");
+      this.endpointOverflowButton.innerHTML = OVERFLOW_ICON;
+      this.endpointOverflowButton.title = "More endpoints";
+      this.endpointOverflowButton.setAttribute("aria-label", "More endpoint options");
+      this.endpointOverflowButton.setAttribute("aria-haspopup", "true");
+      this.endpointOverflowButton.setAttribute("aria-expanded", "false");
+
+      this.endpointOverflowButton.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.toggleOverflowDropdown();
+      });
+
+      this.endpointButtonsContainer.appendChild(this.endpointOverflowButton);
+    }
+
+    // Update the overflow button's data with which buttons are hidden
+    this.endpointOverflowButton.dataset.overflowStart = String(overflowStartIndex);
+    this.endpointOverflowButton.style.display = "flex";
+  }
+
+  private hideOverflowButton() {
+    if (this.endpointOverflowButton) {
+      this.endpointOverflowButton.style.display = "none";
+    }
+    this.closeOverflowDropdown();
+  }
+
+  private toggleOverflowDropdown() {
+    if (this.endpointOverflowDropdown && this.endpointOverflowDropdown.style.display !== "none") {
+      this.closeOverflowDropdown();
+    } else {
+      this.openOverflowDropdown();
+    }
+  }
+
+  private openOverflowDropdown() {
+    if (!this.endpointOverflowButton || !this.endpointButtonsContainer) return;
+
+    const overflowStartIndex = parseInt(this.endpointOverflowButton.dataset.overflowStart || "0", 10);
+    const overflowButtons = this.endpointButtonConfigs.slice(overflowStartIndex);
+
+    if (overflowButtons.length === 0) return;
+
+    // Create dropdown if it doesn't exist
+    if (!this.endpointOverflowDropdown) {
+      this.endpointOverflowDropdown = document.createElement("div");
+      addClass(this.endpointOverflowDropdown, "endpointOverflowDropdown");
+      this.endpointButtonsContainer.appendChild(this.endpointOverflowDropdown);
+    }
+
+    // Clear and populate dropdown
+    this.endpointOverflowDropdown.innerHTML = "";
+
+    overflowButtons.forEach((buttonConfig) => {
+      const item = document.createElement("button");
+      addClass(item, "endpointOverflowItem");
+      item.textContent = buttonConfig.label;
+      item.title = `Set endpoint to ${buttonConfig.endpoint}`;
+      item.setAttribute("aria-label", `Set endpoint to ${buttonConfig.endpoint}`);
+
+      item.addEventListener("click", () => {
+        this.setEndpoint(buttonConfig.endpoint);
+        this.closeOverflowDropdown();
+      });
+
+      this.endpointOverflowDropdown!.appendChild(item);
+    });
+
+    // Position and show dropdown
+    this.endpointOverflowDropdown.style.display = "block";
+    this.endpointOverflowButton.setAttribute("aria-expanded", "true");
+
+    // Add click-outside listener to close dropdown
+    const closeHandler = (e: MouseEvent) => {
+      if (
+        this.endpointOverflowDropdown &&
+        !this.endpointOverflowDropdown.contains(e.target as Node) &&
+        e.target !== this.endpointOverflowButton
+      ) {
+        this.closeOverflowDropdown();
+        document.removeEventListener("click", closeHandler);
+      }
+    };
+
+    // Delay adding listener to avoid immediate close
+    setTimeout(() => {
+      document.addEventListener("click", closeHandler);
+    }, 0);
+  }
+
+  private closeOverflowDropdown() {
+    if (this.endpointOverflowDropdown) {
+      this.endpointOverflowDropdown.style.display = "none";
+    }
+    if (this.endpointOverflowButton) {
+      this.endpointOverflowButton.setAttribute("aria-expanded", "false");
+    }
   }
 
   public refreshEndpointButtons() {
     if (!this.endpointButtonsContainer) return;
 
-    // Clear existing buttons
+    // Clear existing buttons (but keep overflow button reference)
     this.endpointButtonsContainer.innerHTML = "";
+    this.endpointOverflowButton = undefined;
+    this.endpointOverflowDropdown = undefined;
 
-    // Get config buttons (for backwards compatibility)
-    const configButtons = this.yasgui.config.endpointButtons || [];
+    // Get config buttons (for backwards compatibility) and filter out disabled ones
+    const disabledButtons = this.yasgui.persistentConfig.getDisabledDevButtons();
+    const configButtons = (this.yasgui.config.endpointButtons || []).filter(
+      (button) => !disabledButtons.includes(button.endpoint),
+    );
 
     // Get endpoint configs where showAsButton is true
     const endpointConfigs = this.yasgui.persistentConfig.getEndpointConfigs();
@@ -407,6 +606,9 @@ export class Tab extends EventEmitter {
 
     const allButtons = [...configButtons, ...endpointButtons, ...customButtons];
 
+    // Store button configs for overflow dropdown
+    this.endpointButtonConfigs = allButtons;
+
     if (allButtons.length === 0) {
       // Hide container if no buttons
       this.endpointButtonsContainer.style.display = "none";
@@ -429,6 +631,11 @@ export class Tab extends EventEmitter {
 
       this.endpointButtonsContainer!.appendChild(button);
     });
+
+    // Trigger overflow check after rendering
+    requestAnimationFrame(() => {
+      this.updateEndpointButtonsOverflow();
+    });
   }
 
   public setEndpoint(endpoint: string, endpointHistory?: string[]) {
@@ -440,12 +647,14 @@ export class Tab extends EventEmitter {
     if (this.persistentJson.requestConfig.endpoint !== endpoint) {
       this.persistentJson.requestConfig.endpoint = endpoint;
       this.emit("change", this, this.persistentJson);
-      this.emit("endpointChange", this, endpoint);
 
       // Auto-track this endpoint in endpoint configs (if not already present)
       if (endpoint && !this.yasgui.persistentConfig.getEndpointConfig(endpoint)) {
         this.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {});
       }
+
+      // Emit after endpoint is tracked
+      this.emit("endpointChange", this, endpoint);
     }
     if (this.endpointSelect instanceof EndpointSelect) {
       this.endpointSelect.setEndpoint(endpoint, endpointHistory);
@@ -1056,6 +1265,8 @@ WHERE {
     // Refresh editors after resizing
     if (this.yasqe) {
       this.yasqe.refresh();
+      // Trigger snippets overflow detection after horizontal resize
+      this.yasqe.refreshSnippetsBar();
     }
     if (this.yasr) {
       this.yasr.refresh();
@@ -1087,6 +1298,12 @@ WHERE {
     document.documentElement.removeEventListener("mousemove", this.doVerticalDrag, false);
     document.documentElement.removeEventListener("mouseup", this.stopVerticalDrag, false);
 
+    // Clean up resize observer for endpoint buttons overflow
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = undefined;
+    }
+
     this.removeAllListeners();
     this.settingsModal?.destroy();
     this.endpointSelect?.destroy();

package/src/TabContextMenu.scss

@@ -1,42 +1,51 @@
 .yasgui.context-menu {
   position: absolute;
   z-index: 10;
-  background: white;
-  min-width: 160px;
-  font-size: 14px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
+  background: var(--yasgui-bg-primary);
+  width: fit-content;
+  height: fit-content;
+  min-width: fit-content;
+  min-height: fit-content;
+  min-width: 140px;
+  max-width: 250px;
+  font-size: 12px;
+  border: 1px solid var(--yasgui-border-color);
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
   background-clip: padding-box;
   hr {
-    margin: 8px auto;
+    margin: 6px auto;
     border: none;
-    border-top: 1px solid #aaaaaa;
-    border-bottom: 1px solid #ffffff;
+    border-top: 1px solid var(--yasgui-border-color);
   }
   .context-menu-list {
     padding: 0;
+    margin: 0;
+    list-style: none;
   }
   .context-menu-item {
     display: block;
-    padding: 3px 20px;
+    padding: 6px 16px;
     clear: both;
     font-weight: 400;
-    line-height: 1.42857;
-    color: #333;
+    line-height: 1.4;
+    color: var(--yasgui-text-primary);
     white-space: nowrap;
     cursor: pointer;
     &:hover {
       text-decoration: none;
-      color: black;
-      background-color: #f5f5f5;
+      color: var(--yasgui-button-hover);
+      background-color: var(--yasgui-bg-secondary);
     }
     &.disabled {
       text-decoration: none;
-      color: gray;
-      background-color: #e5e5e5;
+      color: var(--yasgui-text-muted);
+      background-color: transparent;
       cursor: not-allowed;
+      &:hover {
+        background-color: transparent;
+      }
     }
   }
 }

package/src/TabElements.ts

@@ -75,7 +75,10 @@ export class TabListEl {
     };
     addClass(this.tabEl, "tab");
     this.tabEl.addEventListener("keydown", (e: KeyboardEvent) => {
-      if (e.code === "Delete") handleDeleteTab();
+      // Don't handle Delete key if we're renaming the tab (input field is active)
+      if (e.code === "Delete" && !this.tabEl.classList.contains("renaming")) {
+        handleDeleteTab();
+      }
     });
 
     const handleDeleteTab = (e?: MouseEvent) => {
@@ -88,6 +91,7 @@ export class TabListEl {
     tabLinkEl.href = "#" + this.tabId;
     tabLinkEl.id = "tab-" + this.tabId; // use the id for the tabpanel which is tabId to set the actual tab id
     tabLinkEl.setAttribute("aria-controls", this.tabId); // respective tabPanel id
+    tabLinkEl.draggable = false; // Prevent default link dragging that interferes with text selection
     tabLinkEl.addEventListener("blur", () => {
       if (!this.tabEl) return;
       if (this.tabEl.classList.contains("active")) {
@@ -140,6 +144,13 @@ export class TabListEl {
       this.yasgui.getTab(this.tabId)?.setName(renameEl.value);
       removeClass(this.tabEl, "renaming");
     };
+    // Prevent sortablejs from detecting drag events on the input field
+    renameEl.addEventListener("mousedown", (e) => {
+      e.stopPropagation();
+    });
+    renameEl.addEventListener("dragstart", (e) => {
+      e.stopPropagation();
+    });
     tabLinkEl.appendChild(this.renameEl);
     tabLinkEl.oncontextmenu = (ev: MouseEvent) => {
       // Close possible old
@@ -212,6 +223,8 @@ export class TabList {
   }
   private handleKeydownArrowKeys = (e: KeyboardEvent) => {
     if (e.code === "ArrowLeft" || e.code === "ArrowRight") {
+      // Don't handle arrow keys if we're typing in the rename input field
+      if (document.activeElement?.tagName === "INPUT") return;
       if (!this._tabsListEl) return;
       const numOfChildren = this._tabsListEl.childElementCount;
       if (typeof this.tabEntryIndex !== "number") return;
@@ -251,7 +264,8 @@ export class TabList {
         this.yasgui.emit("tabOrderChanged", this.yasgui, tabs);
         this.yasgui.persistentConfig.setTabOrder(tabs);
       },
-      filter: ".addTab",
+      filter: ".addTab, input, .renaming",
+      preventOnFilter: false,
       onMove: (ev: any, _origEv: any) => {
         return hasClass(ev.related, "tab");
       },

package/src/TabSettingsModal.scss

@@ -3,8 +3,8 @@
   background: transparent;
   color: inherit;
   border: none;
-  padding: 6px 8px;
-  margin-left: 10px;
+  padding: 6px;
+  margin-left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,25 +23,6 @@
   }
 }
 
-.tabPrefixButton {
-  cursor: pointer;
-  background: transparent;
-  color: inherit;
-  border: none;
-  padding: 6px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  margin-left: 10px;
-
-  &:hover {
-    opacity: 0.7;
-  }
-
-  &:active {
-    opacity: 0.5;
-  }
-}
-
 .tabSettingsModalOverlay {
   display: none;
   position: fixed;
@@ -706,6 +687,56 @@
   }
 }
 
+// Developer buttons table styling
+.devButtonsTable {
+  margin-top: 15px;
+  margin-bottom: 30px;
+}
+
+.devButtonsTableElement {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+
+  th,
+  td {
+    padding: 10px;
+    text-align: left;
+    border-bottom: 1px solid var(--yasgui-border-color, #e0e0e0);
+  }
+
+  th {
+    font-weight: 600;
+    color: var(--yasgui-text-primary, #000);
+    background: var(--yasgui-bg-secondary, #f9f9f9);
+  }
+
+  td {
+    color: var(--yasgui-text-primary, #333);
+  }
+
+  .devButtonLabelCell {
+    font-weight: 500;
+  }
+
+  .endpointCell {
+    max-width: 350px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .centerCell {
+    text-align: center;
+  }
+
+  input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+  }
+}
+
 // Endpoints table styling
 .endpointsTable {
   margin-top: 20px;