@legumeinfo/web-components/lib/lis-linkout-element.js

Web Components for the Legume Information System and other AgBio databases

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, css } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { LisCancelPromiseController } from './controllers';
/**
 * @htmlElement `<lis-linkout-element>`
 *
 * A Web Component that provides an interface for performing linkout queries against an
 * a linkout service.
 * The returned links are displayed in a table.
 *
 * @example
 * {@link !HTMLElement | `HTMLElement`} properties can only be set via
 * JavaScript. This means the {@link linkoutFunction | `LinkoutFunction`} property
 * must be set on a `<lis-linkout-element>` tag's instance of the
 * {@link LisLinkoutElement | `LisLinkoutElement`} class. For example:
 * ```html
 *    <lis-linkout-element id="linkouts"></lis-linkout-element>
 *
 *    <!-- configure the Web Component via JavaScript -->
 *    <script type="text/javascript">
 *      // a site-specific function that sends a request to a linkout API
 *      function getGeneLinkouts(genes) {
 *        // returns a Promise that resolves to a linkout results object
 *      }
 *      // get the linkout element
 *      const linkoutElement = document.getElementById('linkouts');
 *      // set the element's linkoutFunction property
 *      linkoutElement.linkoutFunction = getGeneLinkouts;
 *      // get linkouts when the page is finished loading
 *      window.onload = (event) => {
 *        linkoutElement.getLinkouts(['cicar.CDCFrontier.gnm3.ann1.Ca1g000600']);
 *      }
 *   </script>
 * ```
 */
let LisLinkoutElement = class LisLinkoutElement extends LitElement {
    constructor() {
        super(...arguments);
        // a controller that allows in-flight linkouts to be cancelled
        this.cancelPromiseController = new LisCancelPromiseController(this);
        // the linkout callback function; not an attribute because functions can't be
        // parsed from attributes
        this.linkoutFunction = () => Promise.reject(new Error('No linkout function provided'));
        // bind to the loading element in the template
        this._loadingRef = createRef();
    }
    /** @ignore */
    // disable Shadow DOM to inherit global styles
    createRenderRoot() {
        return this;
    }
    /**
     * Gets linkouts for the given data.
     *
     * @typeParam LinkoutData - Should match the type of the linkout function `linkoutData`
     * parameter.
     *
     * @param data - The data to get linkouts for.
     */
    getLinkouts(data) {
        var _a;
        this._table.data = [];
        (_a = this._loadingRef.value) === null || _a === void 0 ? void 0 : _a.loading();
        this.cancelPromiseController.cancel();
        const options = { abortSignal: this.cancelPromiseController.abortSignal };
        const linkoutPromise = this.linkoutFunction(data, options);
        this.cancelPromiseController.wrapPromise(linkoutPromise).then((results) => this._linkoutSuccess(results), (error) => {
            var _a;
            // do nothing if the request was aborted
            if (!(error instanceof Event && error.type === 'abort')) {
                (_a = this._loadingRef.value) === null || _a === void 0 ? void 0 : _a.failure();
                throw error;
            }
        });
    }
    /** @ignore */
    // updates the table and loading element with the search result data
    _linkoutSuccess(linkoutResults) {
        var _a, _b;
        // destruct the linkout result
        const { results } = linkoutResults;
        // update the loading element accordingly
        if (results.length) {
            (_a = this._loadingRef.value) === null || _a === void 0 ? void 0 : _a.success();
        }
        else {
            (_b = this._loadingRef.value) === null || _b === void 0 ? void 0 : _b.noResults();
        }
        // display the results in the table
        const data = results.map((result) => {
            return { linkout: `<a href="${result.href}">${result.text}.</a>` };
        });
        this._table.data = data;
    }
    /** @ignore */
    // used by Lit to draw the template
    render() {
        // compute table parts
        const dataAttributes = ['linkout'];
        const header = { linkout: 'Linkouts' };
        // draw the table
        return html `
      <div class="uk-inline uk-width-1-1">
        <lis-loading-element ${ref(this._loadingRef)}></lis-loading-element>
        <lis-simple-table-element
          caption=""
          .dataAttributes=${dataAttributes}
          .header=${header}
        >
        </lis-simple-table-element>
      </div>
    `;
    }
};
/** @ignore */
// used by Lit to style the Shadow DOM
// not necessary but exclusion breaks TypeDoc
LisLinkoutElement.styles = css ``;
__decorate([
    property({ type: Function, attribute: false })
], LisLinkoutElement.prototype, "linkoutFunction", void 0);
__decorate([
    query('lis-simple-table-element')
], LisLinkoutElement.prototype, "_table", void 0);
LisLinkoutElement = __decorate([
    customElement('lis-linkout-element')
], LisLinkoutElement);
export { LisLinkoutElement };
//# sourceMappingURL=lis-linkout-element.js.map