adding facet filter to aotf state

opentargets · May 2, 2024 · 2c70fed · 2c70fed
1 parent 6cc48ce
commit 2c70fed
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 2 deletions.
diff --git a/apps/platform/src/components/AssociationsToolkit/context/AssociationsStateContext.jsx b/apps/platform/src/components/AssociationsToolkit/context/AssociationsStateContext.jsx
@@ -37,6 +37,7 @@ function AssociationsStateProvider({ children, entity, id, query }) {
   const [pinExpanded, setPinExpanded] = useState([]);
   const [tableExpanded, setTableExpanded] = useState({});
   const [tablePinExpanded, setTablePinExpanded] = useState({});
+  const [facetFilterIds, setFacetFilterIds] = useState([]);
 
   // Data controls
   const [enableIndirect, setEnableIndirect] = useState(initialIndirect(entity));
@@ -76,6 +77,7 @@ function AssociationsStateProvider({ children, entity, id, query }) {
       datasources: dataSourcesWeights,
       entity,
       aggregationFilters: dataSourcesRequired,
+      facetFilters: facetFilterIds,
     },
   });
 
@@ -95,6 +97,7 @@ function AssociationsStateProvider({ children, entity, id, query }) {
       datasources: dataSourcesWeights,
       aggregationFilters: dataSourcesRequired,
       rowsFilter: pinnedEntries.toSorted(),
+      facetFilters: facetFilterIds,
     },
   });
 
@@ -223,6 +226,7 @@ function AssociationsStateProvider({ children, entity, id, query }) {
       pinnedCount,
       pinExpanded,
       pinnedEntries,
+      facetFilterIds,
       handleActiveRow,
       resetToInitialPagination,
       setPinnedEntries,
@@ -241,6 +245,7 @@ function AssociationsStateProvider({ children, entity, id, query }) {
       setActiveHeadersControlls,
       resetExpandler,
       handleAggregationClick,
+      setFacetFilterIds,
     }),
     [
       activeHeadersControlls,
@@ -276,6 +281,8 @@ function AssociationsStateProvider({ children, entity, id, query }) {
       sorting,
       tableExpanded,
       tablePinExpanded,
+      facetFilterIds,
+      setFacetFilterIds,
     ]
   );
 

diff --git a/apps/platform/src/components/AssociationsToolkit/hooks/useAssociationsData.js b/apps/platform/src/components/AssociationsToolkit/hooks/useAssociationsData.js
@@ -131,11 +131,15 @@ function useAssociationsData({
     datasources = null,
     rowsFilter = [],
     entity,
+    facetFilters = [],
   },
 }) {
+  console.log("outside useeffect facetFilters", facetFilters);
   const [state, setState] = useState(INITIAL_USE_ASSOCIATION_STATE);
 
   useEffect(() => {
+    console.log("inside useffect facetFilters", facetFilters);
+
     let isCurrent = true;
     setState({ ...state, loading: true });
     const fetchData = async () => {
@@ -154,6 +158,7 @@ function useAssociationsData({
             name: el.name,
             path: el.path,
           })),
+          facetFilters,
         },
       });
       const parsedData = getAssociationsData(entity, resData.data);
@@ -178,6 +183,7 @@ function useAssociationsData({
     query,
     entity,
     aggregationFilters,
+    facetFilters,
   ]);
 
   return state;

diff --git a/apps/platform/src/components/Facets/FacetsQuery.gql b/apps/platform/src/components/Facets/FacetsQuery.gql
@@ -0,0 +1,13 @@
+query FacetSearchQuery($queryString: String!, $entityNames: [String!]) {
+  facets(queryString: $queryString, entityNames: $entityNames) {
+    hits {
+      id
+      highlights
+      label
+      category
+      entityIds
+      score
+    }
+    total
+  }
+}
diff --git a/apps/platform/src/components/Facets/FacetsSearch.tsx b/apps/platform/src/components/Facets/FacetsSearch.tsx
@@ -0,0 +1,93 @@
+import { Autocomplete, Box, Chip, Grid, TextField } from "@mui/material";
+import { ReactElement, useEffect, useState } from "react";
+import { Tooltip, useDebounce } from "ui";
+
+import FACETS_SEARCH_QUERY from "./FacetsQuery.gql";
+import useAotfContext from "../AssociationsToolkit/hooks/useAotfContext";
+import client from "../../client";
+import { capitalize } from "lodash";
+
+function FacetsSearch(): ReactElement {
+  const { entityToGet, setFacetFilterIds, facetFilterIds } = useAotfContext();
+  const [inputValue, setInputValue] = useState("");
+  const debouncedInputValue = useDebounce(inputValue, 400);
+  const [dataOptions, setDataOptions] = useState([]);
+  // let my_data = [];
+
+  async function getFacetsData() {
+    const variables = {
+      queryString: inputValue,
+      entityNames: [entityToGet],
+    };
+
+    const resData = await client.query({
+      query: FACETS_SEARCH_QUERY,
+      variables,
+    });
+
+    setDataOptions(resData.data.facets.hits);
+  }
+
+  useEffect(() => {
+    if (inputValue) getFacetsData();
+  }, [debouncedInputValue]);
+
+  return (
+    <>
+      <Autocomplete
+        sx={{ width: 600 }}
+        id="facets-search-input"
+        multiple
+        autoComplete
+        includeInputInList
+        filterSelectedOptions
+        options={dataOptions}
+        noOptionsText="Search for facets"
+        size="small"
+        // value={value}
+        onChange={(event: any, newValue: any) => {
+          setFacetFilterIds(newValue.map(v => v.id));
+        }}
+        limitTags={3}
+        filterOptions={x => x}
+        getOptionLabel={option => option?.label}
+        onInputChange={(event, newInputValue) => {
+          setInputValue(newInputValue);
+        }}
+        renderInput={params => (
+          <TextField {...params} label={`${capitalize(entityToGet)} specific filter`} fullWidth />
+        )}
+        renderTags={(value: readonly string[], getTagProps) =>
+          value.map((option: any, index: number) => (
+            <Tooltip title={option.label} key={option.id}>
+              <Box sx={{ maxWidth: "150px" }}>
+                <Chip size="small" label={option.label} {...getTagProps({ index })} />
+              </Box>
+            </Tooltip>
+          ))
+        }
+        renderOption={(props, option) => {
+          const { label, category } = option;
+          return (
+            <li {...props}>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  width: "100%",
+                }}
+              >
+                <Box sx={{ pr: theme => theme.spacing(2) }}>{label}</Box>
+                <Box>
+                  <Chip label={category} color="primary" size="small" />
+                </Box>
+              </Box>
+            </li>
+          );
+        }}
+      />
+    </>
+  );
+}
+export default FacetsSearch;
diff --git a/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.jsx b/apps/platform/src/pages/DiseasePage/DiseaseAssociations/DiseaseAssociations.jsx
@@ -15,6 +15,7 @@ import {
   AotfApiPlayground,
 } from "../../../components/AssociationsToolkit";
 import DISEASE_ASSOCIATIONS_QUERY from "./DiseaseAssociationsQuery.gql";
+import FacetsSearch from "../../../components/Facets/FacetsSearch";
 
 function AssociationsWrapper() {
   const { initialLoading, id } = useAotfContext();
@@ -24,8 +25,9 @@ function AssociationsWrapper() {
   return (
     <>
       <ControlsSection>
-        <Box sx={{ display: "flex", flexWrap: "wrap" }}>
-          <SearhInput />
+        <Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center" }}>
+          {/* <SearhInput /> */}
+          <FacetsSearch />
           <OptionsControlls>
             <AdvanceOptionsMenu />
             <PrivateWrapper>