Remove visualizer context menu

Summary: This isnt very discoverable and we can put functionality in the toolbar

Reviewed By: mweststrate

Differential Revision: D47670683

fbshipit-source-id: 8426ba05135f9a56f0a0952e94ac80480cd30a48

desktop/plugins/public/ui-debugger/components/visualizer/Visualization2D.tsx

@@ -7,21 +7,15 @@
  * @format
  */
 
-import React, {ReactNode, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useRef} from 'react';
 import {Bounds, Coordinate, Id, ClientNode} from '../../ClientTypes';
 import {NestedNode, OnSelectNode} from '../../DesktopTypes';
 
 import {produce, styled, theme, usePlugin, useValue} from 'flipper-plugin';
 import {plugin} from '../../index';
 import {head, isEqual, throttle} from 'lodash';
-import {Dropdown, Menu, Tooltip} from 'antd';
-import {UIDebuggerMenuItem} from '../util/UIDebuggerMenuItem';
 import {useDelay} from '../../hooks/useDelay';
-import {
-  AimOutlined,
-  FullscreenExitOutlined,
-  FullscreenOutlined,
-} from '@ant-design/icons';
+import {Tooltip} from 'antd';
 
 export const Visualization2D: React.FC<
   {
@@ -118,7 +112,6 @@ export const Visualization2D: React.FC<
   const pxScaleFactor = calcPxScaleFactor(snapshotNode.bounds, width);
 
   return (
-    <ContextMenu nodes={nodes}>
     <div
       onMouseLeave={(e) => {
         e.stopPropagation();
@@ -196,7 +189,6 @@ export const Visualization2D: React.FC<
         />
       </div>
     </div>
-    </ContextMenu>
   );
 };
 
@@ -346,109 +338,6 @@ function getTotalOffset(id: Id, nodes: Map<Id, ClientNode>): Coordinate {
   return offset;
 }
 
-function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
-  return value != null;
-}
-
-const iconStyle = {fontSize: 14};
-const ContextMenu: React.FC<{nodes: Map<Id, ClientNode>}> = ({children}) => {
-  const instance = usePlugin(plugin);
-  const focusedNodeId = useValue(instance.uiState.focusedNode);
-  const hoveredNodeIds = useValue(instance.uiState.hoveredNodes);
-
-  const nodes = useValue(instance.nodes);
-
-  const hoveredNodes = hoveredNodeIds
-    .map((id) => nodes.get(id))
-    .filter(notEmpty)
-    .reverse();
-
-  const focusItems = hoveredNodes.map((node: ClientNode) => (
-    <UIDebuggerMenuItem
-      key={node.id}
-      onMouseEnter={() => {
-        instance.uiActions.onHoverNode(node.id);
-      }}
-      text={node.name}
-      onClick={() => {
-        instance.uiActions.onFocusNode(node.id);
-      }}
-    />
-  ));
-
-  const selectItems = hoveredNodes.map((node: ClientNode) => (
-    <UIDebuggerMenuItem
-      key={node.id}
-      text={node.name}
-      onMouseEnter={() => {
-        instance.uiActions.onHoverNode(node.id);
-      }}
-      onClick={() => {
-        instance.uiActions.onSelectNode(node.id, 'visualiser');
-      }}
-    />
-  ));
-
-  //since the context menu changes the hover state to indicate where you are this
-  //causes a rerender and therefore changes the context menu items. to work around
-  //we grab the hovered items at the time the context menu opens and this is unaffected
-  //by any further changes to hover state
-  const [staticItems, setStaticItems] = useState<{
-    focusItems: ReactNode[];
-    selectItems: ReactNode[];
-  }>({
-    selectItems: [],
-    focusItems: [],
-  });
-
-  return (
-    <Dropdown
-      onVisibleChange={(open) => {
-        instance.uiActions.onContextMenuOpen(open);
-        if (open) {
-          setStaticItems({focusItems: focusItems, selectItems: selectItems});
-        }
-      }}
-      trigger={['contextMenu']}
-      overlay={() => {
-        return (
-          <Menu>
-            {staticItems.focusItems.length > 0 && (
-              <Menu.SubMenu
-                title="Focus"
-                icon={<FullscreenExitOutlined style={iconStyle} />}>
-                {staticItems.focusItems}
-              </Menu.SubMenu>
-            )}
-
-            {focusedNodeId != null && (
-              <UIDebuggerMenuItem
-                icon={<FullscreenOutlined />}
-                key="remove-focus"
-                text="Remove focus"
-                onClick={() => {
-                  instance.uiActions.onFocusNode(undefined);
-                }}
-              />
-            )}
-
-            {focusedNodeId != null && <Menu.Divider />}
-
-            {staticItems.selectItems.length > 0 && (
-              <Menu.SubMenu
-                title="Select"
-                icon={<AimOutlined style={iconStyle} />}>
-                {staticItems.selectItems}
-              </Menu.SubMenu>
-            )}
-          </Menu>
-        );
-      }}>
-      {children}
-    </Dropdown>
-  );
-};
-
 /**
  * this is the border that shows the green or blue line, it is implemented as a sibling to the
  * node itself so that it has the same size but the border doesnt affect the sizing of its children