feat: support layout settings

Author: pomelo-nwu

packages/studio-explore/src/app.tsx

@@ -28,6 +28,7 @@ import {
   LayoutSwitch,
   ZoomStatus,
   registerIcons,
+  LayoutSetting,
 } from '@graphscope/studio-graph';
 
 import { ToogleLeftButton, ToogleRightButton } from './components/ToggleButton';
@@ -52,6 +53,8 @@ import {
   CodeOutlined,
   CodeTwoTone,
   TabletOutlined,
+  BranchesOutlined,
+  CopyrightOutlined,
 } from '@ant-design/icons';
 import { Divider, Flex, theme, Segmented, Tabs, Typography } from 'antd';
 import { getDefaultServices } from './services';
@@ -138,21 +141,28 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
                 },
                 {
                   label: <Typography.Title level={3}>Cluster Analysis</Typography.Title>,
-                  icon: <GroupOutlined />,
+                  icon: <CopyrightOutlined />,
                   children: <ClusterAnalysis />,
                   key: 'ClusterAnalysis',
                 },
+
+                {
+                  label: <Typography.Title level={3}>Cypher Query</Typography.Title>,
+                  icon: <CodeOutlined />,
+                  children: <CypherQuery />,
+                  key: 'CypherQuery',
+                },
                 {
                   label: <Typography.Title level={3}>Style Setting</Typography.Title>,
                   icon: <BgColorsOutlined />,
                   children: <StyleSetting />,
                   key: 'StyleSetting',
                 },
                 {
-                  label: <Typography.Title level={3}>Cypher Query</Typography.Title>,
-                  icon: <CodeOutlined />,
-                  children: <CypherQuery />,
-                  key: 'CypherQuery',
+                  label: <Typography.Title level={3}>Layout Setting</Typography.Title>,
+                  icon: <BranchesOutlined />,
+                  children: <LayoutSetting />,
+                  key: 'LayoutSetting',
                 },
               ]}
               tools={
@@ -163,10 +173,8 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
                   <ZoomFit />
                   <Brush />
                   <FixedMode />
-                  <Divider style={{ margin: '0px' }} />
-                  <CurvatureLinks />
-                  <DagreMode />
-                  <LayoutSwitch />
+                  {/* <Divider style={{ margin: '0px' }} />
+                  <CurvatureLinks /> */}
                   <Divider style={{ margin: '0px' }} />
                   <SwitchEngine />
                   <RunCluster />

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

@@ -22,7 +22,11 @@ const CypherQuery: React.FunctionComponent<IStatementQueryProps> = props => {
   return (
     <Flex vertical gap={12}>
       <Typography.Text italic>You can write Cypher queries here to retrieve data.</Typography.Text>
-      <Input.TextArea rows={10} ref={inputRef} defaultValue={`Match (n) return n limit 100`}></Input.TextArea>
+      <Input.TextArea
+        rows={10}
+        ref={inputRef}
+        defaultValue={`Match (a)-[r]-(b) return a,r,b limit 100`}
+      ></Input.TextArea>
       <Space>
         <Button icon={<PlayCircleOutlined />} block onClick={handleQuery}>
           Query

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

@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Table, TableProps } from 'antd';
+import { Table, TableProps, Flex, Typography, Button, Popover, Select } from 'antd';
 import { useContext } from '@graphscope/studio-graph';
 import { getTable } from './getTableData';
+import { ControlOutlined } from '@ant-design/icons';
+import { Utils } from '@graphscope/studio-components';
 interface ITableViewProps {}
 
 const TableView: React.FunctionComponent<ITableViewProps> = props => {
@@ -11,6 +13,10 @@ const TableView: React.FunctionComponent<ITableViewProps> = props => {
   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,13 +43,56 @@ const TableView: React.FunctionComponent<ITableViewProps> = props => {
     onChange: onSelectChange,
   };
 
+  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],
+    };
+  });
+
   return (
-    <div>
+    <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> */}
+      </Flex>
       <Table
         rowSelection={rowSelection}
         size="large"
         dataSource={dataSource}
-        columns={columns}
+        columns={tableColumns}
         bordered
         // scroll={{ x: 'max-content' }}
         pagination={{
@@ -53,7 +102,7 @@ const TableView: React.FunctionComponent<ITableViewProps> = props => {
         }}
         // scroll={{ x: 10000, y: 800 }}
       />
-    </div>
+    </Flex>
   );
 };
 

packages/studio-graph/src/components/LayoutSetting/Params.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { Slider, Button, Typography, Flex, Select, Input, InputNumber } from 'antd';
+import { useContext } from '../../';
+
+interface ILayoutParamsProps {}
+
+const LayoutParams: React.FunctionComponent<ILayoutParamsProps> = props => {
+  const { store, updateStore } = useContext();
+  const { graph, data, layout } = store;
+  const { type, options } = layout;
+  const handleChange = (key, value) => {
+    updateStore(draft => {
+      if (draft.layout.options[key] !== value) {
+        draft.layout.options = { ...draft.layout.options, [key]: value };
+      }
+    });
+  };
+  if (type === 'force') {
+    const { linkDistance = 35, centerStrength = 1 } = options;
+    return (
+      <Flex vertical gap={12}>
+        <Typography.Text strong>Link distance</Typography.Text>
+        <Input
+          defaultValue={linkDistance}
+          onBlur={e => {
+            console.log(e.target.value);
+            handleChange('linkDistance', e.target.value);
+          }}
+        ></Input>
+        <Typography.Text strong>Center Strength</Typography.Text>
+        <InputNumber
+          style={{ width: '100%' }}
+          min={0}
+          max={1}
+          defaultValue={centerStrength}
+          onBlur={e => {
+            console.log(e.target.value);
+            handleChange('centerStrength', e.target.value);
+          }}
+        ></InputNumber>
+      </Flex>
+    );
+  }
+  if (type === 'force-dagre') {
+    const { direction = 'lr' } = options;
+    return (
+      <Flex vertical gap={12}>
+        <Typography.Text strong>Direction</Typography.Text>
+        <Select
+          options={[
+            {
+              label: 'top-down',
+              value: 'td',
+            },
+            {
+              label: 'left-right',
+              value: 'lr',
+            },
+            {
+              label: 'bottom-up',
+              value: 'bu',
+            },
+            {
+              label: 'right-left',
+              value: 'rl',
+            },
+            {
+              lable: 'inwards-radially',
+              value: 'radialin',
+            },
+            {
+              label: 'outwards-radially',
+              value: 'radialout',
+            },
+          ]}
+          value={direction}
+          onChange={value => {
+            handleChange('direction', value);
+          }}
+        ></Select>
+      </Flex>
+    );
+  }
+
+  return <div></div>;
+};
+
+export default LayoutParams;

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

@@ -1,20 +1,47 @@
 import React, { useEffect, useState } from 'react';
-import { Slider, Button, Typography } from 'antd';
+import { Slider, Button, Typography, Flex, Select } from 'antd';
 import { useContext } from '../../';
 import * as d3 from 'd3-force-3d';
 import { Utils } from '@graphscope/studio-components';
-
+import LayoutParams from './Params';
 interface ILayoutSettingProps {}
 
+const layouts = [
+  {
+    type: 'force',
+    options: {},
+  },
+  {
+    type: 'force-combo',
+    options: {},
+  },
+  {
+    type: 'force-dagre',
+    options: {},
+  },
+  {
+    type: 'dagre',
+    options: {},
+  },
+  {
+    type: 'circle-pack',
+    options: {},
+  },
+  {
+    type: 'preset',
+    options: {},
+  },
+];
+const layoutOptions = layouts.map(item => {
+  return {
+    label: item.type,
+    value: item.type,
+  };
+});
 const LayoutSetting: React.FunctionComponent<ILayoutSettingProps> = props => {
-  const { store } = useContext();
-  const { graph, data } = store;
-  const [state, setState] = useState({
-    linkStrength: 1,
-    linkDistance: 100,
-  });
-
-  const { linkStrength } = state;
+  const { store, updateStore } = useContext();
+  const { graph, data, layout } = store;
+  const { type, options } = layout;
 
   const onChangeForcelink = strength => {
     if (graph) {
@@ -47,13 +74,26 @@ const LayoutSetting: React.FunctionComponent<ILayoutSettingProps> = props => {
       graph.d3ReheatSimulation();
     }
   };
+  const onChangeType = value => {
+    updateStore(draft => {
+      draft.layout = {
+        type: value,
+        options: {},
+      };
+    });
+  };
 
   return (
-    <div>
-      <Typography.Text>Force Link</Typography.Text>
-      <Slider defaultValue={0.5} max={1} min={0} step={0.01} onChangeComplete={onChangeForcelink} />
-      <Button onClick={onReset}>reset</Button>
-    </div>
+    <Flex vertical gap={12}>
+      <Typography.Text type="secondary" italic>
+        you can fine-tune the layout parameters here to optimize the graph display.
+      </Typography.Text>
+
+      <Typography.Text strong>Layout Algorithm</Typography.Text>
+      <Select options={layoutOptions} value={type} onChange={onChangeType} />
+
+      <LayoutParams />
+    </Flex>
   );
 };
 

packages/studio-graph/src/graph/hooks/useDataAndLayout.tsx

@@ -61,9 +61,9 @@ export const useDataAndLayout = () => {
       graph.cooldownTime(renderTime);
       if (type === 'force') {
         (graph as ForceGraphInstance)
-          .d3Force('center', d3ForceCenter().strength(1))
+          .d3Force('center', d3ForceCenter().strength(options.centerStrength || 1))
           .d3Force('charge', d3ForceManyBody())
-          .d3Force('link', d3ForceLink().distance(35))
+          .d3Force('link', d3ForceLink().distance(options.linkDistance || 35))
           .d3Force(
             'collide',
             d3ForceCollide().radius(node => {
@@ -76,7 +76,7 @@ export const useDataAndLayout = () => {
         graph.d3ReheatSimulation();
       }
       if (type === 'force-dagre') {
-        graph.dagMode('lr');
+        graph.dagMode(options.direction || 'lr');
         graph.graphData({ nodes, links });
       }
       if (type === 'force-combo') {