@zendesk/react-measure-timing-hooks
Version:
react hooks for measuring time to interactive and time to render of components
147 lines • 6.65 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable import/no-extraneous-dependencies */
require("@zendeskgarden/css-bedrock");
const react_1 = __importStar(require("react"));
const react_theming_1 = require("@zendeskgarden/react-theming");
const DropTarget_1 = require("./components/DropTarget");
const FileUploadButton_1 = __importDefault(require("./components/FileUploadButton"));
const OperationVisualization_1 = __importDefault(require("./components/OperationVisualization"));
const constants_1 = require("./constants");
const mapOperationForVisualization_1 = require("./mapOperationForVisualization");
const STORAGE_KEY = {
FILE_CONTENT: 'visualizer-file-content',
DISPLAY_OPTIONS: 'visualizer-display-options',
};
function getStoredContent() {
try {
const stored = localStorage.getItem(STORAGE_KEY.FILE_CONTENT);
return stored ? JSON.parse(stored) : null;
}
catch (error) {
// eslint-disable-next-line no-console
console.error('Failed to parse stored content:', error);
return null;
}
}
const defaultDisplayOptions = {
[constants_1.RESOURCES_TEXT]: true,
[constants_1.MEASURES_TEXT]: true,
[constants_1.COLLAPSE_RENDER_SPANS_TEXT]: true,
[constants_1.COLLAPSE_ASSET_SPANS_TEXT]: true,
[constants_1.COLLAPSE_EMBER_RESOURCE_SPANS]: false,
[constants_1.COLLAPSE_IFRAME_SPANS]: false,
};
function getStoredDisplayOptions() {
try {
const stored = localStorage.getItem(STORAGE_KEY.DISPLAY_OPTIONS);
return stored
? {
...defaultDisplayOptions,
...JSON.parse(stored),
}
: defaultDisplayOptions;
}
catch (error) {
// eslint-disable-next-line no-console
console.error('Failed to parse stored display options:', error);
return defaultDisplayOptions;
}
}
const OperationVisualizer = ({ width, margin }) => {
const [displayOptions, setDisplayOptions] = (0, react_1.useState)(() => getStoredDisplayOptions());
const [fileContent, setFileContent] = (0, react_1.useState)(() => getStoredContent());
// Persist file content changes to localStorage
(0, react_1.useEffect)(() => {
if (fileContent) {
localStorage.setItem(STORAGE_KEY.FILE_CONTENT, JSON.stringify(fileContent));
}
}, [fileContent]);
// Persist display options changes to localStorage
(0, react_1.useEffect)(() => {
localStorage.setItem(STORAGE_KEY.DISPLAY_OPTIONS, JSON.stringify(displayOptions));
}, [displayOptions]);
const readFile = (file) => {
if (file && file.type === 'application/json') {
const reader = new FileReader();
reader.addEventListener('load', (e) => {
const result = e.target?.result;
if (result && typeof result === 'string') {
const content = JSON.parse(result);
// Parse the JSON file as a TraceRecording
setFileContent(content);
}
});
reader.readAsText(file);
}
};
const handleFileChange = (event) => {
const file = event.target.files?.[0];
readFile(file);
};
const handleDrop = (e) => {
if (e.dataTransfer.files.length > 0) {
readFile(e.dataTransfer.files[0]);
}
};
const mappedFileContent = (0, react_1.useMemo)(() => {
if (!fileContent)
return null;
return (0, mapOperationForVisualization_1.mapOperationForVisualization)(fileContent, {
collapseRenders: displayOptions[constants_1.COLLAPSE_RENDER_SPANS_TEXT],
collapseAssets: displayOptions[constants_1.COLLAPSE_ASSET_SPANS_TEXT],
collapseEmberResources: displayOptions[constants_1.COLLAPSE_EMBER_RESOURCE_SPANS],
collapseIframes: displayOptions[constants_1.COLLAPSE_IFRAME_SPANS],
displayResources: displayOptions[constants_1.RESOURCES_TEXT],
displayMeasures: displayOptions[constants_1.MEASURES_TEXT],
});
}, [fileContent, displayOptions]);
if (!fileContent) {
return (react_1.default.createElement(DropTarget_1.DropTarget, { onDrop: handleDrop },
react_1.default.createElement(FileUploadButton_1.default, { onChange: handleFileChange, name: "fileData", id: "fileData" })));
}
// If we failed validation or the mapping returned a null for some reason. Alternatively could wrap the whole thing in an ErrorBoundary?
if (!mappedFileContent)
return react_1.default.createElement("div", null, "Some error state");
return (react_1.default.createElement(react_theming_1.ThemeProvider, { theme: react_theming_1.DEFAULT_THEME },
react_1.default.createElement(DropTarget_1.DropTarget, { onDrop: handleDrop },
react_1.default.createElement(OperationVisualization_1.default, { width: width, margin: margin, operation: mappedFileContent, displayOptions: displayOptions, setDisplayOptions: setDisplayOptions }))));
};
exports.default = OperationVisualizer;
//# sourceMappingURL=index.js.map