@genome-spy/core 0.28.3 → 0.30.0

package/dist/schema.json

@@ -3325,7 +3325,8 @@
               "type": "object"
             },
             "samples": {
-              "$ref": "#/definitions/SampleDef"
+              "$ref": "#/definitions/SampleDef",
+              "description": "Sample metadata definition. If the object is empty, the sample identifiers will be inferred from the data."
             },
             "spec": {
               "anyOf": [
@@ -3335,7 +3336,8 @@
                 {
                   "$ref": "#/definitions/UnitSpec"
                 }
-              ]
+              ],
+              "description": "The view specification to be repeated for each sample."
             },
             "stickySummaries": {
               "type": "boolean"
@@ -3871,19 +3873,23 @@
       "additionalProperties": false,
       "properties": {
         "barScale": {
-          "$ref": "#/definitions/Scale"
+          "$ref": "#/definitions/Scale",
+          "description": "An optional scale definition for mapping the attribute to the width of a metadata rectangle."
         },
         "scale": {
           "$ref": "#/definitions/Scale",
-          "description": "Color scale (primary)"
+          "description": "Scale definition for the (default) color channel"
         },
         "type": {
-          "$ref": "#/definitions/Type"
+          "$ref": "#/definitions/Type",
+          "description": "The attribute type. One of `\"nominal\"`, `\"ordinal\"`, or `\"quantitative\"`."
         },
         "visible": {
+          "description": "Whether the attribute is visible by default.",
           "type": "boolean"
         },
         "width": {
+          "description": "Width of the column in pixels.",
           "type": "number"
         }
       },
@@ -3895,14 +3901,72 @@
     "SampleDef": {
       "additionalProperties": false,
       "properties": {
+        "attributeLabelAngle": {
+          "description": "Angle to be added to the default label angle (-90).\n\n**Default value:** `0`",
+          "type": "number"
+        },
+        "attributeLabelFont": {
+          "description": "The font typeface. GenomeSpy uses [SDF](https://github.com/Chlumsky/msdfgen) versions of [Google Fonts](https://fonts.google.com/). Check their availability at the [A-Frame Fonts](https://github.com/etiennepinchon/aframe-fonts/tree/master/fonts) repository. System fonts are **not** supported.\n\n**Default value:** `\"Lato\"`",
+          "type": "string"
+        },
+        "attributeLabelFontSize": {
+          "description": "The font size in pixels.\n\n**Default value:** `11`",
+          "type": "number"
+        },
+        "attributeLabelFontStyle": {
+          "$ref": "#/definitions/FontStyle",
+          "description": "The font style. Valid values: `\"normal\"` and `\"italic\"`.\n\n**Default value:** `\"normal\"`"
+        },
+        "attributeLabelFontWeight": {
+          "$ref": "#/definitions/FontWeight",
+          "description": "The font weight. The following strings and numbers are valid values: `\"thin\"` (`100`), `\"light\"` (`300`), `\"regular\"` (`400`), `\"normal\"` (`400`), `\"medium\"` (`500`), `\"bold\"` (`700`), `\"black\"` (`900`)\n\n**Default value:** `\"regular\"`"
+        },
+        "attributeSize": {
+          "description": "Default size (width) of the metadata attribute columns. Can be configured per attribute using the `attributes` property.\n\n**Default value:** `10`",
+          "type": "number"
+        },
+        "attributeSpacing": {
+          "description": "Spacing between attribute columns in pixels.\n\n**Default value:** `1`",
+          "type": "number"
+        },
         "attributes": {
           "additionalProperties": {
             "$ref": "#/definitions/SampleAttributeDef"
           },
+          "description": "Explicitly specify the sample attributes.",
           "type": "object"
         },
         "data": {
-          "$ref": "#/definitions/Data"
+          "$ref": "#/definitions/Data",
+          "description": "Optional metadata about the samples."
+        },
+        "labelAlign": {
+          "$ref": "#/definitions/Align",
+          "description": "The horizontal alignment of the text. One of `\"left\"`, `\"center\"`, or `\"right\"`.\n\n**Default value:** `\"left\"`"
+        },
+        "labelFont": {
+          "description": "The font typeface. GenomeSpy uses [SDF](https://github.com/Chlumsky/msdfgen) versions of [Google Fonts](https://fonts.google.com/). Check their availability at the [A-Frame Fonts](https://github.com/etiennepinchon/aframe-fonts/tree/master/fonts) repository. System fonts are **not** supported.\n\n**Default value:** `\"Lato\"`",
+          "type": "string"
+        },
+        "labelFontSize": {
+          "description": "The font size in pixels.\n\n**Default value:** `11`",
+          "type": "number"
+        },
+        "labelFontStyle": {
+          "$ref": "#/definitions/FontStyle",
+          "description": "The font style. Valid values: `\"normal\"` and `\"italic\"`.\n\n**Default value:** `\"normal\"`"
+        },
+        "labelFontWeight": {
+          "$ref": "#/definitions/FontWeight",
+          "description": "The font weight. The following strings and numbers are valid values: `\"thin\"` (`100`), `\"light\"` (`300`), `\"regular\"` (`400`), `\"normal\"` (`400`), `\"medium\"` (`500`), `\"bold\"` (`700`), `\"black\"` (`900`)\n\n**Default value:** `\"regular\"`"
+        },
+        "labelLength": {
+          "description": "How much space in pixels to reserve for the labels.\n\n**Default:** `140`",
+          "type": "number"
+        },
+        "labelTitleText": {
+          "description": "Text in the label title\n\n**Default:** `\"Sample name\"`",
+          "type": "string"
         }
       },
       "type": "object"
@@ -3927,6 +3991,7 @@
     },
     "SampleSpec": {
       "additionalProperties": false,
+      "description": "A view specification for a SampleView. This is only functional in the GenomeSpy app.",
       "properties": {
         "baseUrl": {
           "type": "string"
@@ -4012,7 +4077,8 @@
           "type": "object"
         },
         "samples": {
-          "$ref": "#/definitions/SampleDef"
+          "$ref": "#/definitions/SampleDef",
+          "description": "Sample metadata definition. If the object is empty, the sample identifiers will be inferred from the data."
         },
         "spec": {
           "anyOf": [
@@ -4022,7 +4088,8 @@
             {
               "$ref": "#/definitions/UnitSpec"
             }
-          ]
+          ],
+          "description": "The view specification to be repeated for each sample."
         },
         "stickySummaries": {
           "type": "boolean"
@@ -4478,10 +4545,10 @@
         },
         "baseField": {
           "$ref": "#/definitions/Field",
-          "description": "The field that contains the base or amino acid. Used for information content calculation when the offset is `\"information\"`. The data items that have `null` in the baseField are considered gaps and they are taken into account when scaling the the locus' information content."
+          "description": "The field that contains the base or amino acid. Used for information content calculation when the offset is `\"information\"`. The data objects that have `null` in the baseField are considered gaps and they are taken into account when scaling the the locus' information content."
         },
         "cardinality": {
-          "description": "Cardinality, e.g., the number if distinct bases or amino acids. Used for information content calculation when the offset is `\"information\"`.\n\n**Default:** `4`;",
+          "description": "Cardinality, e.g., the number if distinct bases or amino acids. Used for information content calculation when the offset is `\"information\"`.\n\n**Default:** `4`",
           "type": "number"
         },
         "field": {

package/package.json

@@ -7,7 +7,7 @@
   },
   "contributors": [],
   "license": "MIT",
-  "version": "0.28.3",
+  "version": "0.30.0",
   "main": "dist/index.js",
   "module": "src/index.js",
   "exports": {
@@ -53,5 +53,5 @@
     "vega-scale": "^7.1.1",
     "vega-util": "^1.16.0"
   },
-  "gitHead": "05074d61428fe6c11c3eaa4e56796f830e794579"
+  "gitHead": "c8fe26f3421a1bec7323428f0bd7da46cda34dba"
 }

package/src/genomeSpy.js

@@ -378,6 +378,7 @@ export default class GenomeSpy {
         // Now that all data have been loaded, the domains may need adjusting
         this.viewRoot.visit((view) => {
             for (const resolution of Object.values(view.resolutions.scale)) {
+                // TODO: Don't reconfigure multiple times
                 // IMPORTANT TODO: Check that discrete domains and indexers match!!!!!!!!!
                 resolution.reconfigure();
             }

package/src/gl/webGLHelper.js

@@ -9,7 +9,12 @@ import {
 } from "twgl.js";
 import { isArray, isString } from "vega-util";
 
-import { isDiscrete, isDiscretizing, isInterpolating } from "vega-scale";
+import {
+    isContinuous,
+    isDiscrete,
+    isDiscretizing,
+    isInterpolating,
+} from "vega-scale";
 import {
     createDiscreteColorTexture,
     createDiscreteTexture,
@@ -321,43 +326,53 @@ export default class WebGLHelper {
             const props = resolution.getScaleProps();
 
             const scale = resolution.getScale();
+            const range = /** @type {any[]} */ (scale.range());
 
             /** @type {WebGLTexture} */
             let texture;
 
             if (props.scheme) {
-                let count = isString(props.scheme)
-                    ? undefined
-                    : props.scheme.count;
-
-                count = fixCount(count, scale);
-
-                texture = createSchemeTexture(
-                    props.scheme,
-                    this.gl,
-                    count,
-                    existingTexture
-                );
-            } else {
-                // No scheme, assume that colors are specified in the range
-
-                const range = /** @type {any[]} */ (scale.range());
-
-                if (isInterpolating(scale.type)) {
-                    texture = createInterpolatedColorTexture(
+                if (scale.type == "threshold" && range) {
+                    // Scale initialization may have configured the range. Let's use it.
+                    texture = createDiscreteColorTexture(
                         range,
-                        props.interpolate,
                         this.gl,
+                        scale.domain().length,
                         existingTexture
                     );
                 } else {
-                    texture = createDiscreteColorTexture(
-                        range,
+                    let count = isString(props.scheme)
+                        ? undefined
+                        : props.scheme.count;
+
+                    count = fixCount(count, scale);
+
+                    texture = createSchemeTexture(
+                        props.scheme,
                         this.gl,
-                        scale.domain().length,
+                        count,
                         existingTexture
                     );
                 }
+            } else if (
+                // Interpolating
+                isInterpolating(scale.type) ||
+                // Or piecewise
+                (isContinuous(scale.type) && range.length > 2)
+            ) {
+                texture = createInterpolatedColorTexture(
+                    range,
+                    props.interpolate,
+                    this.gl,
+                    existingTexture
+                );
+            } else {
+                texture = createDiscreteColorTexture(
+                    range,
+                    this.gl,
+                    scale.domain().length,
+                    existingTexture
+                );
             }
 
             this.rangeTextures.set(resolution, texture);

package/src/marks/mark.js

@@ -271,7 +271,16 @@ export default class Mark {
     getSampleFacetMode() {
         if (this.encoders.facetIndex) {
             return SAMPLE_FACET_TEXTURE;
-        } else if (this.unitView.getFacetAccessor()) {
+        } else if (
+            // If the UnitView is inside app's SampleView.
+            // TODO: This may break if non-faceted stuff is added to SampleView,
+            // e.g., view background or an x axis.
+            // This could also be more generic and work with other faceting views
+            // that will be available in the future.
+            [...this.unitView.getAncestors()].find(
+                (view) => "samples" in view.spec
+            )
+        ) {
             return SAMPLE_FACET_UNIFORM;
         }
     }
@@ -776,7 +785,14 @@ export default class Mark {
             }
         };
 
-        const rangeEntry = this.rangeMap.get(options.facetId);
+        // If is either faceted or non-faceted, not both.
+        // An undefined key with vertices means that the mark is non-faceted.
+        // In such case, the same non-faceted data is repeated for each facet.
+        const facetId =
+            this.rangeMap.get(undefined).count == 0
+                ? options.facetId
+                : undefined;
+        const rangeEntry = this.rangeMap.get(facetId);
 
         return options.sampleFacetRenderingOptions
             ? function renderSampleFacetRange() {

package/src/scale/glslScaleGenerator.js

@@ -314,7 +314,7 @@ export function generateScaleGlsl(channel, scale, channelDef) {
         if (piecewise) {
             // TODO: Handle range correctly. Now this assumes unit range.
             scaleBody.push(
-                `transformed = (float(slot) + transformed) / (float(${name}.length()) - 1.0);`
+                `transformed = (float(slot) + transformed) / (float(${name}.length() - 1));`
             );
         }
     } else {
@@ -463,26 +463,40 @@ export function isHighPrecisionScale(type) {
     return type == "index" || type == "locus";
 }
 
+// Maximum precise index number is 2^(23 + 11) ~ 17G
+// Higher number increases precision but makes zooming unstable
+const BS = 2 ** 11;
+const BM = BS - 1;
+
 /**
- * @param {number} x
+ * @param {number} x Must be an integer
  * @param {number[]} [arr]
  */
-export function splitHighPrecision(x, arr) {
-    // Maximum precise index number is 2^(23 + 11) ~ 17G
-    // Higher number increases precision but makes zooming unstable
-    const bs = 2 ** 11;
-
-    const lo = x % bs;
-    const hi = Math.round(x - lo);
-    arr ??= [];
+export function splitHighPrecision(x, arr = []) {
+    // Using a bitmask is MUCH faster than using modulo (at least on Chrome 112)
+    // https://www.wikiwand.com/en/Modulo#Performance_issues
+    const lo = x & BM;
+    const hi = x - lo;
+
     arr[0] = hi;
     arr[1] = lo;
+
     return arr;
 }
 
+/**
+ * @param {number} x
+ */
+function exactSplitHighPrecision(x) {
+    const lo = x % BS;
+    const hi = x - lo;
+
+    return [hi, lo];
+}
+
 /**
  * @param {number[]} domain
  */
 export function toHighPrecisionDomainUniform(domain) {
-    return [...splitHighPrecision(domain[0]), domain[1] - domain[0]];
+    return [...exactSplitHighPrecision(domain[0]), domain[1] - domain[0]];
 }

package/src/spec/sampleView.d.ts

@@ -0,0 +1,180 @@
+import { Type } from "./channel";
+import { Data } from "./data";
+import { Align, FontStyle, FontWeight } from "./font";
+import { Scale } from "./scale";
+import { LayerSpec, UnitSpec, ViewSpecBase } from "./view";
+
+// TODO: Figure out how this could be moved to the app package and excluded
+// from the core package.
+
+/**
+ * A view specification for a SampleView.
+ * This is only functional in the GenomeSpy app.
+ */
+export interface SampleSpec extends ViewSpecBase {
+    /**
+     * Sample metadata definition.
+     * If the object is empty, the sample identifiers will be inferred from the data.
+     */
+    samples: SampleDef;
+
+    /**
+     * The view specification to be repeated for each sample.
+     */
+    spec: LayerSpec | UnitSpec;
+
+    stickySummaries?: boolean;
+}
+
+export interface SampleAttributeDef {
+    /**
+     * The attribute type. One of `"nominal"`, `"ordinal"`, or `"quantitative"`.
+     */
+    type: Type; // TODO: Omit index/locus from available types
+
+    /**
+     * Scale definition for the (default) color channel
+     */
+    scale?: Scale;
+
+    /**
+     * An optional scale definition for mapping the attribute to
+     * the width of a metadata rectangle.
+     */
+    barScale?: Scale;
+
+    /**
+     * Width of the column in pixels.
+     */
+    width?: number;
+
+    /**
+     * Whether the attribute is visible by default.
+     */
+    visible?: boolean;
+}
+
+export interface SampleDef {
+    /**
+     * Optional metadata about the samples.
+     */
+    data?: Data;
+
+    /**
+     * Explicitly specify the sample attributes.
+     */
+    attributes?: Record<string, SampleAttributeDef>;
+
+    /**
+     * Text in the label title
+     *
+     * **Default:** `"Sample name"`
+     */
+    labelTitleText?: string;
+
+    /**
+     * How much space in pixels to reserve for the labels.
+     *
+     * **Default:** `140`
+     */
+    labelLength?: number;
+
+    /**
+     * The font typeface. GenomeSpy uses [SDF](https://github.com/Chlumsky/msdfgen)
+     * versions of [Google Fonts](https://fonts.google.com/). Check their
+     * availability at the [A-Frame
+     * Fonts](https://github.com/etiennepinchon/aframe-fonts/tree/master/fonts)
+     * repository. System fonts are **not** supported.
+     *
+     * **Default value:** `"Lato"`
+     */
+    labelFont?: string;
+
+    /**
+     * The font style. Valid values: `"normal"` and `"italic"`.
+     *
+     * **Default value:** `"normal"`
+     */
+    labelFontStyle?: FontStyle;
+
+    /**
+     * The font weight. The following strings and numbers are valid values:
+     * `"thin"` (`100`), `"light"` (`300`), `"regular"` (`400`),
+     * `"normal"` (`400`), `"medium"` (`500`), `"bold"` (`700`),
+     * `"black"` (`900`)
+     *
+     * **Default value:** `"regular"`
+     */
+    labelFontWeight?: FontWeight;
+
+    /**
+     * The font size in pixels.
+     *
+     * **Default value:** `11`
+     */
+    labelFontSize?: number;
+
+    /**
+     * The horizontal alignment of the text. One of `"left"`, `"center"`, or `"right"`.
+     *
+     * **Default value:** `"left"`
+     */
+    labelAlign?: Align;
+
+    /**
+     * Default size (width) of the metadata attribute columns.
+     * Can be configured per attribute using the `attributes` property.
+     *
+     * **Default value:** `10`
+     */
+    attributeSize?: number;
+
+    /**
+     * The font typeface. GenomeSpy uses [SDF](https://github.com/Chlumsky/msdfgen)
+     * versions of [Google Fonts](https://fonts.google.com/). Check their
+     * availability at the [A-Frame
+     * Fonts](https://github.com/etiennepinchon/aframe-fonts/tree/master/fonts)
+     * repository. System fonts are **not** supported.
+     *
+     * **Default value:** `"Lato"`
+     */
+    attributeLabelFont?: string;
+
+    /**
+     * The font style. Valid values: `"normal"` and `"italic"`.
+     *
+     * **Default value:** `"normal"`
+     */
+    attributeLabelFontStyle?: FontStyle;
+
+    /**
+     * The font weight. The following strings and numbers are valid values:
+     * `"thin"` (`100`), `"light"` (`300`), `"regular"` (`400`),
+     * `"normal"` (`400`), `"medium"` (`500`), `"bold"` (`700`),
+     * `"black"` (`900`)
+     *
+     * **Default value:** `"regular"`
+     */
+    attributeLabelFontWeight?: FontWeight;
+
+    /**
+     * The font size in pixels.
+     *
+     * **Default value:** `11`
+     */
+    attributeLabelFontSize?: number;
+
+    /**
+     * Angle to be added to the default label angle (-90).
+     *
+     * **Default value:** `0`
+     */
+    attributeLabelAngle?: number;
+
+    /**
+     * Spacing between attribute columns in pixels.
+     *
+     * **Default value:** `1`
+     */
+    attributeSpacing?: number;
+}

package/src/spec/transform.d.ts

@@ -156,14 +156,14 @@ export interface StackParams extends TransformParamsBase {
      * Cardinality, e.g., the number if distinct bases or amino acids. Used for
      * information content calculation when the offset is `"information"`.
      *
-     * **Default:** `4`;
+     * **Default:** `4`
      */
     cardinality?: number;
 
     /**
      * The field that contains the base or amino acid. Used for
      * information content calculation when the offset is `"information"`.
-     * The data items that have `null` in the baseField are considered gaps
+     * The data objects that have `null` in the baseField are considered gaps
      * and they are taken into account when scaling the the locus' information
      * content.
      */

package/src/spec/view.d.ts

@@ -1,12 +1,10 @@
 import { Data } from "./data";
-import { Scale } from "./scale";
 import { TransformParams } from "./transform";
 import {
     Channel,
     Encoding,
     FacetFieldDef,
     PrimaryPositionalChannel,
-    Type,
 } from "./channel";
 import {
     FillAndStrokeProps,
@@ -15,6 +13,7 @@ import {
     RectProps,
 } from "./mark";
 import { Title } from "./title";
+import { SampleSpec } from "./sampleView";
 
 export interface SizeDef {
     /** Size in pixels */
@@ -137,27 +136,6 @@ export interface FacetSpec extends ViewSpecBase {
     spacing?: number;
 }
 
-export interface SampleAttributeDef {
-    type: Type; // TODO: Omit index/locus
-    /** Color scale (primary) */
-    scale?: Scale;
-    barScale?: Scale;
-    width?: number;
-    visible?: boolean;
-}
-
-export interface SampleDef {
-    data?: Data;
-    attributes?: Record<string, SampleAttributeDef>;
-}
-
-export interface SampleSpec extends ViewSpecBase {
-    samples: SampleDef;
-    spec: LayerSpec | UnitSpec;
-
-    stickySummaries?: boolean;
-}
-
 export type ResolutionTarget = "scale" | "axis";
 
 /**

package/src/tooltip/dataTooltipHandler.js

@@ -30,20 +30,24 @@ export default async function dataTooltipHandler(datum, mark, params) {
         return "";
     };
 
+    const strippedEntries = Object.entries(datum).filter(
+        ([key, _value]) => !key.startsWith("_")
+    );
+
+    if (strippedEntries.length === 0) {
+        return;
+    }
+
     const table = html`
         <table class="attributes">
-            ${Object.entries(datum)
-                .filter(([key, value]) => !key.startsWith("_"))
-                .map(
-                    ([key, value]) => html`
-                        <tr>
-                            <th>${key}</th>
-                            <td>
-                                ${formatObject(value)} ${legend(key, datum)}
-                            </td>
-                        </tr>
-                    `
-                )}
+            ${strippedEntries.map(
+                ([key, value]) => html`
+                    <tr>
+                        <th>${key}</th>
+                        <td>${formatObject(value)} ${legend(key, datum)}</td>
+                    </tr>
+                `
+            )}
         </table>
     `;
 

package/src/view/gridView.js

@@ -527,7 +527,11 @@ export default class GridView extends ContainerView {
             return;
         }
 
-        coords = coords.shrink(this.getPadding()); // TODO: Only applicable at view root
+        if (!this.parent) {
+            // Usually padding is applied by the parent GridView, but if this is the root view, we need to apply it here
+            coords = coords.shrink(this.getPadding());
+        }
+
         context.pushView(this, coords);
 
         const flexOpts = {
@@ -725,7 +729,7 @@ export default class GridView extends ContainerView {
  * @param {import("../spec/view").ViewBackground} viewBackground
  * @returns {import("../spec/view").UnitSpec}
  */
-function createBackground(viewBackground) {
+export function createBackground(viewBackground) {
     return {
         configurableVisibility: false,
         data: { values: [{}] },