From 8ff5e2be657dd377b066a3924d7911865c8e4277 Mon Sep 17 00:00:00 2001
From: ryjiang <jiangruiyi@gmail.com>
Date: Thu, 17 Oct 2024 16:00:11 +0800
Subject: [PATCH] finish data explorer

Signed-off-by: ryjiang <jiangruiyi@gmail.com>
---
 client/src/i18n/cn/search.ts                          |  1 +
 client/src/i18n/en/search.ts                          |  1 +
 .../pages/databases/collections/search/DataPanel.tsx  | 11 ++++++++++-
 .../src/pages/databases/collections/search/Styles.ts  |  5 +++++
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/src/i18n/cn/search.ts b/client/src/i18n/cn/search.ts
index fd7626fa..a928c488 100644
--- a/client/src/i18n/cn/search.ts
+++ b/client/src/i18n/cn/search.ts
@@ -27,6 +27,7 @@ const searchTrans = {
   groupBy: '分组',
   outputFields: '输出字段',
   consistency: '一致性',
+  graphNodeHoverTip: '双击以查看更多',
 };
 
 export default searchTrans;
diff --git a/client/src/i18n/en/search.ts b/client/src/i18n/en/search.ts
index e1aa5add..49c9a4ef 100644
--- a/client/src/i18n/en/search.ts
+++ b/client/src/i18n/en/search.ts
@@ -27,6 +27,7 @@ const searchTrans = {
   groupBy: 'Group By',
   outputFields: 'Outputs',
   consistency: 'Consistency',
+  graphNodeHoverTip: 'Double click to explore more',
 };
 
 export default searchTrans;
diff --git a/client/src/pages/databases/collections/search/DataPanel.tsx b/client/src/pages/databases/collections/search/DataPanel.tsx
index d12089c4..c0d03bb9 100644
--- a/client/src/pages/databases/collections/search/DataPanel.tsx
+++ b/client/src/pages/databases/collections/search/DataPanel.tsx
@@ -1,9 +1,13 @@
-import { useTheme } from '@mui/material';
+import { Typography, useTheme } from '@mui/material';
 import SyntaxHighlighter from 'react-syntax-highlighter';
+import { useTranslation } from 'react-i18next';
 import { vs2015, github } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { GraphNode } from '../../types';
 
 const DataPanel = (props: { node: GraphNode; color: any }) => {
+  // i18n
+  const { t: searchTrans } = useTranslation('search');
+
   // theme
   const theme = useTheme();
   // props
@@ -53,6 +57,11 @@ const DataPanel = (props: { node: GraphNode; color: any }) => {
       >
         {json}
       </SyntaxHighlighter>
+      {node.nodeY && (
+        <Typography className="tip">
+          {searchTrans('graphNodeHoverTip')}
+        </Typography>
+      )}
     </div>
   );
 };
diff --git a/client/src/pages/databases/collections/search/Styles.ts b/client/src/pages/databases/collections/search/Styles.ts
index 69cdd1be..e80e09c5 100644
--- a/client/src/pages/databases/collections/search/Styles.ts
+++ b/client/src/pages/databases/collections/search/Styles.ts
@@ -246,6 +246,11 @@ export const getDataExplorerStyle = makeStyles((theme: Theme) => ({
           objectFit: 'contain',
         },
       },
+      '& .tip': {
+        color: theme.palette.text.secondary,
+        fontSize: 12,
+        textAlign: 'center',
+      }
     },
   },
   selectedNodes: {