@matdata/yasr 5.3.0 → 5.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasr",
   "description": "Yet Another SPARQL Resultset GUI",
-  "version": "5.3.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/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/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;
-        }
       }
     }
   }

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: {
@@ -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;
   }
@@ -223,15 +259,15 @@ export default class Table implements Plugin<PluginConfig> {
     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();