Filter refactor

[DinneK]

module-name: Refactor filter functionality

Problem

• Initialization Issues:
  • Project cards load randomly on first render, instead of being organized by orgs.
  • Filter state does not properly initialize on page load
• Code duplication:
  • Filter logic repeats across multiple functions
  • UI state management is mixed with core filtering logic
• Maintainability:
  • Adding new filter types requires changes in multiple places
  • Filter configuration is hardcoded in several places

Solution

• Code Architecture Changes:
  • Create centralized filter checks
  • Implement shared utility functions (getSelectedFilters etc.)
  • Separate UI logic from core filtering logic
• Initialization Fixes:
  • Add proper async initialization
  • Ensure consistent org grouping on first render and with filters and search
• Code organization:
  • Extract menu logic into new ui.js module
  • Simplify main project initialization flow

Result

• Behavioral Improvements:
  • Projects now consistently group by organization
  • Filter state applies immediately without requiring pagination interaction
• Code:
  • Reduced duplication
  • Clear separation of concerns between modules
  • Single source of truth for filter configuration

Some important notes regarding the summary line:

• Backwards Compatibility: All existing functionality remains unchanged
• Foundation set for CSS refactor

Test Plan

• Verified projects group by org
• Check for correct initialization
• Test each filters
• Verify clear filter functionality
• Verify page reset on changes
• Test in prod

Next Steps

• CSS refactor
• Begin backlog metrics tickets
• Implement testing (unit and UI)

[github-actions]

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

prettier

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/rendering.js

Lines 170 to 171 in 34c4980

	iconPosition = 'before',
	onclick

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/rendering.js

Lines 173 to 174 in 34c4980

	const item = document.createElement('li');
	item.className = 'usa-pagination__item usa-pagination__arrow';

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/rendering.js

Lines 176 to 180 in 34c4980

	const button = document.createElement('a');
	button.href = 'javascript:void(0);';
	button.className = `usa-pagination__link ${className}`;
	button.setAttribute('aria-label', label);
	if(disabled) button.classList.add('usa-pagination__disabled');

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/rendering.js

Line 186 in 34c4980

`;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/rendering.js

Lines 188 to 190 in 34c4980

	button.innerHTML = iconPosition === 'before'
	? `${iconHtml}<span class="usa-pagination__link-text">${text}</span>`
	: `<span class="usa-pagination__link-text">${text}</span>${iconHtml}`;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/rendering.js

Lines 192 to 193 in 34c4980

	if(!disabled) {
	button.addEventListener('click', onclick);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/rendering.js

Lines 196 to 197 in 34c4980

	item.appendChild(button);
	return item;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/sorting.js

Lines 1 to 4 in 34c4980

	import { sortSelection, filtersContainer } from "./data";
	import { addGlobalEventListener } from "./utilities";
	import { updateFilters, updateFilteredProjects, getFilteredProjects, setFilteredProjects } from "./filters";
	import { renderPaginatedProjects } from "./rendering";

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/sorting.js

Line 9 in 34c4980

const targetProjects = getFilteredProjects();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/sorting.js

Lines 17 to 18 in 34c4980

	setFilteredProjects(targetProjects);
	renderPaginatedProjects();

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/ui.js

Line 1 in 34c4980

import { baseurl } from "./data";

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/ui.js

Lines 4 to 5 in 34c4980

	const filterButtons = document.querySelectorAll(".usa-accordion__button");
	const isMobile = window.innerWidth < 768;

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/ui.js

Lines 7 to 10 in 34c4980

	filterButtons.forEach((button) => {
	const contentId = button.getAttribute("aria-controls");
	const content = document.getElementById(contentId);
	const icon = button.querySelector("svg use");

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/ui.js

Lines 12 to 22 in 34c4980

	if(isMobile) {
	button.setAttribute("aria-expanded", "false");
	content.setAttribute("hidden", "true");
	icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_more`);
	} else {
	button.setAttribute("aria-expanded", "true");
	content.removeAttribute("hidden");
	icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_less`);
	}
	});
	}

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/ui.js

Lines 25 to 26 in 34c4980

	updateFilterMenuState()
	window.addEventListener("resize", updateFilterMenuState)

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/ui.js

Lines 28 to 43 in 34c4980

	document.querySelectorAll(".usa-accordion__button").forEach((button) => {
	button.addEventListener("click", () => {
	const expanded = button.getAttribute("aria-expanded");
	const content = document.getElementById(button.getAttribute("id"));
	const icon = button.querySelector("svg use");
	if(expanded === 'false') {
	content.removeAttribute("hidden");
	icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_less`);
	} else {
	content.setAttribute("hidden", "true");
	icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_more`);
	}
	});
	});
	}

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/utilities.js

Lines 1 to 2 in 34c4980

	export function addGlobalEventListener(type, selector, callback, parent = document) {
	parent.addEventListener(type, e => {

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 1 to 4 in 34c4980

	import { createProjectCards } from "./modules/rendering";
	import { updateFilteredProjects } from "./modules/filters";
	import { setupEventListeners } from './modules/events';
	import { setupFilterMenuListeners } from "./modules/ui";

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 8 to 11 in 34c4980

	await createProjectCards();
	updateFilteredProjects();
	setupEventListeners();
	}, 50);

---

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 13 to 14 in 34c4980

	setupFilterMenuListeners();
	});

[decause-gov]

You should def get a proper review from @natalialuzuriaga on this when she's back at her desk, but FWIW, LGTM +1 🚢

[natalialuzuriaga]

Did testing using the filters, search, and sort! Question: One case I was experimenting with was doing a search and apply a filter on top of those results. Does the site support this at the moment?

But for the rest of the cases, all is working great on my end. Pagination works beautifully with updating based on project results. Amazing job with the refactor rewrite, this is so much easier to read and build on top of 🙌