refactor: Update ExpandIcon to accept isActive prop for dynamic rendering; enhance ThroughputSummary and SimulationPlayer components with getAvatarColor for consistent color usage; improve styles across simulation and visualization components for better layout and responsiveness

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

@@ -16,8 +16,13 @@ import {
   SpeedIcon,
   StartIcon,
 } from "../../icons/ExportCommonIcons";
+import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 
 const SimulationPlayer: React.FC = () => {
+  const MAX_SPEED = 8; // Maximum speed
+
+  const [expand, setExpand] = useState(true);
+
   const { speed, setSpeed } = useAnimationPlaySpeed();
   const [playSimulation, setPlaySimulation] = useState(false);
   const { setIsPlaying } = usePlayButtonStore();
@@ -29,8 +34,7 @@ const SimulationPlayer: React.FC = () => {
 
   // Button functions
   const handleReset = () => {
-    setReset(true);
-    // setReset(!isReset);
+    setReset(!isReset);
     setSpeed(1);
   };
   const handlePlayStop = () => {
@@ -49,7 +53,7 @@ const SimulationPlayer: React.FC = () => {
   };
 
   const calculateHandlePosition = () => {
-    return ((speed - 0.5) / (8 - 0.5)) * 100;
+    return ((speed - 0.5) / (MAX_SPEED - 0.5)) * 100;
   };
 
   const handleMouseDown = () => {
@@ -99,7 +103,6 @@ const SimulationPlayer: React.FC = () => {
     { name: "process 9", completed: 90 }, // 90% completed
     { name: "process 10", completed: 30 }, // 30% completed
   ];
-  const [expand, setExpand] = useState(false);
   // Move getRandomColor out of render
   const getRandomColor = () => {
     const letters = "0123456789ABCDEF";
@@ -125,7 +128,7 @@ const SimulationPlayer: React.FC = () => {
 
   const processPlayerRef = useRef<HTMLDivElement>(null);
   const processWrapperRef = useRef<HTMLDivElement>(null);
-  const [playerPosition, setPlayerPosition] = useState(0);
+  const [playerPosition, setPlayerPosition] = useState(20); // initial position
 
   const handleProcessMouseDown = (e: React.MouseEvent) => {
     if (!processWrapperRef.current) return;
@@ -204,7 +207,7 @@ const SimulationPlayer: React.FC = () => {
             </div>
           </div>
           <div className="controls-wrapper">
-            <div
+            <button
               className="simulation-button-container"
               onClick={() => {
                 handleReset();
@@ -212,8 +215,8 @@ const SimulationPlayer: React.FC = () => {
             >
               <ResetIcon />
               Reset
-            </div>
-            <div
+            </button>
+            <button
               className="simulation-button-container"
               onClick={() => {
                 handlePlayStop();
@@ -221,8 +224,8 @@ const SimulationPlayer: React.FC = () => {
             >
               <PlayStopIcon />
               {playSimulation ? "Play" : "Stop"}
-            </div>
-            <div
+            </button>
+            <button
               className="simulation-button-container"
               onClick={() => {
                 handleExit();
@@ -230,13 +233,13 @@ const SimulationPlayer: React.FC = () => {
             >
               <ExitIcon />
               Exit
-            </div>
-            <div
-              className="simulation-button-container"
+            </button>
+            <button
+              className="expand-icon-container"
               onClick={() => setExpand(!expand)}
             >
-              <ExpandIcon />
-            </div>
+              <ExpandIcon isActive={!expand} />
+            </button>
           </div>
         </div>
         <div className="progresser-wrapper">
@@ -306,53 +309,57 @@ const SimulationPlayer: React.FC = () => {
               <div className="marker marker-80"></div>
               <div className="marker marker-90"></div>
               <div className="custom-slider">
-                <div
+                <button
                   className={`slider-handle ${isDragging ? "dragging" : ""}`}
                   style={{ left: `${calculateHandlePosition()}%` }}
                   onMouseDown={handleMouseDown}
                 >
                   {speed.toFixed(1)}x
-                </div>
+                </button>
                 <input
                   type="range"
                   min="0.5"
-                  max="8"
+                  max={MAX_SPEED}
                   step="0.1"
                   value={speed}
                   onChange={handleSpeedChange}
                   className="slider-input"
                 />
               </div>
-              <div className="speed-label max-value">8x</div>
+              <div className="speed-label max-value">4x</div>
             </div>
           </div>
         </div>
         <div className="processDisplayer">
-          <div
-            className="process-player"
-            style={{ left: playerPosition, position: "absolute" }}
-          ></div>
+          <div className="start-displayer timmer">00:00</div>
+          <div className="end-displayer timmer">24:00</div>
           <div
             className="process-wrapper"
-            ref={processWrapperRef}
-            onMouseDown={handleProcessMouseDown}
+            style={{ padding: expand ? "0px" : "5px 35px" }}
           >
-            {process.map((item, index) => (
-              <div
-                key={index}
-                className="process"
-                style={{
-                  width: `${item.completed}%`,
-                  backgroundColor: processColors[index],
-                }}
-              ></div>
-            ))}
+            <div
+              className="process-container"
+              ref={processWrapperRef}
+              onMouseDown={handleProcessMouseDown}
+            >
+              {process.map((item, index) => (
+                <div
+                  key={index}
+                  className="process"
+                  style={{
+                    width: `${item.completed}%`,
+                    backgroundColor: getAvatarColor(index),
+                  }}
+                >
+                  <div
+                    className="process-player"
+                    ref={processPlayerRef}
+                    style={{ left: playerPosition, position: "absolute" }}
+                  ></div>
+                </div>
+              ))}
+            </div>
           </div>
-          <div
-            className="process-player"
-            ref={processPlayerRef}
-            style={{ left: playerPosition, position: "absolute" }}
-          ></div>
         </div>
       </div>
     </div>