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