Merge pull request #581 from GraphScope/fix-docs

feat: fix docs

.dumirc.ts

@@ -181,8 +181,7 @@ export default defineConfig({
   ],
   jsMinifier: 'terser',
   resolve: {
-    // docDirs: ['docs'],
-
+    docDirs: ['packages/studio-components'],
     atomDirs: [
       {
         type: 'components',

docs/components/src/Header/index.tsx

@@ -104,7 +104,7 @@ const Logo = ({ style }) => {
 };
 function Header({ title, style = {} }) {
   return (
-    <Flex align="center" justify="center" gap={6}>
+    <Flex align="center" justify="center" gap={6} style={{ width: '250px' }}>
       <Logo style={{ width: '120px', ...style }} />
       <Divider type="vertical" style={{ height: '20px', borderInlineStart: '1px solid #ddd', marginTop: '4px' }} />
       <Typography.Title level={5} style={{ margin: '0px' }}>

docs/interactive/pages/docs/_meta.json

@@ -4,6 +4,6 @@
     "type": "separator",
     "title": "Others"
   },
-  "webui": "Integration With WebUI",
+  "portal": "Integration With Portal",
   "coordinator": "Coordinator API"
 }

docs/interactive/pages/docs/interactive/_meta.json

@@ -1,4 +1,13 @@
 {
   "overview": "Overview",
-  "installation": "Installation"
+  "installation": "Installation",
+  "Deployment": "Deployment",
+  "getting_started": "Getting Started",
+  "custom_graph_data": "Using Custom Graph",
+  "stored_procedures": "Stored Procedures",
+  "configuration": "Engine Configuration",
+  "data_model": "Data Model",
+  "data_import": "Data Import Configuration",
+  "glossary": "Glossary",
+  "development": "Development"
 }

docs/interactive/pages/docs/interactive/development/_meta.json

@@ -0,0 +1,4 @@
+{
+  "index": "index",
+  "dev_guide": "Development Guide"
+}

docs/interactive/pages/docs/interactive/deployment.md → docs/interactive/pages/docs/interactive/development/index.md

@@ -7,15 +7,15 @@ Interactive is packaged as a Docker image and can be easily deployed with `docke
 ```bash
 pip3 install gsctl
 # Deploy the interactive service in local mode
-gsctl instance deploy --type interactive 
+gsctl instance deploy --type interactive
 ```
 
 ### Customizing Ports
 
 By default, Interactive launches various services on these ports: Coordinator Service on `8080`, Interactive Meta Service on `7777`, Interactive Cypher service on `7687`, and Stored Procedure Service on `10000`. These ports can be customized.
 
 ```bash
-gsctl instance deploy --type interactive --coordinator-port 8081 --admin-port 7778 \ 
+gsctl instance deploy --type interactive --coordinator-port 8081 --admin-port 7778 \
                 --cypher-port 7688 --storedproc-port 10001
 ```
 

docs/interactive/pages/docs/portal/_meta.json

@@ -0,0 +1,9 @@
+{
+  "manual": "User Manual",
+
+  "visualization": "Graph Visualization",
+  "-- Themes": {
+    "type": "separator",
+    "title": "Developer Tools"
+  }
+}

docs/interactive/pages/docs/portal/manual/_meta.json

@@ -0,0 +1,9 @@
+{
+  "overview": "Overview",
+  "installation": "Installation",
+  "connection": "Connection",
+  "create_graph": "Create Graph",
+  "modeling": "Modeling",
+  "importing": "Importing",
+  "querying": "Querying"
+}

docs/interactive/pages/docs/portal/manual/connection.md

@@ -0,0 +1,37 @@
+## Connection
+
+GraphScope Portal supports connecting to three engines under the GraphScope Flex architecture, which are Interactive, GART, and Insight.
+
+## Connecting to GraphScope Interactive
+
+We need to download the GraphScope Interactive engine and start it first
+
+```bash
+# Pull Graphscope Interactive engine, Apple M2 clip
+docker pull registry.cn-beijing.aliyuncs.com/graphscope/interactive:0.28.0-arm64
+```
+
+```bash
+# Run the container
+docker run -d \
+--name gs-interactive \
+--label flex=interactive \
+-p 8080:8080 -p 7777:7777 -p 10000:10000 -p 7687:7687 \
+registry.cn-beijing.aliyuncs.com/graphscope/interactive:v0.24.2-arm64 --enable-coordinator
+```
+
+and then connect to the engine
+
+```bash
+# Run the container
+docker run -it \
+--name my-portal \
+-p 8888:8888 \
+-e COORDINATOR=http://host.docker.internal:8080 \
+ghcr.io/graphscope/portal:latest
+```
+
+> Description of Startup Parameters
+
+- `COORDINATOR` refers to the GraphScope engine address. If you have also started the GraphScope engine locally using Docker, you can directly use `host.docker.internal:8080` as the `COORDINATOR` parameter.
+- `PORT` is the port number for the frontend service, defaulting to 8888.

docs/interactive/pages/docs/portal/manual/installation.md

@@ -0,0 +1,16 @@
+## Installation with docker
+
+```bash
+# Pull the image
+docker pull ghcr.io/graphscope/portal:latest
+```
+
+## Installation with source code
+
+```bash
+# Compile front-end assets
+npm run ci
+# Start the server
+cd packages/studio-website/server
+npm run dev -- --port=8888 --coordinator=<graphscope_coordinator_endpoint> --cypher_endpoint=<graphscope_cypher_endpoint>
+```

docs/interactive/pages/docs/portal/manual/overview.md

@@ -0,0 +1,9 @@
+# Overview
+
+GraphScope Portal is a user-friendly web interface that simplifies managing graph data with GraphScope. It offers one-stop access to data modeling, importing, querying, and monitoring, catering to both Interactive and Insight engines within the GraphScope Flex architecture.
+
+## A Solid Foundation
+
+## Key Features
+
+## Development tools

docs/interactive/pages/docs/portal/manual/querying/_meta.json

@@ -0,0 +1,12 @@
+{
+  "connection": "Connection",
+  "recommand": "Recommand Statements",
+  "history": "History Statements",
+  "save": "Save Statements",
+  "gpt": "Query with OpenAI",
+  "table_view": "Table View",
+  "graph_view": "Graph View",
+  "setting_style": "Setting Display Style",
+  "inspect_properties": "Inspect Properties",
+  "draw_pattern": "Query by Drawing Pattern"
+}

docs/interactive/pages/docs/portal/manual/querying/recommand.mdx

@@ -0,0 +1,9 @@
+## Query Methods
+
+In addition to writing Cypher or Gremlin statements by hand, we also offer a variety of query methods: recommended queries, historical queries, saved queries, and GPT queries.
+
+### Recommand query
+
+<img src="/query/recommand.png" />
+
+### History query

docs/interactive/pages/docs/portal/visualization/_meta.json

@@ -0,0 +1 @@
+{}

docs/interactive/pages/docs/portal/visualization/inspect-data.md

@@ -0,0 +1,7 @@
+# Inspect data
+
+In order to view the different properties of a node, we click on it. Information immediately appears on the right side of the screen.
+
+## Inspect data of a multiple selection
+
+When you select multiple nodes or edges, the right panel will present their detailed properties in a table format for easy viewing.

package.json

@@ -11,6 +11,7 @@
     "build:portal": "cd packages/studio-website && npm run build:site",
     "build:examples": "pnpm i && rm -rf package-lock.json && npm run build && cd examples/graph-apps && npm run build:site",
     "build:docs": "pnpm i && rm -rf package-lock.json && npm run build && cd docs/portal && npm run build:site",
+    "build:docs-interactive": "pnpm i && rm -rf package-lock.json && npm run build && cd docs/interactive && npm run build:site",
     "build:docs-dumi-components": "npm run prev && npm run build &&  dumi build",
     "docs": "dumi dev",
     "version": "changeset version",
@@ -62,7 +63,7 @@
     "babel-loader": "^8.2.5",
     "css-loader": "^6.8.1",
     "dumi": "^2.2.16",
-    "dumi-theme-antd": "latest",
+    "dumi-theme-antd": "0.4.2",
     "father": "^4.4.1",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.1.0",

packages/studio-components/README.md

@@ -1 +1,9 @@
-# GraphScope Components
+```jsx
+/**
+ * inline: true
+ */
+import Home from './src/DemoHome/index.tsx';
+export default () => {
+  return <Home />;
+};
+```

packages/studio-components/src/DemoHome/index.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+interface IDemoHomeProps {}
+
+const DemoHome: React.FunctionComponent<IDemoHomeProps> = props => {
+  return (
+    <div
+      style={{
+        height: '100vh',
+        textAlign: 'center',
+        background: '#fafafa',
+      }}
+    >
+      GraphScope Portal
+    </div>
+  );
+};
+
+export default DemoHome;