Profiles Appearing and dissappearing

FloatingSpace.js

@@ -8,6 +8,7 @@ function newFloatingSpace() {
     let thisObject = {
         balls: undefined,               // This is the array of balls being displayed
         createNewBall: createNewBall,
+        destroyBall: destroyBall,
         physicsLoop: physicsLoop,
         isInside: isInside,
         isInsideBall: isInsideBall,
@@ -136,9 +137,32 @@ function newFloatingSpace() {
 
         createdBalls.push(ball);
 
-        ball.index = thisObject.balls.length;
+        ball.handle = Math.floor((Math.random() * 10000000) + 1);
 
-        return ball;
+        return ball.handle;
+    }
+
+    function destroyBall(pBallHandle) {
+
+        for (let i = 0; i < createdBalls.length; i++) {
+
+            let ball = createdBalls[i];
+
+            if (ball.handle === pBallHandle) {
+                createdBalls.splice(i, 1);  // Delete item from array.
+                return;                 
+            }
+        }
+
+        for (let i = 0; i < thisObject.balls.length; i++) {
+
+            let ball = thisObject.balls[i];
+
+            if (ball.handle === pBallHandle) {
+                thisObject.balls.splice(i, 1);  // Delete item from array.
+                return;
+            }
+        }
     }
 
     /******************************************/

TimelineChart.js

@@ -218,7 +218,8 @@ function newTimelineChart() {
                 let productPlotter = {
                     productCard: pProductCard,
                     plotter: plotter,
-                    storage: storage
+                    storage: storage,
+                    profile: undefined
                 };
 
                 /* Let the Plotter listen to the event of Cursor Files loaded, so that it can reack recalculating if needed. */
@@ -257,7 +258,7 @@ function newTimelineChart() {
                     productPlotter.plotter.profile.label = pProductCard.bot.displayName;
                     productPlotter.plotter.profile.imageId = imageId;
 
-                    canvas.floatingSpace.createNewBall(productPlotter.plotter.profile, thisObject.container)
+                    productPlotter.profile = canvas.floatingSpace.createNewBall(productPlotter.plotter.profile, thisObject.container)
 
                 }
 
@@ -303,6 +304,12 @@ function newTimelineChart() {
 
                 if (productPlotters[i].productCard.code === pProductCard.code) {
 
+                    if (productPlotters[i].profile !== undefined) {
+
+                        canvas.floatingSpace.destroyBall(productPlotters[i].profile);
+
+                    }
+
                     productPlotters.splice(i, 1); // Delete item from array.
 
                 }