feat: update table view

Author: pomelo-nwu

packages/studio-explore/src/components/TableView/index.tsx

@@ -1,26 +1,57 @@
-import * as React from 'react';
-import { Table } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { Table, TableProps } from 'antd';
 import { useContext } from '@graphscope/studio-graph';
 import { getTable } from './getTableData';
 interface ITableViewProps {}
 
 const TableView: React.FunctionComponent<ITableViewProps> = props => {
-  const { store } = useContext();
-  const { source } = store;
+  const { store, updateStore } = useContext();
+  const { source, selectNodes, data } = store;
   const { dataSource, columns } = getTable([...source.nodes]);
+  const selectKeys = selectNodes.map(item => item.id);
+  const keys = selectKeys.join('__');
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(selectKeys);
+
+  useEffect(() => {
+    const ids = keys.split('__');
+    setSelectedRowKeys(ids);
+  }, [keys]);
+  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
+    setSelectedRowKeys(newSelectedRowKeys);
+    updateStore(draft => {
+      const newSelectNodes = data.nodes.filter(item => {
+        return newSelectedRowKeys.includes(item.id);
+      });
+      draft.selectNodes = newSelectNodes;
+      draft.nodeStatus = newSelectNodes.reduce((acc, cur) => {
+        acc[cur.id] = {
+          selected: true,
+        };
+        return acc;
+      }, {});
+    });
+  };
+
+  const rowSelection: TableProps<any>['rowSelection'] = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+  };
 
   return (
     <div>
       <Table
+        rowSelection={rowSelection}
         size="large"
         dataSource={dataSource}
         columns={columns}
         bordered
-        scroll={{ x: 'max-content' }}
+        // scroll={{ x: 'max-content' }}
         pagination={{
           simple: true,
           size: 'small',
+          pageSize: 10,
         }}
+        // scroll={{ x: 10000, y: 800 }}
       />
     </div>
   );

packages/studio-query/src/components/query-graph/queryStatement.tsx

@@ -8,6 +8,7 @@ export const queryStatement: IQueryStatement['query'] = async (script: string) =
   const query_initiation = storage.get<'Server' | 'Browser'>('query_initiation');
   const query_username = storage.get<string>('query_username');
   const query_password = storage.get<string>('query_password');
+  const query_initiation_service = storage.get<string>('query_initiation_service');
   try {
     const _params = {
       script,
@@ -16,8 +17,8 @@ export const queryStatement: IQueryStatement['query'] = async (script: string) =
       username: query_username,
       password: query_password,
     };
-    if (query_initiation === 'Server') {
-      return await fetch('/graph/query', {
+    if (query_initiation === 'Server' && query_initiation_service) {
+      return await fetch(query_initiation_service, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

packages/studio-query/src/statement/result/table.tsx

@@ -116,7 +116,14 @@ const GraphTable = ({ nodes, edges }) => {
     };
   });
 
-  return <Table style={{ width: '100%' }} columns={columns} dataSource={result} scroll={{ x: 500 }} />;
+  return (
+    <Table
+      columns={columns}
+      dataSource={result}
+      scroll={{ x: 'max-content' }}
+      pagination={{ simple: true, pageSize: 10, size: 'small' }}
+    />
+  );
 };
 
 const TableView: React.FunctionComponent<ITableViewProps> = props => {
@@ -172,12 +179,19 @@ const TableView: React.FunctionComponent<ITableViewProps> = props => {
   };
   /** table 表格 */
   let Content: React.ReactNode;
-  if (mode === 'table' && table.length !== 0) {
-    Content = <RowTable data={table} />;
-  }
-  if (mode === 'table' && table.length === 0 && raw.records.length !== 0) {
-    Content = <InteranctiveTable data={raw.records} />;
+  if (mode === 'table') {
+    if (nodes.length !== 0) {
+      Content = <GraphTable nodes={nodes} edges={edges} />;
+    }
+    if (table.length !== 0) {
+      Content = <RowTable data={table} />;
+    }
+    //@ts-ignore
+    if (table.length === 0 && raw.records.length !== 0 && window.GS_ENGINE_TYPE === 'interactive') {
+      Content = <InteranctiveTable data={raw.records} />;
+    }
   }
+
   return (
     <div style={{ overflowX: 'scroll' }}>
       <Flex justify="space-between" style={{ padding: '0px 10px 10px 10px' }} align="center">