feat: Add graphy into experimental tools

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/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();
@@ -109,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 (

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

@@ -4,6 +4,7 @@ import { StudioProvier, GlobalSpin } from '@graphscope/studio-components';
 import Layout from '../layouts';
 import StoreProvider from '@graphscope/use-zustand';
 import { initialStore } from '../layouts/useContext';
+import { getSlots } from '../slots';
 
 import locales from '../locales';
 interface IPagesProps {
@@ -27,34 +28,36 @@ const routes = [
   { path: '/extension/:name', component: React.lazy(() => import('./extension/create-plugins')) },
 ];
 
+export const ROUTES = 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={<GlobalSpin />}>
+          {/** @ts-ignore */}
+          <Component />
+        </Suspense>
+      }
+    />
+  );
+});
+
 const Pages: React.FunctionComponent<IPagesProps> = props => {
   const { children } = props;
-
-  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={<GlobalSpin />}>
-            {/** @ts-ignore */}
-            <Component />
-          </Suspense>
-        }
-      />
-    );
-  });
+  const routes = getSlots('ROUTES');
+  console.log('routes', routes);
 
   return (
     <StoreProvider store={initialStore}>
       <StudioProvier locales={locales}>
         <HashRouter>
           <Routes>
             <Route path="/" element={<Layout />}>
-              {routeComponents}
+              {routes}
               {children}
             </Route>
           </Routes>

packages/studio-website/src/pages/setting/index.tsx

@@ -9,6 +9,7 @@ import International from './International';
 import QuerySetting from './query-setting';
 import { FormattedMessage } from 'react-intl';
 import Coordinator from './coordinator';
+import GraphyPlugin from './plugins/graphy';
 
 const Setting: React.FunctionComponent = () => {
   return (
@@ -47,19 +48,30 @@ const Setting: React.FunctionComponent = () => {
           </Flex>
         </Col>
         <Col span={12} xs={24} md={12} lg={12}>
-          <Card
-            title={
-              <Typography.Title level={4}>
-                <FormattedMessage id="Appearance Setting" />
-              </Typography.Title>
-            }
-          >
-            <InteractTheme />
-            <Divider />
-            <PrimaryColor />
-            <Divider />
-            <RoundedCorner />
-          </Card>
+          <Flex gap={12} vertical>
+            <Card
+              title={
+                <Typography.Title level={4}>
+                  <FormattedMessage id="Appearance Setting" />
+                </Typography.Title>
+              }
+            >
+              <InteractTheme />
+              <Divider />
+              <PrimaryColor />
+              <Divider />
+              <RoundedCorner />
+            </Card>
+            <Card
+              title={
+                <Typography.Title level={4}>
+                  <FormattedMessage id="Experimental Tools" />
+                </Typography.Title>
+              }
+            >
+              <GraphyPlugin />
+            </Card>
+          </Flex>
         </Col>
       </Row>
     </Section>