Skip to content

Commit df2bf73

Browse files
silasjmatsonsilasjmatson
authored
Updates to benchmarking (#50)
* wip: wire up benchmark report display (performance tab) * update reactotron-core-ui/reactotron-core-contract, initial benchmark impl * fix prettier lint issue * weird lint issues * Fixes per review * Update benchmark display * Updates display to have parity with existing reactotron * Update timeline benchmark to display in ms rather than seconds * Remove inline styles
1 parent cdb6c7f commit df2bf73

File tree

4 files changed

+66
-43
lines changed

4 files changed

+66
-43
lines changed

‎app/components/DetailPanel.tsx‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -217,16 +217,26 @@ function DisplayDetailContent({
217217
function BenchmarkDetailContent({ item }: { item: TimelineItemBenchmark }) {
218218
const { payload } = item
219219

220+
const totalDuration = payload.steps[payload.steps.length - 1].time
221+
220222
return (
221223
<View style={$detailContent()}>
222-
{payload.steps.map((step, index) => {
223-
return (
224-
<DetailSection key={`${step.title}-${index}`} title={`Step: ${step.title}`}>
225-
<Text style={$valueText()}>Time: {step.time}</Text>
226-
<Text style={$valueText()}>Delta: {step.delta}</Text>
227-
</DetailSection>
228-
)
229-
})}
224+
<DetailSection title="Benchmark Data">
225+
{payload.steps.map((step, index) => {
226+
if (index === 0) return
227+
const startPercent = Number((((step.time - step.delta) / totalDuration) * 100).toFixed(0))
228+
const endPercent = 100 - Number(((step.time / totalDuration) * 100).toFixed(0))
229+
return (
230+
<View key={index} style={$benchmarkRow()}>
231+
<View
232+
style={[$benchmarkRowStep(), { left: `${startPercent}%`, right: `${endPercent}%` }]}
233+
></View>
234+
<Text style={$valueText()}>{step.title}</Text>
235+
<Text style={$valueText()}>{step.delta.toFixed(3)}ms</Text>
236+
</View>
237+
)
238+
})}
239+
</DetailSection>
230240
<DetailSection title="Payload">
231241
<TreeViewWithProvider data={payload} />
232242
</DetailSection>
@@ -485,6 +495,20 @@ const $sectionHeader = themed<ViewStyle>(({ colors, spacing }) => ({
485495
borderBottomColor: colors.border,
486496
}))
487497

498+
const $benchmarkRow = themed<ViewStyle>(() => ({
499+
display: "flex",
500+
alignItems: "center",
501+
flexDirection: "row",
502+
justifyContent: "space-between",
503+
}))
504+
505+
const $benchmarkRowStep = themed<ViewStyle>(({ colors }) => ({
506+
position: "absolute",
507+
top: 0,
508+
bottom: 0,
509+
backgroundColor: colors.border,
510+
}))
511+
488512
const $sectionTitle = themed<TextStyle>(({ colors, typography }) => ({
489513
color: colors.mainText,
490514
fontSize: typography.body,

‎app/components/TimelineBenchmarkItem.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { CommandType, TimelineItemBenchmark } from "../types"
22
import { TimelineItem } from "./TimelineItem"
3-
43
type TimelineBenchmarkItemProps = {
54
item: TimelineItemBenchmark
65
isSelected?: boolean
@@ -19,14 +18,14 @@ export function TimelineBenchmmarkItem({
1918

2019
if (item.type !== CommandType.Benchmark) return null
2120

22-
const { title } = payload
21+
const totalDuration = payload.steps[payload.steps.length - 1].time
2322

2423
return (
2524
<TimelineItem
26-
title={"Benchmark"}
25+
title={"BENCHMARK"}
2726
date={new Date(date)}
2827
deltaTime={deltaTime}
29-
preview={title}
28+
preview={`${payload.title} in ${totalDuration.toFixed(3)}ms`}
3029
isImportant={important}
3130
isTagged={important}
3231
isSelected={isSelected}

‎macos/Podfile.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1779,7 +1779,7 @@ SPEC CHECKSUMS:
17791779
glog: b7594b792ee4e02ed1f44b01d046ca25fa713e3d
17801780
hermes-engine: b5c9cfbe6415f1b0b24759f2942c8f33e9af6347
17811781
IRNativeModules: 2fa316ab0ca91ec3e7bd4ba7ab2fc1f642fb5542
1782-
RCT-Folly: e8b53d8c0d2d9df4a6a8b0a368a1a91fc62a88cb
1782+
RCT-Folly: abec2d7f4af402b4957c44e86ceff8725b23c1b4
17831783
RCTDeprecation: 9da6c2d8a3b1802142718283260fb06d702ddb07
17841784
RCTRequired: 574f9d55bda1d50676530b6c36bab4605612dfb6
17851785
RCTTypeSafety: 7de929c405e619c023116e7747118a2c5d5b2320

‎macos/Reactotron.xcodeproj/project.pbxproj‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,16 @@
1414
514201522437B4B40078DB4F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 514201512437B4B40078DB4F /* Assets.xcassets */; };
1515
514201552437B4B40078DB4F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 514201532437B4B40078DB4F /* Main.storyboard */; };
1616
514201582437B4B40078DB4F /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 514201572437B4B40078DB4F /* main.m */; };
17+
781C0A510276619A3FA0F1B5 /* libPods-Reactotron-macOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = AF5D9503835923B7F2C9630F /* libPods-Reactotron-macOS.a */; };
1718
831983FBC55C0EF9C65DB4A6 /* ProcessUtils.c in Sources */ = {isa = PBXBuildFile; fileRef = 4F3799E74F7D2A242D38CF99 /* ProcessUtils.c */; };
18-
8DA502C4E6FBC60945564C52 /* libPods-Reactotron-macOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = FCCC025C3DB5ACD98A129902 /* libPods-Reactotron-macOS.a */; };
1919
E94E8A1F2DA73754008B52A6 /* SpaceGrotesk.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E94E8A1E2DA73754008B52A6 /* SpaceGrotesk.ttf */; };
2020
EBA23295D3FDE3328174ADF1 /* BuildFile in Headers */ = {isa = PBXBuildFile; };
2121
FF4C4719434907CDFF48ECE7 /* ProcessUtils.h in Headers */ = {isa = PBXBuildFile; fileRef = 8B174B7FD8393A730D51E178 /* ProcessUtils.h */; };
2222
/* End PBXBuildFile section */
2323

2424
/* Begin PBXFileReference section */
25-
2F26869F38EFC5D60D27F0F7 /* Pods-Reactotron-macOS.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Reactotron-macOS.debug.xcconfig"; path = "Target Support Files/Pods-Reactotron-macOS/Pods-Reactotron-macOS.debug.xcconfig"; sourceTree = "<group>"; };
25+
2AC32FEAB6C823D7FAA18BFE /* Pods-Reactotron-macOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Reactotron-macOS.release.xcconfig"; path = "Target Support Files/Pods-Reactotron-macOS/Pods-Reactotron-macOS.release.xcconfig"; sourceTree = "<group>"; };
26+
417D988DC189149043CB9C6B /* Pods-Reactotron-macOS.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Reactotron-macOS.debug.xcconfig"; path = "Target Support Files/Pods-Reactotron-macOS/Pods-Reactotron-macOS.debug.xcconfig"; sourceTree = "<group>"; };
2627
4F3799E74F7D2A242D38CF99 /* ProcessUtils.c */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.c.c; name = ProcessUtils.c; path = ../../app/native/ProcessUtils/ProcessUtils.c; sourceTree = "<group>"; };
2728
5030E1330EE236E4CA991AFD /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xml; path = PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
2829
514201492437B4B30078DB4F /* Reactotron.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Reactotron.app; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -33,19 +34,18 @@
3334
514201562437B4B40078DB4F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
3435
514201572437B4B40078DB4F /* main.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
3536
514201592437B4B40078DB4F /* Reactotron.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = Reactotron.entitlements; sourceTree = "<group>"; };
36-
7B00874949429248D0F4E635 /* Pods-Reactotron-macOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Reactotron-macOS.release.xcconfig"; path = "Target Support Files/Pods-Reactotron-macOS/Pods-Reactotron-macOS.release.xcconfig"; sourceTree = "<group>"; };
3737
8B174B7FD8393A730D51E178 /* ProcessUtils.h */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.c.h; name = ProcessUtils.h; path = ../../app/native/ProcessUtils/ProcessUtils.h; sourceTree = "<group>"; };
38+
AF5D9503835923B7F2C9630F /* libPods-Reactotron-macOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Reactotron-macOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
3839
E94E8A1E2DA73754008B52A6 /* SpaceGrotesk.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = SpaceGrotesk.ttf; path = ../assets/fonts/SpaceGrotesk.ttf; sourceTree = SOURCE_ROOT; };
3940
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
40-
FCCC025C3DB5ACD98A129902 /* libPods-Reactotron-macOS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-Reactotron-macOS.a"; sourceTree = BUILT_PRODUCTS_DIR; };
4141
/* End PBXFileReference section */
4242

4343
/* Begin PBXFrameworksBuildPhase section */
4444
514201462437B4B30078DB4F /* Frameworks */ = {
4545
isa = PBXFrameworksBuildPhase;
4646
buildActionMask = 2147483647;
4747
files = (
48-
8DA502C4E6FBC60945564C52 /* libPods-Reactotron-macOS.a in Frameworks */,
48+
781C0A510276619A3FA0F1B5 /* libPods-Reactotron-macOS.a in Frameworks */,
4949
);
5050
runOnlyForDeploymentPostprocessing = 0;
5151
};
@@ -55,8 +55,8 @@
5555
01D19913288DA74FEB538384 /* Pods */ = {
5656
isa = PBXGroup;
5757
children = (
58-
2F26869F38EFC5D60D27F0F7 /* Pods-Reactotron-macOS.debug.xcconfig */,
59-
7B00874949429248D0F4E635 /* Pods-Reactotron-macOS.release.xcconfig */,
58+
417D988DC189149043CB9C6B /* Pods-Reactotron-macOS.debug.xcconfig */,
59+
2AC32FEAB6C823D7FAA18BFE /* Pods-Reactotron-macOS.release.xcconfig */,
6060
);
6161
path = Pods;
6262
sourceTree = "<group>";
@@ -65,7 +65,7 @@
6565
isa = PBXGroup;
6666
children = (
6767
ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
68-
FCCC025C3DB5ACD98A129902 /* libPods-Reactotron-macOS.a */,
68+
AF5D9503835923B7F2C9630F /* libPods-Reactotron-macOS.a */,
6969
);
7070
name = Frameworks;
7171
sourceTree = "<group>";
@@ -144,14 +144,14 @@
144144
isa = PBXNativeTarget;
145145
buildConfigurationList = 5142015A2437B4B40078DB4F /* Build configuration list for PBXNativeTarget "Reactotron-macOS" */;
146146
buildPhases = (
147-
3A039F048D4DCF2C74F80FAA /* [CP] Check Pods Manifest.lock */,
147+
D379D3EECB71C1F9751C49E8 /* [CP] Check Pods Manifest.lock */,
148148
514201452437B4B30078DB4F /* Sources */,
149149
514201462437B4B30078DB4F /* Frameworks */,
150150
514201472437B4B30078DB4F /* Resources */,
151151
381D8A6E24576A4E00465D17 /* Bundle React Native code and images */,
152152
614A44CF57166CA8B6AD60B6 /* Headers */,
153-
FE7BDCDD9BB38448236E0136 /* [CP] Embed Pods Frameworks */,
154-
CC8C7D4D8457901D1C277BC9 /* [CP] Copy Pods Resources */,
153+
83FF77371CEFDD8B5ECB691C /* [CP] Embed Pods Frameworks */,
154+
A107699AF4EC552473C5FA0B /* [CP] Copy Pods Resources */,
155155
);
156156
buildRules = (
157157
);
@@ -228,29 +228,25 @@
228228
shellPath = /bin/sh;
229229
shellScript = "export NODE_BINARY=node\n../node_modules/react-native-macos/scripts/react-native-xcode.sh\n";
230230
};
231-
3A039F048D4DCF2C74F80FAA /* [CP] Check Pods Manifest.lock */ = {
231+
83FF77371CEFDD8B5ECB691C /* [CP] Embed Pods Frameworks */ = {
232232
isa = PBXShellScriptBuildPhase;
233233
buildActionMask = 2147483647;
234234
files = (
235235
);
236-
inputFileListPaths = (
237-
);
238236
inputPaths = (
239-
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
240-
"${PODS_ROOT}/Manifest.lock",
241-
);
242-
name = "[CP] Check Pods Manifest.lock";
243-
outputFileListPaths = (
237+
"${PODS_ROOT}/Target Support Files/Pods-Reactotron-macOS/Pods-Reactotron-macOS-frameworks.sh",
238+
"${PODS_ROOT}/hermes-engine/destroot/Library/Frameworks/macosx/hermes.framework",
244239
);
240+
name = "[CP] Embed Pods Frameworks";
245241
outputPaths = (
246-
"$(DERIVED_FILE_DIR)/Pods-Reactotron-macOS-checkManifestLockResult.txt",
242+
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
247243
);
248244
runOnlyForDeploymentPostprocessing = 0;
249245
shellPath = /bin/sh;
250-
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
246+
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Reactotron-macOS/Pods-Reactotron-macOS-frameworks.sh\"\n";
251247
showEnvVarsInLog = 0;
252248
};
253-
CC8C7D4D8457901D1C277BC9 /* [CP] Copy Pods Resources */ = {
249+
A107699AF4EC552473C5FA0B /* [CP] Copy Pods Resources */ = {
254250
isa = PBXShellScriptBuildPhase;
255251
buildActionMask = 2147483647;
256252
files = (
@@ -276,22 +272,26 @@
276272
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Reactotron-macOS/Pods-Reactotron-macOS-resources.sh\"\n";
277273
showEnvVarsInLog = 0;
278274
};
279-
FE7BDCDD9BB38448236E0136 /* [CP] Embed Pods Frameworks */ = {
275+
D379D3EECB71C1F9751C49E8 /* [CP] Check Pods Manifest.lock */ = {
280276
isa = PBXShellScriptBuildPhase;
281277
buildActionMask = 2147483647;
282278
files = (
283279
);
280+
inputFileListPaths = (
281+
);
284282
inputPaths = (
285-
"${PODS_ROOT}/Target Support Files/Pods-Reactotron-macOS/Pods-Reactotron-macOS-frameworks.sh",
286-
"${PODS_ROOT}/hermes-engine/destroot/Library/Frameworks/macosx/hermes.framework",
283+
"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
284+
"${PODS_ROOT}/Manifest.lock",
285+
);
286+
name = "[CP] Check Pods Manifest.lock";
287+
outputFileListPaths = (
287288
);
288-
name = "[CP] Embed Pods Frameworks";
289289
outputPaths = (
290-
"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
290+
"$(DERIVED_FILE_DIR)/Pods-Reactotron-macOS-checkManifestLockResult.txt",
291291
);
292292
runOnlyForDeploymentPostprocessing = 0;
293293
shellPath = /bin/sh;
294-
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Reactotron-macOS/Pods-Reactotron-macOS-frameworks.sh\"\n";
294+
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
295295
showEnvVarsInLog = 0;
296296
};
297297
/* End PBXShellScriptBuildPhase section */
@@ -325,7 +325,7 @@
325325
/* Begin XCBuildConfiguration section */
326326
5142015B2437B4B40078DB4F /* Debug */ = {
327327
isa = XCBuildConfiguration;
328-
baseConfigurationReference = 2F26869F38EFC5D60D27F0F7 /* Pods-Reactotron-macOS.debug.xcconfig */;
328+
baseConfigurationReference = 417D988DC189149043CB9C6B /* Pods-Reactotron-macOS.debug.xcconfig */;
329329
buildSettings = {
330330
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
331331
CLANG_ENABLE_MODULES = YES;
@@ -352,7 +352,7 @@
352352
};
353353
5142015C2437B4B40078DB4F /* Release */ = {
354354
isa = XCBuildConfiguration;
355-
baseConfigurationReference = 7B00874949429248D0F4E635 /* Pods-Reactotron-macOS.release.xcconfig */;
355+
baseConfigurationReference = 2AC32FEAB6C823D7FAA18BFE /* Pods-Reactotron-macOS.release.xcconfig */;
356356
buildSettings = {
357357
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
358358
CLANG_ENABLE_MODULES = YES;

0 commit comments

Comments
 (0)