Skip to content

Commit 00bf53e

Browse files
pomelo-nwupomelo-nwu
authored
Merge pull request #714 from GraphScope/chore-0227
feat: Update exploration
2 parents 593aaaa + 1b3b30d commit 00bf53e

File tree

24 files changed

+372
-105
lines changed

24 files changed

+372
-105
lines changed

‎.github/workflows/deploy-portal-docs.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ jobs:
2525
- name: Install pnpm
2626
uses: pnpm/action-setup@v4
2727
with:
28-
version: 9
2928
run_install: false
3029

3130
- name: Cache pnpm modules

‎.github/workflows/npm-publish.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ jobs:
2020
- name: Install pnpm
2121
uses: pnpm/action-setup@v4
2222
with:
23-
version: 9
2423
run_install: false
2524

2625
- name: Cache pnpm modules

‎.github/workflows/prepare-publish.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ jobs:
2020
- name: Install pnpm
2121
uses: pnpm/action-setup@v4
2222
with:
23-
version: 9
2423
run_install: false
2524

2625
- name: Cache pnpm modules

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"engines": {
33
"node": "^18.19.1",
4-
"pnpm": "^9 || ^10"
4+
"pnpm": "^10||^9"
55
},
6+
"packageManager": "[email protected]",
67
"scripts": {
78
"prev": "pnpm i --force && rm -rf package-lock.json",
89
"start": "turbo run start",

‎packages/studio-driver/src/queryGraph.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,17 +49,17 @@ export const getDriver = async (params: Pick<QueryParams, 'endpoint' | 'password
4949
const id = `${language}_${endpoint}`;
5050
const unlock = await mutex.lock();
5151
if (!DriverMap.has(id)) {
52-
console.log("create new driver");
52+
console.log('create new driver');
5353
if (language === 'cypher') {
5454
const [engineId, datasetId] = endpoint.split('://');
5555
if (engineId === 'kuzu_wasm') {
5656
const driver = new KuzuDriver();
5757
await driver.initialize();
5858
const exist = await driver.existDataset(datasetId);
5959
if (exist) {
60-
console.log("start to use ", datasetId);
60+
console.log('start to use ', datasetId);
6161
await driver.use(datasetId);
62-
console.log("finish to use ", datasetId);
62+
console.log('finish to use ', datasetId);
6363
}
6464
DriverMap.set(id, driver);
6565
} else {
@@ -70,7 +70,6 @@ export const getDriver = async (params: Pick<QueryParams, 'endpoint' | 'password
7070
DriverMap.set(id, new GremlinDriver(endpoint, username, password));
7171
}
7272
}
73-
console.log("get driver: ", DriverMap.get(id));
7473
unlock();
7574
return DriverMap.get(id) as CypherDriver | GremlinDriver | KuzuDriver;
7675
};

‎packages/studio-explore/src/app.tsx‎

Lines changed: 50 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,15 @@ import {
6060
BranchesOutlined,
6161
CopyrightOutlined,
6262
OpenAIOutlined,
63+
DeploymentUnitOutlined,
6364
} from '@ant-design/icons';
6465
import { Divider, Flex, theme, Segmented, Tabs, Typography } from 'antd';
6566
import { getDefaultServices } from './services';
6667
import TableView from './components/TableView';
6768
import ExploreLocales from './locales';
6869

70+
import FloatContainer from './components/FloatContainer';
71+
6972
interface ExploreProps {
7073
id?: string;
7174
services?: any;
@@ -96,25 +99,25 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
9699
>
97100
<Section
98101
splitBorder
99-
rightSide={
100-
<SegmentedTabs
101-
queryKey="right"
102-
tableHeight={60}
103-
block
104-
items={[
105-
{
106-
key: 'Next',
107-
label: (
108-
<Flex vertical gap={0} align="center" style={{ paddingTop: '6px' }}>
109-
<BarChartOutlined style={{ fontSize: 17 }} />
110-
Next Query
111-
</Flex>
112-
),
113-
children: <Next />,
114-
},
115-
]}
116-
></SegmentedTabs>
117-
}
102+
// rightSide={
103+
// <SegmentedTabs
104+
// queryKey="right"
105+
// tableHeight={60}
106+
// block
107+
// items={[
108+
// {
109+
// key: 'Next',
110+
// label: (
111+
// <Flex vertical gap={0} align="center" style={{ paddingTop: '6px' }}>
112+
// <BarChartOutlined style={{ fontSize: 17 }} />
113+
// Next Query
114+
// </Flex>
115+
// ),
116+
// children: <Next />,
117+
// },
118+
// ]}
119+
// ></SegmentedTabs>
120+
// }
118121
autoResize={false}
119122
leftSideStyle={{
120123
width: '400px',
@@ -144,18 +147,29 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
144147
searchbar={<Searchbar />}
145148
direction="vertical"
146149
items={[
150+
{
151+
label: <Typography.Title level={3}>Next Query</Typography.Title>,
152+
icon: <DeploymentUnitOutlined style={{ fontSize: 17 }} />,
153+
children: <Next />,
154+
key: 'NextQuery',
155+
},
147156
{
148157
label: <Typography.Title level={3}>Statistics Analysis</Typography.Title>,
149158
icon: <BarChartOutlined style={{ fontSize: 17 }} />,
150-
children: <Statistics />,
159+
children: (
160+
<Flex vertical>
161+
<Statistics />
162+
<TableView />
163+
</Flex>
164+
),
151165
key: 'Statistics',
152166
},
153-
{
154-
label: <Typography.Title level={3}>Table View</Typography.Title>,
155-
icon: <TableOutlined />,
156-
children: <TableView />,
157-
key: 'TableView',
158-
},
167+
// {
168+
// label: <Typography.Title level={3}>Table View</Typography.Title>,
169+
// icon: <TableOutlined />,
170+
// children: <TableView />,
171+
// key: 'TableView',
172+
// },
159173
{
160174
label: <Typography.Title level={3}>Cluster Analysis</Typography.Title>,
161175
icon: <CopyrightOutlined />,
@@ -202,8 +216,6 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
202216
}
203217
></FloatTabs>
204218

205-
<ZoomStatus style={{ left: 350, opacity: 0.5 }} />
206-
207219
{/* <HoverMenu>
208220
<NeighborQuery />
209221
<CommonNeighbor />
@@ -212,20 +224,27 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
212224
</HoverMenu> */}
213225

214226
<ContextMenu>
215-
<RunAI />
216227
<NeighborQuery />
217228
{/* <CommonNeighbor /> */}
218229
<DeleteLeafNodes />
219230
<DeleteNode />
220231
</ContextMenu>
232+
<FloatContainer position="bottom">
233+
<ZoomStatus
234+
style={{
235+
opacity: 0.5,
236+
}}
237+
/>
238+
</FloatContainer>
221239

222240
<FloatToolbar>
223-
<ToogleRightButton />
224-
<Divider style={{ margin: '0px' }} />
241+
{/* <ToogleRightButton /> */}
242+
{/* <Divider style={{ margin: '0px' }} /> */}
225243
<Brush />
226244
<FixedMode />
227245
<ZoomFit />
228246
<FullScreen containerRef={containerRef} />
247+
<Divider style={{ margin: '0px' }} />
229248
<ClearCanvas />
230249
<ClearStatus trigger="button" />
231250
</FloatToolbar>

‎packages/studio-explore/src/components/ChartView/BarChart.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,23 @@ const BarChart: React.FunctionComponent<IBarChartProps> = props => {
1919
const { padding = [20, 80] } = style;
2020
const ChartContainerRef = useRef(null);
2121
const chart = useRef<Chart>();
22+
const current_data = useRef(new Map());
2223

2324
useEffect(() => {
25+
if (current_data) {
26+
current_data.current = new Map();
27+
}
2428
const handleClick = evt => {
25-
if (onClick) {
26-
onClick(evt);
29+
if (onClick && current_data.current) {
30+
const item = evt.data.data;
31+
const x = item[xField];
32+
if (current_data.current.has(x)) {
33+
current_data.current.delete(x);
34+
} else {
35+
current_data.current.set(x, item);
36+
}
37+
const values = [...current_data.current.values()];
38+
onClick(values);
2739
}
2840
};
2941
if (ChartContainerRef.current) {
@@ -65,7 +77,9 @@ const BarChart: React.FunctionComponent<IBarChartProps> = props => {
6577
},
6678
],
6779
transform: [{ type: 'stackY' }],
68-
interaction: { elementSelect: { single: true } },
80+
interaction: {
81+
elementSelect: { single: false },
82+
},
6983
state: { selected: { fill: '#1d6c63' }, unselected: { opacity: 0.99 } },
7084
...(options.transpose
7185
? {

‎packages/studio-explore/src/components/FloatContainer/index.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from 'react';
2+
import { Toolbar, useContext } from '@graphscope/studio-graph';
3+
interface IFloatToolbarProps {
4+
children: React.ReactNode;
5+
position?: 'top' | 'bottom';
6+
}
7+
8+
const FloatContainer: React.FunctionComponent<IFloatToolbarProps> = props => {
9+
const { children, position = 'top' } = props;
10+
const { store } = useContext();
11+
const { selectNodes, selectEdges } = store;
12+
const isSelect = selectNodes.length > 0 || selectEdges.length > 0;
13+
14+
return (
15+
<div
16+
style={{
17+
position: 'absolute',
18+
[position]: position === 'top' ? '20px' : '12px',
19+
right: isSelect ? '296px' : '12px',
20+
left: 'unset',
21+
zIndex: 9,
22+
transition: 'all 0.3 ease',
23+
}}
24+
>
25+
{children}
26+
</div>
27+
);
28+
};
29+
30+
export default FloatContainer;

‎packages/studio-explore/src/components/FloatTabs/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ const FloatTabs: React.FunctionComponent<IFloatTabsProps> = props => {
6868
activeKey: items[0].key,
6969
});
7070
const { visible } = state;
71-
const { width: panelWidth, handleMouseDown: handleResizeStart } = useResizeWidth(300);
71+
const { width: panelWidth, handleMouseDown: handleResizeStart } = useResizeWidth(360);
7272

7373
const handleToggle = () => {
7474
setState(preState => {

‎packages/studio-explore/src/components/Next/Neighbors/index.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const InspectNeighbor = props => {
4949
const queryNeighbors = async () => {
5050
const selectIds = selectedKey.split('__');
5151
const queryKey = `${id}_${selectedKey}`;
52-
if (!CacheData[queryKey] && selectIds.length!==0) {
52+
if (!CacheData[queryKey] && selectIds.length !== 0) {
5353
const script = `MATCH(a)-[b]-(c)
5454
where elementId(a) IN [${selectIds}]
5555
return a,b,c limit 50000
@@ -194,11 +194,25 @@ const InspectNeighbor = props => {
194194
});
195195
};
196196
const onChartClick = e => {
197-
console.log(e.data.data, e);
197+
const table_items = e.reduce(
198+
(acc, curr) => {
199+
return {
200+
items: [...acc.items, ...curr.items],
201+
counts: acc.counts + curr.counts,
202+
name: curr.name,
203+
};
204+
},
205+
{
206+
items: [],
207+
counts: 0,
208+
name: '',
209+
},
210+
);
211+
198212
setState(preState => {
199213
return {
200214
...preState,
201-
tableData: e.data.data,
215+
tableData: table_items,
202216
};
203217
});
204218
};

0 commit comments

Comments
 (0)