Simple antd types for each inspectable type

Summary: Replace draft inspectors with read-only components. This is a first step into having a richer UI. At the moment, these are read-only components but will likely be extended in the future as to allow editing of values. Reviewed By: LukeDefeo Differential Revision: D40345016 fbshipit-source-id: a6aef5861474b4aa8353c00ef257ab17b4cff00e
2022-10-25 03:09:00 -07:00
parent 9721993576
commit bb3b1cecef
21 changed files with 1106 additions and 149 deletions
--- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ActivityDescriptor.kt
+++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ActivityDescriptor.kt
@@ -9,7 +9,6 @@ package com.facebook.flipper.plugins.uidebugger.descriptors

 import android.app.Activity
 import com.facebook.flipper.plugins.uidebugger.core.FragmentTracker
-import com.facebook.flipper.plugins.uidebugger.model.InspectableObject

 object ActivityDescriptor : ChainedDescriptor<Activity>() {

@@ -27,9 +26,4 @@ object ActivityDescriptor : ChainedDescriptor<Activity>() {

    return children
  }
-
-  override fun onGetData(
-      node: Activity,
-      attributeSections: MutableMap<String, InspectableObject>
-  ) {}
 }
--- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/DrawableDescriptor.kt
+++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/DrawableDescriptor.kt
@@ -26,7 +26,7 @@ object DrawableDescriptor : ChainedDescriptor<Drawable>() {
      props["alpha"] = InspectableValue.Number(node.alpha, true)

      val bounds = node.bounds
-      props["bounds"] = InspectableValue.SpaceBox(SpaceBox.fromRect(bounds))
+      props["bounds"] = InspectableValue.Bounds(Bounds.fromRect(bounds))

      attributeSections["Drawable"] = InspectableObject(props.toMap())
    }
--- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/FragmentFrameworkDescriptor.kt
+++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/FragmentFrameworkDescriptor.kt
@@ -7,7 +7,6 @@

 package com.facebook.flipper.plugins.uidebugger.descriptors

-import android.os.Build
 import android.os.Bundle
 import com.facebook.flipper.plugins.uidebugger.model.Inspectable
 import com.facebook.flipper.plugins.uidebugger.model.InspectableObject
@@ -26,7 +25,6 @@ object FragmentFrameworkDescriptor : ChainedDescriptor<android.app.Fragment>() {
      node: android.app.Fragment,
      attributeSections: MutableMap<String, InspectableObject>
  ) {
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
    val args: Bundle = node.arguments

    val props = mutableMapOf<String, Inspectable>()
@@ -41,4 +39,3 @@ object FragmentFrameworkDescriptor : ChainedDescriptor<android.app.Fragment>() {
    attributeSections["Fragment"] = InspectableObject(props.toMap())
  }
 }
-}
--- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ViewDescriptor.kt
+++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/descriptors/ViewDescriptor.kt
@@ -48,60 +48,44 @@ object ViewDescriptor : ChainedDescriptor<View>() {
  ) {

    val props = mutableMapOf<String, Inspectable>()
-    props["size"] = InspectableValue.Size(Size(node.width, node.height), mutable = true)
-    props["alpha"] = InspectableValue.Number(node.alpha, mutable = true)
-    props["visibility"] = VisibilityMapping.toInspectable(node.visibility, mutable = false)
-
-    fromDrawable(node.background)?.let { background -> props["background"] = background }
-
-    node.tag
-        ?.let { InspectableValue.fromAny(it, mutable = false) }
-        ?.let { tag -> props.put("tag", tag) }
-
-    props["keyedTags"] = InspectableObject(getViewTags(node))
-    props["layoutParams"] = getLayoutParams(node)
-    props["state"] =
-        InspectableObject(
-            mapOf(
-                "enabled" to InspectableValue.Boolean(node.isEnabled, mutable = false),
-                "activated" to InspectableValue.Boolean(node.isActivated, mutable = false),
-                "focused" to InspectableValue.Boolean(node.isFocused, mutable = false),
-                "selected" to InspectableValue.Boolean(node.isSelected, mutable = false)))
-
-    props["bounds"] =
-        InspectableValue.SpaceBox(SpaceBox(node.top, node.right, node.bottom, node.left))
-    props["padding"] =
-        InspectableValue.SpaceBox(
-            SpaceBox(node.paddingTop, node.paddingRight, node.paddingBottom, node.paddingLeft))
-    props["rotation"] =
-        InspectableValue.Coordinate3D(Coordinate3D(node.rotationX, node.rotationY, node.rotation))
-    props["scale"] = InspectableValue.Coordinate(Coordinate(node.scaleX, node.scaleY))
-    props["pivot"] = InspectableValue.Coordinate(Coordinate(node.pivotX, node.pivotY))

    val positionOnScreen = IntArray(2)
    node.getLocationOnScreen(positionOnScreen)

-    props["globalPosition"] =
-        InspectableValue.Coordinate(Coordinate(positionOnScreen[0], positionOnScreen[1]))
-
    val localVisible = Rect()
    node.getLocalVisibleRect(localVisible)

-    props["localVisible"] =
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
+      props["position"] = InspectableValue.Coordinate3D(Coordinate3D(node.x, node.y, node.z))
+    } else {
+      props["position"] = InspectableValue.Coordinate(Coordinate(node.x, node.y))
+    }
+
+    props["globalPosition"] =
+        InspectableValue.Coordinate(Coordinate(positionOnScreen[0], positionOnScreen[1]))
+
+    props["size"] = InspectableValue.Size(Size(node.width, node.height), mutable = true)
+
+    props["bounds"] = InspectableValue.Bounds(Bounds(node.left, node.top, node.right, node.bottom))
+    props["padding"] =
+        InspectableValue.SpaceBox(
+            SpaceBox(node.paddingTop, node.paddingRight, node.paddingBottom, node.paddingLeft))
+
+    props["localVisibleRect"] =
        InspectableObject(
            mapOf(
                "position" to InspectableValue.Coordinate(Coordinate(localVisible.left, node.top)),
                "size" to InspectableValue.Size(Size(node.width, node.height))),
        )

+    props["rotation"] =
+        InspectableValue.Coordinate3D(Coordinate3D(node.rotationX, node.rotationY, node.rotation))
+    props["scale"] = InspectableValue.Coordinate(Coordinate(node.scaleX, node.scaleY))
+    props["pivot"] = InspectableValue.Coordinate(Coordinate(node.pivotX, node.pivotY))
+
+    props["layoutParams"] = getLayoutParams(node)
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
      props["layoutDirection"] = LayoutDirectionMapping.toInspectable(node.layoutDirection, false)
-      props["textDirection"] = TextDirectionMapping.toInspectable(node.textDirection, false)
-      props["textAlignment"] = TextAlignmentMapping.toInspectable(node.textAlignment, false)
-    }
-
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
-      props["elevation"] = InspectableValue.Number(node.elevation)
    }

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
@@ -113,16 +97,40 @@ object ViewDescriptor : ChainedDescriptor<View>() {
          InspectableValue.Coordinate(Coordinate(node.translationX, node.translationY))
    }

-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP_MR1) {
-      props["position"] = InspectableValue.Coordinate3D(Coordinate3D(node.x, node.y, node.z))
-    } else {
-      props["position"] = InspectableValue.Coordinate(Coordinate(node.x, node.y))
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+      props["elevation"] = InspectableValue.Number(node.elevation)
    }

+    props["visibility"] = VisibilityMapping.toInspectable(node.visibility, mutable = false)
+
+    fromDrawable(node.background)?.let { background -> props["background"] = background }
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
      fromDrawable(node.foreground)?.let { foreground -> props["foreground"] = foreground }
    }

+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
+      props["alpha"] = InspectableValue.Number(node.alpha, mutable = true)
+    }
+
+    props["state"] =
+        InspectableObject(
+            mapOf(
+                "enabled" to InspectableValue.Boolean(node.isEnabled, mutable = false),
+                "activated" to InspectableValue.Boolean(node.isActivated, mutable = false),
+                "focused" to InspectableValue.Boolean(node.isFocused, mutable = false),
+                "selected" to InspectableValue.Boolean(node.isSelected, mutable = false)))
+
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
+      props["textDirection"] = TextDirectionMapping.toInspectable(node.textDirection, false)
+      props["textAlignment"] = TextAlignmentMapping.toInspectable(node.textAlignment, false)
+    }
+
+    node.tag
+        ?.let { InspectableValue.fromAny(it, mutable = false) }
+        ?.let { tag -> props.put("tag", tag) }
+
+    props["keyedTags"] = InspectableObject(getViewTags(node))
+
    attributeSections["View"] = InspectableObject(props.toMap())
  }

@@ -297,6 +305,7 @@ object ViewDescriptor : ChainedDescriptor<View>() {
      object :
          EnumMapping<Int>(
              mapOf(
+                  "NONE" to -1,
                  "NO_GRAVITY" to Gravity.NO_GRAVITY,
                  "LEFT" to Gravity.LEFT,
                  "TOP" to Gravity.TOP,
--- a/desktop/flipper-plugin/src/ui/theme.tsx
+++ b/desktop/flipper-plugin/src/ui/theme.tsx
@@ -50,6 +50,7 @@ export const theme = {
    large: '16px',
    default: '14px',
    small: '12px',
+    smaller: '10px',
  } as const,
  monospace: {
    fontFamily: 'SF Mono,Monaco,Andale Mono,monospace',
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/desktop/plugins/public/ui-debugger/components/main.tsx
@@ -37,7 +37,7 @@ export function Component() {
      return;
    }
    return (
-      <DetailSidebar>
+      <DetailSidebar width={350}>
        <Inspector node={node} />
      </DetailSidebar>
    );
--- a/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx
@@ -15,7 +15,6 @@ import {UINode} from '../../types';
 import {IdentityInspector} from './inspector/IdentityInspector';
 import {AttributesInspector} from './inspector/AttributesInspector';
 import {DocumentationInspector} from './inspector/DocumentationInspector';
-import {LayoutInspector} from './inspector/LayoutInspector';

 type Props = {
  node: UINode;
@@ -39,7 +38,7 @@ export const Inspector: React.FC<Props> = ({node}) => {
              <Glyph name="data-table" size={16} />
            </Layout.Horizontal>
          }>
-          <AttributesInspector node={node} />
+          <AttributesInspector mode="attributes" node={node} />
        </Tab>
        <Tab
          tab={
@@ -47,7 +46,7 @@ export const Inspector: React.FC<Props> = ({node}) => {
              <Glyph name="square-ruler" size={16} />
            </Layout.Horizontal>
          }>
-          <LayoutInspector node={node} />
+          <AttributesInspector mode="layout" node={node} />
        </Tab>
        <Tab
          tab={
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
@@ -8,90 +8,239 @@
 */

 import React from 'react';
-import {Color, Inspectable, InspectableObject, UINode} from '../../../types';
-import {Panel} from 'flipper-plugin';
+import {Inspectable, InspectableObject, UINode} from '../../../types';
+import {DataInspector, Panel, styled} from 'flipper-plugin';
+import {Checkbox, Col, Row} from 'antd';
+import {displayableName} from '../utilities/displayableName';
+import ColorInspector from './ColorInspector';
+import SizeInspector from './SizeInspector';
+import {theme} from 'flipper-plugin';
+import SpaceBoxInspector from './SpaceBoxInspector';
+import BoundsInspector from './BoundsInspector';
+import Coordinate3DInspector from './Coordinate3DInspector';
+import CoordinateInspector from './CoordinateInspector';

-type Props = {
-  node: UINode;
+const NumberValue = styled.span({
+  color: theme.semanticColors.numberValue,
+  display: 'flex',
+});
+
+const TextValue = styled.span({
+  color: theme.semanticColors.stringValue,
+  display: 'flex',
+});
+
+const EnumValue = styled.span({
+  color: theme.semanticColors.stringValue,
+  fontSize: theme.fontSize.small,
+  margin: 'auto',
+});
+
+const ContainerStyle = {
+  marginTop: 4,
+  marginBottom: 4,
+  borderStyle: 'solid',
+  borderColor: theme.dividerColor,
+  borderWidth: '0 0 1px 0',
 };

-const TextAttributeInspector: React.FC<{name: string; value: string}> = ({
-  name,
-  value,
-}) => {
-  return (
-    <div>
-      {name}: {value}
-    </div>
-  );
-};
+const ObjectContainer = styled.div({
+  borderLeftWidth: 5,
+  borderLeftColor: 'lightgray',
+  borderLeftStyle: 'solid',
+});

-const NumberAttributeInspector: React.FC<{name: string; value: number}> = ({
-  name,
-  value,
-}) => {
-  return (
-    <div>
-      {name}: {value}
-    </div>
-  );
+const CenterContainer = styled.div({
+  margin: 'auto',
+});
+type NamedAttributeInspectorProps = {
+  name: string;
 };
-
-const ColorAttributeInspector: React.FC<{name: string; value: Color}> = ({
+const NamedAttributeInspector: React.FC<NamedAttributeInspectorProps> = ({
  name,
-  value,
+  children,
 }) => {
  return (
-    <div>
-      {name}: {JSON.stringify(value)}
-    </div>
+    <Row style={ContainerStyle}>
+      <Col span={8} style={{margin: 'auto'}}>
+        {name}
+      </Col>
+      <Col span={16}>
+        <CenterContainer>{children}</CenterContainer>
+      </Col>
+    </Row>
  );
 };

 const ObjectAttributeInspector: React.FC<{
  name: string;
  value: Record<string, Inspectable>;
-}> = ({name, value}) => {
+  level: number;
+}> = ({name, value, level}) => {
  return (
-    <div>
-      {name}: {JSON.stringify(value)}
+    <div style={ContainerStyle}>
+      {name}
+      {Object.keys(value).map(function (key, _) {
+        return (
+          <ObjectContainer
+            key={key}
+            style={{
+              paddingLeft: level,
+            }}>
+            {create(key, value[key], level + 2)}
+          </ObjectContainer>
+        );
+      })}
    </div>
  );
 };

-function create(key: string, inspectable: Inspectable) {
+function create(key: string, inspectable: Inspectable, level: number = 2) {
  switch (inspectable.type) {
+    case 'boolean':
+      return (
+        <NamedAttributeInspector name={displayableName(key)}>
+          <Checkbox checked={inspectable.value} disabled />
+        </NamedAttributeInspector>
+      );
+    case 'enum':
+      return (
+        <NamedAttributeInspector name={displayableName(key)}>
+          <EnumValue>{inspectable.value.value}</EnumValue>
+        </NamedAttributeInspector>
+      );
    case 'text':
-      return <TextAttributeInspector name={key} value={inspectable.value} />;
+      return (
+        <NamedAttributeInspector name={displayableName(key)}>
+          <TextValue>{inspectable.value}</TextValue>
+        </NamedAttributeInspector>
+      );
    case 'number':
-      return <NumberAttributeInspector name={key} value={inspectable.value} />;
+      return (
+        <NamedAttributeInspector name={displayableName(key)}>
+          <NumberValue>{inspectable.value}</NumberValue>
+        </NamedAttributeInspector>
+      );
    case 'color':
-      return <ColorAttributeInspector name={key} value={inspectable.value} />;
+      return (
+        <NamedAttributeInspector name={displayableName(key)}>
+          <ColorInspector color={inspectable.value} />
+        </NamedAttributeInspector>
+      );
+    case 'size':
+      return (
+        <NamedAttributeInspector name={displayableName(key)}>
+          <SizeInspector value={inspectable.value} />
+        </NamedAttributeInspector>
+      );
+    case 'bounds':
+      return (
+        <NamedAttributeInspector name={displayableName(key)}>
+          <BoundsInspector value={inspectable.value} />
+        </NamedAttributeInspector>
+      );
+    case 'coordinate':
+      return (
+        <NamedAttributeInspector name={displayableName(key)}>
+          <CoordinateInspector value={inspectable.value} />
+        </NamedAttributeInspector>
+      );
+    case 'coordinate3d':
+      return (
+        <NamedAttributeInspector name={displayableName(key)}>
+          <Coordinate3DInspector value={inspectable.value} />
+        </NamedAttributeInspector>
+      );
+    case 'space':
+      return (
+        <NamedAttributeInspector name={displayableName(key)}>
+          <SpaceBoxInspector value={inspectable.value} />
+        </NamedAttributeInspector>
+      );
    case 'object':
-      return <ObjectAttributeInspector name={key} value={inspectable.fields} />;
+      return (
+        <ObjectAttributeInspector
+          name={displayableName(key)}
+          value={inspectable.fields}
+          level={level}
+        />
+      );
    default:
-      return;
+      return (
+        <NamedAttributeInspector name={displayableName(key)}>
+          <TextValue>{JSON.stringify(inspectable)}</TextValue>
+        </NamedAttributeInspector>
+      );
  }
 }

-function createSection(name: string, inspectable: InspectableObject) {
+/**
+ * Filter out those inspectables that affect sizing, positioning, and
+ * overall layout of elements.
+ */
+const layoutFilter = new Set([
+  'size',
+  'padding',
+  'margin',
+  'bounds',
+  'position',
+  'globalPosition',
+  'localVisibleRect',
+  'rotation',
+  'scale',
+  'pivot',
+  'layoutParams',
+  'layoutDirection',
+  'translation',
+  'elevation',
+]);
+function createSection(
+  mode: InspectorMode,
+  name: string,
+  inspectable: InspectableObject,
+) {
+  const fields = Object.keys(inspectable.fields).filter(
+    (key) =>
+      (mode === 'attributes' && !layoutFilter.has(key)) ||
+      (mode === 'layout' && layoutFilter.has(key)),
+  );
+  if (!fields || fields.length === 0) {
+    return;
+  }
  return (
    <Panel key={name} title={name}>
-      {' '}
-      {Object.keys(inspectable.fields).map(function (key, _) {
+      {fields.map(function (key, _) {
        return create(key, inspectable.fields[key]);
      })}
    </Panel>
  );
 }

-export const AttributesInspector: React.FC<Props> = ({node}) => {
-  // TODO: add raw panel to inspect data as received.
+type InspectorMode = 'layout' | 'attributes';
+type Props = {
+  node: UINode;
+  mode: InspectorMode;
+  rawDisplayEnabled?: boolean;
+};
+export const AttributesInspector: React.FC<Props> = ({
+  node,
+  mode,
+  rawDisplayEnabled = false,
+}) => {
  return (
    <>
      {Object.keys(node.attributes).map(function (key, _) {
-        return createSection(key, node.attributes[key] as InspectableObject);
+        return createSection(
+          mode,
+          key,
+          node.attributes[key] as InspectableObject,
+        );
      })}
+      {rawDisplayEnabled ?? (
+        <Panel key="Raw" title="Raw Data" collapsed>
+          <DataInspector data={node.attributes} />
+        </Panel>
+      )}
    </>
  );
 };
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/BoundsInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/BoundsInspector.tsx
@@ -0,0 +1,225 @@
+/**
+ * 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 React from 'react';
+import {Bounds} from '../../../types';
+
+type Props = {
+  size?: number;
+  strokeColor?: string;
+  outerBoxColor?: string;
+  innerBoxColor?: string;
+  multiplier?: number;
+  margin?: number;
+  separator?: number;
+  value: Bounds;
+};
+
+const BoundsInspector: React.FC<Props> = ({
+  size = 180,
+  strokeColor = '#4A5967',
+  outerBoxColor = '#F2F3F7',
+  innerBoxColor = '#CCD1D9',
+  multiplier = 0.4,
+  margin = 4,
+  separator = 10,
+  value,
+}) => {
+  const scale =
+    Math.min(size / (value.width + value.x), size / (value.height + value.y)) *
+    multiplier;
+
+  const width = value.width * scale;
+  const height = value.height * scale;
+
+  const origin = size / 2;
+  const originX = origin - width / 2;
+  const originY = origin - height / 2;
+
+  const midX = originX + width / 2;
+  const midY = originY + height / 2;
+
+  const lineStyle = {stroke: strokeColor, strokeWidth: '2'};
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      style={{border: '1', borderColor: innerBoxColor, borderStyle: 'solid'}}
+      viewBox={'0 0 ' + size + ' ' + size}
+      xmlns="http://www.w3.org/2000/svg">
+      <rect width={size} height={size} x={0} y={0} fill={outerBoxColor} />{' '}
+      {/** outer-box */}
+      <rect
+        width={width}
+        height={height}
+        x={originX}
+        y={originY}
+        fill={innerBoxColor}
+      />{' '}
+      {/** bounded-box */}
+      <circle cx={originX} cy={midY} r="2" fill={strokeColor} /> {/** left */}
+      <circle cx={midX} cy={originY} r="2" fill={strokeColor} /> {/** top */}
+      <circle
+        cx={originX}
+        cy={originY + height}
+        r="2"
+        fill={strokeColor}
+      />{' '}
+      {/** left-bottom */}
+      <circle cx={originX + width} cy={originY} r="2" fill={strokeColor} />{' '}
+      {/** right-top */}
+      <circle
+        cx={originX + width}
+        cy={originY + height}
+        r="2"
+        fill={strokeColor}
+      />{' '}
+      {/** right-bottom */}
+      <text
+        x={0}
+        y={midY}
+        dominant-baseline="middle"
+        text-anchor="right"
+        fill={strokeColor}>
+        {value.x}
+      </text>
+      {/** x */}
+      <line
+        x1={separator * 2}
+        y1={midY}
+        x2={originX - separator}
+        y2={midY}
+        style={lineStyle}
+        strokeDasharray="2,2"
+      />
+      {/** left */}
+      <line
+        x1={separator * 2}
+        y1={midY - margin}
+        x2={separator * 2}
+        y2={midY + margin}
+        style={lineStyle}
+      />
+      {/** bezel */}
+      <line
+        x1={originX - separator}
+        y1={midY - margin}
+        x2={originX - separator}
+        y2={midY + margin}
+        style={lineStyle}
+      />
+      {/** bezel */}
+      <text
+        x={midX}
+        y={originY + height + separator * 2}
+        dominant-baseline="middle"
+        text-anchor="middle"
+        fill={strokeColor}>
+        {value.width}
+      </text>
+      {/** width */}
+      <line
+        x1={originX}
+        y1={originY + height + separator}
+        x2={originX + width}
+        y2={originY + height + separator}
+        style={lineStyle}
+        strokeDasharray="2,2"
+      />
+      {/** bottom */}
+      <line
+        x1={originX}
+        y1={originY + height + separator - margin}
+        x2={originX}
+        y2={originY + height + separator + margin}
+        style={lineStyle}
+      />
+      {/** bezel */}
+      <line
+        x1={originX + width}
+        y1={originY + height + separator - margin}
+        x2={originX + width}
+        y2={originY + height + separator + margin}
+        style={lineStyle}
+      />
+      {/** bezel */}
+      <text
+        x={midX}
+        y={separator}
+        dominant-baseline="middle"
+        text-anchor="middle"
+        fill={strokeColor}>
+        {value.y}
+      </text>
+      {/** y */}
+      <line
+        x1={midX}
+        y1={separator * 2}
+        x2={midX}
+        y2={originY - separator}
+        style={lineStyle}
+        strokeDasharray="2,2"
+      />
+      {/** top */}
+      <line
+        x1={midX - margin}
+        y1={separator * 2}
+        x2={midX + margin}
+        y2={separator * 2}
+        style={lineStyle}
+      />
+      {/** bezel */}
+      <line
+        x1={midX - margin}
+        y1={originY - separator}
+        x2={midX + margin}
+        y2={originY - separator}
+        style={lineStyle}
+      />
+      {/** bezel */}
+      <text
+        x={originX + width + separator * 3}
+        y={midY}
+        dominant-baseline="middle"
+        text-anchor="middle"
+        fill={strokeColor}>
+        {value.height}
+      </text>
+      {/** height */}
+      <line
+        x1={originX + width + separator}
+        y1={originY}
+        x2={originX + width + separator}
+        y2={originY + height}
+        style={lineStyle}
+        strokeDasharray="2,2"
+      />
+      {/** right */}
+      <line
+        x1={originX + width + separator - margin}
+        y1={originY}
+        x2={originX + width + separator + margin}
+        y2={originY}
+        style={lineStyle}
+      />
+      {/** bezel */}
+      <line
+        x1={originX + width + separator - margin}
+        y1={originY + height}
+        x2={originX + width + separator + margin}
+        y2={originY + height}
+        style={lineStyle}
+      />
+      {/** bezel */}
+    </svg>
+  );
+};
+
+export default BoundsInspector;
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/ColorInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/ColorInspector.tsx
@@ -0,0 +1,70 @@
+/**
+ * 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 React from 'react';
+import {Popover} from 'antd';
+import {Color} from '../../../types';
+import {SketchPicker, RGBColor, ColorResult} from 'react-color';
+import {styled} from 'flipper-plugin';
+
+type State = {
+  color: RGBColor;
+};
+
+const OuterColorButton = styled.div({
+  padding: '5px',
+  backgroundColor: '#fff',
+  borderRadius: '5px',
+  boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
+  display: 'inline-block',
+  cursor: 'pointer',
+});
+
+const InnerColorButton = styled.div({
+  width: '36px',
+  height: '14px',
+  borderRadius: '2px',
+});
+
+class ColorInspector extends React.Component<{color: Color}> {
+  state: State = {
+    color: this.props.color ?? {
+      r: 255,
+      g: 255,
+      b: 255,
+      a: 1,
+    },
+  };
+
+  handleChange = (_color: ColorResult) => {
+    // No color changes to be applied at this stage.
+    // this.setState({color: color.rgb});
+  };
+
+  render() {
+    return (
+      <Popover
+        placement="bottomRight"
+        content={
+          <SketchPicker color={this.state.color} onChange={this.handleChange} />
+        }
+        trigger="click">
+        <OuterColorButton role="button" tabIndex={0}>
+          <InnerColorButton
+            style={{
+              background: `rgba(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b}, ${this.state.color.a})`,
+            }}
+          />
+        </OuterColorButton>
+      </Popover>
+    );
+  }
+}
+
+export default ColorInspector;
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/Coordinate3DInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/Coordinate3DInspector.tsx
@@ -0,0 +1,68 @@
+/**
+ * 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 React from 'react';
+import {Coordinate3D} from '../../../types';
+import {Col, Row} from 'antd';
+import {theme} from 'flipper-plugin';
+
+type Props = {
+  value: Coordinate3D;
+};
+
+const Coordinate3DInspector: React.FC<Props> = ({value}) => {
+  return (
+    <>
+      <Row
+        style={{
+          fontSize: theme.fontSize.small,
+          paddingLeft: '20%',
+          paddingRight: '20%',
+        }}>
+        <Col span={8} style={{textAlign: 'center'}}>
+          x
+        </Col>
+        <Col span={8} style={{textAlign: 'center'}}>
+          y
+        </Col>
+        <Col span={8} style={{textAlign: 'center'}}>
+          z
+        </Col>
+      </Row>
+      <Row style={{paddingLeft: '20%', paddingRight: '20%'}}>
+        <Col
+          span={8}
+          style={{
+            textAlign: 'center',
+            color: theme.semanticColors.numberValue,
+          }}>
+          {value.x}
+        </Col>
+        <Col
+          span={8}
+          style={{
+            textAlign: 'center',
+            color: theme.semanticColors.numberValue,
+          }}>
+          {value.y}
+        </Col>
+        <Col
+          span={8}
+          style={{
+            textAlign: 'center',
+            color: theme.semanticColors.numberValue,
+          }}>
+          {value.z}
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default Coordinate3DInspector;
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/CoordinateInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/CoordinateInspector.tsx
@@ -0,0 +1,57 @@
+/**
+ * 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 React from 'react';
+import {Coordinate} from '../../../types';
+import {Col, Row} from 'antd';
+import {theme} from 'flipper-plugin';
+
+type Props = {
+  value: Coordinate;
+};
+
+const CoordinateInspector: React.FC<Props> = ({value}) => {
+  return (
+    <>
+      <Row
+        style={{
+          fontSize: theme.fontSize.small,
+          paddingLeft: '20%',
+          paddingRight: '20%',
+        }}>
+        <Col span={12} style={{textAlign: 'center'}}>
+          x
+        </Col>
+        <Col span={12} style={{textAlign: 'center'}}>
+          y
+        </Col>
+      </Row>
+      <Row style={{paddingLeft: '20%', paddingRight: '20%'}}>
+        <Col
+          span={12}
+          style={{
+            textAlign: 'center',
+            color: theme.semanticColors.numberValue,
+          }}>
+          {value.x}
+        </Col>
+        <Col
+          span={12}
+          style={{
+            textAlign: 'center',
+            color: theme.semanticColors.numberValue,
+          }}>
+          {value.y}
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default CoordinateInspector;
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/DefaultInspectorContainer.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/DefaultInspectorContainer.tsx
@@ -0,0 +1,35 @@
+/**
+ * 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 React from 'react';
+import {Col, Row} from 'antd';
+import {styled, theme} from 'flipper-plugin';
+
+type Props = {
+  name: string;
+};
+
+export const DefaultInputContainer = styled.div({
+  margin: 'auto',
+  padding: '2px',
+  minWidth: '50px',
+  backgroundColor: theme.backgroundDefault,
+  borderRadius: '5px',
+  boxShadow: '0 0 0 1px rgba(0,0,0,.2)',
+  display: 'inline-block',
+});
+
+export const DefaultInspectorContainer: React.FC<Props> = (props) => {
+  return (
+    <Row>
+      <Col span={8}>{props.name}</Col>
+      <Col span={16}>{props.children}</Col>
+    </Row>
+  );
+};
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx
@@ -10,26 +10,31 @@
 import React from 'react';
 import {Col, Row} from 'antd';
 import {UINode} from '../../../types';
+import {styled} from 'flipper-plugin';

 type Props = {
  node: UINode;
 };

+const IdentityContainer = styled.div({
+  marginTop: '10px',
+});
+
 export const IdentityInspector: React.FC<Props> = ({node}) => {
  return (
-    <>
-      <Row gutter={4} style={{marginTop: '10px'}}>
-        <Col flex="100px">
+    <IdentityContainer>
+      <Row gutter={4}>
+        <Col span="12">
          <div style={{padding: '0 16px'}}>Name:</div>
        </Col>
-        <Col flex="auto">{node.name}</Col>
+        <Col span="12">{node.name}</Col>
      </Row>
      <Row gutter={4}>
-        <Col flex="100px">
+        <Col span="12">
          <div style={{padding: '0 16px'}}>Id:</div>
        </Col>
-        <Col flex="auto">{node.id}</Col>
+        <Col span="12">{node.id}</Col>
      </Row>
-    </>
+    </IdentityContainer>
  );
 };
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/LayoutInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/LayoutInspector.tsx
@@ -1,19 +0,0 @@
-/**
- * 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 React from 'react';
-import {UINode} from '../../../types';
-
-type Props = {
-  node: UINode;
-};
-
-export const LayoutInspector: React.FC<Props> = () => {
-  return <p>Origin and size</p>;
-};
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/SizeInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/SizeInspector.tsx
@@ -0,0 +1,57 @@
+/**
+ * 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 React from 'react';
+import {Size} from '../../../types';
+import {Col, Row} from 'antd';
+import {theme} from 'flipper-plugin';
+
+type Props = {
+  value: Size;
+};
+
+const SizeInspector: React.FC<Props> = ({value}) => {
+  return (
+    <>
+      <Row
+        style={{
+          fontSize: theme.fontSize.small,
+          paddingLeft: '20%',
+          paddingRight: '20%',
+        }}>
+        <Col span={12} style={{textAlign: 'center'}}>
+          width
+        </Col>
+        <Col span={12} style={{textAlign: 'center'}}>
+          height
+        </Col>
+      </Row>
+      <Row style={{paddingLeft: '20%', paddingRight: '20%'}}>
+        <Col
+          span={12}
+          style={{
+            textAlign: 'center',
+            color: theme.semanticColors.numberValue,
+          }}>
+          {value.width}
+        </Col>
+        <Col
+          span={12}
+          style={{
+            textAlign: 'center',
+            color: theme.semanticColors.numberValue,
+          }}>
+          {value.height}
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default SizeInspector;
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/SpaceBoxInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/SpaceBoxInspector.tsx
@@ -0,0 +1,202 @@
+/**
+ * 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 React from 'react';
+import {SpaceBox} from '../../../types';
+
+type Props = {
+  size?: number;
+  strokeColor?: string;
+  outerBoxColor?: string;
+  innerBoxColor?: string;
+  margin?: number;
+  separator?: number;
+  value: SpaceBox;
+};
+
+const SpaceBoxInspector: React.FC<Props> = ({
+  size = 180,
+  strokeColor = '#4A5967',
+  outerBoxColor = '#F2F3F7',
+  innerBoxColor = '#CCD1D9',
+  margin = 10,
+  separator = 4,
+  value,
+}) => {
+  const half = size / 2;
+  const quarter = size / 4;
+  const radius = 2;
+
+  const lineStyle = {stroke: strokeColor, strokeWidth: '2'};
+  return (
+    <svg
+      width={size}
+      height={size}
+      style={{border: '1', borderColor: innerBoxColor, borderStyle: 'solid'}}
+      viewBox={'0 0 ' + size + ' ' + size}
+      xmlns="http://www.w3.org/2000/svg">
+      <rect width={size} height={size} x={0} y={0} fill={outerBoxColor} />{' '}
+      {/** outer-box */}
+      <rect
+        width={half}
+        height={half}
+        x={quarter}
+        y={quarter}
+        fill={innerBoxColor}
+      />{' '}
+      {/** inner-box */}
+      <circle cx={quarter} cy={half} r={radius} fill={strokeColor} />
+      {/** left */}
+      <circle cx={half} cy={quarter} r={radius} fill={strokeColor} />
+      {/** top */}
+      <circle cx={half} cy={half + quarter} r={radius} fill={strokeColor} />
+      {/** bottom */}
+      <circle cx={half + quarter} cy={half} r={radius} fill={strokeColor} />
+      {/** right */}
+      {/** left-inner */}
+      <line
+        x1={quarter + margin}
+        y1={half}
+        x2={half - margin}
+        y2={half}
+        style={lineStyle}
+      />
+      {/** straight-line  */}
+      <line
+        x1={quarter + margin}
+        y1={half - separator}
+        x2={quarter + margin}
+        y2={half + separator}
+        style={lineStyle}
+      />
+      {/** left-separator */}
+      <line
+        x1={half - margin}
+        y1={half - separator}
+        x2={half - margin}
+        y2={half + separator}
+        style={lineStyle}
+      />
+      {/** right-separator */}
+      {/** right-inner */}
+      <line
+        x1={half + margin}
+        y1={half}
+        x2={half + quarter - margin}
+        y2={half}
+        style={lineStyle}
+      />
+      {/** straight-line */}
+      <line
+        x1={half + margin}
+        y1={half - separator}
+        x2={half + margin}
+        y2={half + separator}
+        style={lineStyle}
+      />
+      {/** left-separator */}
+      <line
+        x1={half + quarter - margin}
+        y1={half - separator}
+        x2={half + quarter - margin}
+        y2={half + separator}
+        style={lineStyle}
+      />
+      {/** right-separator */}
+      {/** top-inner */}
+      <line
+        x1={half}
+        y1={quarter + margin}
+        x2={half}
+        y2={half - margin}
+        style={lineStyle}
+      />
+      {/** straight-line */}
+      <line
+        x1={half - separator}
+        y1={quarter + margin}
+        x2={half + separator}
+        y2={quarter + margin}
+        style={lineStyle}
+      />
+      {/** left-separator */}
+      <line
+        x1={half - separator}
+        y1={half - margin}
+        x2={half + separator}
+        y2={half - margin}
+        style={lineStyle}
+      />
+      {/** right-separator */}
+      {/** bottom-inner */}
+      <line
+        x1={half}
+        y1={half + margin}
+        x2={half}
+        y2={half + quarter - margin}
+        style={lineStyle}
+      />
+      {/** straight-line */}
+      <line
+        x1={half - separator}
+        y1={half + margin}
+        x2={half + separator}
+        y2={half + margin}
+        style={lineStyle}
+      />
+      {/** left-separator */}
+      <line
+        x1={half - separator}
+        y1={half + quarter - margin}
+        x2={half + separator}
+        y2={half + quarter - margin}
+        style={lineStyle}
+      />
+      {/** right-separator */}
+      <text
+        x={half}
+        y={quarter - quarter / 2}
+        dominant-baseline="middle"
+        text-anchor="middle"
+        fill={strokeColor}>
+        {value.top}
+      </text>
+      {/** top */}
+      <text
+        x={half}
+        y={size - quarter / 2}
+        dominant-baseline="middle"
+        text-anchor="middle"
+        fill={strokeColor}>
+        {value.bottom}
+      </text>
+      {/** bottom */}
+      <text
+        x={quarter - quarter / 2}
+        y={half}
+        dominant-baseline="middle"
+        text-anchor="middle"
+        fill={strokeColor}>
+        {value.left}
+      </text>
+      {/** left */}
+      <text
+        x={size - quarter / 2}
+        y={half}
+        dominant-baseline="middle"
+        text-anchor="middle"
+        fill={strokeColor}>
+        {value.right}
+      </text>
+      {/** right */}
+    </svg>
+  );
+};
+
+export default SpaceBoxInspector;
--- a/desktop/plugins/public/ui-debugger/components/sidebar/utilities/displayableName.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/utilities/displayableName.tsx
@@ -7,6 +7,12 @@
 * @format
 */

+/**
+ * Utility function that generates a more human-readable name
+ * for an attribute in lowerCamelCase format.
+ * @param attribute Attribute name in the form of lowerCamelCase
+ * @returns Displayable name for the provided attribute.
+ */
 export function displayableName(attribute: string): string {
  if (attribute.length > 0) {
    const displayable = attribute[0].toUpperCase() + attribute.substring(1);
--- a/desktop/plugins/public/ui-debugger/package.json
+++ b/desktop/plugins/public/ui-debugger/package.json
@@ -13,20 +13,21 @@
    "flipper-plugin"
  ],
  "dependencies": {
+    "react-color": "^2.19.3",
    "react-hotkeys-hook": "^3.4.7"
  },
  "bugs": {
    "url": "https://github.com/facebook/flipper/issues"
  },
  "peerDependencies": {
-    "flipper-plugin": "*",
-    "antd": "*",
-    "react": "*",
-    "react-dom": "*",
-    "@emotion/styled": "*",
    "@ant-design/icons": "*",
+    "@emotion/styled": "*",
+    "@types/node": "*",
    "@types/react": "*",
    "@types/react-dom": "*",
-    "@types/node": "*"
+    "antd": "*",
+    "flipper-plugin": "*",
+    "react": "*",
+    "react-dom": "*"
  }
 }
--- a/desktop/plugins/public/ui-debugger/types.tsx
+++ b/desktop/plugins/public/ui-debugger/types.tsx
@@ -51,6 +51,29 @@ export type Bounds = {
  height: number;
 };

+export type Size = {
+  width: number;
+  height: number;
+};
+
+export type SpaceBox = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+};
+
+export type Coordinate = {
+  x: number;
+  y: number;
+};
+
+export type Coordinate3D = {
+  x: number;
+  y: number;
+  z: number;
+};
+
 export type Color = {
  r: number;
  g: number;
@@ -69,7 +92,12 @@ export type Inspectable =
  | InspectableNumber
  | InspectableColor
  | InspectableBoolean
-  | InspectableEnum;
+  | InspectableEnum
+  | InspectableCoordinate
+  | InspectableCoordinate3D
+  | InspectableSize
+  | InspectableBounds
+  | InspectableSpaceBox;

 export type InspectableText = {
  type: 'text';
@@ -107,6 +135,30 @@ export type InspectableBounds = {
  mutable: boolean;
 };

+export type InspectableSize = {
+  type: 'size';
+  value: Size;
+  mutable: boolean;
+};
+
+export type InspectableCoordinate = {
+  type: 'coordinate';
+  value: Coordinate;
+  mutable: boolean;
+};
+
+export type InspectableCoordinate3D = {
+  type: 'coordinate3d';
+  value: Coordinate3D;
+  mutable: boolean;
+};
+
+export type InspectableSpaceBox = {
+  type: 'space';
+  value: SpaceBox;
+  mutable: boolean;
+};
+
 export type InspectableObject = {
  type: 'object';
  fields: Record<string, Inspectable>;
--- a/desktop/plugins/public/yarn.lock
+++ b/desktop/plugins/public/yarn.lock
@@ -45,6 +45,11 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@jest/types@^26.6.2":
  version "26.6.2"
  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
@@ -1297,6 +1302,11 @@ klaw-sync@^6.0.0:
  dependencies:
    graceful-fs "^4.1.11"

+lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.debounce@^4.0.8:
  version "4.0.8"
  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -1312,16 +1322,16 @@ lodash.throttle@^4.1.1:
  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=

+lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 lodash@^4.16.0, lodash@^4.17.19:
  version "4.17.20"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==

-lodash@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
 long@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
@@ -1358,6 +1368,11 @@ map-visit@^1.0.0:
  dependencies:
    object-visit "^1.0.0"

+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 micromatch@^3.1.4:
  version "3.1.10"
  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
@@ -1572,6 +1587,15 @@ process@^0.11.10:
  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=

+prop-types@^15.5.10:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
  version "15.7.2"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
@@ -1607,6 +1631,19 @@ raf@^3.1.0, raf@^3.4.0:
  dependencies:
    performance-now "^2.1.0"

+react-color@^2.19.3:
+  version "2.19.3"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-devtools-core@^4.26.1:
  version "4.26.1"
  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-4.26.1.tgz#2893fea58089be64c5356d5bd0eebda8d1bbf317"
@@ -1724,6 +1761,13 @@ react-vis@^1.11.7:
    prop-types "^15.5.8"
    react-motion "^0.5.2"

+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 recharts-scale@^0.4.4:
  version "0.4.5"
  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
@@ -1993,6 +2037,11 @@ symbol-observable@^1.2.0:
  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==

+tinycolor2@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 tmp@^0.0.33:
  version "0.0.33"
  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"