refactor: improve imports and add InputToggle for view labels in SimulationPlayer component

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -1,6 +1,10 @@
 import React, { useState, useRef, useEffect } from "react";
 import { ExitIcon, PlayStopIcon, ResetIcon } from "../../icons/SimulationIcons";
-import { useActiveTool, useProcessBar } from "../../../store/builder/store";
+import {
+  useActiveTool,
+  useProcessBar,
+  useViewSceneStore,
+} from "../../../store/builder/store";
 import {
   useAnimationPlaySpeed,
   usePauseButtonStore,
@@ -19,12 +23,15 @@ import {
   StartIcon,
 } from "../../icons/ExportCommonIcons";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
-import { useSubModuleStore } from "../../../store/useModuleStore";
+import useModuleStore, {
+  useSubModuleStore,
+} from "../../../store/useModuleStore";
 import ProductionCapacity from "../analysis/ThroughputSummary";
 import ThroughputSummary from "../analysis/ProductionCapacity";
 import ROISummary from "../analysis/ROISummary";
 import { usePlayerStore } from "../../../store/useUIToggleStore";
 import { useComparisonProduct } from "../../../store/simulation/useSimulationStore";
+import InputToggle from "../inputs/InputToggle";
 
 const SimulationPlayer: React.FC = () => {
   const MAX_SPEED = 4; // Maximum speed
@@ -41,7 +48,10 @@ const SimulationPlayer: React.FC = () => {
   const { isReset, setReset } = useResetButtonStore();
   const { subModule } = useSubModuleStore();
   const { clearComparisonProduct } = useComparisonProduct();
+  const { viewSceneLabels, setViewSceneLabels } = useViewSceneStore();
 
+  const { isPlaying } = usePlayButtonStore();
+  const { activeModule } = useModuleStore();
   useEffect(() => {
     if (isReset) {
       setTimeout(() => {
@@ -113,8 +123,7 @@ const SimulationPlayer: React.FC = () => {
   const monthlyROI = 50;
   const { processBar } = useProcessBar();
 
-  useEffect(() => {
-  }, [processBar])
+  useEffect(() => { }, [processBar]);
 
   const intervals = [50, 20, 30, 40, 50, 60]; // in minutes
   const totalSegments = intervals.length;
@@ -154,6 +163,16 @@ const SimulationPlayer: React.FC = () => {
 
   return (
     <>
+      {isPlaying && activeModule === "simulation" && (
+        <div className="label-toogler">
+          <InputToggle
+            value={viewSceneLabels}
+            inputKey="1"
+            label="Enable View Labels"
+            onClick={() => setViewSceneLabels(!viewSceneLabels)}
+          />
+        </div>
+      )}
       <div className={`simulation-player-wrapper${hidePlayer ? " hide" : ""}`}>
         <div className={`simulation-player-container ${expand ? "open" : ""}`}>
           <div className="controls-container">
@@ -209,9 +228,7 @@ const SimulationPlayer: React.FC = () => {
             {!hidePlayer && subModule !== "analysis" && (
               <div className="header">
                 <InfoIcon />
-                {isPaused
-                  ? "Paused - system idle."
-                  : "Running simulation..."}
+                {isPaused ? "Paused - system idle." : "Running simulation..."}
               </div>
             )}
             <div className="controls-wrapper">
@@ -298,8 +315,8 @@ const SimulationPlayer: React.FC = () => {
                           {index < intervals.length - 1 && (
                             <div
                               className={`line ${progress >= ((index + 1) / totalSegments) * 100
-                                ? "filled"
-                                : ""
+                                  ? "filled"
+                                  : ""
                                 }`}
                             ></div>
                           )}