From b76d4ad3f4fffdc97695fcb6ad569835d838e4fc Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Tue, 16 Jul 2024 11:04:29 -0700
Subject: [PATCH 01/16] Basic example of tags using canvas elements

---
 fission/src/systems/scene/SceneRenderer.ts | 26 ++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 2617401501..fc32c8d636 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -126,6 +126,32 @@ class SceneRenderer extends WorldSystem {
         // Orbit controls
         this._orbitControls = new OrbitControls(this._mainCamera, this._renderer.domElement)
         this._orbitControls.update()
+
+
+
+        /* Creating a canvas example for text labels*/
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        canvas.width = 256;
+        canvas.height = 128;
+
+        if (!context) return
+        context.fillStyle = 'rgba(255, 255, 255, 1.0)';
+        context.fillRect(0, 0, canvas.width, canvas.height);
+        context.fillStyle = 'black';
+        context.font = '48px Arial';
+        context.textAlign = 'center';
+        context.textBaseline = 'middle';
+        context.fillText('Tag', canvas.width / 2, canvas.height / 2);
+
+        // Create a texture from the canvas
+        const texture = new THREE.CanvasTexture(canvas);
+
+        // Create a plane and apply the canvas texture
+        const planeGeometry = new THREE.PlaneGeometry(1, 0.5);
+        const planeMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
+        const tagPlane = new THREE.Mesh(planeGeometry, planeMaterial);
+        this.scene.add(tagPlane);
     }
 
     public UpdateCanvasSize() {

From 482b059f1d3586ccb27fb202033b554ef149c64a Mon Sep 17 00:00:00 2001
From: KyroVibe <hunter.barclay18@gmail.com>
Date: Tue, 16 Jul 2024 12:43:55 -0600
Subject: [PATCH 02/16] mocked up what I want

---
 fission/src/Synthesis.tsx                     |  2 +
 fission/src/mirabuf/MirabufSceneObject.ts     |  9 +++-
 fission/src/systems/scene/SceneRenderer.ts    |  9 ++++
 fission/src/ui/components/SceneOverlay.tsx    | 45 +++++++++++++++++++
 .../src/ui/components/SceneOverlayEvents.ts   | 44 ++++++++++++++++++
 5 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 fission/src/ui/components/SceneOverlay.tsx
 create mode 100644 fission/src/ui/components/SceneOverlayEvents.ts

diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
index 073246f140..6e4322b97d 100644
--- a/fission/src/Synthesis.tsx
+++ b/fission/src/Synthesis.tsx
@@ -58,6 +58,7 @@ import APS from "./aps/APS.ts"
 import ImportMirabufPanel from "@/ui/panels/mirabuf/ImportMirabufPanel.tsx"
 import Skybox from "./ui/components/Skybox.tsx"
 import ConfigureRobotModal from "./ui/modals/configuring/ConfigureRobotModal.tsx"
+import SceneOverlay from "./ui/components/SceneOverlay.tsx"
 
 const DEFAULT_MIRA_PATH = "/api/mira/Robots/Team 2471 (2018)_v7.mira"
 
@@ -169,6 +170,7 @@ function Synthesis() {
                     >
                         <ToastProvider key="toast-provider">
                             <Scene useStats={true} key="scene-in-toast-provider" />
+                            <SceneOverlay />
                             <MainHUD key={"main-hud"} />
                             {panelElements.length > 0 && panelElements}
                             {modalElement && (
diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index b5d9970191..228b07200a 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -4,7 +4,7 @@ import MirabufInstance from "./MirabufInstance"
 import MirabufParser, { ParseErrorSeverity, RigidNodeId, RigidNodeReadOnly } from "./MirabufParser"
 import World from "@/systems/World"
 import Jolt from "@barclah/jolt-physics"
-import { JoltMat44_ThreeMatrix4 } from "@/util/TypeConversions"
+import { JoltMat44_ThreeMatrix4, JoltVec3_ThreeVector3, ThreeVector3_JoltVec3 } from "@/util/TypeConversions"
 import * as THREE from "three"
 import JOLT from "@/util/loading/JoltSyncLoader"
 import { BodyAssociate, LayerReserve } from "@/systems/physics/PhysicsSystem"
@@ -17,6 +17,7 @@ import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import { MiraType } from "./MirabufLoader"
 import IntakeSensorSceneObject from "./IntakeSensorSceneObject"
 import EjectableSceneObject from "./EjectableSceneObject"
+import { SceneOverlayTag } from "@/ui/components/SceneOverlayEvents"
 
 const DEBUG_BODIES = false
 
@@ -43,6 +44,8 @@ class MirabufSceneObject extends SceneObject {
     private _intakeSensor?: IntakeSensorSceneObject
     private _ejectable?: EjectableSceneObject
 
+    private _nameTag: SceneOverlayTag
+
     get mirabufInstance() {
         return this._mirabufInstance
     }
@@ -91,6 +94,8 @@ class MirabufSceneObject extends SceneObject {
         this.EnableTransformControls() // adding transform gizmo to mirabuf object on its creation
 
         this.getPreferences()
+
+        this._nameTag = new SceneOverlayTag("bob")
     }
 
     public Setup(): void {
@@ -205,6 +210,8 @@ class MirabufSceneObject extends SceneObject {
             x.computeBoundingBox()
             x.computeBoundingSphere()
         })
+
+        World.SceneRenderer.WorldToPixelSpace(JoltVec3_ThreeVector3(World.PhysicsSystem.GetBody(this.mechanism.GetBodyByNodeId(this.rootNodeId)!).GetCenterOfMassPosition()))
     }
 
     public Dispose(): void {
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index fc32c8d636..ac7e754354 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -10,6 +10,7 @@ import vertexShader from "@/shaders/vertex.glsl"
 import fragmentShader from "@/shaders/fragment.glsl"
 import { Theme } from "@/ui/ThemeContext"
 import InputSystem from "../input/InputSystem"
+import { PixelSpaceCoord } from "@/ui/components/SceneOverlayEvents"
 
 const CLEAR_COLOR = 0x121212
 const GROUND_COLOR = 0x4066c7
@@ -152,6 +153,9 @@ class SceneRenderer extends WorldSystem {
         const planeMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
         const tagPlane = new THREE.Mesh(planeGeometry, planeMaterial);
         this.scene.add(tagPlane);
+
+        const point = new THREE.Vector3(0,0,0)
+        point.applyMatrix4(this._mainCamera.projectionMatrix)
     }
 
     public UpdateCanvasSize() {
@@ -245,6 +249,11 @@ class SceneRenderer extends WorldSystem {
         return screenSpace.unproject(this.mainCamera)
     }
 
+    public WorldToPixelSpace(world: THREE.Vector3): PixelSpaceCoord {
+        const pixel = world.clone().applyMatrix4(this._mainCamera.projectionMatrix)
+        
+    }
+
     /** 
      * Updates the skybox colors based on the current theme
 
diff --git a/fission/src/ui/components/SceneOverlay.tsx b/fission/src/ui/components/SceneOverlay.tsx
new file mode 100644
index 0000000000..e3d243587b
--- /dev/null
+++ b/fission/src/ui/components/SceneOverlay.tsx
@@ -0,0 +1,45 @@
+import { Box } from "@mui/material"
+import { useEffect, useReducer } from "react"
+import { SceneOverlayTag, SceneOverlayTagEvent } from "./SceneOverlayEvents"
+
+const tagMap = new Map<number, SceneOverlayTag>()
+
+function SceneOverlay() {
+
+    // const [components, updateComponents] = useReducer(() => {
+    //     return [...tagMap.values()].map(x => <h1 key={x.id}>{x.text}</h1>)
+    // }, )
+
+    useEffect(() => {
+        const onTagUpdate = (e: Event) => {
+            const tagEvent = e as SceneOverlayTagEvent
+            const tag = tagEvent.tag
+            tagMap.set(tag.id, tag)
+        }
+
+        SceneOverlayTagEvent.Listen(onTagUpdate)
+
+        return () => {
+            SceneOverlayTagEvent.RemoveListener(onTagUpdate)
+        }
+    }, [])
+
+    return (
+        <Box
+            component="div"
+            display="flex"
+            sx={{
+                position: "fixed",
+                left: "0pt",
+                top: "0pt",
+                width: "100vw",
+                height: "100vh",
+                overflow: "hidden"
+            }}
+        >
+            { <></> }
+        </Box>
+    )
+}
+
+export default SceneOverlay
\ No newline at end of file
diff --git a/fission/src/ui/components/SceneOverlayEvents.ts b/fission/src/ui/components/SceneOverlayEvents.ts
new file mode 100644
index 0000000000..104a4756e5
--- /dev/null
+++ b/fission/src/ui/components/SceneOverlayEvents.ts
@@ -0,0 +1,44 @@
+let nextTagId = 0;
+
+export type PixelSpaceCoord = [number, number]
+
+export class SceneOverlayTag {
+    private _id: number
+    public text: string
+    public position: PixelSpaceCoord // Screen Space
+
+    public get id() { return this._id }
+
+    public constructor(text: string, position?: PixelSpaceCoord) {
+        this._id = nextTagId++
+
+        this.text = text
+        this.position = position ?? [0,0]
+    }
+
+    public Update() {
+        new SceneOverlayTagEvent(this)
+    }
+}
+
+export class SceneOverlayTagEvent extends Event {
+    private static readonly EVENT_KEY = "SceneOverlayTagEvent"
+
+    public tag: SceneOverlayTag
+
+    public constructor(tag: SceneOverlayTag) {
+        super(SceneOverlayTagEvent.EVENT_KEY)
+
+        this.tag = tag
+
+        window.dispatchEvent(this)
+    }
+
+    public static Listen(func: (e: Event) => void) {
+        window.addEventListener(SceneOverlayTagEvent.EVENT_KEY, func)
+    }
+
+    public static RemoveListener(func: (e: Event) => void) {
+        window.removeEventListener(SceneOverlayTagEvent.EVENT_KEY, func)
+    }
+}
\ No newline at end of file

From 8aaef1eb38a00150819149b398252b9a1aa83812 Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Tue, 16 Jul 2024 14:24:59 -0700
Subject: [PATCH 03/16] Created working tags that will append as more
 assemblies are created

---
 fission/src/mirabuf/MirabufSceneObject.ts     |  9 ++++-
 fission/src/systems/scene/SceneRenderer.ts    | 40 +++++--------------
 fission/src/ui/components/SceneOverlay.tsx    | 22 ++++++----
 .../src/ui/components/SceneOverlayEvents.ts   | 25 ++++++++++--
 4 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index db3bd017e4..505575b851 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -4,7 +4,7 @@ import MirabufInstance from "./MirabufInstance"
 import MirabufParser, { ParseErrorSeverity, RigidNodeId, RigidNodeReadOnly } from "./MirabufParser"
 import World from "@/systems/World"
 import Jolt from "@barclah/jolt-physics"
-import { JoltMat44_ThreeMatrix4, JoltVec3_ThreeVector3, ThreeVector3_JoltVec3 } from "@/util/TypeConversions"
+import { JoltMat44_ThreeMatrix4, JoltVec3_ThreeVector3 } from "@/util/TypeConversions"
 import * as THREE from "three"
 import JOLT from "@/util/loading/JoltSyncLoader"
 import { BodyAssociate, LayerReserve } from "@/systems/physics/PhysicsSystem"
@@ -95,6 +95,7 @@ class MirabufSceneObject extends SceneObject {
         this.getPreferences()
 
         this._nameTag = new SceneOverlayTag("bob")
+        this._nameTag.Update()
     }
 
     public Setup(): void {
@@ -205,7 +206,11 @@ class MirabufSceneObject extends SceneObject {
             x.computeBoundingSphere()
         })
 
-        World.SceneRenderer.WorldToPixelSpace(JoltVec3_ThreeVector3(World.PhysicsSystem.GetBody(this.mechanism.GetBodyByNodeId(this.rootNodeId)!).GetCenterOfMassPosition()))
+        World.SceneRenderer.WorldToPixelSpace(
+            JoltVec3_ThreeVector3(
+                World.PhysicsSystem.GetBody(this.mechanism.GetBodyByNodeId(this.rootNodeId)!).GetCenterOfMassPosition()
+            )
+        )
     }
 
     public Dispose(): void {
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index ac7e754354..2ac7ac1268 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -10,6 +10,7 @@ import vertexShader from "@/shaders/vertex.glsl"
 import fragmentShader from "@/shaders/fragment.glsl"
 import { Theme } from "@/ui/ThemeContext"
 import InputSystem from "../input/InputSystem"
+
 import { PixelSpaceCoord } from "@/ui/components/SceneOverlayEvents"
 
 const CLEAR_COLOR = 0x121212
@@ -127,35 +128,6 @@ class SceneRenderer extends WorldSystem {
         // Orbit controls
         this._orbitControls = new OrbitControls(this._mainCamera, this._renderer.domElement)
         this._orbitControls.update()
-
-
-
-        /* Creating a canvas example for text labels*/
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-        canvas.width = 256;
-        canvas.height = 128;
-
-        if (!context) return
-        context.fillStyle = 'rgba(255, 255, 255, 1.0)';
-        context.fillRect(0, 0, canvas.width, canvas.height);
-        context.fillStyle = 'black';
-        context.font = '48px Arial';
-        context.textAlign = 'center';
-        context.textBaseline = 'middle';
-        context.fillText('Tag', canvas.width / 2, canvas.height / 2);
-
-        // Create a texture from the canvas
-        const texture = new THREE.CanvasTexture(canvas);
-
-        // Create a plane and apply the canvas texture
-        const planeGeometry = new THREE.PlaneGeometry(1, 0.5);
-        const planeMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
-        const tagPlane = new THREE.Mesh(planeGeometry, planeMaterial);
-        this.scene.add(tagPlane);
-
-        const point = new THREE.Vector3(0,0,0)
-        point.applyMatrix4(this._mainCamera.projectionMatrix)
     }
 
     public UpdateCanvasSize() {
@@ -249,9 +221,17 @@ class SceneRenderer extends WorldSystem {
         return screenSpace.unproject(this.mainCamera)
     }
 
+    /**
+     * Convert world space coordinates to pixel space coordinates
+     *
+     * @param world World space coordinates
+     * @returns Pixel space coordinates
+     */
     public WorldToPixelSpace(world: THREE.Vector3): PixelSpaceCoord {
         const pixel = world.clone().applyMatrix4(this._mainCamera.projectionMatrix)
-        
+        const x = ((pixel.x + 1) / 2) * window.innerWidth
+        const y = ((-pixel.y + 1) / 2) * window.innerHeight
+        return [x, y]
     }
 
     /** 
diff --git a/fission/src/ui/components/SceneOverlay.tsx b/fission/src/ui/components/SceneOverlay.tsx
index e3d243587b..d0550af740 100644
--- a/fission/src/ui/components/SceneOverlay.tsx
+++ b/fission/src/ui/components/SceneOverlay.tsx
@@ -5,16 +5,22 @@ import { SceneOverlayTag, SceneOverlayTagEvent } from "./SceneOverlayEvents"
 const tagMap = new Map<number, SceneOverlayTag>()
 
 function SceneOverlay() {
+    /* h1 text for each tagMap tag */
+    const [components, updateComponents] = useReducer(() => {
+        return [...tagMap.values()].map(x => (
+            <h1 className="text-2xl text-white font-bold" key={x.id}>
+                {x.text}
+            </h1>
+        ))
+    }, [])
 
-    // const [components, updateComponents] = useReducer(() => {
-    //     return [...tagMap.values()].map(x => <h1 key={x.id}>{x.text}</h1>)
-    // }, )
-
+    /* Creating listener for tag events which  */
     useEffect(() => {
         const onTagUpdate = (e: Event) => {
             const tagEvent = e as SceneOverlayTagEvent
             const tag = tagEvent.tag
             tagMap.set(tag.id, tag)
+            updateComponents()
         }
 
         SceneOverlayTagEvent.Listen(onTagUpdate)
@@ -24,6 +30,7 @@ function SceneOverlay() {
         }
     }, [])
 
+    /* Render the overlay as a box that spans the entire screen and does not intercept any user interaction */
     return (
         <Box
             component="div"
@@ -34,12 +41,13 @@ function SceneOverlay() {
                 top: "0pt",
                 width: "100vw",
                 height: "100vh",
-                overflow: "hidden"
+                overflow: "hidden",
+                pointerEvents: "none",
             }}
         >
-            { <></> }
+            {components ?? <h1 className="text-2xl text-white font-bold">nothing</h1>}
         </Box>
     )
 }
 
-export default SceneOverlay
\ No newline at end of file
+export default SceneOverlay
diff --git a/fission/src/ui/components/SceneOverlayEvents.ts b/fission/src/ui/components/SceneOverlayEvents.ts
index 104a4756e5..63048e0e98 100644
--- a/fission/src/ui/components/SceneOverlayEvents.ts
+++ b/fission/src/ui/components/SceneOverlayEvents.ts
@@ -1,31 +1,46 @@
-let nextTagId = 0;
+let nextTagId = 0
 
+/* Coordinates for tags in world space */
 export type PixelSpaceCoord = [number, number]
 
+/**
+ * Represents a tag that can be displayed on the screen
+ *
+ * @param text The text to display
+ * @param position The position of the tag in screen space (default: [0,0])
+ */
 export class SceneOverlayTag {
     private _id: number
     public text: string
     public position: PixelSpaceCoord // Screen Space
 
-    public get id() { return this._id }
+    public get id() {
+        return this._id
+    }
 
+    /** Create a new tag */
     public constructor(text: string, position?: PixelSpaceCoord) {
         this._id = nextTagId++
 
         this.text = text
-        this.position = position ?? [0,0]
+        this.position = position ?? [0, 0]
     }
 
+    /** Update the tag's text */
     public Update() {
         new SceneOverlayTagEvent(this)
     }
 }
 
+/**
+ * Event handler that is run when a SceneOverlayTag is updated
+ */
 export class SceneOverlayTagEvent extends Event {
     private static readonly EVENT_KEY = "SceneOverlayTagEvent"
 
     public tag: SceneOverlayTag
 
+    /** Create a new event bound to a tag */
     public constructor(tag: SceneOverlayTag) {
         super(SceneOverlayTagEvent.EVENT_KEY)
 
@@ -34,11 +49,13 @@ export class SceneOverlayTagEvent extends Event {
         window.dispatchEvent(this)
     }
 
+    /** Listener for tag updates */
     public static Listen(func: (e: Event) => void) {
         window.addEventListener(SceneOverlayTagEvent.EVENT_KEY, func)
     }
 
+    /** Removing listener */
     public static RemoveListener(func: (e: Event) => void) {
         window.removeEventListener(SceneOverlayTagEvent.EVENT_KEY, func)
     }
-}
\ No newline at end of file
+}

From d1f76caa2bed1365620d5faf90e679b7d008bf7c Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Tue, 16 Jul 2024 14:55:09 -0700
Subject: [PATCH 04/16] Working name tag tracking I think

---
 fission/src/mirabuf/MirabufSceneObject.ts  |  8 +++++---
 fission/src/systems/scene/SceneRenderer.ts | 10 ++++++----
 fission/src/ui/components/SceneOverlay.tsx | 11 ++++++++---
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index 505575b851..89abcda069 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -94,8 +94,7 @@ class MirabufSceneObject extends SceneObject {
 
         this.getPreferences()
 
-        this._nameTag = new SceneOverlayTag("bob")
-        this._nameTag.Update()
+        this._nameTag = new SceneOverlayTag("Hunter Barclah")
     }
 
     public Setup(): void {
@@ -206,11 +205,14 @@ class MirabufSceneObject extends SceneObject {
             x.computeBoundingSphere()
         })
 
-        World.SceneRenderer.WorldToPixelSpace(
+        /* Updating the position of the name tag */
+        this._nameTag.position = World.SceneRenderer.WorldToPixelSpace(
             JoltVec3_ThreeVector3(
                 World.PhysicsSystem.GetBody(this.mechanism.GetBodyByNodeId(this.rootNodeId)!).GetCenterOfMassPosition()
             )
         )
+        // console.log(this._nameTag.position)
+        this._nameTag.Update()
     }
 
     public Dispose(): void {
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 2ac7ac1268..5609dd617e 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -222,15 +222,17 @@ class SceneRenderer extends WorldSystem {
     }
 
     /**
-     * Convert world space coordinates to pixel space coordinates
+     * Convert world space coordinates to screen space coordinates
      *
      * @param world World space coordinates
      * @returns Pixel space coordinates
      */
     public WorldToPixelSpace(world: THREE.Vector3): PixelSpaceCoord {
-        const pixel = world.clone().applyMatrix4(this._mainCamera.projectionMatrix)
-        const x = ((pixel.x + 1) / 2) * window.innerWidth
-        const y = ((-pixel.y + 1) / 2) * window.innerHeight
+        const screenSpace = world.project(this._mainCamera)
+        const widthHalf = window.innerWidth / 2
+        const heightHalf = window.innerHeight / 2
+        const x = (screenSpace.x * widthHalf) + widthHalf
+        const y = -(screenSpace.y * heightHalf) + heightHalf
         return [x, y]
     }
 
diff --git a/fission/src/ui/components/SceneOverlay.tsx b/fission/src/ui/components/SceneOverlay.tsx
index d0550af740..8d4ecb4b54 100644
--- a/fission/src/ui/components/SceneOverlay.tsx
+++ b/fission/src/ui/components/SceneOverlay.tsx
@@ -8,18 +8,23 @@ function SceneOverlay() {
     /* h1 text for each tagMap tag */
     const [components, updateComponents] = useReducer(() => {
         return [...tagMap.values()].map(x => (
-            <h1 className="text-2xl text-white font-bold" key={x.id}>
+            <h1
+                className="text-2xl text-white font-bold"
+                key={x.id}
+                style={{ position: "absolute", left: x.position[0], top: x.position[1] }}
+            >
                 {x.text}
             </h1>
         ))
     }, [])
 
-    /* Creating listener for tag events which  */
+    /* Creating listener for tag events to update tagMap and rerender overlay */
     useEffect(() => {
         const onTagUpdate = (e: Event) => {
             const tagEvent = e as SceneOverlayTagEvent
             const tag = tagEvent.tag
             tagMap.set(tag.id, tag)
+            // console.log(tag.position)
             updateComponents()
         }
 
@@ -45,7 +50,7 @@ function SceneOverlay() {
                 pointerEvents: "none",
             }}
         >
-            {components ?? <h1 className="text-2xl text-white font-bold">nothing</h1>}
+            {components ?? <></>}
         </Box>
     )
 }

From 44dcb350e5b32f4fa731178702d28795e67e1679 Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Tue, 16 Jul 2024 15:19:50 -0700
Subject: [PATCH 05/16] Styling nametags and only adding them to robots

---
 fission/src/mirabuf/MirabufSceneObject.ts  | 19 +++++++++++--------
 fission/src/ui/components/SceneOverlay.tsx | 22 ++++++++++++++++------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index 89abcda069..e8c31f0680 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -43,7 +43,7 @@ class MirabufSceneObject extends SceneObject {
     private _intakeSensor?: IntakeSensorSceneObject
     private _ejectable?: EjectableSceneObject
 
-    private _nameTag: SceneOverlayTag
+    private _nameTag: SceneOverlayTag | undefined
 
     get mirabufInstance() {
         return this._mirabufInstance
@@ -94,7 +94,9 @@ class MirabufSceneObject extends SceneObject {
 
         this.getPreferences()
 
-        this._nameTag = new SceneOverlayTag("Hunter Barclah")
+        // creating nametag
+        if (this.miraType === MiraType.ROBOT) 
+            this._nameTag = new SceneOverlayTag("Hunter Barclah")
     }
 
     public Setup(): void {
@@ -206,13 +208,14 @@ class MirabufSceneObject extends SceneObject {
         })
 
         /* Updating the position of the name tag */
-        this._nameTag.position = World.SceneRenderer.WorldToPixelSpace(
-            JoltVec3_ThreeVector3(
-                World.PhysicsSystem.GetBody(this.mechanism.GetBodyByNodeId(this.rootNodeId)!).GetCenterOfMassPosition()
+        if (this._nameTag) {
+            this._nameTag.position = World.SceneRenderer.WorldToPixelSpace(
+                JoltVec3_ThreeVector3(
+                    World.PhysicsSystem.GetBody(this.mechanism.GetBodyByNodeId(this.rootNodeId)!).GetCenterOfMassPosition()
+                )
             )
-        )
-        // console.log(this._nameTag.position)
-        this._nameTag.Update()
+            this._nameTag.Update()
+        }
     }
 
     public Dispose(): void {
diff --git a/fission/src/ui/components/SceneOverlay.tsx b/fission/src/ui/components/SceneOverlay.tsx
index 8d4ecb4b54..788d981e2b 100644
--- a/fission/src/ui/components/SceneOverlay.tsx
+++ b/fission/src/ui/components/SceneOverlay.tsx
@@ -8,13 +8,24 @@ function SceneOverlay() {
     /* h1 text for each tagMap tag */
     const [components, updateComponents] = useReducer(() => {
         return [...tagMap.values()].map(x => (
-            <h1
-                className="text-2xl text-white font-bold"
+            <div
                 key={x.id}
-                style={{ position: "absolute", left: x.position[0], top: x.position[1] }}
+                style={{
+                    position: "absolute",
+                    left: x.position[0],
+                    top: x.position[1],
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    borderRadius: "8px",
+                    padding: "8px",
+                }}
             >
-                {x.text}
-            </h1>
+                <h1
+                    className="text-2xl text-white font-sans"
+                    style={{ fontWeight: "bold" }}
+                >
+                    {x.text}
+                </h1>
+            </div>
         ))
     }, [])
 
@@ -24,7 +35,6 @@ function SceneOverlay() {
             const tagEvent = e as SceneOverlayTagEvent
             const tag = tagEvent.tag
             tagMap.set(tag.id, tag)
-            // console.log(tag.position)
             updateComponents()
         }
 

From 853fab96ec264d586d03a90ba1938247b8119aae Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Tue, 16 Jul 2024 15:22:25 -0700
Subject: [PATCH 06/16] Formatting

---
 fission/src/mirabuf/MirabufSceneObject.ts  | 7 ++++---
 fission/src/systems/scene/SceneRenderer.ts | 2 +-
 fission/src/ui/components/SceneOverlay.tsx | 5 +----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index e8c31f0680..1da952a1dd 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -95,8 +95,7 @@ class MirabufSceneObject extends SceneObject {
         this.getPreferences()
 
         // creating nametag
-        if (this.miraType === MiraType.ROBOT) 
-            this._nameTag = new SceneOverlayTag("Hunter Barclah")
+        if (this.miraType === MiraType.ROBOT) this._nameTag = new SceneOverlayTag("Hunter Barclah")
     }
 
     public Setup(): void {
@@ -211,7 +210,9 @@ class MirabufSceneObject extends SceneObject {
         if (this._nameTag) {
             this._nameTag.position = World.SceneRenderer.WorldToPixelSpace(
                 JoltVec3_ThreeVector3(
-                    World.PhysicsSystem.GetBody(this.mechanism.GetBodyByNodeId(this.rootNodeId)!).GetCenterOfMassPosition()
+                    World.PhysicsSystem.GetBody(
+                        this.mechanism.GetBodyByNodeId(this.rootNodeId)!
+                    ).GetCenterOfMassPosition()
                 )
             )
             this._nameTag.Update()
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 5609dd617e..b631a923a0 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -231,7 +231,7 @@ class SceneRenderer extends WorldSystem {
         const screenSpace = world.project(this._mainCamera)
         const widthHalf = window.innerWidth / 2
         const heightHalf = window.innerHeight / 2
-        const x = (screenSpace.x * widthHalf) + widthHalf
+        const x = screenSpace.x * widthHalf + widthHalf
         const y = -(screenSpace.y * heightHalf) + heightHalf
         return [x, y]
     }
diff --git a/fission/src/ui/components/SceneOverlay.tsx b/fission/src/ui/components/SceneOverlay.tsx
index 788d981e2b..6032de489f 100644
--- a/fission/src/ui/components/SceneOverlay.tsx
+++ b/fission/src/ui/components/SceneOverlay.tsx
@@ -19,10 +19,7 @@ function SceneOverlay() {
                     padding: "8px",
                 }}
             >
-                <h1
-                    className="text-2xl text-white font-sans"
-                    style={{ fontWeight: "bold" }}
-                >
+                <h1 className="text-2xl text-white font-sans" style={{ fontWeight: "bold" }}>
                     {x.text}
                 </h1>
             </div>

From 8889a4b9789a76ed241abe8d9eae85293c0455f2 Mon Sep 17 00:00:00 2001
From: KyroVibe <hunter.barclay18@gmail.com>
Date: Tue, 16 Jul 2024 16:24:43 -0600
Subject: [PATCH 07/16] Fixed glitchy effect

---
 fission/src/systems/scene/SceneRenderer.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index b631a923a0..2e29bb5a20 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -228,6 +228,7 @@ class SceneRenderer extends WorldSystem {
      * @returns Pixel space coordinates
      */
     public WorldToPixelSpace(world: THREE.Vector3): PixelSpaceCoord {
+        this._mainCamera.updateMatrixWorld()
         const screenSpace = world.project(this._mainCamera)
         const widthHalf = window.innerWidth / 2
         const heightHalf = window.innerHeight / 2

From 8bd21839cfe11a0e6b5f8ea7c93502761d33fe59 Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Tue, 16 Jul 2024 18:58:38 -0700
Subject: [PATCH 08/16] Finalized the overlay positioning and fixed the
 computation for the bounding box

---
 fission/src/mirabuf/MirabufSceneObject.ts  | 41 +++++++++++++++++-----
 fission/src/systems/scene/SceneRenderer.ts |  2 +-
 fission/src/ui/components/SceneOverlay.tsx |  2 ++
 3 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index 1da952a1dd..fe1b5e5ed2 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -4,7 +4,7 @@ import MirabufInstance from "./MirabufInstance"
 import MirabufParser, { ParseErrorSeverity, RigidNodeId, RigidNodeReadOnly } from "./MirabufParser"
 import World from "@/systems/World"
 import Jolt from "@barclah/jolt-physics"
-import { JoltMat44_ThreeMatrix4, JoltVec3_ThreeVector3 } from "@/util/TypeConversions"
+import { JoltMat44_ThreeMatrix4 } from "@/util/TypeConversions"
 import * as THREE from "three"
 import JOLT from "@/util/loading/JoltSyncLoader"
 import { BodyAssociate, LayerReserve } from "@/systems/physics/PhysicsSystem"
@@ -94,8 +94,10 @@ class MirabufSceneObject extends SceneObject {
 
         this.getPreferences()
 
-        // creating nametag
-        if (this.miraType === MiraType.ROBOT) this._nameTag = new SceneOverlayTag("Hunter Barclah")
+        // creating nametag for robots
+        if (this.miraType === MiraType.ROBOT) {
+            this._nameTag = new SceneOverlayTag("Hunter Barclah")
+        }
     }
 
     public Setup(): void {
@@ -208,13 +210,20 @@ class MirabufSceneObject extends SceneObject {
 
         /* Updating the position of the name tag */
         if (this._nameTag) {
-            this._nameTag.position = World.SceneRenderer.WorldToPixelSpace(
-                JoltVec3_ThreeVector3(
-                    World.PhysicsSystem.GetBody(
-                        this.mechanism.GetBodyByNodeId(this.rootNodeId)!
-                    ).GetCenterOfMassPosition()
-                )
+            const boundingBox = this.ComputeBoundingBox()
+            const centerPoint = new THREE.Vector3(
+                ((boundingBox.max.x + boundingBox.min.x) / 2 ),
+                boundingBox.max.y + 0.1,
+                (boundingBox.max.z + boundingBox.min.z) / 2
             )
+            const position = World.SceneRenderer.WorldToPixelSpace(centerPoint)
+            if (isNaN(position[0]) || isNaN(position[1])) {
+                console.warn(`Invalid position for nametag: ${this._nameTag.position}`)
+                this._nameTag.position = [0, 0]
+            } else {
+                this._nameTag.position = position
+            }
+
             this._nameTag.Update()
         }
     }
@@ -354,6 +363,20 @@ class MirabufSceneObject extends SceneObject {
         this.EnablePhysics()
     }
 
+    /**
+     * 
+     * @returns The bounding box of the mirabuf object.
+     */
+    private ComputeBoundingBox(): THREE.Box3 {
+        const box = new THREE.Box3()
+        this._mirabufInstance.batches.forEach(batch => {
+            if (batch.boundingBox) 
+                box.union(batch.boundingBox)
+        })
+    
+        return box
+    }
+
     private getPreferences(): void {
         this._intakePreferences = PreferencesSystem.getRobotPreferences(this.assemblyName)?.intake
         this._ejectorPreferences = PreferencesSystem.getRobotPreferences(this.assemblyName)?.ejector
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 2e29bb5a20..3031a2a6b6 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -222,7 +222,7 @@ class SceneRenderer extends WorldSystem {
     }
 
     /**
-     * Convert world space coordinates to screen space coordinates
+     * Convert world space coordinates to screen space coordinates 
      *
      * @param world World space coordinates
      * @returns Pixel space coordinates
diff --git a/fission/src/ui/components/SceneOverlay.tsx b/fission/src/ui/components/SceneOverlay.tsx
index 6032de489f..31ab62b133 100644
--- a/fission/src/ui/components/SceneOverlay.tsx
+++ b/fission/src/ui/components/SceneOverlay.tsx
@@ -17,6 +17,8 @@ function SceneOverlay() {
                     backgroundColor: "rgba(0, 0, 0, 0.5)",
                     borderRadius: "8px",
                     padding: "8px",
+                    whiteSpace: "nowrap",
+                    transform: "translate(-50%, -100%)",
                 }}
             >
                 <h1 className="text-2xl text-white font-sans" style={{ fontWeight: "bold" }}>

From df08606ca31a796e624a57a7b05d1061bb7f9261 Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Tue, 16 Jul 2024 18:59:34 -0700
Subject: [PATCH 09/16] Formatting

---
 fission/src/mirabuf/MirabufSceneObject.ts  | 9 ++++-----
 fission/src/systems/scene/SceneRenderer.ts | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index fe1b5e5ed2..3cf5f9b3bd 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -212,7 +212,7 @@ class MirabufSceneObject extends SceneObject {
         if (this._nameTag) {
             const boundingBox = this.ComputeBoundingBox()
             const centerPoint = new THREE.Vector3(
-                ((boundingBox.max.x + boundingBox.min.x) / 2 ),
+                (boundingBox.max.x + boundingBox.min.x) / 2,
                 boundingBox.max.y + 0.1,
                 (boundingBox.max.z + boundingBox.min.z) / 2
             )
@@ -364,16 +364,15 @@ class MirabufSceneObject extends SceneObject {
     }
 
     /**
-     * 
+     *
      * @returns The bounding box of the mirabuf object.
      */
     private ComputeBoundingBox(): THREE.Box3 {
         const box = new THREE.Box3()
         this._mirabufInstance.batches.forEach(batch => {
-            if (batch.boundingBox) 
-                box.union(batch.boundingBox)
+            if (batch.boundingBox) box.union(batch.boundingBox)
         })
-    
+
         return box
     }
 
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 3031a2a6b6..2e29bb5a20 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -222,7 +222,7 @@ class SceneRenderer extends WorldSystem {
     }
 
     /**
-     * Convert world space coordinates to screen space coordinates 
+     * Convert world space coordinates to screen space coordinates
      *
      * @param world World space coordinates
      * @returns Pixel space coordinates

From ce8aac6df8595dc37bb9ea2dad6b7691a3f40352 Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Wed, 17 Jul 2024 11:40:45 -0700
Subject: [PATCH 10/16] Changed implementation to use references & optimized to
 only run update once per frame

---
 fission/src/mirabuf/MirabufSceneObject.ts     |  3 +-
 fission/src/systems/scene/SceneRenderer.ts    |  3 ++
 fission/src/ui/components/SceneOverlay.tsx    | 46 ++++++++++++++++---
 .../src/ui/components/SceneOverlayEvents.ts   | 40 +++++++++++++---
 4 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index 3cf5f9b3bd..58ac7c2fef 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -223,8 +223,6 @@ class MirabufSceneObject extends SceneObject {
             } else {
                 this._nameTag.position = position
             }
-
-            this._nameTag.Update()
         }
     }
 
@@ -243,6 +241,7 @@ class MirabufSceneObject extends SceneObject {
             World.PhysicsSystem.RemoveBodyAssocation(bodyId)
         })
 
+        this._nameTag?.Dispose()
         this.DisableTransformControls()
         World.SimulationSystem.UnregisterMechanism(this._mechanism)
         World.PhysicsSystem.DestroyMechanism(this._mechanism)
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 2e29bb5a20..3559de9c9b 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -12,6 +12,7 @@ import { Theme } from "@/ui/ThemeContext"
 import InputSystem from "../input/InputSystem"
 
 import { PixelSpaceCoord } from "@/ui/components/SceneOverlayEvents"
+import { SceneOverlayUpdateEvent } from "@/ui/components/SceneOverlay"
 
 const CLEAR_COLOR = 0x121212
 const GROUND_COLOR = 0x4066c7
@@ -153,6 +154,8 @@ class SceneRenderer extends WorldSystem {
             )
         })
 
+        new SceneOverlayUpdateEvent() // Update the tags
+
         this._composer.render(deltaT)
     }
 
diff --git a/fission/src/ui/components/SceneOverlay.tsx b/fission/src/ui/components/SceneOverlay.tsx
index 31ab62b133..6f4ae050b4 100644
--- a/fission/src/ui/components/SceneOverlay.tsx
+++ b/fission/src/ui/components/SceneOverlay.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@mui/material"
 import { useEffect, useReducer } from "react"
-import { SceneOverlayTag, SceneOverlayTagEvent } from "./SceneOverlayEvents"
+import { SceneOverlayTag, SceneOverlayTagAddEvent, SceneOverlayTagRemoveEvent } from "./SceneOverlayEvents"
 
 const tagMap = new Map<number, SceneOverlayTag>()
 
@@ -30,17 +30,31 @@ function SceneOverlay() {
 
     /* Creating listener for tag events to update tagMap and rerender overlay */
     useEffect(() => {
-        const onTagUpdate = (e: Event) => {
-            const tagEvent = e as SceneOverlayTagEvent
-            const tag = tagEvent.tag
-            tagMap.set(tag.id, tag)
+        const onTagAdd = (e: Event) => {
+            tagMap.set((e as SceneOverlayTagAddEvent).tag.id, (e as SceneOverlayTagAddEvent).tag)
+        }
+
+        const onTagRemove = (e: Event) => {
+            tagMap.delete((e as SceneOverlayTagRemoveEvent).tag.id)
+        }
+
+        const onUpdate = (_: Event) => {
             updateComponents()
         }
 
-        SceneOverlayTagEvent.Listen(onTagUpdate)
+        // listening for tags being added and removed
+        SceneOverlayTagAddEvent.Listen(onTagAdd)
+        SceneOverlayTagRemoveEvent.Listen(onTagRemove)
+
+        // listening for updates to the overlay every frame
+        SceneOverlayUpdateEvent.Listen(onUpdate)
 
+        // disposing all the tags and listeners when the scene is destroyed
         return () => {
-            SceneOverlayTagEvent.RemoveListener(onTagUpdate)
+            SceneOverlayTagAddEvent.RemoveListener(onTagAdd)
+            SceneOverlayTagRemoveEvent.RemoveListener(onTagRemove)
+            SceneOverlayUpdateEvent.RemoveListener(onUpdate)
+            tagMap.clear()
         }
     }, [])
 
@@ -65,3 +79,21 @@ function SceneOverlay() {
 }
 
 export default SceneOverlay
+
+export class SceneOverlayUpdateEvent extends Event {
+    private static readonly EVENT_KEY = "SceneOverlayUpdateEvent"
+
+    public constructor() {
+        super(SceneOverlayUpdateEvent.EVENT_KEY)
+
+        window.dispatchEvent(this)
+    }
+
+    public static Listen(func: (e: Event) => void) {
+        window.addEventListener(SceneOverlayUpdateEvent.EVENT_KEY, func)
+    }
+
+    public static RemoveListener(func: (e: Event) => void) {
+        window.removeEventListener(SceneOverlayUpdateEvent.EVENT_KEY, func)
+    }
+}
diff --git a/fission/src/ui/components/SceneOverlayEvents.ts b/fission/src/ui/components/SceneOverlayEvents.ts
index 63048e0e98..490b3a6bff 100644
--- a/fission/src/ui/components/SceneOverlayEvents.ts
+++ b/fission/src/ui/components/SceneOverlayEvents.ts
@@ -24,25 +24,26 @@ export class SceneOverlayTag {
 
         this.text = text
         this.position = position ?? [0, 0]
+        new SceneOverlayTagAddEvent(this)
     }
 
-    /** Update the tag's text */
-    public Update() {
-        new SceneOverlayTagEvent(this)
+    /** Removing the tag */
+    public Dispose() {
+        new SceneOverlayTagRemoveEvent(this)
     }
 }
 
 /**
  * Event handler that is run when a SceneOverlayTag is updated
  */
-export class SceneOverlayTagEvent extends Event {
+export class SceneOverlayTagAddEvent extends Event {
     private static readonly EVENT_KEY = "SceneOverlayTagEvent"
 
     public tag: SceneOverlayTag
 
     /** Create a new event bound to a tag */
     public constructor(tag: SceneOverlayTag) {
-        super(SceneOverlayTagEvent.EVENT_KEY)
+        super(SceneOverlayTagAddEvent.EVENT_KEY)
 
         this.tag = tag
 
@@ -51,11 +52,36 @@ export class SceneOverlayTagEvent extends Event {
 
     /** Listener for tag updates */
     public static Listen(func: (e: Event) => void) {
-        window.addEventListener(SceneOverlayTagEvent.EVENT_KEY, func)
+        window.addEventListener(SceneOverlayTagAddEvent.EVENT_KEY, func)
     }
 
     /** Removing listener */
     public static RemoveListener(func: (e: Event) => void) {
-        window.removeEventListener(SceneOverlayTagEvent.EVENT_KEY, func)
+        window.removeEventListener(SceneOverlayTagAddEvent.EVENT_KEY, func)
     }
 }
+
+export class SceneOverlayTagRemoveEvent extends Event {
+    private static readonly EVENT_KEY = "SceneOverlayTagRemoveEvent"
+
+    public tag: SceneOverlayTag
+
+    /** Create a new event bound to a tag */
+    public constructor(tag: SceneOverlayTag) {
+        super(SceneOverlayTagRemoveEvent.EVENT_KEY)
+
+        this.tag = tag
+
+        window.dispatchEvent(this)
+    }
+
+    /** Listener for tag updates */
+    public static Listen(func: (e: Event) => void) {
+        window.addEventListener(SceneOverlayTagRemoveEvent.EVENT_KEY, func)
+    }
+
+    /** Removing listener */
+    public static RemoveListener(func: (e: Event) => void) {
+        window.removeEventListener(SceneOverlayTagRemoveEvent.EVENT_KEY, func)
+    }
+}
\ No newline at end of file

From afa87f794b8e8de1ca224c43f537f10a63ba6583 Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Wed, 17 Jul 2024 11:46:04 -0700
Subject: [PATCH 11/16] Formatted

---
 fission/src/ui/components/SceneOverlayEvents.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fission/src/ui/components/SceneOverlayEvents.ts b/fission/src/ui/components/SceneOverlayEvents.ts
index 490b3a6bff..7f9a211918 100644
--- a/fission/src/ui/components/SceneOverlayEvents.ts
+++ b/fission/src/ui/components/SceneOverlayEvents.ts
@@ -84,4 +84,4 @@ export class SceneOverlayTagRemoveEvent extends Event {
     public static RemoveListener(func: (e: Event) => void) {
         window.removeEventListener(SceneOverlayTagRemoveEvent.EVENT_KEY, func)
     }
-}
\ No newline at end of file
+}

From 497d35d8580078a244659e1146d6cfc09fc68dd8 Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Wed, 17 Jul 2024 14:09:17 -0700
Subject: [PATCH 12/16] Added preference integration

---
 fission/src/mirabuf/MirabufSceneObject.ts     | 21 +++-----
 .../systems/preferences/PreferenceTypes.ts    |  2 +
 fission/src/systems/scene/SceneRenderer.ts    |  6 ++-
 fission/src/ui/components/SceneOverlay.tsx    | 47 +++++++++-------
 .../src/ui/components/SceneOverlayEvents.ts   | 54 +++++++++++++++++++
 .../ui/modals/configuring/SettingsModal.tsx   | 14 +++++
 6 files changed, 109 insertions(+), 35 deletions(-)

diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index 59de2f5bff..bec59203bd 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -214,21 +214,16 @@ class MirabufSceneObject extends SceneObject {
             x.computeBoundingSphere()
         })
 
-        /* Updating the position of the name tag */
-        if (this._nameTag) {
+        /* Updating the position of the name tag according to the robots position on screen */
+        if (this._nameTag && PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")) {
             const boundingBox = this.ComputeBoundingBox()
-            const centerPoint = new THREE.Vector3(
-                (boundingBox.max.x + boundingBox.min.x) / 2,
-                boundingBox.max.y + 0.1,
-                (boundingBox.max.z + boundingBox.min.z) / 2
+            this._nameTag.position = World.SceneRenderer.WorldToPixelSpace(
+                new THREE.Vector3(
+                    (boundingBox.max.x + boundingBox.min.x) / 2,
+                    boundingBox.max.y + 0.1,
+                    (boundingBox.max.z + boundingBox.min.z) / 2
+                )
             )
-            const position = World.SceneRenderer.WorldToPixelSpace(centerPoint)
-            if (isNaN(position[0]) || isNaN(position[1])) {
-                console.warn(`Invalid position for nametag: ${this._nameTag.position}`)
-                this._nameTag.position = [0, 0]
-            } else {
-                this._nameTag.position = position
-            }
         }
     }
 
diff --git a/fission/src/systems/preferences/PreferenceTypes.ts b/fission/src/systems/preferences/PreferenceTypes.ts
index abf7a702b7..9f088d7d97 100644
--- a/fission/src/systems/preferences/PreferenceTypes.ts
+++ b/fission/src/systems/preferences/PreferenceTypes.ts
@@ -10,6 +10,7 @@ export type GlobalPreference =
     | "ReportAnalytics"
     | "UseMetric"
     | "RenderScoringZones"
+    | "RenderSceneTags"
 
 export const RobotPreferencesKey: string = "Robots"
 export const FieldPreferencesKey: string = "Fields"
@@ -23,6 +24,7 @@ export const DefaultGlobalPreferences: { [key: string]: unknown } = {
     ReportAnalytics: false,
     UseMetric: false,
     RenderScoringZones: true,
+    RenderSceneTags: true,
 }
 
 export type IntakePreferences = {
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 3559de9c9b..cd1dbdd506 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -12,7 +12,8 @@ import { Theme } from "@/ui/ThemeContext"
 import InputSystem from "../input/InputSystem"
 
 import { PixelSpaceCoord } from "@/ui/components/SceneOverlayEvents"
-import { SceneOverlayUpdateEvent } from "@/ui/components/SceneOverlay"
+import { SceneOverlayUpdateEvent } from "@/ui/components/SceneOverlayEvents"
+import PreferencesSystem from "../preferences/PreferencesSystem"
 
 const CLEAR_COLOR = 0x121212
 const GROUND_COLOR = 0x4066c7
@@ -154,7 +155,8 @@ class SceneRenderer extends WorldSystem {
             )
         })
 
-        new SceneOverlayUpdateEvent() // Update the tags
+        // Update the tags if they are enabled
+        if (PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")) new SceneOverlayUpdateEvent()
 
         this._composer.render(deltaT)
     }
diff --git a/fission/src/ui/components/SceneOverlay.tsx b/fission/src/ui/components/SceneOverlay.tsx
index 6f4ae050b4..650afbe779 100644
--- a/fission/src/ui/components/SceneOverlay.tsx
+++ b/fission/src/ui/components/SceneOverlay.tsx
@@ -1,12 +1,23 @@
 import { Box } from "@mui/material"
-import { useEffect, useReducer } from "react"
-import { SceneOverlayTag, SceneOverlayTagAddEvent, SceneOverlayTagRemoveEvent } from "./SceneOverlayEvents"
+import { useEffect, useReducer, useState } from "react"
+import {
+    SceneOverlayTag,
+    SceneOverlayTagAddEvent,
+    SceneOverlayTagRemoveEvent,
+    SceneOverlayUpdateEvent,
+    SceneOverlayDisableEvent,
+    SceneOverlayEnableEvent,
+} from "./SceneOverlayEvents"
 
 const tagMap = new Map<number, SceneOverlayTag>()
 
 function SceneOverlay() {
+    const [isDisabled, setIsDisabled] = useState<boolean>(false)
+
     /* h1 text for each tagMap tag */
     const [components, updateComponents] = useReducer(() => {
+        if (isDisabled) return <></> // if the overlay is disabled, return nothing
+
         return [...tagMap.values()].map(x => (
             <div
                 key={x.id}
@@ -42,6 +53,16 @@ function SceneOverlay() {
             updateComponents()
         }
 
+        const onDisable = () => {
+            setIsDisabled(true)
+            updateComponents()
+        }
+
+        const onEnable = () => {
+            setIsDisabled(false)
+            updateComponents()
+        }
+
         // listening for tags being added and removed
         SceneOverlayTagAddEvent.Listen(onTagAdd)
         SceneOverlayTagRemoveEvent.Listen(onTagRemove)
@@ -49,6 +70,10 @@ function SceneOverlay() {
         // listening for updates to the overlay every frame
         SceneOverlayUpdateEvent.Listen(onUpdate)
 
+        // listening for disabling and enabling scene tags
+        SceneOverlayDisableEvent.Listen(onDisable)
+        SceneOverlayEnableEvent.Listen(onEnable)
+
         // disposing all the tags and listeners when the scene is destroyed
         return () => {
             SceneOverlayTagAddEvent.RemoveListener(onTagAdd)
@@ -79,21 +104,3 @@ function SceneOverlay() {
 }
 
 export default SceneOverlay
-
-export class SceneOverlayUpdateEvent extends Event {
-    private static readonly EVENT_KEY = "SceneOverlayUpdateEvent"
-
-    public constructor() {
-        super(SceneOverlayUpdateEvent.EVENT_KEY)
-
-        window.dispatchEvent(this)
-    }
-
-    public static Listen(func: (e: Event) => void) {
-        window.addEventListener(SceneOverlayUpdateEvent.EVENT_KEY, func)
-    }
-
-    public static RemoveListener(func: (e: Event) => void) {
-        window.removeEventListener(SceneOverlayUpdateEvent.EVENT_KEY, func)
-    }
-}
diff --git a/fission/src/ui/components/SceneOverlayEvents.ts b/fission/src/ui/components/SceneOverlayEvents.ts
index 7f9a211918..2f11ff71ea 100644
--- a/fission/src/ui/components/SceneOverlayEvents.ts
+++ b/fission/src/ui/components/SceneOverlayEvents.ts
@@ -85,3 +85,57 @@ export class SceneOverlayTagRemoveEvent extends Event {
         window.removeEventListener(SceneOverlayTagRemoveEvent.EVENT_KEY, func)
     }
 }
+
+export class SceneOverlayUpdateEvent extends Event {
+    private static readonly EVENT_KEY = "SceneOverlayUpdateEvent"
+
+    public constructor() {
+        super(SceneOverlayUpdateEvent.EVENT_KEY)
+
+        window.dispatchEvent(this)
+    }
+
+    public static Listen(func: (e: Event) => void) {
+        window.addEventListener(SceneOverlayUpdateEvent.EVENT_KEY, func)
+    }
+
+    public static RemoveListener(func: (e: Event) => void) {
+        window.removeEventListener(SceneOverlayUpdateEvent.EVENT_KEY, func)
+    }
+}
+
+export class SceneOverlayDisableEvent extends Event {
+    private static readonly EVENT_KEY = "SceneOverlayDisableEvent"
+
+    public constructor() {
+        super(SceneOverlayDisableEvent.EVENT_KEY)
+
+        window.dispatchEvent(this)
+    }
+
+    public static Listen(func: (e: Event) => void) {
+        window.addEventListener(SceneOverlayDisableEvent.EVENT_KEY, func)
+    }
+
+    public static RemoveListener(func: (e: Event) => void) {
+        window.removeEventListener(SceneOverlayDisableEvent.EVENT_KEY, func)
+    }
+}
+
+export class SceneOverlayEnableEvent extends Event {
+    private static readonly EVENT_KEY = "SceneOverlayEnableEvent"
+
+    public constructor() {
+        super(SceneOverlayEnableEvent.EVENT_KEY)
+
+        window.dispatchEvent(this)
+    }
+
+    public static Listen(func: (e: Event) => void) {
+        window.addEventListener(SceneOverlayEnableEvent.EVENT_KEY, func)
+    }
+
+    public static RemoveListener(func: (e: Event) => void) {
+        window.removeEventListener(SceneOverlayEnableEvent.EVENT_KEY, func)
+    }
+}
diff --git a/fission/src/ui/modals/configuring/SettingsModal.tsx b/fission/src/ui/modals/configuring/SettingsModal.tsx
index 017c2d392e..9cf818a769 100644
--- a/fission/src/ui/modals/configuring/SettingsModal.tsx
+++ b/fission/src/ui/modals/configuring/SettingsModal.tsx
@@ -8,6 +8,7 @@ import Button from "@/components/Button"
 import Slider from "@/components/Slider"
 import Checkbox from "@/components/Checkbox"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
+import { SceneOverlayDisableEvent, SceneOverlayEnableEvent } from "@/ui/components/SceneOverlayEvents"
 
 const moveElementToTop = (arr: string[], element: string | undefined) => {
     if (element == undefined) {
@@ -44,6 +45,9 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const [renderScoringZones, setRenderScoringZones] = useState<boolean>(
         PreferencesSystem.getGlobalPreference<boolean>("RenderScoringZones")
     )
+    const [renderSceneTags, setRenderSceneTags] = useState<boolean>(
+        PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")
+    )
 
     const saveSettings = () => {
         PreferencesSystem.setGlobalPreference<string>("ScreenMode", screenMode)
@@ -54,6 +58,7 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
         PreferencesSystem.setGlobalPreference<boolean>("ReportAnalytics", reportAnalytics)
         PreferencesSystem.setGlobalPreference<boolean>("UseMetric", useMetric)
         PreferencesSystem.setGlobalPreference<boolean>("RenderScoringZones", renderScoringZones)
+        PreferencesSystem.setGlobalPreference<boolean>("RenderSceneTags", renderSceneTags)
 
         PreferencesSystem.savePreferences()
     }
@@ -136,6 +141,15 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
                     setRenderScoringZones(checked)
                 }}
             />
+            <Checkbox
+                label="Render Scene Tags"
+                defaultState={PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")}
+                onClick={checked => {
+                    setRenderSceneTags(checked)
+                    if (!checked) new SceneOverlayDisableEvent()
+                    else new SceneOverlayEnableEvent()
+                }}
+            />
         </Modal>
     )
 }

From ff7a067615b5f4d1e34708c8c63fb2be30402db3 Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Wed, 17 Jul 2024 20:34:49 -0700
Subject: [PATCH 13/16] Refactoring the event handlers

---
 fission/src/systems/scene/SceneRenderer.ts    |   8 +-
 fission/src/ui/components/SceneOverlay.tsx    |  32 ++---
 .../src/ui/components/SceneOverlayEvents.ts   | 124 +++++-------------
 .../ui/modals/configuring/SettingsModal.tsx   |   6 +-
 4 files changed, 59 insertions(+), 111 deletions(-)

diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index cd1dbdd506..1eb3bbab5e 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -11,8 +11,8 @@ import fragmentShader from "@/shaders/fragment.glsl"
 import { Theme } from "@/ui/ThemeContext"
 import InputSystem from "../input/InputSystem"
 
-import { PixelSpaceCoord } from "@/ui/components/SceneOverlayEvents"
-import { SceneOverlayUpdateEvent } from "@/ui/components/SceneOverlayEvents"
+import { PixelSpaceCoord, SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
+import {  } from "@/ui/components/SceneOverlayEvents"
 import PreferencesSystem from "../preferences/PreferencesSystem"
 
 const CLEAR_COLOR = 0x121212
@@ -155,8 +155,8 @@ class SceneRenderer extends WorldSystem {
             )
         })
 
-        // Update the tags if they are enabled
-        if (PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")) new SceneOverlayUpdateEvent()
+        // Update the tags each frame if they are enabled in preferences
+        if (PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")) new SceneOverlayEvent(SceneOverlayEventKey.UPDATE)
 
         this._composer.render(deltaT)
     }
diff --git a/fission/src/ui/components/SceneOverlay.tsx b/fission/src/ui/components/SceneOverlay.tsx
index 650afbe779..968367256a 100644
--- a/fission/src/ui/components/SceneOverlay.tsx
+++ b/fission/src/ui/components/SceneOverlay.tsx
@@ -2,16 +2,16 @@ import { Box } from "@mui/material"
 import { useEffect, useReducer, useState } from "react"
 import {
     SceneOverlayTag,
-    SceneOverlayTagAddEvent,
-    SceneOverlayTagRemoveEvent,
-    SceneOverlayUpdateEvent,
-    SceneOverlayDisableEvent,
-    SceneOverlayEnableEvent,
+    SceneOverlayEvent,
+    SceneOverlayEventKey,
+    SceneOverlayTagEvent,
+    SceneOverlayTagEventKey,
 } from "./SceneOverlayEvents"
 
 const tagMap = new Map<number, SceneOverlayTag>()
 
 function SceneOverlay() {
+    /* State to determine if the overlay is disabled */
     const [isDisabled, setIsDisabled] = useState<boolean>(false)
 
     /* h1 text for each tagMap tag */
@@ -42,11 +42,11 @@ function SceneOverlay() {
     /* Creating listener for tag events to update tagMap and rerender overlay */
     useEffect(() => {
         const onTagAdd = (e: Event) => {
-            tagMap.set((e as SceneOverlayTagAddEvent).tag.id, (e as SceneOverlayTagAddEvent).tag)
+            tagMap.set((e as SceneOverlayTagEvent).tag.id, (e as SceneOverlayTagEvent).tag)
         }
 
         const onTagRemove = (e: Event) => {
-            tagMap.delete((e as SceneOverlayTagRemoveEvent).tag.id)
+            tagMap.delete((e as SceneOverlayTagEvent).tag.id)
         }
 
         const onUpdate = (_: Event) => {
@@ -64,21 +64,23 @@ function SceneOverlay() {
         }
 
         // listening for tags being added and removed
-        SceneOverlayTagAddEvent.Listen(onTagAdd)
-        SceneOverlayTagRemoveEvent.Listen(onTagRemove)
+        SceneOverlayTagEvent.Listen(SceneOverlayTagEventKey.ADD, onTagAdd)
+        SceneOverlayTagEvent.Listen(SceneOverlayTagEventKey.REMOVE, onTagRemove)
 
         // listening for updates to the overlay every frame
-        SceneOverlayUpdateEvent.Listen(onUpdate)
+        SceneOverlayEvent.Listen(SceneOverlayEventKey.UPDATE, onUpdate)
 
         // listening for disabling and enabling scene tags
-        SceneOverlayDisableEvent.Listen(onDisable)
-        SceneOverlayEnableEvent.Listen(onEnable)
+        SceneOverlayEvent.Listen(SceneOverlayEventKey.DISABLE, onDisable)
+        SceneOverlayEvent.Listen(SceneOverlayEventKey.ENABLE, onEnable)
 
         // disposing all the tags and listeners when the scene is destroyed
         return () => {
-            SceneOverlayTagAddEvent.RemoveListener(onTagAdd)
-            SceneOverlayTagRemoveEvent.RemoveListener(onTagRemove)
-            SceneOverlayUpdateEvent.RemoveListener(onUpdate)
+            SceneOverlayTagEvent.RemoveListener(SceneOverlayTagEventKey.ADD, onTagAdd)
+            SceneOverlayTagEvent.RemoveListener(SceneOverlayTagEventKey.REMOVE, onTagRemove)
+            SceneOverlayEvent.RemoveListener(SceneOverlayEventKey.UPDATE, onUpdate)
+            SceneOverlayEvent.RemoveListener(SceneOverlayEventKey.DISABLE, onDisable)
+            SceneOverlayEvent.RemoveListener(SceneOverlayEventKey.ENABLE, onEnable)
             tagMap.clear()
         }
     }, [])
diff --git a/fission/src/ui/components/SceneOverlayEvents.ts b/fission/src/ui/components/SceneOverlayEvents.ts
index 2f11ff71ea..ff1bf91d26 100644
--- a/fission/src/ui/components/SceneOverlayEvents.ts
+++ b/fission/src/ui/components/SceneOverlayEvents.ts
@@ -3,6 +3,19 @@ let nextTagId = 0
 /* Coordinates for tags in world space */
 export type PixelSpaceCoord = [number, number]
 
+/** Contains the event keys for events that require a SceneOverlayTag as a parameter */
+export const enum SceneOverlayTagEventKey {
+    ADD = "SceneOverlayTagAddEvent",
+    REMOVE = "SceneOverlayTagRemoveEvent",
+}
+
+/** Contains the event keys for other Scene Overlay Events */
+export const enum SceneOverlayEventKey {
+    UPDATE = "SceneOverlayUpdateEvent",
+    DISABLE = "SceneOverlayDisableEvent",
+    ENABLE = "SceneOverlayEnableEvent",
+}
+
 /**
  * Represents a tag that can be displayed on the screen
  *
@@ -24,118 +37,51 @@ export class SceneOverlayTag {
 
         this.text = text
         this.position = position ?? [0, 0]
-        new SceneOverlayTagAddEvent(this)
+        new SceneOverlayTagEvent(SceneOverlayTagEventKey.ADD, this)
+        // new SceneOverlayTagAddEvent(this)
     }
 
     /** Removing the tag */
     public Dispose() {
-        new SceneOverlayTagRemoveEvent(this)
-    }
-}
-
-/**
- * Event handler that is run when a SceneOverlayTag is updated
- */
-export class SceneOverlayTagAddEvent extends Event {
-    private static readonly EVENT_KEY = "SceneOverlayTagEvent"
-
-    public tag: SceneOverlayTag
-
-    /** Create a new event bound to a tag */
-    public constructor(tag: SceneOverlayTag) {
-        super(SceneOverlayTagAddEvent.EVENT_KEY)
-
-        this.tag = tag
-
-        window.dispatchEvent(this)
-    }
-
-    /** Listener for tag updates */
-    public static Listen(func: (e: Event) => void) {
-        window.addEventListener(SceneOverlayTagAddEvent.EVENT_KEY, func)
-    }
-
-    /** Removing listener */
-    public static RemoveListener(func: (e: Event) => void) {
-        window.removeEventListener(SceneOverlayTagAddEvent.EVENT_KEY, func)
+        new SceneOverlayTagEvent(SceneOverlayTagEventKey.REMOVE, this)
+        // new SceneOverlayTagRemoveEvent(this)
     }
 }
 
-export class SceneOverlayTagRemoveEvent extends Event {
-    private static readonly EVENT_KEY = "SceneOverlayTagRemoveEvent"
-
+/** Event handler for events that use a SceneOverlayTag as a parameter */
+export class SceneOverlayTagEvent extends Event {
     public tag: SceneOverlayTag
 
-    /** Create a new event bound to a tag */
-    public constructor(tag: SceneOverlayTag) {
-        super(SceneOverlayTagRemoveEvent.EVENT_KEY)
+    public constructor(eventKey: SceneOverlayTagEventKey, tag: SceneOverlayTag) {
+        super(eventKey)
 
         this.tag = tag
 
         window.dispatchEvent(this)
     }
 
-    /** Listener for tag updates */
-    public static Listen(func: (e: Event) => void) {
-        window.addEventListener(SceneOverlayTagRemoveEvent.EVENT_KEY, func)
-    }
-
-    /** Removing listener */
-    public static RemoveListener(func: (e: Event) => void) {
-        window.removeEventListener(SceneOverlayTagRemoveEvent.EVENT_KEY, func)
-    }
-}
-
-export class SceneOverlayUpdateEvent extends Event {
-    private static readonly EVENT_KEY = "SceneOverlayUpdateEvent"
-
-    public constructor() {
-        super(SceneOverlayUpdateEvent.EVENT_KEY)
-
-        window.dispatchEvent(this)
-    }
-
-    public static Listen(func: (e: Event) => void) {
-        window.addEventListener(SceneOverlayUpdateEvent.EVENT_KEY, func)
-    }
-
-    public static RemoveListener(func: (e: Event) => void) {
-        window.removeEventListener(SceneOverlayUpdateEvent.EVENT_KEY, func)
-    }
-}
-
-export class SceneOverlayDisableEvent extends Event {
-    private static readonly EVENT_KEY = "SceneOverlayDisableEvent"
-
-    public constructor() {
-        super(SceneOverlayDisableEvent.EVENT_KEY)
-
-        window.dispatchEvent(this)
-    }
-
-    public static Listen(func: (e: Event) => void) {
-        window.addEventListener(SceneOverlayDisableEvent.EVENT_KEY, func)
+    public static Listen(eventKey: SceneOverlayTagEventKey, func: (e: Event) => void) {
+        window.addEventListener(eventKey, func)
     }
 
-    public static RemoveListener(func: (e: Event) => void) {
-        window.removeEventListener(SceneOverlayDisableEvent.EVENT_KEY, func)
+    public static RemoveListener(eventKey: SceneOverlayTagEventKey, func: (e: Event) => void) {
+        window.removeEventListener(eventKey, func)
     }
 }
 
-export class SceneOverlayEnableEvent extends Event {
-    private static readonly EVENT_KEY = "SceneOverlayEnableEvent"
-
-    public constructor() {
-        super(SceneOverlayEnableEvent.EVENT_KEY)
+/** Event handler for other SceneOverlay events */
+export class SceneOverlayEvent extends Event {
+    public constructor(eventKey: SceneOverlayEventKey) {
+        super(eventKey)
 
         window.dispatchEvent(this)
     }
 
-    public static Listen(func: (e: Event) => void) {
-        window.addEventListener(SceneOverlayEnableEvent.EVENT_KEY, func)
+    public static Listen(eventKey: SceneOverlayEventKey, func: (e: Event) => void) {
+        window.addEventListener(eventKey, func)
     }
-
-    public static RemoveListener(func: (e: Event) => void) {
-        window.removeEventListener(SceneOverlayEnableEvent.EVENT_KEY, func)
+    
+    public static RemoveListener(eventKey: SceneOverlayEventKey, func: (e: Event) => void) {
+        window.removeEventListener(eventKey, func)
     }
-}
+}
\ No newline at end of file
diff --git a/fission/src/ui/modals/configuring/SettingsModal.tsx b/fission/src/ui/modals/configuring/SettingsModal.tsx
index 9cf818a769..197a4c19ae 100644
--- a/fission/src/ui/modals/configuring/SettingsModal.tsx
+++ b/fission/src/ui/modals/configuring/SettingsModal.tsx
@@ -8,7 +8,7 @@ import Button from "@/components/Button"
 import Slider from "@/components/Slider"
 import Checkbox from "@/components/Checkbox"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
-import { SceneOverlayDisableEvent, SceneOverlayEnableEvent } from "@/ui/components/SceneOverlayEvents"
+import { SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
 
 const moveElementToTop = (arr: string[], element: string | undefined) => {
     if (element == undefined) {
@@ -146,8 +146,8 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
                 defaultState={PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")}
                 onClick={checked => {
                     setRenderSceneTags(checked)
-                    if (!checked) new SceneOverlayDisableEvent()
-                    else new SceneOverlayEnableEvent()
+                    if (!checked) new SceneOverlayEvent(SceneOverlayEventKey.DISABLE) 
+                    else new SceneOverlayEvent(SceneOverlayEventKey.ENABLE)
                 }}
             />
         </Modal>

From 4f50c177cc8f0ca9469ad0cce3592bdc0bc2bc4a Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Wed, 17 Jul 2024 20:35:47 -0700
Subject: [PATCH 14/16] Formatting

---
 fission/src/systems/scene/SceneRenderer.ts          | 5 +++--
 fission/src/ui/components/SceneOverlayEvents.ts     | 4 ++--
 fission/src/ui/modals/configuring/SettingsModal.tsx | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 1eb3bbab5e..6d13f4eb10 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -12,7 +12,7 @@ import { Theme } from "@/ui/ThemeContext"
 import InputSystem from "../input/InputSystem"
 
 import { PixelSpaceCoord, SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
-import {  } from "@/ui/components/SceneOverlayEvents"
+import {} from "@/ui/components/SceneOverlayEvents"
 import PreferencesSystem from "../preferences/PreferencesSystem"
 
 const CLEAR_COLOR = 0x121212
@@ -156,7 +156,8 @@ class SceneRenderer extends WorldSystem {
         })
 
         // Update the tags each frame if they are enabled in preferences
-        if (PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")) new SceneOverlayEvent(SceneOverlayEventKey.UPDATE)
+        if (PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags"))
+            new SceneOverlayEvent(SceneOverlayEventKey.UPDATE)
 
         this._composer.render(deltaT)
     }
diff --git a/fission/src/ui/components/SceneOverlayEvents.ts b/fission/src/ui/components/SceneOverlayEvents.ts
index ff1bf91d26..f66b9682a0 100644
--- a/fission/src/ui/components/SceneOverlayEvents.ts
+++ b/fission/src/ui/components/SceneOverlayEvents.ts
@@ -80,8 +80,8 @@ export class SceneOverlayEvent extends Event {
     public static Listen(eventKey: SceneOverlayEventKey, func: (e: Event) => void) {
         window.addEventListener(eventKey, func)
     }
-    
+
     public static RemoveListener(eventKey: SceneOverlayEventKey, func: (e: Event) => void) {
         window.removeEventListener(eventKey, func)
     }
-}
\ No newline at end of file
+}
diff --git a/fission/src/ui/modals/configuring/SettingsModal.tsx b/fission/src/ui/modals/configuring/SettingsModal.tsx
index 197a4c19ae..4c001c5771 100644
--- a/fission/src/ui/modals/configuring/SettingsModal.tsx
+++ b/fission/src/ui/modals/configuring/SettingsModal.tsx
@@ -146,7 +146,7 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
                 defaultState={PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")}
                 onClick={checked => {
                     setRenderSceneTags(checked)
-                    if (!checked) new SceneOverlayEvent(SceneOverlayEventKey.DISABLE) 
+                    if (!checked) new SceneOverlayEvent(SceneOverlayEventKey.DISABLE)
                     else new SceneOverlayEvent(SceneOverlayEventKey.ENABLE)
                 }}
             />

From 692bb1d0092d9121c7b5f0d677e236fe0cc53b5e Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Thu, 18 Jul 2024 11:16:16 -0700
Subject: [PATCH 15/16] Made requested changes Used a label for consistency
 Modified the WorldToPixelSpace function

---
 fission/src/mirabuf/MirabufSceneObject.ts  | 2 +-
 fission/src/systems/scene/SceneRenderer.ts | 6 +-----
 fission/src/ui/components/SceneOverlay.tsx | 5 ++---
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/fission/src/mirabuf/MirabufSceneObject.ts b/fission/src/mirabuf/MirabufSceneObject.ts
index bec59203bd..478a0fd362 100644
--- a/fission/src/mirabuf/MirabufSceneObject.ts
+++ b/fission/src/mirabuf/MirabufSceneObject.ts
@@ -102,7 +102,7 @@ class MirabufSceneObject extends SceneObject {
 
         // creating nametag for robots
         if (this.miraType === MiraType.ROBOT) {
-            this._nameTag = new SceneOverlayTag("Hunter Barclah")
+            this._nameTag = new SceneOverlayTag("Ernie")
         }
     }
 
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 6d13f4eb10..1590a15c9a 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -236,11 +236,7 @@ class SceneRenderer extends WorldSystem {
     public WorldToPixelSpace(world: THREE.Vector3): PixelSpaceCoord {
         this._mainCamera.updateMatrixWorld()
         const screenSpace = world.project(this._mainCamera)
-        const widthHalf = window.innerWidth / 2
-        const heightHalf = window.innerHeight / 2
-        const x = screenSpace.x * widthHalf + widthHalf
-        const y = -(screenSpace.y * heightHalf) + heightHalf
-        return [x, y]
+        return [(window.innerWidth * (screenSpace.x + 1.0)) / 2.0, (window.innerHeight * (1.0 - screenSpace.y)) / 2.0]
     }
 
     /** 
diff --git a/fission/src/ui/components/SceneOverlay.tsx b/fission/src/ui/components/SceneOverlay.tsx
index 968367256a..01e4ce605b 100644
--- a/fission/src/ui/components/SceneOverlay.tsx
+++ b/fission/src/ui/components/SceneOverlay.tsx
@@ -7,6 +7,7 @@ import {
     SceneOverlayTagEvent,
     SceneOverlayTagEventKey,
 } from "./SceneOverlayEvents"
+import Label, { LabelSize } from "./Label"
 
 const tagMap = new Map<number, SceneOverlayTag>()
 
@@ -32,9 +33,7 @@ function SceneOverlay() {
                     transform: "translate(-50%, -100%)",
                 }}
             >
-                <h1 className="text-2xl text-white font-sans" style={{ fontWeight: "bold" }}>
-                    {x.text}
-                </h1>
+                <Label size={LabelSize.Large}>{x.text}</Label>
             </div>
         ))
     }, [])

From 2708e485b94e97a6ba1bb351ce31f260c6d5130f Mon Sep 17 00:00:00 2001
From: arorad1 <dhruv.arora1@autodesk.com>
Date: Thu, 18 Jul 2024 13:04:24 -0700
Subject: [PATCH 16/16] Little cleanup

---
 fission/src/ui/components/SceneOverlayEvents.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/fission/src/ui/components/SceneOverlayEvents.ts b/fission/src/ui/components/SceneOverlayEvents.ts
index f66b9682a0..feb6ef093e 100644
--- a/fission/src/ui/components/SceneOverlayEvents.ts
+++ b/fission/src/ui/components/SceneOverlayEvents.ts
@@ -38,13 +38,11 @@ export class SceneOverlayTag {
         this.text = text
         this.position = position ?? [0, 0]
         new SceneOverlayTagEvent(SceneOverlayTagEventKey.ADD, this)
-        // new SceneOverlayTagAddEvent(this)
     }
 
     /** Removing the tag */
     public Dispose() {
         new SceneOverlayTagEvent(SceneOverlayTagEventKey.REMOVE, this)
-        // new SceneOverlayTagRemoveEvent(this)
     }
 }