Small UI tweaks for studio, improve linting and typing

src/Logic/Osm/OsmObject.ts

@@ -214,7 +214,7 @@ export class OsmNode extends OsmObject {
      * @constructor
      */
     ChangesetXML(changesetId: string, header?: string): string {
-        let tags = this.TagsXML()
+        const tags = this.TagsXML()
         return `    <node id="${this.id}" ${header ?? ""} ${
             changesetId ? ' changeset="' + changesetId + '" ' : ""
         }${this.VersionXML()} lat="${this.lat}" lon="${this.lon}">
@@ -265,7 +265,7 @@ export class OsmWay extends OsmObject {
      * obj.ChangesetXML("123").trim() // => '<way id="1234"  changeset="123"  >\n        <tag k="key" v="value"/>\n    </way>'
      */
     ChangesetXML(changesetId: string, header?: string): string {
-        let tags = this.TagsXML()
+        const tags = this.TagsXML()
         let nds = ""
         for (const node in this.nodes) {
             nds += '      <nd ref="' + this.nodes[node] + '"/>\n'
@@ -302,14 +302,14 @@ ${nds}${tags}    </way>
             latSum += node.lat
             lonSum += node.lon
         }
-        let count = this.coordinates.length
+        const count = this.coordinates.length
         this.lat = latSum / count
         this.lon = lonSum / count
         this.nodes = element.nodes
     }
 
     public asGeoJson(): Feature<Polygon | LineString> & { properties: { id: WayId } } {
-        let coordinates: [number, number][] | [number, number][][] = this.coordinates.map(
+        const coordinates: [number, number][] | [number, number][][] = this.coordinates.map(
             ([lat, lon]) => [lon, lat]
         )
         let geometry: LineString | Polygon
@@ -375,9 +375,9 @@ export class OsmRelation extends OsmObject {
                 '"/>\n'
         }
 
-        let tags = this.TagsXML()
+        const tags = this.TagsXML()
         let cs = ""
-        if (changesetId !== undefined) {
+        if (changesetId) {
             cs = `changeset="${changesetId}"`
         }
         return `    <relation id="${this.id}" ${header ?? ""} ${cs} ${this.VersionXML()}>

src/Logic/Osm/Overpass.ts

@@ -4,6 +4,8 @@ import { ImmutableStore, Store } from "../UIEventSource"
 import { BBox } from "../BBox"
 import osmtogeojson from "osmtogeojson"
 import { FeatureCollection } from "@turf/turf"
+import { Geometry } from "geojson"
+import { OsmTags } from "../../Models/OsmFeature"
 
 /**
  * Interfaces overpass to get all the latest data
@@ -33,7 +35,7 @@ export class Overpass {
         this._includeMeta = includeMeta
     }
 
-    public async queryGeoJson(bounds: BBox): Promise<[FeatureCollection, Date]> {
+    public async queryGeoJson(bounds: BBox): Promise<[FeatureCollection<Geometry, OsmTags>, Date]> {
         const bbox =
             "[bbox:" +
             bounds.getSouth() +
@@ -52,8 +54,8 @@ export class Overpass {
         return `${this._interpreterUrl}?data=${encodeURIComponent(query)}`
     }
 
-    private async ExecuteQuery(query: string): Promise<[FeatureCollection, Date]> {
-        const json = await Utils.downloadJson(this.buildUrl(query))
+    private async ExecuteQuery(query: string): Promise<[FeatureCollection<Geometry, OsmTags>, Date]> {
+        const json = await Utils.downloadJson<{elements: [], remark, osm3s: {timestamp_osm_base: string}}>(this.buildUrl(query))
 
         if (json.elements.length === 0 && json.remark !== undefined) {
             console.warn("Timeout or other runtime error while querying overpass", json.remark)

src/UI/Studio/EditLayer.svelte

@@ -17,8 +17,6 @@
   import QuestionPreview from "./QuestionPreview.svelte"
   import ShowConversionMessages from "./ShowConversionMessages.svelte"
   import RawEditor from "./RawEditor.svelte"
-  import NextButton from "../Base/NextButton.svelte"
-  import BackButton from "../Base/BackButton.svelte"
   import DeleteButton from "./DeleteButton.svelte"
   import StudioHashSetter from "./StudioHashSetter"
 
@@ -84,7 +82,7 @@
 </script>
 
 <div class="flex h-screen flex-col">
-  <div class="my-2 flex w-full justify-between">
+  <div class="my-2 flex flex-wrap w-full justify-between">
     <slot />
     {#if $title === undefined}
       <h3>Creating a new layer</h3>

src/UI/Studio/EditLayerState.ts

@@ -292,7 +292,7 @@ class ContextRewritingStep<T> extends Conversion<LayerConfigJson, T> {
                 return undefined
             }
             const newPath = [...path]
-            const idToSearch = newTagRenderings[newPath[1]].id
+            const idToSearch = newTagRenderings[newPath[1]]?.id ?? ""
             const oldIndex = originalIds.indexOf(idToSearch)
             if (oldIndex < 0) {
                 console.warn("Original ID was not found: ", idToSearch)

src/UI/StudioGUI.svelte

@@ -367,7 +367,7 @@
     {:else if state === "editing_layer"}
       <EditLayer state={editLayerState} {backToStudio}>
         <BackButton clss="small p-1" imageClass="w-8 h-8" on:click={() => backToStudio()}>
-          MapComplete Studio
+            Studio
         </BackButton>
       </EditLayer>
     {:else if state === "editing_theme"}