feat: update code

Author: pomelo-nwu

packages/studio-explore/src/app.tsx

@@ -122,7 +122,7 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
             <FetchGraph />
             <Placeholder />
             <Loading />
-            <PropertiesPanel />
+            <PropertiesPanel style={{ right: '12px' }} />
             <FloatTabs
               searchbar={<Searchbar />}
               direction="vertical"

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

@@ -174,7 +174,7 @@ const Searchbar: React.FunctionComponent<ISearchbarProps> = props => {
     });
     const data = await getService<IQuerySearch>('querySearch')({
       config: breadcrumb,
-      value: '',
+      value: state.words,
     });
 
     updateStore(draft => {

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

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { Button, Popover, Select } from 'antd';
+import { ControlOutlined } from '@ant-design/icons';
+import { Utils } from '@graphscope/studio-components';
+import { useContext } from '@graphscope/studio-graph';
+import { getTable } from './getTableData';
+interface IAdjustColumnsProps {
+  onChange: (columnIds: string[]) => void;
+}
+
+export function getTableColumns(columnIds: string[]) {
+  return columnIds.map(key => {
+    return {
+      title: key,
+      dataIndex: key,
+      key: key,
+      sorter: (a, b) => a[key] - b[key],
+    };
+  });
+}
+const AdjustColumns: React.FunctionComponent<IAdjustColumnsProps> = props => {
+  const { store } = useContext();
+  const { source } = store;
+  const { columns } = getTable(source.nodes);
+  const { onChange } = props;
+
+  const defaultColumnIds =
+    (Utils.storage.get('explore_table_view_column_ids') as string[]) || columns.map(item => item.key);
+  const [state, setState] = useState({
+    columnIds: defaultColumnIds,
+    tableColumns: getTableColumns(defaultColumnIds),
+  });
+  const { columnIds, tableColumns } = state;
+  const onChangeColumns = value => {
+    setState(preState => {
+      return {
+        ...preState,
+        columnIds: value,
+        tableColumns: getTableColumns(value),
+      };
+    });
+    Utils.storage.set('explore_table_view_column_ids', value);
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  const options = columns.map(item => {
+    return {
+      label: item.key,
+      value: item.key,
+    };
+  });
+
+  return (
+    <Popover
+      title="Select Display Columns"
+      arrow={false}
+      placement="bottomRight"
+      style={{ padding: '0px' }}
+      content={
+        <Select
+          // maxTagCount="responsive"
+          mode="multiple"
+          allowClear
+          style={{ width: '300px' }}
+          variant="borderless"
+          placeholder="Adjust Table Columns"
+          value={columnIds}
+          onChange={onChangeColumns}
+          options={options}
+        />
+      }
+    >
+      <Button style={{ padding: '12px 0px' }} type="text" icon={<ControlOutlined />}></Button>
+    </Popover>
+  );
+};
+
+export default React.memo(AdjustColumns);

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Button, Dropdown, Typography, MenuProps } from 'antd';
+import { MoreOutlined, PlayCircleOutlined } from '@ant-design/icons';
+import { useContext } from '@graphscope/studio-graph';
+interface ISaveSelectedProps {}
+
+const SaveSelected: React.FunctionComponent<ISaveSelectedProps> = props => {
+  const { store, updateStore } = useContext();
+  const { selectNodes } = store;
+
+  const handleChangeData = () => {
+    updateStore(draft => {
+      draft.data.nodes = selectNodes;
+      const matchIds = selectNodes.map(item => item.id);
+      const newEdges = draft.data.edges.filter(item => {
+        const { source, target } = item;
+        const matchSource = matchIds.indexOf(typeof source === 'object' ? source.id : source) !== -1;
+        const matchTarget = matchIds.indexOf(typeof target === 'object' ? target.id : target) !== -1;
+        return matchSource && matchTarget;
+      });
+
+      draft.data.edges = newEdges;
+      draft.source.nodes = selectNodes;
+      draft.source.edges = newEdges;
+    });
+  };
+  const items: MenuProps['items'] = [
+    {
+      key: 'save',
+      label: <Typography.Text onClick={handleChangeData}>Save Selected Nodes</Typography.Text>,
+      icon: <PlayCircleOutlined />,
+    },
+  ];
+  return (
+    <Dropdown menu={{ items }} placement="bottomRight">
+      <Button type="text" icon={<MoreOutlined />}></Button>
+    </Dropdown>
+  );
+};
+
+export default SaveSelected;

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

@@ -1,22 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import { Table, TableProps, Flex, Typography, Button, Popover, Select } from 'antd';
+import { Table, Flex, Typography, Space } from 'antd';
 import { useContext } from '@graphscope/studio-graph';
 import { getTable } from './getTableData';
-import { ControlOutlined } from '@ant-design/icons';
+
+import SaveSelected from './SaveSelected';
+import { getTableColumns } from './AdjustColumns';
+import AdjustColumns from './AdjustColumns';
 import { Utils } from '@graphscope/studio-components';
 interface ITableViewProps {}
 
-const TableView: React.FunctionComponent<ITableViewProps> = props => {
+const useRowSelection = () => {
   const { store, updateStore } = useContext();
-  const { source, selectNodes, data } = store;
-  const { dataSource, columns } = getTable([...source.nodes]);
+  const { selectNodes, data } = store;
   const selectKeys = selectNodes.map(item => item.id);
   const keys = selectKeys.join('__');
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(selectKeys);
-  const [state, setState] = useState({
-    columnIds: (Utils.storage.get('explore_table_view_column_ids') as string[]) || columns.map(item => item.key),
-  });
-  const { columnIds } = state;
 
   useEffect(() => {
     const ids = keys.split('__');
@@ -37,59 +35,49 @@ const TableView: React.FunctionComponent<ITableViewProps> = props => {
       }, {});
     });
   };
-
-  const rowSelection: TableProps<any>['rowSelection'] = {
+  return {
+    onSelectChange,
     selectedRowKeys,
-    onChange: onSelectChange,
   };
+};
+
+const TableView: React.FunctionComponent<ITableViewProps> = props => {
+  const { store } = useContext();
+  const { selectNodes, data, source } = store;
+  const { dataSource, columns } = getTable(source.nodes);
+  const { selectedRowKeys, onSelectChange } = useRowSelection();
+
+  const [state, setState] = useState({
+    columnIds: (Utils.storage.get('explore_table_view_column_ids') as string[]) || columns.map(item => item.key),
+  });
+  const { columnIds } = state;
 
-  const content = <div>ddd</div>;
   const handleChangeColumns = value => {
-    console.log('value', value);
     setState(preState => {
       return {
         ...preState,
         columnIds: value,
       };
     });
-    Utils.storage.set('explore_table_view_column_ids', value);
   };
-  const options = columns.map(item => {
-    return {
-      label: item.key,
-      value: item.key,
-    };
-  });
-  const tableColumns = columnIds.map(key => {
-    return {
-      title: key,
-      dataIndex: key,
-      key: key,
-      sorter: (a, b) => a[key] - b[key],
-    };
-  });
+  const tableColumns = getTableColumns(columnIds);
 
   return (
     <Flex vertical gap={12}>
       <Flex justify="space-between" align="center">
-        <Typography.Text type="secondary">{data.nodes.length + data.edges.length} records</Typography.Text>
-        <Select
-          suffixIcon={<ControlOutlined />}
-          maxTagCount="responsive"
-          mode="multiple"
-          allowClear
-          style={{ width: '160px' }}
-          placeholder="Adjust Columns"
-          value={columnIds}
-          onChange={handleChangeColumns}
-          options={options}
-        />
-        {/* <Popover placement="bottomRight" title={'x'} content={content} trigger="click">
-          <Button icon={<SettingOutlined />} type="text"></Button>
-        </Popover> */}
+        <Typography.Text type="secondary">
+          Total {data.nodes.length} node items, {selectNodes.length} selected.
+        </Typography.Text>
+        <Space size={0}>
+          <AdjustColumns onChange={handleChangeColumns} />
+          <SaveSelected />
+        </Space>
       </Flex>
       <Table
-        rowSelection={rowSelection}
+        rowSelection={{
+          selectedRowKeys,
+          onChange: onSelectChange,
+        }}
         size="large"
         dataSource={dataSource}
         columns={tableColumns}
@@ -100,7 +88,6 @@ const TableView: React.FunctionComponent<ITableViewProps> = props => {
           size: 'small',
           pageSize: 10,
         }}
-        // scroll={{ x: 10000, y: 800 }}
       />
     </Flex>
   );

packages/studio-graph/src/components/ClearStatus/index.tsx

@@ -9,9 +9,18 @@ const ClearStatus: React.FunctionComponent<IClearStatatusProps> = props => {
   useEffect(() => {
     const handleClear = e => {
       updateStore(draft => {
+        const isEmpty =
+          Object.keys(draft.nodeStatus).length === 0 &&
+          Object.keys(draft.edgeStatus).length === 0 &&
+          draft.selectNodes.length === 0 &&
+          draft.selectEdges.length === 0;
+
+        if (isEmpty) {
+          return;
+        }
         draft.nodeStatus = {};
         draft.edgeStatus = {};
-        draft.focusNodes = [];
+        // draft.focusNodes = [];
         draft.selectNodes = [];
         draft.selectEdges = [];
       });

packages/studio-graph/src/components/PropertiesPanel/PropertiesTable.tsx

@@ -9,7 +9,7 @@ interface IPropertiesTableProps {
   style?: React.CSSProperties;
   title?: string;
 }
-import { width } from './index';
+
 const PropertiesTable: React.FunctionComponent<IPropertiesTableProps> = props => {
   const { data, style = {}, title } = props;
   const { dataSource, columns } = getTable(data);

packages/studio-graph/src/components/PropertiesPanel/PropertyInfo.tsx

@@ -9,29 +9,21 @@ import { Utils } from '@graphscope/studio-components';
 interface IPropertyInfoProps {
   style?: React.CSSProperties;
   noTitle?: boolean;
+  data: NodeData | EdgeData;
 }
 
 const PropertyInfo: React.FunctionComponent<IPropertyInfoProps> = props => {
-  const { style, noTitle } = props;
+  const { style, noTitle, data } = props;
   const { store, updateStore } = useContext();
-
-  const { nodeStyle, selectNodes, selectEdges } = store;
-
-  if (selectEdges.length === 0 && selectNodes.length === 0) {
-    return null;
-  }
-
-  const node = selectNodes[0];
-  const edge = selectEdges[0];
-  const type = node ? 'node' : 'edge';
-  const data = node ? node : edge;
+  const { nodeStyle } = store;
 
   const { id, label, properties = {} } = data as EdgeData;
   //@ts-ignore
   const source = data.source && data.source.id;
   //@ts-ignore
   const target = data.target && data.target.id;
   const elementStyle = nodeStyle[id] || nodeStyle[String(label)];
+  const type = source && target ? 'edge' : 'node';
   const title = type === 'node' ? 'Vertex Properties' : 'Edge Properties';
 
   const onChange = val => {