From 090fc54e90070776667789d442a1f35e370f7c05 Mon Sep 17 00:00:00 2001
From: Graham McNeill <gjmcn@users.noreply.github.com>
Date: Tue, 6 Aug 2024 14:31:37 +0100
Subject: [PATCH] [Platform]: Add variant suggestions to home pages (#436)

---
 apps/platform/src/pages/HomePage/HomePage.jsx | 19 ++++++++++++++-
 .../src/pages/HomePage/PPHomePage.jsx         |  9 +++++++
 .../src/pages/HomePage/searchExamples.ts      | 17 ++++++++++++-
 apps/platform/src/utils/global.js             | 24 +++++++++----------
 packages/ui/src/hooks/useListOption.js        |  6 ++++-
 5 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/apps/platform/src/pages/HomePage/HomePage.jsx b/apps/platform/src/pages/HomePage/HomePage.jsx
index 438575d24..3701a52b4 100644
--- a/apps/platform/src/pages/HomePage/HomePage.jsx
+++ b/apps/platform/src/pages/HomePage/HomePage.jsx
@@ -111,7 +111,7 @@ function HomePage({ suggestions }) {
         <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/${suggestions[0].id}/associations`}>
               <Typography variant="body2">{suggestions[0].name}</Typography>
@@ -140,6 +140,23 @@ function HomePage({ suggestions }) {
               </Link>
             </Hidden>
           </Grid>
+          
+          <Grid className={classes.links} container justifyContent="space-around">
+            <Link to={`/variant/${suggestions[6].id}`}>
+              <Typography variant="body2">{suggestions[6].name}</Typography>
+            </Link>
+
+            <Hidden smDown>
+              <Link to={`/variant/${suggestions[7].id}`}>
+                <Typography variant="body2">{suggestions[7].name}</Typography>
+              </Link>
+            </Hidden>
+            
+            <Link to={`/variant/${suggestions[8].id}`}>
+              <Typography variant="body2">{suggestions[8].name}</Typography>
+            </Link>
+          </Grid>
+
           <Version />
           <PrivateWrapper>
             <div className={classes.dataPolicy}>
diff --git a/apps/platform/src/pages/HomePage/PPHomePage.jsx b/apps/platform/src/pages/HomePage/PPHomePage.jsx
index 943b6e3d0..c058ed254 100644
--- a/apps/platform/src/pages/HomePage/PPHomePage.jsx
+++ b/apps/platform/src/pages/HomePage/PPHomePage.jsx
@@ -128,6 +128,15 @@ function HomePage({ suggestions }) {
               <Link to={`/drug/${suggestions[5].id}`}>{suggestions[5].name}</Link>
             </Hidden>
           </Grid>
+          <Grid className={classes.links} container justifyContent="space-around">
+            <Link to={`/variant/${suggestions[6].id}`}>{suggestions[6].name}</Link>
+
+            <Hidden smDown>
+              <Link to={`/variant/${suggestions[7].id}`}>{suggestions[7].name}</Link>
+            </Hidden>
+   
+            <Link to={`/variant/${suggestions[8].id}`}>{suggestions[8].name}</Link>
+          </Grid>
           <Version releaseNotesURL="http://home.opentargets.org/ppp-release-notes" />
           <div className={classes.dataPolicy}>
             <Typography variant="body2" display="block" align="center" gutterBottom>
diff --git a/apps/platform/src/pages/HomePage/searchExamples.ts b/apps/platform/src/pages/HomePage/searchExamples.ts
index e9648d94a..9ae2e07ef 100644
--- a/apps/platform/src/pages/HomePage/searchExamples.ts
+++ b/apps/platform/src/pages/HomePage/searchExamples.ts
@@ -1,4 +1,4 @@
-type Entity = "disease" | "drug" | "target";
+type Entity = "disease" | "drug" | "target" | "variant";
 
 type Suggestion = {
   type: string;
@@ -11,6 +11,7 @@ type Examples = {
   targets: Suggestion[];
   diseases: Suggestion[];
   drugs: Suggestion[];
+  variants: Suggestion[];
 };
 
 export const pppSearchExamples: Examples = {
@@ -40,6 +41,13 @@ export const pppSearchExamples: Examples = {
     { type: "suggestion", entity: "drug", name: "IVACAFTOR", id: "CHEMBL2010601" },
     { type: "suggestion", entity: "drug", name: "LYRICA", id: "CHEMBL1059" },
   ],
+  variants: [
+    { type: "suggestion", entity: "variant", name: "4_1804392_G_A", id: "4_1804392_G_A" },
+    { type: "suggestion", entity: "variant", name: "11_64600382_G_A", id: "11_64600382_G_A" },
+    { type: "suggestion", entity: "variant", name: "12_6333477_C_T", id: "12_6333477_C_T" },
+    { type: "suggestion", entity: "variant", name: "15_90088702_C_T", id: "15_90088702_C_T" },
+    { type: "suggestion", entity: "variant", name: "17_63945614_C_T", id: "17_63945614_C_T" },
+  ],
 };
 
 export const searchExamples: Examples = {
@@ -104,4 +112,11 @@ export const searchExamples: Examples = {
     { type: "suggestion", entity: "drug", name: "IVACAFTOR", id: "CHEMBL2010601" },
     { type: "suggestion", entity: "drug", name: "LYRICA", id: "CHEMBL1059" },
   ],
+  variants: [
+    { type: "suggestion", entity: "variant", name: "4_1804392_G_A", id: "4_1804392_G_A" },
+    { type: "suggestion", entity: "variant", name: "11_64600382_G_A", id: "11_64600382_G_A" },
+    { type: "suggestion", entity: "variant", name: "12_6333477_C_T", id: "12_6333477_C_T" },
+    { type: "suggestion", entity: "variant", name: "15_90088702_C_T", id: "15_90088702_C_T" },
+    { type: "suggestion", entity: "variant", name: "17_63945614_C_T", id: "17_63945614_C_T" },
+  ],
 };
diff --git a/apps/platform/src/utils/global.js b/apps/platform/src/utils/global.js
index b1550d45a..466b2582d 100644
--- a/apps/platform/src/utils/global.js
+++ b/apps/platform/src/utils/global.js
@@ -2,13 +2,13 @@ import { format } from "d3-format";
 import config from "../config";
 import { searchExamples, pppSearchExamples } from "../pages/HomePage/searchExamples";
 
-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 pickN([...arr], n) {
+  const picks = [];
+  while (picks.length < n) {
+    const i = Math.floor(Math.random() * arr.length);
+    picks.push(arr.splice(i, 1)[0]);
+  }
+  return picks;
 }
 
 export const safeToString = x => {
@@ -74,9 +74,9 @@ export async function fetcher(graphQLParams) {
 
 export function getSuggestedSearch() {
   const suggestionArray = config.profile.isPartnerPreview ? pppSearchExamples : searchExamples;
-  const targets = pickTwo(suggestionArray.targets);
-  const diseases = pickTwo(suggestionArray.diseases);
-  const drugs = pickTwo(suggestionArray.drugs);
-
-  return [...targets, ...diseases, ...drugs];
+  const targets = pickN(suggestionArray.targets, 2);
+  const diseases = pickN(suggestionArray.diseases, 2);
+  const drugs = pickN(suggestionArray.drugs, 2);
+  const variants = pickN(suggestionArray.variants, 3);
+  return [...targets, ...diseases, ...drugs, ...variants];
 }
diff --git a/packages/ui/src/hooks/useListOption.js b/packages/ui/src/hooks/useListOption.js
index b4fd01d22..2199d8415 100644
--- a/packages/ui/src/hooks/useListOption.js
+++ b/packages/ui/src/hooks/useListOption.js
@@ -16,7 +16,11 @@ function useListOption() {
       history.push(`/${newOption.entity}/${newOption.studyId}`);
     } else {
       history.push(
-        `/${newOption.entity}/${newOption.id}${newOption.entity !== "drug" ? "/associations" : ""}`
+        `/${newOption.entity}/${newOption.id}${
+            newOption.entity !== "drug" && newOption.entity !== "variant"
+              ? "/associations"
+              : ""
+          }`
       );
     }
   };