MapComplete/src/UI/Popup/DataVisualisations.ts

import {
    SpecialVisualisationArg,
    SpecialVisualisationParams,
    SpecialVisualization,
    SpecialVisualizationSvelte,
} from "../SpecialVisualization"
import { HistogramViz } from "./HistogramViz"
import { Store } from "../../Logic/UIEventSource"
import BaseUIElement from "../BaseUIElement"
import SvelteUIElement from "../Base/SvelteUIElement"
import DirectionIndicator from "../Base/DirectionIndicator.svelte"
import { VariableUiElement } from "../Base/VariableUIElement"
import { GeoOperations } from "../../Logic/GeoOperations"
import Translations from "../i18n/Translations"
import Constants from "../../Models/Constants"
import opening_hours from "opening_hours"
import { OH } from "../OpeningHours/OpeningHours"
import OpeningHoursWithError from "../OpeningHours/Visualisation/OpeningHoursWithError.svelte"
import NextChangeViz from "../OpeningHours/NextChangeViz.svelte"
import { Unit } from "../../Models/Unit"
import AllFeaturesStatistics from "../Statistics/AllFeaturesStatistics.svelte"
import { LanguageElement } from "./LanguageElement/LanguageElement"
import { QuestionableTagRenderingConfigJson } from "../../Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson"
import { And } from "../../Logic/Tags/And"
import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
import TagRenderingEditable from "./TagRendering/TagRenderingEditable.svelte"
import AllTagsPanel from "./AllTagsPanel/AllTagsPanel.svelte"
import CollectionTimes from "../CollectionTimes/CollectionTimes.svelte"
import Tr from "../Base/Tr.svelte"
import Combine from "../Base/Combine"
import Marker from "../Map/Marker.svelte"
import { twJoin } from "tailwind-merge"

class DirectionIndicatorVis extends SpecialVisualizationSvelte {
    funcName = "direction_indicator"
    args = []

    docs =
        "Gives a distance indicator and a compass pointing towards the location from your GPS-location. If clicked, centers the map on the object"
    group = "data"

    constr(params: SpecialVisualisationParams): SvelteUIElement {
        return new SvelteUIElement(DirectionIndicator, params)
    }
}

class DirectionAbsolute extends SpecialVisualization {
    funcName = "direction_absolute"
    docs =
        "Converts compass degrees (with 0° being north, 90° being east, ...) into a human readable, translated direction such as 'north', 'northeast'"
    args = [
        {
            name: "key",
            type: "key",
            doc: "The attribute containing the degrees",
            defaultValue: "_direction:centerpoint",
        },
        {
            name: "offset",
            doc: "Offset value that is added to the actual value, e.g. `180` to indicate the opposite (backward) direction",
            defaultValue: "0",
        },
    ]
    group = "data"

    constr({ tags, args }: SpecialVisualisationParams): BaseUIElement {
        const key = args[0] === "" ? "_direction:centerpoint" : args[0]
        const offset = args[1] === "" ? 0 : Number(args[1])

        return new VariableUiElement(
            tags
                .map((tags) => {
                    console.log("Direction value", tags[key], key)
                    return tags[key]
                })
                .mapD((value) => {
                    const dir = GeoOperations.bearingToHuman(
                        GeoOperations.parseBearing(value) + offset
                    )
                    console.log("Human dir", dir)
                    return Translations.t.general.visualFeedback.directionsAbsolute[dir]
                })
        )
    }
}

class OpeningHoursTableVis extends SpecialVisualizationSvelte {
    funcName = "opening_hours_table"
    docs =
        "Creates an opening-hours table. Usage: {opening_hours_table(opening_hours)} to create a table of the tag 'opening_hours'."
    args = [
        {
            name: "key",
            defaultValue: "opening_hours",
            type: "key",
            doc: "The tagkey from which the table is constructed.",
        },
        {
            name: "prefix",
            defaultValue: "",
            doc: "Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__",
        },
        {
            name: "postfix",
            defaultValue: "",
            doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__",
        },
    ]
    group = "data"
    needsUrls = [Constants.countryCoderInfo]
    example =
        "A normal opening hours table can be invoked with `{opening_hours_table()}`. A table for e.g. conditional access with opening hours can be `{opening_hours_table(access:conditional, no @ &LPARENS, &RPARENS)}`"

    constr({ tags, args }: SpecialVisualisationParams): SvelteUIElement {
        const [key, prefix, postfix] = args
        const openingHoursStore: Store<opening_hours | "error" | undefined> =
            OH.CreateOhObjectStore(tags, key, prefix, postfix)
        return new SvelteUIElement(OpeningHoursWithError, {
            tags,
            key,
            opening_hours_obj: openingHoursStore,
        })
    }
}

class OpeningHoursState extends SpecialVisualizationSvelte {
    group = "data"
    funcName = "opening_hours_state"
    docs = "A small element, showing if the POI is currently open and when the next change is"
    args = [
        {
            name: "key",
            type: "key",
            defaultValue: "opening_hours",
            doc: "The tagkey from which the opening hours are read.",
        },
        {
            name: "prefix",
            defaultValue: "",
            doc: "Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__",
        },
        {
            name: "postfix",
            defaultValue: "",
            doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__",
        },
    ]

    constr({ state, tags, args }: SpecialVisualisationParams): SvelteUIElement {
        const keyToUse = args[0]
        const prefix = args[1]
        const postfix = args[2]
        return new SvelteUIElement(NextChangeViz, {
            state,
            keyToUse,
            tags,
            prefix,
            postfix,
        })
    }
}

class Canonical extends SpecialVisualization {
    group = "data"
    funcName = "canonical"

    docs =
        "Converts a short, canonical value into the long, translated text including the unit. This only works if a `unit` is defined for the corresponding value. The unit specification will be included in the text. "
    example =
        "If the object has `length=42`, then `{canonical(length)}` will be shown as **42 meter** (in english), **42 metre** (in french), ..."
    args = [
        {
            name: "key",
            type: "key",
            doc: "The key of the tag to give the canonical text for",
            required: true,
        },
    ]

    constr({ state, tags, args }: SpecialVisualisationParams) {
        const key = args[0]
        return new VariableUiElement(
            tags
                .map((tags) => tags[key])
                .map((value) => {
                    if (value === undefined) {
                        return undefined
                    }
                    const allUnits: Unit[] = [].concat(
                        ...(state?.theme?.layers?.map((lyr) => lyr.units) ?? [])
                    )
                    const unit = allUnits.filter((unit) => unit.isApplicableToKey(key))[0]
                    if (unit === undefined) {
                        return value
                    }
                    const getCountry = () => tags.data._country
                    return unit.asHumanLongValue(value, getCountry)
                })
        )
    }
}

class StatisticsVis extends SpecialVisualizationSvelte {
    funcName = "statistics"
    group = "data"
    docs =
        "Show general statistics about all the elements currently in view. Intended to use on the `current_view`-layer. They will be split per layer"
    args = []

    constr(params: SpecialVisualisationParams) {
        return new SvelteUIElement(AllFeaturesStatistics, params)
    }
}

class PresetDescription extends SpecialVisualizationSvelte {
    funcName = "preset_description"
    docs =
        "Shows the extra description from the presets of the layer, if one matches. It will pick the most specific one (e.g. if preset `A` implies `B`, but `B` does not imply `A`, it'll pick B) or the first one if no ordering can be made. Might be empty"
    args = []
    group = "UI"

    constr({ state, tags }: SpecialVisualisationParams): SvelteUIElement {
        const translation = tags.map((tags) => {
            const layer = state.theme.getMatchingLayer(tags)
            return layer?.getMostMatchingPreset(tags)?.description
        })
        return new SvelteUIElement(Tr, { t: translation })
    }
}

class PresetTypeSelect extends SpecialVisualizationSvelte {
    funcName = "preset_type_select"
    docs = "An editable tag rendering which allows to change the type. The options are the presets of the layer, effectively allowing to change act as if the object was made with a different preset. " +
        "For example\n\n" +
        "How this element looks like (in question mode) for [`tourism_accomodation`](./Layers/tourism_accomodation.md): ![](./img/Special_preset_type_select_preview.png)" +
        "The presets ![](./img/Special_preset_type_select_matching_presets.png)"
    args = []
    group = "ui"

    constr({ state, tags, feature, layer }: SpecialVisualisationParams): SvelteUIElement {
        const t = Translations.t.preset_type
        if (layer._basedOn !== layer.id) {
            console.warn("Trying to use the _original_ layer")
            layer = state.theme.layers.find((l) => l.id === layer._basedOn) ?? layer
        }
        const question: QuestionableTagRenderingConfigJson = {
            id: layer.id + "-type",
            question: t.question.translations,
            mappings: layer.presets.map((pr) => ({
                if: new And(pr.tags).asJson(),
                icon: "auto",
                then: (pr.description ? t.typeDescription : t.typeTitle).Subs({
                    title: pr.title,
                    description: pr.description,
                }).translations,
            })),
        }
        if (question.mappings.length === 0) {
            console.error("No mappings for preset_type_select, something went wrong")
            return undefined
        }
        const config = new TagRenderingConfig(question)
        return new SvelteUIElement(TagRenderingEditable, {
            config,
            tags,
            selectedElement: feature,
            state,
            layer,
        })
    }
}

class AllTagsVis extends SpecialVisualizationSvelte {
    funcName = "all_tags"
    docs = "Prints all key-value pairs of the object - used for debugging"
    args = []
    group = "data"

    constr(params: SpecialVisualisationParams) {
        return new SvelteUIElement(AllTagsPanel, params)
    }
}

class PointsInTimeVis extends SpecialVisualization {
    docs = "Creates a visualisation for 'points in time', e.g. collection times of a postbox"
    group = "data"
    funcName = "points_in_time"
    args = [
        {
            name: "key",
            type: "key",
            required: true,
            doc: "The key out of which the points_in_time will be parsed",
        },
    ]

    constr({ tags, args }: SpecialVisualisationParams): BaseUIElement {
        const key = args[0]
        const points_in_time = tags.map((tags) => tags[key])
        const times = points_in_time.map(
            (times) => OH.createOhObject(<any>tags.data, times, tags.data["_country"], 1),
            [tags]
        )
        return new VariableUiElement(
            times.map((times) => new SvelteUIElement(CollectionTimes, { times }))
        )
    }
}

class KnownIcons extends SpecialVisualization {
    docs =
        "Displays all icons from the specified tagRenderings (if they are known and have an icon) together, e.g. to give a summary of the dietary options"
    needsUrls = []
    group = "UI"
    funcName = "show_icons"
    args: SpecialVisualisationArg[] = [
        {
            name: "labels",
            doc: "A ';'-separated list of labels and/or ids of tagRenderings",
            type: "key",
            required: true,
        },
        {
            name: "class",
            doc: "CSS-classes of the container, space-separated",
            type: "css",
            required: false,
            defaultValue: "inline-flex mx-4",
        },
    ]

    private static readonly emojiHeights = {
        small: "2rem",
        medium: "3rem",
        large: "5rem",
    }

    constr(options: SpecialVisualisationParams): BaseUIElement {
        const labels = new Set(options.args[0].split(";").map((s) => s.trim()))
        const matchingTrs = options.layer.tagRenderings.filter(
            (tr) => labels.has(tr.id) || tr.labels.some((l) => labels.has(l))
        )
        return new VariableUiElement(
            options.tags.map((tags) =>
                new Combine(
                    matchingTrs.map((tr) => {
                        const mapping = tr.GetRenderValueWithImage(tags)
                        if (!mapping?.icon) {
                            return undefined
                        }

                        return new SvelteUIElement(Marker, {
                            emojiHeight: KnownIcons.emojiHeights[mapping.iconClass] ?? "2rem",
                            clss: `mapping-icon-${mapping.iconClass ?? "small"}`,
                            icons: mapping.icon,
                            size: twJoin(
                                "shrink-0",
                                `mapping-icon-${mapping.iconClass ?? "small"}-height mapping-icon-${
                                    mapping.iconClass ?? "small"
                                }-width`
                            ),
                        })
                    })
                ).SetClass(options.args[1] ?? "inline-flex mx-4")
            )
        )
    }
}

export class DataVisualisations {
    public static initList(): SpecialVisualization[] {
        return [
            new HistogramViz(),
            new StatisticsVis(),
            new DirectionAbsolute(),
            new DirectionIndicatorVis(),
            new OpeningHoursTableVis(),
            new OpeningHoursState(),
            new PointsInTimeVis(),
            new Canonical(),
            new LanguageElement(),
            new PresetDescription(),
            new PresetTypeSelect(),
            new AllTagsVis(),
            new KnownIcons(),
        ]
    }
}