@panoramax/web-viewer 4.0.2-develop-9b499e28 → 4.0.2-develop-e389d775

package/src/translations/en.json

@@ -173,6 +173,28 @@
         "metadata_exif_value": "Value",
         "metadata_exif_doc": "Docs for EXIF tags",
         "metadata_exif_doc_title": "Go to Exiv2 documentation to have full details on EXIF and XMP tags definitions",
+        "semantics_title": "Tags",
+        "semantics_tags": "{nb} tags",
+        "semantics_features": "Detected features",
+        "semantics_features_none": "No feature has been detected or annotated in this picture yet.",
+        "semantics_features_default_title": "Feature #{nb}",
+        "semantics_features_subtitle": "{nb} associated properties",
+        "semantics_show_all_tags": "Show all tags",
+        "semantics_hide_all_tags": "Hide all tags",
+        "semantics_key": "Key",
+        "semantics_value": "Value",
+        "semantics_key_doc": "Know more about this key",
+        "semantics_value_doc": "Know more about this tag",
+        "semantics_tags_picture": "Picture tags",
+        "semantics_tags_picture_none": "No tags has been set for this picture yet.",
+        "semantics_qualifiers": "Qualifiers",
+        "semantics_show_annotations": "Display picture annotations",
+        "semantics_hide_annotations": "Hide picture annotations",
+        "semantics_wikidata_properties": {
+            "P31": "instance of",
+            "P279": "subclass of",
+            "P361": "part of"
+        },
         "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

@@ -173,6 +173,26 @@
         "metadata_exif_value": "Valeur",
         "metadata_exif_doc": "Doc des attributs EXIF",
         "metadata_exif_doc_title": "Acééder à la doc Exiv2 pour en savoir plus sur les attributs EXIF et XMP",
+        "semantics_title": "Tags",
+        "semantics_tags": "{nb} attributs",
+        "semantics_features": "Objets détectés",
+        "semantics_features_none": "Aucun objet n'a été détecté ou annoté dans cette photo pour l'instant.",
+        "semantics_features_default_title": "Objet #{nb}",
+        "semantics_features_subtitle": "{nb} attributs associés",
+        "semantics_show_all_tags": "Voir tous les attributs",
+        "semantics_hide_all_tags": "Masquer les attributs",
+        "semantics_key": "Clé",
+        "semantics_value": "Valeur",
+        "semantics_key_doc": "En savoir plus à propos de cette clé",
+        "semantics_value_doc": "En savoir plus à propos de cet attribut",
+        "semantics_tags_picture": "Attributs de la photo",
+        "semantics_tags_picture_none": "Aucun attribut n'a été défini pour cette photo pour l'instant.",
+        "semantics_qualifiers": "Qualificateurs",
+        "semantics_wikidata_properties": {
+            "P31": "instance de",
+            "P279": "sous-classe de",
+            "P361": "partie de"
+        },
         "report": "Signaler",
         "report_auth": "Ce signalement sera envoyé en utilisant votre compte \"{a}\"",
         "report_nature_label": "Nature du problème",

package/src/utils/PresetsManager.js

@@ -0,0 +1,137 @@
+import { PanoramaxPresetsURL } from "./services";
+
+// Iconify aliases for whole collections
+const ICON_COLLECTIONS_SUB = {
+	"fas": "fa6-solid"
+};
+
+// Iconify aliases for specific icons
+const ICON_SUBS = {
+	"fa6-solid:directions": "fa6-solid:diamond-turn-right"
+};
+
+/**
+ * Presets Manager handle retrieval of presets against dedicated endpoint.
+ * It allows an easily search between all presets, and handles translations.
+ *
+ * @class Panoramax.utils.PresetsManager
+ * @typicalname presetsManager
+ * @param {string} [lang] The user prefered language. Defaults to web browser preferences.
+ * @param {boolean} [skipLoad=false] Set to true to disable automatic load of API data
+ */
+export default class PresetManager {
+	constructor(lang = null, skipLoad = false) {
+		this._ready = false;
+		this._presets = null;
+		this._translations = {};
+		if(!skipLoad) { this._load(lang); }
+	}
+
+	/**
+	 * Downloads various JSON file against presets API.
+	 * @private
+	 */
+	async _load(lang) {
+		lang = lang || window.navigator.languages[0]?.substring(0, 2);
+		
+		try {
+			const [translationsENRes, translationsLangRes, presetsRes] = await Promise.all([
+				fetch(`${PanoramaxPresetsURL()}/translations/en.min.json`),
+				lang ? fetch(`${PanoramaxPresetsURL()}/translations/${lang}.min.json`) : Promise.resolve({ok: true}),
+				fetch(`${PanoramaxPresetsURL()}/presets.min.json`),
+			]);
+
+			if (
+				!translationsENRes || !translationsLangRes || !presetsRes
+				|| !translationsENRes.ok || !translationsLangRes.ok || !presetsRes.ok
+			) {
+				this._ready = -1;
+				throw new Error("Presets service is not available");
+			}
+
+			this._presets = await presetsRes.json();
+			this._translations.en = (await translationsENRes.json())?.en?.presets;
+			if(lang) {
+				this._translations[lang] = (await translationsLangRes.json())?.[lang]?.presets;
+			}
+
+			// Post-process presets
+			Object.entries(this._presets).forEach(([pid,p]) => {
+				// Add labels
+				if(this._translations[lang]?.presets?.[pid]?.name) {
+					p.name = this._translations[lang].presets[pid].name;
+				}
+				else if(this._translations.en?.presets?.[pid]?.name) {
+					p.name = this._translations.en.presets[pid].name;
+				}
+
+				// Create iconify-compatible icon
+				if(p.icon) {
+					const iconColl = p.icon.split("-")[0];
+					const iconCollSub = ICON_COLLECTIONS_SUB[iconColl];
+					p.iconify = iconCollSub ? p.icon.replace(iconColl+"-", iconCollSub+":") : p.icon.split("-")[0]+":"+p.icon.split("-").slice(1).join("-");
+					if(ICON_SUBS[p.iconify]) { p.iconify = ICON_SUBS[p.iconify]; }
+				}
+			});
+
+			this._ready = true;
+		} catch (error) {
+			console.error("Presets service throws an error:", error);
+			this._ready = -1;
+		}
+	}
+
+	/**
+	 * Resolves when the all necessary data was downloaded.
+	 * @memberOf Panoramax.utils.PresetsManager#
+	 * @returns {Promise}
+	 */
+	async onceReady() {
+		if(!this._ready) {
+			await new Promise(resolve => setTimeout(resolve, 250));
+			return this.onceReady();
+		}
+		else if(this._ready === -1) { return Promise.reject(); }
+		else { return Promise.resolve(); }
+	}
+
+	/**
+	 * Find the best matching preset for a given STAC feature.
+	 * @memberOf Panoramax.utils.PresetsManager#
+	 * @returns {Promise}
+	 * @fulfil {object|null} The preset JSON that best matches, or null if no matches
+	 */
+	async getPreset(f) {
+		return this.onceReady().then(() => {
+			const candidatePresets = Object.values(this._presets).filter(p => {
+				if(Object.keys(p.tags).length === 0) { return false; }
+
+				// Check if every tag on preset exists in feature
+				for(let pk in p.tags) {
+					const pv = p.tags[pk];
+					if(!f.semantics.find(s => s.key === pk && (pv === "*" || pv === s.value))) {
+						return false;
+					}
+				}
+				return true;
+			});
+
+			// Find best matching preset
+			candidatePresets.sort((a,b) => {
+				const nbTagsA = Object.keys(a.tags).length;
+				const nbTagsB = Object.keys(b.tags).length;
+
+				if(nbTagsA > nbTagsB) { return -1; }
+				else if(nbTagsA === nbTagsB) {
+					const nbTagsStarA = Object.values(a.tags).filter(v => v === "*").length;
+					const nbTagsStarB = Object.values(b.tags).filter(v => v === "*").length;
+					if(nbTagsStarA < nbTagsStarB) { return -1; }
+					else if(nbTagsStarA > nbTagsStarB) { return 1; }
+					else { return 0; }
+				}
+				else { return 1; }
+			});
+			return candidatePresets.shift();
+		});
+	}
+}

package/src/utils/index.js

@@ -2,11 +2,13 @@ import * as geocoder from "./geocoder";
 import * as i18n from "./i18n";
 import * as map from "./map";
 import * as picture from "./picture";
+import * as semantics from "./semantics";
 import * as services from "./services";
 import * as utils from "./utils";
 import * as widgets from "./widgets";
 
-export { geocoder, i18n, map, picture, services, utils, widgets };
+export { geocoder, i18n, map, picture, semantics, services, utils, widgets };
 export {default as API} from "./API";
 export {default as PhotoAdapter} from "./PhotoAdapter";
+export {default as PresetsManager} from "./PresetsManager";
 export {default as URLHandler} from "./URLHandler";

package/src/utils/picture.js

@@ -377,6 +377,11 @@ export function apiFeatureToPSVNode(f, t, fastInternet=false, customLinkFilter=n
 		};
 	}
 
+	// Cleanup empty semantics feature (metacatalog bug)
+	if(f.properties?.semantics) {
+		f.properties.semantics = f.properties.semantics.filter(o => Object.keys(o).length > 0);
+	}
+
 	const node = {
 		id: f.id,
 		caption: getNodeCaption(f, t),
@@ -444,4 +449,27 @@ export function filterRelatedPicsLinks(metadata, customFilter = null) {
 		arrowStyle: arrowStyle(l),
 		linkOffset: { yaw: rectifiedYaw }
 	}));
+}
+
+/**
+ * Read structured hashtags from picture metadata
+ * @private
+ */
+export function getHashTags(metadata) {
+	if(!metadata?.properties?.semantics) { return []; }
+	
+	// Find hashtag entry in semantics
+	const hashtagsTags = metadata.properties.semantics.filter(kv => kv.key === "hashtags");
+	const readHashTags = [];
+	hashtagsTags.forEach(htt => htt.value.split(";").forEach(v => readHashTags.push(v.trim())));
+
+	return readHashTags;
+}
+
+/**
+ * Check if a given picture has associated annotations.
+ * @private
+ */
+export function hasAnnotations(metadata) {
+	return metadata?.properties?.annotations?.length > 0;
 }

package/src/utils/semantics.js

@@ -0,0 +1,162 @@
+import { html } from "lit";
+import { fa } from "./widgets";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import logoOsm from "../img/osm.svg";
+import logoWd from "../img/wd.svg";
+import { OSMWikiURL, WikidataURL } from "./services";
+
+
+// General helpers
+function valToValLink(val, url, title) {
+	return html`
+		${val}
+		<pnx-link-button
+			kind="superinline"
+			size="sm"
+			href=${url}
+			target="_blank"
+			style="vertical-align: middle"
+			title=${title}
+		>${fa(faInfoCircle)}</pnx-link-button>`;
+}
+
+// OSM helpers
+const OSM_MAIN_KEYS = [
+	"highway", "building", "amenity", "landuse", "natural", "waterway", "leisure",
+	"shop", "railway", "tourism", "barrier", "boundary", "place", "power"
+];
+
+// Supported prefixes for nice semantic display
+const KNOWN_PREFIXES = {
+	"": { title: "Panoramax" },
+
+	osm: {
+		title: "OpenStreetMap",
+		logo: logoOsm,
+		key_transform: (tag, _t) => valToValLink(
+			tag.key,
+			`${OSMWikiURL()}/Key:${tag.key}`,
+			_t.pnx.semantics_key_doc
+		),
+		value_transform: (tag, _t) => {
+			if(OSM_MAIN_KEYS.includes(tag.key)) {
+				return valToValLink(
+					tag.value,
+					`${OSMWikiURL()}/Tag:${tag.key}=${tag.value}`,
+					_t.pnx.semantics_value_doc
+				);
+			}
+			else { return tag.value; }
+		}
+	},
+
+	wd: {
+		title: "Wikidata",
+		logo: logoWd,
+		key_transform: (tag, _t) => {
+			const url = `${WikidataURL()}/Property:${tag.key}`;
+			return _t.pnx.semantics_wikidata_properties[tag.key]
+				? valToValLink(
+					`${_t.pnx.semantics_wikidata_properties[tag.key]} (${tag.key})`,
+					url,
+					_t.pnx.semantics_key_doc
+				)
+				: valToValLink(tag.key, url, _t.pnx.semantics_key_doc);
+		},
+		value_transform: (tag, _t) => valToValLink(
+			tag.value,
+			`${WikidataURL()}/${tag.value}`, _t.pnx.semantics_value_doc
+		)
+	},
+
+	exif: { title: "EXIF" },
+};
+
+
+/**
+ * Transform a prefix|key=value into parsed object.
+ * Does not handle qualifiers tags.
+ * @private
+ */
+export function decodeBasicTag(tag) {
+	const firstEqual = (tag || "").indexOf("=");
+	if(firstEqual < 0) { return null; }
+	return {
+		key: decodeKey(tag.substring(0, firstEqual)),
+		value: tag.substring(firstEqual+1),
+	};
+}
+
+
+/** @private */
+export function decodeKey(key = "") {
+	const regex = /^(?:([a-z_]+)\|)?([^[]+)(?:\[(.*)\])?$/;
+	const match = key.match(regex);
+
+	if (!match) {
+		return { prefix: "", subkey: key, qualifies: null };
+	}
+
+	const [, prefix, subkey, qualifies ] = match;
+	return {
+		prefix: prefix || "",
+		subkey,
+		qualifies: decodeBasicTag(qualifies),
+	};
+}
+
+
+/**
+ * Transforms raw API semantics properties into ready-to-display container.
+ * @param {object[]} tags The API semantics tags
+ * @returns {object[]} A list of groups (by prefix), with {title, tags} information.
+ */
+export function groupByPrefix(tags) {
+	// Create raw groups by prefix
+	const byPrefix = {};
+	const qualifiers = [];
+
+	// First pass: analyze tags, separate by prefix
+	tags.forEach(tag => {
+		const decodedKey = decodeKey(tag.key);
+
+		// Put apart qualifiers, to later insert on tags themselves
+		if(decodedKey.qualifies) {
+			qualifiers.push(Object.assign({}, tag, decodedKey));
+		}
+		// Process classic tag
+		else {
+			if (!byPrefix[decodedKey.prefix]) { byPrefix[decodedKey.prefix] = []; }
+
+			byPrefix[decodedKey.prefix].push(decodedKey.prefix.length > 0 ? {
+				key: decodedKey.subkey,
+				value: tag.value
+			} : tag);
+		}
+	});
+
+	// Second pass: add qualifiers on concerned tags
+	qualifiers.forEach(({key, prefix, subkey, qualifies, value}) => {
+		const concernedTag = byPrefix[qualifies.key.prefix]?.find(t => (
+			t.key === qualifies.key.subkey
+			&& (!qualifies.value || qualifies.value === t.value)
+		));
+
+		if(concernedTag) {
+			if(!concernedTag.qualifiers) { concernedTag.qualifiers = []; }
+			concernedTag.qualifiers.push({key, prefix, subkey, value});
+		}
+	});
+
+	// Append known prefixes information
+	let groups = Object.entries(byPrefix).map(([prefix, prefixTags]) => {
+		if(KNOWN_PREFIXES[prefix]) {
+			return Object.assign({ prefix, tags: prefixTags }, KNOWN_PREFIXES[prefix]);
+		}
+		else {
+			return { prefix, title: prefix, tags: prefixTags };
+		}
+	});
+
+	return groups;
+}

package/src/utils/services.js

@@ -4,6 +4,36 @@
  */
 
 
+/**
+ * Panoramax Presets URL
+ * @returns {string} The presets URL
+ */
+export function PanoramaxPresetsURL() {
+	return "https://tagging-presets-22605e.gitlab.io";
+}
+
+/**
+ * Temaki icons URL
+ * @param {string} [iconName] The icon name to insert in URL
+ * @returns {string} The SVG icon URL
+ */
+export function TemakiIconURL(iconName) {
+	return `https://raw.githubusercontent.com/rapideditor/temaki/refs/heads/main/icons/${iconName}.svg`;
+}
+
+/**
+ * Wikidata URL
+ * @returns {string} The Wikidata URL
+ */
+export function WikidataURL() {
+	return "https://www.wikidata.org/wiki";
+}
+
+
+/* -----------------------------------------------------
+ * OpenStreetMap docs & tools
+ */
+
 /**
  * OpenStreetMap iD editor URL
  * @returns {string} The editor URL
@@ -12,6 +42,14 @@ export function IdEditorURL() {
 	return "https://www.openstreetmap.org/edit?editor=id";
 }
 
+/**
+ * OpenStreetMap wiki URL
+ * @returns {string} The wiki URL
+ */
+export function OSMWikiURL() {
+	return "https://wiki.openstreetmap.org/wiki";
+}
+
 
 /* -----------------------------------------------------
  * Internet speed tests

package/src/utils/widgets.js

@@ -1,5 +1,6 @@
-// Every single icon imported separately to reduce bundle size
 import { icon } from "@fortawesome/fontawesome-svg-core";
+import { setCustomIconLoader } from "iconify-icon";
+import { TemakiIconURL } from "./services";
 
 
 /**
@@ -13,6 +14,22 @@ export function fa(i, o) {
 	return icon(i, o).node[0];
 }
 
+/**
+ * Register more icons providers for Iconify
+ * @private
+ */
+export function moreIcons() {
+	setCustomIconLoader(async (name) => {
+		const response = await fetch(TemakiIconURL(name));
+		if (!response.ok) {
+			return null;
+		}
+		return {
+			body: await response.text()
+		};
+	}, "temaki");
+}
+
 /**
  * Create a web component with its initial properties
  * @private

package/tests/components/core/__snapshots__/PhotoViewer.test.js.snap

@@ -23,6 +23,12 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
         slot="top-left"
       />,
     ],
+    Array [
+      <pnx-hashtags
+        class="pnx-only-psv pnx-print-hidden"
+        slot="top-right"
+      />,
+    ],
   ],
   "results": Array [
     Object {
@@ -37,6 +43,10 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
       "type": "return",
       "value": undefined,
     },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
   ],
 }
 `;

package/tests/components/core/__snapshots__/Viewer.test.js.snap

@@ -16,6 +16,12 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
         slot="top-left"
       />,
     ],
+    Array [
+      <pnx-hashtags
+        class="pnx-only-psv pnx-print-hidden"
+        slot="top-right"
+      />,
+    ],
     Array [
       <pnx-widget-player
         class="pnx-only-psv pnx-print-hidden"
@@ -68,6 +74,10 @@ exports[`_initWidgets should handle widgets if width is not small 1`] = `
       "type": "return",
       "value": undefined,
     },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
   ],
 }
 `;

package/tests/utils/PresetsManager.test.js

@@ -0,0 +1,123 @@
+import PresetsManager from "../../src/utils/PresetsManager";
+
+const mockPresets = {
+	"osm_traffic_sign": {
+		"icon": "fas-directions",
+		"tags": {
+			"osm|traffic_sign": "*"
+		},
+		"geometry": [
+			"point",
+			"vertex"
+		]
+	},
+	"osm_traffic_calming": {
+		"icon": "temaki-diamond",
+		"tags": {
+			"osm|traffic_calming": "*"
+		},
+		"geometry": [
+			"vertex"
+		]
+	},
+	"osm_shop": {
+		"icon": "maki-shop",
+		"tags": {
+			"osm|shop": "*"
+		},
+		"geometry": [
+			"point",
+			"area"
+		]
+	},
+};
+
+// Mock des appels fetch
+global.fetch = jest.fn(() =>
+	Promise.resolve({
+		ok: true,
+		json: () => Promise.resolve({}),
+	})
+);
+
+beforeEach(() => {
+	fetch.mockClear();
+});
+
+it("should initialize with default values", () => {
+	const presetsManager = new PresetsManager(null, true);
+	expect(presetsManager._ready).toBe(false);
+	expect(presetsManager._presets).toBe(null);
+	expect(presetsManager._translations).toEqual({});
+});
+
+it("should load translations and presets", async () => {
+	const mockTranslationsEN = { en: { presets: { preset1: { name: "Preset 1" } } } };
+	const mockTranslationsFR = { fr: { presets: { preset1: { name: "Préréglage 1" } } } };
+
+	fetch.mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve(mockTranslationsEN),
+		})
+	).mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve(mockTranslationsFR),
+		})
+	).mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve(mockPresets),
+		})
+	);
+
+	const presetsManager = new PresetsManager("fr");
+	await presetsManager.onceReady();
+  
+	expect(presetsManager._translations.en).toEqual(mockTranslationsEN.en.presets);
+	expect(presetsManager._translations.fr).toEqual(mockTranslationsFR.fr.presets);
+	expect(presetsManager._presets).toEqual(mockPresets);
+	expect(presetsManager._ready).toBe(true);
+});
+
+it("should handle errors during load", async () => {
+	global.console = { error: jest.fn() };
+
+	fetch.mockImplementation(() =>
+		Promise.resolve({
+			ok: false,
+		})
+	);
+
+	const presetsManager = new PresetsManager();
+	await expect(presetsManager.onceReady()).rejects.toBeUndefined();
+	expect(presetsManager._ready).toBe(-1);
+});
+
+it("should find the best matching preset", async () => {
+	fetch.mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve({}),
+		})
+	).mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve({}),
+		})
+	).mockImplementationOnce(() =>
+		Promise.resolve({
+			ok: true,
+			json: () => Promise.resolve(mockPresets),
+		})
+	);
+
+	const presetsManager = new PresetsManager();
+	await presetsManager.onceReady();
+
+	const feature = { semantics: [{ key: "key1", value: "value1" }, { key: "key2", value: "value2" }] };
+	const bestPreset = await presetsManager.getPreset(feature);
+
+	expect(bestPreset).toEqual(mockPresets.preset2);
+});