@genome-spy/core 0.19.1 → 0.20.0

package/dist/schema.json

@@ -478,6 +478,9 @@
         "baseUrl": {
           "type": "string"
         },
+        "columns": {
+          "type": "number"
+        },
         "concat": {
           "items": {
             "anyOf": [
@@ -575,7 +578,14 @@
           "type": "number"
         },
         "title": {
-          "type": "string"
+          "anyOf": [
+            {
+              "type": "string"
+            },
+            {
+              "$ref": "#/definitions/Title"
+            }
+          ]
         },
         "transform": {
           "items": {
@@ -606,7 +616,8 @@
         }
       },
       "required": [
-        "concat"
+        "concat",
+        "columns"
       ],
       "type": "object"
     },
@@ -1335,7 +1346,14 @@
           "type": "number"
         },
         "title": {
-          "type": "string"
+          "anyOf": [
+            {
+              "type": "string"
+            },
+            {
+              "$ref": "#/definitions/Title"
+            }
+          ]
         },
         "transform": {
           "items": {
@@ -1624,7 +1642,14 @@
           "type": "object"
         },
         "title": {
-          "type": "string"
+          "anyOf": [
+            {
+              "type": "string"
+            },
+            {
+              "$ref": "#/definitions/Title"
+            }
+          ]
         },
         "transform": {
           "items": {
@@ -1633,7 +1658,7 @@
           "type": "array"
         },
         "view": {
-          "$ref": "#/definitions/ViewConfig"
+          "$ref": "#/definitions/ViewBackground"
         },
         "visible": {
           "description": "Visibility of the view. An invisible view is removed from the layout and not rendered.\n\n**Default:** `true`",
@@ -2972,7 +2997,14 @@
               "type": "object"
             },
             "title": {
-              "type": "string"
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "$ref": "#/definitions/Title"
+                }
+              ]
             },
             "transform": {
               "items": {
@@ -2981,7 +3013,7 @@
               "type": "array"
             },
             "view": {
-              "$ref": "#/definitions/ViewConfig"
+              "$ref": "#/definitions/ViewBackground"
             },
             "visible": {
               "description": "Visibility of the view. An invisible view is removed from the layout and not rendered.\n\n**Default:** `true`",
@@ -3137,7 +3169,14 @@
               "type": "object"
             },
             "title": {
-              "type": "string"
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "$ref": "#/definitions/Title"
+                }
+              ]
             },
             "transform": {
               "items": {
@@ -3146,7 +3185,7 @@
               "type": "array"
             },
             "view": {
-              "$ref": "#/definitions/ViewConfig"
+              "$ref": "#/definitions/ViewBackground"
             },
             "visible": {
               "description": "Visibility of the view. An invisible view is removed from the layout and not rendered.\n\n**Default:** `true`",
@@ -3292,7 +3331,14 @@
               "type": "boolean"
             },
             "title": {
-              "type": "string"
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "$ref": "#/definitions/Title"
+                }
+              ]
             },
             "transform": {
               "items": {
@@ -3432,7 +3478,14 @@
               "type": "number"
             },
             "title": {
-              "type": "string"
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "$ref": "#/definitions/Title"
+                }
+              ]
             },
             "transform": {
               "items": {
@@ -3597,7 +3650,14 @@
               "type": "number"
             },
             "title": {
-              "type": "string"
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "$ref": "#/definitions/Title"
+                }
+              ]
             },
             "transform": {
               "items": {
@@ -3641,6 +3701,9 @@
             "baseUrl": {
               "type": "string"
             },
+            "columns": {
+              "type": "number"
+            },
             "concat": {
               "items": {
                 "anyOf": [
@@ -3749,7 +3812,14 @@
               "type": "number"
             },
             "title": {
-              "type": "string"
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "$ref": "#/definitions/Title"
+                }
+              ]
             },
             "transform": {
               "items": {
@@ -3780,6 +3850,7 @@
             }
           },
           "required": [
+            "columns",
             "concat"
           ],
           "type": "object"
@@ -3947,7 +4018,14 @@
           "type": "boolean"
         },
         "title": {
-          "type": "string"
+          "anyOf": [
+            {
+              "type": "string"
+            },
+            {
+              "$ref": "#/definitions/Title"
+            }
+          ]
         },
         "transform": {
           "items": {
@@ -4498,6 +4576,109 @@
         }
       ]
     },
+    "Title": {
+      "additionalProperties": false,
+      "properties": {
+        "align": {
+          "$ref": "#/definitions/Align",
+          "description": "Horizontal text alignment for title text. One of `\"left\"`, `\"center\"`, or `\"right\"`."
+        },
+        "anchor": {
+          "$ref": "#/definitions/TitleAnchor",
+          "description": "The anchor position for placing the title and subtitle text. One of `\"start\"`, `\"middle\"`, or `\"end\"`. For example, with an orientation of top these anchor positions map to a left-, center-, or right-aligned title."
+        },
+        "angle": {
+          "description": "Angle in degrees of title and subtitle text.",
+          "type": "number"
+        },
+        "baseline": {
+          "$ref": "#/definitions/Baseline",
+          "description": "Vertical text baseline for title and subtitle text. One of `\"alphabetic\"` (default), `\"top\"`, `\"middle\"`, or `\"bottom\"`."
+        },
+        "color": {
+          "description": "Text color for title text.",
+          "type": "string"
+        },
+        "dx": {
+          "description": "Delta offset for title and subtitle text x-coordinate.",
+          "type": "number"
+        },
+        "dy": {
+          "description": "Delta offset for title and subtitle text y-coordinate.",
+          "type": "number"
+        },
+        "font": {
+          "description": "Font name for title text.",
+          "type": "string"
+        },
+        "fontSize": {
+          "description": "Font size in pixels for title text.",
+          "minimum": 0,
+          "type": "number"
+        },
+        "fontStyle": {
+          "$ref": "#/definitions/FontStyle",
+          "description": "Font style for title text."
+        },
+        "fontWeight": {
+          "$ref": "#/definitions/FontWeight",
+          "description": "Font weight for title text. This can be either a string (e.g `\"bold\"`, `\"normal\"`) or a number (`100`, `200`, `300`, ..., `900` where `\"normal\"` = `400` and `\"bold\"` = `700`)."
+        },
+        "frame": {
+          "$ref": "#/definitions/TitleFrame",
+          "description": "The reference frame for the anchor position, one of `\"bounds\"` (to anchor relative to the full bounding box) or `\"group\"` (to anchor relative to the group width or height)."
+        },
+        "offset": {
+          "description": "The orthogonal offset in pixels by which to displace the title group from its position along the edge of the chart.",
+          "type": "number"
+        },
+        "orient": {
+          "$ref": "#/definitions/TitleOrient",
+          "description": "Default title orientation (`\"top\"`, `\"bottom\"`, `\"left\"`, or `\"right\"`)"
+        },
+        "style": {
+          "description": "A mark style property to apply to the title text mark. If not specified, a default style of `\"group-title\"` is applied.",
+          "type": "string"
+        },
+        "text": {
+          "description": "The title text.",
+          "type": "string"
+        }
+      },
+      "required": [
+        "text"
+      ],
+      "type": "object"
+    },
+    "TitleAnchor": {
+      "enum": [
+        null,
+        "start",
+        "middle",
+        "end"
+      ],
+      "type": [
+        "null",
+        "string"
+      ]
+    },
+    "TitleFrame": {
+      "enum": [
+        "bounds",
+        "group"
+      ],
+      "type": "string"
+    },
+    "TitleOrient": {
+      "enum": [
+        "none",
+        "left",
+        "right",
+        "top",
+        "bottom"
+      ],
+      "type": "string"
+    },
     "Tooltip": {
       "anyOf": [
         {
@@ -4696,7 +4877,14 @@
           "type": "object"
         },
         "title": {
-          "type": "string"
+          "anyOf": [
+            {
+              "type": "string"
+            },
+            {
+              "$ref": "#/definitions/Title"
+            }
+          ]
         },
         "transform": {
           "items": {
@@ -4705,7 +4893,7 @@
           "type": "array"
         },
         "view": {
-          "$ref": "#/definitions/ViewConfig"
+          "$ref": "#/definitions/ViewBackground"
         },
         "visible": {
           "description": "Visibility of the view. An invisible view is removed from the layout and not rendered.\n\n**Default:** `true`",
@@ -4855,7 +5043,14 @@
           "type": "number"
         },
         "title": {
-          "type": "string"
+          "anyOf": [
+            {
+              "type": "string"
+            },
+            {
+              "$ref": "#/definitions/Title"
+            }
+          ]
         },
         "transform": {
           "items": {
@@ -4932,7 +5127,7 @@
       ],
       "type": "object"
     },
-    "ViewConfig": {
+    "ViewBackground": {
       "additionalProperties": false,
       "properties": {
         "cornerRadius": {

package/package.json

@@ -7,7 +7,7 @@
   },
   "contributors": [],
   "license": "BSD-2-Clause",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "main": "dist/index.js",
   "module": "src/index.js",
   "exports": {
@@ -44,7 +44,7 @@
     "d3-color": "^3.0.1",
     "d3-ease": "^3.0.1",
     "d3-format": "^3.0.1",
-    "flatqueue": "^1.2.1",
+    "flatqueue": "^2.0.3",
     "internmap": "^2.0.3",
     "lit-html": "^2.0.2",
     "twgl.js": "^4.19.1",
@@ -53,5 +53,5 @@
     "vega-scale": "^7.1.1",
     "vega-util": "^1.16.0"
   },
-  "gitHead": "ca14d08659918a002fb330ffcd325e9c1e122a8c"
+  "gitHead": "dfeadc37891908cf775423c61a566358ecada9fa"
 }

package/src/genomeSpy.js

@@ -8,7 +8,6 @@ import Tooltip from "./utils/ui/tooltip";
 import AccessorFactory from "./encoder/accessor";
 import {
     resolveScalesAndAxes,
-    addDecorators,
     processImports,
     setImplicitScaleNames,
 } from "./view/viewUtils";
@@ -17,7 +16,6 @@ import UnitView from "./view/unitView";
 import WebGLHelper from "./gl/webGLHelper";
 import Rectangle from "./utils/layout/rectangle";
 import DeferredViewRenderingContext from "./view/renderingContext/deferredViewRenderingContext";
-import LayoutRecorderViewRenderingContext from "./view/renderingContext/layoutRecorderViewRenderingContext";
 import CompositeViewRenderingContext from "./view/renderingContext/compositeViewRenderingContext";
 import InteractionEvent from "./utils/interactionEvent";
 import Point from "./utils/layout/point";
@@ -36,6 +34,8 @@ import refseqGeneTooltipHandler from "./tooltip/refseqGeneTooltipHandler";
 import dataTooltipHandler from "./tooltip/dataTooltipHandler";
 import { invalidatePrefix } from "./utils/propertyCacher";
 import { ViewFactory } from "./view/viewFactory";
+import LayerView from "./view/layerView";
+import ImplicitRootView from "./view/implicitRootView";
 
 /**
  * @typedef {import("./spec/view").UnitSpec} UnitSpec
@@ -166,7 +166,9 @@ export default class GenomeSpy {
 
         this._glHelper = new WebGLHelper(this.container, () => {
             if (this.viewRoot) {
-                const size = this.viewRoot.getSize();
+                const size = this.viewRoot
+                    .getSize()
+                    .addPadding(this.viewRoot.getOverhang());
 
                 // If a dimension has an absolutely specified size (in pixels), use it for the canvas size.
                 // However, if the dimension has a growing component, the canvas should be fit to the
@@ -283,12 +285,19 @@ export default class GenomeSpy {
         // Replace placeholder ImportViews with actual views.
         await processImports(this.viewRoot);
 
+        if (
+            this.viewRoot instanceof UnitView ||
+            this.viewRoot instanceof LayerView
+        ) {
+            this.viewRoot = new ImplicitRootView(context, this.viewRoot);
+        }
+
         // Resolve scales, i.e., if possible, pull them towards the root
         resolveScalesAndAxes(this.viewRoot);
         setImplicitScaleNames(this.viewRoot);
 
         // Wrap unit or layer views that need axes
-        this.viewRoot = addDecorators(this.viewRoot);
+        //this.viewRoot = addDecorators(this.viewRoot);
 
         // We should now have a complete view hierarchy. Let's update the canvas size
         // and ensure that the loading message is visible.
@@ -424,7 +433,7 @@ export default class GenomeSpy {
 
         /** @param {Event} event */
         const listener = (event) => {
-            if (this.layout && event instanceof MouseEvent) {
+            if (event instanceof MouseEvent) {
                 if (event.type == "mousemove") {
                     this.tooltip.handleMouseMove(event);
                     this._tooltipUpdateRequested = false;
@@ -445,7 +454,7 @@ export default class GenomeSpy {
                  * @param {MouseEvent} event
                  */
                 const dispatchEvent = (event) => {
-                    this.layout.dispatchInteractionEvent(
+                    this.viewRoot.propagateInteractionEvent(
                         new InteractionEvent(point, event)
                     );
 
@@ -677,20 +686,16 @@ export default class GenomeSpy {
             },
             this._glHelper
         );
-        const layoutRecorder = new LayoutRecorderViewRenderingContext({});
 
         root.render(
             new CompositeViewRenderingContext(
                 this._renderingContext,
-                this._pickingContext,
-                layoutRecorder
+                this._pickingContext
             ),
             // Canvas should now be sized based on the root view or the container
             Rectangle.create(0, 0, canvasSize.width, canvasSize.height)
         );
 
-        this.layout = layoutRecorder.getLayout();
-
         this.broadcast("layoutComputed");
     }
 

package/src/marks/mark.js

@@ -616,6 +616,10 @@ export default class Mark {
                 }
             }
 
+            if (!facetTexture) {
+                throw new Error("No facet texture available. This is bug.");
+            }
+
             setUniforms(this.programInfo, {
                 uSampleFacetTexture: facetTexture,
             });
@@ -745,7 +749,7 @@ export default class Mark {
                 }
             };
         } else {
-            const rangeEntry = rangeMapSource().get(options.facetId);
+            const rangeEntry = rangeMapSource()?.get(options.facetId);
             if (rangeEntry && rangeEntry.count) {
                 return function renderStatic() {
                     if (self.prepareSampleFacetRendering(options)) {

package/src/spec/title.d.ts

@@ -0,0 +1,102 @@
+/*!
+ * Adapted from
+ * https://github.com/vega/vega/blob/main/packages/vega-typings/types/spec/title.d.ts
+ *
+ * Copyright (c) 2015-2018, University of Washington Interactive Data Lab
+ * All rights reserved.
+ *
+ * BSD-3-Clause License: https://github.com/vega/vega-lite/blob/master/LICENSE
+ */
+
+import { Align, Baseline, FontStyle, FontWeight } from "./font";
+
+export type TitleOrient = "none" | "left" | "right" | "top" | "bottom";
+export type TitleAnchor = null | "start" | "middle" | "end";
+export type TitleFrame = "bounds" | "group";
+
+export interface Title {
+    /**
+     * The title text.
+     */
+    text: string;
+
+    /**
+     * A mark style property to apply to the title text mark. If not specified, a default style of `"group-title"` is applied.
+     */
+    style?: string;
+
+    /**
+     * The anchor position for placing the title and subtitle text. One of `"start"`, `"middle"`, or `"end"`. For example, with an orientation of top these anchor positions map to a left-, center-, or right-aligned title.
+     */
+    anchor?: TitleAnchor;
+
+    /**
+     * The reference frame for the anchor position, one of `"bounds"` (to anchor relative to the full bounding box) or `"group"` (to anchor relative to the group width or height).
+     */
+    frame?: TitleFrame;
+
+    /**
+     * The orthogonal offset in pixels by which to displace the title group from its position along the edge of the chart.
+     */
+    offset?: number;
+
+    /**
+     * Default title orientation (`"top"`, `"bottom"`, `"left"`, or `"right"`)
+     */
+    orient?: TitleOrient;
+
+    // ---------- Shared Text Properties ----------
+    /**
+     * Horizontal text alignment for title text. One of `"left"`, `"center"`, or `"right"`.
+     */
+    align?: Align;
+
+    /**
+     * Angle in degrees of title and subtitle text.
+     */
+    angle?: number;
+
+    /**
+     * Vertical text baseline for title and subtitle text. One of `"alphabetic"` (default), `"top"`, `"middle"`, or `"bottom"`.
+     */
+    baseline?: Baseline;
+
+    /**
+     * Delta offset for title and subtitle text x-coordinate.
+     */
+    dx?: number;
+
+    /**
+     * Delta offset for title and subtitle text y-coordinate.
+     */
+    dy?: number;
+
+    // ---------- Title Text ----------
+    /**
+     * Text color for title text.
+     */
+    color?: string;
+
+    /**
+     * Font name for title text.
+     */
+    font?: string;
+
+    /**
+     * Font size in pixels for title text.
+     *
+     * @minimum 0
+     */
+    fontSize?: number;
+
+    /**
+     * Font style for title text.
+     */
+    fontStyle?: FontStyle;
+
+    /**
+     * Font weight for title text.
+     * This can be either a string (e.g `"bold"`, `"normal"`) or a number (`100`, `200`, `300`, ..., `900` where `"normal"` = `400` and `"bold"` = `700`).
+     */
+    fontWeight?: FontWeight;
+}

package/src/spec/view.d.ts

@@ -14,6 +14,7 @@ import {
     MarkType,
     RectProps,
 } from "./mark";
+import { Title } from "./title";
 
 export interface SizeDef {
     /** Size in pixels */
@@ -55,7 +56,7 @@ export type Paddings = Partial<Record<Side, number>>;
 
 export type PaddingConfig = Paddings | number;
 
-export interface ViewConfig extends RectProps, FillAndStrokeProps {
+export interface ViewBackground extends RectProps, FillAndStrokeProps {
     // TODO: style?: string | string[];
 
     // TODO: Move to FillAndStrokeProps or something
@@ -78,7 +79,7 @@ export interface ViewSpecBase extends ResolveSpec {
     data?: Data;
     transform?: TransformParams[];
     encoding?: Encoding;
-    title?: string;
+    title?: string | Title;
 
     /**
      * A description of the view. Multiple lines can be provided as an array.
@@ -115,7 +116,7 @@ export interface ViewSpecBase extends ResolveSpec {
 }
 
 export interface UnitSpec extends ViewSpecBase, AggregateSamplesSpec {
-    view?: ViewConfig;
+    view?: ViewBackground;
     mark: MarkType | MarkConfigAndType;
 }
 
@@ -125,7 +126,7 @@ export interface AggregateSamplesSpec {
 }
 
 export interface LayerSpec extends ViewSpecBase, AggregateSamplesSpec {
-    view?: ViewConfig;
+    view?: ViewBackground;
     layer: (LayerSpec | UnitSpec)[];
 }
 
@@ -218,4 +219,5 @@ export interface HConcatSpec extends ConcatBase {
 
 export interface ConcatSpec extends ConcatBase {
     concat: (ViewSpec | ImportSpec)[];
+    columns: number;
 }

package/src/tooltip/dataTooltipHandler.js

@@ -47,10 +47,11 @@ export default async function dataTooltipHandler(datum, mark, params) {
         </table>
     `;
 
-    const title = mark.unitView.spec.title
+    const titleText = mark.unitView.getTitleText();
+    const title = titleText
         ? html`
               <div class="title">
-                  <strong>${mark.unitView.spec.title}</strong>
+                  <strong>${titleText}</strong>
               </div>
           `
         : "";