Skip to content

E
elegantDeepKinase
Commit a05cccab by wangshufen
Options

fixed:修改路由控制

parent 01c80356
Showing with 547 additions and 835 deletions
src/components/HeaderBar/index.js
...@@ -37,7 +37,6 @@ class HeaderBar extends React.Component { ...@@ -37,7 +37,6 @@ class HeaderBar extends React.Component {
} }
logout = () => { logout = () => {
this.props.appStore.toggleLogin(true) this.props.appStore.toggleLogin(true)
// debugger
console.log(this.props.location); console.log(this.props.location);
// this.props.history.push(this.props.location.pathname) // this.props.history.push(this.props.location.pathname)
this.props.history.push('/login') this.props.history.push('/login')
......
src/routes/Kinase/SearchDetails/index.js
...@@ -176,7 +176,6 @@ export default class SearchDetails extends Component { ...@@ -176,7 +176,6 @@ export default class SearchDetails extends Component {
listData.ligand = ''; listData.ligand = '';
listData.resolution = 0; listData.resolution = 0;
this.setState({ listData }); this.setState({ listData });
// debugger;
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,
......
src/routes/Kinase/TargetDetails/index.js
import React, { Component } from 'react' import React, { Component } from 'react';
import { import { Card, Tooltip, Popover, message, Radio, Button, Tabs, Spin, Table, Tag, Input, Collapse, Modal, Form, Select, InputNumber, Typography, Icon, Anchor, Pagination } from 'antd';
Card, import WrappedIframe from '../../../components/iframePdb';
Tooltip, import request from '../../../utils/request';
Popover, import Molstar from 'molstar-react';
message, import { Jsme } from 'jsme-react';
Radio, import qs from 'qs';
Button, import './index.css';
Tabs, const { Panel } = Collapse;
Spin, const { TabPane } = Tabs;
Table, const { Option } = Select;
Tag, const { Title } = Typography;
Input, const { Link } = Anchor;
Collapse, let id = 0;
Modal,
Form,
Select,
InputNumber,
Typography,
Icon,
Anchor,
Pagination,
} from 'antd'
import WrappedIframe from '../../../components/iframePdb'
import request from '../../../utils/request'
import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import './index.css'
const { Panel } = Collapse
const { TabPane } = Tabs
const { Option } = Select
const { Title } = Typography
const { Link } = Anchor
let id = 0
@Form.create() @Form.create()
export default class TargetDetails extends Component { export default class TargetDetails extends Component {
state = { state = {
...@@ -59,7 +38,7 @@ export default class TargetDetails extends Component { ...@@ -59,7 +38,7 @@ export default class TargetDetails extends Component {
MutationList: [], MutationList: [],
Bioassay: [], Bioassay: [],
DrugsInformation: [], DrugsInformation: [],
Gene_name: [] Gene_name: [],
}, },
loading: true, loading: true,
getStructureList: { getStructureList: {
...@@ -93,8 +72,8 @@ export default class TargetDetails extends Component { ...@@ -93,8 +72,8 @@ export default class TargetDetails extends Component {
page: 1, page: 1,
page_size: 10, page_size: 10,
dataid: qs.parse(this.props.location.search.slice(1)).dataid, dataid: qs.parse(this.props.location.search.slice(1)).dataid,
drugs_data: "", drugs_data: '',
finger: 0 finger: 0,
}, },
DrugClinicalImformationSearch: { DrugClinicalImformationSearch: {
page: 1, page: 1,
...@@ -138,273 +117,264 @@ export default class TargetDetails extends Component { ...@@ -138,273 +117,264 @@ export default class TargetDetails extends Component {
], ],
aciveKey: '', aciveKey: '',
directoryState: false, directoryState: false,
visible3: false visible3: false,
};
componentDidMount() {
this.getDetails();
} }
componentDidMount () { getDetails() {
this.getDetails()
}
getDetails () {
// this.setState({loading:true}) // this.setState({loading:true})
this.setState({ loading: true }) this.setState({ loading: true });
request request
.post( .post('kinase/target_detail', qs.parse(this.props.location.search.slice(1)))
'kinase/target_detail',
qs.parse(this.props.location.search.slice(1))
)
.then((res) => { .then((res) => {
this.setState({ loading: false }) this.setState({ loading: false });
if (res.data.code === 200) { if (res.data.code === 200) {
console.log(res) console.log(res);
let data = res.data.data let data = res.data.data;
this.setState({ targetsDetail: data }) this.setState({ targetsDetail: data });
this.setState({ OLDMutationList: data.Mutation }) this.setState({ OLDMutationList: data.Mutation });
this.setState({ loading: false }) this.setState({ loading: false });
let StructureList = res.data.data.Structure let StructureList = res.data.data.Structure;
if (StructureList.length > 0) { if (StructureList.length > 0) {
this.getStructure(StructureList[0].pdb) this.getStructure(StructureList[0].pdb);
this.setState({ this.setState({
aciveKey: StructureList[0].pdb, aciveKey: StructureList[0].pdb,
}) });
} }
this.DrugClinicalImformationList() this.DrugClinicalImformationList();
// this.getMutationList() // this.getMutationList()
this.getBioassayList() this.getBioassayList();
this.getVirantsDiseaseList() this.getVirantsDiseaseList();
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} }
getMutationList = () => { getMutationList = () => {
console.log(this.state.dataOne) console.log(this.state.dataOne);
const { dataid } = this.state.dataOne const { dataid } = this.state.dataOne;
this.setState({ loading: true }) this.setState({ loading: true });
request request
.post('kinase/target_detail/mutation', this.state.MutationSearch) .post('kinase/target_detail/mutation', this.state.MutationSearch)
.then((res) => { .then((res) => {
this.setState({ loading: false }) this.setState({ loading: false });
if (res) { if (res) {
let targetsDetail = this.state.targetsDetail let targetsDetail = this.state.targetsDetail;
targetsDetail.MutationList = res.data.data targetsDetail.MutationList = res.data.data;
this.setState({ total_num: res.data.total_num }) this.setState({ total_num: res.data.total_num });
this.setState({ this.setState({
targetsDetail, targetsDetail,
}) });
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
onChangeTable = (pagination, filters, sorter, extra) => { onChangeTable = (pagination, filters, sorter, extra) => {
// console.log('params', pagination, filters, sorter, extra) // console.log('params', pagination, filters, sorter, extra)
console.log(sorter) console.log(sorter);
if (sorter.order === 'ascend') { if (sorter.order === 'ascend') {
let MutationSearch = this.state.MutationSearch let MutationSearch = this.state.MutationSearch;
MutationSearch.desc = 1 MutationSearch.desc = 1;
this.setState(() => ({ MutationSearch: MutationSearch })) this.setState(() => ({ MutationSearch: MutationSearch }));
this.getMutationList() this.getMutationList();
} }
if (sorter.order === 'descend') { if (sorter.order === 'descend') {
let MutationSearch = this.state.MutationSearch let MutationSearch = this.state.MutationSearch;
MutationSearch.desc = 2 MutationSearch.desc = 2;
this.setState(() => ({ MutationSearch: MutationSearch })) this.setState(() => ({ MutationSearch: MutationSearch }));
this.getMutationList() this.getMutationList();
}
} }
};
onShowSizeChange = (current, pageSize) => { onShowSizeChange = (current, pageSize) => {
console.log(current, pageSize) console.log(current, pageSize);
let MutationSearch = this.state.MutationSearch let MutationSearch = this.state.MutationSearch;
MutationSearch.page = current MutationSearch.page = current;
MutationSearch.page_size = pageSize MutationSearch.page_size = pageSize;
this.setState({ this.setState({
MutationSearch, MutationSearch,
}) });
this.getMutationList() this.getMutationList();
} };
onChange = (current, pageSize) => { onChange = (current, pageSize) => {
console.log(current, pageSize) console.log(current, pageSize);
let MutationSearch = this.state.MutationSearch let MutationSearch = this.state.MutationSearch;
MutationSearch.page = current MutationSearch.page = current;
MutationSearch.page_size = pageSize MutationSearch.page_size = pageSize;
this.setState({ this.setState({
MutationSearch, MutationSearch,
}) });
this.getMutationList() this.getMutationList();
} };
getBioassayList = () => { getBioassayList = () => {
console.log(this.state.dataOne) console.log(this.state.dataOne);
const { dataid } = this.state.dataOne const { dataid } = this.state.dataOne;
this.setState({ loading: true }) this.setState({ loading: true });
request request
.post('kinase/target_detail/bioassay', this.state.BioassaySearch) .post('kinase/target_detail/bioassay', this.state.BioassaySearch)
.then((res) => { .then((res) => {
this.setState({ loading: false }) this.setState({ loading: false });
if (res) { if (res) {
console.log(res) console.log(res);
let targetsDetail = this.state.targetsDetail let targetsDetail = this.state.targetsDetail;
targetsDetail.Bioassay = res.data.data targetsDetail.Bioassay = res.data.data;
this.setState({ total_num2: res.data.total_num }) this.setState({ total_num2: res.data.total_num });
this.setState({ this.setState({
targetsDetail: targetsDetail, targetsDetail: targetsDetail,
}) });
this.setState({ visible3: false }) this.setState({ visible3: false });
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
getVirantsDiseaseList = () => { getVirantsDiseaseList = () => {
console.log(this.state.dataOne) console.log(this.state.dataOne);
this.setState({ loading: true }) this.setState({ loading: true });
console.log(this.state.VirantsDiseaseListSearch) console.log(this.state.VirantsDiseaseListSearch);
request request
.post( .post('kinase/target_detail/virants_disease', this.state.VirantsDiseaseListSearch)
'kinase/target_detail/virants_disease',
this.state.VirantsDiseaseListSearch
)
.then((res) => { .then((res) => {
this.setState({ loading: false }) this.setState({ loading: false });
if (res) { if (res) {
console.log(res) console.log(res);
// let DetailsData = this.state.DetailsData // let DetailsData = this.state.DetailsData
// DetailsData.Target = res.data.data // DetailsData.Target = res.data.data
this.setState({ total_num5: res.data.total_num }) this.setState({ total_num5: res.data.total_num });
this.setState({ this.setState({
VirantsDiseaseList: res.data.data, VirantsDiseaseList: res.data.data,
}) });
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
onShowSizeChange5 = (current, pageSize) => { onShowSizeChange5 = (current, pageSize) => {
console.log(current, pageSize) console.log(current, pageSize);
let VirantsDiseaseListSearch = this.state.VirantsDiseaseListSearch let VirantsDiseaseListSearch = this.state.VirantsDiseaseListSearch;
VirantsDiseaseListSearch.page = current VirantsDiseaseListSearch.page = current;
VirantsDiseaseListSearch.page_size = pageSize VirantsDiseaseListSearch.page_size = pageSize;
this.setState({ this.setState({
VirantsDiseaseListSearch, VirantsDiseaseListSearch,
}) });
this.getVirantsDiseaseList() this.getVirantsDiseaseList();
} };
onChange5 = (current, pageSize) => { onChange5 = (current, pageSize) => {
console.log(current, pageSize) console.log(current, pageSize);
let VirantsDiseaseListSearch = this.state.VirantsDiseaseListSearch let VirantsDiseaseListSearch = this.state.VirantsDiseaseListSearch;
VirantsDiseaseListSearch.page = current VirantsDiseaseListSearch.page = current;
VirantsDiseaseListSearch.page_size = pageSize VirantsDiseaseListSearch.page_size = pageSize;
this.setState({ this.setState({
VirantsDiseaseListSearch, VirantsDiseaseListSearch,
}) });
this.getVirantsDiseaseList() this.getVirantsDiseaseList();
} };
onShowSizeChange2 = (current, pageSize) => { onShowSizeChange2 = (current, pageSize) => {
let BioassaySearch = this.state.BioassaySearch let BioassaySearch = this.state.BioassaySearch;
BioassaySearch.page = current BioassaySearch.page = current;
BioassaySearch.page_size = pageSize BioassaySearch.page_size = pageSize;
this.setState({ this.setState({
BioassaySearch, BioassaySearch,
}) });
this.getBioassayList() this.getBioassayList();
} };
onChange2 = (current, pageSize) => { onChange2 = (current, pageSize) => {
let BioassaySearch = this.state.BioassaySearch let BioassaySearch = this.state.BioassaySearch;
BioassaySearch.page = current BioassaySearch.page = current;
BioassaySearch.page_size = pageSize BioassaySearch.page_size = pageSize;
this.setState({ this.setState({
BioassaySearch, BioassaySearch,
}) });
this.getBioassayList() this.getBioassayList();
} };
DrugClinicalImformationList = () => { DrugClinicalImformationList = () => {
console.log(this.state.dataOne) console.log(this.state.dataOne);
const { dataid } = this.state.dataOne const { dataid } = this.state.dataOne;
this.setState({ loading: true }) this.setState({ loading: true });
request request
.post( .post('kinase/target_detail/drug_information', this.state.DrugClinicalImformationSearch)
'kinase/target_detail/drug_information',
this.state.DrugClinicalImformationSearch
)
.then((res) => { .then((res) => {
this.setState({ loading: false }) this.setState({ loading: false });
if (res) { if (res) {
console.log(res) console.log(res);
let targetsDetail = this.state.targetsDetail let targetsDetail = this.state.targetsDetail;
targetsDetail.DrugsInformation = res.data.data targetsDetail.DrugsInformation = res.data.data;
this.setState({ total_num3: res.data.total_num }) this.setState({ total_num3: res.data.total_num });
this.setState({ this.setState({
targetsDetail: targetsDetail, targetsDetail: targetsDetail,
}) });
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
onShowSizeChange3 = (current, pageSize) => { onShowSizeChange3 = (current, pageSize) => {
let DrugClinicalImformationSearch = this.state.DrugClinicalImformationSearch let DrugClinicalImformationSearch = this.state.DrugClinicalImformationSearch;
DrugClinicalImformationSearch.page = current DrugClinicalImformationSearch.page = current;
DrugClinicalImformationSearch.page_size = pageSize DrugClinicalImformationSearch.page_size = pageSize;
this.setState({ this.setState({
DrugClinicalImformationSearch, DrugClinicalImformationSearch,
}) });
this.DrugClinicalImformationList() this.DrugClinicalImformationList();
} };
onChange3 = (current, pageSize) => { onChange3 = (current, pageSize) => {
let DrugClinicalImformationSearch = this.state.DrugClinicalImformationSearch let DrugClinicalImformationSearch = this.state.DrugClinicalImformationSearch;
DrugClinicalImformationSearch.page = current DrugClinicalImformationSearch.page = current;
DrugClinicalImformationSearch.page_size = pageSize DrugClinicalImformationSearch.page_size = pageSize;
this.setState({ this.setState({
DrugClinicalImformationSearch, DrugClinicalImformationSearch,
}) });
this.DrugClinicalImformationList() this.DrugClinicalImformationList();
} };
getPdid (e) { getPdid(e) {
console.log(e) console.log(e);
this.setState({ visible: true }) this.setState({ visible: true });
this.setState({ pdbId: e }) this.setState({ pdbId: e });
} }
getTag = (e) => { getTag = (e) => {
console.log(e) console.log(e);
this.setState({ visible: true }) this.setState({ visible: true });
this.setState({ pdbId: e }) this.setState({ pdbId: e });
} };
getReferences = (e) => { getReferences = (e) => {
window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`) window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`);
} };
getReferences2 = (e) => { getReferences2 = (e) => {
console.log(e) console.log(e);
window.open(e) window.open(e);
} };
onChangeRadio = (e) => { onChangeRadio = (e) => {
let value = e.target.value let value = e.target.value;
let MutationSearch = this.state.MutationSearch let MutationSearch = this.state.MutationSearch;
MutationSearch.status = value MutationSearch.status = value;
this.setState(() => ({ MutationSearch: MutationSearch })) this.setState(() => ({ MutationSearch: MutationSearch }));
this.getMutationList() this.getMutationList();
} };
getDrug = (e) => { getDrug = (e) => {
console.log(e) console.log(e);
let data = { let data = {
dataid: e, dataid: e,
} };
this.props.history.push({ this.props.history.push({
pathname: '/kinase/SearchDetails', pathname: '/kinase/SearchDetails',
search: qs.stringify(data), search: qs.stringify(data),
}) });
} };
callback () { } callback() {}
childTargetClassChange = () => { } childTargetClassChange = () => {};
getStructure = (e) => { getStructure = (e) => {
request request
.post( .post(
...@@ -414,316 +384,303 @@ export default class TargetDetails extends Component { ...@@ -414,316 +384,303 @@ export default class TargetDetails extends Component {
}) })
) )
.then((res) => { .then((res) => {
this.setState({ loading: false }) this.setState({ loading: false });
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ getStructureList: res.data.data }) this.setState({ getStructureList: res.data.data });
let listData = this.state.listData let listData = this.state.listData;
listData.pdb_code = res.data.data.name listData.pdb_code = res.data.data.name;
listData.ligand = '' listData.ligand = '';
listData.resolution = 0 listData.resolution = 0;
this.setState({ listData }) this.setState({ listData });
let pdbLink = let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
this.setState({ this.setState({
pdbLink, pdbLink,
}) });
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
ChangeTabs = (e) => { ChangeTabs = (e) => {
this.setState({ this.setState({
aciveKey: e, aciveKey: e,
}) });
this.setState({ this.setState({
pdbLink: '', pdbLink: '',
}) });
let listData = this.state.listData let listData = this.state.listData;
listData.ligand = '' listData.ligand = '';
listData.resolution = 0 listData.resolution = 0;
if (listData.pdbList) { if (listData.pdbList) {
delete listData.pdbList delete listData.pdbList;
} }
this.setState({ this.setState({
listData: listData, listData: listData,
pdbLink: '', pdbLink: '',
}) });
this.getStructure(e) this.getStructure(e);
} };
getList = () => { getList = () => {
console.log('getList') console.log('getList');
if (this.state.listData.ligand === '') { if (this.state.listData.ligand === '') {
message.warning('输入查询条件') message.warning('输入查询条件');
return return;
} }
JSON.stringify(this.state.listData) JSON.stringify(this.state.listData);
let listData = this.state.listData let listData = this.state.listData;
listData.pdbList = this.state.pdbList listData.pdbList = this.state.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,
}) });
} };
getResolutionData = (e) => { getResolutionData = (e) => {
console.log(e) console.log(e);
let listData = this.state.listData let listData = this.state.listData;
listData.resolution = e listData.resolution = e;
this.setState({ this.setState({
listData, listData,
}) });
} };
LigandChange = (e) => { LigandChange = (e) => {
let listData = this.state.listData let listData = this.state.listData;
listData.ligand = e listData.ligand = e;
this.setState({ this.setState({
listData, listData,
}) });
} };
sequenceAlign = () => { sequenceAlign = () => {
request request
.post('kinase/sequence_align', qs.stringify(this.state.SequenceAlignment)) .post('kinase/sequence_align', qs.stringify(this.state.SequenceAlignment))
.then((res) => { .then((res) => {
console.log(res) console.log(res);
this.setState({ loading: false }) this.setState({ loading: false });
if (res.data.code === 200) { if (res.data.code === 200) {
this.setState({ SequenceAlignmentList: res.data.data }) this.setState({ SequenceAlignmentList: res.data.data });
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
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;
} }
// 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');
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,
}) });
} };
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) => {
const { keys, names } = values const { keys, names } = values;
// console.log('Received values of form: ', values); // console.log('Received values of form: ', values);
// console.log('Merged values:', keys.map(key => names[key])); // console.log('Merged values:', keys.map(key => names[key]));
// let names=keys.map(key => names[key]) // let names=keys.map(key => names[key])
console.log(names) console.log(names);
for (let index = 0; index < names.length; index++) { for (let index = 0; index < names.length; index++) {
var element = names[index] var element = names[index];
if (element == undefined) { if (element == undefined) {
names[index] = '' names[index] = '';
} }
} }
let newArr = names.filter((i) => i && i.trim()) let newArr = names.filter((i) => i && i.trim());
console.log(newArr) console.log(newArr);
let SequenceAlignment = this.state.SequenceAlignment let SequenceAlignment = this.state.SequenceAlignment;
SequenceAlignment.aligns = newArr.toString() SequenceAlignment.aligns = newArr.toString();
SequenceAlignment.reference = this.state.targetsDetail.name SequenceAlignment.reference = this.state.targetsDetail.name;
this.setState(() => ({ SequenceAlignment: SequenceAlignment })) this.setState(() => ({ SequenceAlignment: SequenceAlignment }));
this.sequenceAlign() this.sequenceAlign();
}) });
} };
getSequence = (e) => { getSequence = (e) => {
const { value } = e.target const { value } = e.target;
let SequenceAlignment = this.state.SequenceAlignment let SequenceAlignment = this.state.SequenceAlignment;
SequenceAlignment.reference = value SequenceAlignment.reference = value;
this.setState(() => ({ SequenceAlignment: SequenceAlignment })) this.setState(() => ({ SequenceAlignment: SequenceAlignment }));
} };
handleAnchorClick = (e) => { handleAnchorClick = (e) => {
e.preventDefault() e.preventDefault();
} };
getValue = (e) => { getValue = (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 }));
} };
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 }));
} };
onChangeGroup = (e) => { onChangeGroup = (e) => {
console.log(e) console.log(e);
this.setState({ this.setState({
pdbList: e, pdbList: e,
}) });
} };
remove2 = (k) => { remove2 = (k) => {
const { form } = this.props const { form } = this.props;
// can use data-binding to get // can use data-binding to get
const keys2 = form.getFieldValue('keys') const keys2 = form.getFieldValue('keys');
// We need at least one passenger // We need at least one passenger
if (keys2.length === 1) { if (keys2.length === 1) {
return return;
} }
this.setState({ this.setState({
sum: keys2.length - 1, sum: keys2.length - 1,
}) });
// can use data-binding to set // can use data-binding to set
form.setFieldsValue({ form.setFieldsValue({
keys2: keys2.filter((key) => key !== k), keys2: keys2.filter((key) => key !== k),
}) });
} };
add2 = () => { add2 = () => {
const { form } = this.props const { form } = this.props;
// can use data-binding to get // can use data-binding to get
const keys2 = form.getFieldValue('keys') const keys2 = form.getFieldValue('keys');
const nextKeys = keys2.concat(id++) const nextKeys = keys2.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: keys2.length + 1, sum: keys2.length + 1,
}) });
} };
handleSubmit2 = (e) => { handleSubmit2 = (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 { const { keys, pdbList, chainList, methodList, cutoffList, cyclesList } = values;
keys, console.log('Received values of form: ', values);
pdbList,
chainList,
methodList,
cutoffList,
cyclesList,
} = values
console.log('Received values of form: ', values)
// console.log('Merged values:', keys.map(key => names[key])) // console.log('Merged values:', keys.map(key => names[key]))
// let names = keys.map(key => names[key]) // let names = keys.map(key => names[key])
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 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)
})
}
alignmentEve = () => { alignmentEve = () => {
this.setState({ visible2: true }) this.setState({ visible2: true });
this.props.form.resetFields() this.props.form.resetFields();
} };
onCancelForm = () => { onCancelForm = () => {
this.setState({ visible2: false }) this.setState({ visible2: false });
this.props.form.resetFields() this.props.form.resetFields();
} };
logSmiles2 = (e) => { logSmiles2 = (e) => {
let BioassaySearch = this.state.BioassaySearch let BioassaySearch = this.state.BioassaySearch;
BioassaySearch.drugs_data = e BioassaySearch.drugs_data = e;
this.setState(() => ({ BioassaySearch: BioassaySearch })) this.setState(() => ({ BioassaySearch: BioassaySearch }));
// this.setState(()=>({data:e })) // this.setState(()=>({data:e }))
} };
getLigendValue = (e) => { getLigendValue = (e) => {
const { value } = e.target const { value } = e.target;
let BioassaySearch = this.state.BioassaySearch let BioassaySearch = this.state.BioassaySearch;
BioassaySearch.drugs_data = value BioassaySearch.drugs_data = value;
this.setState(() => ({ BioassaySearch: BioassaySearch })) this.setState(() => ({ BioassaySearch: BioassaySearch }));
} };
onChangeRadio4 = (e) => { onChangeRadio4 = (e) => {
let value = e.target.value let value = e.target.value;
let BioassaySearch = this.state.BioassaySearch let BioassaySearch = this.state.BioassaySearch;
BioassaySearch.finger = value BioassaySearch.finger = value;
this.setState({ this.setState({
BioassaySearch: BioassaySearch, BioassaySearch: BioassaySearch,
}) });
} };
render () { render() {
const { const {
visible, visible,
visible2, visible2,
...@@ -739,9 +696,9 @@ export default class TargetDetails extends Component { ...@@ -739,9 +696,9 @@ export default class TargetDetails extends Component {
sum, sum,
addList, addList,
directoryState, directoryState,
visible3 visible3,
} = this.state } = this.state;
const { getFieldDecorator, getFieldValue } = this.props.form const { getFieldDecorator, getFieldValue } = this.props.form;
const columnsVirantsDisease = [ const columnsVirantsDisease = [
{ {
title: 'Consequence Type', title: 'Consequence Type',
...@@ -758,12 +715,11 @@ export default class TargetDetails extends Component { ...@@ -758,12 +715,11 @@ export default class TargetDetails extends Component {
dataIndex: 'Protein Position', dataIndex: 'Protein Position',
key: 'Protein Position', key: 'Protein Position',
}, },
] ];
const expandedRowRender = (e) => { const expandedRowRender = (e) => {
console.log(e) console.log(e);
const { Conditions } = e const { Conditions } = e;
const columns = [ const columns = [
{ {
title: 'indication', title: 'indication',
dataIndex: 'indication', dataIndex: 'indication',
...@@ -792,10 +748,11 @@ export default class TargetDetails extends Component { ...@@ -792,10 +748,11 @@ export default class TargetDetails extends Component {
<span> <span>
{ {
<Tag <Tag
color="blue" color='blue'
onClick={() => { onClick={() => {
this.getReferences2(reference) this.getReferences2(reference);
}}> }}
>
<a href={reference} /> <a href={reference} />
{reference} {reference}
</Tag> </Tag>
...@@ -803,19 +760,12 @@ export default class TargetDetails extends Component { ...@@ -803,19 +760,12 @@ export default class TargetDetails extends Component {
</span> </span>
), ),
}, },
] ];
return ( return <Table columns={columns} rowKey='item' dataSource={Conditions} pagination={false} />;
<Table };
columns={columns}
rowKey="item"
dataSource={Conditions}
pagination={false}
/>
)
}
const expandedRowRender2 = (e) => { const expandedRowRender2 = (e) => {
console.log(e) console.log(e);
const { Association } = e const { Association } = e;
const columnsAssociation = [ const columnsAssociation = [
{ {
title: 'Disease', title: 'Disease',
...@@ -832,31 +782,25 @@ export default class TargetDetails extends Component { ...@@ -832,31 +782,25 @@ export default class TargetDetails extends Component {
Reference.map((item, index) => { Reference.map((item, index) => {
return ( return (
<Tag <Tag
color="blue" color='blue'
key={index} key={index}
onClick={() => { onClick={() => {
this.getReferences2(item.url) this.getReferences2(item.url);
}}> }}
>
{item.name.toUpperCase()} {item.name.toUpperCase()}
</Tag> </Tag>
) );
})} })}
</span> </span>
), ),
}, },
] ];
return ( return <Table columns={columnsAssociation} rowKey='item' dataSource={Association} pagination={false} />;
<Table };
columns={columnsAssociation}
rowKey="item"
dataSource={Association}
pagination={false}
/>
)
}
const getFieldDecorator2 = this.props.form.getFieldDecorator const getFieldDecorator2 = this.props.form.getFieldDecorator;
const getFieldValue2 = this.props.form.getFieldValue const getFieldValue2 = this.props.form.getFieldValue;
const columns2 = [ const columns2 = [
{ {
title: 'name', title: 'name',
...@@ -880,14 +824,14 @@ export default class TargetDetails extends Component { ...@@ -880,14 +824,14 @@ export default class TargetDetails extends Component {
dataIndex: 'sequence', dataIndex: 'sequence',
key: 'sequence', key: 'sequence',
render: (item, record) => ( render: (item, record) => (
<div className="table-sequence-div"> <div className='table-sequence-div'>
{item.split('').map((item2, index) => { {item.split('').map((item2, index) => {
return <div key={index}>{item2}</div> return <div key={index}>{item2}</div>;
})} })}
</div> </div>
), ),
}, },
] ];
const formItemLayout2 = { const formItemLayout2 = {
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
...@@ -897,27 +841,19 @@ export default class TargetDetails extends Component { ...@@ -897,27 +841,19 @@ export default class TargetDetails extends Component {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 20 }, sm: { span: 20 },
}, },
} };
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 columnsDrug = [ const columnsDrug = [
{ {
title: 'Drug Structure', title: 'Drug Structure',
dataIndex: 'Drug structure', dataIndex: 'Drug structure',
key: 'Drug structure', key: 'Drug structure',
render: (DrugStructure) => ( render: (DrugStructure) => <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={DrugStructure} />,
<Jsme
height="100px"
width="100px"
options="depict,useopenchemlib"
smiles={DrugStructure}
/>
),
}, },
{ {
...@@ -925,7 +861,7 @@ export default class TargetDetails extends Component { ...@@ -925,7 +861,7 @@ export default class TargetDetails extends Component {
dataIndex: 'Drug name', dataIndex: 'Drug name',
key: 'Drug name', key: 'Drug name',
render: (item, record) => ( render: (item, record) => (
<Button type="primary" onClick={() => this.getDrug(record.dataid)}> <Button type='primary' onClick={() => this.getDrug(record.dataid)}>
{item} {item}
</Button> </Button>
), ),
...@@ -954,25 +890,18 @@ export default class TargetDetails extends Component { ...@@ -954,25 +890,18 @@ export default class TargetDetails extends Component {
{item} {item}
{index > 0 && <span> ,</span>} {index > 0 && <span> ,</span>}
</span> </span>
) );
})} })}
</span> </span>
), ),
}, },
] ];
const columnsBioassay = [ const columnsBioassay = [
{ {
title: 'Structure', title: 'Structure',
dataIndex: 'structure', dataIndex: 'structure',
key: 'structure', key: 'structure',
render: (structure) => ( render: (structure) => <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={structure} />,
<Jsme
height="100px"
width="100px"
options="depict,useopenchemlib"
smiles={structure}
/>
),
}, },
{ {
title: 'Standard Type', title: 'Standard Type',
...@@ -1008,21 +937,22 @@ export default class TargetDetails extends Component { ...@@ -1008,21 +937,22 @@ export default class TargetDetails extends Component {
<span> <span>
{ {
<Tag <Tag
color="blue" color='blue'
onClick={() => { onClick={() => {
this.getReferences2(reference) this.getReferences2(reference);
}}> }}
>
{reference} {reference}
</Tag> </Tag>
} }
</span> </span>
), ),
}, },
] ];
const formItemLayout = { const formItemLayout = {
labelCol: { span: 8 }, labelCol: { span: 8 },
wrapperCol: { span: 12 }, wrapperCol: { span: 12 },
} };
const columnsMutation = [ const columnsMutation = [
{ {
...@@ -1053,15 +983,11 @@ export default class TargetDetails extends Component { ...@@ -1053,15 +983,11 @@ export default class TargetDetails extends Component {
<Popover <Popover
content={ content={
<div> <div>
<Jsme <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={Ligand.smile} />
height="100px"
width="100px"
options="depict,useopenchemlib"
smiles={Ligand.smile}
/>
</div> </div>
}> }
{Ligand.name != '' && <Button type="primary">{Ligand.name}</Button>} >
{Ligand.name != '' && <Button type='primary'>{Ligand.name}</Button>}
</Popover> </Popover>
), ),
}, },
...@@ -1093,17 +1019,18 @@ export default class TargetDetails extends Component { ...@@ -1093,17 +1019,18 @@ export default class TargetDetails extends Component {
<span> <span>
{ {
<Tag <Tag
color="blue" color='blue'
onClick={() => { onClick={() => {
this.getReferences2(Reference) this.getReferences2(Reference);
}}> }}
>
{Reference.toUpperCase()} {Reference.toUpperCase()}
</Tag> </Tag>
} }
</span> </span>
), ),
}, },
] ];
const columnsChain = [ const columnsChain = [
{ {
title: 'Chain_name', title: 'Chain_name',
...@@ -1136,60 +1063,37 @@ export default class TargetDetails extends Component { ...@@ -1136,60 +1063,37 @@ export default class TargetDetails extends Component {
dataIndex: 'res_end', dataIndex: 'res_end',
key: 'res_end', key: 'res_end',
}, },
] ];
const formTailLayout = { const formTailLayout = {
labelCol: { span: 8 }, labelCol: { span: 8 },
wrapperCol: { span: 12, offset: 8 }, wrapperCol: { span: 12, offset: 8 },
} };
getFieldDecorator('keys', { initialValue: [] }) getFieldDecorator('keys', { initialValue: [] });
getFieldDecorator2('keys2', { initialValue2: [] }) getFieldDecorator2('keys2', { initialValue2: [] });
const keys = getFieldValue('keys') const keys = getFieldValue('keys');
const keys2 = getFieldValue2('keys') const keys2 = getFieldValue2('keys');
const formItems = keys.map((k, index) => ( const formItems = keys.map((k, index) => (
<Form.Item <Form.Item {...(index === 0 ? formItemLayout2 : formItemLayoutWithOutLabel)} label={index === 0 ? 'AlignSequence: ' : ''} required={false} key={k}>
{...(index === 0 ? formItemLayout2 : formItemLayoutWithOutLabel)} {getFieldDecorator(`names[${k}]`)(<Input placeholder='Please input uniprot name' style={{ width: '60%', marginRight: 8 }} />)}
label={index === 0 ? 'AlignSequence: ' : ''} {keys.length > 1 ? <Icon className='dynamic-delete-button' type='minus-circle-o' onClick={() => this.remove(k)} /> : null}
required={false}
key={k}>
{getFieldDecorator(`names[${k}]`)(
<Input
placeholder="Please input uniprot name"
style={{ width: '60%', marginRight: 8 }}
/>
)}
{keys.length > 1 ? (
<Icon
className="dynamic-delete-button"
type="minus-circle-o"
onClick={() => this.remove(k)}
/>
) : null}
</Form.Item> </Form.Item>
)) ));
const formItems2 = keys2.map((k, index) => ( const formItems2 = keys2.map((k, index) => (
<Form.Item <Form.Item {...(index === 0 ? formItemLayout2 : formItemLayoutWithOutLabel)} label={index === 0 ? 'SelectPDB: ' : ''} required={false} key={k}>
{...(index === 0 ? formItemLayout2 : formItemLayoutWithOutLabel)}
label={index === 0 ? 'SelectPDB: ' : ''}
required={false}
key={k}>
<div style={{ display: 'flex ', alignItems: 'center ' }}> <div style={{ display: 'flex ', alignItems: 'center ' }}>
{getFieldDecorator2(`pdbList[${k}]`)( {getFieldDecorator2(`pdbList[${k}]`)(
<Select style={{ width: '70px' }}> <Select style={{ width: '70px' }}>
{targetsDetail.Structure.map((item, index) => { {targetsDetail.Structure.map((item, index) => {
return ( return (
<Option key={index.pdb} value={item.pdb.toLowerCase()}> <Option key={index.pdb} value={item.pdb.toLowerCase()}>
{item.pdb&&item.pdb.toLowerCase()} {item.pdb && item.pdb.toLowerCase()}
</Option> </Option>
) );
})} })}
</Select> </Select>
)} )}
<div> <div>
<Form.Item style={{ margin: '0px' }}> <Form.Item style={{ margin: '0px' }}>{getFieldDecorator2(`chainList[${k}]`)(<Input placeholder='请输入Chain' style={{ width: '100px' }} />)}</Form.Item>
{getFieldDecorator2(`chainList[${k}]`)(
<Input placeholder="请输入Chain" style={{ width: '100px' }} />
)}
</Form.Item>
</div> </div>
<div> <div>
<Form.Item style={{ margin: '0px' }}> <Form.Item style={{ margin: '0px' }}>
...@@ -1200,91 +1104,62 @@ export default class TargetDetails extends Component { ...@@ -1200,91 +1104,62 @@ export default class TargetDetails extends Component {
<Option key={index} value={item}> <Option key={index} value={item}>
{item} {item}
</Option> </Option>
) );
})} })}
</Select> </Select>
)} )}
</Form.Item> </Form.Item>
</div> </div>
<div> <div>
<Form.Item style={{ margin: '0px' }}> <Form.Item style={{ margin: '0px' }}>{getFieldDecorator2(`cutoffList[${k}]`)(<Input placeholder='Cutoff' style={{ width: '70px' }} />)}</Form.Item>
{getFieldDecorator2(`cutoffList[${k}]`)(
<Input placeholder="Cutoff" style={{ width: '70px' }} />
)}
</Form.Item>
</div> </div>
<div> <div>
<Form.Item style={{ margin: '0px' }}> <Form.Item style={{ margin: '0px' }}>
{getFieldDecorator2(`cyclesList[${k}]`)( {getFieldDecorator2(`cyclesList[${k}]`)(<Input placeholder='Cycles' style={{ width: '70px', marginRight: 8 }} />)}
<Input {keys2.length > 1 ? <Icon className='dynamic-delete-button' type='minus-circle-o' onClick={() => this.remove2(k)} /> : null}
placeholder="Cycles"
style={{ width: '70px', marginRight: 8 }}
/>
)}
{keys2.length > 1 ? (
<Icon
className="dynamic-delete-button"
type="minus-circle-o"
onClick={() => this.remove2(k)}
/>
) : null}
</Form.Item> </Form.Item>
</div> </div>
</div> </div>
</Form.Item> </Form.Item>
)) ));
return ( return (
<div className="search-TargetDetails-div"> <div className='search-TargetDetails-div'>
<div className="Anchor-div"> <div className='Anchor-div'>
{directoryState && ( {directoryState && (
<Button type="primary" style={{ width: '100%' }} onClick={() => this.setState({ directoryState: false })}> <Button type='primary' style={{ width: '100%' }} onClick={() => this.setState({ directoryState: false })}>
收起目录 收起目录
</Button> </Button>
)} )}
{!directoryState && ( {!directoryState && (
<Button type="primary" style={{ width: '100%' }} onClick={() => this.setState({ directoryState: true })}> <Button type='primary' style={{ width: '100%' }} onClick={() => this.setState({ directoryState: true })}>
展开目录 展开目录
</Button> </Button>
)} )}
{ {directoryState && (
directoryState && ( <div>
<div> <Anchor onClick={this.handleAnchorClick}> {' '}
<Link href="#card" title="card" /> <Anchor onClick={this.handleAnchorClick}>
<Link href="#Sequence" title="Sequence" /> <Link href='#card' title='card' />
<Link href="#Structure" title="Structure" /> <Link href='#Sequence' title='Sequence' />
<Link href="#Mutation" title="Mutation" /> <Link href='#Structure' title='Structure' />
<Link href="#Drug" title="Drug & Clinical imformation" /> <Link href='#Mutation' title='Mutation' />
<Link href="#Bioassay" title="Bioassay" /> <Link href='#Drug' title='Drug & Clinical imformation' />
</Anchor></div> <Link href='#Bioassay' title='Bioassay' />
) </Anchor>
</div>
} )}
</div> </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}
width={550}
visible={visible}
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({ visible: false })}>
<div className="Molstar-div">
<Molstar file={this.state.fileData} /> <Molstar file={this.state.fileData} />
</div> </div>
</Modal> </Modal>
<Modal <Modal footer={null} closable={false} width={1000} visible={visible2} wrapClassName='vertical-center-modal' onCancel={this.onCancelForm}>
footer={null} <div className='form-div'>
closable={false}
width={1000}
visible={visible2}
wrapClassName="vertical-center-modal"
onCancel={this.onCancelForm}>
<div className="form-div">
<Form onSubmit={this.handleSubmit}> <Form onSubmit={this.handleSubmit}>
<Form.Item <Form.Item
label="Ref. Sequence:" label='Ref. Sequence:'
{...{ {...{
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
...@@ -1294,127 +1169,80 @@ export default class TargetDetails extends Component { ...@@ -1294,127 +1169,80 @@ export default class TargetDetails extends Component {
xs: { span: 24 }, xs: { span: 24 },
sm: { span: 20 }, sm: { span: 20 },
}, },
}}> }}
<Input >
placeholder="" <Input placeholder='' style={{ width: '60%', marginRight: 8 }} disabled value={targetsDetail.name} />
style={{ width: '60%', marginRight: 8 }}
disabled
value={targetsDetail.name}
/>
</Form.Item> </Form.Item>
{formItems} {formItems}
<Form.Item {...formItemLayoutWithOutLabel}> <Form.Item {...formItemLayoutWithOutLabel}>
<Button <Button type='dashed' onClick={this.add} style={{ width: '60%' }}>
type="dashed" <Icon type='plus' /> Add field
onClick={this.add}
style={{ width: '60%' }}>
<Icon type="plus" /> Add field
</Button> </Button>
</Form.Item> </Form.Item>
<Form.Item {...formItemLayoutWithOutLabel}> <Form.Item {...formItemLayoutWithOutLabel}>
<Button type="primary" htmlType="submit"> <Button type='primary' htmlType='submit'>
Align Align
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
<div className="SequenceAlignmentList-div"> <div className='SequenceAlignmentList-div'>
{SequenceAlignmentList.length > 0 && ( {SequenceAlignmentList.length > 0 && <Table bordered rowKey='item' dataSource={SequenceAlignmentList} pagination={false} columns={columns2} scroll={{ x: 1800 }} />}
<Table
bordered
rowKey="item"
dataSource={SequenceAlignmentList}
pagination={false}
columns={columns2}
scroll={{ x: 1800 }}
/>
)}
</div> </div>
</Modal> </Modal>
<Modal <Modal footer={null} closable={false} width={700} visible={visible3} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible3: false })}>
footer={null} <div className='Molstar-div'>
closable={false} <Form layout='horizontal'>
width={700} <Form.Item label='输入Smiles' {...formItemLayout}>
visible={visible3} <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getLigendValue} value={this.state.BioassaySearch.drugs_data} />
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({ visible3: false })}>
<div className="Molstar-div">
<Form layout="horizontal">
<Form.Item label="输入Smiles" {...formItemLayout}>
<Input
placeholder="请输入"
style={{ width: 250 }}
size="large"
onChange={this.getLigendValue}
value={this.state.BioassaySearch.drugs_data}
/>
</Form.Item> </Form.Item>
<Form.Item label="" {...formTailLayout}> <Form.Item label='' {...formTailLayout}>
{/* <Button {/* <Button
type="primary" type="primary"
style={{ marginRight: '50px' }} style={{ marginRight: '50px' }}
onClick={this.getDraw}> onClick={this.getDraw}>
画结构 画结构
</Button> */} </Button> */}
<Button <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getBioassayList}>
type="primary"
style={{ marginLeft: 50, width: 150 }}
size="large"
loading={this.state.loading}
onClick={this.getBioassayList}>
Search Search
</Button> </Button>
<div <div className={true ? 'bottom-div' : 'bottom-div isShowDiv'}>
className={true ? 'bottom-div' : 'bottom-div isShowDiv'} <Radio.Group onChange={this.onChangeRadio4} value={this.state.BioassaySearch.finger}>
>
<Radio.Group
onChange={this.onChangeRadio4}
value={this.state.BioassaySearch.finger}>
<Radio value={0}>Substructure</Radio> <Radio value={0}>Substructure</Radio>
{/* <Radio value={1}>有GPCR相关PDB结构</Radio> */} {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
<Radio value={1}>Similar Structure</Radio> <Radio value={1}>Similar Structure</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
<div <div className={true ? 'bottom-div' : 'bottom-div isShowDiv'}>
className={true ? 'bottom-div' : 'bottom-div isShowDiv'} <Jsme height='300px' width='400px' options='oldlook,star' onChange={this.logSmiles2} />
>
<Jsme
height="300px"
width="400px"
options="oldlook,star"
onChange={this.logSmiles2}
/>
</div> </div>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
</Modal> </Modal>
<Spin tip="Loading..." size="large" spinning={this.state.loading}> <Spin tip='Loading...' size='large' spinning={this.state.loading}>
<Card hoverable id="card"> <Card hoverable id='card'>
<div> <div>
<div className="title-div">{targetsDetail.name}</div> <div className='title-div'>{targetsDetail.name}</div>
<div className="title-div-top"> <div className='title-div-top'>
<div className="DataList-left"> <div className='DataList-left'>
<div> <div>
<div className="div-list"> <div className='div-list'>
<div className="list-one"> <div className='list-one'>
<div>Gene name</div> <div>Gene name</div>
<div /> <div />
{targetsDetail.Gene_name.map((item) => { {targetsDetail.Gene_name.map((item) => {
return <Tag>{item}</Tag> return <Tag>{item}</Tag>;
}) })}
}
</div> </div>
<div className="list-one"> <div className='list-one'>
<div>Species</div> <div>Species</div>
<div /> <div />
{targetsDetail.Species} {targetsDetail.Species}
</div> </div>
<div className="list-one"> <div className='list-one'>
<div>Uniprot id</div> <div>Uniprot id</div>
<div /> <div />
{targetsDetail.Uniport_id} {targetsDetail.Uniport_id}
...@@ -1424,7 +1252,6 @@ export default class TargetDetails extends Component { ...@@ -1424,7 +1252,6 @@ export default class TargetDetails extends Component {
<div /> <div />
{targetsDetail.Class} {targetsDetail.Class}
</div> */} </div> */}
</div> </div>
</div> </div>
</div> </div>
...@@ -1432,124 +1259,85 @@ export default class TargetDetails extends Component { ...@@ -1432,124 +1259,85 @@ export default class TargetDetails extends Component {
</div> </div>
</Card> </Card>
{/* {PanelList} */} {/* {PanelList} */}
<Collapse <Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6']} onChange={this.callback}>
defaultActiveKey={['1', '2', '3', '4', '5', '6']} <Panel header='Sequence' key='1' id='Sequence'>
onChange={this.callback}> <Button type='primary' onClick={this.alignmentEve}>
<Panel header="Sequence" key="1" id="Sequence">
<Button type="primary" onClick={this.alignmentEve}>
alignment alignment
</Button> </Button>
<div className="Sequence-div"> <div className='Sequence-div'>
{targetsDetail.Sequence && {targetsDetail.Sequence &&
targetsDetail.Sequence.map((item, index) => { targetsDetail.Sequence.map((item, index) => {
// console.log(item); // console.log(item);
// console.log(Object.entries(item)); // console.log(Object.entries(item));
return ( return (
<div className="Sequenceone-div" key={index}> <div className='Sequenceone-div' key={index}>
{Object.entries(item)[0][0]} {Object.entries(item)[0][0]}
<div className="zimu-div"> <div className='zimu-div'>
{Object.entries(item)[0][1].map((item2, index2) => { {Object.entries(item)[0][1].map((item2, index2) => {
return ( return (
<Tooltip <Tooltip placement='top' key={index2} title={item2.title}>
placement="top" <div className={'res-color-' + item2.thum}>{item2.thum}</div>
key={index2}
title={item2.title}>
<div className={'res-color-' + item2.thum}>
{item2.thum}
</div>
</Tooltip> </Tooltip>
) );
})} })}
</div> </div>
</div> </div>
) );
})} })}
</div> </div>
</Panel> </Panel>
<Panel header="Structure" key="2" id="Structure"> <Panel header='Structure' key='2' id='Structure'>
<Tabs <Tabs defaultActiveKey='0' tabPosition='left' style={{ height: 1000 }} onChange={this.ChangeTabs}>
defaultActiveKey="0"
tabPosition="left"
style={{ height: 1000 }}
onChange={this.ChangeTabs}>
{targetsDetail.Structure.map((item, index) => { {targetsDetail.Structure.map((item, index) => {
return ( return (
<TabPane tab={item.pdb} key={item.pdb} id={item.pdb}> <TabPane tab={item.pdb} key={item.pdb} id={item.pdb}>
<div className="TabPane-center"> <div className='TabPane-center'>
<div className="Molstar-div2"> <div className='Molstar-div2'>{this.state.aciveKey == item.pdb && <WrappedIframe pdbLink={this.state.pdbLink} />}</div>
{this.state.aciveKey == item.pdb && ( <div className='Structure-right'>
<WrappedIframe pdbLink={this.state.pdbLink} /> <Form layout='horizontal'>
)} <Form.Item label='详情' {...formItemLayout}>
</div>
<div className="Structure-right">
<Form layout="horizontal">
<Form.Item label="详情" {...formItemLayout}>
<div>method: {getStructureList.method}</div> <div>method: {getStructureList.method}</div>
<div>name: {getStructureList.name}</div> <div>name: {getStructureList.name}</div>
<div> <div>pdb_datatime: {getStructureList.pdb_datatime}</div>
pdb_datatime:{' '} <div>resolution: {getStructureList.resolution}</div>
{getStructureList.pdb_datatime}
</div>
<div>
resolution: {getStructureList.resolution}
</div>
</Form.Item> </Form.Item>
<Form.Item <Form.Item label='References ' {...formItemLayout}>
label="References "
{...formItemLayout}>
{getStructureList.References && {getStructureList.References &&
getStructureList.References.map( getStructureList.References.map((item, index) => {
(item, index) => {
return ( return (
<Button <Button
type="primary" type='primary'
onClick={() => { onClick={() => {
this.getReferences2(item) this.getReferences2(item);
}} }}
key={index} key={index}
style={{ marginRight: '5px' }}> style={{ marginRight: '5px' }}
>
{item} {item}
</Button> </Button>
) );
} })}
)}
</Form.Item> </Form.Item>
</Form> </Form>
<Collapse accordion> <Collapse accordion>
<Panel header="对齐" key="1"> <Panel header='对齐' key='1'>
<div className="form-div"> <div className='form-div'>
<Form <Form onSubmit={this.handleSubmit2} className='login-form'>
onSubmit={this.handleSubmit2} <Form.Item label='Ref.PDB' {...formItemLayout2}>
className="login-form">
<Form.Item
label="Ref.PDB"
{...formItemLayout2}>
<div> <div>
<Select <Select style={{ width: '100px' }} value={this.state.superpositionData[0].pdbID} onChange={this.SelectValue}>
style={{ width: '100px' }} {targetsDetail.Structure.map((item, index) => {
value={
this.state.superpositionData[0].pdbID
}
onChange={this.SelectValue}>
{targetsDetail.Structure.map(
(item, index) => {
return ( return (
<Option <Option key={index} value={item.pdb.toLowerCase()}>
key={index} {item.pdb && item.pdb.toLowerCase()}
value={item.pdb.toLowerCase()}>
{item.pdb&&item.pdb.toLowerCase()}
</Option> </Option>
) );
} })}
)}
</Select> </Select>
<Input <Input
placeholder="请输入Chain" placeholder='请输入Chain'
onChange={this.getValue} onChange={this.getValue}
value={ value={this.state.superpositionData[0].chainID}
this.state.superpositionData[0]
.chainID
}
style={{ style={{
width: '100px', width: '100px',
}} }}
...@@ -1559,29 +1347,24 @@ export default class TargetDetails extends Component { ...@@ -1559,29 +1347,24 @@ export default class TargetDetails extends Component {
{formItems2} {formItems2}
<Form.Item {...formItemLayoutWithOutLabel}> <Form.Item {...formItemLayoutWithOutLabel}>
{sum < 2 && ( {sum < 2 && (
<Button <Button type='dashed' onClick={this.add2} style={{ width: '60%' }}>
type="dashed" <Icon type='plus' /> Add field
onClick={this.add2}
style={{ width: '60%' }}>
<Icon type="plus" /> Add field
</Button> </Button>
)} )}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayoutWithOutLabel}> <Form.Item {...formItemLayoutWithOutLabel}>
<Button type="primary" htmlType="submit"> <Button type='primary' htmlType='submit'>
对齐 对齐
</Button> </Button>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </div>
</Panel> </Panel>
<Panel header="抽取配体" key="2"> <Panel header='抽取配体' key='2'>
<Form layout="horizontal"> <Form layout='horizontal'>
<Form.Item label='配体列表' {...formItemLayout}>
<Form.Item label="配体列表" {...formItemLayout}>
{getStructureList.ligand_up_list && {getStructureList.ligand_up_list &&
getStructureList.ligand_up_list.map( getStructureList.ligand_up_list.map((item, index) => {
(item, index) => {
return ( return (
<Popover <Popover
content={ content={
...@@ -1592,69 +1375,56 @@ export default class TargetDetails extends Component { ...@@ -1592,69 +1375,56 @@ export default class TargetDetails extends Component {
width: '100px', width: '100px',
wordWrap: 'break-word', wordWrap: 'break-word',
wordBreak: 'normal', wordBreak: 'normal',
}}> }}
>
{item.comp_name} {item.comp_name}
</div> </div>
<Jsme <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={item.smiles} />
height="100px"
width="100px"
options="depict,useopenchemlib"
smiles={item.smiles}
/>
</div> </div>
}> }
>
{ {
<Button <Button type='primary' style={{ marginRight: '5px' }}>
type="primary"
style={{ marginRight: '5px' }}>
{item.name} {item.name}
</Button> </Button>
} }
</Popover> </Popover>
) );
} })}
)}
</Form.Item> </Form.Item>
<Form.Item label="配体选择" {...formItemLayout}> <Form.Item label='配体选择' {...formItemLayout}>
<Select <Select style={{ width: 250 }} value={this.state.listData.ligand} size='large' onChange={this.LigandChange}>
style={{ width: 250 }}
value={this.state.listData.ligand}
size="large"
onChange={this.LigandChange}>
{getStructureList.ligand_list && {getStructureList.ligand_list &&
getStructureList.ligand_list.map( getStructureList.ligand_list.map((item, index) => {
(item, index) => {
return ( return (
<Option key={index} value={item}> <Option key={index} value={item}>
{item} {item}
</Option> </Option>
) );
} })}
)}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="搜索半径" {...formItemLayout}> <Form.Item label='搜索半径' {...formItemLayout}>
<InputNumber <InputNumber
style={{ width: 250 }} style={{ width: 250 }}
min={getStructureList.resolution} min={getStructureList.resolution}
max={10} max={10}
placeholder={'请输入大于resolutiond数字'} placeholder={'请输入大于resolutiond数字'}
step={0.1} step={0.1}
size="large" size='large'
onChange={this.getResolutionData} onChange={this.getResolutionData}
/> />
</Form.Item> </Form.Item>
<Form.Item label="Search" {...formItemLayout}> <Form.Item label='Search' {...formItemLayout}>
<Button <Button
type="primary" type='primary'
style={{ marginLeft: 50, width: 150 }} style={{ marginLeft: 50, width: 150 }}
size="large" size='large'
loading={this.state.loading} loading={this.state.loading}
disabled={ disabled={getStructureList.ligand_list.length === 0}
getStructureList.ligand_list.length === 0 onClick={this.getList}
} >
onClick={this.getList}>
Search Search
</Button> </Button>
</Form.Item> </Form.Item>
...@@ -1663,97 +1433,42 @@ export default class TargetDetails extends Component { ...@@ -1663,97 +1433,42 @@ export default class TargetDetails extends Component {
</Collapse> </Collapse>
</div> </div>
</div> </div>
<Table <Table bordered rowKey='item' dataSource={getStructureList.chain} pagination={false} columns={columnsChain} />
bordered
rowKey="item"
dataSource={getStructureList.chain}
pagination={false}
columns={columnsChain}
/>
</TabPane> </TabPane>
) );
})} })}
</Tabs> </Tabs>
</Panel> </Panel>
<Panel header="Mutation" key="3" id="Mutation"> <Panel header='Mutation' key='3' id='Mutation'>
<div className="Radio-div"> <div className='Radio-div'>
<Radio.Group <Radio.Group onChange={this.onChangeRadio} value={this.state.MutationSearch.status}>
onChange={this.onChangeRadio}
value={this.state.MutationSearch.status}>
<Radio value={0}>Full data</Radio> <Radio value={0}>Full data</Radio>
<Radio value={1}>Increase only</Radio> <Radio value={1}>Increase only</Radio>
<Radio value={2}>Decrease only</Radio> <Radio value={2}>Decrease only</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
<Table <Table bordered rowKey='item' dataSource={targetsDetail.MutationList} pagination={false} columns={columnsMutation} onChange={this.onChangeTable} />
bordered <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num} />
rowKey="item"
dataSource={targetsDetail.MutationList}
pagination={false}
columns={columnsMutation}
onChange={this.onChangeTable}
/>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
onChange={this.onChange}
total={total_num}
/>
</Panel> </Panel>
<Panel header="Drug & Clinical imformation" key="4" id="Drug"> <Panel header='Drug & Clinical imformation' key='4' id='Drug'>
<Table <Table bordered rowKey='item' dataSource={targetsDetail.DrugsInformation} pagination={false} expandedRowRender={expandedRowRender} columns={columnsDrug} />
bordered <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange3} onChange={this.onChange3} total={total_num3} />
rowKey="item"
dataSource={targetsDetail.DrugsInformation}
pagination={false}
expandedRowRender={expandedRowRender}
columns={columnsDrug}
/>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange3}
onChange={this.onChange3}
total={total_num3}
/>
</Panel> </Panel>
<Panel header="Bioassay" key="5" id="Bioassay"> <Panel header='Bioassay' key='5' id='Bioassay'>
<Button type="primary" onClick={() => this.setState({ visible3: true })}> <Button type='primary' onClick={() => this.setState({ visible3: true })}>
Structure Filter Structure Filter
</Button> </Button>
<Table <Table bordered rowKey='item' dataSource={targetsDetail.Bioassay} pagination={false} columns={columnsBioassay} />
bordered <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange2} onChange={this.onChange2} total={total_num2} />
rowKey="item"
dataSource={targetsDetail.Bioassay}
pagination={false}
columns={columnsBioassay}
/>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange2}
onChange={this.onChange2}
total={total_num2}
/>
</Panel> </Panel>
<Panel header="Virants & Disease" key="6" id="VirantsDisease"> <Panel header='Virants & Disease' key='6' id='VirantsDisease'>
<Table <Table bordered rowKey='item' dataSource={VirantsDiseaseList} pagination={false} columns={columnsVirantsDisease} expandedRowRender={expandedRowRender2} />
bordered <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange5} onChange={this.onChange5} total={total_num5} />
rowKey="item"
dataSource={VirantsDiseaseList}
pagination={false}
columns={columnsVirantsDisease}
expandedRowRender={expandedRowRender2}
/>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange5}
onChange={this.onChange5}
total={total_num5}
/>
</Panel> </Panel>
</Collapse> </Collapse>
</Spin> </Spin>
</div> </div>
) );
} }
} }
src/routes/Kinase/index.js
...@@ -375,7 +375,6 @@ class Home extends React.Component { ...@@ -375,7 +375,6 @@ class Home extends React.Component {
//首页启动调用接口 先checkToken == localStorage.getItem('token') //首页启动调用接口 先checkToken == localStorage.getItem('token')
getTargetSelectList = () => { getTargetSelectList = () => {
// debugger
localStorage.getItem('token') && localStorage.getItem('token') &&
request request
.get('/kinase/target_class/target') .get('/kinase/target_class/target')
......
src/utils/request.js
...@@ -71,6 +71,7 @@ request.interceptors.request.use((config) => { ...@@ -71,6 +71,7 @@ request.interceptors.request.use((config) => {
checkToken(config); checkToken(config);
} else { } else {
console.log('token为空....'); console.log('token为空....');
localStorage.removeItem('token');
window.open('http://69.235.144.91:3048/#/login', '_self'); window.open('http://69.235.144.91:3048/#/login', '_self');
} }
}); });
......
src/utils/utils.js
...@@ -68,7 +68,6 @@ export function preloadingImages(arr) { ...@@ -68,7 +68,6 @@ export function preloadingImages(arr) {
/** /**
* 获取URL中指定的参数 * 获取URL中指定的参数
*/ */
export function getQueryString(name) { export function getQueryString(name) {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
let r = window.location.hash.split('?')[1] && window.location.hash.split('?')[1].match(reg); //获取url中"?"符后的字符串并正则匹配 let r = window.location.hash.split('?')[1] && window.location.hash.split('?')[1].match(reg); //获取url中"?"符后的字符串并正则匹配
......
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