fix:VariantInfoTable categorical rendering (#334)

* fix:VariantInfoTable categorical rendering * fix:STR_STATUS metadata numberType * chore:bump version
molgenis · Nov 30, 2024 · a173f97 · a173f97
1 parent 9b7aeda
commit a173f97
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "7.0.2",
+  "version": "7.0.3",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "scripts": {
     "build": "vite build",

diff --git a/src/components/RecordsTable.tsx b/src/components/RecordsTable.tsx
@@ -49,7 +49,7 @@ export const RecordsTableHeaderCells: Component<{ fieldConfigs: ConfigCells }> =
   );
 };
 
-const RecordsTableHeaderCell: Component<{
+export const RecordsTableHeaderCell: Component<{
   fieldConfig: ConfigCellItem;
 }> = (props) => {
   const label = () => props.fieldConfig.label();

diff --git a/src/components/VariantConsequenceContainer.tsx b/src/components/VariantConsequenceContainer.tsx
@@ -43,7 +43,7 @@ export const VariantConsequenceContainer: Component<{
         <div class="column is-4">
           <div>
             <h1 class="title is-5">Info</h1>
-            <VariantInfoTable infoMetadataContainer={props.metadata.records.info} infoContainer={props.record.data.n} />
+            <VariantInfoTable variantType={props.variantType} metadata={props.metadata} record={props.record} />
           </div>
           <div class="mt-3">
             <h1 class="title is-5">Consequence</h1>

diff --git a/src/components/VariantContainer.tsx b/src/components/VariantContainer.tsx
@@ -34,18 +34,10 @@ export const VariantContainer: Component<{
           <h1 class="title is-5">Record</h1>
           <VariantTable variant={props.record.data} />
         </div>
-        <Show
-          when={
-            Object.values(props.metadata.records.info).filter(
-              (info) => !info.nested && props.record.data.n[info.id] !== undefined,
-            ).length > 0
-          }
-        >
-          <div class="column is-3">
-            <h1 class="title is-5">Info</h1>
-            <VariantInfoTable infoMetadataContainer={props.metadata.records.info} infoContainer={props.record.data.n} />
-          </div>
-        </Show>
+        <div class="column is-3">
+          <h1 class="title is-5">Info</h1>
+          <VariantInfoTable variantType={props.variantType} metadata={props.metadata} record={props.record} />
+        </div>
         <Show when={config().variant.samplesCells}>
           {(samplesCells) => (
             <div class="column">

diff --git a/src/components/VariantInfoTable.tsx b/src/components/VariantInfoTable.tsx
@@ -1,27 +1,38 @@
 import { Component, For } from "solid-js";
-import { FieldMetadataContainer, InfoContainer } from "@molgenis/vip-report-vcf";
-import { FieldInfo } from "./field/info/FieldInfo.tsx";
+import { VcfRecord } from "@molgenis/vip-report-vcf";
 import { Table } from "./Table.tsx";
+import { Item } from "@molgenis/vip-report-api";
+import { RecordsTableCell, RecordsTableHeaderCell } from "./RecordsTable.tsx";
+import { initConfigCells } from "../utils/config/configCells.ts";
+import { MetadataContainer } from "../utils/api.ts";
+import { VariantType } from "../utils/variantType.ts";
 
 export const VariantInfoTable: Component<{
-  infoMetadataContainer: FieldMetadataContainer;
-  infoContainer: InfoContainer;
+  variantType: VariantType;
+  metadata: MetadataContainer;
+  record: Item<VcfRecord>;
 }> = (props) => {
-  const fieldMetadatas = () =>
-    Object.values(props.infoMetadataContainer).filter(
-      (info) => !info.nested && props.infoContainer[info.id] !== undefined,
-    );
+  const configCells = () =>
+    initConfigCells(
+      [
+        {
+          type: "info",
+          name: "((?!CSQ).)*",
+        },
+      ],
+      props.variantType,
+      props.metadata,
+      null,
+    ).filter((configCell) => configCell.type !== "group");
 
   return (
-    <Table>
+    <Table borderless={true}>
       <tbody>
-        <For each={fieldMetadatas()}>
-          {(fieldMetadata) => (
+        <For each={configCells()}>
+          {(fieldConfig) => (
             <tr>
-              <td>{fieldMetadata.id}</td>
-              <td>
-                <FieldInfo metadata={fieldMetadata} value={props.infoContainer[fieldMetadata.id]} />
-              </td>
+              <RecordsTableHeaderCell fieldConfig={fieldConfig} />
+              <RecordsTableCell fieldConfig={fieldConfig} record={props.record} />
             </tr>
           )}
         </For>

diff --git a/src/mocks/GRCh37/field_metadata.json b/src/mocks/GRCh37/field_metadata.json
@@ -765,8 +765,8 @@
     "STR_STATUS": {
       "label": "STR status",
       "description": "Repeat expansion status as decided by Stranger",
-      "numberType": "NUMBER",
-      "numberCount": 1,
+      "numberType": "PER_ALT",
+      "separator": ",",
       "type": "CATEGORICAL",
       "categories": {
         "normal": {

diff --git a/src/mocks/GRCh38/field_metadata.json b/src/mocks/GRCh38/field_metadata.json
@@ -778,8 +778,8 @@
     "STR_STATUS": {
       "label": "STR status",
       "description": "Repeat expansion status as decided by Stranger",
-      "numberType": "NUMBER",
-      "numberCount": 1,
+      "numberType": "PER_ALT",
+      "separator": ",",
       "type": "CATEGORICAL",
       "categories": {
         "normal": {