From a31b0004469a018586460e686dcf45ba7d63386a Mon Sep 17 00:00:00 2001
From: Haifeng Luo <bnulhf@126.com>
Date: Sun, 10 Apr 2022 11:31:56 +0800
Subject: [PATCH] Add wordset graph page.

---
 web/src/App.js               |  2 ++
 web/src/VectorsetListPage.js |  2 +-
 web/src/WordsetGraphPage.js  | 35 +++++++++++++++++++++++++++++++++++
 web/src/WordsetListPage.js   |  5 +++--
 web/src/locales/en/data.json |  1 +
 web/src/locales/zh/data.json |  1 +
 6 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 web/src/WordsetGraphPage.js

diff --git a/web/src/App.js b/web/src/App.js
index cb92865..1b30f40 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -10,6 +10,7 @@ import * as Conf from "./Conf";
 import HomePage from "./HomePage";
 import WordsetListPage from "./WordsetListPage";
 import WordsetEditPage from "./WordsetEditPage";
+import WordsetGraphPage from "./WordsetGraphPage";
 import VectorsetListPage from "./VectorsetListPage";
 import VectorsetEditPage from "./VectorsetEditPage";
 import SigninPage from "./SigninPage";
@@ -282,6 +283,7 @@ class App extends Component {
           <Route exact path="/signin" render={(props) => this.renderHomeIfSignedIn(<SigninPage {...props} />)}/>
           <Route exact path="/wordsets" render={(props) => this.renderSigninIfNotSignedIn(<WordsetListPage account={this.state.account} {...props} />)}/>
           <Route exact path="/wordsets/:wordsetName" render={(props) => this.renderSigninIfNotSignedIn(<WordsetEditPage account={this.state.account} {...props} />)}/>
+          <Route exact path="/wordsets/:wordsetName/graph" render={(props) => this.renderSigninIfNotSignedIn(<WordsetGraphPage account={this.state.account} {...props} />)}/>
           <Route exact path="/vectorsets" render={(props) => this.renderSigninIfNotSignedIn(<VectorsetListPage account={this.state.account} {...props} />)}/>
           <Route exact path="/vectorsets/:vectorsetName" render={(props) => this.renderSigninIfNotSignedIn(<VectorsetEditPage account={this.state.account} {...props} />)}/>
         </Switch>
diff --git a/web/src/VectorsetListPage.js b/web/src/VectorsetListPage.js
index 87ac7fd..323b61f 100644
--- a/web/src/VectorsetListPage.js
+++ b/web/src/VectorsetListPage.js
@@ -153,7 +153,7 @@ class VectorsetListPage extends React.Component {
         title: i18next.t("general:Action"),
         dataIndex: 'action',
         key: 'action',
-        width: '160px',
+        width: '80px',
         render: (text, record, index) => {
           return (
             <div>
diff --git a/web/src/WordsetGraphPage.js b/web/src/WordsetGraphPage.js
new file mode 100644
index 0000000..bc594ea
--- /dev/null
+++ b/web/src/WordsetGraphPage.js
@@ -0,0 +1,35 @@
+import React from "react";
+import * as WordsetBackend from "./backend/WordsetBackend";
+import Wordset from "./Wordset";
+
+class WordsetGraphPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      classes: props,
+      wordsetName: props.match.params.wordsetName,
+      wordset: null,
+    };
+  }
+
+  componentWillMount() {
+    this.getWordset();
+  }
+
+  getWordset() {
+    WordsetBackend.getWordset(this.props.account.name, this.state.wordsetName)
+      .then((wordset) => {
+        this.setState({
+          wordset: wordset,
+        });
+      });
+  }
+
+  render() {
+    return (this.state.wordset === undefined || this.state.wordset === null) ? null : (
+      <Wordset wordset={this.state.wordset} wordsetName={this.state.wordset.name}/>
+    )
+  }
+}
+
+export default WordsetGraphPage;
diff --git a/web/src/WordsetListPage.js b/web/src/WordsetListPage.js
index 628d938..bf6983b 100644
--- a/web/src/WordsetListPage.js
+++ b/web/src/WordsetListPage.js
@@ -132,11 +132,12 @@ class WordsetListPage extends React.Component {
         title: i18next.t("general:Action"),
         dataIndex: 'action',
         key: 'action',
-        width: '160px',
+        width: '80px',
         render: (text, record, index) => {
           return (
             <div>
-              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => this.props.history.push(`/wordsets/${record.name}`)}>{i18next.t("general:Edit")}</Button>
+              <Button style={{marginTop: '10px', marginBottom: '10px', marginRight: '10px'}} onClick={() => this.props.history.push(`/wordsets/${record.name}/graph`)}>{i18next.t("general:Result")}</Button>
+              <Button style={{marginBottom: '10px', marginRight: '10px'}} type="primary" onClick={() => this.props.history.push(`/wordsets/${record.name}`)}>{i18next.t("general:Edit")}</Button>
               <Popconfirm
                 title={`Sure to delete wordset: ${record.name} ?`}
                 onConfirm={() => this.deleteWordset(index)}
diff --git a/web/src/locales/en/data.json b/web/src/locales/en/data.json
index bc99a04..f2edec4 100644
--- a/web/src/locales/en/data.json
+++ b/web/src/locales/en/data.json
@@ -17,6 +17,7 @@
     "Name": "Name",
     "No.": "No.",
     "Preview": "Preview",
+    "Result": "Result",
     "Save": "Save",
     "URL": "URL",
     "Vectorsets": "Vectorsets",
diff --git a/web/src/locales/zh/data.json b/web/src/locales/zh/data.json
index 9fc60fd..6f83f40 100644
--- a/web/src/locales/zh/data.json
+++ b/web/src/locales/zh/data.json
@@ -17,6 +17,7 @@
     "Name": "名称",
     "No.": "序号",
     "Preview": "预览",
+    "Result": "结果",
     "Save": "保存",
     "URL": "链接",
     "Vectorsets": "向量集",