ogm-viewer 0.3.0 → 0.5.0

package/dist/collection/components/ogm-preview/ogm-preview.js

@@ -0,0 +1,144 @@
+import { h, Host } from "@stencil/core";
+import IIIFSource from "../../lib/sources/iiif";
+// Wraps a single source's preview and surfaces error(s) during the preview.
+export class OgmPreview {
+    theme;
+    source;
+    previewOpacity;
+    sidebarPadding;
+    error;
+    // A new source is a fresh load attempt, so clear any error left over from the previous one.
+    resetError() {
+        this.error = undefined;
+    }
+    // Catch the load error emitted by the child map/image and show it in place of the preview.
+    handlePreviewError(event) {
+        event.stopPropagation();
+        this.error = event.detail;
+    }
+    // IIIF sources use the image viewer; every other source type is previewed on the map.
+    renderPreview() {
+        if (this.source instanceof IIIFSource) {
+            return h("ogm-image", { theme: this.theme, source: this.source, padding: this.sidebarPadding });
+        }
+        return h("ogm-map", { "preview-opacity": this.previewOpacity, theme: this.theme, source: this.source, padding: this.sidebarPadding });
+    }
+    render() {
+        return (h(Host, { key: 'c962bdcbebdebb1abde8900b0d0811be218fca46' }, this.renderPreview(), this.error && h("ogm-alerts", { key: '87b8217bbb7d5101d9f306f2492326d3f9f92429', theme: this.theme, error: this.error })));
+    }
+    static get is() { return "ogm-preview"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ogm-preview.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ogm-preview.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
+            },
+            "source": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Source",
+                    "resolved": "Source",
+                    "references": {
+                        "Source": {
+                            "location": "global",
+                            "id": "global::Source"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "previewOpacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preview-opacity"
+            },
+            "sidebarPadding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sidebar-padding"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "error": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "source",
+                "methodName": "resetError"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "previewError",
+                "method": "handlePreviewError",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/ogm-preview/ogm-preview.test.js

@@ -0,0 +1,37 @@
+import { describe, it, expect, h, vi } from "@stencil/vitest";
+// Render with Stencil's low-level render directly rather than @stencil/vitest's `render` wrapper: the
+// wrapper re-throws lifecycle errors, and the <ogm-map>/<ogm-image> mounted inside a preview throw
+// when they try to initialize WebGL/OpenSeadragon (unavailable in the test DOM).
+import { render as stencilRender } from "@stencil/core";
+import GeoJSONSource from "../../lib/sources/geojson";
+import { referenceError } from "../../lib/errors";
+// Let Stencil's RAF-based update cycle flush after a state change (mirrors the vitest waitForChanges).
+const flush = () => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+const renderPreview = async (source) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => { });
+    await stencilRender(h("ogm-preview", { source: source }), container);
+    const el = container.firstElementChild;
+    await el.componentOnReady?.();
+    consoleError.mockRestore();
+    return el;
+};
+describe('ogm-preview', () => {
+    it('renders a preview for a source', async () => {
+        const el = await renderPreview(new GeoJSONSource('id', 'http://example.com/data.json'));
+        const shadowRoot = el.shadowRoot;
+        expect(shadowRoot.querySelector('ogm-map')).not.toBeNull();
+        expect(shadowRoot.querySelector('ogm-alerts')).toBeNull();
+    });
+    it('shows the error over the preview when a previewError is reported', async () => {
+        const el = await renderPreview(new GeoJSONSource('id', 'http://example.com/data.json'));
+        const error = referenceError(new TypeError('Failed to fetch'), 'GeoJSON', 'http://example.com/data.json');
+        el.dispatchEvent(new CustomEvent('previewError', { detail: error, bubbles: true }));
+        await flush();
+        const shadowRoot = el.shadowRoot;
+        expect(shadowRoot.querySelector('ogm-alerts')).not.toBeNull();
+        // The preview stays mounted underneath so its in-flight load can finish and not leak loading state
+        expect(shadowRoot.querySelector('ogm-map')).not.toBeNull();
+    });
+});

package/dist/collection/components/ogm-previews/ogm-previews.css

@@ -0,0 +1,45 @@
+/* Preview tabs */
+
+:host {
+  display: block;
+  height: 100%;
+  background: var(--wa-color-surface-default);
+}
+
+wa-tab-group,
+wa-tab-group::part(base) {
+  height: 100%;
+}
+
+wa-tab-group::part(body) {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+wa-tab-panel,
+wa-tab-panel::part(base) {
+  height: 100%;
+}
+
+wa-tab-panel::part(base) {
+  padding: 0;
+}
+
+/* Full-width tabs */
+wa-tab {
+  flex: 1 1 0;
+  text-align: center;
+}
+
+wa-tab::part(base) {
+  justify-content: center;
+  padding: 0.5em 0.75em;
+  font-size: var(--wa-font-size-s);
+}
+
+/* ogm-preview wraps each tab's map/image; ogm-map is also rendered bare as the no-record fallback. */
+ogm-preview,
+ogm-map {
+  display: block;
+  height: 100%;
+}

package/dist/collection/components/ogm-previews/ogm-previews.js

@@ -0,0 +1,162 @@
+import { h, Host } from "@stencil/core";
+import CogSource from "../../lib/sources/cog";
+import GeoJSONSource from "../../lib/sources/geojson";
+import OpenIndexMapSource from "../../lib/sources/openindexmap";
+import PMTilesSource from "../../lib/sources/pmtiles";
+import TileJSONSource from "../../lib/sources/tilejson";
+import TMSSource from "../../lib/sources/tms";
+import WmsSource from "../../lib/sources/wms";
+import XYZSource from "../../lib/sources/xyz";
+import IIIFSource from "../../lib/sources/iiif";
+import IIIFManifestSource from "../../lib/sources/iiif-manifest";
+export class OgmPreviews {
+    theme;
+    record;
+    previewOpacity;
+    sidebarPadding;
+    sources = [];
+    // @Watch only fires on changes; handle the initial load here
+    componentWillLoad() {
+        if (this.record)
+            this.getSources(this.record);
+    }
+    // Given a record, get all of the valid sources that can be used to preview it on a map
+    getSources(record) {
+        while (this.sources.length)
+            this.sources.pop();
+        const recordBounds = record.getBounds();
+        if (record.references.iiifImageUrl)
+            this.sources.push(new IIIFSource(record.id, record.references.iiifImageUrl, recordBounds));
+        if (record.references.iiifManifestUrl)
+            this.sources.push(new IIIFManifestSource(record.id, record.references.iiifManifestUrl, recordBounds));
+        if (record.references.pmtilesUrl)
+            this.sources.push(new PMTilesSource(record.id, record.references.pmtilesUrl, recordBounds));
+        if (record.references.tilejsonUrl)
+            this.sources.push(new TileJSONSource(record.id, record.references.tilejsonUrl, recordBounds));
+        if (record.references.indexMapUrl)
+            this.sources.push(new OpenIndexMapSource(record.id, record.references.indexMapUrl, recordBounds));
+        if (record.references.geojsonUrl)
+            this.sources.push(new GeoJSONSource(record.id, record.references.geojsonUrl, recordBounds));
+        if (record.references.cogUrl)
+            this.sources.push(new CogSource(record.id, record.references.cogUrl, recordBounds));
+        if (record.references.tmsUrl)
+            this.sources.push(new TMSSource(record.id, record.references.tmsUrl, recordBounds));
+        if (record.references.xyzUrl)
+            this.sources.push(new XYZSource(record.id, record.references.xyzUrl, recordBounds));
+        if (record.references.wmsUrl && record.wxsIdentifier)
+            this.sources.push(new WmsSource(record.id, record.references.wmsUrl, { layerIds: [record.wxsIdentifier] }, recordBounds));
+    }
+    // Render as tabs for switching between sources
+    render() {
+        // Render a blank map if there is no record or no sources
+        if (!this.record || !this.sources.length)
+            return h("ogm-map", { theme: this.theme, padding: this.sidebarPadding });
+        return (h(Host, { class: this.theme && `wa-${this.theme}` }, h("wa-tab-group", null, this.sources.map((source, idx) => (h("wa-tab", { key: idx, panel: `${source.constructor.name}-${source.id}-${idx}` }, source.label()))), this.sources.map((source, idx) => (h("wa-tab-panel", { key: idx, name: `${source.constructor.name}-${source.id}-${idx}`, active: idx === 0 }, h("ogm-preview", { theme: this.theme, source: source, "preview-opacity": this.previewOpacity, "sidebar-padding": this.sidebarPadding })))))));
+    }
+    static get is() { return "ogm-previews"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ogm-previews.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ogm-previews.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
+            },
+            "record": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "OgmRecord",
+                    "resolved": "OgmRecord",
+                    "references": {
+                        "OgmRecord": {
+                            "location": "global",
+                            "id": "global::OgmRecord"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "previewOpacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preview-opacity"
+            },
+            "sidebarPadding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sidebar-padding"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "sources": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "record",
+                "methodName": "getSources"
+            }];
+    }
+}

package/dist/collection/components/ogm-previews/ogm-previews.test.js

@@ -0,0 +1,83 @@
+import { describe, it, expect, h, vi } from "@stencil/vitest";
+// Render with Stencil's low-level render directly rather than @stencil/vitest's `render` wrapper: the
+// wrapper re-throws lifecycle errors, and the <ogm-map> mounted inside a preview panel throws when it
+// tries to initialize WebGL (unavailable in the test DOM). Stencil's own safeCall only routes that to
+// console.error, so stencilRender still produces the ogm-previews shadow DOM we want to assert on.
+import { render as stencilRender } from "@stencil/core";
+import OgmRecord from "../../lib/record";
+// Build a minimal Aardvark record, optionally with a WMS reference that yields one previewable source
+const buildRecord = (previewable) => new OgmRecord({
+    id: 'berkeley-s7sq63',
+    dct_title_s: 'Calaveras County Contours',
+    gbl_resourceClass_sm: ['Datasets'],
+    dct_accessRights_s: 'Public',
+    gbl_mdVersion_s: 'Aardvark',
+    ...(previewable
+        ? {
+            gbl_wxsIdentifier_s: 's7sq63',
+            dct_references_s: JSON.stringify({ 'http://www.opengis.net/def/serviceType/ogc/wms': 'https://example.com/geoserver/wms' }),
+        }
+        : {}),
+});
+const renderPreviews = async (record) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    // The mounted <ogm-map> logs a swallowed WebGL init error; keep test output clean
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => { });
+    await stencilRender(h("ogm-previews", { record: record }), container);
+    const el = container.firstElementChild;
+    await el.componentOnReady?.();
+    consoleError.mockRestore();
+    return el.shadowRoot;
+};
+// Let Stencil's RAF-based update cycle flush so the nested <ogm-preview> renders its own shadow DOM.
+const flush = () => new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+// Render previews and drill into the single <ogm-preview> to see which preview (map or image) it
+// chose. Going through <ogm-previews> means the source is constructed in the built component's module
+// realm, so <ogm-preview>'s `instanceof IIIFSource` check holds (unlike a source built in the test).
+const renderPreviewChild = async (record) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => { });
+    await stencilRender(h("ogm-previews", { record: record }), container);
+    const el = container.firstElementChild;
+    await el.componentOnReady?.();
+    const preview = el.shadowRoot.querySelector('ogm-preview');
+    await preview?.componentOnReady?.();
+    await flush();
+    consoleError.mockRestore();
+    return preview.shadowRoot;
+};
+// A minimal Aardvark record whose only reference is the given previewable one
+const buildRecordWith = (references) => new OgmRecord({
+    id: 'test-record',
+    dct_title_s: 'Test Record',
+    gbl_resourceClass_sm: ['Datasets'],
+    dct_accessRights_s: 'Public',
+    gbl_mdVersion_s: 'Aardvark',
+    dct_references_s: JSON.stringify(references),
+});
+describe('ogm-previews', () => {
+    it('renders a tab for a record supplied at initial render', async () => {
+        const shadowRoot = await renderPreviews(buildRecord(true));
+        const tabs = shadowRoot.querySelectorAll('wa-tab');
+        expect(shadowRoot.querySelector('wa-tab-group')).not.toBeNull();
+        expect(tabs).toHaveLength(1);
+        expect(tabs[0].textContent).toContain('WMS');
+    });
+    it('falls back to an empty map for a record with no previewable sources', async () => {
+        const shadowRoot = await renderPreviews(buildRecord(false));
+        expect(shadowRoot.querySelector('wa-tab-group')).toBeNull();
+        expect(shadowRoot.querySelector('ogm-map')).not.toBeNull();
+    });
+    it('wraps a map source in an ogm-preview that renders the map', async () => {
+        const previewShadow = await renderPreviewChild(buildRecordWith({ 'http://geojson.org/geojson-spec.html': 'https://example.com/data.json' }));
+        expect(previewShadow.querySelector('ogm-map')).not.toBeNull();
+        expect(previewShadow.querySelector('ogm-image')).toBeNull();
+    });
+    it('wraps a IIIF image source in an ogm-preview that renders the image viewer', async () => {
+        const previewShadow = await renderPreviewChild(buildRecordWith({ 'http://iiif.io/api/image': 'https://example.com/iiif/info.json' }));
+        expect(previewShadow.querySelector('ogm-image')).not.toBeNull();
+        expect(previewShadow.querySelector('ogm-map')).toBeNull();
+    });
+});

package/dist/collection/components/ogm-settings/ogm-settings.js

@@ -4,15 +4,15 @@ export class OgmSettings {
     record;
     el;
     opacityChange;
-    slRange;
+    waSlider;
     componentDidLoad() {
-        this.slRange = getElement(this.el, 'sl-range');
+        this.waSlider = getElement(this.el, 'wa-slider');
     }
     handleOpacityChange() {
-        this.opacityChange.emit(this.slRange.value);
+        this.opacityChange.emit(this.waSlider.value);
     }
     render() {
-        return (h("div", { key: '0c8f63ab2c784e81771aaa1000152ff7940a42c1', class: "settings" }, h("sl-range", { key: '69e6bf76e9bf4291a1da64b894fb7a2c8bf68452', disabled: !this.record || this.record.references.iiifOnly, label: "Layer opacity", min: "0", max: "100", step: "1", value: "100" })));
+        return (h("div", { key: 'e2b21549c2bb82aa80780e99bcbed78497683690', class: "settings" }, h("wa-slider", { key: 'bc45061a08522c2e227be5b422cac15fb6da04c3', disabled: !this.record || this.record.references.iiifOnly, label: "Layer opacity", min: "0", max: "100", step: "1", value: "100" })));
     }
     static get is() { return "ogm-settings"; }
     static get encapsulation() { return "shadow"; }
@@ -36,10 +36,8 @@ export class OgmSettings {
                     "resolved": "OgmRecord",
                     "references": {
                         "OgmRecord": {
-                            "location": "import",
-                            "path": "../../lib/record",
-                            "id": "src/lib/record.ts::OgmRecord",
-                            "referenceLocation": "OgmRecord"
+                            "location": "global",
+                            "id": "global::OgmRecord"
                         }
                     }
                 },
@@ -75,7 +73,7 @@ export class OgmSettings {
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{
-                "name": "sl-input",
+                "name": "input",
                 "method": "handleOpacityChange",
                 "target": undefined,
                 "capture": false,