AllTagsPanel Svelte component

UI/AllTagsPanel.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import ToSvelte from "./Base/ToSvelte.svelte"
+  import Table from "./Base/Table"
+  import { UIEventSource } from "../Logic/UIEventSource"
+
+  //Svelte props
+  export let tags: UIEventSource<any>
+  export let state: any
+
+  const calculatedTags = [].concat(
+    // SimpleMetaTagger.lazyTags,
+    ...(state?.layoutToUse?.layers?.map((l) => l.calculatedTags?.map((c) => c[0]) ?? []) ?? [])
+  )
+
+  const allTags = tags.map((tags) => {
+    const parts = []
+    for (const key in tags) {
+      if (!tags.hasOwnProperty(key)) {
+        continue
+      }
+      let v = tags[key]
+      if (v === "") {
+        v = "<b>empty string</b>"
+      }
+      parts.push([key, v ?? "<b>undefined</b>"])
+    }
+
+    for (const key of calculatedTags) {
+      const value = tags[key]
+      if (value === undefined) {
+        continue
+      }
+      let type = ""
+      if (typeof value !== "string") {
+        type = " <i>" + typeof value + "</i>"
+      }
+      parts.push(["<i>" + key + "</i>", value])
+    }
+
+    return parts
+  })
+
+  const tagsTable = new Table(["Key", "Value"], $allTags).SetClass("zebra-table")
+</script>
+
+<section>
+  <ToSvelte construct={tagsTable} />
+</section>
+
+<style lang="scss">
+  section {
+    @apply border border-solid border-black rounded-2xl p-4 block;
+  }
+</style>

UI/AllTagsPanel.ts

@@ -1,47 +0,0 @@
-import { VariableUiElement } from "./Base/VariableUIElement"
-import { UIEventSource } from "../Logic/UIEventSource"
-import Table from "./Base/Table"
-
-export class AllTagsPanel extends VariableUiElement {
-    constructor(tags: UIEventSource<any>, state?) {
-        const calculatedTags = [].concat(
-            // SimpleMetaTagger.lazyTags,
-            ...(state?.layoutToUse?.layers?.map((l) => l.calculatedTags?.map((c) => c[0]) ?? []) ??
-                [])
-        )
-
-        super(
-            tags.map((tags) => {
-                const parts = []
-                for (const key in tags) {
-                    if (!tags.hasOwnProperty(key)) {
-                        continue
-                    }
-                    let v = tags[key]
-                    if (v === "") {
-                        v = "<b>empty string</b>"
-                    }
-                    parts.push([key, v ?? "<b>undefined</b>"])
-                }
-
-                for (const key of calculatedTags) {
-                    const value = tags[key]
-                    if (value === undefined) {
-                        continue
-                    }
-                    let type = ""
-                    if (typeof value !== "string") {
-                        type = " <i>" + typeof value + "</i>"
-                    }
-                    parts.push(["<i>" + key + "</i>", value])
-                }
-
-                return new Table(["key", "value"], parts)
-                    .SetStyle(
-                        "border: 1px solid black; border-radius: 1em;padding:1em;display:block;"
-                    )
-                    .SetClass("zebra-table")
-            })
-        )
-    }
-}

UI/ImportFlow/MapPreview.ts

@@ -23,17 +23,22 @@ import { FlowStep } from "./FlowStep"
 import ScrollableFullScreen from "../Base/ScrollableFullScreen"
 import Title from "../Base/Title"
 import CheckBoxes from "../Input/Checkboxes"
-import { AllTagsPanel } from "../AllTagsPanel"
+import AllTagsPanel from "../AllTagsPanel.svelte"
 import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch"
 import { Feature, Point } from "geojson"
 import DivContainer from "../Base/DivContainer"
 import ShowDataLayer from "../ShowDataLayer/ShowDataLayer"
+import SvelteUIElement from "../Base/SvelteUIElement"
 
 class PreviewPanel extends ScrollableFullScreen {
     constructor(tags: UIEventSource<any>) {
         super(
             (_) => new FixedUiElement("Element to import"),
-            (_) => new Combine(["The tags are:", new AllTagsPanel(tags)]).SetClass("flex flex-col"),
+            (_) =>
+                new Combine([
+                    "The tags are:",
+                    new SvelteUIElement(AllTagsPanel, { tags }),
+                ]).SetClass("flex flex-col"),
             "element"
         )
     }

UI/SpecialVisualizations.ts

@@ -20,7 +20,7 @@ import { CloseNoteButton } from "./Popup/CloseNoteButton"
 import { NearbyImageVis } from "./Popup/NearbyImageVis"
 import { MapillaryLinkVis } from "./Popup/MapillaryLinkVis"
 import { Stores, UIEventSource } from "../Logic/UIEventSource"
-import { AllTagsPanel } from "./AllTagsPanel"
+import AllTagsPanel from "./AllTagsPanel.svelte"
 import AllImageProviders from "../Logic/ImageProviders/AllImageProviders"
 import { ImageCarousel } from "./Image/ImageCarousel"
 import { ImageUploadFlow } from "./Image/ImageUploadFlow"
@@ -53,6 +53,7 @@ import StatisticsPanel from "./BigComponents/StatisticsPanel"
 import AutoApplyButton from "./Popup/AutoApplyButton"
 import { LanguageElement } from "./Popup/LanguageElement"
 import FeatureReviews from "../Logic/Web/MangroveReviews"
+import SvelteUIElement from "./Base/SvelteUIElement"
 
 export default class SpecialVisualizations {
     public static specialVisualizations: SpecialVisualization[] = SpecialVisualizations.initList()
@@ -81,7 +82,8 @@ 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>) => new AllTagsPanel(tags, state),
+                constr: (state, tags: UIEventSource<any>) =>
+                    new SvelteUIElement(AllTagsPanel, { tags, state }),
             },
             {
                 funcName: "image_carousel",