Skip to content

E
elegantDeepKinase
Commit febb13ed by wangshufen
Options

fixed:kinase bug修复

parent 36c9821b
Showing with 339 additions and 112 deletions
.babelrc
{
"presets":["react-app"],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
["transform-decorators-legacy"]
]
"presets": ["react-app"],
"plugins": [["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }], ["transform-decorators-legacy"]]
}
.eslintrc.js 0 → 100644
module.exports = {
root: true, //此项是用来告诉eslint找当前配置文件不能往父级查找
env: {
node: true,
},
// "off" -> 0 关闭规则 "warn" -> 1 开启警告规则 "error" -> 2 开启错误规则
rules: {
'generator-star-spacing': 'off',
'no-tabs': 'off',
'no-unused-vars': 'off', //声明的变量未使用
'no-console': 'off',
'no-irregular-whitespace': 'off',
'no-debugger': 'off',
eqeqeq: 'off', // 使用全等
},
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 7,
sourceType: 'module',
},
};
jsconfig.json 0 → 100644
{
"compilerOptions": {
"baseUrl": "./",
"experimentalDecorators": true,
"paths": {
"@/*": ["src/*"]
}
}
}
src/routes/Home/IndicationDetails/index.js
import React, { Component } from 'react'
import { Pagination,message,Button,Tabs,Spin,Table,Tag,Typography} from 'antd';
import { request } from '../../../utils/request'
import request from '../../../utils/request'
import './index.css'
import qs from 'qs'
const { Title } = Typography;
......
src/routes/Home/LigandDetails/index.js
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 { request } from '../../../utils/request'
import request from '../../../utils/request'
import Molstar from "molstar-react";
import { Jsme } from 'jsme-react'
import qs from 'qs'
......
src/routes/Home/MutationDetails/index.js
import React, { Component } from 'react'
import { Card,Tooltip,Popover,message,Radio,Button,Icon,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography, Dropdown} from 'antd';
import { request } from '../../../utils/request'
import request from '../../../utils/request'
import Molstar from "molstar-react";
import { Jsme } from 'jsme-react'
import qs from 'qs'
......
src/routes/Home/SearchDetails/index.js
import React, { Component } from 'react'
import { Card,Tooltip,message,Button,Tabs,Spin,Table,Tag, Collapse,Divider,Modal,Form,Select,InputNumber,Popover} from 'antd';
import { request } from '../../../utils/request'
import request from '../../../utils/request'
import Molstar from "molstar-react";
import { Jsme } from 'jsme-react'
import qs from 'qs'
......
src/routes/Home/SearchList/index.js
import React, { Component } from 'react'
import { Jsme } from 'jsme-react'
import { Card,Button,Pagination,Tabs,Spin,message ,Tag} from 'antd';
import { request } from '../../../utils/request'
import request from '../../../utils/request'
import qs from 'qs'
import './index.css'
const { TabPane } = Tabs;
......
src/routes/Home/TargetDetails/index.js
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 { request } from '../../../utils/request'
import request from '../../../utils/request'
import Molstar from "molstar-react";
import { Jsme } from 'jsme-react'
import qs from 'qs'
......
src/routes/Home/index.js
......@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from
import LogoTitlte from '../../components/LogoTitlte/index'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import { request } from '../../utils/request'
import request from '../../utils/request'
import './style.css'
const { TabPane } = Tabs;
const { Option } = Select;
......
src/routes/Kinase/IndicationDetails/index.js
import React, { Component } from 'react'
import { Pagination, message, Button, Tabs, Spin, Table, Tag, Typography } from 'antd'
import { request } from '../../../utils/request'
import request from '../../../utils/request'
import './index.css'
import qs from 'qs'
const { Title } = Typography
......@@ -15,7 +15,7 @@ export default class IndicationDetails extends Component {
}
getDetails () {
this.setState({ loading: true })
request.post('/gpcr/indication_search', this.state.smilesData)
request.post('/kinase/indication_search', this.state.smilesData)
.then(res => {
this.setState({ loading: false })
if (res.data.code === 200) {
......
src/routes/Kinase/LigandDetails/index.js
......@@ -18,7 +18,7 @@ import {
Menu,
Dropdown,
} from 'antd'
import { request } from '../../../utils/request'
import request from '../../../utils/request'
import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
......
src/routes/Kinase/SearchList/index.js
import React, { Component } from "react";
import { Jsme } from "jsme-react";
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 "./index.css";
const { TabPane } = Tabs;
......
src/routes/Kinase/TargetDetails/index.js
......@@ -22,7 +22,7 @@ import {
Pagination,
} from 'antd'
import WrappedIframe from '../../../components/iframePdb'
import { request } from '../../../utils/request'
import request from '../../../utils/request'
import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
......@@ -1178,7 +1178,7 @@ export default class TargetDetails extends Component {
{targetsDetail.Structure.map((item, index) => {
return (
<Option key={index.pdb} value={item.pdb.toLowerCase()}>
{item.pdb.toLowerCase()}
{item.pdb&&item.pdb.toLowerCase()}
</Option>
)
})}
......@@ -1537,7 +1537,7 @@ export default class TargetDetails extends Component {
<Option
key={index}
value={item.pdb.toLowerCase()}>
{item.pdb.toLowerCase()}
{item.pdb&&item.pdb.toLowerCase()}
</Option>
)
}
......
src/routes/Login/LoginForm.js
......@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react/index'
import { Form, Input,message } from 'antd'
import PromptBox from '../../components/PromptBox'
import { request } from '../../utils/request'
import request from '../../utils/request'
import md5 from 'js-md5';
import qs from 'qs'
......
src/routes/Login/index.js
import React from 'react'
import BGParticle from '../../utils/BGParticle'
import { notification } from 'antd'
import './style.css'
import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react/index'
import Loading2 from '../../components/Loading2'
import {preloadingImages} from '../../utils/utils'
import LogoTitlte from '../../components/LogoTitlte/index'
import 'animate.css'
import LoginForm from './LoginForm'
import RegisterForm from './RegisterForm'
import React from 'react';
import BGParticle from '../../utils/BGParticle';
import { notification } from 'antd';
import './style.css';
import { withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react/index';
import Loading2 from '../../components/Loading2';
import { preloadingImages } from '../../utils/utils';
import LogoTitlte from '../../components/LogoTitlte/index';
import 'animate.css';
import LoginForm from './LoginForm';
import RegisterForm from './RegisterForm';
const url = ''
const url = '';
const imgs = [
// 'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg',
// 'http://47.99.130.140/imgs/wallhaven-e7zyy8.jpg',
// 'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
// 'http://47.99.130.140/imgs/photo.jpg',
]
];
@withRouter @inject('appStore') @observer
@withRouter //更新的作用
@inject('appStore') //接收
@observer //组件变为响应式
//这三步会把对应的store挂在props上
class Login extends React.Component {
state = {
showBox: 'login', //展示当前表单
url: '', //背景图片
loading:false,
loading2:false,
}
loading: false,
loading2: false,
};
componentDidMount () {
this.props.appStore.toggleLogin(true, { username: 'username' })
componentDidMount() {
this.props.appStore.toggleLogin(true, { username: 'username' });
// const { from } = this.props.location.state || { from: { pathname: '/Kinase' } }
const { from } = this.props.location.state || { from: { pathname: '/login' } }
this.props.history.push(from)
const { from } = this.props.location.state || { from: { pathname: '/login' } };
this.props.history.push(from);
}
componentWillUnmount () {
this.particle && this.particle.destory()
notification.destroy()
componentWillUnmount() {
this.particle && this.particle.destory();
notification.destroy();
}
//载入页面时的一些处理
initPage = () => {
this.setState({
loading:true
})
this.props.appStore.initUsers()
this.loadImageAsync(url).then(url=>{
loading: true,
});
this.props.appStore.initUsers();
this.loadImageAsync(url)
.then((url) => {
this.setState({
loading:false,
url
loading: false,
url,
});
})
}).then(()=>{
.then(() => {
//为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom
this.particle = new BGParticle('backgroundBox')
this.particle.init()
this.particle = new BGParticle('backgroundBox');
this.particle.init();
// notification.open({
// message:<ul><li>初始账号：admin</li><li>初始密码：admin</li></ul>,
// duration:0,
// className:'login-notification'
// })
})
}
});
};
//切换showbox
switchShowBox = (box) => {
this.setState({
showBox: box
})
}
showBox: box,
});
};
//登录的背景图太大，等载入完后再显示，实际上是图片预加载，
loadImageAsync (url) {
loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(url);
};
image.onerror = function() {
console.log('图片载入错误')
console.log('图片载入错误');
};
image.src = url;
});
}
render () {
const {showBox,loading} = this.state
render() {
const { showBox, loading } = this.state;
return (
<div className='index-div'>
<LogoTitlte></LogoTitlte>
<LogoTitlte />
<div id='login-page'>
<div className='home-page-div'>
<div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div>
<div>我们的Kinase平台专注于挖掘包括药物和配体结构、蛋白质结构在内的Kinase数据，并开发计算工具来加速Kinase药物发现。</div>
<div> Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal chemists to make intelligence drug discovery decisions.</div>
<div>Our Kinase platform focuses on mining available Kinase knowledge including corresponding drugs and ligands structure and protein structures data, and developing computational tools to accelerate Kinase drug discovery.</div>
<div>
{' '}
Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal
chemists to make intelligence drug discovery decisions.
</div>
<div>
Our Kinase platform focuses on mining available Kinase knowledge including corresponding drugs and ligands structure and protein structures data, and developing computational tools to
accelerate Kinase drug discovery.
</div>
</div>
{
<div>
<div id='backgroundBox' style={styles.backgroundBox}/>
<div id='backgroundBox' style={styles.backgroundBox} />
<div className='container'>
<LoginForm
className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
<RegisterForm
className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
<LoginForm className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
<RegisterForm className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
</div>
</div>
}
</div>
</div>
)
);
}
}
......@@ -129,30 +130,30 @@ const styles = {
height: '100vh',
// backgroundImage: `url(${url})`,
backgroundSize: 'cover',
transition:'all .5s',
transition: 'all .5s',
// backgroundColor: '#4FA1D9'
},
focus: {
// transform: 'scale(0.7)',
width: '20px',
opacity: 1
opacity: 1,
},
loadingBox:{
position:'fixed',
top:'50%',
left:'50%',
transform:'translate(-50%,-50%)'
loadingBox: {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
},
loadingTitle:{
position:'fixed',
top:'50%',
left:'50%',
loadingTitle: {
position: 'fixed',
top: '50%',
left: '50%',
marginLeft: -45,
marginTop: -18,
color:'#000',
fontWeight:500,
fontSize:24
color: '#000',
fontWeight: 500,
fontSize: 24,
},
}
};
export default Login
export default Login;
src/routes/MolecularSearch/index.js
import React, { Component } from "react";
import { Jsme } from "jsme-react";
import qs from "qs";
import { request } from "../../utils/request";
import request from "../../utils/request";
import { Input, Button, Modal, Table, message, Pagination } from "antd";
import Molstar from "molstar-react";
import "./index.css";
......
src/routes/drugbank/IndicationDetails/index.js
......@@ -9,7 +9,7 @@ import {
Tag,
Typography,
} from "antd";
import { request } from "../../../utils/request";
import request from "../../../utils/request";
import "./index.css";
import qs from "qs";
const { Title } = Typography;
......
src/routes/drugbank/LigandDetails/index.js
......@@ -18,7 +18,7 @@ import {
InputNumber,
Typography,
} from "antd";
import { request } from "../../../utils/request";
import request from "../../../utils/request";
import Molstar from "molstar-react";
import { Jsme } from "jsme-react";
import qs from "qs";
......
src/routes/drugbank/SearchDetails/index.js
......@@ -18,7 +18,7 @@ import {
InputNumber,
Typography,
} from "antd";
import { request } from "../../../utils/request";
import request from "../../../utils/request";
import Molstar from "molstar-react";
import { Jsme } from "jsme-react";
import qs from "qs";
......
src/routes/drugbank/SearchList/index.js
import React, { Component } from "react";
import { Jsme } from "jsme-react";
import { Card, Button, Pagination, Tabs, Spin, message, Collapse } from "antd";
import { request } from "../../../utils/request";
import request from "../../../utils/request";
import qs from "qs";
import "./index.css";
const { TabPane } = Tabs;
......
src/routes/drugbank/TargetDetails/index.js
......@@ -19,7 +19,7 @@ import {
Typography,
Pagination,
} from "antd";
import { request } from "../../../utils/request";
import request from "../../../utils/request";
import Molstar from "molstar-react";
import { Jsme } from "jsme-react";
import qs from "qs";
......
src/routes/drugbank/index.js
......@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from
import LogoTitlte from '../../components/LogoTitlte/index'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import { request } from '../../utils/request'
import request from '../../utils/request'
import './style.css'
const { TabPane } = Tabs;
const { Option } = Select;
......
src/utils/request-login.js 0 → 100644
import axios from 'axios';
import { getQueryString } from './utils';
import { message } from 'antd';
//禁用F12功能
function disableF12() {
document.onkeydown = function() {
var e = window.event || arguments[0];
if (e.keyCode == 123) {
return false;
} else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
return false;
}
};
//禁用鼠标右键
document.oncontextmenu = function() {
return false;
};
}
// disableF12();
const baseURL = 'http://52.83.169.190:8002/'; //线上正式环境
// const baseURL = 'http://69.235.144.91:8002/'; 测试环境
//对axios二次封装
// console.log('getQueryString', getQueryString('token'));
// console.log('localStorage', localStorage.getItem('token'));
const token = getQueryString('token') || localStorage.getItem('token');
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,
},
});
function checkToken(config) {
// message.error('校验token');
// alert(' 校验token111');
request
.get('http://69.235.144.91:8048/yszh-login/auth/checkToken')
.then((res) => {
console.log('--res', res);
if (res.data.code === 200) {
console.log('token 检验通过');
return config;
} else {
localStorage.removeItem('token');
// alert(' 失败');
// message.error('请重新登录');
console.log('token校验没通过 返回登录页');
// window.open('http://localhost:3000/#/login');
window.open('http://localhost:3000/#/login', '_self');
}
})
.catch((err) => {
localStorage.removeItem('token');
// alert(' 服务器报错');
console.log('token校验没通过 返回登录页');
window.open('http://localhost:3000/#/login', '_self');
console.log('err', err);
return false;
});
}
checkToken();
//拦截器
request.interceptors.request.use((config) => {
// alert('拦截器..');
console.log('token---', '拦截器方法校验token');
console.log(config);
if (getQueryString('token') || localStorage.getItem('token')) {
checkToken(config);
} else {
console.log('token为空....');
window.open('http://localhost:3000/#/login');
}
});
request.interceptors.response.use(
(res) => {
return res;
},
(err) => {
if (err && err.response) {
switch (err.response.status) {
case 400:
console.log('请求错误');
break;
case 401:
console.log('未授权访问');
break;
case 404:
console.log('页面未找到');
break;
default:
console.log('其他错误信息');
}
}
return err;
}
);
export default request;
src/utils/request.js
import axios from 'axios';
axios.defaults.timeout = 10000;
document.onkeydown = function() {
import { getQueryString } from './utils';
import { message } from 'antd';
//禁用F12功能
function disableF12() {
document.onkeydown = function() {
var e = window.event || arguments[0];
if (e.keyCode == 123) {
return false;
} else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
return false;
}
};
document.oncontextmenu = function() {
};
//禁用鼠标右键
document.oncontextmenu = function() {
return false;
};
};
}
// disableF12();
var baseURL = 'http://52.83.169.190:8002/';
// const baseURL = 'http://52.83.169.190:8002/'; //线上正式环境
const baseURL = 'http://69.235.144.91:8002/'; // 测试环境
export const request = axios.create({
baseURL: baseURL,
//对axios二次封装
// console.log('getQueryString', getQueryString('token'));
// console.log('localStorage', localStorage.getItem('token'));
const token = getQueryString('token') || localStorage.getItem('token');
const request = axios.create({
baseURL,
timeout: 15000,
// headers: {
// 'Content-Type': 'application/json',
// accessToken: token,
// },
});
function checkToken(config) {
// message.error('校验token');
// alert('alert 校验token')
request
.get('http://69.235.144.91:8048/yszh-login/auth/checkToken')
.then((res) => {
console.log('checkToken--res', res);
if (res.data.code === 200) {
console.log('token 检验通过');
return config;
} else {
message.error('请重新登录');
console.log('token校验没通过 返回登录页');
window.open('http://localhost:3000/#/login');
// window.open('http://localhost:3000/#/login', '_self');
}
})
.catch((err) => {
console.log('token校验没通过 返回登录页');
window.open('http://localhost:3000/#/login', '_self');
console.log('err', err);
});
}
// checkToken();
//拦截器
// request.interceptors.request.use((config) => {
// console.log('token---', '拦截器方法校验token');
// if (!!token) {
// checkToken(config);
// return config;
// } else {
// console.log('token为空....');
// window.open('http://localhost:3000/#/login', '_self');
// }
// return config;
// });
// request.interceptors.response.use(
// (res) => {
// return res;
// },
// (err) => {
// if (err && err.response) {
// switch (err.response.status) {
// case 400:
// console.log('请求错误');
// break;
// case 401:
// console.log('未授权访问');
// break;
// case 404:
// console.log('页面未找到');
// break;
// default:
// console.log('其他错误信息');
// }
// }
// return err;
// }
// );
export default request;
src/utils/utils.js
......@@ -64,3 +64,17 @@ export function preloadingImages(arr) {
img.src = item
})
}
/**
* 获取URL中指定的参数
*/
export function getQueryString(name) {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
let r = window.location.hash.split('?')[1] && window.location.hash.split('?')[1].match(reg); //获取url中"?"符后的字符串并正则匹配
let context = '';
if (r != null) context = decodeURIComponent(r[2]);
reg = null;
r = null;
return context == null || context == '' || context == 'undefined' ? '' : context;
}
\ No newline at end of file
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