@panoramax/web-viewer 5.0.0-develop-d7206514 → 5.0.0-develop-d26305dd

package/build/components/menus/SemanticsDownload.js

@@ -0,0 +1,33 @@
+import { LitElement, html } from "lit";
+import { faSvg, titles } from "../styles.js";
+import { fa } from "../../utils/widgets.js";
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
+
+/**
+ * Semantics Download docs displays a synthetic summary of you can download semantics metadata.
+ * @class Panoramax.components.menus.SemanticsDownload
+ * @element pnx-semantics-download
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-semantics-download ._t=${viewer._t} />
+ * ```
+ */
+export default class SemanticsDownload extends LitElement {
+	static styles = [ titles, faSvg ];
+
+	render() {
+		return html`
+			<h4>${fa(faDownload)} ${this._t?.pnx.semantics_download_title}</h4>
+			<p>${this._t?.pnx.semantics_download_info}</p>
+			<pnx-link-button
+				href="https://docs.panoramax.fr/federated-catalog/data_export/"
+				target="_blank"
+				kind="outline"
+				style="width: 100%"
+			>${this._t?.pnx.semantics_download_cta}</pnx-link-button>
+		`;
+	}
+}
+
+customElements.define("pnx-semantics-download", SemanticsDownload);

package/build/components/menus/SemanticsFilters.js

@@ -0,0 +1,153 @@
+import { LitElement, css, html } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets.js";
+import { faDownload, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { SEMANTICS_OVERLAY_MINZOOM } from "../../utils/SemanticsMapProtocol.js";
+
+/**
+ * Semantics Filters menu allows user to show/hide specific semantic tags over the map.
+ * @class Panoramax.components.menus.SemanticsFilters
+ * @element pnx-map-semantics-filters-menu
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.menus.SemanticsFilters#change
+ * @example
+ * ```html
+ * <pnx-map-semantics-filters-menu _parent=${viewer} />
+ * ```
+ */
+export default class SemanticsFilters extends LitElement {
+	/** @private */
+	static styles = css`
+		.pnx-tags-zoomin {
+			z-index: 131;
+			background-color: rgba(255,255,255,0.8);
+			text-align: center;
+			font-weight: 800;
+			position: absolute;
+			top: 0;
+			right: 0;
+			left: 0;
+			bottom: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 25px;
+		}
+		.pnx-tags-zoomin.hidden {
+			display: none;
+		}
+		.pnx-tags-cta {
+			display: flex;
+			align-items: center;
+  			justify-content: end;
+		}
+		pnx-switch {
+			display: block;
+			margin: 5px 0;
+		}
+	`;
+
+	/** @private */
+	static properties = {
+		_showZoomIn: {state: true},
+		_layers: {state: true},
+	};
+
+	constructor() {
+		super();
+		this.showZoomIn = true;
+		this._layers = [];
+
+		// Map zoom
+		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(() => {
+			const postUpdate = () => {
+				this._onLayersChange();
+				this.requestUpdate();
+			};
+			this._parent.map.on("zoomend", this._onMapZoom.bind(this));
+			this._parent.map.on("styledata", postUpdate);
+			this._parent.mapStyleComposer.addEventListener("dataoverlay-added", postUpdate);
+			this._onMapZoom();
+			postUpdate();
+		}));
+	}
+
+	/** @private */
+	_layersToSet(layers) {
+		return layers
+			.map(l => l.source+"/"+this._parent.mapStyleComposer.dataOverlays.has(l.source))
+			.sort()
+			.join("|");
+	}
+
+	/** @private */
+	_onLayersChange() {
+		clearTimeout(this._debouncedChange);
+		this._debouncedChange = setTimeout(
+			() => {
+				const newlayers = this._parent?.map?.getSemanticOverlays();
+				// eslint-disable-next-line eqeqeq
+				if(this._layersToSet(newlayers) != this._layersToSet(this._layers)) {
+					this._layers = newlayers;
+
+					/**
+					 * Event for semantics overlay visibility changes
+					 * @event Panoramax.components.menus.SemanticsFilters#change
+					 * @type {CustomEvent}
+					 * @property {object[]} detail.layers List of semantics layers, from MapLibre
+					 */
+					this.dispatchEvent(new CustomEvent("change", {
+						bubbles: true,
+						composed: true,
+						detail: { layers: newlayers }
+					}));
+				}
+			},
+			10
+		);
+	}
+
+	/**
+	 * Map zoom event handler: show/hide "zoom in" labels
+	 * @private
+	 */
+	_onMapZoom() {
+		this._showZoomIn = this._parent.map.getZoom() < SEMANTICS_OVERLAY_MINZOOM;
+	}
+
+	/** @private */
+	render() {
+		if(!this._layers || this._layers.length === 0) { return; }
+
+		return html`
+			<div class="pnx-tags-zoomin ${this._showZoomIn ? "" : "hidden"}">
+				${this._parent?._t.pnx.semantics_zoom_in}
+			</div>
+
+			<div class="pnx-tags-cta">
+				<pnx-button
+					kind="full"
+					size="sm"
+					@click=${() => this._parent?._showSemanticsDownload()}
+				>${fa(faDownload)} ${this._parent?._t.pnx.semantics_download}</pnx-button>
+
+				<pnx-button
+					id="pnx-semfilt-doc"
+					kind="superinline"
+					size="md"
+					title=${this._parent?._t.pnx.semantics_doc}
+					@click=${() => this._parent?._showSemanticsDoc()}
+				>${fa(faInfoCircle)}</pnx-button>
+			</div>
+
+			${this._layers.filter(l => l.metadata).map(l => html`
+				<pnx-switch
+					name=${"pnx-semfilt-"+l.id}
+					.checked=${this._parent.mapStyleComposer.dataOverlays.has(l.source)}
+					@change=${e => this._parent.mapStyleComposer.switchDataOverlayVisibility(l.source, e.target.checked)}
+				>${this._parent?._t.pnx.semantics_overlays[l.id] || l.metadata.name || l.id}</pnx-switch>
+			`)}
+		`;
+	}
+}
+
+customElements.define("pnx-map-semantics-filters-menu", SemanticsFilters);

package/build/components/menus/SemanticsList.js

@@ -0,0 +1,413 @@
+import { LitElement, css, html, nothing } from "lit";
+import { badgeCount, faSvg, iconify } from "../styles.js";
+import { fa, moreIcons, onceParentAvailable } from "../../utils/widgets.js";
+import { groupByPrefix, semanticsToString } from "../../utils/semantics.js";
+import {
+	faArrowLeft, faCheck, faChevronRight, faCopy,
+	faImages, faPen, faTrash, faVectorSquare
+} from "@fortawesome/free-solid-svg-icons";
+import "iconify-icon";
+
+/**
+ * Semantics list shows listing of both picture tags and annotations.
+ * It uses the parent component currently selected picture.
+ *
+ * @class Panoramax.components.menus.SemanticsList
+ * @element pnx-semantics-list
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @fires Panoramax.components.menus.SemanticsList#select
+ * @fires Panoramax.components.menus.SemanticsList#edit-click
+ * @fires Panoramax.components.menus.SemanticsList#delete-click
+ * @example
+ * ```html
+ * <pnx-semantics-list _parent=${viewer} />
+ * ```
+ */
+export default class SemanticsList extends LitElement {
+	/** @private */
+	static styles = [ faSvg, iconify, badgeCount, css`
+		.annotation { background: var(--white); }
+		pnx-list-item {
+			display: block;
+			margin: 5px 0;
+		}
+	` ];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.menus.SemanticsList#
+	 * @type {Object}
+	 * @property {boolean} [editable=false] Show an "Edit" button ?
+	 */
+	static properties = {
+		editable: {type: Boolean},
+		_meta: {state: true},
+		_seqMeta: {state: true},
+		_entries: {state: true},
+		_selectedEntry: {state: true},
+		_annotPresets: {state: true},
+		_picPresets: {state: true},
+		_seqPresets: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._meta = {};
+		this._seqMeta = {};
+		this._selectedEntry = null;
+		this._annotPresets = {};
+		this._picPresets = [];
+		this._seqPresets = [];
+		this._entries = null;
+		this.editable = false;
+		moreIcons();
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._onPicChange();
+
+		onceParentAvailable(this).then(() => {
+			this._parent.psv?.addEventListener("picture-loaded", this._onPicChange.bind(this));
+			this._parent.psv?.addEventListener("annotation-focused", e => this.showAnnotation(e.detail.annotationId));
+			this._parent.psv?.addEventListener("annotations-unfocused", () => this._onListItemClick(null));
+			this._parent.psv?.addEventListener("semantics-unfocused", () => this._onListItemClick(null));
+
+			const selectedAnnots = this._parent.psv.getSelectedAnnotations();
+			if(selectedAnnots.length > 0) {
+				this.showAnnotation(selectedAnnots[0]);
+			}
+		});
+	}
+
+	/**
+	 * Display a specific annotation details.
+	 * @param {string} id The annotation UUID
+	 * @memberof Panoramax.components.menus.SemanticsList#
+	 */
+	showAnnotation(id) {
+		if(!this._entries) { setTimeout(() => this.showAnnotation(id), 200); }
+		else { this._onListItemClick(this._entries.find(e => e.type === "annotation" && e.annotation.id == id)); }
+	}
+
+	/**
+	 * Display a specific tag group details.
+	 * @param {object} tags The tags to find
+	 * @memberof Panoramax.components.menus.SemanticsList#
+	 */
+	showTagsGroup(tags) {
+		if(!this._entries) { setTimeout(() => this.showTagsGroup(tags), 200); }
+		else {
+			this._onListItemClick(this._entries.find(e => {
+				if(e?.type === "annotation") { return false; }
+				for(let i=0; i < tags.length; i++) {
+					if(!e.tagGroup.semantics.find(s => tags[i].key === s.key && tags[i].value === s.value)) {
+						return false;
+					}
+				}
+				return true;
+			}));
+		}
+	}
+
+	/** @private */
+	_onPicChange() {
+		this._meta = this._parent?.psv?.getPictureMetadata();
+		this._getSeqMeta();
+		delete this._prevPsvView;
+		this._selectedEntry = null;
+		this._entries = null;
+		this.dispatchEvent(new CustomEvent("select", { detail: { item: null } }));
+
+		// Load presets
+		if(this._meta && this._parent?.presetsManager) {
+			this._annotPresets = {};
+			this._picPresets = [];
+
+			// Picture tags
+			this._parent.presetsManager.getPresets(this._meta.properties).then(p => {
+				this._picPresets = p;
+				this._computeEntries();
+			});
+
+			// Annotations
+			if(this._meta.properties?.annotations?.length > 0) {
+				Promise.all(this._meta.properties.annotations.map(a => this._parent.presetsManager.getPreset(a).then(p => {
+					this._annotPresets[a.id] = p;
+				}))).then(() => this._computeEntries());
+			}
+		}
+	}
+
+	/** @private */
+	async _getSeqMeta() {
+		const seqId = this._meta?.sequence?.id;
+
+		// If no cache, call API
+		if(seqId && !this._parent._sequencesMetadata[seqId]) {
+			this._parent._sequencesMetadata[seqId] = await this._parent.getAPI().getSequenceMetadata(seqId);
+		}
+
+		this._seqMeta = this._parent._sequencesMetadata[seqId];
+		this._seqPresets = [];
+
+		if(this._seqMeta?.semantics?.length > 0) {
+			const p = await this._parent.presetsManager.getPresets(this._seqMeta);
+			this._seqPresets = p;
+			this._computeEntries();
+		}
+	}
+
+	/** @private */
+	_getGroupedTags(semantics, type, unknownTagId, presets) {
+		const entries = [];
+		const groupToList = (t, pkey) => {
+			const g = [ {key: pkey, value: t.value} ];
+			if(t.qualifiers) { t.qualifiers.forEach(q => g.push({key: q.key, value: q.value})); }
+			return g;
+		};
+
+		const tagsGroups = groupByPrefix(semantics);
+		const nonMatchingTags = [];
+		tagsGroups.forEach(g => {
+			const usedTags = {};
+			g.tags.forEach(t => {
+				const pkey = g.prefix != "" ? `${g.prefix}|${t.key}` : t.key;
+
+				// Skip if tag found in a previous preset
+				if(usedTags[`${pkey}=${t.value}`]) {
+					groupToList(t, pkey).forEach(v => usedTags[`${pkey}=${t.value}`].push(v));
+					return;
+				}
+
+				// Check if a picture preset matches this tag
+				const preset = presets.find(p => ["*", t.value].includes(p.tags[pkey]));
+				if(preset) {
+					const groupTags = groupToList(t, pkey);
+
+					// Add all used tags for this preset into used ones
+					let usedTagsCount = 0;
+					Object.entries(preset.tags).forEach(([prk, prv]) => {
+						let utv = prv;
+						if(prv === "*") {
+							utv = this._meta.properties.semantics.find(s => s.key === pkey)?.value;
+						}
+						usedTags[prk+"="+utv] = groupTags;
+						usedTagsCount++;
+					});
+
+					entries.push({
+						title: preset.name,
+						icon: preset.iconify || "fa6-solid:cube",
+						associatedTags: (t.qualifiers?.length || 0) + usedTagsCount,
+						tagGroup: { semantics: groupTags },
+						type: type,
+					});
+				}
+				else {
+					nonMatchingTags.push({key: pkey, value: t.value, qualifiers: t.qualifiers});
+				}
+			});
+		});
+
+		if(nonMatchingTags.length > 0) {
+			entries.push({
+				title: this._parent?._t.pnx.semantics_features_default_title.replace("{nb}", unknownTagId++),
+				icon: "fa6-solid:tag",
+				associatedTags: nonMatchingTags.length,
+				tagGroup: { semantics: nonMatchingTags },
+				type: type,
+			});
+		}
+
+		return [ entries, unknownTagId ];
+	}
+
+	/** @private */
+	_computeEntries() {
+		let unknownTagId = 1;
+		let entries = [];
+		let entries2 = [];
+
+		// Sequence tags
+		if(this._seqMeta?.semantics?.length > 0) {
+			[ entries, unknownTagId ] = this._getGroupedTags(this._seqMeta.semantics, "seqtags", unknownTagId, this._seqPresets);
+		}
+
+		// Picture tags
+		[ entries2, unknownTagId ] = this._getGroupedTags(this._meta.properties?.semantics, "pictags", unknownTagId, this._picPresets);
+		entries = entries.concat(entries2);
+
+		// Annotations
+		entries = entries.concat(this._meta.properties?.annotations?.map(a => ({
+			title: this._annotPresets[a.id]?.name || this._parent?._t.pnx.semantics_features_default_title.replace("{nb}", unknownTagId++),
+			icon: this._annotPresets[a.id]?.iconify || "fa6-solid:cube",
+			associatedTags: a.semantics.filter(s => s.action !== "delete").length,
+			type: "annotation",
+			annotation: a,
+		})) || []);
+
+		this._entries = entries;
+	}
+
+	/** @private */
+	_onListItemHover(item) {
+		if(item?.type === "annotation") {
+			// Save position before hover to allow reset after
+			if(!this._prevPsvView) { this._prevPsvView = [this._parent.psv.getZoomLevel(), this._parent.psv.getPosition()]; }
+
+			this._parent.psv.focusOnAnnotation(item.annotation.id, undefined, true);
+		}
+		else {
+			this._parent.psv.unfocusAnnotation();
+
+			// Restore previous PSV position
+			if(this._prevPsvView) {
+				this._parent.psv.zoom(this._prevPsvView[0]);
+				this._parent.psv.rotate(this._prevPsvView[1]);
+				delete this._prevPsvView;
+			}
+		}
+	}
+
+	/** @private */
+	_onListItemClick(item) {
+		this._selectedEntry = item;
+		this._onListItemHover(item);
+
+		/**
+		 * Event for item selection
+		 *
+		 * @event Panoramax.components.menus.SemanticsList#select
+		 * @type {CustomEvent}
+		 * @property {object} detail.item The selected annotation/tag group (or null if none)
+		 */
+		this.dispatchEvent(new CustomEvent("select", {
+			detail: { item }
+		}));
+	}
+
+	/** @private */
+	_onItemEditClick(e) {
+		e.stopPropagation();
+
+		/**
+		 * Event for edit button click
+		 *
+		 * @event Panoramax.components.menus.SemanticsList#edit-click
+		 * @type {CustomEvent}
+		 * @property {object} detail.item The annotation/tag group to edit
+		 */
+		this.dispatchEvent(new CustomEvent("edit-click", {
+			detail: { item: this._selectedEntry }
+		}));
+	}
+
+	/** @private */
+	_onItemDeleteClick(e) {
+		e.stopPropagation();
+
+		/**
+		 * Event for delete button click
+		 *
+		 * @event Panoramax.components.menus.SemanticsList#delete-click
+		 * @type {CustomEvent}
+		 * @property {object} detail.item The annotation/tag group to delete
+		 */
+		this.dispatchEvent(new CustomEvent("delete-click", {
+			detail: { item: this._selectedEntry }
+		}));
+	}
+
+	/** @private */
+	render() {
+		if(!this._meta) { return nothing; }
+
+		// Selected entry
+		if(this._selectedEntry) {
+			return html`<div class="annotation">
+				<pnx-list-item
+					title=${this._selectedEntry.title}
+					@click=${() => this._onListItemClick(null)}
+				>
+					${fa(faArrowLeft, {transform: {size: 24}, attributes: {slot: "icon"}})}
+					<iconify-icon
+						slot="icon"
+						icon=${this._selectedEntry.icon}
+						style="font-size: 1.5em"
+					></iconify-icon>
+
+					<pnx-copy-button
+						kind="superinline"
+						text=${semanticsToString((this._selectedEntry?.annotation || this._selectedEntry?.tagGroup)?.semantics)}
+						slot="action"
+						._t=${this._parent?._t}
+						title=${this._parent?._t.pnx.semantics_copy}
+					>
+						${fa(faCopy, {transform: {size: 18}})}
+						${fa(faCheck, {attributes: {slot: "oncopy"}, transform: {size: 18}})}
+					</pnx-copy-button>
+
+					${this.editable && this._selectedEntry.type !== "seqtags" ? html`
+						<pnx-button
+							kind="superinline"
+							title=${this._parent?._t.pnx.semantics_edit}
+							slot="action"
+							@click=${this._onItemEditClick}
+						>
+							${fa(faPen, {transform: {size: 18}})}
+						</pnx-button>
+						<pnx-button
+							kind="superinline"
+							title=${this._parent?._t.pnx.semantics_delete_annotation}
+							slot="action"
+							@click=${this._onItemDeleteClick}
+						>
+							${fa(faTrash, {transform: {size: 18}})}
+						</pnx-button>`
+					: nothing}
+				</pnx-list-item>
+				<pnx-semantics-table
+					._t=${this._parent?._t}
+					.source=${this._selectedEntry?.type === "annotation" ? this._selectedEntry.annotation : this._selectedEntry.tagGroup}
+				/>
+			</div>`;
+		}
+		// General listing
+		else {
+			const titles = {
+				"seqtags": this._parent?._t.pnx.semantics_sequence_tags,
+				"pictags": this._parent?._t.pnx.semantics_picture_tags,
+				"annotation": this._parent?._t.pnx.semantics_annotation_tags
+			};
+
+			return html`<div class="list">
+				${(this._entries || []).map(e => html`
+					<pnx-list-item
+						title=${e.title}
+						tooltip=${titles[e.type]}
+						@click=${() => this._onListItemClick(e)}
+						@mouseover=${() => this._onListItemHover(e)}
+						@mouseout=${() => this._onListItemHover(null)}
+					>
+						<iconify-icon
+							slot="icon"
+							icon=${e.icon}
+							style="font-size: 1.5em"
+						></iconify-icon>
+						${e.associatedTags > 1 ? html`
+							<span slot="icon" class="pnx-badge-count">${e.associatedTags}</span>
+						` : nothing}
+						${e?.type === "annotation" ? fa(faVectorSquare, {transform: {size: 20}, styles: { "margin-right": "20px" }, attributes: {slot: "action"}}) : nothing}
+						${e?.type === "seqtags" ? fa(faImages, {transform: {size: 20}, styles: { "margin-right": "20px" }, attributes: {slot: "action"}}) : nothing}
+						${fa(faChevronRight, {transform: {size: 20}, attributes: {slot: "action"}})}
+					</pnx-list-item>
+				`)}
+			</div>`;
+		}
+	}
+}
+
+customElements.define("pnx-semantics-list", SemanticsList);