mapcomplete/UI/Wikipedia/WikidataPreviewBox.ts

import {VariableUiElement} from "../Base/VariableUIElement";
import {Store, UIEventSource} from "../../Logic/UIEventSource";
import Wikidata, {WikidataResponse} from "../../Logic/Web/Wikidata";
import {Translation, TypedTranslation} from "../i18n/Translation";
import {FixedUiElement} from "../Base/FixedUiElement";
import Loading from "../Base/Loading";
import Translations from "../i18n/Translations";
import Combine from "../Base/Combine";
import Img from "../Base/Img";
import {WikimediaImageProvider} from "../../Logic/ImageProviders/WikimediaImageProvider";
import Link from "../Base/Link";
import Svg from "../../Svg";
import BaseUIElement from "../BaseUIElement";
import {Utils} from "../../Utils";

export default class WikidataPreviewBox extends VariableUiElement {

    private static isHuman = [
        {p: 31/*is a*/, q: 5 /* human */},
    ]
    // @ts-ignore
    private static extraProperties: {
        requires?: { p: number, q?: number }[],
        property: string,
        display: TypedTranslation<{value}> | Map<string, string | (() => BaseUIElement) /*If translation: Subs({value: * })  */>,
        textMode?: Map<string, string>
    }[] = [
        {
            requires: WikidataPreviewBox.isHuman,
            property: "P21",
            display: new Map([
                ['Q6581097', () => Svg.gender_male_svg().SetStyle("width: 1rem; height: auto")],
                ['Q6581072', () => Svg.gender_female_svg().SetStyle("width: 1rem; height: auto")],
                ['Q1097630', () => Svg.gender_inter_svg().SetStyle("width: 1rem; height: auto")],
                ['Q1052281', () => Svg.gender_trans_svg().SetStyle("width: 1rem; height: auto")/*'transwomen'*/],
                ['Q2449503', () => Svg.gender_trans_svg().SetStyle("width: 1rem; height: auto")/*'transmen'*/],
                ['Q48270', () => Svg.gender_queer_svg().SetStyle("width: 1rem; height: auto")]
            ]),
            textMode: new Map([
                ['Q6581097',  "♂️"],
                ['Q6581072',  "♀️"],
                ['Q1097630', "⚥️"],
                ['Q1052281',  "🏳️‍⚧️"/*'transwomen'*/],
                ['Q2449503',  "🏳️‍⚧️"/*'transmen'*/],
                ['Q48270',  "🏳️‍🌈 ⚧"]
            ])
        },
        {
            property: "P569",
            requires: WikidataPreviewBox.isHuman,
            display: Translations.t.general.wikipedia.previewbox.born
        },
        {
            property: "P570",
            requires: WikidataPreviewBox.isHuman,
            display:Translations.t.general.wikipedia.previewbox.died
        }
    ]

    constructor(wikidataId: Store<string>, options?: {
        noImages?: boolean, 
        imageStyle?: string,
        whileLoading?: BaseUIElement | string, 
        extraItems?: (BaseUIElement | string)[]}) {
        let inited = false;
        const wikidata = wikidataId
            .stabilized(250)
            .bind(id => {
                if (id === undefined || id === "" || id === "Q") {
                    return null;
                }
                inited = true;
                return Wikidata.LoadWikidataEntry(id)
            })

        super(wikidata.map(maybeWikidata => {
            if (maybeWikidata === null || !inited) {
                return options?.whileLoading;
            }

            if (maybeWikidata === undefined) {
                return new Loading(Translations.t.general.loading)
            }

            if (maybeWikidata["error"] !== undefined) {
                return new FixedUiElement(maybeWikidata["error"]).SetClass("alert")
            }
            const wikidata = <WikidataResponse>maybeWikidata["success"]
            return WikidataPreviewBox.WikidataResponsePreview(wikidata, options)
        }))

    }

    public static WikidataResponsePreview(wikidata: WikidataResponse, options?: {
        noImages?: boolean, 
        imageStyle?: string,
        extraItems?: (BaseUIElement | string)[]}): BaseUIElement {
        let link = new Link(
            new Combine([
                wikidata.id,
                options?.noImages ? wikidata.id : Svg.wikidata_svg().SetStyle("width: 2.5rem").SetClass("block")
            ]).SetClass("flex"),
            Wikidata.IdToArticle(wikidata.id), true)?.SetClass("must-link")

        let info = new Combine([
            new Combine(
                [Translation.fromMap(wikidata.labels)?.SetClass("font-bold"),
                    link]).SetClass("flex justify-between"),
            Translation.fromMap(wikidata.descriptions),
            WikidataPreviewBox.QuickFacts(wikidata, options),
           ...(options.extraItems ?? []) 
        ]).SetClass("flex flex-col link-underline")


        let imageUrl = undefined
        if (wikidata.claims.get("P18")?.size > 0) {
            imageUrl = Array.from(wikidata.claims.get("P18"))[0]
        }
        if (imageUrl && !options?.noImages) {
            imageUrl = WikimediaImageProvider.singleton.PrepUrl(imageUrl).url
            info = new Combine([new Img(imageUrl).SetStyle(options?.imageStyle ?? "max-width: 5rem; width: unset; height: 4rem").SetClass("rounded-xl mr-2"),
                info.SetClass("w-full")]).SetClass("flex")
        }

        info.SetClass("p-2 w-full")

        return info
    }

    public static QuickFacts(wikidata: WikidataResponse, options?: {noImages?: boolean}): BaseUIElement {

        const els: BaseUIElement[] = []
        for (const extraProperty of WikidataPreviewBox.extraProperties) {
            let hasAllRequirements = true
            for (const requirement of extraProperty.requires) {
                if (!wikidata.claims?.has("P" + requirement.p)) {
                    hasAllRequirements = false;
                    break
                }
                if (!wikidata.claims?.get("P" + requirement.p).has("Q" + requirement.q)) {
                    hasAllRequirements = false;
                    break
                }
            }
            if (!hasAllRequirements) {
                continue
            }

            const key = extraProperty.property
            const display = (options?.noImages ? extraProperty.textMode: extraProperty.display) ??  extraProperty.display
            if (wikidata.claims?.get(key) === undefined) {
                continue
            }
            const value: string[] = Array.from(wikidata.claims.get(key))

            if (display instanceof Translation) {
                els.push(display.Subs({value: value.join(", ")}).SetClass("m-2"))
                continue
            }
            const constructors = Utils.NoNull(value.map(property => display.get(property)))
            const elems = constructors.map(v => {
                if (typeof v === "string") {
                    return new FixedUiElement(v)
                } else {
                    return v();
                }
            })
            els.push(new Combine(elems).SetClass("flex m-2"))
        }
        if (els.length === 0) {
            return undefined;
        }

        return new Combine(els).SetClass("flex")
    }

}