attu/client/src/pages/preview/Preview.tsx

import { FC, useEffect, useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import AttuGrid from '../../components/grid/Grid';
import { getQueryStyles } from '../query/Styles';
import { CollectionHttp } from '../../http/Collection';
import { FieldHttp } from '../../http/Field';
import { IndexHttp } from '../../http/Index';
import { usePaginationHook } from '../../hooks/Pagination';
import CopyButton from '../../components/advancedSearch/CopyButton';
import { ToolBarConfig } from '../../components/grid/Types';
import CustomToolBar from '../../components/grid/ToolBar';
import { DataTypeStringEnum } from '../collections/Types';
import { generateVector } from '../../utils/Common';
import { DataTypeEnum } from '../../pages/collections/Types';

import {
  INDEX_CONFIG,
  DEFAULT_SEARCH_PARAM_VALUE_MAP,
} from '../../consts/Milvus';

const Preview: FC<{
  collectionName: string;
}> = ({ collectionName }) => {
  const [fields, setFields] = useState<any[]>([]);
  const [tableLoading, setTableLoading] = useState<any>();
  const [queryResult, setQueryResult] = useState<any>();
  const [primaryKey, setPrimaryKey] = useState<string>('');
  const { t: commonTrans } = useTranslation();
  const { t: collectionTrans } = useTranslation('collection');

  const copyTrans = commonTrans('copy');

  const classes = getQueryStyles();
  // Format result list
  const queryResultMemo = useMemo(
    () =>
      queryResult?.map((resultItem: { [key: string]: any }) => {
        // Iterate resultItem keys, then format vector(array) items.
        const tmp = Object.keys(resultItem).reduce(
          (prev: { [key: string]: any }, item: string) => {
            if (Array.isArray(resultItem[item])) {
              const list2Str = JSON.stringify(resultItem[item]);
              prev[item] = (
                <div className={classes.vectorTableCell}>
                  <div>{list2Str}</div>
                  <CopyButton
                    label={copyTrans.label}
                    value={list2Str}
                    className={classes.copyBtn}
                  />
                </div>
              );
            } else {
              prev[item] = `${resultItem[item]}`;
            }
            return prev;
          },
          {}
        );
        return tmp;
      }),
    [queryResult, classes.vectorTableCell, classes.copyBtn, copyTrans.label]
  );

  const {
    pageSize,
    handlePageSize,
    currentPage,
    handleCurrentPage,
    total,
    data: result,
  } = usePaginationHook(queryResultMemo || []);

  const handlePageChange = (e: any, page: number) => {
    handleCurrentPage(page);
  };

  const loadData = async (collectionName: string) => {
    // get schema list
    const schemaList = await FieldHttp.getFields(collectionName);
    const nameList = schemaList.map(v => ({
      name: v.name,
      type: v.data_type,
    }));

    const id = schemaList.find(v => v._isPrimaryKey === true);
    const primaryKey = id?._fieldName || '';
    const delimiter = id?.data_type === 'Int64' ? '' : '"';

    const vectorField = schemaList.find(
      v => v.data_type === 'FloatVector' || v.data_type === 'BinaryVector'
    );

    const anns_field = vectorField?._fieldName!;
    const dim = Number(vectorField?._dimension);
    const vectors = [generateVector(dim)];
    // get search params
    const indexesInfo = await IndexHttp.getIndexInfo(collectionName);
    const indexType =
      indexesInfo.length == 0 ? 'FLAT' : indexesInfo[0]._indexType;
    const indexConfig = INDEX_CONFIG[indexType];
    const metric_type =
      indexesInfo.length === 0 ? 'L2' : indexesInfo[0]._metricType;
    const searchParamKey = indexConfig.search[0];
    const searchParamValue = DEFAULT_SEARCH_PARAM_VALUE_MAP[searchParamKey];
    const searchParam = { [searchParamKey]: searchParamValue };
    const params = `${JSON.stringify(searchParam)}`;
    setPrimaryKey(primaryKey);

    // set fields
    setFields(nameList);

    // set loading
    setTableLoading(true);

    try {
      // first, search random data to get random id
      const searchRes = await CollectionHttp.vectorSearchData(collectionName, {
        search_params: {
          topk: 100,
          anns_field,
          metric_type,
          params,
        },
        expr: '',
        vectors,
        output_fields: [primaryKey],
        vector_type: DataTypeEnum[vectorField!._fieldType],
      });

      // compose random id list expression
      const expr = `${primaryKey} in [${searchRes.results
        .map((d: any) => `${delimiter}${d.id}${delimiter}`)
        .join(',')}]`;

      // query by random id
      const res = await CollectionHttp.queryData(collectionName, {
        expr: expr,
        output_fields: nameList.map(i => i.name),
      });

      const result = res.data;
      setQueryResult(result);
    } catch (err) {
      setQueryResult([]);
    } finally {
      setTableLoading(false);
    }
  };

  // Get fields at first or collection name changed.
  useEffect(() => {
    collectionName && loadData(collectionName);
  }, [collectionName]);

  const toolbarConfigs: ToolBarConfig[] = [
    {
      type: 'iconBtn',
      onClick: () => {
        loadData(collectionName);
      },
      label: collectionTrans('refresh'),
      icon: 'refresh',
    },
  ];

  return (
    <div className={classes.root}>
      <CustomToolBar toolbarConfigs={toolbarConfigs} />

      <AttuGrid
        toolbarConfigs={[]}
        colDefinitions={fields.map(i => ({
          id: i.name,
          align: 'left',
          disablePadding: false,
          label: i.name,
        }))}
        primaryKey={primaryKey}
        openCheckBox={false}
        isLoading={!!tableLoading}
        rows={result}
        rowCount={total}
        page={currentPage}
        onChangePage={handlePageChange}
        rowsPerPage={pageSize}
        setRowsPerPage={handlePageSize}
      />
    </div>
  );
};

export default Preview;