From 7c7b011537e3dd791bf5ef31e67cfaf3d66bf131 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Wed, 11 May 2022 15:01:12 +0530
Subject: [PATCH] [inspector] followup to #2789 (#3027)

* followup to: 2789

* Revert "followup to: 2789"

This reverts commit 8a2b8b90a46b2fa497a4e41c9223e5339191b1d1.

* followup to: 2789
---
 frontend/src/_ui/JSONTreeViewer/JSONNode.jsx       | 4 ++--
 frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx  | 6 +++++-
 frontend/src/_ui/JSONTreeViewer/JSONTreeViewer.jsx | 5 ++---
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
index 97f348e6cd..99223424ab 100644
--- a/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
+++ b/frontend/src/_ui/JSONTreeViewer/JSONNode.jsx
@@ -327,10 +327,10 @@ export const JSONNode = ({ data, ...restProps }) => {
       <div
         style={{ width: 'inherit' }}
         className={`${shouldDisplayIntendedBlock && 'group-border'} ${applySelectedNodeStyles && 'selected-node'}`}
+        onMouseEnter={() => updateHoveredNode(currentNode, currentNodePath)}
+        onMouseLeave={() => updateHoveredNode(null)}
       >
         <div
-          onMouseEnter={() => updateHoveredNode(currentNode, currentNodePath)}
-          onMouseLeave={() => updateHoveredNode(null)}
           className={cx('d-flex', {
             'group-object-container': shouldDisplayIntendedBlock,
             'mx-2': typeofCurrentNode !== 'Object' && typeofCurrentNode !== 'Array',
diff --git a/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx b/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx
index 1596a50d83..f58ba2b2db 100644
--- a/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx
+++ b/frontend/src/_ui/JSONTreeViewer/JSONNodeValue.jsx
@@ -15,7 +15,11 @@ const JSONTreeValueNode = ({ data, type }) => {
     );
   }
 
-  const value = type === 'String' ? `"${data}"` : String(data);
+  let value = type === 'String' ? `"${data}"` : String(data);
+  if (value.length > 65) {
+    value = `${value.substring(0, 65)} ... "`;
+  }
+
   const clsForUndefinedOrNull = (type === 'Undefined' || type === 'Null') && 'badge badge-secondary';
   return (
     <span
diff --git a/frontend/src/_ui/JSONTreeViewer/JSONTreeViewer.jsx b/frontend/src/_ui/JSONTreeViewer/JSONTreeViewer.jsx
index 82186dadc4..366b54a616 100644
--- a/frontend/src/_ui/JSONTreeViewer/JSONTreeViewer.jsx
+++ b/frontend/src/_ui/JSONTreeViewer/JSONTreeViewer.jsx
@@ -157,10 +157,9 @@ export class JSONTreeViewer extends React.Component {
           newPath = `${path}.${key}`;
         }
 
-        if (_.isObject(value) || _.isArray(value)) {
-          buildMap(value, newPath);
-        } else if (_.isFunction(value)) {
+        if (_.isObject(value)) {
           map.set(newPath, { type: _type });
+          buildMap(value, newPath);
         } else {
           map.set(newPath, { type: _type });
         }