UI update

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/components/DataListView/DataListView.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@mui/material';
+import { Typography, Chip } from '@mui/material';
 import { CollectionFullObject } from '@server/types';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material';
@@ -26,9 +26,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   type: {
     color: theme.palette.text.secondary,
-    fontSize: 11,
     marginLeft: 4,
-    marginTop: 8,
+    marginTop: 2,
   },
   dataContainer: {
     display: 'flex',
@@ -46,6 +45,14 @@ const useStyles = makeStyles((theme: Theme) => ({
       width: 15,
     },
   },
+  dataTypeChip: {
+    fontSize: 11,
+    color: theme.palette.text.primary,
+    cursor: 'normal',
+    marginRight: 4,
+    marginLeft: 4,
+    backgroundColor: theme.palette.background.grey,
+  },
 }));
 
 const DataListView = (props: DataListViewProps) => {
@@ -87,7 +94,13 @@ const DataListView = (props: DataListViewProps) => {
                 />
               </span>
               <span className={classes.type}>
-                {(field && formatFieldType(field)) || 'meta'}
+                {field && (
+                  <Chip
+                    className={classes.dataTypeChip}
+                    size="small"
+                    label={formatFieldType(field) || 'meta'}
+                  />
+                )}
               </span>
             </div>
             <div className={classes.dataContainer}>

client/src/components/DataView/DataView.tsx

@@ -6,7 +6,7 @@ const DataView = (props: { type: string; value: any }) => {
 
   switch (type) {
     case 'VarChar':
-      return <MediaPreview value={JSON.stringify(value)} />;
+      return <MediaPreview value={value} />;
     case 'JSON':
     case 'Array':
     case 'SparseFloatVector':
@@ -30,7 +30,7 @@ const DataView = (props: { type: string; value: any }) => {
 
     default:
       return (
-        <Typography variant="mono" component="p" title={value}>
+        <Typography variant="mono" component="p" title={String(value)}>
           {JSON.stringify(value).replace(/^"|"$/g, '')}
         </Typography>
       );

client/src/components/MediaPreview/MediaPreview.tsx

@@ -102,14 +102,14 @@ const MediaPreview = (props: { value: string }) => {
         {isImg ? (
           <>
             <icons.img />
-            <Typography variant="mono" component="p" title={value}>
+            <Typography variant="mono" component="p" title={String(value)}>
               <a href={value} target="_blank">
                 {value}
               </a>
             </Typography>
           </>
         ) : (
-          <Typography variant="mono" component="p" title={value}>
+          <Typography variant="mono" component="p" title={String(value)}>
             {value}
           </Typography>
         )}

client/src/pages/databases/collections/schema/Schema.tsx

@@ -5,12 +5,7 @@ import AttuGrid from '@/components/grid/Grid';
 import { ColDefinitionsType } from '@/components/grid/Types';
 import { useTranslation } from 'react-i18next';
 import Icons from '@/components/icons/Icons';
-import {
-  formatFieldType,
-  formatNumber,
-  findKeyValue,
-  isVectorType,
-} from '@/utils';
+import { formatFieldType, formatNumber, findKeyValue } from '@/utils';
 import { dataContext, rootContext, systemContext } from '@/context';
 import IndexTypeElement from './IndexTypeElement';
 import { getLabelDisplayedRows } from '@/pages/search/Utils';
@@ -165,7 +160,7 @@ const Overview = () => {
       disablePadding: false,
       label: collectionTrans('nullable'),
       formatter(f) {
-        return f.nullable ? commonTrans('yes') : commonTrans('no');
+        return f.nullable && <Icons.check />;
       },
     },
     {

client/src/pages/databases/collections/schema/Styles.tsx

@@ -26,7 +26,7 @@ export const useStyles = makeStyles((theme: Theme) => ({
         marginRight: 8,
         textOverflow: 'ellipsis',
         overflow: 'hidden',
-        maxWidth: 140,
+        maxWidth: 150,
         fontWeight: 700,
       },
     },

client/src/pages/databases/collections/search/SearchInputBox.tsx

@@ -211,7 +211,6 @@ export default function SearchInputBox(props: SearchInputBoxProps) {
       editor.current = view;
     } else {
       if (editor.current.state.doc.toString() !== data) {
-        console.log('not equal');
         editor.current.dispatch({
           changes: {
             from: 0,