Skip to content

Perf: memoize inline locations and gate editor search #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GitAddRemote merged 2 commits into from
Dec 19, 2025
Merged

Perf: memoize inline locations and gate editor search #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9756cb9
perf: memoize inline locations and gate editor search
GitAddRemote Dec 19, 2025
06f3008
chore: fix typecheck unused import in editor-mode test
GitAddRemote Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 12 additions & 25 deletions frontend/src/components/inventory/InventoryInlineRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useMemo } from 'react';
import type { MouseEvent } from 'react';
import {
Autocomplete,
Expand All @@ -14,6 +13,7 @@ import CheckIcon from '@mui/icons-material/Check';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import type { InventoryItem, OrgInventoryItem } from '../../services/inventory.service';
import type { FocusController } from '../../utils/focusController';
import { useMemoizedLocations } from '../../hooks/useMemoizedLocations';

export type InventoryRecord = InventoryItem | OrgInventoryItem;

Expand Down Expand Up @@ -73,31 +73,18 @@ export const InventoryInlineRow = ({
typeof inlineDraft.locationId === 'string'
? Number(inlineDraft.locationId)
: inlineDraft.locationId;
const selectedLocation =
allLocations.find((loc) => loc.id === draftLocationId) ||
(typeof draftLocationId === 'number'
? {
id: draftLocationId,
name: item.locationName || `Location #${draftLocationId}`,
}
: null);

const filteredOptions = useMemo(() => {
const filterTerm = inlineLocationInput.trim().toLowerCase();
return allLocations
.filter((opt) => opt.name.toLowerCase().includes(filterTerm))
.sort((a, b) => {
const aName = a.name.toLowerCase();
const bName = b.name.toLowerCase();
const aStarts = aName.startsWith(filterTerm);
const bStarts = bName.startsWith(filterTerm);
if (aStarts !== bStarts) return aStarts ? -1 : 1;
const aIndex = aName.indexOf(filterTerm);
const bIndex = bName.indexOf(filterTerm);
if (aIndex !== bIndex) return aIndex - bIndex;
return a.name.localeCompare(b.name);
});
}, [allLocations, inlineLocationInput]);
const { filtered: filteredOptions, getSelected } = useMemoizedLocations(
allLocations,
inlineLocationInput,
);
const selectedLocation =
typeof draftLocationId === 'number'
? getSelected(draftLocationId) ||
(item.locationName
? { id: draftLocationId, name: item.locationName }
: null)
: null;

const draftQuantityNumber = Number(inlineDraft.quantity);

Expand Down
31 changes: 31 additions & 0 deletions frontend/src/hooks/useMemoizedLocations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { useMemo } from 'react';

interface LocationOption {
id: number;
name: string;
}

export const useMemoizedLocations = (allLocations: LocationOption[], input: string) => {
const filtered = useMemo(() => {
const term = input.trim().toLowerCase();
return allLocations
.filter((opt) => opt.name.toLowerCase().includes(term))
.sort((a, b) => {
const aName = a.name.toLowerCase();
const bName = b.name.toLowerCase();
const aStarts = aName.startsWith(term);
const bStarts = bName.startsWith(term);
if (aStarts !== bStarts) return aStarts ? -1 : 1;
const aIndex = aName.indexOf(term);
const bIndex = bName.indexOf(term);
if (aIndex !== bIndex) return aIndex - bIndex;
return a.name.localeCompare(b.name);
});
}, [allLocations, input]);

const getSelected = (id: number | '') =>
typeof id === 'number' ? allLocations.find((loc) => loc.id === id) ?? null : null;

return { filtered, getSelected };
};

17 changes: 17 additions & 0 deletions frontend/src/pages/Inventory.editor-mode.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,13 @@ jest.mock('../services/uex.service', () => ({
getStarSystems: jest.fn(),
},
}));
jest.mock('../hooks/useMemoizedLocations', () => {
const original = jest.requireActual('../hooks/useMemoizedLocations');
return {
...original,
useMemoizedLocations: jest.fn((...args: unknown[]) => original.useMemoizedLocations(...args)),
};
});
const mockItem = {
id: 'item-1',
userId: 1,
Expand Down Expand Up @@ -446,4 +453,14 @@ describe('Inventory editor mode inline controls', () => {
const saveButton = await screen.findByTestId('inline-save-item-1');
await waitFor(() => expect(document.activeElement).toBe(saveButton));
});

it('memoizes location filtering for inline rows', () => {
const { useMemoizedLocations: mockedHook } = jest.requireMock('../hooks/useMemoizedLocations');
render(
<MemoryRouter initialEntries={['/inventory']}>
<InventoryPage />
</MemoryRouter>,
);
expect(mockedHook).toHaveBeenCalled();
});
});
162 changes: 84 additions & 78 deletions frontend/src/pages/Inventory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1439,6 +1439,89 @@ const InventoryPage = () => {
}

const showEmptyState = filteredItems.length === 0 && !refreshing;
const renderInlineRow = (item: InventoryRecord) => {
const rowKey = item.id.toString();
const draft = inlineDrafts[item.id] ?? {
locationId: Number(item.locationId) || '',
quantity: Number(item.quantity) || 0,
};
const originalLocationId = Number(item.locationId) || '';
const draftLocationId =
typeof draft.locationId === 'string' ? Number(draft.locationId) : draft.locationId;
const originalQuantity = Number(item.quantity) || 0;
const draftQuantityNumber = Number(draft.quantity);
const isDirty =
draftLocationId !== originalLocationId || draftQuantityNumber !== originalQuantity;
const inlineLocationValue =
inlineLocationInputs[rowKey] ??
(locationEditing[rowKey]
? ''
: allLocations.find((loc) => loc.id === (typeof draft.locationId === 'number' ? draft.locationId : Number(draft.locationId)))?.name ??
item.locationName ??
'');
const saving = inlineSaving.has(item.id);
const errorText = inlineError[item.id];

return (
<InventoryInlineRow
key={item.id}
item={item}
density={density}
allLocations={allLocations}
inlineDraft={draft}
inlineLocationInput={inlineLocationValue}
locationEditing={Boolean(locationEditing[rowKey])}
inlineSaving={saving}
inlineError={errorText}
isDirty={isDirty}
focusController={focusController}
rowKey={rowKey}
onDraftChange={(changes) => setInlineDraft(item.id, changes)}
onErrorChange={(message) =>
setInlineError((prev) => ({
...prev,
[item.id]: message,
}))
}
onLocationInputChange={(value) =>
setInlineLocationInputs((prev) => ({
...prev,
[rowKey]: value,
}))
}
onLocationFocus={() => {
setInlineLocationInputs((prev) => ({
...prev,
[rowKey]: '',
}));
setLocationEditing((prev) => ({ ...prev, [rowKey]: true }));
setInlineError((prev) => ({ ...prev, [item.id]: null }));
}}
onLocationBlur={(selectedName) => {
setInlineLocationInputs((prev) => ({
...prev,
[rowKey]:
selectedName ??
allLocations.find((loc) => loc.id === draftLocationId)?.name ??
'',
}));
setLocationEditing((prev) => ({ ...prev, [rowKey]: false }));
setInlineError((prev) => ({ ...prev, [item.id]: null }));
}}
onSave={() => handleInlineSaveAndAdvance(item)}
onOpenActions={(e) => handleActionOpen(e, item)}
setLocationRef={(ref, key) => {
locationRefs.current[key] = ref;
}}
setQuantityRef={(ref, key) => {
quantityRefs.current[key] = ref;
}}
setSaveRef={(ref, key) => {
saveRefs.current[key] = ref;
}}
/>
);
};

return (
<Box sx={{ minHeight: '100vh', backgroundColor: '#0b1118' }}>
Expand Down Expand Up @@ -1745,84 +1828,7 @@ const InventoryPage = () => {
</Box>
<Divider sx={{ borderColor: 'rgba(255,255,255,0.04)' }} />
<Stack divider={<Divider flexItem sx={{ borderColor: 'rgba(255,255,255,0.04)' }} />}>
{groupItems.map((item) => {
const rowKey = item.id.toString();
const draft = inlineDrafts[item.id] ?? {
locationId: Number(item.locationId) || '',
quantity: Number(item.quantity) || 0,
};
const originalLocationId = Number(item.locationId) || '';
const originalQuantity = Number(item.quantity) || 0;
const draftLocationId =
typeof draft.locationId === 'string'
? Number(draft.locationId)
: draft.locationId;
const saving = inlineSaving.has(item.id);
const errorText = inlineError[item.id];
const draftQuantityNumber = Number(draft.quantity);
const isDirty =
draftLocationId !== originalLocationId ||
draftQuantityNumber !== originalQuantity;
return (
<InventoryInlineRow
key={item.id}
item={item}
density={density}
allLocations={allLocations}
inlineDraft={draft}
inlineLocationInput={
inlineLocationInputs[rowKey] ??
(locationEditing[rowKey] ? '' : item.locationName || '')
}
locationEditing={Boolean(locationEditing[rowKey])}
inlineSaving={saving}
inlineError={errorText}
isDirty={isDirty}
focusController={focusController}
rowKey={rowKey}
onDraftChange={(changes) => setInlineDraft(item.id, changes)}
onErrorChange={(message) =>
setInlineError((prev) => ({ ...prev, [item.id]: message }))
}
onLocationInputChange={(value) =>
setInlineLocationInputs((prev) => ({
...prev,
[rowKey]: value,
}))
}
onLocationFocus={() => {
setInlineLocationInputs((prev) => ({
...prev,
[rowKey]: '',
}));
setLocationEditing((prev) => ({ ...prev, [rowKey]: true }));
setInlineError((prev) => ({ ...prev, [item.id]: null }));
}}
onLocationBlur={(selectedName) => {
setInlineLocationInputs((prev) => ({
...prev,
[rowKey]:
selectedName ??
allLocations.find((loc) => loc.id === draftLocationId)?.name ??
'',
}));
setLocationEditing((prev) => ({ ...prev, [rowKey]: false }));
setInlineError((prev) => ({ ...prev, [item.id]: null }));
}}
onSave={() => handleInlineSaveAndAdvance(item)}
onOpenActions={(e) => handleActionOpen(e, item)}
setLocationRef={(ref, key) => {
locationRefs.current[key] = ref;
}}
setQuantityRef={(ref, key) => {
quantityRefs.current[key] = ref;
}}
setSaveRef={(ref, key) => {
saveRefs.current[key] = ref;
}}
/>
);
})}
{groupItems.map((item) => renderInlineRow(item))}
</Stack>
</Box>
))}
Expand Down