Skip to content

E
elegantDeepKinase
Commit 3a8b772b by wangshufen
Options

feature:kiniase功能优化修改

parent e08523de
Showing with 765 additions and 828 deletions
src/routes/Home/TargetDetails/index.js
import React, { Component } from 'react' import React, { Component } from 'react';
import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography} from 'antd'; import { Card, Tooltip, Popover, message, Radio, Button, Tabs, Spin, Table, Tag, Input, Collapse, Modal, Form, Select, InputNumber, Typography } from 'antd';
import request from '../../../utils/request' import request from '../../../utils/request';
import Molstar from "molstar-react"; import Molstar from 'molstar-react';
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react';
import qs from 'qs' import qs from 'qs';
import './index.css' import './index.css';
const { Panel } = Collapse; const { Panel } = Collapse;
const { TabPane } = Tabs; const { TabPane } = Tabs;
const { Option } = Select; const { Option } = Select;
const { Title } = Typography; const { Title } = Typography;
export default class TargetDetails extends Component { export default class TargetDetails extends Component {
state = { state = {
name:'', name: '',
Structure:[], Structure: [],
dataOne:qs.parse(this.props.location.search.slice(1)), dataOne: qs.parse(this.props.location.search.slice(1)),
visible:false, visible: false,
pdbId:'6f6s', pdbId: '6f6s',
DetailsData:{ DetailsData: {
PubChemCID:5462310, PubChemCID: 5462310,
MolecularWeight:12.011, MolecularWeight: 12.011,
smiles:'cccc' smiles: 'cccc',
}, },
panelList:{ panelList: {
Bioassay:[] Bioassay: [],
},
statusMutation: 0,
OLDMutationList: [],
}, targetsDetail: {
statusMutation:0, Structure: [],
OLDMutationList:[], Sequence: [],
},
targetsDetail:{ loading: true,
Structure:[], getStructureList: {
Sequence:[] ligand_up_list: [],
}, ligand_list: [],
loading:true, chain: [],
getStructureList:{ References: [],
ligand_up_list:[], },
ligand_list:[], listData: {
chain:[], pdb_code: '',
References:[] ligand: '',
}, resolution: 0,
listData:{ },
pdb_code: '', fileData: {
ligand: '', filestring: '',
resolution: 0 type: 'pdb',
}, },
fileData:{ };
filestring:'', componentDidMount() {
type:'pdb' this.getDetails();
} }
getDetails() {
}; // this.setState({loading:true})
componentDidMount(){ this.setState({ loading: true });
this.getDetails() request
} .post('/targets_detail', this.props.location.search.slice(1))
getDetails(){ .then((res) => {
// this.setState({loading:true}) this.setState({ loading: false });
this.setState({loading:true}) if (res.data.code === 200) {
request.post('/targets_detail', this.props.location.search.slice(1) )
.then(res => {
this.setState({loading:false})
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);
} }
} else {
}else{
message.error(res.data.msg); message.error(res.data.msg);
} }
}) })
.catch(err => { .catch((err) => {
console.error(err); console.error(err);
}) });
}
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})
}
getReferences=(e)=>{
window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`)
} }
onChangeRadio=(e)=>{ getPdid(e) {
let OLDMutationList= this.state.targetsDetail.Mutation console.log(e);
this.setState({ visible: true });
this.setState({ pdbId: e });
}
getTag = (e) => {
console.log(e);
this.setState({ visible: true });
this.setState({ pdbId: e });
};
getReferences = (e) => {
window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`);
};
onChangeRadio = (e) => {
let OLDMutationList = this.state.targetsDetail.Mutation;
this.setState({ this.setState({
OLDMutationList:OLDMutationList OLDMutationList: OLDMutationList,
}) });
let value=e.target.value let value = e.target.value;
this.setState({ this.setState({
statusMutation:value statusMutation: value,
}) });
if (value===0) { if (value === 0) {
OLDMutationList=this.state.targetsDetail.Mutation OLDMutationList = this.state.targetsDetail.Mutation;
this.setState({ this.setState({
OLDMutationList:OLDMutationList OLDMutationList: OLDMutationList,
}) });
}
if (value===1) {
let MutationList1= OLDMutationList.filter((item)=>{
return item.status===1
})
this.setState({
OLDMutationList:MutationList1
})
} }
if (value===2) { if (value === 1) {
let MutationList2= OLDMutationList.filter((item)=>{ let MutationList1 = OLDMutationList.filter((item) => {
return item.status===2 return item.status === 1;
});
})
this.setState({ this.setState({
OLDMutationList:MutationList2 OLDMutationList: MutationList1,
}) });
} }
if (value === 2) {
let MutationList2 = OLDMutationList.filter((item) => {
return item.status === 2;
});
} this.setState({
getDrug=(e)=>{ OLDMutationList: MutationList2,
console.log(e); });
let data={
dataid:e
}
this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})
}
callback(){
} }
childTargetClassChange=()=>{ };
getDrug = (e) => {
console.log(e);
let data = {
dataid: e,
};
this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data) });
};
} callback() {}
getStructure=(e)=>{ childTargetClassChange = () => {};
request.post('/search_pdb_data', qs.stringify({ getStructure = (e) => {
pdb:e request
}) ) .post(
.then(res => { '/search_pdb_data',
this.setState({loading:false}) qs.stringify({
if (res.data.code===200) { pdb: e,
this.setState({getStructureList:res.data.data}) })
let listData=this.state.listData )
listData.pdb_code=res.data.data.name .then((res) => {
this.setState({listData}) this.setState({ loading: false });
if (res.data.code === 200) {
this.setState({ getStructureList: res.data.data });
}else{ let listData = this.state.listData;
listData.pdb_code = res.data.data.name;
this.setState({ listData });
} else {
message.error(res.data.msg); message.error(res.data.msg);
} }
}) })
.catch(err => { .catch((err) => {
console.error(err); console.error(err);
}) });
};
ChangeTabs = (e) => {
let listData = this.state.listData;
listData.ligand = '';
this.setState({
listData: listData,
});
this.getStructure(e);
};
getList = () => {
let fileData = this.state.fileData;
fileData.filestring = '';
this.setState({
fileData: fileData,
});
} // if (this.state.listData.ligand==='') {
ChangeTabs=(e)=>{ // message.warning('输入查询条件');
let listData=this.state.listData // return
listData.ligand='' // }
this.setState({ // if (this.state.getStructureList.resolution>this.state.listData.resolution) {
listData:listData // message.warning('搜索半径不能小于resolution');
}) // return
this.getStructure(e) // }
} request
getList=()=>{ .post('/search_pdb_ligand_resolution', qs.stringify(this.state.listData))
let fileData=this.state.fileData .then((res) => {
fileData.filestring='' let fileData = JSON.parse(JSON.stringify(this.state.fileData));
this.setState({ fileData.filestring = res.data;
fileData:fileData this.setState({
}) fileData: fileData,
});
// if (this.state.listData.ligand==='') {
// message.warning('输入查询条件');
// return
// }
// if (this.state.getStructureList.resolution>this.state.listData.resolution) {
// message.warning('搜索半径不能小于resolution');
// return
// }
request.post('/search_pdb_ligand_resolution', qs.stringify(this.state.listData) )
.then(res => {
let fileData = JSON.parse(JSON.stringify(this.state.fileData) )
fileData.filestring=res.data
this.setState({ this.setState({
fileData:fileData visible: true,
}) });
this.setState({ this.setState({ loading: false });
visible:true
})
this.setState({loading:false})
console.log(this.state.fileData); console.log(this.state.fileData);
})
.catch(err => {
console.error(err);
}) })
.catch((err) => {
} console.error(err);
getResolutionData=(e)=>{ });
console.log(e); };
let listData=this.state.listData getResolutionData = (e) => {
listData.resolution=e console.log(e);
this.setState({ let listData = this.state.listData;
listData listData.resolution = e;
}) this.setState({
} listData,
LigandChange=(e)=>{ });
let listData=this.state.listData };
listData.ligand=e LigandChange = (e) => {
this.setState({ let listData = this.state.listData;
listData listData.ligand = e;
}) this.setState({
} listData,
});
};
render() { render() {
const {visible,panelList,Structure,OLDMutationList, name,pdbId,targetsDetail,getStructureList}=this.state const { visible, panelList, Structure, OLDMutationList, name, pdbId, targetsDetail, getStructureList } = this.state;
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} /> },
),
}, {
title: 'Drug name',
{ dataIndex: 'Drug name',
title: 'Drug name', key: 'Drug name',
dataIndex: 'Drug name', render: (item, record) => (
key: 'Drug name', <Button type='primary' onClick={() => this.getDrug(record.Drug_dataid)}>
render: (item,record) => ( {item}
<Button type="primary" onClick={()=>this.getDrug(record.Drug_dataid)}>{item}</Button> </Button>
), ),
}, },
{ {
title: 'Drug Type', title: 'Drug Type',
dataIndex: 'Drug type', dataIndex: 'Drug type',
key: 'Drug type', key: 'Drug type',
}, },
{ {
title: 'Indication', title: 'Indication',
dataIndex: 'Indication', dataIndex: 'Indication',
key: 'Indication', key: 'Indication',
}, },
{ {
title: 'Mechanism of Action', title: 'Mechanism of Action',
dataIndex: 'Mechanism of Action', dataIndex: 'Mechanism of Action',
key: 'Mechanism of Action', key: 'Mechanism of Action',
...@@ -288,122 +272,132 @@ export default class TargetDetails extends Component { ...@@ -288,122 +272,132 @@ export default class TargetDetails extends Component {
dataIndex: 'Year of Approval', dataIndex: 'Year of Approval',
key: 'Year of Approval', key: 'Year of Approval',
}, },
{ {
title: 'References', title: 'References',
dataIndex: 'References', dataIndex: 'References',
key: 'References', key: 'References',
render: References => ( render: (References) => (
<span> <span>
{References.map(item => { {References.map((item) => {
return ( return (
<Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} > <Tag
{item.toUpperCase()} color='blue'
</Tag> key={item}
); onClick={() => {
})} this.getReferences(item);
</span> }}
), >
}, {item.toUpperCase()}
]; </Tag>
const columnsBioassay = [ );
{ })}
title: 'Structure', </span>
dataIndex: 'smile', ),
key: 'smile', },
render: smile => ( ];
<Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={smile} /> const columnsBioassay = [
), {
}, title: 'Structure',
{ dataIndex: 'smile',
title: 'Compound name', key: 'smile',
dataIndex: 'Compound name', render: (smile) => <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={smile} />,
key: 'Compound name', },
}, {
{ title: 'Compound name',
title: 'Type', dataIndex: 'Compound name',
dataIndex: 'Type', key: 'Compound name',
key: 'Type', },
}, {
{ title: 'Type',
title: 'Action', dataIndex: 'Type',
dataIndex: 'Action', key: 'Type',
key: 'Action', },
}, {
{ title: 'Action',
title: 'Parameter', dataIndex: 'Action',
dataIndex: 'Parameter', key: 'Action',
key: 'Parameter', },
}, {
{ title: 'Parameter',
title: 'Value', dataIndex: 'Parameter',
dataIndex: 'Value', key: 'Parameter',
key: 'Value', },
}, {
{ title: 'Value',
title: 'References', dataIndex: 'Value',
dataIndex: 'References', key: 'Value',
key: 'References', },
render: References => ( {
<span> title: 'References',
{References.map(item => { dataIndex: 'References',
return ( key: 'References',
<Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} > render: (References) => (
{item.toUpperCase()} <span>
</Tag> {References.map((item) => {
); return (
})} <Tag
</span> color='blue'
), key={item}
onClick={() => {
this.getReferences(item);
}, }}
>
]; {item.toUpperCase()}
const formItemLayout ={ </Tag>
labelCol: { span: 8 }, );
wrapperCol: { span: 12 }, })}
} </span>
),
},
];
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 12 },
};
const columnsMutation = [ const columnsMutation = [
{ {
title: 'Generic number', title: 'Generic number',
dataIndex: 'Generic', dataIndex: 'Generic',
key: 'Generic', key: 'Generic',
}, },
{ {
title: 'Position', title: 'Position',
dataIndex: 'Position', dataIndex: 'Position',
key: 'Position', key: 'Position',
}, },
{ {
title: 'Segment', title: 'Segment',
dataIndex: 'Segment', dataIndex: 'Segment',
key: 'Segment', key: 'Segment',
}, },
{ {
title: 'Mutation', title: 'Mutation',
dataIndex: 'Mutation', dataIndex: 'Mutation',
key: 'Mutation', key: 'Mutation',
}, },
{ {
title: 'Ligand', title: 'Ligand',
dataIndex: 'Ligand', dataIndex: 'Ligand',
key: 'Ligand', key: 'Ligand',
render: Ligand => ( render: (Ligand) => (
<Popover content={ <div> <Popover
<Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={Ligand.smile} /> content={
</div>}> <div>
<Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={Ligand.smile} />
{Ligand.name!=''&&(<Button type="primary">{Ligand.name}</Button>)} </div>
</Popover> }
), >
}, {Ligand.name != '' && <Button type='primary'>{Ligand.name}</Button>}
{ </Popover>
title: 'Activity type', ),
dataIndex: 'Activity type', },
key: 'Activity type', {
}, title: 'Activity type',
{ dataIndex: 'Activity type',
key: 'Activity type',
},
{
title: 'Activity value', title: 'Activity value',
dataIndex: 'Activity value', dataIndex: 'Activity value',
key: 'Activity value', key: 'Activity value',
...@@ -413,300 +407,260 @@ export default class TargetDetails extends Component { ...@@ -413,300 +407,260 @@ export default class TargetDetails extends Component {
dataIndex: 'Foldchange', dataIndex: 'Foldchange',
key: 'Foldchange', key: 'Foldchange',
defaultSortOrder: 'descend', defaultSortOrder: 'descend',
sorter: (a, b) => a.Foldchange-b.Foldchange sorter: (a, b) => a.Foldchange - b.Foldchange,
},
},
// {
// { // title: 'Year of approval',
// title: 'Year of approval', // dataIndex: 'Year of approval',
// dataIndex: 'Year of approval', // key: 'Year of approval',
// key: 'Year of approval', // },
// }, {
{ title: 'Reference',
title: 'Reference', dataIndex: 'Reference',
dataIndex: 'Reference', render: (Reference) => (
render: Reference => ( <span>
<span> {Reference.map((item) => {
{Reference.map(item => { return (
return ( <Tag
<Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} > color='blue'
{item.toUpperCase()} key={item}
</Tag> onClick={() => {
); this.getReferences(item);
})} }}
</span> >
), {item.toUpperCase()}
}, </Tag>
]; );
const columnsChain=[ })}
{ </span>
title: 'Chain_name', ),
dataIndex: 'Chain_name', },
key: 'Chain_name', ];
}, const columnsChain = [
{ {
title: 'Chain_ID', title: 'Chain_name',
dataIndex: 'Chain_ID', dataIndex: 'Chain_name',
key: 'Chain_ID', key: 'Chain_name',
}, },
{
{ title: 'Chain_ID',
title: 'code', dataIndex: 'Chain_ID',
dataIndex: 'code', key: 'Chain_ID',
key: 'code', },
},
{ {
title: 'code_type', title: 'code',
dataIndex: 'code_type', dataIndex: 'code',
key: 'code_type', key: 'code',
}, },
{ {
title: 'res_start', title: 'code_type',
dataIndex: 'res_start', dataIndex: 'code_type',
key: 'res_start', key: 'code_type',
}, },
{ {
title: 'res_end', title: 'res_start',
dataIndex: 'res_end', dataIndex: 'res_start',
key: 'res_end', key: 'res_start',
}, },
] {
title: 'res_end',
dataIndex: 'res_end',
key: 'res_end',
},
];
return ( return (
<div className='search-details-div'> <div className='search-details-div'>
<Modal <Modal footer={null} closable={false} width={550} visible={visible} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible: false })}>
footer={null} closable={false} <div className='Molstar-div'>
width={550} <Molstar file={this.state.fileData} />
visible={visible} </div>
wrapClassName="vertical-center-modal" </Modal>
onCancel={() => this.setState({visible: false})}> <Spin tip='Loading...' size='large' spinning={this.state.loading}>
<div className='Molstar-div'> <Card hoverable>
<Molstar file={this.state.fileData} /> <div>
</div> <div className='title-div'>{targetsDetail.name}</div>
</Modal> <div className='title-div-top'>
<Spin tip="Loading..." size='large' spinning={this.state.loading}> <div className='DataList-left'>
<Card hoverable> <div>
<div > <div className='div-list'>
<div className='title-div'> <div className='list-one'>
{targetsDetail.name} <div>Gene name</div>
</div> <div />
<div className='title-div-top'> {targetsDetail['Gene name']}
</div>
<div className='DataList-left'> <div className='list-one'>
<div > <div>Species</div>
<div className='div-list'> <div />
<div className='list-one'> {targetsDetail.Species}
<div>Gene name</div> </div>
<div > <div className='list-one'>
</div> <div>Uniprot id</div>
{targetsDetail['Gene name']} <div />
</div> {targetsDetail['Uniport id']}
<div className='list-one'> </div>
<div>Species</div> <div className='list-one'>
<div > <div>Class</div>
</div> <div />
{targetsDetail.Species} {targetsDetail.Class}
</div> </div>
<div className='list-one'> <div className='list-one'>
<div>Uniprot id</div> <div>Family</div>
<div > <div />
</div> {targetsDetail.Family}
{targetsDetail['Uniport id']} </div>
</div> </div>
<div className='list-one'>
<div>Class</div>
<div >
</div>
{targetsDetail.Class}
</div>
<div className='list-one'>
<div>Family</div>
<div >
</div>
{targetsDetail.Family}
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </Card>
{/* {PanelList} */}
<Collapse defaultActiveKey={['1', '2', '3', '4', '5']} onChange={this.callback}>
<Panel header='Sequence' key='1'>
<div className='Sequence-div'>
{targetsDetail.Sequence.map((item, index) => {
// console.log(item);
// console.log(Object.entries(item));
return (
<div className='Sequenceone-div' key={index}>
{Object.entries(item)[0][0]}
<div className='zimu-div'>
{Object.entries(item)[0][1].map((item2, index2) => {
console.log(item2);
return (
<Tooltip placement='top' key={index2} title={item2.title}>
<div className={'res-color-' + item2.thum}>{item2.thum}</div>
</Tooltip>
);
})}
</div>
</div> </div>
);
</Card> })}
{/* {PanelList} */} </div>
<Collapse defaultActiveKey={['1','2','3','4','5']} onChange={this.callback}> </Panel>
<Panel header="Sequence" key="1"> <Panel header='Structure' key='2'>
<div className='Sequence-div'> <Tabs defaultActiveKey='0' type='card' tabPosition='left' onChange={this.ChangeTabs}>
{targetsDetail.Sequence.map((item,index)=>{ {targetsDetail.Structure.map((item, index) => {
// console.log(item); return (
// console.log(Object.entries(item)); <TabPane tab={item.pdb} key={item.pdb}>
return( <div className='TabPane-center'>
<div className='Sequenceone-div' key={index}> <div className='Molstar-div2'>
{Object.entries(item)[0][0]} <Molstar pdbId={item.pdb} />
<div className='zimu-div'> </div>
{Object.entries(item)[0][1].map((item2,index2)=>{ <div className='Structure-right'>
console.log(item2); <Form layout='horizontal'>
return( <Form.Item label='详情' {...formItemLayout}>
<Tooltip placement="top" key={index2} title={item2.title}> <div>method: {getStructureList.method}</div>
<div className={'res-color-'+item2.thum}> <div>name: {getStructureList.name}</div>
{item2.thum} <div>pdb_datatime: {getStructureList.pdb_datatime}</div>
</div> <div>resolution: {getStructureList.resolution}</div>
</Tooltip> </Form.Item>
<Form.Item label='配体列表' {...formItemLayout}>
) {getStructureList.ligand_up_list &&
})} getStructureList.ligand_up_list.map((item, index) => {
</div> return (
<Popover
</div> content={
) <div>
}) <div style={{ width: '100px', wordWrap: 'break-word', wordBreak: 'normal' }}>{item.comp_name}</div>
}
</div>
</Panel>
<Panel header="Structure" key="2">
<Tabs defaultActiveKey="0" type="card" tabPosition='left' onChange={this.ChangeTabs}>
{
targetsDetail.Structure.map((item,index)=>{
return(
<TabPane tab={(item.pdb)} key={item.pdb}> <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={item.smiles} />
<div className='TabPane-center'> </div>
<div className='Molstar-div2'> }
<Molstar pdbId={item.pdb} /> >
</div> {
<div className='Structure-right'> <Button type='primary' style={{ marginRight: '5px' }}>
<Form layout="horizontal"> {item.name}
<Form.Item label="详情" {...formItemLayout} > </Button>
<div> }
method: {getStructureList.method} </Popover>
</div> );
<div> })}
name: {getStructureList.name} </Form.Item>
</div> <Form.Item label='配体选择' {...formItemLayout}>
<div> <Select style={{ width: 250 }} value={this.state.listData.ligand} size='large' onChange={this.LigandChange}>
pdb_datatime: {getStructureList.pdb_datatime} {getStructureList.ligand_list &&
</div> getStructureList.ligand_list.map((item, index) => {
<div> return (
resolution: {getStructureList.resolution} <Option key={index} value={item}>
</div> {item}
</Form.Item> </Option>
<Form.Item label="配体列表" {...formItemLayout} > );
{ })}
getStructureList.ligand_up_list&& getStructureList.ligand_up_list.map((item,index)=>{ </Select>
return( </Form.Item>
<Popover content={ <div> <Form.Item label='搜索半径' {...formItemLayout}>
<InputNumber
<div style={{width:'100px', wordWrap: 'break-word', wordBreak: 'normal'}}> style={{ width: 250 }}
{item.comp_name} min={getStructureList.resolution}
</div> max={10}
placeholder={'请输入大于resolutiond数字'}
<Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={item.smiles} /> step={0.1}
</div>}> size='large'
onChange={this.getResolutionData}
{(<Button type="primary" style={{marginRight:'5px'}}>{item.name}</Button>)} />
</Popover> </Form.Item>
) <Form.Item label='References ' {...formItemLayout}>
}) {getStructureList.References &&
} getStructureList.References.map((item, index) => {
return (
</Form.Item> <Button
<Form.Item label="配体选择" {...formItemLayout} > type='primary'
<Select style={{ width: 250 }} value={this.state.listData.ligand} size="large" onChange={this.LigandChange}> onClick={() => {
{ this.getReferences(item);
getStructureList.ligand_list&& getStructureList.ligand_list.map( }}
(item,index)=>{ key={index}
return( style={{ marginRight: '5px' }}
<Option key={index} value={item}>{item}</Option> >
) {item}
</Button>
} );
) })}
} </Form.Item>
</Select> <Form.Item label='Search' {...formItemLayout}>
<Button
</Form.Item> type='primary'
<Form.Item label="搜索半径" {...formItemLayout} > style={{ marginLeft: 50, width: 150 }}
<InputNumber style={{ width: 250 }} min={getStructureList.resolution} max={10} placeholder={'请输入大于resolutiond数字'} step={0.1} size="large" onChange={this.getResolutionData} /> size='large'
</Form.Item> loading={this.state.loading}
<Form.Item label="References " {...formItemLayout} > disabled={getStructureList.ligand_list.length === 0}
{ onClick={this.getList}
getStructureList.References&&getStructureList.References.map((item,index)=>{ >
return( Search
(<Button type="primary" onClick={()=>{this.getReferences(item)}} key={index} style={{marginRight:'5px'}}>{item}</Button>) </Button>
</Form.Item>
) </Form>
})
}
</Form.Item>
<Form.Item label="Search" {...formItemLayout} >
<Button type="primary" style={{ marginLeft: 50 ,width: 150 }} size='large' loading={this.state.loading} disabled={getStructureList.ligand_list.length===0} onClick={this.getList}>Search</Button>
</Form.Item>
</Form>
</div>
</div>
<Table
bordered
rowKey='item'
dataSource={getStructureList.chain}
pagination={false}
columns={columnsChain}
/>
</TabPane>
)
})
}
</Tabs>
</Panel>
<Panel header="Mutation" key="3">
<div className='Radio-div'>
<Radio.Group onChange={this.onChangeRadio} value={this.state.statusMutation}>
<Radio value={0}>Full data</Radio>
<Radio value={1}>Increase only</Radio>
<Radio value={2}>Decrease only</Radio>
</Radio.Group>
</div> </div>
</div>
<Table <Table bordered rowKey='item' dataSource={getStructureList.chain} pagination={false} columns={columnsChain} />
bordered </TabPane>
rowKey='item' );
dataSource={OLDMutationList} })}
pagination={false} </Tabs>
columns={columnsMutation} </Panel>
/> <Panel header='Mutation' key='3'>
</Panel> <div className='Radio-div'>
<Panel header="Drug & Clinical information" key="4"> <Radio.Group onChange={this.onChangeRadio} value={this.state.statusMutation}>
<Table <Radio value={0}>Full data</Radio>
bordered <Radio value={1}>Increase only</Radio>
rowKey='item' <Radio value={2}>Decrease only</Radio>
dataSource={targetsDetail['Drugs information']} </Radio.Group>
pagination={false} </div>
columns={columnsDrug}
/>
</Panel>
<Panel header="Bioassay" key="5">
<Table
bordered
rowKey='item'
dataSource={targetsDetail.Bioassay}
pagination={false}
columns={columnsBioassay}
/>
</Panel>
</Collapse>
</Spin>
<Table bordered rowKey='item' dataSource={OLDMutationList} pagination={false} columns={columnsMutation} />
</Panel>
<Panel header='Drug & Clinical information' key='4'>
<Table bordered rowKey='item' dataSource={targetsDetail['Drugs information']} pagination={false} columns={columnsDrug} />
</Panel>
<Panel header='Bioassay' key='5'>
<Table bordered rowKey='item' dataSource={targetsDetail.Bioassay} pagination={false} columns={columnsBioassay} />
</Panel>
</Collapse>
</Spin>
</div> </div>
) );
} }
} }
src/routes/Kinase/SearchDetails/index.js
...@@ -950,11 +950,11 @@ export default class SearchDetails extends Component { ...@@ -950,11 +950,11 @@ export default class SearchDetails extends Component {
<Table bordered rowKey='dataid' dataSource={DetailsData.Indication} pagination={false} columns={columns2} /> <Table bordered rowKey='dataid' dataSource={DetailsData.Indication} pagination={false} columns={columns2} />
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange3} onChange={this.onChange3} total={total_num3} /> <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange3} onChange={this.onChange3} total={total_num3} />
</Panel> </Panel>
<Panel header='Target' key='1' id='Target'> <Panel header='Target' id='Target' key='1'>
<Table bordered rowKey='index' dataSource={DetailsData.Target} pagination={false} columns={columns} /> <Table bordered rowKey='index' dataSource={DetailsData.Target} pagination={false} columns={columns} />
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange2} onChange={this.onChange2} total={total_num} /> <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange2} onChange={this.onChange2} total={total_num} />
</Panel> </Panel>
<Panel header='Biological Propeties' id='BiologicalPropeties' key='5'> <Panel header='Biological Propeties0' id='BiologicalPropeties' key='5'>
<div className='Calcilated'> <div className='Calcilated'>
<div className='div-list'> <div className='div-list'>
<div className='list-one'> <div className='list-one'>
...@@ -996,11 +996,11 @@ export default class SearchDetails extends Component { ...@@ -996,11 +996,11 @@ export default class SearchDetails extends Component {
</div> </div>
</Panel> </Panel>
<Panel header='Bioassay' key='2' id='Bioassay'> <Panel header='Bioassay' id='Bioassay' key='2'>
<Table bordered rowKey='dataid' dataSource={DetailsData.Bioassay} pagination={false} columns={columns3} expandedRowRender={expandedRowRender} /> <Table bordered rowKey='dataid' dataSource={DetailsData.Bioassay} pagination={false} columns={columns3} expandedRowRender={expandedRowRender} />
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num2} /> <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num2} />
</Panel> </Panel>
<Panel header='Calculated Propeties' key='3' id='CalculatedPropeties'> <Panel header='Calculated Propeties' id='CalculatedPropeties' key='3'>
<div> <div>
<div className='Calcilated'> <div className='Calcilated'>
<div className='list-one2'> <div className='list-one2'>
...@@ -1041,7 +1041,7 @@ export default class SearchDetails extends Component { ...@@ -1041,7 +1041,7 @@ export default class SearchDetails extends Component {
</div> </div>
</div> </div>
</Panel> </Panel>
<Panel header='Structure' key='4' id='Structure'> <Panel header='Structure' id='Structure' key='4'>
<Tabs <Tabs
defaultActiveKey='0' defaultActiveKey='0'
// type="card" // type="card"
......
src/routes/Kinase/SearchList/index.js
import React, { Component } from "react"; import React, { Component } from 'react';
import { Jsme } from "jsme-react"; import { Jsme } from 'jsme-react';
import { Card, Button, Pagination, Tabs, Spin, message, Collapse,Tag } from "antd"; import { Card, Button, Pagination, Tabs, Spin, message, Collapse, Tag } from 'antd';
import request from "../../../utils/request"; import request from '../../../utils/request';
import qs from "qs"; import qs from 'qs';
import "./index.css"; import './index.css';
import { withRouter } from 'react-router-dom';
const { TabPane } = Tabs; const { TabPane } = Tabs;
const { Panel } = Collapse; const { Panel } = Collapse;
export default class SearchList extends Component { class SearchList extends Component {
state = { state = {
smilesList: [], smilesList: [],
visible: false, visible: false,
pdbId: "6f6s", pdbId: '6f6s',
total_num: 0, total_num: 0,
smilesData: qs.parse(this.props.location.search.slice(1)), smilesData: qs.parse(this.props.location.search.slice(1)),
loading: true, loading: true,
...@@ -24,12 +25,12 @@ export default class SearchList extends Component { ...@@ -24,12 +25,12 @@ export default class SearchList extends Component {
}; };
this.props.history.push({ this.props.history.push({
pathname: "/Kinase/TargetDetails", pathname: '/Kinase/TargetDetails',
search: qs.stringify(data), search: qs.stringify(data),
}); });
} }
onShowSizeChange = (current, pageSize) => { onShowSizeChange = (current, pageSize) => {
if (this.state.smilesData.name === "Drug") { if (this.state.smilesData.name === 'Drug') {
let smilesData = this.state.smilesData; let smilesData = this.state.smilesData;
smilesData.page = current; smilesData.page = current;
smilesData.page_size = pageSize; smilesData.page_size = pageSize;
...@@ -39,7 +40,7 @@ export default class SearchList extends Component { ...@@ -39,7 +40,7 @@ export default class SearchList extends Component {
this.getList(); this.getList();
return; return;
} }
if (this.state.smilesData.name === "Target") { if (this.state.smilesData.name === 'Target') {
let smilesData = this.state.smilesData; let smilesData = this.state.smilesData;
smilesData.page = current; smilesData.page = current;
smilesData.page_size = pageSize; smilesData.page_size = pageSize;
...@@ -49,7 +50,7 @@ export default class SearchList extends Component { ...@@ -49,7 +50,7 @@ export default class SearchList extends Component {
this.getTargetList(); this.getTargetList();
return; return;
} }
if (this.state.smilesData.name === "Ligand") { if (this.state.smilesData.name === 'Ligand') {
let smilesData = this.state.smilesData; let smilesData = this.state.smilesData;
smilesData.page = current; smilesData.page = current;
smilesData.page_size = pageSize; smilesData.page_size = pageSize;
...@@ -59,7 +60,7 @@ export default class SearchList extends Component { ...@@ -59,7 +60,7 @@ export default class SearchList extends Component {
this.getLigandList(); this.getLigandList();
return; return;
} }
if (this.state.smilesData.name === "Mutation") { if (this.state.smilesData.name === 'Mutation') {
let smilesData = this.state.smilesData; let smilesData = this.state.smilesData;
smilesData.page = current; smilesData.page = current;
smilesData.page_size = pageSize; smilesData.page_size = pageSize;
...@@ -71,7 +72,7 @@ export default class SearchList extends Component { ...@@ -71,7 +72,7 @@ export default class SearchList extends Component {
} }
}; };
onChange = (current, pageSize) => { onChange = (current, pageSize) => {
if (this.state.smilesData.name === "Drug") { if (this.state.smilesData.name === 'Drug') {
let smilesData = this.state.smilesData; let smilesData = this.state.smilesData;
smilesData.page = current; smilesData.page = current;
smilesData.page_size = pageSize; smilesData.page_size = pageSize;
...@@ -82,7 +83,7 @@ export default class SearchList extends Component { ...@@ -82,7 +83,7 @@ export default class SearchList extends Component {
this.getList(); this.getList();
return; return;
} }
if (this.state.smilesData.name === "Target") { if (this.state.smilesData.name === 'Target') {
let smilesData = this.state.smilesData; let smilesData = this.state.smilesData;
smilesData.page = current; smilesData.page = current;
smilesData.page_size = pageSize; smilesData.page_size = pageSize;
...@@ -92,7 +93,7 @@ export default class SearchList extends Component { ...@@ -92,7 +93,7 @@ export default class SearchList extends Component {
this.getTargetList(); this.getTargetList();
return; return;
} }
if (this.state.smilesData.name === "Ligand") { if (this.state.smilesData.name === 'Ligand') {
let smilesData = this.state.smilesData; let smilesData = this.state.smilesData;
smilesData.page = current; smilesData.page = current;
smilesData.page_size = pageSize; smilesData.page_size = pageSize;
...@@ -102,7 +103,7 @@ export default class SearchList extends Component { ...@@ -102,7 +103,7 @@ export default class SearchList extends Component {
this.getLigandList(); this.getLigandList();
return; return;
} }
if (this.state.smilesData.name === "Mutation") { if (this.state.smilesData.name === 'Mutation') {
let smilesData = this.state.smilesData; let smilesData = this.state.smilesData;
smilesData.page = current; smilesData.page = current;
smilesData.page_size = pageSize; smilesData.page_size = pageSize;
...@@ -115,16 +116,16 @@ export default class SearchList extends Component { ...@@ -115,16 +116,16 @@ export default class SearchList extends Component {
}; };
componentDidMount() { componentDidMount() {
console.log(this.state.smilesData); console.log(this.state.smilesData);
if (this.state.smilesData.name === "Drug") { if (this.state.smilesData.name === 'Drug') {
this.getList(); this.getList();
} }
if (this.state.smilesData.name === "Target") { if (this.state.smilesData.name === 'Target') {
this.getTargetList(); this.getTargetList();
} }
if (this.state.smilesData.name === "Ligand") { if (this.state.smilesData.name === 'Ligand') {
this.getLigandList(); this.getLigandList();
} }
if (this.state.smilesData.name === "Mutation") { if (this.state.smilesData.name === 'Mutation') {
this.getMutationList(); this.getMutationList();
} }
} }
...@@ -132,7 +133,7 @@ export default class SearchList extends Component { ...@@ -132,7 +133,7 @@ export default class SearchList extends Component {
console.log(qs.parse(this.props.location.search.slice(1))); console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({ loading: true }); this.setState({ loading: true });
request request
.post("/kinase/drug_search",this.state.smilesData) .post('/kinase/drug_search', this.state.smilesData)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
...@@ -159,7 +160,7 @@ export default class SearchList extends Component { ...@@ -159,7 +160,7 @@ export default class SearchList extends Component {
console.log(qs.parse(this.props.location.search.slice(1))); console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({ loading: true }); this.setState({ loading: true });
request request
.post("/kinase/targets_search", this.state.smilesData) .post('/kinase/targets_search', this.state.smilesData)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
...@@ -180,7 +181,7 @@ export default class SearchList extends Component { ...@@ -180,7 +181,7 @@ export default class SearchList extends Component {
console.log(qs.parse(this.props.location.search.slice(1))); console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({ loading: true }); this.setState({ loading: true });
request request
.post("/kinase/ligand_search", this.state.smilesData) .post('/kinase/ligand_search', this.state.smilesData)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
...@@ -207,7 +208,7 @@ export default class SearchList extends Component { ...@@ -207,7 +208,7 @@ export default class SearchList extends Component {
console.log(qs.parse(this.props.location.search.slice(1))); console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({ loading: true }); this.setState({ loading: true });
request request
.post("/mutation_search", qs.stringify(this.state.smilesData)) .post('/mutation_search', qs.stringify(this.state.smilesData))
.then((res) => { .then((res) => {
console.log(res); console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
...@@ -235,27 +236,27 @@ export default class SearchList extends Component { ...@@ -235,27 +236,27 @@ export default class SearchList extends Component {
datatype, datatype,
}; };
if (this.state.smilesData.name === "Drug") { if (this.state.smilesData.name === 'Drug') {
this.props.history.push({ this.props.history.push({
pathname: "/Kinase/SearchDetails", pathname: '/Kinase/SearchDetails',
search: qs.stringify(data), search: qs.stringify(data),
}); });
} }
if (this.state.smilesData.name === "Target") { if (this.state.smilesData.name === 'Target') {
this.props.history.push({ this.props.history.push({
pathname: "/Kinase/TargetDetails", pathname: '/Kinase/TargetDetails',
search: qs.stringify(data), search: qs.stringify(data),
}); });
} }
if (this.state.smilesData.name === "Ligand") { if (this.state.smilesData.name === 'Ligand') {
this.props.history.push({ this.props.history.push({
pathname: "/Kinase/LigandDetails", pathname: '/Kinase/LigandDetails',
search: qs.stringify(data), search: qs.stringify(data),
}); });
} }
if (this.state.smilesData.name === "Mutation") { if (this.state.smilesData.name === 'Mutation') {
this.props.history.push({ this.props.history.push({
pathname: "/home/MutationDetails", pathname: '/home/MutationDetails',
search: qs.stringify(data), search: qs.stringify(data),
}); });
} }
...@@ -288,149 +289,122 @@ export default class SearchList extends Component { ...@@ -288,149 +289,122 @@ export default class SearchList extends Component {
}; };
render() { render() {
const { const { smilesList, loading, ShowDivDataid, total_num, smilesData, TargetState } = this.state;
smilesList,
loading,
ShowDivDataid,
total_num,
smilesData,
TargetState,
} = this.state;
const listItems = smilesList.map((item, index) => { const listItems = smilesList.map((item, index) => {
return ( return (
<Card <Card loading={loading} hoverable extra={<a onClick={() => this.getOne(item)}>{item.name}</a>} style={{ width: '100%', marginBottom: '20px' }} key={index}>
loading={loading} <div className='list-div-one'>
hoverable <div className={smilesData.name === 'Drug' || smilesData.name === 'Ligand' ? 'list-div-left' : 'isShowDiv'}>
extra={<a onClick={() => this.getOne(item)}>{item.name}</a>} <Jsme height='150px' width='' options='depict,useopenchemlib' smiles={item.smile} />
style={{ width: '100%', marginBottom: '20px' }}
key={index}>
<div className="list-div-one">
<div
className={
smilesData.name === 'Drug' || smilesData.name === 'Ligand'
? 'list-div-left'
: 'isShowDiv'
}>
<Jsme
height="150px"
width=""
options="depict,useopenchemlib"
smiles={item.smile}
/>
</div> </div>
<div className="list-div-right"> <div className='list-div-right'>
{Object.keys(item.info).map((item2, key2, arr) => { {Object.keys(item.info).map((item2, key2, arr) => {
if (typeof item.info[item2] === 'object') { if (typeof item.info[item2] === 'object') {
return ( return (
<div className="left" key={key2}> <div className='left' key={key2}>
{' '} {' '}
<span>{item2}</span>: <span>{item2}</span>:
{item2 === 'Indication' && {item2 === 'Indication' &&
item.info[item2].slice(0, 5).map((item3, index3) => { item.info[item2].slice(0, 5).map((item3, index3) => {
return ( return (
<span <span
type="primary" type='primary'
style={{ style={{
fontWeight: 300, fontWeight: 300,
color: 'black', color: 'black',
}} }}
key={index3}> key={index3}
>
{' '} {' '}
<Tag style={{ marginBottom: '5px' }}>{item3}</Tag> <Tag style={{ marginBottom: '5px' }}>{item3}</Tag>
</span> </span>
) );
})} })}
{item2 === 'Target' && {item2 === 'Target' &&
item.info[item2].slice(0, 5).map((item3, index3) => { item.info[item2].slice(0, 5).map((item3, index3) => {
return ( return (
<Button <Button
className={item.TargetState ? '' : 'isShowDiv'} className={item.TargetState ? '' : 'isShowDiv'}
type="primary" type='primary'
style={{ marginBottom: '5px', marginLeft: '5px' }} style={{ marginBottom: '5px', marginLeft: '5px' }}
key={index3} key={index3}
onClick={() => this.getPdid(item3.dataid)}> onClick={() => this.getPdid(item3.dataid)}
>
{item3.name} {item3.name}
</Button> </Button>
) );
})} })}
{item2 === 'Target' && (
{ <Button
item2 === 'Target' && <Button className={item.info[item2].length > 5 && item.TargetState ? '' : 'isShowDiv'}
className={
item.info[item2].length > 5 && item.TargetState
? ''
: 'isShowDiv'
}
style={{ marginBottom: '5px', marginLeft: '5px' }} style={{ marginBottom: '5px', marginLeft: '5px' }}
onClick={() => this.TargetButton(item, index)}> onClick={() => this.TargetButton(item, index)}
>
查看更多Target 查看更多Target
</Button> </Button>
} )}
{item2 === 'Target' && {item2 === 'Target' &&
item.info[item2].map((item3, index3) => { item.info[item2].map((item3, index3) => {
return ( return (
<Button <Button
type="primary" type='primary'
className={!item.TargetState ? '' : 'isShowDiv'} className={!item.TargetState ? '' : 'isShowDiv'}
style={{ marginBottom: '5px', marginLeft: '5px' }} style={{ marginBottom: '5px', marginLeft: '5px' }}
key={index3} key={index3}
onClick={() => this.getPdid(item3.dataid)}> onClick={() => this.getPdid(item3.dataid)}
>
{item3.name} {item3.name}
</Button> </Button>
) );
})} })}
{item2 === 'Target' && (
{ <Button className={!item.TargetState ? '' : 'isShowDiv'} style={{ marginBottom: '5px', marginLeft: '5px' }} onClick={() => this.TargetButton2(item, index)}>
item2 === 'Target' && <Button
className={!item.TargetState ? '' : 'isShowDiv'}
style={{ marginBottom: '5px', marginLeft: '5px' }}
onClick={() => this.TargetButton2(item, index)}>
收起 收起
</Button> </Button>
} )}
{item2 === 'Synonyms' && {item2 === 'Synonyms' &&
item.info[item2].slice(0, 5).map((item3, index3) => { item.info[item2].slice(0, 5).map((item3, index3) => {
return ( return (
<Tag <Tag
type="primary" type='primary'
style={{ style={{
fontWeight: 300, fontWeight: 300,
color: 'black', color: 'black',
}} }}
key={index3}> key={index3}
>
{' '} {' '}
{item3} {item3}
</Tag> </Tag>
) );
})} })}
{item2 === 'Gene name' && {item2 === 'Gene name' &&
item.info[item2].slice(0, 5).map((item3, index3) => { item.info[item2].slice(0, 5).map((item3, index3) => {
return ( return (
<Tag <Tag
type="primary" type='primary'
style={{ style={{
fontWeight: 300, fontWeight: 300,
color: 'black', color: 'black',
}} }}
key={index3}> key={index3}
>
{' '} {' '}
{item3} {item3}
</Tag> </Tag>
) );
})} })}
<div /> <div />
</div> </div>
) );
} else { } else {
return ( return (
<div className="left" key={key2}> <div className='left' key={key2}>
{' '} {' '}
<span>{item2}</span>:{item.info[item2]} <span>{item2}</span>:{item.info[item2]}
</div> </div>
) );
} }
})} })}
...@@ -440,7 +414,7 @@ export default class SearchList extends Component { ...@@ -440,7 +414,7 @@ export default class SearchList extends Component {
<p><font>DrugBankID：</font>{item.DrugBankID}</p> <p><font>DrugBankID：</font>{item.DrugBankID}</p>
<p><font>ChemblID：</font>{item.ChemblID}</p> */} <p><font>ChemblID：</font>{item.ChemblID}</p> */}
</div> </div>
<div className="btn-list"> <div className='btn-list'>
{item.right_info && {item.right_info &&
Object.entries(item.right_info).map((item2, index2) => { Object.entries(item.right_info).map((item2, index2) => {
if (typeof item2[1] === 'string') { if (typeof item2[1] === 'string') {
...@@ -449,11 +423,11 @@ export default class SearchList extends Component { ...@@ -449,11 +423,11 @@ export default class SearchList extends Component {
// <span>{item2[0]}:</span> // <span>{item2[0]}:</span>
// {item2[1]} // {item2[1]}
// </div> // </div>
<div className="right-div" key={index2}> <div className='right-div' key={index2}>
{' '} {' '}
<span>{item2[0]}</span>:{item2[1]} <span>{item2[0]}</span>:{item2[1]}
</div> </div>
) );
} }
})} })}
</div> </div>
...@@ -461,17 +435,15 @@ export default class SearchList extends Component { ...@@ -461,17 +435,15 @@ export default class SearchList extends Component {
<div /> <div />
</div> </div>
</Card> </Card>
) );
}) });
return ( return (
<div className="search-div"> <div className='search-div'>
<Spin tip="Loading..." size="large" spinning={this.state.loading}> <Spin tip='Loading...' size='large' spinning={this.state.loading}>
<Tabs type="card"> <Tabs type='card'>
<TabPane tab={smilesData.name} key={smilesData.name}> <TabPane tab={smilesData.name} key={smilesData.name}>
<div className="search-content"> <div className='search-content'>Search Content:{smilesData.drugs_data}</div>
Search Content:{smilesData.drugs_data} <div className='search-content'>Search Total:{total_num}条</div>
</div>
<div className="search-content">Search Total:{total_num}条</div>
{/* <Checkbox.Group style={{ width: '100%' }} onChange={this.onChangeGroup}> {/* <Checkbox.Group style={{ width: '100%' }} onChange={this.onChangeGroup}>
<div className='CheckboxList'> <div className='CheckboxList'>
<Checkbox value="pdb">pdb</Checkbox> <Checkbox value="pdb">pdb</Checkbox>
...@@ -480,16 +452,13 @@ export default class SearchList extends Component { ...@@ -480,16 +452,13 @@ export default class SearchList extends Component {
</div> </div>
</Checkbox.Group> */} </Checkbox.Group> */}
{listItems} {listItems}
<Pagination <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num} />
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
onChange={this.onChange}
total={total_num}
/>
</TabPane> </TabPane>
</Tabs> </Tabs>
</Spin> </Spin>
</div> </div>
) );
} }
} }
export default withRouter(SearchList);
src/routes/Kinase/TargetDetails/index.js
...@@ -1232,26 +1232,22 @@ export default class TargetDetails extends Component { ...@@ -1232,26 +1232,22 @@ export default class TargetDetails extends Component {
<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 />
{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>Species00</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 />
{targetsDetail.Uniport_id} {targetsDetail.Uniport_id}
</div> </div>
{/* <div className="list-one"> <div className='list-one'>
<div>Class</div> <div>Class</div>
<div /> {targetsDetail.Class || ''}
{targetsDetail.Class} </div>
</div> */}
</div> </div>
</div> </div>
</div> </div>
......
src/routes/Kinase/index.js
...@@ -3,10 +3,15 @@ import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col } ...@@ -3,10 +3,15 @@ import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col }
import LogoTitlte from '../../components/LogoTitlte/index'; import LogoTitlte from '../../components/LogoTitlte/index';
import { Jsme } from 'jsme-react'; import { Jsme } from 'jsme-react';
import qs from 'qs'; import qs from 'qs';
import { inject, observer } from 'mobx-react';
import request from '../../utils/request'; import request from '../../utils/request';
import { getQueryString } from '../../utils/utils';
import './style.css'; import './style.css';
import { withRouter } from 'react-router-dom';
const { TabPane } = Tabs; const { TabPane } = Tabs;
const { Option } = Select; const { Option } = Select;
@inject('kinaseSearch')
@observer
class Home extends React.Component { class Home extends React.Component {
state = { state = {
select_db: 'Ligands', select_db: 'Ligands',
...@@ -71,6 +76,7 @@ class Home extends React.Component { ...@@ -71,6 +76,7 @@ class Home extends React.Component {
compoundList: ['DrugName', 'Smiles'], compoundList: ['DrugName', 'Smiles'],
targetList: ['TargetName', 'UniprotId'], targetList: ['TargetName', 'UniprotId'],
optionsList: [{ label: '查询drug相关靶点', value: 1 }, { label: '查询ligand相关靶点', value: 2, disabled: false }, { label: '是否有PDB结构', value: 3 }], optionsList: [{ label: '查询drug相关靶点', value: 1 }, { label: '查询ligand相关靶点', value: 2, disabled: false }, { label: '是否有PDB结构', value: 3 }],
activeKey: this.props.kinaseSearch.activeTabKey || 'Drug',
}; };
// Mutation // Mutation
CheckChange = (e) => { CheckChange = (e) => {
...@@ -346,11 +352,18 @@ class Home extends React.Component { ...@@ -346,11 +352,18 @@ class Home extends React.Component {
this.setState(() => ({ searchData: searchData })); this.setState(() => ({ searchData: searchData }));
// this.setState(()=>({data:e })) // this.setState(()=>({data:e }))
}; };
componentDidMount() { componentDidMount() {
console.log('111', this.props.kinaseSearch.searchParams);
if (this.props.kinaseSearch.searchParams.drugs_data) {
this.state.searchData = this.props.kinaseSearch.searchParams;
}
// console.log('222',qs.parse(this.props.location.search.slice(1)),)
// this.getList() // this.getList()
// this.getSelectList() // this.getSelectList()
this.getTargetSelectList(); this.getTargetSelectList();
} }
getSelectList = () => { getSelectList = () => {
request request
.get('/kinase/target_class/drug') .get('/kinase/target_class/drug')
...@@ -373,28 +386,26 @@ class Home extends React.Component { ...@@ -373,28 +386,26 @@ class Home extends React.Component {
}); });
}; };
//首页启动调用接口 先checkToken == localStorage.getItem('token')
getTargetSelectList = () => { getTargetSelectList = () => {
localStorage.getItem('token') && request
request .get('/kinase/target_class/target')
.get('/kinase/target_class/target') .then((res) => {
.then((res) => { console.log(res);
console.log(res); if (res.data.code === 200) {
if (res.data.code === 200) { console.log(res.data.data);
console.log(res.data.data);
this.setState({ this.setState({
TargetClassList: res.data.data, TargetClassList: res.data.data,
TargetAllClassList: res.data.data, TargetAllClassList: res.data.data,
}); });
console.log(this.state); console.log(this.state);
} else { } else {
message.error(res.data.msg); message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err); console.error(err);
}); });
}; };
getValue = (e) => { getValue = (e) => {
const { value } = e.target; const { value } = e.target;
...@@ -465,6 +476,7 @@ class Home extends React.Component { ...@@ -465,6 +476,7 @@ class Home extends React.Component {
}; };
getDrugsList = () => { getDrugsList = () => {
let data = this.state.searchData; let data = this.state.searchData;
this.props.kinaseSearch.addSearchParams(data);
if (data.drugs_data == '') { if (data.drugs_data == '') {
return message.warning('请输入查询条件！'); return message.warning('请输入查询条件！');
} }
...@@ -501,6 +513,8 @@ class Home extends React.Component { ...@@ -501,6 +513,8 @@ class Home extends React.Component {
searchData.name = e; searchData.name = e;
this.setState(() => ({ searchData: searchData })); this.setState(() => ({ searchData: searchData }));
console.log(this.state.searchData); console.log(this.state.searchData);
this.setState({ activeKey: e });
this.props.kinaseSearch.setActiveKey(e);
}; };
getJsme = () => { getJsme = () => {
console.log(1); console.log(1);
...@@ -524,11 +538,11 @@ class Home extends React.Component { ...@@ -524,11 +538,11 @@ class Home extends React.Component {
<div className='home'> <div className='home'>
<div className='home-div'> <div className='home-div'>
{/* <LogoTitlte></LogoTitlte> */} {/* <LogoTitlte></LogoTitlte> */}
<Tabs onChange={this.callback} type='card'> <Tabs onChange={this.callback} activeKey={this.state.activeKey} type='card'>
<TabPane tab='Drug' key='Drug'> <TabPane tab='Drug' key='Drug'>
<div className='top-div'> <div className='top-div'>
<div> <div>
<Form layout='horizontal'> <Form onSubmit={this.getDrugsList} layout='horizontal'>
<Form.Item label='请输入药物名或Smiles' {...formItemLayout}> <Form.Item label='请输入药物名或Smiles' {...formItemLayout}>
<Input placeholder='请输入化合物' style={{ width: 250 }} size='large' onChange={this.getValue} value={this.state.searchData.drugs_data} /> <Input placeholder='请输入化合物' style={{ width: 250 }} size='large' onChange={this.getValue} value={this.state.searchData.drugs_data} />
</Form.Item> </Form.Item>
...@@ -556,7 +570,7 @@ class Home extends React.Component { ...@@ -556,7 +570,7 @@ class Home extends React.Component {
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label='' {...formTailLayout}> <Form.Item label='' {...formTailLayout}>
<Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getDrugsList}> <Button type='primary' style={{ width: 150 }} htmlType='submit' size='large' loading={this.state.loading}>
Search Search
</Button> </Button>
</Form.Item> </Form.Item>
...@@ -679,4 +693,4 @@ class Home extends React.Component { ...@@ -679,4 +693,4 @@ class Home extends React.Component {
} }
} }
export default Home; export default withRouter(Home);
src/store/index.js
import appStore from './appStore' import appStore from './appStore';
// import stepFormStore from '../routes/Entry/FormDemo/store' // import stepFormStore from '../routes/Entry/FormDemo/store'
import kinaseSearch from './kinaseSearch';
const store = { const store = {
appStore, appStore,
// stepFormStore // stepFormStore
} kinaseSearch,
export default store };
\ No newline at end of file export default store;
src/store/kinaseSearch.js 0 → 100644
import { observable, action } from 'mobx';
class KianseSearch {
@observable searchParams = {};
@observable activeKey = '';
@action addSearchParams(data) {
console.log('data', data);
this.searchParams = data;
}
@action setActiveKey = (key) => {
console.log('key----',key)
this.activeTabKey = key;
};
}
export default new KianseSearch();
src/utils/request.js
...@@ -17,36 +17,28 @@ function disableF12() { ...@@ -17,36 +17,28 @@ function disableF12() {
} }
// disableF12(); // disableF12();
//对axios二次封装 // 封装同步Ajax请求
function checkAjaxToken() {
const token = getQueryString('token') || localStorage.getItem('token');
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://69.235.144.91:8048/yszh-login/auth/checkToken', false);
xhr.setRequestHeader('accessToken', token);
xhr.send(null);
console.log(xhr); //准备状态
if (xhr.status == 200 && JSON.parse(xhr.responseText).code == 200) {
// 获取响应结果
// console.log(xhr.responseText);
token && localStorage.setItem('token', token);
return true;
} else {
console.log('状态码：' + xhr.status + ',原因:' + xhr.responseText);
return false;
}
}
checkAjaxToken();
const token = getQueryString('token') || localStorage.getItem('token'); const token = getQueryString('token') || localStorage.getItem('token');
function checkFetchToken() {
fetch('http://69.235.144.91:8048/yszh-login/auth/checkToken', {
method: 'GET',
headers: {
accessToken: token,
},
})
.then((res) => res.json())
.then((res) => {
console.log('fetch--res', res);
if (res.code === 200) {
//校验通过,存储token
token && localStorage.setItem('token', token);
} else {
alert('token校验失败,返回登录页');
// window.open('http://localhost:3000/#/login', '_self');
// window.open('http://69.235.144.91:3048/#/login', '_self');
window.open('http://ysplatform.atelligence-ai.com/#/login', '_self');
}
})
.catch(function(err) {
console.log('err', err);
// window.open('http://69.235.144.91:3048/#/login', '_self');
window.open('http://ysplatform.atelligence-ai.com/#/login', '_self');
});
}
checkFetchToken();
const baseURL = 'http://52.83.169.190:8002/'; //线上正式环境 const baseURL = 'http://52.83.169.190:8002/'; //线上正式环境
// const baseURL = 'http://69.235.144.91:8002/'; 测试环境 // const baseURL = 'http://69.235.144.91:8002/'; 测试环境
...@@ -62,15 +54,11 @@ const request = axios.create({ ...@@ -62,15 +54,11 @@ const request = axios.create({
//拦截器 //拦截器
request.interceptors.request.use((config) => { request.interceptors.request.use((config) => {
// alert('拦截器..'); console.log('config',config);
console.log('token---', '拦截器方法校验token'); if (checkAjaxToken()) {
console.log(config);
if (localStorage.getItem('token')) {
config.headers['accessToken'] = localStorage.getItem('token');
return config; return config;
} else { } else {
console.log('token为空....'); console.log('token为空....');
// window.open('http://69.235.144.91:3048/#/login', '_self');
window.open('http://ysplatform.atelligence-ai.com/#/login', '_self'); window.open('http://ysplatform.atelligence-ai.com/#/login', '_self');
} }
}); });
......
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