protvista-uniprot 2.12.2 → 2.13.0

package/src/protvista-variation-graph-adapter.ts

@@ -0,0 +1,47 @@
+export const transformData = (data) => {
+  if (data.sequence && data.features.length) {
+    const variants = data.features.map((variant) => ({
+        ...variant,
+        accession: variant.genomicLocation?.join(", "),
+        start: variant.begin,
+      }));
+
+    const total = new Uint8ClampedArray(data.sequence.length);
+    const diseaseTotal = new Uint8ClampedArray(data.sequence.length);
+
+    for (const { start, association } of variants) {
+      const index = +start;
+      // skip if the variant is outside of bounds
+      // eslint-disable-next-line no-continue
+      if (index < 1 || index > data.sequence.length) continue;
+
+      // eslint-disable-next-line no-plusplus
+      total[index]++;
+
+      // eslint-disable-next-line no-continue
+      if (!association) continue;
+      const hasDisease = association.find(
+        (association) => association.disease === true
+      );
+      // eslint-disable-next-line no-plusplus
+      if (hasDisease) diseaseTotal[index]++;
+    }
+
+    const graphData = [
+        {
+          name: 'variant',
+          range: [0, Math.max(Math.max(...total), Math.max(...diseaseTotal))],
+          color: 'darkgrey',
+          values: [...total].map((value, index) => ({ position: index, value: value })),
+        },
+        {
+          name: 'disease causing variant',
+          range: [0, Math.max(Math.max(...total), Math.max(...diseaseTotal))],
+          color: 'red',
+          values: [...diseaseTotal].map((value, index) => ({ position: index, value: value })),
+        },
+      ];
+    return graphData;
+  }
+};
+

package/src/styles/protvista-styles.ts

@@ -1,10 +1,6 @@
 import { css } from 'lit-element';
 
 export default css`
-  protvista-tooltip a {
-    text-decoration: underline;
-    color: #fff;
-  }
   .track-content {
     width: 80vw;
   }
@@ -27,16 +23,11 @@ export default css`
 
   .category-label,
   .track-label,
-  .action-buttons,
+  .nav-track-label,
   .credits {
     width: 20vw;
     padding: 0.5em;
-  }
-
-  .action-buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
+    line-height: normal;
   }
 
   .category-label {
@@ -74,11 +65,11 @@ export default css`
     background-color: #d9faff;
   }
 
-  protvista-track {
+  nightingale-track {
     border-top: 1px solid #d9faff;
   }
 
-  protvista-navigation {
+  nightingale-navigation {
     .handle {
       fill: darkgrey;
       stroke: black;
@@ -87,6 +78,10 @@ export default css`
     }
   }
 
+  nightingale-filter {
+    font-size: 0.8rem;
+  }
+
   .feature {
     cursor: pointer;
   }

package/src/types/nightingale-components.d.ts

@@ -2,7 +2,7 @@ export type NightingaleEvent = Event & {
   detail?: {
     displaystart?: number;
     displayend?: number;
-    eventtype?: 'click';
+    eventType?: "click" | "mouseover" | "mouseout" | "reset";
     feature?: any;
     coords?: [number, number];
   };

package/src/types/nightingale-sequence-heatmap.d.ts

@@ -0,0 +1 @@
+declare module '@nightingale-elements/nightingale-sequence-heatmap';

package/dist/es/download-panel.d.ts

@@ -1,29 +0,0 @@
-import { LitElement } from 'lit-element';
-import { DownloadConfig } from './protvista-uniprot';
-declare class DownloadPanel extends LitElement {
-    open: boolean;
-    format: string;
-    config?: DownloadConfig;
-    accession?: string;
-    constructor();
-    static get properties(): {
-        accession: {
-            type: StringConstructor;
-        };
-        config: {
-            type: ArrayConstructor;
-        };
-        open: {
-            type: BooleanConstructor;
-        };
-        format: {
-            type: StringConstructor;
-        };
-    };
-    static get styles(): import("lit-element").CSSResult;
-    handleDownload(): void;
-    handleSetFormat(format: string): void;
-    downloadSVG(): import("lit-element").SVGTemplateResult;
-    render(): import("lit-element").TemplateResult;
-}
-export default DownloadPanel;

package/dist/es/download-panel.js

@@ -1,137 +0,0 @@
-import { LitElement, html, css, svg } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import urlJoin from 'url-join';
-import { saveAs } from 'file-saver';
-import downloadIcon from './icons/download.svg';
-const downloadFiles = (downloadConfig, format = 'json', accession) => {
-    downloadConfig.forEach((config) => {
-        saveAs(urlJoin(config.url, `${accession}.${format}`, `${accession}_${config.type}.${format}`), `${accession}_${config.type}.${format}`);
-    });
-};
-class DownloadPanel extends LitElement {
-    constructor() {
-        super();
-        this.open = false;
-        this.format = 'json';
-    }
-    static get properties() {
-        return {
-            accession: { type: String },
-            config: { type: Array },
-            open: { type: Boolean },
-            format: { type: String },
-        };
-    }
-    static get styles() {
-        return css `
-      :host {
-        position: relative;
-      }
-
-      :host button {
-        display: inline-block;
-        background-color: #FFF;
-        border: none;
-        padding: 0.2rem;
-        margin: 0;
-        text-decoration: none;
-        font-size: 1rem;
-        cursor: pointer;
-        text-align: center;
-        color: #00709b;
-        transition: opacity 250ms ease-in-out, transform 150ms ease;
-        opacity: 0.8
-        -webkit-appearance: none;
-        -moz-appearance: none;
-      }
-
-      :host button:hover {
-        opacity:1;
-      }
-
-      :host button svg {
-        width: 1.5rem;
-        height: 1.5rem;
-        transition: opacity 250ms ease-in-out, transform 150ms ease;
-        opacity: 0.8;
-      }
-      :host button svg:hover {
-        opacity: 1;
-      }
-
-      .download-menu {
-        display: none;
-        position: absolute;
-        background-color: #fff;
-        padding: 1rem;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-        transition: all 0.3s cubic-bezier(.25,.8,.25,1);      
-      }
-      :host(:hover) .download-menu {
-        display: block;
-      }
-      .download-menu ul {
-        margin: 0;
-        padding: 0;
-      }
-      .download-menu li {
-        list-style: none;
-        margin: 0.5rem 0;
-      }
-    `;
-    }
-    handleDownload() {
-        if (this.config && this.accession) {
-            downloadFiles(this.config, this.format, this.accession);
-        }
-    }
-    handleSetFormat(format) {
-        this.format = format;
-    }
-    downloadSVG() {
-        return svg `${unsafeHTML(downloadIcon)}`;
-    }
-    render() {
-        return html `
-      <button title="Download">${this.downloadSVG()}</button>
-      <div class="${`download-menu ${this.open && `download-menu-open`}`}">
-        <ul>
-          <li>
-            <label
-              ><input
-                type="radio"
-                name="download-type"
-                value="json"
-                checked
-                @click="${() => this.handleSetFormat('json')}"
-              />JSON</label
-            >
-          </li>
-          <li>
-            <label
-              ><input
-                type="radio"
-                name="download-type"
-                value="xml"
-                @click="${() => this.handleSetFormat('xml')}"
-              />XML</label
-            >
-          </li>
-          <li>
-            <label
-              ><input
-                type="radio"
-                name="download-type"
-                value="gff"
-                @click="${() => this.handleSetFormat('gff')}"
-              />GFF</label
-            >
-          </li>
-        </ul>
-        <button @click="${this.handleDownload}">Download</button>
-      </div>
-    `;
-    }
-}
-export default DownloadPanel;
-//# sourceMappingURL=download-panel.js.map

package/dist/es/download-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"download-panel.js","sourceRoot":"","sources":["../../src/download-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,OAAO,OAAO,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAIhD,MAAM,aAAa,GAAG,CACpB,cAA8B,EAC9B,MAAM,GAAG,MAAM,EACf,SAAiB,EACjB,EAAE;IACF,cAAc,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QAChC,MAAM,CACJ,OAAO,CACL,MAAM,CAAC,GAAG,EACV,GAAG,SAAS,IAAI,MAAM,EAAE,EACxB,GAAG,SAAS,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,EAAE,CACxC,EACD,GAAG,SAAS,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,EAAE,CACxC,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,aAAc,SAAQ,UAAU;IAMpC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YAC3B,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACvB,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YACvB,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACzB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDT,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,EAAE;YACjC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SACzD;IACH,CAAC;IAED,eAAe,CAAC,MAAc;QAC5B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,WAAW;QACT,OAAO,GAAG,CAAA,GAAG,UAAU,CAAC,YAAY,CAAC,EAAE,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,WAAW,EAAE;oBAC/B,iBAAiB,IAAI,CAAC,IAAI,IAAI,oBAAoB,EAAE;;;;;;;;;0BAS9C,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC;;;;;;;;;;0BAUlC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;;;;;;;;;;0BAUjC,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;;;;;0BAKjC,IAAI,CAAC,cAAc;;KAExC,CAAC;IACJ,CAAC;CACF;AAED,eAAe,aAAa,CAAC"}

package/src/download-panel.ts

@@ -1,164 +0,0 @@
-import { LitElement, html, css, svg } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import urlJoin from 'url-join';
-import { saveAs } from 'file-saver';
-
-import downloadIcon from './icons/download.svg';
-
-import { DownloadConfig } from './protvista-uniprot';
-
-const downloadFiles = (
-  downloadConfig: DownloadConfig,
-  format = 'json',
-  accession: string
-) => {
-  downloadConfig.forEach((config) => {
-    saveAs(
-      urlJoin(
-        config.url,
-        `${accession}.${format}`,
-        `${accession}_${config.type}.${format}`
-      ),
-      `${accession}_${config.type}.${format}`
-    );
-  });
-};
-
-class DownloadPanel extends LitElement {
-  open: boolean;
-  format: string;
-  config?: DownloadConfig;
-  accession?: string;
-
-  constructor() {
-    super();
-    this.open = false;
-    this.format = 'json';
-  }
-
-  static get properties() {
-    return {
-      accession: { type: String },
-      config: { type: Array },
-      open: { type: Boolean },
-      format: { type: String },
-    };
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        position: relative;
-      }
-
-      :host button {
-        display: inline-block;
-        background-color: #FFF;
-        border: none;
-        padding: 0.2rem;
-        margin: 0;
-        text-decoration: none;
-        font-size: 1rem;
-        cursor: pointer;
-        text-align: center;
-        color: #00709b;
-        transition: opacity 250ms ease-in-out, transform 150ms ease;
-        opacity: 0.8
-        -webkit-appearance: none;
-        -moz-appearance: none;
-      }
-
-      :host button:hover {
-        opacity:1;
-      }
-
-      :host button svg {
-        width: 1.5rem;
-        height: 1.5rem;
-        transition: opacity 250ms ease-in-out, transform 150ms ease;
-        opacity: 0.8;
-      }
-      :host button svg:hover {
-        opacity: 1;
-      }
-
-      .download-menu {
-        display: none;
-        position: absolute;
-        background-color: #fff;
-        padding: 1rem;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-        transition: all 0.3s cubic-bezier(.25,.8,.25,1);      
-      }
-      :host(:hover) .download-menu {
-        display: block;
-      }
-      .download-menu ul {
-        margin: 0;
-        padding: 0;
-      }
-      .download-menu li {
-        list-style: none;
-        margin: 0.5rem 0;
-      }
-    `;
-  }
-
-  handleDownload() {
-    if (this.config && this.accession) {
-      downloadFiles(this.config, this.format, this.accession);
-    }
-  }
-
-  handleSetFormat(format: string) {
-    this.format = format;
-  }
-
-  downloadSVG() {
-    return svg`${unsafeHTML(downloadIcon)}`;
-  }
-
-  render() {
-    return html`
-      <button title="Download">${this.downloadSVG()}</button>
-      <div class="${`download-menu ${this.open && `download-menu-open`}`}">
-        <ul>
-          <li>
-            <label
-              ><input
-                type="radio"
-                name="download-type"
-                value="json"
-                checked
-                @click="${() => this.handleSetFormat('json')}"
-              />JSON</label
-            >
-          </li>
-          <li>
-            <label
-              ><input
-                type="radio"
-                name="download-type"
-                value="xml"
-                @click="${() => this.handleSetFormat('xml')}"
-              />XML</label
-            >
-          </li>
-          <li>
-            <label
-              ><input
-                type="radio"
-                name="download-type"
-                value="gff"
-                @click="${() => this.handleSetFormat('gff')}"
-              />GFF</label
-            >
-          </li>
-        </ul>
-        <button @click="${this.handleDownload}">Download</button>
-      </div>
-    `;
-  }
-}
-
-export default DownloadPanel;

package/src/types/protvista-filter.d.ts

@@ -1,16 +0,0 @@
-declare module 'protvista-filter';
-
-declare class ProtvistaFilter extends HTMLElement {
-  filters: {
-    name: string;
-    type: {
-      name: string;
-      text: string;
-    };
-    options: {
-      labels: string[];
-      colors: string[];
-    };
-    filterData: (data: any) => any;
-  }[];
-}

package/src/types/protvista-interpro-track.d.ts

@@ -1 +0,0 @@
-declare module 'protvista-interpro-track';

package/src/types/protvista-manager.d.ts

@@ -1 +0,0 @@
-declare module 'protvista-manager';

package/src/types/protvista-navigation.d.ts

@@ -1 +0,0 @@
-declare module 'protvista-navigation';

package/src/types/protvista-sequence.d.ts

@@ -1 +0,0 @@
-declare module 'protvista-sequence';

package/src/types/protvista-tooltip.d.ts

@@ -1,8 +0,0 @@
-declare module 'protvista-tooltip';
-
-declare class ProtvistaTooltip extends HTMLElement {
-  title: string;
-  visible: boolean;
-  x: number;
-  y: number;
-}

package/src/types/protvista-track.d.ts

@@ -1,5 +0,0 @@
-declare module 'protvista-track';
-
-declare class ProtvistaTrack extends HTMLElement {
-  data?: any;
-}

package/src/types/protvista-variation-graph.d.ts

@@ -1 +0,0 @@
-declare module 'protvista-variation-graph';