Skip to content

E
elegantDeepKinase
Commit da33d10f by wangshufen
Options

feature:搜索优化功能修改

parent 3a8b772b
Showing with 408 additions and 350 deletions
.vscode/settings.json deleted 100644 → 0
{
"liveServer.settings.port": 5501
}
\ No newline at end of file
README.md
项目启动:
1.yarn
2.yarn start
src/routes/Kinase/SearchDetails/index.js
...@@ -118,6 +118,7 @@ export default class SearchDetails extends Component { ...@@ -118,6 +118,7 @@ export default class SearchDetails extends Component {
total_num3: 0, total_num3: 0,
aciveKey: '', aciveKey: '',
directoryState: false, directoryState: false,
defaultActiveKeyArr: [],
}; };
componentDidMount() { componentDidMount() {
this.getDetails(); this.getDetails();
...@@ -959,37 +960,30 @@ export default class SearchDetails extends Component { ...@@ -959,37 +960,30 @@ export default class SearchDetails extends Component {
<div className='div-list'> <div className='div-list'>
<div className='list-one'> <div className='list-one'>
<div>Absorption:</div> <div>Absorption:</div>
<div />
{Biological_propeties.absorption} {Biological_propeties.absorption}
</div> </div>
<div className='list-one'> <div className='list-one'>
<div>Clearance:</div> <div>Clearance:</div>
<div />
{Biological_propeties.clearance} {Biological_propeties.clearance}
</div> </div>
<div className='list-one'> <div className='list-one'>
<div>Distribution: </div> <div>Distribution: </div>
<div />
{Biological_propeties.distribution} {Biological_propeties.distribution}
</div> </div>
<div className='list-one'> <div className='list-one'>
<div>Elimination:</div> <div>Elimination:</div>
<div />
{Biological_propeties.elimination} {Biological_propeties.elimination}
</div> </div>
<div className='list-one'> <div className='list-one'>
<div>Half Life: </div> <div>Half Life: </div>
<div />
{Biological_propeties.half_life} {Biological_propeties.half_life}
</div> </div>
<div className='list-one'> <div className='list-one'>
<div>metabolism: </div> <div>metabolism: </div>
<div />
{Biological_propeties.metabolism} {Biological_propeties.metabolism}
</div> </div>
<div className='list-one'> <div className='list-one'>
<div>Toxicity: </div> <div>Toxicity: </div>
<div />
{Biological_propeties.toxicity} {Biological_propeties.toxicity}
</div> </div>
</div> </div>
...@@ -1005,200 +999,197 @@ export default class SearchDetails extends Component { ...@@ -1005,200 +999,197 @@ export default class SearchDetails extends Component {
<div className='Calcilated'> <div className='Calcilated'>
<div className='list-one2'> <div className='list-one2'>
<div>Molecular weight:</div> <div>Molecular weight:</div>
<div />
{Calculated_propeties.Molecular_weight} {Calculated_propeties.Molecular_weight}
</div> </div>
<div className='list-one2'> <div className='list-one2'>
<div>LogP:</div> <div>LogP:</div>
<div />
{Calculated_propeties.logP} {Calculated_propeties.logP}
</div> </div>
<div className='list-one2'> <div className='list-one2'>
<div>Hydrogen bond donor: </div> <div>Hydrogen bond donor: </div>
<div />
{Calculated_propeties.Hydrogen_bond_donor} {Calculated_propeties.Hydrogen_bond_donor}
</div> </div>
<div className='list-one2'> <div className='list-one2'>
<div>Hydrogen bond acceptor:</div> <div>Hydrogen bond acceptor:</div>
<div />
{Calculated_propeties.Hydrogen_bond_acceptor} {Calculated_propeties.Hydrogen_bond_acceptor}
</div> </div>
<div className='list-one2'> <div className='list-one2'>
<div>Rotatable bond: </div> <div>Rotatable bond: </div>
<div />
{Calculated_propeties.Rotatable_bond} {Calculated_propeties.Rotatable_bond}
</div> </div>
<div className='list-one2'> <div className='list-one2'>
<div>sp3 Carbon: </div> <div>sp3 Carbon: </div>
<div />
{Calculated_propeties.sp3_Carbon} {Calculated_propeties.sp3_Carbon}
</div> </div>
<div className='list-one2'> <div className='list-one2'>
<div>tPSA: </div> <div>tPSA: </div>
<div />
{Calculated_propeties.tPSA} {Calculated_propeties.tPSA}
</div> </div>
</div> </div>
</div> </div>
</Panel> </Panel>
<Panel header='Structure' id='Structure' key='4'> <Panel header='Structure' id='Structure' key='4'>
<Tabs {DetailsData.Structure.length ? (
defaultActiveKey='0' <Tabs
// type="card" defaultActiveKey='0'
style={{ height: 1000 }} // type="card"
tabPosition='left' style={{ height: 1000 }}
onChange={this.ChangeTabs} tabPosition='left'
> onChange={this.ChangeTabs}
{DetailsData.Structure.map((item, index) => { >
return ( {DetailsData.Structure.map((item, index) => {
<TabPane id={item.pdb} tab={item.pdb} key={item.pdb}> return (
<div className='TabPane-center'> <TabPane id={item.pdb} tab={item.pdb} key={item.pdb}>
<div className='Molstar-div2'>{this.state.aciveKey == item.pdb && <WrappedIframe pdbLink={this.state.pdbLink} />}</div> <div className='TabPane-center'>
<div className='Structure-right'> <div className='Molstar-div2'>{this.state.aciveKey == item.pdb && <WrappedIframe pdbLink={this.state.pdbLink} />}</div>
<Form layout='horizontal'> <div className='Structure-right'>
<Form.Item label='详情' {...formItemLayout}> <Form layout='horizontal'>
<div>method: {getStructureList.method}</div> <Form.Item label='详情' {...formItemLayout}>
<div>name: {getStructureList.name}</div> <div>method: {getStructureList.method}</div>
<div>pdb_datatime: {getStructureList.pdb_datatime}</div> <div>name: {getStructureList.name}</div>
<div>resolution: {getStructureList.resolution}</div> <div>pdb_datatime: {getStructureList.pdb_datatime}</div>
</Form.Item> <div>resolution: {getStructureList.resolution}</div>
<Form.Item label='References ' {...formItemLayout}> </Form.Item>
{getStructureList.References && <Form.Item label='References ' {...formItemLayout}>
getStructureList.References.map((item, index) => { {getStructureList.References &&
return ( getStructureList.References.map((item, index) => {
<Button return (
type='primary' <Button
onClick={() => { type='primary'
this.getReferences(item); onClick={() => {
}} this.getReferences(item);
key={index} }}
style={{ marginRight: '5px' }} key={index}
> style={{ marginRight: '5px' }}
{item} >
</Button> {item}
); </Button>
})} );
</Form.Item> })}
</Form> </Form.Item>
<Collapse accordion> </Form>
<Panel header='对齐' key='1'> <Collapse accordion>
<div className='form-div'> <Panel header='对齐' key='1'>
<Form onSubmit={this.handleSubmit} className='login-form'> <div className='form-div'>
<Form.Item label='Ref.PDB' {...formItemLayout2}> <Form onSubmit={this.handleSubmit} className='login-form'>
<div> <Form.Item label='Ref.PDB' {...formItemLayout2}>
<Select style={{ width: '100px' }} value={this.state.superpositionData[0].pdbID} onChange={this.SelectValue}> <div>
{DetailsData.Structure.map((item, index) => { <Select style={{ width: '100px' }} value={this.state.superpositionData[0].pdbID} onChange={this.SelectValue}>
{DetailsData.Structure.map((item, index) => {
return (
<Option key={index.pdb} value={item.pdb.toLowerCase()}>
{item.pdb.toLowerCase()}
</Option>
);
})}
</Select>
<Input
placeholder='请输入Chain'
onChange={this.getValue}
value={this.state.superpositionData[0].chainID}
style={{
width: '100px',
}}
/>
</div>
</Form.Item>
{formItems}
<Form.Item {...formItemLayoutWithOutLabel}>
{sum < 2 && (
<Button type='dashed' onClick={this.add} style={{ width: '60%' }}>
<Icon type='plus' /> Add field
</Button>
)}
</Form.Item>
<Form.Item {...formItemLayoutWithOutLabel}>
<Button type='primary' htmlType='submit'>
对齐
</Button>
</Form.Item>
</Form>
</div>
</Panel>
<Panel header='抽取配体' key='2'>
<Form layout='horizontal'>
<Form.Item label='配体列表' {...formItemLayout}>
{getStructureList.ligand_up_list &&
getStructureList.ligand_up_list.map((item, index) => {
return (
<Popover
content={
<div>
<div
key={index}
style={{
width: '100px',
wordWrap: 'break-word',
wordBreak: 'normal',
}}
>
{item.comp_name}
</div>
<Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={item.smiles} />
</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((item, index) => {
return ( return (
<Option key={index.pdb} value={item.pdb.toLowerCase()}> <Option key={index} value={item}>
{item.pdb.toLowerCase()} {item}
</Option> </Option>
); );
})} })}
</Select> </Select>
<Input
placeholder='请输入Chain'
onChange={this.getValue}
value={this.state.superpositionData[0].chainID}
style={{
width: '100px',
}}
/>
</div>
</Form.Item> </Form.Item>
{formItems} <Form.Item label='搜索半径' {...formItemLayout}>
<Form.Item {...formItemLayoutWithOutLabel}> <InputNumber
{sum < 2 && ( style={{ width: 250 }}
<Button type='dashed' onClick={this.add} style={{ width: '60%' }}> min={getStructureList.resolution}
<Icon type='plus' /> Add field max={10}
</Button> placeholder={'请输入大于resolutiond数字'}
)} step={0.1}
size='large'
onChange={this.getResolutionData}
/>
</Form.Item> </Form.Item>
<Form.Item {...formItemLayoutWithOutLabel}> <Form.Item label='Search' {...formItemLayout}>
<Button type='primary' htmlType='submit'> <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>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </Panel>
</Panel> </Collapse>
<Panel header='抽取配体' key='2'> </div>
<Form layout='horizontal'>
<Form.Item label='配体列表' {...formItemLayout}>
{getStructureList.ligand_up_list &&
getStructureList.ligand_up_list.map((item, index) => {
return (
<Popover
content={
<div>
<div
key={index}
style={{
width: '100px',
wordWrap: 'break-word',
wordBreak: 'normal',
}}
>
{item.comp_name}
</div>
<Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={item.smiles} />
</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((item, index) => {
return (
<Option key={index} value={item}>
{item}
</Option>
);
})}
</Select>
</Form.Item>
<Form.Item label='搜索半径' {...formItemLayout}>
<InputNumber
style={{ width: 250 }}
min={getStructureList.resolution}
max={10}
placeholder={'请输入大于resolutiond数字'}
step={0.1}
size='large'
onChange={this.getResolutionData}
/>
</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>
</Panel>
</Collapse>
</div> </div>
</div> <Table bordered rowKey='item' dataSource={getStructureList.chain} pagination={false} columns={columnsChain} />
<Table bordered rowKey='item' dataSource={getStructureList.chain} pagination={false} columns={columnsChain} /> </TabPane>
</TabPane> );
); })}
})} </Tabs>
</Tabs> ) : (
<div style={{ textAlign: 'center' }}>暂无数据</div>
)}
</Panel> </Panel>
</Collapse> </Collapse>
</Spin> </Spin>
......
src/routes/Kinase/TargetDetails/index.js
...@@ -40,6 +40,7 @@ export default class TargetDetails extends Component { ...@@ -40,6 +40,7 @@ export default class TargetDetails extends Component {
DrugsInformation: [], DrugsInformation: [],
Gene_name: [], Gene_name: [],
}, },
bioassayFiltersArr: [],
loading: true, loading: true,
getStructureList: { getStructureList: {
ligand_up_list: [], ligand_up_list: [],
...@@ -118,6 +119,8 @@ export default class TargetDetails extends Component { ...@@ -118,6 +119,8 @@ export default class TargetDetails extends Component {
aciveKey: '', aciveKey: '',
directoryState: false, directoryState: false,
visible3: false, visible3: false,
filteredInfo: null,
sortedInfo: null,
}; };
componentDidMount() { componentDidMount() {
this.getDetails(); this.getDetails();
...@@ -225,6 +228,23 @@ export default class TargetDetails extends Component { ...@@ -225,6 +228,23 @@ export default class TargetDetails extends Component {
console.log(res); console.log(res);
let targetsDetail = this.state.targetsDetail; let targetsDetail = this.state.targetsDetail;
targetsDetail.Bioassay = res.data.data; targetsDetail.Bioassay = res.data.data;
let bioassayFiltersArr = this.state.bioassayfiltersArr;
let tempArr = [];
console.log('targetsDetail.Bioassay: ========', targetsDetail.Bioassay);
res.data.data &&
res.data.data.length > 0 &&
res.data.data.forEach((item) => {
tempArr.push({
text: item['Standard Type'],
value: item['Standard Type'],
});
});
bioassayFiltersArr = [...new Set(tempArr.map((item) => JSON.stringify(item)))].map((i) => JSON.parse(i));
console.log('bioassayFilterArr====', bioassayFiltersArr);
this.setState({
bioassayFiltersArr,
});
// BioassayFilterArr.forEach
this.setState({ total_num2: res.data.total_num }); this.setState({ total_num2: res.data.total_num });
this.setState({ this.setState({
targetsDetail: targetsDetail, targetsDetail: targetsDetail,
...@@ -679,7 +699,13 @@ export default class TargetDetails extends Component { ...@@ -679,7 +699,13 @@ export default class TargetDetails extends Component {
BioassaySearch: BioassaySearch, BioassaySearch: BioassaySearch,
}); });
}; };
handleChange = (pagination, filters, sorter) => {
console.log('Various parameters----', pagination, filters, sorter);
this.setState({
filteredInfo: filters,
sortedInfo: sorter,
});
};
render() { render() {
const { const {
visible, visible,
...@@ -907,6 +933,9 @@ export default class TargetDetails extends Component { ...@@ -907,6 +933,9 @@ export default class TargetDetails extends Component {
title: 'Standard Type', title: 'Standard Type',
dataIndex: 'Standard Type', dataIndex: 'Standard Type',
key: 'Standard Type', key: 'Standard Type',
filters: this.state.bioassayFiltersArr,
onFilter: (value, record) => record['Standard Type'].includes(value),
sortDirections: ['descend'],
}, },
{ {
title: 'Standard Relation', title: 'Standard Relation',
...@@ -917,6 +946,8 @@ export default class TargetDetails extends Component { ...@@ -917,6 +946,8 @@ export default class TargetDetails extends Component {
title: 'Standard Value', title: 'Standard Value',
dataIndex: 'Standard Value', dataIndex: 'Standard Value',
key: 'Standard Value', key: 'Standard Value',
defaultSortOrder: 'descend',
sorter: (a, b) => a['Standard Value'] - b['Standard Value'],
}, },
{ {
title: 'Standard Units', title: 'Standard Units',
...@@ -1287,157 +1318,161 @@ export default class TargetDetails extends Component { ...@@ -1287,157 +1318,161 @@ export default class TargetDetails extends Component {
</div> </div>
</Panel> </Panel>
<Panel header='Structure' key='2' id='Structure'> <Panel header='Structure' key='2' id='Structure'>
<Tabs defaultActiveKey='0' tabPosition='left' style={{ height: 1000 }} onChange={this.ChangeTabs}> {targetsDetail.Structure.length > 0 ? (
{targetsDetail.Structure.map((item, index) => { <Tabs defaultActiveKey='0' tabPosition='left' style={{ height: 1000 }} onChange={this.ChangeTabs}>
return ( {targetsDetail.Structure.map((item, index) => {
<TabPane tab={item.pdb} key={item.pdb} id={item.pdb}> return (
<div className='TabPane-center'> <TabPane tab={item.pdb} key={item.pdb} id={item.pdb}>
<div className='Molstar-div2'>{this.state.aciveKey == item.pdb && <WrappedIframe pdbLink={this.state.pdbLink} />}</div> <div className='TabPane-center'>
<div className='Structure-right'> <div className='Molstar-div2'>{this.state.aciveKey == item.pdb && <WrappedIframe pdbLink={this.state.pdbLink} />}</div>
<Form layout='horizontal'> <div className='Structure-right'>
<Form.Item label='详情' {...formItemLayout}> <Form layout='horizontal'>
<div>method: {getStructureList.method}</div> <Form.Item label='详情' {...formItemLayout}>
<div>name: {getStructureList.name}</div> <div>method: {getStructureList.method}</div>
<div>pdb_datatime: {getStructureList.pdb_datatime}</div> <div>name: {getStructureList.name}</div>
<div>resolution: {getStructureList.resolution}</div> <div>pdb_datatime: {getStructureList.pdb_datatime}</div>
</Form.Item> <div>resolution: {getStructureList.resolution}</div>
<Form.Item label='References ' {...formItemLayout}> </Form.Item>
{getStructureList.References && <Form.Item label='References ' {...formItemLayout}>
getStructureList.References.map((item, index) => { {getStructureList.References &&
return ( getStructureList.References.map((item, index) => {
<Button return (
type='primary' <Button
onClick={() => { type='primary'
this.getReferences2(item); onClick={() => {
}} this.getReferences2(item);
key={index} }}
style={{ marginRight: '5px' }} key={index}
> style={{ marginRight: '5px' }}
{item} >
</Button> {item}
); </Button>
})} );
</Form.Item> })}
</Form> </Form.Item>
<Collapse accordion> </Form>
<Panel header='对齐' key='1'> <Collapse accordion>
<div className='form-div'> <Panel header='对齐' key='1'>
<Form onSubmit={this.handleSubmit2} className='login-form'> <div className='form-div'>
<Form.Item label='Ref.PDB' {...formItemLayout2}> <Form onSubmit={this.handleSubmit2} className='login-form'>
<div> <Form.Item label='Ref.PDB' {...formItemLayout2}>
<Select style={{ width: '100px' }} value={this.state.superpositionData[0].pdbID} onChange={this.SelectValue}> <div>
{targetsDetail.Structure.map((item, index) => { <Select style={{ width: '100px' }} value={this.state.superpositionData[0].pdbID} onChange={this.SelectValue}>
{targetsDetail.Structure.map((item, index) => {
return (
<Option key={index} value={item.pdb.toLowerCase()}>
{item.pdb && item.pdb.toLowerCase()}
</Option>
);
})}
</Select>
<Input
placeholder='请输入Chain'
onChange={this.getValue}
value={this.state.superpositionData[0].chainID}
style={{
width: '100px',
}}
/>
</div>
</Form.Item>
{formItems2}
<Form.Item {...formItemLayoutWithOutLabel}>
{sum < 2 && (
<Button type='dashed' onClick={this.add2} style={{ width: '60%' }}>
<Icon type='plus' /> Add field
</Button>
)}
</Form.Item>
<Form.Item {...formItemLayoutWithOutLabel}>
<Button type='primary' htmlType='submit'>
对齐
</Button>
</Form.Item>
</Form>
</div>
</Panel>
<Panel header='抽取配体' key='2'>
<Form layout='horizontal'>
<Form.Item label='配体列表' {...formItemLayout}>
{getStructureList.ligand_up_list &&
getStructureList.ligand_up_list.map((item, index) => {
return (
<Popover
content={
<div>
<div
key={index}
style={{
width: '100px',
wordWrap: 'break-word',
wordBreak: 'normal',
}}
>
{item.comp_name}
</div>
<Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={item.smiles} />
</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((item, index) => {
return ( return (
<Option key={index} value={item.pdb.toLowerCase()}> <Option key={index} value={item}>
{item.pdb && item.pdb.toLowerCase()} {item}
</Option> </Option>
); );
})} })}
</Select> </Select>
<Input
placeholder='请输入Chain'
onChange={this.getValue}
value={this.state.superpositionData[0].chainID}
style={{
width: '100px',
}}
/>
</div>
</Form.Item> </Form.Item>
{formItems2} <Form.Item label='搜索半径' {...formItemLayout}>
<Form.Item {...formItemLayoutWithOutLabel}> <InputNumber
{sum < 2 && ( style={{ width: 250 }}
<Button type='dashed' onClick={this.add2} style={{ width: '60%' }}> min={getStructureList.resolution}
<Icon type='plus' /> Add field max={10}
</Button> placeholder={'请输入大于resolutiond数字'}
)} step={0.1}
size='large'
onChange={this.getResolutionData}
/>
</Form.Item> </Form.Item>
<Form.Item {...formItemLayoutWithOutLabel}> <Form.Item label='Search' {...formItemLayout}>
<Button type='primary' htmlType='submit'> <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>
</Form.Item> </Form.Item>
</Form> </Form>
</div> </Panel>
</Panel> </Collapse>
<Panel header='抽取配体' key='2'> </div>
<Form layout='horizontal'>
<Form.Item label='配体列表' {...formItemLayout}>
{getStructureList.ligand_up_list &&
getStructureList.ligand_up_list.map((item, index) => {
return (
<Popover
content={
<div>
<div
key={index}
style={{
width: '100px',
wordWrap: 'break-word',
wordBreak: 'normal',
}}
>
{item.comp_name}
</div>
<Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={item.smiles} />
</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((item, index) => {
return (
<Option key={index} value={item}>
{item}
</Option>
);
})}
</Select>
</Form.Item>
<Form.Item label='搜索半径' {...formItemLayout}>
<InputNumber
style={{ width: 250 }}
min={getStructureList.resolution}
max={10}
placeholder={'请输入大于resolutiond数字'}
step={0.1}
size='large'
onChange={this.getResolutionData}
/>
</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>
</Panel>
</Collapse>
</div> </div>
</div> <Table bordered rowKey='item' dataSource={getStructureList.chain} pagination={false} columns={columnsChain} />
<Table bordered rowKey='item' dataSource={getStructureList.chain} pagination={false} columns={columnsChain} /> </TabPane>
</TabPane> );
); })}
})} </Tabs>
</Tabs> ) : (
<div style={{ textAlign: 'center' }}>暂无数据</div>
)}
</Panel> </Panel>
<Panel header='Mutation' key='3' id='Mutation'> <Panel header='Mutation' key='3' id='Mutation'>
<div className='Radio-div'> <div className='Radio-div'>
...@@ -1459,7 +1494,7 @@ export default class TargetDetails extends Component { ...@@ -1459,7 +1494,7 @@ export default class TargetDetails extends Component {
<Button type='primary' onClick={() => this.setState({ visible3: true })}> <Button type='primary' onClick={() => this.setState({ visible3: true })}>
Structure Filter Structure Filter
</Button> </Button>
<Table bordered rowKey='item' dataSource={targetsDetail.Bioassay} pagination={false} columns={columnsBioassay} /> <Table bordered rowKey='item' dataSource={targetsDetail.Bioassay} pagination={false} columns={columnsBioassay} onChange={this.handleChange} />
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange2} onChange={this.onChange2} total={total_num2} /> <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange2} onChange={this.onChange2} total={total_num2} />
</Panel> </Panel>
<Panel header='Virants & Disease' key='6' id='VirantsDisease'> <Panel header='Virants & Disease' key='6' id='VirantsDisease'>
......
src/routes/Kinase/index.js
...@@ -76,7 +76,7 @@ class Home extends React.Component { ...@@ -76,7 +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', activeKinaseTabKey: this.props.kinaseSearch.activeTabKey || 'Drug',
}; };
// Mutation // Mutation
CheckChange = (e) => { CheckChange = (e) => {
...@@ -154,8 +154,10 @@ class Home extends React.Component { ...@@ -154,8 +154,10 @@ class Home extends React.Component {
IndicationSearchData.indication = value; IndicationSearchData.indication = value;
this.setState(() => ({ IndicationSearchData: IndicationSearchData })); this.setState(() => ({ IndicationSearchData: IndicationSearchData }));
}; };
//Indication Tab搜索
getIndicationList = () => { getIndicationList = () => {
let data = this.state.IndicationSearchData; let data = this.state.IndicationSearchData;
this.props.kinaseSearch.addIndicationSearchParams(data);
if (data.indication == '') { if (data.indication == '') {
return message.warning('请输入查询条件！'); return message.warning('请输入查询条件！');
} }
...@@ -189,8 +191,10 @@ class Home extends React.Component { ...@@ -189,8 +191,10 @@ class Home extends React.Component {
this.setState(() => ({ ligandSearchData: ligandSearchData })); this.setState(() => ({ ligandSearchData: ligandSearchData }));
// this.setState(()=>({data:e })) // this.setState(()=>({data:e }))
}; };
//Ligand Tab搜索
getLigendList = () => { getLigendList = () => {
let data = this.state.ligandSearchData; let data = this.state.ligandSearchData;
this.props.kinaseSearch.addLigandSearchParams(data);
if (data.ligand_data == '') { if (data.ligand_data == '') {
return message.warning('请输入查询条件！'); return message.warning('请输入查询条件！');
} }
...@@ -287,8 +291,13 @@ class Home extends React.Component { ...@@ -287,8 +291,13 @@ class Home extends React.Component {
TargetSearchData.drug_name = value; TargetSearchData.drug_name = value;
this.setState(() => ({ TargetSearchData: TargetSearchData })); this.setState(() => ({ TargetSearchData: TargetSearchData }));
}; };
//Target Tab搜索
getTargetList = () => { getTargetList = () => {
let data = this.state.TargetSearchData; let data = this.state.TargetSearchData;
console.log('data:------ ', data);
this.props.kinaseSearch.addTargetSearchParams(data);
if (data.target_class == '' && data.target_data == '') { if (data.target_class == '' && data.target_data == '') {
return message.warning('请输入查询条件！'); return message.warning('请输入查询条件！');
} }
...@@ -354,11 +363,19 @@ class Home extends React.Component { ...@@ -354,11 +363,19 @@ class Home extends React.Component {
}; };
componentDidMount() { componentDidMount() {
console.log('111', this.props.kinaseSearch.searchParams); console.log('111', this.props.kinaseSearch.ligandSearchParams);
if (this.props.kinaseSearch.searchParams.drugs_data) { if (this.props.kinaseSearch.drugSearchParams.drugs_data) {
this.state.searchData = this.props.kinaseSearch.searchParams; this.state.searchData = this.props.kinaseSearch.drugSearchParams;
}
if (this.props.kinaseSearch.targetSearchParams.target_data) {
this.state.TargetSearchData = this.props.kinaseSearch.targetSearchParams;
}
if (this.props.kinaseSearch.ligandSearchParams.ligand_data) {
this.state.ligandSearchData = this.props.kinaseSearch.ligandSearchParams;
}
if (this.props.kinaseSearch.indicationSearchParams.indication) {
this.state.IndicationSearchData = this.props.kinaseSearch.indicationSearchParams;
} }
// console.log('222',qs.parse(this.props.location.search.slice(1)),)
// this.getList() // this.getList()
// this.getSelectList() // this.getSelectList()
this.getTargetSelectList(); this.getTargetSelectList();
...@@ -474,9 +491,10 @@ class Home extends React.Component { ...@@ -474,9 +491,10 @@ class Home extends React.Component {
console.error(err); console.error(err);
}); });
}; };
//Drug Tab搜索
getDrugsList = () => { getDrugsList = () => {
let data = this.state.searchData; let data = this.state.searchData;
this.props.kinaseSearch.addSearchParams(data); this.props.kinaseSearch.addDrugSearchParams(data);
if (data.drugs_data == '') { if (data.drugs_data == '') {
return message.warning('请输入查询条件！'); return message.warning('请输入查询条件！');
} }
...@@ -513,8 +531,8 @@ class Home extends React.Component { ...@@ -513,8 +531,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.setState({ activeKinaseTabKey: e });
this.props.kinaseSearch.setActiveKey(e); this.props.kinaseSearch.setActiveKinaseTabKey(e);
}; };
getJsme = () => { getJsme = () => {
console.log(1); console.log(1);
...@@ -538,7 +556,7 @@ class Home extends React.Component { ...@@ -538,7 +556,7 @@ 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} activeKey={this.state.activeKey} type='card'> <Tabs onChange={this.callback} activeKey={this.state.activeKinaseTabKey} type='card'>
<TabPane tab='Drug' key='Drug'> <TabPane tab='Drug' key='Drug'>
<div className='top-div'> <div className='top-div'>
<div> <div>
...@@ -648,7 +666,7 @@ class Home extends React.Component { ...@@ -648,7 +666,7 @@ class Home extends React.Component {
<div> <div>
<Form layout='horizontal'> <Form layout='horizontal'>
<Form.Item label='输入Chemblid或Smiles' {...formItemLayout}> <Form.Item label='输入Chemblid或Smiles' {...formItemLayout}>
<Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getLigendValue} value={this.state.ligandSearchData.ligand_data} /> <Input placeholder='请输入3' style={{ width: 250 }} size='large' onChange={this.getLigendValue} value={this.state.ligandSearchData.ligand_data} />
</Form.Item> </Form.Item>
<Form.Item label='' {...formTailLayout}> <Form.Item label='' {...formTailLayout}>
<Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}> <Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}>
......
src/store/kinaseSearch.js
import { observable, action } from 'mobx'; import { observable, action } from 'mobx';
class KianseSearch { class KianseSearch {
@observable searchParams = {}; @observable drugSearchParams = {}; //kinase drug 搜索参数
@observable activeKey = ''; @observable targetSearchParams = {}; //kinase target 搜索参数
@action addSearchParams(data) { @observable ligandSearchParams = {}; //kinase ligand 搜索参数
console.log('data', data); @observable indicationSearchParams = {}; //kinase indication 搜索参数
this.searchParams = data; @observable activeKinaseTabKey = ''; //记录选中的tab
@action addDrugSearchParams(data) {
this.drugSearchParams = data;
}
@action addTargetSearchParams(data) {
this.targetSearchParams = data;
}
@action addLigandSearchParams(data) {
this.ligandSearchParams = data;
} }
@action setActiveKey = (key) => { @action addIndicationSearchParams(data) {
console.log('key----',key) this.indicationSearchParams = data;
}
@action setActiveKinaseTabKey = (key) => {
console.log('key----', key);
this.activeTabKey = key; this.activeTabKey = key;
}; };
} }
......
src/utils/request.js
...@@ -17,10 +17,26 @@ function disableF12() { ...@@ -17,10 +17,26 @@ function disableF12() {
} }
// disableF12(); // disableF12();
const baseURL = 'http://52.83.169.190:8002/'; //线上正式环境
// const baseURL = 'http://69.235.144.91:8002/'; 测试环境
const request = axios.create({
baseURL,
timeout: 15000,
headers: {
// 'Content-Type': 'application/json',
// 部分接口需要formdate格式的数据 'Content-Type': 'application/x-www-form-urlencoded' qs.stringify(data)
accessToken: getQueryString('token') || localStorage.getItem('token'),
},
});
// 封装同步Ajax请求 // 封装同步Ajax请求
function checkAjaxToken() { function checkAjaxToken() {
const token = getQueryString('token') || localStorage.getItem('token'); const token = getQueryString('token') || localStorage.getItem('token');
let xhr = new XMLHttpRequest(); let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://69.235.144.91:8048/yszh-login/auth/checkToken', false); xhr.open('GET', 'http://69.235.144.91:8048/yszh-login/auth/checkToken', false);
xhr.setRequestHeader('accessToken', token); xhr.setRequestHeader('accessToken', token);
xhr.send(null); xhr.send(null);
...@@ -35,33 +51,18 @@ function checkAjaxToken() { ...@@ -35,33 +51,18 @@ function checkAjaxToken() {
return false; return false;
} }
} }
checkAjaxToken(); // checkAjaxToken();
const token = getQueryString('token') || localStorage.getItem('token');
const baseURL = 'http://52.83.169.190:8002/'; //线上正式环境
// const baseURL = 'http://69.235.144.91:8002/'; 测试环境
const request = axios.create({
baseURL,
timeout: 15000,
headers: {
// 'Content-Type': 'application/json',
// 部分接口需要formdate格式的数据 'Content-Type': 'application/x-www-form-urlencoded' qs.stringify(data)
accessToken: token,
},
});
//拦截器 //拦截器
request.interceptors.request.use((config) => { // request.interceptors.request.use((config) => {
console.log('config',config); // console.log('config',config);
if (checkAjaxToken()) { // if (checkAjaxToken()) {
return config; // return config;
} else { // } else {
console.log('token为空....'); // console.log('token校验失败...');
window.open('http://ysplatform.atelligence-ai.com/#/login', '_self'); // window.open('http://ysplatform.atelligence-ai.com/#/login', '_self');
} // }
}); // });
request.interceptors.response.use( request.interceptors.response.use(
(res) => { (res) => {
......
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