finish data explorer

Signed-off-by: ryjiang <[email protected]>
zilliztech · Oct 17, 2024 · 8ff5e2b · 8ff5e2b
1 parent a0c1a56
commit 8ff5e2b
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -246,6 +246,11 @@ export const getDataExplorerStyle = makeStyles((theme: Theme) => ({
           objectFit: 'contain',
         },
       },
+      '& .tip': {
+        color: theme.palette.text.secondary,
+        fontSize: 12,
+        textAlign: 'center',
+      }
     },
   },
   selectedNodes: {