Merge branch 'feature/dashboard-layout' into develop

UI/Base/ChartJs.ts

@@ -0,0 +1,24 @@
+import BaseUIElement from "../BaseUIElement";
+import {Chart, ChartConfiguration, ChartType, DefaultDataPoint, registerables} from 'chart.js';
+Chart.register(...registerables);
+
+
+export default class ChartJs<
+    TType extends ChartType = ChartType,
+    TData = DefaultDataPoint<TType>,
+    TLabel = unknown
+    > extends BaseUIElement{
+    private readonly _config: ChartConfiguration<TType, TData, TLabel>;
+    
+    constructor(config: ChartConfiguration<TType, TData, TLabel>) {
+        super();
+        this._config = config;
+    }
+    
+    protected InnerConstructElement(): HTMLElement {
+        const canvas = document.createElement("canvas");
+        new Chart(canvas, this._config);
+        return canvas;
+    }
+    
+}

UI/Base/Combine.ts

@@ -38,6 +38,9 @@ export default class Combine extends BaseUIElement {
     protected InnerConstructElement(): HTMLElement {
         const el = document.createElement("span")
         try {
+            if(this.uiElements === undefined){
+                console.error("PANIC")   
+            }
             for (const subEl of this.uiElements) {
                 if (subEl === undefined || subEl === null) {
                     continue;

UI/Base/Link.ts

@@ -26,9 +26,9 @@ export default class Link extends BaseUIElement {
             if (!hideKey) {
                 k = key + "="
             }
-            return new Link(k + value, `https://wiki.openstreetmap.org/wiki/Tag:${key}%3D${value}`)
+            return new Link(k + value, `https://wiki.openstreetmap.org/wiki/Tag:${key}%3D${value}`, true)
         }
-        return new Link(key, "https://wiki.openstreetmap.org/wiki/Key:" + key)
+        return new Link(key, "https://wiki.openstreetmap.org/wiki/Key:" + key, true)
     }
 
     AsMarkdown(): string {

UI/Base/Toggleable.ts

@@ -26,7 +26,8 @@ export default class Toggleable extends Combine {
     public readonly isVisible = new UIEventSource(false)
 
     constructor(title: Title | Combine | BaseUIElement, content: BaseUIElement, options?: {
-        closeOnClick: true | boolean
+        closeOnClick?: true | boolean,
+        height?: "100vh" | string
     }) {
         super([title, content])
         content.SetClass("animate-height border-l-4 pl-2 block")
@@ -72,7 +73,7 @@ export default class Toggleable extends Combine {
 
         this.isVisible.addCallbackAndRun(isVisible => {
             if (isVisible) {
-                contentElement.style.maxHeight = "100vh"
+                contentElement.style.maxHeight = options?.height ?? "100vh"
                 contentElement.style.overflowY = "auto"
                 contentElement.style["-webkit-mask-image"] = "unset"
             } else {

UI/Base/VariableUIElement.ts

@@ -33,6 +33,7 @@ export class VariableUiElement extends BaseUIElement {
             if (self.isDestroyed) {
                 return true;
             }
+           
             while (el.firstChild) {
                 el.removeChild(el.lastChild);
             }

UI/BaseUIElement.ts

@@ -9,7 +9,7 @@ export default abstract class BaseUIElement {
 
     protected _constructedHtmlElement: HTMLElement;
     protected isDestroyed = false;
-    private clss: Set<string> = new Set<string>();
+    private readonly clss: Set<string> = new Set<string>();
     private style: string;
     private _onClick: () => void;
 
@@ -114,7 +114,7 @@ export default abstract class BaseUIElement {
             if (style !== undefined && style !== "") {
                 el.style.cssText = style
             }
-            if (this.clss.size > 0) {
+            if (this.clss?.size > 0) {
                 try {
                     el.classList.add(...Array.from(this.clss))
                 } catch (e) {

UI/BigComponents/SimpleAddUI.ts

@@ -43,6 +43,14 @@ export interface PresetInfo extends PresetConfig {
 
 export default class SimpleAddUI extends Toggle {
 
+    /**
+     * 
+     * @param isShown
+     * @param resetScrollSignal
+     * @param filterViewIsOpened
+     * @param state
+     * @param takeLocationFrom: defaults to state.lastClickLocation. Take this location to add the new point around
+     */
     constructor(isShown: UIEventSource<boolean>,
                 resetScrollSignal: UIEventSource<void>,
                 filterViewIsOpened: UIEventSource<boolean>,
@@ -59,7 +67,9 @@ export default class SimpleAddUI extends Toggle {
                     filteredLayers: UIEventSource<FilteredLayer[]>,
                     featureSwitchFilter: UIEventSource<boolean>,
                     backgroundLayer: UIEventSource<BaseLayer>
-                }) {
+                }, 
+                takeLocationFrom?: UIEventSource<{lat: number, lon: number}>
+    ) {
         const loginButton = new SubtleButton(Svg.osm_logo_ui(), Translations.t.general.add.pleaseLogin.Clone())
             .onClick(() => state.osmConnection.AttemptLogin());
         const readYourMessages = new Combine([
@@ -68,7 +78,8 @@ export default class SimpleAddUI extends Toggle {
                 Translations.t.general.goToInbox, {url: "https://www.openstreetmap.org/messages/inbox", newTab: false})
         ]);
 
-
+        
+        takeLocationFrom = takeLocationFrom ?? state.LastClickLocation
         const selectedPreset = new UIEventSource<PresetInfo>(undefined);
         selectedPreset.addCallback(_ => {
             resetScrollSignal.ping();
@@ -76,7 +87,7 @@ export default class SimpleAddUI extends Toggle {
         
         
         isShown.addCallback(_ => selectedPreset.setData(undefined)) // Clear preset selection when the UI is closed/opened
-        state.LastClickLocation.addCallback(_ => selectedPreset.setData(undefined))
+        takeLocationFrom.addCallback(_ => selectedPreset.setData(undefined))
 
         const presetsOverview = SimpleAddUI.CreateAllPresetsPanel(selectedPreset, state)
 
@@ -120,7 +131,7 @@ export default class SimpleAddUI extends Toggle {
                     const message = Translations.t.general.add.addNew.Subs({category: preset.name}, preset.name["context"]);
                     return new ConfirmLocationOfPoint(state, filterViewIsOpened, preset,
                         message,
-                        state.LastClickLocation.data,
+                        takeLocationFrom.data,
                         confirm,
                         cancel,
                         () => {

UI/BigComponents/TagRenderingChart.ts

@@ -0,0 +1,179 @@
+import ChartJs from "../Base/ChartJs";
+import {OsmFeature} from "../../Models/OsmFeature";
+import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig";
+import {ChartConfiguration} from 'chart.js';
+import Combine from "../Base/Combine";
+import {TagUtils} from "../../Logic/Tags/TagUtils";
+
+export default class TagRenderingChart extends Combine {
+
+    private static readonly unkownColor = 'rgba(128, 128, 128, 0.2)'
+    private static readonly unkownBorderColor = 'rgba(128, 128, 128, 0.2)'
+
+    private static readonly otherColor = 'rgba(128, 128, 128, 0.2)'
+    private static readonly otherBorderColor = 'rgba(128, 128, 255)'
+    private static readonly notApplicableColor = 'rgba(128, 128, 128, 0.2)'
+    private static readonly notApplicableBorderColor = 'rgba(255, 0, 0)'
+
+
+    private static readonly backgroundColors = [
+        'rgba(255, 99, 132, 0.2)',
+        'rgba(54, 162, 235, 0.2)',
+        'rgba(255, 206, 86, 0.2)',
+        'rgba(75, 192, 192, 0.2)',
+        'rgba(153, 102, 255, 0.2)',
+        'rgba(255, 159, 64, 0.2)'
+    ]
+
+    private static readonly borderColors = [
+        'rgba(255, 99, 132, 1)',
+        'rgba(54, 162, 235, 1)',
+        'rgba(255, 206, 86, 1)',
+        'rgba(75, 192, 192, 1)',
+        'rgba(153, 102, 255, 1)',
+        'rgba(255, 159, 64, 1)'
+    ]
+
+    /**
+     * Creates a chart about this tagRendering for the given data
+     */
+    constructor(features: OsmFeature[], tagRendering: TagRenderingConfig, options?: {
+        chartclasses?: string,
+        chartstyle?: string,
+        includeTitle?: boolean,
+        groupToOtherCutoff?: 3 | number
+    }) {
+
+        const mappings = tagRendering.mappings ?? []
+        if (mappings.length === 0 && tagRendering.freeform?.key === undefined) {
+            super([])
+            this.SetClass("hidden")
+            return;
+        }
+        let unknownCount = 0;
+        const categoryCounts = mappings.map(_ => 0)
+        const otherCounts: Record<string, number> = {}
+        let notApplicable = 0;
+        let barchartMode = tagRendering.multiAnswer;
+        for (const feature of features) {
+            const props = feature.properties
+            if (tagRendering.condition !== undefined && !tagRendering.condition.matchesProperties(props)) {
+                notApplicable++;
+                continue;
+            }
+
+            if (!tagRendering.IsKnown(props)) {
+                unknownCount++;
+                continue;
+            }
+            let foundMatchingMapping = false;
+            if (!tagRendering.multiAnswer) {
+                for (let i = 0; i < mappings.length; i++) {
+                    const mapping = mappings[i];
+                    if (mapping.if.matchesProperties(props)) {
+                        categoryCounts[i]++
+                        foundMatchingMapping = true
+                        break;
+                    }
+                }
+            } else {
+                for (let i = 0; i < mappings.length; i++) {
+                    const mapping = mappings[i];
+                    if (TagUtils.MatchesMultiAnswer( mapping.if, props)) {
+                        categoryCounts[i]++
+                        foundMatchingMapping = true
+                    }
+                }
+            }
+            if (!foundMatchingMapping) {
+                if (tagRendering.freeform?.key !== undefined && props[tagRendering.freeform.key] !== undefined) {
+                    const otherValue = props[tagRendering.freeform.key]
+                    otherCounts[otherValue] = (otherCounts[otherValue] ?? 0) + 1
+                } else {
+                    unknownCount++
+                }
+            }
+        }
+
+        if (unknownCount + notApplicable === features.length) {
+            super([])
+            this.SetClass("hidden")
+            return
+        }
+
+        let otherGrouped = 0;
+        const otherLabels: string[] = []
+        const otherData : number[] = []
+        for (const v in otherCounts) {
+            const count = otherCounts[v]
+            if(count >= (options.groupToOtherCutoff ?? 3)){
+                otherLabels.push(v)
+                otherData.push(otherCounts[v])
+            }else{
+                otherGrouped++;
+            }
+        }
+        
+
+        const labels = ["Unknown", "Other", "Not applicable", ...mappings?.map(m => m.then.txt) ?? [], ...otherLabels]
+        const data = [unknownCount, otherGrouped, notApplicable, ...categoryCounts, ... otherData]
+        const borderColor = [TagRenderingChart.unkownBorderColor, TagRenderingChart.otherBorderColor, TagRenderingChart.notApplicableBorderColor]
+        const backgroundColor = [TagRenderingChart.unkownColor, TagRenderingChart.otherColor, TagRenderingChart.notApplicableColor]
+
+      
+
+        while (borderColor.length < data.length) {
+            borderColor.push(...TagRenderingChart.borderColors)
+            backgroundColor.push(...TagRenderingChart.backgroundColors)
+        }
+
+        for (let i = data.length; i >= 0; i--) {
+            if (data[i] === 0) {
+                labels.splice(i, 1)
+                data.splice(i, 1)
+                borderColor.splice(i, 1)
+                backgroundColor.splice(i, 1)
+            }
+        }
+
+        if(labels.length > 9){
+            barchartMode = true;
+        }
+
+        const config = <ChartConfiguration>{
+            type: barchartMode ? 'bar' : 'doughnut',
+            data: {
+                labels,
+                datasets: [{
+                    data,
+                    backgroundColor,
+                    borderColor,
+                    borderWidth: 1,
+                    label: undefined
+                }]
+            },
+            options: {
+                plugins: {
+                    legend: {
+                        display: !barchartMode
+                    }
+                }
+            }
+        }
+
+        const chart = new ChartJs(config).SetClass(options?.chartclasses ?? "w-32 h-32");
+
+        if (options.chartstyle !== undefined) {
+            chart.SetStyle(options.chartstyle)
+        }
+
+
+        super([
+           options?.includeTitle ?  (tagRendering.question.Clone() ?? tagRendering.id) : undefined,
+            chart])
+
+        this.SetClass("block")
+    }
+
+
+}

UI/DashboardGui.ts

@@ -0,0 +1,345 @@
+import FeaturePipelineState from "../Logic/State/FeaturePipelineState";
+import {DefaultGuiState} from "./DefaultGuiState";
+import {FixedUiElement} from "./Base/FixedUiElement";
+import {Utils} from "../Utils";
+import Combine from "./Base/Combine";
+import ShowDataLayer from "./ShowDataLayer/ShowDataLayer";
+import LayerConfig from "../Models/ThemeConfig/LayerConfig";
+import * as home_location_json from "../assets/layers/home_location/home_location.json";
+import State from "../State";
+import Title from "./Base/Title";
+import {MinimapObj} from "./Base/Minimap";
+import BaseUIElement from "./BaseUIElement";
+import {VariableUiElement} from "./Base/VariableUIElement";
+import {GeoOperations} from "../Logic/GeoOperations";
+import {BBox} from "../Logic/BBox";
+import {OsmFeature} from "../Models/OsmFeature";
+import SearchAndGo from "./BigComponents/SearchAndGo";
+import FeatureInfoBox from "./Popup/FeatureInfoBox";
+import {UIEventSource} from "../Logic/UIEventSource";
+import LanguagePicker from "./LanguagePicker";
+import Lazy from "./Base/Lazy";
+import TagRenderingAnswer from "./Popup/TagRenderingAnswer";
+import Hash from "../Logic/Web/Hash";
+import FilterView from "./BigComponents/FilterView";
+import {FilterState} from "../Models/FilteredLayer";
+import Translations from "./i18n/Translations";
+import Constants from "../Models/Constants";
+import SimpleAddUI from "./BigComponents/SimpleAddUI";
+import TagRenderingChart from "./BigComponents/TagRenderingChart";
+import Loading from "./Base/Loading";
+import BackToIndex from "./BigComponents/BackToIndex";
+import Locale from "./i18n/Locale";
+
+
+export default class DashboardGui {
+    private readonly state: FeaturePipelineState;
+    private readonly currentView: UIEventSource<{ title: string | BaseUIElement, contents: string | BaseUIElement }> = new UIEventSource(undefined)
+
+
+    constructor(state: FeaturePipelineState, guiState: DefaultGuiState) {
+        this.state = state;
+    }
+
+    private viewSelector(shown: BaseUIElement, title: string | BaseUIElement, contents: string | BaseUIElement, hash?: string): BaseUIElement {
+        const currentView = this.currentView
+        const v = {title, contents}
+        shown.SetClass("pl-1 pr-1 rounded-md")
+        shown.onClick(() => {
+            currentView.setData(v)
+        })
+        Hash.hash.addCallbackAndRunD(h => {
+            if (h === hash) {
+                currentView.setData(v)
+            }
+        })
+        currentView.addCallbackAndRunD(cv => {
+            if (cv == v) {
+                shown.SetClass("bg-unsubtle")
+                Hash.hash.setData(hash)
+            } else {
+                shown.RemoveClass("bg-unsubtle")
+            }
+        })
+        return shown;
+    }
+
+    private singleElementCache: Record<string, BaseUIElement> = {}
+
+    private singleElementView(element: OsmFeature, layer: LayerConfig, distance: number): BaseUIElement {
+        if (this.singleElementCache[element.properties.id] !== undefined) {
+            return this.singleElementCache[element.properties.id]
+        }
+        const tags = this.state.allElements.getEventSourceById(element.properties.id)
+        const title = new Combine([new Title(new TagRenderingAnswer(tags, layer.title, this.state), 4),
+            distance < 900 ? Math.floor(distance) + "m away" :
+                Utils.Round(distance / 1000) + "km away"
+        ]).SetClass("flex justify-between");
+
+        return this.singleElementCache[element.properties.id] = this.viewSelector(title,
+            new Lazy(() => FeatureInfoBox.GenerateTitleBar(tags, layer, this.state)),
+            new Lazy(() => FeatureInfoBox.GenerateContent(tags, layer, this.state)),
+            //  element.properties.id
+        );
+    }
+
+    private mainElementsView(elements: { element: OsmFeature, layer: LayerConfig, distance: number }[]): BaseUIElement {
+        const self = this
+        if (elements === undefined) {
+            return new FixedUiElement("Initializing")
+        }
+        if (elements.length == 0) {
+            return new FixedUiElement("No elements in view")
+        }
+        return new Combine(elements.map(e => self.singleElementView(e.element, e.layer, e.distance)))
+    }
+
+    private visibleElements(map: MinimapObj & BaseUIElement, layers: Record<string, LayerConfig>): { distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[] {
+        const bbox = map.bounds.data
+        if (bbox === undefined) {
+            console.warn("No bbox")
+            return undefined
+        }
+        const location = map.location.data;
+        const loc: [number, number] = [location.lon, location.lat]
+
+        const elementsWithMeta: { features: OsmFeature[], layer: string }[] = this.state.featurePipeline.GetAllFeaturesAndMetaWithin(bbox)
+
+        let elements: { distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[] = []
+        let seenElements = new Set<string>()
+        for (const elementsWithMetaElement of elementsWithMeta) {
+            const layer = layers[elementsWithMetaElement.layer]
+            if(layer.title === undefined){
+                continue
+            }
+            const filtered = this.state.filteredLayers.data.find(fl => fl.layerDef == layer);
+            for (let i = 0; i < elementsWithMetaElement.features.length; i++) {
+                const element = elementsWithMetaElement.features[i];
+                if (!filtered.isDisplayed.data) {
+                    continue
+                }
+                if (seenElements.has(element.properties.id)) {
+                    continue
+                }
+                seenElements.add(element.properties.id)
+                if (!bbox.overlapsWith(BBox.get(element))) {
+                    continue
+                }
+                if (layer?.isShown?.GetRenderValue(element)?.Subs(element.properties)?.txt === "no") {
+                    continue
+                }
+                const activeFilters: FilterState[] = Array.from(filtered.appliedFilters.data.values());
+                if (!activeFilters.every(filter => filter?.currentFilter === undefined || filter?.currentFilter?.matchesProperties(element.properties))) {
+                    continue
+                }
+                const center = GeoOperations.centerpointCoordinates(element);
+                elements.push({
+                    element,
+                    center,
+                    layer: layers[elementsWithMetaElement.layer],
+                    distance: GeoOperations.distanceBetween(loc, center)
+                })
+
+            }
+        }
+
+
+        elements.sort((e0, e1) => e0.distance - e1.distance)
+
+
+        return elements;
+    }
+
+    private documentationButtonFor(layerConfig: LayerConfig): BaseUIElement {
+        return this.viewSelector(Translations.W(layerConfig.name?.Clone() ?? layerConfig.id), new Combine(["Documentation about ", layerConfig.name?.Clone() ?? layerConfig.id]),
+            layerConfig.GenerateDocumentation([]),
+            "documentation-" + layerConfig.id)
+    }
+
+    private allDocumentationButtons(): BaseUIElement {
+        const layers = this.state.layoutToUse.layers.filter(l => Constants.priviliged_layers.indexOf(l.id) < 0)
+            .filter(l => !l.id.startsWith("note_import_"));
+
+        if (layers.length === 1) {
+            return this.documentationButtonFor(layers[0])
+        }
+        return this.viewSelector(new FixedUiElement("Documentation"), "Documentation",
+            new Combine(layers.map(l => this.documentationButtonFor(l).SetClass("flex flex-col"))))
+    }
+
+    public setup(): void {
+
+        const state = this.state;
+
+        if (this.state.layoutToUse.customCss !== undefined) {
+            if (window.location.pathname.indexOf("index") >= 0) {
+                Utils.LoadCustomCss(this.state.layoutToUse.customCss)
+            }
+        }
+        const map = this.SetupMap();
+
+        Utils.downloadJson("./service-worker-version").then(data => console.log("Service worker", data)).catch(_ => console.log("Service worker not active"))
+
+        document.getElementById("centermessage").classList.add("hidden")
+
+        const layers: Record<string, LayerConfig> = {}
+        for (const layer of state.layoutToUse.layers) {
+            layers[layer.id] = layer;
+        }
+
+        const self = this;
+        const elementsInview = new UIEventSource<{ distance: number, center: [number, number], element: OsmFeature, layer: LayerConfig }[]>([]);
+
+        function update() {
+            elementsInview.setData(self.visibleElements(map, layers))
+        }
+
+        map.bounds.addCallbackAndRun(update)
+        state.featurePipeline.newDataLoadedSignal.addCallback(update);
+        state.filteredLayers.addCallbackAndRun(fls => {
+            for (const fl of fls) {
+                fl.isDisplayed.addCallback(update)
+                fl.appliedFilters.addCallback(update)
+            }
+        })
+
+        const filterView = new Lazy(() => {
+            return new FilterView(state.filteredLayers, state.overlayToggles)
+        });
+        const welcome = new Combine([state.layoutToUse.description, state.layoutToUse.descriptionTail])
+        self.currentView.setData({title: state.layoutToUse.title, contents: welcome})
+        const filterViewIsOpened = new UIEventSource(false)
+        filterViewIsOpened.addCallback(_ => self.currentView.setData({title: "filters", contents: filterView}))
+
+        const newPointIsShown = new UIEventSource(false);
+        const addNewPoint = new SimpleAddUI(
+            new UIEventSource(true),
+            new UIEventSource(undefined),
+            filterViewIsOpened,
+            state,
+            state.locationControl
+        );
+        const addNewPointTitle = "Add a missing point"
+        this.currentView.addCallbackAndRunD(cv => {
+            newPointIsShown.setData(cv.contents === addNewPoint)
+        })
+        newPointIsShown.addCallbackAndRun(isShown => {
+            if (isShown) {
+                if (self.currentView.data.contents !== addNewPoint) {
+                    self.currentView.setData({title: addNewPointTitle, contents: addNewPoint})
+                }
+            } else {
+                if (self.currentView.data.contents === addNewPoint) {
+                    self.currentView.setData(undefined)
+                }
+            }
+        })
+
+        const statistics =
+            new VariableUiElement(elementsInview.stabilized(1000).map(features => {
+                if (features === undefined) {
+                    return new Loading("Loading data")
+                }
+                if (features.length === 0) {
+                    return "No elements in view"
+                }
+                const els = []
+                for (const layer of state.layoutToUse.layers) {
+                    if(layer.name === undefined){
+                        continue
+                    }
+                    const featuresForLayer = features.filter(f => f.layer === layer).map(f => f.element)
+                    if(featuresForLayer.length === 0){
+                        continue
+                    }
+                    els.push(new Title(layer.name))
+                    
+                    const layerStats = []
+                    for (const tagRendering of layer.tagRenderings) {
+                        const chart = new TagRenderingChart(featuresForLayer, tagRendering, {
+                            chartclasses: "w-full",
+                            chartstyle: "height: 60rem",
+                            includeTitle: true
+                        })
+                        const full = new Lazy(() => 
+                            new TagRenderingChart(featuresForLayer, tagRendering, {
+                                chartstyle: "max-height: calc(100vh - 10rem)",
+                                groupToOtherCutoff: 0
+                            })
+                        )
+                        chart.onClick(() => {
+                                const current = self.currentView.data
+                                full.onClick(() => {
+                                    self.currentView.setData(current)
+                                })
+                                self.currentView.setData(
+                                    {
+                                        title: new Title(tagRendering.question.Clone() ?? tagRendering.id),
+                                        contents: full
+                                    })
+                            }
+                        )
+                        layerStats.push(chart.SetClass("w-full lg:w-1/3"))
+                    }
+                    els.push(new Combine(layerStats).SetClass("flex flex-wrap"))
+                }
+                return new Combine(els)
+            }, [Locale.language]))
+
+
+        new Combine([
+            new Combine([
+                this.viewSelector(new Title(state.layoutToUse.title.Clone(), 2), state.layoutToUse.title.Clone(), welcome, "welcome"),
+                map.SetClass("w-full h-64 shrink-0 rounded-lg"),
+                new SearchAndGo(state),
+                this.viewSelector(new Title(
+                        new VariableUiElement(elementsInview.map(elements => "There are " + elements?.length + " elements in view"))),
+                    "Statistics",
+                    statistics, "statistics"),
+
+                this.viewSelector(new FixedUiElement("Filter"),
+                    "Filters", filterView, "filters"),
+                this.viewSelector(new Combine(["Add a missing point"]), addNewPointTitle,
+                    addNewPoint
+                ),
+
+                new VariableUiElement(elementsInview.map(elements => this.mainElementsView(elements).SetClass("block m-2")))
+                    .SetClass("block shrink-2 overflow-x-auto h-full border-2 border-subtle rounded-lg"),
+                this.allDocumentationButtons(),
+                new LanguagePicker(Object.keys(state.layoutToUse.title.translations)).SetClass("mt-2"),
+                new BackToIndex()
+            ]).SetClass("w-1/2 lg:w-1/4 m-4 flex flex-col shrink-0 grow-0"),
+            new VariableUiElement(this.currentView.map(({title, contents}) => {
+                return new Combine([
+                    new Title(Translations.W(title), 2).SetClass("shrink-0 border-b-4 border-subtle"),
+                    Translations.W(contents).SetClass("shrink-2 overflow-y-auto block")
+                ]).SetClass("flex flex-col h-full")
+            })).SetClass("w-1/2 lg:w-3/4 m-4 p-2 border-2 border-subtle rounded-xl m-4 ml-0 mr-8 shrink-0 grow-0"),
+           
+        ]).SetClass("flex h-full")
+            .AttachTo("leafletDiv")
+
+    }
+
+    private SetupMap(): MinimapObj & BaseUIElement {
+        const state = this.state;
+
+        new ShowDataLayer({
+            leafletMap: state.leafletMap,
+            layerToShow: new LayerConfig(home_location_json, "home_location", true),
+            features: state.homeLocation,
+            state
+        })
+
+        state.leafletMap.addCallbackAndRunD(_ => {
+            // Lets assume that all showDataLayers are initialized at this point
+            state.selectedElement.ping()
+            State.state.locationControl.ping();
+            return true;
+        })
+
+        return state.mainMapObject
+
+    }
+
+}

UI/DefaultGUI.ts

@@ -44,14 +44,9 @@ export default class DefaultGUI {
         }
 
     public setup(){
-        if (this.state.layoutToUse.customCss !== undefined) {
-            Utils.LoadCustomCss(this.state.layoutToUse.customCss);
-        }
-
         this.SetupUIElements();
         this.SetupMap()
 
-
         if (this.state.layoutToUse.customCss !== undefined && window.location.pathname.indexOf("index") >= 0) {
             Utils.LoadCustomCss(this.state.layoutToUse.customCss)
         }
@@ -144,7 +139,7 @@ export default class DefaultGUI {
 
         new ShowDataLayer({
             leafletMap: state.leafletMap,
-            layerToShow: new LayerConfig(home_location_json, "all_known_layers", true),
+            layerToShow: new LayerConfig(home_location_json, "home_location", true),
             features: state.homeLocation,
             state
         })

UI/Popup/FeatureInfoBox.ts

@@ -46,7 +46,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
 
     }
 
-    private static GenerateTitleBar(tags: UIEventSource<any>,
+    public static GenerateTitleBar(tags: UIEventSource<any>,
                                     layerConfig: LayerConfig,
                                     state: {}): BaseUIElement {
         const title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI"), state)
@@ -64,7 +64,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
         ])
     }
 
-    private static GenerateContent(tags: UIEventSource<any>,
+    public static GenerateContent(tags: UIEventSource<any>,
                                    layerConfig: LayerConfig,
                                    state: FeaturePipelineState): BaseUIElement {
         let questionBoxes: Map<string, QuestionBox> = new Map<string, QuestionBox>();

UI/SpecialVisualizations.ts

@@ -57,6 +57,7 @@ import {SaveButton} from "./Popup/SaveButton";
 import {MapillaryLink} from "./BigComponents/MapillaryLink";
 import {CheckBox} from "./Input/Checkboxes";
 import Slider from "./Input/Slider";
+import TagRenderingConfig from "../Models/ThemeConfig/TagRenderingConfig";
 
 export interface SpecialVisualization {
     funcName: string,
@@ -207,7 +208,7 @@ class NearbyImageVis implements SpecialVisualization {
         const nearby = new Lazy(() => {
             const towardsCenter = new CheckBox(t.onlyTowards, false)
 
-            const radiusValue = state?.osmConnection?.GetPreference("nearby-images-radius","300").sync(s => Number(s), [], i => ""+i) ?? new UIEventSource(300);
+            const radiusValue = state?.osmConnection?.GetPreference("nearby-images-radius", "300").sync(s => Number(s), [], i => "" + i) ?? new UIEventSource(300);
 
             const radius = new Slider(25, 500, {
                 value:
@@ -285,7 +286,13 @@ export default class SpecialVisualizations {
 
     public static specialVisualizations: SpecialVisualization[] = SpecialVisualizations.init()
 
-    public static DocumentationFor(viz: SpecialVisualization): BaseUIElement {
+    public static DocumentationFor(viz: string | SpecialVisualization): BaseUIElement | undefined {
+        if (typeof viz === "string") {
+            viz = SpecialVisualizations.specialVisualizations.find(sv => sv.funcName === viz)
+        }
+        if(viz === undefined){
+            return undefined;
+        }
         return new Combine(
             [
                 new Title(viz.funcName, 3),