agentsqripts/lib/ui-problems/clutteredLayoutDetector.js

Comprehensive static code analysis toolkit for identifying technical debt, security vulnerabilities, performance issues, and code quality problems

/**
 * @file Cluttered layout detector
 * @description Detects cluttered layouts and overwhelming content
 */

const { UI_PROBLEM_PATTERNS, UI_CONFIG } = require('./uiProblemPatterns');

/**
 * Detects cluttered layouts with too many elements
 * @param {string} content - File content
 * @param {string} filePath - Path to the file
 * @returns {Array} Array of cluttered layout issues
 */
function detectClutteredLayouts(content, filePath) {
  const issues = [];
  
  // Count various UI elements that can contribute to clutter
  const elementCounts = {
    buttons: (content.match(/<button|<input[^>]*type\s*=\s*["']button/gi) || []).length,
    links: (content.match(/<a\s/gi) || []).length,
    forms: (content.match(/<form/gi) || []).length,
    modals: (content.match(/modal|dialog|popup/gi) || []).length,
    alerts: (content.match(/alert|notification|toast/gi) || []).length,
    inputs: (content.match(/<input|<textarea|<select/gi) || []).length
  };
  
  // Check for deeply nested elements (indication of complex layouts)
  const nestingMatches = content.match(/<div[^>]*>(?:[^<]*<div[^>]*>){4,}/gi) || [];
  const maxNesting = nestingMatches.length;
  
  // Calculate clutter score
  const clutterScore = 
    elementCounts.buttons * 0.5 + 
    elementCounts.links * 0.3 + 
    elementCounts.forms * 2 + 
    elementCounts.modals * 3 + 
    elementCounts.alerts * 2 + 
    elementCounts.inputs * 0.4 + 
    maxNesting * 1.5;
  
  if (clutterScore > 20 || maxNesting > UI_CONFIG.maxNestingDepth) {
    const patternInfo = UI_PROBLEM_PATTERNS['cluttered_layout'];
    
    const clutterFactors = [];
    if (elementCounts.buttons > 8) clutterFactors.push(`${elementCounts.buttons} buttons`);
    if (elementCounts.links > 15) clutterFactors.push(`${elementCounts.links} links`);
    if (elementCounts.forms > 3) clutterFactors.push(`${elementCounts.forms} forms`);
    if (elementCounts.modals > 2) clutterFactors.push(`${elementCounts.modals} modals`);
    if (maxNesting > UI_CONFIG.maxNestingDepth) clutterFactors.push(`${maxNesting} deep nesting levels`);
    
    issues.push({
      type: 'cluttered_layout',
      severity: patternInfo.severity,
      category: patternInfo.category,
      location: filePath,
      clutterScore: Math.round(clutterScore),
      maxNesting: maxNesting,
      elementCounts: elementCounts,
      clutterFactors: clutterFactors,
      summary: `Cluttered layout detected (score: ${Math.round(clutterScore)})`,
      recommendation: `Simplify layout by grouping related elements, using progressive disclosure, and reducing visual complexity`,
      effort: patternInfo.effort,
      impact: patternInfo.impact,
      suggestions: [
        'Group related actions into dropdown menus',
        'Use tabs or accordions to organize content',
        'Implement progressive disclosure for advanced features',
        'Remove or hide less important elements',
        'Use white space more effectively'
      ]
    });
  }
  
  return issues;
}

module.exports = {
  detectClutteredLayouts
};