MapComplete/UI/StatisticsGUI.ts

/**
 * The statistics-gui shows statistics from previous MapComplete-edits
 */
import { UIEventSource } from "../Logic/UIEventSource"
import { VariableUiElement } from "./Base/VariableUIElement"
import Loading from "./Base/Loading"
import { Utils } from "../Utils"
import Combine from "./Base/Combine"
import { StackedRenderingChart } from "./BigComponents/TagRenderingChart"
import { LayerFilterPanel } from "./BigComponents/FilterView"
import { AllKnownLayouts } from "../Customizations/AllKnownLayouts"
import MapState from "../Logic/State/MapState"
import BaseUIElement from "./BaseUIElement"
import Title from "./Base/Title"
import { FixedUiElement } from "./Base/FixedUiElement"

class StatisticsForOverviewFile extends Combine {
    constructor(homeUrl: string, paths: string[]) {
        const layer = AllKnownLayouts.allKnownLayouts.get("mapcomplete-changes").layers[0]
        const filteredLayer = MapState.InitializeFilteredLayers(
            { id: "statistics-view", layers: [layer] },
            undefined
        )[0]
        const filterPanel = new LayerFilterPanel(undefined, filteredLayer)
        const appliedFilters = filteredLayer.appliedFilters

        const downloaded = new UIEventSource<{ features: ChangeSetData[] }[]>([])

        for (const filepath of paths) {
            Utils.downloadJson(homeUrl + filepath).then((data) => {
                data?.features?.forEach((item) => {
                    item.properties = { ...item.properties, ...item.properties.metadata }
                    delete item.properties.metadata
                })
                downloaded.data.push(data)
                downloaded.ping()
            })
        }

        const loading = new Loading(
            new VariableUiElement(
                downloaded.map((dl) => "Downloaded " + dl.length + " items out of " + paths.length)
            )
        )

        super([
            filterPanel,
            new VariableUiElement(
                downloaded.map(
                    (downloaded) => {
                        if (downloaded.length !== paths.length) {
                            return loading
                        }

                        let overview = ChangesetsOverview.fromDirtyData(
                            [].concat(...downloaded.map((d) => d.features))
                        )
                        if (appliedFilters.data.size > 0) {
                            appliedFilters.data.forEach((filterSpec) => {
                                const tf = filterSpec?.currentFilter
                                if (tf === undefined) {
                                    return
                                }
                                overview = overview.filter((cs) =>
                                    tf.matchesProperties(cs.properties)
                                )
                            })
                        }

                        if (overview._meta.length === 0) {
                            return "No data matched the filter"
                        }

                        const dateStrings = Utils.NoNull(
                            overview._meta.map((cs) => cs.properties.date)
                        )
                        const dates: number[] = dateStrings.map((d) => new Date(d).getTime())
                        const mindate = Math.min(...dates)
                        const maxdate = Math.max(...dates)

                        const diffInDays = (maxdate - mindate) / (1000 * 60 * 60 * 24)
                        console.log("Diff in days is ", diffInDays, "got", overview._meta.length)
                        const trs = layer.tagRenderings.filter(
                            (tr) => tr.mappings?.length > 0 || tr.freeform?.key !== undefined
                        )
                        const elements: BaseUIElement[] = []
                        for (const tr of trs) {
                            let total = undefined
                            if (tr.freeform?.key !== undefined) {
                                total = new Set(
                                    overview._meta.map((f) => f.properties[tr.freeform.key])
                                ).size
                            }

                            try {
                                elements.push(
                                    new Combine([
                                        new Title(tr.question ?? tr.id).SetClass("p-2"),
                                        total > 1 ? total + " unique value" : undefined,
                                        new StackedRenderingChart(tr, <any>overview._meta, {
                                            period: diffInDays <= 367 ? "day" : "month",
                                            groupToOtherCutoff:
                                                total > 50 ? 25 : total > 10 ? 3 : 0,
                                        }).SetStyle("width: 100%; height: 600px"),
                                    ]).SetClass("block border-2 border-subtle p-2 m-2 rounded-xl")
                                )
                            } catch (e) {
                                console.log("Could not generate a chart", e)
                                elements.push(
                                    new FixedUiElement(
                                        "No relevant information for " + tr.question.txt
                                    )
                                )
                            }
                        }

                        return new Combine(elements)
                    },
                    [appliedFilters]
                )
            ).SetClass("block w-full h-full"),
        ])
        this.SetClass("block w-full h-full")
    }
}

export default class StatisticsGUI extends VariableUiElement {
    private static readonly homeUrl =
        "https://raw.githubusercontent.com/pietervdvn/MapComplete/develop/Docs/Tools/stats/"
    private static readonly stats_files = "file-overview.json"

    constructor() {
        const index = UIEventSource.FromPromise(
            Utils.downloadJson(StatisticsGUI.homeUrl + StatisticsGUI.stats_files)
        )
        super(
            index.map((paths) => {
                if (paths === undefined) {
                    return new Loading("Loading overview...")
                }

                return new StatisticsForOverviewFile(StatisticsGUI.homeUrl, paths)
            })
        )
        this.SetClass("block w-full h-full")
    }
}

class ChangesetsOverview {
    private static readonly theme_remappings = {
        metamap: "maps",
        groen: "buurtnatuur",
        "updaten van metadata met mapcomplete": "buurtnatuur",
        "Toevoegen of dit natuurreservaat toegangkelijk is": "buurtnatuur",
        "wiki:mapcomplete/fritures": "fritures",
        "wiki:MapComplete/Fritures": "fritures",
        lits: "lit",
        pomp: "cyclofix",
        "wiki:user:joost_schouppe/campersite": "campersite",
        "wiki-user-joost_schouppe-geveltuintjes": "geveltuintjes",
        "wiki-user-joost_schouppe-campersite": "campersite",
        "wiki-User-joost_schouppe-campersite": "campersite",
        "wiki-User-joost_schouppe-geveltuintjes": "geveltuintjes",
        "wiki:User:joost_schouppe/campersite": "campersite",
        arbres: "arbres_llefia",
        aed_brugge: "aed",
        "https://llefia.org/arbres/mapcomplete.json": "arbres_llefia",
        "https://llefia.org/arbres/mapcomplete1.json": "arbres_llefia",
        "toevoegen of dit natuurreservaat toegangkelijk is": "buurtnatuur",
        "testing mapcomplete 0.0.0": "buurtnatuur",
        entrances: "indoor",
        "https://raw.githubusercontent.com/osmbe/play/master/mapcomplete/geveltuinen/geveltuinen.json":
            "geveltuintjes",
    }
    public readonly _meta: ChangeSetData[]

    public static fromDirtyData(meta: ChangeSetData[]) {
        return new ChangesetsOverview(meta?.map((cs) => ChangesetsOverview.cleanChangesetData(cs)))
    }

    private constructor(meta: ChangeSetData[]) {
        this._meta = Utils.NoNull(meta)
    }

    public filter(predicate: (cs: ChangeSetData) => boolean) {
        return new ChangesetsOverview(this._meta.filter(predicate))
    }

    private static cleanChangesetData(cs: ChangeSetData): ChangeSetData {
        if (cs === undefined) {
            return undefined
        }
        if (cs.properties.editor?.startsWith("iD")) {
            // We also fetch based on hashtag, so some edits with iD show up as well
            return undefined
        }
        if (cs.properties.theme === undefined) {
            cs.properties.theme = cs.properties.comment.substr(
                cs.properties.comment.lastIndexOf("#") + 1
            )
        }
        cs.properties.theme = cs.properties.theme.toLowerCase()
        const remapped = ChangesetsOverview.theme_remappings[cs.properties.theme]
        cs.properties.theme = remapped ?? cs.properties.theme
        if (cs.properties.theme.startsWith("https://raw.githubusercontent.com/")) {
            cs.properties.theme =
                "gh://" + cs.properties.theme.substr("https://raw.githubusercontent.com/".length)
        }
        if (cs.properties.modify + cs.properties.delete + cs.properties.create == 0) {
            cs.properties.theme = "EMPTY CS"
        }
        try {
            cs.properties.host = new URL(cs.properties.host).host
        } catch (e) {}
        return cs
    }
}

interface ChangeSetData {
    id: number
    type: "Feature"
    geometry: {
        type: "Polygon"
        coordinates: [number, number][][]
    }
    properties: {
        check_user: null
        reasons: []
        tags: []
        features: []
        user: string
        uid: string
        editor: string
        comment: string
        comments_count: number
        source: string
        imagery_used: string
        date: string
        reviewed_features: []
        create: number
        modify: number
        delete: number
        area: number
        is_suspect: boolean
        harmful: any
        checked: boolean
        check_date: any
        host: string
        theme: string
        imagery: string
        language: string
    }
}