Merge pull request #36 from MLH-Fellowship/migration-to-v2-data

Migration to V2 data

Author: kartikcho

src/App.js

@@ -1,6 +1,10 @@
 // @flow
 
-import type {FlamechartData, ReactProfilerData} from './types';
+import type {
+  FlamechartData,
+  ReactProfilerData,
+  ReactProfilerDataV2,
+} from './types';
 
 import React, {useState, useCallback} from 'react';
 import {unstable_batchedUpdates} from 'react-dom';
@@ -14,6 +18,10 @@ export default function App() {
   const [profilerData, setProfilerData] = useState<ReactProfilerData | null>(
     null,
   );
+  const [
+    profilerDataV2,
+    setProfilerDataV2,
+  ] = useState<ReactProfilerDataV2 | null>(null);
   const [flamechart, setFlamechart] = useState<FlamechartData | null>(null);
   const [schedulerCanvasHeight, setSchedulerCanvasHeight] = useState<number>(0);
 
@@ -34,15 +42,34 @@ export default function App() {
     },
   );
 
-  if (profilerData && flamechart) {
+  // TODO: Migrate and completely remove V2 stuff
+  const handleDataImportedV2 = useCallback(
+    (
+      importedProfilerData: ReactProfilerDataV2,
+      importedFlamechart: FlamechartData,
+    ) => {
+      unstable_batchedUpdates(() => {
+        setProfilerDataV2(importedProfilerData);
+        setFlamechart(importedFlamechart);
+      });
+    },
+  );
+
+  if (profilerData && profilerDataV2 && flamechart) {
     return (
       <CanvasPage
         profilerData={profilerData}
+        profilerDataV2={profilerDataV2}
         flamechart={flamechart}
         schedulerCanvasHeight={schedulerCanvasHeight}
       />
     );
   } else {
-    return <ImportPage onDataImported={handleDataImported} />;
+    return (
+      <ImportPage
+        onDataImported={handleDataImported}
+        onDataImportedV2={handleDataImportedV2}
+      />
+    );
   }
 }

src/CanvasPage.js

@@ -30,6 +30,7 @@ import type {
   ReactHoverContextInfo,
   ReactMeasure,
   ReactProfilerData,
+  ReactProfilerDataV2,
 } from './types';
 
 type ContextMenuContextData = {|
@@ -41,11 +42,17 @@ type ContextMenuContextData = {|
 
 type Props = {|
   profilerData: ReactProfilerData,
+  profilerDataV2: ReactProfilerDataV2,
   flamechart: FlamechartData,
   schedulerCanvasHeight: number,
 |};
 
-function CanvasPage({profilerData, flamechart, schedulerCanvasHeight}: Props) {
+function CanvasPage({
+  profilerData,
+  profilerDataV2,
+  flamechart,
+  schedulerCanvasHeight,
+}: Props) {
   return (
     <div
       className={styles.CanvasPage}
@@ -54,6 +61,7 @@ function CanvasPage({profilerData, flamechart, schedulerCanvasHeight}: Props) {
         {({height, width}: {height: number, width: number}) => (
           <AutoSizedCanvas
             data={profilerData}
+            dataV2={profilerDataV2}
             flamechart={flamechart}
             height={height}
             schedulerCanvasHeight={schedulerCanvasHeight}
@@ -96,6 +104,7 @@ const zoomToBatch = (
 
 type AutoSizedCanvasProps = {|
   data: ReactProfilerData,
+  dataV2: ReactProfilerDataV2,
   flamechart: FlamechartData,
   height: number,
   schedulerCanvasHeight: number,
@@ -104,6 +113,7 @@ type AutoSizedCanvasProps = {|
 
 function AutoSizedCanvas({
   data,
+  dataV2,
   flamechart,
   height,
   schedulerCanvasHeight,
@@ -117,7 +127,7 @@ function AutoSizedCanvas({
     canvasWidth: width,
     fixedColumnWidth: LABEL_FIXED_WIDTH,
     fixedHeaderHeight: HEADER_HEIGHT_FIXED,
-    unscaledContentWidth: data.duration,
+    unscaledContentWidth: dataV2.duration,
     unscaledContentHeight:
       schedulerCanvasHeight +
       flamechart.layers.length * FLAMECHART_FRAME_HEIGHT,

src/ImportPage.js

@@ -1,24 +1,34 @@
 // @flow
 
 import type {TimelineEvent} from './speedscope/import/chrome';
-import type {FlamechartData, ReactProfilerData} from './types';
+import type {
+  FlamechartData,
+  ReactProfilerData,
+  ReactProfilerDataV2,
+} from './types';
 
 import React, {useEffect} from 'react';
 
 import preprocessData from './util/preprocessData';
+import preprocessDataV2 from './util/preprocessDataV2';
 import preprocessFlamechart from './util/preprocessFlamechart';
 
 // TODO: Add import button but keep a static path until canvas layout is ready
 import JSON_PATH from 'url:../static/small-devtools.json';
+import JSON_PATHV2 from 'url:../static/Profile-20200625T133129.json';
 
 type Props = {|
   onDataImported: (
     profilerData: ReactProfilerData,
     flamechart: FlamechartData,
   ) => void,
+  onDataImportedV2: (
+    profilerData: ReactProfilerDataV2,
+    flamechart: FlamechartData,
+  ) => void,
 |};
 
-export default function ImportPage({onDataImported}: Props) {
+export default function ImportPage({onDataImported, onDataImportedV2}: Props) {
   useEffect(() => {
     fetch(JSON_PATH)
       .then(res => res.json())
@@ -36,6 +46,23 @@ export default function ImportPage({onDataImported}: Props) {
       });
   }, []);
 
+  useEffect(() => {
+    fetch(JSON_PATHV2)
+      .then(res => res.json())
+      .then((events: TimelineEvent[]) => {
+        // Filter null entries and sort by timestamp.
+        // I would not expect to have to do either of this,
+        // but some of the data being passed in requires it.
+        events = events.filter(Boolean).sort((a, b) => (a.ts > b.ts ? 1 : -1));
+
+        if (events.length > 0) {
+          const processedData = preprocessDataV2(events);
+          const processedFlamechart = preprocessFlamechart(events);
+          onDataImportedV2(processedData, processedFlamechart);
+        }
+      });
+  }, []);
+
   return (
     <div>
       LOADING. TODO: Turn this into an import page. This page currently just