From 3aeedf22c81c4fcf11d08ad8278944e21e076344 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Fri, 21 Apr 2023 00:25:56 +0200
Subject: [PATCH] Refactoring: fix rendering artefact when switching selected
 element

---
 .../Actors/FeaturePropertiesStore.ts          |  1 -
 Logic/MetaTagging.ts                          |  2 +-
 Models/ThemeViewState.ts                      |  4 +++
 UI/ThemeViewGUI.svelte                        | 34 ++++++++++++-------
 4 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/Logic/FeatureSource/Actors/FeaturePropertiesStore.ts b/Logic/FeatureSource/Actors/FeaturePropertiesStore.ts
index 3d33040a85..d7e91d8fdc 100644
--- a/Logic/FeatureSource/Actors/FeaturePropertiesStore.ts
+++ b/Logic/FeatureSource/Actors/FeaturePropertiesStore.ts
@@ -20,7 +20,6 @@ export default class FeaturePropertiesStore {
     public trackFeatureSource(source: FeatureSource) {
         const self = this
         source.features.addCallbackAndRunD((features) => {
-            console.log("Re-indexing features")
             for (const feature of features) {
                 const id = feature.properties.id
                 if (id === undefined) {
diff --git a/Logic/MetaTagging.ts b/Logic/MetaTagging.ts
index 6a91b08385..b8ff65993a 100644
--- a/Logic/MetaTagging.ts
+++ b/Logic/MetaTagging.ts
@@ -71,7 +71,7 @@ export default class MetaTagging {
             return
         }
 
-        console.log("Recalculating metatags...")
+        console.trace("Recalculating metatags...")
         const metatagsToApply: SimpleMetaTagger[] = []
         for (const metatag of SimpleMetaTaggers.metatags) {
             if (metatag.includesDates) {
diff --git a/Models/ThemeViewState.ts b/Models/ThemeViewState.ts
index 8154ff9705..3719f61ad1 100644
--- a/Models/ThemeViewState.ts
+++ b/Models/ThemeViewState.ts
@@ -302,6 +302,10 @@ export default class ThemeViewState implements SpecialVisualizationState {
                         })
                         return
                     }
+                    // We first clear the selection to make sure no weird state is around
+                    this.selectedLayer.setData(undefined)
+                    this.selectedElement.setData(undefined)
+
                     this.selectedElement.setData(feature)
                     this.selectedLayer.setData(last_click_layer.layerDef)
                 },
diff --git a/UI/ThemeViewGUI.svelte b/UI/ThemeViewGUI.svelte
index 1152f3bf07..670af6561d 100644
--- a/UI/ThemeViewGUI.svelte
+++ b/UI/ThemeViewGUI.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Store, UIEventSource } from "../Logic/UIEventSource";
+  import { UIEventSource } from "../Logic/UIEventSource";
   import { Map as MlMap } from "maplibre-gl";
   import MaplibreMap from "./Map/MaplibreMap.svelte";
   import FeatureSwitchState from "../Logic/State/FeatureSwitchState";
@@ -32,19 +32,31 @@
   import ModalRight from "./Base/ModalRight.svelte";
   import { Utils } from "../Utils";
   import Hotkeys from "./Base/Hotkeys";
+  import { VariableUiElement } from "./Base/VariableUIElement";
+  import SvelteUIElement from "./Base/SvelteUIElement";
+  import { onDestroy } from "svelte";
 
   export let state: ThemeViewState;
   let layout = state.layout;
 
-  let selectedElementTags: Store<UIEventSource<Record<string, string>>> =
-    state.selectedElement.mapD((f) => {
-        return state.featureProperties.getStore(f.properties.id);
-      }
-    );
-
   let maplibremap: UIEventSource<MlMap> = state.map;
   let selectedElement: UIEventSource<Feature> = state.selectedElement;
   let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer;
+
+  const selectedViewElement = selectedElement.map(selectedElement => {
+    // Svelte doesn't properly reload some of the legacy UI-elements
+    // As such, we _reconstruct_ the selectedElementView every time a new feature is selected
+    // This is a bit wasteful, but until everything is a svelte-component, this should do the trick
+    const layer = selectedLayer.data;
+    if (selectedElement === undefined || layer === undefined) {
+      return undefined;
+    }
+    
+    const tags = state.featureProperties.getStore(selectedElement.properties.id);
+    return new SvelteUIElement(SelectedElementView, {state, layer, selectedElement, tags})
+  }, [selectedLayer]);
+
+
   let mapproperties: MapProperties = state.mapProperties;
   let featureSwitches: FeatureSwitchState = state.featureSwitches;
   let availableLayers = state.availableLayers;
@@ -101,13 +113,11 @@
   </If>
 </div>
 
-{#if $selectedElement !== undefined && $selectedLayer !== undefined}
+<If condition={selectedViewElement.map(v => v !== undefined)}>
   <ModalRight on:close={() => {selectedElement.setData(undefined)}}>
-    <SelectedElementView layer={$selectedLayer} selectedElement={$selectedElement}
-                         tags={$selectedElementTags} state={state} />
+    <ToSvelte construct={new VariableUiElement(selectedViewElement)}></ToSvelte>
   </ModalRight>
-
-{/if}
+</If>
 
 <If condition={state.guistate.themeIsOpened}>
   <!-- Theme page -->