molgenis · bartcharbon · Jul 1, 2022
diff --git a/src/components/VariantsSampleTable.tsx b/src/components/VariantsSampleTable.tsx
@@ -11,6 +11,8 @@ import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { FieldHeader } from "./FieldHeader";
 import { Abbr } from "./Abbr";
 import { abbreviateHeader } from "../utils/field";
+import { Checkbox, CheckboxEvent } from "./Checkbox";
+import { getRecordKey } from "../utils/utils";
 
 export const VariantsSampleTable: Component<{
   item: Item<Sample>;
@@ -19,6 +21,8 @@ export const VariantsSampleTable: Component<{
   recordsMetadata: Metadata;
   nestedFields: FieldMetadata[];
   htsFileMeta: HtsFileMetadata;
+  onSelectionChange: (event: CheckboxEvent) => void;
+  selected?: string[];
 }> = (props) => {
   const samples = createMemo(() => [props.item.data, ...props.pedigreeSamples.map((item) => item.data)]);
 
@@ -29,6 +33,9 @@ export const VariantsSampleTable: Component<{
         <table class="table is-narrow">
           <thead>
             <tr>
+              <th>
+                <i class="fas fa-download" />
+              </th>
               <th>Position</th>
               <th>Reference</th>
               <For each={samples()}>
@@ -52,6 +59,15 @@ export const VariantsSampleTable: Component<{
             <For each={props.records}>
               {(record) => (
                 <tr>
+                  <td>
+                    {/* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */}
+                    <Checkbox
+                      value={getRecordKey(record.data)}
+                      label=""
+                      onChange={props.onSelectionChange}
+                      checked={props.selected !== undefined && props.selected.indexOf(getRecordKey(record.data)) !== -1}
+                    />
+                  </td>
                   <td>
                     <Link href={`/samples/${props.item.id}/variants/${record.id}`}>
                       <Chrom value={record.data.c} />

diff --git a/src/components/record/RecordDownload.tsx b/src/components/record/RecordDownload.tsx
@@ -1,17 +1,36 @@
 import { Component } from "solid-js";
 import { Query, Sample } from "@molgenis/vip-report-api/src/Api";
-import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
+import { Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
 import api from "../../Api";
 import { Filter, writeVcf } from "@molgenis/vip-report-vcf/src/VcfWriter";
+import { getRecordKey } from "../../utils/utils";
 
-export const RecordDownload: Component<{ recordsMetadata: Metadata; query?: Query; samples?: Sample[] }> = (props) => {
+export const RecordDownload: Component<{
+  recordsMetadata: Metadata;
+  query?: Query;
+  samples?: Sample[];
+  selection?: string[];
+}> = (props) => {
   const filter = (): Filter | undefined =>
     props.samples ? { samples: props.samples.map((sample) => sample.person.individualId) } : undefined;
 
+  function recordSelected(record: Record) {
+    if (props.selection !== undefined) {
+      return props.selection.indexOf(getRecordKey(record)) !== -1;
+    }
+    return true;
+  }
+
   function onClick() {
     const handler = async () => {
       const records = await api.getRecords({ query: props.query, size: Number.MAX_SAFE_INTEGER });
-      const vcf = writeVcf({ metadata: props.recordsMetadata, data: records.items.map((item) => item.data) }, filter());
+      const vcf = writeVcf(
+        {
+          metadata: props.recordsMetadata,
+          data: records.items.filter((record) => recordSelected(record.data)).map((item) => item.data),
+        },
+        filter()
+      );
 
       const url = window.URL.createObjectURL(new Blob([vcf]));
       const link = document.createElement("a");

diff --git a/src/store/index.tsx b/src/store/index.tsx
@@ -12,6 +12,7 @@ type AppStateVariants = {
   searchQuery?: string;
   filterQueries?: FilterQueries;
   sort?: SortOrder | null; // null: do not sort. undefined: sort undefined
+  selection: string[];
 };
 
 export type AppState = {
@@ -33,6 +34,7 @@ export type AppActions = {
   setSampleVariantsPage(sample: Item<Sample>, page: number): void;
   setSampleVariantsPageSize(sample: Item<Sample>, pageSize: number): void;
   setSampleVariantsSearchQuery(sample: Item<Sample>, searchQuery: string): void;
+  updateVariantsSelection(sample: Item<Sample>, key: string, action: string): void;
   clearSampleVariantsSearchQuery(sample: Item<Sample>): void;
   setSampleVariantsFilterQuery(sample: Item<Sample>, query: QueryClause): void;
   clearSampleVariantsFilterQuery(sample: Item<Sample>, selector: Selector): void;
@@ -72,7 +74,10 @@ export const Provider: ParentComponent = (props) => {
       setState({
         variants: {
           ...(state.variants || {}),
-          filterQueries: { ...(state.variants?.filterQueries || {}), [selectorKey(query.selector)]: query },
+          filterQueries: {
+            ...((state.variants?.filterQueries as FilterQueries) || {}),
+            [selectorKey(query.selector)]: query,
+          },
         },
       });
     },
@@ -127,7 +132,10 @@ export const Provider: ParentComponent = (props) => {
           [sample.id]: {
             variants: {
               ...variants,
-              filterQueries: { ...(variants.filterQueries || {}), [selectorKey(query.selector)]: query },
+              filterQueries: {
+                ...((variants.filterQueries as FilterQueries) || {}),
+                [selectorKey(query.selector)]: query,
+              },
               page: undefined,
             },
           },
@@ -142,7 +150,10 @@ export const Provider: ParentComponent = (props) => {
           [sample.id]: {
             variants: {
               ...getVariants(sample),
-              filterQueries: { ...(variants.filterQueries || {}), [selectorKey(selector)]: undefined },
+              filterQueries: {
+                ...((variants.filterQueries as FilterQueries) || {}),
+                [selectorKey(selector)]: undefined,
+              },
               page: undefined,
             },
           },
@@ -154,6 +165,33 @@ export const Provider: ParentComponent = (props) => {
         samples: { ...(state.samples || {}), [sample.id]: { variants: { ...getVariants(sample), sort } } },
       });
     },
+    updateVariantsSelection(sample: Item<Sample>, key: string, action: "ADD" | "REMOVE") {
+      let selection: string[] = state.samples ? Object.assign([], state.samples[sample.id]?.variants.selection) : [];
+      if (action === "ADD") {
+        if (selection) {
+          selection.push(key);
+        } else {
+          selection = [key];
+        }
+      } else {
+        const index = selection.indexOf(key);
+        if (index === -1) {
+          throw new Error("Attempting to remove non-existing key from  selection.");
+        }
+        selection.splice(index, 1);
+      }
+      setState({
+        samples: {
+          ...(state.samples || {}),
+          [sample.id]: {
+            variants: {
+              ...getVariants(sample),
+              selection,
+            },
+          },
+        },
+      });
+    },
   };
   const store: AppStore = [state, actions];
 

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -1,3 +1,9 @@
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+
 export function arrayEquals<T>(a: T[], b: T[]) {
   return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]);
 }
+
+export function getRecordKey(record: Record) {
+  return `${record.c}_${record.p}_${record.r}_${record.a.join("&")}`;
+}
diff --git a/src/views/SampleVariants.tsx b/src/views/SampleVariants.tsx
@@ -25,6 +25,7 @@ import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
 import { getSampleLabel } from "../utils/sample";
 import { FilterChangeEvent, FilterClearEvent } from "../components/filter/Filter";
 import { arrayEquals } from "../utils/utils";
+import { CheckboxEvent } from "../components/Checkbox";
 
 export const SampleVariantsView: Component = () => {
   const { sample } = useRouteData<SampleRouteData>();
@@ -122,6 +123,7 @@ export const SampleVariants: Component<{
       "Consequence",
       "SYMBOL",
       "InheritanceModesGene",
+      "IncompletePenetrance",
       "HPO",
       "HGVSc",
       "HGVSp",
@@ -162,6 +164,9 @@ export const SampleVariants: Component<{
     actions.clearSampleVariantsFilterQuery(props.sample, event.selector);
   const onSortChange = (event: SortEvent) => actions.setSampleVariantsSort(props.sample, event.order);
   const onSortClear = () => actions.setSampleVariantsSort(props.sample, null);
+  const onSelectionchange = (event: CheckboxEvent) => {
+    actions.updateVariantsSelection(props.sample, event.value, "ADD");
+  };
 
   const params = (): Params => {
     return {
@@ -231,6 +236,7 @@ export const SampleVariants: Component<{
                     recordsMetadata={props.recordsMeta}
                     query={params().query}
                     samples={[props.sample.data, ...props.pedigreeSamples.map((item) => item.data)]}
+                    selection={getStateVariants()?.selection}
                   />
                 </div>
               </div>
@@ -247,6 +253,8 @@ export const SampleVariants: Component<{
                 recordsMetadata={props.recordsMeta}
                 nestedFields={infoFields()}
                 htsFileMeta={props.htsFileMeta}
+                onSelectionChange={onSelectionchange}
+                selected={getStateVariants() !== undefined ? getStateVariants()?.selection : []}
               />
             )}
           </Show>