@molgenis/vip-report-template 4.0.0 → 5.1.0

package/src/views/VariantConsequence.tsx

@@ -27,47 +27,54 @@ export const VariantConsequence: Component = () => {
   const [decisionTree] = createResource(fetchDecisionTree, { initialValue: EMPTY_DECISION_TREE });
 
   const csqFields = (): FieldMetadata[] => recordsMetadata().info.CSQ?.nested?.items || [];
-  const csqValues = (): ValueArray => getSpecificConsequence(variant().data.n.CSQ as ValueArray, consequenceId);
 
   const hasDecisionTreePathMeta = () => csqFields().findIndex((csq) => csq.id === "VIPP") !== -1;
   return (
-    <Show when={!variant.loading} fallback={<Loader />}>
-      <Breadcrumb
-        items={[
-          { href: "/variants", text: "Variants" },
-          { href: `/variants/${variant().id}`, text: getRecordLabel(variant()) },
-          { text: `Consequence #${consequenceId}` },
-        ]}
-      />
-      <div class="columns">
-        <div class="column is-6">
-          <h1 class="title is-5">Consequence</h1>
-          <ConsequenceTable csqMetadata={csqFields()} csqValues={csqValues()} record={variant()} />
-        </div>
-        {hasDecisionTreePathMeta() && (
-          <Show when={!recordsMetadata.loading && !decisionTree.loading && (decisionTree() as DecisionTree)} keyed>
-            {(decisionTree) => (
-              <div class="column">
-                <h1 class="title is-5">Classification tree path</h1>
-                <DecisionTreePath
-                  decisionTree={decisionTree}
-                  path={getDecisionTreePath(recordsMetadata(), variant(), consequenceId)}
-                />
-              </div>
+    <Show when={!variant.loading && variant()} fallback={<Loader />} keyed>
+      {(variant) => (
+        <>
+          <Breadcrumb
+            items={[
+              { href: "/variants", text: "Variants" },
+              { href: `/variants/${variant.id}`, text: getRecordLabel(variant) },
+              { text: `Consequence #${consequenceId}` },
+            ]}
+          />
+          <div class="columns">
+            <div class="column is-6">
+              <h1 class="title is-5">Consequence</h1>
+              <ConsequenceTable
+                csqMetadata={csqFields()}
+                csqValues={getSpecificConsequence(variant.data.n.CSQ as ValueArray, consequenceId)}
+                record={variant}
+              />
+            </div>
+            {hasDecisionTreePathMeta() && (
+              <Show when={!recordsMetadata.loading && !decisionTree.loading && (decisionTree() as DecisionTree)} keyed>
+                {(decisionTree) => (
+                  <div class="column">
+                    <h1 class="title is-5">Classification tree path</h1>
+                    <DecisionTreePath
+                      decisionTree={decisionTree}
+                      path={getDecisionTreePath(recordsMetadata(), variant, consequenceId)}
+                    />
+                  </div>
+                )}
+              </Show>
             )}
-          </Show>
-        )}
-      </div>
-      <div class="columns">
-        <div class="column is-6">
-          <h1 class="title is-5">Record</h1>
-          <VariantTable variant={variant().data} />
-        </div>
-        <div class="column">
-          <h1 class="title is-5">Info</h1>
-          <VariantInfoTable infoFields={recordsMetadata().info} record={variant()} />
-        </div>
-      </div>
+          </div>
+          <div class="columns">
+            <div class="column is-6">
+              <h1 class="title is-5">Record</h1>
+              <VariantTable variant={variant.data} />
+            </div>
+            <div class="column">
+              <h1 class="title is-5">Info</h1>
+              <VariantInfoTable infoFields={recordsMetadata().info} record={variant} />
+            </div>
+          </div>
+        </>
+      )}
     </Show>
   );
 };

package/src/views/Variants.tsx

@@ -10,12 +10,12 @@ import { fetchHtsFileMetadata, fetchRecords, fetchRecordsMeta } from "../utils/A
 import { flattenFieldMetadata } from "../utils/field";
 import { DIRECTION_ASCENDING, DIRECTION_DESCENDING } from "../utils/sortUtils";
 import { HtsFileMetadata, Params, SortPath } from "@molgenis/vip-report-api/src/Api";
-import { FilterChangeEvent, FilterClearEvent } from "../components/filter/Filter";
 import { useStore } from "../store";
 import { createQuery, infoSortPath } from "../utils/query";
 import { Loader } from "../components/Loader";
 import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
 import { arrayEquals } from "../utils/utils";
+import { FilterChangeEvent, FilterClearEvent } from "../components/filter/Filters";
 
 export const VariantsView: Component = () => {
   const [recordsMeta] = createResource(fetchRecordsMeta);
@@ -45,8 +45,8 @@ export const Variants: Component<{
 
   const onPageChange = (page: number) => actions.setVariantsPage(page);
   const onSearchChange = (search: string) => actions.setVariantsSearchQuery(search);
-  const onFilterChange = (event: FilterChangeEvent) => actions.setVariantsFilterQuery(event.query);
-  const onFilterClear = (event: FilterClearEvent) => actions.clearVariantsFilterQuery(event.selector);
+  const onFilterChange = (event: FilterChangeEvent) => actions.setVariantsFilterQuery(event.query, event.key);
+  const onFilterClear = (event: FilterClearEvent) => actions.clearVariantsFilterQuery(event.key);
   const onSortChange = (event: SortEvent) => actions.setVariantsSort(event.order);
   const onSortClear = () => actions.setVariantsSort(null);