refactor: update various components to improve readability and maintainability

app/src/components/layout/sidebarRight/analysis/Analysis.tsx

@@ -14,9 +14,9 @@ const Analysis: React.FC = () => {
 
   const AnalysisPresets: AnalysisPresetsType = {
     "Throughput time": [
-      { type: "default", inputs: { label: "Cycle time", activeOption: "s" } },
+      // { type: "default", inputs: { label: "Cycle time", activeOption: "s" } },
-      { type: "default", inputs: { label: "machines / lines", activeOption: "item" } },
+      // { type: "default", inputs: { label: "machines / lines", activeOption: "item" } },
-      { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } },
+      // { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } },
     ],
     "Production capacity": [
       { type: "default", inputs: { label: "Shift length", activeOption: "hr" } },

app/src/components/layout/sidebarRight/visualization/IotInputCards/BarChartInput.tsx

@@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
 import { useParams } from "react-router-dom";
+import { useSocketStore } from "../../../../../store/builder/store";
 
 type Props = {};
 
@@ -26,6 +27,7 @@ const BarChartInput = (props: Props) => {
   const organization = email?.split("@")[1]?.split(".")[0];
   const [isLoading, setLoading] = useState<boolean>(true);
   const { projectId } = useParams();
+  const { visualizationSocket } = useSocketStore();
 
 
   useEffect(() => {
@@ -92,6 +94,25 @@ const BarChartInput = (props: Props) => {
     inputDuration: any,
     inputName: any
   ) => {
+    // const userId = localStorage.getItem("userId");
+    // let newWidget = {
+    //   id: selectedChartId.id,
+    // panel: selectedChartId.panel,
+    // widgetName: inputName,
+    // Data: {
+    //   measurements: inputMeasurement,
+    //   duration: inputDuration,
+    // }
+    // }
+    // const adding3dWidget = {
+    //   organization: organization,
+    //   widget: newWidget,
+    //   zoneUuid: selectedZone.zoneUuid,
+    //   projectId, userId
+    // };
+    // if (visualizationSocket) {
+    //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
+    // }
     try {
       const response = await axios.post(
         `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,

app/src/components/layout/sidebarRight/visualization/IotInputCards/LineGrapInput.tsx

@@ -124,6 +124,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
 import { useParams } from "react-router-dom";
+import { useSocketStore } from "../../../../../store/builder/store";
 
 type Props = {};
 
@@ -142,6 +143,7 @@ const LineGrapInput = (props: Props) => {
   const organization = email?.split("@")[1]?.split(".")[0];
   const [isLoading, setLoading] = useState<boolean>(true);
   const { projectId } = useParams();
+  const { visualizationSocket } = useSocketStore();
 
   useEffect(() => {
     const fetchZoneData = async () => {
@@ -207,6 +209,25 @@ const LineGrapInput = (props: Props) => {
     inputDuration: any,
     inputName: any
   ) => {
+    // const userId = localStorage.getItem("userId");
+    // let newWidget = {
+    //    id: selectedChartId.id,
+    // panel: selectedChartId.panel,
+    // widgetName: inputName,
+    // Data: {
+    //   measurements: inputMeasurement,
+    //   duration: inputDuration,
+    // }
+    // }
+    // const adding3dWidget = {
+    //   organization: organization,
+    //   widget: newWidget,
+    //   zoneUuid: selectedZone.zoneUuid,
+    //   projectId, userId
+    // };
+    // if (visualizationSocket) {
+    //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
+    // }
     try {
       const response = await axios.post(
         `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,

app/src/components/layout/sidebarRight/visualization/IotInputCards/PieChartInput.tsx

@@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
 import { useParams } from "react-router-dom";
+import { useSocketStore } from "../../../../../store/builder/store";
 
 type Props = {};
 
@@ -26,6 +27,7 @@ const PieChartInput = (props: Props) => {
   const organization = email?.split("@")[1]?.split(".")[0];
   const [isLoading, setLoading] = useState<boolean>(true);
   const { projectId } = useParams();
+  const { visualizationSocket } = useSocketStore();
 
 
   useEffect(() => {
@@ -92,6 +94,26 @@ const PieChartInput = (props: Props) => {
     inputDuration: any,
     inputName: any
   ) => {
+
+    // const userId = localStorage.getItem("userId");
+    // let newWidget = {
+    //   id: selectedChartId.id,
+    // panel: selectedChartId.panel,
+    // widgetName: inputName,
+    // Data: {
+    //   measurements: inputMeasurement,
+    //   duration: inputDuration,
+    // },
+    // }
+    // const adding3dWidget = {
+    //   organization: organization,
+    //   widget: newWidget,
+    //   zoneUuid: selectedZone.zoneUuid,
+    //   projectId, userId
+    // };
+    // if (visualizationSocket) {
+    //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
+    // }
     try {
       const response = await axios.post(
         `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,

app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress1Input.tsx

@@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
 import { useParams } from "react-router-dom";
+import { useSocketStore } from "../../../../../store/builder/store";
 
 type Props = {};
 
@@ -26,6 +27,7 @@ const Progress1Input = (props: Props) => {
   const organization = email?.split("@")[1]?.split(".")[0];
   const [isLoading, setLoading] = useState<boolean>(true);
   const { projectId } = useParams();
+  const { visualizationSocket } = useSocketStore();
 
 
   useEffect(() => {
@@ -92,6 +94,25 @@ const Progress1Input = (props: Props) => {
     inputDuration: any,
     inputName: any
   ) => {
+    // const userId = localStorage.getItem("userId");
+    // let newWidget = {
+    //   id: selectedChartId.id,
+    //   panel: selectedChartId.panel,
+    //   widgetName: inputName,
+    //   Data: {
+    //     measurements: inputMeasurement,
+    //     duration: inputDuration,
+    //   },
+    // }
+    // const adding3dWidget = {
+    //   organization: organization,
+    //   widget: newWidget,
+    //   zoneUuid: selectedZone.zoneUuid,
+    //   projectId, userId
+    // };
+    // if (visualizationSocket) {
+    //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
+    // }
     try {
       const response = await axios.post(
         `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,

app/src/components/layout/sidebarRight/visualization/IotInputCards/Progress2Input.tsx

@@ -8,6 +8,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import axios from "axios";
 import RenameInput from "../../../../ui/inputs/RenameInput";
 import { useParams } from "react-router-dom";
+import { useSocketStore } from "../../../../../store/builder/store";
 
 type Props = {};
 
@@ -26,6 +27,7 @@ const Progress2Input = (props: Props) => {
   const organization = email?.split("@")[1]?.split(".")[0];
   const [isLoading, setLoading] = useState<boolean>(true);
   const { projectId } = useParams();
+  const { visualizationSocket } = useSocketStore();
 
 
   useEffect(() => {
@@ -92,6 +94,25 @@ const Progress2Input = (props: Props) => {
     inputDuration: any,
     inputName: any
   ) => {
+    // const userId = localStorage.getItem("userId");
+    // let newWidget = {
+    //   id: selectedChartId.id,
+    //   panel: selectedChartId.panel,
+    //   widgetName: inputName,
+    //   Data: {
+    //     measurements: inputMeasurement,
+    //     duration: inputDuration,
+    //   }
+    // }
+    // const adding3dWidget = {
+    //   organization: organization,
+    //   widget: newWidget,
+    //   zoneUuid: selectedZone.zoneUuid,
+    //   projectId, userId
+    // };
+    // if (visualizationSocket) {
+    //   visualizationSocket.emit("v1:viz-3D-widget:add", adding3dWidget);
+    // }
     try {
       const response = await axios.post(
         `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/V1/widget/save`,

app/src/components/ui/analysis/ProductionCapacity.tsx

@@ -91,7 +91,8 @@ const ThroughputSummary: React.FC = () => {
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    if (productionCapacityData >= 0) {
+    // console.log('productionCapacityData > 0: ', productionCapacityData > 0);
+    if (productionCapacityData > 0) {
       setIsLoading(false);
       console.log("productionCapacityData: ", productionCapacityData);
     } else {
@@ -100,7 +101,8 @@ const ThroughputSummary: React.FC = () => {
   }, [productionCapacityData]);
 
   return (
-    <div className="production analysis-card">
+    <>
+      {!isLoading && <div className="production analysis-card">
         <div className="production-wrapper analysis-card-wrapper">
           <div className="card-header">
             <div className="header">
@@ -184,7 +186,8 @@ const ThroughputSummary: React.FC = () => {
             <SkeletonUI type={"default"} />
           )}
         </div>
-    </div>
+      </div>}
+    </>
   );
 };
 

app/src/components/ui/analysis/ROISummary.tsx

@@ -83,16 +83,22 @@ const ROISummary = ({
   const [isLoading, setIsLoading] = useState(false);
   const { roiSummary } = useROISummaryData();
 
+
   useEffect(() => {
-    if (roiSummary && typeof roiSummary === "object") {
+    if (roiSummary.productName) {
-      setIsLoading(false); // Data loaded
+      // If productName is set, assume data is loaded
+      setIsLoading(false);
     } else {
-      setIsLoading(true); // Show skeleton while loading
+      // If productName is empty, assume still loading
+      setIsLoading(true);
     }
   }, [roiSummary]);
 
   return (
-    <div className="roiSummary-container analysis-card">
+    <>
+
+      {
+        !isLoading && <div className="roiSummary-container analysis-card">
           <div className="roiSummary-wrapper analysis-card-wrapper">
             <div className="card-header">
               <div className="header">
@@ -238,7 +244,8 @@ const ROISummary = ({
               // <div> No Data</div>
             )}
           </div>
-    </div>
+        </div>}
+    </>
   );
 };
 

app/src/components/ui/analysis/ThroughputSummary.tsx

@@ -30,18 +30,24 @@ const ProductionCapacity = ({
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    if (throughputData >= 0) {
+    console.log('typeof throughputData:', typeof throughputData);
+    console.log('throughputData > 0: ', throughputData > 0);
+    if (throughputData > 0) {
       // console.log('machineActiveTime: ', machineActiveTime);
       // console.log('materialCycleTime: ', materialCycleTime);
       // console.log('throughputData: ', throughputData);
       // console.log('productionCapacityData: ', productionCapacityData);
+      setIsLoading(false);
+    } else {
       setIsLoading(true);
     }
 
   }, [throughputData])
 
   return (
-    <div className="throughtputSummary-container analysis-card">
+    <>
+
+      {!isLoading && <div className="throughtputSummary-container analysis-card">
         <div className="throughtputSummary-wrapper analysis-card-wrapper">
           <div className="card-header">
             <div className="header">
@@ -95,7 +101,8 @@ const ProductionCapacity = ({
             <SkeletonUI type={"default"} />
           )}
         </div>
-    </div>
+      </div>}
+    </>
   );
 };
 

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

@@ -165,7 +165,7 @@ const SimulationPlayer: React.FC = () => {
                     <div className="icon">
                       <HourlySimulationIcon />
                     </div>
-                    <div className="label">Hourly Simulation</div>
+                    <div className="label">ThroughPut Data</div>
                   </div>
                   <div className="progress-wrapper">
                     <div

app/src/modules/visualization/widgets/3d/Dropped3dWidget.tsx

@@ -361,10 +361,7 @@ export default function Dropped3dWidgets() {
     }
   }, [rightSelect, rightClickSelected]);
 
-  function isPointInPolygon(
+  function isPointInPolygon(point: [number, number], polygon: Array<[number, number]>): boolean {
-    point: [number, number],
-    polygon: Array<[number, number]>
-  ): boolean {
     const [x, z] = point;
     let inside = false;
 
@@ -434,8 +431,6 @@ export default function Dropped3dWidgets() {
         }
       }
     };
-
-
     const handleMouseMove = (event: MouseEvent) => {
       if (!rightClickSelected || !rightSelect) return;
       const selectedzoneUuid = Object.keys(zoneWidgetData).find(