3d widget highlight added

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

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 })}

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 })}

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 })}

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;
 }