Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
## 2024-05-18 - [Optimize render loop by pre-calculating expensive values]
**Learning:** Repetitive Date parsing (e.g., `new Date()`) and string concatenations for search filtering inside high-frequency render loops (like `renderPDFs` and `createPDFCard`) significantly block the main thread and impact frontend performance. Firestore Timestamp objects add an extra layer of complexity as they must be parsed differently (`.toDate()`) than cached JSON string dates.
**Action:** Implement a `prepareSearchIndex` step that runs immediately after data load to pre-calculate these expensive values (`_searchStr`, `_formattedDate`, `_isNew`) onto the `pdfDatabase` objects. This dramatically speeds up subsequent array filtering and DOM generation.
15 changes: 15 additions & 0 deletions bolt_test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const fs = require('fs');
let code = fs.readFileSync('script.js', 'utf8');

// Mock DOM
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><body><div id="pdfGrid"></div></body>`);
global.document = dom.window.document;
global.window = dom.window;
global.localStorage = {
getItem: () => null,
setItem: () => {}
};

console.log('Setup ready');
34 changes: 34 additions & 0 deletions perf_test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
const pdfs = [];
for (let i = 0; i < 1000; i++) {
pdfs.push({ uploadDate: "2023-10-15T12:00:00Z" });
}

console.time('date_format');
for(let i = 0; i < pdfs.length; i++) {
const uploadDateObj = new Date(pdfs[i].uploadDate);
const timeDiff = new Date() - uploadDateObj;
const isNew = timeDiff < (7 * 24 * 60 * 60 * 1000);
const formattedDate = new Date(pdfs[i].uploadDate).toLocaleDateString('en-US', {
year: 'numeric', month: 'short', day: 'numeric'
});
}
console.timeEnd('date_format');

console.time('precalc');
// Simulate pre-calculated property
pdfs.forEach(p => {
const uploadDateObj = new Date(p.uploadDate);
const timeDiff = new Date() - uploadDateObj;
p._isNew = timeDiff < (7 * 24 * 60 * 60 * 1000);
p._formattedDate = new Date(p.uploadDate).toLocaleDateString('en-US', {
year: 'numeric', month: 'short', day: 'numeric'
});
});
console.timeEnd('precalc');

console.time('precalc_read');
for(let i = 0; i < pdfs.length; i++) {
const isNew = pdfs[i]._isNew;
const formattedDate = pdfs[i]._formattedDate;
}
console.timeEnd('precalc_read');
66 changes: 45 additions & 21 deletions script.js
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,35 @@ function getAdData(slotName) {
/* =========================================
5. DATA LOADING WITH CACHING
========================================= */

function prepareSearchIndex() {
const now = new Date();
const sevenDays = 7 * 24 * 60 * 60 * 1000;

pdfDatabase.forEach(pdf => {
// 1. Search String (lowercased concatenation for fast indexOf)
pdf._searchStr = `${pdf.title || ''} ${pdf.description || ''} ${pdf.category || ''} ${pdf.author || ''}`.toLowerCase();

// 2. Date parsing (Handle both Firestore Timestamp and Cached ISO String)
let uploadDateObj;
if (pdf.uploadDate && typeof pdf.uploadDate.toDate === 'function') {
uploadDateObj = pdf.uploadDate.toDate();
// Optional: convert back to ISO string if we need consistency
pdf.uploadDate = uploadDateObj.toISOString();
} else {
uploadDateObj = new Date(pdf.uploadDate);
}

// 3. Pre-calculate "New" badge status
const timeDiff = now - uploadDateObj;
pdf._isNew = timeDiff < sevenDays;

// 4. Pre-format date string
pdf._formattedDate = uploadDateObj.toLocaleDateString('en-US', {
year: 'numeric', month: 'short', day: 'numeric'
});
});
}
function renderSemesterTabs() {
const container = document.getElementById('semesterTabsContainer');
if (!container) return;
Expand Down Expand Up @@ -451,6 +480,7 @@ async function loadPDFDatabase() {

if (shouldUseCache) {
pdfDatabase = cachedData;
prepareSearchIndex();
// --- FIX: CALL THIS TO POPULATE UI ---
syncClassSwitcher();
renderSemesterTabs();
Expand All @@ -469,6 +499,8 @@ async function loadPDFDatabase() {
pdfDatabase.push({ id: doc.id, ...doc.data() });
});

prepareSearchIndex();

localStorage.setItem(CACHE_KEY, JSON.stringify({
timestamp: new Date().getTime(),
data: pdfDatabase
Expand Down Expand Up @@ -902,26 +934,22 @@ function renderPDFs() {

// Locate renderPDFs() in script.js and update the filter section
const filteredPdfs = pdfDatabase.filter(pdf => {
const matchesSemester = pdf.semester === currentSemester;

// 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;
// Fast early returns for exact matches
if (pdf.semester !== currentSemester) return false;
if (pdf.class !== currentClass) return false;

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') {
if (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 search string
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 @@ -991,9 +1019,7 @@ 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
const isNew = pdf._isNew;

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 @@ -1008,9 +1034,7 @@ 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'
});
const formattedDate = pdf._formattedDate;

// Uses global escapeHtml() now

Expand Down
36 changes: 36 additions & 0 deletions search_perf_test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
const pdfs = [];
for (let i = 0; i < 1000; i++) {
pdfs.push({
title: "Introduction to Organic Chemistry",
description: "A comprehensive guide to organic chemistry principles.",
category: "Organic",
author: "John Doe"
});
}

const searchTerm = "organic";

console.time('search_split');
for(let i = 0; i < 10; i++) {
pdfs.filter(pdf => {
return pdf.title.toLowerCase().includes(searchTerm) ||
pdf.description.toLowerCase().includes(searchTerm) ||
pdf.category.toLowerCase().includes(searchTerm) ||
pdf.author.toLowerCase().includes(searchTerm);
});
}
console.timeEnd('search_split');

console.time('precalc_searchStr');
pdfs.forEach(p => {
p._searchStr = `${p.title} ${p.description} ${p.category} ${p.author}`.toLowerCase();
});
console.timeEnd('precalc_searchStr');

console.time('search_precalc');
for(let i = 0; i < 10; i++) {
pdfs.filter(pdf => {
return pdf._searchStr.includes(searchTerm);
});
}
console.timeEnd('search_precalc');