@matdata/yasgui 5.17.0 → 5.19.0

package/package.json

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

package/src/Tab.ts

@@ -436,6 +436,15 @@ export class Tab extends EventEmitter {
   private handleKeyDown = (event: KeyboardEvent) => {
     if (event.defaultPrevented) return;
 
+    // Ctrl+, → backward (less recently used), Ctrl+Alt+, → forward (more recently used)
+    // Ctrl+Tab / Ctrl+Shift+Tab cannot be used: the browser intercepts them before keydown fires
+    const isTabSwitchShortcut = (event.ctrlKey || event.metaKey) && !event.shiftKey && event.key === ",";
+    if (isTabSwitchShortcut) {
+      event.preventDefault();
+      this.yasgui.selectRecentlyUsedTab(event.altKey ? "forward" : "backward");
+      return;
+    }
+
     const saveModalOpen = !!document.querySelector(".saveManagedQueryModalOverlay.open");
     if (!saveModalOpen) {
       const isSaveShortcut =
@@ -1278,6 +1287,7 @@ export class Tab extends EventEmitter {
       createShareableLink: () => this.getShareableLink(),
       // Use global showSnippetsBar setting if it exists
       showSnippetsBar: this.yasgui.config.showSnippetsBar !== false,
+      showMapButton: false,
       requestConfig: () => {
         const processedReqConfig: YasguiRequestConfig = {
           //setting defaults

package/src/TabContextMenu.ts

@@ -3,6 +3,8 @@ import { default as Yasgui, getRandomId } from "./";
 import Tab from "./Tab";
 import { TabListEl } from "./TabElements";
 import { cloneDeep } from "lodash-es";
+import { getWorkspaceBackend } from "./queryManagement/backends/getWorkspaceBackend";
+import type { GitQueryRef, SparqlQueryRef } from "./queryManagement/types";
 import "./TabContextMenu.scss";
 export interface TabContextConfig {
   name: string;
@@ -17,6 +19,7 @@ export default class TabContextMenu {
   private duplicateTabEl!: HTMLElement;
   private saveManagedQueryEl!: HTMLElement;
   private saveAsRqFileEl!: HTMLElement;
+  private copyManagedQueryUriEl!: HTMLElement;
   private closeTabEl!: HTMLElement;
   private closeOtherTabsEl!: HTMLElement;
   private reOpenOldTab!: HTMLElement;
@@ -55,6 +58,8 @@ export default class TabContextMenu {
 
     this.saveAsRqFileEl = this.getMenuItemEl("Save as .rq file");
 
+    this.copyManagedQueryUriEl = this.getMenuItemEl("Copy URI");
+
     this.closeTabEl = this.getMenuItemEl("Close Tab");
 
     this.closeOtherTabsEl = this.getMenuItemEl("Close other tabs");
@@ -67,6 +72,7 @@ export default class TabContextMenu {
     dropDownList.appendChild(this.duplicateTabEl);
     dropDownList.appendChild(this.saveManagedQueryEl);
     dropDownList.appendChild(this.saveAsRqFileEl);
+    dropDownList.appendChild(this.copyManagedQueryUriEl);
     // Add divider
     dropDownList.appendChild(document.createElement("hr"));
     dropDownList.appendChild(this.closeTabEl);
@@ -125,6 +131,42 @@ export default class TabContextMenu {
       this.closeConfigMenu();
     };
 
+    // Copy URI for managed query tabs
+    const meta = tab?.getManagedQueryMetadata();
+    if (meta) {
+      const workspaceConfig = this.yasgui.persistentConfig?.getWorkspaces().find((w) => w.id === meta.workspaceId);
+      if (workspaceConfig) {
+        const queryId =
+          meta.backendType === "git"
+            ? (meta.queryRef as GitQueryRef).path
+            : (meta.queryRef as SparqlQueryRef).managedQueryIri;
+        if (queryId) {
+          const backend = getWorkspaceBackend(workspaceConfig, {
+            persistentConfig: this.yasgui.persistentConfig,
+          });
+          const uri = backend.getQueryUri?.(queryId);
+          if (uri) {
+            this.copyManagedQueryUriEl.onclick = async () => {
+              try {
+                await navigator.clipboard.writeText(uri);
+              } catch {
+                window.prompt("Copy this URI:", uri);
+              }
+              this.closeConfigMenu();
+            };
+          } else {
+            addClass(this.copyManagedQueryUriEl, "disabled");
+          }
+        } else {
+          addClass(this.copyManagedQueryUriEl, "disabled");
+        }
+      } else {
+        addClass(this.copyManagedQueryUriEl, "disabled");
+      }
+    } else {
+      addClass(this.copyManagedQueryUriEl, "disabled");
+    }
+
     // Close tab functionality
     this.closeTabEl.onclick = () => tab?.close();
 

package/src/TabSettingsModal.ts

@@ -5,6 +5,7 @@ import * as ConfigExportImport from "./ConfigExportImport";
 import { VERSION } from "./version";
 import * as OAuth2Utils from "./OAuth2Utils";
 import PersistentConfig from "./PersistentConfig";
+import { deduplicatePrefixes } from "./prefixUtils";
 import { WorkspaceSettingsForm } from "./queryManagement/WorkspaceSettingsForm";
 
 const AcceptOptionsMap: { key: string; value: string }[] = [
@@ -37,6 +38,7 @@ export default class TabSettingsModal {
   private settingsButton!: HTMLButtonElement;
   private themeToggleButton!: HTMLButtonElement;
   private prefixButton!: HTMLButtonElement;
+  private mapButton!: HTMLButtonElement;
   private prefixTextarea!: HTMLTextAreaElement;
   private autoCaptureCheckbox!: HTMLInputElement;
   private hamburgerMenuButton!: HTMLButtonElement;
@@ -88,6 +90,15 @@ export default class TabSettingsModal {
     controlBarEl.appendChild(this.prefixButton);
     this.prefixButton.onclick = () => this.insertPrefixesIntoQuery();
 
+    // Map button
+    this.mapButton = document.createElement("button");
+    this.mapButton.setAttribute("aria-label", "Open map");
+    this.mapButton.title = "Open map";
+    this.mapButton.innerHTML = '<i class="fas fa-map-location-dot"></i>';
+    addClass(this.mapButton, "tabContextButton", "desktopOnly");
+    controlBarEl.appendChild(this.mapButton);
+    this.mapButton.onclick = (event: MouseEvent) => this.openMapWidget(event);
+
     // Hamburger menu button and dropdown (mobile only)
     const hamburgerContainer = document.createElement("div");
     addClass(hamburgerContainer, "hamburgerContainer", "mobileOnly");
@@ -147,6 +158,15 @@ export default class TabSettingsModal {
     };
     this.hamburgerDropdown.appendChild(prefixItem);
 
+    const mapItem = document.createElement("button");
+    addClass(mapItem, "hamburgerMenuItem");
+    mapItem.innerHTML = '<i class="fas fa-map-location-dot"></i><span>Open map</span>';
+    mapItem.onclick = (event) => {
+      this.openMapWidget(event);
+      this.closeHamburgerMenu();
+    };
+    this.hamburgerDropdown.appendChild(mapItem);
+
     // Theme toggle menu item (if enabled)
     if (this.tab.yasgui.config.showThemeToggle) {
       const themeItem = document.createElement("button");
@@ -847,7 +867,12 @@ export default class TabSettingsModal {
 
   private renderEndpointsList(container: HTMLElement) {
     container.innerHTML = "";
-    const configs = this.tab.yasgui.persistentConfig.getEndpointConfigs();
+    const configs = [...this.tab.yasgui.persistentConfig.getEndpointConfigs()];
+    configs.sort((a, b) => {
+      const aKey = (a.label || a.endpoint).toLowerCase();
+      const bKey = (b.label || b.endpoint).toLowerCase();
+      return aKey.localeCompare(bKey);
+    });
 
     // Create table (even if empty, we'll show add form)
     const table = document.createElement("table");
@@ -1687,7 +1712,7 @@ export default class TabSettingsModal {
     const autoCapture = this.autoCaptureCheckbox.checked;
 
     // Parse and deduplicate prefixes
-    const deduplicated = this.deduplicatePrefixes(prefixText);
+    const deduplicated = deduplicatePrefixes(prefixText);
     this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
     this.tab.yasgui.persistentConfig.setAutoCaptureEnabled(autoCapture);
 
@@ -1798,32 +1823,6 @@ export default class TabSettingsModal {
     this.close();
   }
 
-  private deduplicatePrefixes(prefixText: string): string {
-    const lines = prefixText.split("\n");
-    const seen = new Map<string, string>();
-    const result: string[] = [];
-
-    for (const line of lines) {
-      const trimmed = line.trim();
-      if (!trimmed) continue;
-
-      // Extract prefix label from line
-      const match = trimmed.match(/^\s*PREFIX\s+(\w+):\s*<(.+)>\s*$/i);
-      if (match) {
-        const label = match[1].toLowerCase();
-        if (!seen.has(label)) {
-          seen.set(label, trimmed);
-          result.push(trimmed);
-        }
-      } else {
-        // Keep non-prefix lines as-is
-        result.push(trimmed);
-      }
-    }
-
-    return result.join("\n");
-  }
-
   private insertPrefixesIntoQuery() {
     const yasqe = this.tab.getYasqe();
     if (!yasqe) return;
@@ -1866,6 +1865,13 @@ export default class TabSettingsModal {
     yasqe.focus();
   }
 
+  private openMapWidget(event?: MouseEvent) {
+    const yasqe = this.tab.getYasqe();
+    if (!yasqe) return;
+    const anchorPoint = event ? { x: event.clientX, y: event.clientY } : undefined;
+    yasqe.toggleMapWidget(anchorPoint);
+  }
+
   public capturePrefixesFromQuery() {
     const autoCapture = this.tab.yasgui.persistentConfig.getAutoCaptureEnabled();
     if (!autoCapture) return;
@@ -1885,7 +1891,7 @@ export default class TabSettingsModal {
     // Merge with existing prefixes
     const existingPrefixes = this.tab.yasgui.persistentConfig.getPrefixes();
     const combined = existingPrefixes + "\n" + newPrefixLines.join("\n");
-    const deduplicated = this.deduplicatePrefixes(combined);
+    const deduplicated = deduplicatePrefixes(combined);
 
     this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
   }
@@ -2078,6 +2084,19 @@ export default class TabSettingsModal {
           { keys: ["Esc"], description: "Exit fullscreen mode" },
         ],
       },
+      {
+        category: "YASGUI Tabs",
+        shortcuts: [
+          {
+            keys: ["Ctrl+Alt+Tab", "Cmd+Alt+Tab"],
+            description: "Switch to previously used YASGUI tab",
+          },
+          {
+            keys: ["Ctrl+Alt+Shift+Tab", "Cmd+Alt+Shift+Tab"],
+            description: "Switch to next YASGUI tab in recently used order",
+          },
+        ],
+      },
     ];
 
     shortcutsData.forEach((section) => {

package/src/index.ts

@@ -13,6 +13,7 @@ import { addClass, removeClass } from "@matdata/yasgui-utils";
 import GeoPlugin from "yasgui-geo-tg";
 import GraphPlugin from "@matdata/yasgui-graph-plugin";
 import TablePlugin from "@matdata/yasgui-table-plugin";
+import { moveTabIdToFront, removeTabId } from "./tabNavigationHistory";
 import "@matdata/yasgui-graph-plugin/dist/yasgui-graph-plugin.min.css";
 import "@matdata/yasgui-table-plugin/dist/yasgui-table-plugin.min.css";
 import { ThemeManager, Theme } from "./ThemeManager";
@@ -155,6 +156,9 @@ export class Yasgui extends EventEmitter {
   public persistentConfig: PersistentConfig;
   public themeManager: ThemeManager;
   public queryBrowser: QueryBrowser;
+  private recentTabIds: string[] = [];
+  private navigationSnapshot: string[] | null = null;
+  private navigationCursor = 0;
   public static Tab = Tab;
   constructor(parent: HTMLElement, config: PartialConfig) {
     super();
@@ -185,6 +189,9 @@ export class Yasgui extends EventEmitter {
     this.tabPanelsEl = document.createElement("div");
 
     this.queryBrowser = new QueryBrowser(this);
+    this.on("tabClose", (_yasgui, tab) => {
+      this.removeTabFromRecentHistory(tab.getId());
+    });
 
     this.rootEl.appendChild(this.tabElements.drawTabsList());
     this.rootEl.appendChild(this.tabPanelsEl);
@@ -227,6 +234,7 @@ export class Yasgui extends EventEmitter {
       const newTab = this.addTab(true);
       this.persistentConfig.setActive(newTab.getId());
       this.emit("tabChange", this, newTab);
+      this.recordTabInRecentHistory(newTab.getId());
     } else {
       for (const tabId of tabs) {
         this._tabs[tabId] = new Tab(this, this.persistentConfig.getTab(tabId));
@@ -237,6 +245,7 @@ export class Yasgui extends EventEmitter {
       const activeTabId = this.persistentConfig.getActiveId();
       if (activeTabId) {
         this.markTabSelected(activeTabId);
+        this.recordTabInRecentHistory(activeTabId);
         if (executeIdAfterInit && executeIdAfterInit === activeTabId) {
           (this.getTab(activeTabId) as Tab).query().catch(() => {});
         }
@@ -300,6 +309,7 @@ export class Yasgui extends EventEmitter {
     const tab = this.getTab();
     if (tab && tab.getId() !== tabId) {
       if (this.markTabSelected(tabId)) {
+        this.recordTabInRecentHistory(tabId);
         //emit
         this.emit("tabSelect", this, tabId);
         this.persistentConfig.setActive(tabId);
@@ -307,6 +317,45 @@ export class Yasgui extends EventEmitter {
     }
     return tab;
   }
+  private recordTabInRecentHistory(tabId: string) {
+    // Any non-navigation selection commits the navigation and ends navigation mode.
+    this.navigationSnapshot = null;
+    this.recentTabIds = moveTabIdToFront(this.recentTabIds, tabId);
+  }
+  private removeTabFromRecentHistory(tabId: string) {
+    this.recentTabIds = removeTabId(this.recentTabIds, tabId);
+  }
+  public selectRecentlyUsedTab(direction: "backward" | "forward" = "backward"): void {
+    const activeTab = this.getTab();
+    if (!activeTab) return;
+    const activeTabId = activeTab.getId();
+
+    // Initialize (or re-initialize) the navigation snapshot when starting a new navigation
+    // sequence or when the active tab no longer matches the cursor position.
+    // Snapshotting the history order lets repeated presses cycle through all tabs
+    // instead of ping-ponging between the two most-recently-used ones.
+    if (this.navigationSnapshot === null || this.navigationSnapshot[this.navigationCursor] !== activeTabId) {
+      this.navigationSnapshot = [...this.recentTabIds];
+      const activeIdx = this.navigationSnapshot.indexOf(activeTabId);
+      this.navigationCursor = activeIdx >= 0 ? activeIdx : 0;
+    }
+
+    if (direction === "backward") {
+      this.navigationCursor = Math.min(this.navigationCursor + 1, this.navigationSnapshot.length - 1);
+    } else {
+      this.navigationCursor = Math.max(this.navigationCursor - 1, 0);
+    }
+
+    const nextTabId = this.navigationSnapshot[this.navigationCursor];
+    if (!nextTabId || nextTabId === activeTabId) return;
+
+    // Select the tab without updating recentTabIds. The history is committed when the
+    // user performs any non-navigation action that calls recordTabInRecentHistory.
+    if (this.markTabSelected(nextTabId)) {
+      this.emit("tabSelect", this, nextTabId);
+      this.persistentConfig.setActive(nextTabId);
+    }
+  }
   /**
    * Checks if two persistent tab configuration are the same based.
    * It isnt a strict equality, as falsy values (e.g. a header that isnt set in one tabjson) isnt taken into consideration
@@ -417,6 +466,7 @@ export class Yasgui extends EventEmitter {
     if (setActive) {
       this.persistentConfig.setActive(tabId);
       this._tabs[tabId].show();
+      this.recordTabInRecentHistory(tabId);
     }
     return this._tabs[tabId];
   }

package/src/prefixUtils.ts

@@ -0,0 +1,26 @@
+export function deduplicatePrefixes(prefixText: string): string {
+  const lines = prefixText.split("\n");
+  const seen = new Set<string>();
+  const result: string[] = [];
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+
+    // Allow an empty prefix label so the default prefix form `PREFIX : <...>` is
+    // deduplicated together with named prefixes, while keeping the original
+    // word-character restriction for named labels.
+    const match = trimmed.match(/^\s*PREFIX\s+(\w*):\s*<([^>]+)>\s*$/i);
+    if (match) {
+      const label = match[1].toLowerCase();
+      if (!seen.has(label)) {
+        seen.add(label);
+        result.push(trimmed);
+      }
+    } else {
+      result.push(trimmed);
+    }
+  }
+
+  return result.join("\n");
+}

package/src/queryManagement/QueryBrowser.scss

@@ -325,6 +325,91 @@
       white-space: nowrap;
     }
 
+    &__context-menu {
+      position: fixed;
+      z-index: 10001;
+      list-style: none;
+      padding: 4px 0;
+      margin: 0;
+      min-width: 140px;
+      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);
+    }
+
+    &__context-menu-item {
+      padding: 7px 16px;
+      cursor: pointer;
+      white-space: nowrap;
+      color: var(--yasgui-text-primary, #000);
+      font-size: 13px;
+      line-height: 1.4;
+
+      &:hover {
+        background: var(--yasgui-bg-secondary, #f5f5f5);
+        color: var(--yasgui-button-hover, #000);
+      }
+
+      &--danger {
+        color: var(--yasgui-error-color, #c00);
+
+        &:hover {
+          background: var(--yasgui-bg-secondary, #f5f5f5);
+          color: var(--yasgui-error-color, #c00);
+        }
+      }
+    }
+
+    &__rename-input {
+      flex: 1;
+      min-width: 0;
+      font: inherit;
+      font-size: 13px;
+      color: var(--yasgui-text-primary, #000);
+      background: var(--yasgui-bg-primary, white);
+      border: 1px solid var(--yasgui-accent-color, #337ab7);
+      border-radius: 3px;
+      padding: 1px 4px;
+      outline: none;
+      box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.25);
+    }
+
+    &__inline-confirm {
+      flex: 1;
+      font-size: 13px;
+      color: var(--yasgui-text-primary, #000);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &__inline-confirm-btn {
+      appearance: none;
+      background: transparent;
+      border: 1px solid var(--yasgui-border-color, #e0e0e0);
+      border-radius: 3px;
+      padding: 1px 8px;
+      font: inherit;
+      font-size: 12px;
+      cursor: pointer;
+      color: var(--yasgui-text-primary, #000);
+      flex-shrink: 0;
+
+      &:hover {
+        background: var(--yasgui-bg-secondary, #f5f5f5);
+      }
+
+      &--danger {
+        color: var(--yasgui-error-color, #c00);
+        border-color: var(--yasgui-error-color, #c00);
+
+        &:hover {
+          background: rgba(204, 0, 0, 0.08);
+        }
+      }
+    }
+
     &__tree-meta {
       padding: 4px 8px;
       font-size: 13px;