Separate v1 v2 data

Author: kartikcho

src/App.js

@@ -1,6 +1,10 @@
 // @flow
 
-import type {FlamechartData, ReactProfilerDataV2} from './types';
+import type {
+  FlamechartData,
+  ReactProfilerData,
+  ReactProfilerDataV2,
+} from './types';
 
 import React, {useState, useCallback} from 'react';
 import {unstable_batchedUpdates} from 'react-dom';
@@ -11,15 +15,19 @@ import ImportPage from './ImportPage';
 import CanvasPage from './CanvasPage';
 
 export default function App() {
-  const [profilerData, setProfilerData] = useState<ReactProfilerDataV2 | null>(
+  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);
 
   const handleDataImported = useCallback(
     (
-      importedProfilerData: ReactProfilerDataV2,
+      importedProfilerData: ReactProfilerData,
       importedFlamechart: FlamechartData,
     ) => {
       unstable_batchedUpdates(() => {
@@ -34,15 +42,39 @@ export default function App() {
     },
   );
 
-  if (profilerData && flamechart) {
+  // TODO: Migrate and completely remove V2 stuff
+  const handleDataImportedV2 = useCallback(
+    (
+      importedProfilerData: ReactProfilerDataV2,
+      importedFlamechart: FlamechartData,
+    ) => {
+      unstable_batchedUpdates(() => {
+        setSchedulerCanvasHeight(
+          REACT_PRIORITIES.reduce((height, priority) => {
+            return height + getPriorityHeight(importedProfilerData, priority);
+          }, 0),
+        );
+        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

@@ -35,19 +35,24 @@ import type {
 
 type ContextMenuContextData = {|
   data: ReactProfilerData,
-  dataV2: ReactProfilerDataV2,
   flamechart: FlamechartData,
   hoveredEvent: ReactHoverContextInfo | null,
   state: PanAndZoomState,
 |};
 
 type Props = {|
-  profilerData: ReactProfilerDataV2,
+  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}
@@ -56,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}
@@ -121,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,25 +1,34 @@
 // @flow
 
 import type {TimelineEvent} from './speedscope/import/chrome';
-import type {FlamechartData, ReactProfilerDataV2} from './types';
+import type {
+  FlamechartData,
+  ReactProfilerData,
+  ReactProfilerDataV2,
+} from './types';
 
 import React, {useEffect} from 'react';
 
 import preprocessData from './util/preprocessData';
-// import preprocessDataNew from './util/preprocessDataV2';
+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())
@@ -30,15 +39,30 @@ export default function ImportPage({onDataImported}: Props) {
         events = events.filter(Boolean).sort((a, b) => (a.ts > b.ts ? 1 : -1));
 
         if (events.length > 0) {
-          // TODO: Remove old preprocessData call
-          // const processedDataNew = preprocessDataNew(events);
           const processedData = preprocessData(events);
           const processedFlamechart = preprocessFlamechart(events);
           onDataImported(processedData, processedFlamechart);
         }
       });
   }, []);
 
+  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