feat: Add Coodinator setting

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-website/package.json

@@ -34,6 +34,7 @@
     "@graphscope/studio-query": "workspace:*",
     "@graphscope/studio-server": "workspace:*",
     "@graphscope/use-zustand": "workspace:*",
+    "@graphscope/graphy-website": "workspace:*",
     "@uiw/react-codemirror": "^4.21.21",
     "antd": "^5.17.0",
     "js-yaml": "^4.1.0",

packages/studio-website/src/app.tsx

@@ -1,6 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import Pages from './pages';
+import { installSlot, unInstallSlot } from './slots';
+import { SIDE_MENU } from './layouts/const';
+import { ROUTES } from './pages';
+import { Utils } from '@graphscope/studio-components';
+import { ROUTES as GRAPHY_ROUTES, SIDE_MENU as GRAPHY_SIDE_MENU } from '@graphscope/graphy-website';
+
+if (Utils.storage.get('PORTAL_PLUGIN_GRAPHY')) {
+  installSlot('SIDE_MEU', 'graphy', GRAPHY_SIDE_MENU);
+  installSlot('ROUTES', 'graphy', GRAPHY_ROUTES);
+} else {
+  unInstallSlot('SIDE_MEU', 'graphy');
+  unInstallSlot('ROUTES', 'graphy');
+}
+
+installSlot('SIDE_MEU', 'studio', SIDE_MENU);
+installSlot('ROUTES', 'studio', ROUTES);
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(<Pages />);

packages/studio-website/src/components/setting-parcel/index.tsx

@@ -14,21 +14,17 @@ type ISettingParcelProps = {
 const SettingParcel: React.FunctionComponent<ISettingParcelProps> = props => {
   const { title, text, style = { margin: '0px  24px 0px 0px' }, leftModule, rightModule, children } = props;
   return (
-    <Row>
-      <Col span={8}>
-        <Flex vertical>
-          <Title level={3} style={style}>
-            <FormattedMessage id={title} />
-          </Title>
-          <Text>
-            <FormattedMessage id={text} />
-          </Text>
-        </Flex>
-      </Col>
-      {leftModule && <Col span={4}>{leftModule}</Col>}
-      {rightModule && <Col span={8}>{rightModule}</Col>}
-      {children && <Col>{children}</Col>}
-    </Row>
+    <Flex vertical gap={12}>
+      <Title level={5} style={style}>
+        <FormattedMessage id={title} />
+      </Title>
+      <Text type="secondary">
+        <FormattedMessage id={text} />
+      </Text>
+      {leftModule && leftModule}
+      {rightModule && rightModule}
+      {children && children}
+    </Flex>
   );
 };
 

packages/studio-website/src/global.d.ts

@@ -1,3 +1,4 @@
 interface Window {
   GS_ENGINE_TYPE: 'groot' | 'interactive' | 'gart';
+  COORDINATOR_URL: string;
 }

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

@@ -6,7 +6,7 @@ import { DeploymentApiFactory } from '@graphscope/studio-server';
 import { SIDE_MENU, SETTING_MENU } from './const';
 import { notification } from 'antd';
 import { listGraphs } from '../pages/instance/lists/service';
-import { SLOTS } from '../slots';
+import { SLOTS, getSlots } from '../slots';
 
 export default function StudioLayout() {
   const { store, updateStore } = useContext();
@@ -16,7 +16,7 @@ export default function StudioLayout() {
     engineType: 'interactive',
   });
   const depolymentInfo = async () => {
-    return await DeploymentApiFactory(undefined, location.origin)
+    return await DeploymentApiFactory(undefined, window.COORDINATOR_URL)
       .getDeploymentInfo()
       .then(res => {
         const { data } = res;
@@ -78,6 +78,7 @@ export default function StudioLayout() {
   };
   useEffect(() => {
     (async () => {
+      setCoordinator();
       const engineType = (await depolymentInfo()) as 'interactive' | 'groot';
       setState(preState => {
         return {
@@ -108,7 +109,9 @@ export default function StudioLayout() {
   }, []);
 
   const { isReady } = state;
-  const _SIDE = [...(SIDE_MENU || []), ...(SLOTS.SIDE_MEU || [])];
+
+  const _SIDE = getSlots('SIDE_MEU');
+
   const { layoutBackground } = useCustomToken();
   if (isReady) {
     return (
@@ -125,3 +128,13 @@ export default function StudioLayout() {
 
   return <GlobalSpin />;
 }
+
+function setCoordinator() {
+  const coordinatorURL = Utils.getSearchParams('coordinator');
+  if (coordinatorURL) {
+    Utils.storage.set('coordinator', coordinatorURL);
+  }
+  const coordinator = Utils.storage.get<string>('coordinator') || location.origin;
+  window.COORDINATOR_URL = coordinator;
+  return coordinator;
+}

packages/studio-website/src/layouts/services.tsx

@@ -54,7 +54,7 @@ export const getSupportFeature = (): Features => {
 };
 
 export const listGraphs = async () => {
-  const status = await ServiceApiFactory(undefined, location.origin)
+  const status = await ServiceApiFactory(undefined, window.COORDINATOR_URL)
     .listServiceStatus()
     .then(res => {
       if (res.status === 200) {
@@ -68,7 +68,7 @@ export const listGraphs = async () => {
 
   let graphs;
 
-  graphs = await GraphApiFactory(undefined, location.origin)
+  graphs = await GraphApiFactory(undefined, window.COORDINATOR_URL)
     .listGraphs()
     .then(res => {
       if (res.status === 200) {

packages/studio-website/src/locales/en-US.ts

@@ -265,4 +265,6 @@ export default {
   'No graph available': 'No graph available',
   'Create instance': 'Create instance',
   Explore: 'Explore',
+  Settings: 'Settings',
+  'System Setting': 'System Setting',
 };

packages/studio-website/src/locales/zh-CN.ts

@@ -260,4 +260,6 @@ export default {
   'No graph available': '无可用图实例',
   'Create instance': '创建图实例',
   Explore: '图探索',
+  Settings: '设置',
+  'System Setting': '系统设置',
 };