feat: fix select all

packages/studio-explore/src/components/Next/Neighbors/TableView.tsx

@@ -8,6 +8,7 @@ import { NodeData } from '@graphscope/studio-graph';
 import { PlayCircleOutlined } from '@ant-design/icons';
 import { FullScreen, Utils } from '@graphscope/studio-components';
 import AdjustColumns, { getTableColumns } from '../../TableView/AdjustColumns';
+import SelectAll from '../../TableView/SelectAll';
 
 export interface IPropertiesPanelProps {
   items: NodeData[];
@@ -74,10 +75,11 @@ const TableView: React.FunctionComponent<IPropertiesPanelProps> = props => {
         <Typography.Text type="secondary">
           Total {counts} data items, {selectedRowKeys.length} selected.
         </Typography.Text>
-        <Space>
+        <Space size={0}>
           <Tooltip title="Appand selected items to the graph">
             <Button icon={<PlayCircleOutlined />} type="text" onClick={handleClick}></Button>
           </Tooltip>
+          {/* <SelectAll /> */}
           <AdjustColumns onChange={handleChangeColumns} />
           <FullScreen containerRef={containerRef} />
         </Space>

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Button, Dropdown, Typography, MenuProps, Tooltip, Checkbox } from 'antd';
+import { MoreOutlined, PlayCircleOutlined } from '@ant-design/icons';
+import { useContext, useApis } from '@graphscope/studio-graph';
+interface ISaveSelectedProps {}
+
+const SelectAll: React.FunctionComponent<ISaveSelectedProps> = props => {
+  const { store, updateStore } = useContext();
+  const { selectNodes, data } = store;
+
+  const handleChange = e => {
+    const { checked } = e.target;
+    updateStore(draft => {
+      const newSelectedNodes = checked ? data.nodes : [];
+      draft.selectNodes = newSelectedNodes;
+      draft.nodeStatus = newSelectedNodes.reduce((acc, cur) => {
+        acc[cur.id] = {
+          selected: true,
+        };
+        return acc;
+      }, {});
+    });
+  };
+
+  const indeterminate = selectNodes.length > 0 && selectNodes.length < data.nodes.length;
+  const checkAll = selectNodes.length === data.nodes.length;
+
+  return (
+    <Tooltip title="Check all items" placement="top">
+      <Button
+        type="text"
+        icon={<Checkbox onChange={handleChange} indeterminate={indeterminate} checked={checkAll}></Checkbox>}
+      ></Button>
+    </Tooltip>
+  );
+};
+
+export default SelectAll;

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

@@ -6,6 +6,7 @@ import { getTable } from './getTableData';
 import SaveSelected from './SaveSelected';
 import { getTableColumns } from './AdjustColumns';
 import AdjustColumns from './AdjustColumns';
+import SelectAll from './SelectAll';
 import { Utils } from '@graphscope/studio-components';
 interface ITableViewProps {}
 
@@ -60,7 +61,7 @@ const TableView: React.FunctionComponent<ITableViewProps> = props => {
       };
     });
   };
-    /** filter cloumns end */
+  /** filter cloumns end */
 
   return (
     <Flex vertical gap={12}>
@@ -69,6 +70,7 @@ const TableView: React.FunctionComponent<ITableViewProps> = props => {
           Total {data.nodes.length} node items, {selectNodes.length} selected.
         </Typography.Text>
         <Space size={0}>
+          <SelectAll />
           <AdjustColumns onChange={handleChangeColumns} />
           <SaveSelected />
         </Space>