From d000ee193ae73ceb01590328c94105fda7b0a0d3 Mon Sep 17 00:00:00 2001
From: Gomathi9520 <gomathi@hexrfactory.com>
Date: Mon, 19 May 2025 10:53:16 +0530
Subject: [PATCH] Enable sprite rendering for 3D widgets in ProductionCapacity,
 ReturnOfInvestment, StateWorking, and Throughput components; update CSS to
 allow pointer events in realTimeViz

---
 .../visualization/widgets/3d/cards/ProductionCapacity.tsx  | 2 +-
 .../visualization/widgets/3d/cards/ReturnOfInvestment.tsx  | 2 +-
 .../visualization/widgets/3d/cards/StateWorking.tsx        | 2 +-
 .../modules/visualization/widgets/3d/cards/Throughput.tsx  | 7 +------
 app/src/styles/pages/realTimeViz.scss                      | 2 +-
 5 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx b/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
index 53cc473..19fe97d 100644
--- a/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
+++ b/app/src/modules/visualization/widgets/3d/cards/ProductionCapacity.tsx
@@ -203,7 +203,7 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
       scale={[0.5, 0.5, 0.5]}
       rotation={rotation}
       transform
-      sprite={false}
+      sprite={true}
       zIndexRange={[1, 0]}
       // style={{
       //   transform: transformStyle.transform,
diff --git a/app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx b/app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
index 5e638cf..6aed5ca 100644
--- a/app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
+++ b/app/src/modules/visualization/widgets/3d/cards/ReturnOfInvestment.tsx
@@ -242,7 +242,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({
       rotation={rotation}
       scale={[0.5, 0.5, 0.5]}
       transform
-      sprite={false}
+      sprite={true}
       // style={{
       //   transform: transformStyle.transform,
       //   transformStyle: "preserve-3d",
diff --git a/app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx b/app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
index d5cc07e..da5c411 100644
--- a/app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
+++ b/app/src/modules/visualization/widgets/3d/cards/StateWorking.tsx
@@ -121,7 +121,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
-      sprite={false}
+      sprite={true}
       // style={{
       //   transform: transformStyle.transform,
       //   transformStyle: "preserve-3d",
diff --git a/app/src/modules/visualization/widgets/3d/cards/Throughput.tsx b/app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
index 1489c3d..f003607 100644
--- a/app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
+++ b/app/src/modules/visualization/widgets/3d/cards/Throughput.tsx
@@ -223,12 +223,7 @@ const Throughput: React.FC<ThroughputProps> = ({
       scale={[0.5, 0.5, 0.5]}
       transform
       zIndexRange={[1, 0]}
-      sprite={false}
-    // style={{
-    //   transform: transformStyle.transform,
-    //   transformStyle: "preserve-3d",
-    //   transition: "transform 0.1s ease-out",
-    // }}
+      sprite={true}
     >
       <div
         className={`throughput-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index e454a34..482f444 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -759,7 +759,6 @@
   display: flex;
   flex-direction: column;
   border-radius: #{$border-radius-medium};
-
   overflow: hidden;
   padding: 4px;
   min-width: 150px;
@@ -771,6 +770,7 @@
     color: var(--text-color);
     text-wrap: nowrap;
     cursor: pointer;
+    pointer-events: all;
 
     &:hover {
       background: var(--highlight-accent-color);