Merge pull request #118 from molgenis/feat/depthCheckbox

Add checkbox to filter on read depth > 20

package.json

@@ -10,7 +10,7 @@
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
-    "@molgenis/vip-report-api": "0.6.0",
+    "@molgenis/vip-report-api": "0.7.0",
     "bootstrap-vue": "^2.15.0",
     "core-js": "^3.6.5",
     "file-saver": "^2.0.2",

src/components/RecordTable.vue

@@ -292,6 +292,7 @@ export default Vue.extend({
       'isRecordsContainPhenotypes',
       'isSamplesContainInheritance',
       'isSamplesContainDenovo',
+      'isSamplesContainDepth',
       'sampleMaternal',
       'samplePaternal'
     ]),
@@ -302,7 +303,8 @@ export default Vue.extend({
       'selectedSamplePhenotypes',
       'filterRecordsByPhenotype',
       'filterRecordsByInheritance',
-      'filterRecordsByDenovo'
+      'filterRecordsByDenovo',
+      'filterRecordsByDepth'
     ]),
     genomeAssembly(): string {
       return this.metadata.htsFile.genomeAssembly;
@@ -392,6 +394,11 @@ export default Vue.extend({
       if (this.isSamplesContainDenovo && this.filterRecordsByDenovo) {
         queries.push(this.createSampleDenovoQuery());
       }
+      if (this.isSamplesContainDepth && this.filterRecordsByDepth) {
+        queries.push(this.createSampleReadDepthQuery());
+      }
+
+
       // todo: translate ctx filter param to query
 
       let query: Query | ComposedQuery | undefined;
@@ -448,6 +455,13 @@ export default Vue.extend({
         args: 1
       };
     },
+    createSampleReadDepthQuery(): Query {
+      return {
+        selector: ['s', this.sample.index, 'f', 'DP'],
+        operator: '>=',
+        args: 20
+      };
+    },
     hasSamplePhenotypes(): boolean {
       return this.selectedSamplePhenotypes !== null && this.selectedSamplePhenotypes.page.totalElements > 0;
     },
@@ -575,6 +589,10 @@ export default Vue.extend({
     '$store.state.filterRecordsByDenovo'() {
       this.page.currentPage = 1;
       (this.$refs.table as BTable).refresh();
+    },
+    '$store.state.filterRecordsByDepth'() {
+      this.page.currentPage = 1;
+      (this.$refs.table as BTable).refresh();
     }
   }
 });

src/components/RecordTableControls.vue

@@ -18,6 +18,12 @@
       @change="this.setFilterRecordsByDenovo"
       >{{ $t('matchDenovo') }}
     </b-form-checkbox>
+    <b-form-checkbox
+        v-if="isSamplesContainDepth"
+        :checked="filterRecordsByDepth"
+        @change="this.setFilterRecordsByDepth"
+    >{{ $t('matchDepth') }}
+    </b-form-checkbox>
   </div>
 </template>
 
@@ -27,11 +33,11 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 
 export default Vue.extend({
   computed: {
-    ...mapGetters(['isRecordsContainPhenotypes', 'isSamplesContainInheritance', 'isSamplesContainDenovo']),
-    ...mapState(['filterRecordsByPhenotype', 'filterRecordsByInheritance', 'filterRecordsByDenovo'])
+    ...mapGetters(['isRecordsContainPhenotypes', 'isSamplesContainInheritance', 'isSamplesContainDenovo', 'isSamplesContainDepth']),
+    ...mapState(['filterRecordsByPhenotype', 'filterRecordsByInheritance', 'filterRecordsByDenovo', 'filterRecordsByDepth'])
   },
   methods: {
-    ...mapActions(['setFilterRecordsByPhenotype', 'setFilterRecordsByInheritance', 'setFilterRecordsByDenovo'])
+    ...mapActions(['setFilterRecordsByPhenotype', 'setFilterRecordsByInheritance', 'setFilterRecordsByDenovo', 'setFilterRecordsByDepth'])
   }
 });
 </script>

src/locales/en.json

@@ -58,6 +58,7 @@
   "matchPhenotype": "Only display records that match sample phenotype(s)",
   "matchInheritance": "Only display records that match inheritance",
   "matchDenovo": "Only display records that are denovo",
+  "matchDepth": "Only display records that have a read depth of 20 or higher",
   "maleAffected": "Male, Affected.",
   "maleUnaffected": "Male, Unaffected.",
   "maleUnknown": "Male, Unknown affected status.",

src/store/actions.ts

@@ -89,6 +89,9 @@ export default {
   },
   setFilterRecordsByDenovo({ commit }: ActionContext<State, State>, value: boolean) {
     commit('setFilterRecordsByDenovo', value);
+  },
+  setFilterRecordsByDepth({ commit }: ActionContext<State, State>, value: boolean) {
+    commit('setFilterRecordsByDepth', value);
   }
 };
 

src/store/getters.ts

@@ -171,5 +171,18 @@ export default {
       hasSampleInheritance = vimFormat !== undefined;
     }
     return hasSampleInheritance;
+  },
+  /**
+   * Returns whether records contain read depth information.
+   */
+  isSamplesContainDepth: (state: State): boolean => {
+    let hasReadDepth;
+    if (state.metadata === null) {
+      hasReadDepth = false;
+    } else {
+      const dpFormat = state.metadata.records.format.find(item => item.id === 'DP');
+      hasReadDepth = dpFormat !== undefined;
+    }
+    return hasReadDepth;
   }
 };

src/store/mutations.ts

@@ -38,5 +38,8 @@ export default {
   },
   setFilterRecordsByDenovo(state: State, value: boolean) {
     state.filterRecordsByDenovo = value;
+  },
+  setFilterRecordsByDepth(state: State, value: boolean) {
+    state.filterRecordsByDepth = value;
   }
 };

src/store/state.ts

@@ -10,6 +10,7 @@ const state: State = {
   filterRecordsByPhenotype: true,
   filterRecordsByInheritance: true,
   filterRecordsByDenovo: false,
+  filterRecordsByDepth: false,
   annotations: null
 };
 

src/types/State.ts

@@ -12,5 +12,6 @@ export type State = {
   filterRecordsByPhenotype: boolean;
   filterRecordsByInheritance: boolean;
   filterRecordsByDenovo: boolean;
+  filterRecordsByDepth: boolean;
   annotations: Annotations | null;
 };

src/views/Samples.vue

@@ -20,7 +20,7 @@ export default Vue.extend({
   components: { SampleNavigation, SampleReport },
   computed: {
     ...mapGetters(['samples', 'getSampleById']),
-    ...mapState(['selectedSample', 'selectedSamplePhenotypes', 'selectedSampleInheritance', 'selectedSampleDenovo'])
+    ...mapState(['selectedSample', 'selectedSamplePhenotypes'])
   },
   methods: {
     ...mapActions(['loadMetadata', 'loadSamples', 'selectSample']),

tests/unit/store/actions.spec.ts

@@ -150,3 +150,11 @@ test('set filter records by denovo status', async done => {
   expect(commit).toHaveBeenCalledWith('setFilterRecordsByDenovo', true);
   done();
 });
+
+
+test('set filter records by read depth', async done => {
+  const commit = jest.fn() as Commit;
+  actions.setFilterRecordsByDepth({ commit } as ActionContext<State, State>, true);
+  expect(commit).toHaveBeenCalledWith('setFilterRecordsByDepth', true);
+  done();
+});

tests/unit/store/getters.spec.ts

@@ -612,3 +612,13 @@ test('whether records contain denovo information. null.', () => {
   };
   expect(getters.isSamplesContainDenovo(testState)).toEqual(false);
 });
+
+test('whether records contain read depth information. null.', () => {
+  const metadata = null;
+
+  const testState: State = {
+    ...initialState,
+    metadata: metadata
+  };
+  expect(getters.isSamplesContainDepth(testState)).toEqual(false);
+});

tests/unit/store/mutations.spec.ts

@@ -64,3 +64,9 @@ test('set filter records by denovo', () => {
   mutations.setFilterRecordsByDenovo(testState, false);
   expect(testState.filterRecordsByDenovo).toBe(false);
 });
+
+test('set filter records by read depth', () => {
+  const testState: State = { ...initialState };
+  mutations.setFilterRecordsByDepth(testState, false);
+  expect(testState.filterRecordsByDepth).toBe(false);
+});