@molgenis/vip-report-template 6.2.0 → 7.0.0

package/src/components/filter/typed/FilterTyped.tsx

@@ -0,0 +1,56 @@
+import { Component, Match, Switch } from "solid-js";
+import { FilterCategorical } from "./FilterCategorical";
+import { FilterString } from "./FilterString";
+import { FilterInterval } from "./FilterInterval";
+import {
+  ConfigFilterField,
+  FilterValueCategorical,
+  FilterValueField,
+  FilterValueFlag,
+  FilterValueInterval,
+  FilterValueString,
+} from "../../../types/configFilter";
+import { ErrorNotification } from "../../ErrorNotification";
+import { FilterFlag } from "./FilterFlag";
+import { FilterProps } from "../Filter.tsx";
+
+export const FilterTyped: Component<FilterProps<ConfigFilterField, FilterValueField>> = (props) => {
+  const type = () => props.config.field.type;
+
+  return (
+    <Switch fallback={<ErrorNotification error={`unexpected field type ${type()}`} />}>
+      <Match when={type() === "CATEGORICAL"}>
+        <FilterCategorical
+          config={props.config}
+          value={props.value as FilterValueCategorical}
+          onValueChange={props.onValueChange}
+          onValueClear={props.onValueClear}
+        />
+      </Match>
+      <Match when={type() === "CHARACTER" || type() === "STRING"}>
+        <FilterString
+          config={props.config}
+          value={props.value as FilterValueString}
+          onValueChange={props.onValueChange}
+          onValueClear={props.onValueClear}
+        />
+      </Match>
+      <Match when={type() === "INTEGER" || type() === "FLOAT"}>
+        <FilterInterval
+          config={props.config}
+          value={props.value as FilterValueInterval}
+          onValueChange={props.onValueChange}
+          onValueClear={props.onValueClear}
+        />
+      </Match>
+      <Match when={type() === "FLAG"}>
+        <FilterFlag
+          config={props.config}
+          value={props.value as FilterValueFlag}
+          onValueChange={props.onValueChange}
+          onValueClear={props.onValueClear}
+        />
+      </Match>
+    </Switch>
+  );
+};

package/src/components/form/ButtonApply.tsx

@@ -0,0 +1,11 @@
+import { Component } from "solid-js";
+
+export const ButtonApply: Component<{ onClick: () => void }> = (props) => {
+  return (
+    <button class="button is-small is-info" onClick={() => props.onClick()}>
+      <span class="icon">
+        <i class="fas fa-angle-right" />
+      </span>
+    </button>
+  );
+};

package/src/components/form/ButtonDownload.tsx

@@ -0,0 +1,11 @@
+import { Component } from "solid-js";
+
+export const ButtonDownload: Component<{ title: string; onClick: () => void }> = (props) => {
+  return (
+    <button class="button is-info" onClick={() => props.onClick()} title={props.title}>
+      <span class="icon is-small">
+        <i class="fas fa-download" />
+      </span>
+    </button>
+  );
+};

package/src/components/form/ButtonReset.tsx

@@ -0,0 +1,9 @@
+import { Component } from "solid-js";
+
+export const ButtonReset: Component<{ onClick: () => void }> = (props) => {
+  return (
+    <button class="button is-small is-ghost" onClick={() => props.onClick()}>
+      Reset
+    </button>
+  );
+};

package/src/components/{Checkbox.tsx → form/Checkbox.tsx}

@@ -1,15 +1,12 @@
-import { Component, Show } from "solid-js";
-import { Abbr } from "./Abbr";
+import { ParentComponent } from "solid-js";
 
 export type CheckboxEvent = {
   value: string;
   checked: boolean;
 };
 
-export const Checkbox: Component<{
-  value?: string;
-  label: string;
-  desc?: string;
+export const Checkbox: ParentComponent<{
+  value: string;
   checked?: boolean;
   onChange: (event: CheckboxEvent) => void;
 }> = (props) => {
@@ -24,9 +21,7 @@ export const Checkbox: Component<{
   return (
     <label class="checkbox">
       <input class="mr-1" type="checkbox" value={props.value} checked={props.checked} onChange={onChange} />
-      <Show when={props.desc !== undefined} fallback={<span>{props.label}</span>}>
-        <Abbr title={props.desc as string} value={props.label} />
-      </Show>
+      {props.children}
     </label>
   );
 };

package/src/components/form/Input.tsx

@@ -0,0 +1,19 @@
+import { Component } from "solid-js";
+
+export type InputValue = string;
+export type InputChangeEvent = { value: InputValue };
+export type InputChangeCallback = (event: InputChangeEvent) => void;
+export type InputProps = { placeholder?: string; value?: InputValue; onValueChange: InputChangeCallback };
+
+export const Input: Component<InputProps> = (props) => {
+  // do not use 'value={props.value}' because 'value=undefined' will display the value 'undefined' in the input
+  return (
+    <input
+      class="input is-small"
+      type="text"
+      {...(props.value ? { value: props.value } : {})}
+      placeholder={props.placeholder}
+      onInput={(event) => props.onValueChange({ value: (event.target as HTMLInputElement).value })}
+    />
+  );
+};

package/src/components/form/Select.scss

@@ -0,0 +1,7 @@
+/* from https://stackoverflow.com/a/29806043 */
+select:required:invalid {
+  color: var(--bulma-input-placeholder-color)
+}
+option {
+  color: black;
+}

package/src/components/form/Select.tsx

@@ -0,0 +1,34 @@
+import "./Select.scss";
+import { Component, For, Show } from "solid-js";
+
+export type SelectOption = { id: string; label: string };
+export type SelectValue = string;
+export type SelectChangeEvent = { value: SelectValue };
+export type SelectChangeCallback = (event: SelectChangeEvent) => void;
+export type SelectProps = {
+  placeholder?: string;
+  options: SelectOption[];
+  value?: SelectValue;
+  onValueChange: SelectChangeCallback;
+};
+
+export const Select: Component<SelectProps> = (props) => {
+  return (
+    <div class="select is-small is-fullwidth">
+      <select required onChange={(e) => props.onValueChange({ value: (e.target as HTMLSelectElement).value })}>
+        <Show when={props.placeholder}>
+          <option value="" selected={props.value === undefined}>
+            {props.placeholder}
+          </option>
+        </Show>
+        <For each={props.options}>
+          {(option) => (
+            <option value={option.id} selected={option.id === props.value}>
+              {option.label}
+            </option>
+          )}
+        </For>
+      </select>
+    </div>
+  );
+};

package/src/components/tree/DecisionTreeBoolMultiQuery.tsx

@@ -1,5 +1,5 @@
 import { Component, For } from "solid-js";
-import { BoolMultiQuery } from "@molgenis/vip-report-api/src/Api";
+import { BoolMultiQuery } from "@molgenis/vip-report-api";
 import { DecisionTreeBoolQuery } from "./DecisionTreeBoolQuery";
 import { DecisionTreeOutcomeNode } from "./DecisionTreeOutcomeNode";
 

package/src/components/tree/DecisionTreeBoolQuery.tsx

@@ -1,5 +1,5 @@
 import { Component, createMemo } from "solid-js";
-import { BoolQuery } from "@molgenis/vip-report-api/src/Api";
+import { BoolQuery } from "@molgenis/vip-report-api";
 import { Abbr } from "../Abbr";
 
 export const DecisionTreeBoolQuery: Component<{ query: BoolQuery }> = (props) => {

package/src/components/tree/DecisionTreeNode.tsx

@@ -1,13 +1,13 @@
 import { Component, createSignal, Match, Show, Signal, Switch } from "solid-js";
-import { BoolMultiNode, BoolNode, CategoricalNode, ExistsNode, LeafNode, Node } from "@molgenis/vip-report-api/src/Api";
-import { Error } from "../Error";
+import { BoolMultiNode, BoolNode, CategoricalNode, ExistsNode, LeafNode, Node } from "@molgenis/vip-report-api";
+import { ErrorNotification } from "../ErrorNotification";
 import { DecisionTreeNodeBool } from "./DecisionTreeNodeBool";
 import { DecisionTreeNodeBoolMulti } from "./DecisionTreeNodeBoolMulti";
 import { DecisionTreeNodeCategorical } from "./DecisionTreeNodeCategorical";
 import { DecisionTreeNodeExists } from "./DecisionTreeNodeExists";
 import { DecisionTreeNodeLeaf } from "./DecisionTreeNodeLeaf";
 
-export const DecisionTreeNode: Component<{ nodeId: string; node: Node }> = (props) => {
+export const DecisionTreeNode: Component<{ nodeId: string; node: Node | undefined }> = (props) => {
   const [collapsed, setCollapsed]: Signal<boolean> = createSignal(true);
 
   function toggleCollapse() {
@@ -16,49 +16,51 @@ export const DecisionTreeNode: Component<{ nodeId: string; node: Node }> = (prop
 
   return (
     <Show
-      when={props.node !== undefined}
+      when={props.node}
       fallback={
         <div class="notification is-danger is-light">
           Error: Unknown node "{props.nodeId}". (Possible mismatch between VCF file and provided decision tree.)
         </div>
       }
     >
-      <div classList={{ card: true, "has-background-success": props.node.type === "LEAF" }}>
-        <header class="card-header">
-          <p class="card-header-title">
-            <span>{props.nodeId}</span>
-            {props.node.description && <span class="ml-1">({props.node.description})</span>}
-          </p>
-          <button class="card-header-icon" aria-label="more options" onClick={toggleCollapse}>
-            <span class="icon">
-              <i classList={{ fas: true, "fa-angle-down": collapsed(), "fa-angle-up": !collapsed() }} />
-            </span>
-          </button>
-        </header>
-        {!collapsed() && (
-          <div class="card-content">
-            <div class="content">
-              <Switch fallback={<Error error={`invalid node type ${props.node.type}`} />}>
-                <Match when={props.node.type === "BOOL"}>
-                  <DecisionTreeNodeBool node={props.node as BoolNode} />
-                </Match>
-                <Match when={props.node.type === "BOOL_MULTI"}>
-                  <DecisionTreeNodeBoolMulti node={props.node as BoolMultiNode} />
-                </Match>
-                <Match when={props.node.type === "CATEGORICAL"}>
-                  <DecisionTreeNodeCategorical node={props.node as CategoricalNode} />
-                </Match>
-                <Match when={props.node.type === "EXISTS"}>
-                  <DecisionTreeNodeExists node={props.node as ExistsNode} />
-                </Match>
-                <Match when={props.node.type === "LEAF"}>
-                  <DecisionTreeNodeLeaf node={props.node as LeafNode} />
-                </Match>
-              </Switch>
+      {(node) => (
+        <div classList={{ card: true, "has-background-success": node().type === "LEAF" }}>
+          <header class="card-header">
+            <p class="card-header-title">
+              <span>{node().label}</span>
+              {node().description && <span class="ml-1">({node().description})</span>}
+            </p>
+            <button class="card-header-icon" aria-label="more options" onClick={toggleCollapse}>
+              <span class="icon">
+                <i classList={{ fas: true, "fa-angle-down": collapsed(), "fa-angle-up": !collapsed() }} />
+              </span>
+            </button>
+          </header>
+          {!collapsed() && (
+            <div class="card-content">
+              <div class="content">
+                <Switch fallback={<ErrorNotification error={`invalid node type ${node().type}`} />}>
+                  <Match when={node().type === "BOOL"}>
+                    <DecisionTreeNodeBool node={node() as BoolNode} />
+                  </Match>
+                  <Match when={node().type === "BOOL_MULTI"}>
+                    <DecisionTreeNodeBoolMulti node={node() as BoolMultiNode} />
+                  </Match>
+                  <Match when={node().type === "CATEGORICAL"}>
+                    <DecisionTreeNodeCategorical node={node() as CategoricalNode} />
+                  </Match>
+                  <Match when={node().type === "EXISTS"}>
+                    <DecisionTreeNodeExists node={node() as ExistsNode} />
+                  </Match>
+                  <Match when={node().type === "LEAF"}>
+                    <DecisionTreeNodeLeaf node={node() as LeafNode} />
+                  </Match>
+                </Switch>
+              </div>
             </div>
-          </div>
-        )}
-      </div>
+          )}
+        </div>
+      )}
     </Show>
   );
 };

package/src/components/tree/DecisionTreeNodeBool.tsx

@@ -1,5 +1,5 @@
 import { Component } from "solid-js";
-import { BoolNode } from "@molgenis/vip-report-api/src/Api";
+import { BoolNode } from "@molgenis/vip-report-api";
 import { DecisionTreeOutcomeNode } from "./DecisionTreeOutcomeNode";
 import { DecisionTreeBoolQuery } from "./DecisionTreeBoolQuery";
 

package/src/components/tree/DecisionTreeNodeBoolMulti.tsx

@@ -1,5 +1,5 @@
 import { Component, For } from "solid-js";
-import { BoolMultiNode } from "@molgenis/vip-report-api/src/Api";
+import { BoolMultiNode } from "@molgenis/vip-report-api";
 import { DecisionTreeBoolMultiQuery } from "./DecisionTreeBoolMultiQuery";
 import { DecisionTreeOutcomeNode } from "./DecisionTreeOutcomeNode";
 

package/src/components/tree/DecisionTreeNodeCategorical.tsx

@@ -1,5 +1,5 @@
 import { Component, For } from "solid-js";
-import { CategoricalNode } from "@molgenis/vip-report-api/src/Api";
+import { CategoricalNode } from "@molgenis/vip-report-api";
 import { DecisionTreeOutcomeNode } from "./DecisionTreeOutcomeNode";
 
 export const DecisionTreeNodeCategorical: Component<{ node: CategoricalNode }> = (props) => {

package/src/components/tree/DecisionTreeNodeExists.tsx

@@ -1,5 +1,5 @@
 import { Component } from "solid-js";
-import { ExistsNode } from "@molgenis/vip-report-api/src/Api";
+import { ExistsNode } from "@molgenis/vip-report-api";
 import { DecisionTreeOutcomeNode } from "./DecisionTreeOutcomeNode";
 
 export const DecisionTreeNodeExists: Component<{ node: ExistsNode }> = (props) => {

package/src/components/tree/DecisionTreeNodeLeaf.tsx

@@ -1,5 +1,5 @@
 import { Component } from "solid-js";
-import { LeafNode } from "@molgenis/vip-report-api/src/Api";
+import { LeafNode } from "@molgenis/vip-report-api";
 
 export const DecisionTreeNodeLeaf: Component<{ node: LeafNode }> = (props) => {
   return <span>classification: {props.node.class}</span>;

package/src/components/tree/DecisionTreeOutcomeNode.tsx

@@ -1,5 +1,5 @@
 import { Component } from "solid-js";
-import { NodeOutcome } from "@molgenis/vip-report-api/src/Api";
+import { NodeOutcome } from "@molgenis/vip-report-api";
 
 export const DecisionTreeOutcomeNode: Component<{ node: NodeOutcome }> = (props) => {
   return (

package/src/components/tree/DecisionTreePath.tsx

@@ -1,5 +1,5 @@
 import { Component, For } from "solid-js";
-import { DecisionTree } from "@molgenis/vip-report-api/src/Api";
+import { DecisionTree } from "@molgenis/vip-report-api";
 import { DecisionTreeNode } from "./DecisionTreeNode";
 
 export type DecisionTreePath = string[];

package/src/igv.d.ts

@@ -1,8 +1,9 @@
 declare module "igv" {
   export class Browser {
     loadTrack(config: unknown): Promise<unknown>;
+    removeAllTracks(): void;
+    root: HTMLDivElement;
   }
 
   export function createBrowser(div: HTMLDivElement, config: unknown): Promise<Browser>;
-  export function removeBrowser(browser: Browser): void;
 }

package/src/index.tsx

@@ -7,33 +7,38 @@ import App from "./App";
 import { dom, library } from "@fortawesome/fontawesome-svg-core";
 import {
   faAngleDown,
+  faAngleRight,
   faAngleUp,
   faCircleExclamation,
-  faCircleXmark,
   faCircleInfo,
   faCircleQuestion,
+  faCircleXmark,
   faDownload,
   faExternalLink,
   faHome,
+  faInfo,
   faSearch,
 } from "@fortawesome/free-solid-svg-icons";
 import { Provider } from "./store";
-import { ErrorBoundary } from "solid-js";
-import { Error } from "./components/Error";
+import { createSignal, ErrorBoundary, Show } from "solid-js";
 import { HashRouter, Route } from "@solidjs/router";
 import { Home } from "./views/Home";
 import { Samples } from "./views/Samples";
 import { Sample } from "./views/Sample";
-import { SampleVariantsView } from "./views/SampleVariants";
-import { SampleVariantView } from "./views/SampleVariant";
-import { SampleVariantConsequenceView } from "./views/SampleVariantConsequence";
-import { VariantsView } from "./views/Variants";
+import { SampleVariant } from "./views/SampleVariant";
+import { SampleVariantConsequence } from "./views/SampleVariantConsequence";
+import { VariantsRedirect } from "./views/VariantsRedirect.tsx";
 import { Variant } from "./views/Variant";
 import { VariantConsequence } from "./views/VariantConsequence";
 import { Help } from "./views/Help";
+import { SampleVariants } from "./views/SampleVariants.tsx";
+import { SampleVariantsRedirect } from "./views/SampleVariantsRedirect.tsx";
+import { Variants } from "./views/Variants.tsx";
+import { ErrorNotification } from "./components/ErrorNotification.tsx";
 
 library.add(
   faAngleDown,
+  faAngleRight,
   faAngleUp,
   faCircleExclamation,
   faCircleXmark,
@@ -42,6 +47,7 @@ library.add(
   faDownload,
   faExternalLink,
   faHome,
+  faInfo,
   faSearch,
 );
 
@@ -50,16 +56,29 @@ function processIcons() {
   dom.watch();
 }
 
-if (document.readyState === "complete") {
+// process icons if document state is "complete" or "interactive", list for event if "loading"
+if (document.readyState !== "loading") {
   processIcons();
 } else {
   window.addEventListener("DOMContentLoaded", processIcons);
 }
 
+const [error, setError] = createSignal<unknown>();
+window.addEventListener("error", function () {
+  setError({ message: "An unexpected error occurred" });
+});
+
+window.addEventListener("unhandledrejection", function () {
+  setError({ message: "An unexpected error occurred" });
+});
+
 render(
   () => (
     <Provider>
-      <ErrorBoundary fallback={(err) => <Error error={err as unknown} />}>
+      <Show when={error() !== undefined}>
+        <ErrorNotification error={error()} />
+      </Show>
+      <ErrorBoundary fallback={(err) => <ErrorNotification error={err} />}>
         <HashRouter root={App}>
           <Route path="/" component={Home} />
           <Route path="/samples">
@@ -67,22 +86,32 @@ render(
             <Route path="/:sampleId">
               <Route path="/" component={Sample} />
               <Route path="/variants">
-                <Route path="/" component={SampleVariantsView} />
-                <Route path="/:variantId">
-                  <Route path="/" component={SampleVariantView} />
-                  <Route path="/consequences">
-                    <Route path="/:consequenceId" component={SampleVariantConsequenceView} />
+                <Route path="/" component={SampleVariantsRedirect} />
+                <Route path="/:variantType">
+                  <Route path="/" component={SampleVariants} />
+                  <Route path="/variant">
+                    <Route path="/:variantId">
+                      <Route path="/" component={SampleVariant} />
+                      <Route path="/consequences">
+                        <Route path="/:consequenceId" component={SampleVariantConsequence} />
+                      </Route>
+                    </Route>
                   </Route>
                 </Route>
               </Route>
             </Route>
           </Route>
           <Route path="/variants">
-            <Route path="/" component={VariantsView} />
-            <Route path="/:variantId">
-              <Route path="/" component={Variant} />
-              <Route path="/consequences">
-                <Route path="/:consequenceId" component={VariantConsequence} />
+            <Route path="/" component={VariantsRedirect} />
+            <Route path="/:variantType">
+              <Route path="/" component={Variants} />
+              <Route path="/variant">
+                <Route path="/:variantId">
+                  <Route path="/" component={Variant} />
+                  <Route path="/consequences">
+                    <Route path="/:consequenceId" component={VariantConsequence} />
+                  </Route>
+                </Route>
               </Route>
             </Route>
           </Route>