class RecentColors {
constructor(maxSize = 20) {
this.colors = new Map(); // hex → { count, lastUsed }
this.maxSize = maxSize;
}
add(hex) {
if (this.colors.has(hex)) {
const entry = this.colors.get(hex);
entry.count++;
entry.lastUsed = Date.now();
} else {
if (this.colors.size >= this.maxSize) {
// Evict least recently used
let oldest = null;
for (const [key, val] of this.colors) {
if (!oldest || val.lastUsed < oldest.lastUsed)
oldest = { key, ...val };
}
this.colors.delete(oldest.key);
}
this.colors.set(hex,
{ count: 1, lastUsed: Date.now() });
}
}
getRecent(n = 10) {
return [...this.colors.entries()]
.sort((a, b) => b[1].lastUsed - a[1].lastUsed)
.slice(0, n)
.map(([hex]) => hex);
}
}
class FilterCache {
constructor(maxEntries = 50) {
this.cache = new Map();
this.maxEntries = maxEntries;
}
getCacheKey(imageId, filterName, filterValue) {
return `${imageId}:${filterName}:${filterValue}`;
}
get(imageId, filterName, filterValue) {
const key = this.getCacheKey(
imageId, filterName, filterValue);
return this.cache.get(key) || null;
}
set(imageId, filterName, filterValue, resultData) {
const key = this.getCacheKey(
imageId, filterName, filterValue);
if (this.cache.size >= this.maxEntries) {
const firstKey =
this.cache.keys().next().value;
this.cache.delete(firstKey);
}
this.cache.set(key, resultData);
}
}
Before applying a filter, check the cache. Cache hit = instant.
| Scenario | Time |
|---|---|
| First application | 200ms |
| Cached (same filter + value) | 0ms |
Build a <ColorPalette> component showing recent and frequent colors. Each swatch is clickable, most recent on top. Track usage with the RecentColors class.
git switch -c feature/PIXELCRAFT-036-hash-cache
git add src/
git commit -m "Add color palette + filter cache with hash maps (PIXELCRAFT-036)"
git push origin feature/PIXELCRAFT-036-hash-cache
# PR → Review → Merge → Close ticket ✅
Hash tables are arguably the most important data structure in practical software engineering.
O(1) average lookup is the closest thing to magic in CS.