Skip to content

P
pdbSmallMolecules
Commit ee6eb852 by wangshufen
Options

feature:登录功能添加token校验

parent c1dd973d
Showing with 791 additions and 954 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',
},
};
.gitignore
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
/.idea /.idea
/.vscode
# misc # misc
.DS_Store .DS_Store
.env.local .env.local
......
jsconfig.json 0 → 100644
{
"compilerOptions": {
"baseUrl": "./",
"experimentalDecorators": true,
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", ".vscode", "library", "local", "settings", "temp", "build"]
}
src/routes/Home/IndicationDetails/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Pagination, message, Button, Tabs, Spin, Table, Tag, Typography } from 'antd' import { Pagination, message, Button, Tabs, Spin, Table, Tag, Typography } from 'antd'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import './index.css' import './index.css'
import qs from 'qs' import qs from 'qs'
const { Title } = Typography const { Title } = Typography
......
src/routes/Home/LigandDetails/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Card, Tooltip, Pagination, message, Radio, Button, Tabs, Spin, Table, Tag, Input, Collapse, Modal, Form, Select, InputNumber, Typography } from 'antd' import { Card, Tooltip, Pagination, message, Radio, Button, Tabs, Spin, Table, Tag, Input, Collapse, Modal, Form, Select, InputNumber, Typography } from 'antd'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import Molstar from "molstar-react" import Molstar from "molstar-react"
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
......
src/routes/Home/MutationDetails/index.js
...@@ -18,7 +18,7 @@ import { ...@@ -18,7 +18,7 @@ import {
Anchor, Anchor,
Pagination Pagination
} from 'antd' } from 'antd'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import Molstar from 'molstar-react' import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
......
src/routes/Home/SearchDetails/index.js
...@@ -18,7 +18,7 @@ import { ...@@ -18,7 +18,7 @@ import {
Pagination, Pagination,
Anchor Anchor
} from 'antd' } from 'antd'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import Molstar from 'molstar-react' import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
......
src/routes/Home/SearchList/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import { Card,Button,Pagination,Tabs,Spin,message ,Tag} from 'antd'; import { Card,Button,Pagination,Tabs,Spin,message ,Tag} from 'antd';
import { request } from '../../../utils/request' import request from '../../../utils/request'
import qs from 'qs' import qs from 'qs'
import './index.css' import './index.css'
const { TabPane } = Tabs; const { TabPane } = Tabs;
......
src/routes/Home/TargetDetails/index.js
...@@ -21,7 +21,7 @@ import { ...@@ -21,7 +21,7 @@ import {
Anchor, Anchor,
Pagination Pagination
} from 'antd' } from 'antd'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import Molstar from 'molstar-react' import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
......
src/routes/Home/index.js
...@@ -14,7 +14,7 @@ import { ...@@ -14,7 +14,7 @@ import {
import LogoTitlte from '../../components/LogoTitlte/index' import LogoTitlte from '../../components/LogoTitlte/index'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
import { request } from '../../utils/request' import request from '../../utils/request'
import './style.css' import './style.css'
const { TabPane } = Tabs const { TabPane } = Tabs
const { Option } = Select const { Option } = Select
......
src/routes/KnowledgeMap/index.js
// import React, { Component } from 'react' // import React, { Component } from 'react'
// import { Jsme } from 'jsme-react' // import { Jsme } from 'jsme-react'
// import qs from 'qs' // import qs from 'qs'
// import { request } from '../../utils/request' // import request from '../../utils/request'
// import Graphin, { GraphinContext, Components, Utils } from '@antv/graphin' // import Graphin, { GraphinContext, Components, Utils } from '@antv/graphin'
// import { ContextMenu, } from '@antv/graphin-components' // import { ContextMenu, } from '@antv/graphin-components'
// import Animate from 'rc-animate' // import Animate from 'rc-animate'
......
src/routes/Login/LoginForm.js
...@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom' ...@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react/index' import { inject, observer } from 'mobx-react/index'
import { Form, Input, message } from 'antd' import { Form, Input, message } from 'antd'
import PromptBox from '../../components/PromptBox' import PromptBox from '../../components/PromptBox'
import { request } from '../../utils/request' import request from '../../utils/request'
import qs from 'qs' import qs from 'qs'
import md5 from 'js-md5' import md5 from 'js-md5'
......
src/routes/Login/index.js
import React, { Component } from 'react' import React, { Component } from 'react';
import { import { Table, Input, Button, Form, Select, Pagination, message, Tag, Spin, Popover, Checkbox, InputNumber, Icon, Modal, Tooltip, Divider, Radio } from 'antd';
Table, import { Jsme } from 'jsme-react';
Input, import request from '../../utils/request';
Button, import LogoTitlte from '../../components/LogoTitlte/index';
Form, import WrappedIframe from '../../components/iframePdb';
Select,
Pagination, import './index.css';
message, const { Option } = Select;
Tag, const { TextArea } = Input;
Spin, let id = 0;
Popover,
Checkbox,
InputNumber,
Icon,
Modal,
Tooltip,
Divider,
Radio
} from 'antd'
import { Jsme } from 'jsme-react'
import { request } from '../../utils/request'
import LogoTitlte from '../../components/LogoTitlte/index'
import WrappedIframe from '../../components/iframePdb'
import './index.css'
const { Option } = Select
const { TextArea } = Input
let id = 0
@Form.create() @Form.create()
export default class padSmallSearch extends Component { export default class padSmallSearch extends Component {
state = { state = {
...@@ -123,9 +105,7 @@ export default class padSmallSearch extends Component { ...@@ -123,9 +105,7 @@ export default class padSmallSearch extends Component {
visible: false, visible: false,
pdbLinkWindow: '', pdbLinkWindow: '',
ligandListSelect: [], ligandListSelect: [],
SourceList: [ SourceList: [],
],
AlignLigandsList: [ AlignLigandsList: [
{ {
pdb_name: '', pdb_name: '',
...@@ -138,102 +118,97 @@ export default class padSmallSearch extends Component { ...@@ -138,102 +118,97 @@ export default class padSmallSearch extends Component {
{ {
pdb_name: '', pdb_name: '',
ligand: '', ligand: '',
} },
], ],
SelectligandLink: '', SelectligandLink: '',
listKey: [], listKey: [],
selectedRows: [], selectedRows: [],
sequenceStste: false sequenceStste: false,
} };
SelectValue = (e) => { SelectValue = (e) => {
console.log(e) console.log(e);
let superpositionData = this.state.superpositionData let superpositionData = this.state.superpositionData;
superpositionData[0].pdbID = e superpositionData[0].pdbID = e;
this.setState(() => ({ superpositionData: superpositionData })) this.setState(() => ({ superpositionData: superpositionData }));
} };
SelectValueCompound = (e) => { SelectValueCompound = (e) => {
console.log(e) console.log(e);
let AlignLigandsList = this.state.AlignLigandsList let AlignLigandsList = this.state.AlignLigandsList;
AlignLigandsList[0].ligand = e AlignLigandsList[0].ligand = e;
this.setState(() => ({ AlignLigandsList: AlignLigandsList })) this.setState(() => ({ AlignLigandsList: AlignLigandsList }));
} };
SelectValueSource = (e) => { SelectValueSource = (e) => {
console.log(e) console.log(e);
let AlignLigandsList = this.state.AlignLigandsList let AlignLigandsList = this.state.AlignLigandsList;
AlignLigandsList[0].pdb_name = e AlignLigandsList[0].pdb_name = e;
this.setState(() => ({ AlignLigandsList: AlignLigandsList })) this.setState(() => ({ AlignLigandsList: AlignLigandsList }));
} };
SelectValueCompound2 = (e) => { SelectValueCompound2 = (e) => {
console.log(e) console.log(e);
let AlignLigandsList = this.state.AlignLigandsList let AlignLigandsList = this.state.AlignLigandsList;
AlignLigandsList[1].ligand = e AlignLigandsList[1].ligand = e;
this.setState(() => ({ AlignLigandsList: AlignLigandsList })) this.setState(() => ({ AlignLigandsList: AlignLigandsList }));
} };
SelectValueSource2 = (e) => { SelectValueSource2 = (e) => {
console.log(e) console.log(e);
let AlignLigandsList = this.state.AlignLigandsList let AlignLigandsList = this.state.AlignLigandsList;
AlignLigandsList[1].pdb_name = e AlignLigandsList[1].pdb_name = e;
this.setState(() => ({ AlignLigandsList: AlignLigandsList })) this.setState(() => ({ AlignLigandsList: AlignLigandsList }));
} };
SelectValueCompound3 = (e) => { SelectValueCompound3 = (e) => {
console.log(e) console.log(e);
let AlignLigandsList = this.state.AlignLigandsList let AlignLigandsList = this.state.AlignLigandsList;
AlignLigandsList[2].ligand = e AlignLigandsList[2].ligand = e;
this.setState(() => ({ AlignLigandsList: AlignLigandsList })) this.setState(() => ({ AlignLigandsList: AlignLigandsList }));
} };
SelectValueSource3 = (e) => { SelectValueSource3 = (e) => {
console.log(e) console.log(e);
let AlignLigandsList = this.state.AlignLigandsList let AlignLigandsList = this.state.AlignLigandsList;
AlignLigandsList[2].pdb_name = e AlignLigandsList[2].pdb_name = e;
this.setState(() => ({ AlignLigandsList: AlignLigandsList })) this.setState(() => ({ AlignLigandsList: AlignLigandsList }));
} };
handleSubmit2 = () => { handleSubmit2 = () => {
let AlignLigandsList = this.state.AlignLigandsList let AlignLigandsList = this.state.AlignLigandsList;
let listData = { let listData = {
pdb_code: '', pdb_code: '',
ligand: '', ligand: '',
resolution: 0, resolution: 0,
ligandList: AlignLigandsList ligandList: AlignLigandsList,
} };
let SelectligandLink = let SelectligandLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
this.setState({ this.setState({
SelectligandLink, SelectligandLink,
}) });
console.log(SelectligandLink) console.log(SelectligandLink);
};
}
handleSubmit3 = () => { handleSubmit3 = () => {
let AlignLigandsList = this.state.AlignLigandsList let AlignLigandsList = this.state.AlignLigandsList;
let arr = [] let arr = [];
AlignLigandsList.forEach(element => { AlignLigandsList.forEach((element) => {
arr.push({ arr.push({
compID: element.ligand, compID: element.ligand,
pdbID: element.pdb_name pdbID: element.pdb_name,
}) });
});
}) console.log(arr);
console.log(arr)
let listData = { let listData = {
pdb_code: '', pdb_code: '',
ligand: '', ligand: '',
resolution: 0, resolution: 0,
SelectligandList: arr SelectligandList: arr,
} };
let SelectligandListLink = let SelectligandListLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
this.setState({ this.setState({
SelectligandLink: SelectligandListLink SelectligandLink: SelectligandListLink,
}) });
console.log(SelectligandListLink) console.log(SelectligandListLink);
};
}
popupWindow = (e) => { popupWindow = (e) => {
const { pdb_name, ligand } = e const { pdb_name, ligand } = e;
console.log(111) console.log(111);
this.setState({ this.setState({
visible: true, visible: true,
}) });
let listData = { let listData = {
pdb_code: '', pdb_code: '',
...@@ -245,76 +220,75 @@ export default class padSmallSearch extends Component { ...@@ -245,76 +220,75 @@ export default class padSmallSearch extends Component {
ligand: ligand, ligand: ligand,
}, },
], ],
} };
let pdbLinkWindow = let pdbLinkWindow = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
this.setState({ this.setState({
pdbLinkWindow, pdbLinkWindow,
}) });
} };
getValueChain = (e) => { getValueChain = (e) => {
const { value } = e.target const { value } = e.target;
let superpositionData = this.state.superpositionData let superpositionData = this.state.superpositionData;
superpositionData[0].chainID = value superpositionData[0].chainID = value;
this.setState(() => ({ superpositionData: superpositionData })) this.setState(() => ({ superpositionData: superpositionData }));
} };
addSlection = () => { addSlection = () => {
let pdbLigandList = this.state.pdbLigandList let pdbLigandList = this.state.pdbLigandList;
let SourceList = JSON.parse(JSON.stringify(pdbLigandList)) let SourceList = JSON.parse(JSON.stringify(pdbLigandList));
SourceList.push('Normal') SourceList.push('Normal');
this.setState({ SourceList }) this.setState({ SourceList });
this.setState({ this.setState({
pdbdivState: true, pdbdivState: true,
}) });
let listData = this.state.listData let listData = this.state.listData;
listData.pdbLigandList = this.state.pdbLigandList listData.pdbLigandList = this.state.pdbLigandList;
if (listData.pdbList) { if (listData.pdbList) {
delete listData.pdbList delete listData.pdbList;
} }
let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData) let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
this.setState({ this.setState({
pdbLink, pdbLink,
}) });
console.log(pdbLink) console.log(pdbLink);
console.log(this.state.pdbLink) console.log(this.state.pdbLink);
let listData2 = this.state.listData2 let listData2 = this.state.listData2;
listData2.ligandList = this.state.ligandList listData2.ligandList = this.state.ligandList;
let pdbLink2 = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData2) let pdbLink2 = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData2);
this.setState({ this.setState({
pdbLink2, pdbLink2,
}) });
console.log(pdbLink2) console.log(pdbLink2);
} };
alignStructre = () => { alignStructre = () => {
let listData = this.state.listData let listData = this.state.listData;
listData.pdbList = this.state.pdbList listData.pdbList = this.state.pdbList;
delete listData.pdbLigandList delete listData.pdbLigandList;
let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData) let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
this.setState({ this.setState({
pdbLink, pdbLink,
}) });
} };
alignLigand = () => { alignLigand = () => {
let ligandListData = this.state.ligandListData let ligandListData = this.state.ligandListData;
console.log(ligandListData) console.log(ligandListData);
if (ligandListData.length > 1) { if (ligandListData.length > 1) {
return message.warning('选择的数据Ligand必须相同') return message.warning('选择的数据Ligand必须相同');
} }
let listData3 = this.state.listData3 let listData3 = this.state.listData3;
listData3.AlignLigand = { listData3.AlignLigand = {
pdb_id: this.state.pdbLigandList, pdb_id: this.state.pdbLigandList,
ligand_code: ligandListData[0], ligand_code: ligandListData[0],
} };
let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData3) let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData3);
this.setState({ this.setState({
pdbLink, pdbLink,
}) });
} };
// onSelectChange = (selectedRowKeys, selectedRows) => { // onSelectChange = (selectedRowKeys, selectedRows) => {
// if (this.state.selectedRowKeys.length > 3 || selectedRowKeys.length > 3) { // if (this.state.selectedRowKeys.length > 3 || selectedRowKeys.length > 3) {
...@@ -364,41 +338,38 @@ export default class padSmallSearch extends Component { ...@@ -364,41 +338,38 @@ export default class padSmallSearch extends Component {
// } // }
// } // }
onChangeRadio3 = (e) => { onChangeRadio3 = (e) => {
let value = e.target.value;
let value = e.target.value console.log(value);
console.log(value) let searchData = this.state.searchData;
let searchData = this.state.searchData searchData.finger = value;
searchData.finger = value
this.setState({ this.setState({
searchData: searchData, searchData: searchData,
}) });
} };
getList = (e) => { getList = (e) => {
this.setState({ ligandList: [] }) this.setState({ ligandList: [] });
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.mol_weight = this.state.mol_weight.toString() searchData.mol_weight = this.state.mol_weight.toString();
searchData.atom_number = this.state.atom_number.toString() searchData.atom_number = this.state.atom_number.toString();
searchData.rot_bond_number = this.state.rot_bond_number.toString() searchData.rot_bond_number = this.state.rot_bond_number.toString();
if (searchData.pdb_id == '' && searchData.protein_data == '' && searchData.sequence == '' && searchData.ligand_data == '') { if (searchData.pdb_id == '' && searchData.protein_data == '' && searchData.sequence == '' && searchData.ligand_data == '') {
return message.warning('请输入查询条件！') return message.warning('请输入查询条件！');
} }
if (searchData.sequence != '') { if (searchData.sequence != '') {
this.setState({ sequenceStste: true });
this.setState({ sequenceStste: true })
} }
this.setState({ loading: true }) this.setState({ loading: true });
request request
.post('pdb/search_ligand', this.state.searchData) .post('pdb/search_ligand', this.state.searchData)
.then((res) => { .then((res) => {
this.setState({ loading: false }) this.setState({ loading: false });
if (res.data.code === 200) { if (res.data.code === 200) {
let dataList = res.data.data;
let dataList = res.data.data let selectedRows = this.state.selectedRows;
let selectedRows = this.state.selectedRows this.setState({ dataList });
this.setState({ dataList }) this.setState({ total_num: res.data.total_num });
this.setState({ total_num: res.data.total_num }) this.setState({ ListState: true });
this.setState({ ListState: true })
// let selectedRowKeys = this.state.selectedRowKeys // let selectedRowKeys = this.state.selectedRowKeys
// dataList.forEach((element, index) => { // dataList.forEach((element, index) => {
// selectedRows.forEach(element2 => { // selectedRows.forEach(element2 => {
...@@ -412,391 +383,375 @@ export default class padSmallSearch extends Component { ...@@ -412,391 +383,375 @@ export default class padSmallSearch extends Component {
// }) // })
// this.setState({ selectedRowKeys }) // this.setState({ selectedRowKeys })
// console.log(this.state.selectedRowKeys) // console.log(this.state.selectedRowKeys)
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
};
}
isObjectValueEqual = (a, b) => { isObjectValueEqual = (a, b) => {
// // 判断两个对象是否指向同一内存，指向同一内存返回 true // // 判断两个对象是否指向同一内存，指向同一内存返回 true
if (a === b) return true // 获取两个对象键值数组 if (a === b) return true; // 获取两个对象键值数组
let aProps = Object.getOwnPropertyNames(a) let aProps = Object.getOwnPropertyNames(a);
let bProps = Object.getOwnPropertyNames(b) let bProps = Object.getOwnPropertyNames(b);
// 判断两个对象键值数组长度是否一致，不一致返回 false // 判断两个对象键值数组长度是否一致，不一致返回 false
if (aProps.length !== bProps.length) return false // 遍历对象的键值 if (aProps.length !== bProps.length) return false; // 遍历对象的键值
for (let prop in a) { for (let prop in a) {
// 判断 a 的键值，在 b 中是否存在，不存在，返回 false // 判断 a 的键值，在 b 中是否存在，不存在，返回 false
if (b.hasOwnProperty(prop)) { if (b.hasOwnProperty(prop)) {
// 判断 a 的键值是否为对象，是则递归，不是对象直接判断键值是否相等，不相等返回 false // 判断 a 的键值是否为对象，是则递归，不是对象直接判断键值是否相等，不相等返回 false
if (typeof a[prop] === 'object') { if (typeof a[prop] === 'object') {
if (!this.isObjectValueEqual(a[prop], b[prop])) return false if (!this.isObjectValueEqual(a[prop], b[prop])) return false;
} else if (a[prop] !== b[prop]) { } else if (a[prop] !== b[prop]) {
return false return false;
} }
} else { } else {
return false return false;
} }
} }
return true return true;
} };
getpercent = (e) => { getpercent = (e) => {
console.log(e) console.log(e);
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.percent = e searchData.percent = e;
this.setState({ searchData: searchData }) this.setState({ searchData: searchData });
} };
getLigand = (e) => { getLigand = (e) => {
const { value } = e.target const { value } = e.target;
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.ligand_data = value searchData.ligand_data = value;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
getValue = (e) => { getValue = (e) => {
const { value } = e.target const { value } = e.target;
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.pdb_id = value searchData.pdb_id = value;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
getProtein = (e) => { getProtein = (e) => {
const { value } = e.target const { value } = e.target;
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.protein_data = value searchData.protein_data = value;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
getsequence = (e) => { getsequence = (e) => {
const { value } = e.target const { value } = e.target;
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.sequence = value searchData.sequence = value;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
onShowSizeChange = (current, pageSize) => { onShowSizeChange = (current, pageSize) => {
console.log(current, pageSize) console.log(current, pageSize);
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.page = current searchData.page = current;
searchData.page_size = pageSize searchData.page_size = pageSize;
this.setState({ this.setState({
searchData, searchData,
}) });
this.setState({ this.setState({
selectedRowKeys: [] selectedRowKeys: [],
}) });
this.getList() this.getList();
} };
onChange = (current, pageSize) => { onChange = (current, pageSize) => {
console.log(current, pageSize) console.log(current, pageSize);
console.log(this.state.selectedRows) console.log(this.state.selectedRows);
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.page = current searchData.page = current;
searchData.page_size = pageSize searchData.page_size = pageSize;
this.setState({ this.setState({
searchData, searchData,
}) });
this.setState({ this.setState({
selectedRowKeys: [] selectedRowKeys: [],
}) });
this.getList() this.getList();
} };
logSmiles = (e) => { logSmiles = (e) => {
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.ligand_data = e searchData.ligand_data = e;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
getDraw = () => { getDraw = () => {
this.setState(() => ({ draw: !this.state.draw })) this.setState(() => ({ draw: !this.state.draw }));
} };
getAdvancedOption = () => { getAdvancedOption = () => {
this.setState(() => ({ getAdvancedOption: !this.state.getAdvancedOption })) this.setState(() => ({ getAdvancedOption: !this.state.getAdvancedOption }));
} };
handleNumberChange = (e) => { handleNumberChange = (e) => {
const number = parseInt(e.target.value || 0, 10) const number = parseInt(e.target.value || 0, 10);
if (isNaN(number)) { if (isNaN(number)) {
return return;
} }
this.triggerChange({ number }) this.triggerChange({ number });
} };
handleCurrencyChange = (currency) => { handleCurrencyChange = (currency) => {
this.triggerChange({ currency }) this.triggerChange({ currency });
} };
triggerChange = (changedValue) => { triggerChange = (changedValue) => {
const { onChange, value } = this.props const { onChange, value } = this.props;
if (onChange) { if (onChange) {
onChange({ onChange({
...value, ...value,
...changedValue, ...changedValue,
}) });
} }
} };
MethodChange = (e) => { MethodChange = (e) => {
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.method = e searchData.method = e;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
getResolution = (e) => { getResolution = (e) => {
console.log(e) console.log(e);
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.resolution = e searchData.resolution = e;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
get_mol_weight = (e) => { get_mol_weight = (e) => {
console.log(e) console.log(e);
let mol_weight = this.state.mol_weight let mol_weight = this.state.mol_weight;
mol_weight[0] = e mol_weight[0] = e;
this.setState(() => ({ mol_weight: mol_weight })) this.setState(() => ({ mol_weight: mol_weight }));
} };
get_mol_weight2 = (e) => { get_mol_weight2 = (e) => {
console.log(e) console.log(e);
let mol_weight = this.state.mol_weight let mol_weight = this.state.mol_weight;
mol_weight[1] = e mol_weight[1] = e;
this.setState(() => ({ mol_weight: mol_weight })) this.setState(() => ({ mol_weight: mol_weight }));
} };
get_atom_number = (e) => { get_atom_number = (e) => {
console.log(e) console.log(e);
let atom_number = this.state.atom_number let atom_number = this.state.atom_number;
atom_number[0] = e atom_number[0] = e;
this.setState(() => ({ atom_number: atom_number })) this.setState(() => ({ atom_number: atom_number }));
} };
get_atom_number2 = (e) => { get_atom_number2 = (e) => {
console.log(e) console.log(e);
let atom_number = this.state.atom_number let atom_number = this.state.atom_number;
atom_number[1] = e atom_number[1] = e;
this.setState(() => ({ atom_number: atom_number })) this.setState(() => ({ atom_number: atom_number }));
} };
get_rot_bond_number = (e) => { get_rot_bond_number = (e) => {
console.log(e) console.log(e);
let rot_bond_number = this.state.rot_bond_number let rot_bond_number = this.state.rot_bond_number;
rot_bond_number[0] = e rot_bond_number[0] = e;
this.setState(() => ({ rot_bond_number: rot_bond_number })) this.setState(() => ({ rot_bond_number: rot_bond_number }));
} };
get_rot_bond_number2 = (e) => { get_rot_bond_number2 = (e) => {
console.log(e) console.log(e);
let rot_bond_number = this.state.rot_bond_number let rot_bond_number = this.state.rot_bond_number;
rot_bond_number[1] = e rot_bond_number[1] = e;
this.setState(() => ({ rot_bond_number: rot_bond_number })) this.setState(() => ({ rot_bond_number: rot_bond_number }));
} };
onChangeResolution = () => { } onChangeResolution = () => {};
remove = (k) => { remove = (k) => {
const { form } = this.props const { form } = this.props;
// can use data-binding to get // can use data-binding to get
const keys = form.getFieldValue('keys') const keys = form.getFieldValue('keys');
// We need at least one passenger // We need at least one passenger
if (keys.length === 1) { if (keys.length === 1) {
return return;
} }
this.setState({ this.setState({
sum: keys.length - 1, sum: keys.length - 1,
}) });
// can use data-binding to set // can use data-binding to set
form.setFieldsValue({ form.setFieldsValue({
keys: keys.filter((key) => key !== k), keys: keys.filter((key) => key !== k),
}) });
} };
add = () => { add = () => {
const { form } = this.props const { form } = this.props;
// can use data-binding to get // can use data-binding to get
const keys = form.getFieldValue('keys') const keys = form.getFieldValue('keys');
console.log(keys) console.log(keys);
const nextKeys = keys.concat(id++) const nextKeys = keys.concat(id++);
// can use data-binding to set // can use data-binding to set
// important! notify form to detect changes // important! notify form to detect changes
form.setFieldsValue({ form.setFieldsValue({
keys: nextKeys, keys: nextKeys,
}) });
this.setState({ this.setState({
sum: keys.length + 1, sum: keys.length + 1,
}) });
} };
handleSubmit = (e) => { handleSubmit = (e) => {
console.log(e) console.log(e);
e.preventDefault() e.preventDefault();
this.props.form.validateFields((err, values) => { this.props.form.validateFields((err, values) => {
console.log(values) console.log(values);
const { keys, pdbList, chainList, methodList } = const { keys, pdbList, chainList, methodList } = values;
values console.log('Received values of form: ', values);
console.log('Received values of form: ', values)
for (let index = 0; index < pdbList.length; index++) { for (let index = 0; index < pdbList.length; index++) {
var element = pdbList[index] var element = pdbList[index];
if (element == undefined) { if (element == undefined) {
pdbList[index] = '' pdbList[index] = '';
} }
} }
let newArr = pdbList.filter((i) => i && i.trim()) let newArr = pdbList.filter((i) => i && i.trim());
for (let index = 0; index < chainList.length; index++) { for (let index = 0; index < chainList.length; index++) {
var element = chainList[index] var element = chainList[index];
if (element == undefined) { if (element == undefined) {
chainList[index] = '' chainList[index] = '';
} }
} }
let newArr2 = chainList.filter((i) => i && i.trim()) let newArr2 = chainList.filter((i) => i && i.trim());
for (let index = 0; index < methodList.length; index++) { for (let index = 0; index < methodList.length; index++) {
var element = methodList[index] var element = methodList[index];
if (element == undefined) { if (element == undefined) {
methodList[index] = '' methodList[index] = '';
} }
} }
let cutoffList = [] let cutoffList = [];
let cyclesList = [] let cyclesList = [];
let newArr3 = methodList.filter((i) => i && i.trim()) let newArr3 = methodList.filter((i) => i && i.trim());
for (let index = 0; index < cutoffList.length; index++) { for (let index = 0; index < cutoffList.length; index++) {
var element = cutoffList[index] var element = cutoffList[index];
if (element == undefined) { if (element == undefined) {
cutoffList[index] = '' cutoffList[index] = '';
} }
} }
let newArr4 = cutoffList.filter((i) => i && i.trim()) let newArr4 = cutoffList.filter((i) => i && i.trim());
for (let index = 0; index < cyclesList.length; index++) { for (let index = 0; index < cyclesList.length; index++) {
var element = cyclesList[index] var element = cyclesList[index];
if (element == undefined) { if (element == undefined) {
cyclesList[index] = '' cyclesList[index] = '';
} }
} }
let newArr5 = cyclesList.filter((i) => i && i.trim()) let newArr5 = cyclesList.filter((i) => i && i.trim());
console.log(newArr2) console.log(newArr2);
let superpositionData = this.state.superpositionData let superpositionData = this.state.superpositionData;
superpositionData[1].pdbID = newArr[0] === undefined ? '' : newArr[0] superpositionData[1].pdbID = newArr[0] === undefined ? '' : newArr[0];
superpositionData[1].chainID = newArr2[0] === undefined ? '' : newArr2[0] superpositionData[1].chainID = newArr2[0] === undefined ? '' : newArr2[0];
superpositionData[1].method = newArr3[0] === undefined ? '' : newArr3[0] superpositionData[1].method = newArr3[0] === undefined ? '' : newArr3[0];
superpositionData[1].cutoff = superpositionData[1].cutoff = newArr4[0] === undefined ? '' : parseInt(newArr4[0]);
newArr4[0] === undefined ? '' : parseInt(newArr4[0]) superpositionData[1].cycles = newArr5[0] === undefined ? '' : parseInt(newArr5[0]);
superpositionData[1].cycles = superpositionData[2].pdbID = newArr[1] === undefined ? '' : newArr[1];
newArr5[0] === undefined ? '' : parseInt(newArr5[0]) superpositionData[2].chainID = newArr2[1] === undefined ? '' : newArr2[1];
superpositionData[2].pdbID = newArr[1] === undefined ? '' : newArr[1] superpositionData[2].method = newArr3[1] === undefined ? '' : newArr3[1];
superpositionData[2].chainID = newArr2[1] === undefined ? '' : newArr2[1] (superpositionData[2].cutoff = newArr4[1] === undefined ? '' : parseInt(newArr4[1])), (superpositionData[2].cycles = newArr5[1] === undefined ? '' : parseInt(newArr5[1]));
superpositionData[2].method = newArr3[1] === undefined ? '' : newArr3[1] this.setState(() => ({ superpositionData: superpositionData }));
; (superpositionData[2].cutoff = console.log(this.state.superpositionData);
newArr4[1] === undefined ? '' : parseInt(newArr4[1])), let listData = this.state.listData;
(superpositionData[2].cycles = listData.pdbList = this.state.superpositionData;
newArr5[1] === undefined ? '' : parseInt(newArr5[1])) let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
this.setState(() => ({ superpositionData: superpositionData })) this.setState({ listData });
console.log(this.state.superpositionData) this.setState({ pdbLink });
let listData = this.state.listData console.log(this.state.pdbLink);
listData.pdbList = this.state.superpositionData });
let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData) };
this.setState({ listData })
this.setState({ pdbLink })
console.log(this.state.pdbLink)
})
}
remove2 = (e) => { remove2 = (e) => {
console.log(e) console.log(e);
let AlignLigandsList = this.state.AlignLigandsList let AlignLigandsList = this.state.AlignLigandsList;
let ligandListSelect = this.state.ligandListSelect let ligandListSelect = this.state.ligandListSelect;
ligandListSelect.splice(0, 1) ligandListSelect.splice(0, 1);
AlignLigandsList.forEach((element, index) => { AlignLigandsList.forEach((element, index) => {
if (e == index) { if (e == index) {
element.pdb_name = '' element.pdb_name = '';
element.ligand = '' element.ligand = '';
} }
});
}) this.setState({ ligandListSelect });
};
this.setState({ ligandListSelect })
}
add2 = () => { add2 = () => {
let ligandListSelect = this.state.ligandListSelect let ligandListSelect = this.state.ligandListSelect;
ligandListSelect.push({}) ligandListSelect.push({});
this.setState({ ligandListSelect }) this.setState({ ligandListSelect });
console.log(this.state.ligandListSelect) console.log(this.state.ligandListSelect);
};
}
addOne = (e) => { addOne = (e) => {
let selectedRows = this.state.selectedRows let selectedRows = this.state.selectedRows;
if (this.state.selectedRows.length < 4 && this.state.selectedRows.length > 0) { if (this.state.selectedRows.length < 4 && this.state.selectedRows.length > 0) {
for (let index = 0; index < selectedRows.length; index++) { for (let index = 0; index < selectedRows.length; index++) {
const element = selectedRows[index] const element = selectedRows[index];
let value = this.isObjectValueEqual(element, e) let value = this.isObjectValueEqual(element, e);
if (value) { if (value) {
message.warning('不能重复添加！') message.warning('不能重复添加！');
return false return false;
} }
} }
} }
selectedRows.push(e) selectedRows.push(e);
this.setState({ selectedRows }) this.setState({ selectedRows });
if (this.state.selectedRows.length > 3) { if (this.state.selectedRows.length > 3) {
message.warning('只能选择3条数据！') message.warning('只能选择3条数据！');
return return;
} }
console.log(this.state.selectedRows);
let newData = '';
let pdbList = [];
console.log(this.state.selectedRows) let ligandList = [];
let newData = '' let ligandList2 = [];
let pdbList = [] let pdbList2 = this.state.pdbList;
let ligandList = []
let ligandList2 = []
let pdbList2 = this.state.pdbList
selectedRows.forEach((element, index) => { selectedRows.forEach((element, index) => {
newData = newData = newData + ' <' + element.pdb_name + ',' + element.ligand + ' >';
newData + ' <' + element.pdb_name + ',' + element.ligand + ' >' pdbList.push(element.pdb_name);
pdbList.push(element.pdb_name) ligandList.push({ ligand: element.ligand, pdb_name: element.pdb_name });
ligandList.push({ ligand: element.ligand, pdb_name: element.pdb_name }) ligandList2.push(element.ligand);
ligandList2.push(element.ligand) pdbList2[index].pdbID = element.pdb_name;
pdbList2[index].pdbID = element.pdb_name });
}) let pdbLigandList = Array.from(new Set(pdbList));
let pdbLigandList = Array.from(new Set(pdbList))
let ligandListData = Array.from(new Set(ligandList2));
let ligandListData = Array.from(new Set(ligandList2))
// console.log(pdbLigandList) // console.log(pdbLigandList)
// console.log(ligandListData) // console.log(ligandListData)
// console.log(ligandList) // console.log(ligandList)
this.setState({ pdbLigandList }) this.setState({ pdbLigandList });
this.setState({ ligandList }) this.setState({ ligandList });
this.setState({ ligandListData }) this.setState({ ligandListData });
this.setState({ pdbList2: pdbList })
this.setState({ textData: newData })
this.setState({ pdbList2: pdbList });
} this.setState({ textData: newData });
};
preventDefault = (e) => { preventDefault = (e) => {
console.log(e) console.log(e);
// e.preventDefault() // e.preventDefault()
console.log('Clicked! But prevent default.') console.log('Clicked! But prevent default.');
} };
handleClose = removedTag => { handleClose = (removedTag) => {
console.log(removedTag) console.log(removedTag);
const ligandList = this.state.ligandList const ligandList = this.state.ligandList;
ligandList.splice(removedTag, 1) ligandList.splice(removedTag, 1);
console.log(ligandList) console.log(ligandList);
this.setState({ ligandList }) this.setState({ ligandList });
const selectedRows = this.state.selectedRows const selectedRows = this.state.selectedRows;
selectedRows.splice(removedTag, 1) selectedRows.splice(removedTag, 1);
console.log(selectedRows) console.log(selectedRows);
this.setState({ selectedRows }) this.setState({ selectedRows });
};
} render() {
render () {
const columns = [ const columns = [
{ {
title: '', title: '',
dataIndex: '', dataIndex: '',
render: (pdb_name, record) => <div className='span-div' onClick={() => this.addOne(record)}>{<Button type="primary" shape="circle" icon="plus" color="blue"></Button>}</div>, render: (pdb_name, record) => (
<div className='span-div' onClick={() => this.addOne(record)}>
{<Button type='primary' shape='circle' icon='plus' color='blue'></Button>}
</div>
),
}, },
{ {
title: 'PDBID', title: 'PDBID',
dataIndex: 'pdb_name', dataIndex: 'pdb_name',
render: (pdb_name) => <span>{<Tag color="blue">{pdb_name}</Tag>}</span>, render: (pdb_name) => <span>{<Tag color='blue'>{pdb_name}</Tag>}</span>,
}, },
{ {
title: 'Protein', title: 'Protein',
...@@ -806,16 +761,13 @@ export default class padSmallSearch extends Component { ...@@ -806,16 +761,13 @@ export default class padSmallSearch extends Component {
<div> <div>
<div> <div>
{' '} {' '}
<span style={{ fontWeight: 800 }}>Protein name:</span>{' '} <span style={{ fontWeight: 800 }}>Protein name:</span> {record.protein_name}
{record.protein_name}
</div> </div>
<div> <div>
<span style={{ fontWeight: 800 }}>Uniport id:</span>{' '} <span style={{ fontWeight: 800 }}>Uniport id:</span> {record.uniport_id}
{record.uniport_id}
</div> </div>
<div> <div>
<span style={{ fontWeight: 800 }}>Uniport name:</span>{' '} <span style={{ fontWeight: 800 }}>Uniport name:</span> {record.uniport_name}
{record.uniport_name}
</div> </div>
</div> </div>
), ),
...@@ -827,18 +779,11 @@ export default class padSmallSearch extends Component { ...@@ -827,18 +779,11 @@ export default class padSmallSearch extends Component {
render: (ligand, record) => ( render: (ligand, record) => (
<span> <span>
{ {
<Tag color="blue" onClick={() => this.popupWindow(record)}> <Tag color='blue' onClick={() => this.popupWindow(record)}>
{ligand} {ligand}
</Tag> </Tag>
} }
{ {<Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={record.smile} />}
<Jsme
height="100px"
width="100px"
options="depict,useopenchemlib"
smiles={record.smile}
/>
}
</span> </span>
), ),
}, },
...@@ -850,44 +795,42 @@ export default class padSmallSearch extends Component { ...@@ -850,44 +795,42 @@ export default class padSmallSearch extends Component {
<div> <div>
<div className={record.bdb_kd == null ? 'isShowDiv' : ''}> <div className={record.bdb_kd == null ? 'isShowDiv' : ''}>
{' '} {' '}
<span style={{ fontWeight: 800 }}>Kd:</span>{' '} <span style={{ fontWeight: 800 }}>Kd:</span> {record.bdb_kd}
{record.bdb_kd}
</div> </div>
<div className={record.bdb_ki == null ? 'isShowDiv' : ''}> <div className={record.bdb_ki == null ? 'isShowDiv' : ''}>
<span style={{ fontWeight: 800 }}>Ki:</span>{' '} <span style={{ fontWeight: 800 }}>Ki:</span> {record.bdb_ki}
{record.bdb_ki}
</div> </div>
<div className={record.bdb_es == null ? 'isShowDiv' : ''}> <div className={record.bdb_es == null ? 'isShowDiv' : ''}>
<span style={{ fontWeight: 800 }}>EC50:</span>{' '} <span style={{ fontWeight: 800 }}>EC50:</span> {record.bdb_es}
{record.bdb_es}
</div> </div>
<div className={record.bdb_ic == null ? 'isShowDiv' : ''}> <div className={record.bdb_ic == null ? 'isShowDiv' : ''}>
<span style={{ fontWeight: 800 }}>IC50:</span>{' '} <span style={{ fontWeight: 800 }}>IC50:</span> {record.bdb_ic}
{record.bdb_ic}
</div> </div>
<div className={record.bdb_kon == null ? 'isShowDiv' : ''}> <div className={record.bdb_kon == null ? 'isShowDiv' : ''}>
<span style={{ fontWeight: 800 }}>Kon:</span>{' '} <span style={{ fontWeight: 800 }}>Kon:</span> {record.bdb_kon}
{record.bdb_kon}
</div> </div>
<div className={record.bdb_koff == null ? 'isShowDiv' : ''}> <div className={record.bdb_koff == null ? 'isShowDiv' : ''}>
<span style={{ fontWeight: 800 }}>Koff:</span>{' '} <span style={{ fontWeight: 800 }}>Koff:</span> {record.bdb_koff}
{record.bdb_koff}
</div> </div>
</div> </div>
), ),
}, },
] ];
const columns2 = [ const columns2 = [
{ {
title: '', title: '',
dataIndex: '', dataIndex: '',
render: (pdb_name, record) => <div className='span-div' onClick={() => this.addOne(record)}>{<Button type="primary" shape="circle" icon="plus" color="blue"></Button>}</div>, render: (pdb_name, record) => (
<div className='span-div' onClick={() => this.addOne(record)}>
{<Button type='primary' shape='circle' icon='plus' color='blue'></Button>}
</div>
),
}, },
{ {
title: 'PDBID', title: 'PDBID',
dataIndex: 'pdb_name', dataIndex: 'pdb_name',
width: 100, width: 100,
render: (pdb_name) => <span>{<Tag color="blue">{pdb_name}</Tag>}</span>, render: (pdb_name) => <span>{<Tag color='blue'>{pdb_name}</Tag>}</span>,
}, },
{ {
title: 'Protein', title: 'Protein',
...@@ -897,16 +840,13 @@ export default class padSmallSearch extends Component { ...@@ -897,16 +840,13 @@ export default class padSmallSearch extends Component {
<div> <div>
<div> <div>
{' '} {' '}
<span style={{ fontWeight: 800 }}>Protein name:</span>{' '} <span style={{ fontWeight: 800 }}>Protein name:</span> {record.protein_name}
{record.protein_name}
</div> </div>
<div> <div>
<span style={{ fontWeight: 800 }}>Uniport id:</span>{' '} <span style={{ fontWeight: 800 }}>Uniport id:</span> {record.uniport_id}
{record.uniport_id}
</div> </div>
<div> <div>
<span style={{ fontWeight: 800 }}>Uniport name:</span>{' '} <span style={{ fontWeight: 800 }}>Uniport name:</span> {record.uniport_name}
{record.uniport_name}
</div> </div>
</div> </div>
), ),
...@@ -926,7 +866,10 @@ export default class padSmallSearch extends Component { ...@@ -926,7 +866,10 @@ export default class padSmallSearch extends Component {
</div> </div>
<div> <div>
aligned_pattern: aligned_pattern:
<div className='Card-title'> <pre>{record.aligned_pattern}</pre></div> <div className='Card-title'>
{' '}
<pre>{record.aligned_pattern}</pre>
</div>
</div> </div>
</div> </div>
), ),
...@@ -938,18 +881,11 @@ export default class padSmallSearch extends Component { ...@@ -938,18 +881,11 @@ export default class padSmallSearch extends Component {
render: (ligand, record) => ( render: (ligand, record) => (
<span> <span>
{ {
<Tag color="blue" onClick={() => this.popupWindow(record)}> <Tag color='blue' onClick={() => this.popupWindow(record)}>
{ligand} {ligand}
</Tag> </Tag>
} }
{ {<Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={record.smile} />}
<Jsme
height="100px"
width="100px"
options="depict,useopenchemlib"
smiles={record.smile}
/>
}
</span> </span>
), ),
}, },
...@@ -961,39 +897,33 @@ export default class padSmallSearch extends Component { ...@@ -961,39 +897,33 @@ export default class padSmallSearch extends Component {
<div> <div>
<div className={record.bdb_kd == null ? 'isShowDiv' : ''}> <div className={record.bdb_kd == null ? 'isShowDiv' : ''}>
{' '} {' '}
<span style={{ fontWeight: 800 }}>Kd:</span>{' '} <span style={{ fontWeight: 800 }}>Kd:</span> {record.bdb_kd}
{record.bdb_kd}
</div> </div>
<div className={record.bdb_ki == null ? 'isShowDiv' : ''}> <div className={record.bdb_ki == null ? 'isShowDiv' : ''}>
<span style={{ fontWeight: 800 }}>Ki:</span>{' '} <span style={{ fontWeight: 800 }}>Ki:</span> {record.bdb_ki}
{record.bdb_ki}
</div> </div>
<div className={record.bdb_es == null ? 'isShowDiv' : ''}> <div className={record.bdb_es == null ? 'isShowDiv' : ''}>
<span style={{ fontWeight: 800 }}>EC50:</span>{' '} <span style={{ fontWeight: 800 }}>EC50:</span> {record.bdb_es}
{record.bdb_es}
</div> </div>
<div className={record.bdb_ic == null ? 'isShowDiv' : ''}> <div className={record.bdb_ic == null ? 'isShowDiv' : ''}>
<span style={{ fontWeight: 800 }}>IC50:</span>{' '} <span style={{ fontWeight: 800 }}>IC50:</span> {record.bdb_ic}
{record.bdb_ic}
</div> </div>
<div className={record.bdb_kon == null ? 'isShowDiv' : ''}> <div className={record.bdb_kon == null ? 'isShowDiv' : ''}>
<span style={{ fontWeight: 800 }}>Kon:</span>{' '} <span style={{ fontWeight: 800 }}>Kon:</span> {record.bdb_kon}
{record.bdb_kon}
</div> </div>
<div className={record.bdb_koff == null ? 'isShowDiv' : ''}> <div className={record.bdb_koff == null ? 'isShowDiv' : ''}>
<span style={{ fontWeight: 800 }}>Koff:</span>{' '} <span style={{ fontWeight: 800 }}>Koff:</span> {record.bdb_koff}
{record.bdb_koff}
</div> </div>
</div> </div>
), ),
}, },
] ];
const { selectedRowKeys } = this.state const { selectedRowKeys } = this.state;
const rowSelection = { const rowSelection = {
selectedRowKeys, selectedRowKeys,
onChange: this.onSelectChange, onChange: this.onSelectChange,
hideDefaultSelections: false, hideDefaultSelections: false,
} };
const { const {
total_num, total_num,
pdbLink, pdbLink,
...@@ -1014,42 +944,42 @@ export default class padSmallSearch extends Component { ...@@ -1014,42 +944,42 @@ export default class padSmallSearch extends Component {
SelectligandLink, SelectligandLink,
getAdvancedOption, getAdvancedOption,
ligandList, ligandList,
selectedRows selectedRows,
} = this.state } = this.state;
const plainOptions = [ const plainOptions = [
{ label: 'X-Ray', value: 'X-RAY DIFFRACTION' }, { label: 'X-Ray', value: 'X-RAY DIFFRACTION' },
{ label: 'EM', value: 'ELECTRON MICROSCOPY' }, { label: 'EM', value: 'ELECTRON MICROSCOPY' },
{ label: 'Solution NMR', value: 'SOLUTION NMR' }, { label: 'Solution NMR', value: 'SOLUTION NMR' },
] ];
const formItemLayout = { const formItemLayout = {
labelCol: { span: 6 }, labelCol: { span: 6 },
wrapperCol: { span: 12 }, wrapperCol: { span: 12 },
} };
const formItemLayout2 = { const formItemLayout2 = {
labelCol: { span: 6 }, labelCol: { span: 6 },
} };
const formItemLayout3 = { const formItemLayout3 = {
labelCol: { span: 7 }, labelCol: { span: 7 },
wrapperCol: { span: 11 }, wrapperCol: { span: 11 },
} };
const buttonItemLayout = { const buttonItemLayout = {
wrapperCol: { span: 12, offset: 6 }, wrapperCol: { span: 12, offset: 6 },
} };
const { getFieldDecorator, getFieldValue } = this.props.form const { getFieldDecorator, getFieldValue } = this.props.form;
const formItemLayoutWithOutLabel = { const formItemLayoutWithOutLabel = {
wrapperCol: { wrapperCol: {
xs: { span: 24, offset: 0 }, xs: { span: 24, offset: 0 },
sm: { span: 20, offset: 4 }, sm: { span: 20, offset: 4 },
}, },
} };
const formItemLayoutWithOutLabel2 = { const formItemLayoutWithOutLabel2 = {
wrapperCol: { wrapperCol: {
xs: { span: 24, offset: 0 }, xs: { span: 24, offset: 0 },
sm: { span: 20, offset: 4 }, sm: { span: 20, offset: 4 },
}, },
} };
const formItemLayout4 = { const formItemLayout4 = {
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
...@@ -1059,17 +989,13 @@ export default class padSmallSearch extends Component { ...@@ -1059,17 +989,13 @@ export default class padSmallSearch extends Component {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 20 }, sm: { span: 20 },
}, },
} };
const { size, value } = this.props const { size, value } = this.props;
getFieldDecorator('keys', { initialValue: [] }) getFieldDecorator('keys', { initialValue: [] });
const keys = getFieldValue('keys') const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => ( const formItems = keys.map((k, index) => (
<Form.Item <Form.Item {...(index === 0 ? formItemLayout4 : formItemLayoutWithOutLabel2)} label={index === 0 ? 'SelectPDB: ' : ''} required={false} key={k}>
{...(index === 0 ? formItemLayout4 : formItemLayoutWithOutLabel2)}
label={index === 0 ? 'SelectPDB: ' : ''}
required={false}
key={k}>
<div style={{ display: 'flex ', alignItems: 'center ' }}> <div style={{ display: 'flex ', alignItems: 'center ' }}>
{getFieldDecorator(`pdbList[${k}]`)( {getFieldDecorator(`pdbList[${k}]`)(
<Select style={{ width: '100px' }}> <Select style={{ width: '100px' }}>
...@@ -1078,19 +1004,12 @@ export default class padSmallSearch extends Component { ...@@ -1078,19 +1004,12 @@ export default class padSmallSearch extends Component {
<Option key={index} value={item.toLowerCase()}> <Option key={index} value={item.toLowerCase()}>
{item.toLowerCase()} {item.toLowerCase()}
</Option> </Option>
) );
})} })}
</Select> </Select>
)} )}
<div> <div>
<Form.Item style={{ margin: '0px' }}> <Form.Item style={{ margin: '0px' }}>{getFieldDecorator(`chainList[${k}]`)(<Input placeholder='请输入Chain' style={{ width: '100px', marginRight: 8 }} />)}</Form.Item>
{getFieldDecorator(`chainList[${k}]`)(
<Input
placeholder="请输入Chain"
style={{ width: '100px', marginRight: 8 }}
/>
)}
</Form.Item>
</div> </div>
<div> <div>
<Form.Item style={{ margin: '0px' }}> <Form.Item style={{ margin: '0px' }}>
...@@ -1101,282 +1020,168 @@ export default class padSmallSearch extends Component { ...@@ -1101,282 +1020,168 @@ export default class padSmallSearch extends Component {
<Option key={index} value={item}> <Option key={index} value={item}>
{item} {item}
</Option> </Option>
) );
})} })}
</Select> </Select>
)} )}
<Tooltip <Tooltip placement='topLeft' title='Align是基于氨基酸序列的对齐；Super是基于蛋白结构的对齐' arrowPointAtCenter>
placement="topLeft" <Icon className='dynamic-delete-button' type='info-circle' style={{ marginLeft: '1px' }} />
title="Align是基于氨基酸序列的对齐；Super是基于蛋白结构的对齐"
arrowPointAtCenter>
<Icon
className="dynamic-delete-button"
type="info-circle"
style={{ marginLeft: '1px' }}
/>
</Tooltip> </Tooltip>
</Form.Item> </Form.Item>
</div> </div>
<div></div> <div></div>
<div> <div>
<Form.Item style={{ margin: '0px' }}> <Form.Item style={{ margin: '0px' }}>
{keys.length > 1 ? ( {keys.length > 1 ? <Icon className='dynamic-delete-button' type='minus-circle-o' onClick={() => this.remove(k)} style={{ marginLeft: '10px' }} /> : null}
<Icon
className="dynamic-delete-button"
type="minus-circle-o"
onClick={() => this.remove(k)}
style={{ marginLeft: '10px' }}
/>
) : null}
</Form.Item> </Form.Item>
</div> </div>
</div> </div>
</Form.Item> </Form.Item>
)) ));
return ( return (
<div className="padSmallSearch-div"> <div className='padSmallSearch-div'>
<Modal <Modal footer={null} closable={false} width={550} visible={visible} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible: false })}>
footer={null} <div className='Molstar-div'>
closable={false} <iframe src={pdbLinkWindow} height={'600px'} width={'100%'} name='iframe-video' />
width={550}
visible={visible}
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({ visible: false })}>
<div className="Molstar-div">
<iframe
src={pdbLinkWindow}
height={'600px'}
width={'100%'}
name="iframe-video"
/>
</div> </div>
</Modal> </Modal>
<LogoTitlte></LogoTitlte> <LogoTitlte></LogoTitlte>
<div className="top-div"> <div className='top-div'>
<div className="title-top">Protein-Ligand Data Mining</div> <div className='title-top'>Protein-Ligand Data Mining</div>
<div className="tips-div"> <div className='tips-div'>
Protein-Ligand Data Mining (PLDM) is a platform for mining all the Protein-Ligand Data Mining (PLDM) is a platform for mining all the proteins-ligand complexes structures. In this platform, you can search using either small molecule sub/structure or
proteins-ligand complexes structures. In this platform, you can protein information such as name and uniport ID to exploit detailed protein-ligand interaction quickly for any crystal structures you are interested in. The easy access to the bioactive
search using either small molecule sub/structure or protein conformations of the small molecules will greatly facilitate scaffold hopping activities.
information such as name and uniport ID to exploit detailed
protein-ligand interaction quickly for any crystal structures you
are interested in. The easy access to the bioactive conformations of
the small molecules will greatly facilitate scaffold hopping
activities.
<br></br> <br></br>
<br></br> <br></br>
Tips: After one or more target PDBs are selected, you can click "Add Tips: After one or more target PDBs are selected, you can click "Add selection" button to put the structures into the PDB presentation window for viewing and aligning. The "Align by
selection" button to put the structures into the PDB presentation structure" button allows you to align the PDBs in the window with the entire structures. And the other button, "Align by ligand", allows you to align the PDBs with only the ligands you
window for viewing and aligning. The "Align by structure" button choose. After the alignment, you can download the pdb files for local working as well.
allows you to align the PDBs in the window with the entire
structures. And the other button, "Align by ligand", allows you to
align the PDBs with only the ligands you choose. After the
alignment, you can download the pdb files for local working as well.
</div> </div>
</div> </div>
<Spin tip="Loading..." size="large" spinning={this.state.loading}> <Spin tip='Loading...' size='large' spinning={this.state.loading}>
<div className="form-div"> <div className='form-div'>
<div className="form-div2"> <div className='form-div2'>
<Form layout="horizontal"> <Form layout='horizontal'>
<Form.Item label="PDBID" {...formItemLayout}> <Form.Item label='PDBID' {...formItemLayout}>
<Input <Input placeholder='' onChange={this.getValue} value={this.state.searchData.pdb_id} />
placeholder=""
onChange={this.getValue}
value={this.state.searchData.pdb_id}
/>
</Form.Item> </Form.Item>
<Form.Item label="Protein" {...formItemLayout}> <Form.Item label='Protein' {...formItemLayout}>
<Input <Input placeholder='' onChange={this.getProtein} value={this.state.searchData.protein_data} />
placeholder=""
onChange={this.getProtein}
value={this.state.searchData.protein_data}
/>
</Form.Item> </Form.Item>
<Form.Item label="Sequence" {...formItemLayout}> <Form.Item label='Sequence' {...formItemLayout}>
<Input <Input type='text' size={size} onChange={this.getsequence} value={this.state.searchData.sequence} style={{ width: '65%', marginRight: '3%' }} />
type="text" <Select size={size} style={{ width: '32%' }} value={this.state.searchData.percent} onChange={this.getpercent}>
size={size} <Option value='90%'>90%</Option>
onChange={this.getsequence} <Option value='80%'>80%</Option>
value={this.state.searchData.sequence} <Option value='70%'>70%</Option>
style={{ width: '65%', marginRight: '3%' }} <Option value='60%'>60%</Option>
/> <Option value='50%'>50%</Option>
<Select
size={size}
style={{ width: '32%' }}
value={this.state.searchData.percent}
onChange={this.getpercent}>
<Option value="90%">90%</Option>
<Option value="80%">80%</Option>
<Option value="70%">70%</Option>
<Option value="60%">60%</Option>
<Option value="50%">50%</Option>
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="Ligand" {...formItemLayout}> <Form.Item label='Ligand' {...formItemLayout}>
<Input <Input placeholder='' onChange={this.getLigand} value={this.state.searchData.ligand_data} />
placeholder=""
onChange={this.getLigand}
value={this.state.searchData.ligand_data}
/>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Button <Button
type="primary" type='primary'
style={{ style={{
marginRight: '10px', marginRight: '10px',
color: '#1890ff', color: '#1890ff',
background: '#e6f7ff', background: '#e6f7ff',
borderColor: '#91d5ff', borderColor: '#91d5ff',
}} }}
onClick={this.getDraw}> onClick={this.getDraw}
>
画结构 画结构
</Button> </Button>
<Button <Button type='link' onClick={this.getAdvancedOption}>
type="link"
onClick={this.getAdvancedOption}>
Advanced Option Advanced Option
</Button> </Button>
</div> </div>
<div <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}>
className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} <Radio.Group onChange={this.onChangeRadio3} value={this.state.searchData.finger}>
>
<Radio.Group
onChange={this.onChangeRadio3}
value={this.state.searchData.finger}>
<Radio value={0}>Substructure</Radio> <Radio value={0}>Substructure</Radio>
<Radio value={1}>Similar Structure</Radio> <Radio value={1}>Similar Structure</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
<div <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} onClick={this.getJsme}>
className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} <Jsme height='300px' width='500px' options='oldlook,star' onChange={this.logSmiles} />
onClick={this.getJsme}>
<Jsme
height="300px"
width="500px"
options="oldlook,star"
onChange={this.logSmiles}
/>
</div> </div>
</Form.Item> </Form.Item>
<Divider className={getAdvancedOption ? '' : 'isShowDiv'} /> <Divider className={getAdvancedOption ? '' : 'isShowDiv'} />
<Form.Item className={getAdvancedOption ? '' : 'isShowDiv'} label="PDB option" {...formItemLayout2}> <Form.Item className={getAdvancedOption ? '' : 'isShowDiv'} label='PDB option' {...formItemLayout2}>
<div className="Ligand-option" style={{ width: '800px' }}> <div className='Ligand-option' style={{ width: '800px' }}>
<div className="Method-div"> <div className='Method-div'>
<span className="teshu-title">Method：</span>{' '} <span className='teshu-title'>Method：</span> <Checkbox.Group options={plainOptions} defaultValue={this.state.searchData.method} onChange={this.MethodChange} />
<Checkbox.Group
options={plainOptions}
defaultValue={this.state.searchData.method}
onChange={this.MethodChange}
/>
</div> </div>
<div className="Resolution-div"> <div className='Resolution-div'>
<div style={{ width: '30%' }}> <div style={{ width: '30%' }}>
<span className="teshu-title"> <span className='teshu-title'>Resolution no more than：</span>{' '}
Resolution no more than：
</span>{' '}
</div> </div>
<div style={{ width: '50%' }}> <div style={{ width: '50%' }}>
<InputNumber <InputNumber min={0} max={10} step={0.5} onChange={this.getResolution} />
min={0}
max={10}
step={0.5}
onChange={this.getResolution}
/>
</div> </div>
</div> </div>
</div> </div>
</Form.Item> </Form.Item>
<Form.Item <Form.Item className={getAdvancedOption ? '' : 'isShowDiv'} label='Ligand option' style={{ marginBottom: '0px' }} {...formItemLayout3}>
className={getAdvancedOption ? '' : 'isShowDiv'} <div className='Ligand-option' style={{ width: '800px' }}>
label="Ligand option" <div className='Resolution-div'>
style={{ marginBottom: '0px' }}
{...formItemLayout3}>
<div className="Ligand-option" style={{ width: '800px' }}>
<div className="Resolution-div">
<div> <div>
<span className="teshu-title">Molecule Weight：</span>{' '} <span className='teshu-title'>Molecule Weight：</span>{' '}
</div> </div>
<div> <div>
<InputNumber <InputNumber min={0} max={10000} step={0.5} onChange={this.get_mol_weight} />{' '}
min={0}
max={10000}
step={0.5}
onChange={this.get_mol_weight}
/>{' '}
<span <span
style={{ style={{
display: 'inline-block', display: 'inline-block',
width: '10px', width: '10px',
textAlign: 'center', textAlign: 'center',
}}> }}
>
- -
</span> </span>
<InputNumber <InputNumber min={0} max={10000} step={0.5} onChange={this.get_mol_weight2} />
min={0}
max={10000}
step={0.5}
onChange={this.get_mol_weight2}
/>
</div> </div>
</div> </div>
<div className="Resolution-div"> <div className='Resolution-div'>
<div> <div>
<span className="teshu-title">Heavy Atom Number：</span>{' '} <span className='teshu-title'>Heavy Atom Number：</span>{' '}
</div> </div>
<div> <div>
<InputNumber <InputNumber min={0} max={100} step={0.5} onChange={this.get_atom_number} />{' '}
min={0}
max={100}
step={0.5}
onChange={this.get_atom_number}
/>{' '}
<span <span
style={{ style={{
display: 'inline-block', display: 'inline-block',
width: '10px', width: '10px',
textAlign: 'center', textAlign: 'center',
}}> }}
>
- -
</span> </span>
<InputNumber <InputNumber min={0} max={100} step={0.5} onChange={this.get_atom_number2} />
min={0}
max={100}
step={0.5}
onChange={this.get_atom_number2}
/>
</div> </div>
</div> </div>
<div className="Resolution-div"> <div className='Resolution-div'>
<div> <div>
<span className="teshu-title"> <span className='teshu-title'>Rotatable Bond Number：</span>{' '}
Rotatable Bond Number：
</span>{' '}
</div> </div>
<div> <div>
<InputNumber <InputNumber min={0} max={100} step={0.5} onChange={this.get_rot_bond_number} />{' '}
min={0}
max={100}
step={0.5}
onChange={this.get_rot_bond_number}
/>{' '}
<span <span
style={{ style={{
display: 'inline-block', display: 'inline-block',
width: '10px', width: '10px',
textAlign: 'center', textAlign: 'center',
}}> }}
>
- -
</span> </span>
<InputNumber <InputNumber min={0} max={100} step={0.5} onChange={this.get_rot_bond_number2} />
min={0}
max={100}
step={0.5}
onChange={this.get_rot_bond_number2}
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -1386,58 +1191,40 @@ export default class padSmallSearch extends Component { ...@@ -1386,58 +1191,40 @@ export default class padSmallSearch extends Component {
{/* <Button type="primary" onClick={this.getList} className={draw ? '' : ' isShowDiv'}> {/* <Button type="primary" onClick={this.getList} className={draw ? '' : ' isShowDiv'}>
Search Search
</Button> */} </Button> */}
<Button type="primary" onClick={this.getList}> <Button type='primary' onClick={this.getList}>
Search Search
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
</div> </div>
{this.state.ListState && ( {this.state.ListState && (
<div className="List-center-div"> <div className='List-center-div'>
<div className="list-div"> <div className='list-div'>
<Table <Table pagination={false} bordered rowKey='item' columns={this.state.sequenceStste ? columns2 : columns} dataSource={dataList} />
<div className='PaginationListDiv'>
pagination={false} <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num} />
bordered
rowKey="item"
columns={this.state.sequenceStste ? columns2 : columns}
dataSource={dataList}
/>
<div className="PaginationListDiv">
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
onChange={this.onChange}
total={total_num}
/>
</div> </div>
</div> </div>
<div className="add-div"> <div className='add-div'>
<div className="text-div"> <div className='text-div'>
{ligandList.map((item, index) => { {ligandList.map((item, index) => {
return ( return (
<Tag <Tag
key={index} key={index}
closable onClose={e => { closable
e.preventDefault() onClose={(e) => {
this.handleClose(index) e.preventDefault();
this.handleClose(index);
}} }}
> >
{item.pdb_name} {item.pdb_name}｜{item.ligand}
｜
{item.ligand}
</Tag> </Tag>
) );
})} })}
</div> </div>
<Button <Button type='primary' style={{ marginLeft: '10px' }} onClick={this.addSlection} disabled={!selectedRows.length > 0}>
type="primary"
style={{ marginLeft: '10px' }}
onClick={this.addSlection}
disabled={!selectedRows.length > 0}>
Add selection{' '} Add selection{' '}
</Button> </Button>
</div> </div>
...@@ -1445,62 +1232,52 @@ export default class padSmallSearch extends Component { ...@@ -1445,62 +1232,52 @@ export default class padSmallSearch extends Component {
)} )}
</Spin> </Spin>
{this.state.pdbdivState && (<div className="pdb-div"> {this.state.pdbdivState && (
<div className="left-pdb-div"> <div className='pdb-div'>
<iframe <div className='left-pdb-div'>
src={pdbLink} <iframe src={pdbLink} height={'600px'} width={'100%'} name='iframe-video' />
height={'600px'} <div className='add-form'>
width={'100%'} <div className='form-div2'>
name="iframe-video" <Form onSubmit={this.handleSubmit} className='login-form'>
/> <Form.Item label='Ref.PDB' {...formItemLayout4}>
<div className="add-form"> <div>
<div className="form-div2"> <Select style={{ width: '100px' }} value={this.state.superpositionData[0].pdbID} onChange={this.SelectValue}>
<Form onSubmit={this.handleSubmit} className="login-form"> {pdbLigandList.map((item, index) => {
<Form.Item label="Ref.PDB" {...formItemLayout4}> return (
<div> <Option key={item} value={item.toLowerCase()}>
<Select {item.toLowerCase()}
style={{ width: '100px' }} </Option>
value={this.state.superpositionData[0].pdbID} );
onChange={this.SelectValue}> })}
{pdbLigandList.map((item, index) => { </Select>
return ( <Input
<Option key={item} value={item.toLowerCase()}> placeholder='请输入Chain'
{item.toLowerCase()} onChange={this.getValueChain}
</Option> value={this.state.superpositionData[0].chainID}
) style={{
})} width: '100px',
</Select> }}
<Input />
placeholder="请输入Chain" </div>
onChange={this.getValueChain} </Form.Item>
value={this.state.superpositionData[0].chainID} {formItems}
style={{ <Form.Item {...formItemLayoutWithOutLabel}>
width: '100px', {sum < 2 && (
}} <Button type='dashed' onClick={this.add} style={{ width: '60%' }}>
/> <Icon type='plus' /> Add field
</div> </Button>
</Form.Item> )}
{formItems} </Form.Item>
<Form.Item {...formItemLayoutWithOutLabel}> <Form.Item {...formItemLayoutWithOutLabel}>
{sum < 2 && ( <Button type='primary' htmlType='submit'>
<Button Align Structures
type="dashed"
onClick={this.add}
style={{ width: '60%' }}>
<Icon type="plus" /> Add field
</Button> </Button>
)} </Form.Item>
</Form.Item> </Form>
<Form.Item {...formItemLayoutWithOutLabel}> </div>
<Button type="primary" htmlType="submit">
Align Structures
</Button>
</Form.Item>
</Form>
</div> </div>
</div> </div>
</div> {/* <div className="center-pdb-div">
{/* <div className="center-pdb-div">
<Button <Button
type="primary" type="primary"
style={{ marginBottom: '10px' }} style={{ marginBottom: '10px' }}
...@@ -1511,17 +1288,12 @@ export default class padSmallSearch extends Component { ...@@ -1511,17 +1288,12 @@ export default class padSmallSearch extends Component {
Align by ligand{' '} Align by ligand{' '}
</Button> </Button>
</div> */} </div> */}
<div className="right-pdb-div"> <div className='right-pdb-div'>
<iframe <iframe src={SelectligandLink} height={'600px'} width={'100%'} name='iframe-video' />
src={SelectligandLink} <div className='add-form'>
height={'600px'} <div className='form-div2'>
width={'100%'} <Form onSubmit={this.handleSubmit2} className='login-form'>
name="iframe-video" {/* <Form.Item label="Select ligand" {...formItemLayout4}>
/>
<div className="add-form">
<div className="form-div2">
<Form onSubmit={this.handleSubmit2} className="login-form">
{/* <Form.Item label="Select ligand" {...formItemLayout4}>
<div> <div>
<Select <Select
style={{ width: '100px' }} style={{ width: '100px' }}
...@@ -1555,7 +1327,7 @@ export default class padSmallSearch extends Component { ...@@ -1555,7 +1327,7 @@ export default class padSmallSearch extends Component {
</Select> </Select>
</div> </div>
</Form.Item> */} </Form.Item> */}
{/* { {/* {
AlignLigandsList.map((item, index) => { AlignLigandsList.map((item, index) => {
return ( return (
<Form.Item label="Select ligand" {...formItemLayout4}> <Form.Item label="Select ligand" {...formItemLayout4}>
...@@ -1606,170 +1378,111 @@ export default class padSmallSearch extends Component { ...@@ -1606,170 +1378,111 @@ export default class padSmallSearch extends Component {
}) })
} */} } */}
<Form.Item label="Select ligand" {...formItemLayout4}> <Form.Item label='Select ligand' {...formItemLayout4}>
<div>
<Select
style={{ width: '100px' }}
placeholder="Source"
value={this.state.AlignLigandsList[0].pdb_name}
onChange={(e) => this.SelectValueSource(e)}
>
{SourceList.map((item, index) => {
return (
<Option
key={index.pdb}
value={item}>
{item}
</Option>
)
})}
</Select>
<Select
placeholder="Compound ID"
style={{ width: '100px' }}
value={this.state.AlignLigandsList[0].ligand}
onChange={(e) => this.SelectValueCompound(e)}
>
{ligandListData.map((item, index) => {
return (
<Option
key={index.pdb}
value={item}>
{item}
</Option>
)
})}
</Select>
{/* {
index != 0 && (<Icon
className="dynamic-delete-button"
type="minus-circle-o"
onClick={() => this.remove2(index)}
/>)
} */}
</div>
</Form.Item>
{ligandListSelect.length > 1 && (<Form.Item label="Select ligand" {...formItemLayout4}>
<div>
<Select
style={{ width: '100px' }}
placeholder="Source"
value={this.state.AlignLigandsList[1].pdb_name}
onChange={(e) => this.SelectValueSource2(e)}
>
{SourceList.map((item, index) => {
return (
<Option
key={index.pdb}
value={item}>
{item}
</Option>
)
})}
</Select>
<Select
placeholder="Compound ID"
style={{ width: '100px' }}
value={this.state.AlignLigandsList[1].ligand}
onChange={(e) => this.SelectValueCompound2(e)}
>
{ligandListData.map((item, index) => {
return (
<Option
key={index.pdb}
value={item}>
{item}
</Option>
)
})}
</Select>
<Icon
className="dynamic-delete-button"
type="minus-circle-o"
onClick={() => this.remove2(1)}
/>
</div>
</Form.Item>)}
{ligandListSelect.length > 2 && (
<Form.Item label="Select ligand" {...formItemLayout4}>
<div> <div>
<Select <Select style={{ width: '100px' }} placeholder='Source' value={this.state.AlignLigandsList[0].pdb_name} onChange={(e) => this.SelectValueSource(e)}>
style={{ width: '100px' }}
placeholder="Source"
value={this.state.AlignLigandsList[2].pdb_name}
onChange={(e) => this.SelectValueSource3(e)}
>
{SourceList.map((item, index) => { {SourceList.map((item, index) => {
return ( return (
<Option <Option key={index.pdb} value={item}>
key={index.pdb}
value={item}>
{item} {item}
</Option> </Option>
) );
})} })}
</Select> </Select>
<Select <Select placeholder='Compound ID' style={{ width: '100px' }} value={this.state.AlignLigandsList[0].ligand} onChange={(e) => this.SelectValueCompound(e)}>
placeholder="Compound ID"
style={{ width: '100px' }}
value={this.state.AlignLigandsList[2].ligand}
onChange={(e) => this.SelectValueCompound3(e)}
>
{ligandListData.map((item, index) => { {ligandListData.map((item, index) => {
return ( return (
<Option <Option key={index.pdb} value={item}>
key={index.pdb}
value={item}>
{item} {item}
</Option> </Option>
) );
})} })}
</Select> </Select>
{/* {
<Icon index != 0 && (<Icon
className="dynamic-delete-button" className="dynamic-delete-button"
type="minus-circle-o" type="minus-circle-o"
onClick={() => this.remove2(2)} onClick={() => this.remove2(index)}
/> />)
} */}
</div> </div>
</Form.Item> </Form.Item>
)} {ligandListSelect.length > 1 && (
<Form.Item label='Select ligand' {...formItemLayout4}>
<div>
<Select style={{ width: '100px' }} placeholder='Source' value={this.state.AlignLigandsList[1].pdb_name} onChange={(e) => this.SelectValueSource2(e)}>
{SourceList.map((item, index) => {
return (
<Option key={index.pdb} value={item}>
{item}
</Option>
);
})}
</Select>
<Select placeholder='Compound ID' style={{ width: '100px' }} value={this.state.AlignLigandsList[1].ligand} onChange={(e) => this.SelectValueCompound2(e)}>
{ligandListData.map((item, index) => {
return (
<Option key={index.pdb} value={item}>
{item}
</Option>
);
})}
</Select>
<Icon className='dynamic-delete-button' type='minus-circle-o' onClick={() => this.remove2(1)} />
</div>
</Form.Item>
)}
{ligandListSelect.length > 2 && (
<Form.Item label='Select ligand' {...formItemLayout4}>
<div>
<Select style={{ width: '100px' }} placeholder='Source' value={this.state.AlignLigandsList[2].pdb_name} onChange={(e) => this.SelectValueSource3(e)}>
{SourceList.map((item, index) => {
return (
<Option key={index.pdb} value={item}>
{item}
</Option>
);
})}
</Select>
<Select placeholder='Compound ID' style={{ width: '100px' }} value={this.state.AlignLigandsList[2].ligand} onChange={(e) => this.SelectValueCompound3(e)}>
{ligandListData.map((item, index) => {
return (
<Option key={index.pdb} value={item}>
{item}
</Option>
);
})}
</Select>
<Icon className='dynamic-delete-button' type='minus-circle-o' onClick={() => this.remove2(2)} />
</div>
</Form.Item>
)}
<Form.Item {...formItemLayoutWithOutLabel}> <Form.Item {...formItemLayoutWithOutLabel}>
{ligandListSelect.length < 3 && ( {ligandListSelect.length < 3 && (
<Button <Button type='dashed' onClick={this.add2} style={{ width: '60%' }}>
type="dashed" <Icon type='plus' /> Add field
onClick={this.add2} </Button>
style={{ width: '60%' }}> )}
<Icon type="plus" /> Add field </Form.Item>
<Form.Item {...formItemLayoutWithOutLabel}>
<Button type='primary' onClick={() => this.handleSubmit2()}>
Show selected ligand
</Button> </Button>
)} <br></br>
</Form.Item> <Button type='primary' onClick={() => this.handleSubmit3()}>
<Form.Item {...formItemLayoutWithOutLabel}> Align Ligands
<Button type="primary" onClick={() => this.handleSubmit2()}> </Button>
Show selected ligand </Form.Item>
</Button> </Form>
<br></br> </div>
<Button type="primary" onClick={() => this.handleSubmit3()}>
Align Ligands
</Button>
</Form.Item>
</Form>
</div> </div>
</div> </div>
</div> </div>
</div>
)} )}
</div> </div>
) );
} }
} }
src/routes/MolecularSearch/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
import { request } from '../../utils/request' import request from '../../utils/request'
import { Input,Button,Modal,Table,message,Pagination } from 'antd'; import { Input,Button,Modal,Table,message,Pagination } from 'antd';
import Molstar from "molstar-react"; import Molstar from "molstar-react";
import './index.css' import './index.css'
......
src/utils/request.js
import axios from 'axios' import axios from 'axios';
axios.defaults.timeout = 15000 import { getQueryString } from './utils';
var baseURL = 'http://52.83.169.190:8004/' //禁用F12功能
document.onkeydown = function () { function disableF12() {
var e = window.event || arguments[0] document.onkeydown = function () {
if (e.keyCode == 123) { var e = window.event || arguments[0];
return false if (e.keyCode == 123) {
} else if ((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)) { return false;
return false } else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
} return false;
}
};
//禁用鼠标右键
document.oncontextmenu = function () {
return false;
};
} }
document.oncontextmenu = function () { // disableF12();
return false
const baseURL = 'http://52.83.169.190:8004/';
const token = getQueryString('token') || localStorage.getItem('token');
const request = axios.create({
baseURL,
timeout: 15000,
headers: {
accessToken: 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校验没通过 返回登录页');
localStorage.removeItem('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('请重新登录');
localStorage.removeItem('token');
window.open('http://69.235.144.91:3048/#/login', '_self');
console.log('err', err);
});
} }
export const request = axios.create({ checkToken();
baseURL: baseURL,
}) //拦截器
request.interceptors.request.use((config) => {
// alert('拦截器..');
console.log('token---', '拦截器方法校验token');
if (!!token) {
checkToken(config);
} else {
console.log('token为空....');
localStorage.removeItem('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;
src/utils/utils.js
...@@ -63,4 +63,17 @@ export function preloadingImages(arr) { ...@@ -63,4 +63,17 @@ 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