Dev by DinneK · Pull Request #354 · DSACMS/metrics

DinneK · 2025-04-07T13:51:39Z

module-name: All Front-End Updates Currently in Dev

Problem

Current main branch lacks css enhancements for responsiveness
Change environmental configurations
URL generation is hard coded, limiting deployment flexibility

Solution

This merge includes:

CSS responsiveness solutions
Core functionality
Configuration changes

Result

Supports custom domains
Better mobile experience
More modular makeup

Test Plan

Visual testing

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>

Fix Metrics Title

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/filters.js

Lines 52 to 54 in 8f578ea

    
           const filtersButtonGroup = document.createElement('div'); 
        
           filtersButtonGroup.className = "usa-button-group"; 
        
           selectedFiltersContainer.appendChild(filtersButtonGroup);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Lines 57 to 59 in 8f578ea

    
           const filtersArray = selectedFiltersObject[filterCategory]; 
        
           filtersArray.forEach(filter => {

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Lines 61 to 64 in 8f578ea

    
           const filterButton = document.createElement('button'); 
        
           filterButton.className = 'usa-button margin-bottom-1'; 
        
           filterButton.textContent = filter; 
        
           filtersButtonGroup.appendChild(filterButton);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Lines 68 to 80 in 8f578ea

    
           addGlobalEventListener("click", "#filter-tags .usa-button", e => { 
        
             const buttonName = e.target.textContent; 
        
             const selectedCheckboxes = document.querySelectorAll("input:checked"); 
        
             selectedCheckboxes.forEach(checkbox => { 
        
               if (buttonName == checkbox.value) { 
        
                 e.target.remove(); 
        
                 checkbox.checked = false; 
        
                 updateFilters(); 
        
               } 
        
             }) 
        
           }, filtersButtonGroup);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Line 88 in 8f578ea

projectType: []

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Lines 91 to 102 in 8f578ea

    
           document.querySelectorAll('input[name="org-filter"]:checked').forEach(checkbox => { 
        
             selectedFiltersObject.organization.push(checkbox.value); 
        
           }); 
        
           document.querySelectorAll('input[name="tier-filter"]:checked').forEach(checkbox => { 
        
             selectedFiltersObject.maturityModelTier.push(checkbox.value); 
        
           }); 
        
           document.querySelectorAll('input[name="fisma-level-filter"]:checked').forEach(checkbox => { 
        
             selectedFiltersObject.fismaLevel.push(checkbox.value); 
        
           }); 
        
           document.querySelectorAll('input[name="project-type-filter"]:checked').forEach(checkbox => { 
        
             selectedFiltersObject.projectType.push(checkbox.value); 
        
           });

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Line 105 in 8f578ea

const projectSections = document.querySelectorAll(".project_section");

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Lines 108 to 109 in 8f578ea

	const projectCards = section.querySelectorAll(".project-card");

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Line 111 in 8f578ea

checkFilterCriteria(card, selectedFiltersObject);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Line 115 in 8f578ea

updateHeadingVisibility();

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Lines 119 to 126 in 8f578ea

    
           const cardName = card.querySelector(".usa-card__heading").innerText; 
        
           const currentProject = parsedProjectsData.find((project) => project.name === cardName) 
        
           const matchesOrganization = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(currentProject.owner); 
        
           const projectMaturityModelTier = "Tier " + currentProject.maturityModelTier; 
        
           const matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes(projectMaturityModelTier); 
        
           const matchesFismaLevel = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(currentProject.fismaLevel); 
        
           const matchesProjectType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(currentProject.projectType);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Line 128 in 8f578ea

    
           card.hidden = !(matchesOrganization && matchesMaturityModelTier && matchesFismaLevel && matchesProjectType);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Lines 132 to 133 in 8f578ea

    
           const totalProjects = (filteredProjects || parsedProjectsData).length; 
        
           const totalPages = Math.ceil(totalProjects / itemsPerPage);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Lines 135 to 137 in 8f578ea

    
             currentPage = Math.min(currentPage, totalPages || 1); 
        
             renderPaginationControls(totalPages); 
        
           }

[prettier] _{reported by reviewdog 🐶}

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

Lines 1 to 5 in 8f578ea

    
           import { reportHeadingTemplate, projectCardTemplate } from "../templates"; 
        
           import { templateDiv, parsedProjectsData, orgsData, siteData, findObject, baseurl } from "./data"; 
        
           import { updateFilters } from "./filters"; 
        
           import { getPageRange, updateHeadingVisibility } from "./utilities"; 
        
           import DOMPurify from 'dompurify';

[prettier] _{reported by reviewdog 🐶}

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

Line 10 in 8f578ea

const itemsPerPage = 10;

[prettier] _{reported by reviewdog 🐶}

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

Lines 13 to 16 in 8f578ea

    
           let filteredProjects = [...parsedProjectsData]; 
        
           templateDiv.innerHTML = '' 
        
           const allProjects = (filteredProjects || parsedProjectsData).map((project) => ({

[prettier] _{reported by reviewdog 🐶}

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

Lines 18 to 58 in 8f578ea

    
             org: project.owner 
        
           })); 
        
           const startIndex = (currentPage - 1) * itemsPerPage; 
        
           const endIndex = startIndex + itemsPerPage; 
        
           const paginatedProjects = allProjects.slice(startIndex, endIndex); 
        
           const groupedByOrg = paginatedProjects.reduce((acc, curr) => { 
        
             if(!acc[curr.org]) { 
        
               acc[curr.org] = [] 
        
             } 
        
             acc[curr.org].push(curr); 
        
             return acc 
        
           }, {}); 
        
           for (const org in groupedByOrg) { 
        
             const orgProject = findObject(parsedOrgsData, org); 
        
             const orgHeading = reportHeadingTemplate(orgProject); 
        
             const projectSectionsTemplate = document.createElement('div'); 
        
             projectSectionsTemplate.className = 'project_section'; 
        
             templateDiv.append(projectSectionsTemplate); 
        
             const reportHeading = document.createElement('div'); 
        
             reportHeading.className = "report_heading"; 
        
             reportHeading.innerHTML = DOMPurify.sanitize(orgHeading); 
        
             projectSectionsTemplate.appendChild(reportHeading); 
        
             const projectCards = document.createElement('ul'); 
        
             projectCards.className = "usa-card-group flex-align-stretch"; 
        
             projectSectionsTemplate.appendChild(projectCards); 
        
             groupedByOrg[org].forEach(repoData => { 
        
               repoData.baseurl = siteData.baseurl; 
        
               const projectCard = document.createElement('li'); 
        
               projectCard.className = 'usa-card project-card tablet:grid-col-12'; 
        
               projectCard.id = repoData.name; 
        
               projectCard.setAttribute('org-name', repoData.owner); 
        
               projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData)); 
        
               projectCards.appendChild(projectCard); 
        
             })

[prettier] _{reported by reviewdog 🐶}

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

Lines 60 to 62 in 8f578ea

    
           updateFilters(); 
        
           updateHeadingVisibility(); 
        
           renderPaginationControls(allProjects.length)

[prettier] _{reported by reviewdog 🐶}

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

Line 64 in 8f578ea

[prettier] _{reported by reviewdog 🐶}

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

Lines 66 to 68 in 8f578ea

    
           const startIndex = (currentPage - 1) * itemsPerPage; 
        
           const endIndex = startIndex + itemsPerPage; 
        
           const paginatedProjects = projects.slice(startIndex, endIndex);

[prettier] _{reported by reviewdog 🐶}

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

Line 70 in 8f578ea

templateDiv.innerHTML = '';

[prettier] _{reported by reviewdog 🐶}

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

Line 73 in 8f578ea

if(!acc[curr.owner]) {

[prettier] _{reported by reviewdog 🐶}

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

Line 76 in 8f578ea

acc[curr.owner].push(curr);

[prettier] _{reported by reviewdog 🐶}

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

Line 78 in 8f578ea

}, {});

[prettier] _{reported by reviewdog 🐶}

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

Lines 81 to 105 in 8f578ea

    
           const orgProject = findObject(parsedOrgsData, org); 
        
           const orgHeading = reportHeadingTemplate(orgProject); 
        
           const projectSectionsTemplate = document.createElement('div'); 
        
           projectSectionsTemplate.className = 'project_section'; 
        
           const reportHeading = document.createElement('div'); 
        
           reportHeading.className = "report_heading"; 
        
           reportHeading.innerHTML = DOMPurify.sanitize(orgHeading); 
        
           projectSectionsTemplate.appendChild(reportHeading); 
        
           const projectCards = document.createElement('ul'); 
        
           projectCards.className = "usa-card-group flex-align-stretch"; 
        
           groupedByOrg[org].forEach(repoData => { 
        
             repoData.baseurl = siteData.baseurl; 
        
             const projectCard = document.createElement('li'); 
        
             projectCard.className = 'usa-card project-card tablet:grid-col-12'; 
        
             projectCard.id = repoData.name; 
        
             projectCard.setAttribute('org-name', repoData.owner); 
        
             projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData)); 
        
             projectCards.appendChild(projectCard); 
        
           }); 
        
           projectSectionsTemplate.appendChild(projectCards); 
        
           templateDiv.append(projectSectionsTemplate);

[prettier] _{reported by reviewdog 🐶}

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

Line 107 in 8f578ea

updateHeadingVisibility();

[prettier] _{reported by reviewdog 🐶}

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

Lines 111 to 127 in 8f578ea

    
           const paginationDiv = document.getElementById('pagination-controls') || document.createElement('div'); 
        
           paginationDiv.id = 'pagination-controls'; 
        
           paginationDiv.className = 'usa-pagination'; 
        
           paginationDiv.innerHTML = ''; 
        
           const totalPages = Math.ceil(totalProjectsCount / itemsPerPage); 
        
           const paginationList = document.createElement('ul'); 
        
           paginationList.className = 'usa-pagination__list'; 
        
           const prevItem = document.createElement('li'); 
        
           prevItem.className = 'usa-pagination__item usa-pagination__arrow'; 
        
           const prevButton = document.createElement('a'); 
        
           prevButton.href = 'javascript:void(0);'; 
        
           prevButton.className = 'usa-pagination__link usa-pagination__previous-page'; 
        
           prevButton.setAttribute('aria-label', 'Previous page'); 
        
           if (currentPage === 1) prevButton.classList.add('usa-pagination__disabled');

[prettier] _{reported by reviewdog 🐶}

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

Lines 133 to 134 in 8f578ea

    
             `; 
        
             prevButton.addEventListener('click', () => {

[prettier] _{reported by reviewdog 🐶}

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

Lines 136 to 137 in 8f578ea

    
           currentPage--; 
        
           createProjectCards();

[prettier] _{reported by reviewdog 🐶}

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

Lines 139 to 141 in 8f578ea

    
           }); 
        
           prevItem.appendChild(prevButton); 
        
           paginationList.appendChild(prevItem);

[prettier] _{reported by reviewdog 🐶}

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

Line 143 in 8f578ea

const pageRange = getPageRange(currentPage, totalPages, 3);

[prettier] _{reported by reviewdog 🐶}

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

Lines 145 to 146 in 8f578ea

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

[prettier] _{reported by reviewdog 🐶}

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

Lines 148 to 150 in 8f578ea

    
           if (page === '...') { 
        
             pageItem.className += ' usa-pagination__overflow'; 
        
             pageItem.innerHTML = `<span aria-label="ellipsis indicating non-visible pages">…</span>`;

[prettier] _{reported by reviewdog 🐶}

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

Lines 152 to 163 in 8f578ea

    
           pageItem.className += ' usa-pagination__page-no'; 
        
           const pageButton = document.createElement('a'); 
        
           pageButton.href = 'javascript:void(0);'; 
        
           pageButton.className = `usa-pagination__button${page === currentPage ? ' usa-current' : ''}`; 
        
           pageButton.textContent = page; 
        
           pageButton.setAttribute('aria-label', `Page ${page}`); 
        
           if (page === currentPage) pageButton.setAttribute('aria-current', 'page'); 
        
           pageButton.addEventListener('click', () => { 
        
             currentPage = page; 
        
             createProjectCards(); 
        
           }); 
        
           pageItem.appendChild(pageButton);

[prettier] _{reported by reviewdog 🐶}

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

Lines 165 to 174 in 8f578ea

    
             paginationList.appendChild(pageItem); 
        
           }); 
        
           const nextItem = document.createElement('li'); 
        
           nextItem.className = 'usa-pagination__item usa-pagination__arrow'; 
        
           const nextButton = document.createElement('a'); 
        
           nextButton.href = 'javascript:void(0);'; 
        
           nextButton.className = 'usa-pagination__link usa-pagination__next-page'; 
        
           nextButton.setAttribute('aria-label', 'Next page'); 
        
           if (currentPage === totalPages) nextButton.classList.add('usa-pagination__disabled');

[prettier] _{reported by reviewdog 🐶}

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

Lines 180 to 181 in 8f578ea

    
             `; 
        
             nextButton.addEventListener('click', () => {

[prettier] _{reported by reviewdog 🐶}

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

Lines 183 to 184 in 8f578ea

    
           currentPage++; 
        
           createProjectCards();

[prettier] _{reported by reviewdog 🐶}

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

Lines 186 to 188 in 8f578ea

    
           }); 
        
           nextItem.appendChild(nextButton); 
        
           paginationList.appendChild(nextItem);

[prettier] _{reported by reviewdog 🐶}

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

Line 190 in 8f578ea

paginationDiv.appendChild(paginationList);

[prettier] _{reported by reviewdog 🐶}

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

Line 193 in 8f578ea

templateDiv.parentElement.appendChild(paginationDiv);

[prettier] _{reported by reviewdog 🐶}

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

Lines 1 to 4 in 8f578ea

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

[prettier] _{reported by reviewdog 🐶}

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

Line 9 in 8f578ea

const selection = sortSelection.value;

[prettier] _{reported by reviewdog 🐶}

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

Lines 13 to 16 in 8f578ea

    
           if(["maturity_model_tier", "stargazers_count", "forks_count"].includes(selection)) { 
        
             sortByNumberAttribute(targetProjects, selection, isDescending); 
        
           } else {  
        
             sortByStringAttribute(targetProjects, selection, isDescending);

[prettier] _{reported by reviewdog 🐶}

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

Lines 19 to 20 in 8f578ea

    
           updatePagination(); 
        
           renderPaginatedProjects(filteredProjects);

[prettier] _{reported by reviewdog 🐶}

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

Lines 25 to 28 in 8f578ea

    
             const attributeA = a[attribute] !== undefined ? Number(a[attribute]) : Infinity; 
        
             const attributeB = b[attribute] !== undefined ? Number(b[attribute]) : Infinity; 
        
             return isDescending ? attributeB - attributeA : attributeA - attributeB; 
        
           });

[prettier] _{reported by reviewdog 🐶}

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

Lines 33 to 35 in 8f578ea

    
           const hasAttributeA = typeof a[attribute] === 'string'; 
        
           const hasAttributeB = typeof b[attribute] === 'string';

[prettier] _{reported by reviewdog 🐶}

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

Line 38 in 8f578ea

    
           return isDescending ? b[attribute].localeCompare(a[attribute]) : a[attribute].localeCompare(b[attribute]);

[prettier] _{reported by reviewdog 🐶}

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

Lines 40 to 44 in 8f578ea

    
           // If only one object has the attribute, determine order based on `isDescending` 
        
           if (hasAttributeA) return isDescending ? 1 : -1; 
        
           if (hasAttributeB) return isDescending ? -1 : 1;

[prettier] _{reported by reviewdog 🐶}

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

Lines 46 to 47 in 8f578ea

    
             return isDescending ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name); 
        
           });

[prettier] _{reported by reviewdog 🐶}

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

Line 50 in 8f578ea

addGlobalEventListener('change', '.usa-checkbox__input', e => {

[prettier] _{reported by reviewdog 🐶}

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

Line 52 in 8f578ea

updateFilters();

[prettier] _{reported by reviewdog 🐶}

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

Line 54 in 8f578ea

}, filtersContainer)

[prettier] _{reported by reviewdog 🐶}

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

Lines 1 to 2 in 8f578ea

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

[prettier] _{reported by reviewdog 🐶}

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

Line 4 in 8f578ea

callback(e);

[prettier] _{reported by reviewdog 🐶}

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

Line 6 in 8f578ea

});

[prettier] _{reported by reviewdog 🐶}

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

Lines 10 to 12 in 8f578ea

    
           const range = []; 
        
           const start = Math.max(2, currentPage - visibleRange); 
        
           const end = Math.min(totalPages - 1, currentPage + visibleRange);

[prettier] _{reported by reviewdog 🐶}

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

Line 14 in 8f578ea

range.push(1);

[prettier] _{reported by reviewdog 🐶}

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

Line 16 in 8f578ea

if (start > 2) range.push('...');

[prettier] _{reported by reviewdog 🐶}

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

Line 19 in 8f578ea

range.push(i);

[prettier] _{reported by reviewdog 🐶}

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

Line 22 in 8f578ea

if (end < totalPages - 1) range.push('...');

[prettier] _{reported by reviewdog 🐶}

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

Line 24 in 8f578ea

if (totalPages > 1) range.push(totalPages);

[prettier] _{reported by reviewdog 🐶}

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

Line 26 in 8f578ea

return range;

[prettier] _{reported by reviewdog 🐶}

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

Lines 30 to 32 in 8f578ea

    
           const projectSections = document.querySelectorAll(".project_section"); 
        
           projectSections.forEach(section => { 
        
             let hasVisibleCard = false;

[prettier] _{reported by reviewdog 🐶}

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

Lines 34 to 35 in 8f578ea

	let reportHeading = section.querySelector('.report_heading');

[prettier] _{reported by reviewdog 🐶}

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

Lines 37 to 38 in 8f578ea

	let projectCards = section.querySelectorAll('.project-card');

[prettier] _{reported by reviewdog 🐶}

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

Line 42 in 8f578ea

hasVisibleCard = true;

[prettier] _{reported by reviewdog 🐶}

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

Lines 45 to 48 in 8f578ea

    
           // Hide heading if all cards under section are hidden 
        
           reportHeading.hidden = !hasVisibleCard; 
        
           });

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 1 to 3 in 8f578ea

    
           import { createProjectCards } from "./modules/rendering"; 
        
           import { setupEventListeners } from './modules/events'; 
        
           import { baseurl } from './modules/data';

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 11 to 12 in 8f578ea

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

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 15 to 22 in 8f578ea

    
           const contentId = button.getAttribute("aria-controls"); 
        
           const content = document.getElementById(contentId); 
        
           const icon = button.querySelector("svg use"); 
        
           if(isMobile) { 
        
             button.setAttribute("aria-expanded", "false"); 
        
             content.setAttribute("hidden", "true"); 
        
             icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_more`);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 24 to 26 in 8f578ea

    
           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/projects.js

Lines 37 to 39 in 8f578ea

    
           const expanded = button.getAttribute("aria-expanded"); 
        
           const content = document.getElementById(button.getAttribute("id")); 
        
           const icon = button.querySelector("svg use");

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 41 to 44 in 8f578ea

    
           if(expanded === 'false') { 
        
             content.removeAttribute("hidden"); 
        
             icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_less`);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 46 to 47 in 8f578ea

    
           content.setAttribute("hidden", "true"); 
        
           icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_more`);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 49 to 51 in 8f578ea

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 1 to 2 in 8f578ea

    
           export const reportHeadingTemplate = function(data) {  
        
               return `

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>

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 139 to 141 in 002cc83

    
           }); 
        
           prevItem.appendChild(prevButton); 
        
           paginationList.appendChild(prevItem);

[prettier] _{reported by reviewdog 🐶}

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

Line 143 in 002cc83

const pageRange = getPageRange(currentPage, totalPages, 3);

[prettier] _{reported by reviewdog 🐶}

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

Lines 145 to 146 in 002cc83

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

[prettier] _{reported by reviewdog 🐶}

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

Lines 148 to 150 in 002cc83

    
           if (page === '...') { 
        
             pageItem.className += ' usa-pagination__overflow'; 
        
             pageItem.innerHTML = `<span aria-label="ellipsis indicating non-visible pages">…</span>`;

[prettier] _{reported by reviewdog 🐶}

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

Lines 152 to 163 in 002cc83

    
           pageItem.className += ' usa-pagination__page-no'; 
        
           const pageButton = document.createElement('a'); 
        
           pageButton.href = 'javascript:void(0);'; 
        
           pageButton.className = `usa-pagination__button${page === currentPage ? ' usa-current' : ''}`; 
        
           pageButton.textContent = page; 
        
           pageButton.setAttribute('aria-label', `Page ${page}`); 
        
           if (page === currentPage) pageButton.setAttribute('aria-current', 'page'); 
        
           pageButton.addEventListener('click', () => { 
        
             currentPage = page; 
        
             createProjectCards(); 
        
           }); 
        
           pageItem.appendChild(pageButton);

[prettier] _{reported by reviewdog 🐶}

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

Lines 165 to 174 in 002cc83

    
             paginationList.appendChild(pageItem); 
        
           }); 
        
           const nextItem = document.createElement('li'); 
        
           nextItem.className = 'usa-pagination__item usa-pagination__arrow'; 
        
           const nextButton = document.createElement('a'); 
        
           nextButton.href = 'javascript:void(0);'; 
        
           nextButton.className = 'usa-pagination__link usa-pagination__next-page'; 
        
           nextButton.setAttribute('aria-label', 'Next page'); 
        
           if (currentPage === totalPages) nextButton.classList.add('usa-pagination__disabled');

[prettier] _{reported by reviewdog 🐶}

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

Lines 180 to 181 in 002cc83

    
             `; 
        
             nextButton.addEventListener('click', () => {

[prettier] _{reported by reviewdog 🐶}

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

Lines 183 to 184 in 002cc83

    
           currentPage++; 
        
           createProjectCards();

[prettier] _{reported by reviewdog 🐶}

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

Lines 186 to 188 in 002cc83

    
           }); 
        
           nextItem.appendChild(nextButton); 
        
           paginationList.appendChild(nextItem);

[prettier] _{reported by reviewdog 🐶}

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

Line 190 in 002cc83

paginationDiv.appendChild(paginationList);

[prettier] _{reported by reviewdog 🐶}

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

Line 193 in 002cc83

templateDiv.parentElement.appendChild(paginationDiv);

[prettier] _{reported by reviewdog 🐶}

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

Lines 1 to 4 in 002cc83

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

[prettier] _{reported by reviewdog 🐶}

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

Line 9 in 002cc83

const selection = sortSelection.value;

[prettier] _{reported by reviewdog 🐶}

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

Lines 13 to 16 in 002cc83

    
           if(["maturity_model_tier", "stargazers_count", "forks_count"].includes(selection)) { 
        
             sortByNumberAttribute(targetProjects, selection, isDescending); 
        
           } else {  
        
             sortByStringAttribute(targetProjects, selection, isDescending);

[prettier] _{reported by reviewdog 🐶}

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

Lines 19 to 20 in 002cc83

    
           updatePagination(); 
        
           renderPaginatedProjects(filteredProjects);

[prettier] _{reported by reviewdog 🐶}

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

Lines 25 to 28 in 002cc83

    
             const attributeA = a[attribute] !== undefined ? Number(a[attribute]) : Infinity; 
        
             const attributeB = b[attribute] !== undefined ? Number(b[attribute]) : Infinity; 
        
             return isDescending ? attributeB - attributeA : attributeA - attributeB; 
        
           });

[prettier] _{reported by reviewdog 🐶}

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

Lines 33 to 35 in 002cc83

    
           const hasAttributeA = typeof a[attribute] === 'string'; 
        
           const hasAttributeB = typeof b[attribute] === 'string';

[prettier] _{reported by reviewdog 🐶}

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

Line 38 in 002cc83

    
           return isDescending ? b[attribute].localeCompare(a[attribute]) : a[attribute].localeCompare(b[attribute]);

[prettier] _{reported by reviewdog 🐶}

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

Lines 40 to 44 in 002cc83

    
           // If only one object has the attribute, determine order based on `isDescending` 
        
           if (hasAttributeA) return isDescending ? 1 : -1; 
        
           if (hasAttributeB) return isDescending ? -1 : 1;

[prettier] _{reported by reviewdog 🐶}

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

Lines 46 to 47 in 002cc83

    
             return isDescending ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name); 
        
           });

[prettier] _{reported by reviewdog 🐶}

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

Line 50 in 002cc83

addGlobalEventListener('change', '.usa-checkbox__input', e => {

[prettier] _{reported by reviewdog 🐶}

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

Line 52 in 002cc83

updateFilters();

[prettier] _{reported by reviewdog 🐶}

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

Line 54 in 002cc83

}, filtersContainer)

[prettier] _{reported by reviewdog 🐶}

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

Lines 1 to 2 in 002cc83

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

[prettier] _{reported by reviewdog 🐶}

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

Line 4 in 002cc83

callback(e);

[prettier] _{reported by reviewdog 🐶}

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

Line 6 in 002cc83

});

[prettier] _{reported by reviewdog 🐶}

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

Lines 10 to 12 in 002cc83

    
           const range = []; 
        
           const start = Math.max(2, currentPage - visibleRange); 
        
           const end = Math.min(totalPages - 1, currentPage + visibleRange);

[prettier] _{reported by reviewdog 🐶}

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

Line 14 in 002cc83

range.push(1);

[prettier] _{reported by reviewdog 🐶}

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

Line 16 in 002cc83

if (start > 2) range.push('...');

[prettier] _{reported by reviewdog 🐶}

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

Line 19 in 002cc83

range.push(i);

[prettier] _{reported by reviewdog 🐶}

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

Line 22 in 002cc83

if (end < totalPages - 1) range.push('...');

[prettier] _{reported by reviewdog 🐶}

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

Line 24 in 002cc83

if (totalPages > 1) range.push(totalPages);

[prettier] _{reported by reviewdog 🐶}

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

Line 26 in 002cc83

return range;

[prettier] _{reported by reviewdog 🐶}

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

Lines 30 to 32 in 002cc83

    
           const projectSections = document.querySelectorAll(".project_section"); 
        
           projectSections.forEach(section => { 
        
             let hasVisibleCard = false;

[prettier] _{reported by reviewdog 🐶}

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

Lines 34 to 35 in 002cc83

	let reportHeading = section.querySelector('.report_heading');

[prettier] _{reported by reviewdog 🐶}

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

Lines 37 to 38 in 002cc83

	let projectCards = section.querySelectorAll('.project-card');

[prettier] _{reported by reviewdog 🐶}

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

Line 42 in 002cc83

hasVisibleCard = true;

[prettier] _{reported by reviewdog 🐶}

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

Lines 45 to 48 in 002cc83

    
           // Hide heading if all cards under section are hidden 
        
           reportHeading.hidden = !hasVisibleCard; 
        
           });

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 1 to 3 in 002cc83

    
           import { createProjectCards } from "./modules/rendering"; 
        
           import { setupEventListeners } from './modules/events'; 
        
           import { baseurl } from './modules/data';

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 11 to 12 in 002cc83

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

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 15 to 22 in 002cc83

    
           const contentId = button.getAttribute("aria-controls"); 
        
           const content = document.getElementById(contentId); 
        
           const icon = button.querySelector("svg use"); 
        
           if(isMobile) { 
        
             button.setAttribute("aria-expanded", "false"); 
        
             content.setAttribute("hidden", "true"); 
        
             icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_more`);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 24 to 26 in 002cc83

    
           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/projects.js

Lines 37 to 39 in 002cc83

    
           const expanded = button.getAttribute("aria-expanded"); 
        
           const content = document.getElementById(button.getAttribute("id")); 
        
           const icon = button.querySelector("svg use");

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 41 to 44 in 002cc83

    
           if(expanded === 'false') { 
        
             content.removeAttribute("hidden"); 
        
             icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_less`);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 46 to 47 in 002cc83

    
           content.setAttribute("hidden", "true"); 
        
           icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_more`);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 49 to 51 in 002cc83

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 1 to 2 in 002cc83

    
           export const reportHeadingTemplate = function(data) {  
        
               return `

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/utilities.js

Line 22 in 18c5a0c

if (end < totalPages - 1) range.push('...');

[prettier] _{reported by reviewdog 🐶}

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

Line 24 in 18c5a0c

if (totalPages > 1) range.push(totalPages);

[prettier] _{reported by reviewdog 🐶}

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

Line 26 in 18c5a0c

return range;

[prettier] _{reported by reviewdog 🐶}

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

Lines 30 to 32 in 18c5a0c

    
           const projectSections = document.querySelectorAll(".project_section"); 
        
           projectSections.forEach(section => { 
        
             let hasVisibleCard = false;

[prettier] _{reported by reviewdog 🐶}

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

Lines 34 to 35 in 18c5a0c

	let reportHeading = section.querySelector('.report_heading');

[prettier] _{reported by reviewdog 🐶}

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

Lines 37 to 38 in 18c5a0c

	let projectCards = section.querySelectorAll('.project-card');

[prettier] _{reported by reviewdog 🐶}

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

Line 42 in 18c5a0c

hasVisibleCard = true;

[prettier] _{reported by reviewdog 🐶}

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

Lines 45 to 48 in 18c5a0c

    
           // Hide heading if all cards under section are hidden 
        
           reportHeading.hidden = !hasVisibleCard; 
        
           });

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 1 to 3 in 18c5a0c

    
           import { createProjectCards } from "./modules/rendering"; 
        
           import { setupEventListeners } from './modules/events'; 
        
           import { baseurl } from './modules/data';

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 11 to 12 in 18c5a0c

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

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 15 to 22 in 18c5a0c

    
           const contentId = button.getAttribute("aria-controls"); 
        
           const content = document.getElementById(contentId); 
        
           const icon = button.querySelector("svg use"); 
        
           if(isMobile) { 
        
             button.setAttribute("aria-expanded", "false"); 
        
             content.setAttribute("hidden", "true"); 
        
             icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_more`);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 24 to 26 in 18c5a0c

    
           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/projects.js

Lines 37 to 39 in 18c5a0c

    
           const expanded = button.getAttribute("aria-expanded"); 
        
           const content = document.getElementById(button.getAttribute("id")); 
        
           const icon = button.querySelector("svg use");

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 41 to 44 in 18c5a0c

    
           if(expanded === 'false') { 
        
             content.removeAttribute("hidden"); 
        
             icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_less`);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 46 to 47 in 18c5a0c

    
           content.setAttribute("hidden", "true"); 
        
           icon.setAttribute("href", `${baseurl}/assets/img/sprite.svg#expand_more`);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 49 to 51 in 18c5a0c

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/templates.js

Lines 1 to 2 in 18c5a0c

    
           export const reportHeadingTemplate = function(data) {  
        
               return `

Remove node modules

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/filters.js

Line 120 in 8d23d9f

checkFilterCriteria(card, selectedFiltersObject);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Line 124 in 8d23d9f

updateHeadingVisibility();

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Lines 128 to 135 in 8d23d9f

    
           const cardName = card.querySelector(".usa-card__heading").innerText; 
        
           const currentProject = parsedProjectsData.find((project) => project.name === cardName) 
        
           const matchesOrganization = selectedFiltersObject.organization.length === 0 || selectedFiltersObject.organization.includes(currentProject.owner); 
        
           const projectMaturityModelTier = "Tier " + currentProject.maturityModelTier; 
        
           const matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 || selectedFiltersObject.maturityModelTier.includes(projectMaturityModelTier); 
        
           const matchesFismaLevel = selectedFiltersObject.fismaLevel.length === 0 || selectedFiltersObject.fismaLevel.includes(currentProject.fismaLevel); 
        
           const matchesProjectType = selectedFiltersObject.projectType.length === 0 || selectedFiltersObject.projectType.includes(currentProject.projectType);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Line 137 in 8d23d9f

    
           card.hidden = !(matchesOrganization && matchesMaturityModelTier && matchesFismaLevel && matchesProjectType);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Lines 141 to 142 in 8d23d9f

    
           const totalProjects = (filteredProjects || parsedProjectsData).length; 
        
           const totalPages = Math.ceil(totalProjects / itemsPerPage);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/modules/filters.js

Lines 144 to 146 in 8d23d9f

    
             currentPage = Math.min(currentPage, totalPages || 1); 
        
             renderPaginationControls(totalPages); 
        
           }

[prettier] _{reported by reviewdog 🐶}

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

Lines 1 to 5 in 8d23d9f

    
           import { reportHeadingTemplate, projectCardTemplate } from "../templates"; 
        
           import { templateDiv, parsedProjectsData, orgsData, siteData, findObject, baseurl } from "./data"; 
        
           import { getFilteredProjects, updateFilters } from "./filters"; 
        
           import { getPageRange, updateHeadingVisibility } from "./utilities"; 
        
           import DOMPurify from 'dompurify';

[prettier] _{reported by reviewdog 🐶}

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

Lines 13 to 57 in 8d23d9f

    
           templateDiv.innerHTML = '' 
        
           const allProjects = (projects || parsedProjectsData).map((project) => ({ 
        
             ...project, 
        
             org: project.owner 
        
           })); 
        
           const startIndex = (currentPage - 1) * itemsPerPage; 
        
           const endIndex = startIndex + itemsPerPage; 
        
           const paginatedProjects = allProjects.slice(startIndex, endIndex); 
        
           const groupedByOrg = paginatedProjects.reduce((acc, curr) => { 
        
             if(!acc[curr.org]) { 
        
               acc[curr.org] = [] 
        
             } 
        
             acc[curr.org].push(curr); 
        
             return acc 
        
           }, {}); 
        
           for (const org in groupedByOrg) { 
        
             const orgProject = findObject(parsedOrgsData, org); 
        
             const orgHeading = reportHeadingTemplate(orgProject); 
        
             const projectSectionsTemplate = document.createElement('div'); 
        
             projectSectionsTemplate.className = 'project_section'; 
        
             templateDiv.append(projectSectionsTemplate); 
        
             const reportHeading = document.createElement('div'); 
        
             reportHeading.className = "report_heading"; 
        
             reportHeading.innerHTML = DOMPurify.sanitize(orgHeading); 
        
             projectSectionsTemplate.appendChild(reportHeading); 
        
             const projectCards = document.createElement('ul'); 
        
             projectCards.className = "usa-card-group flex-align-stretch"; 
        
             projectSectionsTemplate.appendChild(projectCards); 
        
             groupedByOrg[org].forEach(repoData => { 
        
               repoData.baseurl = siteData.baseurl; 
        
               const projectCard = document.createElement('li'); 
        
               projectCard.className = 'usa-card project-card tablet:grid-col-12'; 
        
               projectCard.id = repoData.name; 
        
               projectCard.setAttribute('org-name', repoData.owner); 
        
               projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData)); 
        
               projectCards.appendChild(projectCard); 
        
             })

[prettier] _{reported by reviewdog 🐶}

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

Lines 59 to 61 in 8d23d9f

    
           updateFilters(); 
        
           updateHeadingVisibility(); 
        
           renderPaginationControls(allProjects.length)

[prettier] _{reported by reviewdog 🐶}

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

Line 63 in 8d23d9f

[prettier] _{reported by reviewdog 🐶}

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

Lines 65 to 67 in 8d23d9f

    
           const startIndex = (currentPage - 1) * itemsPerPage; 
        
           const endIndex = startIndex + itemsPerPage; 
        
           const paginatedProjects = projects.slice(startIndex, endIndex);

[prettier] _{reported by reviewdog 🐶}

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

Line 69 in 8d23d9f

templateDiv.innerHTML = '';

[prettier] _{reported by reviewdog 🐶}

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

Line 72 in 8d23d9f

if(!acc[curr.owner]) {

[prettier] _{reported by reviewdog 🐶}

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

Line 75 in 8d23d9f

acc[curr.owner].push(curr);

[prettier] _{reported by reviewdog 🐶}

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

Line 77 in 8d23d9f

}, {});

[prettier] _{reported by reviewdog 🐶}

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

Lines 80 to 104 in 8d23d9f

    
           const orgProject = findObject(parsedOrgsData, org); 
        
           const orgHeading = reportHeadingTemplate(orgProject); 
        
           const projectSectionsTemplate = document.createElement('div'); 
        
           projectSectionsTemplate.className = 'project_section'; 
        
           const reportHeading = document.createElement('div'); 
        
           reportHeading.className = "report_heading"; 
        
           reportHeading.innerHTML = DOMPurify.sanitize(orgHeading); 
        
           projectSectionsTemplate.appendChild(reportHeading); 
        
           const projectCards = document.createElement('ul'); 
        
           projectCards.className = "usa-card-group flex-align-stretch"; 
        
           groupedByOrg[org].forEach(repoData => { 
        
             repoData.baseurl = siteData.baseurl; 
        
             const projectCard = document.createElement('li'); 
        
             projectCard.className = 'usa-card project-card tablet:grid-col-12'; 
        
             projectCard.id = repoData.name; 
        
             projectCard.setAttribute('org-name', repoData.owner); 
        
             projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData)); 
        
             projectCards.appendChild(projectCard); 
        
           }); 
        
           projectSectionsTemplate.appendChild(projectCards); 
        
           templateDiv.append(projectSectionsTemplate);

[prettier] _{reported by reviewdog 🐶}

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

Line 106 in 8d23d9f

updateHeadingVisibility();

[prettier] _{reported by reviewdog 🐶}

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

Lines 110 to 126 in 8d23d9f

    
           const paginationDiv = document.getElementById('pagination-controls') || document.createElement('div'); 
        
           paginationDiv.id = 'pagination-controls'; 
        
           paginationDiv.className = 'usa-pagination'; 
        
           paginationDiv.innerHTML = ''; 
        
           const totalPages = Math.ceil(totalProjectsCount / itemsPerPage); 
        
           const paginationList = document.createElement('ul'); 
        
           paginationList.className = 'usa-pagination__list'; 
        
           const prevItem = document.createElement('li'); 
        
           prevItem.className = 'usa-pagination__item usa-pagination__arrow'; 
        
           const prevButton = document.createElement('a'); 
        
           prevButton.href = 'javascript:void(0);'; 
        
           prevButton.className = 'usa-pagination__link usa-pagination__previous-page'; 
        
           prevButton.setAttribute('aria-label', 'Previous page'); 
        
           if (currentPage === 1) prevButton.classList.add('usa-pagination__disabled');

[prettier] _{reported by reviewdog 🐶}

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

Lines 132 to 133 in 8d23d9f

    
             `; 
        
             prevButton.addEventListener('click', () => {

[prettier] _{reported by reviewdog 🐶}

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

Lines 135 to 136 in 8d23d9f

    
           currentPage--; 
        
           createProjectCards();

[prettier] _{reported by reviewdog 🐶}

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

Lines 138 to 140 in 8d23d9f

    
           }); 
        
           prevItem.appendChild(prevButton); 
        
           paginationList.appendChild(prevItem);

[prettier] _{reported by reviewdog 🐶}

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

Line 142 in 8d23d9f

const pageRange = getPageRange(currentPage, totalPages, 3);

[prettier] _{reported by reviewdog 🐶}

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

Lines 144 to 145 in 8d23d9f

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

[prettier] _{reported by reviewdog 🐶}

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

Lines 147 to 149 in 8d23d9f

    
           if (page === '...') { 
        
             pageItem.className += ' usa-pagination__overflow'; 
        
             pageItem.innerHTML = `<span aria-label="ellipsis indicating non-visible pages">…</span>`;

[prettier] _{reported by reviewdog 🐶}

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

Lines 151 to 162 in 8d23d9f

    
           pageItem.className += ' usa-pagination__page-no'; 
        
           const pageButton = document.createElement('a'); 
        
           pageButton.href = 'javascript:void(0);'; 
        
           pageButton.className = `usa-pagination__button${page === currentPage ? ' usa-current' : ''}`; 
        
           pageButton.textContent = page; 
        
           pageButton.setAttribute('aria-label', `Page ${page}`); 
        
           if (page === currentPage) pageButton.setAttribute('aria-current', 'page'); 
        
           pageButton.addEventListener('click', () => { 
        
             currentPage = page; 
        
             createProjectCards(); 
        
           }); 
        
           pageItem.appendChild(pageButton);

[prettier] _{reported by reviewdog 🐶}

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

Lines 164 to 173 in 8d23d9f

    
             paginationList.appendChild(pageItem); 
        
           }); 
        
           const nextItem = document.createElement('li'); 
        
           nextItem.className = 'usa-pagination__item usa-pagination__arrow'; 
        
           const nextButton = document.createElement('a'); 
        
           nextButton.href = 'javascript:void(0);'; 
        
           nextButton.className = 'usa-pagination__link usa-pagination__next-page'; 
        
           nextButton.setAttribute('aria-label', 'Next page'); 
        
           if (currentPage === totalPages) nextButton.classList.add('usa-pagination__disabled');

[prettier] _{reported by reviewdog 🐶}

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

Lines 179 to 180 in 8d23d9f

    
             `; 
        
             nextButton.addEventListener('click', () => {

[prettier] _{reported by reviewdog 🐶}

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

Lines 182 to 183 in 8d23d9f

    
           currentPage++; 
        
           createProjectCards();

[prettier] _{reported by reviewdog 🐶}

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

Lines 185 to 187 in 8d23d9f

    
           }); 
        
           nextItem.appendChild(nextButton); 
        
           paginationList.appendChild(nextItem);

[prettier] _{reported by reviewdog 🐶}

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

Line 189 in 8d23d9f

paginationDiv.appendChild(paginationList);

[prettier] _{reported by reviewdog 🐶}

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

Line 192 in 8d23d9f

templateDiv.parentElement.appendChild(paginationDiv);

[prettier] _{reported by reviewdog 🐶}

metrics/app/src/js/projects.js

Lines 49 to 51 in 8d23d9f

DinneK and others added 30 commits January 30, 2025 18:50

Fix Metrics Title

b4c10cf

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>

Merge pull request #313 from DSACMS/fix-main-title

01513ef

Fix Metrics Title

Merge branch 'main' into dev

56eb423

Merge branch 'main' into dev

4f484b1

Merge branch 'main' into dev

5d2444c

Merge branch 'main' into dev

8a7bc83

Merge branch 'main' into dev

f76f8ee

Merge branch 'main' into dev

fa11e7b

Merge branch 'main' into dev

ebc19c1

Merge branch 'main' into dev

0687c06

Merge branch 'main' into dev

da0a2ec

Merge branch 'main' into dev

bb2d700

Merge branch 'main' into dev

0109bd7

Merge branch 'main' into dev

e3e422d

Merge branch 'main' into dev

ce290f2

Merge branch 'main' into dev

99d95e7

Merge branch 'main' into dev

e59b220

Merge branch 'main' into dev

5e6295f

Merge branch 'main' into dev

4ee51a5

Merge branch 'main' into dev

89dba63

Merge branch 'main' into dev

077ea05

Merge branch 'main' into dev

715add8

Merge branch 'main' into dev

f2833e4

Merge branch 'main' into dev

650567b

Merge branch 'main' into dev

95f0320

Merge branch 'main' into dev

a03fd2a

Merge branch 'main' into dev

af3b891

Merge branch 'main' into dev

a833762

Merge branch 'main' into dev

e7d0ada

Merge branch 'main' into dev

884ed6c

DinneK requested a review from decause-gov April 7, 2025 13:51

DinneK self-assigned this Apr 7, 2025

github-actions Bot reviewed Apr 7, 2025

View reviewed changes

Comment thread app/src/js/modules/events.js

Comment thread app/src/js/modules/sorting.js

Comment thread app/src/js/modules/sorting.js

github-actions Bot reviewed Apr 7, 2025

View reviewed changes

Comment thread app/src/js/modal.js

DinneK and others added 3 commits April 8, 2025 17:36

Fix search bar event listener

4bcd67c

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>

Remove node_modules from Git

2bd6cde

Signed-off-by: Dinne Kopelevich <dinne.kopelevich@gsa.gov>

Merge branch 'main' into dev

002cc83

github-actions Bot reviewed Apr 13, 2025

View reviewed changes

Comment thread app/src/js/modules/rendering.js

Merge branch 'main' into dev

18c5a0c

github-actions Bot reviewed Apr 13, 2025

View reviewed changes

Merge branch 'main' into dev

a4f52fa

github-actions Bot reviewed Apr 13, 2025

View reviewed changes

GitHub Actions and others added 14 commits April 13, 2025 08:29

Merge branch 'main' into dev

084b8e1

Merge branch 'main' into dev

0668480

Merge branch 'main' into dev

ba468be

Merge branch 'main' into dev

20cb2f5

Merge branch 'main' into dev

8accad5

Merge branch 'main' into dev

d0fc5d3

Merge branch 'main' into dev

0d8a278

Merge branch 'main' into dev

034be91

Merge branch 'main' into dev

7c1f9c2

Merge branch 'main' into dev

325a099

Merge branch 'main' into dev

37e5680

Merge branch 'main' into dev

694a1be

Merge branch 'main' into dev

e70e526

Merge pull request #358 from DSACMS/Remove-node_modules

8d23d9f

Remove node modules

github-actions Bot reviewed Apr 14, 2025

View reviewed changes

Comment thread app/src/js/modules/events.js

Comment thread app/src/js/modules/rendering.js

github-actions Bot reviewed Apr 14, 2025

View reviewed changes

DinneK closed this Apr 17, 2025

	const filtersButtonGroup = document.createElement('div');
	filtersButtonGroup.className = "usa-button-group";
	selectedFiltersContainer.appendChild(filtersButtonGroup);

	const filtersArray = selectedFiltersObject[filterCategory];

	filtersArray.forEach(filter => {

	const filterButton = document.createElement('button');
	filterButton.className = 'usa-button margin-bottom-1';
	filterButton.textContent = filter;
	filtersButtonGroup.appendChild(filterButton);

	addGlobalEventListener("click", "#filter-tags .usa-button", e => {
	const buttonName = e.target.textContent;
	const selectedCheckboxes = document.querySelectorAll("input:checked");

	selectedCheckboxes.forEach(checkbox => {
	if (buttonName == checkbox.value) {
	e.target.remove();
	checkbox.checked = false;
	updateFilters();
	}
	})

	}, filtersButtonGroup);

	document.querySelectorAll('input[name="org-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.organization.push(checkbox.value);
	});
	document.querySelectorAll('input[name="tier-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.maturityModelTier.push(checkbox.value);
	});
	document.querySelectorAll('input[name="fisma-level-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.fismaLevel.push(checkbox.value);
	});
	document.querySelectorAll('input[name="project-type-filter"]:checked').forEach(checkbox => {
	selectedFiltersObject.projectType.push(checkbox.value);
	});

	const cardName = card.querySelector(".usa-card__heading").innerText;
	const currentProject = parsedProjectsData.find((project) => project.name === cardName)
	const matchesOrganization = selectedFiltersObject.organization.length === 0 \|\| selectedFiltersObject.organization.includes(currentProject.owner);
	const projectMaturityModelTier = "Tier " + currentProject.maturityModelTier;
	const matchesMaturityModelTier = selectedFiltersObject.maturityModelTier.length === 0 \|\| selectedFiltersObject.maturityModelTier.includes(projectMaturityModelTier);
	const matchesFismaLevel = selectedFiltersObject.fismaLevel.length === 0 \|\| selectedFiltersObject.fismaLevel.includes(currentProject.fismaLevel);
	const matchesProjectType = selectedFiltersObject.projectType.length === 0 \|\| selectedFiltersObject.projectType.includes(currentProject.projectType);

	const totalProjects = (filteredProjects \|\| parsedProjectsData).length;
	const totalPages = Math.ceil(totalProjects / itemsPerPage);

	currentPage = Math.min(currentPage, totalPages \|\| 1);
	renderPaginationControls(totalPages);
	}

	import { reportHeadingTemplate, projectCardTemplate } from "../templates";
	import { templateDiv, parsedProjectsData, orgsData, siteData, findObject, baseurl } from "./data";
	import { updateFilters } from "./filters";
	import { getPageRange, updateHeadingVisibility } from "./utilities";
	import DOMPurify from 'dompurify';

	let filteredProjects = [...parsedProjectsData];
	templateDiv.innerHTML = ''

	const allProjects = (filteredProjects \|\| parsedProjectsData).map((project) => ({

	org: project.owner
	}));

	const startIndex = (currentPage - 1) * itemsPerPage;
	const endIndex = startIndex + itemsPerPage;
	const paginatedProjects = allProjects.slice(startIndex, endIndex);

	const groupedByOrg = paginatedProjects.reduce((acc, curr) => {
	if(!acc[curr.org]) {
	acc[curr.org] = []
	}
	acc[curr.org].push(curr);
	return acc
	}, {});

	for (const org in groupedByOrg) {
	const orgProject = findObject(parsedOrgsData, org);
	const orgHeading = reportHeadingTemplate(orgProject);
	const projectSectionsTemplate = document.createElement('div');
	projectSectionsTemplate.className = 'project_section';
	templateDiv.append(projectSectionsTemplate);

	const reportHeading = document.createElement('div');
	reportHeading.className = "report_heading";
	reportHeading.innerHTML = DOMPurify.sanitize(orgHeading);
	projectSectionsTemplate.appendChild(reportHeading);

	const projectCards = document.createElement('ul');
	projectCards.className = "usa-card-group flex-align-stretch";

	projectSectionsTemplate.appendChild(projectCards);

	groupedByOrg[org].forEach(repoData => {
	repoData.baseurl = siteData.baseurl;
	const projectCard = document.createElement('li');
	projectCard.className = 'usa-card project-card tablet:grid-col-12';
	projectCard.id = repoData.name;
	projectCard.setAttribute('org-name', repoData.owner);
	projectCard.innerHTML = DOMPurify.sanitize(projectCardTemplate(repoData));
	projectCards.appendChild(projectCard);
	})

	updateFilters();
	updateHeadingVisibility();
	renderPaginationControls(allProjects.length)

	const startIndex = (currentPage - 1) * itemsPerPage;
	const endIndex = startIndex + itemsPerPage;
	const paginatedProjects = projects.slice(startIndex, endIndex);

	const paginationDiv = document.getElementById('pagination-controls') \|\| document.createElement('div');
	paginationDiv.id = 'pagination-controls';
	paginationDiv.className = 'usa-pagination';
	paginationDiv.innerHTML = '';

	const totalPages = Math.ceil(totalProjectsCount / itemsPerPage);

	const paginationList = document.createElement('ul');
	paginationList.className = 'usa-pagination__list';

	const prevItem = document.createElement('li');
	prevItem.className = 'usa-pagination__item usa-pagination__arrow';
	const prevButton = document.createElement('a');
	prevButton.href = 'javascript:void(0);';
	prevButton.className = 'usa-pagination__link usa-pagination__previous-page';
	prevButton.setAttribute('aria-label', 'Previous page');
	if (currentPage === 1) prevButton.classList.add('usa-pagination__disabled');

	});
	prevItem.appendChild(prevButton);
	paginationList.appendChild(prevItem);

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

	if (page === '...') {
	pageItem.className += ' usa-pagination__overflow';
	pageItem.innerHTML = `<span aria-label="ellipsis indicating non-visible pages">…</span>`;

	pageItem.className += ' usa-pagination__page-no';
	const pageButton = document.createElement('a');
	pageButton.href = 'javascript:void(0);';
	pageButton.className = `usa-pagination__button${page === currentPage ? ' usa-current' : ''}`;
	pageButton.textContent = page;
	pageButton.setAttribute('aria-label', `Page ${page}`);
	if (page === currentPage) pageButton.setAttribute('aria-current', 'page');
	pageButton.addEventListener('click', () => {
	currentPage = page;
	createProjectCards();
	});
	pageItem.appendChild(pageButton);

	paginationList.appendChild(pageItem);
	});

	const nextItem = document.createElement('li');
	nextItem.className = 'usa-pagination__item usa-pagination__arrow';
	const nextButton = document.createElement('a');
	nextButton.href = 'javascript:void(0);';
	nextButton.className = 'usa-pagination__link usa-pagination__next-page';
	nextButton.setAttribute('aria-label', 'Next page');
	if (currentPage === totalPages) nextButton.classList.add('usa-pagination__disabled');

	});
	nextItem.appendChild(nextButton);
	paginationList.appendChild(nextItem);

Conversation

DinneK commented Apr 7, 2025

module-name: All Front-End Updates Currently in Dev

Problem

Solution

Result

Test Plan

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

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

	if(["maturity_model_tier", "stargazers_count", "forks_count"].includes(selection)) {
	sortByNumberAttribute(targetProjects, selection, isDescending);
	} else {
	sortByStringAttribute(targetProjects, selection, isDescending);

	updatePagination();
	renderPaginatedProjects(filteredProjects);

	const attributeA = a[attribute] !== undefined ? Number(a[attribute]) : Infinity;
	const attributeB = b[attribute] !== undefined ? Number(b[attribute]) : Infinity;
	return isDescending ? attributeB - attributeA : attributeA - attributeB;
	});

	const hasAttributeA = typeof a[attribute] === 'string';
	const hasAttributeB = typeof b[attribute] === 'string';


	// If only one object has the attribute, determine order based on `isDescending`
	if (hasAttributeA) return isDescending ? 1 : -1;
	if (hasAttributeB) return isDescending ? -1 : 1;

	return isDescending ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name);
	});

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

	const range = [];
	const start = Math.max(2, currentPage - visibleRange);
	const end = Math.min(totalPages - 1, currentPage + visibleRange);

	const projectSections = document.querySelectorAll(".project_section");
	projectSections.forEach(section => {
	let hasVisibleCard = false;