SCRUM-3853 add sorting and filtering to DiseaseToModelTable

alliance-genome · May 2, 2024 · d1080ca · d1080ca
1 parent cf02f88
commit d1080ca
Showing 1 changed file with 40 additions and 3 deletions.
diff --git a/src/containers/diseasePage/DiseaseToModelTable.js b/src/containers/diseasePage/DiseaseToModelTable.js
@@ -8,7 +8,9 @@ import {
 } from '../../components/dataTable';
 import ExperimentalConditionCellCuration from '../../components/dataTable/ExperimentalConditionCellCuration';
 import GeneticModifiersCellCuration from '../../components/dataTable/GeneticModifiersCellCuration';
-import { buildProvidersWithUrl, getIdentifier } from '../../components/dataTable/utils';
+import { buildProvidersWithUrl, getIdentifier, getDistinctFieldValue } from '../../components/dataTable/utils';
+import { compareByFixedOrder } from '../../lib/utils';
+import { SPECIES_NAME_ORDER } from '../../constants';
 import useDataTableQuery from '../../hooks/useDataTableQuery';
 import SpeciesName from '../../components/SpeciesName';
 import AssociationType from '../../components/AssociationType';
@@ -48,6 +50,7 @@ const DiseaseToModelTable = ({id}) => {
           </small>
         </>
       ),
+      filterable: true,
       filterName: 'modelName',
       headerStyle: {width: '280px'},
     },
@@ -57,64 +60,83 @@ const DiseaseToModelTable = ({id}) => {
       formatter: species => <SpeciesCell species={species} />,
       filterFormatter: speciesName => <SpeciesName>{speciesName}</SpeciesName>,
       headerStyle: {width: '105px'},
+      filterName: 'species',
+      filterable: getDistinctFieldValue(resolvedData, 'species').sort(compareByFixedOrder(SPECIES_NAME_ORDER)),
+      filterType: 'checkbox',
     },
     {
       dataField: 'experimentalConditionList',
       text: 'Experimental condition',
       formatter: conditions => <ExperimentalConditionCellCuration conditions={conditions} />,
       headerStyle: {width: '220px'},
+      filterName: "experimentalCondition",
+      filterable: true,
     },
     {
       dataField: 'generatedRelationString',
       text: 'Association',
       formatter: type => <AssociationType type={type} />,
       filterFormatter: type => <AssociationType type={type} />,
       headerStyle: {width: '120px'},
+      filterName: 'associationType',
+      filterable: getDistinctFieldValue(resolvedData, 'associationType'),
+      filterType: 'checkbox',
     },
     {
       dataField: 'diseaseQualifiers',
       text: 'Disease Qualifiers',
       headerStyle: { width: '150px' },
       formatter: qualifiers => <DiseaseQualifiersColumn qualifiers={qualifiers}/>,
+      filterable: getDistinctFieldValue(resolvedData, 'diseaseQualifiers'),
+      filterName: 'diseaseQualifier',
+      filterType: 'checkbox',
     },
     {
       dataField: 'disease',
       text: 'Disease',
       headerStyle: { width: '150px' },
       formatter: (curie, row) => <DiseaseLinkCuration disease={row.object} />,
+      filterable: true,
     },
     {
       dataField: 'conditionModifierList',
       text: 'Condition Modifier',
       formatter: conditions => <ExperimentalConditionCellCuration conditions={conditions} />,
       headerStyle: {width: '220px'},
+      filterName: "conditionModifier",
+      filterable: true,
     },
     {
       dataField: 'geneticModifierList',
       text: 'Genetic Modifier',
       formatter: (modifiers, row) => <GeneticModifiersCellCuration relation={row.geneticModifierRelation} modifiers={modifiers} />,
       headerStyle: {width: '220px'},
+      filterName: "geneticModifier",
+      filterable: true,
     },
     {
       dataField: 'evidenceCodes',
       text: 'Evidence',
-      formatter: codes => <EvidenceCodesCellCuration evidenceCodes={codes} />,
       headerStyle: {width: '100px'},
       filterName: 'evidenceCode',
+      formatter: (codes) => <EvidenceCodesCellCuration evidenceCodes={codes}/>,
+      filterable: true,
     },
     {
       dataField: 'providers',
       text: 'Source',
       formatter: providers => providers && <ProvidersCellCuration providers={providers} />,
       headerStyle: { width: '100px' },
       filterName: 'dataProvider',
+      filterable: true,
     },
     {
       dataField: 'pubmedPubModIDs',
       text: 'References',
       formatter: (pubModIds) => <ReferencesCellCuration pubModIds={pubModIds}/>,
       headerStyle: {width: '150px'},
-      filterName: 'reference'
+      filterName: 'reference',
+      filterable: true,
     }
   ];
 
@@ -124,6 +146,20 @@ const DiseaseToModelTable = ({id}) => {
     ...association,
   }));
 
+  const sortOptions = [
+    {
+      value: 'disease',
+      label: 'Disease',
+    },
+    {
+      value: 'model',
+      label: 'Model',
+    },
+    {
+      value: 'species',
+      label: 'Species',
+    },
+  ];
 
   return (
     <DataTable
@@ -132,6 +168,7 @@ const DiseaseToModelTable = ({id}) => {
       data={data}
       downloadUrl={`/api/disease/${id}/models/download`}
       keyField='primaryKey'
+      sortOptions={sortOptions}
     />
   );
 };