@matdata/yasgui 5.16.0 → 5.18.0

package/src/queryManagement/QueryHistoryModal.scss

@@ -0,0 +1,239 @@
+.queryHistoryModalOverlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--yasgui-overlay-bg, rgba(0, 0, 0, 0.5));
+  z-index: 10000;
+  align-items: center;
+  justify-content: center;
+
+  &.open {
+    display: flex;
+  }
+}
+
+.queryHistoryModal {
+  background: var(--yasgui-bg-primary, white);
+  border-radius: 8px;
+  width: 860px;
+  max-width: 95vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+
+.queryHistoryModalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid var(--yasgui-border-color, #e0e0e0);
+  flex-shrink: 0;
+
+  h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--yasgui-text-primary, #000);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .closeButton {
+    background: none;
+    border: none;
+    font-size: 28px;
+    line-height: 1;
+    cursor: pointer;
+    color: var(--yasgui-text-secondary, #666);
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+
+    &:hover {
+      color: var(--yasgui-text-primary, #333);
+    }
+  }
+}
+
+.queryHistoryModalBody {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.queryHistoryVersionsPanel {
+  width: 280px;
+  min-width: 200px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--yasgui-border-color, #e0e0e0);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.queryHistoryPreviewPanel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.queryHistoryPanelTitle {
+  padding: 10px 12px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--yasgui-text-secondary, #666);
+  border-bottom: 1px solid var(--yasgui-border-color, #e0e0e0);
+  flex-shrink: 0;
+}
+
+.queryHistoryLoading,
+.queryHistoryError,
+.queryHistoryEmpty {
+  padding: 12px;
+  font-size: 13px;
+  color: var(--yasgui-text-secondary, #666);
+}
+
+.queryHistoryError {
+  color: var(--yasgui-error-color, #c00);
+}
+
+.queryHistoryVersionsList {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+}
+
+.queryHistoryVersionItem {
+  padding: 10px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--yasgui-border-color, #e0e0e0);
+  outline: none;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: var(--yasgui-bg-secondary, #f5f5f5);
+  }
+
+  &:focus-visible {
+    background: var(--yasgui-bg-secondary, #f5f5f5);
+    box-shadow: inset 0 0 0 2px var(--yasgui-accent-color, #337ab7);
+  }
+
+  &--selected {
+    background: var(--yasgui-accent-bg, #e8f0fe);
+    border-left: 3px solid var(--yasgui-accent-color, #337ab7);
+    padding-left: 9px;
+
+    &:hover {
+      background: var(--yasgui-accent-bg, #e8f0fe);
+    }
+  }
+}
+
+.queryHistoryVersionDate {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--yasgui-text-primary, #000);
+}
+
+.queryHistoryVersionMeta {
+  font-size: 12px;
+  color: var(--yasgui-text-secondary, #666);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.queryHistoryVersionMessage {
+  font-size: 12px;
+  color: var(--yasgui-text-secondary, #555);
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-style: italic;
+}
+
+.queryHistoryPreviewEmpty {
+  padding: 24px 16px;
+  font-size: 13px;
+  color: var(--yasgui-text-secondary, #999);
+  text-align: center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.queryHistoryPreviewContent {
+  flex: 1;
+  margin: 0;
+  padding: 12px 16px;
+  overflow: auto;
+  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--yasgui-text-primary, #000);
+  background: var(--yasgui-bg-secondary, #f7f7f7);
+  white-space: pre-wrap;
+  word-break: break-word;
+  border-top: 1px solid var(--yasgui-border-color, #e0e0e0);
+}
+
+.queryHistoryModalFooter {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--yasgui-border-color, #e0e0e0);
+  flex-shrink: 0;
+
+  button {
+    padding: 8px 16px;
+    border-radius: 4px;
+    border: 1px solid var(--yasgui-border-color, #e0e0e0);
+    background: var(--yasgui-bg-primary, white);
+    color: var(--yasgui-text-primary, #000);
+    font-size: 14px;
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      background: var(--yasgui-bg-secondary, #f5f5f5);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    &.primary {
+      background: var(--yasgui-accent-color, #337ab7);
+      color: #fff;
+      border-color: var(--yasgui-accent-color, #337ab7);
+      font-weight: 600;
+
+      &:hover:not(:disabled) {
+        background: var(--yasgui-accent-color-hover, #2a6496);
+        border-color: var(--yasgui-accent-color-hover, #2a6496);
+      }
+    }
+  }
+}

package/src/queryManagement/QueryHistoryModal.ts

@@ -0,0 +1,346 @@
+import type Yasgui from "../index";
+import { addClass, removeClass } from "@matdata/yasgui-utils";
+import { getWorkspaceBackend } from "./backends/getWorkspaceBackend";
+import type { BackendType, ManagedTabMetadata, ReadResult, VersionInfo, VersionRef } from "./types";
+import { hashQueryText } from "./textHash";
+import { getEndpointToAutoSwitch } from "./openManagedQuery";
+import { asWorkspaceBackendError } from "./backends/errors";
+
+import "./QueryHistoryModal.scss";
+
+export default class QueryHistoryModal {
+  private yasgui: Yasgui;
+
+  private overlayEl: HTMLDivElement;
+  private modalEl: HTMLDivElement;
+  private titleEl: HTMLHeadingElement;
+  private versionsListEl: HTMLDivElement;
+  private loadingEl: HTMLDivElement;
+  private errorEl: HTMLDivElement;
+  private previewEmptyEl: HTMLDivElement;
+  private previewContentEl: HTMLPreElement;
+  private openTabBtn: HTMLButtonElement;
+
+  private workspaceId?: string;
+  private backend?: ReturnType<typeof getWorkspaceBackend>;
+  private backendType?: BackendType;
+  private queryId?: string;
+  private queryLabel?: string;
+
+  private selectedVersionId?: string;
+  private selectedVersionRead?: ReadResult;
+
+  private mouseDownOnOverlay = false;
+  private resolve?: () => void;
+
+  constructor(yasgui: Yasgui) {
+    this.yasgui = yasgui;
+
+    this.overlayEl = document.createElement("div");
+    addClass(this.overlayEl, "queryHistoryModalOverlay");
+
+    this.modalEl = document.createElement("div");
+    addClass(this.modalEl, "queryHistoryModal");
+    this.modalEl.setAttribute("role", "dialog");
+    this.modalEl.setAttribute("aria-modal", "true");
+    this.modalEl.addEventListener("click", (e) => e.stopPropagation());
+
+    // ── Header ───────────────────────────────────────────────────────────────
+    const headerEl = document.createElement("div");
+    addClass(headerEl, "queryHistoryModalHeader");
+
+    this.titleEl = document.createElement("h2");
+    this.titleEl.textContent = "Query History";
+
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "closeButton";
+    closeBtn.setAttribute("aria-label", "Close");
+    closeBtn.innerHTML = "&times;";
+    closeBtn.addEventListener("click", () => this.close());
+
+    headerEl.appendChild(this.titleEl);
+    headerEl.appendChild(closeBtn);
+
+    // ── Body ─────────────────────────────────────────────────────────────────
+    const bodyEl = document.createElement("div");
+    addClass(bodyEl, "queryHistoryModalBody");
+
+    // Left panel – version list
+    const versionsPanel = document.createElement("div");
+    addClass(versionsPanel, "queryHistoryVersionsPanel");
+
+    const versionsPanelTitle = document.createElement("div");
+    addClass(versionsPanelTitle, "queryHistoryPanelTitle");
+    versionsPanelTitle.textContent = "Versions";
+
+    this.loadingEl = document.createElement("div");
+    addClass(this.loadingEl, "queryHistoryLoading");
+    this.loadingEl.textContent = "Loading versions…";
+
+    this.errorEl = document.createElement("div");
+    addClass(this.errorEl, "queryHistoryError");
+
+    this.versionsListEl = document.createElement("div");
+    addClass(this.versionsListEl, "queryHistoryVersionsList");
+
+    versionsPanel.appendChild(versionsPanelTitle);
+    versionsPanel.appendChild(this.loadingEl);
+    versionsPanel.appendChild(this.errorEl);
+    versionsPanel.appendChild(this.versionsListEl);
+
+    // Right panel – preview
+    const previewPanel = document.createElement("div");
+    addClass(previewPanel, "queryHistoryPreviewPanel");
+
+    const previewPanelTitle = document.createElement("div");
+    addClass(previewPanelTitle, "queryHistoryPanelTitle");
+    previewPanelTitle.textContent = "Preview";
+
+    this.previewEmptyEl = document.createElement("div");
+    addClass(this.previewEmptyEl, "queryHistoryPreviewEmpty");
+    this.previewEmptyEl.textContent = "Select a version to preview";
+
+    this.previewContentEl = document.createElement("pre");
+    addClass(this.previewContentEl, "queryHistoryPreviewContent");
+
+    previewPanel.appendChild(previewPanelTitle);
+    previewPanel.appendChild(this.previewEmptyEl);
+    previewPanel.appendChild(this.previewContentEl);
+
+    bodyEl.appendChild(versionsPanel);
+    bodyEl.appendChild(previewPanel);
+
+    // ── Footer ────────────────────────────────────────────────────────────────
+    const footerEl = document.createElement("div");
+    addClass(footerEl, "queryHistoryModalFooter");
+
+    const cancelBtn = document.createElement("button");
+    cancelBtn.type = "button";
+    cancelBtn.textContent = "Close";
+    cancelBtn.addEventListener("click", () => this.close());
+
+    this.openTabBtn = document.createElement("button");
+    this.openTabBtn.type = "button";
+    this.openTabBtn.textContent = "Open in tab";
+    addClass(this.openTabBtn, "primary");
+    this.openTabBtn.disabled = true;
+    this.openTabBtn.addEventListener("click", () => void this.openSelectedVersionInTab());
+
+    footerEl.appendChild(cancelBtn);
+    footerEl.appendChild(this.openTabBtn);
+
+    // ── Assemble ──────────────────────────────────────────────────────────────
+    this.modalEl.appendChild(headerEl);
+    this.modalEl.appendChild(bodyEl);
+    this.modalEl.appendChild(footerEl);
+
+    this.overlayEl.appendChild(this.modalEl);
+
+    this.overlayEl.addEventListener("mousedown", (e) => {
+      if (e.target === this.overlayEl) this.mouseDownOnOverlay = true;
+    });
+    this.overlayEl.addEventListener("mouseup", (e) => {
+      if (e.target === this.overlayEl && this.mouseDownOnOverlay) this.close();
+      this.mouseDownOnOverlay = false;
+    });
+  }
+
+  /** Bound keydown handler stored so it can be removed on close. */
+  private readonly onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      this.close();
+    }
+  };
+
+  /**
+   * Show the history modal for the given managed query.
+   * Returns a promise that resolves when the modal is closed.
+   */
+  public show(
+    workspaceId: string,
+    backend: ReturnType<typeof getWorkspaceBackend>,
+    backendType: BackendType,
+    queryId: string,
+    queryLabel: string,
+  ): Promise<void> {
+    this.workspaceId = workspaceId;
+    this.backend = backend;
+    this.backendType = backendType;
+    this.queryId = queryId;
+    this.queryLabel = queryLabel;
+
+    // Reset state
+    this.selectedVersionId = undefined;
+    this.selectedVersionRead = undefined;
+    this.versionsListEl.innerHTML = "";
+    this.previewContentEl.textContent = "";
+    this.previewContentEl.style.display = "none";
+    this.previewEmptyEl.style.display = "block";
+    this.loadingEl.style.display = "block";
+    this.errorEl.textContent = "";
+    this.errorEl.style.display = "none";
+    this.openTabBtn.disabled = true;
+    this.titleEl.textContent = `History: ${queryLabel}`;
+    this.mouseDownOnOverlay = false;
+
+    document.body.appendChild(this.overlayEl);
+    addClass(this.overlayEl, "open");
+    document.addEventListener("keydown", this.onKeyDown);
+
+    void this.loadVersions();
+
+    return new Promise<void>((resolve) => {
+      this.resolve = resolve;
+    });
+  }
+
+  private close() {
+    document.removeEventListener("keydown", this.onKeyDown);
+    removeClass(this.overlayEl, "open");
+    this.overlayEl.remove();
+    const resolve = this.resolve;
+    this.resolve = undefined;
+    resolve?.();
+  }
+
+  private async loadVersions() {
+    if (!this.backend || !this.queryId) return;
+
+    try {
+      const versions = await this.backend.listVersions(this.queryId);
+      this.loadingEl.style.display = "none";
+      this.renderVersions(versions);
+    } catch (err) {
+      this.loadingEl.style.display = "none";
+      this.errorEl.textContent = `Failed to load versions: ${asWorkspaceBackendError(err).message}`;
+      this.errorEl.style.display = "block";
+    }
+  }
+
+  private renderVersions(versions: VersionInfo[]) {
+    this.versionsListEl.innerHTML = "";
+
+    if (versions.length === 0) {
+      const emptyEl = document.createElement("div");
+      addClass(emptyEl, "queryHistoryEmpty");
+      emptyEl.textContent = "No version history found.";
+      this.versionsListEl.appendChild(emptyEl);
+      return;
+    }
+
+    for (const version of versions) {
+      const item = document.createElement("div");
+      addClass(item, "queryHistoryVersionItem");
+      item.setAttribute("role", "button");
+      item.setAttribute("tabindex", "0");
+
+      const dateEl = document.createElement("div");
+      addClass(dateEl, "queryHistoryVersionDate");
+      dateEl.textContent = this.formatDate(version.createdAt);
+      item.appendChild(dateEl);
+
+      if (version.author) {
+        const authorEl = document.createElement("div");
+        addClass(authorEl, "queryHistoryVersionMeta");
+        authorEl.textContent = version.author;
+        item.appendChild(authorEl);
+      }
+
+      if (version.message) {
+        const msgEl = document.createElement("div");
+        addClass(msgEl, "queryHistoryVersionMessage");
+        msgEl.textContent = version.message;
+        item.appendChild(msgEl);
+      }
+
+      const selectFn = () => void this.selectVersion(version.id, item);
+      item.addEventListener("click", selectFn);
+      item.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          selectFn();
+        }
+      });
+
+      this.versionsListEl.appendChild(item);
+    }
+  }
+
+  private async selectVersion(versionId: string, itemEl: HTMLElement) {
+    // Highlight the selected item
+    this.versionsListEl.querySelectorAll(".queryHistoryVersionItem").forEach((el) => {
+      removeClass(el as HTMLElement, "queryHistoryVersionItem--selected");
+    });
+    addClass(itemEl, "queryHistoryVersionItem--selected");
+
+    // Reset selection state and show loading in preview
+    this.selectedVersionId = undefined;
+    this.selectedVersionRead = undefined;
+    this.openTabBtn.disabled = true;
+    this.previewEmptyEl.style.display = "none";
+    this.previewContentEl.style.display = "block";
+    this.previewContentEl.textContent = "Loading…";
+
+    if (!this.backend || !this.queryId) return;
+
+    try {
+      const read = await this.backend.readVersion(this.queryId, versionId);
+      this.selectedVersionId = versionId;
+      this.selectedVersionRead = read;
+      this.previewContentEl.textContent = read.queryText;
+      this.openTabBtn.disabled = false;
+    } catch (err) {
+      this.previewContentEl.textContent = `Error: ${asWorkspaceBackendError(err).message}`;
+    }
+  }
+
+  private async openSelectedVersionInTab() {
+    if (
+      !this.selectedVersionId ||
+      !this.selectedVersionRead ||
+      !this.workspaceId ||
+      !this.backendType ||
+      !this.queryId
+    ) {
+      return;
+    }
+
+    const { workspaceId, backendType, queryId, queryLabel } = this;
+    const read = this.selectedVersionRead;
+
+    const tab = this.yasgui.addTab(true);
+    if (queryLabel) tab.setName(queryLabel);
+
+    const endpoint = getEndpointToAutoSwitch(backendType, read);
+    if (endpoint) tab.setEndpoint(endpoint);
+
+    tab.setQuery(read.queryText);
+
+    const versionRef: VersionRef | undefined = this.versionRefFromVersionTag(backendType, read.versionTag);
+
+    const managedMetadata: ManagedTabMetadata = {
+      workspaceId,
+      backendType,
+      queryRef: backendType === "git" ? { path: queryId } : { managedQueryIri: queryId },
+      lastSavedVersionRef: versionRef,
+      lastSavedTextHash: hashQueryText(read.queryText),
+    };
+    tab.setManagedQueryMetadata(managedMetadata);
+
+    this.close();
+  }
+
+  private versionRefFromVersionTag(backendType: BackendType, versionTag: string | undefined): VersionRef | undefined {
+    if (!versionTag) return undefined;
+    if (backendType === "git") return { commitSha: versionTag };
+    return { managedQueryVersionIri: versionTag };
+  }
+
+  private formatDate(isoDate: string): string {
+    const d = new Date(isoDate);
+    if (isNaN(d.getTime())) return "Unknown date";
+    return d.toLocaleString();
+  }
+}

package/src/queryManagement/WorkspaceSettingsForm.ts

@@ -4,6 +4,7 @@ import { addClass } from "@matdata/yasgui-utils";
 import { validateWorkspaceConfig } from "./validateWorkspaceConfig";
 import { getWorkspaceBackend } from "./backends/getWorkspaceBackend";
 import { asWorkspaceBackendError } from "./backends/errors";
+import { countManagedQueries } from "./countManagedQueries";
 
 export interface WorkspaceSettingsFormOptions {
   persistentConfig: PersistentConfig;
@@ -202,7 +203,9 @@ ORDER BY ?workspace`;
           status.textContent = "Validating…";
           const backend = getWorkspaceBackend(workspace, { persistentConfig: this.options.persistentConfig });
           await backend.validateAccess();
-          status.textContent = "✓ Access OK";
+          const queryCount = await countManagedQueries(backend);
+          const queryLabel = queryCount === 1 ? "query" : "queries";
+          status.textContent = `✓ Access OK (${queryCount} saved managed ${queryLabel})`;
         } catch (e) {
           const err = asWorkspaceBackendError(e);
           status.textContent = err.message;
@@ -359,14 +362,14 @@ ORDER BY ?workspace`;
     const typeSelect = document.createElement("select");
     typeSelect.setAttribute("aria-label", "Workspace type");
     addClass(typeSelect, "settingsSelect");
-    const optGit = document.createElement("option");
-    optGit.value = "git";
-    optGit.textContent = "Git";
     const optSparql = document.createElement("option");
     optSparql.value = "sparql";
     optSparql.textContent = "SPARQL";
-    typeSelect.appendChild(optGit);
+    const optGit = document.createElement("option");
+    optGit.value = "git";
+    optGit.textContent = "Git";
     typeSelect.appendChild(optSparql);
+    typeSelect.appendChild(optGit);
 
     if (existing) {
       typeSelect.value = existing.type;

package/src/queryManagement/backends/GitWorkspaceBackend.ts

@@ -2,6 +2,7 @@ import type { GitWorkspaceConfig, FolderEntry, ReadResult, VersionInfo, WriteQue
 import type { WorkspaceBackend } from "./WorkspaceBackend";
 import { WorkspaceBackendError } from "./errors";
 import { normalizeQueryFilename } from "../normalizeQueryFilename";
+import { parseGitRemote } from "./gitRemote";
 
 export interface GitProviderClient {
   validateAccess(config: GitWorkspaceConfig): Promise<void>;
@@ -112,4 +113,42 @@ export default class GitWorkspaceBackend implements WorkspaceBackend {
 
     await this.client.deleteQuery(this.config, queryId);
   }
+
+  getQueryUri(queryId: string): string | undefined {
+    try {
+      const { host, repoPath } = parseGitRemote(this.config.remoteUrl);
+      const parts = repoPath.split("/").filter(Boolean);
+      const [owner, repoName] = parts;
+      if (!owner || !repoName) return undefined;
+
+      const filePath = [this.config.rootPath, queryId].filter(Boolean).join("/");
+      const branch = this.config.branch?.trim() || "HEAD";
+      const provider = this.config.provider;
+
+      const isGithub =
+        provider === "github" ||
+        ((!provider || provider === "auto") &&
+          (host === "github.com" || (host.includes("github") && !host.includes("gitlab"))));
+      if (isGithub) {
+        return `https://${host}/${owner}/${repoName}/blob/${encodeURIComponent(branch)}/${filePath}`;
+      }
+
+      const isGitlab =
+        provider === "gitlab" ||
+        ((!provider || provider === "auto") && (host === "gitlab.com" || host.includes("gitlab")));
+      if (isGitlab) {
+        return `https://${host}/${repoPath}/-/blob/${encodeURIComponent(branch)}/${filePath}`;
+      }
+
+      const isBitbucket = provider === "bitbucket" || ((!provider || provider === "auto") && host === "bitbucket.org");
+      if (isBitbucket) {
+        return `https://bitbucket.org/${owner}/${repoName}/src/${encodeURIComponent(branch)}/${filePath}`;
+      }
+
+      // Gitea (and other self-hosted providers)
+      return `https://${host}/${owner}/${repoName}/src/branch/${encodeURIComponent(branch)}/${filePath}`;
+    } catch {
+      return undefined;
+    }
+  }
 }

package/src/queryManagement/backends/SparqlWorkspaceBackend.ts

@@ -795,4 +795,9 @@ LIMIT 1`;
       description: row.description?.value,
     };
   }
+
+  getQueryUri(queryId: string): string | undefined {
+    // In a SPARQL workspace the queryId is the managed-query IRI itself.
+    return queryId || undefined;
+  }
 }

package/src/queryManagement/backends/WorkspaceBackend.ts

@@ -44,4 +44,12 @@ export interface WorkspaceBackend {
    * Optional: Delete a folder and everything inside it (recursive).
    */
   deleteFolder?(folderId: string): Promise<void>;
+
+  /**
+   * Optional: Return a URI for the given query.
+   * - For SPARQL workspaces this is the managed-query IRI stored in the triplestore.
+   * - For git workspaces this is the browser-accessible URL to the file in the repository.
+   * Returns `undefined` when no meaningful URI can be determined.
+   */
+  getQueryUri?(queryId: string): string | undefined;
 }