@ldforge/renderers 0.1.4 → 0.1.6

package/dist/table.js

@@ -0,0 +1,268 @@
+import { parseColumnWidths, validColumnWidths } from './table-widths.js';
+import { translate, resolveLocale, createSvgIcon, graphToBindings, } from '@ldforge/core';
+import { createResourceInspector } from './resource-inspector.js';
+export function createTableRenderer(options = {}) {
+    if (options.columnWidths && !validColumnWidths(options.columnWidths))
+        throw new Error('columnWidths must contain positive percentages totaling 100.');
+    return {
+        id: 'table',
+        wizard: {
+            description: {
+                en: 'Accepts SELECT bindings or RDF graph results.',
+                nl: 'Voor SELECT-bindings of RDF-graafresultaten.',
+            },
+            options: [
+                {
+                    key: 'columns',
+                    aliases: ['colums'],
+                    label: {
+                        en: 'Column widths (e.g. 40%,40%,20%)',
+                        nl: 'Kolombreedtes (bijv. 40%,40%,20%)',
+                    },
+                    type: 'text',
+                    defaultValue: '',
+                },
+            ],
+            bindings: [],
+        },
+        documentationUrl: 'https://ldforge.nl/plugins.html#table',
+        icon: createSvgIcon(['M3 3h18v18H3zM3 9h18M9 9v12']),
+        label: { en: 'Table', nl: 'Tabel' },
+        supports: (result) => result.kind === 'bindings' || result.kind === 'graph',
+        render(container, result, context) {
+            const graph = result.kind === 'graph' ? result : undefined;
+            if (result.kind === 'graph')
+                result = graphToBindings(result);
+            if (result.kind !== 'bindings')
+                return;
+            const doc = container.ownerDocument;
+            const table = doc.createElement('table');
+            table.className = 'ldforge-table';
+            table.style.tableLayout = 'fixed';
+            table.style.width = '100%';
+            const configured = context?.directives?.columns ?? context?.directives?.colums;
+            const requested = configured === undefined
+                ? options.columnWidths
+                : parseColumnWidths(configured);
+            const invalid = (configured !== undefined && !requested) ||
+                (requested !== undefined &&
+                    requested.length !== result.variables.length);
+            const widths = !invalid && requested
+                ? requested
+                : result.variables.map(() => 100 / result.variables.length);
+            const columns = doc.createElement('colgroup');
+            for (const width of widths) {
+                const column = doc.createElement('col');
+                column.style.width = `${width}%`;
+                columns.append(column);
+            }
+            table.append(columns);
+            const caption = table.createCaption();
+            const locale = context?.locale ?? resolveLocale();
+            caption.textContent = translate(locale, result.bindings.length === 1 ? 'resultOne' : 'resultMany', { count: new Intl.NumberFormat(locale).format(result.bindings.length) });
+            const data = result;
+            const inspector = createResourceInspector(container, {
+                locale,
+                ...(graph ? { graph } : {}),
+                ...(options.loadResource ? { loadResource: options.loadResource } : {}),
+            });
+            const controls = doc.createElement('div');
+            controls.className = 'ldforge-table-controls';
+            controls.style.cssText =
+                'display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin-bottom:12px';
+            const search = doc.createElement('input');
+            search.type = 'search';
+            search.style.cssText =
+                'flex:1 1 180px;min-width:0;max-width:100%;box-sizing:border-box';
+            search.placeholder =
+                locale === 'nl' ? 'Zoeken in alle kolommen' : 'Search all columns';
+            search.setAttribute('aria-label', search.placeholder);
+            controls.append(search);
+            const viewport = doc.createElement('div');
+            viewport.className = 'ldforge-table-viewport';
+            const virtual = data.bindings.length > (options.virtualizeThreshold ?? 500);
+            const height = Math.max(120, options.viewportHeight ?? 480);
+            if (virtual) {
+                viewport.style.maxHeight = `${height}px`;
+                viewport.style.overflow = 'auto';
+                viewport.style.overflowAnchor = 'none';
+                viewport.tabIndex = 0;
+                viewport.setAttribute('aria-label', locale === 'nl' ? 'Resultaten' : 'Results');
+            }
+            viewport.append(table);
+            const header = table.createTHead().insertRow();
+            const filters = [];
+            let sortColumn = -1;
+            let direction = 1;
+            let rows = [...data.bindings];
+            const collator = new Intl.Collator(locale, { numeric: true });
+            const headers = [];
+            for (const [index, variable] of data.variables.entries()) {
+                const cell = doc.createElement('th');
+                cell.scope = 'col';
+                if (virtual)
+                    cell.style.top = '0';
+                cell.style.overflowWrap = 'anywhere';
+                const button = doc.createElement('button');
+                button.type = 'button';
+                button.textContent = variable;
+                button.onclick = () => {
+                    direction = sortColumn === index ? -direction : 1;
+                    sortColumn = index;
+                    refresh();
+                };
+                cell.append(button);
+                headers.push(cell);
+                header.append(cell);
+                const filterCell = doc.createElement('label');
+                filterCell.textContent = variable;
+                filterCell.style.cssText =
+                    'display:flex;flex-direction:column;flex:1 1 120px;min-width:0';
+                controls.append(filterCell);
+                const filter = doc.createElement('input');
+                filter.type = 'search';
+                filter.style.width = '100%';
+                filter.style.minWidth = '0';
+                filter.style.boxSizing = 'border-box';
+                filter.setAttribute('aria-label', `${locale === 'nl' ? 'Filter' : 'Filter'} ${variable}`);
+                filter.oninput = () => refresh();
+                filters.push(filter);
+                filterCell.append(filter);
+            }
+            const body = table.createTBody();
+            const rowHeight = 36;
+            function draw() {
+                const scrollTop = viewport.scrollTop;
+                const nextBody = doc.createElement('tbody');
+                const start = virtual
+                    ? Math.max(0, Math.floor((scrollTop - (table.tHead?.offsetHeight ?? 0)) / rowHeight) - 5)
+                    : 0;
+                const first = Math.min(start, rows.length);
+                const end = virtual
+                    ? Math.min(rows.length, first + Math.ceil(height / rowHeight) + 12)
+                    : rows.length;
+                function spacer(size) {
+                    if (!size)
+                        return;
+                    const row = nextBody.insertRow();
+                    row.setAttribute('aria-hidden', 'true');
+                    const cell = row.insertCell();
+                    cell.colSpan = Math.max(1, data.variables.length);
+                    cell.style.cssText = `height:${size}px;padding:0;border:0;line-height:0`;
+                }
+                spacer(first * rowHeight);
+                for (let index = first; index < end; index++) {
+                    const binding = rows[index];
+                    if (!binding)
+                        continue;
+                    const row = nextBody.insertRow();
+                    row.setAttribute('aria-rowindex', String(index + 2));
+                    if (virtual)
+                        row.style.height = `${rowHeight}px`;
+                    for (const variable of data.variables) {
+                        const cell = row.insertCell();
+                        cell.style.overflowWrap = 'anywhere';
+                        cell.style.whiteSpace = 'pre-wrap';
+                        const term = binding[variable];
+                        const value = doc.createElement('span');
+                        value.textContent = term?.value ?? '';
+                        if (term)
+                            value.title = term.value;
+                        if (virtual) {
+                            cell.style.cssText +=
+                                ';height:36px;box-sizing:border-box;padding:5px 12px;line-height:25px';
+                            cell.style.whiteSpace = 'nowrap';
+                            cell.style.overflow = 'hidden';
+                            value.style.cssText =
+                                'display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-height:28px';
+                        }
+                        if (term?.type === 'uri') {
+                            const button = doc.createElement('button');
+                            button.type = 'button';
+                            button.className = 'ldforge-resource-info';
+                            button.style.cssText =
+                                'display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;padding:3px;margin:0;border:0;border-radius:50%;background:transparent;color:inherit;box-shadow:none;cursor:pointer';
+                            const label = `${locale === 'nl' ? 'Informatie over' : 'Information about'} ${term.value}`;
+                            button.setAttribute('aria-label', label);
+                            button.title = label;
+                            const infoIcon = createSvgIcon([
+                                'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z',
+                                'M12 11v6M12 7h.01',
+                            ])(doc);
+                            button.append(infoIcon);
+                            button.onclick = () => {
+                                void inspector.open(term);
+                            };
+                            const resource = doc.createElement('span');
+                            resource.style.cssText =
+                                'display:flex;align-items:baseline;gap:4px;min-width:0';
+                            value.style.minWidth = '0';
+                            value.style.flex = '0 1 auto';
+                            button.style.alignSelf = 'center';
+                            resource.append(value, button);
+                            cell.append(resource);
+                        }
+                        if (term?.type !== 'uri')
+                            cell.append(value);
+                        if (term)
+                            cell.title = term['xml:lang']
+                                ? translate(locale, 'termLanguage', {
+                                    language: term['xml:lang'],
+                                })
+                                : (term.datatype ?? term.type);
+                    }
+                }
+                spacer((rows.length - end) * rowHeight);
+                body.replaceChildren(...nextBody.childNodes);
+                table.setAttribute('aria-rowcount', String(rows.length + 1));
+                if (virtual)
+                    viewport.scrollTop = scrollTop;
+            }
+            function refresh() {
+                const query = search.value.toLocaleLowerCase(locale);
+                rows = data.bindings.filter((binding) => data.variables.every((variable, i) => (binding[variable]?.value ?? '')
+                    .toLocaleLowerCase(locale)
+                    .includes((filters[i]?.value ?? '').toLocaleLowerCase(locale))) &&
+                    (!query ||
+                        data.variables.some((variable) => (binding[variable]?.value ?? '')
+                            .toLocaleLowerCase(locale)
+                            .includes(query))));
+                const variable = data.variables[sortColumn];
+                if (variable !== undefined) {
+                    rows.sort((a, b) => direction *
+                        collator.compare(a[variable]?.value ?? '', b[variable]?.value ?? ''));
+                }
+                headers.forEach((cell, i) => cell.setAttribute('aria-sort', i === sortColumn
+                    ? direction === 1
+                        ? 'ascending'
+                        : 'descending'
+                    : 'none'));
+                caption.textContent =
+                    search.value || filters.some((f) => f.value)
+                        ? `${rows.length} / ${data.bindings.length} ${locale === 'nl' ? 'resultaten' : 'results'}`
+                        : translate(locale, rows.length === 1 ? 'resultOne' : 'resultMany', { count: new Intl.NumberFormat(locale).format(rows.length) });
+                viewport.scrollTop = 0;
+                draw();
+            }
+            search.oninput = () => refresh();
+            viewport.onscroll = () => draw();
+            refresh();
+            if (invalid) {
+                const warning = doc.createElement('p');
+                warning.setAttribute('role', 'alert');
+                warning.textContent =
+                    locale === 'nl'
+                        ? 'Ongeldige kolombreedtes: gebruik één positief percentage per kolom, samen 100%. Gelijke breedtes worden gebruikt.'
+                        : 'Invalid column widths: use one positive percentage per column, totaling 100%. Equal widths are used.';
+                container.replaceChildren(warning, controls, viewport, inspector.element);
+            }
+            else
+                container.replaceChildren(controls, viewport, inspector.element);
+            return () => {
+                viewport.onscroll = null;
+                inspector.destroy();
+            };
+        },
+    };
+}
+//# sourceMappingURL=table.js.map

package/dist/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../src/table.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldforge/renderers",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "LDForge renderers: composable SPARQL tooling",
   "type": "module",
   "license": "EUPL-1.2",
@@ -25,7 +25,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ldforge/core": "^0.1.4"
+    "@ldforge/core": "^0.1.6"
   },
   "repository": {
     "type": "git",

package/src/cards.ts

@@ -74,6 +74,51 @@ export function createCardsRenderer(
 ): ResultRendererPlugin {
   return {
     id: 'cards',
+    wizard: {
+      description: {
+        en: 'Return at least one of the optional card fields.',
+        nl: 'Geef ten minste \u00e9\u00e9n van de optionele kaartvelden terug.',
+      },
+      bindings: [
+        {
+          variable: 'card_title',
+          required: false,
+          description: { en: 'Card heading', nl: 'Titel van de kaart' },
+        },
+        {
+          variable: 'card_text',
+          required: false,
+          description: {
+            en: 'Card description',
+            nl: 'Beschrijving van de kaart',
+          },
+        },
+        {
+          variable: 'card_image',
+          required: false,
+          description: {
+            en: 'HTTP(S) image URL',
+            nl: 'HTTP(S)-URL van afbeelding',
+          },
+        },
+        {
+          variable: 'card_button',
+          required: false,
+          description: {
+            en: 'Button label; requires card_button_url',
+            nl: 'Knoptekst; vereist card_button_url',
+          },
+        },
+        {
+          variable: 'card_button_url',
+          required: false,
+          description: {
+            en: 'HTTP(S) button link',
+            nl: 'HTTP(S)-link voor de knop',
+          },
+        },
+      ],
+    },
     label: { en: 'Cards', nl: 'Kaarten' },
     icon: createSvgIcon(['M3 4h7v16H3zM14 4h7v16h-7zM3 10h7M14 10h7']),
     documentationUrl: 'https://ldforge.nl/plugins.html#cards',

package/src/index.ts

@@ -1,60 +1,27 @@
-import {
-  translate,
-  resolveLocale,
-  createSvgIcon,
-  graphToBindings,
-} from '@ldforge/core';
+import { translate, resolveLocale, createSvgIcon } from '@ldforge/core';
 import type { ResultRendererPlugin } from '@ldforge/core';
 
-export function createTableRenderer(): ResultRendererPlugin {
-  return {
-    id: 'table',
-    documentationUrl: 'https://ldforge.nl/plugins.html#table',
-    icon: createSvgIcon(['M3 3h18v18H3zM3 9h18M9 9v12']),
-    label: { en: 'Table', nl: 'Tabel' },
-    supports: (result) => result.kind === 'bindings' || result.kind === 'graph',
-    render(container, result, context) {
-      if (result.kind === 'graph') result = graphToBindings(result);
-      if (result.kind !== 'bindings') return;
-      const doc = container.ownerDocument;
-      const table = doc.createElement('table');
-      const caption = table.createCaption();
-      const locale = context?.locale ?? resolveLocale();
-      caption.textContent = translate(
-        locale,
-        result.bindings.length === 1 ? 'resultOne' : 'resultMany',
-        { count: new Intl.NumberFormat(locale).format(result.bindings.length) },
-      );
-      const header = table.createTHead().insertRow();
-      for (const variable of result.variables) {
-        const cell = doc.createElement('th');
-        cell.scope = 'col';
-        cell.textContent = variable;
-        header.append(cell);
-      }
-      const body = table.createTBody();
-      for (const binding of result.bindings) {
-        const row = body.insertRow();
-        for (const variable of result.variables) {
-          const cell = row.insertCell();
-          const term = binding[variable];
-          cell.textContent = term?.value ?? '';
-          if (term)
-            cell.title = term['xml:lang']
-              ? translate(locale, 'termLanguage', {
-                  language: term['xml:lang'],
-                })
-              : (term.datatype ?? term.type);
-        }
-      }
-      container.replaceChildren(table);
-    },
-  };
-}
+export { createTableRenderer } from './table.js';
+export type { TableRendererOptions } from './table.js';
+export {
+  createResourceInspector,
+  createResourceLoader,
+} from './resource-inspector.js';
+export type {
+  ResourceInspectorOptions,
+  ResourceLoader,
+} from './resource-inspector.js';
 
 export function createBooleanRenderer(): ResultRendererPlugin {
   return {
     id: 'boolean',
+    wizard: {
+      description: {
+        en: 'Requires a boolean ASK result.',
+        nl: 'Vereist een boolean ASK-resultaat.',
+      },
+      bindings: [],
+    },
     documentationUrl: 'https://ldforge.nl/plugins.html#boolean',
     icon: createSvgIcon(['m5 12 4 4L19 6']),
     label: { en: 'Boolean', nl: 'Booleaans' },
@@ -76,6 +43,13 @@ export function createBooleanRenderer(): ResultRendererPlugin {
 export function createJsonRenderer(): ResultRendererPlugin {
   return {
     id: 'json',
+    wizard: {
+      description: {
+        en: 'Accepts any query result.',
+        nl: 'Geschikt voor elk queryresultaat.',
+      },
+      bindings: [],
+    },
     documentationUrl: 'https://ldforge.nl/plugins.html#json',
     icon: createSvgIcon(['M8 3H6v7l-3 2 3 2v7h2M16 3h2v7l3 2-3 2v7h-2']),
     label: 'JSON',

package/src/resource-inspector.ts

@@ -0,0 +1,142 @@
+import type { BindingTerm, QueryExecutor, QueryResult } from '@ldforge/core';
+
+export type ResourceLoader = (
+  iri: string,
+  signal: AbortSignal,
+) => Promise<QueryResult>;
+export interface ResourceInspectorOptions {
+  readonly locale?: 'en' | 'nl';
+  readonly graph?: Extract<QueryResult, { kind: 'graph' }>;
+  readonly loadResource?: ResourceLoader;
+}
+/** Uses the host transport, credentials and cancellation; never dereferences arbitrary URLs. */
+export function createResourceLoader(executor: QueryExecutor): ResourceLoader {
+  return (iri, signal) => {
+    if (
+      !iri ||
+      [...iri].some((character) => character.charCodeAt(0) <= 32) ||
+      /[<>"{}|^`\\]/u.test(iri) ||
+      !/^[a-z][a-z\d+.-]*:/i.test(iri)
+    )
+      return Promise.reject(new Error('Invalid resource IRI.'));
+    return executor.execute({
+      query: `CONSTRUCT { <${iri}> ?p ?o . ?s ?incoming <${iri}> } WHERE { { <${iri}> ?p ?o } UNION { ?s ?incoming <${iri}> } } LIMIT 200`,
+      signal,
+    });
+  };
+}
+/** A reusable inline panel for tables, cards, networks and maps. */
+export function createResourceInspector(
+  container: HTMLElement,
+  options: ResourceInspectorOptions = {},
+) {
+  const doc = container.ownerDocument;
+  const nl = options.locale === 'nl';
+  const element = doc.createElement('section');
+  element.className = 'ldforge-resource-inspector';
+  element.hidden = true;
+  element.setAttribute(
+    'aria-label',
+    nl ? 'Resource verkennen' : 'Resource inspector',
+  );
+  element.tabIndex = -1;
+  element.style.cssText =
+    'padding:12px;border:1px solid currentColor;overflow-wrap:anywhere;font-size:12px;line-height:1.5';
+  let controller: AbortController | undefined;
+  let disposed = false;
+  let origin: HTMLElement | null = null;
+  function close() {
+    controller?.abort();
+    element.hidden = true;
+    origin?.focus();
+  }
+  async function open(term: BindingTerm) {
+    if (disposed || term.type !== 'uri') return;
+    if (element.hidden)
+      origin =
+        doc.activeElement instanceof HTMLElement ? doc.activeElement : null;
+    controller?.abort();
+    const current = new AbortController();
+    controller = current;
+    element.hidden = false;
+    const heading = doc.createElement('h3');
+    heading.textContent = term.value;
+    heading.style.cssText = 'font-size:13px;line-height:1.5;margin:0 0 8px';
+    const closeButton = doc.createElement('button');
+    closeButton.type = 'button';
+    closeButton.style.fontSize = 'inherit';
+    closeButton.textContent = nl ? 'Sluiten' : 'Close';
+    closeButton.onclick = close;
+    const content = doc.createElement('div');
+    content.setAttribute('role', 'status');
+    content.textContent = nl ? 'Laden…' : 'Loading…';
+    element.replaceChildren(heading, closeButton, content);
+    if (/^https?:\/\//i.test(term.value)) {
+      const link = doc.createElement('a');
+      link.href = term.value;
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+      link.textContent = nl ? 'Open resource' : 'Open resource';
+      element.append(link);
+    }
+    element.focus();
+    try {
+      const matches = (triple: { subject: BindingTerm; object: BindingTerm }) =>
+        (triple.subject.type === 'uri' &&
+          triple.subject.value === term.value) ||
+        (triple.object.type === 'uri' && triple.object.value === term.value);
+      const local = options.graph?.triples.filter(matches);
+      const result = local?.length
+        ? { kind: 'graph' as const, triples: local }
+        : await options.loadResource?.(term.value, current.signal);
+      if (disposed || current.signal.aborted) return;
+      content.replaceChildren();
+      const triples =
+        result?.kind === 'graph' ? result.triples.filter(matches) : [];
+      if (!triples.length) {
+        content.textContent = nl
+          ? 'Geen eigenschappen beschikbaar in deze gegevens.'
+          : 'No properties available in this data.';
+        return;
+      }
+      const list = doc.createElement('dl');
+      for (const triple of triples) {
+        const incoming = triple.subject.value !== term.value;
+        const name = doc.createElement('dt');
+        name.textContent = `${incoming ? '← ' : ''}${triple.predicate.value}`;
+        const value = incoming ? triple.subject : triple.object;
+        const description = doc.createElement('dd');
+        if (value.type === 'uri') {
+          const button = doc.createElement('button');
+          button.type = 'button';
+          button.style.fontSize = 'inherit';
+          button.textContent = value.value;
+          button.style.overflowWrap = 'anywhere';
+          button.onclick = () => {
+            void open(value);
+          };
+          description.append(button);
+        } else description.textContent = value.value;
+        description.title = value['xml:lang'] ?? value.datatype ?? value.type;
+        list.append(name, description);
+      }
+      content.append(list);
+    } catch (error) {
+      if (!disposed && !current.signal.aborted)
+        content.textContent = `${nl ? 'Laden mislukt' : 'Loading failed'}: ${error instanceof Error ? error.message : String(error)}`;
+    }
+  }
+  element.onkeydown = (event) => {
+    if (event.key === 'Escape') close();
+  };
+  return {
+    element,
+    open,
+    close,
+    destroy() {
+      disposed = true;
+      controller?.abort();
+      element.remove();
+    },
+  };
+}

package/src/table-widths.ts

@@ -0,0 +1,16 @@
+/** Percentage widths only: never interpolate arbitrary query strings into CSS. */
+export function validColumnWidths(widths: readonly number[]): boolean {
+  return (
+    widths.length > 0 &&
+    widths.every(
+      (width) => Number.isFinite(width) && width > 0 && width <= 100,
+    ) &&
+    Math.abs(widths.reduce((sum, width) => sum + width, 0) - 100) < 0.000001
+  );
+}
+export function parseColumnWidths(value: string): number[] | undefined {
+  const parts = value.split(',').map((part) => part.trim());
+  if (parts.some((part) => !/^\d+(?:\.\d+)?%$/.test(part))) return undefined;
+  const widths = parts.map((part) => Number(part.slice(0, -1)));
+  return validColumnWidths(widths) ? widths : undefined;
+}