@panoramax/web-viewer 4.1.0-develop-381f3f1a → 4.1.0-develop-22cdb9e7

package/docs/reference/components/menus/SemanticsMetadata.md

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.menus.SemanticsMetadata"></a>
+
+## Panoramax.components.menus.SemanticsMetadata ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.menus</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-semantics-metadata  
+<a name="new_Panoramax.components.menus.SemanticsMetadata_new"></a>
+
+### new SemanticsMetadata()
+Semantics metadata displays detailed info about semantic attributes of a single picture.
+
+**Example**  
+```html
+<pnx-semantics-metadata ._parent=${viewer}></pnx-semantics-metadata>
+```

package/docs/reference/utils/API.md

@@ -25,6 +25,7 @@
         * [.searchUsers(query)](#Panoramax.utils.API+searchUsers) ⇒ <code>Promise</code>
         * [.getUserName(userId)](#Panoramax.utils.API+getUserName) ⇒ <code>Promise</code>
         * [.sendReport(data)](#Panoramax.utils.API+sendReport) ⇒ <code>Promise</code>
+        * [.sendPictureSemantics(picMeta, semanticsDiff)](#Panoramax.utils.API+sendPictureSemantics) ⇒ <code>Promise</code>
         * ["broken"](#Panoramax.utils.API+event_broken)
         * ["ready"](#Panoramax.utils.API+event_ready)
     * _static_
@@ -284,6 +285,19 @@ Send a report to API
 | --- | --- | --- |
 | data | <code>object</code> | The input form data |
 
+<a name="Panoramax.utils.API+sendPictureSemantics"></a>
+
+### api.sendPictureSemantics(picMeta, semanticsDiff) ⇒ <code>Promise</code>
+Send picture semantics change to origin API.
+
+**Kind**: instance method of [<code>API</code>](#Panoramax.utils.API)  
+**Fulfil**: <code>object</code> The JSON API response  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| picMeta | <code>object</code> | The picture metadata |
+| semanticsDiff | <code>object</code> | The difference in semantics compared to original data |
+
 <a name="Panoramax.utils.API+event_broken"></a>
 
 ### "broken"

package/docs/reference.md

@@ -36,6 +36,7 @@ All-in-one, ready-to-use menus for complex operations. Note that they don't embe
 - [PlayerOptions](./reference/components/menus/PlayerOptions.md) : speed and constrast settings for play sequence feature.
 - [QualityScoreDoc](./reference/components/menus/QualityScoreDoc.md) : details about quality score computation.
 - [ReportForm](./reference/components/menus/ReportForm.md) : picture issue reporting form.
+- [SemanticsMetadata](./reference/components/menus/SemanticsMetadata.md) : display full details about a picture semantics.
 - [ShareMenu](./reference/components/menus/ShareMenu.md) : links and iframe sharing.
 
 ## `components.ui`
@@ -83,4 +84,5 @@ General helpers outside of single component scope:
 
 - [API](./reference/utils/API.md) : the Panoramax API helper (many get & post HTTP helpers).
 - [InitParameters](./reference/utils/InitParameters.md) : helper for merging URL and component parameters.
+- [PresetsManager](./reference/utils/PresetsManager.md) : the semantics attributes presets manager.
 - [URLHandler](./reference/utils/URLHandler.md) : the window URL manager (changes query part).

package/mkdocs.yml

@@ -76,6 +76,7 @@ nav:
         - PlayerOptions: 'reference/components/menus/PlayerOptions.md'
         - QualityScoreDoc: 'reference/components/menus/QualityScoreDoc.md'
         - ReportForm: 'reference/components/menus/ReportForm.md'
+        - SemanticsMetadata: 'reference/components/menus/SemanticsMetadata.md'
         - ShareMenu: 'reference/components/menus/ShareMenu.md'
       - ui:
         - widgets:
@@ -110,4 +111,5 @@ nav:
     - utils:
       - API: 'reference/utils/API.md'
       - InitParameters: 'reference/utils/InitParameters.md'
+      - PresetsManager: 'reference/utils/PresetsManager.md'
       - URLHandler: 'reference/utils/URLHandler.md'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.1.0-develop-381f3f1a",
+  "version": "4.1.0-develop-22cdb9e7",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/Basic.js

@@ -345,7 +345,11 @@ export default class Basic extends LitElement {
 				else if(typeof value === "object" || Array.isArray(value)) { return value; }
 				else { return JSON5.parse(value); }
 			},
-			toAttribute: (value) => JSON.stringify(value)
+			toAttribute: (value) => {
+				if(value === null || value === "") { return ""; }
+				else if(typeof value === "string") { return value; }
+				else { return JSON5.stringify(value); }
+			}
 		};
 	}
 }

package/src/components/menus/PictureMetadata.js

@@ -9,12 +9,10 @@ import { faImages } from "@fortawesome/free-solid-svg-icons/faImages";
 import { faScroll } from "@fortawesome/free-solid-svg-icons/faScroll";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
-import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faTags } from "@fortawesome/free-solid-svg-icons/faTags";
-import { faSvg, titles, textarea, hidden } from "../styles";
+import { faSvg, titles, textarea, hidden, dataBlocks } from "../styles";
 import { createWebComp } from "../../utils/widgets";
-import { getGPSPrecision, getHashTags } from "../../utils/picture";
+import { getGPSPrecision } from "../../utils/picture";
 import { PanoramaxMetaCatalogURL } from "../../utils/services";
 import {
 	getGrade, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_RES_360_VALUES,
@@ -35,30 +33,14 @@ const missing = () => fa(faQuestion, {styles: {height: "16px"}});
  */
 export default class PictureMetadata extends LitElement {
 	/** @private */
-	static styles = [ faSvg, titles, textarea, hidden, css`
+	static styles = [ faSvg, titles, textarea, hidden, dataBlocks, css`
 		div[slot="content"] {
 			padding: 5px 10px;
 			background-color: #ededed;
 		}
 
-		/* Small data blocks */
 		.data-block {
-			display: inline-block;
 			min-width: 50%;
-			margin: 8px 0;
-			box-sizing: border-box;
-			vertical-align: top;
-		}
-		.data-block h5 {
-			font-size: 0.8em;
-			font-weight: 400;
-			color: var(--blue-dark);
-			margin: 0 0 5px 0;
-		}
-		.data-block h5 pnx-button { vertical-align: middle; }
-		.data-block h5 svg.svg-inline--fa { height: 14px; }
-		.data-block div {
-			font-size: 0.8em;
 		}
 
 		pnx-semantics-table {
@@ -70,14 +52,8 @@ export default class PictureMetadata extends LitElement {
 	/** @private */
 	static properties = {
 		_meta: {state: true},
-		_semanticsPicShowAll: {state: true},
 	};
 
-	constructor() {
-		super();
-		this._semanticsPicShowAll = false;
-	}
-
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
@@ -238,61 +214,6 @@ export default class PictureMetadata extends LitElement {
 			];
 		}
 
-		// Semantics data
-		const hasSemantics = (
-			(this._meta.properties.semantics || []).length > 0
-			|| (this._meta.properties.annotations || []).length > 0
-		);
-		let semanticsData = [];
-		if(hasSemantics) {
-			// Hashtags
-			const hashtags = getHashTags(this._meta);
-			if(hashtags.length > 0) {
-				semanticsData.push({
-					title: this._parent?._t.pnx.semantics_hashtags,
-					style: "width: 100%",
-					content: hashtags.join(" ")
-				});
-			}
-			
-			// Full list of picture tags
-			semanticsData.push({
-				title: this._parent?._t.pnx.semantics_tags_picture,
-				style: "width: 100%",
-				content: html`${this._meta.properties.semantics?.length > 0
-					? html`
-						<pnx-button
-							kind="outline"
-							size="sm"
-							style="width: 100%"
-							@click=${() => this._semanticsPicShowAll = !this._semanticsPicShowAll}
-						>
-							${this._semanticsPicShowAll ? fa(faChevronUp) : fa(faChevronDown)}
-							${this._semanticsPicShowAll ? this._parent?._t.pnx.semantics_hide_all_tags : this._parent?._t.pnx.semantics_show_all_tags}
-						</pnx-button>
-						<pnx-semantics-table
-							._t=${this._parent?._t}
-							.source=${this._meta.properties}
-							style="margin-top: 5px"
-							class=${this._semanticsPicShowAll ? "":"pnx-hidden"}
-						/>
-					`
-					: this._parent?._t.pnx.semantics_tags_picture_none
-				}`
-			});
-
-			// Annotations (features in picture)
-			semanticsData.push({
-				title: this._parent?._t.pnx.semantics_features,
-				style: "width: 100%",
-				content: html`
-					${this._meta.properties.annotations?.length > 0
-					? html`<pnx-annotations-list ._parent=${this._parent} />`
-					: this._parent?._t.pnx.semantics_features_none}
-				`
-			});
-		}
-
 		// EXIF data
 		const exifData = Object.entries(this._meta.properties.exif)
 			.sort()
@@ -426,10 +347,11 @@ export default class PictureMetadata extends LitElement {
 				qualityData
 			) : nothing}
 
-			${hasSemantics ? this._toTab( // Semantics
-				html`${fa(faTags)} ${this._parent?._t.pnx.semantics_title}`,
-				semanticsData
-			) : nothing}
+			<h4 slot="title">${fa(faTags)} ${this._parent?._t.pnx.semantics_title}</h4>
+				<div slot="content" class="data-blocks">
+					<pnx-semantics-metadata ._parent=${this._parent}></pnx-semantics-metadata>
+				</div>
+			</div>
 
 			${this._meta.properties?.exif ? this._toTab( // EXIF
 				html`${fa(faScroll)} ${this._parent?._t.pnx.metadata_exif}`,

package/src/components/menus/SemanticsMetadata.js

@@ -0,0 +1,186 @@
+import { LitElement, html, nothing, css } from "lit";
+import { fa, onceParentAvailable } from "../../utils/widgets";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
+import { faPen } from "@fortawesome/free-solid-svg-icons/faPen";
+import { faFloppyDisk } from "@fortawesome/free-solid-svg-icons/faFloppyDisk";
+import { faRotateLeft } from "@fortawesome/free-solid-svg-icons/faRotateLeft";
+import { getHashTags } from "../../utils/picture";
+import { hidden, dataBlocks } from "../styles";
+import { getUserAccount } from "../../utils/utils";
+
+/**
+ * Semantics metadata displays detailed info about semantic attributes of a single picture.
+ * @class Panoramax.components.menus.SemanticsMetadata
+ * @element pnx-semantics-metadata
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-semantics-metadata ._parent=${viewer}></pnx-semantics-metadata>
+ * ```
+ */
+export default class SemanticsMetadata extends LitElement {
+	/** @private */
+	static styles = [ hidden, dataBlocks, css`
+		.data-block {
+			width: 100%;
+		}
+	` ];
+
+	/** @private */
+	static properties = {
+		_meta: {state: true},
+		_picShowAll: {state: true},
+		_editPicSem: {state: true},
+		_editedPicSemTags: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._meta = {};
+		this._picShowAll = false;
+		this._editPicSem = false;
+		this._editedPicSemTags = null;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		onceParentAvailable(this).then(() => {
+			this._meta = this._parent?.psv?.getPictureMetadata();
+			this._parent?.oncePSVReady?.().then(() => {
+				this._parent.psv.addEventListener("picture-loaded", () => {
+					this._meta = this._parent.psv.getPictureMetadata();
+				});
+				this._parent.psv.addEventListener("annotation-click", () => {
+					const tabs = this.shadowRoot.querySelector("pnx-tabs");
+					if(tabs) { tabs.setAttribute("activeTabIndex", 4); }
+				});
+			});
+		});
+	}
+
+	/** @private */
+	_onStartEditPicSem() {
+		this._editedPicSemTags = null;
+		this._editPicSem = true;
+	}
+
+	/** @private */
+	_onPicSemEditorChange(e) {
+		this._editedPicSemTags = e.detail;
+	}
+
+	/** @private */
+	_onSavePicSem() {
+		const field = this.renderRoot.querySelector("#pnx-sem-pic-editor");
+
+		// Check field validity
+		if(!field || !field.checkValidity()) {
+			alert(this._parent?._t.pnx.semantics_cantsave_invalid);
+			return;
+		}
+
+		// Send changes to API
+		this._parent?.api.sendPictureSemantics(this._meta, this._editedPicSemTags.delta).then(newPic => {
+			const newMeta = Object.assign({}, this._meta);
+			newMeta.properties.semantics = newPic.properties.semantics;
+			this._meta = newMeta;
+			this._editPicSem = false;
+			alert(this._parent?._t.pnx.semantics_send_ok);
+		}).catch(e => {
+			this._editPicSem = false;
+			alert(this._parent?._t.pnx.semantics_send_fail);
+			console.error("Can't send semantics", e);
+		});
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		if(!this._meta?.properties) { return; }
+
+		const hashtags = getHashTags(this._meta);
+		const canEdit = !this._meta.origInstance && getUserAccount() !== null;
+
+		return html`
+			${hashtags.length > 0 ? html`
+				<div class="data-block">
+					<h5>${this._parent?._t.pnx.semantics_hashtags}</h5>
+					<div>${hashtags.join(" ")}</div>
+				</div>
+			` : nothing}
+
+			<div class="data-block">
+				<h5>
+					${this._parent?._t.pnx.semantics_tags_picture}
+
+					${canEdit && this._editPicSem ?
+						html`<pnx-button-group style="display: inline-block; vertical-align: middle;">
+							<pnx-button
+								kind="superinline"
+								title=${this._parent?._t.pnx.semantics_undo}
+								@click=${() => this._editPicSem = false}
+							>
+								${fa(faRotateLeft)}
+							</pnx-button>
+							<pnx-button
+								kind="superinline"
+								title=${this._parent?._t.pnx.semantics_save}
+								@click=${this._onSavePicSem}
+							>
+								${fa(faFloppyDisk)}
+							</pnx-button>
+						</pnx-button-group>`
+						: (canEdit ? html`<pnx-button
+							kind="superinline"
+							title=${this._parent?._t.pnx.semantics_edit}
+							@click=${this._onStartEditPicSem}
+						>
+							${fa(faPen)}
+						</pnx-button>` : "")
+					}
+				</h5>
+				<div>
+					${this._editPicSem ? html`
+						<pnx-semantics-editor
+							id="pnx-sem-pic-editor"
+							.semantics=${this._editedPicSemTags ? this._editedPicSemTags.semantics : this._meta.properties.semantics}
+							._t=${this._parent._t}
+							@change=${this._onPicSemEditorChange}
+						></pnx-semantics-editor>
+					` : html`
+						${this._meta.properties.semantics?.length > 0 ? html`
+							<pnx-button
+								kind="outline"
+								size="sm"
+								style="width: 100%"
+								@click=${() => this._picShowAll = !this._picShowAll}
+							>
+								${this._picShowAll ? fa(faChevronUp) : fa(faChevronDown)}
+								${this._picShowAll ? this._parent?._t.pnx.semantics_hide_all_tags : this._parent?._t.pnx.semantics_show_all_tags}
+							</pnx-button>
+							<pnx-semantics-table
+								._t=${this._parent?._t}
+								.source=${this._meta.properties}
+								style="margin-top: 5px"
+								class=${this._picShowAll ? "":"pnx-hidden"}
+							/>`
+						: this._parent?._t.pnx.semantics_tags_picture_none}
+					`}
+				</div>
+			</div>
+
+			<div class="data-block">
+				<h5>${this._parent?._t.pnx.semantics_features}</h5>
+				<div>${this._meta.properties.annotations?.length > 0
+					? html`<pnx-annotations-list ._parent=${this._parent} />`
+					: this._parent?._t.pnx.semantics_features_none}
+				</div>
+			</div>
+		`;
+	}
+}
+
+customElements.define("pnx-semantics-metadata", SemanticsMetadata);

package/src/components/menus/index.js

@@ -14,4 +14,5 @@ export {default as PictureMetadata} from "./PictureMetadata";
 export {default as PlayerOptions} from "./PlayerOptions";
 export {default as QualityScoreDoc} from "./QualityScoreDoc";
 export {default as ReportForm} from "./ReportForm";
+export {default as SemanticsMetadata} from "./SemanticsMetadata";
 export {default as Share} from "./Share";

package/src/components/styles.js

@@ -149,6 +149,7 @@ export const btn = css`
 	.pnx-btn ::slotted(.svg-inline--fa),
 	.pnx-btn slot .svg-inline--fa {
 		height: 16px;
+		pointer-events: none;
 	}
 
 	/* Sizing */
@@ -487,3 +488,24 @@ export const iconify = css`
 		height: 1em;
 	}
 `;
+
+// Tabbed-legend data blocks
+export const dataBlocks = css`
+	.data-block {
+		display: inline-block;
+		margin: 8px 0;
+		box-sizing: border-box;
+		vertical-align: top;
+	}
+	.data-block h5 {
+		font-size: 0.8em;
+		font-weight: 400;
+		color: var(--blue-dark);
+		margin: 0 0 5px 0;
+	}
+	.data-block h5 pnx-button { vertical-align: middle; }
+	.data-block h5 svg.svg-inline--fa { height: 14px; }
+	.data-block div {
+		font-size: 0.8em;
+	}
+`;

package/src/components/ui/SemanticsEditor.js

@@ -82,7 +82,7 @@ export default class SemanticsEditor extends LitElement {
 	getDiff() {
 		return computeDiffTags(this._firstSemantics || [], this.semantics);
 	}
-
+	
 	/**
 	 * Check if input is having a valid value.
 	 * @memberof Panoramax.components.ui.SemanticsEditor#

package/src/components/ui/SemanticsTable.js

@@ -16,6 +16,7 @@ import { groupByPrefix } from "../../utils/semantics";
 export default class SemanticsTable extends LitElement {
 	/** @private */
 	static styles = [ table, css`
+		:host { display: block; }
 		th:first-child, td:first-child { width: 30%; }
 		td { vertical-align: top; }
 

package/src/translations/en.json

@@ -201,6 +201,12 @@
         },
         "semantics_editor_error": "The syntax is invalid. Your tags may look like:\nkey=value\nprefix|key=value\nprefix|key[qualif_key=qualif_val]=value\n\nMax key length is 256 characters, max value length 2048 characters.",
         "semantics_editor_example": "key=value\nprefix|key=value",
+        "semantics_edit": "Edit attributes",
+        "semantics_save": "Save your edits",
+        "semantics_undo": "Cancel your edits",
+        "semantics_cantsave_invalid": "Can't save your attributes, input is not valid",
+        "semantics_send_fail": "We can't send your edits for now, please retry later.",
+        "semantics_send_ok": "Your edits were successfully sent",
         "report": "Report",
         "report_auth": "This report will be sent using your account \"{a}\"",
         "report_nature_label": "Nature of the issue",

package/src/translations/fr.json

@@ -201,6 +201,12 @@
         },
         "semantics_editor_error": "La syntaxe est invalide. Vos attributs doivent avoir cette forme:\nclé=valeur\npréfixe|clé=valeur\npréfixe|clé[qualif_clé=qualif_val]=valeur\n\nLongueur max des clés : 256 caractères, max des valeurs 2048 caractères.",
         "semantics_editor_example": "clé=valeur\npréfixe|clé=valeur",
+        "semantics_edit": "Modifier les attributs",
+        "semantics_save": "Enregistrer vos modifications",
+        "semantics_undo": "Annuler vos modifications",
+        "semantics_cantsave_invalid": "Impossible de sauvegarder les modifications, les attributs ne sont pas valides",
+        "semantics_send_fail": "Nous n'avons pas pu enregistrer vos modifications, merci de réessayer plus tard",
+        "semantics_send_ok": "Vos modifications ont bien été enregistrées",
         "report": "Signaler",
         "report_auth": "Ce signalement sera envoyé en utilisant votre compte \"{a}\"",
         "report_nature_label": "Nature du problème",

package/src/utils/API.js

@@ -789,6 +789,46 @@ export default class API extends EventTarget {
 			});
 	}
 
+	/**
+	 * Send picture semantics change to origin API.
+	 * @memberOf Panoramax.utils.API#
+	 * @param {object} picMeta The picture metadata
+	 * @param {object} semanticsDiff The difference in semantics compared to original data
+	 * @returns {Promise}
+	 * @fulfil {object} The JSON API response
+	 */
+	sendPictureSemantics(picMeta, semanticsDiff) {
+		/* eslint-disable */
+		if(!this.isReady()) { throw new Error("API is not ready to use"); }
+		if(!picMeta?.sequence?.id || !picMeta?.id) { throw new Error("Missing IDs from picture"); }
+
+		// Check if it's from metacatalog
+		let picLink = this.getPictureMetadataUrl(picMeta.id, picMeta.sequence.id);
+		if(picMeta?.origInstance) {
+			picLink = `${picMeta.origInstance.href}/api/collections/${picMeta.sequence.id}/items/${picMeta.id}`;
+		}
+
+		const opts = {
+			...this._getFetchOptions(),
+			method: "PATCH",
+			body: JSON.stringify({ semantics: semanticsDiff }),
+			headers: { "Content-Type": "application/json" },
+		};
+		
+		return fetch(picLink, opts)
+			.then(async res => {
+				if(res.status >= 400) {
+					let txt = await res.text();
+					try {
+						txt = JSON.parse(txt)["message"];
+					}
+					catch(e) {} // eslint-disable-line no-empty
+					return Promise.reject(txt);
+				}
+				return res.json();
+			});
+	}
+
 	/**
 	 * Checks URL string validity
 	 * @memberOf Panoramax.utils.API