From c87289b1e15a8c4b16c54bccec3cc6c2402b7451 Mon Sep 17 00:00:00 2001
From: Bas Leenknegt <basleenknegt@thehyve.nl>
Date: Tue, 28 Feb 2023 13:24:57 +0100
Subject: [PATCH] Rerender PillTags when filters change

- Look at global store for deletion state
- Rerender when deleted
- Rerender filter added
---
 src/pages/studyView/StudyViewPageStore.ts | 32 ++++++++++++-----------
 src/shared/components/PillTag/PillTag.tsx | 18 +++++++------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/pages/studyView/StudyViewPageStore.ts b/src/pages/studyView/StudyViewPageStore.ts
index 94539d5a6a1..d53c1130393 100644
--- a/src/pages/studyView/StudyViewPageStore.ts
+++ b/src/pages/studyView/StudyViewPageStore.ts
@@ -406,13 +406,14 @@ export class StudyViewPageStore
     chartsBinsGeneratorConfigs = observable.map<string, BinsGeneratorConfig>();
 
     @observable filterSubmitTime: number = performance.now();
+    @observable filterUpdateTime: number = performance.now();
 
     /**
      * Force remount of filters when filters are submitted of submit mode changes
      */
     @computed
     public get filtersRemountKey() {
-        return `${this.hesitateUpdate}${this.filterSubmitTime}`;
+        return `${this.hesitateUpdate}${this.filterSubmitTime}${this.filterUpdateTime}`;
     }
 
     private getDataBinFilterSet(uniqueKey: string) {
@@ -479,6 +480,21 @@ export class StudyViewPageStore
             )
         );
 
+        this.reactionDisposers.push(
+            reaction(
+                () => [this.filtersProx, this.hesitateUpdate],
+                () => {
+                    if (!this.hesitateUpdate) {
+                        this.filters = this.filtersProx;
+                    }
+                    this.filterUpdateTime = performance.now();
+                },
+                {
+                    equals: comparer.structural,
+                }
+            )
+        );
+
         /**
          * Submit filters when submit mode changes
          * or when user clicks submit button
@@ -505,20 +521,6 @@ export class StudyViewPageStore
             )
         );
 
-        this.reactionDisposers.push(
-            reaction(
-                () => [this.filtersProx, this.hesitateUpdate],
-                () => {
-                    if (!this.hesitateUpdate) {
-                        this.filters = this.filtersProx;
-                    }
-                },
-                {
-                    equals: comparer.structural,
-                }
-            )
-        );
-
         this.reactionDisposers.push(
             reaction(
                 () => [
diff --git a/src/shared/components/PillTag/PillTag.tsx b/src/shared/components/PillTag/PillTag.tsx
index d389cb23503..8faf0853661 100644
--- a/src/shared/components/PillTag/PillTag.tsx
+++ b/src/shared/components/PillTag/PillTag.tsx
@@ -48,10 +48,7 @@ export type PillStore = {
 getBrowserWindow().hesitantPillStore = {} as PillStore;
 getBrowserWindow().submittedPillStore = {} as PillStore;
 
-@observer
 export class PillTag extends React.Component<IPillTagProps, {}> {
-    @observable isDeleted = false;
-
     constructor(props: IPillTagProps) {
         super(props);
         makeObservable(this);
@@ -80,7 +77,6 @@ export class PillTag extends React.Component<IPillTagProps, {}> {
     }
 
     private handleDelete() {
-        this.isDeleted = true;
         if (!this.hesitateUpdate) {
             // Delete all filters immediately in autocommit mode:
             this.deleteNow();
@@ -97,8 +93,10 @@ export class PillTag extends React.Component<IPillTagProps, {}> {
         }
         if (this.hesitateUpdate && !this.hesitantPillStoreEntry) {
             // Postpone deleting of submitted filters in hesitate mode:
-            this.addPillToHesitateStore();
+            const isDeleted = true;
+            this.addPillToHesitateStore(isDeleted);
         }
+        this.forceUpdate();
     }
 
     private deleteNow() {
@@ -109,8 +107,8 @@ export class PillTag extends React.Component<IPillTagProps, {}> {
         }
     }
 
-    private addPillToHesitateStore() {
-        const onDeleteCallback = this.isDeleted
+    private addPillToHesitateStore(isDeleted = false) {
+        const onDeleteCallback = isDeleted
             ? () => {
                   if (this.props.onDelete) {
                       this.props.onDelete();
@@ -159,6 +157,10 @@ export class PillTag extends React.Component<IPillTagProps, {}> {
             : this.props.content.element;
     }
 
+    private isDeleted() {
+        return !!this.hesitantPillStoreEntry?.onDeleteCallback;
+    }
+
     render() {
         const isPending = !!this.hesitantPillStoreEntry;
 
@@ -167,7 +169,7 @@ export class PillTag extends React.Component<IPillTagProps, {}> {
                 className={classnames({
                     [styles.main]: true,
                     [styles.pending]: isPending,
-                    [styles.pendingDelete]: this.isDeleted,
+                    [styles.pendingDelete]: this.isDeleted(),
                 })}
                 style={{
                     background: this.props.backgroundColor,