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:
@@ -2,6 +2,17 @@ import { create } from 'zustand';
|
||||
import type { ServiceMap, ServiceMapSummary } from '../types';
|
||||
import { apiClient } from '../api/client';
|
||||
|
||||
const LAST_MAP_KEY = 'rackmapper:lastMapId';
|
||||
|
||||
function saveLastMapId(id: string | null) {
|
||||
if (id) localStorage.setItem(LAST_MAP_KEY, id);
|
||||
else localStorage.removeItem(LAST_MAP_KEY);
|
||||
}
|
||||
|
||||
function getLastMapId(): string | null {
|
||||
return localStorage.getItem(LAST_MAP_KEY);
|
||||
}
|
||||
|
||||
interface MapState {
|
||||
maps: ServiceMapSummary[];
|
||||
activeMap: ServiceMap | null;
|
||||
@@ -13,7 +24,7 @@ interface MapState {
|
||||
setActiveMap: (map: ServiceMap | null) => void;
|
||||
}
|
||||
|
||||
export const useMapStore = create<MapState>((set) => ({
|
||||
export const useMapStore = create<MapState>((set, get) => ({
|
||||
maps: [],
|
||||
activeMap: null,
|
||||
loading: false,
|
||||
@@ -23,6 +34,15 @@ export const useMapStore = create<MapState>((set) => ({
|
||||
try {
|
||||
const maps = await apiClient.maps.list();
|
||||
set({ maps, loading: false });
|
||||
|
||||
// Auto-restore the last active map after loading the list
|
||||
const lastId = getLastMapId();
|
||||
if (lastId && maps.some((m) => m.id === lastId)) {
|
||||
await get().loadMap(lastId);
|
||||
} else if (maps.length === 1) {
|
||||
// Convenience: auto-load if there's only one map
|
||||
await get().loadMap(maps[0].id);
|
||||
}
|
||||
} catch {
|
||||
set({ loading: false });
|
||||
throw new Error('Failed to load maps');
|
||||
@@ -33,6 +53,7 @@ export const useMapStore = create<MapState>((set) => ({
|
||||
set({ loading: true });
|
||||
try {
|
||||
const map = await apiClient.maps.get(id);
|
||||
saveLastMapId(id);
|
||||
set({ activeMap: map, loading: false });
|
||||
} catch {
|
||||
set({ loading: false });
|
||||
@@ -42,17 +63,26 @@ export const useMapStore = create<MapState>((set) => ({
|
||||
|
||||
createMap: async (name, description) => {
|
||||
const map = await apiClient.maps.create({ name, description });
|
||||
set((s) => ({ maps: [{ id: map.id, name: map.name, description: map.description, createdAt: map.createdAt, updatedAt: map.updatedAt }, ...s.maps] }));
|
||||
set((s) => ({
|
||||
maps: [
|
||||
{ id: map.id, name: map.name, description: map.description, createdAt: map.createdAt, updatedAt: map.updatedAt },
|
||||
...s.maps,
|
||||
],
|
||||
}));
|
||||
return map;
|
||||
},
|
||||
|
||||
deleteMap: async (id) => {
|
||||
await apiClient.maps.delete(id);
|
||||
if (getLastMapId() === id) saveLastMapId(null);
|
||||
set((s) => ({
|
||||
maps: s.maps.filter((m) => m.id !== id),
|
||||
activeMap: s.activeMap?.id === id ? null : s.activeMap,
|
||||
}));
|
||||
},
|
||||
|
||||
setActiveMap: (map) => set({ activeMap: map }),
|
||||
setActiveMap: (map) => {
|
||||
saveLastMapId(map?.id ?? null);
|
||||
set({ activeMap: map });
|
||||
},
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user