Reloading items problem

Unfortunately, I ran into a problem when using the library:

Observed behavior

We have scatterplots that are automatically clustered and piled accordingly. That works great until we change data. If we change the data while all the scatterplots are not in a pile the data and piling are reloaded without problems. But as soon as we create piles of Scatterplots, be it automatically or by draging and dropping, no piling is created and the following error message occurs:

TypeError: null has no properties
    destroy sprite.es.js:493
    destroy piling.esm.js:13550
    onDestroy piling.esm.js:13781
    destroy piling.esm.js:13681
    clear piling.esm.js:13810
    clear piling.esm.js:13809
    destroy piling.esm.js:25658
    loadData PileTest.vue:266
    VueJS 11
    _callee3$/< App.vue:398
    promise callback*_callee3$ App.vue:368
    tryCatch piling.esm.js:67
    invoke piling.esm.js:287
    method piling.esm.js:120
    Babel 4
    loadAllPlotsComp App.vue:364
    VueJS 4
    onChange form-select.js:89
    VueJS 9
    onChange form-select.js:87
    VueJS 3

The stack trace of the error shows a problem at row 25658 in the piling.esm.js that executes the following function: badgeFactory.destroy();

This does not happen if we first split all the piles this.piling.splitAll() and then load the data. Alternatively, if I remove the “badgeFactory.destroy();” line in the piling.esm.js the error does again not occur and everythings seems to work fine as far as i can judge.

Additional Information

All the props and setup for the piling:

      this.piling=createPilingJs(document.getElementById('demo'))
      this.piling.set('renderer', scatterplotRenderer.renderer);
      this.piling.set('coverAggregator',coverAggregator);
      this.piling.set('coverRenderer', scatterplotCoverRenderer.renderer);
      this.piling.set('items', this.items);
      this.piling.set('darkMode', false);
      this.piling.set('columns', 6);
      this.piling.set('cellPadding', 9);
      this.piling.set(cellAspectRatio);
      this.piling.set(pileOrderItems);
      this.piling.set('pileLabelTextOpacity',1);
      this.piling.set('pileOpacity',1);
      this.piling.set('zoomScale',(x) => x);
      this.piling.set('pileSizeBadge',true)
      this.piling.set('pileSizeBadgeAlign',['top','left'])
      this.piling.set('pileItemOffset',[0,0])

automatic piling although it also happens with just dragging:

      this.piling.subscribe('itemUpdate', this.pileMaker)
      this.piling.subscribe('pilesPositionEnd', this.pileArranger)

    pileMaker () {
        this.piling.groupBy('category', (item)=> item.cluster);
      },
    pileArranger () {
        this.piling.arrangeBy('data', (item)=> item.cluster);
      },

Expected behavior

• Reloading the data also should be possible when the scatterplots are within piles.

[flekschas]

Oh great! Thanks a lot for posting the issue. I found a couple of other glitches along the way, that I am hoping to fix.

Just FYI, the destroy() function is final. Meaning that after you have destroyed a piling instance you cannot use it anymore.

Also, please let me know if you run into any other issues. I am happy to help out.

Closing this issue for now as it seems to have been resolved.

[1226419]

Thank you for looking into the problem! I now realised that there was one part within our code that was not setting new items to the piling and instead destroying and recreating the piling. I assume this part was causing the problem.

  this.piling.destroy()
  this.items=[]
  this.createScatterplotPiles()

I now changed it to piling.set('items', newItems) and the problem does not occur anymore and the badges are shown. Thank you again for your help!