@canyonjs/report-component 0.0.8 → 0.0.10

package/dist/index.d.ts

@@ -8,7 +8,10 @@ import { FileCoverageData } from "istanbul-lib-coverage";
 interface FileDataResponse {
   fileCoverage: FileCoverageData;
   fileContent: string;
-  fileCodeChange: number[];
+  fileCodeChange: {
+    additions: number[];
+    deletions: number[];
+  };
 }
 interface DataSourceItem {
   path: string;

package/dist/index.js

@@ -4,7 +4,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { genSummaryTreeItem } from "canyon-data";
 import { renderToStaticMarkup } from "react-dom/server";
 import Highlighter from "react-highlight-words";
-import { FileOutlined, FolderFilled } from "@ant-design/icons";
+import Icon, { BarsOutlined, FileOutlined, FolderFilled } from "@ant-design/icons";
 
 //#region src/components/RIf.tsx
 const RIf = ({ condition, children }) => {
@@ -155,6 +155,35 @@ function annotateBranches(fileCoverage, structuredText) {
 	return arr;
 }
 
+//#endregion
+//#region src/helpers/changeModeFilterIrrelevantData.ts
+function changeModeFilterIrrelevantData(coverage, diff) {
+	const addLines = diff.additions || [];
+	const statementMap = coverage["statementMap"] || {};
+	const s = coverage["s"] || {};
+	const newStatementMap = {};
+	const newS = {};
+	Object.keys(statementMap).forEach((key) => {
+		const statement = statementMap[key];
+		const startLine = statement.start.line;
+		const endLine = statement.end.line;
+		for (let line = startLine; line <= endLine; line++) if (addLines.includes(line)) {
+			newStatementMap[key] = statement;
+			newS[key] = s[key];
+			break;
+		}
+	});
+	return {
+		path: coverage["path"],
+		branchMap: {},
+		b: {},
+		fnMap: {},
+		f: {},
+		statementMap: newStatementMap,
+		s: newS
+	};
+}
+
 //#endregion
 //#region src/helpers/coreFn.ts
 function coreFn(fileCoverage, fileDetail) {
@@ -284,23 +313,9 @@ const ChangedCodeCoverageTable = ({ coverage, addLines }) => {
 		}), /* @__PURE__ */ jsx("div", {
 			className: "canyon-changed-code-coverage-content",
 			style: { maxHeight: isOpen ? "350px" : "0" },
-			children: /* @__PURE__ */ jsxs("div", {
+			children: /* @__PURE__ */ jsx("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, {
+				children: /* @__PURE__ */ jsx(ConfigProvider, {
 					theme: { token: { borderRadius: 0 } },
 					children: /* @__PURE__ */ jsx(Table, {
 						dataSource: relatedStatements,
@@ -334,7 +349,7 @@ const ChangedCodeCoverageTable = ({ coverage, addLines }) => {
 						size: "small",
 						bordered: true
 					})
-				})]
+				})
 			})
 		})]
 	});
@@ -398,8 +413,9 @@ function lineNumbers(lineNumber, linesState, _addLines) {
 //#endregion
 //#region src/widgets/CoverageDetail.tsx
 const CoverageDetail = ({ source, coverage, diff }) => {
-	const { lines } = coreFn(coverage, source);
 	const addLines = diff.additions || [];
+	coverage = changeModeFilterIrrelevantData(coverage, diff);
+	const { lines } = coreFn(coverage, source);
 	const ref = useRef(null);
 	const hasChangedLines = addLines.length > 0 && coverage["s"] && coverage["statementMap"];
 	const linesState = (() => {
@@ -524,7 +540,7 @@ const SummaryNav = ({ value, onClick, reportName }) => {
 	return /* @__PURE__ */ jsx("div", {
 		style: {
 			display: "flex",
-			gap: "6px",
+			gap: "3px",
 			marginBottom: "6px",
 			fontSize: "16px",
 			fontWeight: "bold"
@@ -534,7 +550,7 @@ const SummaryNav = ({ value, onClick, reportName }) => {
 			return /* @__PURE__ */ jsxs("div", {
 				style: {
 					display: "flex",
-					gap: "6px"
+					gap: "3px"
 				},
 				children: [/* @__PURE__ */ jsx("a", {
 					onClick: () => {
@@ -566,7 +582,7 @@ const SummaryMetric = ({ data, onlyChange }) => {
 				"changestatements"
 			];
 			return order.indexOf(key1) - order.indexOf(key2);
-		}).filter(([key]) => (onlyChange ? ["statements", "changestatements"] : [
+		}).filter(([key]) => (onlyChange ? ["changestatements"] : [
 			"statements",
 			"branches",
 			"functions",
@@ -735,7 +751,11 @@ const SummaryList = ({ dataSource, onSelect, filenameKeywords, style, onlyChange
 							});
 						}
 					}
-				].filter((c) => c.key !== "changestatements" || c.key === "changestatements" && onlyChange)
+				].filter((c) => {
+					if (c.key === "path") return true;
+					if (onlyChange) return c.key === "changestatements";
+					return c.key !== "changestatements";
+				})
 			})
 		})
 	});
@@ -852,13 +872,33 @@ const SummaryTree = ({ dataSource, onSelect, style, onlyChange }) => {
 							});
 						}
 					}
-				].filter((c) => c.key !== "changestatements" || c.key === "changestatements" && onlyChange)
+				].filter((c) => {
+					if (c.key === "path") return true;
+					if (onlyChange) return c.key === "changestatements";
+					return c.key !== "changestatements";
+				})
 			})
 		})
 	});
 };
 var SummaryTree_default = SummaryTree;
 
+//#endregion
+//#region src/icons/PhTreeView.tsx
+function PhTreeViewIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "1em",
+		height: "1em",
+		viewBox: "0 0 256 256",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M176 152h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v8H88V80h8a16 16 0 0 0 16-16V32a16 16 0 0 0-16-16H64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h8v112a24 24 0 0 0 24 24h64v8a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v8H96a8 8 0 0 1-8-8v-64h72v8a16 16 0 0 0 16 16M64 32h32v32H64Zm112 160h32v32h-32Zm0-88h32v32h-32Z"
+		})
+	});
+}
+
 //#endregion
 //#region src/widgets/TopControl.tsx
 const TopControl = ({ total, showMode, onChangeShowMode, onChangeKeywords, filenameKeywords, onChangeOnlyChange, onlyChange }) => {
@@ -884,10 +924,12 @@ const TopControl = ({ total, showMode, onChangeShowMode, onChangeKeywords, filen
 				},
 				options: [{
 					label: "Code Tree",
-					value: "tree"
+					value: "tree",
+					icon: /* @__PURE__ */ jsx(Icon, { component: PhTreeViewIcon })
 				}, {
 					label: "File List",
-					value: "list"
+					value: "list",
+					icon: /* @__PURE__ */ jsx(BarsOutlined, {})
 				}]
 			}), /* @__PURE__ */ jsx("span", {
 				style: { fontSize: "14px" },
@@ -961,7 +1003,10 @@ const CanyonReport = ({ value, name, dataSource, onSelect, defaultOnlyChange = f
 		b: {}
 	});
 	const [fileContent, setFileContent] = useState("");
-	const [fileCodeChange, setFileCodeChange] = useState([]);
+	const [fileCodeChange, setFileCodeChange] = useState({
+		additions: [],
+		deletions: []
+	});
 	const isControlled = controlledOnlyChange !== void 0 && controlledOnChangeOnlyChange !== void 0;
 	const [internalOnlyChange, setInternalOnlyChange] = useState(defaultOnlyChange);
 	const onlyChange = isControlled ? controlledOnlyChange : internalOnlyChange;
@@ -975,7 +1020,10 @@ const CanyonReport = ({ value, name, dataSource, onSelect, defaultOnlyChange = f
 			const res = await onSelect(val);
 			setFileContent(res.fileContent || "");
 			setFileCoverage(res.fileCoverage || {});
-			setFileCodeChange(res.fileCodeChange || "");
+			setFileCodeChange(res.fileCodeChange || {
+				additions: [],
+				deletions: []
+			});
 			return res;
 		};
 	}, [onSelect]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@canyonjs/report-component",
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "author": "Travis Zhang<https://github.com/travzhang>",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     "@vitejs/plugin-react": "^5.1.1",
     "istanbul-lib-coverage": "^3.2.2",
     "tsdown": "^0.17.0",
-    "@typescript/native-preview": "^7.0.0-dev.20251215.1",
+    "@typescript/native-preview": "7.0.0-dev.20260119.1",
     "vite": "8.0.0-beta.0",
     "@monaco-editor/react": "4.7.0"
   },