Skip to content

E
elegantDeepKinase
Commit a05cccab by wangshufen
Options

fixed:修改路由控制

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