@matdata/yasgui 5.15.0 → 5.16.0

package/package.json

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

package/src/Tab.ts

@@ -175,6 +175,42 @@ export class Tab extends EventEmitter {
     return this.persistentJson.yasqe.value;
   }
 
+  public async downloadAsRqFile() {
+    const query = this.getQueryTextForSave();
+    const tabName = this.name() || "query";
+    const filename = tabName.endsWith(".rq") || tabName.endsWith(".sparql") ? tabName : `${tabName}.rq`;
+    const blob = new Blob([query], { type: "application/sparql-query" });
+
+    // Use File System Access API if available so the user can choose the save location
+    if ("showSaveFilePicker" in window) {
+      try {
+        const showSaveFilePicker = (
+          window as Window & { showSaveFilePicker: (...args: unknown[]) => Promise<FileSystemFileHandle> }
+        ).showSaveFilePicker;
+        const fileHandle = await showSaveFilePicker({
+          suggestedName: filename,
+          types: [{ description: "SPARQL Query", accept: { "application/sparql-query": [".rq", ".sparql"] } }],
+        });
+        const writable = await fileHandle.createWritable();
+        await writable.write(blob);
+        await writable.close();
+        return;
+      } catch (e: any) {
+        // User cancelled the picker – abort silently
+        if (e?.name === "AbortError") return;
+        // Other errors fall through to the legacy download below
+      }
+    }
+
+    // Fallback for browsers without File System Access API
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
   public async saveManagedQueryOrSaveAsManagedQuery(): Promise<void> {
     const meta = this.getManagedQueryMetadata();
     if (!meta) {
@@ -535,7 +571,7 @@ export class Tab extends EventEmitter {
     if (!this.controlBarEl) return;
 
     this.orientationToggleButton = document.createElement("button");
-    this.orientationToggleButton.className = "tabContextButton orientationToggle";
+    this.orientationToggleButton.className = "tabContextButton orientationToggle desktopOnly";
     this.orientationToggleButton.setAttribute("aria-label", "Toggle layout orientation");
     this.orientationToggleButton.title = "Toggle layout orientation";
 
@@ -615,6 +651,10 @@ export class Tab extends EventEmitter {
     return this.yasr;
   }
 
+  public getCurrentOrientation() {
+    return this.currentOrientation;
+  }
+
   private initTabSettingsMenu() {
     if (!this.controlBarEl) throw new Error("Need to initialize wrapper elements before drawing tab settings");
     this.settingsModal = new TabSettingsModal(this, this.controlBarEl);
@@ -1302,6 +1342,11 @@ export class Tab extends EventEmitter {
       void this.saveManagedQueryOrSaveAsManagedQuery();
     });
 
+    // Hook up download as .rq file
+    this.yasqe.on("downloadRqFile", () => {
+      void this.downloadAsRqFile();
+    });
+
     // Show/hide save button based on workspace configuration
     this.updateSaveButtonVisibility();
 
@@ -1627,6 +1672,13 @@ WHERE {
         // Add default renderers to the end, to give our custom ones priority.
         ...(Yasr.defaults.errorRenderers || []),
       ],
+      executeQuery: async (query: string, options?: { acceptHeader?: string }) => {
+        if (!this.yasqe) throw new Error("No YASQE instance available");
+        return Yasqe.Sparql.executeQuery(this.yasqe, undefined, {
+          customQuery: query,
+          customAccept: options?.acceptHeader,
+        });
+      },
     };
     // Allow getDownloadFilName to be overwritten by the global config
     if (yasrConf.getDownloadFileName === undefined) {

package/src/TabContextMenu.ts

@@ -14,8 +14,9 @@ export default class TabContextMenu {
   private contextEl!: HTMLElement;
   private newTabEl!: HTMLElement;
   private renameTabEl!: HTMLElement;
-  private copyTabEl!: HTMLElement;
+  private duplicateTabEl!: HTMLElement;
   private saveManagedQueryEl!: HTMLElement;
+  private saveAsRqFileEl!: HTMLElement;
   private closeTabEl!: HTMLElement;
   private closeOtherTabsEl!: HTMLElement;
   private reOpenOldTab!: HTMLElement;
@@ -48,10 +49,12 @@ export default class TabContextMenu {
 
     this.renameTabEl = this.getMenuItemEl("Rename Tab");
 
-    this.copyTabEl = this.getMenuItemEl("Copy Tab");
+    this.duplicateTabEl = this.getMenuItemEl("Duplicate Tab");
 
     this.saveManagedQueryEl = this.getMenuItemEl("Save as managed query");
 
+    this.saveAsRqFileEl = this.getMenuItemEl("Save as .rq file");
+
     this.closeTabEl = this.getMenuItemEl("Close Tab");
 
     this.closeOtherTabsEl = this.getMenuItemEl("Close other tabs");
@@ -61,8 +64,9 @@ export default class TabContextMenu {
     // Add items to list
     dropDownList.appendChild(this.newTabEl);
     dropDownList.appendChild(this.renameTabEl);
-    dropDownList.appendChild(this.copyTabEl);
+    dropDownList.appendChild(this.duplicateTabEl);
     dropDownList.appendChild(this.saveManagedQueryEl);
+    dropDownList.appendChild(this.saveAsRqFileEl);
     // Add divider
     dropDownList.appendChild(document.createElement("hr"));
     dropDownList.appendChild(this.closeTabEl);
@@ -101,8 +105,8 @@ export default class TabContextMenu {
     // Set rename functionality
     this.renameTabEl.onclick = () => currentTabEl.startRename();
 
-    // Copy tab functionality`
-    this.copyTabEl.onclick = () => {
+    // Duplicate tab functionality
+    this.duplicateTabEl.onclick = () => {
       if (!tab) return;
       const config = cloneDeep(tab.getPersistedJson());
       config.id = getRandomId();
@@ -115,6 +119,12 @@ export default class TabContextMenu {
       this.closeConfigMenu();
     };
 
+    this.saveAsRqFileEl.onclick = () => {
+      if (!tab) return;
+      tab.downloadAsRqFile();
+      this.closeConfigMenu();
+    };
+
     // Close tab functionality
     this.closeTabEl.onclick = () => tab?.close();
 

package/src/TabElements.scss

@@ -94,6 +94,10 @@ $minTabHeight: 35px;
       position: relative;
       $activeColor: #337ab7;
       $hoverColor: color.adjust($activeColor, $lightness: 30%);
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
 
       // Distinguish managed-query tabs from legacy tabs via background.
       // Legacy tabs keep their current styling.
@@ -190,6 +194,19 @@ $minTabHeight: 35px;
         padding: 0px 24px 0px 30px;
         white-space: nowrap;
         overflow: hidden;
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -webkit-user-drag: none;
+
+        span {
+          user-select: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          pointer-events: none;
+        }
 
         &:hover {
           border-bottom-color: $hoverColor;

package/src/TabElements.ts

@@ -107,7 +107,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
+    // Note: draggable attribute removed - CSS user-select:none prevents text selection during drag
     tabLinkEl.addEventListener("blur", () => {
       if (!this.tabEl) return;
       if (this.tabEl.classList.contains("active")) {
@@ -133,6 +133,17 @@ export class TabListEl {
       this.yasgui.selectTabId(this.tabId);
     });
 
+    // Prevent anchor default drag behavior that interferes with SortableJS in some browsers
+    tabLinkEl.addEventListener("dragstart", (e) => {
+      e.preventDefault();
+    });
+    tabLinkEl.addEventListener("mousedown", (e) => {
+      // Only prevent default on middle/right click to avoid navigation
+      if (e.button !== 0) {
+        e.preventDefault();
+      }
+    });
+
     //tab name
     this.nameEl = document.createElement("span");
     this.nameEl.textContent = name;
@@ -315,7 +326,7 @@ export class TabList {
     queryBrowserButton.className = "queryBrowserToggle";
     queryBrowserButton.setAttribute("aria-label", "Open query browser");
     queryBrowserButton.title = "Open query browser";
-    queryBrowserButton.innerHTML = '<i class="fas fa-bars"></i>';
+    queryBrowserButton.innerHTML = '<i class="fa-regular fa-file-lines"></i>';
     queryBrowserButton.addEventListener("click", () => {
       this.yasgui.queryBrowser.toggle(queryBrowserButton);
     });
@@ -326,12 +337,15 @@ export class TabList {
     sortablejs.create(this._tabsListEl, {
       group: "tabList",
       animation: 100,
+      draggable: ".tab",
+      forceFallback: true,
+      fallbackTolerance: 3,
       onUpdate: (_ev: any) => {
         const tabs = this.deriveTabOrderFromEls();
         this.yasgui.emit("tabOrderChanged", this.yasgui, tabs);
         this.yasgui.persistentConfig.setTabOrder(tabs);
       },
-      filter: ".queryBrowserToggle, .addTab, input, .renaming",
+      filter: ".queryBrowserToggle, .addTab, input, .renaming, .closeTab",
       preventOnFilter: false,
       onMove: (ev: any, _origEv: any) => {
         return hasClass(ev.related, "tab");

package/src/TabSettingsModal.scss

@@ -1251,3 +1251,76 @@
     transform: translateY(1px);
   }
 }
+
+// Hamburger menu styles
+.hamburgerContainer {
+  position: relative;
+  display: none; // Hidden by default (desktop)
+
+  @media (max-width: 768px) {
+    display: flex; // Show on mobile
+  }
+}
+
+.hamburgerMenuButton {
+  &.active {
+    color: var(--yasgui-accent-color, #337ab7);
+  }
+}
+
+.hamburgerDropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: var(--yasgui-bg-primary, white);
+  border: 1px solid var(--yasgui-border-color, #e0e0e0);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 200px;
+  z-index: 1000;
+  margin-top: 5px;
+  overflow: hidden;
+}
+
+.hamburgerMenuItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 16px;
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--yasgui-border-color, #f0f0f0);
+  text-align: left;
+  cursor: pointer;
+  color: var(--yasgui-text-primary, #333);
+  transition: background-color 0.2s;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: var(--yasgui-bg-secondary, #f7f7f7);
+  }
+
+  i {
+    font-size: 16px;
+    width: 20px;
+    text-align: center;
+    color: var(--yasgui-button-text, #505050);
+  }
+
+  span {
+    flex: 1;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}
+
+// Responsive visibility classes
+.desktopOnly {
+  @media (max-width: 768px) {
+    display: none !important;
+  }
+}

package/src/TabSettingsModal.ts

@@ -39,6 +39,9 @@ export default class TabSettingsModal {
   private prefixButton!: HTMLButtonElement;
   private prefixTextarea!: HTMLTextAreaElement;
   private autoCaptureCheckbox!: HTMLInputElement;
+  private hamburgerMenuButton!: HTMLButtonElement;
+  private hamburgerDropdown!: HTMLElement;
+  private isHamburgerOpen = false;
   private mouseDownOnOverlay = false;
   private handleKeyDown = (e: KeyboardEvent) => {
     if (e.key !== "Escape") return;
@@ -55,7 +58,7 @@ export default class TabSettingsModal {
   private init(controlBarEl: HTMLElement) {
     // Settings button
     this.settingsButton = document.createElement("button");
-    addClass(this.settingsButton, "tabContextButton");
+    addClass(this.settingsButton, "tabContextButton", "desktopOnly");
     this.settingsButton.setAttribute("aria-label", "Settings");
     this.settingsButton.title = "Settings";
     this.settingsButton.innerHTML = '<i class="fas fa-cog"></i>';
@@ -65,7 +68,7 @@ export default class TabSettingsModal {
     // Theme toggle button (if enabled)
     if (this.tab.yasgui.config.showThemeToggle) {
       this.themeToggleButton = document.createElement("button");
-      addClass(this.themeToggleButton, "tabContextButton", "themeToggle");
+      addClass(this.themeToggleButton, "tabContextButton", "themeToggle", "desktopOnly");
       this.themeToggleButton.setAttribute("aria-label", "Toggle between light and dark theme");
       this.themeToggleButton.title = "Toggle theme";
       this.themeToggleButton.innerHTML = this.getThemeToggleIcon();
@@ -81,13 +84,124 @@ export default class TabSettingsModal {
     this.prefixButton.setAttribute("aria-label", "Insert Prefixes");
     this.prefixButton.title = "Insert saved prefixes into query";
     this.prefixButton.innerHTML = '<i class="fas fa-arrow-up-right-from-square"></i>';
-    addClass(this.prefixButton, "tabContextButton", "prefixButton");
+    addClass(this.prefixButton, "tabContextButton", "prefixButton", "desktopOnly");
     controlBarEl.appendChild(this.prefixButton);
     this.prefixButton.onclick = () => this.insertPrefixesIntoQuery();
 
+    // Hamburger menu button and dropdown (mobile only)
+    const hamburgerContainer = document.createElement("div");
+    addClass(hamburgerContainer, "hamburgerContainer", "mobileOnly");
+
+    this.hamburgerMenuButton = document.createElement("button");
+    addClass(this.hamburgerMenuButton, "tabContextButton", "hamburgerMenuButton");
+    this.hamburgerMenuButton.setAttribute("aria-label", "Menu");
+    this.hamburgerMenuButton.title = "Open menu";
+    this.hamburgerMenuButton.innerHTML = '<i class="fas fa-bars"></i>';
+    this.hamburgerMenuButton.onclick = (e) => {
+      e.stopPropagation();
+      this.toggleHamburgerMenu();
+    };
+    hamburgerContainer.appendChild(this.hamburgerMenuButton);
+
+    // Create hamburger dropdown menu
+    this.createHamburgerDropdown(hamburgerContainer);
+
+    controlBarEl.appendChild(hamburgerContainer);
+
+    // Close hamburger menu when clicking outside
+    document.addEventListener("click", (e) => {
+      if (
+        this.isHamburgerOpen &&
+        !this.hamburgerDropdown.contains(e.target as Node) &&
+        e.target !== this.hamburgerMenuButton
+      ) {
+        this.closeHamburgerMenu();
+      }
+    });
+
     this.createModal();
   }
 
+  private createHamburgerDropdown(hamburgerContainer: HTMLElement) {
+    this.hamburgerDropdown = document.createElement("div");
+    addClass(this.hamburgerDropdown, "hamburgerDropdown");
+    this.hamburgerDropdown.style.display = "none";
+
+    // Settings menu item
+    const settingsItem = document.createElement("button");
+    addClass(settingsItem, "hamburgerMenuItem");
+    settingsItem.innerHTML = '<i class="fas fa-cog"></i><span>Settings</span>';
+    settingsItem.onclick = () => {
+      this.open();
+      this.closeHamburgerMenu();
+    };
+    this.hamburgerDropdown.appendChild(settingsItem);
+
+    // Prefix menu item
+    const prefixItem = document.createElement("button");
+    addClass(prefixItem, "hamburgerMenuItem");
+    prefixItem.innerHTML = '<i class="fas fa-arrow-up-right-from-square"></i><span>Insert Prefixes</span>';
+    prefixItem.onclick = () => {
+      this.insertPrefixesIntoQuery();
+      this.closeHamburgerMenu();
+    };
+    this.hamburgerDropdown.appendChild(prefixItem);
+
+    // Theme toggle menu item (if enabled)
+    if (this.tab.yasgui.config.showThemeToggle) {
+      const themeItem = document.createElement("button");
+      addClass(themeItem, "hamburgerMenuItem", "themeMenuItem");
+      themeItem.innerHTML = this.getThemeToggleIcon() + "<span>Toggle Theme</span>";
+      themeItem.onclick = () => {
+        this.tab.yasgui.toggleTheme();
+        themeItem.innerHTML = this.getThemeToggleIcon() + "<span>Toggle Theme</span>";
+        // Keep menu open for theme toggle so user can see the change
+      };
+      this.hamburgerDropdown.appendChild(themeItem);
+    }
+
+    // Layout orientation menu item
+    const layoutItem = document.createElement("button");
+    addClass(layoutItem, "hamburgerMenuItem", "layoutMenuItem");
+    this.updateLayoutMenuItemContent(layoutItem);
+    layoutItem.onclick = () => {
+      this.tab.toggleOrientation();
+      this.updateLayoutMenuItemContent(layoutItem);
+      // Keep menu open for layout toggle so user can see the change
+    };
+    this.hamburgerDropdown.appendChild(layoutItem);
+
+    hamburgerContainer.appendChild(this.hamburgerDropdown);
+  }
+
+  private updateLayoutMenuItemContent(layoutItem: HTMLButtonElement) {
+    const orientation = this.tab.getCurrentOrientation();
+    const icon =
+      orientation === "vertical" ? '<i class="fas fa-grip-lines-vertical"></i>' : '<i class="fas fa-grip-lines"></i>';
+    const label = orientation === "vertical" ? "Horizontal Layout" : "Vertical Layout";
+    layoutItem.innerHTML = icon + "<span>" + label + "</span>";
+  }
+
+  private toggleHamburgerMenu() {
+    if (this.isHamburgerOpen) {
+      this.closeHamburgerMenu();
+    } else {
+      this.openHamburgerMenu();
+    }
+  }
+
+  private openHamburgerMenu() {
+    this.isHamburgerOpen = true;
+    this.hamburgerDropdown.style.display = "block";
+    addClass(this.hamburgerMenuButton, "active");
+  }
+
+  private closeHamburgerMenu() {
+    this.isHamburgerOpen = false;
+    this.hamburgerDropdown.style.display = "none";
+    removeClass(this.hamburgerMenuButton, "active");
+  }
+
   private createModal() {
     // Modal overlay
     this.modalOverlay = document.createElement("div");

package/src/endpointSelect.scss

@@ -99,28 +99,6 @@
     }
   }
 
-  .clearEndpointBtn {
-    border: 1px solid #d1d1d1;
-    background-color: #d1d1d1;
-    color: #505050;
-    border-radius: 3px;
-    cursor: pointer;
-
-    padding: 4px 8px;
-    margin: 4px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    opacity: 1;
-    transition: opacity ease-in 200ms;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-
   .endpointButtonsContainer {
     display: flex;
     align-items: center;

package/src/endpointSelect.ts

@@ -92,7 +92,7 @@ export class EndpointSelect extends EventEmitter {
     // Create clear button
     const clearBtn = document.createElement("button");
     clearBtn.title = "Clear endpoint";
-    addClass(clearBtn, "clearEndpointBtn");
+    addClass(clearBtn, "tabContextButton");
     clearBtn.innerText = "✖";
     clearBtn.addEventListener("click", () => {
       this.inputField.value = "";

package/src/queryManagement/QueryBrowser.ts

@@ -8,6 +8,7 @@ import { getEndpointToAutoSwitch } from "./openManagedQuery";
 import { hashQueryText } from "./textHash";
 import type { BackendType, VersionRef, ManagedTabMetadata } from "./types";
 import { normalizeQueryFilename } from "./normalizeQueryFilename";
+import SaveManagedQueryModal from "./SaveManagedQueryModal";
 
 import "./QueryBrowser.scss";
 
@@ -47,6 +48,7 @@ export default class QueryBrowser {
   private lastRenderedSignature: string | undefined;
 
   private lastPointerPos: { x: number; y: number } | undefined;
+  private folderPickerModal?: SaveManagedQueryModal;
 
   private entrySignature(entry: FolderEntry): string {
     const parent = entry.parentId || "";
@@ -712,6 +714,76 @@ export default class QueryBrowser {
       actions.appendChild(renameBtn);
     }
 
+    if (backend.moveQuery) {
+      const moveBtn = document.createElement("button");
+      moveBtn.type = "button";
+      addClass(moveBtn, "yasgui-query-browser__action");
+      moveBtn.textContent = "Move";
+      moveBtn.setAttribute("aria-label", `Move ${entry.label} to a different folder`);
+      moveBtn.addEventListener("click", async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const currentFolderPath = entry.parentId || "";
+        if (!this.folderPickerModal) this.folderPickerModal = new SaveManagedQueryModal(this.yasgui);
+        const newFolderPath = await this.folderPickerModal.showFolderPickerOnly(
+          this.selectedWorkspaceId!,
+          currentFolderPath,
+        );
+        if (newFolderPath === undefined) return;
+        if (newFolderPath === currentFolderPath) return;
+
+        // Show loading state
+        const originalText = moveBtn.textContent;
+        moveBtn.disabled = true;
+        moveBtn.textContent = "Moving…";
+        addClass(moveBtn, "loading");
+
+        try {
+          const newQueryId = await backend.moveQuery!(entry.id, newFolderPath);
+
+          // For git workspaces: update any already-open managed tabs referencing the old path.
+          if (backend.type === "git" && newQueryId !== entry.id) {
+            for (const tab of Object.values(this.yasgui._tabs)) {
+              const meta = (tab as any).getManagedQueryMetadata?.() as ManagedTabMetadata | undefined;
+              if (!meta) continue;
+              if (meta.backendType !== "git") continue;
+              if (meta.workspaceId !== this.selectedWorkspaceId) continue;
+              const currentPath = (meta.queryRef as any)?.path as string | undefined;
+              if (currentPath !== entry.id) continue;
+
+              try {
+                const read = await backend.readQuery(newQueryId);
+                const lastSavedTextHash = hashQueryText(read.queryText);
+                const lastSavedVersionRef = this.versionRefFromVersionTag("git", read.versionTag);
+
+                (tab as any).setManagedQueryMetadata?.({
+                  ...meta,
+                  queryRef: { ...(meta.queryRef as any), path: newQueryId },
+                  lastSavedTextHash,
+                  lastSavedVersionRef,
+                });
+              } catch {
+                // Best-effort: if refreshing metadata fails, the Query Browser still reflects the move.
+              }
+            }
+          }
+
+          this.queryPreviewById.delete(entry.id);
+          this.folderEntriesById.clear();
+          this.invalidateRenderCache();
+          await this.refresh();
+        } catch (err) {
+          // Restore button state on error
+          moveBtn.disabled = false;
+          moveBtn.textContent = originalText || "Move";
+          removeClass(moveBtn, "loading");
+          window.alert(asWorkspaceBackendError(err).message);
+        }
+      });
+      actions.appendChild(moveBtn);
+    }
+
     if (backend.deleteQuery) {
       const deleteBtn = document.createElement("button");
       deleteBtn.type = "button";