@molgenis/vip-report-template 6.0.2 → 6.2.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/.husky/pre-commit +0 -3
- package/.travis.yml +2 -1
- package/index.html +1 -1
- package/package.json +23 -23
- package/src/App.tsx +14 -65
- package/src/assets/sass/main.scss +12 -47
- package/src/components/Breadcrumb.tsx +4 -4
- package/src/components/DatasetDropdown.tsx +4 -4
- package/src/components/InfoCollapsablePane.tsx +4 -4
- package/src/components/SampleTable.tsx +2 -2
- package/src/components/VariantInfoNestedTable.tsx +3 -3
- package/src/components/VariantsSampleTable.tsx +3 -3
- package/src/components/VariantsTable.tsx +3 -3
- package/src/components/filter/Filter.tsx +0 -4
- package/src/components/record/format/GenotypeField.tsx +4 -15
- package/src/index.tsx +43 -1
- package/src/mocks/GRCh37/sampleTree.json +123 -0
- package/src/mocks/GRCh37/static.ts +2 -0
- package/src/mocks/GRCh37/vcf/family.vcf.blob +31 -31
- package/src/mocks/MockApiClient.ts +6 -0
- package/src/store/index.tsx +1 -6
- package/src/utils/ApiUtils.ts +4 -0
- package/src/utils/decisionTreeUtils.ts +17 -0
- package/src/views/Sample.tsx +21 -17
- package/src/views/SampleVariant.tsx +36 -21
- package/src/views/SampleVariantConsequence.tsx +104 -63
- package/src/views/SampleVariants.tsx +7 -7
- package/src/views/Variant.tsx +48 -42
- package/src/views/VariantConsequence.tsx +9 -8
- package/src/views/Variants.tsx +2 -2
- package/src/views/data/data.tsx +7 -0
- package/src/components/filter/FilterIntegerDp.tsx +0 -47
- package/src/views/data/SampleData.tsx +0 -13
- package/src/views/data/SampleVariantConsequenceData.tsx +0 -13
- package/src/views/data/SampleVariantData.tsx +0 -14
- package/src/views/data/VariantConsequenceData.tsx +0 -10
- package/src/views/data/VariantData.tsx +0 -13
package/.husky/pre-commit
CHANGED
package/.travis.yml
CHANGED
package/index.html
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@molgenis/vip-report-template",
|
|
3
|
-
"version": "6.0
|
|
3
|
+
"version": "6.2.0",
|
|
4
4
|
"description": "Report Template for Variant Call Format (VCF) Report Generator",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "vite build",
|
|
@@ -9,39 +9,39 @@
|
|
|
9
9
|
"dev": "vite",
|
|
10
10
|
"format": "prettier --write src/**/*.{tsx,ts}",
|
|
11
11
|
"lint": "eslint src/**/*.{tsx,ts}",
|
|
12
|
-
"prepare": "husky
|
|
12
|
+
"prepare": "husky",
|
|
13
13
|
"test": "vitest run",
|
|
14
14
|
"test:watch": "vitest"
|
|
15
15
|
},
|
|
16
16
|
"license": "LGPL-3.0",
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@molgenis/vite-plugin-inline": "^1.0.
|
|
19
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
20
|
-
"@typescript-eslint/parser": "^
|
|
21
|
-
"@vitest/coverage-v8": "^1.
|
|
22
|
-
"bulma": "^0.
|
|
23
|
-
"eslint": "^8.
|
|
18
|
+
"@molgenis/vite-plugin-inline": "^1.0.24",
|
|
19
|
+
"@typescript-eslint/eslint-plugin": "^7.12.0",
|
|
20
|
+
"@typescript-eslint/parser": "^7.12.0",
|
|
21
|
+
"@vitest/coverage-v8": "^1.6.0",
|
|
22
|
+
"bulma": "^1.0.1",
|
|
23
|
+
"eslint": "^8.57.0",
|
|
24
24
|
"eslint-config-prettier": "^9.1.0",
|
|
25
25
|
"eslint-plugin-prettier": "^5.1.3",
|
|
26
|
-
"eslint-plugin-solid": "^0.
|
|
27
|
-
"husky": "^9.0.
|
|
28
|
-
"jsdom": "^24.
|
|
29
|
-
"prettier": "^3.
|
|
30
|
-
"sass": "^1.
|
|
31
|
-
"typescript": "^5.
|
|
32
|
-
"vite": "^5.
|
|
33
|
-
"vite-plugin-solid": "^2.
|
|
34
|
-
"vitest": "^1.
|
|
26
|
+
"eslint-plugin-solid": "^0.14.0",
|
|
27
|
+
"husky": "^9.0.11",
|
|
28
|
+
"jsdom": "^24.1.0",
|
|
29
|
+
"prettier": "^3.3.1",
|
|
30
|
+
"sass": "^1.77.4",
|
|
31
|
+
"typescript": "^5.4.5",
|
|
32
|
+
"vite": "^5.2.12",
|
|
33
|
+
"vite-plugin-solid": "^2.10.2",
|
|
34
|
+
"vitest": "^1.6.0"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@fortawesome/fontawesome-svg-core": "^6.5.
|
|
38
|
-
"@fortawesome/free-solid-svg-icons": "^6.5.
|
|
39
|
-
"@molgenis/vip-report-api": "^5.0.
|
|
40
|
-
"@molgenis/vip-report-vcf": "^2.0.
|
|
41
|
-
"@solidjs/router": "^0.
|
|
37
|
+
"@fortawesome/fontawesome-svg-core": "^6.5.2",
|
|
38
|
+
"@fortawesome/free-solid-svg-icons": "^6.5.2",
|
|
39
|
+
"@molgenis/vip-report-api": "^5.0.4",
|
|
40
|
+
"@molgenis/vip-report-vcf": "^2.0.2",
|
|
41
|
+
"@solidjs/router": "^0.13.5",
|
|
42
42
|
"base64-js": "^1.5.1",
|
|
43
43
|
"igv": "^2.15.11",
|
|
44
|
-
"solid-js": "^1.8.
|
|
44
|
+
"solid-js": "^1.8.17"
|
|
45
45
|
},
|
|
46
46
|
"lint-staged": {
|
|
47
47
|
"src/**/*.{tsx,ts}": [
|
package/src/App.tsx
CHANGED
|
@@ -1,25 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { VariantsView } from "./views/Variants";
|
|
4
|
-
import { Variant } from "./views/Variant";
|
|
5
|
-
import VariantData from "./views/data/VariantData";
|
|
6
|
-
import { Samples } from "./views/Samples";
|
|
7
|
-
import SampleData from "./views/data/SampleData";
|
|
8
|
-
import { Sample } from "./views/Sample";
|
|
9
|
-
import { VariantConsequence } from "./views/VariantConsequence";
|
|
10
|
-
import { SampleVariantConsequenceView } from "./views/SampleVariantConsequence";
|
|
11
|
-
import { SampleVariantsView } from "./views/SampleVariants";
|
|
12
|
-
import { Error } from "./components/Error";
|
|
13
|
-
import SampleVariantData from "./views/data/SampleVariantData";
|
|
14
|
-
import { SampleVariantView } from "./views/SampleVariant";
|
|
15
|
-
import { Home } from "./views/Home";
|
|
1
|
+
import { onMount, ParentComponent } from "solid-js";
|
|
2
|
+
import { useLocation, useNavigate, A } from "@solidjs/router";
|
|
16
3
|
import api from "./Api";
|
|
17
4
|
import { DatasetDropdown } from "./components/DatasetDropdown";
|
|
18
|
-
import SampleVariantConsequenceData from "./views/data/SampleVariantConsequenceData";
|
|
19
|
-
import VariantConsequenceData from "./views/data/VariantConsequenceData";
|
|
20
|
-
import { Help } from "./views/Help";
|
|
21
5
|
|
|
22
|
-
const App:
|
|
6
|
+
const App: ParentComponent = (props) => {
|
|
23
7
|
const navigate = useNavigate();
|
|
24
8
|
const location = useLocation();
|
|
25
9
|
|
|
@@ -44,23 +28,23 @@ const App: Component = () => {
|
|
|
44
28
|
<>
|
|
45
29
|
<nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
|
|
46
30
|
<div class="navbar-brand">
|
|
47
|
-
<
|
|
31
|
+
<A class="navbar-item has-text-weight-semibold" href="/">
|
|
48
32
|
Variant Interpretation Pipeline
|
|
49
|
-
</
|
|
33
|
+
</A>
|
|
50
34
|
</div>
|
|
51
35
|
<div class="navbar-menu">
|
|
52
36
|
<div class="navbar-item has-dropdown is-hoverable">
|
|
53
|
-
<
|
|
37
|
+
<A class="navbar-link" href="/">
|
|
54
38
|
Report
|
|
55
|
-
</
|
|
39
|
+
</A>
|
|
56
40
|
<div class="navbar-dropdown">
|
|
57
|
-
<
|
|
41
|
+
<A class="navbar-item" href="/samples">
|
|
58
42
|
Samples
|
|
59
|
-
</
|
|
43
|
+
</A>
|
|
60
44
|
<hr class="navbar-divider" />
|
|
61
|
-
<
|
|
45
|
+
<A class="navbar-item" href="/variants">
|
|
62
46
|
Variants
|
|
63
|
-
</
|
|
47
|
+
</A>
|
|
64
48
|
</div>
|
|
65
49
|
</div>
|
|
66
50
|
{api.isDatasetSupport() && (
|
|
@@ -69,48 +53,13 @@ const App: Component = () => {
|
|
|
69
53
|
</div>
|
|
70
54
|
)}
|
|
71
55
|
<div class="navbar-end">
|
|
72
|
-
<
|
|
56
|
+
<A class="navbar-item" href="/help">
|
|
73
57
|
Help
|
|
74
|
-
</
|
|
58
|
+
</A>
|
|
75
59
|
</div>
|
|
76
60
|
</div>
|
|
77
61
|
</nav>
|
|
78
|
-
<div class="container is-fluid">
|
|
79
|
-
<ErrorBoundary fallback={(err) => <Error error={err as unknown} />}>
|
|
80
|
-
<Routes>
|
|
81
|
-
<Route path="/" element={<Home />} />
|
|
82
|
-
<Route path="/samples">
|
|
83
|
-
<Route path="/" element={<Samples />} />
|
|
84
|
-
<Route path="/:sampleId" data={SampleData}>
|
|
85
|
-
<Route path="/" element={<Sample />} />
|
|
86
|
-
<Route path="/variants">
|
|
87
|
-
<Route path="/" element={<SampleVariantsView />} />
|
|
88
|
-
<Route path="/:variantId" data={SampleVariantData}>
|
|
89
|
-
<Route path="/" element={<SampleVariantView />} />
|
|
90
|
-
<Route path="/consequences">
|
|
91
|
-
<Route
|
|
92
|
-
path="/:consequenceId"
|
|
93
|
-
element={<SampleVariantConsequenceView />}
|
|
94
|
-
data={SampleVariantConsequenceData}
|
|
95
|
-
/>
|
|
96
|
-
</Route>
|
|
97
|
-
</Route>
|
|
98
|
-
</Route>
|
|
99
|
-
</Route>
|
|
100
|
-
</Route>
|
|
101
|
-
<Route path="/variants">
|
|
102
|
-
<Route path="/" element={<VariantsView />} />
|
|
103
|
-
<Route path="/:variantId" data={VariantData}>
|
|
104
|
-
<Route path="/" element={<Variant />} />
|
|
105
|
-
<Route path="/consequences">
|
|
106
|
-
<Route path="/:consequenceId" element={<VariantConsequence />} data={VariantConsequenceData} />
|
|
107
|
-
</Route>
|
|
108
|
-
</Route>
|
|
109
|
-
</Route>
|
|
110
|
-
<Route path="/help" element={<Help />} />
|
|
111
|
-
</Routes>
|
|
112
|
-
</ErrorBoundary>
|
|
113
|
-
</div>
|
|
62
|
+
<div class="container is-fluid">{props.children}</div>
|
|
114
63
|
</>
|
|
115
64
|
);
|
|
116
65
|
};
|
|
@@ -1,50 +1,9 @@
|
|
|
1
1
|
@charset "utf-8";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
$
|
|
5
|
-
$notification-padding
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
@import "bulma/sass/utilities/initial-variables";
|
|
9
|
-
@import "bulma/sass/utilities/functions";
|
|
10
|
-
@import "bulma/sass/utilities/derived-variables";
|
|
11
|
-
@import "bulma/sass/utilities/mixins";
|
|
12
|
-
@import "bulma/sass/utilities/controls";
|
|
13
|
-
@import "bulma/sass/utilities/extends";
|
|
14
|
-
|
|
15
|
-
@import "bulma/sass/base/minireset";
|
|
16
|
-
@import "bulma/sass/base/generic";
|
|
17
|
-
@import "bulma/sass/base/animations";
|
|
18
|
-
|
|
19
|
-
@import "bulma/sass/elements/button";
|
|
20
|
-
@import "bulma/sass/elements/container";
|
|
21
|
-
@import "bulma/sass/elements/icon";
|
|
22
|
-
@import "bulma/sass/elements/notification";
|
|
23
|
-
@import "bulma/sass/elements/table";
|
|
24
|
-
@import "bulma/sass/elements/title";
|
|
25
|
-
|
|
26
|
-
@import "bulma/sass/form/shared";
|
|
27
|
-
@import "bulma/sass/form/input-textarea";
|
|
28
|
-
@import "bulma/sass/form/checkbox-radio";
|
|
29
|
-
@import "bulma/sass/form/select";
|
|
30
|
-
@import "bulma/sass/form/tools";
|
|
31
|
-
|
|
32
|
-
@import "bulma/sass/grid/columns";
|
|
33
|
-
|
|
34
|
-
@import "bulma/sass/components/breadcrumb";
|
|
35
|
-
@import "bulma/sass/components/card";
|
|
36
|
-
@import "bulma/sass/components/navbar";
|
|
37
|
-
@import "bulma/sass/components/pagination";
|
|
38
|
-
|
|
39
|
-
@import "bulma/sass/helpers/color";
|
|
40
|
-
@import "bulma/sass/helpers/flexbox";
|
|
41
|
-
@import "bulma/sass/helpers/float";
|
|
42
|
-
@import "bulma/sass/helpers/other";
|
|
43
|
-
@import "bulma/sass/helpers/overflow";
|
|
44
|
-
@import "bulma/sass/helpers/position";
|
|
45
|
-
@import "bulma/sass/helpers/spacing";
|
|
46
|
-
@import "bulma/sass/helpers/typography";
|
|
47
|
-
@import "bulma/sass/helpers/visibility";
|
|
2
|
+
|
|
3
|
+
@use "bulma/sass" with(
|
|
4
|
+
$gap: 8px,
|
|
5
|
+
$notification-padding: 0.75rem 0.75rem,
|
|
6
|
+
);
|
|
48
7
|
|
|
49
8
|
html {
|
|
50
9
|
font-size: 13px;
|
|
@@ -92,7 +51,7 @@ td {
|
|
|
92
51
|
}
|
|
93
52
|
|
|
94
53
|
.pagination-ellipsis {
|
|
95
|
-
min-width:
|
|
54
|
+
min-width: 2.5em;
|
|
96
55
|
}
|
|
97
56
|
|
|
98
57
|
.container {
|
|
@@ -120,4 +79,10 @@ table.is-borderless td,
|
|
|
120
79
|
|
|
121
80
|
.inline-control-text {
|
|
122
81
|
line-height: 32.5px
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.scrolling-div {
|
|
85
|
+
margin-top: 8px;
|
|
86
|
+
overflow-y: auto;
|
|
87
|
+
max-height: calc(100vh - 78px) !important;
|
|
123
88
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Link } from "@solidjs/router";
|
|
2
1
|
import { Component, For } from "solid-js";
|
|
2
|
+
import { A } from "@solidjs/router";
|
|
3
3
|
|
|
4
4
|
export type BreadCrumbItem = { href?: string; text: string };
|
|
5
5
|
|
|
@@ -12,17 +12,17 @@ export const Breadcrumb: Component<{
|
|
|
12
12
|
<nav class="breadcrumb has-succeeds-separator">
|
|
13
13
|
<ul>
|
|
14
14
|
<li classList={{ "is-active": props.items.length === 0 }}>
|
|
15
|
-
<
|
|
15
|
+
<A href="/">
|
|
16
16
|
<span class="icon is-small mr-2">
|
|
17
17
|
<i class="fas fa-home" />
|
|
18
18
|
</span>
|
|
19
19
|
<span>Report</span>
|
|
20
|
-
</
|
|
20
|
+
</A>
|
|
21
21
|
</li>
|
|
22
22
|
<For each={props.items}>
|
|
23
23
|
{(link, i) => (
|
|
24
24
|
<li classList={{ "is-active": i() === props.items.length - 1 }}>
|
|
25
|
-
<
|
|
25
|
+
<A href={link.href || "#"}>{link.text}</A>
|
|
26
26
|
</li>
|
|
27
27
|
)}
|
|
28
28
|
</For>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Component, createSignal, For } from "solid-js";
|
|
2
2
|
import api from "../Api";
|
|
3
|
-
import { useNavigate } from "@solidjs/router";
|
|
3
|
+
import { useNavigate, A } from "@solidjs/router";
|
|
4
4
|
import { useStore } from "../store";
|
|
5
5
|
|
|
6
6
|
export const DatasetDropdown: Component = () => {
|
|
@@ -28,18 +28,18 @@ export const DatasetDropdown: Component = () => {
|
|
|
28
28
|
|
|
29
29
|
return (
|
|
30
30
|
<div class="navbar-item has-dropdown is-hoverable">
|
|
31
|
-
<
|
|
31
|
+
<A class="navbar-link">{selectedDataset()}</A>
|
|
32
32
|
<div class="navbar-dropdown">
|
|
33
33
|
<For each={api.getDatasetIds()}>
|
|
34
34
|
{(dataset: string) => (
|
|
35
|
-
<
|
|
35
|
+
<A
|
|
36
36
|
class="navbar-item"
|
|
37
37
|
onClick={() => {
|
|
38
38
|
switchIt(dataset);
|
|
39
39
|
}}
|
|
40
40
|
>
|
|
41
41
|
{dataset}
|
|
42
|
-
</
|
|
42
|
+
</A>
|
|
43
43
|
)}
|
|
44
44
|
</For>
|
|
45
45
|
</div>
|
|
@@ -6,7 +6,7 @@ import { ValueArray } from "@molgenis/vip-report-vcf/src/ValueParser";
|
|
|
6
6
|
import { Info } from "./record/Info";
|
|
7
7
|
import { FieldValue } from "./record/field/Field";
|
|
8
8
|
import { isCsqInfo } from "../utils/csqUtils";
|
|
9
|
-
import {
|
|
9
|
+
import { useLocation, A } from "@solidjs/router";
|
|
10
10
|
|
|
11
11
|
export const InfoCollapsablePane: Component<{
|
|
12
12
|
fields: FieldMetadata[];
|
|
@@ -58,8 +58,8 @@ export const InfoCollapsablePane: Component<{
|
|
|
58
58
|
<>
|
|
59
59
|
{j() != 0 && collapsed() && <br />}
|
|
60
60
|
{(j() == 0 || collapsed()) &&
|
|
61
|
-
(isCsqInfo(field, "
|
|
62
|
-
<
|
|
61
|
+
(isCsqInfo(field, "VIPC") ? (
|
|
62
|
+
<A href={`${useLocation().pathname}/${props.record.id}/consequences/${j()}`}>
|
|
63
63
|
<Info
|
|
64
64
|
info={value}
|
|
65
65
|
infoMeta={field}
|
|
@@ -68,7 +68,7 @@ export const InfoCollapsablePane: Component<{
|
|
|
68
68
|
isPossibleCompound: props.isPossibleCompound,
|
|
69
69
|
}}
|
|
70
70
|
/>
|
|
71
|
-
</
|
|
71
|
+
</A>
|
|
72
72
|
) : (
|
|
73
73
|
<Info
|
|
74
74
|
info={value}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useNavigate, A } from "@solidjs/router";
|
|
2
2
|
import { Component, createMemo, For, Show } from "solid-js";
|
|
3
3
|
import { Item, Phenotype, PhenotypicFeature, Sample } from "@molgenis/vip-report-api/src/Api";
|
|
4
4
|
import { HpoTerm } from "./HpoTerm";
|
|
@@ -66,7 +66,7 @@ export const SampleTable: Component<{
|
|
|
66
66
|
<tr>
|
|
67
67
|
<td>{sample.data.person.familyId}</td>
|
|
68
68
|
<td>
|
|
69
|
-
<
|
|
69
|
+
<A href={`/samples/${sample.id}`}>{getSampleLabel(sample.data)}</A>
|
|
70
70
|
</td>
|
|
71
71
|
<td>{sampleFatherLabel(sample.data)}</td>
|
|
72
72
|
<td>{sampleMotherLabel(sample.data)}</td>
|
|
@@ -6,7 +6,7 @@ import { FieldHeader } from "./FieldHeader";
|
|
|
6
6
|
import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
|
|
7
7
|
import { Item } from "@molgenis/vip-report-api/src/Api";
|
|
8
8
|
import { isCsqInfo } from "../utils/csqUtils";
|
|
9
|
-
import {
|
|
9
|
+
import { useLocation, A } from "@solidjs/router";
|
|
10
10
|
|
|
11
11
|
function isNonEmptyNestedInfoItem(nestedInfoField: FieldMetadata, index: number, value: Value[] | Value[][]): boolean {
|
|
12
12
|
const infoField = nestedInfoField.nested?.items[index];
|
|
@@ -87,7 +87,7 @@ export const VariantInfoNestedTable: Component<{
|
|
|
87
87
|
{isNonEmptyNestedInfoItem(props.infoField, i(), props.infoValue) && (
|
|
88
88
|
<td>
|
|
89
89
|
{isCsqInfo(infoFieldItem, "Consequence") ? (
|
|
90
|
-
<
|
|
90
|
+
<A href={`${useLocation().pathname}/consequences/${j()}`}>
|
|
91
91
|
<Info
|
|
92
92
|
info={{
|
|
93
93
|
value: Array.isArray(value) ? value[i()] : null,
|
|
@@ -97,7 +97,7 @@ export const VariantInfoNestedTable: Component<{
|
|
|
97
97
|
infoMeta={infoFieldItem}
|
|
98
98
|
context={{}}
|
|
99
99
|
/>
|
|
100
|
-
</
|
|
100
|
+
</A>
|
|
101
101
|
) : (
|
|
102
102
|
<Info
|
|
103
103
|
info={{
|
|
@@ -2,11 +2,11 @@ import { Genotype, Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
|
|
|
2
2
|
import { Ref } from "./record/Ref";
|
|
3
3
|
import { Chrom } from "./record/Chrom";
|
|
4
4
|
import { Pos } from "./record/Pos";
|
|
5
|
-
import { Link } from "@solidjs/router";
|
|
6
5
|
import { HtsFileMetadata, Item, Sample } from "@molgenis/vip-report-api/src/Api";
|
|
7
6
|
import { GenotypeField } from "./record/format/GenotypeField";
|
|
8
7
|
import { InfoCollapsablePane } from "./InfoCollapsablePane";
|
|
9
8
|
import { Component, createMemo, createSignal, For, onMount, Show } from "solid-js";
|
|
9
|
+
import { A } from "@solidjs/router";
|
|
10
10
|
import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
|
|
11
11
|
import { FieldHeader } from "./FieldHeader";
|
|
12
12
|
import { Abbr } from "./Abbr";
|
|
@@ -93,11 +93,11 @@ export const VariantsSampleTable: Component<{
|
|
|
93
93
|
{(record) => (
|
|
94
94
|
<tr>
|
|
95
95
|
<td>
|
|
96
|
-
<
|
|
96
|
+
<A href={`/samples/${props.item.id}/variants/${record.id}`}>
|
|
97
97
|
<Chrom value={record.data.c} />
|
|
98
98
|
<span>:</span>
|
|
99
99
|
<Pos value={record.data.p} />
|
|
100
|
-
</
|
|
100
|
+
</A>
|
|
101
101
|
</td>
|
|
102
102
|
<td>
|
|
103
103
|
<Ref value={record.data.r} isAbbreviate={true} />
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Metadata, Record } from "@molgenis/vip-report-vcf/src/Vcf";
|
|
2
2
|
import { Component, createMemo, For } from "solid-js";
|
|
3
|
+
import { A } from "@solidjs/router";
|
|
3
4
|
import { Ref } from "./record/Ref";
|
|
4
5
|
import { Chrom } from "./record/Chrom";
|
|
5
6
|
import { Pos } from "./record/Pos";
|
|
@@ -9,7 +10,6 @@ import { Qual } from "./record/Qual";
|
|
|
9
10
|
import { Filter } from "./record/Filter";
|
|
10
11
|
import { Info } from "./record/Info";
|
|
11
12
|
import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
|
|
12
|
-
import { Link } from "@solidjs/router";
|
|
13
13
|
import { HtsFileMetadata, Item } from "@molgenis/vip-report-api/src/Api";
|
|
14
14
|
import { FieldHeader } from "./FieldHeader";
|
|
15
15
|
import { InfoCollapsablePane } from "./InfoCollapsablePane";
|
|
@@ -76,9 +76,9 @@ export const VariantsTable: Component<{
|
|
|
76
76
|
<Chrom value={record.data.c} />
|
|
77
77
|
</td>
|
|
78
78
|
<td>
|
|
79
|
-
<
|
|
79
|
+
<A href={`/variants/${record.id}`}>
|
|
80
80
|
<Pos value={record.data.p} />
|
|
81
|
-
</
|
|
81
|
+
</A>
|
|
82
82
|
</td>
|
|
83
83
|
<td>
|
|
84
84
|
<Id value={record.data.i} />
|
|
@@ -2,7 +2,6 @@ import { Component, Match, Switch } from "solid-js";
|
|
|
2
2
|
import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
|
|
3
3
|
import { FilterCategorical } from "./FilterCategorical";
|
|
4
4
|
import { FilterIntegerGq } from "./FilterIntegerGq";
|
|
5
|
-
import { FilterIntegerDp } from "./FilterIntegerDp";
|
|
6
5
|
import { Item, Query, Sample } from "@molgenis/vip-report-api/src/Api";
|
|
7
6
|
import { FilterClinVar } from "./FilterClinVar";
|
|
8
7
|
import { isAnyCsqInfo } from "../../utils/csqUtils";
|
|
@@ -28,9 +27,6 @@ export const Filter: Component<FilterProps> = (props) => {
|
|
|
28
27
|
<Match when={props.field.id === "GQ"}>
|
|
29
28
|
<FilterIntegerGq {...props} />
|
|
30
29
|
</Match>
|
|
31
|
-
<Match when={props.field.id === "DP"}>
|
|
32
|
-
<FilterIntegerDp {...props} />
|
|
33
|
-
</Match>
|
|
34
30
|
<Match when={props.field.id === "VIAB"}>
|
|
35
31
|
<FilterAllelicBalance {...props} />
|
|
36
32
|
</Match>
|
|
@@ -15,18 +15,8 @@ function isAllelicImbalance(genotype: Genotype, allelicBalance: number | undefin
|
|
|
15
15
|
return false;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
function getTitle(
|
|
19
|
-
|
|
20
|
-
if (lowReadDepth) {
|
|
21
|
-
title = "Read depth < 20";
|
|
22
|
-
}
|
|
23
|
-
if (allelicImbalance) {
|
|
24
|
-
if (lowReadDepth) {
|
|
25
|
-
title = `${title}, `;
|
|
26
|
-
}
|
|
27
|
-
title = `${title}Allelic imbalance`;
|
|
28
|
-
}
|
|
29
|
-
return title;
|
|
18
|
+
function getTitle(allelicImbalance: boolean) {
|
|
19
|
+
return allelicImbalance ? `Allelic imbalance` : ``;
|
|
30
20
|
}
|
|
31
21
|
|
|
32
22
|
export const GenotypeField: Component<{
|
|
@@ -38,7 +28,6 @@ export const GenotypeField: Component<{
|
|
|
38
28
|
readDepth: number | undefined | null;
|
|
39
29
|
}> = (props) => {
|
|
40
30
|
const allelicImbalance: boolean = isAllelicImbalance(props.genotype, props.allelicBalance);
|
|
41
|
-
const lowReadDepth = props.readDepth !== undefined && props.readDepth !== null && props.readDepth < 20;
|
|
42
31
|
return (
|
|
43
32
|
<>
|
|
44
33
|
<For each={props.genotype.a}>
|
|
@@ -54,8 +43,8 @@ export const GenotypeField: Component<{
|
|
|
54
43
|
</>
|
|
55
44
|
)}
|
|
56
45
|
</For>
|
|
57
|
-
<Show when={
|
|
58
|
-
<abbr title={getTitle(
|
|
46
|
+
<Show when={allelicImbalance}>
|
|
47
|
+
<abbr title={getTitle(allelicImbalance)} class="ml-1 is-clickable">
|
|
59
48
|
<i class="fas fa-circle-exclamation has-text-danger" />
|
|
60
49
|
</abbr>
|
|
61
50
|
</Show>
|
package/src/index.tsx
CHANGED
|
@@ -18,6 +18,19 @@ import {
|
|
|
18
18
|
faSearch,
|
|
19
19
|
} from "@fortawesome/free-solid-svg-icons";
|
|
20
20
|
import { Provider } from "./store";
|
|
21
|
+
import { ErrorBoundary } from "solid-js";
|
|
22
|
+
import { Error } from "./components/Error";
|
|
23
|
+
import { HashRouter, Route } from "@solidjs/router";
|
|
24
|
+
import { Home } from "./views/Home";
|
|
25
|
+
import { Samples } from "./views/Samples";
|
|
26
|
+
import { Sample } from "./views/Sample";
|
|
27
|
+
import { SampleVariantsView } from "./views/SampleVariants";
|
|
28
|
+
import { SampleVariantView } from "./views/SampleVariant";
|
|
29
|
+
import { SampleVariantConsequenceView } from "./views/SampleVariantConsequence";
|
|
30
|
+
import { VariantsView } from "./views/Variants";
|
|
31
|
+
import { Variant } from "./views/Variant";
|
|
32
|
+
import { VariantConsequence } from "./views/VariantConsequence";
|
|
33
|
+
import { Help } from "./views/Help";
|
|
21
34
|
|
|
22
35
|
library.add(
|
|
23
36
|
faAngleDown,
|
|
@@ -46,7 +59,36 @@ if (document.readyState === "complete") {
|
|
|
46
59
|
render(
|
|
47
60
|
() => (
|
|
48
61
|
<Provider>
|
|
49
|
-
<
|
|
62
|
+
<ErrorBoundary fallback={(err) => <Error error={err as unknown} />}>
|
|
63
|
+
<HashRouter root={App}>
|
|
64
|
+
<Route path="/" component={Home} />
|
|
65
|
+
<Route path="/samples">
|
|
66
|
+
<Route path="/" component={Samples} />
|
|
67
|
+
<Route path="/:sampleId">
|
|
68
|
+
<Route path="/" component={Sample} />
|
|
69
|
+
<Route path="/variants">
|
|
70
|
+
<Route path="/" component={SampleVariantsView} />
|
|
71
|
+
<Route path="/:variantId">
|
|
72
|
+
<Route path="/" component={SampleVariantView} />
|
|
73
|
+
<Route path="/consequences">
|
|
74
|
+
<Route path="/:consequenceId" component={SampleVariantConsequenceView} />
|
|
75
|
+
</Route>
|
|
76
|
+
</Route>
|
|
77
|
+
</Route>
|
|
78
|
+
</Route>
|
|
79
|
+
</Route>
|
|
80
|
+
<Route path="/variants">
|
|
81
|
+
<Route path="/" component={VariantsView} />
|
|
82
|
+
<Route path="/:variantId">
|
|
83
|
+
<Route path="/" component={Variant} />
|
|
84
|
+
<Route path="/consequences">
|
|
85
|
+
<Route path="/:consequenceId" component={VariantConsequence} />
|
|
86
|
+
</Route>
|
|
87
|
+
</Route>
|
|
88
|
+
</Route>
|
|
89
|
+
<Route path="/help" component={Help} />
|
|
90
|
+
</HashRouter>
|
|
91
|
+
</ErrorBoundary>
|
|
50
92
|
</Provider>
|
|
51
93
|
),
|
|
52
94
|
document.body,
|