@molgenis/vip-report-template 6.0.1 → 6.1.1

package/src/components/VariantInfoNestedTable.tsx

@@ -6,7 +6,7 @@ import { FieldHeader } from "./FieldHeader";
 import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
 import { Item } from "@molgenis/vip-report-api/src/Api";
 import { isCsqInfo } from "../utils/csqUtils";
-import { Link, useLocation } from "@solidjs/router";
+import { useLocation } from "@solidjs/router";
 
 function isNonEmptyNestedInfoItem(nestedInfoField: FieldMetadata, index: number, value: Value[] | Value[][]): boolean {
   const infoField = nestedInfoField.nested?.items[index];
@@ -87,7 +87,7 @@ export const VariantInfoNestedTable: Component<{
                             {isNonEmptyNestedInfoItem(props.infoField, i(), props.infoValue) && (
                               <td>
                                 {isCsqInfo(infoFieldItem, "Consequence") ? (
-                                  <Link href={`${useLocation().pathname}/consequences/${j()}`}>
+                                  <a href={`${useLocation().pathname}/consequences/${j()}`}>
                                     <Info
                                       info={{
                                         value: Array.isArray(value) ? value[i()] : null,
@@ -97,7 +97,7 @@ export const VariantInfoNestedTable: Component<{
                                       infoMeta={infoFieldItem}
                                       context={{}}
                                     />
-                                  </Link>
+                                  </a>
                                 ) : (
                                   <Info
                                     info={{

package/src/components/VariantsSampleTable.tsx

@@ -2,7 +2,6 @@ import { Genotype, Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
 import { Ref } from "./record/Ref";
 import { Chrom } from "./record/Chrom";
 import { Pos } from "./record/Pos";
-import { Link } from "@solidjs/router";
 import { HtsFileMetadata, Item, Sample } from "@molgenis/vip-report-api/src/Api";
 import { GenotypeField } from "./record/format/GenotypeField";
 import { InfoCollapsablePane } from "./InfoCollapsablePane";
@@ -11,6 +10,14 @@ import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { FieldHeader } from "./FieldHeader";
 import { Abbr } from "./Abbr";
 import { abbreviateHeader } from "../utils/field";
+import {
+  getSampleAffectedStatusLabel,
+  getSampleFamilyMembersWithoutParents,
+  getSampleFather,
+  getSampleLabel,
+  getSampleMother,
+  getSampleSexLabel,
+} from "../utils/sample";
 
 export const VariantsSampleTable: Component<{
   item: Item<Sample>;
@@ -28,26 +35,16 @@ export const VariantsSampleTable: Component<{
   const [otherFamilyMembers, setOtherFamilyMembers] = createSignal<Sample[]>([]);
 
   onMount(() => {
-    const familyMembers: Sample[] = [];
     setProband(props.item.data);
-    samples().forEach((sample) => {
-      if (
-        (proband() as Sample).person.maternalId !== "0" &&
-        sample.person.individualId === (proband() as Sample).person.maternalId
-      ) {
-        setMother(sample);
-      } else if (
-        (proband() as Sample).person.paternalId !== "0" &&
-        sample.person.individualId === (proband() as Sample).person.paternalId
-      ) {
-        setFather(sample);
-      } else if (sample.person.individualId !== (proband() as Sample).person.individualId) {
-        familyMembers.push(sample);
-      }
-    });
-    setOtherFamilyMembers(familyMembers);
+    setMother(getSampleMother(proband() as Sample, samples()));
+    setFather(getSampleFather(proband() as Sample, samples()));
+    setOtherFamilyMembers(getSampleFamilyMembersWithoutParents(proband() as Sample, samples()));
   });
 
+  function getSampleHeaderDescription(sample: Sample): string {
+    return `${getSampleLabel(sample)}: ${getSampleSexLabel(sample)}, ${getSampleAffectedStatusLabel(sample)}`;
+  }
+
   return (
     <div style={{ display: "grid" }}>
       {/* workaround for https://github.com/jgthms/bulma/issues/2572#issuecomment-523099776 */}
@@ -60,48 +57,28 @@ export const VariantsSampleTable: Component<{
               <Show when={proband()} keyed>
                 {(proband) => (
                   <th>
-                    <Abbr
-                      title={`${
-                        proband.person.individualId
-                      }: ${proband.person.sex.toLowerCase()}, ${proband.person.affectedStatus.toLowerCase()}`}
-                      value="Proband"
-                    />
+                    <Abbr title={getSampleHeaderDescription(proband)} value="Proband" />
                   </th>
                 )}
               </Show>
               <Show when={mother()} keyed>
                 {(mother) => (
                   <th>
-                    <Abbr
-                      title={`${
-                        mother.person.individualId
-                      }: ${mother.person.sex.toLowerCase()}, ${mother.person.affectedStatus.toLowerCase()}`}
-                      value="Mother"
-                    />
+                    <Abbr title={getSampleHeaderDescription(mother)} value="Mother" />
                   </th>
                 )}
               </Show>
               <Show when={father()} keyed>
                 {(father) => (
                   <th>
-                    <Abbr
-                      title={`${
-                        father.person.individualId
-                      }: ${father.person.sex.toLowerCase()}, ${father.person.affectedStatus.toLowerCase()}`}
-                      value="Father"
-                    />
+                    <Abbr title={getSampleHeaderDescription(father)} value="Father" />
                   </th>
                 )}
               </Show>
               <For each={otherFamilyMembers()}>
                 {(sample: Sample) => (
                   <th>
-                    <Abbr
-                      title={`${
-                        sample.person.individualId
-                      }: ${sample.person.sex.toLowerCase()}, ${sample.person.affectedStatus.toLowerCase()}`}
-                      value={abbreviateHeader(sample.person.individualId)}
-                    />
+                    <Abbr title={getSampleHeaderDescription(sample)} value={abbreviateHeader(getSampleLabel(sample))} />
                   </th>
                 )}
               </For>
@@ -115,11 +92,11 @@ export const VariantsSampleTable: Component<{
               {(record) => (
                 <tr>
                   <td>
-                    <Link href={`/samples/${props.item.id}/variants/${record.id}`}>
+                    <a href={`/samples/${props.item.id}/variants/${record.id}`}>
                       <Chrom value={record.data.c} />
                       <span>:</span>
                       <Pos value={record.data.p} />
-                    </Link>
+                    </a>
                   </td>
                   <td>
                     <Ref value={record.data.r} isAbbreviate={true} />

package/src/components/VariantsTable.tsx

@@ -9,7 +9,6 @@ import { Qual } from "./record/Qual";
 import { Filter } from "./record/Filter";
 import { Info } from "./record/Info";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
-import { Link } from "@solidjs/router";
 import { HtsFileMetadata, Item } from "@molgenis/vip-report-api/src/Api";
 import { FieldHeader } from "./FieldHeader";
 import { InfoCollapsablePane } from "./InfoCollapsablePane";
@@ -76,9 +75,9 @@ export const VariantsTable: Component<{
                     <Chrom value={record.data.c} />
                   </td>
                   <td>
-                    <Link href={`/variants/${record.id}`}>
+                    <a href={`/variants/${record.id}`}>
                       <Pos value={record.data.p} />
-                    </Link>
+                    </a>
                   </td>
                   <td>
                     <Id value={record.data.i} />

package/src/components/filter/Filter.tsx

@@ -2,7 +2,6 @@ import { Component, Match, Switch } from "solid-js";
 import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
 import { FilterCategorical } from "./FilterCategorical";
 import { FilterIntegerGq } from "./FilterIntegerGq";
-import { FilterIntegerDp } from "./FilterIntegerDp";
 import { Item, Query, Sample } from "@molgenis/vip-report-api/src/Api";
 import { FilterClinVar } from "./FilterClinVar";
 import { isAnyCsqInfo } from "../../utils/csqUtils";
@@ -28,9 +27,6 @@ export const Filter: Component<FilterProps> = (props) => {
         <Match when={props.field.id === "GQ"}>
           <FilterIntegerGq {...props} />
         </Match>
-        <Match when={props.field.id === "DP"}>
-          <FilterIntegerDp {...props} />
-        </Match>
         <Match when={props.field.id === "VIAB"}>
           <FilterAllelicBalance {...props} />
         </Match>

package/src/components/record/format/GenotypeField.tsx

@@ -15,18 +15,8 @@ function isAllelicImbalance(genotype: Genotype, allelicBalance: number | undefin
   return false;
 }
 
-function getTitle(lowReadDepth: boolean, allelicImbalance: boolean) {
-  let title = "";
-  if (lowReadDepth) {
-    title = "Read depth < 20";
-  }
-  if (allelicImbalance) {
-    if (lowReadDepth) {
-      title = `${title}, `;
-    }
-    title = `${title}Allelic imbalance`;
-  }
-  return title;
+function getTitle(allelicImbalance: boolean) {
+  return allelicImbalance ? `Allelic imbalance` : ``;
 }
 
 export const GenotypeField: Component<{
@@ -38,7 +28,6 @@ export const GenotypeField: Component<{
   readDepth: number | undefined | null;
 }> = (props) => {
   const allelicImbalance: boolean = isAllelicImbalance(props.genotype, props.allelicBalance);
-  const lowReadDepth = props.readDepth !== undefined && props.readDepth !== null && props.readDepth < 20;
   return (
     <>
       <For each={props.genotype.a}>
@@ -54,8 +43,8 @@ export const GenotypeField: Component<{
           </>
         )}
       </For>
-      <Show when={lowReadDepth || allelicImbalance}>
-        <abbr title={getTitle(lowReadDepth, allelicImbalance)} class="ml-1 is-clickable">
+      <Show when={allelicImbalance}>
+        <abbr title={getTitle(allelicImbalance)} class="ml-1 is-clickable">
           <i class="fas fa-circle-exclamation has-text-danger" />
         </abbr>
       </Show>

package/src/index.tsx

@@ -18,6 +18,19 @@ import {
   faSearch,
 } from "@fortawesome/free-solid-svg-icons";
 import { Provider } from "./store";
+import { ErrorBoundary } from "solid-js";
+import { Error } from "./components/Error";
+import { HashRouter, Route } from "@solidjs/router";
+import { Home } from "./views/Home";
+import { Samples } from "./views/Samples";
+import { Sample } from "./views/Sample";
+import { SampleVariantsView } from "./views/SampleVariants";
+import { SampleVariantView } from "./views/SampleVariant";
+import { SampleVariantConsequenceView } from "./views/SampleVariantConsequence";
+import { VariantsView } from "./views/Variants";
+import { Variant } from "./views/Variant";
+import { VariantConsequence } from "./views/VariantConsequence";
+import { Help } from "./views/Help";
 
 library.add(
   faAngleDown,
@@ -46,7 +59,36 @@ if (document.readyState === "complete") {
 render(
   () => (
     <Provider>
-      <App />
+      <ErrorBoundary fallback={(err) => <Error error={err as unknown} />}>
+        <HashRouter root={App}>
+          <Route path="/" component={Home} />
+          <Route path="/samples">
+            <Route path="/" component={Samples} />
+            <Route path="/:sampleId">
+              <Route path="/" component={Sample} />
+              <Route path="/variants">
+                <Route path="/" component={SampleVariantsView} />
+                <Route path="/:variantId">
+                  <Route path="/" component={SampleVariantView} />
+                  <Route path="/consequences">
+                    <Route path="/:consequenceId" component={SampleVariantConsequenceView} />
+                  </Route>
+                </Route>
+              </Route>
+            </Route>
+          </Route>
+          <Route path="/variants">
+            <Route path="/" component={VariantsView} />
+            <Route path="/:variantId">
+              <Route path="/" component={Variant} />
+              <Route path="/consequences">
+                <Route path="/:consequenceId" component={VariantConsequence} />
+              </Route>
+            </Route>
+          </Route>
+          <Route path="/help" component={Help} />
+        </HashRouter>
+      </ErrorBoundary>
     </Provider>
   ),
   document.body,

package/src/store/index.tsx

@@ -1,4 +1,3 @@
-import { hashIntegration, Router } from "@solidjs/router";
 import { Context, createContext, ParentComponent, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 import { Item, Query, Sample, SortOrder } from "@molgenis/vip-report-api/src/Api";
@@ -67,16 +66,17 @@ export const Provider: ParentComponent = (props) => {
       setState({ variants: { ...(state.variants || {}), page } });
     },
     setVariantsPageSize(pageSize: number) {
-      setState({ variants: { ...(state.variants || {}), pageSize } });
+      setState({ variants: { ...(state.variants || {}), pageSize, page: undefined } });
     },
     setVariantsSearchQuery(searchQuery: string) {
-      setState({ variants: { ...(state.variants || {}), searchQuery } });
+      setState({ variants: { ...(state.variants || {}), searchQuery, page: undefined } });
     },
     setVariantsFilterQuery(query: Query, key: string) {
       setState({
         variants: {
           ...(state.variants || {}),
           filterQueries: { ...(state.variants?.filterQueries || {}), [key]: query },
+          page: undefined,
         },
       });
     },
@@ -85,6 +85,7 @@ export const Provider: ParentComponent = (props) => {
         variants: {
           ...(state.variants || {}),
           filterQueries: { ...(state.variants?.filterQueries || {}), [key]: undefined },
+          page: undefined,
         },
       });
     },
@@ -162,19 +163,15 @@ export const Provider: ParentComponent = (props) => {
       setState({ samples: { ...(state.samples || {}), page } });
     },
     setSampleSearchQuery(searchQuery: string) {
-      setState({ samples: { ...(state.samples || {}), searchQuery } });
+      setState({ samples: { ...(state.samples || {}), searchQuery, page: undefined } });
     },
     setSampleProbandFilterValue(probandFilterValue: boolean) {
-      setState({ samples: { ...(state.samples || {}), probandFilterValue } });
+      setState({ samples: { ...(state.samples || {}), probandFilterValue, page: undefined } });
     },
   };
   const store: AppStore = [state, actions];
 
-  return (
-    <Router source={hashIntegration()}>
-      <StoreContext.Provider value={store}>{props.children}</StoreContext.Provider>
-    </Router>
-  );
+  return <StoreContext.Provider value={store}>{props.children}</StoreContext.Provider>;
 };
 
 export function useStore() {

package/src/utils/sample.ts

@@ -1,5 +1,65 @@
-import { Item, Sample } from "@molgenis/vip-report-api/src/Api";
+import { Sample } from "@molgenis/vip-report-api/src/Api";
 
-export function getSampleLabel(sample: Item<Sample>) {
-  return sample.data.person.individualId;
+export function getSampleLabel(sample: Sample) {
+  return sample.person.individualId;
+}
+
+export function getSampleSexLabel(sample: Sample): string {
+  switch (sample.person.sex) {
+    case "FEMALE":
+      return "female";
+    case "MALE":
+      return "male";
+    default:
+      return "?";
+  }
+}
+
+export function getSampleAffectedStatusLabel(sample: Sample): string {
+  switch (sample.person.affectedStatus) {
+    case "AFFECTED":
+      return "affected";
+    case "UNAFFECTED":
+      return "unaffected";
+    default:
+      return "?";
+  }
+}
+
+function isFamily(sample: Sample, samples: Sample): boolean {
+  return sample.person.familyId === samples.person.familyId;
+}
+
+function isSampleMother(sample: Sample, samples: Sample): boolean {
+  return isFamily(sample, samples) && samples.person.individualId === sample.person.maternalId;
+}
+
+export function getSampleMother(sample: Sample, samples: Sample[]): Sample | undefined {
+  if (sample.person.maternalId !== "0") {
+    for (const otherSample of samples) {
+      if (isSampleMother(sample, otherSample)) return otherSample;
+    }
+  }
+}
+
+function isSampleFather(sample: Sample, samples: Sample): boolean {
+  return isFamily(sample, samples) && samples.person.individualId === sample.person.paternalId;
+}
+
+export function getSampleFather(sample: Sample, samples: Sample[]): Sample | undefined {
+  if (sample.person.paternalId !== "0") {
+    for (const otherSample of samples) {
+      if (isSampleFather(sample, otherSample)) return otherSample;
+    }
+  }
+}
+
+export function getSampleFamilyMembersWithoutParents(sample: Sample, samples: Sample[]): Sample[] {
+  const familyMembersWithoutParents: Sample[] = [];
+  for (const otherSample of samples) {
+    if (isFamily(sample, otherSample) && !isSampleFather(sample, otherSample) && !isSampleMother(sample, otherSample)) {
+      if (sample.person.individualId !== otherSample.person.individualId) familyMembersWithoutParents.push(otherSample);
+    }
+  }
+  return familyMembersWithoutParents;
 }

package/src/views/Help.tsx

@@ -1,13 +1,138 @@
-import { Component } from "solid-js";
+import { Component, createResource, createSignal, For, Show } from "solid-js";
 import { Anchor } from "../components/Anchor";
+import {
+  EMPTY_APP_METADATA,
+  EMPTY_HTS_FILE_METADATA,
+  EMPTY_PARAMS,
+  EMPTY_PHENOTYPES,
+  EMPTY_RECORDS_METADATA,
+  EMPTY_RECORDS_PAGE,
+  EMPTY_SAMPLES_PAGE,
+  fetchAppMetadata,
+  fetchHtsFileMetadata,
+  fetchPhenotypes,
+  fetchRecords,
+  fetchRecordsMeta,
+  fetchSamples,
+} from "../utils/ApiUtils";
+import { Loader } from "../components/Loader";
+import { Breadcrumb } from "../components/Breadcrumb";
+import { VcfHeaderRow } from "../components/VcfHeaderRow";
+import { getHeaderValue } from "../utils/viewUtils";
+import { Item, Phenotype, PhenotypicFeature } from "@molgenis/vip-report-api/src/Api";
+import { HpoTerm } from "../components/HpoTerm";
 export const Help: Component = () => {
+  const [params] = createSignal(EMPTY_PARAMS);
+  const [samples] = createResource(params, fetchSamples, { initialValue: EMPTY_SAMPLES_PAGE });
+  const [records] = createResource(params, fetchRecords, { initialValue: EMPTY_RECORDS_PAGE });
+  const [recordsMetadata] = createResource(params, fetchRecordsMeta, { initialValue: EMPTY_RECORDS_METADATA });
+  const [phenotypes] = createResource(params, fetchPhenotypes, { initialValue: EMPTY_PHENOTYPES });
+  const [htsFileMetadata] = createResource(params, fetchHtsFileMetadata, { initialValue: EMPTY_HTS_FILE_METADATA });
+  const [appMetadata] = createResource(params, fetchAppMetadata, { initialValue: EMPTY_APP_METADATA });
   return (
     <>
-      <span>The documentation for the Variant Interpretation Pipeline is located </span>
-      <Anchor href={`https://molgenis.github.io/vip/`}>
-        <span>here</span>
-      </Anchor>
-      <span>.</span>
+      <Breadcrumb items={[{ text: "Help" }]} />
+      <div class="columns">
+        <div class="column">
+          <p class="title is-3">Documentation</p>
+          <span>The documentation for the Variant Interpretation Pipeline is located </span>
+          <Anchor href={`https://molgenis.github.io/vip/`}>
+            <span>here</span>
+          </Anchor>
+          <span>.</span>
+        </div>
+      </div>
+
+      <Show
+        when={
+          !samples.loading &&
+          !records.loading &&
+          !recordsMetadata.loading &&
+          !phenotypes.loading &&
+          !htsFileMetadata.loading &&
+          !appMetadata.loading
+        }
+        fallback={<Loader />}
+      >
+        <p class="title is-3">About</p>
+        <div class="columns">
+          <div class="column">
+            <div class="table-container">
+              <table class="table is-narrow">
+                <thead>
+                  <tr>
+                    <th colSpan={2}>Software metadata</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <th>Name:</th>
+                    <td>{appMetadata().name}</td>
+                  </tr>
+                  <tr>
+                    <th>Version:</th>
+                    <td>{appMetadata().version}</td>
+                  </tr>
+                  <tr>
+                    <th>Arguments:</th>
+                    <td>{appMetadata().args}</td>
+                  </tr>
+                  <VcfHeaderRow value={getHeaderValue("VIP_Version", recordsMetadata().lines)} title={"VIP Version"} />
+                  <VcfHeaderRow value={getHeaderValue("VIP_Command", recordsMetadata().lines)} title={"VIP Command"} />
+                </tbody>
+              </table>
+            </div>
+            <div class="table-container">
+              <table class="table is-narrow">
+                <thead>
+                  <tr>
+                    <th colSpan={2}>Input metadata</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <th>Filename:</th>
+                    <td>{htsFileMetadata().uri}</td>
+                  </tr>
+                  <tr>
+                    <th>Assembly:</th>
+                    <td>{htsFileMetadata().genomeAssembly}</td>
+                  </tr>
+                  <tr>
+                    <th>Number of records:</th>
+                    <td>{records().total}</td>
+                  </tr>
+                  <tr>
+                    <th>Number of samples:</th>
+                    <td>{samples().total}</td>
+                  </tr>
+                  <tr>
+                    <th>Phenotypes:</th>
+                    <td>
+                      <For each={phenotypes().items}>
+                        {(item: Item<Phenotype>) => (
+                          <>
+                            <b>{item.data.subject.id}: </b>
+                            <For each={item.data.phenotypicFeaturesList}>
+                              {(phenotypicFeature: PhenotypicFeature, i) => (
+                                <>
+                                  {i() > 0 ? ", " : ""}
+                                  <HpoTerm ontologyClass={phenotypicFeature.type} />
+                                </>
+                              )}
+                            </For>
+                            <br />
+                          </>
+                        )}
+                      </For>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </Show>
     </>
   );
 };