NSI: add script to download logos and statistics, dynamically inject extra mappings, hide low-priority mappings if applicable

src/UI/Base/Markdown.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { Store } from "../../Logic/UIEventSource"
   import { marked } from "marked"
-  export let src: string
-  export let srcWritable: UIEventSource<string> = undefined
+
+  export let src: string = undefined
+  export let srcWritable: Store<string> = undefined
   srcWritable?.addCallbackAndRunD(t => {
     src = t
   })

src/UI/BigComponents/SelectedElementView.svelte

@@ -11,6 +11,7 @@
   import UserRelatedState from "../../Logic/State/UserRelatedState"
   import Delete_icon from "../../assets/svg/Delete_icon.svelte"
   import BackButton from "../Base/BackButton.svelte"
+  import TagRenderingEditableDynamic from "../Popup/TagRendering/TagRenderingEditableDynamic.svelte"
 
   export let state: SpecialVisualizationState
   export let selectedElement: Feature
@@ -68,7 +69,7 @@
     tabindex="-1"
   >
     {#each $knownTagRenderings as config (config.id)}
-      <TagRenderingEditable
+      <TagRenderingEditableDynamic
         {tags}
         {config}
         {state}

src/UI/InputElement/InputHelper.svelte

@@ -19,7 +19,6 @@
   import OpeningHoursInput from "./Helpers/OpeningHoursInput.svelte"
   import SlopeInput from "./Helpers/SlopeInput.svelte"
   import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import NameSuggestionIndexInput from "./Helpers/NameSuggestionIndexInput.svelte"
 
   export let type: ValidatorType
   export let value: UIEventSource<string | object>
@@ -54,6 +53,4 @@
   <SlopeInput {value} {feature} {state} />
 {:else if type === "wikidata"}
   <ToSvelte construct={() => InputHelpers.constructWikidataHelper(value, properties)} />
-{:else if type === "nsi"}
-  <NameSuggestionIndexInput {value} {feature} {helperArgs} {key} {extraTags} />
 {/if}

src/UI/Popup/TagRendering/Questionbox.svelte

@@ -3,7 +3,7 @@
    * Shows all questions for which the answers are unknown.
    * The questions can either be shown all at once or one at a time (in which case they can be skipped)
    */
-  import TagRenderingConfig from "../../../Models/ThemeConfig/TagRenderingConfig"
+  import TagRenderingConfig, { TagRenderingConfigUtils } from "../../../Models/ThemeConfig/TagRenderingConfig"
   import { Store, UIEventSource } from "../../../Logic/UIEventSource"
   import type { Feature } from "geojson"
   import type { SpecialVisualizationState } from "../../SpecialVisualization"
@@ -13,6 +13,7 @@
   import Translations from "../../i18n/Translations.js"
   import { Utils } from "../../../Utils"
   import { onDestroy } from "svelte"
+  import TagRenderingQuestionDynamic from "./TagRenderingQuestionDynamic.svelte"
 
   export let layer: LayerConfig
   export let tags: UIEventSource<Record<string, string>>
@@ -93,7 +94,7 @@
   let skipped: number = 0
 
   function skip(question: { id: string }, didAnswer: boolean = false) {
-    skippedQuestions.data.add(question.id)
+    skippedQuestions.data.add(question.id) // Must use ID, the config object might be a copy of the original
     skippedQuestions.ping()
     if (didAnswer) {
       answered++
@@ -161,11 +162,11 @@
       {#if $showAllQuestionsAtOnce}
         <div class="flex flex-col gap-y-1">
           {#each $allQuestionsToAsk as question (question.id)}
-            <TagRenderingQuestion config={question} {tags} {selectedElement} {state} {layer} />
+            <TagRenderingQuestionDynamic config={question} {tags} {selectedElement} {state} {layer} />
           {/each}
         </div>
       {:else if $firstQuestion !== undefined}
-        <TagRenderingQuestion
+        <TagRenderingQuestionDynamic
           config={$firstQuestion}
           {layer}
           {selectedElement}
@@ -184,7 +185,7 @@
           >
             <Tr t={Translations.t.general.skip} />
           </button>
-        </TagRenderingQuestion>
+        </TagRenderingQuestionDynamic>
       {/if}
     </div>
   {/if}

src/UI/Popup/TagRendering/TagRenderingEditableDynamic.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">/**
+ * Wrapper around 'tagRenderingEditable' but might add mappings dynamically
+ */
+import TagRenderingConfig, { TagRenderingConfigUtils } from "../../../Models/ThemeConfig/TagRenderingConfig"
+import { UIEventSource } from "../../../Logic/UIEventSource"
+import type { Feature } from "geojson"
+import type { SpecialVisualizationState } from "../../SpecialVisualization"
+import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
+import TagRenderingEditable from "./TagRenderingEditable.svelte"
+
+export let config: TagRenderingConfig
+export let tags: UIEventSource<Record<string, string>>
+export let selectedElement: Feature | undefined
+export let state: SpecialVisualizationState
+export let layer: LayerConfig = undefined
+
+
+export let highlightedRendering: UIEventSource<string> = undefined
+export let clss = undefined
+
+let dynamicConfig = TagRenderingConfigUtils.withNameSuggestionIndex(config, tags, selectedElement)
+</script>
+
+<TagRenderingEditable
+  {tags}
+  config={$dynamicConfig}
+  {state}
+  {selectedElement}
+  {layer}
+  {highlightedRendering}
+  {clss}
+/>

src/UI/Popup/TagRendering/TagRenderingMappingInput.svelte

@@ -28,11 +28,11 @@
   export let mappingIsSelected: boolean
 
   /**
-   * If there are many mappings, we might hide it.
+   * If there are many mappings, we might hide it, e.g. because of search.
    * This is the searchterm where it might hide
    */
   export let searchTerm: undefined | UIEventSource<string>
-
+  export let hideUnlessSearched = false
   $: {
     if (selectedElement !== undefined || mapping !== undefined) {
       searchTerm.setData(undefined)
@@ -42,17 +42,21 @@
   let matchesTerm: Store<boolean> | undefined =
     searchTerm?.map(
       (search) => {
+        search = search?.trim()
         if (!search) {
+          if(hideUnlessSearched){
+            if (mapping.priorityIf?.matchesProperties(tags.data)) {
+              return true
+            }
+            return false
+          }
           return true
         }
         if (mappingIsSelected) {
           return true
         }
-        search = search.toLowerCase()
         // There is a searchterm - this might hide the mapping
-        if (mapping.priorityIf?.matchesProperties(tags.data)) {
-          return true
-        }
+        search = search.toLowerCase()
         if (mapping.then.txt.toLowerCase().indexOf(search) >= 0) {
           return true
         }

src/UI/Popup/TagRendering/TagRenderingQuestion.svelte

@@ -293,6 +293,7 @@
   let showTags = state?.userRelatedState?.showTags ?? new ImmutableStore(undefined)
   let numberOfCs = state?.osmConnection?.userDetails?.data?.csCount ?? 0
   let question = config.question
+  let hideMappingsUnlessSearchedFor = config.mappings.length > 8 && config.mappings.some(m => m.priorityIf)
   $: question = config.question
   if (state?.osmConnection) {
     onDestroy(
@@ -335,7 +336,7 @@
           {/if}
         </legend>
 
-        {#if config.mappings?.length >= 8}
+        {#if config.mappings?.length >= 8 || hideMappingsUnlessSearchedFor}
           <div class="sticky flex w-full" aria-hidden="true">
             <Search class="h-6 w-6" />
             <input
@@ -345,8 +346,15 @@
               use:placeholder={Translations.t.general.searchAnswer}
             />
           </div>
+          {#if hideMappingsUnlessSearchedFor}
+            <div class="rounded border border-black border-dashed p-1 px-2 m-1">
+              <Tr t={Translations.t.general.mappingsAreHidden}/>
+            </div>
+          {/if}
         {/if}
 
+
+
         {#if config.freeform?.key && !(mappings?.length > 0)}
           <!-- There are no options to choose from, simply show the input element: fill out the text field -->
           <FreeformInput
@@ -373,6 +381,7 @@
                 {selectedElement}
                 {layer}
                 {searchTerm}
+                hideUnlessSearched={hideMappingsUnlessSearchedFor}
                 mappingIsSelected={selectedMapping === i}
               >
                 <input
@@ -420,6 +429,7 @@
                 {selectedElement}
                 {layer}
                 {searchTerm}
+                hideUnlessSearched={hideMappingsUnlessSearchedFor}
                 mappingIsSelected={checkedMappings[i]}
               >
                 <input

src/UI/Popup/TagRendering/TagRenderingQuestionDynamic.svelte

@@ -6,27 +6,31 @@ import { UIEventSource } from "../../../Logic/UIEventSource"
 import type { Feature } from "geojson"
 import type { SpecialVisualizationState } from "../../SpecialVisualization"
 import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
-import TagRenderingEditable from "./TagRenderingEditable.svelte"
+import TagRenderingQuestion from "./TagRenderingQuestion.svelte"
+import type { UploadableTag } from "../../../Logic/Tags/TagUtils"
 
 export let config: TagRenderingConfig
 export let tags: UIEventSource<Record<string, string>>
-export let selectedElement: Feature | undefined
+
+export let selectedElement: Feature
 export let state: SpecialVisualizationState
-export let layer: LayerConfig = undefined
+export let layer: LayerConfig | undefined
+export let selectedTags: UploadableTag = undefined
+export let extraTags: UIEventSource<Record<string, string>> = new UIEventSource({})
 
+export let allowDeleteOfFreeform: boolean = false
 
-export let highlightedRendering: UIEventSource<string> = undefined
-export let clss = undefined
 
 let dynamicConfig = TagRenderingConfigUtils.withNameSuggestionIndex(config, tags, selectedElement)
 </script>
 
-<TagRenderingEditable
+<TagRenderingQuestion
   {tags}
   config={$dynamicConfig}
   {state}
   {selectedElement}
   {layer}
-  {highlightedRendering}
-  {clss}
+  {selectedTags}
+  {allowDeleteOfFreeform}
+  {extraTags}
 />