More fixes to studio, move error message to validation step, fix #1710

src/UI/Studio/EditLayer.svelte

@@ -24,7 +24,7 @@
   export let backToStudio: () => void
   let messages = state.messages
   let hasErrors = messages.mapD(
-    (m: ConversionMessage[]) => m.filter((m) => m.level === "error").length
+    (m: ConversionMessage[]) => m.filter((m) => m.level === "error").length,
   )
   const configuration = state.configuration
 
@@ -73,6 +73,7 @@
   })
 
   let highlightedItem: UIEventSource<HighlightedTagRendering> = state.highlightedItem
+
   function deleteLayer() {
     state.delete()
     backToStudio()
@@ -93,15 +94,32 @@
     {:else if $hasErrors > 0}
       <div class="alert">{$hasErrors} errors detected</div>
     {:else}
-      <a
-        class="primary button"
-        href={baseUrl + state.server.layerUrl(title.data)}
-        target="_blank"
-        rel="noopener"
-      >
-        Try it out
-        <ChevronRightIcon class="h-6 w-6 shrink-0" />
-      </a>
+      <div class="flex">
+        <a
+          class="button small"
+          href={baseUrl + state.server.layerUrl(title.data) + "&test=true"}
+          target="_blank"
+          rel="noopener"
+        >
+          <div class="flex flex-col">
+
+            <b>
+              Test in safe mode
+            </b>
+            <div>No changes are recoded to OSM</div>
+          </div>
+          <ChevronRightIcon class="h-6 w-6 shrink-0" />
+        </a>
+        <a
+          class="primary button"
+          href={baseUrl + state.server.layerUrl(title.data)}
+          target="_blank"
+          rel="noopener"
+        >
+          Try it out
+          <ChevronRightIcon class="h-6 w-6 shrink-0" />
+        </a>
+      </div>
     {/if}
   </div>
 
@@ -120,7 +138,8 @@
           <Region {state} configs={perRegion["Basic"]} />
           <div class="mt-12">
             <button on:click={() => deleteLayer()} class="small">
-              <TrashIcon class="h-6 w-6" /> Delete this layer
+              <TrashIcon class="h-6 w-6" />
+              Delete this layer
             </button>
           </div>
         </div>

src/UI/Studio/SchemaBasedField.svelte

@@ -158,7 +158,7 @@
             }
           }
           if (schema.type === "number") {
-            if (v === "") {
+            if (v === "" || v === null || isNaN(Number(v))) {
               return undefined
             }
             return Number(v)

src/UI/StudioGUI.svelte

@@ -95,7 +95,7 @@
   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.configuration.setData(await studio.fetch(layerId.id, "layers", layerId.owner))
@@ -104,7 +104,7 @@
   }
 
   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.configuration.setData(await studio.fetch(id.id, "themes", id.owner))