Refactoring(layout): move infobox to right modal; fix minimap

UI/Base/FloatOver.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div class="absolute top-0 right-0 w-screen h-screen overflow-auto" style="background-color: #00000088">
-  <div class="flex flex-col m-4 sm:m-6 md:m-8 p-4 sm:p-6 md:m-8 normal-background rounded normal-background">
+  <div class="flex flex-col m-4 sm:m-6 p-4 sm:p-6 md:m-8 rounded normal-background">
     <slot name="close-button">
       <div class="w-8 h-8 absolute right-10 top-10 cursor-pointer" on:click={() => dispatch("close")}>
         <XCircleIcon />

UI/Base/ModalRight.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid";
+
+  /**
+   * The slotted element will be shown on the right side
+   */
+  const dispatch = createEventDispatcher<{ close }>();
+</script>
+
+<div class="absolute top-0 right-0 h-screen overflow-auto w-full md:w-6/12 lg:w-5/12 xl:w-4/12">
+  <div class="flex flex-col m-0 p-4 sm:p-6 normal-background normal-background">
+    <slot name="close-button">
+      <div class="w-8 h-8 absolute right-10 top-10 cursor-pointer" on:click={() => dispatch("close")}>
+        <XCircleIcon />
+      </div>
+    </slot>
+    <slot></slot>
+  </div>
+</div>

UI/Popup/MinimapViz.ts

@@ -6,6 +6,9 @@ import { MapLibreAdaptor } from "../Map/MapLibreAdaptor"
 import SvelteUIElement from "../Base/SvelteUIElement"
 import MaplibreMap from "../Map/MaplibreMap.svelte"
 import ShowDataLayer from "../Map/ShowDataLayer"
+import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+import { GeoOperations } from "../../Logic/GeoOperations"
+import { BBox } from "../../Logic/BBox"
 
 export class MinimapViz implements SpecialVisualization {
     funcName = "minimap"
@@ -27,7 +30,9 @@ export class MinimapViz implements SpecialVisualization {
     constr(
         state: SpecialVisualizationState,
         tagSource: UIEventSource<Record<string, string>>,
-        args: string[]
+        args: string[],
+        feature: Feature,
+        layer: LayerConfig
     ) {
         if (state === undefined) {
             return undefined
@@ -77,6 +82,12 @@ export class MinimapViz implements SpecialVisualization {
                 zoom = parsed
             }
         }
+        featuresToShow.addCallbackAndRunD((features) => {
+            const bboxGeojson = GeoOperations.bbox({ features, type: "FeatureCollection" })
+            const [lon, lat] = GeoOperations.centerpointCoordinates(bboxGeojson)
+            mla.bounds.setData(BBox.get(bboxGeojson))
+            mla.location.setData({ lon, lat })
+        })
         mla.zoom.setData(zoom)
         mla.allowMoving.setData(false)
         mla.allowZooming.setData(false)
@@ -87,8 +98,8 @@ export class MinimapViz implements SpecialVisualization {
             state.layout.layers
         )
 
-        return new SvelteUIElement(MaplibreMap, { map: mlmap }).SetStyle(
-            "overflow: hidden; pointer-events: none;"
-        )
+        return new SvelteUIElement(MaplibreMap, { map: mlmap })
+            .SetClass("h-40 rounded")
+            .SetStyle("overflow: hidden; pointer-events: none;")
     }
 }

UI/ThemeViewGUI.svelte

@@ -30,6 +30,7 @@
   import LoginButton from "./Base/LoginButton.svelte";
   import CopyrightPanel from "./BigComponents/CopyrightPanel";
   import { DownloadPanel } from "./BigComponents/DownloadPanel";
+  import ModalRight from "./Base/ModalRight.svelte";
 
   export let state: ThemeViewState;
   let layout = state.layout;
@@ -99,10 +100,10 @@
 </div>
 
 {#if $selectedElement !== undefined && $selectedLayer !== undefined}
-  <FloatOver on:close={() => {selectedElement.setData(undefined)}}>
+  <ModalRight on:close={() => {selectedElement.setData(undefined)}}>
     <SelectedElementView layer={$selectedLayer} selectedElement={$selectedElement}
                          tags={$selectedElementTags} state={state} />
-  </FloatOver>
+  </ModalRight>
 
 {/if}