diff --git a/app/src/components/ui/componets/AddButtons.tsx b/app/src/components/ui/componets/AddButtons.tsx
index d5bfb29..80a88df 100644
--- a/app/src/components/ui/componets/AddButtons.tsx
+++ b/app/src/components/ui/componets/AddButtons.tsx
@@ -59,7 +59,6 @@ const AddButtons: React.FC<ButtonsProps> = ({
setHiddenPanels,
hiddenPanels,
}) => {
-
const { visualizationSocket } = useSocketStore();
// Local state to track hidden panels
@@ -129,25 +128,27 @@ const AddButtons: React.FC<ButtonsProps> = ({
let deletePanel = {
organization: organization,
panelName: side,
- zoneId: selectedZone.zoneId
- }
+ zoneId: selectedZone.zoneId,
+ };
if (visualizationSocket) {
- visualizationSocket.emit("v2:viz-panel:delete", deletePanel)
+ visualizationSocket.emit("v2:viz-panel:delete", deletePanel);
}
setSelectedZone(updatedZone);
// API call to delete the panel
// try {
// const response = await deletePanelApi(selectedZone.zoneId, side, organization);
- //
+ //
// if (response.message === "Panel deleted successfully") {
// } else {
- //
+ //
// }
// } catch (error) {
- //
+ //
// }
} else {
+ setHiddenPanels(hiddenPanels.filter((panel) => panel !== side));
+
// Panel does not exist: Create panel
try {
// Get email and organization safely with a default fallback
@@ -167,27 +168,24 @@ const AddButtons: React.FC<ButtonsProps> = ({
let addPanel = {
organization: organization,
zoneId: selectedZone.zoneId,
- panelOrder: newActiveSides
- }
+ panelOrder: newActiveSides,
+ };
if (visualizationSocket) {
- visualizationSocket.emit("v2:viz-panel:add", addPanel)
+ visualizationSocket.emit("v2:viz-panel:add", addPanel);
}
setSelectedZone(updatedZone);
// API call to create panels
// const response = await panelData(organization, selectedZone.zoneId, newActiveSides);
- //
+ //
// if (response.message === "Panels created successfully") {
// } else {
- //
+ //
// }
- } catch (error) {
-
- }
+ } catch (error) {}
}
};
-
return (
<>
<div>
@@ -195,8 +193,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
<div key={side} className={`side-button-container ${side}`}>
{/* "+" Button */}
<button
- className={`side-button ${side}${selectedZone.activeSides.includes(side) ? " active" : ""
- }`}
+ className={`side-button ${side}${
+ selectedZone.activeSides.includes(side) ? " active" : ""
+ }`}
onClick={() => handlePlusButtonClick(side)}
title={
selectedZone.activeSides.includes(side)
@@ -214,15 +213,20 @@ const AddButtons: React.FC<ButtonsProps> = ({
<div className="extra-Bs">
{/* Hide Panel */}
<div
- className={`icon ${hiddenPanels.includes(side) ? "active" : ""
- }`}
+ className={`icon ${
+ hiddenPanels.includes(side) ? "active" : ""
+ }`}
title={
hiddenPanels.includes(side) ? "Show Panel" : "Hide Panel"
}
onClick={() => toggleVisibility(side)}
>
<EyeIcon
- fill={hiddenPanels.includes(side) ? "var(--primary-color)" : "var(--text-color)"}
+ fill={
+ hiddenPanels.includes(side)
+ ? "var(--primary-color)"
+ : "var(--text-color)"
+ }
/>
</div>
@@ -237,8 +241,9 @@ const AddButtons: React.FC<ButtonsProps> = ({
{/* Lock/Unlock Panel */}
<div
- className={`icon ${selectedZone.lockedPanels.includes(side) ? "active" : ""
- }`}
+ className={`icon ${
+ selectedZone.lockedPanels.includes(side) ? "active" : ""
+ }`}
title={
selectedZone.lockedPanels.includes(side)
? "Unlock Panel"
diff --git a/app/src/components/ui/componets/DraggableWidget.tsx b/app/src/components/ui/componets/DraggableWidget.tsx
index 41727db..7b667c8 100644
--- a/app/src/components/ui/componets/DraggableWidget.tsx
+++ b/app/src/components/ui/componets/DraggableWidget.tsx
@@ -260,7 +260,8 @@ export const DraggableWidget = ({
onDragOver={handleDragOver}
onDrop={handleDrop}
style={{
- pointerEvents: isPanelHidden ? "none" : "auto",
+ // pointerEvents: isPanelHidden ? "none" : "auto",
+ // opacity: isPanelHidden ? "0.1" : "0",
}}
ref={chartWidget}
onClick={() => setSelectedChartId(widget)}
diff --git a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
index 8cf1f86..593df04 100644
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -65,6 +65,7 @@ const DroppedObjects: React.FC = () => {
);
const [offset, setOffset] = useState<[number, number] | null>(null);
const { selectedChartId, setSelectedChartId } = useWidgetStore();
+
const [activeEdges, setActiveEdges] = useState<{
vertical: "top" | "bottom";
horizontal: "left" | "right";
@@ -84,7 +85,6 @@ const DroppedObjects: React.FC = () => {
// });
const kebabRef = useRef<HTMLDivElement>(null);
-
// Clean up animation frame on unmount
useEffect(() => {
return () => {
@@ -95,7 +95,10 @@ const DroppedObjects: React.FC = () => {
}, []);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
- if (kebabRef.current && !kebabRef.current.contains(event.target as Node)) {
+ if (
+ kebabRef.current &&
+ !kebabRef.current.contains(event.target as Node)
+ ) {
setOpenKebabId(null);
}
};
@@ -112,7 +115,6 @@ const DroppedObjects: React.FC = () => {
const zoneEntries = Object.entries(zones);
if (zoneEntries.length === 0) return null;
const [zoneName, zone] = zoneEntries[0];
-
function handleDuplicate(zoneName: string, index: number) {
setOpenKebabId(null);
@@ -123,16 +125,15 @@ const DroppedObjects: React.FC = () => {
try {
const email = localStorage.getItem("email") || "";
const organization = email?.split("@")[1]?.split(".")[0];
-
-
+
let deleteFloatingWidget = {
floatWidgetID: id,
organization: organization,
- zoneId: zone.zoneId
- }
-
+ zoneId: zone.zoneId,
+ };
+
if (visualizationSocket) {
- visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget)
+ visualizationSocket.emit("v2:viz-float:delete", deleteFloatingWidget);
}
deleteObject(zoneName, id);
@@ -142,13 +143,14 @@ const DroppedObjects: React.FC = () => {
// if (res.message === "FloatingWidget deleted successfully") {
// deleteObject(zoneName, id, index); // Call the deleteObject method from the store
// }
- } catch (error) {
-
- }
+ } catch (error) {}
}
const handlePointerDown = (event: React.PointerEvent, index: number) => {
- if ((event.target as HTMLElement).closest(".kebab-options") || (event.target as HTMLElement).closest(".kebab")) {
+ if (
+ (event.target as HTMLElement).closest(".kebab-options") ||
+ (event.target as HTMLElement).closest(".kebab")
+ ) {
return; // Prevent dragging when clicking on the kebab menu or its options
}
const obj = zone.objects[index];
@@ -448,7 +450,6 @@ const DroppedObjects: React.FC = () => {
// ...zone.objects[draggingIndex.index],
// position: boundedPosition,
// });
-
let updateFloatingWidget = {
organization: organization,
@@ -456,16 +457,16 @@ const DroppedObjects: React.FC = () => {
...zone.objects[draggingIndex.index],
position: boundedPosition,
},
- index:draggingIndex.index,
- zoneId: zone.zoneId
- }
+ index: draggingIndex.index,
+ zoneId: zone.zoneId,
+ };
if (visualizationSocket) {
- visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget)
+ visualizationSocket.emit("v2:viz-float:add", updateFloatingWidget);
}
// if (response.message === "Widget updated successfully") {
-
- console.log('boundedPosition: ', boundedPosition);
+
+ console.log("boundedPosition: ", boundedPosition);
updateObjectPosition(zoneName, draggingIndex.index, boundedPosition);
// }
@@ -479,7 +480,6 @@ const DroppedObjects: React.FC = () => {
// animationRef.current = null;
// }
} catch (error) {
-
} finally {
// Clean up regardless of success or failure
setDraggingIndex(null);
@@ -510,7 +510,7 @@ const DroppedObjects: React.FC = () => {
<div
key={`${zoneName}-${index}`}
className={`${obj.className} ${
- selectedChartId?.id === obj.id && "activeChart"
+ selectedChartId?.id === obj.id && !isPlaying && "activeChart"
}`}
ref={chartWidget}
style={{
@@ -559,7 +559,7 @@ const DroppedObjects: React.FC = () => {
</>
) : obj.className === "warehouseThroughput floating" ? (
<>
- <WarehouseThroughputComponent object={obj}/>
+ <WarehouseThroughputComponent object={obj} />
</>
) : obj.className === "fleetEfficiency floating" ? (
<>
@@ -571,26 +571,32 @@ const DroppedObjects: React.FC = () => {
ref={kebabRef}
onClick={(event) => {
event.stopPropagation();
- handleKebabClick(obj.id, event)
+ handleKebabClick(obj.id, event);
}}
>
<KebabIcon />
</div>
{openKebabId === obj.id && (
<div className="kebab-options" ref={kebabRef}>
- <div className="dublicate btn" onClick={(event) => {
- event.stopPropagation();
- handleDuplicate(zoneName, index); // Call the duplicate handler
- }}>
+ <div
+ className="dublicate btn"
+ onClick={(event) => {
+ event.stopPropagation();
+ handleDuplicate(zoneName, index); // Call the duplicate handler
+ }}
+ >
<div className="icon">
<DublicateIcon />
</div>
<div className="label">Duplicate</div>
</div>
- <div className="edit btn" onClick={(event) => {
- event.stopPropagation();
- handleDelete(zoneName, obj.id); // Call the delete handler
- }}>
+ <div
+ className="edit btn"
+ onClick={(event) => {
+ event.stopPropagation();
+ handleDelete(zoneName, obj.id); // Call the delete handler
+ }}
+ >
<div className="icon">
<DeleteIcon />
</div>
@@ -598,7 +604,6 @@ const DroppedObjects: React.FC = () => {
</div>
</div>
)}
-
</div>
))}
@@ -636,5 +641,3 @@ const DroppedObjects: React.FC = () => {
};
export default DroppedObjects;
-
-
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index dd24a14..ecc58ce 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -62,6 +62,7 @@
max-width: 80%;
overflow: auto;
max-width: calc(100% - 500px);
+ z-index: 3;
&::-webkit-scrollbar {
display: none;
@@ -173,9 +174,11 @@
overflow: auto;
z-index: $z-index-tools;
overflow: auto;
+
&::-webkit-scrollbar {
display: none;
}
+
.panel-content {
position: relative;
height: 100%;
@@ -326,7 +329,7 @@
}
.panel.hidePanel {
- opacity: 0;
+ opacity: 0.1;
}
}