|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
@ -103,6 +103,7 @@ main {
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-right: 1rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.size-selector input {
|
|
|
|
|
margin: 0 0.3rem 0 0;
|
|
|
|
|
}
|
|
|
|
@ -126,6 +127,7 @@ main {
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.module-filter input {
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 1rem;
|
|
|
|
@ -133,6 +135,7 @@ main {
|
|
|
|
|
font-size: 0.7rem;
|
|
|
|
|
margin-left: 0.3rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.module-filter+.module-filter {
|
|
|
|
|
margin-left: 0.5rem;
|
|
|
|
|
}
|
|
|
|
@ -142,6 +145,7 @@ main {
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<main></main>
|
|
|
|
|
<script>
|
|
|
|
@ -684,11 +688,15 @@ var drawChart = (function (exports) {
|
|
|
|
|
setExcludeValue(value);
|
|
|
|
|
onExcludeChange(value);
|
|
|
|
|
};
|
|
|
|
|
return (u$1("aside", { className: "sidebar", children: [u$1("div", { className: "size-selectors", children: availableSizeProperties.length > 1 &&
|
|
|
|
|
return (u$1("aside", {
|
|
|
|
|
className: "sidebar", children: [u$1("div", {
|
|
|
|
|
className: "size-selectors", children: availableSizeProperties.length > 1 &&
|
|
|
|
|
availableSizeProperties.map((sizeProp) => {
|
|
|
|
|
const id = `selector-${sizeProp}`;
|
|
|
|
|
return (u$1("div", { className: "size-selector", children: [u$1("input", { type: "radio", id: id, checked: sizeProp === sizeProperty, onChange: handleSizePropertyChange(sizeProp) }), u$1("label", { htmlFor: id, children: LABELS[sizeProp] })] }, sizeProp));
|
|
|
|
|
}) }), u$1("div", { className: "module-filters", children: [u$1("div", { className: "module-filter", children: [u$1("label", { htmlFor: "module-filter-exclude", children: "Exclude" }), u$1("input", { type: "text", id: "module-filter-exclude", value: excludeValue, onInput: handleExcludeChange, placeholder: PLACEHOLDER })] }), u$1("div", { className: "module-filter", children: [u$1("label", { htmlFor: "module-filter-include", children: "Include" }), u$1("input", { type: "text", id: "module-filter-include", value: includeValue, onInput: handleIncludeChange, placeholder: PLACEHOLDER })] })] })] }));
|
|
|
|
|
})
|
|
|
|
|
}), u$1("div", { className: "module-filters", children: [u$1("div", { className: "module-filter", children: [u$1("label", { htmlFor: "module-filter-exclude", children: "Exclude" }), u$1("input", { type: "text", id: "module-filter-exclude", value: excludeValue, onInput: handleExcludeChange, placeholder: PLACEHOLDER })] }), u$1("div", { className: "module-filter", children: [u$1("label", { htmlFor: "module-filter-include", children: "Include" }), u$1("input", { type: "text", id: "module-filter-include", value: includeValue, onInput: handleIncludeChange, placeholder: PLACEHOLDER })] })] })]
|
|
|
|
|
}));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function getDefaultExportFromCjs(x) {
|
|
|
|
@ -3095,18 +3103,22 @@ var drawChart = (function (exports) {
|
|
|
|
|
if (width == 0 || height == 0) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
return (u$1("g", { className: "node", transform: `translate(${x0},${y0})`, onClick: (event) => {
|
|
|
|
|
return (u$1("g", {
|
|
|
|
|
className: "node", transform: `translate(${x0},${y0})`, onClick: (event) => {
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
onClick(node);
|
|
|
|
|
}, onMouseOver: (event) => {
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
onMouseOver(node);
|
|
|
|
|
}, children: [u$1("rect", { fill: backgroundColor, rx: 2, ry: 2, width: x1 - x0, height: y1 - y0, stroke: selected ? "#fff" : undefined, "stroke-width": selected ? 2 : undefined }), u$1("text", Object.assign({ ref: textRef, fill: fontColor, onClick: (event) => {
|
|
|
|
|
}, children: [u$1("rect", { fill: backgroundColor, rx: 2, ry: 2, width: x1 - x0, height: y1 - y0, stroke: selected ? "#fff" : undefined, "stroke-width": selected ? 2 : undefined }), u$1("text", Object.assign({
|
|
|
|
|
ref: textRef, fill: fontColor, onClick: (event) => {
|
|
|
|
|
var _a;
|
|
|
|
|
if (((_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString()) !== "") {
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
}
|
|
|
|
|
} }, textProps, { children: data.name }))] }));
|
|
|
|
|
}
|
|
|
|
|
}, textProps, { children: data.name }))]
|
|
|
|
|
}));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const TreeMap = ({ root, onNodeHover, selectedNode, onNodeClick, }) => {
|
|
|
|
@ -3123,11 +3135,15 @@ var drawChart = (function (exports) {
|
|
|
|
|
return nestedData;
|
|
|
|
|
}, [root]);
|
|
|
|
|
console.timeEnd("layering");
|
|
|
|
|
return (u$1("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${width} ${height}`, children: nestedData.map(({ key, values }) => {
|
|
|
|
|
return (u$1("g", { className: "layer", children: values.map((node) => {
|
|
|
|
|
return (u$1("svg", {
|
|
|
|
|
xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${width} ${height}`, children: nestedData.map(({ key, values }) => {
|
|
|
|
|
return (u$1("g", {
|
|
|
|
|
className: "layer", children: values.map((node) => {
|
|
|
|
|
return (u$1(Node, { node: node, onMouseOver: onNodeHover, selected: selectedNode === node, onClick: onNodeClick }, getModuleIds(node.data).nodeUid.id));
|
|
|
|
|
}) }, key));
|
|
|
|
|
}) }));
|
|
|
|
|
})
|
|
|
|
|
}, key));
|
|
|
|
|
})
|
|
|
|
|
}));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var bytes$1 = { exports: {} };
|
|
|
|
@ -3327,17 +3343,21 @@ var drawChart = (function (exports) {
|
|
|
|
|
const mainUid = data.nodeParts[node.data.uid].metaUid;
|
|
|
|
|
dataNode = data.nodeMetas[mainUid];
|
|
|
|
|
}
|
|
|
|
|
return (u$1(g$1, { children: [u$1("div", { children: path }), availableSizeProperties.map((sizeProp) => {
|
|
|
|
|
return (u$1(g$1, {
|
|
|
|
|
children: [u$1("div", { children: path }), availableSizeProperties.map((sizeProp) => {
|
|
|
|
|
if (sizeProp === sizeProperty) {
|
|
|
|
|
return (u$1("div", { children: [u$1("b", { children: [LABELS[sizeProp], ": ", format_1(mainSize)] }), " ", "(", percentageString, ")"] }, sizeProp));
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
return (u$1("div", { children: [LABELS[sizeProp], ": ", format_1(getModuleSize(node.data, sizeProp))] }, sizeProp));
|
|
|
|
|
}
|
|
|
|
|
}), u$1("br", {}), dataNode && dataNode.importedBy.length > 0 && (u$1("div", { children: [u$1("div", { children: [u$1("b", { children: "Imported By" }), ":"] }), dataNode.importedBy.map(({ uid }) => {
|
|
|
|
|
}), u$1("br", {}), dataNode && dataNode.importedBy.length > 0 && (u$1("div", {
|
|
|
|
|
children: [u$1("div", { children: [u$1("b", { children: "Imported By" }), ":"] }), dataNode.importedBy.map(({ uid }) => {
|
|
|
|
|
const id = data.nodeMetas[uid].id;
|
|
|
|
|
return u$1("div", { children: id }, id);
|
|
|
|
|
})] })), u$1("br", {}), u$1("small", { children: data.options.sourcemap ? SOURCEMAP_RENDERED : RENDRED }), (data.options.gzip || data.options.brotli) && (u$1(g$1, { children: [u$1("br", {}), u$1("small", { children: COMPRESSED })] }))] }));
|
|
|
|
|
})]
|
|
|
|
|
})), u$1("br", {}), u$1("small", { children: data.options.sourcemap ? SOURCEMAP_RENDERED : RENDRED }), (data.options.gzip || data.options.brotli) && (u$1(g$1, { children: [u$1("br", {}), u$1("small", { children: COMPRESSED })] }))]
|
|
|
|
|
}));
|
|
|
|
|
}, [availableSizeProperties, data, getModuleSize, node, root.data, sizeProperty]);
|
|
|
|
|
const updatePosition = (mouseCoords) => {
|
|
|
|
|
if (!ref.current)
|
|
|
|
@ -3384,12 +3404,16 @@ var drawChart = (function (exports) {
|
|
|
|
|
document.removeEventListener("mouseover", handleMouseOut);
|
|
|
|
|
};
|
|
|
|
|
}, []);
|
|
|
|
|
return (u$1(g$1, { children: [u$1(TreeMap, { root: root, onNodeHover: (node) => {
|
|
|
|
|
return (u$1(g$1, {
|
|
|
|
|
children: [u$1(TreeMap, {
|
|
|
|
|
root: root, onNodeHover: (node) => {
|
|
|
|
|
setTooltipNode(node);
|
|
|
|
|
setShowTooltip(true);
|
|
|
|
|
}, selectedNode: selectedNode, onNodeClick: (node) => {
|
|
|
|
|
setSelectedNode(selectedNode === node ? undefined : node);
|
|
|
|
|
} }), u$1(Tooltip, { visible: showTooltip, node: tooltipNode, root: root, sizeProperty: sizeProperty })] }));
|
|
|
|
|
}
|
|
|
|
|
}), u$1(Tooltip, { visible: showTooltip, node: tooltipNode, root: root, sizeProperty: sizeProperty })]
|
|
|
|
|
}));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const Main = () => {
|
|
|
|
@ -4796,7 +4820,8 @@ var drawChart = (function (exports) {
|
|
|
|
|
console.time("color");
|
|
|
|
|
const getModuleColor = createRainbowColor(rawHierarchy);
|
|
|
|
|
console.timeEnd("color");
|
|
|
|
|
q$1(u$1(StaticContext.Provider, { value: {
|
|
|
|
|
q$1(u$1(StaticContext.Provider, {
|
|
|
|
|
value: {
|
|
|
|
|
data,
|
|
|
|
|
availableSizeProperties,
|
|
|
|
|
width,
|
|
|
|
@ -4806,7 +4831,8 @@ var drawChart = (function (exports) {
|
|
|
|
|
getModuleColor,
|
|
|
|
|
rawHierarchy,
|
|
|
|
|
layout,
|
|
|
|
|
}, children: u$1(Main, {}) }), parentNode);
|
|
|
|
|
}, children: u$1(Main, {})
|
|
|
|
|
}), parentNode);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
exports.StaticContext = StaticContext;
|
|
|
|
@ -4838,5 +4864,5 @@ var drawChart = (function (exports) {
|
|
|
|
|
/*-->*/
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
</html>
|