Fix bug associated with dynamic cArray and dataArray props for MultiDataRect/Track Plots

Author: keller-mark

package.json

@@ -1,6 +1,6 @@
 {
  "name": "vueplotlib",
- "version": "1.11.0",
+ "version": "1.11.1",
  "private": false,
  "scripts": {
  "serve": "vue-cli-service serve --open ./examples-src/index.js",

src/components/plots/MultiDataRectPlot.vue

@@ -36,7 +36,7 @@
  <td>{{ this.tooltipInfo.z }}</td>
  </tr>
  <tr>
- <th>{{ this._cScales[this.tooltipInfo.i].name }}</th>
+ <th>{{ this.tooltipInfo.cName }}</th>
  <td>{{ this.tooltipInfo.c }}</td>
  </tr>
  </table>
@@ -134,7 +134,7 @@ export default {
  tooltipInfo: {
  z: '',
  c: '',
- i: 0,
+ cName: '',
  },
  highlightYScale: null,
  highlightY: null,
@@ -147,8 +147,6 @@ export default {
  uuid += 1;
  },
  created() {
- console.assert(this.dataArray.length === this.cArray.length);
-
  // Set data
  this._dataContainers = this.dataArray.map((dataKey) => {
  const dataContainer = this.getData(dataKey);
@@ -203,14 +201,46 @@ export default {
  watch: {
  o() {
  this.drawPlot();
+ },
+ dataArray() {
+ this._dataContainers.forEach((dataContainer) => {
+ dataContainer.onUpdate(this.uuid, null);
+ });
+
+ this._dataContainers = this.dataArray.map((dataKey) => {
+ const dataContainer = this.getData(dataKey);
+ console.assert(dataContainer instanceof DataContainer);
+ return dataContainer;
+ });
+
+ this._dataContainers.forEach((dataContainer) => {
+ dataContainer.onUpdate(this.uuid, this.drawPlot);
+ });
+
+ this.drawPlot();
+ },
+ cArray() {
+ this._cScales.forEach((cScale) => {
+ cScale.onUpdate(this.uuid, null);
+ });
+
+ this._cScales = this.cArray.map((cKey) => {
+ const cScale = this.getScale(cKey);
+ console.assert(cScale instanceof AbstractScale);
+ return cScale;
+ });
+
+ this._cScales.forEach((cScale) => {
+ cScale.onUpdate(this.uuid, this.drawPlot);
+ });
  }
  },
  methods: {
  tooltip(mouseX, mouseY, z, c, i) {
  // Set values
- this.tooltipInfo.i = i;
  this.tooltipInfo.z = this._zScale.toHuman(z);
  this.tooltipInfo.c = this._cScales[i].toHuman(c);
+ this.tooltipInfo.cName = this._cScales[i].name
 
  // Set position
  if(!this.disableTooltip) {
@@ -240,7 +270,7 @@ export default {
  drawPlot(d3Node) {
  const vm = this;
 
- if(vm._dataContainers.reduce((a, h) => (a || h.isLoading), false) || vm._cScales.reduce((a, h) => (a || h.isLoading), false) || vm._zScale.isLoading) {
+ if(vm._dataContainers.length !== vm._cScales.length || vm._dataContainers.reduce((a, h) => (a || h.isLoading), false) || vm._cScales.reduce((a, h) => (a || h.isLoading), false) || vm._zScale.isLoading) {
  return;
  }
  

src/components/plots/MultiDataTrackPlot.vue

@@ -63,7 +63,7 @@
  <td>{{ this.tooltipInfo.x }}</td>
  </tr>
  <tr>
- <th>{{ this._cScales[this.tooltipInfo.i].name }}</th>
+ <th>{{ this.tooltipInfo.cName }}</th>
  <td>{{ this.tooltipInfo.c }}</td>
  </tr>
  </table>
@@ -137,8 +137,8 @@ export default {
  return {
  tooltipInfo: {
  x: '',
- i: 0,
- c: ''
+ c: '',
+ cName: '',
  },
  highlightX1: null,
  highlightX2: null,
@@ -155,8 +155,6 @@ export default {
  uuid += 1;
  },
  created() {
- console.assert(this.dataArray.length === this.cArray.length);
-
  // Set data
  this._dataContainers = this.dataArray.map((dataKey) => {
  const dataContainer = this.getData(dataKey);
@@ -213,14 +211,46 @@ export default {
  },
  barMarginY() {
  this.drawPlot();
+ },
+ dataArray() {
+ this._dataContainers.forEach((dataContainer) => {
+ dataContainer.onUpdate(this.uuid, null);
+ });
+
+ this._dataContainers = this.dataArray.map((dataKey) => {
+ const dataContainer = this.getData(dataKey);
+ console.assert(dataContainer instanceof DataContainer);
+ return dataContainer;
+ });
+
+ this._dataContainers.forEach((dataContainer) => {
+ dataContainer.onUpdate(this.uuid, this.drawPlot);
+ });
+
+ this.drawPlot();
+ },
+ cArray() {
+ this._cScales.forEach((cScale) => {
+ cScale.onUpdate(this.uuid, null);
+ });
+
+ this._cScales = this.cArray.map((cKey) => {
+ const cScale = this.getScale(cKey);
+ console.assert(cScale instanceof AbstractScale);
+ return cScale;
+ });
+
+ this._cScales.forEach((cScale) => {
+ cScale.onUpdate(this.uuid, this.drawPlot);
+ });
  }
  },
  methods: {
  tooltip(mouseX, mouseY, x, i, c) {
  // Set values
- this.tooltipInfo.i = i;
  this.tooltipInfo.x = this._xScale.toHuman(x);
  this.tooltipInfo.c = this._cScales[i].toHuman(c);
+ this.tooltipInfo.cName = this._cScales[i].name;
 
  // Set position
  this.tooltipPosition.left = mouseX;
@@ -260,7 +290,7 @@ export default {
  drawPlot(d3Node) {
  const vm = this;
 
- if(vm._dataContainers.reduce((a, h) => (a || h.isLoading), false) || vm._cScales.reduce((a, h) => (a || h.isLoading), false) || vm._xScale.isLoading) {
+ if(vm._dataContainers.length !== vm._cScales.length || vm._dataContainers.reduce((a, h) => (a || h.isLoading), false) || vm._cScales.reduce((a, h) => (a || h.isLoading), false) || vm._xScale.isLoading) {
  return;
  }