From 78677882977acfdd3d74394901e9f6e1cf26ce6b Mon Sep 17 00:00:00 2001
From: Chintan Mehta <22376522+chinmehta@users.noreply.github.com>
Date: Tue, 17 Sep 2024 16:35:23 +0100
Subject: [PATCH] [Platform]: added facets tooltip info icon (#474)

* added facets tooltip info icon

* adding facet info as part of tip
---
 .../components/Facets/FacetsSuggestion.tsx    | 41 +++++++++++--------
 .../src/components/Facets/facetsLayout.tsx    |  2 +-
 .../DiseaseAssociations.tsx                   |  2 +-
 .../TargetAssociations/TargetAssociations.tsx |  6 +--
 4 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/apps/platform/src/components/Facets/FacetsSuggestion.tsx b/apps/platform/src/components/Facets/FacetsSuggestion.tsx
index 51dddfa5d..280268d5e 100644
--- a/apps/platform/src/components/Facets/FacetsSuggestion.tsx
+++ b/apps/platform/src/components/Facets/FacetsSuggestion.tsx
@@ -4,9 +4,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Box } from "@mui/material";
 import { useAotfContext } from "../AssociationsToolkit";
 import { ENTITY } from "./facetsTypes";
+import { Link } from "ui";
 
 const EXAMPLE = {
-  [ENTITY.DISEASE]: "Measurement",
+  [ENTITY.DISEASE]: "Eczema",
   [ENTITY.TARGET]: "Enzyme",
 };
 
@@ -15,22 +16,30 @@ function FacetsSuggestion(): ReactElement {
 
   return (
     <Box sx={{ display: "flex", alignItems: "center" }}>
-      <Box>
-        <Box
-          sx={{
-            display: "flex",
-            typography: "subtitle1",
-            fontWeight: "bold",
-            alignItems: "center",
-            gap: theme => theme.spacing(1),
-          }}
-        >
-          <FontAwesomeIcon icon={faLightbulb} />
-          Tip:
+      <Box sx={{ typography: "caption" }}>
+        <Box>
+          <b>How do facet filters work?</b>
+          <ul style={{ paddingLeft: "15px" }}>
+            <li>
+              Please search by {entityToGet} or filter by {entityToGet} category. Example:{" "}
+              {EXAMPLE[entityToGet]}
+            </li>
+            <li>
+              Filters across categories use <b>AND</b>
+            </li>
+            <li>
+              Filters within a category use <b>OR</b>
+            </li>
+          </ul>
         </Box>
-        <Box sx={{ typography: "body2" }}>
-          Please search by {entityToGet} or filter by {entityToGet} category. Example:{" "}
-          {EXAMPLE[entityToGet]}
+        <Box sx={{ w: 1, display: "flex", justifyContent: "end" }}>
+          <Link
+            to="https://platform-docs.opentargets.org/web-interface/associations-on-the-fly#filtering-functionality"
+            external
+            footer={false}
+          >
+            Read more details here.
+          </Link>
         </Box>
       </Box>
     </Box>
diff --git a/apps/platform/src/components/Facets/facetsLayout.tsx b/apps/platform/src/components/Facets/facetsLayout.tsx
index 078fb4c37..2b6eb1e20 100644
--- a/apps/platform/src/components/Facets/facetsLayout.tsx
+++ b/apps/platform/src/components/Facets/facetsLayout.tsx
@@ -14,7 +14,7 @@ export const FacetsSelect = styled(Select)(({ theme }) => ({
 }));
 
 export const FacetsAutocomplete = styled(Autocomplete)(({ theme }) => ({
-  minWidth: "280px",
+  minWidth: "320px",
   width: 1,
   maxWidth: 1,
   flexWrap: "nowrap",
diff --git a/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx b/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx
index 45a53e1ac..0519744d8 100644
--- a/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx
+++ b/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.tsx
@@ -33,7 +33,7 @@ function DiseaseAssociations(pros: DiseaseAssociationsProps): ReactElement {
               <FacetsSearch />
               <AdvanceOptionsMenu />
               <DataUploader />
-              <Divider orientation="vertical" />
+              <Divider orientation="vertical" flexItem />
               <DataDownloader />
               <AotfApiPlayground />
             </Box>
diff --git a/apps/platform/src/pages/TargetPage/TargetAssociations/TargetAssociations.tsx b/apps/platform/src/pages/TargetPage/TargetAssociations/TargetAssociations.tsx
index dc349051f..98c610e02 100644
--- a/apps/platform/src/pages/TargetPage/TargetAssociations/TargetAssociations.tsx
+++ b/apps/platform/src/pages/TargetPage/TargetAssociations/TargetAssociations.tsx
@@ -24,13 +24,11 @@ function TargetAssociations({ ensgId }: TargetAssociationsProps): ReactElement {
       <AssociationsFocusProvider>
         <>
           <ControlsSection>
-            <Box
-              sx={{ flex: 2, display: "flex", flexWrap: "wrap", gap: theme => theme.spacing(2) }}
-            >
+            <Box sx={{ flex: 2, display: "flex", flexWrap: "wrap", gap: 2 }}>
               <FacetsSearch />
               <AdvanceOptionsMenu />
               <DataUploader />
-              <Divider orientation="vertical" />
+              <Divider orientation="vertical" flexItem />
               <DataDownloader />
               <AotfApiPlayground />
             </Box>