@matdata/yasgui 5.14.0 → 5.15.0

package/package.json

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

package/src/Tab.ts

@@ -17,6 +17,7 @@ import { saveManagedQuery } from "./queryManagement/saveManagedQuery";
 import { getWorkspaceBackend } from "./queryManagement/backends/getWorkspaceBackend";
 import { asWorkspaceBackendError } from "./queryManagement/backends/errors";
 import { normalizeQueryFilename } from "./queryManagement/normalizeQueryFilename";
+import { resolveEndpointUrl } from "./urlUtils";
 
 export interface PersistedJsonYasr extends YasrPersistentConfig {
   responseSummary: Parser.ResponseSummary;
@@ -304,7 +305,7 @@ export class Tab extends EventEmitter {
         name: result.name,
         filename: result.filename,
         queryText: this.getQueryTextForSave(),
-        associatedEndpoint: workspace.type === "sparql" ? this.getEndpoint() : undefined,
+        associatedEndpoint: workspace.type === "sparql" ? resolveEndpointUrl(this.getEndpoint()) : undefined,
         message: result.message,
         expectedVersionTag,
       });
@@ -1445,14 +1446,38 @@ export class Tab extends EventEmitter {
 
     // Check if token is a URI (not a variable)
     // URIs typically have token.type of 'string-2' or might be in angle brackets
-    const tokenString = token.string.trim();
+    let tokenString = token.string.trim();
 
     // Skip if it's a variable (starts with ? or $)
     if (tokenString.startsWith("?") || tokenString.startsWith("$")) return;
 
+    // Handle prefixed names that may be split into multiple tokens by the tokenizer
+    // The tokenizer splits "prefix:localname" into two tokens:
+    // - PNAME_LN_PREFIX (e.g., "bnd:") with type "string-2"
+    // - PNAME_LN_LOCAL (e.g., "_subnetwork_bane_KVGB") with type "string"
+    // We need to combine them to get the full prefixed name
+    if (token.type === "string-2" && tokenString.endsWith(":")) {
+      // This is a prefix token, get the next token for the local name
+      const nextToken = this.yasqe.getTokenAt({ line: pos.line, ch: token.end + 1 });
+      if (nextToken && nextToken.type === "string" && nextToken.start === token.end) {
+        tokenString = `${tokenString}${nextToken.string.trim()}`;
+      }
+    } else if (token.type === "string" && token.start > 0) {
+      // This might be a local name token, check if previous token is a prefix
+      const prevToken = this.yasqe.getTokenAt({ line: pos.line, ch: token.start - 1 });
+      if (
+        prevToken &&
+        prevToken.type === "string-2" &&
+        prevToken.string.trim().endsWith(":") &&
+        prevToken.end === token.start
+      ) {
+        tokenString = `${prevToken.string.trim()}${tokenString}`;
+      }
+    }
+
     // Check if it's a URI - either in angle brackets or a prefixed name
     const isFullUri = tokenString.startsWith("<") && tokenString.endsWith(">");
-    const isPrefixedName = /^[\w-]+:[\w-]+/.test(tokenString);
+    const isPrefixedName = /^[\w-]+:/.test(tokenString);
 
     if (!isFullUri && !isPrefixedName) return;
 
@@ -1467,7 +1492,8 @@ export class Tab extends EventEmitter {
     } else if (isPrefixedName) {
       // Expand prefixed name to full URI
       const prefixes = this.yasqe.getPrefixesFromQuery();
-      const [prefix, localName] = tokenString.split(":");
+      const [prefix, ...localParts] = tokenString.split(":");
+      const localName = localParts.join(":");
       const prefixUri = prefixes[prefix];
       if (prefixUri) {
         uri = prefixUri + localName;

package/src/TabSettingsModal.ts

@@ -39,6 +39,7 @@ export default class TabSettingsModal {
   private prefixButton!: HTMLButtonElement;
   private prefixTextarea!: HTMLTextAreaElement;
   private autoCaptureCheckbox!: HTMLInputElement;
+  private mouseDownOnOverlay = false;
   private handleKeyDown = (e: KeyboardEvent) => {
     if (e.key !== "Escape") return;
     if (!this.modalOverlay.classList.contains("open")) return;
@@ -91,8 +92,21 @@ export default class TabSettingsModal {
     // Modal overlay
     this.modalOverlay = document.createElement("div");
     addClass(this.modalOverlay, "tabSettingsModalOverlay");
-    // Removed: this.modalOverlay.onclick = () => this.close();
-    // Users must explicitly click 'Save' or 'Cancel' to close the modal
+
+    // Track mousedown on overlay to distinguish from text selection that moves outside
+    this.modalOverlay.addEventListener("mousedown", (e) => {
+      if (e.target === this.modalOverlay) {
+        this.mouseDownOnOverlay = true;
+      }
+    });
+
+    // Only close if mousedown also happened on overlay (not during text selection)
+    this.modalOverlay.addEventListener("mouseup", (e) => {
+      if (e.target === this.modalOverlay && this.mouseDownOnOverlay) {
+        this.close();
+      }
+      this.mouseDownOnOverlay = false;
+    });
 
     // Modal content
     this.modalContent = document.createElement("div");
@@ -912,10 +926,27 @@ export default class TabSettingsModal {
     const config = this.tab.yasgui.persistentConfig.getEndpointConfig(endpoint);
     const existingAuth = config?.authentication;
 
+    // Track mousedown for proper modal close behavior
+    let mouseDownOnOverlay = false;
+
     // Create modal overlay
     const authModalOverlay = document.createElement("div");
     addClass(authModalOverlay, "authModalOverlay");
-    authModalOverlay.onclick = () => authModalOverlay.remove();
+
+    // Track mousedown on overlay to distinguish from text selection that moves outside
+    authModalOverlay.addEventListener("mousedown", (e) => {
+      if (e.target === authModalOverlay) {
+        mouseDownOnOverlay = true;
+      }
+    });
+
+    // Only close if mousedown also happened on overlay (not during text selection)
+    authModalOverlay.addEventListener("mouseup", (e) => {
+      if (e.target === authModalOverlay && mouseDownOnOverlay) {
+        authModalOverlay.remove();
+      }
+      mouseDownOnOverlay = false;
+    });
 
     // Create modal content
     const authModal = document.createElement("div");
@@ -1516,6 +1547,7 @@ export default class TabSettingsModal {
   }
 
   public close() {
+    this.mouseDownOnOverlay = false;
     removeClass(this.modalOverlay, "open");
     document.removeEventListener("keydown", this.handleKeyDown);
   }

package/src/queryManagement/SaveManagedQueryModal.ts

@@ -45,6 +45,7 @@ export default class SaveManagedQueryModal {
   private filenameTouched = false;
   private folderPickerOpen = false;
   private folderBrowsePath = "";
+  private mouseDownOnOverlay = false;
 
   private resolve?: (value: SaveManagedQueryModalResult) => void;
   private reject?: (reason?: unknown) => void;
@@ -247,7 +248,22 @@ export default class SaveManagedQueryModal {
 
     this.overlayEl.appendChild(this.modalEl);
 
-    this.overlayEl.addEventListener("click", () => this.cancel());
+    // Track mousedown on overlay to distinguish from text selection that moves outside
+    this.overlayEl.addEventListener("mousedown", (e) => {
+      // Only mark as overlay mousedown if the target is the overlay itself (not modal content)
+      if (e.target === this.overlayEl) {
+        this.mouseDownOnOverlay = true;
+      }
+    });
+
+    // Only close if mousedown also happened on overlay (not during text selection)
+    this.overlayEl.addEventListener("mouseup", (e) => {
+      if (e.target === this.overlayEl && this.mouseDownOnOverlay) {
+        this.cancel();
+      }
+      this.mouseDownOnOverlay = false;
+    });
+
     document.addEventListener("keydown", (e) => {
       if (!this.isOpen()) return;
       if (e.key === "Escape") {
@@ -324,6 +340,7 @@ export default class SaveManagedQueryModal {
   }
 
   private cancel() {
+    this.mouseDownOnOverlay = false;
     this.close();
     this.overlayEl.remove();
     this.reject?.(new Error("cancelled"));
@@ -399,6 +416,7 @@ export default class SaveManagedQueryModal {
       }
     }
 
+    this.mouseDownOnOverlay = false;
     this.close();
     this.overlayEl.remove();
 
@@ -454,6 +472,7 @@ export default class SaveManagedQueryModal {
     this.folderBrowsePath = this.folderPathEl.value.trim();
     this.folderPickerErrorEl.textContent = "";
     this.folderPickerListEl.innerHTML = "";
+    this.mouseDownOnOverlay = false;
 
     document.body.appendChild(this.overlayEl);
     this.open();

package/src/queryManagement/WorkspaceSettingsForm.ts

@@ -27,6 +27,67 @@ export class WorkspaceSettingsForm {
     this.options = options;
   }
 
+  private async fetchExistingWorkspaces(endpoint: string): Promise<string[]> {
+    try {
+      const query = `
+PREFIX yasgui: <https://matdata.eu/ns/yasgui#>
+
+SELECT DISTINCT ?workspace WHERE {
+  ?workspace a yasgui:Workspace .
+}
+ORDER BY ?workspace`;
+
+      // Get authentication for this endpoint
+      const endpointConfig = this.options.persistentConfig.getEndpointConfig(endpoint);
+      const headers: Record<string, string> = {
+        "Content-Type": "application/x-www-form-urlencoded",
+        Accept: "application/sparql-results+json",
+      };
+
+      // Add authentication headers if configured
+      if (endpointConfig?.authentication) {
+        const auth = endpointConfig.authentication;
+        if (auth.type === "basic") {
+          const credentials = btoa(`${auth.username}:${auth.password}`);
+          headers["Authorization"] = `Basic ${credentials}`;
+        } else if (auth.type === "bearer") {
+          headers["Authorization"] = `Bearer ${auth.token}`;
+        } else if (auth.type === "apiKey") {
+          headers[auth.headerName] = auth.apiKey;
+        } else if (auth.type === "oauth2" && auth.accessToken) {
+          headers["Authorization"] = `Bearer ${auth.accessToken}`;
+        }
+      }
+
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers,
+        body: new URLSearchParams({ query }),
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const data = await response.json();
+      const workspaces: string[] = [];
+
+      if (data.results?.bindings) {
+        for (const binding of data.results.bindings) {
+          const workspace = binding.workspace?.value;
+          if (workspace) {
+            workspaces.push(workspace);
+          }
+        }
+      }
+
+      return workspaces;
+    } catch (error) {
+      console.error("Failed to fetch existing workspaces:", error);
+      return [];
+    }
+  }
+
   public render() {
     this.container.innerHTML = "";
 
@@ -234,6 +295,9 @@ export class WorkspaceSettingsForm {
   }
 
   private openWorkspaceConfigModal(input: { mode: "add" } | { mode: "edit"; workspace: WorkspaceConfig }) {
+    // Track mousedown for proper modal close behavior
+    let mouseDownOnOverlay = false;
+
     const overlay = document.createElement("div");
     addClass(overlay, "tabSettingsModalOverlay", "workspaceConfigModalOverlay", "open");
 
@@ -242,6 +306,7 @@ export class WorkspaceSettingsForm {
     modal.onclick = (e) => e.stopPropagation();
 
     const close = () => {
+      mouseDownOnOverlay = false;
       overlay.remove();
       document.removeEventListener("keydown", onKeyDown);
     };
@@ -253,7 +318,20 @@ export class WorkspaceSettingsForm {
     };
     document.addEventListener("keydown", onKeyDown);
 
-    overlay.onclick = () => close();
+    // Track mousedown on overlay to distinguish from text selection that moves outside
+    overlay.addEventListener("mousedown", (e) => {
+      if (e.target === overlay) {
+        mouseDownOnOverlay = true;
+      }
+    });
+
+    // Only close if mousedown also happened on overlay (not during text selection)
+    overlay.addEventListener("mouseup", (e) => {
+      if (e.target === overlay && mouseDownOnOverlay) {
+        close();
+      }
+      mouseDownOnOverlay = false;
+    });
 
     const header = document.createElement("div");
     addClass(header, "modalHeader");
@@ -440,11 +518,133 @@ export class WorkspaceSettingsForm {
       sparqlHelp.textContent =
         "Tip: you can reuse an existing Workspace IRI to point to an already-populated workspace, or choose a new IRI to start a fresh workspace.";
 
-      const workspaceIriInput = document.createElement("input");
-      workspaceIriInput.type = "url";
-      workspaceIriInput.placeholder = "Workspace IRI";
-      workspaceIriInput.value = existing && existing.type === "sparql" ? existing.workspaceIri : "";
-      addClass(workspaceIriInput, "settingsInput");
+      // Workspace IRI selection (dropdown + custom input)
+      const workspaceIriSelect = document.createElement("select");
+      workspaceIriSelect.setAttribute("aria-label", "Workspace IRI");
+      addClass(workspaceIriSelect, "settingsSelect");
+
+      const loadingOption = document.createElement("option");
+      loadingOption.value = "";
+      loadingOption.textContent = "Select endpoint first";
+      workspaceIriSelect.appendChild(loadingOption);
+
+      const workspaceIriCustomInput = document.createElement("input");
+      workspaceIriCustomInput.type = "url";
+      workspaceIriCustomInput.placeholder =
+        "Enter new workspace IRI (e.g., https://example.org/workspace/my-workspace)";
+      workspaceIriCustomInput.style.display = "none";
+      workspaceIriCustomInput.style.marginTop = "5px";
+      addClass(workspaceIriCustomInput, "settingsInput");
+
+      if (existing && existing.type === "sparql") {
+        workspaceIriCustomInput.value = existing.workspaceIri;
+      }
+
+      // Function to populate workspace options
+      const populateWorkspaceOptions = async (endpoint: string) => {
+        // Clear existing options
+        workspaceIriSelect.innerHTML = "";
+
+        // Add loading option
+        const loading = document.createElement("option");
+        loading.value = "";
+        loading.textContent = "Loading workspaces...";
+        workspaceIriSelect.appendChild(loading);
+        workspaceIriSelect.disabled = true;
+
+        try {
+          const workspaces = await this.fetchExistingWorkspaces(endpoint);
+
+          workspaceIriSelect.innerHTML = "";
+          workspaceIriSelect.disabled = false;
+
+          if (workspaces.length > 0) {
+            const selectPlaceholder = document.createElement("option");
+            selectPlaceholder.value = "";
+            selectPlaceholder.textContent = "Select existing workspace";
+            workspaceIriSelect.appendChild(selectPlaceholder);
+
+            for (const workspace of workspaces) {
+              const option = document.createElement("option");
+              option.value = workspace;
+              option.textContent = workspace;
+              workspaceIriSelect.appendChild(option);
+            }
+          } else {
+            const noWorkspaces = document.createElement("option");
+            noWorkspaces.value = "";
+            noWorkspaces.textContent = "No existing workspaces found";
+            workspaceIriSelect.appendChild(noWorkspaces);
+          }
+
+          // Add custom option
+          const customOption = document.createElement("option");
+          customOption.value = "__custom__";
+          customOption.textContent = "➕ Enter new workspace IRI";
+          workspaceIriSelect.appendChild(customOption);
+
+          // Set current value if editing existing
+          if (existing && existing.type === "sparql") {
+            const existingIri = existing.workspaceIri;
+            const matchingOption = workspaces.find((w) => w === existingIri);
+            if (matchingOption) {
+              workspaceIriSelect.value = existingIri;
+            } else {
+              workspaceIriSelect.value = "__custom__";
+              workspaceIriCustomInput.style.display = "";
+              workspaceIriCustomInput.value = existingIri;
+            }
+          }
+        } catch (error) {
+          workspaceIriSelect.innerHTML = "";
+          workspaceIriSelect.disabled = false;
+
+          const errorOption = document.createElement("option");
+          errorOption.value = "";
+          errorOption.textContent = "Failed to load workspaces";
+          workspaceIriSelect.appendChild(errorOption);
+
+          const customOption = document.createElement("option");
+          customOption.value = "__custom__";
+          customOption.textContent = "➕ Enter new workspace IRI";
+          workspaceIriSelect.appendChild(customOption);
+        }
+      };
+
+      // Handle workspace selection change
+      workspaceIriSelect.onchange = () => {
+        if (workspaceIriSelect.value === "__custom__") {
+          workspaceIriCustomInput.style.display = "";
+          workspaceIriCustomInput.focus();
+        } else {
+          workspaceIriCustomInput.style.display = "none";
+        }
+      };
+
+      // Handle endpoint change
+      endpointSelect.onchange = () => {
+        const selectedEndpoint = endpointSelect.value.trim();
+        if (selectedEndpoint) {
+          void populateWorkspaceOptions(selectedEndpoint);
+        } else {
+          workspaceIriSelect.innerHTML = "";
+          const placeholder = document.createElement("option");
+          placeholder.value = "";
+          placeholder.textContent = "Select endpoint first";
+          workspaceIriSelect.appendChild(placeholder);
+        }
+      };
+
+      // Initial load if endpoint is already selected
+      const initialEndpoint = endpointSelect.value.trim();
+      if (initialEndpoint) {
+        void populateWorkspaceOptions(initialEndpoint);
+      }
+
+      // Wrapper for workspace IRI selection
+      const workspaceIriWrapper = document.createElement("div");
+      workspaceIriWrapper.appendChild(workspaceIriSelect);
+      workspaceIriWrapper.appendChild(workspaceIriCustomInput);
 
       const defaultGraphInput = document.createElement("input");
       defaultGraphInput.type = "url";
@@ -454,17 +654,24 @@ export class WorkspaceSettingsForm {
 
       dynamic.appendChild(this.wrapField("SPARQL endpoint", endpointSelect));
       dynamic.appendChild(sparqlHelp);
-      dynamic.appendChild(this.wrapField("Workspace IRI", workspaceIriInput));
+      dynamic.appendChild(this.wrapField("Workspace IRI", workspaceIriWrapper));
       dynamic.appendChild(this.wrapField("Default graph", defaultGraphInput));
 
       (dynamic as any).__getConfig = (): WorkspaceConfig => {
+        let workspaceIri = "";
+        if (workspaceIriSelect.value === "__custom__") {
+          workspaceIri = workspaceIriCustomInput.value.trim();
+        } else {
+          workspaceIri = workspaceIriSelect.value.trim();
+        }
+
         return {
           id: existing?.id || newWorkspaceId(),
           type: "sparql",
           label: labelInput.value.trim(),
           description: descriptionInput.value.trim() || undefined,
           endpoint: endpointSelect.value.trim(),
-          workspaceIri: workspaceIriInput.value.trim(),
+          workspaceIri,
           defaultGraph: defaultGraphInput.value.trim() || undefined,
         };
       };

package/src/urlUtils.ts

@@ -0,0 +1,40 @@
+/**
+ * Converts a relative or absolute URL to a fully qualified URL with protocol and host.
+ * Uses the current page's protocol and host for relative URLs.
+ *
+ * @param url - The URL to resolve (can be relative like "/sparql", or absolute like "http://example.com/sparql")
+ * @returns The fully qualified URL with protocol and host
+ *
+ * @example
+ * // On page https://example.com/yasgui/
+ * resolveEndpointUrl("/sparql") // returns "https://example.com/sparql"
+ * resolveEndpointUrl("sparql") // returns "https://example.com/yasgui/sparql"
+ * resolveEndpointUrl("http://other.com/sparql") // returns "http://other.com/sparql"
+ */
+export function resolveEndpointUrl(url: string): string {
+  if (!url) return url;
+
+  // If URL already has a protocol (http: or https:), return as-is
+  if (url.startsWith("http://") || url.startsWith("https://")) {
+    return url;
+  }
+
+  // Build the base URL using current page's protocol and host
+  let fullUrl = `${window.location.protocol}//${window.location.host}`;
+
+  if (url.startsWith("/")) {
+    // Absolute path (starts with /)
+    fullUrl += url;
+  } else {
+    // Relative path - join with current page's directory
+    let currentDirectory = window.location.pathname;
+    // If pathname does not end with "/", treat it as a file and use its directory
+    if (!currentDirectory.endsWith("/")) {
+      const lastSlashIndex = currentDirectory.lastIndexOf("/");
+      currentDirectory = lastSlashIndex >= 0 ? currentDirectory.substring(0, lastSlashIndex + 1) : "/";
+    }
+    fullUrl += currentDirectory + url;
+  }
+
+  return fullUrl;
+}

package/src/version.ts

@@ -1,3 +1,3 @@
 // Version information for YASGUI
 // This file is auto-generated during build - do not edit manually
-export const VERSION = "5.14.0";
+export const VERSION = "5.15.0";