@matdata/yasr 5.20.3 → 6.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasr",
-  "description": "Yet Another SPARQL Resultset GUI",
-  "version": "5.20.3",
+  "description": "MatGUI results viewer: a modern SPARQL result set viewer (formerly Yasgui/YASR).",
+  "version": "6.0.0",
   "main": "build/yasr.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",
@@ -17,18 +17,26 @@
     "Semantic Web",
     "Linked Data"
   ],
-  "bugs": "https://github.com/Matdata-eu/Yasgui/issues/",
+  "bugs": "https://github.com/Matdata-eu/Matgui/issues/",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Matdata-eu/Yasgui.git",
+    "url": "https://github.com/Matdata-eu/Matgui.git",
     "directory": "packages/yasr"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.11.0",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/legacy-modes": "^6.5.3",
+    "@codemirror/state": "^6.7.2",
+    "@codemirror/view": "^6.43.10",
     "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@json2csv/plainjs": "^7.0.4",
+    "@lezer/highlight": "^1.2.3",
     "@matdata/yasgui-utils": "^4.6.1",
     "@matdata/yasqe": "^4.6.1",
-    "codemirror": "^5.51.0",
+    "codemirror-lang-turtle": "^0.0.2",
     "colors": "^1.4.0",
     "column-resizer": "^1.4.0",
     "datatables.net": "^2.0.5",
@@ -40,7 +48,6 @@
     "papaparse": "^5.3.1"
   },
   "devDependencies": {
-    "@types/codemirror": "0.0.100",
     "@types/jquery": "^3.5.32",
     "@types/lodash-es": "^4.17.3",
     "@types/n3": "^1.1.5",

package/src/index.ts

@@ -43,6 +43,13 @@ export class Yasr extends EventEmitter {
   private loadingEl: HTMLDivElement | undefined;
   private isLoading: boolean = false;
 
+  // Result history
+  private static readonly MAX_HISTORY_SIZE = 20;
+  private resultHistory: { data: any; duration?: number }[] = [];
+  private historyIndex: number = -1;
+  private historyBackBtn: HTMLButtonElement | undefined;
+  private historyForwardBtn: HTMLButtonElement | undefined;
+
   // Utils
   public utils = { addScript: addScript, addCSS: addCss, sanitize: sanitize };
 
@@ -350,6 +357,7 @@ export class Yasr extends EventEmitter {
     this.drawPluginSelectors();
     this.drawResponseInfo();
     this.drawPluginElement();
+    this.drawHistoryButtons();
     this.drawDownloadIcon();
     this.drawFullscreenButton();
     if (this.loadingEl) {
@@ -357,6 +365,49 @@ export class Yasr extends EventEmitter {
     }
     this.drawDocumentationButton();
   }
+
+  private drawHistoryButtons() {
+    // Guard: only create buttons once
+    if (this.historyBackBtn && this.historyForwardBtn) return;
+
+    const createBtn = (ariaLabel: string, iconClass: string, title: string): HTMLButtonElement => {
+      const btn = document.createElement("button");
+      addClass(btn, "yasr_btn", "yasr_btn_history", "btn_icon");
+      btn.setAttribute("aria-label", ariaLabel);
+      btn.title = title;
+      btn.disabled = true;
+      const icon = document.createElement("i");
+      addClass(icon, "fas", iconClass);
+      icon.setAttribute("aria-hidden", "true");
+      btn.appendChild(icon);
+      return btn;
+    };
+
+    this.historyBackBtn = createBtn("Previous result", "fa-chevron-left", "Previous result");
+    this.historyBackBtn.addEventListener("click", () => this.navigateHistory(-1));
+
+    this.historyForwardBtn = createBtn("Next result", "fa-chevron-right", "Next result");
+    this.historyForwardBtn.addEventListener("click", () => this.navigateHistory(1));
+
+    this.headerEl.appendChild(this.historyBackBtn);
+    this.headerEl.appendChild(this.historyForwardBtn);
+  }
+
+  private updateHistoryButtons() {
+    if (!this.historyBackBtn || !this.historyForwardBtn) return;
+    this.historyBackBtn.disabled = this.historyIndex <= 0;
+    this.historyForwardBtn.disabled = this.historyIndex >= this.resultHistory.length - 1;
+  }
+
+  private navigateHistory(direction: -1 | 1) {
+    const newIndex = this.historyIndex + direction;
+    if (newIndex < 0 || newIndex >= this.resultHistory.length) return;
+    this.historyIndex = newIndex;
+    const entry = this.resultHistory[this.historyIndex];
+    this.results = new Parser(entry.data, entry.duration);
+    this.draw();
+    this.updateHistoryButtons();
+  }
   private downloadBtn: HTMLAnchorElement | undefined;
   private drawDownloadIcon() {
     this.downloadBtn = document.createElement("a");
@@ -519,7 +570,7 @@ export class Yasr extends EventEmitter {
     const icon = document.createElement("i");
     addClass(icon, "fas", "fa-circle-question");
     this.documentationLink.appendChild(icon);
-    this.documentationLink.href = "https://yasgui-doc.matdata.eu/docs/user-guide";
+    this.documentationLink.href = "https://matgui-doc.matdata.eu/docs/user-guide";
     this.documentationLink.target = "_blank";
     this.documentationLink.rel = "noopener noreferrer";
     this.headerEl.appendChild(this.documentationLink); // We can do this as long as the help-element is the last item in the row
@@ -605,7 +656,17 @@ export class Yasr extends EventEmitter {
     this.hideLoading();
     this.results = new Parser(data, duration);
 
+    // Truncate any forward history and push new entry
+    this.resultHistory = this.resultHistory.slice(0, this.historyIndex + 1);
+    this.resultHistory.push({ data, duration });
+    // Cap history to avoid unbounded memory growth
+    if (this.resultHistory.length > Yasr.MAX_HISTORY_SIZE) {
+      this.resultHistory = this.resultHistory.slice(this.resultHistory.length - Yasr.MAX_HISTORY_SIZE);
+    }
+    this.historyIndex = this.resultHistory.length - 1;
+
     this.draw();
+    this.updateHistoryButtons();
 
     this.storeResponse();
   }
@@ -614,7 +675,7 @@ export class Yasr extends EventEmitter {
    * Execute a background SPARQL query from within a plugin.
    *
    * This delegates to the `executeQuery` callback supplied in the Yasr
-   * configuration (typically wired up by the Yasgui `Tab`).  The raw
+   * configuration (typically wired up by the Matgui `Tab`).  The raw
    * response is returned so the calling plugin can process it without
    * replacing the current result display.
    *
@@ -702,7 +763,7 @@ export interface Config {
 
   /**
    * Optional callback that allows plugins to execute a background SPARQL query.
-   * When set (e.g. by the Yasgui Tab), plugins can call `yasr.executeQuery(queryString)`
+   * When set (e.g. by the Matgui Tab), plugins can call `yasr.executeQuery(queryString)`
    * to run an arbitrary query and receive the raw response, independently of the
    * main query editor.
    *
@@ -731,5 +792,6 @@ Yasr.registerPlugin("response", YasrPluginResponse.default as any);
 Yasr.registerPlugin("error", YasrPluginError.default as any);
 
 export type { Plugin, DownloadInfo } from "./plugins";
+export { buildSubjectOfQuery, buildObjectOfQuery } from "./plugins/response/uriUtils";
 
 export default Yasr;

package/src/main.scss

@@ -11,6 +11,8 @@
 
   .yasr_results {
     flex: 1;
+    min-height: 0;
+    overflow: auto;
   }
 
   .yasr_btn {
@@ -164,6 +166,16 @@
     }
   }
 
+  .yasr_btn_history {
+    border: none;
+    background: none;
+    color: var(--yasgui-button-text, #505050);
+
+    &:not([disabled]):hover {
+      color: var(--yasgui-button-hover, #337ab7);
+    }
+  }
+
   .yasr_fullscreenButton {
     border: none;
     background: none;

package/src/plugins/error/index.ts

@@ -45,7 +45,7 @@ export default class Error implements Plugin<never> {
 
     const cors = document.createElement("li");
     const firstPart = document.createElement("span");
-    firstPart.textContent = "Endpoint is not accessible from the YASGUI server and website, and the endpoint is not ";
+    firstPart.textContent = "Endpoint is not accessible from the Matgui server and website, and the endpoint is not ";
     cors.appendChild(firstPart);
     const secondPart = document.createElement("a");
     secondPart.textContent = "CORS-enabled";

package/src/plugins/response/index.scss

@@ -1,10 +1,31 @@
 .yasr {
   .yasr_results {
     position: relative;
-    .CodeMirror {
-      border: 1px solid #d1d1d1;
+    .cm-editor {
+      border: 1px solid var(--yasgui-border-color, #d1d1d1);
       margin-top: 5px;
       height: 100%;
+      position: relative;
+      background: var(--yasgui-bg-primary, #fff);
+      color: var(--yasgui-text-primary, #000);
+      font-size: 13px;
+      &.cm-focused {
+        outline: none;
+      }
+      .cm-scroller {
+        font-family: monospace;
+        line-height: 1.4;
+      }
+      .cm-gutters {
+        background: var(--yasgui-bg-secondary, #f7f7f7);
+        border-right: 1px solid var(--yasgui-border-color, #ddd);
+        color: var(--yasgui-text-secondary, #999);
+      }
+      .cm-foldPlaceholder {
+        background: var(--yasgui-bg-secondary, #eee);
+        border: 1px solid var(--yasgui-border-color, #ddd);
+        color: var(--yasgui-text-secondary, #888);
+      }
       &.overflow::before {
         background: linear-gradient(transparent 0%, #ffffffaa 75%, white 100%);
         content: "";
@@ -14,6 +35,61 @@
         position: absolute;
         pointer-events: none;
       }
+      // Token colors (classHighlighter emits `tok-*` classes). Light theme:
+      .tok-string,
+      .tok-string2 {
+        color: #a11;
+      }
+      .tok-number,
+      .tok-atom,
+      .tok-bool {
+        color: #164;
+      }
+      .tok-propertyName,
+      .tok-attributeName {
+        color: #00c;
+      }
+      .tok-tagName,
+      .tok-keyword {
+        color: #170;
+      }
+      .tok-comment {
+        color: #a50;
+      }
+      .tok-punctuation,
+      .tok-angleBracket {
+        color: #555;
+      }
+      // Dark theme
+      &.cm-s-yasgui-dark {
+        &.overflow::before {
+          background: linear-gradient(transparent 0%, #1e1e1eaa 75%, var(--yasgui-bg-primary, #1e1e1e) 100%);
+        }
+        .tok-string,
+        .tok-string2 {
+          color: #ce9178;
+        }
+        .tok-number,
+        .tok-atom,
+        .tok-bool {
+          color: #b5cea8;
+        }
+        .tok-propertyName,
+        .tok-attributeName {
+          color: #9cdcfe;
+        }
+        .tok-tagName,
+        .tok-keyword {
+          color: #569cd6;
+        }
+        .tok-comment {
+          color: #6a9955;
+        }
+        .tok-punctuation,
+        .tok-angleBracket {
+          color: #d4d4d4;
+        }
+      }
     }
     .overlay {
       width: 100%;

package/src/plugins/response/index.ts

@@ -4,20 +4,22 @@
 import { Plugin } from "../";
 import Yasr from "../../";
 import "./index.scss";
-import CodeMirror from "codemirror";
-import "codemirror/addon/fold/foldcode.js";
-import "codemirror/addon/fold/foldgutter.js";
-import "codemirror/addon/fold/xml-fold.js";
-import "codemirror/addon/fold/brace-fold.js";
-
-import "codemirror/addon/edit/matchbrackets.js";
-import "codemirror/mode/xml/xml.js";
-
-import "codemirror/mode/javascript/javascript.js";
-import "codemirror/lib/codemirror.css";
-import "codemirror/theme/material-palenight.css";
+import { EditorState, Extension } from "@codemirror/state";
+import { EditorView, lineNumbers, highlightSpecialChars } from "@codemirror/view";
+import { foldGutter, bracketMatching, syntaxHighlighting, StreamLanguage } from "@codemirror/language";
+import { classHighlighter } from "@lezer/highlight";
+import { json } from "@codemirror/lang-json";
+import { xml } from "@codemirror/lang-xml";
+import { turtle } from "codemirror-lang-turtle";
+import { javascript } from "@codemirror/legacy-modes/mode/javascript";
 import { addClass, removeClass } from "@matdata/yasgui-utils";
 import { DeepReadonly } from "ts-essentials";
+import {
+  extractUriAtOffset,
+  buildSubjectOfQuery,
+  buildObjectOfQuery,
+  stripDuplicatePrefixDeclarations,
+} from "./uriUtils";
 
 export interface PluginConfig {
   maxLines: number;
@@ -26,10 +28,12 @@ export default class Response implements Plugin<PluginConfig> {
   private yasr: Yasr;
   label = "Response";
   priority = 2;
-  helpReference = "https://yasgui-doc.matdata.eu/docs/user-guide#response-plugin";
+  helpReference = "https://matgui-doc.matdata.eu/docs/user-guide#response-plugin";
   private config: DeepReadonly<PluginConfig>;
   private overLay: HTMLDivElement | undefined;
-  private cm: CodeMirror.Editor | undefined;
+  private cm: EditorView | undefined;
+  /** Turtle appended to the response view through Ctrl+Click URI exploration actions. */
+  private appendedContent = "";
   constructor(yasr: Yasr) {
     this.yasr = yasr;
     this.config = Response.defaults;
@@ -81,27 +85,185 @@ export default class Response implements Plugin<PluginConfig> {
 
     // Detect current theme from document
     const isDarkTheme = document.documentElement.getAttribute("data-theme") === "dark";
-    const cmTheme = isDarkTheme ? "material-palenight" : "default";
-
-    const codemirrorOpts: Partial<CodeMirror.EditorConfiguration> = {
-      readOnly: true,
-      lineNumbers: true,
-      lineWrapping: true,
-      foldGutter: true,
-      gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
-      value: value,
-      extraKeys: { Tab: false },
-      theme: cmTheme,
-    };
-    const mode = this.yasr.results?.getType();
-    if (mode === "json") {
-      codemirrorOpts.mode = { name: "javascript", json: true };
-    }
 
-    this.cm = CodeMirror(this.yasr.resultsEl, codemirrorOpts);
-    // Don't show less originally we've already set the value in the codemirrorOpts
+    const extensions: Extension[] = [
+      EditorState.readOnly.of(true),
+      EditorView.editable.of(false),
+      lineNumbers(),
+      foldGutter(),
+      highlightSpecialChars(),
+      bracketMatching(),
+      EditorView.lineWrapping,
+      // Emit stable `tok-*` classes so the theme SCSS controls colors (light & dark)
+      syntaxHighlighting(classHighlighter),
+      EditorView.editorAttributes.of({ class: `CodeMirror cm-s-${isDarkTheme ? "yasgui-dark" : "default"}` }),
+    ];
+    const language = this.getLanguageExtension();
+    if (language) extensions.push(language);
+
+    this.destroyEditor();
+    // A fresh response replaces any DESCRIBE results appended to the previous one.
+    this.appendedContent = "";
+    this.cm = new EditorView({
+      state: EditorState.create({ doc: value, extensions }),
+      parent: this.yasr.resultsEl,
+    });
+    this.cm.dom.addEventListener("mousedown", this.handleMouseDown);
+    // Don't show less originally we've already set the value in the editor state
     if (lines.length > config.maxLines) this.showLess(false);
   }
+  private getLanguageExtension(): Extension | undefined {
+    const type = this.yasr.results?.getType();
+    if (type === "json") return json();
+    if (type === "xml") return xml();
+    if (type === "ttl") return turtle();
+    if (type === "n-triples") return turtle();
+    const contentType = this.yasr.results?.getContentType() || "";
+    if (contentType.indexOf("json") >= 0) return json();
+    if (contentType.indexOf("xml") >= 0 || contentType.indexOf("html") >= 0) return xml();
+    if (contentType.indexOf("javascript") >= 0) return StreamLanguage.define(javascript);
+    return undefined;
+  }
+  private destroyEditor() {
+    if (this.cm) {
+      this.cm.dom.removeEventListener("mousedown", this.handleMouseDown);
+      this.cm.destroy();
+      this.cm = undefined;
+    }
+    this.overLay?.remove();
+    this.overLay = undefined;
+  }
+
+  /**
+   * Ctrl/Cmd+Click on a URI runs a CONSTRUCT query for triples where the URI is the subject.
+   * Ctrl/Cmd+Shift+Click runs a CONSTRUCT query for triples where the URI is the object.
+   */
+  private handleMouseDown = (event: MouseEvent) => {
+    if (!event.ctrlKey && !event.metaKey) return;
+    if (event.button !== 0) return;
+    if (!this.cm) return;
+    // Only act when the host application wired up a query executor.
+    if (!this.yasr.config.executeQuery) return;
+
+    const pos = this.cm.posAtCoords({ x: event.clientX, y: event.clientY });
+    if (pos === null) return;
+
+    const uri = extractUriAtOffset(this.cm.state.doc.toString(), pos);
+    if (!uri) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (event.shiftKey) {
+      void this.runObjectOfQuery(uri);
+    } else {
+      void this.runSubjectOfQuery(uri);
+    }
+  };
+
+  private async runSubjectOfQuery(uri: string) {
+    if (!this.yasr.config.executeQuery) return;
+    const cmAtStart = this.cm;
+    if (!cmAtStart) return;
+
+    const query = buildSubjectOfQuery(uri);
+    try {
+      this.yasr.showLoading();
+      const response = await this.yasr.executeQuery(query, { acceptHeader: this.getConstructAcceptHeader() });
+      if (this.cm !== cmAtStart) return;
+
+      const content = this.getResponseContent(response);
+      if (content) {
+        this.appendToView(`\n\n# Triples where <${uri}> is subject\n${content.trim()}\n`);
+      } else {
+        this.appendToView(`\n\n# Triples where <${uri}> is subject: no data\n`);
+      }
+    } catch (error) {
+      if (this.cm !== cmAtStart) return;
+
+      console.error("Subject-of query failed:", error);
+      const message = error instanceof Error ? error.message : String(error);
+      this.appendToView(`\n\n# Triples where <${uri}> is subject failed: ${message}\n`);
+    } finally {
+      if (this.cm === cmAtStart) this.yasr.hideLoading();
+    }
+  }
+
+  private async runObjectOfQuery(uri: string) {
+    if (!this.yasr.config.executeQuery) return;
+    const cmAtStart = this.cm;
+    if (!cmAtStart) return;
+
+    const query = buildObjectOfQuery(uri);
+    try {
+      this.yasr.showLoading();
+      const response = await this.yasr.executeQuery(query, { acceptHeader: this.getConstructAcceptHeader() });
+      if (this.cm !== cmAtStart) return;
+
+      const content = this.getResponseContent(response);
+      if (content) {
+        this.appendToView(`\n\n# Triples where <${uri}> is object\n${content.trim()}\n`);
+      } else {
+        this.appendToView(`\n\n# Triples where <${uri}> is object: no data\n`);
+      }
+    } catch (error) {
+      if (this.cm !== cmAtStart) return;
+
+      console.error("Object-of query failed:", error);
+      const message = error instanceof Error ? error.message : String(error);
+      this.appendToView(`\n\n# Triples where <${uri}> is object failed: ${message}\n`);
+    } finally {
+      if (this.cm === cmAtStart) this.yasr.hideLoading();
+    }
+  }
+
+  /**
+   * Pick an Accept header for follow-up CONSTRUCT requests. When the current response
+   * is an RDF graph format, reuse it so the appended triples match what is shown.
+   */
+  private getConstructAcceptHeader(): string {
+    const contentType = this.yasr.results?.getContentType();
+    if (contentType) {
+      const lower = contentType.toLowerCase();
+      if (
+        lower.includes("turtle") ||
+        lower.includes("trig") ||
+        lower.includes("triple") ||
+        lower.includes("quad") ||
+        lower.includes("rdf")
+      ) {
+        return contentType.split(";")[0].trim();
+      }
+    }
+    return "text/turtle";
+  }
+
+  private getResponseContent(response: unknown): string {
+    if (typeof response === "string") return response;
+    if (response && typeof response === "object") {
+      const record = response as Record<string, unknown>;
+      if (typeof record.content === "string") return record.content;
+      if (typeof record.data === "string") return record.data;
+    }
+    return "";
+  }
+
+  /**
+   * Append text (query result or status message) to the response view and make sure
+   * the full content is revealed.
+   */
+  private appendToView(text: string) {
+    if (!this.cm || !text) return;
+    const existingVisibleContent = (this.yasr.results?.getOriginalResponseAsString() || "") + this.appendedContent;
+    this.appendedContent += stripDuplicatePrefixDeclarations(text, existingVisibleContent);
+    // Reveal the full response together with the appended DESCRIBE results.
+    this.showMore();
+  }
+
+  private setValue(value: string) {
+    if (!this.cm) return;
+    this.cm.dispatch({ changes: { from: 0, to: this.cm.state.doc.length, insert: value } });
+  }
   private limitData(value: string) {
     const lines = value.split("\n");
     if (lines.length > this.config.maxLines) {
@@ -116,7 +278,7 @@ export default class Response implements Plugin<PluginConfig> {
   showLess(setValue = true) {
     if (!this.cm) return;
     // Add overflow
-    addClass(this.cm.getWrapperElement(), "overflow");
+    addClass(this.cm.dom, "overflow");
 
     // Remove old instance
     if (this.overLay) {
@@ -157,9 +319,9 @@ export default class Response implements Plugin<PluginConfig> {
 
     overlayContent.appendChild(downloadButton);
     this.overLay.appendChild(overlayContent);
-    this.cm.getWrapperElement().appendChild(this.overLay);
+    this.cm.dom.appendChild(this.overLay);
     if (setValue) {
-      this.cm.setValue(this.limitData(this.yasr.results?.getOriginalResponseAsString() || ""));
+      this.setValue(this.limitData(this.yasr.results?.getOriginalResponseAsString() || ""));
     }
   }
   /**
@@ -167,11 +329,13 @@ export default class Response implements Plugin<PluginConfig> {
    */
   showMore() {
     if (!this.cm) return;
-    removeClass(this.cm.getWrapperElement(), "overflow");
+    removeClass(this.cm.dom, "overflow");
     this.overLay?.remove();
     this.overLay = undefined;
-    this.cm.setValue(this.yasr.results?.getOriginalResponseAsString() || "");
-    this.cm.refresh();
+    this.setValue((this.yasr.results?.getOriginalResponseAsString() || "") + this.appendedContent);
+  }
+  destroy() {
+    this.destroyEditor();
   }
   public static defaults: PluginConfig = {
     maxLines: 30,