Chore: remove all unused imports, port 'allTags' to proper svelte

assets/layers/charging_station/csvToJson.ts

@@ -1,17 +1,14 @@
-import { readFileSync, writeFileSync } from "fs";
+import { readFileSync, writeFileSync } from "fs"
-import { Utils } from "../../../src/Utils";
+import { Utils } from "../../../src/Utils"
-import ScriptUtils from "../../../scripts/ScriptUtils";
+import ScriptUtils from "../../../scripts/ScriptUtils"
-import { LayerConfigJson } from "../../../src/Models/ThemeConfig/Json/LayerConfigJson";
+import { LayerConfigJson } from "../../../src/Models/ThemeConfig/Json/LayerConfigJson"
-import FilterConfigJson from "../../../src/Models/ThemeConfig/Json/FilterConfigJson";
+import FilterConfigJson from "../../../src/Models/ThemeConfig/Json/FilterConfigJson"
-import {
+import RewritableConfigJson from "../../../src/Models/ThemeConfig/Json/RewritableConfigJson"
-    QuestionableTagRenderingConfigJson
+import { TagRenderingConfigJson } from "../../../src/Models/ThemeConfig/Json/TagRenderingConfigJson"
-} from "../../../src/Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson";
-import RewritableConfigJson from "../../../src/Models/ThemeConfig/Json/RewritableConfigJson";
-import { TagRenderingConfigJson } from "../../../src/Models/ThemeConfig/Json/TagRenderingConfigJson";
 
 
 function colonSplit(value: string): string[] {
-    return value.split(";").map(v => v.replace(/"/g, '').trim()).filter(s => s !== "");
+    return value.split(";").map(v => v.replace(/"/g, "").trim()).filter(s => s !== "")
 }
 
 function loadCsv(file): {
@@ -34,14 +31,14 @@ function loadCsv(file): {
     return Utils.NoNull(entries.map(entry => {
         const values = entry.split(",").map(str => str.trim())
         if (values[0] === undefined || values[0] === "") {
-            return undefined;
+            return undefined
         }
 
         const v = {}
         const colonSeperated = ["commonVoltages", "commonOutputs", "commonCurrents", "countryWhiteList", "countryBlackList", "associatedVehicleTypes", "neverAssociatedWith"]
         const descriptionTranslations = new Map<string, string>()
         for (let j = 0; j < header.length; j++) {
-            const key = header[j];
+            const key = header[j]
             if (key.startsWith("description")) {
                 const language = key.substring("description:".length)
                 descriptionTranslations.set(language, values[j])
@@ -54,10 +51,10 @@ function loadCsv(file): {
             }
         }
         v["description"] = descriptionTranslations
-        if(v["id"] === ""){
+        if (v["id"] === "") {
-        v["id"] = v["key"]
+            v["id"] = v["key"]
         }
-        return <any>v;
+        return <any>v
     }))
 }
 
@@ -70,9 +67,9 @@ function run(file, protojson) {
         {
             question: {
                 en: "All connectors",
-                nl: "Alle types"
+                nl: "Alle types",
-            }
+            },
-        }
+        },
     ]
 
     const entries = loadCsv(file)
@@ -82,7 +79,7 @@ function run(file, protojson) {
 
     {
         // Add the entities to the 'rewrite-able part'
-        let specificQuestions: RewritableConfigJson<TagRenderingConfigJson> = <any>proto.tagRenderings.find(tr => tr["rewrite"] !== undefined && !(tr["rewrite"]["into"]?.length > 0));
+        let specificQuestions: RewritableConfigJson<TagRenderingConfigJson> = <any>proto.tagRenderings.find(tr => tr["rewrite"] !== undefined && !(tr["rewrite"]["into"]?.length > 0))
         specificQuestions.rewrite.into = entries.map(e => [
             e.id,
             e.key,
@@ -90,24 +87,24 @@ function run(file, protojson) {
             e.image,
             e.commonVoltages,
             e.commonCurrents,
-            e.commonOutputs
+            e.commonOutputs,
-        ]);
+        ])
     }
 
     for (let i = 0; i < entries.length; i++) {
-        const e = entries[i];
+        const e = entries[i]
         const txt = {
             en: e.description.get("en"),
-            nl: e.description.get("nl")
+            nl: e.description.get("nl"),
         }
         const json = {
             if: `${e.key}=1`,
             ifnot: `${e.key}=`,
             then: txt,
-            icon:{
+            icon: {
-                path:"./assets/layers/charging_station/" + e.image,
+                path: "./assets/layers/charging_station/" + e.image,
-                class:"medium"
+                class: "medium",
-            }
+            },
         }
 
         if (e.countryWhiteList.length > 0 && e.countryBlackList.length > 0) {
@@ -116,32 +113,32 @@ function run(file, protojson) {
         if (e.countryWhiteList.length > 0) {
             // This is a 'hideInAnswer', thus _reverse_ logic!
             const countries = e.countryWhiteList.map(country => "_country!=" + country) //HideInAnswer if it is in the wrong country
-            json["hideInAnswer"] = {and: countries} // Should be and, as we want to hide if it does not match any of the countries
+            json["hideInAnswer"] = { and: countries } // Should be and, as we want to hide if it does not match any of the countries
         } else if (e.countryBlackList.length > 0) {
             const countries = e.countryBlackList.map(country => "_country=" + country) //HideInAnswer if it is in the wrong country
-            json["hideInAnswer"] = {or: countries}
+            json["hideInAnswer"] = { or: countries }
         }
 
         if (e.associatedVehicleTypes?.length > 0 && e.associatedVehicleTypes.indexOf("*") < 0 && e.neverAssociatedWith?.length > 0) {
             // This plug only occurs if some vehicle specific vehicle type is present.
             // IF all of the needed vehicle types are explicitly NO, then we hide this type as well
-            let associatedWith = {and: [].concat(...e.associatedVehicleTypes.map(neededVehicle => [neededVehicle + "=no"]))}
+            let associatedWith = { and: [].concat(...e.associatedVehicleTypes.map(neededVehicle => [neededVehicle + "=no"])) }
 
             // We also hide if:
             // - One of the neverAssociatedVehiclesTYpes is set to 'yes' AND none of the associated types are set/yes
             let neverAssociatedIsSet = {
                 and: [{
-                    or: e.neverAssociatedWith.map(vehicleType => vehicleType + "=yes")
+                    or: e.neverAssociatedWith.map(vehicleType => vehicleType + "=yes"),
                 },
-                    ...e.associatedVehicleTypes.map(associated => associated + "!=yes")
+                    ...e.associatedVehicleTypes.map(associated => associated + "!=yes"),
-                ]
+                ],
             }
 
             let conditions = [associatedWith, neverAssociatedIsSet]
             if (json["hideInAnswer"] !== undefined) {
                 conditions.push(json["hideInAnswer"])
             }
-            json["hideInAnswer"] = {or: conditions}
+            json["hideInAnswer"] = { or: conditions }
 
         }
 
@@ -151,14 +148,14 @@ function run(file, protojson) {
         // We add a second time for any amount to trigger a visualisation; but this is not an answer option
         const no_ask_json = {
             if: {
-                and:Utils.NoEmpty( [`${e.key}~*`, `${e.key}!=1`, ...e.extraVisualisationCondition.split(";")])
+                and: Utils.NoEmpty([`${e.key}~*`, `${e.key}!=1`, ...e.extraVisualisationCondition.split(";")]),
             },
             then: txt,
             hideInAnswer: true,
-            icon:{
+            icon: {
                 path: `./assets/layers/charging_station/${e.image}`,
-                class:"medium"
+                class: "medium",
-            }
+            },
         }
         overview_question_answers.push(no_ask_json)
 
@@ -168,9 +165,9 @@ function run(file, protojson) {
         filterOptions.push({
             question: {
                 en: `Has a ${descrWithImage_en} connector`,
-                nl: `Heeft een ${descrWithImage_nl}`
+                nl: `Heeft een ${descrWithImage_nl}`,
             },
-            osmTags: `${e.key}~*`
+            osmTags: `${e.key}~*`,
         })
     }
 
@@ -178,25 +175,25 @@ function run(file, protojson) {
         "id": "Available_charging_stations (generated)",
         "question": {
             "en": "Which charging connections are available here?",
-            "nl": "Welke aansluitingen zijn hier beschikbaar?"
+            "nl": "Welke aansluitingen zijn hier beschikbaar?",
         },
         "multiAnswer": true,
-        "mappings": overview_question_answers
+        "mappings": overview_question_answers,
     }
 
 
     const insertQuestionsAt = proto.tagRenderings.findIndex(tr => tr["id"] === "$$$")
     proto.tagRenderings.splice(insertQuestionsAt, 1, toggles)
 
-    if(typeof proto.filter === "string"){
+    if (typeof proto.filter === "string") {
         throw "Filters of a the protojson should be a list of FilterConfigJsons"
     }
-    proto.filter = <FilterConfigJson[]> proto.filter;
+    proto.filter = <FilterConfigJson[]>proto.filter
     proto.tagRenderings.forEach(tr => {
         if (typeof tr === "string") {
-            return;
+            return
         }
-        if(tr["rewrite"]){
+        if (tr["rewrite"]) {
             return
         }
         if (tr["id"] === undefined || typeof tr["id"] !== "string") {
@@ -207,18 +204,18 @@ function run(file, protojson) {
 
     proto.filter.push({
         id: "connection_type",
-        options: filterOptions
+        options: filterOptions,
     })
 
     const importedUnits = {}
     for (const entry of entries) {
-        importedUnits[entry.key+":voltage"] = "voltage"
+        importedUnits[entry.key + ":voltage"] = "voltage"
-        importedUnits[entry.key+":current"] = "current"
+        importedUnits[entry.key + ":current"] = "current"
-        importedUnits[entry.key+":output"] = { quantity: "power", "denominations":["mW","kW"] }
+        importedUnits[entry.key + ":output"] = { quantity: "power", "denominations": ["mW", "kW"] }
     }
 
-    const extraUnits = [importedUnits
+    const extraUnits = [importedUnits,
-    ];
+    ]
 
     if (proto["units"] == undefined) {
         proto["units"] = []
@@ -234,10 +231,10 @@ async function queryTagInfo(file, type, clean: ((s: string) => string)) {
         const result = value.data
         const counts = new Map<string, number>()
         for (const r of result) {
-            let key = r.value;
+            let key = r.value
             key = clean(key)
-            key.trim();
+            key.trim()
-            if (key.indexOf('-') >= 0) {
+            if (key.indexOf("-") >= 0) {
                 continue
             }
             if (r.fraction < 0.05) {
@@ -276,7 +273,7 @@ function mergeTranslations(origPath, newConfig: LayerConfigJson) {
         }
         const applicable = newRenderings.filter(r => r["id"] === oldRenderingName)[0]
         if (applicable === undefined) {
-            continue;
+            continue
         }
         // @ts-ignore
         Utils.Merge(oldRendering, applicable)

scripts/generateTaginfoProjectFiles.ts

@@ -5,7 +5,6 @@ import { readFileSync, writeFileSync } from "fs"
 import LayoutConfig from "../src/Models/ThemeConfig/LayoutConfig"
 import LayerConfig from "../src/Models/ThemeConfig/LayerConfig"
 import { Utils } from "../src/Utils"
-import TagRenderingConfig from "../src/Models/ThemeConfig/TagRenderingConfig"
 
 /**
  * Generates all the files in "Docs/TagInfo". These are picked up by the taginfo project, showing a link to the mapcomplete theme if the key is used

src/Logic/Web/TagInfo.ts

@@ -1,4 +1,3 @@
-import exp from "constants"
 import { Utils } from "../../Utils"
 
 export interface TagInfoStats {
@@ -16,9 +15,8 @@ export interface TagInfoStats {
 }
 
 export default class TagInfo {
-    private readonly _backend: string
-
     public static readonly global = new TagInfo()
+    private readonly _backend: string
 
     constructor(backend = "https://taginfo.openstreetmap.org/") {
         this._backend = backend

src/Models/MapProperties.ts

@@ -1,11 +1,12 @@
 import { Store, UIEventSource } from "../Logic/UIEventSource"
 import { BBox } from "../Logic/BBox"
 import { RasterLayerPolygon } from "./RasterLayers"
-import { B } from "vitest/dist/types-aac763a5"
+
 export interface KeyNavigationEvent {
     date: Date
     key: "north" | "east" | "south" | "west" | "in" | "out" | "islocked" | "locked" | "unlocked"
 }
+
 export interface MapProperties {
     readonly location: UIEventSource<{ lon: number; lat: number }>
     readonly zoom: UIEventSource<number>

src/Models/ThemeConfig/Conversion/ConversionContext.ts

@@ -1,7 +1,7 @@
 import { ConversionMessage, ConversionMsgLevel } from "./Conversion"
-import { Context } from "maplibre-gl"
 
 export class ConversionContext {
+    private static reported = false
     /**
      *  The path within the data structure where we are currently operating
      */
@@ -11,7 +11,6 @@ export class ConversionContext {
      */
     readonly operation: ReadonlyArray<string>
     readonly messages: ConversionMessage[]
-
     private _hasErrors: boolean = false
 
     private constructor(
@@ -33,7 +32,6 @@ export class ConversionContext {
             }
         }
     }
-    private static reported = false
 
     public static construct(path: (string | number)[], operation: string[]) {
         return new ConversionContext([], [...path], [...operation])
@@ -43,31 +41,6 @@ export class ConversionContext {
         return new ConversionContext([], msg ? [msg] : [], ["test"])
     }
 
-    /**
-     * Does an inline edit of the messages for which a new path is defined
-     * This is a slight hack
-     * @param rewritePath
-     */
-    public rewriteMessages(
-        rewritePath: (
-            p: ReadonlyArray<number | string>
-        ) => undefined | ReadonlyArray<number | string>
-    ): void {
-        for (let i = 0; i < this.messages.length; i++) {
-            const m = this.messages[i]
-            const newPath = rewritePath(m.context.path)
-            if (!newPath) {
-                continue
-            }
-            const rewrittenContext = new ConversionContext(
-                this.messages,
-                newPath,
-                m.context.operation
-            )
-            this.messages[i] = <ConversionMessage>{ ...m, context: rewrittenContext }
-        }
-    }
-
     static print(msg: ConversionMessage) {
         const noString = msg.context.path.filter(
             (p) => typeof p !== "string" && typeof p !== "number"
@@ -102,6 +75,31 @@ export class ConversionContext {
         return "\x1b[31m" + s + "\x1b[0m"
     }
 
+    /**
+     * Does an inline edit of the messages for which a new path is defined
+     * This is a slight hack
+     * @param rewritePath
+     */
+    public rewriteMessages(
+        rewritePath: (
+            p: ReadonlyArray<number | string>
+        ) => undefined | ReadonlyArray<number | string>
+    ): void {
+        for (let i = 0; i < this.messages.length; i++) {
+            const m = this.messages[i]
+            const newPath = rewritePath(m.context.path)
+            if (!newPath) {
+                continue
+            }
+            const rewrittenContext = new ConversionContext(
+                this.messages,
+                newPath,
+                m.context.operation
+            )
+            this.messages[i] = <ConversionMessage>{ ...m, context: rewrittenContext }
+        }
+    }
+
     public enter(key: string | number | (string | number)[]) {
         if (!Array.isArray(key)) {
             if (typeof key === "number" && key < 0) {

src/Models/ThemeConfig/Conversion/Validation.ts

@@ -832,7 +832,6 @@ class MiscTagRenderingChecks extends DesugaringStep<TagRenderingConfigJson> {
         json: TagRenderingConfigJson | QuestionableTagRenderingConfigJson,
         context: ConversionContext
     ): TagRenderingConfigJson {
-        console.log(">>> Validating TR", context.path.join("."), json)
         if (json["special"] !== undefined) {
             context.err(
                 'Detected `special` on the top level. Did you mean `{"render":{ "special": ... }}`'
@@ -1043,7 +1042,12 @@ export class PrevalidateLayer extends DesugaringStep<LayerConfigJson> {
     private readonly _studioValidations: boolean
     private readonly _validatePointRendering = new ValidatePointRendering()
 
-    constructor(path: string, isBuiltin, doesImageExist, studioValidations) {
+    constructor(
+        path: string,
+        isBuiltin: boolean,
+        doesImageExist: DoesImageExist,
+        studioValidations: boolean
+    ) {
         super("Runs various checks against common mistakes for a layer", [], "PrevalidateLayer")
         this._path = path
         this._isBuiltin = isBuiltin

src/Models/ThemeConfig/Conversion/ValidationUtils.ts

@@ -3,7 +3,6 @@ import { Utils } from "../../../Utils"
 import SpecialVisualizations from "../../../UI/SpecialVisualizations"
 import { RenderingSpecification, SpecialVisualization } from "../../../UI/SpecialVisualization"
 import { QuestionableTagRenderingConfigJson } from "../Json/QuestionableTagRenderingConfigJson"
-import { render } from "sass"
 
 export default class ValidationUtils {
     public static getAllSpecialVisualisations(

src/Models/ThemeConfig/DependencyCalculator.ts

@@ -3,7 +3,6 @@ import { ExtraFuncParams, ExtraFunctions } from "../../Logic/ExtraFunctions"
 import LayerConfig from "./LayerConfig"
 import { SpecialVisualization } from "../../UI/SpecialVisualization"
 import SpecialVisualizations from "../../UI/SpecialVisualizations"
-import { Exception } from "sass"
 
 export default class DependencyCalculator {
     public static GetTagRenderingDependencies(tr: TagRenderingConfig): string[] {

src/Models/ThemeConfig/TagRenderingConfig.ts

@@ -17,7 +17,6 @@ import {
 import { FixedUiElement } from "../../UI/Base/FixedUiElement"
 import Validators, { ValidatorType } from "../../UI/InputElement/Validators"
 import { TagRenderingConfigJson } from "./Json/TagRenderingConfigJson"
-import Constants from "../Constants"
 import { RegexTag } from "../../Logic/Tags/RegexTag"
 
 export interface Icon {}

src/Models/Unit.ts

@@ -1,6 +1,4 @@
 import BaseUIElement from "../UI/BaseUIElement"
-import { FixedUiElement } from "../UI/Base/FixedUiElement"
-import Combine from "../UI/Base/Combine"
 import { Denomination } from "./Denomination"
 import UnitConfigJson from "./ThemeConfig/Json/UnitConfigJson"
 import unit from "../../assets/layers/unit/unit.json"
@@ -198,6 +196,7 @@ export class Unit {
 
             const loaded = this.getFromLibrary(toLoad.quantity, ctx)
             const quantity = toLoad.quantity
+
             function fetchDenom(d: string): Denomination {
                 const found = loaded.denominations.find(
                     (denom) => denom.canonical.toLowerCase() === d

src/UI/AllThemesGui.svelte

@@ -19,7 +19,6 @@
   import { LayoutInformation } from "../Models/ThemeConfig/LayoutConfig"
   import * as themeOverview from "../assets/generated/theme_overview.json"
   import UnofficialThemeList from "./BigComponents/UnofficialThemeList.svelte"
-  import Eye from "@babeard/svelte-heroicons/mini/Eye"
 
   const featureSwitches = new OsmConnectionFeatureSwitches()
   const osmConnection = new OsmConnection({

src/UI/Base/LinkToWeblate.ts

@@ -1,7 +1,6 @@
 import { VariableUiElement } from "./VariableUIElement"
 import Locale from "../i18n/Locale"
 import Link from "./Link"
-import Svg from "../../Svg"
 import SvelteUIElement from "./SvelteUIElement"
 import Translate from "../../assets/svg/Translate.svelte"
 

src/UI/Base/Loading.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import ToSvelte from "./ToSvelte.svelte"
-  import Svg from "../../Svg"
   import { twMerge } from "tailwind-merge"
   import Loading from "../../assets/svg/Loading.svelte"
 
@@ -9,7 +7,7 @@
 
 <div class={twMerge("flex p-1 pl-2", cls)}>
   <div class="min-w-6 h-6 w-6 shrink-0 animate-spin self-center">
-    <Loading/>
+    <Loading />
   </div>
   <div class="ml-2">
     <slot />

src/UI/Base/SubtleButton.ts

@@ -1,5 +1,5 @@
 import BaseUIElement from "../BaseUIElement"
-import { Store, UIEventSource } from "../../Logic/UIEventSource"
+import { Store } from "../../Logic/UIEventSource"
 import { UIElement } from "../UIElement"
 import SvelteUIElement from "./SvelteUIElement"
 import SubtleLink from "./SubtleLink.svelte"

src/UI/BigComponents/IndexText.ts

@@ -1,11 +0,0 @@
-import Combine from "../Base/Combine"
-import Translations from "../i18n/Translations"
-import { FixedUiElement } from "../Base/FixedUiElement"
-
-export default class IndexText extends Combine {
-    constructor() {
-        super([])
-
-        this.SetClass("flex flex-row")
-    }
-}

src/UI/BigComponents/ReverseGeocoding.svelte

@@ -4,7 +4,6 @@
    **/
   import Motion from "../../Sensors/Motion"
   import { Geocoding } from "../../Logic/Osm/Geocoding"
-  import type { MapProperties } from "../../Models/MapProperties"
   import Hotkeys from "../Base/Hotkeys"
   import Translations from "../i18n/Translations"
   import Locale from "../i18n/Locale"
@@ -21,7 +20,7 @@
     let result = await Geocoding.reverse(
       mapProperties.location.data,
       mapProperties.zoom.data,
-      Locale.language.data
+      Locale.language.data,
     )
     let properties = result.features[0].properties
     currentLocation = properties.display_name
@@ -45,7 +44,7 @@
     () => {
       displayLocation()
     },
-    [Translations.t.hotkeyDocumentation.shakePhone]
+    [Translations.t.hotkeyDocumentation.shakePhone],
   )
 
   Motion.singleton.startListening()

src/UI/BigComponents/Summary.svelte

@@ -4,7 +4,6 @@
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
   import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte"
   import DirectionIndicator from "../Base/DirectionIndicator.svelte"
-  import ThemeViewState from "../../Models/ThemeViewState"
 
   export let state: SpecialVisualizationState
   export let feature: Feature

src/UI/Favourites/FavouriteSummary.svelte

@@ -4,7 +4,6 @@
   import type { Feature } from "geojson"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import { GeoOperations } from "../../Logic/GeoOperations"
-  import DirectionIndicator from "../Base/DirectionIndicator.svelte"
 
   export let feature: Feature
   let properties: Record<string, string> = feature.properties
@@ -52,7 +51,7 @@
       class="title-icons links-as-button flex flex-wrap items-center gap-x-0.5 self-end justify-self-end p-1 pt-0.5 sm:pt-1"
     >
       {#each favConfig.titleIcons as titleIconConfig}
-        {#if titleIconBlacklist.indexOf(titleIconConfig.id) < 0 && (titleIconConfig.condition?.matchesProperties(properties) ?? true) && (titleIconConfig.metacondition?.matchesProperties( { ...properties, ...state.userRelatedState.preferencesAsTags.data } ) ?? true) && titleIconConfig.IsKnown(properties)}
+        {#if titleIconBlacklist.indexOf(titleIconConfig.id) < 0 && (titleIconConfig.condition?.matchesProperties(properties) ?? true) && (titleIconConfig.metacondition?.matchesProperties({ ...properties, ...state.userRelatedState.preferencesAsTags.data }) ?? true) && titleIconConfig.IsKnown(properties)}
           <div class={titleIconConfig.renderIconClass ?? "flex h-8 w-8 items-center"}>
             <TagRenderingAnswer
               config={titleIconConfig}

src/UI/Favourites/Favourites.svelte

@@ -6,7 +6,7 @@
   import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { Utils } from "../../Utils"
   import { GeoOperations } from "../../Logic/GeoOperations"
-  import type { Feature, LineString, Point } from "geojson"
+  import type { Feature, Point } from "geojson"
   import LoginToggle from "../Base/LoginToggle.svelte"
   import LoginButton from "../Base/LoginButton.svelte"
 
@@ -23,7 +23,7 @@
       "mapcomplete-favourites-" + new Date().toISOString() + ".geojson",
       {
         mimetype: "application/vnd.geo+json",
-      }
+      },
     )
   }
 
@@ -34,7 +34,7 @@
       "mapcomplete-favourites-" + new Date().toISOString() + ".gpx",
       {
         mimetype: "{gpx=application/gpx+xml}",
-      }
+      },
     )
   }
 </script>

src/UI/Image/ImagePreview.svelte

@@ -6,15 +6,15 @@
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import Zoomcontrol from "../Zoomcontrol"
-  import { onDestroy, onMount } from "svelte"
+  import { onDestroy } from "svelte"
 
   export let image: ProvidedImage
   let panzoomInstance = undefined
   let panzoomEl: HTMLElement
   export let isLoaded: UIEventSource<boolean> = undefined
-  
+
   onDestroy(Zoomcontrol.createLock())
-  
+
   $: {
     if (panzoomEl) {
       panzoomInstance = panzoom(panzoomEl, {

src/UI/InputElement/Helpers/DirectionInput.svelte

@@ -4,8 +4,6 @@
   import { Map as MlMap } from "maplibre-gl"
   import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
   import MaplibreMap from "../../Map/MaplibreMap.svelte"
-  import ToSvelte from "../../Base/ToSvelte.svelte"
-  import Svg from "../../../Svg.js"
   import Direction_stroke from "../../../assets/svg/Direction_stroke.svelte"
 
   /**
@@ -28,6 +26,7 @@
   })
 
   let mainElem: HTMLElement
+
   function onPosChange(x: number, y: number) {
     const rect = mainElem.getBoundingClientRect()
     const dx = -(rect.left + rect.right) / 2 + x
@@ -64,7 +63,7 @@
   on:touchstart={(e) => onPosChange(e.touches[0].clientX, e.touches[0].clientY)}
 >
   <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
-    <MaplibreMap {map} attribution={false} />
+    <MaplibreMap attribution={false} {map} />
   </div>
 
   <div bind:this={directionElem} class="absolute top-0 left-0 h-full w-full">

src/UI/InputElement/Validators/TagValidator.ts

@@ -1,14 +1,12 @@
 import { Validator } from "../Validator"
 import { Translation } from "../../i18n/Translation"
-import Translations from "../../i18n/Translations"
-import TagKeyValidator from "./TagKeyValidator"
-import SimpleTagValidator from "./SimpleTagValidator"
 
 /**
  * Checks that the input conforms a JSON-encoded tag expression or a simpleTag`key=value`,
  */
 export default class TagValidator extends Validator {
     public readonly isMeta = true
+
     constructor() {
         super("tag", "A simple tag of the format `key=value` OR a tagExpression")
     }

src/UI/OpeningHours/NextChangeViz.svelte

@@ -10,7 +10,6 @@
   import { Utils } from "../../Utils"
   import Circle from "../../assets/svg/Circle.svelte"
   import Ring from "../../assets/svg/Ring.svelte"
-  import { twMerge } from "tailwind-merge"
 
   export let state: SpecialVisualizationState
   export let tags: Store<Record<string, string>>
@@ -21,7 +20,7 @@
     tags,
     keyToUse,
     prefix,
-    postfix
+    postfix,
   )
 
   let currentState = oh.mapD((oh) => (typeof oh === "string" ? undefined : oh.getState()))
@@ -30,12 +29,12 @@
   let nextChange = oh
     .mapD(
       (oh) => (typeof oh === "string" ? undefined : oh.getNextChange(new Date(), tomorrow)),
-      [Stores.Chronic(5 * 60 * 1000)]
+      [Stores.Chronic(5 * 60 * 1000)],
     )
     .mapD((date) => Utils.TwoDigits(date.getHours()) + ":" + Utils.TwoDigits(date.getMinutes()))
 
   let size = nextChange.map((change) =>
-    change === undefined ? "absolute h-7 w-7" : "absolute h-5 w-5 top-0 left-1/4"
+    change === undefined ? "absolute h-7 w-7" : "absolute h-5 w-5 top-0 left-1/4",
   )
 </script>
 

src/UI/PlantNet/PlantNet.svelte

@@ -10,8 +10,6 @@
   import NextButton from "../Base/NextButton.svelte"
   import WikipediaPanel from "../Wikipedia/WikipediaPanel.svelte"
   import { createEventDispatcher } from "svelte"
-  import ToSvelte from "../Base/ToSvelte.svelte"
-  import Svg from "../../Svg"
   import Plantnet_logo from "../../assets/svg/Plantnet_logo.svelte"
 
   /**
@@ -28,7 +26,7 @@
   const dispatch = createEventDispatcher<{ selected: string }>()
   let collapsedMode = true
   let options: UIEventSource<PlantNetSpeciesMatch[]> = new UIEventSource<PlantNetSpeciesMatch[]>(
-    undefined
+    undefined,
   )
 
   let error: string = undefined

src/UI/Popup/AddNewPoint/PresetList.svelte

@@ -9,9 +9,7 @@
   import { ImmutableStore } from "../../../Logic/UIEventSource"
   import { TagUtils } from "../../../Logic/Tags/TagUtils"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
-  import FromHtml from "../../Base/FromHtml.svelte"
   import NextButton from "../../Base/NextButton.svelte"
-  import { UIElement } from "../../UIElement"
   import ToSvelte from "../../Base/ToSvelte.svelte"
   import BaseUIElement from "../../BaseUIElement"
 
@@ -37,7 +35,7 @@
           "Not showing presets for layer",
           flayer.layerDef.id,
           "as not displayed and featureSwitchFilter.data is set",
-          state.featureSwitches.featureSwitchFilter.data
+          state.featureSwitches.featureSwitchFilter.data,
         )
         // ...and we cannot enable the layer control -> we skip, as these presets can never be shown anyway
         continue
@@ -66,7 +64,7 @@
         tags,
         text: Translations.t.general.add.addNew.Subs(
           { category: preset.title },
-          preset.title["context"]
+          preset.title["context"],
         ),
       }
       presets.push(simplified)

src/UI/Popup/AllTagsPanel.svelte

@@ -1,67 +1,96 @@
 <script lang="ts">
-  import ToSvelte from "../Base/ToSvelte.svelte"
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
-  import Table from "../Base/Table"
-  import { UIEventSource } from "../../Logic/UIEventSource"
   import SimpleMetaTaggers from "../../Logic/SimpleMetaTagger"
-  import { FixedUiElement } from "../Base/FixedUiElement"
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-  import { onDestroy } from "svelte"
-  import Toggle from "../Input/Toggle"
-  import Lazy from "../Base/Lazy"
-  import BaseUIElement from "../BaseUIElement"
-  import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
-  import { VariableUiElement } from "../Base/VariableUIElement"
 
-  //Svelte props
+  export let tags: UIEventSource<Record<string, any>>
-  export let tags: UIEventSource<any>
+  export let tagKeys = tags.map(tgs => Object.keys(tgs))
-  export let state: { layoutToUse: LayoutConfig } = undefined
 
-  const calculatedTags = [].concat(
+  export let layer: LayerConfig
-    ...(state?.layoutToUse?.layers?.map((l) => l.calculatedTags?.map((c) => c[0]) ?? []) ?? [])
-  )
 
-  const allTags = tags.mapD((tags) => {
+  /**
-    const parts: (string | BaseUIElement)[][] = []
+   * The names (keys) of the calculated tags. Each will normally start with an underscore (but in rare cases not)
-    for (const key in tags) {
+   */
-      let v = tags[key]
+  let calculatedTags: string[] = []
-      if (v === "") {
+  for (const [name, _, __] of layer.calculatedTags ?? []) {
-        v = "<b>empty string</b>"
+    calculatedTags.push(name)
-      }
+  }
-      parts.push([key, v ?? "<b>undefined</b>"])
+  let knownValues: Store<string[]> = tags.map(tags => Object.keys(tags))
-    }
 
-    for (const key of calculatedTags) {
+  const metaKeys: string[] = [].concat(...SimpleMetaTaggers.metatags.map(k => k.keys))
-      const value = tags[key]
+  let allCalculatedTags = new Set<string>([...calculatedTags, ...metaKeys])
-      if (value === undefined) {
-        continue
-      }
-      let type = ""
-      if (typeof value !== "string") {
-        type = " <i>" + typeof value + "</i>"
-      }
-      parts.push(["<i>" + key + "</i>", value])
-    }
 
-    for (const metatag of SimpleMetaTaggers.metatags.filter((mt) => mt.isLazy)) {
-      const title = "<i>" + metatag.keys.join(";") + "</i> (lazy)"
-      const toggleState = new UIEventSource(false)
-      const toggle: BaseUIElement = new Toggle(
-        new Lazy(() => new FixedUiElement(metatag.keys.map((key) => tags[key]).join(";"))),
-        new FixedUiElement("Evaluate").onClick(() => toggleState.setData(true)),
-        toggleState
-      )
-      parts.push([title, toggle])
-    }
-
-    return parts
-  })
-
-  const tagsTable = new VariableUiElement(
-    allTags.mapD((_allTags) =>
-      new Table(["Key", "Value"], _allTags).SetClass("zebra-table break-all")
-    )
-  )
 </script>
 
 <section>
-  <ToSvelte construct={tagsTable} />
+  <table class="zebra-table break-all">
+    <tr>
+      <th>Key</th>
+      <th>Value</th>
+    </tr>
+    <tr>
+      <th colspan="2">Normal tags</th>
+    </tr>
+    {#each $tagKeys as key}
+      {#if !allCalculatedTags.has(key)}
+        <tr>
+          <td>{key}</td>
+          <td>
+            {#if $tags[key] === undefined}
+              <i>undefined</i>
+            {:else if $tags[key] === ""}
+              <i>Empty string</i>
+            {:else}
+              {$tags[key]}
+            {/if}
+          </td>
+        </tr>
+      {/if}
+    {/each}
+    <tr>
+      <th colspan="2">Calculated tags</th>
+    </tr>
+    {#if calculatedTags.length === 0}
+      <tr>
+        <td colspan="2"><i>This layer does not use calculated tags</i></td>
+      </tr>
+    {/if}
+    {#each calculatedTags as key}
+      <tr>
+        <td>{key}</td>
+        <td>
+          {#if $tags[key] === undefined}
+            <i>undefined</i>
+          {:else if $tags[key] === ""}
+            <i>Empty string</i>
+          {:else if $tags[key] !== "string"}
+            <span class="literal-code">{$tags[key]}</span>
+            <i>{typeof $tags[key]}</i>
+          {:else}
+            {$tags[key]}
+          {/if}
+        </td>
+      </tr>
+    {/each}
+
+    <tr>
+      <th colspan="2">Metatags tags</th>
+    </tr>
+    {#each metaKeys as key}
+      <tr>
+        <td>{key}</td>
+        <td>
+          {#if $knownValues.indexOf(key) < 0 }
+            <button class="small" on:click={_ => {console.log($tags[key])}}>Evaluate</button>
+          {:else if !$tags[key] === undefined}
+            <i>Undefined</i>
+          {:else if $tags[key] === ""}
+            <i>Empty string</i>
+          {:else}
+            {$tags[key]}
+          {/if}
+        </td>
+      </tr>
+    {/each}
+  </table>
 </section>

src/UI/Popup/DeleteFlow/DeleteWizard.svelte

@@ -11,7 +11,6 @@
   import { UIEventSource } from "../../../Logic/UIEventSource"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
   import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
-  import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { TagUtils } from "../../../Logic/Tags/TagUtils"
   import OsmChangeAction from "../../../Logic/Osm/Actions/OsmChangeAction"
   import DeleteAction from "../../../Logic/Osm/Actions/DeleteAction"
@@ -66,7 +65,7 @@
           theme: state?.layout?.id ?? "unknown",
           specialMotivation: deleteReason,
         },
-        canBeDeleted.data
+        canBeDeleted.data,
       )
     } else {
       // no _delete_reason is given, which implies that this is _not_ a deletion but merely a retagging via a nonDeleteMapping

src/UI/Popup/HistogramViz.ts

@@ -2,7 +2,6 @@ import { Store, UIEventSource } from "../../Logic/UIEventSource"
 import { SpecialVisualization, SpecialVisualizationState } from "../SpecialVisualization"
 import Histogram from "../BigComponents/Histogram"
 import { Feature } from "geojson"
-import Constants from "../../Models/Constants"
 
 export class HistogramViz implements SpecialVisualization {
     funcName = "histogram"

src/UI/Popup/ImportButtons/ImportFlow.ts

@@ -6,7 +6,6 @@ import TagApplyButton from "../TagApplyButton"
 import { PointImportFlowArguments } from "./PointImportFlowState"
 import { Translation } from "../../i18n/Translation"
 import Translations from "../../i18n/Translations"
-import { OsmConnection } from "../../../Logic/Osm/OsmConnection"
 import FilteredLayer from "../../../Models/FilteredLayer"
 import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
 import { LayerConfigJson } from "../../../Models/ThemeConfig/Json/LayerConfigJson"

src/UI/Popup/MinimapViz.ts

@@ -6,7 +6,6 @@ import { MapLibreAdaptor } from "../Map/MapLibreAdaptor"
 import SvelteUIElement from "../Base/SvelteUIElement"
 import MaplibreMap from "../Map/MaplibreMap.svelte"
 import ShowDataLayer from "../Map/ShowDataLayer"
-import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
 import { GeoOperations } from "../../Logic/GeoOperations"
 import { BBox } from "../../Logic/BBox"
 
@@ -32,7 +31,7 @@ export class MinimapViz implements SpecialVisualization {
         state: SpecialVisualizationState,
         tagSource: UIEventSource<Record<string, string>>,
         args: string[],
-        feature: Feature,
+        feature: Feature
     ) {
         if (state === undefined || feature === undefined) {
             return undefined

src/UI/Popup/MoveWizardState.ts

@@ -10,7 +10,6 @@ import { Tag } from "../../Logic/Tags/Tag"
 import { SpecialVisualizationState } from "../SpecialVisualization"
 import { Feature, Point } from "geojson"
 import SvelteUIElement from "../Base/SvelteUIElement"
-import Confirm from "../../assets/svg/Confirm.svelte"
 import Relocation from "../../assets/svg/Relocation.svelte"
 import Location from "../../assets/svg/Location.svelte"
 

src/UI/Popup/Notes/CloseNoteButton.ts

@@ -1,7 +1,6 @@
 import BaseUIElement from "../../BaseUIElement"
 import Translations from "../../i18n/Translations"
 import { Utils } from "../../../Utils"
-import Svg from "../../../Svg"
 import Img from "../../Base/Img"
 import { SubtleButton } from "../../Base/SubtleButton"
 import Toggle from "../../Input/Toggle"

src/UI/Reviews/AllReviews.svelte

@@ -3,15 +3,12 @@
   import SingleReview from "./SingleReview.svelte"
   import { Utils } from "../../Utils"
   import StarsBar from "./StarsBar.svelte"
-  import ReviewForm from "./ReviewForm.svelte"
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import type { SpecialVisualizationState } from "../SpecialVisualization"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import type { Feature } from "geojson"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-  import ToSvelte from "../Base/ToSvelte.svelte"
-  import Svg from "../../Svg"
   import Mangrove_logo from "../../assets/svg/Mangrove_logo.svelte"
 
   /**

src/UI/Reviews/StarElement.svelte

@@ -3,7 +3,7 @@
   import Star from "../../assets/svg/Star.svelte"
   import Star_half from "../../assets/svg/Star_half.svelte"
   import Star_outline from "../../assets/svg/Star_outline.svelte"
-  import { ariaLabel, ariaLabelStore } from "../../Utils/ariaLabel"
+  import { ariaLabel } from "../../Utils/ariaLabel"
   import Translations from "../i18n/Translations"
 
   export let score: number

src/UI/SpecialVisualizations.ts

@@ -654,8 +654,13 @@ export default class SpecialVisualizations {
                 funcName: "all_tags",
                 docs: "Prints all key-value pairs of the object - used for debugging",
                 args: [],
-                constr: (state, tags: UIEventSource<any>) =>
+                constr: (
-                    new SvelteUIElement(AllTagsPanel, { tags, state }),
+                    state,
+                    tags: UIEventSource<Record<string, string>>,
+                    _,
+                    __,
+                    layer: LayerConfig
+                ) => new SvelteUIElement(AllTagsPanel, { tags, layer }),
             },
             {
                 funcName: "image_carousel",

src/UI/Studio/MappingInput.svelte

@@ -9,8 +9,6 @@
   import type { ConfigMeta } from "./configMeta"
   import configs from "../../assets/schemas/questionabletagrenderingconfigmeta.json"
   import { Utils } from "../../Utils"
-  import ToSvelte from "../Base/ToSvelte.svelte"
-  import { VariableUiElement } from "../Base/VariableUIElement"
   import { ExclamationTriangle } from "@babeard/svelte-heroicons/solid/ExclamationTriangle"
 
   export let state: EditLayerState
@@ -32,7 +30,7 @@
 
   let thenText: UIEventSource<Record<string, string>> = state.getStoreFor([...path, "then"])
   let thenTextEn = thenText.mapD((translation) =>
-    typeof translation === "string" ? translation : translation["en"]
+    typeof translation === "string" ? translation : translation["en"],
   )
   let editMode = Object.keys($thenText ?? {})?.length === 0
 
@@ -74,7 +72,7 @@
     <FromHtml src={$parsedTag?.asHumanString(false, false, $exampleTags)} />
     {#if $messages.length > 0}
       <div class="alert m-2 flex">
-        <ExclamationTriangle class="w-6 h-6"/>
+        <ExclamationTriangle class="w-6 h-6" />
         {$messages.length} errors
       </div>
     {/if}

src/UI/Studio/TagRenderingFreeformInput.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import SchemaBasedInput from "./SchemaBasedInput.svelte"
   import EditLayerState from "./EditLayerState"
   import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
 

src/UI/Zoomcontrol.ts

@@ -1,4 +1,4 @@
-import { Stores, UIEventSource } from "../Logic/UIEventSource"
+import { UIEventSource } from "../Logic/UIEventSource"
 import { Utils } from "../Utils"
 
 /**
@@ -31,6 +31,14 @@ export default class Zoomcontrol {
         })
     }
 
+    public static createLock(): () => void {
+        return Zoomcontrol.singleton._createLock()
+    }
+
+    public static resetzoom() {
+        this.singleton._resetZoom()
+    }
+
     private _resetZoom() {
         this.apply(Zoomcontrol.noZoom)
         requestAnimationFrame(() => {
@@ -43,10 +51,6 @@ export default class Zoomcontrol {
         this.viewportElement?.setAttribute("content", fullSpec)
     }
 
-    public static createLock(): () => void {
-        return Zoomcontrol.singleton._createLock()
-    }
-
     private allowZoomIfUnlocked() {
         if (this._lockTokens.size > 0) {
             return
@@ -64,8 +68,4 @@ export default class Zoomcontrol {
             this.allowZoomIfUnlocked()
         }
     }
-
-    public static resetzoom() {
-        this.singleton._resetZoom()
-    }
 }