Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Platform]: search suggestion added #285

Merged
merged 5 commits into from
Nov 16, 2023
Merged

[Platform]: search suggestion added #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
642f2d8
search history limit
chinmehta Nov 9, 2023
c4e095d
suggestions added and dialog centre home page
chinmehta Nov 10, 2023
f566fc1
search button alignment
chinmehta Nov 15, 2023
3696fdf
update search examples and logic
chinmehta Nov 15, 2023
e795e0f
recent limit set to 5
chinmehta Nov 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions apps/platform/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,14 @@ import VariantsPage from './pages/VariantsPage';
import APIPage from './pages/APIPage';
import NotFoundPage from './pages/NotFoundPage';
import ProjectsPage from './pages/ProjectsPage';
import { getSuggestedSearch } from './utils/global';

function App() {
return (
<ApolloProvider client={client}>
<ThemeProvider theme={theme}>
<SearchProvider
searchSuggestions={getSuggestedSearch()}
searchQuery={SEARCH_QUERY}
searchPlaceholder="Search for a target, drug, disease, or phenotype..."
>
Expand Down
1 change: 1 addition & 0 deletions apps/platform/src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-gutter: stable;
}

code {
Expand Down
169 changes: 61 additions & 108 deletions apps/platform/src/pages/HomePage/HomePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
import {
Grid,
Typography,
Hidden,
Box,
useMediaQuery,
IconButton,
} from '@mui/material';
import { Grid, Typography, Hidden, Box, useMediaQuery, IconButton } from "@mui/material";

import { makeStyles, useTheme } from '@mui/styles';
import { Helmet } from 'react-helmet';
import { makeStyles, useTheme } from "@mui/styles";
import { Helmet } from "react-helmet";

import { Footer, Link, PrivateWrapper, NavBar, GlobalSearch } from 'ui';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Footer, Link, PrivateWrapper, NavBar, GlobalSearch } from "ui";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faCircle,
faChevronDown,
Expand All @@ -20,61 +13,52 @@ import {
faQuestionCircle,
faFileAlt,
faCommentDots,
} from '@fortawesome/free-solid-svg-icons';
} from "@fortawesome/free-solid-svg-icons";
import {
appTitle,
appDescription,
appCanonicalUrl,
externalLinks,
mainMenuItems,
} from '../../constants';
import HomeBox from './HomeBox';
import searchExamples from './searchExamples';
import Splash from './Splash';
import Version from './Version';
} from "../../constants";
import HomeBox from "./HomeBox";
import Splash from "./Splash";
import Version from "./Version";
import { getSuggestedSearch } from "../../utils/global";

import config from '../../config';
import config from "../../config";

const useStyles = makeStyles(() => ({
links: {
marginTop: '12px',
marginTop: "12px",
},
api: {
marginTop: '38px',
marginTop: "38px",
},
hpSection: {
marginBottom: '40px',
marginBottom: "40px",
},
dataPolicy: {
padding: '10px',
marginTop: '30px',
border: '2px solid',
padding: "10px",
marginTop: "30px",
border: "2px solid",
borderColor: config.profile.primaryColor,
},
}));

const usePanelStyles = makeStyles(theme => ({
helpBoxes: {
maxWidth: '120px',
textAlign: 'center',
[theme.breakpoints.down('xs')]: {
textAlign: 'left',
maxWidth: "120px",
textAlign: "center",
[theme.breakpoints.down("xs")]: {
textAlign: "left",
},
},
}));

function pickTwo(arr) {
const i1 = Math.floor(Math.random() * arr.length);
const resultArray = arr.splice(i1, 1);
const i2 = Math.floor(Math.random() * arr.length);
resultArray.push(...arr.splice(i2, 1));

return resultArray;
}

function HelpBoxPanel({ fai, url, label, external }) {
const theme = useTheme();
const xsMQ = useMediaQuery(theme.breakpoints.down('xs'));
const xsMQ = useMediaQuery(theme.breakpoints.down("xs"));

const classes = usePanelStyles();

Expand Down Expand Up @@ -111,12 +95,10 @@ function HelpBoxPanel({ fai, url, label, external }) {

function HomePage() {
const classes = useStyles();
const targets = pickTwo(searchExamples.targets);
const diseases = pickTwo(searchExamples.diseases);
const drugs = pickTwo(searchExamples.drugs);
const suggestions = getSuggestedSearch();

const handleScrollDown = () => {
window.scrollTo({ top: window.innerHeight, left: 0, behavior: 'smooth' });
window.scrollTo({ top: window.innerHeight, left: 0, behavior: "smooth" });
};

return (
Expand All @@ -125,74 +107,49 @@ function HomePage() {
<meta name="description" content={appDescription} />
<link rel="canonical" href={appCanonicalUrl} />
</Helmet>
<Grid
container
justifyContent="center"
alignItems="center"
className={classes.hpSection}
>
<Grid container justifyContent="center" alignItems="center" className={classes.hpSection}>
<Splash />
<NavBar
name="platform"
homepage
items={mainMenuItems}
placement="bottom-end"
/>
<NavBar name="platform" homepage items={mainMenuItems} placement="bottom-end" />
<HomeBox>
<GlobalSearch isHomePage />
{/* Search examples */}
<Grid
className={classes.links}
container
justifyContent="space-around"
>
<Link to={`/target/${targets[0].id}/associations`}>
<Typography variant="body2">{targets[0].label}</Typography>
<Grid className={classes.links} container justifyContent="space-around">
<Link to={`/target/${suggestions[0].id}/associations`}>
<Typography variant="body2">{suggestions[0].name}</Typography>
</Link>
<Hidden smDown>
<Link to={`/target/${targets[1].id}/associations`}>
<Typography variant="body2">{targets[1].label}</Typography>
<Link to={`/target/${suggestions[1].id}/associations`}>
<Typography variant="body2">{suggestions[1].name}</Typography>
</Link>
</Hidden>

<Link to={`/disease/${diseases[0].id}/associations`}>
<Typography variant="body2">{diseases[0].label}</Typography>
<Link to={`/disease/${suggestions[2].id}/associations`}>
<Typography variant="body2">{suggestions[2].name}</Typography>
</Link>
<Hidden smDown>
<Link to={`/disease/${diseases[1].id}/associations`}>
<Typography variant="body2">{diseases[1].label}</Typography>
<Link to={`/disease/${suggestions[3].id}/associations`}>
<Typography variant="body2">{suggestions[3].name}</Typography>
</Link>
</Hidden>

<Link to={`/drug/${drugs[0].id}`}>
<Typography variant="body2">{drugs[0].label}</Typography>
<Link to={`/drug/${suggestions[4].id}`}>
<Typography variant="body2">{suggestions[4].name}</Typography>
</Link>
<Hidden smDown>
<Link to={`/drug/${drugs[1].id}`}>
<Typography variant="body2">{drugs[1].label}</Typography>
<Link to={`/drug/${suggestions[5].id}`}>
<Typography variant="body2">{suggestions[5].name}</Typography>
</Link>
</Hidden>
</Grid>
<Version />
<PrivateWrapper>
<div className={classes.dataPolicy}>
<Typography
variant="body2"
display="block"
align="center"
gutterBottom
>
The Open Targets Partner Preview Platform is provided
exclusively to Open Targets consortium members. All data and
results of queries must remain confidential and must not be
shared publicly.
<Typography variant="body2" display="block" align="center" gutterBottom>
The Open Targets Partner Preview Platform is provided exclusively to Open Targets
consortium members. All data and results of queries must remain confidential and
must not be shared publicly.
</Typography>
<Typography
variant="body2"
display="block"
align="center"
gutterBottom
>
<Typography variant="body2" display="block" align="center" gutterBottom>
<strong>
<Link
external
Expand All @@ -214,11 +171,11 @@ function HomePage() {
aria-label="Scroll down handler"
className="fa-layers fa-fw fa-3x"
style={{
height: '0px',
marginTop: '-3em',
filter: 'drop-shadow( 1px 1px 2px rgba(0, 0, 0, .5))',
cursor: 'pointer',
fontSize: '40px',
height: "0px",
marginTop: "-3em",
filter: "drop-shadow( 1px 1px 2px rgba(0, 0, 0, .5))",
cursor: "pointer",
fontSize: "40px",
}}
size="large"
onClick={handleScrollDown}
Expand All @@ -237,27 +194,23 @@ function HomePage() {
</Typography>

<Typography paragraph>
The Open Targets Platform is a comprehensive tool that supports
systematic identification and prioritisation of potential
therapeutic drug targets.
The Open Targets Platform is a comprehensive tool that supports systematic
identification and prioritisation of potential therapeutic drug targets.
</Typography>

<Typography paragraph>
By integrating publicly available datasets including data generated
by the Open Targets consortium, the Platform builds and scores
target-disease associations to assist in drug target identification
and prioritisation. It also integrates relevant annotation
information about targets, diseases, phenotypes, and drugs, as well
as their most relevant relationships.
By integrating publicly available datasets including data generated by the Open Targets
consortium, the Platform builds and scores target-disease associations to assist in drug
target identification and prioritisation. It also integrates relevant annotation
information about targets, diseases, phenotypes, and drugs, as well as their most
relevant relationships.
</Typography>

<Typography paragraph>
The Platform is a freely available resource that is actively
maintained with bi-monthly data updates. Data is available through
an intuitive user interface, an API, and data downloads. The
pipeline and infrastructure codebases are open-source and the
licence allows the creation of self-hosted private instances of the
Platform with custom data.
The Platform is a freely available resource that is actively maintained with bi-monthly
data updates. Data is available through an intuitive user interface, an API, and data
downloads. The pipeline and infrastructure codebases are open-source and the licence
allows the creation of self-hosted private instances of the Platform with custom data.
</Typography>
</Grid>
</Grid>
Expand Down
Loading
Loading