startTime & endTime for perf vis

whathappenedman · Jun 11, 2021 · 9c21cd8 · 9c21cd8
1 parent 79f0fef
commit 9c21cd8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/docs/assets/index.feb49b7d.js b/docs/assets/index.feb49b7d.js
diff --git a/docs/index.html b/docs/index.html
@@ -11,7 +11,7 @@
                break-inside: avoid;
       }
     </style>
-  <script type="module" crossorigin src="assets/index.e17f1f40.js"></script>
+  <script type="module" crossorigin src="assets/index.feb49b7d.js"></script>
   <link rel="modulepreload" href="assets/vendor.0d07671f.js">
   <link rel="stylesheet" href="assets/index.f44316bf.css">
 </head>

diff --git a/tester/src/testers/ResourceTiming.jsx b/tester/src/testers/ResourceTiming.jsx
@@ -16,6 +16,7 @@ const TIMING_COLOR = {
 const TimelineVisualisation = ({ data }) => {
     const timelineWrapper = React.useRef(undefined);
     const [svgDimensions, setSvgDimensions] = React.useState(undefined);
+    const [timings, setTimings] = React.useState({undefined});
 
     React.useEffect(() => {
         if (!timelineWrapper.current) return;
@@ -30,6 +31,11 @@ const TimelineVisualisation = ({ data }) => {
         const maxW = Math.max(...data.map((d) => d.startTime + d.duration));
         const W = maxW - minW;
 
+        setTimings({
+            startTime: minW,
+            endTime: maxW,
+        });
+
         return data.map((e) => {
             return {
                 x: ((e.startTime - minW)/W) * width,
@@ -42,6 +48,7 @@ const TimelineVisualisation = ({ data }) => {
 
     return (
         <div ref={timelineWrapper} style={{ marginTop: '8px' }}>
+            <Text mb={2}>Start time <Code>{timings.startTime}</Code>, end time <Code>{timings.endTime}</Code></Text>
             {svgDimensions && normalizedData && (
                 <svg {...svgDimensions}>
                     <Group>