@panoramax/web-viewer/src/components/ui/SemanticsTable.js

Panoramax web viewer for geolocated pictures

import { LitElement, html, css, nothing } from "lit";
import { table } from "../styles";
import { groupByPrefix } from "../../utils/semantics";

/**
 * Semantics Tables display all semantics tags from either a picture or an annotation.
 * 
 * @class Panoramax.components.ui.SemanticsTable
 * @element pnx-semantics-table
 * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
 * @example
 * ```html
 * <pnx-semantics-table source=${picture.properties} ._t=${viewer._t} />
 * ```
 */
export default class SemanticsTable extends LitElement {
	/** @private */
	static styles = [ table, css`
		:host { display: block; }
		th:first-child, td:first-child { width: 40%; }
		td { vertical-align: top; }

		td small { color: var(--grey-semi-dark); }
		.qualifiers { margin-top: 5px; }
		.qualifiers > b { margin: 8px 0; }
		.qualifiers ul {
			list-style: none;
			margin: 0px 0px 0px 15px;
			padding: 0;
		}

		img.prefix-logo {
			max-width: 15px;
			max-height: 15px;
			aspect-ratio: 1;
			vertical-align: middle;
		}
	` ];

	/**
	 * Component properties.
	 * @memberof Panoramax.components.ui.SemanticsTable#
	 * @type {Object}
	 * @property {object} [source] The picture or annotation feature (having a `semantics` property)
	 */
	static properties = {
		source: {type: Object},
	};

	render() {
		/* eslint-disable indent */
		if(!this.source) { return nothing; }

		const groups = groupByPrefix(this.source.semantics);

		return html`<table>
			<thead>
				<tr><th>${this._t.pnx.semantics_key}</th><th>${this._t.pnx.semantics_value}</th></tr>
			</thead>
			<tbody>
				${groups.map(g => g.tags.map(tag => html`
					<tr>
						<td>
							${g.prefix != ""
								? (g.logo
									? html`<img src=${g.logo} class="prefix-logo" alt=${g.prefix} title=${g.title} />`
									: html`<small>(${g.prefix})</small>`)
								: nothing
							}
							${g.key_transform ? g.key_transform(tag, this._t) : tag.key}
						</td>
						<td>
							${g.value_transform ? g.value_transform(tag, this._t) : tag.value}
							${tag.qualifiers ? html`<div class="qualifiers">
								<b>${this._t.pnx.semantics_qualifiers}</b>
								<ul>
									${tag.qualifiers.map(q => html`<li>${q.subkey} = ${q.value}</li>`)}
								</ul>
							</div>` : nothing}
						</td>
					</tr>
				`))}
			</tbody>
		</table>`;
	}
}

customElements.define("pnx-semantics-table", SemanticsTable);