For example:
<img width="1904" alt="Screen Shot 2021-11-05 at 11 59 05 AM" src="https://user-images.githubusercontent.com/29597/140540816-25d6d47b-7aea-4121-aeaa-565accc65b1f.png">

const schedulingEventsViewRef = useRef(null);
  const suspenseEventsViewRef = useRef(null);
  const componentMeasuresViewRef = useRef(null);
  const reactMeasuresViewRef = useRef(null);
  const flamechartViewRef = useRef(null);
  const networkMeasuresViewRef = useRef(null);
  const snapshotsViewRef = useRef(null);
  const thrownErrorsViewRef = useRef(null);
  const {hideMenu: hideContextMenu} = useContext(RegistryContext);
  useLayoutEffect(() => {
    const surface = surfaceRef.current;
    const defaultFrame = {origin: zeroPoint, size: {width, height}};
    
    viewState.onHorizontalScrollStateChange(scrollState => {
      hideContextMenu();
    });
    
    viewState.updateHorizontalScrollState(
      clampState({
        state: viewState.horizontalScrollState,
        minContentLength: data.duration * MIN_ZOOM_LEVEL,
        maxContentLength: data.duration * MAX_ZOOM_LEVEL,
        containerLength: defaultFrame.size.width,
      }),
    );
    function createViewHelper(
      view: View,
      label: string,
      shouldScrollVertically: boolean = false,
      shouldResizeVertically: boolean = false,