@molgenis/vip-report-template 8.3.3 → 8.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Show } from "solid-js";
|
|
1
|
+
import { Component, createSignal, Show } from "solid-js";
|
|
2
2
|
import { MetadataContainer, SampleContainer } from "../utils/api.ts";
|
|
3
3
|
import { VcfRecord } from "@molgenis/vip-report-vcf";
|
|
4
4
|
import { DecisionTree, Item, Sample } from "@molgenis/vip-report-api";
|
|
@@ -12,6 +12,7 @@ import { getPedigreeSamples } from "../utils/sample.ts";
|
|
|
12
12
|
import { ConfigJson } from "../types/config";
|
|
13
13
|
import { VariantGenotypeTable } from "./VariantGenotypeTable.tsx";
|
|
14
14
|
import { initConfig } from "../utils/config/config.ts";
|
|
15
|
+
import { A } from "@solidjs/router";
|
|
15
16
|
|
|
16
17
|
export const VariantConsequenceContainer: Component<{
|
|
17
18
|
config: ConfigJson;
|
|
@@ -36,66 +37,84 @@ export const VariantConsequenceContainer: Component<{
|
|
|
36
37
|
}
|
|
37
38
|
return false;
|
|
38
39
|
};
|
|
40
|
+
const [showEmptyInfo, setShowEmptyInfo] = createSignal(false);
|
|
41
|
+
const toggleShowEmptyInfo = () => setShowEmptyInfo((isShow) => !isShow);
|
|
42
|
+
const [showEmptyCsq, setShowEmptyCsq] = createSignal(false);
|
|
43
|
+
const toggleShowEmptyCsq = () => setShowEmptyCsq((isShow) => !isShow);
|
|
39
44
|
|
|
40
45
|
return (
|
|
41
|
-
|
|
42
|
-
<div class="
|
|
43
|
-
<div
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
</div>
|
|
57
|
-
<div class="mt-3">
|
|
58
|
-
<h1 class="title is-5">Record</h1>
|
|
59
|
-
<VariantTable variant={props.record.data} />
|
|
60
|
-
</div>
|
|
46
|
+
<div class="columns">
|
|
47
|
+
<div class="column is-4">
|
|
48
|
+
<div>
|
|
49
|
+
<h1 class="title is-5">
|
|
50
|
+
Info
|
|
51
|
+
<A href="#" onClick={toggleShowEmptyInfo} class="small-blue-link">
|
|
52
|
+
{showEmptyInfo() ? "(Hide empty fields)" : "(Show empty fields)"}
|
|
53
|
+
</A>
|
|
54
|
+
</h1>
|
|
55
|
+
<VariantInfoTable
|
|
56
|
+
variantType={props.variantType}
|
|
57
|
+
metadata={props.metadata}
|
|
58
|
+
record={props.record}
|
|
59
|
+
isShowEmpty={showEmptyInfo()}
|
|
60
|
+
/>
|
|
61
61
|
</div>
|
|
62
|
-
<div class="
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
62
|
+
<div class="mt-3">
|
|
63
|
+
<h1 class="title is-5">
|
|
64
|
+
Consequence
|
|
65
|
+
<A href="#" onClick={toggleShowEmptyCsq} class="small-blue-link">
|
|
66
|
+
{showEmptyCsq() ? "(Hide empty fields)" : "(Show empty fields)"}
|
|
67
|
+
</A>
|
|
68
|
+
</h1>
|
|
69
|
+
<VariantConsequenceTable
|
|
70
|
+
variantType={props.variantType}
|
|
71
|
+
metadata={props.metadata}
|
|
72
|
+
record={props.record}
|
|
73
|
+
consequenceId={props.consequenceId}
|
|
74
|
+
isShowEmpty={showEmptyCsq()}
|
|
75
|
+
/>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="mt-3">
|
|
78
|
+
<h1 class="title is-5">Record</h1>
|
|
79
|
+
<VariantTable variant={props.record.data} />
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="column is-8">
|
|
83
|
+
<Show when={config().variant.samplesCells}>
|
|
84
|
+
{(samplesCells) => (
|
|
85
|
+
<div class="column">
|
|
86
|
+
<h1 class="title is-5">Samples</h1>
|
|
87
|
+
<VariantGenotypeTable
|
|
88
|
+
config={samplesCells()}
|
|
89
|
+
samples={samples()}
|
|
90
|
+
metadata={props.metadata}
|
|
91
|
+
variantType={props.variantType}
|
|
92
|
+
record={props.record}
|
|
93
|
+
/>
|
|
94
|
+
</div>
|
|
95
|
+
)}
|
|
96
|
+
</Show>
|
|
97
|
+
<div class="columns mt-3">
|
|
98
|
+
{props.decisionTree !== null && hasDecisionTreePathMeta() && (
|
|
99
|
+
<div class="column is-6">
|
|
100
|
+
<h1 class="title is-5">Variant classification tree path</h1>
|
|
101
|
+
<DecisionTreePath
|
|
102
|
+
decisionTree={props.decisionTree}
|
|
103
|
+
path={getDecisionTreePath(props.metadata.records, props.record, props.consequenceId)}
|
|
104
|
+
/>
|
|
105
|
+
</div>
|
|
106
|
+
)}
|
|
107
|
+
{showSampleTree() && props.sampleTree !== null && hasSampleTreePathMeta() && props.sample && (
|
|
108
|
+
<div class="column is-6">
|
|
109
|
+
<h1 class="title is-5">Sample classification tree path</h1>
|
|
110
|
+
<DecisionTreePath
|
|
111
|
+
decisionTree={props.sampleTree}
|
|
112
|
+
path={getSampleTreePath(props.metadata.records, props.sample, props.record, props.consequenceId)}
|
|
113
|
+
/>
|
|
114
|
+
</div>
|
|
115
|
+
)}
|
|
97
116
|
</div>
|
|
98
117
|
</div>
|
|
99
|
-
|
|
118
|
+
</div>
|
|
100
119
|
);
|
|
101
120
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, For } from "solid-js";
|
|
1
|
+
import { Component, For, Show } from "solid-js";
|
|
2
2
|
import { VcfRecord } from "@molgenis/vip-report-vcf";
|
|
3
3
|
import { Item } from "@molgenis/vip-report-api";
|
|
4
4
|
import { Table } from "./Table.tsx";
|
|
@@ -6,12 +6,14 @@ import { initConfigCells } from "../utils/config/configCells.ts";
|
|
|
6
6
|
import { RecordsTableCellLine, RecordsTableHeaderCell } from "./RecordsTable.tsx";
|
|
7
7
|
import { VariantType } from "../utils/variantType.ts";
|
|
8
8
|
import { MetadataContainer } from "../utils/api.ts";
|
|
9
|
+
import { ConfigCellInfo } from "../types/configCells";
|
|
9
10
|
|
|
10
11
|
export const VariantConsequenceTable: Component<{
|
|
11
12
|
variantType: VariantType;
|
|
12
13
|
metadata: MetadataContainer;
|
|
13
14
|
record: Item<VcfRecord>;
|
|
14
15
|
consequenceId: number;
|
|
16
|
+
isShowEmpty: boolean;
|
|
15
17
|
}> = (props) => {
|
|
16
18
|
const configCells = () =>
|
|
17
19
|
initConfigCells(
|
|
@@ -26,21 +28,28 @@ export const VariantConsequenceTable: Component<{
|
|
|
26
28
|
null,
|
|
27
29
|
).filter((configCell) => configCell.type !== "group");
|
|
28
30
|
|
|
31
|
+
function isEmptyValue(fieldConfig: ConfigCellInfo) {
|
|
32
|
+
const value = fieldConfig.value(props.record, props.consequenceId);
|
|
33
|
+
return value === null || value === undefined || (Array.isArray(value) && value.length === 0);
|
|
34
|
+
}
|
|
35
|
+
|
|
29
36
|
return (
|
|
30
37
|
<Table borderless={true}>
|
|
31
38
|
<tbody>
|
|
32
|
-
<For each={configCells()}>
|
|
33
|
-
{(fieldConfig) => (
|
|
34
|
-
<
|
|
35
|
-
<
|
|
36
|
-
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
39
|
+
<For each={configCells() as ConfigCellInfo[]}>
|
|
40
|
+
{(fieldConfig: ConfigCellInfo) => (
|
|
41
|
+
<Show when={!isEmptyValue(fieldConfig) || props.isShowEmpty}>
|
|
42
|
+
<tr>
|
|
43
|
+
<RecordsTableHeaderCell fieldConfig={fieldConfig} showParentHeader={true} />
|
|
44
|
+
<td>
|
|
45
|
+
<RecordsTableCellLine
|
|
46
|
+
fieldConfig={fieldConfig}
|
|
47
|
+
record={props.record}
|
|
48
|
+
valueIndex={props.consequenceId}
|
|
49
|
+
/>
|
|
50
|
+
</td>
|
|
51
|
+
</tr>
|
|
52
|
+
</Show>
|
|
44
53
|
)}
|
|
45
54
|
</For>
|
|
46
55
|
</tbody>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Show } from "solid-js";
|
|
1
|
+
import { Component, createSignal, Show } from "solid-js";
|
|
2
2
|
import { MetadataContainer, SampleContainer } from "../utils/api.ts";
|
|
3
3
|
import { Item, Sample } from "@molgenis/vip-report-api";
|
|
4
4
|
import { VcfRecord } from "@molgenis/vip-report-vcf";
|
|
@@ -11,6 +11,7 @@ import { VariantType } from "../utils/variantType.ts";
|
|
|
11
11
|
import { getPedigreeSamples } from "../utils/sample.ts";
|
|
12
12
|
import { VariantGenotypeTable } from "./VariantGenotypeTable.tsx";
|
|
13
13
|
import { initConfig } from "../utils/config/config.ts";
|
|
14
|
+
import { A } from "@solidjs/router";
|
|
14
15
|
|
|
15
16
|
export const VariantContainer: Component<{
|
|
16
17
|
config: ConfigJson;
|
|
@@ -21,6 +22,8 @@ export const VariantContainer: Component<{
|
|
|
21
22
|
}> = (props) => {
|
|
22
23
|
const config = () => initConfig(props.config, props.variantType, props.metadata, props.sample);
|
|
23
24
|
const samples = (): Item<Sample>[] => (props.sample ? getPedigreeSamples(props.sample) : []);
|
|
25
|
+
const [showEmpty, setShowEmpty] = createSignal(false);
|
|
26
|
+
const toggleShowEmpty = () => setShowEmpty((isShow) => !isShow);
|
|
24
27
|
|
|
25
28
|
return (
|
|
26
29
|
<>
|
|
@@ -35,8 +38,18 @@ export const VariantContainer: Component<{
|
|
|
35
38
|
<VariantTable variant={props.record.data} />
|
|
36
39
|
</div>
|
|
37
40
|
<div class="column is-3">
|
|
38
|
-
<h1 class="title is-5">
|
|
39
|
-
|
|
41
|
+
<h1 class="title is-5">
|
|
42
|
+
Info
|
|
43
|
+
<A href="#" onClick={toggleShowEmpty} class="small-blue-link">
|
|
44
|
+
{showEmpty() ? "(Hide empty fields)" : "(Show empty fields)"}
|
|
45
|
+
</A>
|
|
46
|
+
</h1>
|
|
47
|
+
<VariantInfoTable
|
|
48
|
+
variantType={props.variantType}
|
|
49
|
+
metadata={props.metadata}
|
|
50
|
+
record={props.record}
|
|
51
|
+
isShowEmpty={showEmpty()}
|
|
52
|
+
/>
|
|
40
53
|
</div>
|
|
41
54
|
<Show when={config().variant.samplesCells}>
|
|
42
55
|
{(samplesCells) => (
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, For } from "solid-js";
|
|
1
|
+
import { Component, For, Show } from "solid-js";
|
|
2
2
|
import { VcfRecord } from "@molgenis/vip-report-vcf";
|
|
3
3
|
import { Table } from "./Table.tsx";
|
|
4
4
|
import { Item } from "@molgenis/vip-report-api";
|
|
@@ -6,11 +6,13 @@ import { RecordsTableCell, RecordsTableHeaderCell } from "./RecordsTable.tsx";
|
|
|
6
6
|
import { initConfigCells } from "../utils/config/configCells.ts";
|
|
7
7
|
import { MetadataContainer } from "../utils/api.ts";
|
|
8
8
|
import { VariantType } from "../utils/variantType.ts";
|
|
9
|
+
import { ConfigCellInfo } from "../types/configCells";
|
|
9
10
|
|
|
10
11
|
export const VariantInfoTable: Component<{
|
|
11
12
|
variantType: VariantType;
|
|
12
13
|
metadata: MetadataContainer;
|
|
13
14
|
record: Item<VcfRecord>;
|
|
15
|
+
isShowEmpty: boolean;
|
|
14
16
|
}> = (props) => {
|
|
15
17
|
const configCells = () =>
|
|
16
18
|
initConfigCells(
|
|
@@ -25,15 +27,22 @@ export const VariantInfoTable: Component<{
|
|
|
25
27
|
null,
|
|
26
28
|
).filter((configCell) => configCell.type !== "group");
|
|
27
29
|
|
|
30
|
+
function isEmptyValue(fieldConfig: ConfigCellInfo) {
|
|
31
|
+
const value = props.record.data.n[fieldConfig.field.id];
|
|
32
|
+
return value === null || value === undefined || (Array.isArray(value) && value.length === 0);
|
|
33
|
+
}
|
|
34
|
+
|
|
28
35
|
return (
|
|
29
36
|
<Table borderless={true}>
|
|
30
37
|
<tbody>
|
|
31
|
-
<For each={configCells()}>
|
|
32
|
-
{(fieldConfig) => (
|
|
33
|
-
<
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
38
|
+
<For each={configCells() as ConfigCellInfo[]}>
|
|
39
|
+
{(fieldConfig: ConfigCellInfo) => (
|
|
40
|
+
<Show when={!isEmptyValue(fieldConfig) || props.isShowEmpty}>
|
|
41
|
+
<tr>
|
|
42
|
+
<RecordsTableHeaderCell fieldConfig={fieldConfig} showParentHeader={true} />
|
|
43
|
+
<RecordsTableCell fieldConfig={fieldConfig} record={props.record} />
|
|
44
|
+
</tr>
|
|
45
|
+
</Show>
|
|
37
46
|
)}
|
|
38
47
|
</For>
|
|
39
48
|
</tbody>
|