fix(app): render view background in sample facets

genome-spy · Mar 24, 2023 · 2c78625 · 2c78625
1 parent 8ac82db
commit 2c78625
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/packages/app/src/sampleView/sampleView.js b/packages/app/src/sampleView/sampleView.js
@@ -41,6 +41,7 @@ import { contextMenu, DIVIDER } from "../utils/ui/contextMenu";
 import interactionToZoom from "@genome-spy/core/view/zoom";
 import Rectangle from "@genome-spy/core/utils/layout/rectangle";
 import { faArrowsAltV, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { createBackground } from "@genome-spy/core/view/gridView";
 
 const VALUE_AT_LOCUS = "VALUE_AT_LOCUS";
 
@@ -152,6 +153,23 @@ export default class SampleView extends ContainerView {
 
         this.peripheryView.setChildren([this.groupPanel, this.attributePanel]);
 
+        {
+            const viewBackground = this.spec.spec?.view;
+            if (viewBackground?.fill || viewBackground?.stroke) {
+                const unitView = new UnitView(
+                    createBackground(viewBackground),
+                    this.context,
+                    this,
+                    "sample-background"
+                );
+                // TODO: Make configurable through spec:
+                unitView.blockEncodingInheritance = true;
+                this.backgroundView = unitView;
+            } else {
+                this.backgroundView = undefined;
+            }
+        }
+
         this.child.addInteractionEventListener(
             "contextmenu",
             this._handleContextMenu.bind(this)
@@ -382,6 +400,9 @@ export default class SampleView extends ContainerView {
      * @returns {IterableIterator<View>}
      */
     *[Symbol.iterator]() {
+        if (this.backgroundView) {
+            yield this.backgroundView;
+        }
         yield this.child;
         yield this.peripheryView;
     }
@@ -620,7 +641,7 @@ export default class SampleView extends ContainerView {
         const clipRect = this._clipBySummary(coords);
 
         for (const sampleLocation of this.getLocations().samples) {
-            this.child.render(context, coords, {
+            const optionsWithFacet = {
                 ...options,
                 sampleFacetRenderingOptions: {
                     locSize: scaleLocSize(
@@ -630,7 +651,10 @@ export default class SampleView extends ContainerView {
                 },
                 facetId: [sampleLocation.key],
                 clipRect,
-            });
+            };
+
+            this.backgroundView?.render(context, coords, optionsWithFacet);
+            this.child.render(context, coords, optionsWithFacet);
         }
     }
 

diff --git a/packages/core/src/view/gridView.js b/packages/core/src/view/gridView.js
@@ -729,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: [{}] },

diff --git a/packages/core/src/view/viewUtils.js b/packages/core/src/view/viewUtils.js
@@ -18,7 +18,7 @@ import { rollup } from "d3-array";
  * @typedef {import("../spec/view").ViewSpec} ViewSpec
  * @typedef {import("../spec/view").LayerSpec} LayerSpec
  * @typedef {import("../spec/view").FacetSpec} FacetSpec
- * @typedef {import("../spec/view").SampleSpec} SampleSpec
+ * @typedef {import("../spec/sampleView").SampleSpec} SampleSpec
  * @typedef {import("../spec/view").UnitSpec} UnitSpec
  * @typedef {import("../spec/view").VConcatSpec} VConcatSpec
  * @typedef {import("../spec/view").HConcatSpec} HConcatSpec