From 45db21e66c2ce86a594f65d160b41d14c01b8efa Mon Sep 17 00:00:00 2001
From: Gomathi9520 <gomathi@hexrfactory.com>
Date: Tue, 8 Apr 2025 18:32:19 +0530
Subject: [PATCH] 3d widget highlight added

---
 .../components/layout/3D-cards/cards/ProductionCapacity.tsx  | 5 +++--
 .../components/layout/3D-cards/cards/ReturnOfInvestment.tsx  | 1 +
 app/src/components/layout/3D-cards/cards/StateWorking.tsx    | 1 +
 app/src/components/layout/3D-cards/cards/Throughput.tsx      | 1 +
 app/src/styles/pages/realTimeViz.scss                        | 2 +-
 5 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
index 243ef4b..cc398e2 100644
--- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
+++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx
@@ -219,12 +219,13 @@ const ProductionCapacity: React.FC<ProductionCapacityProps> = ({
         // e.stopPropagation();
       }}
       wrapperClass="pointer-none"
-      className="pointer-none"
+      className={`${selectedChartId?.id === id ? "activeChart" : ""}`}
     >
       <div
-        className="productionCapacity-wrapper card"
+        className={`productionCapacity-wrapper card ${selectedChartId?.id === id ? "activeChart" : ""}`}
         onClick={() => setSelectedChartId({ id: id, type: type })}
         onContextMenu={onContextMenu}
+
         style={{
           width: "300px", // Original width
           height: "300px", // Original height
diff --git a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
index 8e6c707..9019aaf 100644
--- a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
+++ b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx
@@ -226,6 +226,7 @@ const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ id, type, posit
         transition: 'transform 0.1s ease-out'
 
       }}
+      className={`${selectedChartId?.id === id ? "activeChart" : ""}`}
     >
       <div className="returnOfInvestment card"
         onClick={() => setSelectedChartId({ id: id, type: type })}
diff --git a/app/src/components/layout/3D-cards/cards/StateWorking.tsx b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
index 9adf77f..93b86a2 100644
--- a/app/src/components/layout/3D-cards/cards/StateWorking.tsx
+++ b/app/src/components/layout/3D-cards/cards/StateWorking.tsx
@@ -111,6 +111,7 @@ const StateWorking: React.FC<StateWorkingProps> = ({ id, type, position, rotatio
         transition: 'transform 0.1s ease-out'
 
       }}
+      className={`${selectedChartId?.id === id ? "activeChart" : ""}`}
     >
       <div className="stateWorking-wrapper card"
         onClick={() => setSelectedChartId({ id: id, type: type })}
diff --git a/app/src/components/layout/3D-cards/cards/Throughput.tsx b/app/src/components/layout/3D-cards/cards/Throughput.tsx
index de3109b..f51b052 100644
--- a/app/src/components/layout/3D-cards/cards/Throughput.tsx
+++ b/app/src/components/layout/3D-cards/cards/Throughput.tsx
@@ -206,6 +206,7 @@ const Throughput: React.FC<ThroughputProps> = ({ id, type, position, rotation, o
         transition: 'transform 0.1s ease-out'
 
       }}
+      className={`${selectedChartId?.id === id ? "activeChart" : ""}`}
     >
       <div className="throughput-wrapper"
         onClick={() => setSelectedChartId({ id: id, type: type })}
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index c2c0b7b..cba4ede 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -742,7 +742,7 @@
 }
 
 .activeChart {
-  outline: 1px solid var(--accent-color);
+  outline: 2px solid var(--accent-color);
   z-index: 2 !important;
 }