@matdata/yasqe 5.2.0 → 5.3.0

package/grammar/_tokenizer-table.d.ts

@@ -0,0 +1,9 @@
+export interface TokenizerTable {
+  [key: string]: any;
+}
+
+export const table: TokenizerTable;
+export const keywords: any;
+export const punct: any;
+export const acceptEmpty: any;
+export const startSymbol: string;

package/grammar/tokenizer.ts

@@ -36,6 +36,10 @@ export interface State {
   lastPredicateOffset: number;
   currentPnameNs: string | undefined;
   possibleFullIri: boolean;
+  inConstructTemplate: boolean;
+  seenWhereClause: boolean;
+  constructVariables: { [varName: string]: string };
+  whereVariables: { [varName: string]: string };
 }
 export interface Token {
   quotePos: "end" | "start" | "content" | undefined;
@@ -467,6 +471,13 @@ export default function (config: CodeMirror.EditorConfiguration): CodeMirror.Mod
         case "storeProperty":
           state.storeProperty = true;
           break;
+        case "constructTemplate":
+          state.inConstructTemplate = true;
+          break;
+        case "whereClause":
+          state.inConstructTemplate = false;
+          state.seenWhereClause = true;
+          break;
       }
     }
 
@@ -517,7 +528,18 @@ export default function (config: CodeMirror.EditorConfiguration): CodeMirror.Mod
       // Incremental LL1 parse
       while (state.stack.length > 0 && tokenCat && state.OK && !finished) {
         topSymbol = state.stack.pop();
-        if (topSymbol === "var" && tokenOb.string) state.variables[tokenOb.string] = tokenOb.string;
+        if (topSymbol === "var" && tokenOb.string) {
+          state.variables[tokenOb.string] = tokenOb.string;
+          // Track variables separately for CONSTRUCT template validation
+          if (state.queryType === "CONSTRUCT") {
+            if (state.inConstructTemplate) {
+              state.constructVariables[tokenOb.string] = tokenOb.string;
+            } else if (state.seenWhereClause) {
+              // Only track as WHERE variable if we've actually entered the WHERE clause
+              state.whereVariables[tokenOb.string] = tokenOb.string;
+            }
+          }
+        }
         if (!ll1_table[topSymbol]) {
           // Top symbol is a terminal
           if (topSymbol == tokenCat) {
@@ -721,6 +743,10 @@ export default function (config: CodeMirror.EditorConfiguration): CodeMirror.Mod
         errorMsg: undefined,
         inPrefixDecl: false,
         possibleFullIri: false,
+        inConstructTemplate: false,
+        seenWhereClause: false,
+        constructVariables: {},
+        whereVariables: {},
       };
     },
     indent: indent,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasqe",
   "description": "Yet Another SPARQL Query Editor",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "main": "build/yasqe.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",
@@ -27,7 +27,8 @@
     "@matdata/yasgui-utils": "^4.6.1",
     "codemirror": "^5.51.0",
     "lodash-es": "^4.17.15",
-    "query-string": "^6.10.1"
+    "query-string": "^6.10.1",
+    "sparql-formatter": "^1.0.2"
   },
   "devDependencies": {
     "@types/codemirror": "0.0.100",

package/src/defaults.ts

@@ -27,7 +27,7 @@ SELECT * WHERE {
       rangeFinder: new (<any>CodeMirror).fold.combine((<any>CodeMirror).fold.brace, (<any>CodeMirror).fold.prefix),
     },
     collapsePrefixesOnLoad: false,
-    gutters: ["gutterErrorBar", "CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+    gutters: ["gutterErrorBar", "gutterConstructWarning", "CodeMirror-linenumbers", "CodeMirror-foldgutter"],
     matchBrackets: true,
     fixedGutter: true,
     syntaxErrorCheck: true,
@@ -68,7 +68,7 @@ SELECT * WHERE {
       },
       "Shift-Ctrl-F": function (_yasqe: any) {
         const yasqe: Yasqe = _yasqe;
-        yasqe.autoformat();
+        yasqe.format();
       },
       "Ctrl-S": function (_yasqe: any) {
         const yasqe: Yasqe = _yasqe;
@@ -130,6 +130,8 @@ SELECT * WHERE {
     editorHeight: "300px",
     queryingDisabled: undefined,
     prefixCcApi: prefixCcApi,
+    showFormatButton: true,
+    checkConstructVariables: true,
   };
   const requestConfig: PlainRequestConfig = {
     queryArgument: undefined, //undefined means: get query argument based on query mode

package/src/imgs.ts

@@ -12,3 +12,5 @@ export var fullscreen =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
 export var fullscreenExit =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>';
+export var format =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 3v18h18v-2H5V3H3zm14 4V5l-4 4 4 4V9h4V7h-4zM7 9v2h10V9H7zm0 4v2h10v-2H7zm0 4v2h10v-2H7z"/></svg>';

package/src/index.ts

@@ -16,6 +16,7 @@ import { merge, escape } from "lodash-es";
 import getDefaults from "./defaults";
 import CodeMirror from "./CodeMirror";
 import { YasqeAjaxConfig } from "./sparql";
+import { spfmt } from "sparql-formatter";
 
 export interface Yasqe {
   on(eventName: "query", handler: (instance: Yasqe, req: Request, abortController?: AbortController) => void): void;
@@ -84,13 +85,30 @@ export class Yasqe extends CodeMirror {
     if (storageId) {
       const persConf = this.storage.get<any>(storageId);
       if (persConf && typeof persConf === "string") {
-        this.persistentConfig = { query: persConf, editorHeight: this.config.editorHeight }; // Migrate to object based localstorage
+        this.persistentConfig = { query: persConf, editorHeight: this.config.editorHeight };
       } else {
         this.persistentConfig = persConf;
       }
       if (!this.persistentConfig)
         this.persistentConfig = { query: this.getValue(), editorHeight: this.config.editorHeight };
+
+      // Ensure autoformatOnQuery is true by default
+      if (this.persistentConfig && typeof this.persistentConfig.autoformatOnQuery === "undefined") {
+        this.persistentConfig.autoformatOnQuery = true;
+      }
+
       if (this.persistentConfig && this.persistentConfig.query) this.setValue(this.persistentConfig.query);
+    } else {
+      // If no storage, ensure persistentConfig exists and autoformatOnQuery is true
+      if (!this.persistentConfig) {
+        this.persistentConfig = {
+          query: this.getValue(),
+          editorHeight: this.config.editorHeight,
+          autoformatOnQuery: true,
+        };
+      } else if (typeof this.persistentConfig.autoformatOnQuery === "undefined") {
+        this.persistentConfig.autoformatOnQuery = true;
+      }
     }
     this.config.autocompleters.forEach((c) => this.enableCompleter(c).then(() => {}, console.warn));
     if (this.config.consumeShareLink) {
@@ -99,6 +117,7 @@ export class Yasqe extends CodeMirror {
       window.addEventListener("hashchange", this.handleHashChange);
     }
     this.checkSyntax();
+    this.checkConstructVariables();
     // Size codemirror to the
     if (this.persistentConfig && this.persistentConfig.editorHeight) {
       this.getWrapperElement().style.height = this.persistentConfig.editorHeight;
@@ -115,6 +134,7 @@ export class Yasqe extends CodeMirror {
   };
   private handleChange() {
     this.checkSyntax();
+    this.checkConstructVariables();
     this.updateQueryButton();
   }
   private handleBlur() {
@@ -123,6 +143,7 @@ export class Yasqe extends CodeMirror {
   private handleChanges() {
     // e.g. handle blur
     this.checkSyntax();
+    this.checkConstructVariables();
     this.updateQueryButton();
   }
   private handleCursorActivity() {
@@ -347,6 +368,23 @@ export class Yasqe extends CodeMirror {
       this.updateQueryButton();
     }
 
+    /**
+     * Draw format btn
+     */
+    if (this.config.showFormatButton) {
+      const formatBtn = document.createElement("button");
+      addClass(formatBtn, "yasqe_formatButton");
+      const formatIcon = drawSvgStringAsElement(imgs.format);
+      addClass(formatIcon, "formatIcon");
+      formatBtn.appendChild(formatIcon);
+      formatBtn.onclick = () => {
+        this.format();
+      };
+      formatBtn.title = "Format query (Shift+Ctrl+F)";
+      formatBtn.setAttribute("aria-label", "Format query");
+      buttons.appendChild(formatBtn);
+    }
+
     /**
      * Draw fullscreen btn
      */
@@ -643,6 +681,32 @@ export class Yasqe extends CodeMirror {
       }
     });
   }
+
+  public formatQuery() {
+    try {
+      const currentQuery = this.getValue();
+      const formatted = spfmt.format(currentQuery);
+      this.setValue(formatted);
+      // Collapse prefixes after formatting
+      this.collapsePrefixes(true);
+    } catch (error) {
+      console.warn(
+        "Failed to format SPARQL query using sparql-formatter. This may be due to syntax errors in the query. Falling back to legacy formatter.",
+        error,
+      );
+      // If formatting fails, fall back to the built-in autoformat
+      this.autoformat();
+    }
+  }
+
+  public format() {
+    const formatterType = this.persistentConfig?.formatterType || "sparql-formatter";
+    if (formatterType === "legacy") {
+      this.autoformat();
+    } else {
+      this.formatQuery();
+    }
+  }
   //values in the form of {?var: 'value'}, or [{?var: 'value'}]
   public getQueryWithValues(values: string | { [varName: string]: string } | Array<{ [varName: string]: string }>) {
     if (!values) return this.getValue();
@@ -709,6 +773,7 @@ export class Yasqe extends CodeMirror {
   public setCheckSyntaxErrors(isEnabled: boolean) {
     this.config.syntaxErrorCheck = isEnabled;
     this.checkSyntax();
+    this.checkConstructVariables();
   }
   public checkSyntax() {
     this.queryValid = true;
@@ -765,6 +830,77 @@ export class Yasqe extends CodeMirror {
       }
     }
   }
+
+  public setCheckConstructVariables(isEnabled: boolean) {
+    this.config.checkConstructVariables = isEnabled;
+    if (!isEnabled) {
+      // Clear any existing warnings when disabled
+      this.clearGutter("gutterConstructWarning");
+    } else {
+      this.checkConstructVariables();
+    }
+  }
+
+  public checkConstructVariables() {
+    // Clear any existing warnings first
+    this.clearGutter("gutterConstructWarning");
+
+    // Only check if enabled, query is valid, and it's a CONSTRUCT query
+    if (!this.config.checkConstructVariables || !this.queryValid || this.getQueryType() !== "CONSTRUCT") {
+      return;
+    }
+
+    // Get the final state after parsing the entire query
+    const lastLine = this.getDoc().lastLine();
+    const token: Token = this.getTokenAt({ line: lastLine, ch: this.getDoc().getLine(lastLine).length }, true);
+
+    const state = token.state as TokenizerState;
+
+    // Check for undefined variables in CONSTRUCT template
+    const undefinedVars: string[] = [];
+    for (const varName in state.constructVariables) {
+      if (!state.whereVariables[varName]) {
+        undefinedVars.push(varName);
+      }
+    }
+
+    if (undefinedVars.length === 0) {
+      return;
+    }
+
+    // Find lines where undefined variables are used in CONSTRUCT template
+    // Note: This iterates through all lines but filters by inConstructTemplate flag
+    // For large queries, this could be optimized by tracking line ranges during tokenization
+    for (let l = 0; l < this.getDoc().lineCount(); ++l) {
+      const lineToken: Token = this.getTokenAt({ line: l, ch: this.getDoc().getLine(l).length }, true);
+      const lineState = lineToken.state as TokenizerState;
+
+      // Only mark variables in the CONSTRUCT template
+      if (lineState.queryType === "CONSTRUCT" && lineState.inConstructTemplate) {
+        const line = this.getDoc().getLine(l);
+        // Check if this line contains any undefined variable (use word boundary to avoid partial matches)
+        for (const undefinedVar of undefinedVars) {
+          // Escape special regex characters in variable name
+          // Use negative lookbehind/lookahead to ensure we match the full variable name
+          // Variables can be followed by whitespace, punctuation, or end of line
+          const escapedVar = undefinedVar.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          const varRegex = new RegExp(`${escapedVar}(?![a-zA-Z0-9_])`);
+          if (varRegex.test(line)) {
+            const warningEl = drawSvgStringAsElement(imgs.warning);
+            warningEl.className = "constructVariableWarning";
+            tooltip(
+              this,
+              warningEl,
+              escape(`Variable ${undefinedVar} is used in CONSTRUCT but not defined in WHERE clause`),
+            );
+            this.setGutterMarker(l, "gutterConstructWarning", warningEl);
+            break; // Only one marker per line
+          }
+        }
+      }
+    }
+  }
+
   /**
    * Token management
    */
@@ -875,6 +1011,10 @@ export class Yasqe extends CodeMirror {
    */
   public query(config?: Sparql.YasqeAjaxConfig) {
     if (this.config.queryingDisabled) return Promise.reject("Querying is disabled.");
+    // Auto-format query before execution if enabled in persistent config
+    if (this.persistentConfig?.autoformatOnQuery) {
+      this.format();
+    }
     // Abort previous request
     this.abortQuery();
     return Sparql.executeQuery(this, config);
@@ -1081,10 +1221,14 @@ export interface Config extends Partial<CodeMirror.EditorConfiguration> {
   editorHeight: string;
   queryingDisabled: string | undefined; // The string will be the message displayed when hovered
   prefixCcApi: string; // the suggested default prefixes URL API getter
+  showFormatButton: boolean; // Show a button to format the query
+  checkConstructVariables: boolean; // Check for undefined variables in CONSTRUCT queries
 }
 export interface PersistentConfig {
   query: string;
   editorHeight: string;
+  formatterType?: "sparql-formatter" | "legacy"; // Which formatter to use
+  autoformatOnQuery?: boolean; // Auto-format query on execution
 }
 // export var _Yasqe = _Yasqe;
 

package/src/prefixFold.ts

@@ -15,6 +15,7 @@ export function findFirstPrefixLine(yasqe: Yasqe) {
 
 export function findFirstPrefix(yasqe: Yasqe, line: number, startFromCharIndex = 0, lineText?: string) {
   if (!lineText) lineText = yasqe.getDoc().getLine(line);
+  if (!lineText) return undefined;
   lineText = lineText.toUpperCase();
   const charIndex = lineText.indexOf(PREFIX_KEYWORD, startFromCharIndex);
   if (charIndex >= 0) {

package/src/prefixUtils.ts

@@ -30,7 +30,10 @@ export function removePrefixes(yasqe: Yasqe, prefixes: Prefixes) {
     yasqe.setValue(
       yasqe
         .getValue()
-        .replace(new RegExp("PREFIX\\s*" + pref + ":\\s*" + escapeRegex("<" + prefixes[pref] + ">") + "\\s*", "ig"), "")
+        .replace(
+          new RegExp("PREFIX\\s*" + pref + ":\\s*" + escapeRegex("<" + prefixes[pref] + ">") + "\\s*", "ig"),
+          "",
+        ),
     );
   }
   yasqe.collapsePrefixes(false);
@@ -48,7 +51,7 @@ export function getPrefixesFromQuery(yasqe: Yasqe): Token["state"]["prefixes"] {
   //as https://github.com/TriplyDB/YASGUI/issues/84)
   return yasqe.getTokenAt(
     { line: yasqe.getDoc().lastLine(), ch: yasqe.getDoc().getLine(yasqe.getDoc().lastLine()).length },
-    true
+    true,
   ).state.prefixes;
 }
 

package/src/scss/buttons.scss

@@ -212,6 +212,26 @@
       }
     }
 
+    .yasqe_formatButton {
+      display: inline-block;
+      border: none;
+      background: none;
+      cursor: pointer;
+      padding: 0;
+      margin-left: 5px;
+
+      svg {
+        height: 25px;
+        width: 25px;
+      }
+
+      &:hover {
+        svg {
+          fill: #337ab7;
+        }
+      }
+    }
+
     .yasqe_fullscreenButton {
       display: inline-block;
       border: none;

package/src/scss/yasqe.scss

@@ -49,6 +49,18 @@
     }
   }
 
+  .constructVariableWarning {
+    width: 13px;
+    height: 13px;
+    margin-top: 2px;
+    margin-left: 2px;
+    svg {
+      g {
+        fill: orange;
+      }
+    }
+  }
+
   .yasqe_tooltip {
     background: #333;
     background: rgba(0, 0, 0, 0.8);

package/src/sparql-formatter.d.ts

@@ -0,0 +1,10 @@
+declare module "sparql-formatter" {
+  export interface SpfmtFormatter {
+    format: (sparql: string, formattingMode?: string, indentDepth?: number) => string;
+    parseSparql: (sparql: string) => unknown;
+    parseSparqlAsCompact: (sparql: string) => unknown;
+    formatAst: (ast: unknown, indentDepth?: number) => string;
+  }
+
+  export const spfmt: SpfmtFormatter;
+}