Skip to content

⚡ Bolt: Pre-calculate derived search properties for faster list rendering #78

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

Open
MrAlokTech wants to merge 1 commit into
base: main
Choose a base branch
from
Open

⚡ Bolt: Pre-calculate derived search properties for faster list rendering #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions .jules/bolt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2024-05-24 - Pre-calculate derived search and render properties
**Learning:** During high-frequency filtering events (like keypress searches), recalculating search strings (with `.toLowerCase()`), parsing dates, and checking time differences for "NEW" badges per item in the render loop causes significant UI blocking on large datasets.
**Action:** Pre-calculate these derived properties (e.g., `_searchStr`, `_isNew`, `_formattedDate`) into the data objects during the initial load (`prepareSearchIndex`) using efficient APIs like `Intl.DateTimeFormat`. Update the filter and render functions to use these cached properties, falling back to dynamic calculation only if the indexed properties are missing. Always index *after* saving to the local cache to avoid bloating `localStorage`.
78 changes: 55 additions & 23 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,32 @@ function getAdData(slotName) {
/* =========================================
5. DATA LOADING WITH CACHING
========================================= */

// ⚡ Bolt: Pre-calculate derived properties during data load to prevent O(n) re-calculation on every keystroke
function prepareSearchIndex(data) {
const now = Date.now();
const SEVEN_DAYS_MS = 7 * 24 * 60 * 60 * 1000;

// Cache the formatter for ~25x faster formatting than toLocaleDateString
const dateFormatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric', month: 'short', day: 'numeric'
});

data.forEach(pdf => {
// Pre-compute lowercased search string once
pdf._searchStr = `${pdf.title || ''} ${pdf.description || ''} ${pdf.category || ''} ${pdf.author || ''}`.toLowerCase();

// Pre-compute 'NEW' badge status and date
if (pdf.uploadDate) {
const uploadDateMs = new Date(pdf.uploadDate).getTime();
if (!isNaN(uploadDateMs)) {
pdf._isNew = (now - uploadDateMs) < SEVEN_DAYS_MS;
pdf._formattedDate = dateFormatter.format(uploadDateMs);
}
}
});
}

function renderSemesterTabs() {
const container = document.getElementById('semesterTabsContainer');
if (!container) return;
Expand Down Expand Up @@ -490,6 +516,7 @@ async function loadPDFDatabase() {

if (shouldUseCache) {
pdfDatabase = cachedData;
prepareSearchIndex(pdfDatabase); // ⚡ Bolt: Index after cache load
// --- FIX: CALL THIS TO POPULATE UI ---
syncClassSwitcher();
renderSemesterTabs();
Expand All @@ -513,6 +540,8 @@ async function loadPDFDatabase() {
data: pdfDatabase
}));

prepareSearchIndex(pdfDatabase); // ⚡ Bolt: Index AFTER saving to cache to save storage

// --- FIX: CALL THIS TO POPULATE UI ---
syncClassSwitcher();
renderPDFs();
Expand Down Expand Up @@ -948,26 +977,22 @@ function renderPDFs() {

// Locate renderPDFs() in script.js and update the filter section
const filteredPdfs = pdfDatabase.filter(pdf => {
const matchesSemester = pdf.semester === currentSemester;
// ⚡ Bolt: Fast-fail filtering using early returns instead of grouped booleans
if (pdf.semester !== currentSemester) return false;
if (pdf.class !== currentClass) return false;

// NEW: Check if the PDF class matches the UI's current class selection
// Note: If old documents don't have this field, they will be hidden.
const matchesClass = pdf.class === currentClass;

let matchesCategory = false;
if (currentCategory === 'favorites') {
matchesCategory = favorites.includes(pdf.id);
} else {
matchesCategory = currentCategory === 'all' || pdf.category === currentCategory;
if (!favorites.includes(pdf.id)) return false;
} else if (currentCategory !== 'all' && pdf.category !== currentCategory) {
return false;
}

const matchesSearch = pdf.title.toLowerCase().includes(searchTerm) ||
pdf.description.toLowerCase().includes(searchTerm) ||
pdf.category.toLowerCase().includes(searchTerm) ||
pdf.author.toLowerCase().includes(searchTerm);
// Use pre-computed index if available, fallback to empty string to prevent crashes
if (searchTerm && (!pdf._searchStr || !pdf._searchStr.includes(searchTerm))) {
return false;
}

// Update return statement to include matchesClass
return matchesSemester && matchesClass && matchesCategory && matchesSearch;
return true;
});

updatePDFCount(filteredPdfs.length);
Expand Down Expand Up @@ -1037,9 +1062,21 @@ function createPDFCard(pdf, favoritesList, index = 0, highlightRegex = null) {
const heartIconClass = isFav ? 'fas' : 'far';
const btnActiveClass = isFav ? 'active' : '';

const uploadDateObj = new Date(pdf.uploadDate);
const timeDiff = new Date() - uploadDateObj;
const isNew = timeDiff < (7 * 24 * 60 * 60 * 1000); // 7 days
// ⚡ Bolt: Use pre-calculated properties for faster rendering
let isNew = pdf._isNew;
let formattedDate = pdf._formattedDate;

// Fallback for unindexed data (e.g. from an old cache or dynamically added item)
if (isNew === undefined && pdf.uploadDate) {
const uploadDateObj = new Date(pdf.uploadDate);
const timeDiff = Date.now() - uploadDateObj.getTime();
isNew = timeDiff < (7 * 24 * 60 * 60 * 1000); // 7 days

// Inline fallback for formattedDate to preserve old behavior
formattedDate = uploadDateObj.toLocaleDateString('en-US', {
year: 'numeric', month: 'short', day: 'numeric'
});
}

const newBadgeHTML = isNew
? `<span style="background:var(--error-color); color:white; font-size:0.6rem; padding:2px 6px; border-radius:4px; margin-left:8px; vertical-align:middle;">NEW</span>`
Expand All @@ -1053,11 +1090,6 @@ function createPDFCard(pdf, favoritesList, index = 0, highlightRegex = null) {
};
const categoryIcon = categoryIcons[pdf.category] || 'fa-file-pdf';

// Formatting Date
const formattedDate = new Date(pdf.uploadDate).toLocaleDateString('en-US', {
year: 'numeric', month: 'short', day: 'numeric'
});

// Uses global escapeHtml() now

const highlightText = (text) => {
Expand Down
162 changes: 162 additions & 0 deletions test_search.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
import asyncio
from playwright.async_api import async_playwright
import http.server
import socketserver
import threading
import time

# Serve the current directory
class Handler(http.server.SimpleHTTPRequestHandler):
def __init__(self, *args, **kwargs):
super().__init__(*args, directory=".", **kwargs)

PORT = 8004

def start_server():
with socketserver.TCPServer(("", PORT), Handler) as httpd:
httpd.serve_forever()

server_thread = threading.Thread(target=start_server, daemon=True)
server_thread.start()
time.sleep(1) # wait for server to start

async def main():
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()

page.on("console", lambda msg: print(f"Browser console: {msg.text}"))

await page.route("**/*", lambda route: route.abort() if any(x in route.request.url for x in ["firebasejs", "firestore.googleapis.com", "gstatic.com"]) else route.continue_())

await page.add_init_script("""
const style = document.createElement('style');
style.innerHTML = '* { font-family: sans-serif !important; }';
document.head.appendChild(style);

window.firebase = {
apps: [],
initializeApp: () => {},
auth: () => ({
onAuthStateChanged: (cb) => { cb({ uid: 'mock_uid', isAnonymous: false }); },
signInAnonymously: () => Promise.resolve({ user: { uid: 'mock_uid' } })
}),
firestore: () => ({
collection: (name) => {
if (name === 'controll') {
return {
doc: () => ({
onSnapshot: (cb) => { cb({ exists: true, data: () => ({ isMaintenance: false }) }); }
})
}
}
if (name === 'analytics') {
return {
doc: () => ({
set: () => Promise.resolve(),
collection: () => ({ doc: () => ({ set: () => Promise.resolve() }), add: () => Promise.resolve() })
})
}
}
return {
doc: () => ({
get: () => Promise.resolve({ exists: true, data: () => ({ isVerified: true }) }),
set: () => Promise.resolve()
}),
orderBy: () => ({
limit: () => ({
get: () => Promise.resolve({ empty: true }) // force fresh fetch
}),
get: () => Promise.resolve({
forEach: (cb) => {
cb({ id: 'doc1', data: () => ({
title: "Quantum Mechanics",
description: "Advanced physics notes",
category: "Physics",
author: "Einstein",
class: "MSc Chemistry",
semester: 1,
uploadDate: new Date().toISOString()
})});
cb({ id: 'doc2', data: () => ({
title: "Organic Synthesis",
description: "Carbon compounds",
category: "Organic",
author: "Curie",
class: "MSc Chemistry",
semester: 1,
uploadDate: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString()
})});
cb({ id: 'doc3', data: () => ({
title: "Quantum Chemistry",
description: "Where chem meets physics",
category: "Physical",
author: "Bohr",
class: "MSc Chemistry",
semester: 1,
uploadDate: new Date().toISOString()
})});
}
})
})
}
}
})
};
window.firebase.firestore.FieldValue = {
serverTimestamp: () => new Date()
};

window.checkHolidayMode = () => false;
""")

await page.goto("http://localhost:8004", wait_until="domcontentloaded")

# Manually force UI initialization and clear localStorage to ensure fresh fetch
await page.evaluate("""
localStorage.clear();
setTimeout(() => {
document.getElementById('preloader')?.classList.add('hidden');
document.getElementById('contentWrapper')?.classList.add('active');
}, 500);
""")

try:
await page.wait_for_selector(".pdf-card", timeout=5000)

# Initial render should have 3 cards
cards = await page.locator(".pdf-card").count()
print(f"Initial cards count: {cards}")

if cards > 0:
# Check "NEW" badge on first card (should be new)
new_badge_doc1 = await page.locator(".pdf-card").nth(0).locator("span:has-text('NEW')").count()
print(f"Doc 1 NEW badge count: {new_badge_doc1}")

# Check "NEW" badge on second card (should NOT be new)
new_badge_doc2 = await page.locator(".pdf-card").nth(1).locator("span:has-text('NEW')").count()
print(f"Doc 2 NEW badge count: {new_badge_doc2}")

# Search for "quantum"
await page.fill("#searchInput", "quantum")
await page.wait_for_timeout(1000) # give it a moment to filter

# Should filter to 2 cards
cards_after_search = await page.locator(".pdf-card").count()
print(f"Cards after search 'quantum': {cards_after_search}")

# Search for "einstein" (author)
await page.fill("#searchInput", "einstein")
await page.wait_for_timeout(1000)

# Should filter to 1 card
cards_after_search_author = await page.locator(".pdf-card").count()
print(f"Cards after search 'einstein': {cards_after_search_author}")

except Exception as e:
print("Error rendering UI.")

finally:
await browser.close()

asyncio.run(main())