MapComplete/UI/ImportFlow/ConflationChecker.ts

import { BBox } from "../../Logic/BBox";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import Combine from "../Base/Combine";
import Title from "../Base/Title";
import { Overpass } from "../../Logic/Osm/Overpass";
import { Store, UIEventSource } from "../../Logic/UIEventSource";
import Constants from "../../Models/Constants";
import RelationsTracker from "../../Logic/Osm/RelationsTracker";
import { VariableUiElement } from "../Base/VariableUIElement";
import { FlowStep } from "./FlowStep";
import Loading from "../Base/Loading";
import { SubtleButton } from "../Base/SubtleButton";
import Svg from "../../Svg";
import { Utils } from "../../Utils";
import { IdbLocalStorage } from "../../Logic/Web/IdbLocalStorage";
import Minimap from "../Base/Minimap";
import BaseLayer from "../../Models/BaseLayer";
import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers";
import Loc from "../../Models/Loc";
import ShowDataLayer from "../ShowDataLayer/ShowDataLayer";
import StaticFeatureSource from "../../Logic/FeatureSource/Sources/StaticFeatureSource";
import ValidatedTextField from "../Input/ValidatedTextField";
import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource";
import import_candidate from "../../assets/layers/import_candidate/import_candidate.json";
import { GeoOperations } from "../../Logic/GeoOperations";
import FeatureInfoBox from "../Popup/FeatureInfoBox";
import { ImportUtils } from "./ImportUtils";
import Translations from "../i18n/Translations";
import currentview from "../../assets/layers/current_view/current_view.json";
import { CheckBox } from "../Input/Checkboxes";
import { Feature, FeatureCollection, Point } from "geojson";
import DivContainer from "../Base/DivContainer";

/**
 * Given the data to import, the bbox and the layer, will query overpass for similar items
 */
export default class ConflationChecker
    extends Combine
    implements FlowStep<{ features: Feature<Point>[]; theme: string }>
{
    public readonly IsValid
    public readonly Value: Store<{ features: Feature<Point>[]; theme: string }>

    constructor(
        state,
        params: { bbox: BBox; layer: LayerConfig; theme: string; features: Feature<Point>[] }
    ) {
        const t = Translations.t.importHelper.conflationChecker

        const bbox = params.bbox.padAbsolute(0.0001)
        const layer = params.layer

        const toImport: { features: any[] } = params
        let overpassStatus = new UIEventSource<
            { error: string } | "running" | "success" | "idle" | "cached"
        >("idle")

        function loadDataFromOverpass() {
            // Load the data!
            const url = Constants.defaultOverpassUrls[1]
            const relationTracker = new RelationsTracker()
            const overpass = new Overpass(
                params.layer.source.osmTags,
                [],
                url,
                new UIEventSource<number>(180),
                relationTracker,
                true
            )
            console.log("Loading from overpass!")
            overpassStatus.setData("running")
            overpass.queryGeoJson(bbox).then(
                ([data, date]) => {
                    console.log(
                        "Received overpass-data: ",
                        data.features.length,
                        "features are loaded at ",
                        date
                    )
                    overpassStatus.setData("success")
                    fromLocalStorage.setData([data, date])
                },
                (error) => {
                    overpassStatus.setData({ error })
                }
            )
        }

        const fromLocalStorage = IdbLocalStorage.Get<[any, Date]>(
            "importer-overpass-cache-" + layer.id,
            {
                whenLoaded: (v) => {
                    if (v !== undefined && v !== null) {
                        console.log("Loaded from local storage:", v)
                        overpassStatus.setData("cached")
                    } else {
                        loadDataFromOverpass()
                    }
                },
            }
        )

        const cacheAge = fromLocalStorage.map((d) => {
            if (d === undefined || d[1] === undefined) {
                return undefined
            }
            const [_, loadedDate] = d
            return (new Date().getTime() - loadedDate.getTime()) / 1000
        })
        cacheAge.addCallbackD((timeDiff) => {
            if (timeDiff < 24 * 60 * 60) {
                // Recently cached!
                overpassStatus.setData("cached")
                return
            } else {
                loadDataFromOverpass()
            }
        })

        const geojson: Store<FeatureCollection> = fromLocalStorage.map((d) => {
            if (d === undefined) {
                return undefined
            }
            return d[0]
        })

        const background = new UIEventSource<BaseLayer>(AvailableBaseLayers.osmCarto)
        const location = new UIEventSource<Loc>({ lat: 0, lon: 0, zoom: 1 })
        const currentBounds = new UIEventSource<BBox>(undefined)
        const zoomLevel = ValidatedTextField.ForType("pnat").ConstructInputElement({
            value: LocalStorageSource.GetParsed<string>("importer-zoom-level", "0"),
        })
        zoomLevel.SetClass("ml-1 border border-black")
        const osmLiveData = Minimap.createMiniMap({
            allowMoving: true,
            location,
            background,
            bounds: currentBounds,
        })
        osmLiveData.SetClass("w-full").SetStyle("height: 500px")

        const geojsonFeatures: Store<Feature[]> = geojson.map(
            (geojson) => {
                if (geojson?.features === undefined) {
                    return []
                }
                const currentZoom = zoomLevel.GetValue().data
                const zoomedEnough: boolean = osmLiveData.location.data.zoom >= Number(currentZoom)
                if (currentZoom !== undefined && !zoomedEnough) {
                    return []
                }
                const bounds = osmLiveData.bounds.data
                if (bounds === undefined) {
                    return geojson.features
                }
                return geojson.features.filter((f) => BBox.get(f).overlapsWith(bounds))
            },
            [osmLiveData.bounds, zoomLevel.GetValue()]
        )

        const preview = new StaticFeatureSource(geojsonFeatures)

        new ShowDataLayer({
            layerToShow: new LayerConfig(currentview),
            state,
            leafletMap: osmLiveData.leafletMap,
            popup: undefined,
            zoomToFeatures: true,
            features: StaticFeatureSource.fromGeojson([bbox.asGeoJson({})]),
        })

        new ShowDataLayer({
            layerToShow: layer,
            state,
            leafletMap: osmLiveData.leafletMap,
            popup: (tags, layer) => new FeatureInfoBox(tags, layer, state, { setHash: false }),
            zoomToFeatures: false,
            features: preview,
        })

        new ShowDataLayer({
            layerToShow: new LayerConfig(import_candidate),
            state,
            leafletMap: osmLiveData.leafletMap,
            popup: (tags, layer) => new FeatureInfoBox(tags, layer, state, { setHash: false }),
            zoomToFeatures: false,
            features: StaticFeatureSource.fromGeojson(toImport.features),
        })

        const nearbyCutoff = ValidatedTextField.ForType("pnat").ConstructInputElement()
        nearbyCutoff.SetClass("ml-1 border border-black")
        nearbyCutoff.GetValue().syncWith(LocalStorageSource.Get("importer-cutoff", "25"), true)

        const matchedFeaturesMap = Minimap.createMiniMap({
            allowMoving: true,
            background,
        })
        matchedFeaturesMap.SetClass("w-full").SetStyle("height: 500px")

        // Featuresource showing OSM-features which are nearby a toImport-feature
        const geojsonMapped: Store<Feature[]> = geojson.map(
            (osmData) => {
                if (osmData?.features === undefined) {
                    return []
                }
                const maxDist = Number(nearbyCutoff.GetValue().data)
                return osmData.features.filter((f) =>
                    toImport.features.some(
                        (imp) =>
                            maxDist >=
                            GeoOperations.distanceBetween(
                                imp.geometry.coordinates,
                                GeoOperations.centerpointCoordinates(f)
                            )
                    )
                )
            },
            [nearbyCutoff.GetValue().stabilized(500)]
        )
        const nearbyFeatures = new StaticFeatureSource(geojsonMapped)
        const paritionedImport = ImportUtils.partitionFeaturesIfNearby(
            toImport,
            geojson,
            nearbyCutoff.GetValue().map(Number)
        )

        // Featuresource showing OSM-features which are nearby a toImport-feature
        const toImportWithNearby = new StaticFeatureSource(
            paritionedImport.map((els) => <Feature[]>els?.hasNearby ?? [])
        )
        toImportWithNearby.features.addCallback((nearby) =>
            console.log("The following features are near an already existing object:", nearby)
        )

        new ShowDataLayer({
            layerToShow: new LayerConfig(import_candidate),
            state,
            leafletMap: matchedFeaturesMap.leafletMap,
            popup: (tags, layer) => new FeatureInfoBox(tags, layer, state, { setHash: false }),
            zoomToFeatures: false,
            features: toImportWithNearby,
        })
        const showOsmLayer = new CheckBox(t.showOsmLayerInConflationMap, true)
        new ShowDataLayer({
            layerToShow: layer,
            state,
            leafletMap: matchedFeaturesMap.leafletMap,
            popup: (tags, layer) => new FeatureInfoBox(tags, layer, state, { setHash: false }),
            zoomToFeatures: true,
            features: nearbyFeatures,
            doShowLayer: showOsmLayer.GetValue(),
        })

        const conflationMaps = new Combine([
            new VariableUiElement(
                geojson.map((geojson) => {
                    if (geojson === undefined) {
                        return undefined
                    }
                    return new SubtleButton(Svg.download_svg(), t.downloadOverpassData).onClick(
                        () => {
                            Utils.offerContentsAsDownloadableFile(
                                JSON.stringify(geojson, null, "  "),
                                "mapcomplete-" + layer.id + ".geojson",
                                {
                                    mimetype: "application/json+geo",
                                }
                            )
                        }
                    )
                })
            ),
            new VariableUiElement(
                cacheAge.map((age) => {
                    if (age === undefined) {
                        return undefined
                    }
                    if (age < 0) {
                        return t.cacheExpired
                    }
                    return new Combine([
                        t.loadedDataAge.Subs({ age: Utils.toHumanTime(age) }),
                        new SubtleButton(Svg.reload_svg().SetClass("h-8"), t.reloadTheCache)
                            .onClick(loadDataFromOverpass)
                            .SetClass("h-12"),
                    ])
                })
            ),

            new Title(t.titleLive),
            t.importCandidatesCount.Subs({ count: toImport.features.length }),
            new VariableUiElement(
                geojson.map((geojson) => {
                    if (
                        geojson?.features?.length === undefined ||
                        geojson?.features?.length === 0
                    ) {
                        return t.nothingLoaded.Subs(layer).SetClass("alert")
                    }
                    return new Combine([
                        t.osmLoaded.Subs({ count: geojson.features.length, name: layer.name }),
                    ])
                })
            ),
            osmLiveData,
            new Combine([
                t.zoomLevelSelection,
                zoomLevel,
                new VariableUiElement(
                    osmLiveData.location.map((location) => {
                        return t.zoomIn.Subs(<any>{ current: location.zoom })
                    })
                ),
            ]).SetClass("flex"),
            new DivContainer("fullscreen"),
            new Title(t.titleNearby),
            new Combine([t.mapShowingNearbyIntro, nearbyCutoff]).SetClass("flex"),
            new VariableUiElement(
                toImportWithNearby.features.map((feats) =>
                    t.nearbyWarn.Subs({ count: feats.length }).SetClass("alert")
                )
            ),
            t.setRangeToZero,
            matchedFeaturesMap,
            showOsmLayer,
        ]).SetClass("flex flex-col")
        super([
            new Title(t.title),
            new VariableUiElement(
                overpassStatus.map((d) => {
                    if (d === "idle") {
                        return new Loading(t.states.idle)
                    }
                    if (d === "running") {
                        return new Loading(t.states.running)
                    }
                    if (d["error"] !== undefined) {
                        return t.states.error.Subs({ error: d["error"] }).SetClass("alert")
                    }

                    if (d === "cached") {
                        return conflationMaps
                    }
                    if (d === "success") {
                        return conflationMaps
                    }
                    return t.states.unexpected.Subs({ state: d }).SetClass("alert")
                })
            ),
        ])

        this.Value = paritionedImport.map((feats) => ({
            theme: params.theme,
            features: <any>feats?.noNearby,
            layer: params.layer,
        }))
        this.IsValid = this.Value.map((v) => v?.features !== undefined && v.features.length > 0)
    }
}