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

package/config/jest/mocks.js

@@ -197,6 +197,11 @@ jest.mock("@photo-sphere-viewer/virtual-tour-plugin", () => ({
 }));
 
 
+jest.mock("@photo-sphere-viewer/markers-plugin", () => ({
+	MarkersPlugin: jest.fn(),
+}));
+
+
 jest.mock("query-selector-shadow-dom", () => ({
 	querySelectorDeep: jest.fn(),
 }));

package/docs/reference/components/core/PhotoViewer.md

@@ -22,6 +22,7 @@
 | grid | [<code>CorneredGrid</code>](../layout/CorneredGrid.md/#Panoramax.components.layout.CorneredGrid) | The grid layout manager |
 | popup | [<code>Popup</code>](../ui/Popup.md/#Panoramax.components.ui.Popup) | The popup container |
 | urlHandler | [<code>URLHandler</code>](../../utils/URLHandler.md/#Panoramax.utils.URLHandler) | The URL query parameters manager |
+| presetsManager | [<code>PresetsManager</code>](../../utils/PresetsManager.md/#Panoramax.utils.PresetsManager) | The semantics presets manager |
 
 
 * [.PhotoViewer](#Panoramax.components.core.PhotoViewer) ⇐ [<code>Basic</code>](Basic.md/#Panoramax.components.core.Basic)

package/docs/reference/components/core/Viewer.md

@@ -24,6 +24,7 @@
 | mini | [<code>Mini</code>](../layout/Mini.md/#Panoramax.components.layout.Mini) | The reduced/collapsed map/photo component |
 | popup | [<code>Popup</code>](../ui/Popup.md/#Panoramax.components.ui.Popup) | The popup container |
 | urlHandler | [<code>URLHandler</code>](../../utils/URLHandler.md/#Panoramax.utils.URLHandler) | The URL query parameters manager |
+| presetsManager | [<code>PresetsManager</code>](../../utils/PresetsManager.md/#Panoramax.utils.PresetsManager) | The semantics presets manager |
 
 
 * [.Viewer](#Panoramax.components.core.Viewer) ⇐ [<code>PhotoViewer</code>](PhotoViewer.md/#Panoramax.components.core.PhotoViewer)

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

@@ -0,0 +1,16 @@
+<a name="Panoramax.components.menus.AnnotationsList"></a>
+
+## Panoramax.components.menus.AnnotationsList ⇐ <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-annotations-list  
+<a name="new_Panoramax.components.menus.AnnotationsList_new"></a>
+
+### new AnnotationsList()
+Annotations list shows listing of tagged picture areas.
+It uses the parent component currently selected picture.
+
+**Example**  
+```html
+<pnx-annotations-list _parent=${viewer} />
+```

package/docs/reference/components/ui/HashTags.md

@@ -0,0 +1,15 @@
+<a name="Panoramax.components.ui.HashTags"></a>
+
+## Panoramax.components.ui.HashTags ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-hashtags  
+<a name="new_Panoramax.components.ui.HashTags_new"></a>
+
+### new HashTags()
+HashTags component shows the list of hashtags associated to a picture.
+
+**Example**  
+```html
+<pnx-hashtags ._parent=${viewer} />
+```

package/docs/reference/components/ui/ListItem.md

@@ -0,0 +1,38 @@
+<a name="Panoramax.components.ui.ListItem"></a>
+
+## Panoramax.components.ui.ListItem ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-list-item  
+**Slot**: `icon` The left icon (symbol for this item)  
+**Slot**: `action` The right icon (symbol for an interactive action)  
+
+* [.ListItem](#Panoramax.components.ui.ListItem) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new ListItem()](#new_Panoramax.components.ui.ListItem_new)
+    * [.properties](#Panoramax.components.ui.ListItem+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.ListItem_new"></a>
+
+### new ListItem()
+ListItem is a list entry, in a Material Design fashion.
+
+**Example**  
+```html
+<pnx-list-item title="My feature" subtitle="It is very cool">
+  <img src="..." slot="icon" />
+  <img src="..." slot="action" />
+</pnx-list-item>
+```
+<a name="Panoramax.components.ui.ListItem+properties"></a>
+
+### listItem.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>ListItem</code>](#Panoramax.components.ui.ListItem)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| title | <code>string</code> | The item title |
+| [subtitle] | <code>string</code> | The item subtitle |
+

package/docs/reference/components/ui/Photo.md

@@ -3,7 +3,7 @@
 ## Panoramax.components.ui.Photo ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>
 **Kind**: static class of <code>Panoramax.components.ui</code>  
 **Extends**: <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>  
-**Emits**: [<code>picture-loading</code>](#Panoramax.components.ui.Photo+event_picture-loading), [<code>picture-preview-started</code>](#Panoramax.components.ui.Photo+event_picture-preview-started), [<code>picture-preview-stopped</code>](#Panoramax.components.ui.Photo+event_picture-preview-stopped), [<code>view-rotated</code>](#Panoramax.components.ui.Photo+event_view-rotated), [<code>picture-loaded</code>](#Panoramax.components.ui.Photo+event_picture-loaded), [<code>picture-tiles-loaded</code>](#Panoramax.components.ui.Photo+event_picture-tiles-loaded), [<code>transition-duration-changed</code>](#Panoramax.components.ui.Photo+event_transition-duration-changed), [<code>sequence-playing</code>](#Panoramax.components.ui.Photo+event_sequence-playing), [<code>sequence-stopped</code>](#Panoramax.components.ui.Photo+event_sequence-stopped), [<code>pictures-navigation-changed</code>](#Panoramax.components.ui.Photo+event_pictures-navigation-changed), [<code>ready</code>](#Panoramax.components.ui.Photo+event_ready)  
+**Emits**: [<code>picture-loading</code>](#Panoramax.components.ui.Photo+event_picture-loading), [<code>picture-preview-started</code>](#Panoramax.components.ui.Photo+event_picture-preview-started), [<code>picture-preview-stopped</code>](#Panoramax.components.ui.Photo+event_picture-preview-stopped), [<code>view-rotated</code>](#Panoramax.components.ui.Photo+event_view-rotated), [<code>picture-loaded</code>](#Panoramax.components.ui.Photo+event_picture-loaded), [<code>picture-tiles-loaded</code>](#Panoramax.components.ui.Photo+event_picture-tiles-loaded), [<code>transition-duration-changed</code>](#Panoramax.components.ui.Photo+event_transition-duration-changed), [<code>sequence-playing</code>](#Panoramax.components.ui.Photo+event_sequence-playing), [<code>sequence-stopped</code>](#Panoramax.components.ui.Photo+event_sequence-stopped), [<code>pictures-navigation-changed</code>](#Panoramax.components.ui.Photo+event_pictures-navigation-changed), [<code>ready</code>](#Panoramax.components.ui.Photo+event_ready), [<code>annotations-toggled</code>](#Panoramax.components.ui.Photo+event_annotations-toggled)  
 
 * [.Photo](#Panoramax.components.ui.Photo) ⇐ <code>[photo-sphere-viewer.core.Viewer](https://photo-sphere-viewer.js.org/api/classes/Core.Viewer.html)</code>
     * [new Photo(parent, container, [options])](#new_Panoramax.components.ui.Photo_new)
@@ -28,6 +28,10 @@
     * [.toggleSequencePlaying()](#Panoramax.components.ui.Photo+toggleSequencePlaying)
     * [.getPicturesNavigation()](#Panoramax.components.ui.Photo+getPicturesNavigation) ⇒ <code>string</code>
     * [.setPicturesNavigation(pn)](#Panoramax.components.ui.Photo+setPicturesNavigation)
+    * [.areAnnotationsVisible()](#Panoramax.components.ui.Photo+areAnnotationsVisible) ⇒ <code>boolean</code>
+    * [.toggleAllAnnotations(visible)](#Panoramax.components.ui.Photo+toggleAllAnnotations)
+    * [.focusOnAnnotation(id)](#Panoramax.components.ui.Photo+focusOnAnnotation)
+    * [.unfocusAnnotation()](#Panoramax.components.ui.Photo+unfocusAnnotation)
     * [.forceRefresh()](#Panoramax.components.ui.Photo+forceRefresh)
     * ["ready"](#Panoramax.components.ui.Photo+event_ready)
     * ["picture-loading"](#Panoramax.components.ui.Photo+event_picture-loading)
@@ -40,6 +44,7 @@
     * ["sequence-playing"](#Panoramax.components.ui.Photo+event_sequence-playing)
     * ["sequence-stopped"](#Panoramax.components.ui.Photo+event_sequence-stopped)
     * ["pictures-navigation-changed"](#Panoramax.components.ui.Photo+event_pictures-navigation-changed)
+    * ["annotations-toggled"](#Panoramax.components.ui.Photo+event_annotations-toggled)
 
 <a name="new_Panoramax.components.ui.Photo_new"></a>
 
@@ -246,6 +251,41 @@ Switch the allowed navigation between pictures.
 | --- | --- | --- |
 | pn | <code>string</code> | The picture navigation mode ("any": no restriction, "seq": only pictures in same sequence, "pic": only selected picture) |
 
+<a name="Panoramax.components.ui.Photo+areAnnotationsVisible"></a>
+
+### photo.areAnnotationsVisible() ⇒ <code>boolean</code>
+Are there any picture annotations shown ?
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Returns**: <code>boolean</code> - True if annotations are visible  
+<a name="Panoramax.components.ui.Photo+toggleAllAnnotations"></a>
+
+### photo.toggleAllAnnotations(visible)
+Toggle visibility of picture annotations
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| visible | <code>boolean</code> | True to make visible, false to hide |
+
+<a name="Panoramax.components.ui.Photo+focusOnAnnotation"></a>
+
+### photo.focusOnAnnotation(id)
+Make view centered and zoomed on given annotation.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| id | <code>string</code> | The annotation UUID |
+
+<a name="Panoramax.components.ui.Photo+unfocusAnnotation"></a>
+
+### photo.unfocusAnnotation()
+Remove focus styling on annotations.
+
+**Kind**: instance method of [<code>Photo</code>](#Panoramax.components.ui.Photo)  
 <a name="Panoramax.components.ui.Photo+forceRefresh"></a>
 
 ### photo.forceRefresh()
@@ -383,3 +423,15 @@ Event for pictures navigation mode change
 | --- | --- | --- |
 | detail.value | <code>string</code> | New mode (any, pic, seq) |
 
+<a name="Panoramax.components.ui.Photo+event_annotations-toggled"></a>
+
+### "annotations-toggled"
+Event for pictures annotation visibility change
+
+**Kind**: event emitted by [<code>Photo</code>](#Panoramax.components.ui.Photo)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| detail.visible | <code>boolean</code> | True if they are visible |
+

package/docs/reference/components/ui/SemanticsTable.md

@@ -0,0 +1,32 @@
+<a name="Panoramax.components.ui.SemanticsTable"></a>
+
+## Panoramax.components.ui.SemanticsTable ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+**Kind**: static class of <code>Panoramax.components.ui</code>  
+**Extends**: <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>  
+**Element**: pnx-semantics-table  
+
+* [.SemanticsTable](#Panoramax.components.ui.SemanticsTable) ⇐ <code>[lit.LitElement](https://lit.dev/docs/api/LitElement/)</code>
+    * [new SemanticsTable()](#new_Panoramax.components.ui.SemanticsTable_new)
+    * [.properties](#Panoramax.components.ui.SemanticsTable+properties) : <code>Object</code>
+
+<a name="new_Panoramax.components.ui.SemanticsTable_new"></a>
+
+### new SemanticsTable()
+Semantics Tables display all semantics tags from either a picture or an annotation.
+
+**Example**  
+```html
+<pnx-semantics-table source=${picture.properties} ._t=${viewer._t} />
+```
+<a name="Panoramax.components.ui.SemanticsTable+properties"></a>
+
+### semanticsTable.properties : <code>Object</code>
+Component properties.
+
+**Kind**: instance property of [<code>SemanticsTable</code>](#Panoramax.components.ui.SemanticsTable)  
+**Properties**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| [source] | <code>object</code> | The picture or annotation feature (having a `semantics` property) |
+

package/docs/reference/utils/PresetsManager.md

@@ -0,0 +1,35 @@
+<a name="Panoramax.utils.PresetsManager"></a>
+
+## Panoramax.utils.PresetsManager
+**Kind**: static class of <code>Panoramax.utils</code>  
+
+* [.PresetsManager](#Panoramax.utils.PresetsManager)
+    * [new PresetsManager([lang], [skipLoad])](#new_Panoramax.utils.PresetsManager_new)
+    * [.onceReady()](#Panoramax.utils.PresetsManager+onceReady) ⇒ <code>Promise</code>
+    * [.getPreset()](#Panoramax.utils.PresetsManager+getPreset) ⇒ <code>Promise</code>
+
+<a name="new_Panoramax.utils.PresetsManager_new"></a>
+
+### new PresetsManager([lang], [skipLoad])
+Presets Manager handle retrieval of presets against dedicated endpoint.
+It allows an easily search between all presets, and handles translations.
+
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [lang] | <code>string</code> |  | The user prefered language. Defaults to web browser preferences. |
+| [skipLoad] | <code>boolean</code> | <code>false</code> | Set to true to disable automatic load of API data |
+
+<a name="Panoramax.utils.PresetsManager+onceReady"></a>
+
+### presetsManager.onceReady() ⇒ <code>Promise</code>
+Resolves when the all necessary data was downloaded.
+
+**Kind**: instance method of [<code>PresetsManager</code>](#Panoramax.utils.PresetsManager)  
+<a name="Panoramax.utils.PresetsManager+getPreset"></a>
+
+### presetsManager.getPreset() ⇒ <code>Promise</code>
+Find the best matching preset for a given STAC feature.
+
+**Kind**: instance method of [<code>PresetsManager</code>](#Panoramax.utils.PresetsManager)  
+**Fulfil**: <code>object\|null</code> The preset JSON that best matches, or null if no matches  

package/docs/reference.md

@@ -25,6 +25,7 @@ Layout helpers:
 
 All-in-one, ready-to-use menus for complex operations. Note that they don't embed a container (like popup or panel) to be reusable in any situation.
 
+- [AnnotationsList](./reference/components/menus/AnnotationsList.md) : selected picture list of annotations (areas with tags).
 - [MapBackground](./reference/components/menus/MapBackground.md) : change map background.
 - [MapFilters](./reference/components/menus/MapFilters.md) : set map filters.
 - [MapLayers](./reference/components/menus/MapLayers.md) : change map theme and background.
@@ -44,8 +45,10 @@ Basic UI components:
 - [ButtonGroup](./reference/components/ui/ButtonGroup.md) : button bar.
 - [CopyButton](./reference/components/ui/CopyButton.md) : a copy-to-clipboard button.
 - [Grade](./reference/components/ui/Grade.md) : a 5-star rating display.
+- [HashTags](./reference/components/ui/HashTags.md) : a list of hashtags associated to a picture.
 - [LinkButton](./reference/components/ui/LinkButton.md) : a link button.
 - [ListGroup](./reference/components/ui/ListGroup.md) : a menu-like list of buttons and links.
+- [ListItem](./reference/components/ui/ListItem.md) : a Material Design-like list entry.
 - [Loader](./reference/components/ui/Loader.md) : the fullscreen initial loader.
 - [Map](./reference/components/ui/Map.md) : the browseable map (MapLibre GL).
 - [MapMore](./reference/components/ui/MapMore.md) : advanced version of the browseable map.
@@ -54,6 +57,7 @@ Basic UI components:
 - [ProgressBar](./reference/components/ui/ProgressBar.md) : a progress bar.
 - [QualityScore](./reference/components/ui/QualityScore.md) : a A/B/C/D/E grade display and input.
 - [SearchBar](./reference/components/ui/SearchBar.md) : a search bar.
+- [SemanticsTable](./reference/components/ui/SemanticsTable.md) : table for showing complete semantic tags of a picture/annotation.
 - [TogglableGroup](./reference/components/ui/TogglableGroup.md) : an helper for showing a menu on button click.
 
 

package/mkdocs.yml

@@ -65,6 +65,7 @@ nav:
         - Mini: 'reference/components/layout/Mini.md'
         - Tabs: 'reference/components/layout/Tabs.md'
       - menus:
+        - AnnotationsList: 'reference/components/menus/AnnotationsList.md'
         - MapBackground: 'reference/components/menus/MapBackground.md'
         - MapFilters: 'reference/components/menus/MapFilters.md'
         - MapLayers: 'reference/components/menus/MapLayers.md'
@@ -90,8 +91,10 @@ nav:
         - ButtonGroup: 'reference/components/ui/ButtonGroup.md'
         - CopyButton: 'reference/components/ui/CopyButton.md'
         - Grade: 'reference/components/ui/Grade.md'
+        - HashTags: 'reference/components/ui/HashTags.md'
         - LinkButton: 'reference/components/ui/LinkButton.md'
         - ListGroup: 'reference/components/ui/ListGroup.md'
+        - ListItem: 'reference/components/ui/ListItem.md'
         - Loader: 'reference/components/ui/Loader.md'
         - Map: 'reference/components/ui/Map.md'
         - MapMore: 'reference/components/ui/MapMore.md'
@@ -100,6 +103,7 @@ nav:
         - ProgressBar: 'reference/components/ui/ProgressBar.md'
         - QualityScore: 'reference/components/ui/QualityScore.md'
         - SearchBar: 'reference/components/ui/SearchBar.md'
+        - SemanticsTable: 'reference/components/ui/SemanticsTable.md'
         - TogglableGroup: 'reference/components/ui/TogglableGroup.md'
     - utils:
       - API: 'reference/utils/API.md'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "4.0.2-develop-9b499e28",
+  "version": "4.0.2-develop-e389d775",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -98,6 +98,7 @@
     "@photo-sphere-viewer/gallery-plugin": "5.12.1",
     "@photo-sphere-viewer/markers-plugin": "5.12.1",
     "@photo-sphere-viewer/virtual-tour-plugin": "5.12.1",
+    "iconify-icon": "^3.0.0",
     "json5": "^2.2.3",
     "lit": "^3.2.1",
     "maplibre-gl": "^5.3.0",

package/src/components/core/Basic.css

@@ -4,6 +4,7 @@
 	--black: #181818;
 	--black-pale: #1b1a17;
 	--red: #f70000;
+	--red-transparent: rgba(247, 0, 0, 0.3);
 	--red-pale: #ff726f;
 	--grey: #f5f5f5;
 	--grey-pale: #cfd2cf;
@@ -17,6 +18,7 @@
 	--beige: #f5f3ec;
 	--yellow: #fec868;
 	--orange: #ff6f00;
+	--orange-transparent: rgba(255,111,0,0.3);
 	--orange-pale: #fffafa;
 	--green: #7ec636;
 	--green-pale: #f0ffee;

package/src/components/core/PhotoViewer.js

@@ -9,6 +9,7 @@ import Photo, { PSV_DEFAULT_ZOOM, PSV_ANIM_DURATION } from "../ui/Photo";
 import { createWebComp } from "../../utils/widgets";
 import { isNullId } from "../../utils/utils";
 import { default as InitParameters, alterPSVState, alterMapState, alterPhotoViewerState } from "../../utils/InitParameters";
+import PresetManager from "../../utils/PresetsManager";
 
 
 export const PSV_ZOOM_DELTA = 20;
@@ -32,6 +33,7 @@ const PSV_MOVE_DELTA = Math.PI / 6;
  * @property {Panoramax.components.layout.CorneredGrid} grid The grid layout manager
  * @property {Panoramax.components.ui.Popup} popup The popup container
  * @property {Panoramax.utils.URLHandler} urlHandler The URL query parameters manager
+ * @property {Panoramax.utils.PresetsManager} presetsManager The semantics presets manager
  * @fires Panoramax.components.core.Basic#select
  * @fires Panoramax.components.core.Basic#ready
  * @fires Panoramax.components.core.Basic#broken
@@ -133,12 +135,19 @@ export default class PhotoViewer extends Basic {
 					focus: this._initParams.getParentPostInit().focus,
 					picture: this._initParams.getParentPostInit().picture,
 				});
+				
 				this.grid.appendChild(createWebComp("pnx-widget-zoom", {
 					slot: "bottom-right",
 					class: "pnx-print-hidden",
 					_parent: this
 				}));
 				this.grid.appendChild(this.legend);
+
+				this.grid.appendChild(createWebComp("pnx-hashtags", {
+					slot: "top-right",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+				}));
 			}
 			else {
 				this.legend = createWebComp("pnx-picture-legend", { _parent: this });
@@ -161,6 +170,8 @@ export default class PhotoViewer extends Basic {
 	connectedCallback() {
 		super.connectedCallback();
 
+		this.presetsManager = new PresetManager(this.lang);
+
 		if(this["url-parameters"] && this["url-parameters"] !== "false") {
 			this.urlHandler = new URLHandler(this);
 			this.onceReady().then(() => {

package/src/components/core/Viewer.js

@@ -39,6 +39,7 @@ const MAP_MOVE_DELTA = 100;
  * @property {Panoramax.components.layout.Mini} mini The reduced/collapsed map/photo component
  * @property {Panoramax.components.ui.Popup} popup The popup container
  * @property {Panoramax.utils.URLHandler} urlHandler The URL query parameters manager
+ * @property {Panoramax.utils.PresetsManager} presetsManager The semantics presets manager
  * @fires Panoramax.components.core.Basic#select
  * @fires Panoramax.components.core.Basic#ready
  * @fires Panoramax.components.core.Basic#broken
@@ -156,6 +157,12 @@ export default class Viewer extends PhotoViewer {
 					picture: this._initParams.getParentPostInit().picture,
 				});
 				this.grid.appendChild(this.legend);
+
+				this.grid.appendChild(createWebComp("pnx-hashtags", {
+					slot: "top-right",
+					_parent: this,
+					class: "pnx-only-psv pnx-print-hidden",
+				}));
 			}
 			else {
 				this.legend = createWebComp("pnx-picture-legend", { _parent: this });

package/src/components/layout/Tabs.js

@@ -121,7 +121,7 @@ export default class Tabs extends LitElement {
 	render() {
 		return html`
 			<nav @click="${this._handleTabClick}">
-				<slot name="title"></slot>
+				<slot name="title" @slotchange=${() => this.activeTabIndex = 0}></slot>
 			</nav>
 			<div class="contents">
 				<slot name="content"></slot>

package/src/components/menus/AnnotationsList.js

@@ -0,0 +1,146 @@
+import { LitElement, html, css, nothing } from "lit";
+import { faSvg, iconify } from "../styles";
+import { fa, moreIcons } from "../../utils/widgets";
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons/faChevronRight";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
+import "iconify-icon";
+
+/**
+ * Annotations list shows listing of tagged picture areas.
+ * It uses the parent component currently selected picture.
+ * 
+ * @class Panoramax.components.menus.AnnotationsList
+ * @element pnx-annotations-list
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-annotations-list _parent=${viewer} />
+ * ```
+ */
+export default class AnnotationsList extends LitElement {
+	/** @private */
+	static styles = [ faSvg, iconify, css`
+		.annotation { background: var(--white); }
+	` ];
+
+	/** @private */
+	static properties = {
+		_meta: {state: true},
+		_selectedAnnotation: {state: true},
+		_presets: {state: true},
+	};
+
+	constructor() {
+		super();
+		this._selectedAnnotation = null;
+		this._presets = {};
+		moreIcons();
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this._onPicChange();
+		this._parent?.psv?.addEventListener("picture-loaded", this._onPicChange.bind(this));
+
+		this._parent?.psv?._myMarkers?.addEventListener("select-marker", ({ marker }) => {
+			const aPos = this._meta.properties?.annotations?.findIndex(a => a.id === marker.data.id);
+			if(aPos >= 0) { this._onListItemClick(Object.assign({nb: aPos+1}, this._meta.properties.annotations[aPos])); }
+		});
+	}
+
+	/** @private */
+	_onPicChange() {
+		this._meta = this._parent?.psv?.getPictureMetadata();
+		delete this._prevPsvView;
+
+		// Load presets for annotations
+		if(this._meta && this._parent?.presetsManager) {
+			this._presets = {};
+			if(this._meta.properties?.annotations?.length > 0) {
+				this._meta.properties.annotations.map(a => this._parent.presetsManager.getPreset(a).then(p => {
+					this._presets[a.id] = p;
+					this.requestUpdate();
+				}));
+			}
+		}
+	}
+
+	/** @private */
+	_onListItemHover(a) {
+		if(a) {
+			// 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(a.id);
+		}
+		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(a) {
+		this._selectedAnnotation = a;
+		this._onListItemHover(a);
+	}
+
+	/** @private */
+	render() {
+		/* eslint-disable indent */
+		if(!this._meta) { return nothing; }
+
+		return this._selectedAnnotation === null
+			? html`<div class="list">
+				${this._meta.properties.annotations.map((a,i) => html`
+					<pnx-list-item
+						title=${
+							this._presets[a.id]?.name
+							|| this._parent?._t.pnx.semantics_features_default_title.replace("{nb}", i+1)
+						}
+						subtitle=${this._parent?._t.pnx.semantics_features_subtitle.replace("{nb}", a.semantics.length)}
+						@click=${() => this._onListItemClick(Object.assign({nb: i+1}, a))}
+						@mouseover=${() => this._onListItemHover(Object.assign({nb: i+1}, a))}
+						@mouseout=${() => this._onListItemHover(null)}
+					>
+						<iconify-icon
+							slot="icon"
+							icon=${this._presets[a.id]?.iconify || "fa6-solid:cube"}
+							style="font-size: 1.5em"
+						></iconify-icon>
+						${fa(faChevronRight, {transform: {size: 24}, attributes: {slot: "action"}})}
+					</pnx-list-item>
+				`)}
+			</div>`
+			: html`<div class="annotation">
+				<pnx-list-item
+					title=${
+						this._presets[this._selectedAnnotation.id]?.name
+						|| this._parent?._t.pnx.semantics_features_default_title.replace("{nb}", this._selectedAnnotation.nb)
+					}
+					@click=${() => this._onListItemClick(null)}
+				>
+					${fa(faArrowLeft, {transform: {size: 24}, attributes: {slot: "icon"}})}
+					<iconify-icon
+						slot="icon"
+						icon=${this._presets[this._selectedAnnotation.id]?.iconify || "fa6-solid:cube"}
+						style="font-size: 1.5em"
+					></iconify-icon>
+				</pnx-list-item>
+				<pnx-semantics-table
+					._t=${this._parent?._t}
+					.source=${this._selectedAnnotation}
+				/>
+			</div>`;
+	}
+}
+
+customElements.define("pnx-annotations-list", AnnotationsList);

package/src/components/menus/PictureLegend.js

@@ -8,7 +8,7 @@ import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
 import { faCalendarAlt } from "@fortawesome/free-solid-svg-icons/faCalendarAlt";
 import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
 import { faShareNodes } from "@fortawesome/free-solid-svg-icons/faShareNodes";
-import { placeholder, panel } from "../styles";
+import { placeholder, panel, hidden } from "../styles";
 import { reverseGeocodingNominatim } from "../../utils/geocoder";
 
 /**
@@ -24,7 +24,7 @@ import { reverseGeocodingNominatim } from "../../utils/geocoder";
  */
 export default class PictureLegend extends LitElement {
 	/** @private */
-	static styles = [placeholder, panel, css`
+	static styles = [placeholder, panel, hidden, css`
 		:host {
 			overflow-y: auto;
 			overflow-x: hidden;
@@ -38,8 +38,6 @@ export default class PictureLegend extends LitElement {
 			pnx-picture-metadata { width: 30vw; }
 		}
 
-		.pnx-hidden { display: none !important; }
-
 		/* Top bar */
 		.headline {
 			display: flex;