@vizabi/bubblechart 5.5.1 → 5.5.3

package/build/bubblechart.js

@@ -1,4 +1,4 @@
-// https://github.com/vizabi/bubblechart#readme v5.5.1 build 1764449745412 Copyright 2025 Gapminder Foundation and contributors
+// https://github.com/vizabi/bubblechart#readme v5.5.3 build 1768916445428 Copyright 2026 Gapminder Foundation and contributors
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@vizabi/shared-components'), require('d3'), require('mobx'), require('@deck.gl/core'), require('@deck.gl/layers')) :
   typeof define === 'function' && define.amd ? define(['exports', '@vizabi/shared-components', 'd3', 'mobx', '@deck.gl/core', '@deck.gl/layers'], factory) :
@@ -2156,6 +2156,7 @@ void main(void) {
       this.dragX;
       this.dragY;
       this.redrawUpdateTrigger = 0;
+      this.lastLineRedrawUpdateTrigger = 0;
       this.opacityUpdateTrigger = 0;
     }
 
@@ -2695,12 +2696,12 @@ void main(void) {
         //requestAnimationFrame(() => {
           this.deckBubble.setProps({layers: this.getBubbleLayers(this.__oldData, false, 0, undefined, this.__lastLineTrailData)});
           requestAnimationFrame(() => {
-            this.redrawUpdateTrigger++;
+            this.lastLineRedrawUpdateTrigger++;
             this.deckBubble.setProps({layers: this.getBubbleLayers(this.__oldData, true, 0.001, undefined, this.__lastLineTrailData)});
             requestAnimationFrame(() => {
               this.redrawUpdateTrigger++;
               this.__labelData = this.__newLabelData;
-              this.deckBubble.setProps({layers: this.getBubbleLayers(this.__data, true, this.duration + this.perfDataStart - performance.now(), undefined, this.__newLastLineTrailData)});
+              this.deckBubble.setProps({layers: this.getBubbleLayers(this.__data, true, this.duration + (this.perfDataStart - performance.now()) * 0.85, undefined, this.__newLastLineTrailData)});
               this.__trailsData = this.__newTrailsData;
               //_updateRangesLine = _newUpdateRangesLine;
             });
@@ -2788,8 +2789,6 @@ void main(void) {
         return true;
       });
 
-      this.labelZScale = d3.scaleLinear([0, selectedData.size - 1],[-0.09, -0.05]);
-      
       if (newTrailsData.length) {
         newTrailsData.forEach(d => {
           if (!d[TRAIL_KEY]) return;
@@ -2855,8 +2854,16 @@ void main(void) {
       } = this.profileConstants;
 
       //transfer min max radius to size dialog via root ui observable (probably a cleaner way is possible)
-      this.root.ui.minMaxRadius = {min: minRadiusPx, max: maxRadiusPx};
-      
+      if (this.root.ui.minMaxRadius) {
+        this.root.ui.minMaxRadius.min = minRadiusPx;
+        this.root.ui.minMaxRadius.max = maxRadiusPx;
+      } else {
+        this.root.ui.minMaxRadius = {
+          min: minRadiusPx,
+          max: maxRadiusPx
+        };
+      }
+
       const extent = this.MDL.size.scale.extent || [0, 1];
       
       let minArea = sharedComponents.LegacyUtils.radiusToArea(Math.max(maxRadiusPx * extent[0], minRadiusPx));
@@ -2899,6 +2906,7 @@ void main(void) {
       this.__selectedMarkers = new Map(selectedFilter.markers);
       this.__selectedKeys = [...this.__selectedMarkers.keys()];
 
+      this.labelZScale = d3.scaleLinear([0, this.__selectedKeys.length - 1],[-0.09, -0.05]);
 
       Object.keys(this.labelOffset).forEach(key => {
         if (!this.__selectedMarkers.has(key)) delete this.labelOffset[key];
@@ -3265,28 +3273,35 @@ void main(void) {
 
     getProps() {
       return {
-        getSourcePosition: (d) => {
+        getSourcePosition: (d, { target }) => {
           if (!d) return;
-          //console.log("src", d, d.KEY, d.uz ? d.uz : this.zScale(d.z*1.01), this.zScale(d.z*1.01));
-          return [this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.z*1.01)]
+          target[0] = this.xScale(d.x);
+          target[1] = this.yScale(d.y);
+          target[2] = d.uz ? d.uz : this.zScale(d.z*1.01);
+          return target;
         },
-        getTargetPosition: (_d, { data, index }) => {
-          //console.log("trgt", _d, data[index + 1]);
+        getTargetPosition: (_d, { data, index, target }) => {
           if (!_d) return;
           const d = _d[TRAIL_KEY] ? data[index + 1] ? data[index + 1] : _d : _d;
           if (!d) return;
-          //console.log("trgt", d, d.KEY, d.uz ? d.uz : this.zScale(d.z*1.01), this.zScale(d.z*1.01));
-          return [this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.z*1.01)]
+          target[0] = this.xScale(d.x);
+          target[1] = this.yScale(d.y);
+          target[2] = d.uz ? d.uz : this.zScale(d.z*1.01);
+          return target;
         },    
-        getLastLineSourcePosition: (d) => {
-          //console.log("src",d);
+        getLastLineSourcePosition: (d, { target }) => {
           if (!d) return;
-          return [this.xScale(d[0].x), this.yScale(d[0].y), this.zScale(d[0].z*1.01)]
+          target[0] = this.xScale(d[0].x);
+          target[1] = this.yScale(d[0].y);
+          target[2] = this.zScale(d[0].z*1.01);
+          return target;
         },
-        getLastLineTargetPosition: (d) => {
-          //console.log("trgt", _d, data[index + 1]);
+        getLastLineTargetPosition: (d, { target }) => {
           if (!d) return;
-          return [this.xScale(d[1].x), this.yScale(d[1].y), this.zScale(d[1].z*1.01)]
+          target[0] = this.xScale(d[1].x);
+          target[1] = this.yScale(d[1].y);
+          target[2] = this.zScale(d[1].z*1.01);
+          return target;
         },    
         getLabelText: (d) => {
           if (!d) return;
@@ -3342,7 +3357,7 @@ void main(void) {
     
           //adjust label offset if label with current offset located outside of vieport
           const offset = this.labelOffset[key];
-          const pPos = viewport.project(this.props.getPosition(d).slice(0,2));
+          const pPos = viewport.project(this.props.getPosition(d, { target: [] }).slice(0,2));
           const vW = viewport.width;
           const vH = viewport.height;
           const [lW, lH] = sourceLayer.parent.state.labelSize;
@@ -3371,7 +3386,7 @@ void main(void) {
             offset[1] = vH - lPaddB - pPos[1];
           }
     
-          console.log("offset", offset, "point", pPos, lW, lH, viewport);
+          //console.log("offset", offset, "point", pPos, lW, lH, viewport);
           this.dragX0 = this.labelOffset[key][0] - x;
           this.dragY0 = this.labelOffset[key][1] - y;
           //this.deckBubble.setProps({layers: this.getBubbleLayers(undefined, false, 0, false), controller: { dragPan: dragFlag }}); 
@@ -3385,7 +3400,6 @@ void main(void) {
           const key = d[TRAIL_KEY] || d[KEY];
           this.labelOffset[key][0] = this.dragX;
           this.labelOffset[key][1] = this.dragY;
-          this.props.getPosition(d).slice(0,2);
           //console.log("offset", this.labelOffset[key], "point", sourceLayer.project(pos),  viewport.getBounds(), viewport);
           this.deckBubble.setProps({layers: this.getBubbleLayers(undefined, false, 0, false),}); //views: this.getViews({ dragPan: dragFlag }),}); 
           return true;
@@ -3427,25 +3441,25 @@ void main(void) {
           const offsetY = this.labelOffset[key] && this.labelOffset[key][1] || 0;
           return [offsetX || 0, -offsetY || 0];
         },
-        getPosition: (d) => {
+        getPosition: (d, { target }) => {
           if (!d) return;
-          //let zHover = 0;
-          // if (this.activeObject && this.activeObject[KEY] == d[KEY]) {
-            //zHover = -0.05;
-            //console.log("zHover", zHover, d, this.activeObject)
-          // }
-          //console.log(d[KEY],this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.size))
-          //return [this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.size)]
-          return [this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.size)]
+          target[0] = this.xScale(d.x);
+          target[1] = this.yScale(d.y);
+          target[2] = d.uz ? d.uz : this.zScale(d.size);
+          return target;
         },
-        getPositionHighlight: (d) => {
+        getPositionHighlight: (d, { target }) => {
           if (!d) return;
-          return [this.xScale(d.x), this.yScale(d.y), -0.095];
+          target[0] = this.xScale(d.x);
+          target[1] = this.yScale(d.y);
+          target[2] = -0.095;
+          return target;
         },
-        getPositionXY: (d) => {
+        getPositionXY: (d, { target }) => {
           if (!d) return;
-          //console.log(d[KEY],this.xScale(d.x), this.yScale(d.y), d.uz ? d.uz : this.zScale(d.size))
-          return [this.xScale(d.x), this.yScale(d.y)]
+          target[0] = this.xScale(d.x);
+          target[1] = this.yScale(d.y);
+          return target;
         },
         
         getFillColor: (d, { target }) => {
@@ -3636,6 +3650,7 @@ void main(void) {
           //  console.log("_datediff line", newData, oldData, _updateRangesLine);
           //  return dataDiff ? playing ? _updateRangesLine : null : null;
           //}
+          visible: this.MDL.trail.show
         }),
         new layers.LineLayer({
           id: 'lastLineLayer',
@@ -3646,7 +3661,7 @@ void main(void) {
           getWidth: this.props.getLastTrailLineWidth,
           updateTriggers: {
             getColor: [this.activeObject, this.opacityUpdateTrigger],
-            getTargetPosition: [this.redrawUpdateTrigger]
+            getTargetPosition: [this.redrawUpdateTrigger, this.lastLineRedrawUpdateTrigger]
           },
           transitions: t ? { 
             getTargetPosition: { 
@@ -3658,6 +3673,7 @@ void main(void) {
           //  console.log("_datediff line", newData, oldData, _updateRangesLine);
           //  return dataDiff ? playing ? _updateRangesLine : null : null;
           //}
+          visible: this.MDL.trail.show
         }),
         new layers.ScatterplotLayer({
           parameters: {depthTest: false},
@@ -3684,12 +3700,6 @@ void main(void) {
           transitions: t ? { 
             getPosition: { 
               duration,
-              onStart: (e) => {
-                console.log("start", e);
-              },
-              onEnd: (e) => {
-                console.log("end", e);
-              }
             },
             getRadius: {
               duration,
@@ -3829,7 +3839,7 @@ void main(void) {
           //}
         }),*/
         
-        this.ui.labels.enabled && new LabelLayer({
+        this.ui.labels.enabled && this.__someSelected && new LabelLayer({
           //parameters: {depthTest: false},
           id: 'labelTextLayer',
           _subLayerProps: {
@@ -3903,7 +3913,8 @@ void main(void) {
             getLineSourceFillOffset: {
               duration,
             }
-          } : null
+          } : null,
+          visible: this.__someSelected
         }),
       ]
     }
@@ -4245,7 +4256,7 @@ void main(void) {
     },
   };
 
-  BubbleChart.versionInfo = { version: "5.5.1", build: 1764449745412, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
+  BubbleChart.versionInfo = { version: "5.5.3", build: 1768916445428, package: {"homepage":"https://github.com/vizabi/bubblechart#readme","name":"@vizabi/bubblechart","description":"Vizabi bubble chart"}, sharedComponents: sharedComponents.versionInfo};
 
   exports.Base = BubbleChart;