feat: SKFP-1246 add system for data imaging column preset (#4119)

package.json

@@ -58,7 +58,7 @@
     "@babel/core": "^7.16.0",
     "@dnd-kit/core": "^4.0.3",
     "@dnd-kit/sortable": "^5.1.0",
-    "@ferlab/ui": "^10.7.3",
+    "@ferlab/ui": "^10.8.0",
     "@loadable/component": "^5.15.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@react-keycloak/core": "^3.2.0",

src/graphql/files/models.ts

@@ -42,6 +42,23 @@ export interface ISequencingExperiment {
   is_paired_end: boolean;
 }
 
+export interface IDevice {
+  device_id: string;
+  magnetic_field_strength: string;
+  manufacturer: string;
+  model_name: string;
+  software_version: string;
+}
+
+export interface IImagingData {
+  acquisition_number: string;
+  device?: IDevice;
+  info_body_part_examined: string;
+  modality: string;
+  scan_id: string;
+  subject_reference: string;
+}
+
 export interface IFileEntity {
   key?: string;
   id: string;
@@ -66,6 +83,9 @@ export interface IFileEntity {
     file_name: string;
   };
   is_harmonized: boolean;
+  imaging_sequence_type?: string;
+  imaging_technique?: string;
+  imaging?: IImagingData;
   nb_participants: number;
   nb_biospecimens: number;
   participants: IArrangerResultsTree<IParticipantEntity>;

src/graphql/files/queries.ts

@@ -23,6 +23,22 @@ export const SEARCH_FILES_QUERY = gql`
             repository
             nb_participants
             nb_biospecimens
+            imaging_technique
+            imaging_sequence_type
+            imaging {
+              acquisition_number
+              device {
+                device_id
+                magnetic_field_strength
+                manufacturer
+                model_name
+                software_version
+              }
+              info_body_part_examined
+              modality
+              scan_id
+              subject_reference
+            }
             fhir_document_reference
             index {
               urls
@@ -181,7 +197,22 @@ export const GET_FILE_ENTITY = gql`
             }
             nb_biospecimens
             nb_participants
-
+            imaging_technique
+            imaging_sequence_type
+            imaging {
+              acquisition_number
+              device {
+                device_id
+                magnetic_field_strength
+                manufacturer
+                model_name
+                software_version
+              }
+              info_body_part_examined
+              modality
+              scan_id
+              subject_reference
+            }
             participants {
               hits {
                 total

src/locales/en.ts

@@ -127,6 +127,7 @@ const en = {
       genericError: 'An error occured',
     },
     proTable: {
+      columnPreset: 'Column Preset',
       clear: 'Clear',
       clearFilters: 'Clear filters',
       noResults: 'No Results',
@@ -2002,10 +2003,21 @@ const en = {
       files: 'Files',
       format: 'Format',
       hash: 'Hash',
+      imaging: {
+        body_part: 'Body Part',
+        device: {
+          field_strength: 'Field Str.',
+          id: 'Device ID',
+          manufacturer: 'Device Manufacturer',
+          model: 'Device Model',
+        },
+        modality: 'Modality',
+        sequence_type: 'Imaging Sequence Type',
+        technique: 'Imaging Technique',
+      },
       repository: 'Repository',
       size: 'Size',
       type: 'Type',
-
       url: 'URL',
     },
     biospecimen: {

src/services/api/user/models.ts

@@ -18,6 +18,7 @@ export type TUserConfig = {
       participants?: TUserTableConfig;
       biospecimens?: TUserTableConfig;
       datafiles?: TUserTableConfig;
+      imaging?: TUserTableConfig;
     };
     summary?: {
       layouts?: TSerializedResizableGridLayoutConfig[];

src/store/passport/thunks.test.ts

@@ -25,6 +25,22 @@ describe(`${extractMetadata.name}()`, () => {
       nb_participants: 1,
       nb_biospecimens: 2,
       fhir_document_reference: 'http://localhost:8000/DocumentReference?identifier=GF_000G102V',
+      imaging_technique: 'Special technique',
+      imaging_sequence_type: 'a sequence',
+      imaging: {
+        acquisition_number: 'acq-0-session-1-PurrPurr',
+        device: {
+          device_id: 'de-ny4ni8hp3x',
+          magnetic_field_strength: '130542',
+          manufacturer: 'GE',
+          model_name: 'Skyra',
+          software_version: 'syngo MR B17',
+        },
+        info_body_part_examined: 'CTSPINE',
+        modality: 'CT',
+        scan_id: 'is-7rjndqwx8m',
+        subject_reference: 'pt-grmpycat',
+      },
       participants: {
         hits: {
           edges: [

src/utils/translation.ts

@@ -269,6 +269,17 @@ export const getQueryBuilderDictionary = (
 
 // ADD intl trad
 export const getFacetsDictionary = () => ({
+  imaging_sequence_type: 'Sequence Type',
+  imaging_technique: 'Technique',
+  imaging: {
+    modality: 'Image Modality',
+    info_body_part_examined: 'Body Part Examined',
+    device: {
+      magnetic_field_strength: 'Magnetic Field Strength',
+      manufacturer: 'Device Manufacturer',
+      model_name: 'Device Model',
+    },
+  },
   study: {
     study_name: 'Study Name',
     study_code: 'Study Code',

src/views/DataExploration/components/PageContent/tabs/DataFiles/ColumnSelectorHeader/index.module.css

@@ -0,0 +1,6 @@
+.presetSelectorContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-bottom: 0
+}

src/views/DataExploration/components/PageContent/tabs/DataFiles/ColumnSelectorHeader/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Select } from 'antd';
+
+import SearchLabel from 'components/uiKit/search/SearchLabel';
+
+import { PresetOptions } from '../index';
+
+import styles from './index.module.css';
+
+type OwnProps = {
+  activePreset: PresetOptions;
+  handlePresetSelection: (preset: PresetOptions) => void;
+};
+
+const ColumnSelectorHeader = ({ activePreset, handlePresetSelection }: OwnProps) => {
+  const options: Record<PresetOptions, string> = {
+    datafiles: 'Data Files',
+    imaging: 'Imaging',
+  };
+
+  return (
+    <div className={styles.presetSelectorContainer}>
+      <SearchLabel title={intl.get('global.proTable.columnPreset')} />
+      <Select
+        value={activePreset}
+        onChange={(value) => handlePresetSelection(value as PresetOptions)}
+        options={Object.keys(options).map((key) => ({
+          value: key,
+          label: options[key as PresetOptions],
+        }))}
+        size="small"
+      />
+    </div>
+  );
+};
+
+export default ColumnSelectorHeader;

src/views/DataExploration/components/PageContent/tabs/DataFiles/index.test.tsx

@@ -1,6 +1,7 @@
 import { IFileEntity } from 'graphql/files/models';
 
-import { getDefaultColumns } from './index';
+import { getDefaultColumns, PresetOptions } from './index';
+
 describe('getDefaultColumns', () => {
   let fileEntity = {} as IFileEntity;
 
@@ -99,7 +100,7 @@ describe('getDefaultColumns', () => {
   });
 
   test('sequencing experiment render should only disply first element', () => {
-    const defaultColumns = getDefaultColumns([], false, false);
+    const defaultColumns = getDefaultColumns([], false, false, PresetOptions.Datafiles);
     const result = defaultColumns.filter(
       (column) => column.key === 'sequencing_experiment.experiment_strategy',
     );
@@ -111,7 +112,7 @@ describe('getDefaultColumns', () => {
   });
 
   test('sequencing experiment render should display - when no data available', () => {
-    const defaultColumns = getDefaultColumns([], false, false);
+    const defaultColumns = getDefaultColumns([], false, false, PresetOptions.Datafiles);
     const result = defaultColumns.filter(
       (column) => column.key === 'sequencing_experiment.experiment_strategy',
     );