Search: close dialog when appropriate, move special layer logic to themeViewState

src/Logic/Osm/OsmPreferences.ts

@@ -70,7 +70,11 @@ export class OsmPreferences {
             this.setPreferencesAll(key, initialValue)
         }
         pref.addCallback(v => {
-            length.set(Math.ceil(v.length / maxLength))
+            if(v === null || v === undefined || v === ""){
+                length.set(null)
+                return
+            }
+            length.set(Math.ceil((v?.length ?? 1) / maxLength))
             let i = 0
             while (v.length > 0) {
                 this.UploadPreference(key + "-" + i, v.substring(0, maxLength))
@@ -97,6 +101,7 @@ export class OsmPreferences {
         }
     }
 
+
     /**
      * OSM preferences can be at most 255 chars.
      * This method chains multiple together.

src/Logic/Search/FilterSearch.ts

@@ -4,6 +4,8 @@ import Locale from "../../UI/i18n/Locale"
 import Constants from "../../Models/Constants"
 import FilterConfig, { FilterConfigOption } from "../../Models/ThemeConfig/FilterConfig"
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+import LayerState from "../State/LayerState"
+import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
 
 export type FilterSearchResult = { option: FilterConfigOption, filter: FilterConfig, layer: LayerConfig, index: number }
 
@@ -12,9 +14,9 @@ export type FilterSearchResult = { option: FilterConfigOption, filter: FilterCon
  * Searches matching filters
  */
 export default class FilterSearch {
-    private readonly _state: SpecialVisualizationState
+    private readonly _state: {layerState: LayerState, layout: LayoutConfig}
 
-    constructor(state: SpecialVisualizationState) {
+    constructor(state:  {layerState: LayerState, layout: LayoutConfig}) {
         this._state = state
     }
 

src/Logic/Search/LayerSearch.ts

@@ -1,16 +1,16 @@
-import { SpecialVisualizationState } from "../../UI/SpecialVisualization"
 import Constants from "../../Models/Constants"
 import SearchUtils from "./SearchUtils"
 import ThemeSearch from "./ThemeSearch"
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
 
 export default class LayerSearch {
 
-    private readonly _state: SpecialVisualizationState
+    private readonly _layout: LayoutConfig
     private readonly _layerWhitelist : Set<string>
-    constructor(state: SpecialVisualizationState) {
-        this._state = state
-        this._layerWhitelist = new Set(state.layout.layers.map(l => l.id).filter(id => Constants.added_by_default.indexOf(<any> id) < 0))
+    constructor(layout: LayoutConfig) {
+        this._layout = layout
+        this._layerWhitelist = new Set(layout.layers.map(l => l.id).filter(id => Constants.added_by_default.indexOf(<any> id) < 0))
     }
 
     static scoreLayers(query: string, layerWhitelist?: Set<string>): Record<string, number> {
@@ -35,7 +35,7 @@ export default class LayerSearch {
         const asList:({layer: LayerConfig, score:number})[] = []
         for (const layer in scores) {
             asList.push({
-                layer: this._state.layout.getLayer(layer),
+                layer: this._layout.getLayer(layer),
                 score: scores[layer]
             })
         }

src/Logic/Search/ThemeSearch.ts

@@ -1,5 +1,4 @@
-import { MinimalLayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
-import { SpecialVisualizationState } from "../../UI/SpecialVisualization"
+import LayoutConfig, { MinimalLayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
 import { Store } from "../UIEventSource"
 import UserRelatedState from "../State/UserRelatedState"
 import { Utils } from "../../Utils"
@@ -7,6 +6,7 @@ import Locale from "../../UI/i18n/Locale"
 import themeOverview from "../../assets/generated/theme_overview.json"
 import LayerSearch from "./LayerSearch"
 import SearchUtils from "./SearchUtils"
+import { OsmConnection } from "../Osm/OsmConnection"
 
 
 type ThemeSearchScore = {
@@ -22,7 +22,7 @@ export default class ThemeSearch {
     public static readonly officialThemes: {
         themes: MinimalLayoutInformation[],
         layers: Record<string, Record<string, string[]>>
-    } = themeOverview
+    } = <any> themeOverview
     public static readonly officialThemesById: Map<string, MinimalLayoutInformation> = new Map<string, MinimalLayoutInformation>()
     static {
         for (const th of ThemeSearch.officialThemes.themes ?? []) {
@@ -31,15 +31,13 @@ export default class ThemeSearch {
     }
 
 
-    private readonly _state: SpecialVisualizationState
     private readonly _knownHiddenThemes: Store<Set<string>>
     private readonly _layersToIgnore: string[]
     private readonly _otherThemes: MinimalLayoutInformation[]
 
-    constructor(state: SpecialVisualizationState) {
-        this._state = state
+    constructor(state: {osmConnection: OsmConnection, layout: LayoutConfig}) {
         this._layersToIgnore = state.layout.layers.map(l => l.id)
-        this._knownHiddenThemes = UserRelatedState.initDiscoveredHiddenThemes(this._state.osmConnection).map(list => new Set(list))
+        this._knownHiddenThemes = UserRelatedState.initDiscoveredHiddenThemes(state.osmConnection).map(list => new Set(list))
         this._otherThemes = ThemeSearch.officialThemes.themes
             .filter(th => th.id !== state.layout.id)
     }
@@ -144,7 +142,7 @@ export default class ThemeSearch {
         return scored
     }
 
-    public static sortedByLowest(search: string, themes: MinimalLayoutInformation[], ignoreLayers: string[] = [], maxDiff: number): MinimalLayoutInformation[] {
+    public static sortedByLowest(search: string, themes: MinimalLayoutInformation[], ignoreLayers: string[] = []): MinimalLayoutInformation[] {
         return this.sortedByLowestScores(search, themes, ignoreLayers)
             .map(th => th.theme)
     }

src/Logic/State/SearchState.ts

@@ -1,4 +1,4 @@
-import GeocodingProvider, { GeocodingUtils, type SearchResult } from "../Search/GeocodingProvider"
+import GeocodingProvider, { type SearchResult } from "../Search/GeocodingProvider"
 import { ImmutableStore, Store, Stores, UIEventSource } from "../UIEventSource"
 import CombinedSearcher from "../Search/CombinedSearcher"
 import FilterSearch, { FilterSearchResult } from "../Search/FilterSearch"
@@ -11,9 +11,10 @@ import ThemeViewState from "../../Models/ThemeViewState"
 import type { MinimalLayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
 import { Translation } from "../../UI/i18n/Translation"
 import GeocodingFeatureSource from "../Search/GeocodingFeatureSource"
-import ShowDataLayer from "../../UI/Map/ShowDataLayer"
 import LayerSearch from "../Search/LayerSearch"
 import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+import { FeatureSource } from "../FeatureSource/FeatureSource"
+import { Feature } from "geojson"
 
 export default class SearchState {
 
@@ -29,6 +30,7 @@ export default class SearchState {
     private readonly state: ThemeViewState
     public readonly showSearchDrawer: UIEventSource<boolean>
     public readonly suggestionsSearchRunning: Store<boolean>
+    public readonly locationResults: FeatureSource
 
     constructor(state: ThemeViewState) {
         this.state = state
@@ -62,7 +64,7 @@ export default class SearchState {
         const themeSearch = new ThemeSearch(state)
         this.themeSuggestions = this.searchTerm.mapD(query => themeSearch.search(query, 3))
 
-        const layerSearch = new LayerSearch(state)
+        const layerSearch = new LayerSearch(state.layout)
         this.layerSuggestions = this.searchTerm.mapD(query => layerSearch.search(query, 5))
 
         const filterSearch = new FilterSearch(state)
@@ -77,17 +79,7 @@ export default class SearchState {
                     return !foundMatch
                 })
             }, [state.layerState.activeFilters])
-        const geocodedFeatures = new GeocodingFeatureSource(this.suggestions.stabilized(250))
-        state.featureProperties.trackFeatureSource(geocodedFeatures)
-
-        new ShowDataLayer(
-            state.map,
-            {
-                layer: GeocodingUtils.searchLayer,
-                features: geocodedFeatures,
-                selectedElement: state.selectedElement,
-            },
-        )
+        this.locationResults =new GeocodingFeatureSource(this.suggestions.stabilized(250))
 
         this.showSearchDrawer = new UIEventSource(false)
 
@@ -131,4 +123,19 @@ export default class SearchState {
         }
     }
 
+    closeIfFullscreen() {
+        if(window.innerWidth < 640){
+            this.showSearchDrawer.set(false)
+        }
+    }
+
+    clickedOnMap(feature: Feature) {
+        const osmid = feature.properties.osm_id
+        const localElement = this.state.indexedFeatures.featuresById.data.get(osmid)
+        if(localElement){
+            this.state.selectedElement.set(localElement)
+            return
+        }
+        console.log(">>>",feature)
+    }
 }