UX/Studio: improvements to UX, introduce 'expert' mode

src/Logic/Tags/And.ts

@@ -76,7 +76,7 @@ export class And extends TagsFilter {
         return this.and
             .map((t) => t.asHumanString(linkToWiki, shorten, properties))
             .filter((x) => x !== "")
-            .join("&")
+            .join(" &")
     }
 
     isUsableAsAnswer(): boolean {

src/Logic/Tags/Or.ts

@@ -50,7 +50,7 @@ export class Or extends TagsFilter {
     }
 
     asHumanString(linkToWiki: boolean, shorten: boolean, properties) {
-        return this.or.map((t) => t.asHumanString(linkToWiki, shorten, properties)).join("|")
+        return this.or.map((t) => t.asHumanString(linkToWiki, shorten, properties)).join(" |")
     }
 
     isUsableAsAnswer(): boolean {

src/Models/ThemeConfig/Json/LayerConfigJson.ts

@@ -80,6 +80,7 @@ export interface LayerConfigJson {
                *
                * type: nat
                * default: 30 days
+               * group: expert
                */
               maxCacheAge?: number
           }
@@ -116,6 +117,7 @@ export interface LayerConfigJson {
                * question: Is this geojson a cache of OpenStreetMap data?
                * ifunset: This is not an OpenStreetMap cache
                * iftrue: this is based on OpenStreetMap and can thus be edited
+               * group: expert
                */
               isOsmCache?: boolean
               /**

src/Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson.ts

@@ -121,7 +121,7 @@ export interface MappingConfigJson {
 
     /**
      * question: What extra tags should be added to the object if this object is chosen?
-     * type: simple_tag[]
+     * type: simple_tag
      *
      * If chosen as answer, these tags will be applied onto the object, together with the tags from the `if`
      * Not compatible with multiAnswer.
@@ -204,7 +204,7 @@ export interface QuestionableTagRenderingConfigJson extends TagRenderingConfigJs
          * ifunset: do not offer a freeform textfield as answer option
          *
          */
-        key: string
+        key?: string
 
         /**
          * question: What is the input type?
@@ -212,23 +212,26 @@ export interface QuestionableTagRenderingConfigJson extends TagRenderingConfigJs
          * See Docs/SpecialInputElements.md and UI/Input/ValidatedTextField.ts for supported values
          * ifunset: use an unconstrained <b>string</b> as input (default)
          * suggestions: return validators.AllValidators.filter(type => !type.isMeta).map((type) => ({if: "value="+type.name, then: "<b>"+type.name+"</b> "+type.explanation.split("\n")[0]}))
-         */
+         **/
         type?: string
         /**
          * question: What placeholder text should be shown in the input-element if there is no input?
          * A (translated) text that is shown (as gray text) within the textfield
          * type: translation
+         * group: expert
          */
         placeholder?: Translatable
 
         /**
          * Extra parameters to initialize the input helper arguments.
          * For semantics, see the 'SpecialInputElements.md'
+         * group: expert
          */
         helperArgs?: (string | number | boolean | any)[]
         /**
          * If a value is added with the textfield, these extra tag is addded.
          * Useful to add a 'fixme=freeform textfield used - to be checked'
+         * group: expert
          **/
         addExtraTags?: string[]
 
@@ -239,6 +242,7 @@ export interface QuestionableTagRenderingConfigJson extends TagRenderingConfigJs
          * This combines badly with special input elements, as it'll distort the layout.
          * ifunset: show the freeform input field full-width
          * iftrue: show the freeform input field as a small field within the question
+         * group: expert
          */
         inline?: boolean
 
@@ -246,12 +250,14 @@ export interface QuestionableTagRenderingConfigJson extends TagRenderingConfigJs
          * question: What value should be entered in the text field if no value is set?
          * This can help people to quickly enter the most common option
          * ifunset: do not prefill the textfield
+         * group: expert
          */
         default?: string
         /**
          * question: What values of the freeform key should be interpreted as 'unknown'?
          * For example, if a feature has `shop=yes`, the question 'what type of shop is this?' should still asked
          * ifunset: The question will be considered answered if any value is set for the key
+         * group: expert
          */
         invalidValues?: TagConfigJson
     }

src/Models/ThemeConfig/Json/TagRenderingConfigJson.ts

@@ -86,6 +86,8 @@ export interface TagRenderingConfigJson {
      *
      * question: When should this item be shown?
      * type: tag
+     * ifunset: No specific condition set; always show this tagRendering or ask the question if unkown
+     *
      * Only show this tagrendering (or ask the question) if the selected object also matches the tags specified as `condition`.
      *
      * This is useful to ask a follow-up question.
@@ -146,7 +148,7 @@ export interface TagRenderingConfigJson {
          * If this key is present in the feature, then 'render' is used to display the value.
          * If this is undefined, the rendering is _always_ shown
          */
-        key: string
+        key?: string
     }
 
     /**
@@ -174,7 +176,10 @@ export interface TagRenderingConfigJson {
         then: Translatable
         /**
          * question: What icon should be added to this mapping?
-         * An icon supporting this mapping; typically shown pretty small
+         * ifunset: Do not show an extra icon next to the render value
+         *
+         * An icon supporting this mapping; typically shown pretty small.
+         * This can be used to show a 'phone'-icon next to the phone number
          * inline: <img src='{icon}' class="w-8 h-8" /> {icon}
          * Type: icon
          */

src/UI/Popup/TagRendering/TagRenderingEditable.svelte

@@ -36,8 +36,8 @@
 
   let htmlElem: HTMLDivElement;
   $: {
-    if (editMode && htmlElem !== undefined) {
-      // EditMode switched to true, so the person wants to make a change
+    if (editMode && htmlElem !== undefined && config.IsKnown(tags)) {
+      // EditMode switched to true yet the answer is already known, so the person wants to make a change
       // Make sure that the question is in the scrollview!
 
       // Some delay is applied to give Svelte the time to render the _question_

src/UI/Studio/EditLayerState.ts

@@ -32,6 +32,8 @@ export abstract class EditJsonState<T> {
     public readonly category: "layers" | "themes"
     public readonly server: StudioServer
 
+    public readonly expertMode: UIEventSource<boolean>
+
     public readonly configuration: UIEventSource<Partial<T>> = new UIEventSource<Partial<T>>({})
     public readonly messages: Store<ConversionMessage[]>
 
@@ -44,10 +46,18 @@ export abstract class EditJsonState<T> {
     private sendingUpdates = false
     private readonly _stores = new Map<string, UIEventSource<any>>()
 
-    constructor(schema: ConfigMeta[], server: StudioServer, category: "layers" | "themes") {
+    constructor(
+        schema: ConfigMeta[],
+        server: StudioServer,
+        category: "layers" | "themes",
+        options?: {
+            expertMode?: UIEventSource<boolean>
+        }
+    ) {
         this.schema = schema
         this.server = server
         this.category = category
+        this.expertMode = options?.expertMode ?? new UIEventSource<boolean>(false)
 
         this.messages = this.setupErrorsForLayers()
 
@@ -261,8 +271,13 @@ export default class EditLayerState extends EditJsonState<LayerConfigJson> {
         },
     }
 
-    constructor(schema: ConfigMeta[], server: StudioServer, osmConnection: OsmConnection) {
-        super(schema, server, "layers")
+    constructor(
+        schema: ConfigMeta[],
+        server: StudioServer,
+        osmConnection: OsmConnection,
+        options: { expertMode: UIEventSource<boolean> }
+    ) {
+        super(schema, server, "layers", options)
         this.osmConnection = osmConnection
         this.layout = {
             getMatchingLayer: (_) => {
@@ -330,8 +345,12 @@ export default class EditLayerState extends EditJsonState<LayerConfigJson> {
 }
 
 export class EditThemeState extends EditJsonState<LayoutConfigJson> {
-    constructor(schema: ConfigMeta[], server: StudioServer) {
-        super(schema, server, "themes")
+    constructor(
+        schema: ConfigMeta[],
+        server: StudioServer,
+        options: { expertMode: UIEventSource<boolean> }
+    ) {
+        super(schema, server, "themes", options)
     }
 
     protected buildValidation(state: DesugaringContext): Conversion<LayoutConfigJson, any> {

src/UI/Studio/Region.svelte

@@ -12,6 +12,9 @@ export let title: string | undefined = undefined;
 
 export let path: (string | number)[] = [];
 
+let expertMode = state.expertMode
+let configsFiltered = $expertMode ? configs : configs.filter(schema => schema.hints?.group !== "expert")
+
 </script>
 {#if configs === undefined}
   Bug: 'Region' received 'undefined'
@@ -22,14 +25,14 @@ export let path: (string | number)[] = [];
     <h3>{title}</h3>
     <div class="pl-2 border border-black flex flex-col gap-y-1 w-full">
       <slot name="description" />
-      {#each configs as config}
+      {#each configsFiltered as config}
         <SchemaBasedInput {state} path={config.path} schema={config} />
       {/each}
     </div>
   </div>
 {:else}
   <div class="pl-2 flex flex-col gap-y-1 w-full">
-    {#each configs as config}
+    {#each configsFiltered as config}
       <SchemaBasedInput {state} path={path.concat(config.path)} schema={config} />
     {/each}
   </div>

src/UI/Studio/SchemaBasedField.svelte

@@ -17,10 +17,10 @@
   export let state: EditLayerState;
   export let path: (string | number)[] = [];
   export let schema: ConfigMeta;
-  export let startInEditModeIfUnset: boolean = !schema.hints.ifunset
+  export let startInEditModeIfUnset: boolean = schema.hints && !schema.hints.ifunset
   let value = new UIEventSource<string | any>(undefined);
 
-  const isTranslation = schema.hints.typehint === "translation" || schema.hints.typehint === "rendered" || ConfigMetaUtils.isTranslation(schema);
+  const isTranslation = schema.hints?.typehint === "translation" || schema.hints?.typehint === "rendered" || ConfigMetaUtils.isTranslation(schema);
   let type = schema.hints.typehint ?? "string";
 
   let rendervalue = (schema.hints.inline ?? schema.path.join(".")) + (isTranslation ? " <b>{translated(value)}</b>": " <b>{value}</b>");

src/UI/Studio/SchemaBasedInput.svelte

@@ -18,7 +18,7 @@
   <ArrayMultiAnswer {path} {state} {schema}/>
 {:else if schema.type === "array"}
   <SchemaBasedArray {path} {state} {schema} />
-{:else if schema.hints.types}
+{:else if schema.hints?.types}
   <SchemaBasedMultiType {path} {state} {schema} />
 {:else}
   <SchemaBasedField {path} {state} {schema} />

src/UI/Studio/SchemaBasedMultiType.svelte

@@ -14,6 +14,7 @@
   // @ts-ignore
   import nmd from "nano-markdown";
   import ShowConversionMessage from "./ShowConversionMessage.svelte";
+  import exp from "constants";
 
   /**
    * If 'types' is defined: allow the user to pick one of the types to input.
@@ -22,6 +23,7 @@
   export let state: EditLayerState;
   export let path: (string | number)[] = [];
   export let schema: ConfigMeta;
+  let expertMode = state.expertMode;
   const defaultOption = schema.hints.typesdefault ? Number(schema.hints.typesdefault) : undefined;
 
   const hasBooleanOption = (<JsonSchemaType[]>schema.type)?.findIndex(t => t["type"] === "boolean");
@@ -212,16 +214,22 @@
 
     {#if chosenOption !== undefined}
       {#each subSchemas as subschema}
-        <SchemaBasedInput {state} schema={subschema}
-                          path={[...subpath, (subschema?.path?.at(-1) ?? "???")]}></SchemaBasedInput>
+        {#if $expertMode || subschema.hints?.group !== "expert"}
+          <SchemaBasedInput {state} schema={subschema}
+                            path={[...subpath, (subschema?.path?.at(-1) ?? "???")]}></SchemaBasedInput>
+          {:else if window.location.hostname === "127.0.0.1"}
+            <span class="subtle">Omitted expert question {subschema.path.join(".")}</span>
+          
+        {/if}
       {/each}
     {:else if $messages.length > 0}
       {#each $messages as message}
-        <ShowConversionMessage {message}/>
+        <ShowConversionMessage {message} />
       {/each}
     {/if}
   {/if}
   {#if window.location.hostname === "127.0.0.1"}
-    <span class="subtle">SchemaBasedMultiType <b>{path.join(".")}</b> <span class="cursor-pointer" on:click={() => console.log(schema)}>{schema.hints.typehint}</span></span>
+    <span class="subtle">SchemaBasedMultiType <b>{path.join(".")}</b> <span class="cursor-pointer"
+                                                                            on:click={() => console.log(schema)}>{schema.hints.typehint}</span></span>
   {/if}
 </div>

src/UI/Studio/TagRenderingInput.svelte

@@ -17,46 +17,47 @@ import { TrashIcon } from "@rgossiaux/svelte-heroicons/outline";
 import questionableTagRenderingSchemaRaw from "../../assets/schemas/questionabletagrenderingconfigmeta.json";
 import SchemaBasedField from "./SchemaBasedField.svelte";
 import Region from "./Region.svelte";
+import exp from "constants";
 
 export let state: EditLayerState;
 export let schema: ConfigMeta;
 export let path: (string | number)[];
+let expertMode = state.expertMode;
 const store = state.getStoreFor(path);
-let value = store.data
-console.log(">> initial value", value, store)
+let value = store.data;
 
 /**
  * Allows the theme builder to create 'writable' themes.
  * 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))
+let allowQuestions: Store<boolean> = (state.configuration.mapD(config => path.at(0) === "tagRenderings" && config.source?.geoJson === undefined));
 
 
 let mappingsBuiltin: MappingConfigJson[] = [];
-let perLabel: Record<string, 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"]
+  if (tr["labels"]) {
+    const labels: string[] = tr["labels"];
     for (const label of labels) {
-      let labelMapping: MappingConfigJson = perLabel[label] 
-      
-      if(!labelMapping){
+      let labelMapping: MappingConfigJson = perLabel[label];
+
+      if (!labelMapping) {
         labelMapping = {
-          if: "value="+label,
+          if: "value=" + label,
           then: {
-            en: "Builtin collection <b>"+label+"</b>:"
+            en: "Builtin collection <b>" + label + "</b>:"
           }
-        }
-        perLabel[label] = labelMapping
-        mappingsBuiltin.push(labelMapping)
+        };
+        perLabel[label] = labelMapping;
+        mappingsBuiltin.push(labelMapping);
       }
-      labelMapping.then.en = labelMapping.then.en + "<div>"+description+"</div>"
+      labelMapping.then.en = labelMapping.then.en + "<div>" + description + "</div>";
     }
   }
-  
-  
+
+
   mappingsBuiltin.push({
     if: "value=" + tr["id"],
     then: {
@@ -96,10 +97,11 @@ function initMappings() {
 const items = new Set(["question", "questionHint", "multiAnswer", "freeform", "render", "condition", "metacondition", "mappings", "icon"]);
 const ignored = new Set(["labels", "description", "classes"]);
 
-const freeformSchema = <ConfigMeta[]>questionableTagRenderingSchemaRaw
+const freeformSchemaAll = <ConfigMeta[]>questionableTagRenderingSchemaRaw
   .filter(schema => schema.path.length == 2 && schema.path[0] === "freeform" && ($allowQuestions || schema.path[1] === "key"));
+let freeformSchema = $expertMode ? freeformSchemaAll : freeformSchemaAll.filter(schema => schema.hints?.group !== "expert")
 const missing: string[] = questionableTagRenderingSchemaRaw.filter(schema => schema.path.length >= 1 && !items.has(schema.path[0]) && !ignored.has(schema.path[0])).map(schema => schema.path.join("."));
-console.log({state})
+console.log({ state });
 
 </script>
 
@@ -115,7 +117,8 @@ console.log({state})
       <slot name="upper-right" />
     </div>
     {#if $allowQuestions}
-      <SchemaBasedField startInEditModeIfUnset={true} {state} path={[...path,"question"]} schema={topLevelItems["question"]} />
+      <SchemaBasedField startInEditModeIfUnset={true} {state} path={[...path,"question"]}
+                        schema={topLevelItems["question"]} />
       <SchemaBasedField {state} path={[...path,"questionHint"]} schema={topLevelItems["questionHint"]} />
     {/if}
     {#each ($mappings ?? []) as mapping, i (mapping)}
@@ -148,8 +151,9 @@ console.log({state})
     </div>
 
     <SchemaBasedField {state} path={[...path,"condition"]} schema={topLevelItems["condition"]} />
-    <SchemaBasedField {state} path={[...path,"metacondition"]} schema={topLevelItems["metacondition"]} />
-
+    {#if $expertMode}
+      <SchemaBasedField {state} path={[...path,"metacondition"]} schema={topLevelItems["metacondition"]} />
+    {/if}
     {#each missing as field}
       <SchemaBasedField {state} path={[...path,field]} schema={topLevelItems[field]} />
     {/each}

src/UI/StudioGUI.svelte

@@ -24,8 +24,10 @@
   import { QuestionMarkCircleIcon } from "@babeard/svelte-heroicons/mini";
   import type { ConfigMeta } from "./Studio/configMeta";
   import EditTheme from "./Studio/EditTheme.svelte";
-  import * as meta from "../../package.json"
-  
+  import * as meta from "../../package.json";
+  import Checkbox from "./Base/Checkbox.svelte";
+  import exp from "constants";
+
   export let studioUrl = window.location.hostname === "127.0.0.2" ? "http://127.0.0.1:1235" : "https://studio.mapcomplete.org";
 
   let osmConnection = new OsmConnection(new OsmConnection({
@@ -35,6 +37,10 @@
       "Used to complete the login"
     )
   }));
+  const expertMode = UIEventSource.asBoolean(osmConnection.GetPreference("studio-expert-mode", "false", {
+    documentation: "Indicates if more options are shown in mapcomplete studio"
+  }));
+  expertMode.addCallbackAndRunD(expert => console.log("Expert mode is", expert))
   const createdBy = osmConnection.userDetails.data.name;
   const uid = osmConnection.userDetails.map(ud => ud?.uid);
   const studio = new StudioServer(studioUrl, uid);
@@ -44,8 +50,8 @@
   let selfLayers = layers.mapD(ls => ls.filter(l => l.owner === uid.data), [uid]);
   let otherLayers = layers.mapD(ls => ls.filter(l => l.owner !== undefined && l.owner !== uid.data), [uid]);
   let officialLayers = layers.mapD(ls => ls.filter(l => l.owner === undefined), [uid]);
-  
-  
+
+
   let themes: Store<{ owner: number }[]> = layersWithErr.mapD(l => l.success?.filter(l => l.category === "themes"));
   let selfThemes = themes.mapD(ls => ls.filter(l => l.owner === uid.data), [uid]);
   let otherThemes = themes.mapD(ls => ls.filter(l => l.owner !== undefined && l.owner !== uid.data), [uid]);
@@ -54,30 +60,31 @@
   let state: undefined | "edit_layer" | "edit_theme" | "editing_layer" | "editing_theme" | "loading" = undefined;
 
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw;
-  let editLayerState = new EditLayerState(layerSchema, studio, osmConnection);
+  let editLayerState = new EditLayerState(layerSchema, studio, osmConnection, { expertMode });
 
   const layoutSchema: ConfigMeta[] = <any>layoutSchemaRaw;
-  let editThemeState = new EditThemeState(layoutSchema, studio);
+  let editThemeState = new EditThemeState(layoutSchema, studio, { expertMode });
 
   let layerId = editLayerState.configuration.map(layerConfig => layerConfig.id);
 
   let showIntro = UIEventSource.asBoolean(LocalStorageSource.Get("studio-show-intro", "true"));
-const version = meta.version
+  const version = meta.version;
+
   async function editLayer(event: Event) {
-    const layerId: {owner: number, id: string} = event.detail;
+    const layerId: { owner: number, id: string } = event.detail;
     state = "loading";
-    editLayerState.startSavingUpdates(false)
+    editLayerState.startSavingUpdates(false);
     editLayerState.configuration.setData(await studio.fetch(layerId.id, "layers", layerId.owner));
-    editLayerState.startSavingUpdates()
+    editLayerState.startSavingUpdates();
     state = "editing_layer";
   }
 
   async function editTheme(event: Event) {
-    const id : {id: string, owner: number} = event.detail;
+    const id: { id: string, owner: number } = event.detail;
     state = "loading";
-    editThemeState.startSavingUpdates(false)
+    editThemeState.startSavingUpdates(false);
     editThemeState.configuration.setData(await studio.fetch(id.id, "themes", id.owner));
-    editThemeState.startSavingUpdates()
+    editThemeState.startSavingUpdates();
     state = "editing_theme";
   }
 
@@ -102,7 +109,7 @@ const version = meta.version
       }]
     };
     editLayerState.configuration.setData(initialLayerConfig);
-    editLayerState.startSavingUpdates()
+    editLayerState.startSavingUpdates();
     state = "editing_layer";
   }
 
@@ -139,9 +146,9 @@ const version = meta.version
       </NextButton>
     </div>
     {#if state === undefined}
-      <div class="m-4">
-        <h1>MapComplete Studio</h1>
+      <div class="p-4   flex flex-col justify-between h-full">
         <div class="w-full flex flex-col">
+          <h1>MapComplete Studio</h1>
 
           <NextButton on:click={() => state = "edit_layer"}>
             Edit an existing layer
@@ -160,7 +167,11 @@ const version = meta.version
             Show the introduction again
           </NextButton>
         </div>
+        <div>
+          
+          <Checkbox selected={expertMode} >Enable more options (expert mode)</Checkbox>
         <span class="subtle">MapComplete version {version}</span>
+        </div>
       </div>
     {:else if state === "edit_layer"}
 
@@ -175,7 +186,7 @@ const version = meta.version
         <ChooseLayerToEdit {osmConnection} layerIds={$otherLayers} on:layerSelected={editLayer} />
 
         <h3>Official layers by MapComplete</h3>
-        <ChooseLayerToEdit  {osmConnection} layerIds={$officialLayers} on:layerSelected={editLayer} />
+        <ChooseLayerToEdit {osmConnection} layerIds={$officialLayers} on:layerSelected={editLayer} />
       </div>
     {:else if state === "edit_theme"}
 
@@ -202,7 +213,7 @@ const version = meta.version
         </BackButton>
       </EditLayer>
     {:else if state === "editing_theme"}
-      <EditTheme state={editThemeState} >
+      <EditTheme state={editThemeState}>
         <BackButton clss="small p-1" imageClass="w-8 h-8" on:click={() => {state =undefined}}>MapComplete Studio
         </BackButton>
       </EditTheme>
@@ -213,7 +224,7 @@ const version = meta.version
 
 {#if $showIntro}
   <FloatOver on:close={() => {showIntro.setData(false)}}>
-    <div class="flex p-4 h-full">
+    <div class="flex p-4 h-full pr-12">
       <Walkthrough pages={intro.sections} on:done={() => {showIntro.setData(false)}} />
     </div>
   </FloatOver>

src/UI/StudioGui.ts

@@ -3,7 +3,7 @@ import StudioGUI from "./StudioGUI.svelte"
 
 export default class StudioGui {
     public setup() {
-        new SvelteUIElement(StudioGUI, {}).AttachTo("main")
+        new SvelteUIElement(StudioGUI, {}).SetClass("h-full").AttachTo("main")
     }
 }
 

src/Utils.ts

@@ -1491,7 +1491,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         element.scrollIntoView({ behavior: "smooth", block: "nearest" })
     }
 
-    public static findParentWithScrolling(element: HTMLBaseElement): HTMLBaseElement {
+    private static findParentWithScrolling(element: HTMLBaseElement): HTMLBaseElement {
         // Check if the element itself has scrolling
         if (element.scrollHeight > element.clientHeight) {
             return element

src/assets/schemas/questionabletagrenderingconfigmeta.json

@@ -323,7 +323,7 @@
     ],
     "required": false,
     "hints": {
-      "typehint": "simple_tag[]",
+      "typehint": "simple_tag",
       "question": "What extra tags should be added to the object if this object is chosen?"
     },
     "type": "array",
@@ -472,7 +472,7 @@
       "freeform",
       "key"
     ],
-    "required": true,
+    "required": false,
     "hints": {
       "question": "What is the name of the attribute that should be written to?",
       "ifunset": "do not offer a freeform textfield as answer option"
@@ -579,6 +579,7 @@
     "required": false,
     "hints": {
       "typehint": "translation",
+      "group": "expert",
       "question": "What placeholder text should be shown in the input-element if there is no input?"
     },
     "type": [
@@ -597,7 +598,9 @@
       "helperArgs"
     ],
     "required": false,
-    "hints": {},
+    "hints": {
+      "group": "expert"
+    },
     "type": "array",
     "description": "Extra parameters to initialize the input helper arguments.\nFor semantics, see the 'SpecialInputElements.md'"
   },
@@ -607,7 +610,9 @@
       "addExtraTags"
     ],
     "required": false,
-    "hints": {},
+    "hints": {
+      "group": "expert"
+    },
     "type": "array",
     "description": "If a value is added with the textfield, these extra tag is addded.\nUseful to add a 'fixme=freeform textfield used - to be checked'"
   },
@@ -618,6 +623,7 @@
     ],
     "required": false,
     "hints": {
+      "group": "expert",
       "question": "Show the freeform as box within the question?",
       "iftrue": "show the freeform input field as a small field within the question",
       "ifunset": "show the freeform input field full-width"
@@ -632,6 +638,7 @@
     ],
     "required": false,
     "hints": {
+      "group": "expert",
       "question": "What value should be entered in the text field if no value is set?",
       "ifunset": "do not prefill the textfield"
     },
@@ -645,6 +652,7 @@
     ],
     "required": false,
     "hints": {
+      "group": "expert",
       "question": "What values of the freeform key should be interpreted as 'unknown'?",
       "ifunset": "The question will be considered answered if any value is set for the key"
     },
@@ -882,7 +890,8 @@
     "required": false,
     "hints": {
       "typehint": "tag",
-      "question": "When should this item be shown?"
+      "question": "When should this item be shown?",
+      "ifunset": "No specific condition set; always show this tagRendering or ask the question if unkown"
     },
     "type": [
       {

src/assets/schemas/tagrenderingconfigmeta.json

@@ -112,7 +112,8 @@
     "required": false,
     "hints": {
       "typehint": "tag",
-      "question": "When should this item be shown?"
+      "question": "When should this item be shown?",
+      "ifunset": "No specific condition set; always show this tagRendering or ask the question if unkown"
     },
     "type": [
       {
@@ -298,7 +299,7 @@
       "freeform",
       "key"
     ],
-    "required": true,
+    "required": false,
     "hints": {},
     "type": "string",
     "description": "What attribute should be filled out\nIf this key is present in the feature, then 'render' is used to display the value.\nIf this is undefined, the rendering is _always_ shown"
@@ -375,6 +376,7 @@
     "hints": {
       "typehint": "icon",
       "question": "What icon should be added to this mapping?",
+      "ifunset": "Do not show an extra icon next to the render value",
       "inline": "<img src='{icon}' class=\"w-8 h-8\" /> {icon}"
     },
     "type": [
@@ -398,7 +400,7 @@
         "type": "string"
       }
     ],
-    "description": "An icon supporting this mapping; typically shown pretty small"
+    "description": "An icon supporting this mapping; typically shown pretty small.\nThis can be used to show a 'phone'-icon next to the phone number"
   },
   {
     "path": [