Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Implement block and element removal functionality in DashboardEditor

Browse Source 
- Added deleteDashBoardBlocksApi service to handle block deletion from the dashboard.
- Integrated block removal functionality in DashboardEditor, allowing users to delete blocks.
- Updated BlockEditor and ElementEditor components to include remove block and element handlers.
- Enhanced Zustand store to manage block and element states effectively.
- Updated exported types to accommodate new data structures for blocks and elements.
This commit is contained in:
Jerald-Golden-B
2025-12-16 11:13:30 +05:30
parent 89c2339012
commit 2f12b35951
8 changed files with 593 additions and 529 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/src/components/SimulationDashboard/DashboardEditor.tsx
View File

@@ -18,6 +18,7 @@ import { handleBlockDragStart } from "./functions/block/handleBlockDragStart";
import { getDashBoardBlocksApi } from "../../services/visulization/dashBoard/getDashBoardBlocks";
import { upsetDashBoardBlocksApi } from "../../services/visulization/dashBoard/upsertDashBoardBlocks";
import { deleteDashBoardBlocksApi } from "../../services/visulization/dashBoard/deleteDashBoardBlocks";
const DashboardEditor: React.FC = () => {
const { simulationDashBoardStore, versionStore } = useSceneContext();
@@ -43,6 +44,9 @@ const DashboardEditor: React.FC = () => {
updateGraphTitle,
updateGraphType,
swapElements,
removeBlock,
removeElement,
getBlockById,
subscribe,
} = simulationDashBoardStore();
@@ -83,6 +87,7 @@ const DashboardEditor: React.FC = () => {
useEffect(() => {
if (!projectId || !selectedVersion) return;
getDashBoardBlocksApi(projectId, selectedVersion.versionId).then((data) => {
console.log("data: ", data);
if (data.data?.blocks) {
setBlocks(data.data.blocks);
}
@@ -102,6 +107,7 @@ const DashboardEditor: React.FC = () => {
useEffect(() => {
const unsubscribe = subscribe(() => {
if (!projectId || !selectedVersion) return;
console.log("blocks: ", blocks);
updateBackend(blocks);
});
@@ -374,6 +380,19 @@ const DashboardEditor: React.FC = () => {
updateBlockPosition={(blockId, position) => updateBlockPosition(blockId, position)}
updateBlockPositionType={(blockId, positionType) => updateBlockPositionType(blockId, positionType)}
updateBlockZIndex={(blockId, zIndex) => updateBlockZIndex(blockId, zIndex)}
handleRemoveBlock={(blockId) => {
const block = getBlockById(blockId);
if (!block) return;
deleteDashBoardBlocksApi({ projectId: projectId!, versionId: selectedVersion!.versionId, blocks: [block] }).then((data) => {
if (data.blocks.length>0) {
data.blocks.forEach((updatedBlock: any) => {
if (updatedBlock.message === "Block deleted successfully") {
removeBlock(updatedBlock.blockUuid);
}
});
}
});
}}
/>
)}
{selectedElement && editMode && selectedBlock && currentElement && (
@@ -391,6 +410,7 @@ const DashboardEditor: React.FC = () => {
updateGraphData={(blockId, elementId, newData) => updateGraphData(blockId, elementId, newData)}
updateGraphTitle={(blockId, elementId, title) => updateGraphTitle(blockId, elementId, title)}
updateGraphType={(blockId, elementId, type) => updateGraphType(blockId, elementId, type)}
handleRemoveElement={(blockId, elementId) => removeElement(blockId, elementId)}
setSwapSource={setSwapSource}
setShowSwapUI={setShowSwapUI}
dataModelManager={dataModelManager}

10
app/src/components/SimulationDashboard/components/block/BlockComponent.tsx
View File

@@ -47,7 +47,7 @@ const BlockComponent: React.FC<BlockComponentProps> = ({
handleBlockDragStart,
}) => {
const { simulationDashBoardStore } = useSceneContext();
const { addElement } = simulationDashBoardStore()
const { addElement } = simulationDashBoardStore();
const dropdownRef = useRef<HTMLDivElement>(null);
@@ -122,10 +122,11 @@ const BlockComponent: React.FC<BlockComponentProps> = ({
))}
{/* Block resize handle */}
{editMode && isSelected &&
{editMode && isSelected && (
<div className="resize-handle" onMouseDown={(e) => handleBlockResizeStart(block.blockUuid, e)}>
<ResizeIcon />
</div>}
</div>
)}
{/* Drag handle indicator for absolute/fixed blocks */}
{isDraggable && editMode && (
@@ -152,9 +153,6 @@ const BlockComponent: React.FC<BlockComponentProps> = ({
⤣
</div>
)}
</div>
);
};

9
app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
View File

@@ -18,6 +18,7 @@ interface BlockEditorProps {
updateBlockPosition: (blockId: string, position: { x: number; y: number }) => void;
updateBlockPositionType: (blockId: string, positionType: "relative" | "absolute" | "fixed") => void;
updateBlockZIndex: (blockId: string, zIndex: number) => void;
handleRemoveBlock: (blockId: string) => void;
}
const BlockEditor: React.FC<BlockEditorProps> = ({
@@ -29,12 +30,18 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
updateBlockPosition,
updateBlockPositionType,
updateBlockZIndex,
handleRemoveBlock,
}) => {
return (
<div ref={blockEditorRef} className="panel block-editor-panel">
<div className="header">
<h4>Block Style</h4>
<div className="delete icon">
<div
className="delete icon"
onClick={() => {
handleRemoveBlock(selectedBlock);
}}
>
<DeleteIcon />
</div>
</div>

18
app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
View File

@@ -18,6 +18,7 @@ interface ElementEditorProps {
updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void;
handleRemoveElement: (blockId: string, elementId: string) => void;
setSwapSource: (source: string | null) => void;
setShowSwapUI: (show: boolean) => void;
dataModelManager: DataModelManager;
@@ -37,6 +38,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
updateGraphData,
updateGraphTitle,
updateGraphType,
handleRemoveElement,
setSwapSource,
setShowSwapUI,
dataModelManager,
@@ -52,10 +54,16 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
return (
<div ref={elementEditorRef} className="panel element-editor-panel">
<div className="header">
<h4>Element Style</h4>
<div className="delete icon"><DeleteIcon /></div>
<div
className="delete icon"
onClick={() => {
handleRemoveElement(selectedBlock, selectedElement);
}}
>
<DeleteIcon />
</div>
</div>
{currentElement.type === "label-value" && (
<>
@@ -352,11 +360,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
<>
<div className="form-group">
<label className="form-label">Chart Type: </label>
<select
value={currentElement.graphType || "line"}
onChange={(e) => updateGraphType(selectedBlock, selectedElement, e.target.value as GraphTypes)}
className="form-select"
>
<select value={currentElement.graphType || "line"} onChange={(e) => updateGraphType(selectedBlock, selectedElement, e.target.value as GraphTypes)} className="form-select">
<option value="line">Line Chart</option>
<option value="bar">Bar Chart</option>
<option value="area">Area Chart</option>

30
app/src/services/visulization/dashBoard/deleteDashBoardBlocks.ts Normal file
View File

@@ -0,0 +1,30 @@
import { Block } from "../../../types/exportedTypes";
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
export const deleteDashBoardBlocksApi = async ({ projectId, versionId, blocks }: { projectId: string; versionId: string; blocks: Block[] }) => {
try {
const response = await fetch(`${url_Backend_dwinzo}/api/V1/simulation/blocks`, {
method: "PATCH",
headers: {
Authorization: "Bearer <access_token>",
"Content-Type": "application/json",
token: localStorage.getItem("token") || "",
refresh_token: localStorage.getItem("refreshToken") || "",
},
body: JSON.stringify({ projectId, versionId, blocks }),
});
const newAccessToken = response.headers.get("x-access-token");
if (newAccessToken) {
localStorage.setItem("token", newAccessToken);
}
if (!response.ok) {
echo.error("Failed to delete dashBoardBlocks");
}
return await response.json();
} catch {
echo.error("Failed to delete dashBoardBlocks");
}
};

296
app/src/store/simulation/useSimulationDashBoardStore.ts
View File

@@ -2,11 +2,7 @@ import { MathUtils } from "three";
import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import { defaultGraphData } from "../../components/SimulationDashboard/data/defaultGraphData";
import {
Block,
UIElement,
ExtendedCSSProperties,
} from "../../types/exportedTypes";
import { Block, UIElement, ExtendedCSSProperties } from "../../types/exportedTypes";
interface SimulationDashboardStore {
blocks: Block[];
@@ -29,72 +25,33 @@ interface SimulationDashboardStore {
updateBlockStyle: (blockId: string, newStyle: React.CSSProperties) => void;
updateBlockSize: (blockId: string, size: Size) => void;
updateBlockPosition: (blockId: string, position: Position) => void;
updateBlockPositionType: (
blockId: string,
positionType: "relative" | "absolute" | "fixed"
) => void;
updateBlockPositionType: (blockId: string, positionType: "relative" | "absolute" | "fixed") => void;
updateBlockZIndex: (blockId: string, zIndex: number) => void;
// Element operations
addElement: (blockId: string, type: UIType, graphType?: GraphTypes) => void;
removeElement: (blockId: string, elementId: string) => void;
updateElement: (
blockId: string,
elementId: string,
updates: Partial<UIElement>
) => void;
updateElement: (blockId: string, elementId: string, updates: Partial<UIElement>) => void;
// Element styling and positioning
updateElementStyle: (
blockId: string,
elementId: string,
newStyle: ExtendedCSSProperties
) => void;
updateElementStyle: (blockId: string, elementId: string, newStyle: ExtendedCSSProperties) => void;
updateElementSize: (blockId: string, elementId: string, size: Size) => void;
updateElementPosition: (
blockId: string,
elementId: string,
position: Position
) => void;
updateElementPositionType: (
blockId: string,
elementId: string,
positionType: "relative" | "absolute" | "fixed"
) => void;
updateElementZIndex: (
blockId: string,
elementId: string,
zIndex: number
) => void;
updateElementPosition: (blockId: string, elementId: string, position: Position) => void;
updateElementPositionType: (blockId: string, elementId: string, positionType: "relative" | "absolute" | "fixed") => void;
updateElementZIndex: (blockId: string, elementId: string, zIndex: number) => void;
// Element data operations
updateElementData: (
blockId: string,
elementId: string,
updates: Partial<DataBinding>
) => void;
updateGraphData: (
blockId: string,
elementId: string,
newData: GraphDataPoint[]
) => void;
updateElementData: (blockId: string, elementId: string, updates: Partial<DataBinding>) => void;
updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
updateGraphType: (
blockId: string,
elementId: string,
graphType: GraphTypes
) => void;
updateGraphType: (blockId: string, elementId: string, graphType: GraphTypes) => void;
// Selection and hover management
setSelectedBlock: (blockId: string | null) => void;
setSelectedElement: (elementId: string | null) => void;
// Element swapping
swapElements: (
blockId: string,
elementId1: string,
elementId2: string
) => void;
swapElements: (blockId: string, elementId1: string, elementId2: string) => void;
// Helper functions
getBlockById: (blockId: string) => Block | undefined;
@@ -162,9 +119,7 @@ export const createSimulationDashboardStore = () => {
removeBlock: (blockId) => {
set((state) => {
state.blocks = state.blocks.filter(
(block) => block.blockUuid !== blockId
);
state.blocks = state.blocks.filter((block) => block.blockUuid !== blockId);
if (state.selectedBlockId === blockId) {
state.selectedBlockId = null;
}
@@ -241,34 +196,35 @@ export const createSimulationDashboardStore = () => {
},
// Element operations
addElement: (blockId, type, graphType) => {
addElement: (blockId, type, graphType, dataType?: DataType) => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const newElement: UIElement = {
if (!block) return;
let newElement: UIElement;
const commonProps = {
elementUuid: MathUtils.generateUUID(),
type: type,
graphType,
graphTitle: graphType
? `${
graphType.charAt(0).toUpperCase() + graphType.slice(1)
} Chart`
: undefined,
style:
type === "graph"
? {
width: "100%",
height: "100%",
minHeight: "120px",
color: "#ffffff",
fontSize: 14,
textAlign: "left" as const,
backgroundColor: "rgba(0, 0, 0, 0.2)",
borderRadius: "4px",
padding: "8px",
}
: type === "label-value"
? {
positionType: "relative" as const,
position: { x: 0, y: 0 },
zIndex: 1,
data: {
key: MathUtils.generateUUID(),
dataSource: "static" as const,
staticValue: "",
label: undefined,
},
};
switch (type) {
case "label-value":
newElement = {
...commonProps,
type: "label-value",
title: "Label Value",
dataSource: "machine-1",
dataValue: "metric-1",
style: {
color: "#ffffff",
fontSize: 14,
textAlign: "left" as const,
@@ -279,34 +235,92 @@ export const createSimulationDashboardStore = () => {
justifyContent: "center",
labelColor: "#ffffff",
valueColor: "#ffffff",
},
data: {
...commonProps.data,
staticValue: "Value",
label: "Label",
},
size: { width: 200, height: 60 },
};
break;
case "graph":
const baseGraphProps = {
...commonProps,
type: "graph" as const,
graphType: graphType,
graphTitle: "Graph Title",
style: {
width: "100%",
height: "100%",
minHeight: "120px",
color: "#ffffff",
fontSize: 14,
textAlign: "left" as const,
backgroundColor: "rgba(0, 0, 0, 0.2)",
borderRadius: "4px",
padding: "8px",
},
graphData: defaultGraphData,
size: { width: 400, height: 200 },
};
if (dataType === "multiple-machine") {
newElement = {
...baseGraphProps,
dataType: "multiple-machine" as const,
title: "Multi Machine Chart",
dataSource: ["machine-1", "machine-2", "machine-3"],
commonValue: "metric-1",
};
} else {
// Default to single-machine
newElement = {
...baseGraphProps,
dataType: "single-machine" as const,
title: "Single Machine Chart",
dataSource: "machine-1",
dataValue: ["metric-1", "metric-2", "metric-3"],
};
}
: {
break;
case "text":
newElement = {
...commonProps,
type: "text",
style: {
color: "#ffffff",
fontSize: 14,
textAlign: "left" as const,
},
positionType: "relative",
position: { x: 0, y: 0 },
zIndex: 1,
data: {
key: MathUtils.generateUUID(),
dataSource: "static",
staticValue:
type === "label-value"
? "Value"
: type === "text"
? "Text"
: "",
label: type === "label-value" ? "Label" : undefined,
...commonProps.data,
staticValue: "Text",
},
graphData: type === "graph" ? defaultGraphData : undefined,
size:
type === "graph"
? { width: 400, height: 200 }
: { width: 200, height: 60 },
size: { width: 200, height: 40 },
};
block.elements.push(newElement);
break;
case "icon":
newElement = {
...commonProps,
type: "icon",
style: {
color: "#ffffff",
fontSize: 14,
textAlign: "center" as const,
},
size: { width: 40, height: 40 },
};
break;
default:
return; // Should not happen
}
block.elements.push(newElement);
});
},
@@ -314,9 +328,7 @@ export const createSimulationDashboardStore = () => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
block.elements = block.elements.filter(
(el) => el.elementUuid !== elementId
);
block.elements = block.elements.filter((el) => el.elementUuid !== elementId);
if (state.selectedElementId === elementId) {
state.selectedElementId = null;
}
@@ -328,9 +340,7 @@ export const createSimulationDashboardStore = () => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find(
(el) => el.elementUuid === elementId
);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
Object.assign(element, updates);
}
@@ -343,9 +353,7 @@ export const createSimulationDashboardStore = () => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find(
(el) => el.elementUuid === elementId
);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.style = { ...element.style, ...newStyle };
}
@@ -357,9 +365,7 @@ export const createSimulationDashboardStore = () => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find(
(el) => el.elementUuid === elementId
);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.size = size;
}
@@ -371,9 +377,7 @@ export const createSimulationDashboardStore = () => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find(
(el) => el.elementUuid === elementId
);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.position = position;
}
@@ -385,9 +389,7 @@ export const createSimulationDashboardStore = () => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find(
(el) => el.elementUuid === elementId
);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.positionType = positionType;
}
@@ -399,9 +401,7 @@ export const createSimulationDashboardStore = () => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find(
(el) => el.elementUuid === elementId
);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.zIndex = zIndex;
}
@@ -414,9 +414,7 @@ export const createSimulationDashboardStore = () => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find(
(el) => el.elementUuid === elementId
);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element?.data) {
element.data = { ...element.data, ...updates };
}
@@ -428,9 +426,7 @@ export const createSimulationDashboardStore = () => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find(
(el) => el.elementUuid === elementId
);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.graphData = newData;
}
@@ -442,9 +438,7 @@ export const createSimulationDashboardStore = () => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find(
(el) => el.elementUuid === elementId
);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element) {
element.graphTitle = title;
}
@@ -456,14 +450,10 @@ export const createSimulationDashboardStore = () => {
set((state) => {
const block = state.blocks.find((b) => b.blockUuid === blockId);
if (block) {
const element = block.elements.find(
(el) => el.elementUuid === elementId
);
const element = block.elements.find((el) => el.elementUuid === elementId);
if (element && element.type === "graph") {
element.graphType = graphType;
element.graphTitle = `${
graphType.charAt(0).toUpperCase() + graphType.slice(1)
} Chart`;
element.graphTitle = `${graphType.charAt(0).toUpperCase() + graphType.slice(1)} Chart`;
element.graphData = defaultGraphData;
}
@@ -495,20 +485,12 @@ export const createSimulationDashboardStore = () => {
if (block) {
block.elements = block.elements.map((el) => {
if (el.elementUuid === elementId1) {
const targetElement = block.elements.find(
(e) => e.elementUuid === elementId2
);
return targetElement
? { ...targetElement, elementUuid: elementId1 }
: el;
const targetElement = block.elements.find((e) => e.elementUuid === elementId2);
return targetElement ? { ...targetElement, elementUuid: elementId1 } : el;
}
if (el.elementUuid === elementId2) {
const sourceElement = block.elements.find(
(e) => e.elementUuid === elementId1
);
return sourceElement
? { ...sourceElement, elementUuid: elementId2 }
: el;
const sourceElement = block.elements.find((e) => e.elementUuid === elementId1);
return sourceElement ? { ...sourceElement, elementUuid: elementId2 } : el;
}
return el;
});
@@ -528,9 +510,7 @@ export const createSimulationDashboardStore = () => {
getSelectedBlock: () => {
const { selectedBlockId, blocks } = get();
return selectedBlockId
? blocks.find((b) => b.blockUuid === selectedBlockId)
: undefined;
return selectedBlockId ? blocks.find((b) => b.blockUuid === selectedBlockId) : undefined;
},
getSelectedElement: () => {
@@ -538,9 +518,7 @@ export const createSimulationDashboardStore = () => {
if (!selectedElementId || !selectedBlockId) return undefined;
const block = blocks.find((b) => b.blockUuid === selectedBlockId);
return block?.elements.find(
(el) => el.elementUuid === selectedElementId
);
return block?.elements.find((el) => el.elementUuid === selectedElementId);
},
hasBlock: (blockId) => {
@@ -549,14 +527,10 @@ export const createSimulationDashboardStore = () => {
hasElement: (blockId, elementId) => {
const block = get().blocks.find((b) => b.blockUuid === blockId);
return (
block?.elements.some((el) => el.elementUuid === elementId) || false
);
return block?.elements.some((el) => el.elementUuid === elementId) || false;
},
}))
);
};
export type SimulationDashboardStoreType = ReturnType<
typeof createSimulationDashboardStore
>;
export type SimulationDashboardStoreType = ReturnType<typeof createSimulationDashboardStore>;

31
app/src/types/exportedTypes.ts
View File

@@ -27,4 +27,33 @@ export type UIElement = {
zIndex?: number;
graphData?: GraphDataPoint[];
size?: Size;
};
} & (
| {
type: "label-value";
title: string;
dataSource: string;
dataValue: string;
}
| {
type: "graph";
dataType: "single-machine";
title: string;
dataSource: string;
dataValue: string[];
}
| {
type: "graph";
dataType: "multiple-machine";
title: string;
dataSource: string[];
commonValue: string;
}
| {
type: Exclude<UIType, "label-value" | "graph">;
title?: never;
dataSource?: never;
dataValue?: never;
commonValue?: never;
dataType?: never;
}
);

2
app/src/types/simulationDashboard.d.ts vendored
View File

@@ -17,6 +17,8 @@ type DataModel = Record<string, DataModelValue>;
type UIType = "label-value" | "text" | "graph" | "icon";
type DataType = "single-machine" | "multiple-machine";
type Position = {
x: number;
y: number;