Usertests: add 'centermessage' again which indicates if data is loading or is present, see #1457

Logic/Actors/NoElementsInViewDetector.ts

@@ -0,0 +1,90 @@
+import { BBox } from "../BBox"
+import { Store } from "../UIEventSource"
+import ThemeViewState from "../../Models/ThemeViewState"
+import Constants from "../../Models/Constants"
+
+export type FeatureViewState =
+    | "no-data"
+    | "zoom-to-low"
+    | "has-visible-feature"
+    | "all-filtered-away"
+export default class NoElementsInViewDetector {
+    public readonly hasFeatureInView: Store<FeatureViewState>
+
+    constructor(themeViewState: ThemeViewState) {
+        const state = themeViewState
+        const minZoom = Math.min(
+            ...themeViewState.layout.layers
+                .filter((l) => Constants.priviliged_layers.indexOf(<any>l.id) < 0)
+                .map((l) => l.minzoom)
+        )
+        const mapProperties = themeViewState.mapProperties
+
+        const priviliged: Set<string> = new Set(Constants.priviliged_layers)
+
+        this.hasFeatureInView = state.mapProperties.bounds.stabilized(100).map(
+            (bbox) => {
+                if (mapProperties.zoom.data < minZoom) {
+                    // Not a single layer will display anything as the zoom is to low
+                    return "zoom-to-low"
+                }
+
+                for (const [layerName, source] of themeViewState.perLayerFiltered) {
+                    if (priviliged.has(layerName)) {
+                        continue
+                    }
+                    if (
+                        mapProperties.zoom.data < themeViewState.layout.getLayer(layerName).minzoom
+                    ) {
+                        continue
+                    }
+                    if (!state.layerState.filteredLayers.get(layerName).isDisplayed.data) {
+                        continue
+                    }
+                    const feats = source.features.data
+                    if (!(feats?.length > 0)) {
+                        // Nope, no data loaded
+                        continue
+                    }
+
+                    for (const feat of feats) {
+                        if (BBox.get(feat).overlapsWith(bbox)) {
+                            // We found at least one item which has visible data
+                            return "has-visible-feature"
+                        }
+                    }
+                }
+
+                // If we arrive here, data might have been filtered away
+                for (const [layerName, source] of themeViewState.perLayer) {
+                    if (priviliged.has(layerName)) {
+                        continue
+                    }
+                    if (
+                        mapProperties.zoom.data < themeViewState.layout.getLayer(layerName).minzoom
+                    ) {
+                        continue
+                    }
+                    const feats = source.features.data
+                    if (!(feats?.length > 0)) {
+                        // Nope, no data loaded
+                        continue
+                    }
+
+                    for (const feat of feats) {
+                        if (BBox.get(feat).overlapsWith(bbox)) {
+                            // We found at least one item, but as we didn't find it before, it is filtered away
+                            return "all-filtered-away"
+                        }
+                    }
+                }
+                return "no-data"
+            },
+            [
+                ...Array.from(themeViewState.perLayerFiltered.values()).map((f) => f.features),
+                mapProperties.zoom,
+                ...Array.from(state.layerState.filteredLayers.values()).map((fl) => fl.isDisplayed),
+            ]
+        )
+    }
+}

Logic/FeatureSource/Sources/LayoutSource.ts

@@ -69,7 +69,7 @@ export default class LayoutSource extends FeatureSourceMerger {
 
         const self = this
         function setIsLoading() {
-            const loading = overpassSource?.runningQuery?.data && osmApiSource?.isRunning?.data
+            const loading = overpassSource?.runningQuery?.data || osmApiSource?.isRunning?.data
             self._isLoading.setData(loading)
         }
 

Logic/UIEventSource.ts

@@ -384,7 +384,6 @@ class ListenerTracker<T> {
 
 /**
  * The mapped store is a helper type which does the mapping of a function.
- * It'll fuse
  */
 class MappedStore<TIn, T> extends Store<T> {
     private readonly _upstream: Store<TIn>

Models/ThemeConfig/LayoutConfig.ts

@@ -70,6 +70,8 @@ export default class LayoutConfig implements LayoutInformation {
     public readonly definedAtUrl?: string
     public readonly definitionRaw?: string
 
+    private readonly layersDict: Map<string, LayerConfig>
+
     constructor(
         json: LayoutConfigJson,
         official = true,
@@ -209,6 +211,11 @@ export default class LayoutConfig implements LayoutInformation {
         this.overpassTimeout = json.overpassTimeout ?? 30
         this.overpassMaxZoom = json.overpassMaxZoom ?? 16
         this.osmApiTileSize = json.osmApiTileSize ?? this.overpassMaxZoom + 1
+
+        this.layersDict = new Map<string, LayerConfig>()
+        for (const layer of this.layers) {
+            this.layersDict.set(layer.id, layer)
+        }
     }
 
     public CustomCodeSnippets(): string[] {
@@ -228,6 +235,10 @@ export default class LayoutConfig implements LayoutInformation {
         return custom
     }
 
+    public getLayer(id: string) {
+        return this.layersDict.get(id)
+    }
+
     public isLeftRightSensitive() {
         return this.layers.some((l) => l.isLeftRightSensitive())
     }

Models/ThemeViewState.ts

@@ -50,6 +50,9 @@ import BackgroundLayerResetter from "../Logic/Actors/BackgroundLayerResetter"
 import SaveFeatureSourceToLocalStorage from "../Logic/FeatureSource/Actors/SaveFeatureSourceToLocalStorage"
 import BBoxFeatureSource from "../Logic/FeatureSource/Sources/TouchesBboxFeatureSource"
 import ThemeViewStateHashActor from "../Logic/Web/ThemeViewStateHashActor"
+import NoElementsInViewDetector, {
+    FeatureViewState,
+} from "../Logic/Actors/NoElementsInViewDetector"
 
 /**
  *
@@ -75,8 +78,13 @@ export default class ThemeViewState implements SpecialVisualizationState {
     readonly osmObjectDownloader: OsmObjectDownloader
 
     readonly dataIsLoading: Store<boolean>
+    /**
+     * Indicates if there is _some_ data in view, even if it is not shown due to the filters
+     */
+    readonly hasDataInView: Store<FeatureViewState>
+
     readonly guistate: MenuState
-    readonly fullNodeDatabase?: FullNodeDatabaseSource // TODO
+    readonly fullNodeDatabase?: FullNodeDatabaseSource
 
     readonly historicalUserLocations: WritableFeatureSource<Feature<Point>>
     readonly indexedFeatures: IndexedFeatureSource & LayoutSource
@@ -85,6 +93,8 @@ export default class ThemeViewState implements SpecialVisualizationState {
     readonly newFeatures: WritableFeatureSource
     readonly layerState: LayerState
     readonly perLayer: ReadonlyMap<string, GeoIndexedStoreForLayer>
+    readonly perLayerFiltered: ReadonlyMap<string, FilteringFeatureSource>
+
     readonly availableLayers: Store<RasterLayerPolygon[]>
     readonly selectedLayer: UIEventSource<LayerConfig>
     readonly userRelatedState: UserRelatedState
@@ -175,6 +185,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 this.fullNodeDatabase
             )
             this.indexedFeatures = layoutSource
+
             const empty = []
             let currentViewIndex = 0
             this.currentView = new StaticFeatureSource(
@@ -194,6 +205,9 @@ export default class ThemeViewState implements SpecialVisualizationState {
             )
             this.featuresInView = new BBoxFeatureSource(layoutSource, this.mapProperties.bounds)
             this.dataIsLoading = layoutSource.isLoading
+            this.dataIsLoading.addCallbackAndRunD((loading) =>
+                console.log("Data is loading?", loading)
+            )
 
             const indexedElements = this.indexedFeatures
             this.featureProperties = new FeaturePropertiesStore(indexedElements)
@@ -288,7 +302,10 @@ export default class ThemeViewState implements SpecialVisualizationState {
             this.changes
         )
 
-        this.showNormalDataOn(this.map)
+        this.perLayerFiltered = this.showNormalDataOn(this.map)
+
+        this.hasDataInView = new NoElementsInViewDetector(this).hasFeatureInView
+
         this.initActors()
         this.addLastClick(lastClick)
         this.drawSpecialLayers()
@@ -299,8 +316,9 @@ export default class ThemeViewState implements SpecialVisualizationState {
         }
     }
 
-    public showNormalDataOn(map: Store<MlMap>) {
+    public showNormalDataOn(map: Store<MlMap>): ReadonlyMap<string, FilteringFeatureSource> {
-        this.perLayer.forEach((fs) => {
+        const filteringFeatureSource = new Map<string, FilteringFeatureSource>()
+        this.perLayer.forEach((fs, layerName) => {
             const doShowLayer = this.mapProperties.zoom.map(
                 (z) =>
                     (fs.layer.isDisplayed?.data ?? true) && z >= (fs.layer.layerDef?.minzoom ?? 0),
@@ -323,6 +341,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 (id) => this.featureProperties.getStore(id),
                 this.layerState.globalFilters
             )
+            filteringFeatureSource.set(layerName, filtered)
 
             new ShowDataLayer(map, {
                 layer: fs.layer.layerDef,
@@ -333,6 +352,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 fetchStore: (id) => this.featureProperties.getStore(id),
             })
         })
+        return filteringFeatureSource
     }
 
     /**
@@ -533,7 +553,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
      * Setup various services for which no reference are needed
      */
     private initActors() {
-        {
         // Unselect the selected element if it is panned out of view
         this.mapProperties.bounds.stabilized(250).addCallbackD((bounds) => {
             const selected = this.selectedElement.data
@@ -545,8 +564,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 this.selectedElement.setData(undefined)
             }
         })
-        }
+
-        {
         this.selectedElement.addCallback((selected) => {
             if (selected === undefined) {
                 // We did _unselect_ an item - we always remove the lastclick-object
@@ -554,7 +572,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
                 this.selectedLayer.setData(undefined)
             }
         })
-        }
         new ThemeViewStateHashActor(this)
         new MetaTagging(this)
         new TitleHandler(this.selectedElement, this.selectedLayer, this.featureProperties, this)

UI/BigComponents/StateIndicator.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import ThemeViewState from "../../Models/ThemeViewState";
+    import Translations from "../i18n/Translations";
+    import Tr from "../Base/Tr.svelte";
+    import Loading from "../Base/Loading.svelte";
+
+    export let state: ThemeViewState
+    /**
+     * Gives the contributor some feedback based on the current state:
+     * - is data loading?
+     * - Is all data hidden due to filters?
+     * - Is no data in view?
+     */
+
+    let dataIsLoading = state.dataIsLoading
+    let currentState = state.hasDataInView
+    currentState.data === ""
+    const t = Translations.t.centerMessage
+</script>
+{#if $currentState === "has-visible-features"}
+    <!-- don't show anything -->
+{:else if $currentState === "zoom-to-low"}
+    <div class="w-fit p-4 alert">
+        <Tr t={t.zoomIn}/>
+    </div>
+{:else if $currentState === "all-filtered-away"}
+    <div class="w-fit p-4 alert">
+        <Tr t={t.allFilteredAway}/>
+    </div>
+{:else if $dataIsLoading}
+    <div class="w-fit p-4 alert">
+        <Loading>
+            <Tr t={Translations.t.centerMessage.loadingData}/>
+        </Loading>
+    </div>
+{:else if $currentState === "no-data"}
+    <div class="w-fit p-4 alert">
+        <Tr t={t.noData}/>
+    </div>
+{/if}

UI/ThemeViewGUI.svelte

@@ -49,6 +49,8 @@
     import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
     import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
     import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte";
+    import Loading from "./Base/Loading.svelte";
+    import StateIndicator from "./BigComponents/StateIndicator.svelte";
 
     export let state: ThemeViewState
     let layout = state.layout
@@ -112,6 +114,7 @@
     <MaplibreMap map={maplibremap}/>
 </div>
 
+
 <div class="pointer-events-none absolute top-0 left-0 w-full">
     <!-- Top components -->
     <If condition={state.featureSwitches.featureSwitchSearch}>
@@ -155,13 +158,18 @@
             <div class="alert w-fit">Testmode</div>
         </If>
     </div>
+    <div class="flex justify-center w-full"> <!-- Flex and w-full are needed for the positioning -->
+        <!-- Centermessage -->
+        <StateIndicator {state}/>
+    </div>
 </div>
 
 <div class="pointer-events-none absolute bottom-0 left-0 mb-4 w-screen">
+    <!-- bottom controls -->
     <div class="flex w-full items-end justify-between px-4">
         <div class="flex">
             <!-- bottom left elements -->
-      <OpenBackgroundSelectorButton {state} hideTooltip={true}/>
+            <OpenBackgroundSelectorButton hideTooltip={true} {state}/>
             <a
                     class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
                     on:click={() => {
@@ -210,6 +218,7 @@
     [selectedLayer]
   )}
 >
+    <!-- right modal with the selected element view -->
     <ModalRight
             on:close={() => {
       selectedElement.setData(undefined)
@@ -233,6 +242,7 @@
     [selectedLayer]
   )}
 >
+    <!-- Floatover with the selected element, if applicable -->
     <FloatOver
             on:close={() => {
       selectedElement.setData(undefined)
@@ -318,10 +328,10 @@
     <FloatOver on:close={() => state.guistate.backgroundLayerSelectionIsOpened.setData(false)}>
         <div class="h-full p-2">
             <RasterLayerOverview
-        userstate={state.userRelatedState}
-        mapproperties={state.mapProperties}
-        map={state.map}
                     {availableLayers}
+                    map={state.map}
+                    mapproperties={state.mapProperties}
+                    userstate={state.userRelatedState}
                     visible={state.guistate.backgroundLayerSelectionIsOpened}
             />
         </div>

langs/en.json

@@ -3,7 +3,9 @@
         "title": "Advanced features"
     },
     "centerMessage": {
+        "allFilteredAway": "No feature in view meets all filters",
         "loadingData": "Loading data…",
+        "noData": "There are no relevant features in the current view",
         "ready": "Done!",
         "retrying": "Loading data failed. Trying again in {count} seconds…",
         "zoomIn": "Zoom in to view or edit the data"
@@ -400,7 +402,7 @@
         "geolocate": "Pan the map to the current location or zoom the map to the current location. Requests geopermission",
         "intro": "MapComplete supports the following keys:",
         "key": "Key combination",
-        "openLayersPanel": "Opens the Background, layers and filters panel",
+        "openLayersPanel": "Opens the layers and filters panel",
         "selectAerial": "Set the background to aerial or satellite imagery. Toggles between the two best, available layers",
         "selectMap": "Set the background to a map from external sources. Toggles between the two best, available layers",
         "selectMapnik": "Set the background layer to OpenStreetMap-carto",