From a173f97232ab3a9c5b2ed1bd060d775386c9345d Mon Sep 17 00:00:00 2001
From: Dennis Hendriksen <d.hendriksen@umcg.nl>
Date: Sat, 30 Nov 2024 16:26:36 +0100
Subject: [PATCH] fix:VariantInfoTable categorical rendering (#334)

* fix:VariantInfoTable categorical rendering

* fix:STR_STATUS metadata numberType

* chore:bump version
---
 package.json                                  |  2 +-
 src/components/RecordsTable.tsx               |  2 +-
 .../VariantConsequenceContainer.tsx           |  2 +-
 src/components/VariantContainer.tsx           | 16 ++------
 src/components/VariantInfoTable.tsx           | 41 ++++++++++++-------
 src/mocks/GRCh37/field_metadata.json          |  4 +-
 src/mocks/GRCh38/field_metadata.json          |  4 +-
 7 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/package.json b/package.json
index f8bd9e86..9c6cbdfa 100644
--- 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
index b1fe07a1..2e489584 100644
--- 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
index 30620d74..cab07cc9 100644
--- 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
index a12039aa..a5930431 100644
--- 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
index 28170718..cd6c64ba 100644
--- 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
index db2282e2..0d8b5631 100644
--- 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
index cc09f6c0..0ad68d3f 100644
--- 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": {