added input for name

app/src/components/layout/sidebarRight/visualization/data/Data.tsx

@@ -3,6 +3,7 @@ import { useWidgetStore } from "../../../../../store/useWidgetStore";
 import { AddIcon, RemoveIcon } from "../../../../icons/ExportCommonIcons";
 import MultiLevelDropDown from "../../../../ui/inputs/MultiLevelDropDown";
 import LineGrapInput from "../IotInputCards/LineGrapInput";
+import RenameInput from "../../../../ui/inputs/RenameInput";
 
 // Define the data structure for demonstration purposes
 const DATA_STRUCTURE = {
@@ -107,27 +108,32 @@ const Data = () => {
         [selectedChartId.id]: currentChartData.map((group) =>
           group.id === groupId
             ? {
-                ...group,
-                children: group.children.filter(
-                  (child) => child.id !== childId
-                ),
-              }
+              ...group,
+              children: group.children.filter(
+                (child) => child.id !== childId
+              ),
+            }
             : group
         ),
       };
     });
   };
+  console.log("selectedChartId", selectedChartId);
 
   return (
     <div className="dataSideBar">
-      {selectedChartId?.title && (
+      {/* {selectedChartId?.title && (
         <div className="sideBarHeader">{selectedChartId?.title}</div>
-      )}
+      )} */}
+
+
+      {/* <RenameInput value={selectedChartId?.title || "untited"} /> */}
+
       {/* Render groups dynamically */}
       {
         chartDataGroups[selectedChartId?.id] && <LineGrapInput />
       }
-      
+
       {/* Info Box */}
       <div className="infoBox">
         <span className="infoIcon">i</span>