[Platform]: added facets tooltip info icon (opentargets#474)

* added facets tooltip info icon * adding facet info as part of tip
thehyve · Sep 20, 2024 · 8768452 · 8768452
1 parent 8cc71cb
commit 8768452
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>