Studio: UX improvements, fix crash

src/UI/Popup/TagRendering/Questionbox.svelte

@@ -4,7 +4,7 @@
    * 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 { UIEventSource } from "../../../Logic/UIEventSource"
+  import { ImmutableStore, Store, UIEventSource } from "../../../Logic/UIEventSource"
   import type { Feature } from "geojson"
   import type { SpecialVisualizationState } from "../../SpecialVisualization"
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
@@ -31,7 +31,7 @@
    */
   export let notForLabels: string[] | undefined = undefined
   const _notForLabels = new Set(notForLabels)
-  let showAllQuestionsAtOnce = state.userRelatedState.showAllQuestionsAtOnce
+  let showAllQuestionsAtOnce : Store<boolean>= state.userRelatedState?.showAllQuestionsAtOnce ?? new ImmutableStore(false)
 
   function allowed(labels: string[]) {
     if (onlyForLabels?.length > 0 && !labels.some((l) => _onlyForLabels.has(l))) {
@@ -42,7 +42,7 @@
     }
     return true
   }
-  const baseQuestions = (layer.tagRenderings ?? [])?.filter(
+  const baseQuestions = (layer?.tagRenderings ?? [])?.filter(
     (tr) => allowed(tr.labels) && tr.question !== undefined
   )
 

src/UI/Studio/EditLayer.svelte

@@ -19,6 +19,7 @@
   import RawEditor from "./RawEditor.svelte"
   import DeleteButton from "./DeleteButton.svelte"
   import StudioHashSetter from "./StudioHashSetter"
+  import TitledPanel from "../Base/TitledPanel.svelte"
 
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw
 
@@ -203,9 +204,11 @@
     </div>
     {#if $highlightedItem !== undefined}
       <FloatOver on:close={() => highlightedItem.setData(undefined)}>
-        <div>
+        <TitledPanel>
+          <h3 slot="title">Select a builtin question below</h3>
+
           <TagRenderingInput path={$highlightedItem.path} {state} />
-        </div>
+        </TitledPanel>
       </FloatOver>
     {/if}
   {/if}

src/UI/Studio/TagRenderingInput.svelte

@@ -29,7 +29,7 @@
   const store = state.getStoreFor(path)
   let value = store.data
   let hasSeenIntro = UIEventSource.asBoolean(
-    LocalStorageSource.Get("studio-seen-tagrendering-tutorial", "false")
+    LocalStorageSource.Get("studio-seen-tagrendering-tutorial", "false"),
   )
   onMount(() => {
     if (!hasSeenIntro.data) {
@@ -42,39 +42,50 @@
    * Should only be enabled for 'tagrenderings' in the theme, if the source is OSM
    */
   let allowQuestions: Store<boolean> = state.configuration.mapD(
-    (config) => path.at(0) === "tagRenderings" && config.source?.["geoJson"] === undefined
+    (config) => path.at(0) === "tagRenderings" && config.source?.["geoJson"] === undefined,
   )
 
+
   let mappingsBuiltin: MappingConfigJson[] = []
   let perLabel: Record<string, MappingConfigJson> = {}
-  for (const tr of questions.tagRenderings) {
-    let description = tr["description"] ?? tr["question"] ?? "No description available"
-    description = description["en"] ?? description
-    if (tr["labels"]) {
-      const labels: string[] = tr["labels"]
-      for (const label of labels) {
-        let labelMapping: MappingConfigJson = perLabel[label]
+  { // Build the list of options that one can choose for builtin questions
+    const forbidden = new Set( ["ignore_docs","all_tags"])
 
-        if (!labelMapping) {
-          labelMapping = {
-            if: "value=" + label,
-            then: {
-              en: "Builtin collection <b>" + label + "</b>:",
-            },
-          }
-          perLabel[label] = labelMapping
-          mappingsBuiltin.push(labelMapping)
-        }
-        labelMapping.then.en = labelMapping.then.en + "<div>" + description + "</div>"
+    for (const tr of questions.tagRenderings) {
+      if(forbidden.has(tr.id)){
+        continue
       }
-    }
+      let description = tr["description"] ?? tr["question"] ?? "No description available"
+      description = description["en"] ?? description
+      if (tr["labels"]) {
+        const labels: string[] = tr["labels"]
+        if(labels.some(l => forbidden.has(l))){
+          continue
+        }
+        for (const label of labels) {
+          let labelMapping: MappingConfigJson = perLabel[label]
 
-    mappingsBuiltin.push({
-      if: "value=" + tr["id"],
-      then: {
-        en: "Builtin <b>" + tr["id"] + "</b> <div class='subtle'>" + description + "</div>",
-      },
-    })
+          if (!labelMapping) {
+            labelMapping = {
+              if: "value=" + label,
+              then: {
+                en: "Builtin collection <b>" + label + "</b>:",
+              },
+            }
+            perLabel[label] = labelMapping
+            mappingsBuiltin.push(labelMapping)
+          }
+          labelMapping.then.en = labelMapping.then.en + "<div>" + description + "</div>"
+        }
+      }
+
+      mappingsBuiltin.push({
+        if: "value=" + tr["id"],
+        then: {
+          en: "Builtin <b>" + tr["id"] + "</b> <div class='subtle'>" + description + "</div>",
+        },
+      })
+    }
   }
 
   const configBuiltin = new TagRenderingConfig(<QuestionableTagRenderingConfigJson>{
@@ -118,7 +129,7 @@
 
   const freeformSchemaAll = <ConfigMeta[]>(
     questionableTagRenderingSchemaRaw.filter(
-      (schema) => schema.path.length == 2 && schema.path[0] === "freeform" && $allowQuestions
+      (schema) => schema.path.length == 2 && schema.path[0] === "freeform" && $allowQuestions,
     )
   )
   let freeformSchema = $expertMode
@@ -127,7 +138,7 @@
   const missing: string[] = questionableTagRenderingSchemaRaw
     .filter(
       (schema) =>
-        schema.path.length >= 1 && !items.has(schema.path[0]) && !ignored.has(schema.path[0])
+        schema.path.length >= 1 && !items.has(schema.path[0]) && !ignored.has(schema.path[0]),
     )
     .map((schema) => schema.path.join("."))
   console.log({ state })
@@ -135,7 +146,7 @@
 
 {#if typeof $store === "string"}
   <div class="low-interaction flex">
-    <TagRenderingEditable config={configBuiltin} selectedElement={undefined} {state} {tags} />
+    <TagRenderingEditable config={configBuiltin} selectedElement={undefined} {state} {tags} editMode={true} clss="w-full" />
     <slot name="upper-right" />
   </div>
 {:else}