More refactoring

UI/Popup/HistogramViz.ts

@@ -1,12 +1,13 @@
 import { Store, UIEventSource } from "../../Logic/UIEventSource"
 import { SpecialVisualization, SpecialVisualizationState } from "../SpecialVisualization"
 import Histogram from "../BigComponents/Histogram"
+import { Feature } from "geojson"
 
 export class HistogramViz implements SpecialVisualization {
     funcName = "histogram"
     docs = "Create a histogram for a list of given values, read from the properties."
     example =
-        "`{histogram('some_key')}` with properties being `{some_key: ['a','b','a','c']} to create a histogram"
+        '`{histogram(\'some_key\')}` with properties being `{some_key: ["a","b","a","c"]} to create a histogram'
     args = [
         {
             name: "key",
@@ -29,6 +30,22 @@ export class HistogramViz implements SpecialVisualization {
         },
     ]
 
+    structuredExamples(): { feature: Feature; args: string[] }[] {
+        return [
+            {
+                feature: <Feature>{
+                    type: "Feature",
+                    properties: { values: `["a","b","a","b","b","b","c","c","c","d","d"]` },
+                    geometry: {
+                        type: "Point",
+                        coordinates: [0, 0],
+                    },
+                },
+                args: ["values"],
+            },
+        ]
+    }
+
     constr(
         state: SpecialVisualizationState,
         tagSource: UIEventSource<Record<string, string>>,

UI/Popup/MinimapViz.ts

@@ -5,10 +5,7 @@ import { Feature } from "geojson"
 import { MapLibreAdaptor } from "../Map/MapLibreAdaptor"
 import SvelteUIElement from "../Base/SvelteUIElement"
 import MaplibreMap from "../Map/MaplibreMap.svelte"
-import PerLayerFeatureSourceSplitter from "../../Logic/FeatureSource/PerLayerFeatureSourceSplitter"
-import FilteredLayer from "../../Models/FilteredLayer"
 import ShowDataLayer from "../Map/ShowDataLayer"
-import { stat } from "fs"
 
 export class MinimapViz implements SpecialVisualization {
     funcName = "minimap"

UI/Popup/MoveWizard.ts

@@ -54,11 +54,6 @@ export default class MoveWizard extends Toggle {
         options: MoveConfig
     ) {
         const t = Translations.t.move
-        const loginButton = new Toggle(
-            t.loginToMove.SetClass("btn").onClick(() => state.osmConnection.AttemptLogin()),
-            undefined,
-            state.featureSwitchUserbadge
-        )
 
         const reasons: MoveReason[] = []
         if (options.enableRelocation) {

UI/Popup/SpecialTranslation.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Translation } from "../i18n/Translation";
+  import SpecialVisualizations from "../SpecialVisualizations";
+  import { onDestroy } from "svelte";
+  import Locale from "../i18n/Locale";
+  import type { RenderingSpecification, SpecialVisualizationState } from "../SpecialVisualization";
+  import { Utils } from "../../Utils.js";
+  import type { Feature } from "geojson";
+  import { UIEventSource } from "../../Logic/UIEventSource.js";
+  import ToSvelte from "../Base/ToSvelte.svelte";
+  import FromHtml from "../Base/FromHtml.svelte";
+
+  /**
+   * The 'specialTranslation' renders a `Translation`-object, but interprets the special values as well
+   */
+  export let t: Translation;
+  export let state: SpecialVisualizationState;
+  export let tags: UIEventSource<Record<string, string>>;
+  export let feature: Feature;
+  let txt: string;
+  onDestroy(Locale.language.addCallbackAndRunD(l => {
+    txt = t.textFor(l);
+  }));
+  let specs: RenderingSpecification[];
+  specs = SpecialVisualizations.constructSpecification(txt);
+</script>
+
+{#each specs as specpart}
+  {#if typeof specpart === "string"}
+   <FromHtml src= {Utils.SubstituteKeys(specpart, $tags)}></FromHtml>
+  {:else if $tags !== undefined }
+    <ToSvelte construct={specpart.func.constr(state, tags, specpart.args, feature)}></ToSvelte>
+  {/if}
+{/each}

UI/Popup/TagRenderingAnswer.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig";
+  import { Utils } from "../../Utils";
+  import { Translation } from "../i18n/Translation";
+  import TagRenderingMapping from "./TagRenderingMapping.svelte";
+  import type { SpecialVisualizationState } from "../SpecialVisualization";
+  import type { Feature } from "geojson";
+  import { UIEventSource } from "../../Logic/UIEventSource";
+  import { onDestroy } from "svelte";
+
+  export let tags: UIEventSource<Record<string, string> | undefined>;
+  let _tags : Record<string, string>
+  onDestroy(tags.addCallbackAndRun(tags => {
+    _tags = tags
+  }))
+  export let state: SpecialVisualizationState
+  export let selectedElement: Feature
+  export let config: TagRenderingConfig;
+  let trs: { then: Translation; icon?: string; iconClass?: string }[];
+  $: trs = Utils.NoNull(config?.GetRenderValues(_tags));
+</script>
+
+{#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties(tags))}
+  <div>
+    {#if trs.length === 1}
+      <TagRenderingMapping mapping={trs[0]} {tags} {state} feature={selectedElement}></TagRenderingMapping>
+    {/if}
+    {#if trs.length > 1}
+      {#each trs as mapping}
+        <TagRenderingMapping mapping={trs} {tags} {state} feature=""{selectedElement}></TagRenderingMapping>
+      {/each}
+    {/if}
+  </div>
+{/if}

UI/Popup/TagRenderingAnswer.ts

@@ -6,7 +6,7 @@ import { SubstitutedTranslation } from "../SubstitutedTranslation"
 import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
 import Combine from "../Base/Combine"
 import Img from "../Base/Img"
-import { SpecialVisualisationState } from "../SpecialVisualization"
+import { SpecialVisualizationState } from "../SpecialVisualization"
 
 /***
  * Displays the correct value for a known tagrendering
@@ -15,7 +15,7 @@ export default class TagRenderingAnswer extends VariableUiElement {
     constructor(
         tagsSource: UIEventSource<any>,
         configuration: TagRenderingConfig,
-        state: SpecialVisualisationState,
+        state: SpecialVisualizationState,
         contentClasses: string = "",
         contentStyle: string = "",
         options?: {

UI/Popup/TagRenderingMapping.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { Translation } from "../i18n/Translation";
+  import SpecialTranslation from "./SpecialTranslation.svelte";
+  import type { SpecialVisualizationState } from "../SpecialVisualization";
+  import type { Feature } from "geojson";
+  import { UIEventSource } from "../../Logic/UIEventSource";
+
+  export let selectedElement: Feature
+  export let tags: UIEventSource<Record<string, string>>;
+  export let state: SpecialVisualizationState
+  export let mapping: {
+    then: Translation; icon?: string; iconClass?: | "small"
+      | "medium"
+      | "large"
+      | "small-height"
+      | "medium-height"
+      | "large-height"
+  };
+  let iconclass = "mapping-icon-" + mapping.iconClass;
+
+
+</script>
+
+{#if mapping.icon !== undefined}
+  <div class="flex">
+    <img class={iconclass+" mr-1"} src={mapping.icon}>
+    <SpecialTranslation t={mapping.then} {tags} {state} feature={selectedElement}></SpecialTranslation>
+  </div>
+{:else if mapping.then !== undefined}
+  <SpecialTranslation t={mapping.then} {tags} {state} feature={selectedElement}></SpecialTranslation>
+{/if}
+

UI/Popup/TagRenderingQuestion.ts

@@ -1,7 +1,6 @@
 import { Store, Stores, UIEventSource } from "../../Logic/UIEventSource"
 import Combine from "../Base/Combine"
 import { InputElement, ReadonlyInputElement } from "../Input/InputElement"
-import ValidatedTextField from "../Input/ValidatedTextField"
 import { FixedInputElement } from "../Input/FixedInputElement"
 import { RadioButton } from "../Input/RadioButton"
 import { Utils } from "../../Utils"