Skip to content

E
elegantDeepKinase
Commit da33d10f by wangshufen
Options

feature:搜索优化功能修改

parent 3a8b772b
Showing with 120 additions and 62 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 {
total_num3: 0,
aciveKey: '',
directoryState: false,
defaultActiveKeyArr: [],
};
componentDidMount() {
this.getDetails();
......@@ -959,37 +960,30 @@ export default class SearchDetails extends Component {
<div className='div-list'>
<div className='list-one'>
<div>Absorption:</div>
<div />
{Biological_propeties.absorption}
</div>
<div className='list-one'>
<div>Clearance:</div>
<div />
{Biological_propeties.clearance}
</div>
<div className='list-one'>
<div>Distribution: </div>
<div />
{Biological_propeties.distribution}
</div>
<div className='list-one'>
<div>Elimination:</div>
<div />
{Biological_propeties.elimination}
</div>
<div className='list-one'>
<div>Half Life: </div>
<div />
{Biological_propeties.half_life}
</div>
<div className='list-one'>
<div>metabolism: </div>
<div />
{Biological_propeties.metabolism}
</div>
<div className='list-one'>
<div>Toxicity: </div>
<div />
{Biological_propeties.toxicity}
</div>
</div>
......@@ -1005,43 +999,37 @@ export default class SearchDetails extends Component {
<div className='Calcilated'>
<div className='list-one2'>
<div>Molecular weight:</div>
<div />
{Calculated_propeties.Molecular_weight}
</div>
<div className='list-one2'>
<div>LogP:</div>
<div />
{Calculated_propeties.logP}
</div>
<div className='list-one2'>
<div>Hydrogen bond donor: </div>
<div />
{Calculated_propeties.Hydrogen_bond_donor}
</div>
<div className='list-one2'>
<div>Hydrogen bond acceptor:</div>
<div />
{Calculated_propeties.Hydrogen_bond_acceptor}
</div>
<div className='list-one2'>
<div>Rotatable bond: </div>
<div />
{Calculated_propeties.Rotatable_bond}
</div>
<div className='list-one2'>
<div>sp3 Carbon: </div>
<div />
{Calculated_propeties.sp3_Carbon}
</div>
<div className='list-one2'>
<div>tPSA: </div>
<div />
{Calculated_propeties.tPSA}
</div>
</div>
</div>
</Panel>
<Panel header='Structure' id='Structure' key='4'>
{DetailsData.Structure.length ? (
<Tabs
defaultActiveKey='0'
// type="card"
......@@ -1199,6 +1187,9 @@ export default class SearchDetails extends Component {
);
})}
</Tabs>
) : (
<div style={{ textAlign: 'center' }}>暂无数据</div>
)}
</Panel>
</Collapse>
</Spin>
......
src/routes/Kinase/TargetDetails/index.js
......@@ -40,6 +40,7 @@ export default class TargetDetails extends Component {
DrugsInformation: [],
Gene_name: [],
},
bioassayFiltersArr: [],
loading: true,
getStructureList: {
ligand_up_list: [],
......@@ -118,6 +119,8 @@ export default class TargetDetails extends Component {
aciveKey: '',
directoryState: false,
visible3: false,
filteredInfo: null,
sortedInfo: null,
};
componentDidMount() {
this.getDetails();
......@@ -225,6 +228,23 @@ export default class TargetDetails extends Component {
console.log(res);
let targetsDetail = this.state.targetsDetail;
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({
targetsDetail: targetsDetail,
......@@ -679,7 +699,13 @@ export default class TargetDetails extends Component {
BioassaySearch: BioassaySearch,
});
};
handleChange = (pagination, filters, sorter) => {
console.log('Various parameters----', pagination, filters, sorter);
this.setState({
filteredInfo: filters,
sortedInfo: sorter,
});
};
render() {
const {
visible,
......@@ -907,6 +933,9 @@ export default class TargetDetails extends Component {
title: 'Standard Type',
dataIndex: 'Standard Type',
key: 'Standard Type',
filters: this.state.bioassayFiltersArr,
onFilter: (value, record) => record['Standard Type'].includes(value),
sortDirections: ['descend'],
},
{
title: 'Standard Relation',
......@@ -917,6 +946,8 @@ export default class TargetDetails extends Component {
title: 'Standard Value',
dataIndex: 'Standard Value',
key: 'Standard Value',
defaultSortOrder: 'descend',
sorter: (a, b) => a['Standard Value'] - b['Standard Value'],
},
{
title: 'Standard Units',
......@@ -1287,6 +1318,7 @@ export default class TargetDetails extends Component {
</div>
</Panel>
<Panel header='Structure' key='2' id='Structure'>
{targetsDetail.Structure.length > 0 ? (
<Tabs defaultActiveKey='0' tabPosition='left' style={{ height: 1000 }} onChange={this.ChangeTabs}>
{targetsDetail.Structure.map((item, index) => {
return (
......@@ -1438,6 +1470,9 @@ export default class TargetDetails extends Component {
);
})}
</Tabs>
) : (
<div style={{ textAlign: 'center' }}>暂无数据</div>
)}
</Panel>
<Panel header='Mutation' key='3' id='Mutation'>
<div className='Radio-div'>
......@@ -1459,7 +1494,7 @@ export default class TargetDetails extends Component {
<Button type='primary' onClick={() => this.setState({ visible3: true })}>
Structure Filter
</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} />
</Panel>
<Panel header='Virants & Disease' key='6' id='VirantsDisease'>
......
src/routes/Kinase/index.js
......@@ -76,7 +76,7 @@ class Home extends React.Component {
compoundList: ['DrugName', 'Smiles'],
targetList: ['TargetName', 'UniprotId'],
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
CheckChange = (e) => {
......@@ -154,8 +154,10 @@ class Home extends React.Component {
IndicationSearchData.indication = value;
this.setState(() => ({ IndicationSearchData: IndicationSearchData }));
};
//Indication Tab搜索
getIndicationList = () => {
let data = this.state.IndicationSearchData;
this.props.kinaseSearch.addIndicationSearchParams(data);
if (data.indication == '') {
return message.warning('请输入查询条件！');
}
......@@ -189,8 +191,10 @@ class Home extends React.Component {
this.setState(() => ({ ligandSearchData: ligandSearchData }));
// this.setState(()=>({data:e }))
};
//Ligand Tab搜索
getLigendList = () => {
let data = this.state.ligandSearchData;
this.props.kinaseSearch.addLigandSearchParams(data);
if (data.ligand_data == '') {
return message.warning('请输入查询条件！');
}
......@@ -287,8 +291,13 @@ class Home extends React.Component {
TargetSearchData.drug_name = value;
this.setState(() => ({ TargetSearchData: TargetSearchData }));
};
//Target Tab搜索
getTargetList = () => {
let data = this.state.TargetSearchData;
console.log('data:------ ', data);
this.props.kinaseSearch.addTargetSearchParams(data);
if (data.target_class == '' && data.target_data == '') {
return message.warning('请输入查询条件！');
}
......@@ -354,11 +363,19 @@ class Home extends React.Component {
};
componentDidMount() {
console.log('111', this.props.kinaseSearch.searchParams);
if (this.props.kinaseSearch.searchParams.drugs_data) {
this.state.searchData = this.props.kinaseSearch.searchParams;
console.log('111', this.props.kinaseSearch.ligandSearchParams);
if (this.props.kinaseSearch.drugSearchParams.drugs_data) {
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.getSelectList()
this.getTargetSelectList();
......@@ -474,9 +491,10 @@ class Home extends React.Component {
console.error(err);
});
};
//Drug Tab搜索
getDrugsList = () => {
let data = this.state.searchData;
this.props.kinaseSearch.addSearchParams(data);
this.props.kinaseSearch.addDrugSearchParams(data);
if (data.drugs_data == '') {
return message.warning('请输入查询条件！');
}
......@@ -513,8 +531,8 @@ class Home extends React.Component {
searchData.name = e;
this.setState(() => ({ searchData: searchData }));
console.log(this.state.searchData);
this.setState({ activeKey: e });
this.props.kinaseSearch.setActiveKey(e);
this.setState({ activeKinaseTabKey: e });
this.props.kinaseSearch.setActiveKinaseTabKey(e);
};
getJsme = () => {
console.log(1);
......@@ -538,7 +556,7 @@ class Home extends React.Component {
<div className='home'>
<div className='home-div'>
{/* <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'>
<div className='top-div'>
<div>
......@@ -648,7 +666,7 @@ class Home extends React.Component {
<div>
<Form layout='horizontal'>
<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 label='' {...formTailLayout}>
<Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}>
......
src/store/kinaseSearch.js
import { observable, action } from 'mobx';
class KianseSearch {
@observable searchParams = {};
@observable activeKey = '';
@action addSearchParams(data) {
console.log('data', data);
this.searchParams = data;
@observable drugSearchParams = {}; //kinase drug 搜索参数
@observable targetSearchParams = {}; //kinase target 搜索参数
@observable ligandSearchParams = {}; //kinase ligand 搜索参数
@observable indicationSearchParams = {}; //kinase indication 搜索参数
@observable activeKinaseTabKey = ''; //记录选中的tab
@action addDrugSearchParams(data) {
this.drugSearchParams = data;
}
@action addTargetSearchParams(data) {
this.targetSearchParams = data;
}
@action addLigandSearchParams(data) {
this.ligandSearchParams = data;
}
@action setActiveKey = (key) => {
console.log('key----',key)
@action addIndicationSearchParams(data) {
this.indicationSearchParams = data;
}
@action setActiveKinaseTabKey = (key) => {
console.log('key----', key);
this.activeTabKey = key;
};
}
......
src/utils/request.js
......@@ -17,10 +17,26 @@ function 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请求
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);
......@@ -35,33 +51,18 @@ function checkAjaxToken() {
return false;
}
}
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,
},
});
// checkAjaxToken();
//拦截器
request.interceptors.request.use((config) => {
console.log('config',config);
if (checkAjaxToken()) {
return config;
} else {
console.log('token为空....');
window.open('http://ysplatform.atelligence-ai.com/#/login', '_self');
}
});
// request.interceptors.request.use((config) => {
// console.log('config',config);
// if (checkAjaxToken()) {
// return config;
// } else {
// console.log('token校验失败...');
// window.open('http://ysplatform.atelligence-ai.com/#/login', '_self');
// }
// });
request.interceptors.response.use(
(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