From 7f11a12f99a65d1d6756ed801b1a5a31a97d6c3f Mon Sep 17 00:00:00 2001
From: Arne Hamann <git@arne.email>
Date: Sat, 7 Jan 2023 23:45:14 +0100
Subject: [PATCH 1/3] Performance Improvements Photos

Signed-off-by: Arne Hamann <git@arne.email>
---
 lib/Service/GeophotoService.php               |   1 -
 src/components/AppNavigationPhotosItem.vue    |  27 +-
 src/components/Map.vue                        |   7 +-
 src/components/map/PhotoSuggestionsLayer.vue  |   8 +-
 src/components/map/PhotosLayer.vue            | 261 +++++++++++++++---
 .../map/Vue2LeafletDelayedMarkerCluster.vue   |   6 +-
 src/views/App.vue                             |  45 ++-
 7 files changed, 287 insertions(+), 68 deletions(-)

diff --git a/lib/Service/GeophotoService.php b/lib/Service/GeophotoService.php
index 137f2b8c0..f08aac924 100644
--- a/lib/Service/GeophotoService.php
+++ b/lib/Service/GeophotoService.php
@@ -158,7 +158,6 @@ public function getAllFromDB(string $userId, $folder=null, bool $respectNomediaA
 			 }
 			 $this->photosCache->set($key, $filesById, 60 * 60 * 24);
 		 }
-		 shuffle($filesById);
 		 return $filesById;
 	 }
 
diff --git a/src/components/AppNavigationPhotosItem.vue b/src/components/AppNavigationPhotosItem.vue
index 3b61e471e..35dd3d131 100644
--- a/src/components/AppNavigationPhotosItem.vue
+++ b/src/components/AppNavigationPhotosItem.vue
@@ -6,9 +6,16 @@
 		:allow-collapse="false"
 		:force-menu="enabled"
 		@click="$emit('photos-clicked')">
-		<NcCounterBubble v-show="enabled && photos.length"
+		<NcCounterBubble v-if="enabled && loading"
 			slot="counter">
-			{{ photos.length > 1000 ? Math.floor(photos.length/1000).toString() + 'k' : photos.length > 99 ? '99+' : photos.length }}
+			{{
+				(loadedPhotos > 1000 ? Math.floor(loadedPhotos/1000).toString() + 'k' : loadedPhotos > 99 ? '99+' : loadedPhotos) + '/' +
+					(totalPhotos > 1000 ? Math.floor(totalPhotos/1000).toString() + 'k' : totalPhotos > 99 ? '99+' : totalPhotos)
+			}}
+		</NcCounterBubble>
+		<NcCounterBubble v-else-if="enabled"
+			slot="counter">
+			{{ totalPhotos > 1000 ? Math.floor(totalPhotos/1000).toString() + 'k' : totalPhotos > 99 ? '99+' : totalPhotos }}
 		</NcCounterBubble>
 		<template v-if="enabled" slot="actions">
 			<NcActionButton v-if="!readOnly"
@@ -66,10 +73,18 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		photos: {
-			type: Array,
+		loadedPhotos: {
+			type: Number,
+			required: true,
+		},
+		totalPhotos: {
+			type: Number,
 			required: true,
 		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
 		draggable: {
 			type: Boolean,
 			required: true,
@@ -87,10 +102,6 @@ export default {
 	},
 
 	computed: {
-		readOnly() {
-			return this.photos.every((p) => !p.isUpdateable)
-				|| (this.photos.length === 0 && !(optionsController.optionValues?.isCreatable && !optionsController.optionValues?.isUpdateable))
-		},
 	},
 
 	methods: {
diff --git a/src/components/Map.vue b/src/components/Map.vue
index edb5a3759..c4c267f1d 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -84,11 +84,16 @@
 				ref="photosLayer"
 				:map="map"
 				:photos="photos"
+				:date-filter-enabled="sliderEnabled"
+				:date-filter-start="sliderStartTimestamp"
+				:date-filter-end="sliderEndTimestamp"
 				:draggable="photosDraggable"
 				@add-to-map-photo="$emit('add-to-map-photo', $event)"
 				@coords-reset="$emit('coords-reset', $event)"
 				@photo-moved="onPhotoMoved"
-				@open-sidebar="$emit('open-sidebar',$event)" />
+				@open-sidebar="$emit('open-sidebar',$event)"
+				@cluster-loading="$emit('photo-clusters-loading',$event)"
+				@cluster-loaded="$emit('photo-clusters-loaded')" />
 			<PhotoSuggestionsLayer
 				v-if="map && photosEnabled && showPhotoSuggestions"
 				ref="photoSuggestionsLayer"
diff --git a/src/components/map/PhotoSuggestionsLayer.vue b/src/components/map/PhotoSuggestionsLayer.vue
index dd528c77e..1b9439863 100644
--- a/src/components/map/PhotoSuggestionsLayer.vue
+++ b/src/components/map/PhotoSuggestionsLayer.vue
@@ -1,5 +1,5 @@
 <template>
-	<Vue2LeafletDelayedMarkerCluster :options="clusterOptions"
+	<Vue2LeafletMarkerCluster :options="clusterOptions"
 		@clusterclick="onClusterClick"
 		@clustercontextmenu="onClusterRightClick"
 		@spiderfied="onSpiderfied">
@@ -54,7 +54,7 @@
 				</NcActionButton>
 			</LPopup>
 		</LMarker>
-	</Vue2LeafletDelayedMarkerCluster>
+	</Vue2LeafletMarkerCluster>
 </template>
 
 <script>
@@ -65,7 +65,7 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 
 import L from 'leaflet'
 import { LMarker, LTooltip, LPopup } from 'vue2-leaflet'
-import Vue2LeafletDelayedMarkerCluster from './Vue2LeafletDelayedMarkerCluster'
+import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster'
 
 import optionsController from '../../optionsController'
 
@@ -74,7 +74,7 @@ const PHOTO_MARKER_VIEW_SIZE = 40
 export default {
 	name: 'PhotoSuggestionsLayer',
 	components: {
-		Vue2LeafletDelayedMarkerCluster,
+		Vue2LeafletMarkerCluster,
 		LMarker,
 		LTooltip,
 		LPopup,
diff --git a/src/components/map/PhotosLayer.vue b/src/components/map/PhotosLayer.vue
index 9f86abde2..0748e5d4d 100644
--- a/src/components/map/PhotosLayer.vue
+++ b/src/components/map/PhotosLayer.vue
@@ -1,43 +1,41 @@
 <template>
-	<Vue2LeafletDelayedMarkerCluster :options="clusterOptions"
+	<Vue2LeafletMarkerCluster
+		ref="markerCluster"
+		:options="clusterOptions"
 		@clusterclick="onClusterClick"
 		@clustercontextmenu="onClusterRightClick"
 		@spiderfied="onSpiderfied">
-		<LMarker v-for="(p, i) in displayedPhotos"
-			:key="i"
-			:options="{ data: p }"
-			:icon="getPhotoMarkerIcon(p)"
-			:draggable="draggable && p.isUpdateable"
-			:lat-lng="[p.lat, p.lng]"
-			@click="onPhotoClick($event, p)"
-			@contextmenu="onPhotoRightClick($event, p)"
-			@moveend="onPhotoMoved($event, p)">
+		<LMarker
+			:lat-lng="[0, 0]"
+			:visible="false">
 			<LTooltip
+				ref="markerTooltip"
 				:class="{ 'tooltip-photo-wrapper': true }"
 				:options="{ ...tooltipOptions, opacity: draggable ? 0 : 1 }">
 				<img class="photo-tooltip"
-					:src="getPreviewUrl(p)">
+					:src="getPreviewUrl(currentPhoto)">
 				<p class="tooltip-photo-date">
-					{{ getPhotoFormattedDate(p) }}
+					{{ getPhotoFormattedDate(currentPhoto) }}
 				</p>
 				<p class="tooltip-photo-name">
-					{{ basename(p.path) }}
+					{{ currentPhoto ? basename(currentPhoto.path) : '' }}
 				</p>
 			</LTooltip>
 			<LPopup
+				ref="markerPopup"
 				class="popup-photo-wrapper"
 				:options="popupOptions">
-				<NcActionButton icon="icon-toggle" @click="$emit('open-sidebar',p.path)">
+				<NcActionButton v-if="currentPhoto && currentPhoto.path" icon="icon-toggle" @click="$emit('open-sidebar',currentPhoto.path)">
 					{{ t('maps', 'Open in Sidebar') }}
 				</NcActionButton>
-				<NcActionButton icon="icon-toggle" @click="viewPhoto(p)">
+				<NcActionButton icon="icon-toggle" @click="viewPhoto(currentPhoto)">
 					{{ t('maps', 'Display picture') }}
 				</NcActionButton>
-				<NcActionButton v-if="p.isUpdateable" icon="icon-history" @click="resetPhotosCoords([p])">
+				<NcActionButton v-if="currentPhoto && currentPhoto.isUpdateable" icon="icon-history" @click="resetPhotosCoords([currentPhoto])">
 					{{ t('maps', 'Remove geo data') }}
 				</NcActionButton>
 				<NcActionButton icon="icon-share"
-					@click="$emit('add-to-map-photo', p)">
+					@click="$emit('add-to-map-photo', currentPhoto)">
 					{{ t('maps', 'Copy to map') }}
 				</NcActionButton>
 			</LPopup>
@@ -63,7 +61,7 @@
 				</NcActionButton>
 			</LPopup>
 		</LMarker>
-	</Vue2LeafletDelayedMarkerCluster>
+	</Vue2LeafletMarkerCluster>
 </template>
 
 <script>
@@ -74,16 +72,17 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
 
 import L from 'leaflet'
 import { LMarker, LTooltip, LPopup } from 'vue2-leaflet'
-import Vue2LeafletDelayedMarkerCluster from './Vue2LeafletDelayedMarkerCluster'
+import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster'
 
 import optionsController from '../../optionsController'
+import {binSearch} from "../../utils/common";
 
 const PHOTO_MARKER_VIEW_SIZE = 40
 
 export default {
 	name: 'PhotosLayer',
 	components: {
-		Vue2LeafletDelayedMarkerCluster,
+		Vue2LeafletMarkerCluster,
 		LMarker,
 		LTooltip,
 		LPopup,
@@ -99,6 +98,18 @@ export default {
 			type: Array,
 			required: true,
 		},
+		dateFilterEnabled: {
+			type: Boolean,
+			required: true,
+		},
+		dateFilterStart: {
+			type: Number,
+			required: true,
+		},
+		dateFilterEnd: {
+			type: Number,
+			required: true,
+		},
 		draggable: {
 			type: Boolean,
 			required: true,
@@ -108,9 +119,13 @@ export default {
 	data() {
 		return {
 			optionValues: optionsController.optionValues,
+			markerOptions: {
+				draggable: this.draggable,
+			},
 			clusterOptions: {
 				iconCreateFunction: this.getClusterMarkerIcon,
 				spiderfyOnMaxZoom: false,
+				singleMarkerMode: true,
 				showCoverageOnHover: false,
 				zoomToBoundsOnClick: false,
 				maxClusterRadius: PHOTO_MARKER_VIEW_SIZE + 10,
@@ -118,8 +133,9 @@ export default {
 					iconSize: [PHOTO_MARKER_VIEW_SIZE, PHOTO_MARKER_VIEW_SIZE],
 				},
 				chunkedLoading: true,
-				chunkDelay: 200,
-				chunkInterval: 50,
+				chunkDelay: 50,
+				chunkInterval: 250,
+				chunkProgress: this.updateClusterLoadingProgress,
 			},
 			tooltipOptions: {
 				className: 'leaflet-marker-photo-tooltip',
@@ -138,6 +154,9 @@ export default {
 			},
 			contextCluster: null,
 			spiderfied: false,
+			currentPhoto: null,
+			photoMarkers: [],
+			clustersLoading: false,
 		}
 	},
 
@@ -146,14 +165,97 @@ export default {
 			return !this.photos.some((f) => (f.isUpdateable))
 				&& !(this.photos.length === 0 && optionsController.optionValues?.isCreatable)
 		},
-		displayedPhotos() {
-			return this.photos
+		photosLastNullIndex() {
+			return this.dateFilterEnabled ? binSearch(this.photos, (p) => !p.dateTaken) : -1
+		},
+		photosFirstShownIndex() {
+			return this.dateFilterEnabled ? binSearch(this.photos, (p) => (p.dateTaken || 0) < this.dateFilterStart) + 1 : 0
+		},
+		photosLastShownIndex() {
+			return this.dateFilterEnabled ? binSearch(this.photos, (p) => (p.dateTaken || 0) < this.dateFilterEnd) : this.photos.length - 1
+		},
+	},
+
+	watch: {
+		photos() {
+			this.updatePhotoMarkers()
+		},
+		draggable() {
+			this.updatePhotoMarkersDraggable()
+		},
+		dateFilterEnabled(newValue) {
+			if (newValue) {
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.photoMarkers.slice(
+						this.photosLastNullIndex + 1,
+						this.photosFirstShownIndex
+					)
+				)
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.photoMarkers.slice(
+						this.photosLastShownIndex + 1,
+					)
+				)
+			} else {
+				this.$refs.markerCluster.mapObject.addLayers(
+					this.photoMarkers.slice(
+						this.photosLastNullIndex + 1,
+						this.photosFirstShownIndex
+					)
+				)
+				this.$refs.markerCluster.mapObject.addLayers(
+					this.photoMarkers.slice(
+						this.photosLastShownIndex + 1,
+					)
+				)
+			}
+		},
+		photosFirstShownIndex(newIndex, oldIndex) {
+			if (newIndex < oldIndex) {
+				this.$refs.markerCluster.mapObject.addLayers(
+					this.photoMarkers.slice(
+						newIndex,
+						oldIndex
+					)
+				)
+			} else if (newIndex > oldIndex) {
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.photoMarkers.slice(
+						oldIndex,
+						newIndex
+					)
+				)
+			}
+		},
+		photosLastShownIndex(newIndex, oldIndex) {
+			if (newIndex < oldIndex) {
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.photoMarkers.slice(
+						newIndex + 1,
+						oldIndex + 1
+					)
+				)
+			} else if (newIndex > oldIndex) {
+				this.$refs.markerCluster.mapObject.addLayers(
+					this.photoMarkers.slice(
+						oldIndex + 1,
+						newIndex + 1
+					)
+				)
+			}
+		},
+		dateFilterEnd(newEnd, oldEnd) {
+
 		},
 	},
 
 	beforeMount() {
 	},
 
+	mounted() {
+		this.updatePhotoMarkers()
+	},
+
 	methods: {
 		basename(path) {
 			return basename(path)
@@ -165,7 +267,7 @@ export default {
 				if (OCA.Viewer && OCA.Viewer.open) {
 					this.displayCluster(a.layer)
 				} else {
-					this.$emit('open-sidebar', a.layer.getAllChildMarkers()[0].options.data.path)
+					this.$emit('open-sidebar', a.layer.getAllChildMarkers()[0].data.path)
 					a.layer.spiderfy()
 				}
 			}
@@ -204,7 +306,7 @@ export default {
 		},
 		displayCluster(cluster) {
 			const photoList = cluster.getAllChildMarkers().map((m) => {
-				return m.options.data
+				return m.data
 			})
 			photoList.sort((a, b) => {
 				return a.dateTaken - b.dateTaken
@@ -214,12 +316,15 @@ export default {
 			this.map.closePopup()
 		},
 		getClusterMarkerIcon(cluster) {
-			const photo = cluster.getAllChildMarkers()[0].options.data
+			const count = cluster.getChildCount()
+			const photo = cluster.getAllChildMarkers()[0].data
+			if (count === 1) {
+				return this.getPhotoMarkerIcon(photo)
+			}
 			const iconUrl = this.getPreviewUrl(photo)
-			const label = cluster.getChildCount()
 			return new L.DivIcon(L.extend({
 				className: 'leaflet-marker-photo cluster-marker',
-				html: '<div class="thumbnail" style="background-image: url(' + iconUrl + ');"></div>​<span class="label">' + label + '</span>',
+				html: '<div class="thumbnail" style="background-image: url(' + iconUrl + ');"></div>​<span class="label">' + count + '</span>',
 			}, cluster, {
 				iconSize: [PHOTO_MARKER_VIEW_SIZE, PHOTO_MARKER_VIEW_SIZE],
 				iconAnchor: [PHOTO_MARKER_VIEW_SIZE / 2, PHOTO_MARKER_VIEW_SIZE],
@@ -236,14 +341,15 @@ export default {
 			}))
 		},
 		getPreviewUrl(photo) {
-			return photo.hasPreview
+			return photo && photo.hasPreview
 				? generateUrl('core') + '/preview?fileId=' + photo.fileId + '&x=341&y=256&a=1'
 				: generateUrl('/apps/theming/img/core/filetypes') + '/image.svg?v=2'
 		},
 		getPhotoFormattedDate(photo) {
-			return moment(photo.dateTaken * 1000).format('LLL')
+			return photo ? moment(photo.dateTaken * 1000).format('LLL') : ''
 		},
-		onPhotoClick(e, photo) {
+		onPhotoClick(e) {
+			const photo = e.target.data
 			// we want popup to open on right click only
 			this.$nextTick(() => {
 				e.target.closePopup()
@@ -257,11 +363,32 @@ export default {
 				this.map.closePopup()
 			}
 		},
-		onPhotoRightClick(e, photo) {
+		onPhotoRightClick(e) {
+			const photo = e.target.data
+			this.currentPhoto = photo
+			const popup = this.$refs.markerPopup.mapObject
+			popup.setLatLng([photo.lat, photo.lng])
+			this.$nextTick(() => {
+				popup.openOn(this.map)
+			})
+		},
+		onPhotoMouseOver(e) {
+			const photo = e.target.data
+			this.currentPhoto = photo
+			const tooltip = this.$refs.markerTooltip.mapObject
+			tooltip.setLatLng([photo.lat, photo.lng])
 			this.$nextTick(() => {
-				e.target.openPopup()
+				tooltip.openOn(this.map)
 			})
 		},
+		onPhotoMouseOut(e) {
+			const tooltip = this.$refs.markerTooltip.mapObject
+			tooltip.close()
+		},
+		onPhotoMoved(e) {
+			const photo = e.target.data
+			this.$emit('photo-moved', photo, e.target.getLatLng())
+		},
 		resetClusterPhotoCoords() {
 			const clusterSize = this.contextCluster.getChildCount()
 			OC.dialogs.confirmDestructive(
@@ -276,7 +403,7 @@ export default {
 				(result) => {
 					if (result) {
 						const photos = this.contextCluster.getAllChildMarkers().map((m) => {
-							return m.options.data
+							return m.data
 						})
 						this.resetPhotosCoords(photos)
 					}
@@ -289,8 +416,68 @@ export default {
 			this.$emit('coords-reset', paths)
 			this.map.closePopup()
 		},
-		onPhotoMoved(e, photo) {
-			this.$emit('photo-moved', photo, e.target.getLatLng())
+		updateClusterLoadingProgress(processed, total, elapsed, layersArray) {
+			if (elapsed > 100 && !this.clustersLoading) {
+				this.clustersLoading = true
+			}
+			this.$emit('cluster-loading', processed, total)
+
+			if (processed === total) {
+				this.clustersLoading = false
+				// all markers processed - hide the progress bar:
+				this.$emit('cluster-loaded')
+			}
+		},
+
+		async updatePhotoMarkers() {
+			this.$refs.markerCluster.mapObject.removeLayers(this.photoMarkers)
+			this.photoMarkers = this.photos.map((p, i) => {
+				const m = new L.Marker([p.lat, p.lng],
+					{
+						draggable: this.draggable,
+					},
+				)
+				m.on(
+					'click', this.onPhotoClick
+				)
+				m.on(
+					'contextmenu', this.onPhotoRightClick
+				)
+				m.on(
+					'mouseover', this.onPhotoMouseOver
+				)
+				m.on(
+					'mouseout', this.onPhotoMouseOut
+				)
+				m.on(
+					'moveend', this.onPhotoMoved
+				)
+				m.data = p
+				return m
+			})
+			this.$refs.markerCluster.mapObject.addLayers(this.photoMarkers)
+			if (this.dateFilterEnabled) {
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.photoMarkers.slice(
+						this.photosLastNullIndex + 1,
+						this.photosFirstShownIndex
+					)
+				)
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.photoMarkers.slice(
+						this.photosLastShownIndex + 1,
+					)
+				)
+			}
+		},
+		async updatePhotoMarkersDraggable() {
+			this.photoMarkers.forEach((m) => {
+				if (m.dragging) {
+					this.draggable ? m.dragging.enable() : m.dragging.disable()
+				}
+				m.options.draggable = this.draggable
+				m.update()
+			})
 		},
 	},
 }
diff --git a/src/components/map/Vue2LeafletDelayedMarkerCluster.vue b/src/components/map/Vue2LeafletDelayedMarkerCluster.vue
index 0f76b5d94..084c56e6d 100644
--- a/src/components/map/Vue2LeafletDelayedMarkerCluster.vue
+++ b/src/components/map/Vue2LeafletDelayedMarkerCluster.vue
@@ -68,9 +68,9 @@ export default {
 		},
 		scheduleUpdate() {
 			setTimeout(function() {
-					this.update()
-				}.bind(this),
-				this.delay + 1
+				this.update()
+			}.bind(this),
+			this.delay + 1
 			)
 		},
 		update() {
diff --git a/src/views/App.vue b/src/views/App.vue
index 66a0e2e0d..808a0851b 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -41,7 +41,9 @@
 				<AppNavigationPhotosItem
 					:enabled="photosEnabled"
 					:loading="photosLoading"
-					:photos="photos"
+					:total-photos="countVisiblePhotos"
+					:loaded-photos="loadedPhotos"
+					:read-only="photosReadOnly"
 					:draggable="photosDraggable"
 					:show-suggestions="showPhotoSuggestions"
 					@photos-clicked="onPhotosClicked"
@@ -103,7 +105,7 @@
 					:favorite-categories="favoriteCategories"
 					:favorites-enabled="favoritesEnabled"
 					:favorites-draggable="favoritesDraggable"
-					:photos="displayedPhotos"
+					:photos="photos"
 					:photos-enabled="photosEnabled"
 					:photos-draggable="photosDraggable"
 					:show-photo-suggestions="showPhotoSuggestions"
@@ -136,6 +138,8 @@
 					@address-deleted="onContactAddressDelete"
 					@add-to-map-contact="onAddContactToMap"
 					@contact-placed="onContactPlace"
+					@photo-clusters-loading="onPhotoClustersLoading"
+					@photo-clusters-loaded="onPhotoClustersLoaded"
 					@add-to-map-photo="onAddPhotoToMap"
 					@place-photos="placePhotoFilesOrFolder"
 					@photo-moved="onPhotoMoved"
@@ -268,6 +272,7 @@ export default {
 			photosEnabled: optionsController.photosEnabled,
 			photosDraggable: false,
 			photos: [],
+			loadedPhotos: 0,
 			selectedPhoto: null,
 			showPhotoSuggestions: false,
 			photoSuggestions: [],
@@ -399,18 +404,21 @@ export default {
 				})
 				: this.devices
 		},
-		displayedPhotos() {
-			if (this.sliderEnabled) {
-				const lastNullIndex = binSearch(this.photos, (p) => !p.dateTaken)
-				const firstShownIndex = binSearch(this.photos, (p) => (p.dateTaken || 0) < this.sliderStart) + 1
-				const lastShownIndex = binSearch(this.photos, (p) => (p.dateTaken || 0) < this.sliderEnd)
-				return [
-					...this.photos.slice(0, lastNullIndex + 1),
-					...this.photos.slice(firstShownIndex, lastShownIndex + 1),
-				]
-			} else {
-				return this.photos
-			}
+		photosLastNullIndex() {
+			return this.sliderEnabled ? binSearch(this.photos, (p) => !p.dateTaken) : -1
+		},
+		photosFirstShownIndex() {
+			return this.sliderEnabled ? binSearch(this.photos, (p) => (p.dateTaken || 0) < this.sliderStart) + 1 : 0
+		},
+		photosLastShownIndex() {
+			return this.sliderEnabled ? binSearch(this.photos, (p) => (p.dateTaken || 0) < this.sliderEnd) : this.photos.length - 1
+		},
+		countVisiblePhotos() {
+			return 1 + this.photosLastNullIndex + Math.min(this.photos.length - 1 ?? 0, this.photosLastShownIndex) - this.photosFirstShownIndex + 1
+		},
+		photosReadOnly() {
+			return this.photos.every((p) => !p.isUpdateable)
+				|| (this.photos.length === 0 && !(optionsController.optionValues?.isCreatable && !optionsController.optionValues?.isUpdateable))
 		},
 		displayedFavorites() {
 			return this.sliderEnabled
@@ -809,6 +817,15 @@ export default {
 			}
 		},
 		// ================ PHOTOS =================
+		onPhotoClustersLoading(processed, total) {
+			this.photosLoading = true
+			this.loadedPhotos = processed
+		},
+		onPhotoClustersLoaded() {
+			if (this.loadedPhotos > 0) {
+				this.photosLoading = false
+			}
+		},
 		onPhotosClicked() {
 			this.photosEnabled = !this.photosEnabled
 			// get photos if we don't have them yet

From cf50108d3b677837ada35c11d85fd7ee0661b3eb Mon Sep 17 00:00:00 2001
From: Arne Hamann <git@arne.email>
Date: Mon, 9 Jan 2023 00:54:17 +0100
Subject: [PATCH 2/3] Performance Improvements PhotoSuggestions

Signed-off-by: Arne Hamann <git@arne.email>
---
 lib/Service/GeophotoService.php              |   1 -
 src/components/Map.vue                       |   3 +
 src/components/map/PhotoSuggestionsLayer.vue | 271 ++++++++++++++++---
 src/components/map/PhotosLayer.vue           |   6 -
 4 files changed, 237 insertions(+), 44 deletions(-)

diff --git a/lib/Service/GeophotoService.php b/lib/Service/GeophotoService.php
index f08aac924..7f05ca33c 100644
--- a/lib/Service/GeophotoService.php
+++ b/lib/Service/GeophotoService.php
@@ -240,7 +240,6 @@ public function getNonLocalizedFromDB (string $userId, $folder=null, bool $respe
 			}
 			$this->nonLocalizedPhotosCache->set($key, $filesById, 60 * 60 * 24);
         }
-        shuffle($filesById);
         return $filesById;
     }
 
diff --git a/src/components/Map.vue b/src/components/Map.vue
index c4c267f1d..bb614e0bb 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -100,6 +100,9 @@
 				:map="map"
 				:photo-suggestions="photoSuggestions"
 				:photo-suggestions-selected-indices="photoSuggestionsSelectedIndices"
+				:date-filter-enabled="sliderEnabled"
+				:date-filter-start="sliderStartTimestamp"
+				:date-filter-end="sliderEndTimestamp"
 				:draggable="photosDraggable"
 				@photo-suggestion-moved="onPhotoSuggestionMoved"
 				@photo-suggestion-selected="$emit('photo-suggestion-selected', $event)" />
diff --git a/src/components/map/PhotoSuggestionsLayer.vue b/src/components/map/PhotoSuggestionsLayer.vue
index 1b9439863..98117a4c1 100644
--- a/src/components/map/PhotoSuggestionsLayer.vue
+++ b/src/components/map/PhotoSuggestionsLayer.vue
@@ -1,11 +1,13 @@
 <template>
-	<Vue2LeafletMarkerCluster :options="clusterOptions"
+	<Vue2LeafletMarkerCluster
+		ref="markerCluster"
+		:options="clusterOptions"
 		@clusterclick="onClusterClick"
 		@clustercontextmenu="onClusterRightClick"
 		@spiderfied="onSpiderfied">
-		<LMarker v-for="(p, i) in photoSuggestions"
-			:key="i"
+<!--		<LMarker v-for="(p, i) in photoSuggestions"
 			v-if="p"
+			:key="i"
 			:options="{ data: p }"
 			:icon="getPhotoMarkerIcon(p, i)"
 			:draggable="draggable"
@@ -35,6 +37,34 @@
 					{{ t('maps', 'Display picture') }}
 				</NcActionButton>
 			</LPopup>
+		</LMarker>-->
+		<LMarker
+			:lat-lng="[0, 0]"
+			:visible="false">
+			<LTooltip
+				ref="markerTooltip"
+				:class="{
+					'tooltip-photo-suggestion-wrapper': true,
+					'photo-suggestion-marker-selected': photoSuggestionsSelectedIndices.includes(currentSuggestion?.i)
+				}"
+				:options="{ ...tooltipOptions, opacity: draggable ? 0 : 1 }">
+				<img class="photo-suggestion-tooltip"
+					:src="getPreviewUrl(currentSuggestion)">
+				<p class="tooltip-photo-suggestion-date">
+					{{ getPhotoFormattedDate(currentSuggestion) }}
+				</p>
+				<p class="tooltip-photo-suggestion-name">
+					{{ currentSuggestion ? basename(currentSuggestion.path) : ''}}
+				</p>
+			</LTooltip>
+			<LPopup
+				ref="markerPopup"
+				class="popup-photo-wrapper"
+				:options="popupOptions">
+				<NcActionButton icon="icon-toggle" @click="viewPhoto(currentSuggestion)">
+					{{ t('maps', 'Display picture') }}
+				</NcActionButton>
+			</LPopup>
 		</LMarker>
 		<LMarker
 			:lat-lng="[0, 0]"
@@ -68,6 +98,7 @@ import { LMarker, LTooltip, LPopup } from 'vue2-leaflet'
 import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster'
 
 import optionsController from '../../optionsController'
+import {binSearch} from "../../utils/common";
 
 const PHOTO_MARKER_VIEW_SIZE = 40
 
@@ -94,6 +125,18 @@ export default {
 			type: Array,
 			required: true,
 		},
+		dateFilterEnabled: {
+			type: Boolean,
+			required: true,
+		},
+		dateFilterStart: {
+			type: Number,
+			required: true,
+		},
+		dateFilterEnd: {
+			type: Number,
+			required: true,
+		},
 		draggable: {
 			type: Boolean,
 			required: true,
@@ -106,12 +149,17 @@ export default {
 			clusterOptions: {
 				iconCreateFunction: this.getClusterMarkerIcon,
 				spiderfyOnMaxZoom: false,
+				singleMarkerMode: true,
 				showCoverageOnHover: false,
 				zoomToBoundsOnClick: false,
 				maxClusterRadius: PHOTO_MARKER_VIEW_SIZE + 10,
 				icon: {
 					iconSize: [PHOTO_MARKER_VIEW_SIZE, PHOTO_MARKER_VIEW_SIZE],
 				},
+				chunkedLoading: true,
+				chunkDelay: 50,
+				chunkInterval: 250,
+				chunkProgress: this.updateClusterLoadingProgress,
 			},
 			tooltipOptions: {
 				className: 'leaflet-marker-photo-suggestion-tooltip',
@@ -130,15 +178,101 @@ export default {
 			},
 			contextCluster: null,
 			spiderfied: false,
+			currentSuggestion: null,
+			suggestionMarkers: [],
+			clustersLoading: false,
 		}
 	},
 
 	computed: {
+		suggestionsLastNullIndex() {
+			return this.dateFilterEnabled ? binSearch(this.photoSuggestions, (p) => !p.dateTaken) : -1
+		},
+		suggestionsFirstShownIndex() {
+			return this.dateFilterEnabled ? binSearch(this.photoSuggestions, (p) => (p.dateTaken || 0) < this.dateFilterStart) + 1 : 0
+		},
+		suggestionsLastShownIndex() {
+			return this.dateFilterEnabled ? binSearch(this.photoSuggestions, (p) => (p.dateTaken || 0) < this.dateFilterEnd) : this.photoSuggestions.length - 1
+		},
+	},
+
+	watch: {
+		photoSuggestions() {
+			this.updateSuggestionMarkers()
+		},
+		draggable() {
+			this.updateSuggestionMarkersDraggable()
+		},
+		dateFilterEnabled(newValue) {
+			if (newValue) {
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.suggestionMarkers.slice(
+						this.suggestionsLastNullIndex + 1,
+						this.suggestionsFirstShownIndex
+					)
+				)
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.suggestionMarkers.slice(
+						this.suggestionsLastShownIndex + 1,
+					)
+				)
+			} else {
+				this.$refs.markerCluster.mapObject.addLayers(
+					this.suggestionMarkers.slice(
+						this.suggestionsLastNullIndex + 1,
+						this.suggestionsFirstShownIndex
+					)
+				)
+				this.$refs.markerCluster.mapObject.addLayers(
+					this.suggestionMarkers.slice(
+						this.suggestionsLastShownIndex + 1,
+					)
+				)
+			}
+		},
+		suggestionsFirstShownIndex(newIndex, oldIndex) {
+			if (newIndex < oldIndex) {
+				this.$refs.markerCluster.mapObject.addLayers(
+					this.suggestionMarkers.slice(
+						newIndex,
+						oldIndex
+					)
+				)
+			} else if (newIndex > oldIndex) {
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.suggestionMarkers.slice(
+						oldIndex,
+						newIndex
+					)
+				)
+			}
+		},
+		suggestionsLastShownIndex(newIndex, oldIndex) {
+			if (newIndex < oldIndex) {
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.suggestionMarkers.slice(
+						newIndex + 1,
+						oldIndex + 1
+					)
+				)
+			} else if (newIndex > oldIndex) {
+				this.$refs.markerCluster.mapObject.addLayers(
+					this.suggestionMarkers.slice(
+						oldIndex + 1,
+						newIndex + 1
+					)
+				)
+			}
+		},
 	},
 
 	beforeMount() {
 	},
 
+	mounted() {
+		this.updateSuggestionMarkers()
+	},
+
 	methods: {
 		basename(path) {
 			return basename(path)
@@ -184,7 +318,7 @@ export default {
 		},
 		displayCluster(cluster) {
 			const photoList = cluster.getAllChildMarkers().map((m) => {
-				return m.options.data
+				return m.data
 			})
 			photoList.sort((a, b) => {
 				return a.dateTaken - b.dateTaken
@@ -194,20 +328,23 @@ export default {
 			this.map.closePopup()
 		},
 		getClusterMarkerIcon(cluster) {
-			const photo = cluster.getAllChildMarkers()[0].options.data
+			const count = cluster.getChildCount()
+			const photo = cluster.getAllChildMarkers()[0].data
+			if (count === 1) {
+				return this.getPhotoMarkerIcon(photo)
+			}
 			const iconUrl = this.getPreviewUrl(photo)
-			const label = cluster.getChildCount()
 			return new L.DivIcon(L.extend({
 				className: 'leaflet-marker-photo-suggestion cluster-suggestion-marker',
-				html: '<div class="thumbnail" style="background-image: url(' + iconUrl + ');"></div>​<span class="label">' + label + '</span>',
+				html: '<div class="thumbnail" style="background-image: url(' + iconUrl + ');"></div>​<span class="label">' + count + '</span>',
 			}, cluster, {
 				iconSize: [PHOTO_MARKER_VIEW_SIZE, PHOTO_MARKER_VIEW_SIZE],
 				iconAnchor: [PHOTO_MARKER_VIEW_SIZE / 2, PHOTO_MARKER_VIEW_SIZE],
 			}))
 		},
-		getPhotoMarkerIcon(photo, i) {
+		getPhotoMarkerIcon(photo) {
 			const iconUrl = this.getPreviewUrl(photo)
-			const selectedClass = this.photoSuggestionsSelectedIndices.includes(i)
+			const selectedClass = this.photoSuggestionsSelectedIndices.includes(photo.i)
 				? '-selected'
 				: ''
 			return L.divIcon(L.extend({
@@ -219,14 +356,15 @@ export default {
 			}))
 		},
 		getPreviewUrl(photo) {
-			return photo.hasPreview
+			return photo && photo.hasPreview
 				? generateUrl('core') + '/preview?fileId=' + photo.fileId + '&x=341&y=256&a=1'
 				: generateUrl('/apps/theming/img/core/filetypes') + '/image.svg?v=2'
 		},
 		getPhotoFormattedDate(photo) {
-			return moment.unix(photo.dateTaken).format('LLL')
+			return photo ? moment.unix(photo.dateTaken).format('LLL') : ''
 		},
-		onPhotoClick(e, index) {
+		onPhotoClick(e) {
+			const index = e.target.i
 			// we want popup to open on right click only
 			this.$nextTick(() => {
 				e.target.closePopup()
@@ -239,35 +377,94 @@ export default {
 				this.map.closePopup()
 			}
 		},
-		onPhotoRightClick(e, photo) {
+		onPhotoRightClick(e) {
+			const photo = e.target.data
+			this.currentSuggestion = photo
+			const popup = this.$refs.markerPopup.mapObject
+			popup.setLatLng([photo.lat, photo.lng])
+			this.$nextTick(() => {
+				popup.openOn(this.map)
+			})
+		},
+		onPhotoMouseOver(e) {
+			const photo = e.target.data
+			this.currentSuggestion = photo
+			const tooltip = this.$refs.markerTooltip.mapObject
+			tooltip.setLatLng([photo.lat, photo.lng])
 			this.$nextTick(() => {
-				e.target.openPopup()
+				tooltip.openOn(this.map)
 			})
 		},
-		resetClusterPhotoCoords() {
-			const clusterSize = this.contextCluster.getChildCount()
-			OC.dialogs.confirmDestructive(
-				'',
-				t('maps', 'Are you sure you want to remove geo data of {nb} photos?', { nb: clusterSize }),
-				{
-					type: OC.dialogs.YES_NO_BUTTONS,
-					confirm: t('maps', 'Yes'),
-					confirmClasses: '',
-					cancel: t('maps', 'Cancel'),
-				},
-				(result) => {
-					if (result) {
-						const photos = this.contextCluster.getAllChildMarkers().map((m) => {
-							return m.options.data
-						})
-						this.resetPhotosCoords(photos)
-					}
-				},
-				true
-			)
+		onPhotoMouseOut(e) {
+			const tooltip = this.$refs.markerTooltip.mapObject
+			tooltip.close()
+		},
+		onPhotoMoved(e) {
+			this.$emit('photo-suggestion-moved', e.target.i, e.target.getLatLng())
 		},
-		onPhotoMoved(e, index) {
-			this.$emit('photo-suggestion-moved', index, e.target.getLatLng())
+		updateClusterLoadingProgress(processed, total, elapsed, layersArray) {
+			if (elapsed > 100 && !this.clustersLoading) {
+				this.clustersLoading = true
+			}
+			this.$emit('cluster-loading', processed, total)
+
+			if (processed === total) {
+				this.clustersLoading = false
+				// all markers processed - hide the progress bar:
+				this.$emit('cluster-loaded')
+			}
+		},
+
+		async updateSuggestionMarkers() {
+			this.$refs.markerCluster.mapObject.removeLayers(this.suggestionMarkers)
+			this.suggestionMarkers = this.photoSuggestions.map((p, i) => {
+				const m = new L.Marker([p.lat, p.lng],
+					{
+						draggable: this.draggable,
+					},
+				)
+				m.on(
+					'click', this.onPhotoClick
+				)
+				m.on(
+					'contextmenu', this.onPhotoRightClick
+				)
+				m.on(
+					'mouseover', this.onPhotoMouseOver
+				)
+				m.on(
+					'mouseout', this.onPhotoMouseOut
+				)
+				m.on(
+					'moveend', this.onPhotoMoved
+				)
+				m.data = p
+				m.i = i
+				return m
+			})
+			this.$refs.markerCluster.mapObject.addLayers(this.suggestionMarkers)
+			if (this.dateFilterEnabled) {
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.suggestionMarkers.slice(
+						this.suggestionsLastNullIndex + 1,
+						this.suggestionsFirstShownIndex
+					)
+				)
+				this.$refs.markerCluster.mapObject.removeLayers(
+					this.suggestionMarkers.slice(
+						this.suggestionsLastShownIndex + 1,
+					)
+				)
+			}
+		},
+		async updateSuggestionMarkersDraggable() {
+			this.suggestionMarkers.forEach((m) => {
+				if (m.dragging) {
+					this.draggable ? m.dragging.enable() : m.dragging.disable()
+				}
+				m.options.draggable = this.draggable
+				m.update()
+			})
 		},
 	},
 }
diff --git a/src/components/map/PhotosLayer.vue b/src/components/map/PhotosLayer.vue
index 0748e5d4d..8a4291335 100644
--- a/src/components/map/PhotosLayer.vue
+++ b/src/components/map/PhotosLayer.vue
@@ -119,9 +119,6 @@ export default {
 	data() {
 		return {
 			optionValues: optionsController.optionValues,
-			markerOptions: {
-				draggable: this.draggable,
-			},
 			clusterOptions: {
 				iconCreateFunction: this.getClusterMarkerIcon,
 				spiderfyOnMaxZoom: false,
@@ -244,9 +241,6 @@ export default {
 				)
 			}
 		},
-		dateFilterEnd(newEnd, oldEnd) {
-
-		},
 	},
 
 	beforeMount() {

From a93161e920ea6f7df2c65b16feaca1505d4b127f Mon Sep 17 00:00:00 2001
From: Arne Hamann <git@arne.email>
Date: Tue, 10 Jan 2023 19:27:46 +0100
Subject: [PATCH 3/3] Fix Highlight selected photos

Signed-off-by: Arne Hamann <git@arne.email>
---
 src/components/map/PhotoSuggestionsLayer.vue | 61 +++++++-------------
 src/views/App.vue                            |  9 ++-
 2 files changed, 25 insertions(+), 45 deletions(-)

diff --git a/src/components/map/PhotoSuggestionsLayer.vue b/src/components/map/PhotoSuggestionsLayer.vue
index 98117a4c1..7b6d49d63 100644
--- a/src/components/map/PhotoSuggestionsLayer.vue
+++ b/src/components/map/PhotoSuggestionsLayer.vue
@@ -5,39 +5,6 @@
 		@clusterclick="onClusterClick"
 		@clustercontextmenu="onClusterRightClick"
 		@spiderfied="onSpiderfied">
-<!--		<LMarker v-for="(p, i) in photoSuggestions"
-			v-if="p"
-			:key="i"
-			:options="{ data: p }"
-			:icon="getPhotoMarkerIcon(p, i)"
-			:draggable="draggable"
-			:lat-lng="[p.lat, p.lng]"
-			@click="onPhotoClick($event, i)"
-			@contextmenu="onPhotoRightClick($event, p)"
-			@moveend="onPhotoMoved($event, i)">
-			<LTooltip v-if="p"
-				:class="{
-					'tooltip-photo-suggestion-wrapper': true,
-					'photo-suggestion-marker-selected': photoSuggestionsSelectedIndices.includes(i)
-				}"
-				:options="{ ...tooltipOptions, opacity: draggable ? 0 : 1 }">
-				<img class="photo-suggestion-tooltip"
-					:src="getPreviewUrl(p)">
-				<p class="tooltip-photo-suggestion-date">
-					{{ getPhotoFormattedDate(p) }}
-				</p>
-				<p class="tooltip-photo-suggestion-name">
-					{{ basename(p.path) }}
-				</p>
-			</LTooltip>
-			<LPopup v-if="p"
-				class="popup-photo-suggestion-wrapper"
-				:options="popupOptions">
-				<NcActionButton icon="icon-toggle" @click="viewPhoto(p)">
-					{{ t('maps', 'Display picture') }}
-				</NcActionButton>
-			</LPopup>
-		</LMarker>-->
 		<LMarker
 			:lat-lng="[0, 0]"
 			:visible="false">
@@ -54,7 +21,7 @@
 					{{ getPhotoFormattedDate(currentSuggestion) }}
 				</p>
 				<p class="tooltip-photo-suggestion-name">
-					{{ currentSuggestion ? basename(currentSuggestion.path) : ''}}
+					{{ currentSuggestion ? basename(currentSuggestion.path) : '' }}
 				</p>
 			</LTooltip>
 			<LPopup
@@ -98,7 +65,7 @@ import { LMarker, LTooltip, LPopup } from 'vue2-leaflet'
 import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster'
 
 import optionsController from '../../optionsController'
-import {binSearch} from "../../utils/common";
+import { binSearch } from '../../utils/common'
 
 const PHOTO_MARKER_VIEW_SIZE = 40
 
@@ -264,6 +231,14 @@ export default {
 				)
 			}
 		},
+		photoSuggestionsSelectedIndices(newIndices, oldIndices) {
+			const oldSet = new Set(oldIndices)
+			const newSet = new Set(newIndices)
+			const removedIndices = oldIndices.filter((i) => { return !newSet.has(i) })
+			const addedIndices = newIndices.filter((i) => { return !oldSet.has(i) })
+			const changedMarkers = removedIndices.concat(addedIndices).map((i) => { return this.suggestionMarkers[i] })
+			this.$refs.markerCluster.mapObject.refreshClusters(changedMarkers)
+		},
 	},
 
 	beforeMount() {
@@ -329,22 +304,28 @@ export default {
 		},
 		getClusterMarkerIcon(cluster) {
 			const count = cluster.getChildCount()
-			const photo = cluster.getAllChildMarkers()[0].data
+			const markers = cluster.getAllChildMarkers()
+			const selectedCount = markers.filter((m) => this.photoSuggestionsSelectedIndices.includes(m.i)).length
+			const marker = markers[0]
+			const photo = marker.data
+			const index = marker.i
 			if (count === 1) {
-				return this.getPhotoMarkerIcon(photo)
+				return this.getPhotoMarkerIcon(photo, index)
 			}
 			const iconUrl = this.getPreviewUrl(photo)
 			return new L.DivIcon(L.extend({
 				className: 'leaflet-marker-photo-suggestion cluster-suggestion-marker',
-				html: '<div class="thumbnail" style="background-image: url(' + iconUrl + ');"></div>​<span class="label">' + count + '</span>',
+				html: '<div class="thumbnail" style="background-image: url(' + iconUrl + ');"></div>​<span class="label">'
+					+ (selectedCount > 0 ? '<div style="color: var(--color-warning); display: inline;">' + selectedCount + '</div>/' : '')
+					+ count + '</span>',
 			}, cluster, {
 				iconSize: [PHOTO_MARKER_VIEW_SIZE, PHOTO_MARKER_VIEW_SIZE],
 				iconAnchor: [PHOTO_MARKER_VIEW_SIZE / 2, PHOTO_MARKER_VIEW_SIZE],
 			}))
 		},
-		getPhotoMarkerIcon(photo) {
+		getPhotoMarkerIcon(photo, index) {
 			const iconUrl = this.getPreviewUrl(photo)
-			const selectedClass = this.photoSuggestionsSelectedIndices.includes(photo.i)
+			const selectedClass = this.photoSuggestionsSelectedIndices.includes(index)
 				? '-selected'
 				: ''
 			return L.divIcon(L.extend({
diff --git a/src/views/App.vue b/src/views/App.vue
index 808a0851b..647c65bb8 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -1020,12 +1020,11 @@ export default {
 			this.showPhotoSuggestions ? this.openSidebar() : this.closeSidebar()
 		},
 		onPhotoSuggestionSelected(index) {
-			const indexOfIndex = this.photoSuggestionsSelectedIndices.findIndex((e) => { return index === e })
-			if (indexOfIndex >= 0) {
-				this.photoSuggestionsSelectedIndices.splice(indexOfIndex, 1)
-			} else {
-				this.photoSuggestionsSelectedIndices.push(index)
+			const newIndices = this.photoSuggestionsSelectedIndices.filter((e) => { return index !== e })
+			if (newIndices.length === this.photoSuggestionsSelectedIndices.length) {
+				newIndices.push(index)
 			}
+			this.photoSuggestionsSelectedIndices = newIndices
 		},
 		onPhotoSuggestionMoved(index, latLng) {
 			this.photoSuggestions[index].lat = latLng.lat