feature:搜索优化功能修改

da33d10f · wangshufen · 3a8b772b · 3a8b772b · da33d10f · da33d10f
Commit da33d10f authored Feb 22, 2023 by wangshufen
7 changed files
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
-{
-    "liveServer.settings.port": 5501
-}
\ No newline at end of file
--- a/README.md
+++ b/README.md
+项目启动:
+1.yarn
+2.yarn start
--- a/src/routes/Kinase/SearchDetails/index.js
+++ b/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>

--- a/src/routes/Kinase/TargetDetails/index.js
+++ b/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'>

--- a/src/routes/Kinase/index.js
+++ b/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);
+    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.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.setState({ activeKinaseTabKey: e });
-    this.props.kinaseSearch.setActiveKey(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}>

--- a/src/store/kinaseSearch.js
+++ b/src/store/kinaseSearch.js
 import { observable, action } from 'mobx';
 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;
  };
 }

--- a/src/utils/request.js
+++ b/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();
+// 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(
  (res) => {