@genome-spy/core 0.36.1 → 0.37.0

package/dist/src/styles/genome-spy.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,q6EA+GG"}

package/dist/src/styles/genome-spy.css.js

@@ -0,0 +1,114 @@
+const css = `.genome-spy {
+  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  position: relative;
+}
+.genome-spy canvas {
+  transform: scale(1, 1);
+  opacity: 1;
+  transition: transform 0.6s, opacity 0.6s;
+}
+.genome-spy .loading-message {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.genome-spy .loading-message .message {
+  color: #666;
+  opacity: 0;
+  transition: opacity 0.7s;
+}
+.genome-spy.loading canvas {
+  transform: scale(0.95, 0.95);
+  opacity: 0;
+}
+.genome-spy.loading .loading-message .message {
+  opacity: 1;
+}
+.genome-spy.loading .ellipsis {
+  animation: blinker 1s linear infinite;
+}
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
+.genome-spy .tooltip {
+  position: absolute;
+  max-width: 450px;
+  overflow: hidden;
+  background: #f6f6f6;
+  padding: 10px;
+  font-size: 13px;
+  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
+  pointer-events: none;
+  z-index: 100;
+}
+.genome-spy .tooltip > :last-child {
+  margin-bottom: 0;
+}
+.genome-spy .tooltip > .title {
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  border-bottom: 1px dashed #b6b6b6;
+}
+.genome-spy .tooltip .summary {
+  font-size: 12px;
+}
+.genome-spy .tooltip table {
+  border-collapse: collapse;
+}
+.genome-spy .tooltip table:first-child {
+  margin-top: 0;
+}
+.genome-spy .tooltip table th,
+.genome-spy .tooltip table td {
+  padding: 2px 0.4em;
+  vertical-align: top;
+}
+.genome-spy .tooltip table th:first-child,
+.genome-spy .tooltip table td:first-child {
+  padding-left: 0;
+}
+.genome-spy .tooltip table th {
+  text-align: left;
+  font-weight: bold;
+}
+.genome-spy .tooltip .color-legend {
+  display: inline-block;
+  width: 0.8em;
+  height: 0.8em;
+  margin-left: 0.4em;
+  box-shadow: 0px 0px 3px 1px white;
+}
+.genome-spy .tooltip .attributes .hovered {
+  background-color: #e0e0e0;
+}
+.genome-spy .tooltip .na {
+  color: #aaa;
+  font-style: italic;
+  font-size: 80%;
+}
+.genome-spy .gene-track-tooltip .summary {
+  font-size: 90%;
+}
+.genome-spy .message-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+.genome-spy .message-box > div {
+  border: 1px solid red;
+  padding: 10px;
+  background: #fff0f0;
+}`;
+
+export default css;

package/dist/src/styles/genome-spy.scss

@@ -0,0 +1,153 @@
+@use "sass:math";
+
+$basic-spacing: 10px;
+
+$font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+.genome-spy {
+    font-family: $font-family;
+
+    position: relative;
+
+    canvas {
+        transform: scale(1, 1);
+        opacity: 1;
+        transition: transform 0.6s, opacity 0.6s;
+    }
+
+    .loading-message {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+
+        align-items: center;
+        justify-content: center;
+
+        .message {
+            color: #666;
+            opacity: 0;
+            transition: opacity 0.7s;
+        }
+    }
+
+    &.loading {
+        canvas {
+            transform: scale(0.95, 0.95);
+            opacity: 0;
+        }
+
+        .loading-message .message {
+            opacity: 1;
+        }
+
+        .ellipsis {
+            animation: blinker 1s linear infinite;
+        }
+
+        @keyframes blinker {
+            50% {
+                opacity: 0;
+            }
+        }
+    }
+
+    .tooltip {
+        position: absolute;
+
+        max-width: 450px;
+        overflow: hidden;
+
+        $background-color: #f6f6f6;
+        background: $background-color;
+        padding: $basic-spacing;
+        font-size: 13px;
+
+        box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
+
+        pointer-events: none;
+        z-index: 100;
+
+        > :last-child {
+            margin-bottom: 0;
+        }
+
+        > .title {
+            padding-bottom: math.div($basic-spacing, 2);
+            margin-bottom: math.div($basic-spacing, 2);
+            border-bottom: 1px dashed darken($background-color, 25%);
+        }
+
+        .summary {
+            font-size: 12px;
+        }
+
+        table {
+            &:first-child {
+                margin-top: 0;
+            }
+
+            border-collapse: collapse;
+
+            th,
+            td {
+                padding: 2px 0.4em;
+                vertical-align: top;
+
+                &:first-child {
+                    padding-left: 0;
+                }
+            }
+
+            th {
+                text-align: left;
+                font-weight: bold;
+            }
+        }
+
+        .color-legend {
+            display: inline-block;
+            width: 0.8em;
+            height: 0.8em;
+            margin-left: 0.4em;
+            box-shadow: 0px 0px 3px 1px white;
+        }
+
+        .attributes {
+            .hovered {
+                background-color: #e0e0e0;
+            }
+        }
+
+        .na {
+            color: #aaa;
+            font-style: italic;
+            font-size: 80%;
+        }
+    }
+
+    .gene-track-tooltip {
+        .summary {
+            font-size: 90%;
+        }
+    }
+
+    .message-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 100%;
+
+        > div {
+            border: 1px solid red;
+            padding: 10px;
+            background: #fff0f0;
+        }
+    }
+}

package/dist/src/tooltip/dataTooltipHandler.d.ts

@@ -0,0 +1,2 @@
+export default function dataTooltipHandler(datum: Record<string, any>, mark: import("../marks/mark").default, params?: Record<string, any>): Promise<string | HTMLElement | import("lit-html").TemplateResult>;
+//# sourceMappingURL=dataTooltipHandler.d.ts.map

package/dist/src/tooltip/dataTooltipHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataTooltipHandler.d.ts","sourceRoot":"","sources":["../../../src/tooltip/dataTooltipHandler.js"],"names":[],"mappings":"AAMuC,+MAMa"}

package/dist/src/tooltip/dataTooltipHandler.js

@@ -0,0 +1,64 @@
+import { html } from "lit-html";
+import formatObject from "../utils/formatObject";
+
+/**
+ * @type {import("./tooltipHandler").TooltipHandler}
+ */
+export default async function dataTooltipHandler(datum, mark, params) {
+    /**
+     * @param {string} key
+     * @param {object} datum
+     */
+    const legend = (key, datum) => {
+        for (const [channel, encoder] of Object.entries(mark.encoders)) {
+            if (encoder?.accessor?.fields.includes(key)) {
+                switch (channel) {
+                    case "color":
+                    case "fill":
+                    case "stroke":
+                        return html`
+                            <span
+                                class="color-legend"
+                                style=${`background-color: ${encoder(datum)}`}
+                            ></span>
+                        `;
+                    default:
+                }
+            }
+        }
+
+        return "";
+    };
+
+    const strippedEntries = Object.entries(datum).filter(
+        ([key, _value]) => !key.startsWith("_")
+    );
+
+    if (strippedEntries.length === 0) {
+        return;
+    }
+
+    const table = html`
+        <table class="attributes">
+            ${strippedEntries.map(
+                ([key, value]) => html`
+                    <tr>
+                        <th>${key}</th>
+                        <td>${formatObject(value)} ${legend(key, datum)}</td>
+                    </tr>
+                `
+            )}
+        </table>
+    `;
+
+    const titleText = mark.unitView.getTitleText();
+    const title = titleText
+        ? html`
+              <div class="title">
+                  <strong>${titleText}</strong>
+              </div>
+          `
+        : "";
+
+    return html`${title}${table}`;
+}

package/dist/src/tooltip/refseqGeneTooltipHandler.d.ts

@@ -0,0 +1,2 @@
+export default function refseqGeneTooltipHandler(datum: Record<string, any>, mark: import("../marks/mark").default, params?: Record<string, any>): Promise<string | HTMLElement | import("lit-html").TemplateResult>;
+//# sourceMappingURL=refseqGeneTooltipHandler.d.ts.map

package/dist/src/tooltip/refseqGeneTooltipHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"refseqGeneTooltipHandler.d.ts","sourceRoot":"","sources":["../../../src/tooltip/refseqGeneTooltipHandler.js"],"names":[],"mappings":"AAOC,qNAQc"}

package/dist/src/tooltip/refseqGeneTooltipHandler.js

@@ -0,0 +1,78 @@
+import { debounce } from "../utils/debounce";
+import { html } from "lit-html";
+
+/*
+ * https://www.ncbi.nlm.nih.gov/books/NBK25500/
+ *
+ * TODO: Implement tool & email parameters: https://www.ncbi.nlm.nih.gov/books/NBK25497/
+ */
+
+// TODO: Replace with an LRU-cache
+const symbolSummaryCache = new Map();
+
+/**
+ * @type {import("./tooltipHandler").TooltipHandler}
+ */
+export default async function refseqGeneTooltipHandler(datum, mark, params) {
+    const symbol = datum.symbol;
+
+    let summary =
+        symbolSummaryCache.get(symbol) ??
+        (await debouncedFetchGeneSummary(datum.symbol));
+
+    if (summary) {
+        symbolSummaryCache.set(symbol, summary);
+        return html`
+            <div class="title">
+                <strong>${summary.name}</strong>
+                ${summary.description}
+            </div>
+            <p class="summary">${summary.summary}</p>
+            <p class="source">Source: NCBI RefSeq Gene</p>
+        `;
+    } else {
+        return null;
+    }
+}
+
+/**
+ * @param {string} symbol
+ */
+async function fetchGeneSummary(symbol) {
+    // TODO: Add more search terms to ensure that we really find genes specific to the current genome
+
+    console.log("Searching: " + symbol);
+
+    /** @type {RequestInit} */
+    const opts = { mode: "cors" };
+
+    const searchResult = await fetch(
+        `https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esearch.fcgi?db=gene&term=${symbol}[GENE]&sort=relevance&retmode=json`,
+        opts
+    ).then((res) => res.json());
+
+    // TODO: Handle failed searchs
+    const id = searchResult.esearchresult.idlist[0];
+
+    if (id) {
+        const summaryResult = await fetch(
+            `https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=gene&id=${id}&retmode=json`,
+            opts
+        ).then((res) => res.json());
+
+        const summary = summaryResult.result[id];
+        return summary;
+    } else {
+        return null;
+    }
+}
+
+const debounced = debounce(fetchGeneSummary, 500);
+
+/**
+ *
+ * @param {string} symbol
+ */
+function debouncedFetchGeneSummary(symbol) {
+    return debounced(symbol);
+}

package/dist/src/tooltip/tooltipHandler.d.ts

@@ -0,0 +1,9 @@
+import { TemplateResult } from "lit-html";
+import Mark from "../marks/mark";
+/**
+ * Converts a datum to tooltip (HTMLElement or lit's TemplateResult).
+ */
+export type TooltipHandler = (datum: Record<string, any>, mark: Mark, 
+/** Optional parameters from the view specification */
+params?: Record<string, any>) => Promise<string | TemplateResult | HTMLElement>;
+//# sourceMappingURL=tooltipHandler.d.ts.map

package/dist/src/tooltip/tooltipHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltipHandler.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltipHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,IAAI,MAAM,eAAe,CAAC;AAEjC;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,CACzB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,IAAI,EAAE,IAAI;AACV,sDAAsD;AACtD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAC3B,OAAO,CAAC,MAAM,GAAG,cAAc,GAAG,WAAW,CAAC,CAAC"}

package/dist/src/tooltip/tooltipHandler.ts

@@ -0,0 +1,12 @@
+import { TemplateResult } from "lit-html";
+import Mark from "../marks/mark";
+
+/**
+ * Converts a datum to tooltip (HTMLElement or lit's TemplateResult).
+ */
+export type TooltipHandler = (
+    datum: Record<string, any>,
+    mark: Mark,
+    /** Optional parameters from the view specification */
+    params?: Record<string, any>
+) => Promise<string | TemplateResult | HTMLElement>;

package/dist/src/types/bmFont.d.ts

@@ -0,0 +1,58 @@
+export interface Char {
+    id: number;
+    width: number;
+    height: number;
+    xoffset: number;
+    yoffset: number;
+    xadvance: number;
+    chnl: number;
+    x: number;
+    y: number;
+    page: number;
+}
+
+export interface Info {
+    face: string;
+    size: number;
+    bold: number;
+    italic: number;
+    charset: string[];
+    unicode: number;
+    stretchH: number;
+    smooth: number;
+    aa: number;
+    padding: number[];
+    spacing: number[];
+}
+
+export interface Common {
+    lineHeight: number;
+    base: number;
+    scaleW: number;
+    scaleH: number;
+    pages: number;
+    packed: number;
+    alphaChnl: number;
+    redChnl: number;
+    greenChnl: number;
+    blueChnl: number;
+}
+
+export interface Kerning {
+    first: number;
+    second: number;
+    amount: number;
+}
+
+/**
+ * BMFont as JSON.
+ *
+ * See: https://github.com/mattdesl/bmfont2json
+ */
+export interface BMFont {
+    pages: string[];
+    chars: Char[];
+    info: Info;
+    common: Common;
+    kernings: Kerning[];
+}

package/dist/src/types/embedApi.d.ts

@@ -0,0 +1,67 @@
+import { ScaleResolutionApi } from "./scaleResolutionApi";
+import { TooltipHandler } from "../tooltip/tooltipHandler";
+import { RootSpec } from "../spec/root";
+
+/**
+ * Embeds GenomeSpy into the DOM
+ *
+ * @param el HTMLElement or a query selector
+ * @param spec A spec object or an URL to a JSON spec
+ * @param options Options
+ */
+export type EmbedFunction = (
+    el: HTMLElement | string,
+    spec: RootSpec | string,
+    options?: EmbedOptions
+) => EmbedResult;
+
+export interface EmbedOptions {
+    /**
+     * A function that allows retrieval of named data. There are two ways to provide named data:
+     * 1. A data provider (this)
+     * 2. Explicit updates using the `updateNamedData` method (the other).
+     */
+    namedDataProvider?: (name: string) => any[];
+
+    /**
+     * Custom tooltip handlers. Use `"default"` to override the default handler
+     */
+    tooltipHandlers?: Record<string, TooltipHandler>;
+}
+
+/**
+ * An API for controlling the embedded GenomeSpy instance.
+ */
+export interface EmbedResult {
+    /**
+     * Releases all resources and unregisters event listeners, etc.
+     */
+    finalize: () => void;
+
+    /**
+     * Adds an event listener, which is called when the user interacts with a mark
+     * instance. Currently, only `"click"` events are supported. The callback receives
+     * an event object as its first (and only) parameter. Its `datum` property
+     * contains the datum that the user interacted with.
+     */
+    addEventListener: (type: string, listener: (event: any) => void) => void;
+
+    /**
+     * Removes a registered event listener.
+     */
+    removeEventListener: (type: string, listener: (event: any) => void) => void;
+
+    /**
+     * Returns a named `ScaleResolution` object that allows for attaching event
+     * listeners and controlling the scale domain.
+     */
+    getScaleResolutionByName: (name: string) => ScaleResolutionApi;
+
+    /**
+     * Updates a named dataset
+     *
+     * @param name data source to update
+     * @param data new data. If left undefined, the data is retrieved from a provider.
+     */
+    updateNamedData: (name: string, data?: any[]) => void;
+}

package/dist/src/types/encoder.d.ts

@@ -0,0 +1,84 @@
+import {
+    ScaleBand,
+    ScaleIdentity,
+    ScaleLinear,
+    ScaleLogarithmic,
+    ScaleOrdinal,
+    ScalePoint,
+    ScalePower,
+    ScaleQuantile,
+    ScaleQuantize,
+    ScaleSequential,
+    ScaleSymLog,
+    ScaleThreshold,
+    ScaleTime,
+    ScaleDiverging,
+    ScaleContinuousNumeric,
+} from "d3-scale";
+import { ChannelDef } from "../spec/channel";
+import { ScaleLocus } from "../genome/scaleLocus";
+import { ScaleIndex } from "../genome/scaleIndex";
+import { Scalar } from "../spec/channel";
+
+export interface AccessorMetadata {
+    /** True if the accessor returns the same value for all objects */
+    constant: boolean;
+
+    /** The fields that the return value is based on (if any) */
+    fields: string[];
+}
+
+export type Accessor = ((datum: any) => any) & AccessorMetadata;
+
+export interface EncoderMetadata {
+    /** True if the accessor returns the same value for all objects */
+    constant: boolean;
+
+    /** True the encoder returns a "value" without a scale */
+    constantValue: boolean;
+
+    invert: (value: Scalar) => Scalar;
+
+    scale?: VegaScale;
+
+    accessor: Accessor;
+
+    /** Converts ordinal values to index numbers */
+    indexer?: (value: any) => number;
+
+    channelDef: ChannelDef;
+
+    /** Copies metadata to the target function */
+    applyMetadata: (target: Function) => void;
+}
+
+export type Encoder = ((datum: object) => Scalar) & EncoderMetadata;
+
+export type NumberEncoder = ((datum: object) => number) & EncoderMetadata;
+
+export interface ScaleMetadata {
+    /** Scale type */
+    type: string;
+
+    /** Whether to use emulated 64 bit floating point in WebGL */
+    fp64?: boolean;
+}
+
+export type D3Scale =
+    | ScaleContinuousNumeric<any, any>
+    | ScaleLinear<any, any>
+    | ScalePower<any, any>
+    | ScaleLogarithmic<any, any>
+    | ScaleSymLog<any, any>
+    | ScaleIdentity
+    | ScaleTime<any, any>
+    | ScaleSequential<any>
+    | ScaleDiverging<any>
+    | ScaleQuantize<any>
+    | ScaleQuantile<any>
+    | ScaleThreshold<any, any>
+    | ScaleOrdinal<any, any>
+    | ScaleBand<any>
+    | ScalePoint<any>;
+
+export type VegaScale = (D3Scale | ScaleIndex | ScaleLocus) & ScaleMetadata;