Studio: more fixes

scripts/hetzner/deployHetzner.sh

@@ -11,9 +11,9 @@
 
 cp config.json config.json.bu &&
 cp ./scripts/hetzner/config.json . && # Copy the config _before_ building, as the config might contain some needed URLs
-npm run reset:layeroverview
-npm run test
+# npm run reset:layeroverview
 npm run prepare-deploy &&
+npm run test &&
 zip dist.zip -r dist/* &&
 mv config.json.bu config.json &&
 scp ./scripts/hetzner/config/* hetzner:/root/ &&

src/Models/ThemeConfig/Conversion/Conversion.ts

@@ -39,6 +39,12 @@ export class ConversionContext {
     }
 
     static print(msg: ConversionMessage) {
+        const noString = msg.context.path.filter(
+            (p) => typeof p !== "string" && typeof p !== "number"
+        )
+        if (noString.length > 0) {
+            console.warn("Non-string value in path:", ...noString)
+        }
         if (msg.level === "error") {
             console.error(
                 ConversionContext.red("ERR "),

src/UI/Studio/EditLayer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 
-  import { LayerStateSender } from "./EditLayerState";
+  import EditLayerState, { LayerStateSender } from "./EditLayerState";
   import layerSchemaRaw from "../../assets/schemas/layerconfigmeta.json";
   import Region from "./Region.svelte";
   import TabbedGroup from "../Base/TabbedGroup.svelte";
@@ -8,11 +8,13 @@
   import type { ConfigMeta } from "./configMeta";
   import { Utils } from "../../Utils";
   import type { LayerConfigJson } from "../../Models/ThemeConfig/Json/LayerConfigJson";
+  import type { ConversionMessage } from "../../Models/ThemeConfig/Conversion/Conversion";
 
   const layerSchema: ConfigMeta[] = <any>layerSchemaRaw;
 
-  export let state;
+  export let state: EditLayerState;
   const messages = state.messages;
+  const hasErrors = messages.map((m: ConversionMessage[]) => m.filter(m => m.level === "error").length);
   export let initialLayerConfig: Partial<LayerConfigJson> = {};
   state.configuration.setData(initialLayerConfig);
   const configuration = state.configuration;
@@ -37,9 +39,18 @@
   }
   const leftoverRegions: string[] = allNames.filter(r => regionBlacklist.indexOf(r) < 0 && baselayerRegions.indexOf(r) < 0);
   const title: Store<string> = state.getStoreFor(["id"]);
+  const wl = window.location
+  const baseUrl = wl.protocol+"//"+wl.host+"/theme.html?userlayout="
 </script>
 
+<div class="w-full flex justify-between">
   <h3>Editing layer {$title}</h3>
+  {#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</a>
+  {/if}
+</div>
 <div class="m4">
   <TabbedGroup tab={new UIEventSource(2)}>
     <div slot="title0">General properties</div>

src/UI/Studio/EditLayerState.ts

@@ -177,7 +177,12 @@ export default class EditLayerState {
             }
             entry = entry[breadcrumb]
         }
-        if (v !== undefined && v !== null && v !== "") {
+        if (
+            v !== undefined &&
+            v !== null &&
+            v !== "" &&
+            !(typeof v === "object" && Object.keys({}).length === 0)
+        ) {
             entry[path.at(-1)] = v
         } else if (entry) {
             delete entry[path.at(-1)]

src/UI/Studio/SchemaBasedField.svelte

@@ -16,7 +16,7 @@
     export let state: EditLayerState
     export let path: (string | number)[] = []
     export let schema: ConfigMeta
-    let value = new UIEventSource<string>(undefined)
+    let value = new UIEventSource<string | any>(undefined)
     
     const isTranslation = schema.hints.typehint === "translation" || schema.hints.typehint === "rendered" || ConfigMetaUtils.isTranslation(schema)
     let type = schema.hints.typehint ?? "string"
@@ -122,7 +122,7 @@
                 }
                 return Number(v)
             }
-            if (isTranslation) {
+            if (isTranslation && typeof v === "string") {
                 if (v === "") {
                     return {}
                 }

src/UI/Studio/StudioServer.ts

@@ -22,9 +22,7 @@ export default class StudioServer {
 
     async fetchLayer(layerId: string): Promise<LayerConfigJson> {
         try {
-            return await Utils.downloadJson(
-                this.url + "/layers/" + layerId + "/" + layerId + ".json"
-            )
+            return await Utils.downloadJson(this.layerUrl(layerId))
         } catch (e) {
             return undefined
         }
@@ -35,7 +33,7 @@ export default class StudioServer {
         if (id === undefined || id === "") {
             return
         }
-        await fetch(`${this.url}/layers/${id}/${id}.json`, {
+        await fetch(this.layerUrl(id), {
             method: "POST",
             headers: {
                 "Content-Type": "application/json;charset=utf-8",
@@ -43,4 +41,8 @@ export default class StudioServer {
             body: JSON.stringify(config, null, "  "),
         })
     }
+
+    public layerUrl(id: string) {
+        return `${this.url}/layers/${id}/${id}.json`
+    }
 }

src/UI/StudioGUI.svelte

@@ -15,10 +15,12 @@
   import { QueryParameters } from "../Logic/Web/QueryParameters";
 
   import layerSchemaRaw from "../../src/assets/schemas/layerconfigmeta.json";
+  import If from "./Base/If.svelte";
 
   export let studioUrl = /* "https://studio.mapcomplete.org"; /*/ "http://127.0.0.1:1235"; //*/
   const studio = new StudioServer(studioUrl);
-  let layers = UIEventSource.FromPromise(studio.fetchLayerOverview());
+  let layersWithErr = UIEventSource.FromPromiseWithErr(studio.fetchLayerOverview());
+  let layers = layersWithErr.mapD(l => l.success);
   let state: undefined | "edit_layer" | "new_layer" | "edit_theme" | "new_theme" | "editing_layer" | "loading" = undefined;
 
   let initialLayerConfig: { id: string };
@@ -82,7 +84,30 @@
 
 </script>
 
-<LoginToggle state={{osmConnection}} ignoreLoading={true}>
+<If condition={layersWithErr.map(d => d?.error !== undefined)}>
+  <div>
+    <div class="alert">
+      Something went wrong while contacting the MapComplete Studio Server: {$layersWithErr["error"]}
+    </div>
+    The server might be offline. Please:
+    <ul>
+
+      <li>
+        Try again in a few minutes
+      </li>
+      <li>
+        Contact <a href="https://app.element.io/#/room/#MapComplete:matrix.org">the MapComplete community via the
+        chat.</a> Someone might be able to help you
+      </li>
+      <li>
+        File <a href="https://github.com/pietervdvn/MapComplete/issues">an issue</a>
+      </li>
+      <li>
+        Contact the devs via <a href="mailto:info@posteo.net">email</a>
+      </li>
+    </ul>
+  </div>
+  <LoginToggle ignoreLoading={true} slot="else" state={{osmConnection}}>
     <div slot="not-logged-in">
       <NextButton clss="primary">
         Please log in to use MapComplete Studio
@@ -98,12 +123,14 @@
         <NextButton on:click={() => state = "new_layer"}>
           Create a new layer
         </NextButton>
+        <!--
         <NextButton on:click={() => state = "edit_theme"}>
           Edit a theme
         </NextButton>
         <NextButton on:click={() => state = "new_theme"}>
           Create a new theme
         </NextButton>
+        -->
       </div>
     {:else if state === "edit_layer"}
       <div class="flex flex-wrap">
@@ -152,3 +179,4 @@
       <EditLayer {initialLayerConfig} state={editLayerState} />
     {/if}
   </LoginToggle>
+</If>