@matdata/yasr 5.2.0 → 5.4.0

package/src/plugins/table/index.ts

@@ -28,7 +28,9 @@ export interface PluginConfig {
 export interface PersistentConfig {
   pageSize?: number;
   compact?: boolean;
-  isEllipsed?: boolean;
+  isCompactView?: boolean;
+  showUriPrefixes?: boolean;
+  showDatatypes?: boolean;
 }
 
 type DataRow = [number, ...(Parser.BindingValue | "")[]];
@@ -48,7 +50,9 @@ export default class Table implements Plugin<PluginConfig> {
   private tableFilterField: HTMLInputElement | undefined;
   private tableSizeField: HTMLSelectElement | undefined;
   private tableCompactSwitch: HTMLInputElement | undefined;
-  private tableEllipseSwitch: HTMLInputElement | undefined;
+  private tableCompactViewSwitch: HTMLInputElement | undefined;
+  private tableUriPrefixSwitch: HTMLInputElement | undefined;
+  private tableDatatypeSwitch: HTMLInputElement | undefined;
   private tableResizer:
     | {
         reset: (options: {
@@ -57,7 +61,7 @@ export default class Table implements Plugin<PluginConfig> {
           partialRefresh?: boolean;
           headerOnly?: boolean;
         }) => void;
-        onResize: () => {};
+        onResize: () => void;
       }
     | undefined;
   public helpReference = "https://docs.triply.cc/yasgui/#table";
@@ -109,11 +113,40 @@ export default class Table implements Plugin<PluginConfig> {
     return bindings.map((binding, rowId) => [rowId + 1, ...vars.map((variable) => binding[variable] ?? "")]);
   }
 
+  private getMarkdownTable(): string {
+    if (!this.yasr.results) return "";
+    const bindings = this.yasr.results.getBindings();
+    if (!bindings) return "";
+    const vars = this.yasr.results.getVariables();
+
+    // Helper to escape special characters in markdown (backslashes and pipes)
+    const escapeMarkdown = (str: string) => str.replace(/\\/g, "\\\\").replace(/\|/g, "\\|");
+
+    // Helper to get plain text value from binding
+    const getPlainValue = (binding: Parser.BindingValue | ""): string => {
+      if (binding === "") return "";
+      return escapeMarkdown(binding.value);
+    };
+
+    // Create header row
+    let markdown = "| " + vars.map(escapeMarkdown).join(" | ") + " |\n";
+    // Create separator row
+    markdown += "| " + vars.map(() => "---").join(" | ") + " |\n";
+    // Create data rows
+    bindings.forEach((binding) => {
+      const row = vars.map((variable) => getPlainValue(binding[variable] ?? ""));
+      markdown += "| " + row.join(" | ") + " |\n";
+    });
+
+    return markdown;
+  }
+
   private getUriLinkFromBinding(binding: Parser.BindingValue, prefixes?: { [key: string]: string }) {
     const href = sanitize(binding.value);
     let visibleString = href;
     let prefixed = false;
-    if (prefixes) {
+    // Apply URI prefixing if enabled (default true)
+    if (this.persistentConfig.showUriPrefixes !== false && prefixes) {
       for (const prefixLabel in prefixes) {
         if (visibleString.indexOf(prefixes[prefixLabel]) == 0) {
           visibleString = prefixLabel + ":" + href.substring(prefixes[prefixLabel].length);
@@ -146,11 +179,14 @@ export default class Table implements Plugin<PluginConfig> {
     // Return now when in compact mode.
     if (this.persistentConfig.compact) return stringRepresentation;
 
-    if (literalBinding["xml:lang"]) {
-      stringRepresentation = `"${stringRepresentation}"<sup>@${literalBinding["xml:lang"]}</sup>`;
-    } else if (literalBinding.datatype) {
-      const dataType = this.getUriLinkFromBinding({ type: "uri", value: literalBinding.datatype }, prefixes);
-      stringRepresentation = `"${stringRepresentation}"<sup>^^${dataType}</sup>`;
+    // Show datatypes if enabled (default true)
+    if (this.persistentConfig.showDatatypes !== false) {
+      if (literalBinding["xml:lang"]) {
+        stringRepresentation = `"${stringRepresentation}"<sup>@${literalBinding["xml:lang"]}</sup>`;
+      } else if (literalBinding.datatype) {
+        const dataType = this.getUriLinkFromBinding({ type: "uri", value: literalBinding.datatype }, prefixes);
+        stringRepresentation = `"${stringRepresentation}"<sup>^^${dataType}</sup>`;
+      }
     }
     return stringRepresentation;
   }
@@ -220,18 +256,18 @@ export default class Table implements Plugin<PluginConfig> {
     this.tableEl.style.removeProperty("width");
     this.tableEl.style.width = this.tableEl.clientWidth + "px";
     const widths = Array.from(this.tableEl.querySelectorAll("th")).map((h) => h.offsetWidth - 26);
-    this.tableResizer = new ColumnResizer.default(this.tableEl, {
+    this.tableResizer = new ColumnResizer(this.tableEl, {
       widths: this.persistentConfig.compact === true ? widths : [this.getSizeFirstColumn(), ...widths.slice(1)],
       partialRefresh: true,
-      onResize: this.persistentConfig.isEllipsed !== false && this.setEllipsisHandlers,
+      onResize: this.persistentConfig.isCompactView !== false && this.setEllipsisHandlers,
       headerOnly: true,
     });
     // DataTables uses the rendered style to decide the widths of columns.
-    // Before a draw remove the ellipseTable styling
-    if (this.persistentConfig.isEllipsed !== false) {
+    // Before a draw remove the compactTable styling
+    if (this.persistentConfig.isCompactView !== false) {
       this.dataTable?.on("preDraw", () => {
         this.tableResizer?.reset({ disable: true });
-        removeClass(this.tableEl, "ellipseTable");
+        removeClass(this.tableEl, "compactTable");
         this.tableEl?.style.removeProperty("width");
         this.tableEl?.style.setProperty("width", this.tableEl.clientWidth + "px");
         return true; // Indicate it should re-render
@@ -252,8 +288,8 @@ export default class Table implements Plugin<PluginConfig> {
           onResize: this.setEllipsisHandlers,
           headerOnly: true,
         });
-        // Re-add the ellipsis
-        addClass(this.tableEl, "ellipseTable");
+        // Re-add the compact styling
+        addClass(this.tableEl, "compactTable");
         // Check if cells need the ellipsisHandlers
         this.setEllipsisHandlers();
       });
@@ -261,8 +297,8 @@ export default class Table implements Plugin<PluginConfig> {
 
     this.drawControls();
     // Draw again but with the events
-    if (this.persistentConfig.isEllipsed !== false) {
-      addClass(this.tableEl, "ellipseTable");
+    if (this.persistentConfig.isCompactView !== false) {
+      addClass(this.tableEl, "compactTable");
       this.setEllipsisHandlers();
     }
     // if (this.tableEl.clientWidth > width) this.tableEl.parentElement?.style.setProperty("overflow", "hidden");
@@ -307,13 +343,53 @@ export default class Table implements Plugin<PluginConfig> {
     this.draw(this.persistentConfig);
     this.yasr.storePluginConfig("table", this.persistentConfig);
   };
-  private handleSetEllipsisToggle = (event: Event) => {
+  private handleSetCompactViewToggle = (event: Event) => {
+    // Store in persistentConfig
+    this.persistentConfig.isCompactView = (event.target as HTMLInputElement).checked;
+    // Update the table
+    this.draw(this.persistentConfig);
+    this.yasr.storePluginConfig("table", this.persistentConfig);
+  };
+  private handleSetUriPrefixToggle = (event: Event) => {
+    // Store in persistentConfig
+    this.persistentConfig.showUriPrefixes = (event.target as HTMLInputElement).checked;
+    // Update the table
+    this.draw(this.persistentConfig);
+    this.yasr.storePluginConfig("table", this.persistentConfig);
+  };
+  private handleSetDatatypeToggle = (event: Event) => {
     // Store in persistentConfig
-    this.persistentConfig.isEllipsed = (event.target as HTMLInputElement).checked;
+    this.persistentConfig.showDatatypes = (event.target as HTMLInputElement).checked;
     // Update the table
     this.draw(this.persistentConfig);
     this.yasr.storePluginConfig("table", this.persistentConfig);
   };
+  private handleCopyMarkdown = async (event: Event) => {
+    const markdown = this.getMarkdownTable();
+    const button = event.target as HTMLButtonElement;
+
+    // Prevent multiple rapid clicks
+    if (button.disabled) return;
+    button.disabled = true;
+
+    const originalText = "Copy as Markdown";
+    try {
+      await navigator.clipboard.writeText(markdown);
+      // Provide visual feedback
+      button.textContent = "Copied!";
+      setTimeout(() => {
+        button.textContent = originalText;
+        button.disabled = false;
+      }, 2000);
+    } catch (err) {
+      // Show user-friendly error
+      button.textContent = "Copy failed";
+      setTimeout(() => {
+        button.textContent = originalText;
+        button.disabled = false;
+      }, 2000);
+    }
+  };
   /**
    * Draws controls on each update
    */
@@ -339,21 +415,53 @@ export default class Table implements Plugin<PluginConfig> {
     this.tableCompactSwitch.defaultChecked = !!this.persistentConfig.compact;
     this.tableControls.appendChild(toggleWrapper);
 
-    // Ellipsis switch
-    const ellipseToggleWrapper = document.createElement("div");
-    const ellipseSwitchComponent = document.createElement("label");
-    const ellipseTextComponent = document.createElement("span");
-    ellipseTextComponent.innerText = "Ellipse";
-    addClass(ellipseTextComponent, "label");
-    ellipseSwitchComponent.appendChild(ellipseTextComponent);
-    addClass(ellipseSwitchComponent, "switch");
-    ellipseToggleWrapper.appendChild(ellipseSwitchComponent);
-    this.tableEllipseSwitch = document.createElement("input");
-    ellipseSwitchComponent.addEventListener("change", this.handleSetEllipsisToggle);
-    this.tableEllipseSwitch.type = "checkbox";
-    ellipseSwitchComponent.appendChild(this.tableEllipseSwitch);
-    this.tableEllipseSwitch.defaultChecked = this.persistentConfig.isEllipsed !== false;
-    this.tableControls.appendChild(ellipseToggleWrapper);
+    // Compact view switch
+    const compactViewToggleWrapper = document.createElement("div");
+    const compactViewSwitchComponent = document.createElement("label");
+    const compactViewTextComponent = document.createElement("span");
+    compactViewTextComponent.innerText = "Compact";
+    addClass(compactViewTextComponent, "label");
+    compactViewSwitchComponent.appendChild(compactViewTextComponent);
+    addClass(compactViewSwitchComponent, "switch");
+    compactViewToggleWrapper.appendChild(compactViewSwitchComponent);
+    this.tableCompactViewSwitch = document.createElement("input");
+    compactViewSwitchComponent.addEventListener("change", this.handleSetCompactViewToggle);
+    this.tableCompactViewSwitch.type = "checkbox";
+    compactViewSwitchComponent.appendChild(this.tableCompactViewSwitch);
+    this.tableCompactViewSwitch.defaultChecked = this.persistentConfig.isCompactView !== false;
+    this.tableControls.appendChild(compactViewToggleWrapper);
+
+    // URI Prefix switch
+    const uriPrefixToggleWrapper = document.createElement("div");
+    const uriPrefixSwitchComponent = document.createElement("label");
+    const uriPrefixTextComponent = document.createElement("span");
+    uriPrefixTextComponent.innerText = "Prefixes";
+    addClass(uriPrefixTextComponent, "label");
+    uriPrefixSwitchComponent.appendChild(uriPrefixTextComponent);
+    addClass(uriPrefixSwitchComponent, "switch");
+    uriPrefixToggleWrapper.appendChild(uriPrefixSwitchComponent);
+    this.tableUriPrefixSwitch = document.createElement("input");
+    uriPrefixSwitchComponent.addEventListener("change", this.handleSetUriPrefixToggle);
+    this.tableUriPrefixSwitch.type = "checkbox";
+    uriPrefixSwitchComponent.appendChild(this.tableUriPrefixSwitch);
+    this.tableUriPrefixSwitch.defaultChecked = this.persistentConfig.showUriPrefixes !== false;
+    this.tableControls.appendChild(uriPrefixToggleWrapper);
+
+    // Datatype switch
+    const datatypeToggleWrapper = document.createElement("div");
+    const datatypeSwitchComponent = document.createElement("label");
+    const datatypeTextComponent = document.createElement("span");
+    datatypeTextComponent.innerText = "Datatypes";
+    addClass(datatypeTextComponent, "label");
+    datatypeSwitchComponent.appendChild(datatypeTextComponent);
+    addClass(datatypeSwitchComponent, "switch");
+    datatypeToggleWrapper.appendChild(datatypeSwitchComponent);
+    this.tableDatatypeSwitch = document.createElement("input");
+    datatypeSwitchComponent.addEventListener("change", this.handleSetDatatypeToggle);
+    this.tableDatatypeSwitch.type = "checkbox";
+    datatypeSwitchComponent.appendChild(this.tableDatatypeSwitch);
+    this.tableDatatypeSwitch.defaultChecked = this.persistentConfig.showDatatypes !== false;
+    this.tableControls.appendChild(datatypeToggleWrapper);
 
     // Create table filter
     this.tableFilterField = document.createElement("input");
@@ -363,6 +471,14 @@ export default class Table implements Plugin<PluginConfig> {
     this.tableControls.appendChild(this.tableFilterField);
     this.tableFilterField.addEventListener("keyup", this.handleTableSearch);
 
+    // Create markdown copy button
+    const markdownButton = document.createElement("button");
+    markdownButton.className = "copyMarkdownBtn";
+    markdownButton.textContent = "Copy as Markdown";
+    markdownButton.setAttribute("aria-label", "Copy table as markdown");
+    markdownButton.addEventListener("click", this.handleCopyMarkdown);
+    this.tableControls.appendChild(markdownButton);
+
     // Create page wrapper
     const pageSizerWrapper = document.createElement("div");
     pageSizerWrapper.className = "pageSizeWrapper";
@@ -413,8 +529,12 @@ export default class Table implements Plugin<PluginConfig> {
     this.tableSizeField = undefined;
     this.tableCompactSwitch?.removeEventListener("change", this.handleSetCompactToggle);
     this.tableCompactSwitch = undefined;
-    this.tableEllipseSwitch?.removeEventListener("change", this.handleSetEllipsisToggle);
-    this.tableEllipseSwitch = undefined;
+    this.tableCompactViewSwitch?.removeEventListener("change", this.handleSetCompactViewToggle);
+    this.tableCompactViewSwitch = undefined;
+    this.tableUriPrefixSwitch?.removeEventListener("change", this.handleSetUriPrefixToggle);
+    this.tableUriPrefixSwitch = undefined;
+    this.tableDatatypeSwitch?.removeEventListener("change", this.handleSetDatatypeToggle);
+    this.tableDatatypeSwitch = undefined;
     // Empty controls
     while (this.tableControls?.firstChild) this.tableControls.firstChild.remove();
     this.tableControls?.remove();