From 0ef1f8c2c83ed6a3a4cb5e1df6251b3a3a0fe772 Mon Sep 17 00:00:00 2001
From: John <john@viam.com>
Date: Tue, 4 Apr 2023 13:42:56 -0400
Subject: [PATCH 01/12] add color map for slam frontend

---
 web/frontend/package.json                     |  2 +-
 .../src/components/slam-2d-render.vue         | 50 +++++++++++++++++++
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/web/frontend/package.json b/web/frontend/package.json
index 4771803b222..dbf7d707ec5 100644
--- a/web/frontend/package.json
+++ b/web/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/remote-control",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
diff --git a/web/frontend/src/components/slam-2d-render.vue b/web/frontend/src/components/slam-2d-render.vue
index 8f1ade9e2d0..2ed68e06350 100644
--- a/web/frontend/src/components/slam-2d-render.vue
+++ b/web/frontend/src/components/slam-2d-render.vue
@@ -8,6 +8,34 @@ import { MapControls } from 'three/examples/jsm/controls/OrbitControls';
 import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader';
 import type { commonApi } from '@viamrobotics/sdk';
 
+// this color map is viridis
+const colorMapViridis = [
+  [253, 231, 37],
+  [181, 222, 43],
+  [110, 206, 88],
+  [53, 183, 121],
+  [31, 158, 137],
+  [38, 130, 142],
+  [49, 104, 142],
+  [62, 73, 137],
+  [72, 40, 120],
+  [68,1,84]
+]
+
+// this color map is greyscale
+const colorMapGrey = [
+  [247, 247, 247],
+  [239, 239, 239],
+  [223, 223, 223],
+  [202, 202, 202],
+  [168, 168, 168],
+  [135, 135, 135],
+  [109, 109, 109],
+  [95, 95, 95],
+  [74, 74, 74],
+  [0, 0, 0]
+]
+
 const props = defineProps<{
   name: string
 
@@ -110,6 +138,14 @@ const updateCloud = (pointcloud: Uint8Array) => {
   intersectionPlane.position.set(center.x, 0, center.z);
   raycaster.objects = [intersectionPlane];
 
+  const colors = points.geometry.attributes.color;
+  colors
+  
+  for(let i = 0; i < colors.count; i+=1){
+    const viridis = colorBuckets(colors.getZ(i));
+    colors.setXYZ(i,viridis['x'],viridis['y'],viridis['z']);
+  }
+// debugger
   scene.add(points);
   scene.add(marker);
   scene.add(intersectionPlane);
@@ -122,6 +158,20 @@ const updatePose = (newPose: commonApi.Pose) => {
   marker.position.setZ(z);
 };
 
+const colorBuckets = (currColor: number): THREE.Vector3 =>{
+  // if (currColor == 0){
+  //   return new THREE.Vector3(.8,.8,.8)
+  // }
+  return colorMapGrey.map(([a,b,c]) => 
+  new THREE.Vector3(a,b,c).multiplyScalar(1/255)
+  )[probToColorMapBucket(currColor, colorMapGrey.length)]
+}
+
+const probToColorMapBucket = (normProb: number, numBuckets: number): number =>{ 
+  const prob = normProb*255
+  return Math.floor((numBuckets-1)*prob/100)
+}
+
 onMounted(() => {
   container?.append(canvas);
 

From d8ca9e3bda8b0a3a2569a5907ac6506c7b0d3462 Mon Sep 17 00:00:00 2001
From: John <john@viam.com>
Date: Tue, 4 Apr 2023 14:10:05 -0400
Subject: [PATCH 02/12] small tweaks

---
 .../src/components/slam-2d-render.vue         | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/web/frontend/src/components/slam-2d-render.vue b/web/frontend/src/components/slam-2d-render.vue
index 2ed68e06350..493a968baea 100644
--- a/web/frontend/src/components/slam-2d-render.vue
+++ b/web/frontend/src/components/slam-2d-render.vue
@@ -8,19 +8,19 @@ import { MapControls } from 'three/examples/jsm/controls/OrbitControls';
 import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader';
 import type { commonApi } from '@viamrobotics/sdk';
 
-// this color map is viridis
-const colorMapViridis = [
-  [253, 231, 37],
-  [181, 222, 43],
-  [110, 206, 88],
-  [53, 183, 121],
-  [31, 158, 137],
-  [38, 130, 142],
-  [49, 104, 142],
-  [62, 73, 137],
-  [72, 40, 120],
-  [68,1,84]
-]
+// // this color map is viridis. Leaving commented for if we want to change the color map
+// const colorMapViridis = [
+//   [253, 231, 37],
+//   [181, 222, 43],
+//   [110, 206, 88],
+//   [53, 183, 121],
+//   [31, 158, 137],
+//   [38, 130, 142],
+//   [49, 104, 142],
+//   [62, 73, 137],
+//   [72, 40, 120],
+//   [68,1,84]
+// ]
 
 // this color map is greyscale
 const colorMapGrey = [
@@ -139,13 +139,12 @@ const updateCloud = (pointcloud: Uint8Array) => {
   raycaster.objects = [intersectionPlane];
 
   const colors = points.geometry.attributes.color;
-  colors
   
   for(let i = 0; i < colors.count; i+=1){
-    const viridis = colorBuckets(colors.getZ(i));
-    colors.setXYZ(i,viridis['x'],viridis['y'],viridis['z']);
+    const colorMapPoint = colorBuckets(colors.getZ(i));
+    colors.setXYZ(i,colorMapPoint['x'],colorMapPoint['y'],colorMapPoint['z']);
   }
-// debugger
+  
   scene.add(points);
   scene.add(marker);
   scene.add(intersectionPlane);
@@ -159,9 +158,6 @@ const updatePose = (newPose: commonApi.Pose) => {
 };
 
 const colorBuckets = (currColor: number): THREE.Vector3 =>{
-  // if (currColor == 0){
-  //   return new THREE.Vector3(.8,.8,.8)
-  // }
   return colorMapGrey.map(([a,b,c]) => 
   new THREE.Vector3(a,b,c).multiplyScalar(1/255)
   )[probToColorMapBucket(currColor, colorMapGrey.length)]

From 066a6151247603afc387ccf720085d68e42f9a73 Mon Sep 17 00:00:00 2001
From: John <john@viam.com>
Date: Tue, 4 Apr 2023 15:21:09 -0400
Subject: [PATCH 03/12] linting

---
 .../src/components/slam-2d-render.vue         | 70 +++++++++++--------
 1 file changed, 39 insertions(+), 31 deletions(-)

diff --git a/web/frontend/src/components/slam-2d-render.vue b/web/frontend/src/components/slam-2d-render.vue
index 493a968baea..74c165b6d3b 100644
--- a/web/frontend/src/components/slam-2d-render.vue
+++ b/web/frontend/src/components/slam-2d-render.vue
@@ -8,19 +8,21 @@ import { MapControls } from 'three/examples/jsm/controls/OrbitControls';
 import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader';
 import type { commonApi } from '@viamrobotics/sdk';
 
-// // this color map is viridis. Leaving commented for if we want to change the color map
-// const colorMapViridis = [
-//   [253, 231, 37],
-//   [181, 222, 43],
-//   [110, 206, 88],
-//   [53, 183, 121],
-//   [31, 158, 137],
-//   [38, 130, 142],
-//   [49, 104, 142],
-//   [62, 73, 137],
-//   [72, 40, 120],
-//   [68,1,84]
-// ]
+/*
+ * // Leaving additional color map commented for if we want to change to a different scheme.
+ * // const colorMapViridis = [
+ * //   [253, 231, 37],
+ * //   [181, 222, 43],
+ * //   [110, 206, 88],
+ * //   [53, 183, 121],
+ * //   [31, 158, 137],
+ * //   [38, 130, 142],
+ * //   [49, 104, 142],
+ * //   [62, 73, 137],
+ * //   [72, 40, 120],
+ * //   [68,1,84]
+ * // ]
+ */
 
 // this color map is greyscale
 const colorMapGrey = [
@@ -33,8 +35,8 @@ const colorMapGrey = [
   [109, 109, 109],
   [95, 95, 95],
   [74, 74, 74],
-  [0, 0, 0]
-]
+  [0, 0, 0],
+];
 
 const props = defineProps<{
   name: string
@@ -106,6 +108,21 @@ const disposeScene = () => {
   scene.clear();
 };
 
+// Find the desired color bucket for a given probability. This assumes the probability will be a value from 0 to 100
+const probToColorMapBucket = (normProb: number, numBuckets: number): number => {
+  const prob = Math.max(Math.min(100, normProb * 255), 0);
+  return Math.floor((numBuckets - 1) * prob / 100);
+};
+
+/*
+ * Map the color of a pixel to a color bucket value.
+ * normProb is the probability value normalized by the size of a byte(255) to be between 0 to 1.
+ */
+const colorBuckets = (normProb: number): THREE.Vector3 => {
+  return colorMapGrey.map(([red, green, blue]) =>
+    new THREE.Vector3(red, green, blue).multiplyScalar(1 / 255))[probToColorMapBucket(normProb, colorMapGrey.length)]!;
+};
+
 const updateCloud = (pointcloud: Uint8Array) => {
   disposeScene();
 
@@ -139,12 +156,14 @@ const updateCloud = (pointcloud: Uint8Array) => {
   raycaster.objects = [intersectionPlane];
 
   const colors = points.geometry.attributes.color;
-  
-  for(let i = 0; i < colors.count; i+=1){
-    const colorMapPoint = colorBuckets(colors.getZ(i));
-    colors.setXYZ(i,colorMapPoint['x'],colorMapPoint['y'],colorMapPoint['z']);
+  // if the PCD has a color attribute defined, convert those colors using the colorMap
+  if (colors instanceof THREE.BufferAttribute || colors instanceof THREE.InterleavedBufferAttribute) {
+    for (let i = 0; i < colors.count; i += 1) {
+      const colorMapPoint = colorBuckets(colors.getZ(i));
+      colors.setXYZ(i, colorMapPoint.x, colorMapPoint.y, colorMapPoint.z);
+    }
   }
-  
+
   scene.add(points);
   scene.add(marker);
   scene.add(intersectionPlane);
@@ -157,17 +176,6 @@ const updatePose = (newPose: commonApi.Pose) => {
   marker.position.setZ(z);
 };
 
-const colorBuckets = (currColor: number): THREE.Vector3 =>{
-  return colorMapGrey.map(([a,b,c]) => 
-  new THREE.Vector3(a,b,c).multiplyScalar(1/255)
-  )[probToColorMapBucket(currColor, colorMapGrey.length)]
-}
-
-const probToColorMapBucket = (normProb: number, numBuckets: number): number =>{ 
-  const prob = normProb*255
-  return Math.floor((numBuckets-1)*prob/100)
-}
-
 onMounted(() => {
   container?.append(canvas);
 

From 328a6dafb6b1caae0b0e2f7ff7e44763f59b587e Mon Sep 17 00:00:00 2001
From: John <john@viam.com>
Date: Wed, 5 Apr 2023 15:47:46 -0400
Subject: [PATCH 04/12] add links to color maps

---
 web/frontend/src/components/slam-2d-render.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/frontend/src/components/slam-2d-render.vue b/web/frontend/src/components/slam-2d-render.vue
index 74c165b6d3b..30439ed4ade 100644
--- a/web/frontend/src/components/slam-2d-render.vue
+++ b/web/frontend/src/components/slam-2d-render.vue
@@ -10,6 +10,8 @@ import type { commonApi } from '@viamrobotics/sdk';
 
 /*
  * // Leaving additional color map commented for if we want to change to a different scheme.
+ * generated with: https://waldyrious.net/viridis-palette-generator/
+ * more info: https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html
  * // const colorMapViridis = [
  * //   [253, 231, 37],
  * //   [181, 222, 43],
@@ -24,7 +26,10 @@ import type { commonApi } from '@viamrobotics/sdk';
  * // ]
  */
 
-// this color map is greyscale
+/*
+ * this color map is greyscale
+ * generated with: https://grayscale.design/app
+ */
 const colorMapGrey = [
   [247, 247, 247],
   [239, 239, 239],

From 7225f6593cc8fa9150af9dd2f9117b4092343013 Mon Sep 17 00:00:00 2001
From: JohnN193 <92045055+JohnN193@users.noreply.github.com>
Date: Wed, 5 Apr 2023 15:51:09 -0400
Subject: [PATCH 05/12] Apply suggestions from code review

Co-authored-by: nicksanford <nicholascsanford@gmail.com>
---
 web/frontend/src/components/slam-2d-render.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/frontend/src/components/slam-2d-render.vue b/web/frontend/src/components/slam-2d-render.vue
index 30439ed4ade..a30fba45f6d 100644
--- a/web/frontend/src/components/slam-2d-render.vue
+++ b/web/frontend/src/components/slam-2d-render.vue
@@ -41,7 +41,9 @@ const colorMapGrey = [
   [95, 95, 95],
   [74, 74, 74],
   [0, 0, 0],
-];
+].map(([red, green, blue]) =>
+    new THREE.Vector3(red, green, blue).multiplyScalar(1 / 255));
+};
 
 const props = defineProps<{
   name: string
@@ -124,8 +126,7 @@ const probToColorMapBucket = (normProb: number, numBuckets: number): number => {
  * normProb is the probability value normalized by the size of a byte(255) to be between 0 to 1.
  */
 const colorBuckets = (normProb: number): THREE.Vector3 => {
-  return colorMapGrey.map(([red, green, blue]) =>
-    new THREE.Vector3(red, green, blue).multiplyScalar(1 / 255))[probToColorMapBucket(normProb, colorMapGrey.length)]!;
+  return colorMapGrey[probToColorMapBucket(normProb, colorMapGrey.length)]!;
 };
 
 const updateCloud = (pointcloud: Uint8Array) => {

From 8808bc207cd56693392a838053076538366c0b87 Mon Sep 17 00:00:00 2001
From: John <john@viam.com>
Date: Wed, 5 Apr 2023 17:11:47 -0400
Subject: [PATCH 06/12] make lint

---
 web/frontend/src/components/slam-2d-render.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/frontend/src/components/slam-2d-render.vue b/web/frontend/src/components/slam-2d-render.vue
index a30fba45f6d..bca72e01ff4 100644
--- a/web/frontend/src/components/slam-2d-render.vue
+++ b/web/frontend/src/components/slam-2d-render.vue
@@ -42,8 +42,7 @@ const colorMapGrey = [
   [74, 74, 74],
   [0, 0, 0],
 ].map(([red, green, blue]) =>
-    new THREE.Vector3(red, green, blue).multiplyScalar(1 / 255));
-};
+  new THREE.Vector3(red, green, blue).multiplyScalar(1 / 255));
 
 const props = defineProps<{
   name: string

From 36a91451a5e5046d2542a6a0484509c1a9df630f Mon Sep 17 00:00:00 2001
From: John <john@viam.com>
Date: Thu, 6 Apr 2023 12:12:39 -0400
Subject: [PATCH 07/12] add comments for tickets

---
 web/frontend/src/components/slam-2d-render.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/web/frontend/src/components/slam-2d-render.vue b/web/frontend/src/components/slam-2d-render.vue
index bca72e01ff4..0e6894b0234 100644
--- a/web/frontend/src/components/slam-2d-render.vue
+++ b/web/frontend/src/components/slam-2d-render.vue
@@ -114,7 +114,10 @@ const disposeScene = () => {
   scene.clear();
 };
 
-// Find the desired color bucket for a given probability. This assumes the probability will be a value from 0 to 100
+/*
+ * Find the desired color bucket for a given probability. This assumes the probability will be a value from 0 to 100
+ * ticket to add testing: https://viam.atlassian.net/browse/RSDK-2606
+ */
 const probToColorMapBucket = (normProb: number, numBuckets: number): number => {
   const prob = Math.max(Math.min(100, normProb * 255), 0);
   return Math.floor((numBuckets - 1) * prob / 100);
@@ -123,6 +126,7 @@ const probToColorMapBucket = (normProb: number, numBuckets: number): number => {
 /*
  * Map the color of a pixel to a color bucket value.
  * normProb is the probability value normalized by the size of a byte(255) to be between 0 to 1.
+ * ticket to add testing: https://viam.atlassian.net/browse/RSDK-2606
  */
 const colorBuckets = (normProb: number): THREE.Vector3 => {
   return colorMapGrey[probToColorMapBucket(normProb, colorMapGrey.length)]!;
@@ -164,6 +168,11 @@ const updateCloud = (pointcloud: Uint8Array) => {
   // if the PCD has a color attribute defined, convert those colors using the colorMap
   if (colors instanceof THREE.BufferAttribute || colors instanceof THREE.InterleavedBufferAttribute) {
     for (let i = 0; i < colors.count; i += 1) {
+
+      /*
+       * Probability is currently assumed to be held in the rgb field of the PCD map, on a scale of 0 to 100.
+       * ticket to look into this further https://viam.atlassian.net/browse/RSDK-2605
+       */
       const colorMapPoint = colorBuckets(colors.getZ(i));
       colors.setXYZ(i, colorMapPoint.x, colorMapPoint.y, colorMapPoint.z);
     }

From 5ad251859d8b2cdf423b30b349db79427ef0686a Mon Sep 17 00:00:00 2001
From: John <john@viam.com>
Date: Thu, 6 Apr 2023 12:15:30 -0400
Subject: [PATCH 08/12] bump rc version

---
 web/frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/frontend/package.json b/web/frontend/package.json
index 8ef3210bd5c..c5ea23be22b 100644
--- a/web/frontend/package.json
+++ b/web/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/remote-control",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "license": "Apache-2.0",
   "type": "module",
   "files": [

From 4f7df84009e9cbca20f06994decc31df99478c7b Mon Sep 17 00:00:00 2001
From: John <john@viam.com>
Date: Thu, 6 Apr 2023 14:09:46 -0400
Subject: [PATCH 09/12] more comments

---
 .../src/components/slam-2d-render.vue         | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/web/frontend/src/components/slam-2d-render.vue b/web/frontend/src/components/slam-2d-render.vue
index 671c2a79854..28d334194f1 100644
--- a/web/frontend/src/components/slam-2d-render.vue
+++ b/web/frontend/src/components/slam-2d-render.vue
@@ -9,25 +9,8 @@ import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader';
 import type { commonApi } from '@viamrobotics/sdk';
 
 /*
- * // Leaving additional color map commented for if we want to change to a different scheme.
- * generated with: https://waldyrious.net/viridis-palette-generator/
- * more info: https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html
- * // const colorMapViridis = [
- * //   [253, 231, 37],
- * //   [181, 222, 43],
- * //   [110, 206, 88],
- * //   [53, 183, 121],
- * //   [31, 158, 137],
- * //   [38, 130, 142],
- * //   [49, 104, 142],
- * //   [62, 73, 137],
- * //   [72, 40, 120],
- * //   [68,1,84]
- * // ]
- */
-
-/*
- * this color map is greyscale
+ * this color map is greyscale. The color map is being used map probability values of a PCD
+ * into different color buckets provided by the color map.
  * generated with: https://grayscale.design/app
  */
 const colorMapGrey = [
@@ -44,6 +27,25 @@ const colorMapGrey = [
 ].map(([red, green, blue]) =>
   new THREE.Vector3(red, green, blue).multiplyScalar(1 / 255));
 
+/*
+ * // Leaving additional color map commented for if we want to change to a different scheme.
+ * generated with: https://waldyrious.net/viridis-palette-generator/
+ * more info: https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html
+ * // const colorMapViridis = [
+ * //   [253, 231, 37],
+ * //   [181, 222, 43],
+ * //   [110, 206, 88],
+ * //   [53, 183, 121],
+ * //   [31, 158, 137],
+ * //   [38, 130, 142],
+ * //   [49, 104, 142],
+ * //   [62, 73, 137],
+ * //   [72, 40, 120],
+ * //   [68,1,84]
+ * // ].map(([red, green, blue]) =>
+ * // new THREE.Vector3(red, green, blue).multiplyScalar(1 / 255));
+ */
+
 const props = defineProps<{
   name: string
 

From a6d7e6f55c2d96615c6b23668492346bd0305043 Mon Sep 17 00:00:00 2001
From: John <john@viam.com>
Date: Mon, 10 Apr 2023 16:36:33 -0400
Subject: [PATCH 10/12] address comments

---
 .../src/components/slam-2d-render.vue         | 33 ++++---------------
 1 file changed, 7 insertions(+), 26 deletions(-)

diff --git a/web/frontend/src/components/slam-2d-render.vue b/web/frontend/src/components/slam-2d-render.vue
index 28d334194f1..ca258cae61c 100644
--- a/web/frontend/src/components/slam-2d-render.vue
+++ b/web/frontend/src/components/slam-2d-render.vue
@@ -27,25 +27,6 @@ const colorMapGrey = [
 ].map(([red, green, blue]) =>
   new THREE.Vector3(red, green, blue).multiplyScalar(1 / 255));
 
-/*
- * // Leaving additional color map commented for if we want to change to a different scheme.
- * generated with: https://waldyrious.net/viridis-palette-generator/
- * more info: https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html
- * // const colorMapViridis = [
- * //   [253, 231, 37],
- * //   [181, 222, 43],
- * //   [110, 206, 88],
- * //   [53, 183, 121],
- * //   [31, 158, 137],
- * //   [38, 130, 142],
- * //   [49, 104, 142],
- * //   [62, 73, 137],
- * //   [72, 40, 120],
- * //   [68,1,84]
- * // ].map(([red, green, blue]) =>
- * // new THREE.Vector3(red, green, blue).multiplyScalar(1 / 255));
- */
-
 const props = defineProps<{
   name: string
 
@@ -120,18 +101,18 @@ const disposeScene = () => {
  * Find the desired color bucket for a given probability. This assumes the probability will be a value from 0 to 100
  * ticket to add testing: https://viam.atlassian.net/browse/RSDK-2606
  */
-const probToColorMapBucket = (normProb: number, numBuckets: number): number => {
-  const prob = Math.max(Math.min(100, normProb * 255), 0);
+const probToColorMapBucket = (probability: number, numBuckets: number): number => {
+  const prob = Math.max(Math.min(100, probability * 255), 0);
   return Math.floor((numBuckets - 1) * prob / 100);
 };
 
 /*
  * Map the color of a pixel to a color bucket value.
- * normProb is the probability value normalized by the size of a byte(255) to be between 0 to 1.
+ * probability represents the probability value normalized by the size of a byte(255) to be between 0 to 1.
  * ticket to add testing: https://viam.atlassian.net/browse/RSDK-2606
  */
-const colorBuckets = (normProb: number): THREE.Vector3 => {
-  return colorMapGrey[probToColorMapBucket(normProb, colorMapGrey.length)]!;
+const colorBuckets = (probability: number): THREE.Vector3 => {
+  return colorMapGrey[probToColorMapBucket(probability, colorMapGrey.length)]!;
 };
 
 const updateCloud = (pointcloud: Uint8Array) => {
@@ -168,9 +149,9 @@ const updateCloud = (pointcloud: Uint8Array) => {
 
   const colors = points.geometry.attributes.color;
   // if the PCD has a color attribute defined, convert those colors using the colorMap
-  if (colors instanceof THREE.BufferAttribute || colors instanceof THREE.InterleavedBufferAttribute) {
+  if (colors instanceof THREE.BufferAttribute) {
     for (let i = 0; i < colors.count; i += 1) {
-
+      colors
       /*
        * Probability is currently assumed to be held in the rgb field of the PCD map, on a scale of 0 to 100.
        * ticket to look into this further https://viam.atlassian.net/browse/RSDK-2605

From daa884a3baf2ea4c054ba91ccf4fc726ee8f9992 Mon Sep 17 00:00:00 2001
From: John <john@viam.com>
Date: Mon, 10 Apr 2023 16:37:33 -0400
Subject: [PATCH 11/12] bump RC

---
 web/frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/frontend/package.json b/web/frontend/package.json
index c5ea23be22b..6c37128685d 100644
--- a/web/frontend/package.json
+++ b/web/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/remote-control",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "license": "Apache-2.0",
   "type": "module",
   "files": [

From c206cae80dc0950a44aa74ef61528a6951bf1623 Mon Sep 17 00:00:00 2001
From: John <john@viam.com>
Date: Mon, 10 Apr 2023 16:43:51 -0400
Subject: [PATCH 12/12] make lint

---
 web/frontend/src/components/slam-2d-render.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/frontend/src/components/slam-2d-render.vue b/web/frontend/src/components/slam-2d-render.vue
index ca258cae61c..287add6c61d 100644
--- a/web/frontend/src/components/slam-2d-render.vue
+++ b/web/frontend/src/components/slam-2d-render.vue
@@ -151,7 +151,7 @@ const updateCloud = (pointcloud: Uint8Array) => {
   // if the PCD has a color attribute defined, convert those colors using the colorMap
   if (colors instanceof THREE.BufferAttribute) {
     for (let i = 0; i < colors.count; i += 1) {
-      colors
+
       /*
        * Probability is currently assumed to be held in the rgb field of the PCD map, on a scale of 0 to 100.
        * ticket to look into this further https://viam.atlassian.net/browse/RSDK-2605