@canyonjs/report-component 0.0.2 → 0.0.5

package/dist/index.css

@@ -1,5 +1,24 @@
+.canyonjs-report-html .canyon-coverage-detail-spin-wrapper {
+  height: 100%;
+}
+.canyonjs-report-html
+  .canyon-coverage-detail-spin-wrapper
+  > .ant-spin-container {
+  height: 100%;
+}
 .canyonjs-report-html {
-  /*background-color: #535bf2;*/
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.canyonjs-report-html a {
+  color: #0071c2;
+  cursor: pointer;
+}
+.canyonjs-report-html a:hover {
+  color: #0071c2;
+  opacity: 0.8;
+  text-decoration: underline;
 }
 .canyonjs-report-html .line-number-wrapper {
   display: flex;
@@ -68,3 +87,84 @@
   margin-right: 5px;
 }
 
+/* CoverageDetail 样式 */
+.canyonjs-report-html .canyon-coverage-detail-container {
+  height: 100%;
+  position: relative;
+}
+
+.canyonjs-report-html .canyon-coverage-detail-editor {
+  width: 100%;
+  height: 100%;
+}
+
+/* ChangedCodeCoverageTable 折叠表格样式 */
+.canyonjs-report-html .canyon-changed-code-coverage-table {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+.canyonjs-report-html .canyon-changed-code-coverage-toggle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 8px 16px;
+  background: #f5f5f5;
+  border: none;
+  border-bottom: 1px solid #e0e0e0;
+  color: #333333;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  cursor: pointer;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  z-index: 1001;
+  transition: background 0.2s ease;
+}
+
+.canyonjs-report-html .canyon-changed-code-coverage-toggle:hover {
+  background: #e8e8e8;
+}
+
+.canyonjs-report-html .canyon-changed-code-coverage-icon {
+  margin-right: 8px;
+}
+
+.canyonjs-report-html .canyon-changed-code-coverage-arrow {
+  margin-left: 8px;
+  transition: transform 0.3s ease;
+}
+
+.canyonjs-report-html .canyon-changed-code-coverage-content {
+  position: absolute;
+  top: 33px;
+  left: 0;
+  right: 0;
+  max-height: 0;
+  overflow: hidden;
+  background: #ffffff;
+  border-bottom: 1px solid #e0e0e0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  transition: max-height 0.3s ease;
+}
+
+.canyonjs-report-html .canyon-changed-code-coverage-table-wrapper {
+  padding: 16px;
+  background: #ffffff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  overflow: auto;
+  max-height: 300px;
+}
+
+.canyonjs-report-html .canyon-changed-code-coverage-table-title {
+  font-weight: bold;
+  font-size: 14px;
+  color: #007acc;
+  margin-bottom: 12px;
+}

package/dist/index.js

@@ -205,6 +205,142 @@ function coreFn(fileCoverage, fileDetail) {
 	};
 }
 
+//#endregion
+//#region src/widgets/ChangedCodeCoverageTable.tsx
+const ChangedCodeCoverageTable = ({ coverage, addLines }) => {
+	console.log("coverage", coverage);
+	console.log("addLines", addLines);
+	const [isOpen, setIsOpen] = useState(false);
+	const relatedStatements = useMemo(() => {
+		if (addLines.length === 0 || !coverage.s || !coverage.statementMap) return [];
+		const addedLinesSet = new Set(addLines);
+		const statements = [];
+		Object.entries(coverage.statementMap).forEach(([stId, meta]) => {
+			const startLine = meta.start.line;
+			const endLine = meta.end.line;
+			const startCol = meta.start.column;
+			const endCol = meta.end.column;
+			const relatedLines = [];
+			for (let line = startLine; line <= endLine; line++) if (addedLinesSet.has(line)) relatedLines.push(line);
+			if (relatedLines.length > 0) {
+				const count = coverage.s[stId] || 0;
+				const covered = count > 0;
+				const locationDisplay = endLine > startLine ? `${startLine}:${startCol + 1} - ${endLine}:${endCol + 1}` : `${startLine}:${startCol + 1}`;
+				const relatedLinesDisplay = relatedLines.join(", ");
+				statements.push({
+					key: stId,
+					Status: covered ? "✓ Covered" : "✗ Not Covered",
+					Location: locationDisplay,
+					"Changed Lines": relatedLinesDisplay,
+					"Hit Count": covered ? `${count}x` : "Not covered"
+				});
+			}
+		});
+		statements.sort((a, b) => {
+			return parseInt(a.Location.split(":")[0] || "0") - parseInt(b.Location.split(":")[0] || "0");
+		});
+		return statements;
+	}, [addLines, coverage]);
+	const coverageStats = useMemo(() => {
+		if (relatedStatements.length === 0) return {
+			coveredCount: 0,
+			totalCount: 0,
+			coveragePercent: 0
+		};
+		const coveredCount = relatedStatements.filter((s) => s.Status.includes("✓")).length;
+		const totalCount = relatedStatements.length;
+		return {
+			coveredCount,
+			totalCount,
+			coveragePercent: totalCount > 0 ? Math.round(coveredCount / totalCount * 100) : 0
+		};
+	}, [relatedStatements]);
+	if (relatedStatements.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "canyon-changed-code-coverage-table",
+		children: [/* @__PURE__ */ jsxs("button", {
+			className: "canyon-changed-code-coverage-toggle",
+			onClick: () => setIsOpen(!isOpen),
+			type: "button",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "canyon-changed-code-coverage-icon",
+					children: "📊"
+				}),
+				/* @__PURE__ */ jsxs("span", { children: [
+					"Changed Code Coverage: ",
+					coverageStats.coveragePercent,
+					"% (",
+					coverageStats.coveredCount,
+					"/",
+					coverageStats.totalCount,
+					")"
+				] }),
+				/* @__PURE__ */ jsx("span", {
+					className: "canyon-changed-code-coverage-arrow",
+					children: isOpen ? "▲" : "▼"
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "canyon-changed-code-coverage-content",
+			style: { maxHeight: isOpen ? "350px" : "0" },
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "canyon-changed-code-coverage-table-wrapper",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "canyon-changed-code-coverage-table-title",
+					children: [
+						"Changed Code Statements (",
+						coverageStats.totalCount,
+						") - Coverage:",
+						" ",
+						coverageStats.coveragePercent,
+						"% (",
+						coverageStats.coveredCount,
+						"/",
+						coverageStats.totalCount,
+						")"
+					]
+				}), /* @__PURE__ */ jsx(ConfigProvider, {
+					theme: { token: { borderRadius: 0 } },
+					children: /* @__PURE__ */ jsx(Table, {
+						dataSource: relatedStatements,
+						columns: [
+							{
+								title: "Status",
+								dataIndex: "Status",
+								key: "Status",
+								render: (text) => /* @__PURE__ */ jsx("span", {
+									style: { color: text.includes("✓") ? "#4caf50" : "#f44336" },
+									children: text
+								})
+							},
+							{
+								title: "Location",
+								dataIndex: "Location",
+								key: "Location"
+							},
+							{
+								title: "Changed Lines",
+								dataIndex: "Changed Lines",
+								key: "Changed Lines"
+							},
+							{
+								title: "Hit Count",
+								dataIndex: "Hit Count",
+								key: "Hit Count"
+							}
+						],
+						pagination: false,
+						size: "small",
+						bordered: true
+					})
+				})]
+			})
+		})]
+	});
+};
+var ChangedCodeCoverageTable_default = ChangedCodeCoverageTable;
+
 //#endregion
 //#region src/widgets/lineNumbers.tsx
 function genBgColor(hit) {
@@ -264,6 +400,8 @@ function lineNumbers(lineNumber, linesState, _addLines) {
 const CoverageDetail = ({ source, coverage, diff }) => {
 	const { lines } = coreFn(coverage, source);
 	const addLines = diff.additions || [];
+	const ref = useRef(null);
+	const hasChangedLines = addLines.length > 0 && coverage["s"] && coverage["statementMap"];
 	const linesState = (() => {
 		return lines.map((line, index) => {
 			return {
@@ -276,7 +414,6 @@ const CoverageDetail = ({ source, coverage, diff }) => {
 	const lineNumbersMinChars = (() => {
 		return Math.max(...linesState.map((line) => line.hit)).toString().length + 8;
 	})();
-	const ref = useRef(null);
 	useEffect(() => {
 		if (ref.current) {
 			const dom = ref.current;
@@ -345,11 +482,28 @@ const CoverageDetail = ({ source, coverage, diff }) => {
 				if (editor) editor?.createDecorationsCollection?.(decorations);
 			}
 		}
-	}, [source]);
-	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", {
-		ref,
-		style: { height: "calc(100vh - 150px)" }
-	}) });
+	}, [source, coverage]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "canyon-coverage-detail-container",
+		style: {
+			height: "100%",
+			position: "relative"
+		},
+		children: [hasChangedLines ? /* @__PURE__ */ jsx(ChangedCodeCoverageTable_default, {
+			coverage,
+			addLines
+		}) : null, /* @__PURE__ */ jsx("div", {
+			ref,
+			className: "canyon-coverage-detail-editor",
+			style: {
+				height: hasChangedLines ? "calc(100% - 33px)" : "100%",
+				top: hasChangedLines ? "33px" : "0",
+				position: "absolute",
+				left: 0,
+				right: 0
+			}
+		})]
+	});
 };
 var CoverageDetail_default = CoverageDetail;
 
@@ -850,13 +1004,13 @@ const CanyonReport = ({ value, name, dataSource, onSelect }) => {
 		filenameKeywords,
 		onlyChange
 	]);
-	return /* @__PURE__ */ jsx("div", {
-		className: rootClassName,
-		children: /* @__PURE__ */ jsxs(ConfigProvider, {
-			theme: { token: {
-				colorPrimary: "#0071c2",
-				borderRadius: 2
-			} },
+	return /* @__PURE__ */ jsx(ConfigProvider, {
+		theme: { token: {
+			colorPrimary: "#0071c2",
+			borderRadius: 2
+		} },
+		children: /* @__PURE__ */ jsxs("div", {
+			className: rootClassName,
 			children: [
 				/* @__PURE__ */ jsx("style", { children: `
           .${rootClassName} .canyon-coverage-detail-spin-wrapper { height: 100%; }
@@ -888,8 +1042,7 @@ const CanyonReport = ({ value, name, dataSource, onSelect }) => {
 						style: {
 							flex: 1,
 							minHeight: 0,
-							overflow: "auto",
-							height: "100%"
+							overflow: "auto"
 						},
 						children: /* @__PURE__ */ jsx(Spin, {
 							spinning: !isFileDataReady,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canyonjs/report-component",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "author": "Travis Zhang<https://github.com/travzhang>",
   "repository": {
     "type": "git",