@molgenis/vip-report-template 2.7.1 → 3.0.0-beta

package/.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+/.idea/
+coverage

package/.eslintrc.js

@@ -1,29 +1,23 @@
 module.exports = {
-  root: true,
-  env: {
-    node: true
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: ["./tsconfig.json"],
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
   },
   extends: [
-    'plugin:vue/essential',
-    'eslint:recommended',
-    '@vue/typescript/recommended',
-    '@vue/prettier',
-    '@vue/prettier/@typescript-eslint'
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "prettier",
+    "plugin:prettier/recommended",
+    "plugin:solid/typescript",
   ],
-  parserOptions: {
-    ecmaVersion: 2020
-  },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "solid/prefer-show": "off",
   },
-  ignorePatterns: ['src/mocks/**', '**/dist/*'],
-  overrides: [
-    {
-      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
-      env: {
-        jest: true
-      }
-    }
-  ]
+  plugins: ["prettier", "@typescript-eslint"],
 };

package/.gitattributes

@@ -0,0 +1 @@
+*.* text eol=lf

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

package/.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+/.idea/
+coverage

package/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

package/.travis.yml

@@ -1,22 +1,25 @@
 language: node_js
 node_js:
-- lts/*
+  - lts/*
 branches:
   only:
     - master
-    - /^v\d+\.\d+(\.\d+)?(-\S*)?$/    
-addons:
-  sonarcloud:
-    organization: molgenis
-    token:
-      secure: bvQjauRVvqCZ++Fl2PxE873ykehRkG1+ngpDHp9K/Af1/hJUU4XNwZKYA9BeHOSxD+hELOLuYZracTzIPQ+ctWKhcQWlWmNHg3VKg6um9aUT/qMaT57tN8VoECZ54QxMY+I4Kv3f92/tdEfc/O0McCCPRmdY2pYIV/MzaMXcu3iCvEiRUk4uYO7SI/HquYdbC6WgBY5sGaC2db+wpmjrMVvol2OFylGQUHuy3fPouNsjfbAzFMNEpNEHErUVcEK/4yEw8dqT1d8eFzN9H4OM/SG9v0jMaTF+5H6zkQ3gnUUao87EEpeuh0XGrRQeGS+aMfEJjpZwFWOgrZ4vnGJwbLUyVHJIpzKXthJyvDCcreU+73gJ+gd9UJEik27koAz2ynGpbk6Y6WvATzE9fnI2FVbkw829XhO0vknwxu0R+82DKV+0JWBbKqZkDbNZ43QHRE4r5jHE4l6FWVrilBw+uBh+mOoyEGpJV3VXnwIL54A+mldwbhQNULfdfrLLty5QThKRO6erSap0gYYUJ6mSsIjro/Gtz7H/d511zeAtpgvWkbxcRXAvNI+Di0XC4INrUvnS9XdCsX3m28WKo2NCHqybnuHoyzaTD3s+vzWNua0acCmVapG3AQWDcfUQZKnYkTeoOoSe6xLDTsbD8oVk0BJ+ntPZfisquvdGGKiIM7k=
+    - /^v\d+\.\d+(\.\d+)?(-\S*)?$/
+cache:
+  npm: false
+  directories:
+    - "~/.pnpm-store"
+before_install:
+  - curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@7
+  - pnpm config set store-dir ~/.pnpm-store
 install:
-  - npm install
+  - pnpm install
 script:
-  - npm run test:unit
-  - sonar-scanner
+  - pnpm run lint
+  - pnpm run test
 before_deploy:
-  - npm run build
+  - pnpm run build
+  - mv dist/index.html dist/vip-report-template.html
 deploy:
   - provider: npm
     api_token:

package/README.md

@@ -1,31 +1,9 @@
 [![Build Status](https://app.travis-ci.com/molgenis/vip-report-template.svg?branch=master)](https://app.travis-ci.com/molgenis/vip-report-template)
-[![Quality Status](https://sonarcloud.io/api/project_badges/measure?project=molgenis_vip-report-template&metric=alert_status)](https://sonarcloud.io/dashboard?id=molgenis_vip-report-template)
-# Variant Interpretation Pipeline - VCF Report Generator
-See https://github.com/molgenis/vip-report#readme
-See https://github.com/molgenis/vip-report-api#readme
-
-## Report Template
-Report template that can be used to generate a report for any VCF (Variant Call Format) file.
-
-### Project setup
+# vip-report-template
+The default report template for the [VIP report generator](https://github.com/molgenis/vip-report). This template is a good default for any .vcf file with support for .vcf files annotated with [VIP](https://github.com/molgenis/vip).   
+## Usage
+```bash
+$ pnpm install
+$ pnpm run build # build report template in dist folder
+$ pnpm run dev   # dev server on localhost:3000
 ```
-npm install
-```
-
-#### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-#### Compiles and minifies for production
-```
-npm run build
-```
-
-#### Lints and fixes files
-```
-npm run lint
-```
-
-#### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/). 

package/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" href="data:,">
+  <title>VCF Report</title>
+</head>
+<body class="has-navbar-fixed-top">
+<script src="/src/index.tsx" type="module"></script>
+</body>
+</html>

package/package.json

@@ -1,70 +1,57 @@
 {
   "name": "@molgenis/vip-report-template",
-  "version": "2.7.1",
+  "version": "3.0.0-beta",
   "description": "Report Template for Variant Call Format (VCF) Report Generator",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
+    "build": "vite build",
+    "build-dev": "vite build --mode dev",
+    "coverage": "vitest run --coverage",
+    "dev": "vite",
+    "format": "prettier --write src/**/*.{tsx,ts}",
+    "lint": "eslint src/**/*.{tsx,ts}",
+    "prepare": "husky install",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "license": "LGPL-3.0",
+  "devDependencies": {
+    "@molgenis/vite-plugin-inline": "^1.0.7",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/parser": "^5.28.0",
+    "bulma": "^0.9.4",
+    "c8": "^7.11.3",
+    "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-solid": "^0.7.0",
+    "husky": "^8.0.1",
+    "prettier": "^2.7.0",
+    "sass": "^1.52.3",
+    "typescript": "^4.7.3",
+    "vite": "^2.9.12",
+    "vite-plugin-solid": "^2.2.6",
+    "vitest": "^0.14.2"
   },
   "dependencies": {
-    "@molgenis/vip-report-api": "^2.4.3",
-    "bootstrap-vue": "^2.21.2",
-    "core-js": "^3.9.1",
-    "d3": "^7.0.0",
-    "dagre": "^0.8.5",
-    "fflate": "^0.6.10",
-    "file-saver": "^2.0.5",
-    "igv": "^2.10.4",
-    "vue": "^2.6.12",
-    "vue-class-component": "^7.2.6",
-    "vue-i18n": "^8.24.0",
-    "vue-property-decorator": "^9.1.2",
-    "vue-router": "^3.5.1",
-    "vuex": "^3.6.2"
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@molgenis/vip-report-api": "^3.4.2",
+    "@molgenis/vip-report-vcf": "^1.1.1",
+    "base64-js": "^1.5.1",
+    "igv": "^2.12.6",
+    "solid-app-router": "^0.3.3",
+    "solid-js": "^1.4.4"
   },
-  "devDependencies": {
-    "@types/d3": "^7.0.0",
-    "@types/d3-selection": "^3.0.0",
-    "@types/d3-shape": "^3.0.1",
-    "@types/d3-zoom": "^3.0.1",
-    "@types/dagre": "^0.7.45",
-    "@types/file-saver": "^2.0.1",
-    "@types/jest": "^26.0.20",
-    "@typescript-eslint/eslint-plugin": "^4.17.0",
-    "@typescript-eslint/parser": "^4.17.0",
-    "@vue/cli-plugin-babel": "~4.5.11",
-    "@vue/cli-plugin-eslint": "~4.5.11",
-    "@vue/cli-plugin-router": "~4.5.11",
-    "@vue/cli-plugin-typescript": "~4.5.11",
-    "@vue/cli-plugin-unit-jest": "~4.5.11",
-    "@vue/cli-plugin-vuex": "~4.5.11",
-    "@vue/cli-service": "~4.5.11",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^7.0.0",
-    "@vue/test-utils": "^1.1.3",
-    "bootstrap": "^4.6.0",
-    "eslint": "^7.21.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.7.0",
-    "html-webpack-inline-source-plugin": "0.0.10",
-    "html-webpack-plugin": "^5.3.1",
-    "node-sass": "^6.0.1",
-    "prettier": "^2.2.1",
-    "sass-loader": "^11.0.1",
-    "ts-mockito": "^2.6.1",
-    "typescript": "^4.2.3",
-    "vue-cli-plugin-bootstrap-vue": "~0.7.0",
-    "vue-cli-plugin-i18n": "~2.0.0",
-    "vue-template-compiler": "^2.6.12"
+  "lint-staged": {
+    "src/**/*.{tsx,ts}": [
+      "eslint",
+      "prettier --write"
+    ]
   },
   "bugs": {
     "url": "https://github.com/molgenis/vip-report-template/issues"
   },
   "homepage": "https://github.com/molgenis/vip-report-template#readme",
-  "license": "LGPL-3.0",
   "publishConfig": {
     "access": "public"
   },

package/src/Api.ts

@@ -0,0 +1,12 @@
+import { WindowApiClient } from "@molgenis/vip-report-api/src/WindowApiClient";
+
+// lazy import MockApiClient to ensure that it is excluded from the build artifact
+const api = import.meta.env.PROD
+  ? new WindowApiClient()
+  : await (function () {
+      return import("./mocks/MockApiClient").then((module) => {
+        return new module.MockApiClient();
+      });
+    })();
+
+export default api;

package/src/App.tsx

@@ -0,0 +1,101 @@
+import { Component, ErrorBoundary, onMount } from "solid-js";
+import { Link, Route, Routes, useLocation, useNavigate } from "solid-app-router";
+import { VariantsView } from "./views/Variants";
+import { Variant } from "./views/Variant";
+import VariantData from "./views/data/VariantData";
+import { Samples } from "./views/Samples";
+import SampleData from "./views/data/SampleData";
+import { Sample } from "./views/Sample";
+import { VariantConsequence } from "./views/VariantConsequence";
+import { SampleVariantConsequenceView } from "./views/SampleVariantConsequence";
+import { SampleVariantsView } from "./views/SampleVariants";
+import { Error } from "./components/Error";
+import SampleVariantData from "./views/data/SampleVariantData";
+import { SampleVariantView } from "./views/SampleVariant";
+import { Home } from "./views/Home";
+import api from "./Api";
+import { DatasetDropdown } from "./components/DatasetDropdown";
+import SampleVariantConsequenceData from "./views/data/SampleVariantConsequenceData";
+import VariantConsequenceData from "./views/data/VariantConsequenceData";
+
+const App: Component = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  onMount(() => {
+    (async () => {
+      const htsFile = await api.getHtsFileMetadata();
+      document.title = `VCF Report (${htsFile.uri})`;
+      const samples = await api.getSamples({ query: { selector: ["proband"], operator: "==", args: true } });
+      if (location.pathname === "/") {
+        if (samples.page.totalElements === 1) {
+          navigate(`/samples/${samples.items[0].id}/variants`);
+        } else if (samples.total === 0) {
+          navigate(`/variants`);
+        } else {
+          navigate(`/samples`);
+        }
+      }
+    })().catch((err) => console.error(err));
+  });
+
+  return (
+    <>
+      <nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+          <Link class="navbar-item has-text-weight-semibold" href="/">
+            VCF Report
+          </Link>
+        </div>
+        <div class="navbar-menu">
+          <div class="navbar-start">
+            <Link class="navbar-item" href="/samples">
+              Samples
+            </Link>
+            <Link class="navbar-item" href="/variants">
+              Variants
+            </Link>
+            {api.isDatasetSupport() && <DatasetDropdown />}
+          </div>
+        </div>
+      </nav>
+      <div class="container is-fluid">
+        <ErrorBoundary fallback={(err) => <Error error={err as unknown} />}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/samples">
+              <Route path="/" element={<Samples />} />
+              <Route path="/:sampleId" data={SampleData}>
+                <Route path="/" element={<Sample />} />
+                <Route path="/variants">
+                  <Route path="/" element={<SampleVariantsView />} />
+                  <Route path="/:variantId" data={SampleVariantData}>
+                    <Route path="/" element={<SampleVariantView />} />
+                    <Route path="/consequences">
+                      <Route
+                        path="/:consequenceId"
+                        element={<SampleVariantConsequenceView />}
+                        data={SampleVariantConsequenceData}
+                      />
+                    </Route>
+                  </Route>
+                </Route>
+              </Route>
+            </Route>
+            <Route path="/variants">
+              <Route path="/" element={<VariantsView />} />
+              <Route path="/:variantId" data={VariantData}>
+                <Route path="/" element={<Variant />} />
+                <Route path="/consequences">
+                  <Route path="/:consequenceId" element={<VariantConsequence />} data={VariantConsequenceData} />
+                </Route>
+              </Route>
+            </Route>
+          </Routes>
+        </ErrorBoundary>
+      </div>
+    </>
+  );
+};
+
+export default App;

package/src/__tests__/decisionTreeUtils.test.ts

@@ -0,0 +1,75 @@
+import { expect, test } from "vitest";
+import { getDecisionTreePath } from "../utils/decisionTreeUtils";
+import { Item } from "@molgenis/vip-report-api/src/Api";
+import { Record } from "@molgenis/vip-report-vcf/src/Vcf";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+
+test("Get DecisionTree Path", () => {
+  const fieldMetaVIPP: FieldMetadata = {
+    description: "VIP Decision tree path",
+    id: "VIPP",
+    number: { type: "NUMBER" },
+    type: "STRING",
+  };
+  const fieldMetaOther: FieldMetadata = {
+    description: "Other",
+    id: "Other",
+    number: { type: "NUMBER" },
+    type: "STRING",
+  };
+
+  const fieldMetaCsq: FieldMetadata = {
+    description: "VEP",
+    id: "CSQ",
+    number: { type: "NUMBER" },
+    type: "STRING",
+    nested: { items: [fieldMetaOther, fieldMetaVIPP], separator: "|" },
+  };
+
+  const variant: Item<Record> = {
+    data: {
+      a: [],
+      c: "",
+      f: [],
+      i: [],
+      n: {
+        CSQ: [["T", "gnomad&mvl&clinvar&exit", "MODERATE"]],
+      },
+    },
+  } as unknown as Item<Record>;
+  expect(getDecisionTreePath({ info: { CSQ: fieldMetaCsq }, lines: [], format: {}, samples: [] }, variant, 0)).toBe(
+    "gnomad&mvl&clinvar&exit"
+  );
+});
+
+test("Get DecisionTree Path - no VIPP", () => {
+  const fieldMetaOther: FieldMetadata = {
+    description: "Other",
+    id: "Other",
+    number: { type: "NUMBER" },
+    type: "STRING",
+  };
+
+  const fieldMetaCsq: FieldMetadata = {
+    description: "VEP",
+    id: "CSQ",
+    number: { type: "NUMBER" },
+    type: "STRING",
+    nested: { items: [fieldMetaOther], separator: "|" },
+  };
+
+  const variant: Item<Record> = {
+    data: {
+      a: [],
+      c: "",
+      f: [],
+      i: [],
+      n: {
+        CSQ: [["T", "gnomad&mvl&clinvar&exit", "MODERATE"]],
+      },
+    },
+  } as unknown as Item<Record>;
+  expect(getDecisionTreePath({ info: { CSQ: fieldMetaCsq }, lines: [], format: {}, samples: [] }, variant, 0)).toBe(
+    undefined
+  );
+});

package/src/__tests__/field.test.ts

@@ -0,0 +1,107 @@
+import { describe, expect, test } from "vitest";
+import { abbreviateHeader, findInfoField, isNumerical } from "../utils/field";
+import { FieldMetadata } from "@molgenis/vip-report-vcf/src/MetadataParser";
+import { Metadata } from "@molgenis/vip-report-vcf/src/Vcf";
+import { FieldMetadataContainer } from "@molgenis/vip-report-vcf/src/VcfParser";
+
+describe("field utilities", () => {
+  test("FLOAT is numerical", () => {
+    expect(isNumerical({ type: "FLOAT" } as FieldMetadata)).toBe(true);
+  });
+
+  test("INTEGER is numerical", () => {
+    expect(isNumerical({ type: "INTEGER" } as FieldMetadata)).toBe(true);
+  });
+
+  test("STRING is not numerical", () => {
+    expect(isNumerical({ type: "STRING" } as FieldMetadata)).toBe(false);
+  });
+
+  test("abbreviate header long text", () => {
+    expect(abbreviateHeader("abcdefghijklmnopqrstuvwxyz")).toBe("abcdefghijk\u2026");
+  });
+
+  test("abbreviate header short text", () => {
+    expect(abbreviateHeader("abcdef")).toBe("abcdef");
+  });
+
+  test("find info field", () => {
+    const field = { id: "field" } as FieldMetadata;
+    const recordsMetadata = {
+      info: {
+        field,
+      } as FieldMetadataContainer,
+    } as Metadata;
+
+    expect(findInfoField(recordsMetadata, ["n", "field"])).toBe(field);
+  });
+
+  test("find info field: unknown field", () => {
+    const recordsMetadata = {
+      info: {} as FieldMetadataContainer,
+    } as Metadata;
+
+    expect(() => findInfoField(recordsMetadata, ["n", "field"])).toThrowError();
+  });
+
+  test("find info field: nested", () => {
+    const childField0 = { id: "childField0" } as FieldMetadata;
+    const childField1 = { id: "childField1" } as FieldMetadata;
+    const nestedField = { id: "nestedField", nested: { items: [childField0, childField1] } } as FieldMetadata;
+
+    const recordsMetadata = {
+      info: {
+        nestedField,
+      } as FieldMetadataContainer,
+    } as Metadata;
+
+    expect(findInfoField(recordsMetadata, ["n", "nestedField", 1])).toBe(childField1);
+  });
+
+  test("find info field: missing 'n' path item", () => {
+    const field = { id: "field" } as FieldMetadata;
+    const recordsMetadata = {
+      info: {
+        field,
+      } as FieldMetadataContainer,
+    } as Metadata;
+
+    expect(() => findInfoField(recordsMetadata, ["field"])).toThrowError();
+  });
+
+  test("find info field: missing 'n' path item nested", () => {
+    const recordsMetadata = {
+      info: {} as FieldMetadataContainer,
+    } as Metadata;
+
+    expect(() => findInfoField(recordsMetadata, ["nestedField", 1])).toThrowError();
+  });
+
+  test("find info field: nested invalid index", () => {
+    const childField0 = { id: "childField0" } as FieldMetadata;
+    const childField1 = { id: "childField1" } as FieldMetadata;
+    const nestedField = { id: "nestedField", nested: { items: [childField0, childField1] } } as FieldMetadata;
+
+    const recordsMetadata = {
+      info: {
+        nestedField,
+      } as FieldMetadataContainer,
+    } as Metadata;
+
+    expect(() => findInfoField(recordsMetadata, ["n", "nestedField", 2])).toThrowError();
+  });
+
+  test("find info field: nested invalid index type", () => {
+    const childField0 = { id: "childField0" } as FieldMetadata;
+    const childField1 = { id: "childField1" } as FieldMetadata;
+    const nestedField = { id: "nestedField", nested: { items: [childField0, childField1] } } as FieldMetadata;
+
+    const recordsMetadata = {
+      info: {
+        nestedField,
+      } as FieldMetadataContainer,
+    } as Metadata;
+
+    expect(() => findInfoField(recordsMetadata, ["n", "nestedField", "childField1"])).toThrowError();
+  });
+});