Skip to content

E
elegantDeepKinase
Commit 3a8b772b by wangshufen
Options

feature:kiniase功能优化修改

parent e08523de
Showing with 468 additions and 531 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,
statusMutation:0, OLDMutationList: [],
OLDMutationList:[],
targetsDetail: {
targetsDetail:{ Structure: [],
Structure:[], Sequence: [],
Sequence:[] },
}, loading: true,
loading:true, getStructureList: {
getStructureList:{ ligand_up_list: [],
ligand_up_list:[], ligand_list: [],
ligand_list:[], chain: [],
chain:[], References: [],
References:[] },
}, listData: {
listData:{
pdb_code: '', pdb_code: '',
ligand: '', ligand: '',
resolution: 0 resolution: 0,
},
fileData: {
filestring: '',
type: 'pdb',
}, },
fileData:{
filestring:'',
type:'pdb'
}
}; };
componentDidMount(){ componentDidMount() {
this.getDetails() this.getDetails();
} }
getDetails(){ getDetails() {
// this.setState({loading:true}) // this.setState({loading:true})
this.setState({loading:true}) this.setState({ loading: true });
request.post('/targets_detail', this.props.location.search.slice(1) ) request
.then(res => { .post('/targets_detail', this.props.location.search.slice(1))
this.setState({loading:false}) .then((res) => {
if (res.data.code===200) { 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})
let StructureList=res.data.data.Structure
if (StructureList.length>0) {
this.getStructure(StructureList[0].pdb)
this.setState({ loading: false });
let StructureList = res.data.data.Structure;
if (StructureList.length > 0) {
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){ getPdid(e) {
console.log(e); console.log(e);
this.setState({visible: true}) this.setState({ visible: true });
this.setState({pdbId: e}) this.setState({ pdbId: e });
} }
getTag=(e)=>{ getTag = (e) => {
console.log(e); console.log(e);
this.setState({visible: true}) this.setState({ visible: true });
this.setState({pdbId: e}) this.setState({ pdbId: e });
} };
getReferences=(e)=>{ getReferences = (e) => {
window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`) window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`);
} };
onChangeRadio=(e)=>{ onChangeRadio = (e) => {
let OLDMutationList= this.state.targetsDetail.Mutation 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) { if (value === 1) {
let MutationList1= OLDMutationList.filter((item)=>{ let MutationList1 = OLDMutationList.filter((item) => {
return item.status===1 return item.status === 1;
}) });
this.setState({ this.setState({
OLDMutationList:MutationList1 OLDMutationList: MutationList1,
}) });
} }
if (value===2) { if (value === 2) {
let MutationList2= OLDMutationList.filter((item)=>{ let MutationList2 = OLDMutationList.filter((item) => {
return item.status===2 return item.status === 2;
});
})
this.setState({ this.setState({
OLDMutationList:MutationList2 OLDMutationList: MutationList2,
}) });
} }
};
} getDrug = (e) => {
getDrug=(e)=>{
console.log(e); console.log(e);
let data={ let data = {
dataid:e dataid: e,
} };
this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)}) this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data) });
} };
callback(){
}
childTargetClassChange=()=>{
}
getStructure=(e)=>{
request.post('/search_pdb_data', qs.stringify({
pdb:e
}) )
.then(res => {
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
this.setState({listData})
}else{ callback() {}
childTargetClassChange = () => {};
getStructure = (e) => {
request
.post(
'/search_pdb_data',
qs.stringify({
pdb: e,
})
)
.then((res) => {
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;
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) => {
ChangeTabs=(e)=>{ let listData = this.state.listData;
let listData=this.state.listData listData.ligand = '';
listData.ligand=''
this.setState({ this.setState({
listData:listData listData: listData,
}) });
this.getStructure(e) this.getStructure(e);
} };
getList=()=>{ getList = () => {
let fileData=this.state.fileData let fileData = this.state.fileData;
fileData.filestring='' fileData.filestring = '';
this.setState({ this.setState({
fileData:fileData fileData: fileData,
}) });
// if (this.state.listData.ligand==='') { // if (this.state.listData.ligand==='') {
// message.warning('输入查询条件'); // message.warning('输入查询条件');
...@@ -196,61 +182,59 @@ export default class TargetDetails extends Component { ...@@ -196,61 +182,59 @@ export default class TargetDetails extends Component {
// message.warning('搜索半径不能小于resolution'); // message.warning('搜索半径不能小于resolution');
// return // return
// } // }
request.post('/search_pdb_ligand_resolution', qs.stringify(this.state.listData) ) request
.then(res => { .post('/search_pdb_ligand_resolution', qs.stringify(this.state.listData))
.then((res) => {
let fileData = JSON.parse(JSON.stringify(this.state.fileData) ) let fileData = JSON.parse(JSON.stringify(this.state.fileData));
fileData.filestring=res.data fileData.filestring = res.data;
this.setState({ this.setState({
fileData:fileData fileData: fileData,
}) });
this.setState({ this.setState({
visible:true visible: true,
}) });
this.setState({loading:false}) this.setState({ loading: false });
console.log(this.state.fileData); console.log(this.state.fileData);
}) })
.catch(err => { .catch((err) => {
console.error(err); console.error(err);
}) });
};
} getResolutionData = (e) => {
getResolutionData=(e)=>{
console.log(e); console.log(e);
let listData=this.state.listData let listData = this.state.listData;
listData.resolution=e listData.resolution = e;
this.setState({ this.setState({
listData listData,
}) });
} };
LigandChange=(e)=>{ LigandChange = (e) => {
let listData=this.state.listData let listData = this.state.listData;
listData.ligand=e listData.ligand = e;
this.setState({ this.setState({
listData listData,
}) });
} };
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', title: 'Drug name',
dataIndex: 'Drug name', dataIndex: 'Drug name',
key: 'Drug name', key: 'Drug name',
render: (item,record) => ( render: (item, record) => (
<Button type="primary" onClick={()=>this.getDrug(record.Drug_dataid)}>{item}</Button> <Button type='primary' onClick={() => this.getDrug(record.Drug_dataid)}>
{item}
</Button>
), ),
}, },
{ {
...@@ -292,11 +276,17 @@ export default class TargetDetails extends Component { ...@@ -292,11 +276,17 @@ export default class TargetDetails extends Component {
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
color='blue'
key={item}
onClick={() => {
this.getReferences(item);
}}
>
{item.toUpperCase()} {item.toUpperCase()}
</Tag> </Tag>
); );
...@@ -310,9 +300,7 @@ export default class TargetDetails extends Component { ...@@ -310,9 +300,7 @@ export default class TargetDetails extends Component {
title: 'Structure', title: 'Structure',
dataIndex: 'smile', dataIndex: 'smile',
key: 'smile', key: 'smile',
render: smile => ( render: (smile) => <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={smile} />,
<Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={smile} />
),
}, },
{ {
title: 'Compound name', title: 'Compound name',
...@@ -343,26 +331,29 @@ export default class TargetDetails extends Component { ...@@ -343,26 +331,29 @@ export default class TargetDetails extends Component {
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
color='blue'
key={item}
onClick={() => {
this.getReferences(item);
}}
>
{item.toUpperCase()} {item.toUpperCase()}
</Tag> </Tag>
); );
})} })}
</span> </span>
), ),
}, },
]; ];
const formItemLayout ={ const formItemLayout = {
labelCol: { span: 8 }, labelCol: { span: 8 },
wrapperCol: { span: 12 }, wrapperCol: { span: 12 },
} };
const columnsMutation = [ const columnsMutation = [
{ {
...@@ -389,12 +380,15 @@ export default class TargetDetails extends Component { ...@@ -389,12 +380,15 @@ export default class TargetDetails extends Component {
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>
}
>
{Ligand.name != '' && <Button type='primary'>{Ligand.name}</Button>}
</Popover> </Popover>
), ),
}, },
...@@ -413,8 +407,7 @@ export default class TargetDetails extends Component { ...@@ -413,8 +407,7 @@ 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,
}, },
// { // {
...@@ -425,11 +418,17 @@ export default class TargetDetails extends Component { ...@@ -425,11 +418,17 @@ export default class TargetDetails extends Component {
{ {
title: 'Reference', title: 'Reference',
dataIndex: 'Reference', dataIndex: 'Reference',
render: Reference => ( render: (Reference) => (
<span> <span>
{Reference.map(item => { {Reference.map((item) => {
return ( return (
<Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} > <Tag
color='blue'
key={item}
onClick={() => {
this.getReferences(item);
}}
>
{item.toUpperCase()} {item.toUpperCase()}
</Tag> </Tag>
); );
...@@ -438,7 +437,7 @@ export default class TargetDetails extends Component { ...@@ -438,7 +437,7 @@ export default class TargetDetails extends Component {
), ),
}, },
]; ];
const columnsChain=[ const columnsChain = [
{ {
title: 'Chain_name', title: 'Chain_name',
dataIndex: 'Chain_name', dataIndex: 'Chain_name',
...@@ -470,204 +469,179 @@ export default class TargetDetails extends Component { ...@@ -470,204 +469,179 @@ export default class TargetDetails extends Component {
dataIndex: 'res_end', dataIndex: 'res_end',
key: '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}
width={550}
visible={visible}
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({visible: false})}>
<div className='Molstar-div'> <div className='Molstar-div'>
<Molstar file={this.state.fileData} /> <Molstar file={this.state.fileData} />
</div> </div>
</Modal> </Modal>
<Spin tip="Loading..." size='large' spinning={this.state.loading}> <Spin tip='Loading...' size='large' spinning={this.state.loading}>
<Card hoverable> <Card hoverable>
<div > <div>
<div className='title-div'> <div className='title-div'>{targetsDetail.name}</div>
{targetsDetail.name}
</div>
<div className='title-div-top'> <div className='title-div-top'>
<div className='DataList-left'> <div className='DataList-left'>
<div > <div>
<div className='div-list'> <div className='div-list'>
<div className='list-one'> <div className='list-one'>
<div>Gene name</div> <div>Gene name</div>
<div > <div />
</div>
{targetsDetail['Gene name']} {targetsDetail['Gene name']}
</div> </div>
<div className='list-one'> <div className='list-one'>
<div>Species</div> <div>Species</div>
<div > <div />
</div>
{targetsDetail.Species} {targetsDetail.Species}
</div> </div>
<div className='list-one'> <div className='list-one'>
<div>Uniprot id</div> <div>Uniprot id</div>
<div > <div />
</div>
{targetsDetail['Uniport id']} {targetsDetail['Uniport id']}
</div> </div>
<div className='list-one'> <div className='list-one'>
<div>Class</div> <div>Class</div>
<div > <div />
</div>
{targetsDetail.Class} {targetsDetail.Class}
</div> </div>
<div className='list-one'> <div className='list-one'>
<div>Family</div> <div>Family</div>
<div > <div />
</div>
{targetsDetail.Family} {targetsDetail.Family}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</Card> </Card>
{/* {PanelList} */} {/* {PanelList} */}
<Collapse defaultActiveKey={['1','2','3','4','5']} onChange={this.callback}> <Collapse defaultActiveKey={['1', '2', '3', '4', '5']} onChange={this.callback}>
<Panel header="Sequence" key="1"> <Panel header='Sequence' key='1'>
<div className='Sequence-div'> <div className='Sequence-div'>
{targetsDetail.Sequence.map((item,index)=>{ {targetsDetail.Sequence.map((item, index) => {
// console.log(item); // console.log(item);
// console.log(Object.entries(item)); // console.log(Object.entries(item));
return( return (
<div className='Sequenceone-div' key={index}> <div className='Sequenceone-div' key={index}>
{Object.entries(item)[0][0]} {Object.entries(item)[0][0]}
<div className='zimu-div'> <div className='zimu-div'>
{Object.entries(item)[0][1].map((item2,index2)=>{ {Object.entries(item)[0][1].map((item2, index2) => {
console.log(item2); console.log(item2);
return( return (
<Tooltip placement="top" key={index2} title={item2.title}> <Tooltip placement='top' key={index2} title={item2.title}>
<div className={'res-color-'+item2.thum}> <div className={'res-color-' + item2.thum}>{item2.thum}</div>
{item2.thum}
</div>
</Tooltip> </Tooltip>
);
)
})} })}
</div> </div>
</div> </div>
) );
}) })}
}
</div> </div>
</Panel> </Panel>
<Panel header="Structure" key="2"> <Panel header='Structure' key='2'>
<Tabs defaultActiveKey="0" type="card" tabPosition='left' onChange={this.ChangeTabs}> <Tabs defaultActiveKey='0' type='card' tabPosition='left' onChange={this.ChangeTabs}>
{ {targetsDetail.Structure.map((item, index) => {
targetsDetail.Structure.map((item,index)=>{ return (
return( <TabPane tab={item.pdb} key={item.pdb}>
<TabPane tab={(item.pdb)} key={item.pdb}>
<div className='TabPane-center'> <div className='TabPane-center'>
<div className='Molstar-div2'> <div className='Molstar-div2'>
<Molstar pdbId={item.pdb} /> <Molstar pdbId={item.pdb} />
</div> </div>
<div className='Structure-right'> <div className='Structure-right'>
<Form layout="horizontal"> <Form layout='horizontal'>
<Form.Item label="详情" {...formItemLayout} > <Form.Item label='详情' {...formItemLayout}>
<div> <div>method: {getStructureList.method}</div>
method: {getStructureList.method} <div>name: {getStructureList.name}</div>
</div> <div>pdb_datatime: {getStructureList.pdb_datatime}</div>
<div> <div>resolution: {getStructureList.resolution}</div>
name: {getStructureList.name}
</div>
<div>
pdb_datatime: {getStructureList.pdb_datatime}
</div>
<div>
resolution: {getStructureList.resolution}
</div>
</Form.Item> </Form.Item>
<Form.Item label="配体列表" {...formItemLayout} > <Form.Item label='配体列表' {...formItemLayout}>
{ {getStructureList.ligand_up_list &&
getStructureList.ligand_up_list&& getStructureList.ligand_up_list.map((item,index)=>{ getStructureList.ligand_up_list.map((item, index) => {
return( return (
<Popover content={ <div> <Popover
content={
<div>
<div style={{ width: '100px', wordWrap: 'break-word', wordBreak: 'normal' }}>{item.comp_name}</div>
<div style={{width:'100px', wordWrap: 'break-word', wordBreak: 'normal'}}> <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={item.smiles} />
{item.comp_name}
</div> </div>
<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}>
{ {
getStructureList.ligand_list&& getStructureList.ligand_list.map( <Button type='primary' style={{ marginRight: '5px' }}>
(item,index)=>{ {item.name}
return( </Button>
<Option key={index} value={item}>{item}</Option>
)
}
)
} }
</Popover>
);
})}
</Form.Item>
<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>
);
})}
</Select> </Select>
</Form.Item> </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" onChange={this.getResolutionData} /> <InputNumber
style={{ width: 250 }}
min={getStructureList.resolution}
max={10}
placeholder={'请输入大于resolutiond数字'}
step={0.1}
size='large'
onChange={this.getResolutionData}
/>
</Form.Item> </Form.Item>
<Form.Item label="References " {...formItemLayout} > <Form.Item label='References ' {...formItemLayout}>
{ {getStructureList.References &&
getStructureList.References&&getStructureList.References.map((item,index)=>{ getStructureList.References.map((item, index) => {
return( return (
(<Button type="primary" onClick={()=>{this.getReferences(item)}} key={index} style={{marginRight:'5px'}}>{item}</Button>) <Button
type='primary'
) onClick={() => {
}) this.getReferences(item);
} }}
key={index}
style={{ marginRight: '5px' }}
>
{item}
</Button>
);
})}
</Form.Item> </Form.Item>
<Form.Item label="Search" {...formItemLayout} > <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> <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.Item>
</Form> </Form>
</div> </div>
</div> </div>
<Table <Table bordered rowKey='item' dataSource={getStructureList.chain} pagination={false} columns={columnsChain} />
bordered
rowKey='item'
dataSource={getStructureList.chain}
pagination={false}
columns={columnsChain}
/>
</TabPane> </TabPane>
);
) })}
})
}
</Tabs> </Tabs>
</Panel> </Panel>
<Panel header="Mutation" key="3"> <Panel header='Mutation' key='3'>
<div className='Radio-div'> <div className='Radio-div'>
<Radio.Group onChange={this.onChangeRadio} value={this.state.statusMutation}> <Radio.Group onChange={this.onChangeRadio} value={this.state.statusMutation}>
<Radio value={0}>Full data</Radio> <Radio value={0}>Full data</Radio>
...@@ -676,37 +650,17 @@ export default class TargetDetails extends Component { ...@@ -676,37 +650,17 @@ export default class TargetDetails extends Component {
</Radio.Group> </Radio.Group>
</div> </div>
<Table <Table bordered rowKey='item' dataSource={OLDMutationList} pagination={false} columns={columnsMutation} />
bordered
rowKey='item'
dataSource={OLDMutationList}
pagination={false}
columns={columnsMutation}
/>
</Panel> </Panel>
<Panel header="Drug & Clinical information" key="4"> <Panel header='Drug & Clinical information' key='4'>
<Table <Table bordered rowKey='item' dataSource={targetsDetail['Drugs information']} pagination={false} columns={columnsDrug} />
bordered
rowKey='item'
dataSource={targetsDetail['Drugs information']}
pagination={false}
columns={columnsDrug}
/>
</Panel> </Panel>
<Panel header="Bioassay" key="5"> <Panel header='Bioassay' key='5'>
<Table <Table bordered rowKey='item' dataSource={targetsDetail.Bioassay} pagination={false} columns={columnsBioassay} />
bordered
rowKey='item'
dataSource={targetsDetail.Bioassay}
pagination={false}
columns={columnsBioassay}
/>
</Panel> </Panel>
</Collapse> </Collapse>
</Spin> </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,9 +386,7 @@ class Home extends React.Component { ...@@ -373,9 +386,7 @@ 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) => {
...@@ -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请求
const token = getQueryString('token') || localStorage.getItem('token'); function checkAjaxToken() {
const token = getQueryString('token') || localStorage.getItem('token');
function checkFetchToken() { let xhr = new XMLHttpRequest();
fetch('http://69.235.144.91:8048/yszh-login/auth/checkToken', { xhr.open('GET', 'http://69.235.144.91:8048/yszh-login/auth/checkToken', false);
method: 'GET', xhr.setRequestHeader('accessToken', token);
headers: { xhr.send(null);
accessToken: token, console.log(xhr); //准备状态
}, if (xhr.status == 200 && JSON.parse(xhr.responseText).code == 200) {
}) // 获取响应结果
.then((res) => res.json()) // console.log(xhr.responseText);
.then((res) => {
console.log('fetch--res', res);
if (res.code === 200) {
//校验通过,存储token
token && localStorage.setItem('token', token); token && localStorage.setItem('token', token);
return true;
} else { } else {
alert('token校验失败,返回登录页'); console.log('状态码：' + xhr.status + ',原因:' + xhr.responseText);
// window.open('http://localhost:3000/#/login', '_self'); return false;
// 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(); checkAjaxToken();
const token = getQueryString('token') || localStorage.getItem('token');
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