Skip to content

C
computingPlatform
Commit f61ca308 by wangshufen
Options

feature:登录功能添加token校验

parent 050ea14e
Showing with 529 additions and 793 deletions
.eslintrc.js 0 → 100644
module.exports = {
root: true, //此项是用来告诉eslint找当前配置文件不能往父级查找
env: {
node: true,
},
// "off" -> 0 关闭规则 "warn" -> 1 开启警告规则 "error" -> 2 开启错误规则
rules: {
'generator-star-spacing': 'off',
'no-tabs': 'off',
'no-unused-vars': 'off', //声明的变量未使用
'no-console': 'off',
'no-irregular-whitespace': 'off',
'no-debugger': 'off',
eqeqeq: 'off', // 使用全等
},
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 7,
sourceType: 'module',
},
};
jsconfig.json 0 → 100644
{
"compilerOptions": {
"baseUrl": "./",
"experimentalDecorators": true,
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", ".vscode", "library", "local", "settings", "temp", "build"]
}
src/App.js
...@@ -14,7 +14,8 @@ class App extends Component { ...@@ -14,7 +14,8 @@ class App extends Component {
return ( return (
<Switch> <Switch>
<Route path='/login' component={Docking}/> <Route path='/login' component={Docking}/>
<PrivateRoute path='/' component={Index}/> {/* <PrivateRoute path='/' component={Index}/> */}
<PrivateRoute path='/' component={Docking}/>
</Switch> </Switch>
) )
} }
......
src/routes/Home/Docking/index.js
import React, { Component } from "react"; import React, { Component } from 'react';
import { import { Tabs, Button, Radio, Upload, Input, Select, Form, Icon, Card, Menu, Table, Tag, message, Pagination, Divider, Modal, Col, InputNumber } from 'antd';
Tabs, import qs from 'qs';
Button, import request from '../../../utils/request';
Radio, import { Jsme } from 'jsme-react';
Upload, import './index.css';
Input,
Select,
Form,
Icon,
Card,
Menu,
Table,
Tag,
message,
Pagination,
Divider,
Modal,
Col,
InputNumber,
} from "antd";
import qs from "qs";
import request from "../../../utils/request";
import { Jsme } from "jsme-react";
import "./index.css";
const { Option } = Select; const { Option } = Select;
const { TextArea } = Input; const { TextArea } = Input;
export default class StructureSearch extends Component { export default class StructureSearch extends Component {
state = { state = {
list: [ list: [
{ {
name: "Welcome", name: 'Welcome',
state: true, state: true,
}, },
{ {
name: "Docking", name: 'Docking',
state: false, state: false,
}, },
{ {
name: "Pharmacophore", name: 'Pharmacophore',
state: false, state: false,
}, },
{ {
name: "Automated Molecule Design", name: 'Automated Molecule Design',
state: false, state: false,
}, },
{ {
name: "Retrosynthesis", name: 'Retrosynthesis',
state: false, state: false,
}, },
{ {
name: "Task Manager", name: 'Task Manager',
state: false, state: false,
}, },
], ],
stateName: "Welcome", stateName: 'Welcome',
targetsDetail: { targetsDetail: {
name: "", name: '',
}, },
docking: { docking: {
pro: "", pro: '',
lig: "", lig: '',
ligand_file: "", ligand_file: '',
receptor_file: "", receptor_file: '',
ligand_smi: "", ligand_smi: '',
receptor_pdb: "", receptor_pdb: '',
grid_center: "notinputcenter", grid_center: 'notinputcenter',
gridx: null, gridx: null,
gridy: null, gridy: null,
gridz: null, gridz: null,
handlespeed: "", handlespeed: '',
}, },
pharmacophoreData: { pharmacophoreData: {
lig: "", lig: '',
ligand_file: "", ligand_file: '',
ligand_smi: "", ligand_smi: '',
select_nums: null, select_nums: null,
}, },
ListData: [], ListData: [],
taskManagerData: { taskManagerData: {
user_id: "1", user_id: '1',
task_source: "", task_source: '',
task_status: "", task_status: '',
page: 1, page: 1,
page_size: 10, page_size: 10,
}, },
retrosynthesisData: { retrosynthesisData: {
lig: "", lig: '',
ligand_file: "", ligand_file: '',
ligand_smi: "", ligand_smi: '',
}, },
amd: { amd: {
pro: "", pro: '',
lig: "", lig: '',
ligand_file: "", ligand_file: '',
receptor_file: "", receptor_file: '',
ligand_smi: "", ligand_smi: '',
receptor_pdb: "", receptor_pdb: '',
num_gen: null, num_gen: null,
num_per_gen: null, num_per_gen: null,
seed_per_gen: null, seed_per_gen: null,
growType: "", growType: '',
docking_center: "notinputcenter", docking_center: 'notinputcenter',
x: null, x: null,
y: null, y: null,
z: null, z: null,
mode: null, mode: null,
dl_per_gen:null, dl_per_gen: null,
dl_score_cutoff: "", dl_score_cutoff: '',
MW: null, MW: null,
logP_lower: null, logP_lower: null,
logP_upper: "", logP_upper: '',
handlespeed: "", handlespeed: '',
}, },
fileList: [], fileList: [],
uploading: false, uploading: false,
visible: false, visible: false,
total_num: 0, total_num: 0,
ListData2: [], ListData2: [],
Smiles: "", Smiles: '',
}; };
getRetrosynthesis = () => { getRetrosynthesis = () => {
request request
.post("/yszhaizynth/finder", qs.stringify(this.state.retrosynthesisData)) .post('/yszhaizynth/finder', qs.stringify(this.state.retrosynthesisData))
.then((res) => { .then((res) => {
console.log(res); console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
...@@ -137,7 +118,7 @@ export default class StructureSearch extends Component { ...@@ -137,7 +118,7 @@ export default class StructureSearch extends Component {
}; };
getTaskManager = () => { getTaskManager = () => {
request request
.post("/task/page", this.state.taskManagerData) .post('/task/page', this.state.taskManagerData)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
...@@ -166,7 +147,7 @@ export default class StructureSearch extends Component { ...@@ -166,7 +147,7 @@ export default class StructureSearch extends Component {
} }
console.log(formData); console.log(formData);
request request
.post("/pharmacophore/pharmacophore_run", formData) .post('/pharmacophore/pharmacophore_run', formData)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
...@@ -187,7 +168,7 @@ export default class StructureSearch extends Component { ...@@ -187,7 +168,7 @@ export default class StructureSearch extends Component {
} }
console.log(formData); console.log(formData);
request request
.post("/docking/docking_run", formData) .post('/docking/docking_run', formData)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
...@@ -208,7 +189,7 @@ export default class StructureSearch extends Component { ...@@ -208,7 +189,7 @@ export default class StructureSearch extends Component {
} }
console.log(formData); console.log(formData);
request request
.post("/amd/amd_run", formData) .post('/amd/amd_run', formData)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
...@@ -318,7 +299,6 @@ export default class StructureSearch extends Component { ...@@ -318,7 +299,6 @@ export default class StructureSearch extends Component {
}); });
}; };
amdmode = (e) => { amdmode = (e) => {
let amd = this.state.amd; let amd = this.state.amd;
amd.mode = e; amd.mode = e;
this.setState({ this.setState({
...@@ -334,7 +314,6 @@ export default class StructureSearch extends Component { ...@@ -334,7 +314,6 @@ export default class StructureSearch extends Component {
}); });
}; };
amd_dl_per_gen = (e) => { amd_dl_per_gen = (e) => {
let amd = this.state.amd; let amd = this.state.amd;
amd.dl_per_gen = e; amd.dl_per_gen = e;
this.setState({ this.setState({
...@@ -342,7 +321,6 @@ export default class StructureSearch extends Component { ...@@ -342,7 +321,6 @@ export default class StructureSearch extends Component {
}); });
}; };
amdMW = (e) => { amdMW = (e) => {
let amd = this.state.amd; let amd = this.state.amd;
amd.MW = e; amd.MW = e;
this.setState({ this.setState({
...@@ -350,7 +328,6 @@ export default class StructureSearch extends Component { ...@@ -350,7 +328,6 @@ export default class StructureSearch extends Component {
}); });
}; };
amd_logP_lower = (e) => { amd_logP_lower = (e) => {
let amd = this.state.amd; let amd = this.state.amd;
amd.logP_lower = e; amd.logP_lower = e;
this.setState({ this.setState({
...@@ -363,10 +340,10 @@ export default class StructureSearch extends Component { ...@@ -363,10 +340,10 @@ export default class StructureSearch extends Component {
let amd = this.state.amd; let amd = this.state.amd;
amd.docking_center = value; amd.docking_center = value;
if (amd.docking_center == "notinputcenter") { if (amd.docking_center == 'notinputcenter') {
amd.x = ""; amd.x = '';
amd.y = ""; amd.y = '';
amd.z = ""; amd.z = '';
} }
this.setState({ this.setState({
amd, amd,
...@@ -377,10 +354,10 @@ export default class StructureSearch extends Component { ...@@ -377,10 +354,10 @@ export default class StructureSearch extends Component {
console.log(value); console.log(value);
let docking = this.state.docking; let docking = this.state.docking;
docking.grid_center = value; docking.grid_center = value;
if (docking.grid_center == "notinputcenter") { if (docking.grid_center == 'notinputcenter') {
docking.gridx = ""; docking.gridx = '';
docking.gridy = ""; docking.gridy = '';
docking.gridz = ""; docking.gridz = '';
} }
this.setState({ this.setState({
docking, docking,
...@@ -429,19 +406,19 @@ export default class StructureSearch extends Component { ...@@ -429,19 +406,19 @@ export default class StructureSearch extends Component {
}; };
goList = () => { goList = () => {
if (this.state.stateName == "Docking") { if (this.state.stateName == 'Docking') {
this.selectionDocking(); this.selectionDocking();
return; return;
} }
if (this.state.stateName == "Pharmacophore") { if (this.state.stateName == 'Pharmacophore') {
this.selectionPharmacophore(); this.selectionPharmacophore();
return; return;
} }
if (this.state.stateName == "Retrosynthesis") { if (this.state.stateName == 'Retrosynthesis') {
this.selectionRetrosynthesis(); this.selectionRetrosynthesis();
return; return;
} }
if (this.state.stateName == "Automated Molecule Design") { if (this.state.stateName == 'Automated Molecule Design') {
this.selectionAmd(); this.selectionAmd();
return; return;
} }
...@@ -450,8 +427,6 @@ export default class StructureSearch extends Component { ...@@ -450,8 +427,6 @@ export default class StructureSearch extends Component {
console.log(e); console.log(e);
}; };
getListOne = (e, name) => { getListOne = (e, name) => {
let newList = this.state.list; let newList = this.state.list;
this.setState({ this.setState({
stateName: name, stateName: name,
...@@ -463,11 +438,10 @@ export default class StructureSearch extends Component { ...@@ -463,11 +438,10 @@ export default class StructureSearch extends Component {
} }
}); });
this.setState({ this.setState({
list: newList, list: newList,
}); });
if (name == "Task Manager") { if (name == 'Task Manager') {
this.getTaskManager(); this.getTaskManager();
return; return;
} }
...@@ -583,7 +557,7 @@ export default class StructureSearch extends Component { ...@@ -583,7 +557,7 @@ export default class StructureSearch extends Component {
getResult = (e) => { getResult = (e) => {
this.setState({ visible: true }); this.setState({ visible: true });
console.log(e); console.log(e);
let resultJson = eval("(" + e.resultJson + ")"); let resultJson = eval('(' + e.resultJson + ')');
console.log(resultJson); console.log(resultJson);
var jobId = resultJson.jobId; var jobId = resultJson.jobId;
let list = resultJson.list; let list = resultJson.list;
...@@ -596,10 +570,10 @@ export default class StructureSearch extends Component { ...@@ -596,10 +570,10 @@ export default class StructureSearch extends Component {
var imageHtml = var imageHtml =
'<img style="width:700px;float: left;" src="http://52.83.230.236:8010/static/showreaction/' + '<img style="width:700px;float: left;" src="http://52.83.230.236:8010/static/showreaction/' +
jobId + jobId +
"/" + '/' +
list[key]["imageFile"] + list[key]['imageFile'] +
'" id="' + '" id="' +
list[key]["imageFile"].replace(".png", "") + list[key]['imageFile'].replace('.png', '') +
'">'; '">';
// console.log(imageHtml); // console.log(imageHtml);
} }
...@@ -637,56 +611,39 @@ export default class StructureSearch extends Component { ...@@ -637,56 +611,39 @@ export default class StructureSearch extends Component {
}); });
}; };
selectionDocking = () => { selectionDocking = () => {
if (this.state.docking.pro == "") { if (this.state.docking.pro == '') {
message.warning("please specify how to upload receptor"); message.warning('please specify how to upload receptor');
return; return;
} }
if ( if (this.state.docking.pro == 'file' && this.state.docking.receptor_file == '') {
this.state.docking.pro == "file" && message.warning('please choose receptor file');
this.state.docking.receptor_file == ""
) {
message.warning("please choose receptor file");
return; return;
} }
if ( if (this.state.docking.pro == 'pdbid' && this.state.docking.receptor_pdb == '') {
this.state.docking.pro == "pdbid" && message.warning('please enter PDB ID of the receptor');
this.state.docking.receptor_pdb == ""
) {
message.warning("please enter PDB ID of the receptor");
return; return;
} }
if (this.state.docking.lig == "") { if (this.state.docking.lig == '') {
message.warning("please specify how to upload receptor"); message.warning('please specify how to upload receptor');
return; return;
} }
if ( if (this.state.docking.lig == 'file' && this.state.docking.ligand_file == '') {
this.state.docking.lig == "file" && message.warning('please choose ligand file');
this.state.docking.ligand_file == ""
) {
message.warning("please choose ligand file");
return; return;
} }
if ( if (this.state.docking.lig == 'smi' && this.state.docking.ligand_smi == '') {
this.state.docking.lig == "smi" && message.warning('please enter SMILES of the ligand');
this.state.docking.ligand_smi == ""
) {
message.warning("please enter SMILES of the ligand");
return; return;
} }
if (this.state.docking.handlespeed == "") { if (this.state.docking.handlespeed == '') {
message.warning("please choose docking speed"); message.warning('please choose docking speed');
return; return;
} }
if ( if (this.state.docking.grid_center == 'inputcenter' && (this.state.docking.gridx == null || this.state.docking.gridy == null || this.state.docking.gridz == null)) {
this.state.docking.grid_center == "inputcenter" && console.log('inputcenter');
(this.state.docking.gridx == null ||
this.state.docking.gridy == null ||
this.state.docking.gridz == null)
) {
console.log("inputcenter");
console.log(this.state.docking); console.log(this.state.docking);
return message.warning("please input grid center"); return message.warning('please input grid center');
// if ( // if (
// this.state.docking.gridx == "" || // this.state.docking.gridx == "" ||
// this.state.docking.gridy == "" || // this.state.docking.gridy == "" ||
...@@ -699,71 +656,54 @@ export default class StructureSearch extends Component { ...@@ -699,71 +656,54 @@ export default class StructureSearch extends Component {
} }
}; };
selectionAmd = () => { selectionAmd = () => {
if (this.state.amd.pro == "") { if (this.state.amd.pro == '') {
message.warning("please specify how to upload receptor"); message.warning('please specify how to upload receptor');
return; return;
} }
if (this.state.amd.pro == "file" && this.state.amd.receptor_file == "") { if (this.state.amd.pro == 'file' && this.state.amd.receptor_file == '') {
message.warning("please choose receptor file"); message.warning('please choose receptor file');
return; return;
} }
if (this.state.amd.pro == "pdbid" && this.state.amd.receptor_pdb == "") { if (this.state.amd.pro == 'pdbid' && this.state.amd.receptor_pdb == '') {
message.warning("please enter PDB ID of the receptor"); message.warning('please enter PDB ID of the receptor');
return; return;
} }
if (this.state.amd.lig == "") { if (this.state.amd.lig == '') {
message.warning("please specify how to upload receptor"); message.warning('please specify how to upload receptor');
return; return;
} }
if (this.state.amd.lig == "file" && this.state.amd.ligand_file == "") { if (this.state.amd.lig == 'file' && this.state.amd.ligand_file == '') {
message.warning("please choose ligand file"); message.warning('please choose ligand file');
return; return;
} }
if (this.state.amd.lig == "smi" && this.state.amd.ligand_smi == "") { if (this.state.amd.lig == 'smi' && this.state.amd.ligand_smi == '') {
message.warning("please enter SMILES of the ligand"); message.warning('please enter SMILES of the ligand');
return; return;
} }
if (this.state.amd.num_gen == null || !(this.state.amd.num_gen % 1 === 0)) { if (this.state.amd.num_gen == null || !(this.state.amd.num_gen % 1 === 0)) {
message.warning( message.warning('num_gen value cannot be a null character and must be an integer greater than 0');
"num_gen value cannot be a null character and must be an integer greater than 0"
);
return; return;
} }
if ( if (this.state.amd.num_per_gen == null || !(this.state.amd.num_per_gen % 1 === 0)) {
this.state.amd.num_per_gen == null || message.warning('num_per_gen value cannot be a null character and must be an integer greater than 0');
!(this.state.amd.num_per_gen % 1 === 0)
) {
message.warning(
"num_per_gen value cannot be a null character and must be an integer greater than 0"
);
return; return;
} }
if ( if (this.state.amd.seed_per_gen == null || !(this.state.amd.seed_per_gen % 1 === 0)) {
this.state.amd.seed_per_gen == null || message.warning('seed_per_gen value cannot be a null character and must be an integer greater than 0');
!(this.state.amd.seed_per_gen % 1 === 0)
) {
message.warning(
"seed_per_gen value cannot be a null character and must be an integer greater than 0"
);
return; return;
} }
if (this.state.amd.growType == "") { if (this.state.amd.growType == '') {
message.warning("please choose growType"); message.warning('please choose growType');
return; return;
} }
if (this.state.amd.handlespeed == "") { if (this.state.amd.handlespeed == '') {
message.warning("please choose docking speed"); message.warning('please choose docking speed');
return; return;
} }
if ( if (this.state.amd.docking_center == 'inputcenter' && (this.state.amd.x == null || this.state.amd.y == null || this.state.amd.z == null)) {
this.state.amd.docking_center == "inputcenter" && message.warning('please input docking center');
(this.state.amd.x == null ||
this.state.amd.y == null ||
this.state.amd.z == null)
) {
message.warning("please input docking center");
return; return;
// if ( // if (
// this.state.amd.gridx == "" || // this.state.amd.gridx == "" ||
...@@ -776,40 +716,24 @@ export default class StructureSearch extends Component { ...@@ -776,40 +716,24 @@ export default class StructureSearch extends Component {
// document.getElementById("gridxyz").style.visibility="visible"; // document.getElementById("gridxyz").style.visibility="visible";
// document.getElementById("gridxyz").style.visibility="hidden"; // document.getElementById("gridxyz").style.visibility="hidden";
} }
if ( if (this.state.amd.mode == null || !(this.state.amd.mode % 1 === 0)) {
this.state.amd.mode== null message.warning('mode cannot be null and is an integer');
||!(this.state.amd.mode % 1 === 0)
) {
message.warning("mode cannot be null and is an integer");
return; return;
} }
if ( if (this.state.amd.dl_per_gen == null || !(this.state.amd.dl_per_gen % 1 === 0)) {
this.state.amd.dl_per_gen== null||!(this.state.amd.dl_per_gen % 1 === 0) message.warning('dl_per_gen cannot be null and is an integer');
) {
message.warning("dl_per_gen cannot be null and is an integer");
return; return;
} }
if (
this.state.amd.MW== null||!(this.state.amd.MW % 1 === 0)
) {
message.warning("MW cannot be null and is an integer");
return;
} if (this.state.amd.MW == null || !(this.state.amd.MW % 1 === 0)) {
message.warning('MW cannot be null and is an integer');
if (
this.state.amd.logP_lower== null
) {
message.warning("please input logP_lower");
return; return;
} }
if (this.state.amd.logP_lower == null) {
else { message.warning('please input logP_lower');
return;
} else {
/* if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") { /* if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") {
if (this.state.docking.gridx== "" || this.state.docking.gridy== "" || this.state.docking.gridz== ""){ if (this.state.docking.gridx== "" || this.state.docking.gridy== "" || this.state.docking.gridz== ""){
message.warning("please input grid center"); message.warning("please input grid center");
...@@ -820,32 +744,23 @@ export default class StructureSearch extends Component { ...@@ -820,32 +744,23 @@ export default class StructureSearch extends Component {
} }
}; };
selectionPharmacophore = () => { selectionPharmacophore = () => {
if (this.state.pharmacophoreData.lig == "") { if (this.state.pharmacophoreData.lig == '') {
message.warning("please specify how to upload receptor"); message.warning('please specify how to upload receptor');
return; return;
} }
if ( if (this.state.pharmacophoreData.lig == 'file' && this.state.pharmacophoreData.ligand_file == '') {
this.state.pharmacophoreData.lig == "file" && message.warning('please choose ligand file');
this.state.pharmacophoreData.ligand_file == ""
) {
message.warning("please choose ligand file");
return; return;
} }
if ( if (this.state.pharmacophoreData.lig == 'smi' && this.state.pharmacophoreData.ligand_smi == '') {
this.state.pharmacophoreData.lig == "smi" && message.warning('please enter SMILES of the ligand');
this.state.pharmacophoreData.ligand_smi == ""
) {
message.warning("please enter SMILES of the ligand");
return; return;
} }
if (this.state.pharmacophoreData.select_nums == null||!(this.state.pharmacophoreData.select_nums % 1 === 0)) { if (this.state.pharmacophoreData.select_nums == null || !(this.state.pharmacophoreData.select_nums % 1 === 0)) {
console.log(333333); console.log(333333);
message.warning( message.warning('The value cannot be a null character and must be an integer greater than 0');
"The value cannot be a null character and must be an integer greater than 0"
);
return; return;
} } else {
else {
/* if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") { /* if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") {
if (this.state.docking.gridx== "" || this.state.docking.gridy== "" || this.state.docking.gridz== ""){ if (this.state.docking.gridx== "" || this.state.docking.gridy== "" || this.state.docking.gridz== ""){
message.warning("please input grid center"); message.warning("please input grid center");
...@@ -856,8 +771,8 @@ export default class StructureSearch extends Component { ...@@ -856,8 +771,8 @@ export default class StructureSearch extends Component {
} }
}; };
selectionRetrosynthesis = () => { selectionRetrosynthesis = () => {
if (this.state.retrosynthesisData.lig == "") { if (this.state.retrosynthesisData.lig == '') {
message.warning("please specify how to upload receptor"); message.warning('please specify how to upload receptor');
return; return;
} }
// if ( // if (
...@@ -867,11 +782,8 @@ export default class StructureSearch extends Component { ...@@ -867,11 +782,8 @@ export default class StructureSearch extends Component {
// message.warning("please choose ligand file"); // message.warning("please choose ligand file");
// return; // return;
// } // }
if ( if (this.state.retrosynthesisData.lig == 'smi' && this.state.retrosynthesisData.ligand_smi == '') {
this.state.retrosynthesisData.lig == "smi" && message.warning('please enter SMILES of the ligand');
this.state.retrosynthesisData.ligand_smi == ""
) {
message.warning("please enter SMILES of the ligand");
return; return;
} else { } else {
/* if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") { /* if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") {
...@@ -889,9 +801,9 @@ export default class StructureSearch extends Component { ...@@ -889,9 +801,9 @@ export default class StructureSearch extends Component {
const props = { const props = {
beforeUpload: (file) => { beforeUpload: (file) => {
var fileName = file.name; var fileName = file.name;
var suffixName = fileName.substring(fileName.lastIndexOf(".")); var suffixName = fileName.substring(fileName.lastIndexOf('.'));
if (suffixName != ".smi") { if (suffixName != '.smi') {
return message.error("You can only upload smi file!"); return message.error('You can only upload smi file!');
} }
let docking = this.state.docking; let docking = this.state.docking;
docking.ligand_file = file; docking.ligand_file = file;
...@@ -928,9 +840,9 @@ export default class StructureSearch extends Component { ...@@ -928,9 +840,9 @@ export default class StructureSearch extends Component {
const props2 = { const props2 = {
beforeUpload: (file) => { beforeUpload: (file) => {
var fileName = file.name; var fileName = file.name;
var suffixName = fileName.substring(fileName.lastIndexOf(".")); var suffixName = fileName.substring(fileName.lastIndexOf('.'));
if (suffixName != ".pdb") { if (suffixName != '.pdb') {
return message.error("You can only upload pdb file!"); return message.error('You can only upload pdb file!');
} }
let docking = this.state.docking; let docking = this.state.docking;
docking.receptor_file = file; docking.receptor_file = file;
...@@ -946,9 +858,9 @@ export default class StructureSearch extends Component { ...@@ -946,9 +858,9 @@ export default class StructureSearch extends Component {
const props3 = { const props3 = {
beforeUpload: (file) => { beforeUpload: (file) => {
var fileName = file.name; var fileName = file.name;
var suffixName = fileName.substring(fileName.lastIndexOf(".")); var suffixName = fileName.substring(fileName.lastIndexOf('.'));
if (suffixName != ".pdb") { if (suffixName != '.pdb') {
return message.error("You can only upload pdb file!"); return message.error('You can only upload pdb file!');
} }
let amd = this.state.amd; let amd = this.state.amd;
amd.receptor_file = file; amd.receptor_file = file;
...@@ -962,15 +874,7 @@ export default class StructureSearch extends Component { ...@@ -962,15 +874,7 @@ export default class StructureSearch extends Component {
fileList, fileList,
}; };
const { const { list, total_num, ListData, uploading, fileList, visible, ListData2 } = this.state;
list,
total_num,
ListData,
uploading,
fileList,
visible,
ListData2,
} = this.state;
const formItemLayout2 = { const formItemLayout2 = {
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
...@@ -990,74 +894,60 @@ export default class StructureSearch extends Component { ...@@ -990,74 +894,60 @@ export default class StructureSearch extends Component {
wrapperCol: { span: 10 }, wrapperCol: { span: 10 },
}; };
const radioStyle = { const radioStyle = {
display: "block", display: 'block',
height: "30px", height: '30px',
lineHeight: "30px", lineHeight: '30px',
marginBottom: "20px", marginBottom: '20px',
width: "700px", width: '700px',
}; };
const columns = [ const columns = [
{ {
title: "Type", title: 'Type',
dataIndex: "taskSource", dataIndex: 'taskSource',
key: "taskSource", key: 'taskSource',
}, },
{ {
title: "Status", title: 'Status',
dataIndex: "taskStatus", dataIndex: 'taskStatus',
key: "taskStatus", key: 'taskStatus',
}, },
{ {
title: "Start Time", title: 'Start Time',
key: "startTime", key: 'startTime',
dataIndex: "startTime", dataIndex: 'startTime',
}, },
{ {
title: "End Time", title: 'End Time',
key: "endTime", key: 'endTime',
dataIndex: "endTime", dataIndex: 'endTime',
}, },
{ {
title: "Result", title: 'Result',
key: "action", key: 'action',
render: (text, record) => ( render: (text, record) => (
<span> <span>
{record.resultFilePath != null && ( {record.resultFilePath != null && (
<a <a rel='noopener noreferrer' target='_blank' href={record.resultFilePath}>
rel="noopener noreferrer"
target="_blank"
href={record.resultFilePath}
>
download download
</a> </a>
)} )}
{record.resultFilePath != null && record.resultJson != null && ( {record.resultFilePath != null && record.resultJson != null && <Divider type='vertical' />}
<Divider type="vertical" /> {record.resultJson != null && <a onClick={() => this.getResult(record)}>result </a>}
)}
{record.resultJson != null && (
<a onClick={() => this.getResult(record)}>result </a>
)}
</span> </span>
), ),
}, },
]; ];
const columns2 = [ const columns2 = [
{ {
title: "Predited Routes", title: 'Predited Routes',
dataIndex: "imageFile", dataIndex: 'imageFile',
key: "imageFile", key: 'imageFile',
render: (imageFile) => ( render: (imageFile) => <img alt='example' style={{ height: '100px', padding: '0px' }} src={imageFile} />,
<img
alt="example"
style={{ height: "100px", padding: "0px" }}
src={imageFile}
/>
),
}, },
{ {
title: "Score", title: 'Score',
dataIndex: "score", dataIndex: 'score',
key: "score", key: 'score',
}, },
// { // {
// title: "smiles", // title: "smiles",
...@@ -1071,459 +961,299 @@ export default class StructureSearch extends Component { ...@@ -1071,459 +961,299 @@ export default class StructureSearch extends Component {
const { pre_smiles } = e; const { pre_smiles } = e;
const columns = [ const columns = [
{ {
title: "Smiles", title: 'Smiles',
dataIndex: "smiles", dataIndex: 'smiles',
key: "smiles", key: 'smiles',
render: (smiles) => ( render: (smiles) => (
<div> <div>
<Jsme <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={smiles} />
height="100px"
width="100px"
options="depict,useopenchemlib"
smiles={smiles}
/>
</div> </div>
), ),
}, },
{ {
title: "Brand Name", title: 'Brand Name',
dataIndex: "brand", dataIndex: 'brand',
key: "brand", key: 'brand',
}, },
{ {
title: "Price", title: 'Price',
dataIndex: "origPrice", dataIndex: 'origPrice',
key: "origPrice", key: 'origPrice',
}, },
{ {
title: "Package", title: 'Package',
dataIndex: "package", dataIndex: 'package',
key: "package", key: 'package',
}, },
]; ];
return ( return <Table columns={columns} dataSource={pre_smiles} pagination={false} />;
<Table columns={columns} dataSource={pre_smiles} pagination={false} />
);
}; };
return ( return (
<div className="Docking-div"> <div className='Docking-div'>
<Modal <Modal footer={null} title='The results show' visible={visible} wrapClassName='vertical-center-modal' width={'100%'} height={'500px'} onCancel={() => this.setState({ visible: false })}>
footer={null}
title="The results show"
visible={visible}
wrapClassName="vertical-center-modal"
width={"100%"}
height={"500px"}
onCancel={() => this.setState({ visible: false })}
>
{/* <Table {/* <Table
columns={columns2} columns={columns2}
pagination={false} pagination={false}
dataSource={ListData2} dataSource={ListData2}
rowKey="id" rowKey="id"
/> */} /> */}
<Table <Table bordered style={{ top: 100 }} rowKey='item' dataSource={ListData2} pagination={false} columns={columns2} expandedRowRender={expandedRowRender} />
bordered
style={{ top: 100 }}
rowKey="item"
dataSource={ListData2}
pagination={false}
columns={columns2}
expandedRowRender={expandedRowRender}
/>
</Modal> </Modal>
<div className="Docking-center"> <div className='Docking-center'>
<div className="logo-topdiv"> <div className='logo-topdiv'>
<img <img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../../assets/img/logo.png')} />
alt="example"
style={{ height: "100%", padding: "0px" }}
src={require("../../../assets/img/logo.png")}
/>
</div> </div>
<div className="top-div"> <div className='top-div'>
<Card <Card
hoverable hoverable
style={{ style={{
width: "100%", width: '100%',
// backgroundColor: "#00FF00", // backgroundColor: "#00FF00",
textAlign: "center", textAlign: 'center',
fontSize: "30px", fontSize: '30px',
fontWeight: 600, fontWeight: 600,
height: "150px", height: '150px',
lineHeight: "100px", lineHeight: '100px',
}} }}
> >
<div className="Computational-div"> <div className='Computational-div'>
<div>Computational Platform11</div> <div>Computational Platform</div>
</div> </div>
</Card> </Card>
</div> </div>
<div> <div>
<div className="left-div"> <div className='left-div'>
{list.map((item, index) => { {list.map((item, index) => {
return ( return (
<Button <Button type={item.state ? 'primary' : ''} size='large' onClick={() => this.getListOne(index, item.name)} key={index}>
type={item.state ? "primary" : ""}
size="large"
onClick={() => this.getListOne(index, item.name)}
key={index}
>
{item.name} {item.name}
</Button> </Button>
); );
})} })}
</div> </div>
<div <div className={this.state.stateName === 'Welcome' || this.state.stateName === 'Task Manager' ? 'displaydiv' : 'right-div'}>
className={
this.state.stateName === "Welcome" ||
this.state.stateName === "Task Manager"
? "displaydiv"
: "right-div"
}
>
{ {
<div className="generalsearch-div"> <div className='generalsearch-div'>
<div className="title-text"> <div className='title-text'>
{(this.state.stateName === "Automated Molecule Design" && {(this.state.stateName === 'Automated Molecule Design' && 'Input Fragment') ||
"Input Fragment") || (this.state.stateName === 'Pharmacophore' && 'Query Molecule') ||
(this.state.stateName === "Pharmacophore" && (this.state.stateName === 'Retrosynthesis' && 'New Compound for Synthesis')}
"Query Molecule") || {this.state.stateName != 'Automated Molecule Design' &&
(this.state.stateName === "Retrosynthesis" && 'Ligand Preparation' &&
"New Compound for Synthesis")} this.state.stateName != 'Pharmacophore' &&
{this.state.stateName != "Automated Molecule Design" && 'Ligand Preparation' &&
"Ligand Preparation" && this.state.stateName != 'Retrosynthesis' &&
this.state.stateName != "Pharmacophore" && 'Ligand Preparation'}
"Ligand Preparation" &&
this.state.stateName != "Retrosynthesis" &&
"Ligand Preparation"}
</div> </div>
<Radio.Group onChange={this.onChange}> <Radio.Group onChange={this.onChange}>
<Radio style={radioStyle} value={"file"}> <Radio style={radioStyle} value={'file'}>
Upload ligand file from your computer: Upload ligand file from your computer:
<Upload {...props}> <Upload {...props}>
<Button <Button
style={{ style={{
marginLeft: "5px", marginLeft: '5px',
}} }}
> >
<Icon type="upload" /> 选择文件 <Icon type='upload' /> 选择文件
</Button> </Button>
</Upload> </Upload>
</Radio> </Radio>
<Radio style={radioStyle} value={"smi"}> <Radio style={radioStyle} value={'smi'}>
Ligand SMILES: Ligand SMILES:
<Input <Input value={this.state.Smiles} onChange={this.ligandSmiles} style={{ width: '200px', marginLeft: '5px' }} />
value={this.state.Smiles}
onChange={this.ligandSmiles}
style={{ width: "200px", marginLeft: "5px" }}
/>
</Radio> </Radio>
</Radio.Group> </Radio.Group>
{/* <div>enter SMILES or draw the ligand structure below:</div> */} {/* <div>enter SMILES or draw the ligand structure below:</div> */}
<div className="Jsme-div"> <div className='Jsme-div'>
<Jsme <Jsme height='300px' width='500px' options='oldlook,star' onChange={this.logSmiles} />
height="300px"
width="500px"
options="oldlook,star"
onChange={this.logSmiles}
/>
</div> </div>
</div> </div>
} }
</div> </div>
<div className="right-div"> <div className='right-div'>
{list[0].state && ( {list[0].state && (
<div className="generalsearch-div"> <div className='generalsearch-div'>
<Card <Card hoverable style={{ width: '100%', padding: '0px' }} cover={<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../../assets/img/u22.gif')} />} />
hoverable
style={{ width: "100%", padding: "0px" }}
cover={
<img
alt="example"
style={{ height: "100%", padding: "0px" }}
src={require("../../../assets/img/u22.gif")}
/>
}
/>
</div> </div>
)} )}
{list[1].state && ( {list[1].state && (
<div className="generalsearch-div"> <div className='generalsearch-div'>
<div> <div>
Availble Library for Docking： Availble Library for Docking：
<Radio.Group <Radio.Group onChange={this.onChange} value={this.state.value}>
onChange={this.onChange}
value={this.state.value}
>
<Radio value={1}>Drugbank</Radio> <Radio value={1}>Drugbank</Radio>
<Radio value={2}>Zinc</Radio> <Radio value={2}>Zinc</Radio>
<Radio value={3}>Enamine</Radio> <Radio value={3}>Enamine</Radio>
<Radio value={4}>Maybridge</Radio> <Radio value={4}>Maybridge</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
<div className="title-text">Receptor preparation</div> <div className='title-text'>Receptor preparation</div>
<Radio.Group <Radio.Group value={this.state.docking.pro} onChange={this.Receptorpreparation}>
value={this.state.docking.pro} <Radio style={radioStyle} value={'file'}>
onChange={this.Receptorpreparation}
>
<Radio style={radioStyle} value={"file"}>
Upload receptor file from your computer: Upload receptor file from your computer:
<Upload {...props2}> <Upload {...props2}>
<Button <Button
style={{ style={{
marginLeft: "5px", marginLeft: '5px',
}} }}
> >
<Icon type="upload" /> 选择文件 <Icon type='upload' /> 选择文件
</Button> </Button>
</Upload> </Upload>
</Radio> </Radio>
<Radio style={radioStyle} value={"pdbid"}> <Radio style={radioStyle} value={'pdbid'}>
Specify PDB ID of receptor: Specify PDB ID of receptor:
<Input <Input style={{ width: '200px', marginLeft: '5px' }} value={this.state.docking.receptor_pdb} onChange={this.SpecifyPDB} />
style={{ width: "200px", marginLeft: "5px" }}
value={this.state.docking.receptor_pdb}
onChange={this.SpecifyPDB}
/>
</Radio> </Radio>
</Radio.Group> </Radio.Group>
<div className="DockingCenter"> <div className='DockingCenter'>
Docking Center： Docking Center：
<Radio.Group <Radio.Group onChange={this.onChangeDockingCenter} value={this.state.docking.grid_center}>
onChange={this.onChangeDockingCenter} <Radio value={'inputcenter'}>yes</Radio>
value={this.state.docking.grid_center} <Radio value={'notinputcenter'}>no</Radio>
>
<Radio value={"inputcenter"}>yes</Radio>
<Radio value={"notinputcenter"}>no</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
{this.state.docking.grid_center == "inputcenter" && ( {this.state.docking.grid_center == 'inputcenter' && (
<Form layout="inline"> <Form layout='inline'>
{/* <Form.Item label="Form Layout" {...formItemLayout} /> */} {/* <Form.Item label="Form Layout" {...formItemLayout} /> */}
<Form.Item label="grid_x" {...formItemLayout3}> <Form.Item label='grid_x' {...formItemLayout3}>
<InputNumber <InputNumber style={{ width: '150px' }} value={this.state.docking.gridx} onChange={this.grid_x} placeholder='input placeholder' />
style={{width:'150px'}}
value={this.state.docking.gridx}
onChange={this.grid_x}
placeholder="input placeholder"
/>
</Form.Item> </Form.Item>
<Form.Item label="grid_y" {...formItemLayout3}> <Form.Item label='grid_y' {...formItemLayout3}>
<InputNumber <InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.grid_y} value={this.state.docking.gridy} />
style={{width:'150px'}}
placeholder="input placeholder"
onChange={this.grid_y}
value={this.state.docking.gridy}
/>
</Form.Item> </Form.Item>
<Form.Item label="grid_z" {...formItemLayout3}> <Form.Item label='grid_z' {...formItemLayout3}>
<InputNumber <InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.grid_z} value={this.state.docking.gridz} />
style={{width:'150px'}}
placeholder="input placeholder"
onChange={this.grid_z}
value={this.state.docking.gridz}
/>
</Form.Item> </Form.Item>
</Form> </Form>
)} )}
<div className="Speed-div"> <div className='Speed-div'>
Speed： Speed：
<Radio.Group <Radio.Group onChange={this.onChangeSpeed} value={this.state.docking.handlespeed}>
onChange={this.onChangeSpeed} <Radio value={'slow'}>accurate</Radio>
value={this.state.docking.handlespeed} <Radio value={'quick'}>quick</Radio>
> <Radio value={'highpass'}>high throught</Radio>
<Radio value={"slow"}>accurate</Radio>
<Radio value={"quick"}>quick</Radio>
<Radio value={"highpass"}>high throught</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
</div> </div>
)} )}
{list[2].state && ( {list[2].state && (
<div className="pharmacophore-div"> <div className='pharmacophore-div'>
<div className="pharmacophore-top"> <div className='pharmacophore-top'>
<div className="pharmacophore-title"> <div className='pharmacophore-title'>Pharmacophore Database from PDB Rharmacophore:</div>
Pharmacophore Database from PDB Rharmacophore:
</div>
<Radio.Group onChange={this.onChange} value={1}> <Radio.Group onChange={this.onChange} value={1}>
<Radio value={1}>PDB</Radio> <Radio value={1}>PDB</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
<div className="pharmacophore-top"> <div className='pharmacophore-top'>
<div className="pharmacophore-title2"> <div className='pharmacophore-title2'>Number of Results Retained:</div>
Number of Results Retained:
</div>
<div> <div>
<InputNumber <InputNumber min={0} onChange={this.select_nums} value={this.state.pharmacophoreData.select_nums} style={{ width: '200px' }} />
min={0}
onChange={this.select_nums}
value={this.state.pharmacophoreData.select_nums}
style={{ width: "200px" }}
/>
</div> </div>
</div> </div>
</div> </div>
)} )}
{list[3].state && ( {list[3].state && (
<div className="generalsearch-div"> <div className='generalsearch-div'>
<Form className="ant-advanced-search-form"> <Form className='ant-advanced-search-form'>
<Col span={12}> <Col span={12}>
<Form.Item label="num_gen" {...formItemLayout3}> <Form.Item label='num_gen' {...formItemLayout3}>
<InputNumber <InputNumber style={{ width: '150px' }} min={0} placeholder='input placeholder' onChange={this.num_gen} value={this.state.amd.num_gen} />
style={{width:'150px'}}
min={0}
placeholder="input placeholder"
onChange={this.num_gen}
value={this.state.amd.num_gen}
/>
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Form.Item label="num_per_gen" {...formItemLayout3}> <Form.Item label='num_per_gen' {...formItemLayout3}>
<InputNumber <InputNumber style={{ width: '150px' }} min={0} onChange={this.num_per_gen} value={this.state.amd.num_per_gen} placeholder='input placeholder' />
style={{width:'150px'}}
min={0}
onChange={this.num_per_gen}
value={this.state.amd.num_per_gen}
placeholder="input placeholder"
/>
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Form.Item label="seed_per_gen" {...formItemLayout3}> <Form.Item label='seed_per_gen' {...formItemLayout3}>
<InputNumber <InputNumber style={{ width: '150px' }} min={0} onChange={this.seed_per_gen} value={this.state.amd.seed_per_gen} placeholder='input placeholder' />
style={{width:'150px'}}
min={0}
onChange={this.seed_per_gen}
value={this.state.amd.seed_per_gen}
placeholder="input placeholder"
/>
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Form.Item label="grow type" {...formItemLayout3}> <Form.Item label='grow type' {...formItemLayout3}>
{/* <Input {/* <Input
onChange={this.growType} onChange={this.growType}
value={this.state.amd.growType} value={this.state.amd.growType}
placeholder="input placeholder" placeholder="input placeholder"
/> */} /> */}
<Select onChange={this.growType} style={{width:'150px'}}> <Select onChange={this.growType} style={{ width: '150px' }}>
<Option value="grow">grow</Option> <Option value='grow'>grow</Option>
<Option value="mutation">mutation</Option> <Option value='mutation'>mutation</Option>
<Option value="bioisoteric">bioisoteric</Option> <Option value='bioisoteric'>bioisoteric</Option>
<Option value="reaction">reaction</Option> <Option value='reaction'>reaction</Option>
</Select> </Select>
</Form.Item> </Form.Item>
</Col> </Col>
</Form> </Form>
<div className="title-text">Docking</div> <div className='title-text'>Docking</div>
<div className="Speed-div"> <div className='Speed-div'>
Speed： Speed：
<Radio.Group <Radio.Group onChange={this.amdSpeed} value={this.state.amd.handlespeed}>
onChange={this.amdSpeed} <Radio value={'XP'}>accurate</Radio>
value={this.state.amd.handlespeed} <Radio value={'SP'}>quick</Radio>
> <Radio value={'HTVS'}>high throught Ⅰ</Radio>
<Radio value={"XP"}>accurate</Radio> <Radio value={'vina'}>high throught Ⅱ</Radio>
<Radio value={"SP"}>quick</Radio>
<Radio value={"HTVS"}>high throught Ⅰ</Radio>
<Radio value={"vina"}>high throught Ⅱ</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
<Radio.Group <Radio.Group value={this.state.amd.pro} onChange={this.onChangeAmd}>
value={this.state.amd.pro} <Radio style={radioStyle} value={'file'}>
onChange={this.onChangeAmd}
>
<Radio style={radioStyle} value={"file"}>
Upload receptor file from your computer: Upload receptor file from your computer:
<Upload {...props3}> <Upload {...props3}>
<Button style={{ marginLeft: "5px" }}> <Button style={{ marginLeft: '5px' }}>
<Icon type="upload" /> 选择文件 <Icon type='upload' /> 选择文件
</Button> </Button>
</Upload> </Upload>
</Radio> </Radio>
<Radio style={radioStyle} value={"pdbid"}> <Radio style={radioStyle} value={'pdbid'}>
Specify PDB ID of receptor: Specify PDB ID of receptor:
<Input <Input style={{ width: '200px', marginLeft: '5px' }} value={this.state.amd.receptor_pdb} onChange={this.SpecifyPDB2} />
style={{ width: "200px", marginLeft: "5px" }}
value={this.state.amd.receptor_pdb}
onChange={this.SpecifyPDB2}
/>
</Radio> </Radio>
</Radio.Group> </Radio.Group>
<div className="DockingCenter"> <div className='DockingCenter'>
Docking Center： Docking Center：
<Radio.Group <Radio.Group onChange={this.onChangeAmdCenter} value={this.state.amd.docking_center}>
onChange={this.onChangeAmdCenter} <Radio value={'inputcenter'}>yes</Radio>
value={this.state.amd.docking_center} <Radio value={'notinputcenter'}>no</Radio>
>
<Radio value={"inputcenter"}>yes</Radio>
<Radio value={"notinputcenter"}>no</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
{this.state.amd.docking_center == "inputcenter" && ( {this.state.amd.docking_center == 'inputcenter' && (
<Form layout="inline"> <Form layout='inline'>
<Form.Item label="X" {...formItemLayout}> <Form.Item label='X' {...formItemLayout}>
<InputNumber <InputNumber style={{ width: '150px' }} placeholder='input placeholder' value={this.state.amd.x} onChange={this.amd_x} />
style={{width:'150px'}}
placeholder="input placeholder"
value={this.state.amd.x}
onChange={this.amd_x}
/>
</Form.Item> </Form.Item>
<Form.Item label="Y" {...formItemLayout}> <Form.Item label='Y' {...formItemLayout}>
<InputNumber <InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.amd_y} value={this.state.amd.y} />
style={{width:'150px'}}
placeholder="input placeholder"
onChange={this.amd_y}
value={this.state.amd.y}
/>
</Form.Item> </Form.Item>
<Form.Item label="Z" {...formItemLayout}> <Form.Item label='Z' {...formItemLayout}>
<InputNumber <InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.amd_z} value={this.state.amd.z} />
style={{width:'150px'}}
placeholder="input placeholder"
onChange={this.amd_z}
value={this.state.amd.z}
/>
</Form.Item> </Form.Item>
</Form> </Form>
)} )}
<div className="title-text">Deep Learning</div> <div className='title-text'>Deep Learning</div>
<Form <Form className='generalsearch-div' style={{ height: '80px' }}>
className="generalsearch-div"
style={{ height: "80px" }}
>
{/* <Form.Item label="Form Layout" {...formItemLayout} /> */} {/* <Form.Item label="Form Layout" {...formItemLayout} /> */}
<Col span={12}> <Col span={12}>
<Form.Item label="mode" {...formItemLayout3}> <Form.Item label='mode' {...formItemLayout3}>
<InputNumber <InputNumber style={{ width: '150px' }} value={this.state.amd.mode} onChange={this.amdmode} placeholder='input placeholder' />
style={{width:'150px'}}
value={this.state.amd.mode}
onChange={this.amdmode}
placeholder="input placeholder"
/>
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Form.Item label="dl_per_gen" {...formItemLayout3}> <Form.Item label='dl_per_gen' {...formItemLayout3}>
<InputNumber <InputNumber style={{ width: '150px' }} value={this.state.amd.dl_per_gen} onChange={this.amd_dl_per_gen} placeholder='input placeholder' />
style={{width:'150px'}}
value={this.state.amd.dl_per_gen}
onChange={this.amd_dl_per_gen}
placeholder="input placeholder"
/>
</Form.Item> </Form.Item>
</Col> </Col>
{/* <Col span={12}> {/* <Col span={12}>
...@@ -1535,30 +1265,17 @@ export default class StructureSearch extends Component { ...@@ -1535,30 +1265,17 @@ export default class StructureSearch extends Component {
</Form.Item> </Form.Item>
</Col> */} </Col> */}
</Form> </Form>
<div className="title-text">Properties</div> <div className='title-text'>Properties</div>
<Form <Form className='generalsearch-div' style={{ height: '100px' }}>
className="generalsearch-div"
style={{ height: "100px" }}
>
{/* <Form.Item label="Form Layout" {...formItemLayout} /> */} {/* <Form.Item label="Form Layout" {...formItemLayout} /> */}
<Col span={12}> <Col span={12}>
<Form.Item label="MW" {...formItemLayout3}> <Form.Item label='MW' {...formItemLayout3}>
<InputNumber <InputNumber style={{ width: '150px' }} value={this.state.amd.MW} onChange={this.amdMW} placeholder='input placeholder' />
style={{width:'150px'}}
value={this.state.amd.MW}
onChange={this.amdMW}
placeholder="input placeholder"
/>
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Form.Item label="logP_lower" {...formItemLayout3}> <Form.Item label='logP_lower' {...formItemLayout3}>
<InputNumber <InputNumber style={{ width: '150px' }} value={this.state.amd.logP_lower} onChange={this.amd_logP_lower} placeholder='input placeholder' />
style={{width:'150px'}}
value={this.state.amd.logP_lower}
onChange={this.amd_logP_lower}
placeholder="input placeholder"
/>
</Form.Item> </Form.Item>
</Col> </Col>
{/* <Col span={12}> {/* <Col span={12}>
...@@ -1573,75 +1290,45 @@ export default class StructureSearch extends Component { ...@@ -1573,75 +1290,45 @@ export default class StructureSearch extends Component {
</div> </div>
)} )}
{list[5].state && ( {list[5].state && (
<div className="taskmanager-div"> <div className='taskmanager-div'>
<div className="search-div"> <div className='search-div'>
<Form layout="inline"> <Form layout='inline'>
<Form.Item label="type"> <Form.Item label='type'>
<Select <Select style={{ width: 120 }} onChange={this.handleChange} defaultValue=''>
style={{ width: 120 }} <Option value='1'>retrosynthesis</Option>
onChange={this.handleChange} <Option value='2'>docking</Option>
defaultValue="" <Option value='3'>amd</Option>
> <Option value='4'>pharmacophore</Option>
<Option value="1">retrosynthesis</Option> <Option value=''>all</Option>
<Option value="2">docking</Option>
<Option value="3">amd</Option>
<Option value="4">pharmacophore</Option>
<Option value="">all</Option>
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="status"> <Form.Item label='status'>
<Select <Select style={{ width: 120 }} onChange={this.handleChange2} defaultValue=''>
style={{ width: 120 }} <Option value='1'>running</Option>
onChange={this.handleChange2} <Option value='2'>finshed</Option>
defaultValue="" <Option value='3'>others</Option>
> <Option value=''>all</Option>
<Option value="1">running</Option>
<Option value="2">finshed</Option>
<Option value="3">others</Option>
<Option value="">all</Option>
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item> <Form.Item>
<Button type="primary" onClick={this.getTaskManager}> <Button type='primary' onClick={this.getTaskManager}>
search search
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
<div className="list-div"> <div className='list-div'>
<Table <Table columns={columns} pagination={false} dataSource={ListData} rowKey='id' />
columns={columns}
pagination={false} <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange2} total={total_num} />
dataSource={ListData}
rowKey="id"
/>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
onChange={this.onChange2}
total={total_num}
/>
</div> </div>
</div> </div>
)} )}
</div> </div>
</div> </div>
<div <div className={this.state.stateName === 'Welcome' || this.state.stateName === 'Task Manager' ? 'displaydiv' : 'bottom-butn'}>
className={ <Button onClick={this.goList} type='primary' size='large' shape='round'>
this.state.stateName === "Welcome" ||
this.state.stateName === "Task Manager"
? "displaydiv"
: "bottom-butn"
}
>
<Button
onClick={this.goList}
type="primary"
size="large"
shape="round"
>
Run Run
</Button> </Button>
</div> </div>
......
src/routes/Home/TargetDetails/index.js
...@@ -496,7 +496,7 @@ export default class TargetDetails extends Component { ...@@ -496,7 +496,7 @@ export default class TargetDetails extends Component {
columns={columnsMutation} columns={columnsMutation}
/> />
</Panel> </Panel>
<Panel header="Drug & Clinical imformation" key="4"> <Panel header="Drug & Clinical information" key="4">
<Table <Table
bordered bordered
rowKey='item' rowKey='item'
......
src/routes/Home/index.js
import React from "react"; import React from 'react';
import { import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col, Card } from 'antd';
Form, import LogoTitlte from '../../components/LogoTitlte/index';
Input, import { Jsme } from 'jsme-react';
Button, import qs from 'qs';
Select, import request from '../../utils/request';
Tabs, import './style.css';
message,
Radio,
Checkbox,
Row,
Col,
Card
} from "antd";
import LogoTitlte from "../../components/LogoTitlte/index";
import { Jsme } from "jsme-react";
import qs from "qs";
import request from "../../utils/request";
import "./style.css";
const { TabPane } = Tabs; const { TabPane } = Tabs;
const { Option } = Select; const { Option } = Select;
const { Meta } = Card; const { Meta } = Card;
class Home extends React.Component { class Home extends React.Component {
state = { state = {
select_db: "Ligands", select_db: 'Ligands',
data: "", data: '',
page: 1, page: 1,
page_size: 10, page_size: 10,
data_type: "smile", data_type: 'smile',
target_class: "", target_class: '',
// target_families:'', // target_families:'',
searchData: { searchData: {
antibodyName: "", antibodyName: '',
species: "", species: '',
antibodyType: "", antibodyType: '',
antigenName: "", antigenName: '',
clinicalIndication: "", clinicalIndication: '',
companies: "", companies: '',
status: "", status: '',
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
}, },
...@@ -47,17 +35,17 @@ class Home extends React.Component { ...@@ -47,17 +35,17 @@ class Home extends React.Component {
StatusList: [], StatusList: [],
draw: false, draw: false,
classList: [], classList: [],
classData: "All Class", classData: 'All Class',
allClassList: {}, allClassList: {},
childClassList: [], childClassList: [],
list: [ list: [
{ {
name: "general search", name: 'general search',
state: true, state: true,
searchType: 1, searchType: 1,
}, },
{ {
name: "cdr search", name: 'cdr search',
state: false, state: false,
searchType: 2, searchType: 2,
}, },
...@@ -117,7 +105,7 @@ class Home extends React.Component { ...@@ -117,7 +105,7 @@ class Home extends React.Component {
console.log(qs.parse(this.props.location.search.slice(1))); console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({ loading: true }); this.setState({ loading: true });
request request
.get("/common/codes") .get('/common/codes')
.then((res) => { .then((res) => {
console.log(res); console.log(res);
if (res.data.code === 0) { if (res.data.code === 0) {
...@@ -161,7 +149,7 @@ class Home extends React.Component { ...@@ -161,7 +149,7 @@ class Home extends React.Component {
clinicalIndication: this.state.searchData.clinicalIndication, clinicalIndication: this.state.searchData.clinicalIndication,
}; };
this.props.history.push({ this.props.history.push({
pathname: "/home/AutoimmuneDiseases", pathname: '/home/AutoimmuneDiseases',
search: qs.stringify(data), search: qs.stringify(data),
}); });
}; };
...@@ -169,7 +157,7 @@ class Home extends React.Component { ...@@ -169,7 +157,7 @@ class Home extends React.Component {
getList = () => { getList = () => {
let data = this.state.searchData; let data = this.state.searchData;
this.props.history.push({ this.props.history.push({
pathname: "/home/StructureSearch", pathname: '/home/StructureSearch',
search: qs.stringify(data), search: qs.stringify(data),
}); });
}; };
...@@ -224,10 +212,10 @@ class Home extends React.Component { ...@@ -224,10 +212,10 @@ class Home extends React.Component {
wrapperCol: { span: 13, offset: 8 }, wrapperCol: { span: 13, offset: 8 },
}; };
return ( return (
<div className="home"> <div className='home'>
<LogoTitlte /> <LogoTitlte />
<div className="home-div"> <div className='home-div'>
<div className="top-div"> <div className='top-div'>
{/* <Tabs onChange={this.callback} type="card"> {/* <Tabs onChange={this.callback} type="card">
<TabPane tab="search" key="1"> <TabPane tab="search" key="1">
<Button type="primary" onClick={this.getList} >结构搜索</Button> <Button type="primary" onClick={this.getList} >结构搜索</Button>
...@@ -237,8 +225,8 @@ class Home extends React.Component { ...@@ -237,8 +225,8 @@ class Home extends React.Component {
</TabPane> </TabPane>
</Tabs> */} </Tabs> */}
<div className="home-top-div"> <div className='home-top-div'>
<div className="left-div"> <div className='left-div'>
{list.map((item, index) => { {list.map((item, index) => {
// return ( // return (
// <Button // <Button
...@@ -253,68 +241,28 @@ class Home extends React.Component { ...@@ -253,68 +241,28 @@ class Home extends React.Component {
// ); // );
})} })}
</div> </div>
<div className="right-div"> <div className='right-div'>
{list[0].state && ( {list[0].state && (
<Button type="primary" onClick={this.getList}> <Button type='primary' onClick={this.getList}>
结构搜索 结构搜索
</Button> </Button>
)} )}
{list[1].state && ( {list[1].state && <Button type='primary'>docking retrosynthesis</Button>}
<Button type="primary">docking retrosynthesis</Button>
)}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="cardLIst"> <div className='cardLIst'>
<Card <Card hoverable style={{ width: 240 }} cover={<img alt='example' src='http://52.83.169.190:3003/images/soluImg2.png' />}>
hoverable <Meta title='模块' description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean' />
style={{ width: 240 }} </Card>
cover={ <Card hoverable style={{ width: 240 }} cover={<img alt='example' src='http://52.83.169.190:3003/images/soluImg2.png' />}>
<img <Meta title='模块' description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean' />
alt="example" </Card>
src="http://52.83.169.190:3003/images/soluImg2.png" <Card hoverable style={{ width: 240 }} cover={<img alt='example' src='http://52.83.169.190:3003/images/soluImg2.png' />}>
/> <Meta title='模块' description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean' />
} </Card>
> </div>
<Meta
title="模块"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean"
/>
</Card>
<Card
hoverable
style={{ width: 240 }}
cover={
<img
alt="example"
src="http://52.83.169.190:3003/images/soluImg2.png"
/>
}
>
<Meta
title="模块"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean"
/>
</Card>
<Card
hoverable
style={{ width: 240 }}
cover={
<img
alt="example"
src="http://52.83.169.190:3003/images/soluImg2.png"
/>
}
>
<Meta
title="模块"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean"
/>
</Card>
</div>
</div> </div>
); );
} }
......
src/routes/Index/index.js
import React from 'react' import React from 'react';
import {Layout} from 'antd' import { Layout } from 'antd';
import SiderNav from '../../components/SiderNav' import SiderNav from '../../components/SiderNav';
import ContentMain from '../../components/ContentMain' import ContentMain from '../../components/ContentMain';
import HeaderBar from '../../components/HeaderBar' import HeaderBar from '../../components/HeaderBar';
const {Sider, Header, Content, Footer} = Layout const { Sider, Header, Content, Footer } = Layout;
class Index extends React.Component {
class Index extends React.Component{
state = { state = {
collapsed: false collapsed: false,
} };
toggle = () => { toggle = () => {
// console.log(this) 状态提升后，到底是谁调用的它 // console.log(this) 状态提升后，到底是谁调用的它
this.setState({ this.setState({
collapsed: !this.state.collapsed collapsed: !this.state.collapsed,
}) });
} };
render() { render() {
// 设置Sider的minHeight可以使左右自适应对齐 // 设置Sider的minHeight可以使左右自适应对齐
return ( return (
<div id='page'> <div id='page'>
<Layout> <Layout>
<Sider collapsible <Sider collapsible trigger={null} collapsed={this.state.collapsed}>
trigger={null} <SiderNav />
collapsed={this.state.collapsed}
>
<SiderNav/>
</Sider> </Sider>
<Layout> <Layout>
<Header style={{background: '#fff', padding: '0 16px'}}> <Header style={{ background: '#fff', padding: '0 16px' }}>
<HeaderBar collapsed={this.state.collapsed} onToggle={this.toggle}/> <HeaderBar collapsed={this.state.collapsed} onToggle={this.toggle} />
</Header> </Header>
<Content> <Content>
<ContentMain/> <ContentMain />
</Content> </Content>
{/* <Footer></Footer> */} {/* <Footer></Footer> */}
</Layout> </Layout>
...@@ -43,4 +39,4 @@ class Index extends React.Component{ ...@@ -43,4 +39,4 @@ class Index extends React.Component{
); );
} }
} }
export default Index export default Index;
\ No newline at end of file
src/routes/Login/LoginForm.js
...@@ -132,7 +132,7 @@ class LoginForm extends React.Component { ...@@ -132,7 +132,7 @@ class LoginForm extends React.Component {
const {focusItem,} = this.state const {focusItem,} = this.state
return ( return (
<div className={this.props.className}> <div className={this.props.className}>
<h3 className='title'>管理员登录</h3> <h3 className='title'>管理员登录 </h3>
<Form onSubmit={this.loginSubmit}> <Form onSubmit={this.loginSubmit}>
<Form.Item help={getFieldError('userAccount') && <Form.Item help={getFieldError('userAccount') &&
<PromptBox info={getFieldError('userAccount')} width={calculateWidth(getFieldError('userAccount'))}/>}> <PromptBox info={getFieldError('userAccount')} width={calculateWidth(getFieldError('userAccount'))}/>}>
......
src/utils/request.js
// import axios from 'axios';
// axios.defaults.timeout = 15000
// export const request = axios.create({
// baseURL: 'http://52.83.230.236:9001/yszh/1/api/',
// });
import axios from 'axios'; import axios from 'axios';
// import { bind } from "file-loader"; import { getQueryString } from './utils';
axios.defaults.timeout = 15000; import { message } from 'antd';
console.log(window.localStorage.getItem('token'));
//设置请求得基准地址
axios.defaults.baseURL = 'http://tcal.atelligence-ai.com/';
const request = axios.create();
//设置请求头
// document.onkeydown = function() { //禁用F12功能
// var e = window.event || arguments[0]; function disableF12() {
// if (e.keyCode == 123) { document.onkeydown = function() {
// return false; var e = window.event || arguments[0];
// } else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) { if (e.keyCode == 123) {
// return false; return false;
// } } else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
// }; return false;
// document.oncontextmenu = function() { }
// return false; };
// }; //禁用鼠标右键
document.oncontextmenu = function() {
return false;
};
}
// disableF12();
// axios.defaults.headers['content-type'] ='application/json'; //对axios二次封装
// request.interceptors.request.use(config => { // console.log('getQueryString', getQueryString('token'));
// // 给请求头加token的字段,值为token // console.log('localStorage', localStorage.getItem('token'));
const token = getQueryString('token') || localStorage.getItem('token');
const request = axios.create({
baseURL: 'http://tcal.atelligence-ai.com/',
timeout: 15000,
headers: {
// 'Content-Type': 'application/json',
accessToken: token,
},
});
// config.headers.accessToken = window.localStorage.getItem('token') function checkToken(config) {
request
.get('http://69.235.144.91:8048/yszh-login/auth/checkToken')
.then((res) => {
console.log(res);
if (res.data.code === 200) {
console.log('token 检验通过');
return config;
} else {
// message.error('请重新登录');
console.log('token校验没通过 返回登录页');
// window.open('http://localhost:3000/#/login', '_self');
window.open('http://69.235.144.91:3048/#/login', '_self');
}
})
.catch((err) => {
console.log('token校验报错 返回登录页');
// message.error('请重新登录');
window.open('http://69.235.144.91:3048/#/login', '_self');
console.log('err', err);
});
}
checkToken();
// return config //拦截器
// }) request.interceptors.request.use((config) => {
// alert('拦截器..');
console.log('token---', '拦截器方法校验token');
if (!!token) {
checkToken(config);
} else {
console.log('token为空....');
window.open('http://69.235.144.91:3048/#/login', '_self');
}
// return config;
});
request.interceptors.response.use(
(res) => {
return res.data;
},
(err) => {
if (err && err.response) {
switch (err.response.status) {
case 400:
console.log('请求错误');
break;
case 401:
console.log('未授权访问');
break;
case 404:
console.log('页面未找到');
break;
default:
console.log('其他错误信息');
}
}
return err;
}
);
//导出
export default request; export default request;
src/utils/utils.js
...@@ -63,4 +63,18 @@ export function preloadingImages(arr) { ...@@ -63,4 +63,18 @@ export function preloadingImages(arr) {
const img = new Image() const img = new Image()
img.src = item img.src = item
}) })
}
/**
* 获取URL中指定的参数
*/
export function getQueryString(name) {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
let r = window.location.hash.split('?')[1] && window.location.hash.split('?')[1].match(reg); //获取url中"?"符后的字符串并正则匹配
let context = '';
if (r != null) context = decodeURIComponent(r[2]);
reg = null;
r = null;
return context == null || context == '' || context == 'undefined' ? '' : context;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment