@pythonidaer/complexity-report 1.0.2

package/html-generators/file.css

@@ -0,0 +1,370 @@
+/* File-specific styles - coverage table and breakdown */
+/* Note: Common styles are in shared.css and should be linked separately */
+
+.coverage-block {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+table.coverage {
+  border-collapse: collapse;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+table.coverage td {
+  margin: 0;
+  padding: 0;
+  vertical-align: top;
+}
+
+table.coverage td.line-count {
+  text-align: right;
+  padding: 0 5px 0 5px;
+}
+
+table.coverage td.line-coverage {
+  text-align: right;
+  padding-right: 10px;
+  min-width: 20px;
+}
+
+table.coverage td span.cline-any {
+  display: inline-block;
+  padding: 0 5px;
+  width: 100%;
+}
+
+span.cline-neutral {
+  background: #eaeaea;
+}
+
+span.cline-yes {
+  background: rgb(230, 245, 208);
+}
+
+pre.prettyprint {
+  border: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.wrapper {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  margin: 0 auto -48px;
+}
+
+.scroll-to-top {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 100;
+  padding: 0.5rem 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  border-radius: 4px;
+  border: 1px solid var(--color-muted, #ccc);
+  background: var(--color-bg, #fff);
+  color: var(--color-text, #333);
+  cursor: pointer;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s, visibility 0.2s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.scroll-to-top.scroll-to-top-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.scroll-to-top:hover {
+  background: var(--color-muted, #eee);
+}
+
+.footer,
+.push {
+  height: 48px;
+}
+
+.footer {
+  padding: 20px;
+}
+
+.code-line {
+  display: inline-block;
+  white-space: pre;
+  width: max-content;
+  font: inherit;
+}
+
+.decision-point-line {
+  background: #F6C6CE;
+}
+
+/* When "Show Highlights & Borders" is unchecked: hide pink highlights */
+.coverage-table-wrapper.hide-highlights .decision-point-line {
+  background: transparent;
+}
+
+.complexity-breakdown {
+  margin: 0;
+  padding: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  display: block;
+  width: auto;
+}
+
+.complexity-breakdown h2 {
+  margin: 0 0 10px 0;
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+}
+
+.complexity-breakdown-table {
+  width: auto;
+  max-width: 100%;
+  border-collapse: collapse;
+  margin: 10px 0 0;
+  font-size: 13px;
+}
+
+.complexity-breakdown-table th {
+  padding: 8px 4px;
+  text-align: center;
+  border: 1px solid #ddd;
+  background-color: #f5f5f5;
+  font-weight: bold;
+  vertical-align: middle;
+}
+
+.complexity-breakdown-table td {
+  padding: 10px;
+  text-align: center;
+  border: 1px solid #ddd;
+  vertical-align: middle;
+}
+
+.complexity-breakdown-table td.function-name {
+  text-align: left;
+}
+
+.function-name-parent {
+  font-weight: 600;
+}
+
+.breakdown-header {
+  text-align: center;
+  font-size: 16px;
+  background-color: #e8e8e8;
+  font-weight: bold;
+  padding: 10px;
+}
+
+.breakdown-group-header {
+  background-color: #f0f0f0;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.breakdown-col-header {
+  font-weight: normal;
+  font-size: 11px;
+  background-color: #fafafa;
+  white-space: nowrap;
+}
+
+.breakdown-value {
+  text-align: center;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 12px;
+  color: #333;
+}
+
+.breakdown-value-empty {
+  background: #fff4c2;
+}
+
+.breakdown-col-empty {
+  display: none;
+}
+
+.breakdown-group-empty {
+  display: none;
+}
+
+.no-matches-message {
+  text-align: center;
+  padding: 30px 20px;
+  color: #666;
+  font-style: italic;
+  background-color: #f9f9f9;
+}
+
+.function-name {
+  text-align: left;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 11px;
+  padding-left: 10px;
+  padding-right: 10px;
+  white-space: nowrap;
+}
+
+.function-name .function-name-parent {
+  font-weight: 600;
+}
+
+.function-name .function-name-leaf {
+  font-weight: 600;
+}
+
+.breakdown-function-header {
+  text-align: left;
+  vertical-align: middle;
+  font-weight: bold;
+}
+
+.breakdown-line-header {
+  text-align: center;
+  vertical-align: middle;
+  font-weight: bold;
+}
+
+.breakdown-complexity-header {
+  text-align: center;
+  vertical-align: middle;
+  font-weight: bold;
+}
+
+.breakdown-line-value {
+  text-align: center;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 12px;
+}
+
+.complexity-breakdown-table.hide-lines .breakdown-line-column {
+  display: none;
+}
+
+.sortable {
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+}
+
+.sortable:hover {
+  background-color: #e8e8e8;
+}
+
+.sort-indicator {
+  display: inline-block;
+  margin-left: 5px;
+  font-size: 10px;
+  color: #666;
+  width: 12px;
+  min-width: 12px;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 1;
+}
+
+.sort-indicator::after {
+  content: '';
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+}
+
+.sort-indicator.sort-asc::after {
+  content: '▲';
+}
+
+.sort-indicator.sort-desc::after {
+  content: '▼';
+}
+
+.complexity-value {
+  text-align: center;
+  font-weight: bold;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 13px;
+}
+
+.complexity-value.complexity-above-threshold {
+  box-shadow: inset 0 0 0 2px #c00;
+}
+
+.complexity-breakdown-table tbody tr {
+  background-color: rgb(230, 245, 208);
+}
+
+.complexity-breakdown-table tbody tr:hover {
+  background-color: rgb(220, 235, 198);
+}
+
+.complexity-breakdown-table tbody tr.breakdown-row-selected {
+  background-color: #e0e0e0 !important;
+}
+
+.complexity-breakdown-table tbody tr.breakdown-function-row {
+  cursor: pointer;
+}
+
+table.coverage tr.function-range-highlight {
+  background-color: #e8e8e8;
+}
+
+.breakdown-function {
+  font-weight: bold;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+}
+
+.breakdown-complexity {
+  text-align: center;
+}
+
+.breakdown-details {
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 13px;
+}
+
+.breakdown-divider {
+  color: #999;
+  margin: 0 4px;
+  font-weight: normal;
+}
+
+.complexity-number {
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 10px;
+  color: #555;
+  background: #E8E8E8;
+  padding: 4px 5px;
+  border-radius: 3px;
+  vertical-align: middle;
+  margin: 0 2px;
+  display: inline-block;
+}
+
+.coverage-table-wrapper {
+  position: relative;
+}
+
+#hover-vertical-line {
+  position: absolute;
+  left: 0;
+  width: 0;
+  border-left: 1px solid #0074D9;
+  pointer-events: none;
+  visibility: hidden;
+  z-index: 1;
+}
+
+#hover-vertical-line.visible {
+  visibility: visible;
+}

package/html-generators/file.js

@@ -0,0 +1,207 @@
+/**
+ * Main file page HTML generator
+ * Orchestrates file-helpers, file-breakdown, file-boundary-builders,
+ * file-line-render, file-data
+ */
+import { resolve } from 'path';
+import { generateJavaScriptCode } from './file-javascript.js';
+import { detectLanguage, getFilePagePaths, readSourceFile } from './file-helpers.js';
+import {
+  calculateFunctionBreakdowns,
+  generateSummarySection,
+  generateBreakdownSectionHTML,
+  prepareFileLevelData,
+  prepareBreakdownColumns,
+} from './file-breakdown.js';
+import { buildLineToSpan } from './file-boundary-builders.js';
+import { generateLineRowHTML } from './file-line-render.js';
+import { createLineToFunctionMap, createDecisionPointLineMap } from './file-data.js';
+
+/**
+ * Generates file HTML page with line-by-line complexity annotations
+ * @param {string} filePath - Relative file path
+ * @param {Array} functions - Array of function objects
+ * @param {string} projectRoot - Project root directory
+ * @param {Function} findFunctionBoundaries - Find function boundaries
+ * @param {Function} parseDecisionPoints - Parse decision points
+ * @param {Function} calculateComplexityBreakdown - Calculate breakdown
+ * @param {Function} formatFunctionHierarchy - Format hierarchy
+ * @param {Function} getComplexityLevel - Get complexity level
+ * @param {Function} getDirectory - Get directory from file path
+ * @param {Function} escapeHtml - Escape HTML
+ * @param {'classic'|'modified'} [variant='classic'] - Complexity variant
+ *                                (controls switch vs case column in FCB)
+ * @returns {string} Full HTML document string
+ */
+export async function generateFileHTML(
+  filePath,
+  functions,
+  projectRoot,
+  findFunctionBoundaries,
+  parseDecisionPoints,
+  calculateComplexityBreakdown,
+  formatFunctionHierarchy,
+  getComplexityLevel,
+  getDirectory,
+  escapeHtml,
+  showAllColumnsInitially = false,
+  hideTableInitially = false,
+  complexityThreshold = 10,
+  hideLinesInitially = false,
+  hideHighlightsInitially = false,
+  variant = 'classic'
+) {
+  const fullPath = resolve(projectRoot, filePath);
+  const { sourceCode, sourceLines } = readSourceFile(fullPath, filePath);
+
+  const lineToFunction = createLineToFunctionMap(functions);
+  const functionBoundaries = findFunctionBoundaries(sourceCode, functions);
+  const decisionPoints = await parseDecisionPoints(
+    sourceCode,
+    functionBoundaries,
+    functions,
+    filePath,
+    projectRoot
+  );
+  const functionBreakdowns = calculateFunctionBreakdowns(
+    functions,
+    functionBoundaries,
+    decisionPoints,
+    calculateComplexityBreakdown
+  );
+  const lineToDecisionPoint = createDecisionPointLineMap(decisionPoints);
+
+  const fileData = prepareFileLevelData(
+    functions,
+    functionBreakdowns,
+    complexityThreshold
+  );
+  const {
+    totalFunctions,
+    withinThreshold,
+    level,
+    decisionPointTotals,
+    withinThresholdPercentage,
+  } = fileData;
+  const summarySection = generateSummarySection(
+    decisionPointTotals,
+    totalFunctions,
+    withinThreshold,
+    withinThresholdPercentage
+  );
+
+  const fileDir = getDirectory(filePath);
+  const fileName = filePath.split('/').pop();
+  const paths = getFilePagePaths(filePath, fileDir);
+
+  const breakdownData = prepareBreakdownColumns(
+    functions,
+    functionBreakdowns,
+    showAllColumnsInitially,
+    variant
+  );
+  const { columnStructure, emptyColumns, initialColumns } = breakdownData;
+  const breakdownItems = formatFunctionHierarchy(
+    functions,
+    functionBoundaries,
+    functionBreakdowns,
+    sourceCode,
+    columnStructure,
+    emptyColumns,
+    showAllColumnsInitially,
+    complexityThreshold
+  );
+  const breakdownSection = generateBreakdownSectionHTML(
+    functions,
+    initialColumns,
+    breakdownItems,
+    columnStructure,
+    showAllColumnsInitially,
+    hideTableInitially,
+    hideLinesInitially,
+    hideHighlightsInitially
+  );
+
+  const lineToSpan = buildLineToSpan(
+    functionBoundaries,
+    sourceLines.length,
+    sourceLines
+  );
+
+  const languageClass = detectLanguage(filePath);
+  const lineRows = sourceLines.map((line, index) =>
+    generateLineRowHTML(
+      line,
+      index,
+      lineToFunction,
+      lineToDecisionPoint,
+      getComplexityLevel,
+      escapeHtml,
+      languageClass
+    )
+  ).join('\n');
+
+  const javascriptCode = generateJavaScriptCode(
+    showAllColumnsInitially,
+    columnStructure,
+    emptyColumns,
+    lineToSpan,
+    !hideLinesInitially
+  );
+
+  const {
+    backLink,
+    folderIndexPath,
+    aboutPath,
+    prettifyCssPath,
+    prettifyJsPath,
+    sharedCssPath,
+    fileCssPath,
+  } = paths;
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+    <title>Complexity report for ${filePath}</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="${sharedCssPath}" />
+    <link rel="stylesheet" href="${prettifyCssPath}" />
+    <link rel="stylesheet" href="${fileCssPath}" />
+</head>
+<body>
+<div class='wrapper'>
+    <div class='pad1'>
+        <div class="header-row">
+            <h1>
+              <a href="${backLink}">All files</a>${
+  fileDir ? ` / <a href="${folderIndexPath}">${fileDir}</a>` : ''
+} / ${fileName}
+            </h1>
+            <a href="${aboutPath}" class="about-link">
+              About Cyclomatic Complexity
+            </a>
+        </div>
+        ${summarySection}
+        ${breakdownSection}
+    </div>
+    <div class='status-line ${level}'></div>
+    <div class="pad1 coverage-block">
+    <div class="coverage-table-wrapper${hideHighlightsInitially ? ' hide-highlights' : ''}">
+    <div id="hover-vertical-line" aria-hidden="true"></div>
+<pre><table class="coverage" id="coverage-table">
+${lineRows}
+</table></pre>
+    </div>
+    </div>
+    <div class='push'></div>
+</div>
+<div class='footer quiet pad2 space-top1 center small'>
+    Complexity report generated by <a href="https://www.github.com/pythonidaer" target="_blank" rel="noopener noreferrer">pythonidaer</a> at ${new Date().toISOString()}
+</div>
+<button type="button" id="scroll-to-top" class="scroll-to-top" aria-label="Scroll to top" title="Scroll to top">↑</button>
+<script src="${prettifyJsPath}"></script>
+<script>${javascriptCode}</script>
+</body>
+</html>`;
+}