Merge branch 'realTimeVisulization' into simulation

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

@@ -62,7 +62,7 @@ const BarChartInput = (props: Props) => {
 
     fetchSavedInputes();
 
-  }, [selectedChartId.id]);
+  }, [selectedChartId]);
 
   // Sync Zustand state when component mounts
   useEffect(() => {
@@ -138,7 +138,7 @@ const BarChartInput = (props: Props) => {
       <div className="inputs-wrapper">
         <div className="datas">
           <div className="datas__label">Title</div>
-          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+          <RenameInput value={widgetName || selectedChartId?.title} onRename={handleNameChange}/>
         </div>
         {[...Array(3)].map((_, index) => {
           const inputKey = `input${index + 1}`;
@@ -152,6 +152,7 @@ const BarChartInput = (props: Props) => {
                   onUnselect={() => handleSelect(inputKey, null)}
                   selectedValue={selections[inputKey]} // Load from Zustand
                   isLoading={isLoading}
+                  allSelections={selections}
                 />
                 <div className="icon">
                   <AddIcon />

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

@@ -23,6 +23,10 @@ const FleetEfficiencyInputComponent = (props: Props) => {
   const organization = email?.split("@")[1]?.split(".")[0]
   const [isLoading, setLoading] = useState<boolean>(true);
 
+  const isSelected = () => {
+
+  }
+
   useEffect(() => {
     const fetchZoneData = async () => {
       try {
@@ -139,7 +143,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
       <div className="inputs-wrapper">
         <div className="datas">
           <div className="datas__label">Title</div>
-          <RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
+          <RenameInput value={widgetName || selectedChartId?.header} onRename={handleNameChange}/>
         </div>
         {[...Array(1)].map((_, index) => {
           const inputKey = `input${index + 1}`;
@@ -153,6 +157,7 @@ const FleetEfficiencyInputComponent = (props: Props) => {
                   onUnselect={() => handleSelect(inputKey, null)}
                   selectedValue={selections[inputKey]} // Load from Zustand
                   isLoading={isLoading}
+                  allSelections={selections}
                 />
                 <div className="icon">
                   <AddIcon />

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

@@ -139,7 +139,7 @@ const FlotingWidgetInput = (props: Props) => {
       <div className="inputs-wrapper">
         <div className="datas">
           <div className="datas__label">Title</div>
-          <RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
+          <RenameInput value={widgetName || selectedChartId?.header} onRename={handleNameChange}/>
         </div>
         {[...Array(6)].map((_, index) => {
           const inputKey = `input${index + 1}`;
@@ -153,6 +153,7 @@ const FlotingWidgetInput = (props: Props) => {
                   onUnselect={() => handleSelect(inputKey, null)}
                   selectedValue={selections[inputKey]} // Load from Zustand
                   isLoading={isLoading}
+                  allSelections={selections}
                 />
                 <div className="icon">
                   <AddIcon />

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

@@ -257,7 +257,7 @@ const LineGrapInput = (props: Props) => {
       <div className="inputs-wrapper">
         <div className="datas">
           <div className="datas__label">Title</div>
-          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+          <RenameInput value={widgetName || selectedChartId?.title} onRename={handleNameChange}/>
         </div>
         {[...Array(4)].map((_, index) => {
           const inputKey = `input${index + 1}`;
@@ -271,6 +271,7 @@ const LineGrapInput = (props: Props) => {
                   onUnselect={() => handleSelect(inputKey, null)}
                   selectedValue={selections[inputKey]} // Load from Zustand
                   isLoading={isLoading}
+                  allSelections={selections}
                 />
                 <div className="icon">
                   <AddIcon />

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

@@ -138,7 +138,7 @@ const PieChartInput = (props: Props) => {
       <div className="inputs-wrapper">
         <div className="datas">
           <div className="datas__label">Title</div>
-          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+          <RenameInput value={widgetName || selectedChartId?.title} onRename={handleNameChange}/>
         </div>
         {[...Array(2)].map((_, index) => {
           const inputKey = `input${index + 1}`;
@@ -152,6 +152,7 @@ const PieChartInput = (props: Props) => {
                   onUnselect={() => handleSelect(inputKey, null)}
                   selectedValue={selections[inputKey]} // Load from Zustand
                   isLoading={isLoading}
+                  allSelections={selections}
                 />
                 <div className="icon">
                   <AddIcon />

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

@@ -132,7 +132,7 @@ const Progress1Input = (props: Props) => {
       <div className="inputs-wrapper">
         <div className="datas">
           <div className="datas__label">Title</div>
-          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+          <RenameInput value={widgetName || selectedChartId?.title} onRename={handleNameChange}/>
         </div>
         {[...Array(1)].map((_, index) => {
           const inputKey = `input${index + 1}`;
@@ -146,6 +146,7 @@ const Progress1Input = (props: Props) => {
                   onUnselect={() => handleSelect(inputKey, null)}
                   selectedValue={selections[inputKey]} // Load from Zustand
                   isLoading={isLoading}
+                  allSelections={selections}
                 />
                 <div className="icon">
                   <AddIcon />

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

@@ -132,7 +132,7 @@ const Progress2Input = (props: Props) => {
       <div className="inputs-wrapper">
         <div className="datas">
           <div className="datas__label">Title</div>
-          <RenameInput value={selectedChartId?.title || "untited"} onRename={handleNameChange}/>
+          <RenameInput value={widgetName || selectedChartId?.title} onRename={handleNameChange}/>
         </div>
         {[...Array(2)].map((_, index) => {
           const inputKey = `input${index + 1}`;
@@ -146,6 +146,7 @@ const Progress2Input = (props: Props) => {
                   onUnselect={() => handleSelect(inputKey, null)}
                   selectedValue={selections[inputKey]} // Load from Zustand
                   isLoading={isLoading}
+                  allSelections={selections}
                 />
                 <div className="icon">
                   <AddIcon />

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

@@ -139,7 +139,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
       <div className="inputs-wrapper">
         <div className="datas">
           <div className="datas__label">Title</div>
-          <RenameInput value={selectedChartId?.header || "untited"} onRename={handleNameChange}/>
+          <RenameInput value={widgetName || selectedChartId?.header} onRename={handleNameChange}/>
         </div>
         {[...Array(1)].map((_, index) => {
           const inputKey = `input${index + 1}`;
@@ -153,6 +153,7 @@ const WarehouseThroughputInputComponent = (props: Props) => {
                   onUnselect={() => handleSelect(inputKey, null)}
                   selectedValue={selections[inputKey]} // Load from Zustand
                   isLoading={isLoading}
+                  allSelections={selections}
                 />
                 <div className="icon">
                   <AddIcon />

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

@@ -151,6 +151,7 @@ const Widget2InputCard3D = (props: Props) => {
                   onUnselect={() => handleSelect(inputKey, null)}
                   selectedValue={selections[inputKey]} // Load from Zustand
                   isLoading={isLoading}
+                  allSelections={selections}
                 />
                 <div className="icon">
                   <AddIcon />

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

@@ -144,6 +144,7 @@ const Widget3InputCard3D = () => {
                   onUnselect={() => handleSelect(inputKey, null)}
                   selectedValue={selections[inputKey]} // Load from Zustand
                   isLoading={isLoading}
+                  allSelections={selections}
                 />
                 <div className="icon">
                   <AddIcon />

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

@@ -151,6 +151,7 @@ const Widget4InputCard3D = (props: Props) => {
                   onUnselect={() => handleSelect(inputKey, null)}
                   selectedValue={selections[inputKey]} // Load from Zustand
                   isLoading={isLoading}
+                  allSelections={selections}
                 />
                 <div className="icon">
                   <AddIcon />

app/src/components/ui/inputs/MultiLevelDropDown.tsx

@@ -1,145 +1,3 @@
-// import React, { useState, useRef, useEffect } from "react";
-
-// // Dropdown Item Component
-// const DropdownItem = ({
-//   label,
-//   href,
-//   onClick,
-// }: {
-//   label: string;
-//   href?: string;
-//   onClick?: () => void;
-// }) => (
-//   <a
-//     href={href || "#"}
-//     className="dropdown-item"
-//     onClick={(e) => {
-//       e.preventDefault();
-//       onClick?.();
-//     }}
-//   >
-//     {label}
-//   </a>
-// );
-
-// // Nested Dropdown Component
-// const NestedDropdown = ({
-//   label,
-//   children,
-//   onSelect,
-// }: {
-//   label: string;
-//   children: React.ReactNode;
-//   onSelect: (selectedLabel: string) => void;
-// }) => {
-//   const [open, setOpen] = useState(false);
-
-//   return (
-//     <div className="nested-dropdown">
-//       {/* Dropdown Trigger */}
-//       <div
-//         className={`dropdown-trigger ${open ? "open" : ""}`}
-//         onClick={() => setOpen(!open)} // Toggle submenu on click
-//       >
-//         {label} <span className="icon">{open ? "▼" : "▶"}</span>
-//       </div>
-
-//       {/* Submenu */}
-//       {open && (
-//         <div className="submenu">
-//           {React.Children.map(children, (child) => {
-//             if (React.isValidElement(child)) {
-//               // Clone the element and pass the `onSelect` prop only if it's expected
-//               return React.cloneElement(child as React.ReactElement<any>, { onSelect });
-//             }
-//             return child; // Return non-element children as-is
-//           })}
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
-
-// // Recursive Function to Render Nested Data
-// const renderNestedData = (
-//   data: Record<string, any>,
-//   onSelect: (selectedLabel: string) => void
-// ) => {
-//   return Object.entries(data).map(([key, value]) => {
-//     if (typeof value === "object" && !Array.isArray(value)) {
-//       // If the value is an object, render it as a nested dropdown
-//       return (
-//         <NestedDropdown key={key} label={key} onSelect={onSelect}>
-//           {renderNestedData(value, onSelect)}
-//         </NestedDropdown>
-//       );
-//     } else if (Array.isArray(value)) {
-//       // If the value is an array, render each item as a dropdown item
-//       return value.map((item, index) => (
-//         <DropdownItem key={index} label={item} onClick={() => onSelect(item)} />
-//       ));
-//     } else {
-//       // If the value is a simple string, render it as a dropdown item
-//       return (
-//         <DropdownItem key={key} label={value} onClick={() => onSelect(value)} />
-//       );
-//     }
-//   });
-// };
-
-// // Main Multi-Level Dropdown Component
-// const MultiLevelDropdown = ({ data }: { data: Record<string, any> }) => {
-//   const [open, setOpen] = useState(false);
-//   const [selectedLabel, setSelectedLabel] = useState("Dropdown trigger");
-//   const dropdownRef = useRef<HTMLDivElement>(null);
-
-//   // Handle outer click to close the dropdown
-//   useEffect(() => {
-//     const handleClickOutside = (event: MouseEvent) => {
-//       if (
-//         dropdownRef.current &&
-//         !dropdownRef.current.contains(event.target as Node)
-//       ) {
-//         setOpen(false);
-//       }
-//     };
-
-//     document.addEventListener("mousedown", handleClickOutside);
-//     return () => {
-//       document.removeEventListener("mousedown", handleClickOutside);
-//     };
-//   }, []);
-
-//   // Handle selection of an item
-//   const handleSelect = (selectedLabel: string) => {
-//     setSelectedLabel(selectedLabel); // Update the dropdown trigger text
-//     setOpen(false); // Close the dropdown
-//   };
-
-//   return (
-//     <div className="multi-level-dropdown" ref={dropdownRef}>
-//       {/* Dropdown Trigger Button */}
-//       <button
-//         className={`dropdown-button ${open ? "open" : ""}`}
-//         onClick={() => setOpen(!open)} // Toggle main menu on click
-//       >
-//         {selectedLabel} <span className="icon">▾</span>
-//       </button>
-
-//       {/* Dropdown Menu */}
-//       {open && (
-//         <div className="dropdown-menu">
-//           <div className="dropdown-content">
-//             {renderNestedData(data, handleSelect)}
-//           </div>
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
-
-// export default MultiLevelDropdown;
-
 import React, { useState, useRef, useEffect } from "react";
 import { ArrowIcon } from "../../icons/ExportCommonIcons";
 
@@ -147,11 +5,19 @@ import { ArrowIcon } from "../../icons/ExportCommonIcons";
 const DropdownItem = ({
   label,
   onClick,
+  disabled = false,
 }: {
   label: string;
   onClick: () => void;
+  disabled?: boolean;
 }) => (
-  <div className="dropdown-item" onClick={onClick}>
+  <div
+    className={`dropdown-item ${disabled ? "disabled" : ""}`}
+    onClick={() => {
+      if (!disabled) onClick();
+    }}
+    style={{ cursor: disabled ? "not-allowed": "default", opacity: disabled ? 0.5 : 1 }}
+  >
     {label}
   </div>
 );
@@ -161,10 +27,12 @@ const NestedDropdown = ({
   label,
   fields,
   onSelect,
+  disabledFields = [],
 }: {
   label: string;
   fields: string[];
   onSelect: (selectedData: { name: string; fields: string }) => void;
+  disabledFields?: string[];
 }) => {
   const [open, setOpen] = useState(false);
 
@@ -184,13 +52,17 @@ const NestedDropdown = ({
       </div>
       {open && (
         <div className="submenu">
-          {fields.map((field) => (
+          {fields.map((field) => {
-            <DropdownItem
+            const isDisabled = disabledFields.includes(`${label}-${field}`);
-              key={field}
+            return (
-              label={field}
+              <DropdownItem
-              onClick={() => onSelect({ name: label, fields: field })}
+                key={field}
-            />
+                label={field}
-          ))}
+                onClick={() => onSelect({ name: label, fields: field })}
+                disabled={isDisabled}
+              />
+            );
+          })}
         </div>
       )}
     </div>
@@ -203,6 +75,7 @@ interface MultiLevelDropdownProps {
   onSelect: (selectedData: { name: string; fields: string }) => void;
   onUnselect: () => void;
   selectedValue?: { name: string; fields: string };
+  allSelections?: Record<string, { name: string; fields: string }>;
   isLoading?: boolean;
 }
 
@@ -212,6 +85,7 @@ const MultiLevelDropdown = ({
   onSelect,
   onUnselect,
   selectedValue,
+  allSelections = {},
   isLoading = false,
 }: MultiLevelDropdownProps) => {
   const [open, setOpen] = useState(false);
@@ -249,6 +123,14 @@ const MultiLevelDropdown = ({
     ? `${selectedValue.name} - ${selectedValue.fields}`
     : "Dropdown trigger";
 
+  // Build list of disabled selections
+  const disabledFieldsList = Object.values(allSelections)
+    .filter(
+      (sel) =>
+        !(sel.name === selectedValue?.name && sel.fields === selectedValue?.fields)
+    )
+    .map((sel) => `${sel.name}-${sel.fields}`);
+
   return (
     <div className="multi-level-dropdown" ref={dropdownRef}>
       <button
@@ -260,25 +142,23 @@ const MultiLevelDropdown = ({
       </button>
       {open && (
         <div className="dropdown-menu">
-          <div className="dropdown-content ">
+          <div className="dropdown-content">
-            
+            {isLoading ? (
-            {/* loading list */}
+              <div className="loading" />
-            
+            ) : (
-
+              <>
-            {/* Unselect Option */}
+                <DropdownItem label="Unselect" onClick={handleItemUnselect} />
-            <DropdownItem label="Unselect" onClick={handleItemUnselect} />
+                {Object.entries(data).map(([key, value]) => (
-            {/* Nested Dropdown Items */}
+                  <NestedDropdown
-            {
+                    key={key}
-              isLoading ?  <div className="loading" /> :   
+                    label={key}
-              Object.entries(data).map(([key, value]) => (
+                    fields={Object.keys(value)}
-                <NestedDropdown
+                    onSelect={handleItemSelect}
-                  key={key}
+                    disabledFields={disabledFieldsList}
-                  label={key}
+                  />
-                  fields={Object.keys(value)}
+                ))}
-                  onSelect={handleItemSelect}
+              </>
-                />
+            )}
-              ))
-            }
           </div>
         </div>
       )}

app/src/modules/visualization/widgets/floating/DroppedFloatingWidgets.tsx

@@ -558,7 +558,7 @@ const DroppedObjects: React.FC = () => {
 
         return (
           <div
-            key={`${zoneName}-${index}`}
+            key={obj.id}
             className={`${obj.className} ${
               selectedChartId?.id === obj.id && "activeChart"
             } `}