Merge pull request #602 from zilliztech/ui

ui: add field type tooltip on data/search grid title

client/src/pages/databases/collections/CollectionColHeader.tsx

@@ -0,0 +1,35 @@
+import { CollectionFullObject } from '@server/types';
+import CustomToolTip from '@/components/customToolTip/CustomToolTip';
+import { formatFieldType } from '@/utils';
+import Icons from '@/components/icons/Icons';
+import { makeStyles, Theme } from '@material-ui/core';
+import { ColDefinitionsType } from '@/components/grid/Types';
+
+export const style = makeStyles((theme: Theme) => ({
+  icon: {
+    fontSize: '14px',
+    marginLeft: theme.spacing(0.5),
+    verticalAlign: '-3px',
+  },
+}));
+
+const CollectionColHeader = (props: {
+  def: ColDefinitionsType;
+  collection: CollectionFullObject;
+}) => {
+  const { def, collection } = props;
+  const title = def.label;
+  const field = collection.schema.fields.find(f => f.name === title);
+  const classes = style();
+
+  return (
+    <>
+      {title}
+      <CustomToolTip title={field ? formatFieldType(field) : (title as string)}>
+        <Icons.question classes={{ root: classes.icon }} />
+      </CustomToolTip>
+    </>
+  );
+};
+
+export default CollectionColHeader;

client/src/pages/databases/collections/data/CollectionData.tsx

@@ -30,6 +30,7 @@ import { CollectionObject, CollectionFullObject } from '@server/types';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
 import CustomInput from '@/components/customInput/CustomInput';
 import CustomMultiSelector from '@/components/customSelector/CustomMultiSelector';
+import CollectionColHeader from '../CollectionColHeader';
 
 export interface CollectionDataProps {
   collectionName: string;
@@ -519,13 +520,20 @@ const CollectionData = (props: CollectionDataProps) => {
                       return cellData;
                   }
                 },
-                field: collection.schema.fields.find(f => f.name === i),
+                headerFormatter: v => {
+                  return (
+                    <CollectionColHeader def={v} collection={collection} />
+                  );
+                },
                 getStyle: d => {
-                  if (!d || !d.field) {
+                  const field = collection.schema.fields.find(
+                    f => f.name === i
+                  );
+                  if (!d || !field) {
                     return {};
                   }
                   return {
-                    minWidth: getColumnWidth(d.field),
+                    minWidth: getColumnWidth(field),
                   };
                 },
                 label: i === DYNAMIC_FIELD ? searchTrans('dynamicFields') : i,

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

@@ -41,6 +41,7 @@ import { DYNAMIC_FIELD } from '@/consts';
 import { ColDefinitionsType } from '@/components/grid/Types';
 import { CollectionObject, CollectionFullObject } from '@server/types';
 import CodeDialog from '@/pages/dialogs/CodeDialog';
+import CollectionColHeader from '../CollectionColHeader';
 
 export interface CollectionDataProps {
   collectionName: string;
@@ -239,33 +240,24 @@ const Search = (props: CollectionDataProps) => {
             return !invalidItems.includes(item) && orderArray.includes(item);
           })
           .map(key => {
-            // find the field
-            const field = searchParams.collection.schema!.scalarFields.find(
-              f => f.name === key
-            );
             return {
               id: key,
               align: 'left',
               disablePadding: false,
               label: key === DYNAMIC_FIELD ? searchTrans('dynamicFields') : key,
               needCopy: key !== 'score',
-              field: field,
+              headerFormatter: v => {
+                return <CollectionColHeader def={v} collection={collection} />;
+              },
               getStyle: d => {
-                if (!d || !d.field) {
+                const field = collection.schema.fields.find(
+                  f => f.name === key
+                );
+                if (!d || !field) {
                   return {};
                 }
-                if (d.id === 'score') {
-                  return {
-                    minWidth: 180,
-                  };
-                }
-                if (d.id === DYNAMIC_FIELD) {
-                  return {
-                    minWidth: 180,
-                  };
-                }
                 return {
-                  minWidth: getColumnWidth(d.field),
+                  minWidth: getColumnWidth(field),
                 };
               },
             };

client/src/utils/Format.ts

@@ -10,8 +10,7 @@ import {
   CreateField,
 } from '@/pages/databases/collections/Types';
 import { FieldObject } from '@server/types';
-import { generateVector } from './';
-import { get } from 'http';
+import { generateVector } from '.';
 
 /**
  * transform large capacity to capacity in b.
@@ -320,7 +319,7 @@ export const getColumnWidth = (field: FieldObject): number => {
 
     case DataTypeStringEnum.VarChar:
       const varCharWidth = field.maxLength * 10;
-      return varCharWidth > 350 ? 350 : varCharWidth; 
+      return varCharWidth > 350 ? 350 : varCharWidth;
 
     case DataTypeStringEnum.Bool:
       return 80;