Destroy Vega Views properly

Caleydo · Oct 14, 2023 · 53f8174 · 53f8174
1 parent d74529b
commit 53f8174
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/src/Taskview/SearchColumn.ts b/src/Taskview/SearchColumn.ts
@@ -55,6 +55,9 @@ export default class SearchColumn {
   public clear() {
     select(this.$searchColumn).select('.task.selected').classed('selected', false); // deselect all others
     this.searchBar.removeAllSelectedOptions();
+
+    // tellt tasks that the attributes changed/were cleared
+    this.updateTasks();
   }
 
   private getSelectedAttributes(): IAttribute[] {

diff --git a/src/Taskview/columns/AttributeColumn.ts b/src/Taskview/columns/AttributeColumn.ts
@@ -6,7 +6,7 @@ import type { IAttribute } from '../../data/IAttribute';
 import { Histogram } from './Histogram';
 
 export default class AttributeColumn extends ADataColumn {
-  private hists: WeakMap<ICohort, Histogram> = new WeakMap();
+  private hists: Map<ICohort, Histogram> = new Map();
 
   private showOutputChtHistRef = false;
 
@@ -154,4 +154,9 @@ export default class AttributeColumn extends ADataColumn {
     this.hists.set(cht, hist);
     cell.appendChild(hist.getNode());
   }
+
+  public close(): void {
+    this.hists.forEach((hist) => hist.remove());
+    super.close();
+  }
 }
diff --git a/src/Taskview/columns/Histogram.ts b/src/Taskview/columns/Histogram.ts
@@ -1,5 +1,6 @@
 import vegaEmbed from 'vega-embed';
 import { TopLevelSpec as VegaLiteSpec } from 'vega-lite';
+import { View as VegaView } from 'vega';
 import { colors } from '../../config/colors';
 import { IAttribute } from '../../data';
 import { INumRange, IEqualsList, NumRangeOperators } from '../../base';
@@ -14,7 +15,7 @@ export class Histogram {
 
   readonly $hist: HTMLDivElement;
 
-  vegaView: any;
+  vegaView: VegaView;
 
   public showReference = true;
 
@@ -36,6 +37,11 @@ export class Histogram {
     setTimeout(() => that.updateNode.bind(that)(), 0); // run async
   }
 
+  public async remove() {
+    this.vegaView?.finalize();
+    this.$node.remove();
+  }
+
   public async updateNode() {
     this.$hist.remove();
     try {

diff --git a/src/Taskview/tasks/Filter.ts b/src/Taskview/tasks/Filter.ts
@@ -43,11 +43,13 @@ export class Filter extends ATask {
 
   async show(columnHeader: HTMLDivElement, container: HTMLDivElement, attributes: IAttribute[], cohorts: ICohort[]) {
     super.show(columnHeader, container, attributes, cohorts);
-
     if (attributes.length > 0) {
       this.addVisSelector();
     }
 
+    // remove old vis (if any) as it will be replaced
+    this.vis?.destroy();
+
     this.$visContainer = this.body.append('div').classed('vis-container', true).node();
     // TODO #427 check number of attributes and theid types to define the visualizations
     switch (attributes.length) {
@@ -173,10 +175,7 @@ export class Filter extends ATask {
   async showWithVis(vis: AVegaVisualization) {
     const eventId = ++this.eventID; // get new eventID, we will compare it with the field again to see if it is still up to date
 
-    // remove old vis
-    if (this.vis) {
-      this.vis.destroy();
-    }
+    this.vis?.destroy();
     this.$visContainer.innerHTML = '';
 
     // show loading