From 435f477a97808b5e4b30c7906743792fff609b6e Mon Sep 17 00:00:00 2001 From: pomelo-nwu Date: Wed, 6 Nov 2024 11:45:35 +0800 Subject: [PATCH 1/3] feat: fix properties issue --- .../src/components/PropertiesPanel/index.tsx | 43 ++++++++++++------- 1 file changed, 27 insertions(+), 16 deletions(-) diff --git a/packages/studio-graph/src/components/PropertiesPanel/index.tsx b/packages/studio-graph/src/components/PropertiesPanel/index.tsx index eb2d7c67..e6841e91 100644 --- a/packages/studio-graph/src/components/PropertiesPanel/index.tsx +++ b/packages/studio-graph/src/components/PropertiesPanel/index.tsx @@ -43,6 +43,32 @@ const getSelectElement = (data, { nodeStatus, edgeStatus }) => { selectElement: null, }; }; +const getDataByProperties = properties => { + const dataSource = Object.entries(properties).map(item => { + const [key, value] = item; + return { + name: key, + dse: value, + }; + }); + + const FirstRow = dataSource[0]; + let columns: any[] = []; + if (FirstRow) { + columns = Object.keys(FirstRow).map(key => { + return { + title: key, + dataIndex: key, + key: key, + }; + }); + } + + return { + dataSource, + columns, + }; +}; const PropertiesPanel: React.FunctionComponent = props => { const { store, updateStore } = useContext(); @@ -55,6 +81,7 @@ const PropertiesPanel: React.FunctionComponent = props => } const { label, properties = {}, id } = selectElement; + const { dataSource, columns } = getDataByProperties(properties); const onChange = val => { const { properties, ...params } = val; @@ -72,22 +99,6 @@ const PropertiesPanel: React.FunctionComponent = props => }; const style = nodeStyle[id] || nodeStyle[label]; - const dataSource = Object.entries(properties).map(item => { - const [key, value] = item; - return { - name: key, - dse: value, - }; - }); - - const FirstRow = dataSource[0]; - const columns = Object.keys(FirstRow).map(key => { - return { - title: key, - dataIndex: key, - key: key, - }; - }); const title = type === 'node' ? 'Vertex Properties' : 'Edge Properties'; From 34204de4c414423e00afa0f9407ef58fb44d5f56 Mon Sep 17 00:00:00 2001 From: pomelo-nwu Date: Wed, 6 Nov 2024 12:19:17 +0800 Subject: [PATCH 2/3] feat: add fixed mode --- examples/graph-apps/src/index.tsx | 17 ++------- .../src/online-visual-tool/index.tsx | 6 ++- packages/studio-graph/src/app/query.tsx | 2 + .../src/components/FixedMode/index.tsx | 37 +++++++++++++++++++ .../studio-graph/src/components/index.tsx | 1 + 5 files changed, 47 insertions(+), 16 deletions(-) create mode 100644 packages/studio-graph/src/components/FixedMode/index.tsx diff --git a/examples/graph-apps/src/index.tsx b/examples/graph-apps/src/index.tsx index 0fb24554..1d0d1758 100644 --- a/examples/graph-apps/src/index.tsx +++ b/examples/graph-apps/src/index.tsx @@ -4,6 +4,7 @@ import { BrowserRouter, Routes, Route, Outlet, Navigate, useNavigate } from 'rea import { Flex, Card, Typography, Divider, Tag } from 'antd'; import { ConfigProvider, Skeleton, Space, Button } from 'antd'; import { GithubOutlined, ReadOutlined } from '@ant-design/icons'; +import { StudioProvier } from '@graphscope/studio-components'; // import locales from '../locales'; import { IntlProvider } from 'react-intl'; import PaperReading from './paper-reading'; @@ -136,25 +137,13 @@ const GraphApps: React.FunctionComponent = props => { }); return ( - + {routeComponents} - + ); }; diff --git a/examples/graph-apps/src/online-visual-tool/index.tsx b/examples/graph-apps/src/online-visual-tool/index.tsx index 6d60a793..eb077b69 100644 --- a/examples/graph-apps/src/online-visual-tool/index.tsx +++ b/examples/graph-apps/src/online-visual-tool/index.tsx @@ -2,7 +2,7 @@ import React, { useRef } from 'react'; import { Button, Divider } from 'antd'; -import { MultipleInstance, Section, useSection, Icons, FullScreen, SegmentedTabs } from '@graphscope/studio-components'; +import { Section, useSection, Icons, FullScreen, SegmentedTabs } from '@graphscope/studio-components'; import { Toolbar, SwitchEngine, @@ -21,6 +21,7 @@ import { CurvatureLinks, ClearCanvas, DagreMode, + FixedMode, } from '@graphscope/studio-graph'; interface QueryGraphProps { @@ -109,12 +110,13 @@ const PaperReading: React.FunctionComponent = props => { - + + diff --git a/packages/studio-graph/src/app/query.tsx b/packages/studio-graph/src/app/query.tsx index 8253f2c1..79101d96 100644 --- a/packages/studio-graph/src/app/query.tsx +++ b/packages/studio-graph/src/app/query.tsx @@ -30,6 +30,7 @@ import { DeleteLeafNodes, Export, BasicInteraction, + FixedMode, } from '../components'; import { Divider } from 'antd'; @@ -109,6 +110,7 @@ const QueryGraph: React.FunctionComponent = props => { + diff --git a/packages/studio-graph/src/components/FixedMode/index.tsx b/packages/studio-graph/src/components/FixedMode/index.tsx new file mode 100644 index 00000000..66078e1f --- /dev/null +++ b/packages/studio-graph/src/components/FixedMode/index.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import { Button, Tooltip } from 'antd'; +import { useContext } from '../../hooks/useContext'; +import { BranchesOutlined, PushpinOutlined } from '@ant-design/icons'; + +interface IDagreModeProps {} + +const FixedMode: React.FunctionComponent = props => { + const { store } = useContext(); + const { graph } = store; + const [globalFixed, setToogle] = React.useState(false); + const handleClick = () => { + if (graph) { + if (!globalFixed) { + graph.onNodeDragEnd(node => { + node.fx = node.x; + node.fy = node.y; + }); + } else { + graph.onNodeDragEnd(node => { + node.fx = null; + node.fy = null; + }); + } + } + setToogle(!globalFixed); + }; + const title = globalFixed ? 'unFixed nodes when dragging' : 'Fixed nodes when dragging'; + + return ( + +