@genome-spy/core 0.62.2 → 0.64.0

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

@@ -1,206 +1,275 @@
 const css = `
+:root {
+--genome-spy-basic-spacing: 10px;
+--genome-spy-font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial,
+sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+@keyframes genome-spy-blinker {
+50% {
+opacity: 0;
+}
+}
+
 .genome-spy {
-  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-.genome-spy .canvas-wrapper {
-  position: relative;
-  flex-grow: 1;
-  overflow: hidden;
-}
-.genome-spy canvas {
-  display: block;
-  transform: scale(1, 1);
-  opacity: 1;
-  transition: transform 0.6s, opacity 0.6s;
-}
-.genome-spy canvas:focus, .genome-spy canvas:focus-visible {
-  outline: none;
-}
-.genome-spy .loading-message {
-  position: absolute;
-  inset: 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 > .loading-message .message .ellipsis {
-  animation: blinker 1s linear infinite;
-}
-@keyframes blinker {
-  50% {
-    opacity: 0;
-  }
-}
-.genome-spy .loading-indicators {
-  position: absolute;
-  inset: 0;
-  user-select: none;
-  pointer-events: none;
-}
-.genome-spy .loading-indicators div {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.genome-spy .loading-indicators div > div {
-  font-size: 11px;
-  transition: opacity 0.2s;
-  background: white;
-  padding: 2px 5px;
-  display: flex;
-  border-radius: 3px;
-  gap: 0.5em;
-  opacity: 0;
-}
-.genome-spy .loading-indicators div > div.loading {
-  opacity: 0.5;
-}
-.genome-spy .loading-indicators div > div.error {
-  opacity: 0.8;
-  color: firebrick;
-}
-.genome-spy .loading-indicators div > div > * {
-  display: block;
-}
-.genome-spy .loading-indicators div > div img {
-  width: 1.5em;
-  height: 1.5em;
-}
-.genome-spy .tooltip {
-  position: absolute;
-  max-width: 450px;
-  overflow: hidden;
-  background: #f6f6f6;
-  padding: 10px;
-  font-size: 12px;
-  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
-  transition: outline-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-  outline: 0px solid transparent;
-  z-index: 100;
-}
-.genome-spy .tooltip:not(.sticky) {
-  pointer-events: none;
-}
-.genome-spy .tooltip.sticky {
-  outline: 2px solid black;
-  box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);
-}
-.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;
+font-family: var(--genome-spy-font-family);
+
+position: relative;
+
+display: flex;
+flex-direction: column;
+
+.canvas-wrapper {
+position: relative;
+flex-grow: 1;
+overflow: hidden;
+}
+
+canvas {
+display: block;
+transform: scale(1, 1);
+opacity: 1;
+transition:
+transform 0.6s,
+opacity 0.6s;
+
+&:focus,
+&:focus-visible {
+outline: none;
+}
+}
+
+.loading-message {
+position: absolute;
+inset: 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: genome-spy-blinker 1s linear infinite;
+}
+}
+}
+
+.loading-indicators {
+position: absolute;
+inset: 0;
+
+user-select: none;
+pointer-events: none;
+
+div {
+position: absolute;
+display: flex;
+align-items: center;
+justify-content: center;
+
+> div {
+font-size: 11px;
+transition: opacity 0.2s;
+background: white;
+padding: 2px 5px;
+display: flex;
+border-radius: 3px;
+gap: 0.5em;
+opacity: 0;
+
+&.loading {
+opacity: 0.5;
+}
+
+&.error {
+opacity: 0.8;
+color: firebrick;
+}
+
+> * {
+display: block;
+}
+
+img {
+width: 1.5em;
+height: 1.5em;
+}
+}
+}
+}
+
+.tooltip {
+position: absolute;
+
+max-width: 450px;
+overflow: hidden;
+
+--background-color: #f6f6f6;
+background: var(--background-color);
+padding: var(--genome-spy-basic-spacing);
+
+--font-size: 12px;
+font-size: var(--font-size);
+
+box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
+
+&:not(.sticky) {
+pointer-events: none;
+}
+
+transition:
+outline-color 0.3s ease-in-out,
+box-shadow 0.3s ease-in-out;
+
+outline: 0px solid transparent;
+&.sticky {
+outline: 2px solid black;
+box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);
+}
+
+z-index: 100;
+
+> :last-child {
+margin-bottom: 0;
+}
+
+> .title {
+padding-bottom: calc(var(--genome-spy-basic-spacing) / 2);
+margin-bottom: calc(var(--genome-spy-basic-spacing) / 2);
+border-bottom: 1px dashed var(--background-color);
+border-bottom: 1px dashed
+color-mix(in srgb, black 25%, var(--background-color));
+}
+
+.summary {
+font-size: 12px;
+}
+
+table {
+&:first-child {
+margin-top: 0;
+}
+
+border-collapse: collapse;
+
+th,
+td {
+padding: 2px 0.4em;
+vertical-align: top;
+font-size: var(--font-size);
+
+&: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;
+}
+}
 }
 
 .gs-input-binding {
-  display: grid;
-  grid-template-columns: max-content max-content;
-  column-gap: 1em;
-  row-gap: 0.3em;
-  justify-items: start;
-}
-.gs-input-binding > select,
-.gs-input-binding > input:not([type=checkbox]) {
-  width: 100%;
-}
-.gs-input-binding input[type=range] + span {
-  display: inline-block;
-  margin-left: 0.3em;
-  min-width: 2.2em;
-  font-variant-numeric: tabular-nums;
-}
-.gs-input-binding input[type=range],
-.gs-input-binding input[type=radio] {
-  vertical-align: text-bottom;
-}
-.gs-input-binding .radio-group {
-  display: flex;
-  align-items: center;
-}
-.gs-input-binding .description {
-  max-width: 26em;
-  grid-column: 1/-1;
-  color: #777;
-  font-size: 90%;
-  margin-top: -0.5em;
+display: grid;
+grid-template-columns: max-content max-content;
+column-gap: 1em;
+row-gap: 0.3em;
+justify-items: start;
+
+> select,
+> input:not([type="checkbox"]) {
+width: 100%;
+}
+
+input[type="range"] + span {
+display: inline-block;
+margin-left: 0.3em;
+min-width: 2.2em;
+font-variant-numeric: tabular-nums;
+}
+
+input[type="range"],
+input[type="radio"] {
+vertical-align: text-bottom;
+}
+
+.radio-group {
+display: flex;
+align-items: center;
+}
+
+.description {
+max-width: 26em;
+grid-column: 1 / -1;
+color: #777;
+font-size: 90%;
+margin-top: -0.5em;
+}
 }
 
 .gs-input-bindings {
-  flex-basis: content;
-  font-size: 14px;
-  padding: 10px;
+flex-basis: content;
+font-size: 14px;
+padding: var(--genome-spy-basic-spacing);
 }
 `;
 export default css;

package/dist/src/styles/update.sh

@@ -1,6 +1,16 @@
 #!/bin/sh
-echo "const css = \`" > genome-spy.css.js
-sass genome-spy.scss >> genome-spy.css.js
-echo "\`;" >> genome-spy.css.js 
-echo "export default css;" >> genome-spy.css.js 
+# Build helper: minify genome-spy.css (strip leading whitespace) and embed into a JS module
 
+CSS_IN=genome-spy.css
+JS_OUT=genome-spy.css.js
+
+if [ ! -f "$CSS_IN" ]; then
+	echo "Missing $CSS_IN in $(pwd)"
+	exit 1
+fi
+
+
+echo "const css = \`" > "$JS_OUT"
+sed -E 's/^[[:space:]]+//' "$CSS_IN" >> "$JS_OUT"
+echo "\`;" >> "$JS_OUT"
+echo "export default css;" >> "$JS_OUT"

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

@@ -77,4 +77,20 @@ export interface EmbedResult {
      * @param data new data. If left undefined, the data is retrieved from a provider.
      */
     updateNamedData: (name: string, data?: any[]) => void;
+
+    /**
+     * Returns a PNG data URL of the current canvas.
+     *
+     * @param {number} [logicalWidth] Custom width, defaults to canvas width
+     * @param {number} [logicalHeight] Custom height, defaults to canvas height
+     * @param {number} [devicePixelRatio] Defaults to window.devicePixelRatio
+     * @param {string} [clearColor] Background color. A CSS color, null for transparent
+     * @returns A PNG data URL
+     */
+    exportCanvas: (
+        logicalWidth: number,
+        logicalHeight: number,
+        devicePixelRatio: number,
+        clearColor: string
+    ) => string;
 }

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

@@ -28,8 +28,6 @@ export default interface ViewContext {
     genomeStore?: GenomeStore;
     fontManager: BmFontManager;
 
-    devicePixelRatio: number;
-
     requestLayoutReflow: () => void;
 
     updateTooltip: <T>(

package/dist/src/utils/expression.d.ts

@@ -10,6 +10,11 @@
  * @returns {ExpressionFunction}
  */
 export default function createFunction(expr: string, globalObject?: {}): ExpressionFunction;
+/**
+ * @param {string} expr
+ * @returns {(event: UIEvent) => boolean}
+ */
+export function createEventFilterFunction(expr: string): (event: UIEvent) => boolean;
 export type ExpressionProps = {
     fields: string[];
     globals: string[];

package/dist/src/utils/expression.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expression.d.ts","sourceRoot":"","sources":["../../../src/utils/expression.js"],"names":[],"mappings":"AAuEA;;;;;;;;;;GAUG;AACH,6CAHW,MAAM,sBACJ,kBAAkB,CAgC9B;;YAvCU,MAAM,EAAE;aACR,MAAM,EAAE;UACR,MAAM;;iCAEH,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,qBAAqB,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,eAAe"}
+{"version":3,"file":"expression.d.ts","sourceRoot":"","sources":["../../../src/utils/expression.js"],"names":[],"mappings":"AAuEA;;;;;;;;;;GAUG;AACH,6CAHW,MAAM,sBACJ,kBAAkB,CAgC9B;AAQD;;;GAGG;AACH,gDAHW,MAAM,GACJ,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CA2BvC;;YA5EU,MAAM,EAAE;aACR,MAAM,EAAE;UACR,MAAM;;iCAEH,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,qBAAqB,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,eAAe"}

package/dist/src/utils/expression.js

@@ -111,3 +111,40 @@ export default function createFunction(expr, globalObject = {}) {
         throw new Error(`Invalid expression: ${expr}, ${e.message}`);
     }
 }
+
+const eventFilterCg = codegenExpression({
+    forbidden: [],
+    allowed: ["event"],
+    globalvar: "globalObject",
+});
+
+/**
+ * @param {string} expr
+ * @returns {(event: UIEvent) => boolean}
+ */
+export function createEventFilterFunction(expr) {
+    try {
+        const parsed = parseExpression(expr);
+        const generatedCode = eventFilterCg(parsed);
+
+        // eslint-disable-next-line no-new-func
+        const fn = Function(
+            "event",
+            "globalObject",
+            `"use strict";
+            try {
+                return !!(${generatedCode.code});
+            } catch (e) {
+                throw new Error("Error evaluating expression: " + ${JSON.stringify(
+                    expr
+                )} + ", " + e.message, e);
+            }`
+        );
+
+        return /** @type {(event: UIEvent) => boolean} */ (
+            /** @type {any} */ (fn)
+        );
+    } catch (e) {
+        throw new Error(`Invalid expression: ${expr}, ${e.message}`);
+    }
+}

package/dist/src/utils/interactionEvent.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Create a safe proxy for an event-like object that exposes only primitive
+ * (string, number, boolean, bigint, symbol, undefined) properties and null.
+ *
+ * @param {T} target The event-like object to wrap.
+ * @returns {T} A proxy exposing only primitive properties.
+ * @template T
+ */
+export function createPrimitiveEventProxy<T>(target: T): T;
 /**
  * This class wraps a MouseEvent (or similar) and allows for
  * its propagation through the view hierarchy in a similar manner
@@ -5,7 +14,6 @@
  */
 export default class InteractionEvent {
     /**
-     *
      * @param {import("../view/layout/point.js").default} point Event coordinates
      *      inside the visualization canvas.
      * @param {UIEvent} uiEvent The event to be wrapped
@@ -21,7 +29,16 @@ export default class InteractionEvent {
      */
     target: import("../view/view.js").default;
     stopPropagation(): void;
+    /**
+     * The event type string of the underlying UI event (e.g. "click", "keydown").
+     *
+     * This getter proxies and returns the `type` property from the internal `UIEvent` instance (`this.uiEvent`).
+     *
+     * @returns {string} The UI event type.
+     */
     get type(): string;
+    get proxiedMouseEvent(): MouseEvent;
     get mouseEvent(): MouseEvent;
+    #private;
 }
 //# sourceMappingURL=interactionEvent.d.ts.map

package/dist/src/utils/interactionEvent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactionEvent.d.ts","sourceRoot":"","sources":["../../../src/utils/interactionEvent.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH;IACI;;;;;OAKG;IACH,mBAJW,OAAO,yBAAyB,EAAE,OAAO,WAEzC,OAAO,EAajB;IAVG,iDAAkB;IAClB,iBAAsB;IACtB,iBAAoB;IAEpB;;;;OAIG;IACH,QAFU,OAAO,iBAAiB,EAAE,OAAO,CAEpB;IAG3B,wBAEC;IAED,mBAEC;IAED,6BAMC;CACJ"}
+{"version":3,"file":"interactionEvent.d.ts","sourceRoot":"","sources":["../../../src/utils/interactionEvent.js"],"names":[],"mappings":"AA6DA;;;;;;;GAOG;AACH,0CAFa,CAAC,UAFH,CAAC,GACC,CAAC,CA0Eb;AA5ID;;;;GAIG;AACH;IAII;;;;OAIG;IACH,mBAJW,OAAO,yBAAyB,EAAE,OAAO,WAEzC,OAAO,EAajB;IAVG,iDAAkB;IAClB,iBAAsB;IACtB,iBAAoB;IAEpB;;;;OAIG;IACH,QAFU,OAAO,iBAAiB,EAAE,OAAO,CAEpB;IAG3B,wBAEC;IAED;;;;;;OAMG;IACH,YAFa,MAAM,CAIlB;IAED,oCAQC;IAED,6BAMC;;CACJ"}