flipper-plugin
Version:
Flipper Desktop plugin SDK and components
181 lines • 6.09 kB
JavaScript
;
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MarkerTimeline = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("react");
const styled_1 = __importDefault(require("@emotion/styled"));
const theme_1 = require("./theme");
const Layout_1 = require("./Layout");
const antd_1 = require("antd");
const Markers = styled_1.default.div((props) => ({
position: 'relative',
margin: 10,
height: props.totalTime,
'::before': {
content: '""',
width: 1,
borderLeft: `1px dotted ${theme_1.theme.disabledColor}`,
position: 'absolute',
top: 5,
bottom: 20,
left: 5,
},
}));
Markers.displayName = 'MarkerTimeline:Markers';
const Point = (0, styled_1.default)(Layout_1.Layout.Horizontal)((props) => ({
position: 'absolute',
top: props.positionY,
left: 0,
right: 10,
cursor: props.onClick ? 'pointer' : 'default',
borderRadius: 3,
alignItems: 'baseline',
lineHeight: '16px',
':hover': {
backgroundColor: theme_1.theme.backgroundWash,
'> span': {
whiteSpace: 'initial',
},
},
'::before': {
position: 'relative',
textAlign: 'center',
fontSize: 8,
fontWeight: 500,
content: props.number ? `'${props.number}'` : '""',
display: 'inline-block',
width: 9,
height: 9,
flexShrink: 0,
color: theme_1.theme.textColorSecondary,
lineHeight: '9px',
borderRadius: '999em',
border: theme_1.theme.dividerColor,
backgroundColor: props.threadColor,
marginRight: 6,
marginTop: 3,
zIndex: 3,
boxShadow: props.selected
? `0 0 0 4px ${theme_1.theme.selectionBackgroundColor}`
: undefined,
},
'::after': {
content: props.cut ? '""' : undefined,
position: 'absolute',
width: 11,
top: -20,
left: 0,
height: 2,
background: theme_1.theme.backgroundDefault,
borderTop: `1px solid ${theme_1.theme.dividerColor}`,
borderBottom: `1px solid ${theme_1.theme.dividerColor}`,
transform: `skewY(-10deg)`,
},
}));
Point.displayName = 'MakerTimeline:Point';
const Time = styled_1.default.span({
color: theme_1.theme.textColorSecondary,
fontWeight: 300,
marginRight: 4,
});
Time.displayName = 'MakerTimeline:Time';
const Name = (0, styled_1.default)(antd_1.Typography.Text)({
overflow: 'hidden',
opacity: 0.8,
textOverflow: 'ellipsis',
marginTop: -1,
marginLeft: theme_1.theme.space.tiny,
fontFamily: 'monospace',
});
Name.displayName = 'MakerTimeline:Name';
class MarkerTimeline extends react_2.Component {
constructor() {
super(...arguments);
this.state = {
timePoints: [],
};
}
static getDerivedStateFromProps(props) {
const sortedMarkers = Array.from(props.points
.reduce((acc, cv) => {
const list = acc.get(cv.time);
if (list) {
list.push(cv);
}
else {
acc.set(cv.time, [cv]);
}
return acc;
}, new Map())
.entries()).sort((a, b) => a[0] - b[0]);
const smallestGap = sortedMarkers.reduce((acc, cv, i, arr) => {
if (i > 0) {
return Math.min(acc, cv[0] - arr[i - 1][0]);
}
else {
return acc;
}
}, Infinity);
let positionY = 0;
const timePoints = [];
for (let i = 0; i < sortedMarkers.length; i++) {
const [timestamp, points] = sortedMarkers[i];
let isCut = false;
const color = sortedMarkers[i][1][0].color || theme_1.theme.backgroundDefault;
if (i > 0) {
const relativeTimestamp = timestamp - sortedMarkers[i - 1][0];
const gap = (relativeTimestamp / smallestGap) * props.lineHeight;
if (gap > props.maxGap) {
positionY += props.maxGap;
isCut = true;
}
else {
positionY += gap;
}
}
timePoints.push({
timestamp,
markerNames: points.map((p) => p.label),
markerKeys: points.map((p) => p.key),
positionY,
isCut,
color,
});
}
return { timePoints };
}
render() {
const { timePoints } = this.state;
const { onClick } = this.props;
if (!this.props.points || this.props.points.length === 0) {
return null;
}
return (react_1.default.createElement(Markers, { totalTime: timePoints[timePoints.length - 1].positionY + this.props.lineHeight }, timePoints.map((p, i) => {
return (react_1.default.createElement(Point, { key: i, threadColor: p.color, cut: p.isCut, positionY: p.positionY, onClick: onClick ? () => onClick(p.markerKeys) : undefined, selected: this.props.selected
? p.markerKeys.includes(this.props.selected)
: false, number: p.markerNames.length > 1 ? p.markerNames.length : undefined },
react_1.default.createElement(Time, null,
p.timestamp.toFixed(0),
"ms"),
' ',
react_1.default.createElement(Name, null, p.markerNames.join(', '))));
})));
}
}
exports.MarkerTimeline = MarkerTimeline;
MarkerTimeline.defaultProps = {
lineHeight: 22,
maxGap: 100,
};
//# sourceMappingURL=MarkerTimeline.js.map