Refactor DraggableWidget and Panel components; remove unused state variables, update canvas ID references, and enhance widget rendering logic. Improve sidebar styles for better layout and tooltip visibility.

app/src/modules/visualization/widgets/panel/Panel.tsx

@@ -56,6 +56,7 @@ const Panel: React.FC<PanelProps> = ({
   setZonesData,
   waitingPanels,
 }) => {
+  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
   const panelRefs = useRef<{ [side in Side]?: HTMLDivElement }>({});
   const [panelDimensions, setPanelDimensions] = useState<{
     [side in Side]?: { width: number; height: number };
@@ -68,12 +69,9 @@ const Panel: React.FC<PanelProps> = ({
     height: 0,
   });
 
-  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
-  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
-
   // Track canvas dimensions
   useEffect(() => {
-    const canvas = document.getElementById("work-space-three-d-canvas");
+    const canvas = document.getElementById("real-time-vis-canvas");
     if (!canvas) return;
 
     const updateCanvasDimensions = () => {
@@ -185,7 +183,7 @@ const Panel: React.FC<PanelProps> = ({
 
   // Add widget to panel
   const addWidgetToPanel = async (asset: any, panel: Side) => {
-    const email = localStorage.getItem("email") ?? "";
+    const email = localStorage.getItem("email") || "";
     const organization = email?.split("@")[1]?.split(".")[0];
 
     const newWidget = {
@@ -304,14 +302,13 @@ const Panel: React.FC<PanelProps> = ({
         >
           <div
             className={`panel-content
-            ${waitingPanels === side ? `${side}-closing` : ""}
-            ${
-              !hiddenPanels[selectedZone.zoneId]?.includes(side) &&
-              waitingPanels !== side
-                ? `${side}-opening`
-                : ""
-            }
-          ${isPlaying ? "fullScreen" : ""}`}
+  ${waitingPanels === side ? `${side}-closing` : ""}
+  ${
+    !hiddenPanels[selectedZone.zoneId]?.includes(side) && waitingPanels !== side
+      ? `${side}-opening`
+      : ""
+  }
+  ${isPlaying ? "fullScreen" : ""}`}
             style={{
               pointerEvents:
                 selectedZone.lockedPanels.includes(side) ||
@@ -322,7 +319,7 @@ const Panel: React.FC<PanelProps> = ({
             }}
           >
             {selectedZone.widgets
-              .filter((w) => w.panel === "top")
+              .filter((w) => w.panel === side)
               .map((widget, index) => (
                 <DraggableWidget
                   hiddenPanels={hiddenPanels}
@@ -332,15 +329,10 @@ const Panel: React.FC<PanelProps> = ({
                   onReorder={(fromIndex, toIndex) =>
                     handleReorder(fromIndex, toIndex, side)
                   }
-                  side={side}
                   openKebabId={openKebabId}
                   setOpenKebabId={setOpenKebabId}
                   selectedZone={selectedZone}
                   setSelectedZone={setSelectedZone}
-                  draggingIndex={draggingIndex}
-                  setDraggingIndex={setDraggingIndex}
-                  hoverIndex={hoverIndex}
-                  setHoverIndex={setHoverIndex}
                 />
               ))}
           </div>