Restore TimeMachine in Flipper

Summary:
The goal is to restore the *TimeMachine* functionality in Flipper while the new UI Debugger is working in a revamped version. This version was previously removed in D42573698 (b31f8c8755).

This time machine functionality will only be available for *LithoView* that are backed by a *ComponentTree*.

Below you can find a high-level overview of the current schema:

{F884011465}

Reviewed By: LukeDefeo, adityasharat

Differential Revision: D43574130

fbshipit-source-id: fe9d661e5fcce9655e70be4785652e7048dade54

desktop/flipper-plugin/src/ui/data-inspector/DataDescription.tsx

@@ -15,6 +15,7 @@ import {SketchPicker, CompactPicker} from 'react-color';
 import React, {KeyboardEvent} from 'react';
 import {HighlightContext} from '../Highlight';
 import {parseColor} from '../../utils/parseColor';
+import {TimelineDataDescription} from './TimelineDataDescription';
 import {theme} from '../theme';
 import {EditOutlined} from '@ant-design/icons';
 // This import is OK since it is a type-only import
@@ -551,6 +552,25 @@ class DataDescriptionContainer extends PureComponent<{
     const highlighter = this.context;
 
     switch (type) {
+      case 'timeline': {
+        return (
+          <>
+            <TimelineDataDescription
+              canSetCurrent={editable}
+              timeline={JSON.parse(val)}
+              onClick={(id) => {
+                this.props.commit({
+                  value: id,
+                  keep: true,
+                  clear: false,
+                  set: true,
+                });
+              }}
+            />
+          </>
+        );
+      }
+
       case 'number':
         return <NumberValue>{+val}</NumberValue>;
 

desktop/flipper-plugin/src/ui/data-inspector/TimelineDataDescription.tsx

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Component, ReactNode} from 'react';
+import React from 'react';
+import {MarkerTimeline} from '../MarkerTimeline';
+import {Button} from 'antd';
+import {presetColors} from './DataDescription';
+import {DataInspector} from './DataInspector';
+
+type TimePoint = {
+  moment: number;
+  display: string;
+  color: string;
+  key: string;
+  properties: {[key: string]: string};
+};
+
+type Timeline = {
+  time: TimePoint[];
+  current: string;
+};
+
+type Props = {
+  canSetCurrent?: boolean;
+  timeline: Timeline;
+  onClick: (selected: string) => void;
+};
+
+type State = {
+  selected: string;
+};
+
+export class TimelineDataDescription extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {selected: props.timeline.current};
+  }
+
+  render(): ReactNode {
+    const moments = Object.values(this.props.timeline.time);
+    const firstMoment = moments[0].moment;
+    const points = moments.map((value) => ({
+      label: value.display,
+      time: value.moment - firstMoment,
+      color:
+        Object.entries(presetColors).find(([k, _]) => k === value.color)?.[1] ??
+        value.color,
+      key: value.key,
+    }));
+    return (
+      <>
+        {this.props.canSetCurrent && (
+          <div>
+            <Button
+              onClick={() => this.props.onClick(this.state.selected)}
+              disabled={this.state.selected === this.props.timeline.current}>
+              Set as current
+            </Button>
+          </div>
+        )}
+        <div>
+          <MarkerTimeline
+            points={points}
+            onClick={(ids) => this.setState({selected: ids[0]})}
+            maxGap={50}
+            selected={this.state.selected}
+          />
+        </div>
+        <div>
+          <DataInspector
+            data={
+              this.props.timeline.time.find(
+                (value) => value.key === this.state.selected,
+              )?.properties ?? {}
+            }
+          />
+        </div>
+      </>
+    );
+  }
+}