Do not draw data sphere for points with intensity < 0: they have been skipped

js/client/utils/shapes/energy-line.js

@@ -108,11 +108,13 @@ class EnergyLine extends TrajectoryLine {
         for (let i = 0; i < this._intervals + 1; i++) {
 
             let position = new THREE.Vector3(0, 0, i * delta);
+            let intensity = this._data[i];
 
             // Draw a data sphere.
-            if (i < this._data.length) {
+            // Do not draw the sphere if intensity < 0 i.e. point has been skipped.
+            if (i < this._data.length && intensity >= 0) {
                 let dataMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, depthTest: true, transparent: false});
-                const color = mapColor(this._data[i], 0, clientSettings.maxIntensity);
+                const color = mapColor(intensity, 0, clientSettings.maxIntensity);
                 dataMaterial.color.setRGB(color.r / 255, color.g / 255, color.b / 255);
                 let sphere = new THREE.Mesh(this.sphereGeometry, dataMaterial);
                 sphere.scale.multiplyScalar(zSphereRadius);

js/client/views/panels/trajectory-settings-view.js

@@ -13,7 +13,7 @@ class TrajectorySettingsPanelView {
                 <input class='col-sm-6 custom-range' type="range" min="1" max="1000" value="1000" class="slider" id="energyScaleRange">
             </div>
             <div class='row'>
-                <label class='col-sm-3' for='dataSphereRadius'>Data Sphere Radius</label>
+                <label class='col-sm-3' for='dataSphereRadius'>Data Radius</label>
                 <input class='col-sm-2 type='text' name='dataSphereRadius' id='dataSphereRadius' />
                 <input class='col-sm-6 custom-range' type="range" min="0" max="900" value="400" class="slider" id="dataSphereRadiusRange">
             </div>