Fix service map nodes disappearing on page reload
Root cause: Zustand store resets to activeMap=null on every page load.
fetchMaps() only loaded the summary list — nodes were never reloaded
because the user had to manually re-select their map each time.
Fixes:
1. Persist last active map ID in localStorage (key: rackmapper:lastMapId)
- loadMap() saves the ID on successful load
- setActiveMap() saves/clears the ID
- deleteMap() clears the ID if the deleted map was active
2. Auto-restore on mount inside fetchMaps():
- If the saved map ID is still in the list, auto-load it
- If there is exactly one map, auto-load it as a convenience
3. Block spurious position saves during map load (blockSaveRef):
- fitView fires position NodeChanges for all nodes after load
- Without a guard these would overwrite stored positions with
React Flow's fitted coordinates immediately on every reload
- blockSaveRef is set true on activeMap change, cleared after 800ms
4. Tighten the position-change filter:
- Require dragging === false (strict equality, not just falsy)
- Require position != null before saving
- Both conditions must be true to queue a save
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -148,48 +148,58 @@ function ServiceMapperInner() {
|
||||
|
||||
const [ctxMenu, setCtxMenu] = useState<CtxMenu>(null);
|
||||
const [nodeEditState, setNodeEditState] = useState<NodeEditState>(null);
|
||||
// Block position saves briefly after map load to prevent fitView from
|
||||
// firing spurious position changes that overwrite stored positions
|
||||
const blockSaveRef = useRef(false);
|
||||
|
||||
// Load maps list on mount
|
||||
useEffect(() => {
|
||||
fetchMaps().catch(() => toast.error('Failed to load maps'));
|
||||
}, [fetchMaps]);
|
||||
|
||||
// When active map changes, update flow state
|
||||
// When active map changes, update flow state and block position saves briefly
|
||||
useEffect(() => {
|
||||
if (activeMap) {
|
||||
blockSaveRef.current = true;
|
||||
setNodes(toFlowNodes(activeMap));
|
||||
setEdges(toFlowEdges(activeMap));
|
||||
// Unblock after React Flow has settled its initial layout
|
||||
const t = setTimeout(() => { blockSaveRef.current = false; }, 800);
|
||||
return () => clearTimeout(t);
|
||||
} else {
|
||||
setNodes([]);
|
||||
setEdges([]);
|
||||
}
|
||||
}, [activeMap, setNodes, setEdges]);
|
||||
|
||||
// Debounced node position save (500ms after drag end)
|
||||
// Debounced node position save (500ms after drag ends)
|
||||
const handleNodesChange = useCallback(
|
||||
(changes: NodeChange<Node>[]) => {
|
||||
onNodesChange(changes);
|
||||
|
||||
const positionChanges = changes.filter(
|
||||
(c): c is NodeChange<Node> & { type: 'position'; dragging: false } =>
|
||||
c.type === 'position' && !(c as { dragging?: boolean }).dragging
|
||||
);
|
||||
// Don't persist positions during initial load / fitView settle period
|
||||
if (blockSaveRef.current) return;
|
||||
|
||||
const positionChanges = changes.filter((c) => {
|
||||
if (c.type !== 'position') return false;
|
||||
const pc = c as { type: 'position'; id: string; position?: { x: number; y: number }; dragging?: boolean };
|
||||
// Only save when drag has fully ended (dragging === false) and position is present
|
||||
return pc.dragging === false && pc.position != null;
|
||||
});
|
||||
|
||||
if (positionChanges.length === 0) return;
|
||||
|
||||
if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
|
||||
saveTimerRef.current = setTimeout(async () => {
|
||||
for (const change of positionChanges) {
|
||||
const nodeId = (change as { id: string }).id;
|
||||
const position = (change as { position?: { x: number; y: number } }).position;
|
||||
if (!position) continue;
|
||||
const pc = change as { id: string; position: { x: number; y: number } };
|
||||
try {
|
||||
await apiClient.nodes.update(nodeId, {
|
||||
positionX: position.x,
|
||||
positionY: position.y,
|
||||
await apiClient.nodes.update(pc.id, {
|
||||
positionX: pc.position.x,
|
||||
positionY: pc.position.y,
|
||||
});
|
||||
} catch {
|
||||
// Silent — position drift on failure is acceptable
|
||||
// Silent — minor position drift on failure is acceptable
|
||||
}
|
||||
}
|
||||
}, 500);
|
||||
|
||||
Reference in New Issue
Block a user