From 52dbd67a11c8b03a8f909be1b8b829d7a3cef895 Mon Sep 17 00:00:00 2001
From: Joey Tawadrous <90795735+joey-grafana@users.noreply.github.com>
Date: Mon, 24 Oct 2022 09:14:42 +0100
Subject: [PATCH] Node Graph: Always show context menu (#56876)

* Ensure context menu always appears

* Close the context menu after selecting the alternative layout

Co-authored-by: Hamas Shafiq <hamas.shafiq@grafana.com>
---
 .../panel/nodeGraph/useContextMenu.tsx        | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/public/app/plugins/panel/nodeGraph/useContextMenu.tsx b/public/app/plugins/panel/nodeGraph/useContextMenu.tsx
index 6db9cac6cb2..a8ab98ad701 100644
--- a/public/app/plugins/panel/nodeGraph/useContextMenu.tsx
+++ b/public/app/plugins/panel/nodeGraph/useContextMenu.tsx
@@ -28,17 +28,25 @@ export function useContextMenu(
 
   const onNodeOpen = useCallback(
     (event: MouseEvent<SVGElement>, node: NodeDatum) => {
-      const extraNodeItem = config.gridLayout
-        ? [
-            {
-              label: 'Show in Graph layout',
-              onClick: (node: NodeDatum) => {
-                setFocusedNodeId(node.id);
-                setConfig({ ...config, gridLayout: false });
-              },
-            },
-          ]
-        : undefined;
+      let label = 'Show in Grid layout';
+      let showGridLayout = true;
+
+      if (config.gridLayout) {
+        label = 'Show in Graph layout';
+        showGridLayout = false;
+      }
+
+      const extraNodeItem = [
+        {
+          label: label,
+          onClick: (node: NodeDatum) => {
+            setFocusedNodeId(node.id);
+            setConfig({ ...config, gridLayout: showGridLayout });
+            setMenu(undefined);
+          },
+        },
+      ];
+
       const renderer = getItemsRenderer(getLinks(nodes, node.dataFrameRowIndex), node, extraNodeItem);
 
       if (renderer) {