@matdata/yasr 5.2.0 → 5.4.0

package/package.json

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

package/src/bin/takeScreenshot.js

@@ -227,10 +227,9 @@ const getHtml = (plugin) => `
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.js"></script>
   <style>
     body {
-	 font-family: 'Roboto', sans-serif;
+	 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	}
 	</style>
-  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
   <link rel="stylesheet" href="build/yasr.min.css" />
   <link rel="stylesheet" href="build/pro-gallery.min.css">
   <link rel="stylesheet" href="build/pro-geo.min.css">
@@ -302,7 +301,7 @@ const getScreenWidth = (plugin) => {
 };
 
 let staticFileServer = new static.Server("./");
-function setupServer () {
+function setupServer() {
   return new Promise((resolve, reject) => {
     var server = http
       .createServer(function (request, response) {
@@ -319,10 +318,10 @@ function setupServer () {
       .on("error", (e) => reject(e));
   });
 }
-function wait (time) {
+function wait(time) {
   return new Promise((resolve) => setTimeout(resolve, time));
 }
-function waitForImagesToLoad (page) {
+function waitForImagesToLoad(page) {
   return page.evaluate(() => {
     const selectors = Array.from(document.querySelectorAll("img"));
     return Promise.all(
@@ -332,7 +331,7 @@ function waitForImagesToLoad (page) {
           img.addEventListener("load", resolve);
           img.addEventListener("error", reject);
         });
-      })
+      }),
     );
   });
 }

package/src/bindingsToCsv.ts

@@ -13,6 +13,6 @@ export default function (result: Parser.SparqlResults) {
       ? querySolutions.map((s) => {
           return mapValues(s, (binding) => binding.value);
         })
-      : []
+      : [],
   );
 }

package/src/parsers/xml.ts

@@ -57,7 +57,7 @@ function parseBoolean(node: Element) {
 }
 export default function (
   xmlString: string,
-  postProcessBinding: Parser.PostProcessBinding
+  postProcessBinding: Parser.PostProcessBinding,
 ): Parser.SparqlResults | undefined {
   if (typeof xmlString !== "string") return;
   const domParser = new DOMParser();

package/src/plugins/table/__tests__/table-test.ts

@@ -0,0 +1,246 @@
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import Yasr from "../../../index";
+import Parser from "../../../parsers";
+
+describe("Table Plugin", () => {
+  describe("Markdown Generation", () => {
+    it("should generate markdown table from simple results", () => {
+      const container = document.createElement("div");
+      const yasr = new Yasr(container);
+
+      // Mock SPARQL results
+      const mockResults = {
+        head: {
+          vars: ["subject", "predicate", "object"],
+        },
+        results: {
+          bindings: [
+            {
+              subject: { type: "uri", value: "http://example.org/resource/1" } as Parser.BindingValue,
+              predicate: { type: "uri", value: "http://example.org/name" } as Parser.BindingValue,
+              object: { type: "literal", value: "Test Name" } as Parser.BindingValue,
+            },
+            {
+              subject: { type: "uri", value: "http://example.org/resource/2" } as Parser.BindingValue,
+              predicate: { type: "uri", value: "http://example.org/name" } as Parser.BindingValue,
+              object: { type: "literal", value: "Another Name" } as Parser.BindingValue,
+            },
+          ],
+        },
+      };
+
+      yasr.setResponse(
+        {
+          response: JSON.stringify(mockResults),
+          status: 200,
+          contentType: "application/sparql-results+json",
+        },
+        0,
+      );
+
+      const tablePlugin = yasr.plugins["table"];
+      // @ts-ignore - accessing private method for testing
+      const markdown = tablePlugin.getMarkdownTable();
+
+      expect(markdown).to.be.a("string");
+      expect(markdown).to.include("| subject | predicate | object |");
+      expect(markdown).to.include("| --- | --- | --- |");
+      expect(markdown).to.include("http://example.org/resource/1");
+      expect(markdown).to.include("Test Name");
+    });
+
+    it("should escape pipe characters in markdown values", () => {
+      const container = document.createElement("div");
+      const yasr = new Yasr(container);
+
+      // Mock SPARQL results with pipe character
+      const mockResults = {
+        head: {
+          vars: ["value"],
+        },
+        results: {
+          bindings: [
+            {
+              value: { type: "literal", value: "text|with|pipes" } as Parser.BindingValue,
+            },
+          ],
+        },
+      };
+
+      yasr.setResponse(
+        {
+          response: JSON.stringify(mockResults),
+          status: 200,
+          contentType: "application/sparql-results+json",
+        },
+        0,
+      );
+
+      const tablePlugin = yasr.plugins["table"];
+      // @ts-ignore - accessing private method for testing
+      const markdown = tablePlugin.getMarkdownTable();
+
+      expect(markdown).to.include("text\\|with\\|pipes");
+    });
+  });
+
+  describe("URI Prefixing", () => {
+    it("should show URI prefixes when enabled", () => {
+      const container = document.createElement("div");
+      const yasr = new Yasr(container, {
+        prefixes: {
+          ex: "http://example.org/",
+        },
+      });
+
+      const mockResults = {
+        head: {
+          vars: ["resource"],
+        },
+        results: {
+          bindings: [
+            {
+              resource: { type: "uri", value: "http://example.org/test" } as Parser.BindingValue,
+            },
+          ],
+        },
+      };
+
+      yasr.setResponse(
+        {
+          response: JSON.stringify(mockResults),
+          status: 200,
+          contentType: "application/sparql-results+json",
+        },
+        0,
+      );
+
+      const tablePlugin = yasr.plugins["table"];
+      // Draw with prefixes enabled (default)
+      tablePlugin.draw({ showUriPrefixes: true });
+
+      const tableHtml = container.innerHTML;
+      expect(tableHtml).to.include("ex:test");
+    });
+
+    it("should show full URIs when prefixing disabled", () => {
+      const container = document.createElement("div");
+      const yasr = new Yasr(container, {
+        prefixes: {
+          ex: "http://example.org/",
+        },
+      });
+
+      const mockResults = {
+        head: {
+          vars: ["resource"],
+        },
+        results: {
+          bindings: [
+            {
+              resource: { type: "uri", value: "http://example.org/test" } as Parser.BindingValue,
+            },
+          ],
+        },
+      };
+
+      yasr.setResponse(
+        {
+          response: JSON.stringify(mockResults),
+          status: 200,
+          contentType: "application/sparql-results+json",
+        },
+        0,
+      );
+
+      const tablePlugin = yasr.plugins["table"];
+      // Draw with prefixes disabled
+      tablePlugin.draw({ showUriPrefixes: false });
+
+      const tableHtml = container.innerHTML;
+      expect(tableHtml).to.include("http://example.org/test");
+      expect(tableHtml).to.not.include("ex:test");
+    });
+  });
+
+  describe("Datatype Display", () => {
+    it("should show datatypes when enabled", () => {
+      const container = document.createElement("div");
+      const yasr = new Yasr(container);
+
+      const mockResults = {
+        head: {
+          vars: ["number"],
+        },
+        results: {
+          bindings: [
+            {
+              number: {
+                type: "literal",
+                value: "42",
+                datatype: "http://www.w3.org/2001/XMLSchema#integer",
+              } as Parser.BindingValue,
+            },
+          ],
+        },
+      };
+
+      yasr.setResponse(
+        {
+          response: JSON.stringify(mockResults),
+          status: 200,
+          contentType: "application/sparql-results+json",
+        },
+        0,
+      );
+
+      const tablePlugin = yasr.plugins["table"];
+      // Draw with datatypes enabled (default)
+      tablePlugin.draw({ showDatatypes: true });
+
+      const tableHtml = container.innerHTML;
+      expect(tableHtml).to.include("^^");
+      expect(tableHtml).to.include("XMLSchema#integer");
+    });
+
+    it("should hide datatypes when disabled", () => {
+      const container = document.createElement("div");
+      const yasr = new Yasr(container);
+
+      const mockResults = {
+        head: {
+          vars: ["number"],
+        },
+        results: {
+          bindings: [
+            {
+              number: {
+                type: "literal",
+                value: "42",
+                datatype: "http://www.w3.org/2001/XMLSchema#integer",
+              } as Parser.BindingValue,
+            },
+          ],
+        },
+      };
+
+      yasr.setResponse(
+        {
+          response: JSON.stringify(mockResults),
+          status: 200,
+          contentType: "application/sparql-results+json",
+        },
+        0,
+      );
+
+      const tablePlugin = yasr.plugins["table"];
+      // Draw with datatypes disabled
+      tablePlugin.draw({ showDatatypes: false });
+
+      const tableHtml = container.innerHTML;
+      expect(tableHtml).to.not.include("^^");
+      expect(tableHtml).to.not.include("XMLSchema#integer");
+    });
+  });
+});

package/src/plugins/table/column-resizer.d.ts

@@ -0,0 +1,29 @@
+declare module "column-resizer" {
+  interface ColumnResizerOptions {
+    liveDrag?: boolean;
+    draggingClass?: string;
+    gripInnerHtml?: string;
+    minWidth?: number;
+    headerOnly?: boolean;
+    hoverCursor?: string;
+    dragCursor?: string;
+    resizeMode?: "fit" | "overflow" | "flex";
+    widths?: number[];
+    partialRefresh?: boolean;
+    onResize?: (() => void) | boolean;
+    [key: string]: any;
+  }
+
+  interface ColumnResizerInstance {
+    reset(options: { disable: boolean; onResize?: () => void; partialRefresh?: boolean; headerOnly?: boolean }): void;
+    onResize: () => void;
+  }
+
+  class ColumnResizer implements ColumnResizerInstance {
+    constructor(table: HTMLElement, options?: ColumnResizerOptions);
+    reset(options: { disable: boolean; onResize?: () => void; partialRefresh?: boolean; headerOnly?: boolean }): void;
+    onResize: () => void;
+  }
+
+  export default ColumnResizer;
+}

package/src/plugins/table/index.scss

@@ -28,15 +28,34 @@ Delimiters used by datatables
       align-items: center;
       margin-right: 10px;
     }
+    .copyMarkdownBtn {
+      margin-right: 10px;
+      padding: 4px 8px;
+      cursor: pointer;
+      border: 1px solid var(--yasgui-border-color, #ddd);
+      background-color: var(--yasgui-bg-secondary, #f7f7f7);
+      color: var(--yasgui-text-primary, #000);
+      border-radius: 3px;
+      font-size: 0.9em;
+      white-space: nowrap;
+
+      &:hover {
+        background-color: var(--yasgui-bg-tertiary, #eee);
+      }
+
+      &:active {
+        background-color: var(--yasgui-bg-primary, #fff);
+      }
+    }
   }
-  .dataTable.ellipseTable {
+  .dataTable.compactTable {
     white-space: nowrap;
     div:not(.expanded) {
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
-  .dataTable:not(.ellipseTable) {
+  .dataTable:not(.compactTable) {
     div:not(.expanded) {
       word-break: break-all;
     }
@@ -52,7 +71,7 @@ Delimiters used by datatables
     }
   }
 
-  .dataTables_wrapper {
+  .dt-container {
     font-size: 0.9em;
     min-width: 100%;
     .grip-container {
@@ -72,7 +91,7 @@ Delimiters used by datatables
       }
 
       tbody tr:hover {
-        background-color: #f9f9f9;
+        background-color: var(--yasgui-bg-tertiary, #f9f9f9);
       }
 
       thead tr th {
@@ -92,7 +111,7 @@ Delimiters used by datatables
           padding-right: 18px; //space for sort icon
         }
         &:hover {
-          background-color: #f9f9f9;
+          background-color: var(--yasgui-tab-bg, #f9f9f9);
         }
       }
 
@@ -119,35 +138,29 @@ Delimiters used by datatables
     /**
       Selector for pagination element
     */
-    div.dataTables_paginate.paging_simple_numbers {
-      a.paginate_button {
+    div.dt-paging {
+      button.dt-paging-button {
         border: none;
         background: transparent;
+        color: var(--yasgui-text-secondary, #505050);
 
         // When the buttons are disabled show the default YASR disabled color
-        .disabled {
-          color: #505050;
+        &.disabled {
+          color: var(--yasgui-text-muted, #999) !important;
         }
 
         &.current {
-          border: none;
-          background: transparent;
           text-decoration: underline !important; // dataTables made the text-decoration important
+          color: var(--yasgui-accent-color, #337ab7);
         }
 
         &:hover {
-          border: none;
-          background: transparent;
-
           // Don't override the disabled grayed out style
           &:not(.disabled) {
-            color: black !important; // dataTables made the color important
+            font-weight: bold;
+            color: var(--yasgui-text-secondary, #505050) !important;
           }
         }
-
-        &:active {
-          box-shadow: none;
-        }
       }
     }
   }