From 8b653278e878fbf5dcb04ceea9f8dbae590324b8 Mon Sep 17 00:00:00 2001
From: "david.watkins@db.com" <david.watkins@db.com>
Date: Fri, 23 Feb 2024 17:09:49 +0000
Subject: [PATCH] Fixes for datatype section and involvement kind assessments

- IK: assessments not updating as primary ref was not being updated correctly
- DT: current selection not clearing when moving between flows
- bonus: DT: table/tree choice persisted to local storage

#CTCTOWALTZ-3071
#7008 #7007
---
 .../DataTypeDecoratorSection.svelte           | 36 +++++++++++++------
 .../svelte/InvolvementKindPanel.svelte        |  2 ++
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/waltz-ng/client/data-types/components/data-type-decorator-section/DataTypeDecoratorSection.svelte b/waltz-ng/client/data-types/components/data-type-decorator-section/DataTypeDecoratorSection.svelte
index 09b7d269f9..b1e3b862bd 100644
--- a/waltz-ng/client/data-types/components/data-type-decorator-section/DataTypeDecoratorSection.svelte
+++ b/waltz-ng/client/data-types/components/data-type-decorator-section/DataTypeDecoratorSection.svelte
@@ -12,6 +12,8 @@
         selectedDataType
     } from "./data-type-decorator-section-store";
     import {prepareData} from "./data-type-decorator-view-grid-utils";
+    import {onDestroy, onMount} from "svelte";
+    import localWritable from "../../../common/svelte/local-writable";
 
     const Modes = {
         TREE: "TREE",
@@ -20,17 +22,30 @@
 
     export let primaryEntityRef;
 
-    let activeMode = Modes.TREE;
+    let activeMode = localWritable('waltz.DataTypeDecoratorSection.activeMode', Modes.TREE);
     let viewCall;
 
     function toggleView() {
-        if (activeMode === Modes.TREE) {
-            activeMode = Modes.TABLE;
+        if ($activeMode === Modes.TREE) {
+            $activeMode = Modes.TABLE;
         } else {
-            activeMode = Modes.TREE;
+            $activeMode = Modes.TREE;
         }
     }
 
+    function clearSelections() {
+        $selectedDataType = null;
+        $selectedDecorator = null;
+    }
+
+    onMount(() => {
+        clearSelections();
+    });
+
+    onDestroy(() => {
+        clearSelections();
+    });
+
     $: {
         if (primaryEntityRef) {
             viewCall = dataTypeDecoratorStore.getViewForParentRef(primaryEntityRef);
@@ -49,20 +64,19 @@
 
 <div class="decorator-section">
     <div class="decorator-table">
-        <div class="pull-right" style="display: block">
+        <div>
+            These are the data types currently aligned to this logical flow. You can toggle between a tabular and tree view of this information. Select a data type to see more information.
+            <br>
             <Toggle labelOn="Tree View"
                     labelOff="Table View"
-                    state={activeMode === Modes.TREE}
+                    state={$activeMode === Modes.TREE}
                     onToggle={toggleView}/>
         </div>
-        <div>
-            These are the data types currently aligned to this logical flow. You can toggle between a tabular and tree view of this information. Select a data type to see more information.
-        </div>
         <br>
         <div>
-            {#if activeMode === Modes.TREE}
+            {#if $activeMode === Modes.TREE}
                 <DataTypeOverviewPanel primaryEntityReference={primaryEntityRef}/>
-            {:else if activeMode === Modes.TABLE}
+            {:else if $activeMode === Modes.TABLE}
                 <DataTypeDecoratorViewGrid/>
             {/if}
         </div>
diff --git a/waltz-ng/client/involvement-kind/components/svelte/InvolvementKindPanel.svelte b/waltz-ng/client/involvement-kind/components/svelte/InvolvementKindPanel.svelte
index 6995c3c6be..49d7092add 100644
--- a/waltz-ng/client/involvement-kind/components/svelte/InvolvementKindPanel.svelte
+++ b/waltz-ng/client/involvement-kind/components/svelte/InvolvementKindPanel.svelte
@@ -9,6 +9,7 @@
     import {activeSections} from "../../../dynamic-section/section-store";
     import {dynamicSections} from "../../../dynamic-section/dynamic-section-definitions";
     import SubSection from "../../../common/svelte/SubSection.svelte";
+    import {primaryEntityReference as primaryRef} from "../../../assessments/components/rating-editor/rating-store";
 
     export let parentEntityRef;
 
@@ -16,6 +17,7 @@
 
     $: involvementKindCall = involvementKindStore.getById(parentEntityRef.id);
     $: involvementKind = $involvementKindCall?.data;
+    $: $primaryRef = parentEntityRef;
 
     function reload(id) {
         involvementKindCall = involvementKindStore.getById(id, true);