Update to new modifier format

open-datakit · Jun 1, 2022 · 4ee38d5 · 4ee38d5
1 parent a82a527
commit 4ee38d5
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 37 deletions.
diff --git a/addon/modifiers/vega.ts b/addon/modifiers/vega.ts
@@ -1,9 +1,11 @@
 import Modifier, { ArgsFor, PositionalArgs, NamedArgs } from 'ember-modifier';
-// import { registerDestructor } from '@ember/destroyable';
+import { registerDestructor } from '@ember/destroyable';
+
+import { isEmpty } from 'lodash';
+
 import * as Vega from 'vega';
 import * as VegaLite from 'vega-lite';
 import * as VegaTooltip from 'vega-tooltip';
-import { isEmpty } from 'lodash';
 
 import { Resource, View } from 'opendatafit-types';
 
@@ -79,6 +81,13 @@ export default class VegaModifier extends Modifier<VegaModifierSignature> {
     args: ArgsFor<VegaModifierSignature>
   ) {
     super(owner, args);
+    registerDestructor(this, this.destructor);
+  }
+
+  destructor() {
+    if (this._vegaView) {
+      this._vegaView.finalize();
+    }
   }
 
   async modify(
@@ -90,6 +99,23 @@ export default class VegaModifier extends Modifier<VegaModifierSignature> {
       throw new Error('Vega has no element');
     }
 
+    if (!this._vegaView) {
+      // Create new Vega.View instance
+      await this._createView(element, args);
+      await this._populateData(args);
+    } else {
+      // Update data only
+      // TODO: Handle changes to config
+      await this._populateData(args);
+    }
+  }
+
+  private async _createView(
+    element: Element,
+    args: NamedArgs<VegaModifierSignature>
+  ): Promise<void> {
+    element.classList.add('vega-view-modifier');
+
     let tooltipHandler = new VegaTooltip.Handler();
 
     let config = {};
@@ -107,47 +133,27 @@ export default class VegaModifier extends Modifier<VegaModifierSignature> {
     }
 
     this._vegaView = new Vega.View(Vega.parse(viewSpec, config), {
-      renderer: 'svg', // Renderer (canvas or svg)
-      container: this.element, // Parent DOM container
-      hover: true, // Enable hover processing
+      renderer: 'svg',
+      container: element,
+      hover: true,
       // autosize: { type: 'fit', resize: true },
       tooltip: tooltipHandler.call,
     });
 
     await this._vegaView.runAsync();
 
-    // await this.populateData();
-    for (const name of Object.keys(args.data)) {
-      this._vegaView.data(name, args.data[name]);
-    }
-    await this._vegaView.runAsync();
-
-    this.element.classList.add('vega-view-modifier');
-
     // TODO: Temporary bug fix for incorrect chart sizing on load before
     // first resize
     window.dispatchEvent(new Event('resize'));
   }
 
-  private _setup(): void {
-  }
-
-  willDestroy() {
-    if (this._vegaView) {
-      this._vegaView.finalize();
+  private async _populateData(
+    args: NamedArgs<VegaModifierSignature>
+  ): Promise<void> {
+    for (const name of Object.keys(args.data)) {
+      this._vegaView.data(name, args.data[name]);
     }
 
-    this.element.classList.remove('vega-view-modifier');
+    await this._vegaView.runAsync();
   }
-
-  // async didUpdateArguments() {
-  //   if (!this._vegaView) {
-  //     await this._setup();
-  //   } else {
-  //     // Already loaded, we don't expect the view/config to change
-  //     // Just need to update data package
-  //     await this.populateData();
-  //     await this._vegaView.runAsync();
-  //   }
-  // }
 }
diff --git a/package.json b/package.json
@@ -28,19 +28,20 @@
     "postpack": "ember ts:clean"
   },
   "dependencies": {
-    "ember-auto-import": "^2.4.2",
-    "ember-lodash": "^4.19.5",
     "@types/lodash": "^4.14.182",
-    "ember-modifier": "^3.2.7",
+    "ember-auto-import": "^2.4.2",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-typescript": "^5.1.0",
+    "ember-lodash": "^4.19.5",
+    "ember-modifier": "^3.2.7",
+    "opendatafit-types": "git+ssh://[email protected]:opendatafit/opendatafit-types.git",
     "vega": "^5.22.1",
     "vega-lite": "^5.2.0",
-    "vega-tooltip": "^0.28.0",
-    "opendatafit-types": "git+ssh://[email protected]:opendatafit/opendatafit-types.git"
+    "vega-tooltip": "^0.28.0"
   },
   "devDependencies": {
+    "@types/ember": "^4.0.0",
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.7.0",
     "@embroider/test-setup": "^1.6.0",
@@ -53,6 +54,7 @@
     "@types/ember__component": "^4.0.8",
     "@types/ember__controller": "^4.0.0",
     "@types/ember__debug": "^4.0.1",
+    "@types/ember__destroyable": "^4.0.0",
     "@types/ember__engine": "^4.0.0",
     "@types/ember__error": "^4.0.0",
     "@types/ember__object": "^4.0.2",

diff --git a/yarn.lock b/yarn.lock
@@ -1390,7 +1390,7 @@
   dependencies:
     "@types/ember__object" "*"
 
-"@types/ember@*":
+"@types/ember@*", "@types/ember@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/ember/-/ember-4.0.0.tgz#0c29294fa0e5aa07ba6090f60243707dde8fc411"
   integrity sha512-IR4o8OkFgoiRKVLRI8URvyNhEBSkjO5DXp2900/TptxOl0Retu8/tKtFaRTwkqteg2a0/6zXAA1rpFb3BbxNpA==
@@ -1460,6 +1460,11 @@
     "@types/ember__debug" "*"
     "@types/ember__object" "*"
 
+"@types/ember__destroyable@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/ember__destroyable/-/ember__destroyable-4.0.0.tgz#997af44863323979796fbd153e9ad76498defb33"
+  integrity sha512-QxyRhCOlQmc056tbWvHOQZ7vIjlFOFYMOU82P3pcCFfxyi55+NRhj4ySruymcBCfrzKQmVQLCbbOGhyFMLqq0Q==
+
 "@types/ember__engine@*", "@types/ember__engine@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@types/ember__engine/-/ember__engine-4.0.0.tgz#e39c06d98c7a085912508e8257c48a70196c1a87"