MapComplete/src/UI/SpecialVisualisations/DataImportSpecialVisualisations.ts

import { SpecialVisualization, SpecialVisualizationState, SpecialVisualizationSvelte } from "../SpecialVisualization"
import Maproulette from "../../Logic/Maproulette"
import SvelteUIElement from "../Base/SvelteUIElement"
import { PointImportButtonViz } from "../Popup/ImportButtons/PointImportButtonViz"
import WayImportButtonViz from "../Popup/ImportButtons/WayImportButtonViz"
import ConflateImportButtonViz from "../Popup/ImportButtons/ConflateImportButtonViz"
import { PlantNetDetectionViz } from "../Popup/PlantNetDetectionViz"
import Constants from "../../Models/Constants"
import { Store, Stores, UIEventSource } from "../../Logic/UIEventSource"
import { Feature, GeoJsonProperties } from "geojson"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import BaseUIElement from "../BaseUIElement"
import LinkedDataLoader from "../../Logic/Web/LinkedDataLoader"
import Toggle from "../Input/Toggle"
import ComparisonTool from "../Comparison/ComparisonTool.svelte"
import { Utils } from "../../Utils"
import TagApplyViz from "./TagApplyViz"
import { ServerSourceInfo } from "../../Models/SourceOverview"

class MaprouletteSetStatus extends SpecialVisualizationSvelte {
    funcName = "maproulette_set_status"
    group = "data_import"
    docs = "Change the status of the given MapRoulette task"
    needsUrls = [Maproulette.defaultEndpointInfo]
    example =
        " The following example sets the status to '2' (false positive)\n" +
        "\n" +
        "```json\n" +
        "{\n" +
        "   \"id\": \"mark_duplicate\",\n" +
        "   \"render\": {\n" +
        "      \"special\": {\n" +
        "         \"type\": \"maproulette_set_status\",\n" +
        "         \"message\": {\n" +
        "            \"en\": \"Mark as not found or false positive\"\n" +
        "         },\n" +
        "         \"status\": \"2\",\n" +
        "         \"image\": \"close\"\n" +
        "      }\n" +
        "   }\n" +
        "}\n" +
        "```"
    args = [
        {
            name: "message",
            doc: "A message to show to the user",
        },
        {
            name: "image",
            doc: "Image to show",
            defaultValue: "confirm",
        },
        {
            name: "message_confirm",
            doc: "What to show when the task is closed, either by the user or was already closed.",
        },
        {
            name: "status",
            doc: "A statuscode to apply when the button is clicked. 1 = `close`, 2 = `false_positive`, 3 = `skip`, 4 = `deleted`, 5 = `already fixed` (on the map, e.g. for duplicates), 6 = `too hard`",
            defaultValue: "1",
        },
        {
            name: "maproulette_id",
            doc: "The property name containing the maproulette id",
            defaultValue: "mr_taskId",
        },
        {
            name: "ask_feedback",
            doc: "If not an empty string, this will be used as question to ask some additional feedback. A text field will be added",
            defaultValue: "",
        },
    ]

    constr(state, tagsSource, args) {
        let [
            message,
            image,
            message_closed,
            statusToSet,
            maproulette_id_key,
            askFeedback,
        ] = args
        if (image === "") {
            image = "confirm"
        }
        if (maproulette_id_key === "" || maproulette_id_key === undefined) {
            maproulette_id_key = "mr_taskId"
        }
        statusToSet = statusToSet ?? "1"
        return new SvelteUIElement(MaprouletteSetStatus, {
            state,
            tags: tagsSource,
            message,
            image,
            message_closed,
            statusToSet,
            maproulette_id_key,
            askFeedback,
        })
    }
}

class LinkedDataFromWebsite extends SpecialVisualization {
    funcName = "linked_data_from_website"
    group = "data_import"
    docs = "Attempts to load (via a proxy) the specified website and parsed ld+json from there. Suitable data will be offered to import into OSM. Note: this element is added by default"
    args = [
        {
            name: "key",
            defaultValue: "website",
            doc: "Attempt to load ld+json from the specified URL. This can be in an embedded <script type='ld+json'>",
        },
        {
            name: "useProxy",
            defaultValue: "yes",
            doc: "If 'yes', uses the provided proxy server. This proxy server will scrape HTML and search for a script with `lang='ld+json'`. If `no`, the data will be downloaded and expects a linked-data-json directly",
        },
        {
            name: "host",
            doc: "If not using a proxy, define what host the website is allowed to connect to",
        },
        {
            name: "mode",
            doc: "If `display`, only show the data in tabular and readonly form, ignoring already existing tags. This is used to explicitly show all the tags. If unset or anything else, allow to apply/import on OSM",
        },
        {
            name: "collapsed",
            defaultValue: "yes",
            doc: "If the containing accordion should be closed",
        },
    ]
    needsUrls: ServerSourceInfo[] = [
        Constants.linkedDataProxyInfo,
        {
            url: "http://www.schema.org",
            description: "Only needed for the velopark-theme",
            category: "feature",
            openData: true,
        },
        {
            url: "https://data.velopark.be",
            description: "Only needed for the velopark-theme",
            openData: true,
            selfhostable: false,
            category: "feature",
        },
    ]

    constr(
        state: SpecialVisualizationState,
        tags: UIEventSource<Record<string, string>>,
        argument: string[],
        feature: Feature,
        layer: LayerConfig,
    ): BaseUIElement {
        const key = argument[0] ?? "website"
        const useProxy = argument[1] !== "no"
        const readonly = argument[3] === "readonly"
        const isClosed = (argument[4] ?? "yes") === "yes"

        const countryStore: Store<string | undefined> = tags.mapD(
            (tags) => tags._country,
        )
        const sourceUrl: Store<string | undefined> = tags.mapD((tags) => {
            if (!tags[key] || tags[key] === "undefined") {
                return null
            }
            return tags[key]
        })
        const externalData: Store<{ success: GeoJsonProperties } | { error }> =
            sourceUrl.bindD(
                (url) => {
                    const country = countryStore.data
                    if (url.startsWith("https://data.velopark.be/")) {
                        return Stores.FromPromiseWithErr(
                            (async () => {
                                try {
                                    const loadAll =
                                        layer.id.toLowerCase().indexOf("maproulette") >=
                                        0 // Dirty hack
                                    const features =
                                        await LinkedDataLoader.fetchVeloparkEntry(
                                            url,
                                            loadAll,
                                        )
                                    const feature =
                                        features.find(
                                            (f) => f.properties["ref:velopark"] === url,
                                        ) ?? features[0]
                                    const properties = feature.properties
                                    properties["ref:velopark"] = url
                                    console.log(
                                        "Got properties from velopark:",
                                        properties,
                                    )
                                    return properties
                                } catch (e) {
                                    console.error(e)
                                    throw e
                                }
                            })(),
                        )
                    }
                    if (country === undefined) {
                        return undefined
                    }
                    return Stores.FromPromiseWithErr(
                        (async () => {
                            try {
                                return await LinkedDataLoader.fetchJsonLd(
                                    url,
                                    { country },
                                    useProxy ? "proxy" : "fetch-lod",
                                )
                            } catch (e) {
                                console.log(
                                    "Could not get with proxy/download LOD, attempting to download directly. Error for ",
                                    url,
                                    "is",
                                    e,
                                )
                                return await LinkedDataLoader.fetchJsonLd(
                                    url,
                                    { country },
                                    "fetch-raw",
                                )
                            }
                        })(),
                    )
                },
                [countryStore],
            )

        externalData.addCallbackAndRunD((lod) =>
            console.log("linked_data_from_website received the following data:", lod),
        )

        return new Toggle(
            new SvelteUIElement(ComparisonTool, {
                feature,
                state,
                tags,
                layer,
                externalData,
                sourceUrl,
                readonly,
                collapsed: isClosed,
            }),
            undefined,
            sourceUrl.map((url) => !!url),
        )
    }
}

class CompareData extends SpecialVisualization {
    funcName = "compare_data"
    group = "data_import"
    needsUrls = (args) => args[1].split(";")
    args = [
        {
            name: "url",
            required: true,
            doc: "The attribute containing the url where to fetch more data",
        },
        {
            name: "host",
            required: true,
            doc: "The domain name(s) where data might be fetched from - this is needed to set the CSP. A domain must include 'https', e.g. 'https://example.com'. For multiple domains, separate them with ';'. If you don't know the possible domains, use '*'. ",
        },
        {
            name: "readonly",
            required: false,
            doc: "If 'yes', will not show 'apply'-buttons",
        },
    ]
    docs = "Gives an interactive element which shows a tag comparison between the OSM-object and the upstream object. This allows to copy some or all tags into OSM"

    constr(
        state: SpecialVisualizationState,
        tagSource: UIEventSource<Record<string, string>>,
        args: string[],
        feature: Feature,
        layer: LayerConfig,
    ): BaseUIElement {
        const url = args[0]
        const readonly = args[3] === "yes"
        const externalData = Stores.FromPromiseWithErr(Utils.downloadJson(url))
        return new SvelteUIElement(ComparisonTool, {
            url,
            state,
            tags: tagSource,
            layer,
            feature,
            readonly,
            externalData,
        })
    }

}
export class DataImportSpecialVisualisations {
    public static initList(): (SpecialVisualization & { group })[] {
        return [
            new TagApplyViz(),
            new PointImportButtonViz(),
            new WayImportButtonViz(),
            new ConflateImportButtonViz(),
            new PlantNetDetectionViz(),
            new MaprouletteSetStatus(),
            new LinkedDataFromWebsite(),
            new CompareData(),
        ]
    }
}