Skip to content

Commit 3136523

Browse files
pomelo-nwupomelo-nwu
authored
Merge pull request #591 from GraphScope/feat-illustration
feat: Add an illustration for portal
2 parents 7cdeeec + dd4cb55 commit 3136523

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+3355
-230
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-components/src/Illustration/DesignSchema.tsx‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
import * as React from 'react';
2+
import { theme } from 'antd';
3+
4+
export interface IJobProps {
5+
style?: React.CSSProperties;
6+
}
7+
8+
const DesignSchema: React.FunctionComponent<IJobProps> = props => {
9+
const { style = {} } = props;
10+
const { width = '200px', height = '200px' } = style;
11+
const { token } = theme.useToken();
12+
13+
return (
14+
<svg
15+
xmlns="http://www.w3.org/2000/svg"
16+
data-name="Layer 1"
17+
width={width}
18+
height={height}
19+
viewBox="0 0 588.69777 669.94435"
20+
xmlnsXlink="http://www.w3.org/1999/xlink"
21+
>
22+
<rect
23+
x="423.81645"
24+
y="264.02761"
25+
width="328.14077"
26+
height="2.00028"
27+
transform="translate(-350.53274 274.31695) rotate(-35.38159)"
28+
fill="#e6e6e6"
29+
/>
30+
<rect x="136.5757" y="54.74316" width="284.89941" height="2" fill="#f2f2f2" />
31+
<rect x="136.5757" y="100.74316" width="284.89941" height="2" fill="#f2f2f2" />
32+
<rect x="136.5757" y="146.74316" width="284.89941" height="2" fill="#f2f2f2" />
33+
<rect x="136.5757" y="192.74316" width="284.89941" height="2" fill="#f2f2f2" />
34+
<rect x="136.5757" y="238.74316" width="284.89941" height="2" fill="#f2f2f2" />
35+
<path
36+
d="M752.884,402.6831H440.82691V115.02782h2V318.41058a82.27252,82.27252,0,0,0,82.27252,82.27252H752.884Z"
37+
transform="translate(-305.65112 -115.02782)"
38+
fill="#e6e6e6"
39+
/>
40+
<circle cx="284.17579" cy="160" r="85" fill={token.colorPrimary} />
41+
<path
42+
d="M712.98956,269.9863l64.93764,50.25309a13.25354,13.25354,0,0,0,18.45681-2.26032l0,0a13.25355,13.25355,0,0,0-2.69318-19.04441l-69.05462-50.13271-40.676-32.2313a11.56563,11.56563,0,1,0-12.21949,8.4268Z"
43+
transform="translate(-305.65112 -115.02782)"
44+
fill="#ffb6b6"
45+
/>
46+
<path
47+
d="M610.82691,342.02782a86,86,0,1,1,86-86A86.09759,86.09759,0,0,1,610.82691,342.02782Zm0-170c6.51331,32.2299-84,37.68212-84,84a84.095,84.095,0,0,0,84,84c46.31787,0,84.96142-37.69212,84-84C693.86377,209.63868,604.31359,139.79792,610.8269,172.02783Z"
48+
transform="translate(-305.65112 -115.02782)"
49+
fill="#3f3d56"
50+
/>
51+
<circle cx="461.15217" cy="119.44882" r="32.40763" fill="#ffb6b6" />
52+
<polygon
53+
points="365.677 646.876 354.199 646.875 348.739 602.605 365.679 602.605 365.677 646.876"
54+
fill="#ffb6b6"
55+
/>
56+
<path
57+
d="M636.68528,778.83814a4.88192,4.88192,0,0,0,4.851,4.86068h21.60622l.66943-1.38737,3.05613-6.30625,1.18361,6.30625.262,1.38737h8.14959l-.11642-1.39708-2.17322-26.05943-2.84266-.17463L659.04828,755.34l-3.01735-.18434v7.781C653.74129,765.37186,635.7733,774.579,636.68528,778.83814Z"
58+
transform="translate(-305.65112 -115.02782)"
59+
fill="#2f2e41"
60+
/>
61+
<polygon points="570.695 596.294 561.935 603.71 529.163 573.45 542.092 562.505 570.695 596.294" fill="#ffb6b6" />
62+
<path
63+
d="M860.849,746.631a4.88191,4.88191,0,0,0,6.843.57534l16.49023-13.96069-.38551-1.49141-1.74224-6.78774,4.97808,4.04826,1.09638.88959,6.2199-5.26579-.99156-.99105L874.86058,705.1627l-2.2824,1.70348-9.84447,7.381-2.422,1.80894,5.02762,5.93857C865.16532,725.33268,857.401,743.96959,860.849,746.631Z"
64+
transform="translate(-305.65112 -115.02782)"
65+
fill="#2f2e41"
66+
/>
67+
<path
68+
d="M576.87242,767.28486a2.26934,2.26934,0,0,1-1.64468-3.93332l.15549-.6182q-.03071-.07427-.06178-.14839a6.09416,6.09416,0,0,0-11.24139.04177c-1.83858,4.42817-4.17942,8.86389-4.75579,13.54594a18.02893,18.02893,0,0,0,.31648,6.20047,72.28153,72.28153,0,0,1-6.57515-30.02077,69.76621,69.76621,0,0,1,.43275-7.783q.3585-3.17779.9947-6.31033a73.119,73.119,0,0,1,14.50012-30.98962,19.459,19.459,0,0,0,8.093-8.39652,14.84318,14.84318,0,0,0,1.34992-4.05618c-.394.05168-1.48556-5.94866-1.18841-6.3168-.54906-.83317-1.53177-1.24732-2.13143-2.06034-2.98233-4.0434-7.09121-3.33741-9.23621,2.15727-4.58224,2.31266-4.62659,6.14806-1.815,9.83683,1.78878,2.34681,2.03456,5.52232,3.60408,8.03478-.16151.20671-.32944.407-.4909.61366a73.59114,73.59114,0,0,0-7.681,12.16859,30.59227,30.59227,0,0,0-1.82641-14.20958c-1.74819-4.21732-5.0249-7.76915-7.91045-11.415a6.27921,6.27921,0,0,0-11.184,3.08333q-.00886.08063-.01732.16119.6429.36267,1.25864.76992a3.0782,3.0782,0,0,1-1.24107,5.60174l-.06276.00968a30.62792,30.62792,0,0,0,.80734,4.57937c-3.7018,14.31579,4.29011,19.5299,15.70147,19.76413.25191.12916.49738.25832.74929.38108a75.11519,75.11519,0,0,0-4.04327,19.02779,71.24344,71.24344,0,0,0,.05168,11.50323l-.01939-.13562a18.82561,18.82561,0,0,0-6.4266-10.87028c-4.94561-4.06264-11.93282-5.55869-17.26826-8.82425a3.533,3.533,0,0,0-5.41121,3.43708l.02182.14261a20.67541,20.67541,0,0,1,2.31871,1.11733q.6429.36276,1.25864.76992a3.07824,3.07824,0,0,1-1.24107,5.6018l-.06282.00964c-.0452.00646-.084.01295-.12911.01944a30.65441,30.65441,0,0,0,5.63854,8.82922c2.31463,12.49713,12.256,13.68283,22.89022,10.04354h.00648a75.09324,75.09324,0,0,0,5.0444,14.72621h18.02019c.06463-.20022.12274-.40693.18089-.60717a20.47477,20.47477,0,0,1-4.98629-.297c1.337-1.64059,2.674-3.29409,4.011-4.93462a1.12244,1.12244,0,0,0,.084-.09689c.67817-.8396,1.36282-1.67283,2.041-2.51246l.00036-.001a29.99039,29.99039,0,0,0-.87876-7.63984Z"
69+
transform="translate(-305.65112 -115.02782)"
70+
fill="#f2f2f2"
71+
/>
72+
<path
73+
d="M523.281,783.78217a1.18647,1.18647,0,0,0,1.19007,1.19h253.29a1.19,1.19,0,1,0,0-2.38h-253.29A1.18651,1.18651,0,0,0,523.281,783.78217Z"
74+
transform="translate(-305.65112 -115.02782)"
75+
fill="#ccc"
76+
/>
77+
<path
78+
d="M611.52963,231.67143a.75738.75738,0,0,0-1.4071.00019,64.29322,64.29322,0,0,1-7.14923,13.20312.76156.76156,0,0,0,.87811,1.16382l5.97443-2.16144v36.98395h2v-36.984l5.97662,2.16174a.76153.76153,0,0,0,.87805-1.16381A64.3524,64.3524,0,0,1,611.52963,231.67143Z"
79+
transform="translate(-305.65112 -115.02782)"
80+
fill="#3f3d56"
81+
/>
82+
<path
83+
d="M779.57293,421.72451l-78.31362-20.26393s-38.4324,48.56724-40.4324,106.56724c-.10241,2.97,1.46446,6.69072-.26777,10.34536s2.31391,10.56062-.20916,13.60763-3.67474,5.6597-.0989,9.35336-6.23452,162.40908-9.91437,168.37822c-4.5098,7.31543,3.92238,13.00825-.29371,16.16184s-.21609,12.15359-.21609,12.15359h22L703.27331,621.836s19.81988-53.93552,16.44339-60.75691,2.57618-9.51877,2.57618-9.51877,5.14407-2.18426,2.0957-7.74344,6.43833-23.78909,6.43833-23.78909c-4.27319-.5554,2.04877,56.02376,27.53856,106.98157,18.64663,37.27734,50.7149,47.32484,52.46144,54.01843,3.86963,14.83014,22.69717-1.409,17,10s12,10,12,10l20-16-61-75-6.56963-79.754s-3.49555-1.09326-1.463-5.16965-4.7541-3.60792-2.36075-8.34216-3.98775-4.50092-2.2972-8.11758-1.99007-7.03227-1.99007-7.03227,9.62371-32.69828-8.09784-56.39133Z"
84+
transform="translate(-305.65112 -115.02782)"
85+
fill="#2f2e41"
86+
/>
87+
<path
88+
d="M680.34021,437.25773s14-32,18-36,17.4867-11.22991,14.4867-14.22991-8.9612-1.21259-3.9806-6.60629,8.81085-15.874,8.81085-15.874l-4.317-50.28978,23-29,14.4867-14.22991,35.34087-2.29133,1.97852,20.29677s32.64587,16.87645,25.16324,49.43551-20.96933,36.789-16.96933,76.789c.44551,4.45511-17.308-1.12727-13.5133.77009C784.82691,417.02782,794,435,788,439a56.58062,56.58062,0,0,1-12,6C745.2807,420.73732,713.85223,409.6461,680.34021,437.25773Z"
89+
transform="translate(-305.65112 -115.02782)"
90+
fill="#e6e6e6"
91+
/>
92+
<path
93+
d="M664.17648,337.33553l78.79493-23.10044a13.25353,13.25353,0,0,0,8.99877-16.27221l0,0a13.25355,13.25355,0,0,0-17.002-8.993l-81.113,26.50493L603.889,329.50248a11.56562,11.56562,0,1,0-.34565,14.83939Z"
94+
transform="translate(-305.65112 -115.02782)"
95+
fill="#ffb6b6"
96+
/>
97+
<path
98+
d="M803.47527,213.7325c4.5089-16.43894-44.63344-30.53566-54.1832-17.29735-1.32793-1.88209-6.23537-3.02529-8.487-2.44794a17.55962,17.55962,0,0,0-5.99286,3.41791c-2.54034,1.95144-5.173,3.97215-6.73181,6.778-1.57044,2.79433-1.81288,6.60488.30016,9.02971,1.67432,1.92831,4.61644,12.1754,7.13366,12.68347,1.75509.35795,3.23313.64663,4.50327.85446,1.13164-1.6512,4.0173-3.72539,3.80946-5.723,1.70892,1.13158,1.08459,3.12247.74,5.1572-1.14728,6.77554-26.99591,59.22522-12.19116,43.7695a31.02748,31.02748,0,0,0,5.36934,2.41327,67.51881,67.51881,0,0,0,8.37152-18.24414l.01357.12179a14.38447,14.38447,0,0,0,10.38705,12.0362c22.223,6.43809,40.19894-3.00889,46.38269-20.045-2.26364-4.5957-3.25-4.09654-3.04719-4.2332a5.32052,5.32052,0,0,1,7.92434,2.525c.35811.93877.68358,1.74025.96557,2.3433C811.96426,235.34778,815.79583,237.01109,803.47527,213.7325Z"
99+
transform="translate(-305.65112 -115.02782)"
100+
fill="#2f2e41"
101+
/>
102+
<path
103+
d="M788.14432,201.80557l-2.27-11.60525a4.62994,4.62994,0,0,1,.068-2.92541,3.13873,3.13873,0,0,1,3.28212-1.4375c1.26411.18254,2.20961,1.33722,3.4673,1.55957,4.3728.77306,10.15295-3.54614,11.71972,7.38059.65326,4.55577,7.92282,5.037,10.3506,8.94688s2.72583,9.55351-.58749,12.74779c-2.64618,2.55113-6.89587,2.84558-10.33276,1.54239s-6.19517-3.93546-8.60456-6.71132-4.59122-5.77968-7.37035-8.1853"
104+
transform="translate(-305.65112 -115.02782)"
105+
fill="#2f2e41"
106+
/>
107+
<path
108+
d="M805.2063,219.457c-8.86767-1.23877-14.91211-4.46386-17.96533-9.585-3.99609-6.70361-1.31933-14.085-1.20361-14.396l1.87451.69677c-.0249.06788-2.45312,6.82471,1.05762,12.69239,2.731,4.56445,8.28711,7.46191,16.51318,8.61133Z"
109+
transform="translate(-305.65112 -115.02782)"
110+
fill={token.colorPrimary}
111+
/>
112+
<path
113+
d="M334.80775,561.36143c5.51929-11.454,19.83837-17.83312,32.04509-14.276,6.87631,2.00384,12.644,6.608,18.96674,9.97269s14.16693,5.45429,20.52715,2.16088c10.93249-5.661,10.26587-22.56248,19.7748-30.38209,6.32913-5.20473,15.616-4.96148,23.43858-2.52137s14.97614,6.748,22.84954,9.01885A47.43653,47.43653,0,0,0,515.3739,526.17q.17478-.14754.34469-.29725a8.77138,8.77138,0,0,1,14.59667,6.79111l-1.47505,53.59385h-193Z"
114+
transform="translate(-305.65112 -115.02782)"
115+
fill="#f2f2f2"
116+
/>
117+
<path
118+
d="M504.18964,551.7038a.75739.75739,0,0,0-.00019-1.40711,64.29274,64.29274,0,0,1-13.20312-7.14923.76156.76156,0,0,0-1.16382.87811L491.984,550H455v2h36.984l-2.16174,5.97662a.76154.76154,0,0,0,1.16381.87806A64.35144,64.35144,0,0,1,504.18964,551.7038Z"
119+
transform="translate(-305.65112 -115.02782)"
120+
fill="#3f3d56"
121+
/>
122+
<path
123+
d="M420.98351,542.07116a.75739.75739,0,0,0-.8521-1.11977,64.29334,64.29334,0,0,1-14.83661,2.30415.76156.76156,0,0,0-.39458,1.40351l5.33753,3.44621-29.43451,22.39246,1.21093,1.59175,29.43455-22.3925,1.89816,6.06549a.76154.76154,0,0,0,1.45788-.00583A64.35191,64.35191,0,0,1,420.98351,542.07116Z"
124+
transform="translate(-305.65112 -115.02782)"
125+
fill="#3f3d56"
126+
/>
127+
<path
128+
d="M536.44109,463.38h-208.63a22.17533,22.17533,0,0,0-22.16,22.15V598.86a22.19244,22.19244,0,0,0,22.16,22.17h208.63a22.186,22.186,0,0,0,22.16-22.17V485.53A22.16892,22.16892,0,0,0,536.44109,463.38Zm19.72,135.48a19.72775,19.72775,0,0,1-19.72,19.72h-174.6a53.08067,53.08067,0,0,1-7.17-.48h-.01c-.18-.02-.37-.05-.55-.08-26.03-3.73-46.02-103.13-46.02-130.19v-2.3a19.74491,19.74491,0,0,1,19.72-19.71h208.63a19.73853,19.73853,0,0,1,19.72,19.71Z"
129+
transform="translate(-305.65112 -115.02782)"
130+
fill="#e6e6e6"
131+
/>
132+
<circle cx="216.53948" cy="407.06455" r="17.14286" fill={token.colorPrimary} />
133+
<circle cx="132.53948" cy="407.06455" r="17.14286" fill={token.colorPrimary} opacity="0.7" />
134+
<circle cx="56.53948" cy="423.06455" r="17.14286" fill={token.colorPrimary} opacity="0.25" />
135+
</svg>
136+
);
137+
};
138+
139+
export default DesignSchema;

0 commit comments

Comments
 (0)