feat: Add an illustration for portal

examples/graphy/src/app.tsx

@@ -1,6 +1,46 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './pages';
+
+import React, { Suspense, useEffect } from 'react';
+import { Routes, HashRouter, Route } from 'react-router-dom';
+
+import { ConfigProvider } from 'antd';
+
+import { IntlProvider } from 'react-intl';
+import { ROUTES, locales } from './index';
+import { Layout } from '@graphscope/studio-components';
+import { SIDE_MENU } from './pages/const';
+
+interface IPagesProps {}
+
+const App: React.FunctionComponent<IPagesProps> = props => {
+  const locale = 'en-US';
+  const messages = locales[locale];
+
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Menu: {
+            itemSelectedBg: '#ececec',
+            itemSelectedColor: '#191919',
+            collapsedWidth: 50,
+            collapsedIconSize: 14,
+          },
+        },
+      }}
+    >
+      <IntlProvider messages={messages} locale={locale}>
+        <HashRouter>
+          <Routes>
+            <Route path="/" element={<Layout sideMenu={[SIDE_MENU]} />}>
+              {ROUTES}
+            </Route>
+          </Routes>
+        </HashRouter>
+      </IntlProvider>
+    </ConfigProvider>
+  );
+};
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(<App />);

examples/graphy/src/index.tsx

@@ -1,2 +1,5 @@
 import GraphyApp from './pages';
+export { default as locales } from './locales';
+export { default as ROUTES } from './pages';
+export { SIDE_MENU } from './pages/const';
 export default GraphyApp;

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

@@ -3,4 +3,5 @@ export default {
   Dataset: 'Dataset',
   Explore: 'Explore',
   Apps: 'Apps',
+  Graphy: 'Graphy',
 };

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

@@ -3,4 +3,5 @@ export default {
   Dataset: '数据集',
   Explore: '图查询',
   Apps: '应用商城',
+  Graphy: 'Graphy',
 };

examples/graphy/src/pages/const.tsx

@@ -1,19 +1,14 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { SettingFilled, DatabaseOutlined, DeploymentUnitOutlined, AppstoreOutlined } from '@ant-design/icons';
+import { SettingFilled, FilePdfOutlined, DeploymentUnitOutlined, AppstoreOutlined } from '@ant-design/icons';
 
 import { MenuProps } from 'antd';
 
 export const SIDE_MENU: MenuProps['items'] = [
   {
-    label: <FormattedMessage id="Dataset" />,
+    label: <FormattedMessage id="Graphy" />,
     key: '/dataset',
-    icon: <DatabaseOutlined />,
-  },
-  {
-    label: <FormattedMessage id="Explore" />,
-    key: '/explore',
-    icon: <DeploymentUnitOutlined />,
+    icon: <FilePdfOutlined />,
   },
 ];
 

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

@@ -1,9 +1,9 @@
-const baseURL = 'http://localhost:9999/api';
 import { Utils } from '@graphscope/studio-components';
 import { KuzuDriver } from '../../kuzu-driver';
 import JSZip from 'jszip';
-const url = new URL(baseURL);
-// url.search = new URLSearchParams(params).toString();
+
+const baseURL = Utils.storage.get('graphy_endpoint') || 'http://localhost:9999/api';
+
 export const queryDataset = async () => {
   return fetch(baseURL + '/dataset', {
     method: 'GET',

examples/graphy/src/pages/index.tsx

@@ -1,11 +1,5 @@
-import React, { Suspense, useEffect } from 'react';
-import { BrowserRouter, Routes, Route, Navigate, Outlet, HashRouter } from 'react-router-dom';
-import { Layout } from '@graphscope/studio-components';
-import { SIDE_MENU } from './const';
-import { ConfigProvider } from 'antd';
-import locales from '../locales';
-import { IntlProvider } from 'react-intl';
-import PaperReading from '../pages/explore/paper-reading';
+import React, { Suspense } from 'react';
+import { Route, Navigate } from 'react-router-dom';
 
 /**  注册 服务 */
 import { registerServices } from '../pages/explore/paper-reading/components/registerServices';
@@ -56,69 +50,24 @@ const routes = [
     path: '/dataset/cluster',
     component: React.lazy(() => import('./dataset/cluster')),
   },
-  { path: '/explore', component: React.lazy(() => import('./explore')) },
 ];
 
-const Apps = () => {
-  const [isReady, setIsReady] = React.useState(false);
-  useEffect(() => {
-    reload().then(res => {
-      setIsReady(true);
-    });
-  }, []);
+const ROUTES = routes.map(({ path, redirect, component: Component }, index) => {
+  if (redirect) {
+    return <Route key={index} path={path} element={<Navigate to={redirect} replace />} />;
+  }
   return (
-    <>
-      <Outlet />
-      {isReady && <PaperReading />}
-    </>
+    <Route
+      key={index}
+      path={path}
+      element={
+        <Suspense fallback={<></>}>
+          {/** @ts-ignore */}
+          <Component />
+        </Suspense>
+      }
+    />
   );
-};
-const Pages: React.FunctionComponent<IPagesProps> = props => {
-  const locale = 'en-US';
-  const messages = locales[locale];
-  const routeComponents = routes.map(({ path, redirect, component: Component }, index) => {
-    if (redirect) {
-      return <Route key={index} path={path} element={<Navigate to={redirect} replace />} />;
-    }
-    return (
-      <Route
-        key={index}
-        path={path}
-        element={
-          <Suspense fallback={<></>}>
-            {/** @ts-ignore */}
-            <Component />
-          </Suspense>
-        }
-      />
-    );
-  });
+});
 
-  return (
-    <ConfigProvider
-      theme={{
-        components: {
-          Menu: {
-            itemSelectedBg: '#ececec',
-            itemSelectedColor: '#191919',
-            collapsedWidth: 50,
-            collapsedIconSize: 14,
-          },
-        },
-      }}
-    >
-      <IntlProvider messages={messages} locale={locale}>
-        <HashRouter>
-          <Routes>
-            <Route path="/" element={<Layout sideMenu={[SIDE_MENU]} />}>
-              {routeComponents}
-            </Route>
-            <Route path={'/paper-reading'} element={<Apps />} />
-          </Routes>
-        </HashRouter>
-      </IntlProvider>
-    </ConfigProvider>
-  );
-};
-
-export default Pages;
+export default ROUTES;

packages/studio-components/src/Illustration/DesignSchema.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { theme } from 'antd';
+
+export interface IJobProps {
+  style?: React.CSSProperties;
+}
+
+const DesignSchema: React.FunctionComponent<IJobProps> = props => {
+  const { style = {} } = props;
+  const { width = '200px', height = '200px' } = style;
+  const { token } = theme.useToken();
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      data-name="Layer 1"
+      width={width}
+      height={height}
+      viewBox="0 0 588.69777 669.94435"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <rect
+        x="423.81645"
+        y="264.02761"
+        width="328.14077"
+        height="2.00028"
+        transform="translate(-350.53274 274.31695) rotate(-35.38159)"
+        fill="#e6e6e6"
+      />
+      <rect x="136.5757" y="54.74316" width="284.89941" height="2" fill="#f2f2f2" />
+      <rect x="136.5757" y="100.74316" width="284.89941" height="2" fill="#f2f2f2" />
+      <rect x="136.5757" y="146.74316" width="284.89941" height="2" fill="#f2f2f2" />
+      <rect x="136.5757" y="192.74316" width="284.89941" height="2" fill="#f2f2f2" />
+      <rect x="136.5757" y="238.74316" width="284.89941" height="2" fill="#f2f2f2" />
+      <path
+        d="M752.884,402.6831H440.82691V115.02782h2V318.41058a82.27252,82.27252,0,0,0,82.27252,82.27252H752.884Z"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#e6e6e6"
+      />
+      <circle cx="284.17579" cy="160" r="85" fill={token.colorPrimary} />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#ffb6b6"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#3f3d56"
+      />
+      <circle cx="461.15217" cy="119.44882" r="32.40763" fill="#ffb6b6" />
+      <polygon
+        points="365.677 646.876 354.199 646.875 348.739 602.605 365.679 602.605 365.677 646.876"
+        fill="#ffb6b6"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#2f2e41"
+      />
+      <polygon points="570.695 596.294 561.935 603.71 529.163 573.45 542.092 562.505 570.695 596.294" fill="#ffb6b6" />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#2f2e41"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#f2f2f2"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#ccc"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#3f3d56"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#2f2e41"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#e6e6e6"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#ffb6b6"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#2f2e41"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#2f2e41"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill={token.colorPrimary}
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#f2f2f2"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#3f3d56"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#3f3d56"
+      />
+      <path
+        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"
+        transform="translate(-305.65112 -115.02782)"
+        fill="#e6e6e6"
+      />
+      <circle cx="216.53948" cy="407.06455" r="17.14286" fill={token.colorPrimary} />
+      <circle cx="132.53948" cy="407.06455" r="17.14286" fill={token.colorPrimary} opacity="0.7" />
+      <circle cx="56.53948" cy="423.06455" r="17.14286" fill={token.colorPrimary} opacity="0.25" />
+    </svg>
+  );
+};
+
+export default DesignSchema;