Skip to content

Commit bf13c19

Browse files
pomelo-nwupomelo-nwu
authored
Merge pull request #597 from GraphScope/add-plugin
feat: Add graphy into experimental tools
2 parents ed48808 + c2e8e4a commit bf13c19

File tree

15 files changed

+253
-127
lines changed

15 files changed

+253
-127
lines changed

‎examples/graphy/src/app.tsx‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,46 @@
1-
import React from 'react';
21
import ReactDOM from 'react-dom/client';
3-
import App from './pages';
2+
3+
import React, { Suspense, useEffect } from 'react';
4+
import { Routes, HashRouter, Route } from 'react-router-dom';
5+
6+
import { ConfigProvider } from 'antd';
7+
8+
import { IntlProvider } from 'react-intl';
9+
import { ROUTES, locales } from './index';
10+
import { Layout } from '@graphscope/studio-components';
11+
import { SIDE_MENU } from './pages/const';
12+
13+
interface IPagesProps {}
14+
15+
const App: React.FunctionComponent<IPagesProps> = props => {
16+
const locale = 'en-US';
17+
const messages = locales[locale];
18+
19+
return (
20+
<ConfigProvider
21+
theme={{
22+
components: {
23+
Menu: {
24+
itemSelectedBg: '#ececec',
25+
itemSelectedColor: '#191919',
26+
collapsedWidth: 50,
27+
collapsedIconSize: 14,
28+
},
29+
},
30+
}}
31+
>
32+
<IntlProvider messages={messages} locale={locale}>
33+
<HashRouter>
34+
<Routes>
35+
<Route path="/" element={<Layout sideMenu={[SIDE_MENU]} />}>
36+
{ROUTES}
37+
</Route>
38+
</Routes>
39+
</HashRouter>
40+
</IntlProvider>
41+
</ConfigProvider>
42+
);
43+
};
444

545
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
646
root.render(<App />);

‎examples/graphy/src/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
import GraphyApp from './pages';
2+
export { default as locales } from './locales';
3+
export { default as ROUTES } from './pages';
4+
export { SIDE_MENU } from './pages/const';
25
export default GraphyApp;

‎examples/graphy/src/locales/en-US.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ export default {
33
Dataset: 'Dataset',
44
Explore: 'Explore',
55
Apps: 'Apps',
6+
Graphy: 'Graphy',
67
};

‎examples/graphy/src/locales/zh-CN.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ export default {
33
Dataset: '数据集',
44
Explore: '图查询',
55
Apps: '应用商城',
6+
Graphy: 'Graphy',
67
};

‎examples/graphy/src/pages/const.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
import React, { useState } from 'react';
22
import { FormattedMessage } from 'react-intl';
3-
import { SettingFilled, DatabaseOutlined, DeploymentUnitOutlined, AppstoreOutlined } from '@ant-design/icons';
3+
import { SettingFilled, FilePdfOutlined, DeploymentUnitOutlined, AppstoreOutlined } from '@ant-design/icons';
44

55
import { MenuProps } from 'antd';
66

77
export const SIDE_MENU: MenuProps['items'] = [
88
{
9-
label: <FormattedMessage id="Dataset" />,
9+
label: <FormattedMessage id="Graphy" />,
1010
key: '/dataset',
11-
icon: <DatabaseOutlined />,
12-
},
13-
{
14-
label: <FormattedMessage id="Explore" />,
15-
key: '/explore',
16-
icon: <DeploymentUnitOutlined />,
11+
icon: <FilePdfOutlined />,
1712
},
1813
];
1914

‎examples/graphy/src/pages/dataset/service.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
const baseURL = 'http://localhost:9999/api';
21
import { Utils } from '@graphscope/studio-components';
32
import { KuzuDriver } from '../../kuzu-driver';
43
import JSZip from 'jszip';
5-
const url = new URL(baseURL);
6-
// url.search = new URLSearchParams(params).toString();
4+
5+
const baseURL = Utils.storage.get('graphy_endpoint') || 'http://localhost:9999/api';
6+
77
export const queryDataset = async () => {
88
return fetch(baseURL + '/dataset', {
99
method: 'GET',

‎examples/graphy/src/pages/index.tsx‎

Lines changed: 18 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
import React, { Suspense, useEffect } from 'react';
2-
import { BrowserRouter, Routes, Route, Navigate, Outlet, HashRouter } from 'react-router-dom';
3-
import { Layout } from '@graphscope/studio-components';
4-
import { SIDE_MENU } from './const';
5-
import { ConfigProvider } from 'antd';
6-
import locales from '../locales';
7-
import { IntlProvider } from 'react-intl';
8-
import PaperReading from '../pages/explore/paper-reading';
1+
import React, { Suspense } from 'react';
2+
import { Route, Navigate } from 'react-router-dom';
93

104
/** 注册 服务 */
115
import { registerServices } from '../pages/explore/paper-reading/components/registerServices';
@@ -56,69 +50,24 @@ const routes = [
5650
path: '/dataset/cluster',
5751
component: React.lazy(() => import('./dataset/cluster')),
5852
},
59-
{ path: '/explore', component: React.lazy(() => import('./explore')) },
6053
];
6154

62-
const Apps = () => {
63-
const [isReady, setIsReady] = React.useState(false);
64-
useEffect(() => {
65-
reload().then(res => {
66-
setIsReady(true);
67-
});
68-
}, []);
55+
const ROUTES = routes.map(({ path, redirect, component: Component }, index) => {
56+
if (redirect) {
57+
return <Route key={index} path={path} element={<Navigate to={redirect} replace />} />;
58+
}
6959
return (
70-
<>
71-
<Outlet />
72-
{isReady && <PaperReading />}
73-
</>
60+
<Route
61+
key={index}
62+
path={path}
63+
element={
64+
<Suspense fallback={<></>}>
65+
{/** @ts-ignore */}
66+
<Component />
67+
</Suspense>
68+
}
69+
/>
7470
);
75-
};
76-
const Pages: React.FunctionComponent<IPagesProps> = props => {
77-
const locale = 'en-US';
78-
const messages = locales[locale];
79-
const routeComponents = routes.map(({ path, redirect, component: Component }, index) => {
80-
if (redirect) {
81-
return <Route key={index} path={path} element={<Navigate to={redirect} replace />} />;
82-
}
83-
return (
84-
<Route
85-
key={index}
86-
path={path}
87-
element={
88-
<Suspense fallback={<></>}>
89-
{/** @ts-ignore */}
90-
<Component />
91-
</Suspense>
92-
}
93-
/>
94-
);
95-
});
71+
});
9672

97-
return (
98-
<ConfigProvider
99-
theme={{
100-
components: {
101-
Menu: {
102-
itemSelectedBg: '#ececec',
103-
itemSelectedColor: '#191919',
104-
collapsedWidth: 50,
105-
collapsedIconSize: 14,
106-
},
107-
},
108-
}}
109-
>
110-
<IntlProvider messages={messages} locale={locale}>
111-
<HashRouter>
112-
<Routes>
113-
<Route path="/" element={<Layout sideMenu={[SIDE_MENU]} />}>
114-
{routeComponents}
115-
</Route>
116-
<Route path={'/paper-reading'} element={<Apps />} />
117-
</Routes>
118-
</HashRouter>
119-
</IntlProvider>
120-
</ConfigProvider>
121-
);
122-
};
123-
124-
export default Pages;
73+
export default ROUTES;

‎packages/studio-website/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@graphscope/studio-query": "workspace:*",
3535
"@graphscope/studio-server": "workspace:*",
3636
"@graphscope/use-zustand": "workspace:*",
37+
"@graphscope/graphy-website": "workspace:*",
3738
"@uiw/react-codemirror": "^4.21.21",
3839
"antd": "^5.17.0",
3940
"js-yaml": "^4.1.0",

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import Pages from './pages';
4+
import { installSlot, unInstallSlot } from './slots';
5+
import { SIDE_MENU } from './layouts/const';
6+
import { ROUTES } from './pages';
7+
import { Utils } from '@graphscope/studio-components';
8+
import { ROUTES as GRAPHY_ROUTES, SIDE_MENU as GRAPHY_SIDE_MENU } from '@graphscope/graphy-website';
9+
10+
if (Utils.storage.get('PORTAL_PLUGIN_GRAPHY')) {
11+
installSlot('SIDE_MEU', 'graphy', GRAPHY_SIDE_MENU);
12+
installSlot('ROUTES', 'graphy', GRAPHY_ROUTES);
13+
} else {
14+
unInstallSlot('SIDE_MEU', 'graphy');
15+
unInstallSlot('ROUTES', 'graphy');
16+
}
17+
18+
installSlot('SIDE_MEU', 'studio', SIDE_MENU);
19+
installSlot('ROUTES', 'studio', ROUTES);
420

521
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
622
root.render(<Pages />);

‎packages/studio-website/src/layouts/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { DeploymentApiFactory } from '@graphscope/studio-server';
66
import { SIDE_MENU, SETTING_MENU } from './const';
77
import { notification } from 'antd';
88
import { listGraphs } from '../pages/instance/lists/service';
9-
import { SLOTS } from '../slots';
9+
import { SLOTS, getSlots } from '../slots';
1010

1111
export default function StudioLayout() {
1212
const { store, updateStore } = useContext();
@@ -109,7 +109,9 @@ export default function StudioLayout() {
109109
}, []);
110110

111111
const { isReady } = state;
112-
const _SIDE = [...(SIDE_MENU || []), ...(SLOTS.SIDE_MEU || [])];
112+
113+
const _SIDE = getSlots('SIDE_MEU');
114+
113115
const { layoutBackground } = useCustomToken();
114116
if (isReady) {
115117
return (

0 commit comments

Comments
 (0)