Filter biobliography results by publication date

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@apollo/client": "^3.3.4",
     "@clampy-js/react-clampy": "^1.2.0",
+    "@date-io/moment": "^1.3.13",
     "@ebi-gene-expression-group/expression-atlas-heatmap-highcharts": "^5.4.1-beta1",
     "@fortawesome/fontawesome-svg-core": "^1.2.29",
     "@fortawesome/free-brands-svg-icons": "^5.15.3",
@@ -22,6 +23,7 @@
     "@material-ui/core": "^4.9.11",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.50",
+    "@material-ui/pickers": "^3.3.10",
     "classnames": "^2.2.6",
     "d3": "^5.9.2",
     "d3-dag": "^0.5.0",
@@ -34,6 +36,7 @@
     "litemol": "^2.4.2",
     "local-storage": "^2.0.0",
     "lodash": "^4.17.21",
+    "moment": "^2.29.3",
     "particles.js": "^2.0.0",
     "polished": "^2.3.0",
     "protvista-uniprot": "^2.8.3",

src/sections/common/Literature/Body.js

@@ -17,6 +17,7 @@ import {
 import Entities from './Entities';
 import Category from './Category';
 import CountInfo from './CountInfo';
+import { DateFilter } from './DateFilter';
 
 const useStyles = makeStyles(() => ({
   controlsContainer: {
@@ -33,7 +34,7 @@ function LiteratureList({ id, name, entity, BODY_QUERY }) {
   const resetLiteratureState = useResetRecoilState(literatureState);
 
   const bibliographyState = useRecoilValue(literatureState);
-  const { category } = bibliographyState;
+  const { category, year, month, comparator } = bibliographyState;
 
   useEffect(
     () => {
@@ -42,6 +43,9 @@ function LiteratureList({ id, name, entity, BODY_QUERY }) {
           id,
           query: BODY_QUERY,
           category,
+          year,
+          month,
+          comparator,
         });
         const data = inintRequest.data[entity];
         const update = {
@@ -71,6 +75,7 @@ function LiteratureList({ id, name, entity, BODY_QUERY }) {
     <div>
       <Box className={classes.controlsContainer}>
         <Category />
+        <DateFilter />
         <CountInfo />
       </Box>
       <Entities id={id} name={name} />

src/sections/common/Literature/DateFilter.js

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from 'react';
+import {
+  FormControl,
+  FormGroup,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+} from '@material-ui/core';
+import MomentFn from '@date-io/moment';
+import { MuiPickersUtilsProvider, DatePicker } from '@material-ui/pickers';
+import {
+  fetchSimilarEntities,
+  literatureState,
+  loadingEntitiesState,
+  updateLiteratureState,
+} from './atoms';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { GREATER_THAN, LESSER_THAN } from '.';
+
+export const DateFilter = () => {
+  const [filterDate, setFilterDate] = useState(null);
+  const setLiteratureUpdate = useSetRecoilState(updateLiteratureState);
+  const [loadingEntities, setLoadingEntities] = useRecoilState(
+    loadingEntitiesState
+  );
+  const {
+    query,
+    id,
+    category,
+    year,
+    month,
+    comparator,
+    selectedEntities,
+    globalEntity,
+    cursor,
+  } = useRecoilValue(literatureState);
+
+  useEffect(
+    () => {
+      debugger;
+      if (year) {
+        setFilterDate(new Date(year, month, 1));
+      } else {
+        setFilterDate(null);
+      }
+    },
+    [year, month]
+  );
+
+  useEffect(
+    () => {
+      console.log(comparator);
+    },
+    [comparator]
+  );
+
+  const handleDateChange = date => {
+    if (date) {
+      const year = date.year();
+      const month = date.month() + 1;
+      let comp = comparator ?? GREATER_THAN;
+      handleChange({ year, month, comparator: comp });
+    } else {
+      handleChange({ year: null, month: null });
+    }
+    setFilterDate(date);
+  };
+
+  const handleChange = async values => {
+    setLoadingEntities(true);
+    const request = await fetchSimilarEntities({
+      query,
+      id,
+      category,
+      entities: selectedEntities,
+      cursor,
+      year,
+      month,
+      comparator,
+      ...values,
+    });
+    const data = request.data[globalEntity];
+    const update = {
+      entities: data.similarEntities,
+      loadingEntities: false,
+      category,
+      year,
+      month,
+      comparator,
+      litsIds: data.literatureOcurrences?.rows?.map(({ pmid }) => ({
+        id: pmid,
+        status: 'ready',
+        publication: null,
+      })),
+      litsCount: data.literatureOcurrences?.count,
+      ...values,
+    };
+    setLiteratureUpdate(update);
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <InputLabel id="date-filter-demo">Date Filter:</InputLabel>
+      <FormGroup row>
+        <FormControl style={{ marginLeft: '15px', flex: 1 }}>
+          <MuiPickersUtilsProvider utils={MomentFn}>
+            <DatePicker
+              views={['year', 'month']}
+              label="Year and Month"
+              value={filterDate}
+              onChange={handleDateChange}
+              autoOk={true}
+              renderInput={params => (
+                <TextField {...params} helperText={null} />
+              )}
+              maxDate={Date.now()}
+              clearable={true}
+            />
+          </MuiPickersUtilsProvider>
+        </FormControl>
+        <FormControl style={{ marginLeft: '15px', flex: 1 }}>
+          <InputLabel id="compare-label">Compare logic</InputLabel>
+          <Select
+            labelId="compare-label"
+            id="demo-simple-select-helper"
+            value={comparator}
+            onChange={event => handleChange({ comparator: event.target.value })}
+          >
+            <MenuItem value={null}>
+              <em>None</em>
+            </MenuItem>
+            <MenuItem value={GREATER_THAN}>Greater Than</MenuItem>
+            <MenuItem value={LESSER_THAN}>Lesser Than</MenuItem>
+          </Select>
+        </FormControl>
+      </FormGroup>
+    </div>
+  );
+};

src/sections/common/Literature/atoms.js

@@ -37,6 +37,9 @@ export const literatureState = atom({
     globalEntity: null,
     entities: [],
     selectedEntities: [],
+    year: null,
+    month: null,
+    comparator: null,
     litsIds: [],
     page: 0,
     pageSize: 5,
@@ -195,6 +198,9 @@ export const fetchSimilarEntities = ({
   cursor = null,
   category = [],
   entities = [],
+  year = null,
+  month = null,
+  comparator = null,
 }) => {
   const entityNames = category.length === 0 ? null : category;
   const ids = entities.map(c => c.object.id);
@@ -204,6 +210,9 @@ export const fetchSimilarEntities = ({
       cursor,
       id,
       ids,
+      year,
+      month,
+      comparator,
       threshold,
       size,
       entityNames,

src/sections/common/Literature/index.js

@@ -7,3 +7,5 @@ export const definition = {
 
 export { default as Summary } from './Summary';
 export { default as Body } from './Body';
+
+export { ComparatorEnum, GREATER_THAN, LESSER_THAN } from './utils';

src/sections/common/Literature/utils.js

@@ -0,0 +1,16 @@
+import { GraphQLEnumType } from 'graphql';
+
+export const GREATER_THAN = 'GreaterThan';
+export const LESSER_THAN = 'LesserThan';
+
+export const ComparatorEnum = new GraphQLEnumType({
+  name: 'ComparatorEnum',
+  values: {
+    GreaterThan: {
+      value: GREATER_THAN,
+    },
+    LesserThan: {
+      value: LESSER_THAN,
+    },
+  },
+});

src/sections/disease/Bibliography/BibliographyQuery.gql

@@ -1,56 +1,65 @@
 query SimilarEntitiesQuery(
-    $id: String!
-    $ids: [String!] = []
-    $threshold: Float = 0.5
-    $size: Int! = 15
-    $entityNames: [String!] = []
-    $cursor: String = null
-  ) {
-    disease(efoId: $id) {
+  $id: String!
+  $ids: [String!] = []
+  $year: Int = null
+  $month: Int = null
+  $comparator: ComparatorEnum = null
+  $threshold: Float = 0.5
+  $size: Int! = 15
+  $entityNames: [String!] = []
+  $cursor: String = null
+) {
+  disease(efoId: $id) {
+    id
+    name
+    similarEntities(
+      additionalIds: $ids
+      threshold: $threshold
+      size: $size
+      entityNames: $entityNames
+    ) {
+      score
       id
-      name
-      similarEntities(
-        additionalIds: $ids
-        threshold: $threshold
-        size: $size
-        entityNames: $entityNames
-      ) {
-        score
-        id
-        object {
-          ... on Target {
-            id
-            approvedSymbol
-          }
-          ... on Drug {
-            id
-            name
-          }
-          ... on Disease {
-            id
-            name
-          }
+      object {
+        ... on Target {
+          id
+          approvedSymbol
+        }
+        ... on Drug {
+          id
+          name
+        }
+        ... on Disease {
+          id
+          name
         }
       }
-      literatureOcurrences(additionalIds: $ids, cursor: $cursor) {
-        count
-        cursor
-        rows {
-          pmid
-          pmcid
-          publicationDate
-          sentences {
-            section
-            matches {
-              mappedId
-              matchedLabel
-              sectionStart
-              sectionEnd
-              startInSentence
-              endInSentence
-            }
+    }
+    literatureOcurrences(
+      additionalIds: $ids
+      cursor: $cursor
+      year: $year
+      month: $month
+      comparator: $comparator
+    ) {
+      count
+      cursor
+      rows {
+        pmid
+        pmcid
+        publicationDate
+        sentences {
+          section
+          matches {
+            mappedId
+            matchedLabel
+            sectionStart
+            sectionEnd
+            startInSentence
+            endInSentence
           }
         }
       }
     }
-  }
+  }
+}