@genome-spy/core 0.54.0 → 0.56.0

package/dist/src/selection/selection.js

@@ -13,6 +13,53 @@ export function createSinglePointSelection(datum) {
     };
 }
 
+/**
+ * @param {import("../data/flowNode.js").Datum[]} [data]
+ * @returns {import("../types/selectionTypes.js").MultiPointSelection}
+ */
+export function createMultiPointSelection(data) {
+    data ??= [];
+    return {
+        type: "multi",
+        data: new Map(data.map((d) => [d[UNIQUE_ID_KEY], d])),
+    };
+}
+
+/**
+ * Updates the backing data and returns a new instance of the selection object.
+ * A new instance is required to trigger reactivity in parameters.
+ *
+ * @param {import("../types/selectionTypes.js").MultiPointSelection} selection
+ * @param {Partial<Record<"add" | "remove" | "toggle", Iterable<import("../data/flowNode.js").Datum>>>} update
+ * @returns {import("../types/selectionTypes.js").MultiPointSelection}
+ */
+export function updateMultiPointSelection(selection, { add, remove, toggle }) {
+    const data = selection.data;
+
+    for (const d of add ?? []) {
+        data.set(d[UNIQUE_ID_KEY], d);
+    }
+
+    for (const d of remove ?? []) {
+        data.delete(d[UNIQUE_ID_KEY]);
+    }
+
+    for (const d of toggle ?? []) {
+        const id = d[UNIQUE_ID_KEY];
+        if (data.has(id)) {
+            data.delete(id);
+        } else {
+            data.set(id, d);
+        }
+    }
+
+    return {
+        type: "multi",
+        // Note, the data map is reused for performance reasons.
+        data,
+    };
+}
+
 /**
  * @param {import("../types/selectionTypes.js").Selection} selection
  * @param {import("../data/flowNode.js").Datum} datum
@@ -28,9 +75,9 @@ export function selectionTest(selection, datum, empty = true) {
             ? empty
             : selection.uniqueId === datum[UNIQUE_ID_KEY];
     } else if (isMultiPointSelection(selection)) {
-        return selection.uniqueIds.size == 0
+        return selection.data.size == 0
             ? empty
-            : selection.uniqueIds.has(datum[UNIQUE_ID_KEY]);
+            : selection.data.has(datum[UNIQUE_ID_KEY]); // TODO: Binary search
     } else {
         throw new Error("Not a selection: " + JSON.stringify(selection));
     }
@@ -76,3 +123,27 @@ export function isMultiPointSelection(selection) {
 export function isProjectedSelection(selection) {
     return selection.type === "projected";
 }
+
+/**
+ * @param {any} config
+ * @returns {config is import("../spec/parameter.js").PointSelectionConfig}
+ */
+export function isPointSelectionConfig(config) {
+    return (
+        config != null &&
+        typeof config !== "string" &&
+        "type" in config &&
+        config.type === "point"
+    );
+}
+
+/**
+ * @param {string | import("../spec/parameter.js").PointSelectionConfig} config
+ * @returns {boolean}
+ */
+export function isTogglingEnabledInPointSelectionConfig(config) {
+    if (!isPointSelectionConfig(config)) {
+        return false;
+    }
+    return config.toggle ?? config.on === "click";
+}

package/dist/src/spec/parameter.d.ts

@@ -196,6 +196,8 @@ export interface BaseSelectionConfig<T extends SelectionType = SelectionType> {
 }
 
 export interface PointSelectionConfig extends BaseSelectionConfig<"point"> {
+    type: "point";
+
     /**
      * Controls whether data values should be toggled (inserted or removed from a point selection)
      * when clicking with the shift key pressed.
@@ -205,8 +207,7 @@ export interface PointSelectionConfig extends BaseSelectionConfig<"point"> {
      *
      * __Default value:__ `true`
      */
-    // TODO TODO TODO TODO TODO TODO TODO TODO
-    //toggle?: boolean;
+    toggle?: boolean;
     /**
      * A set of fields that uniquely identify a tuple. Used for bookmarking point selections
      * in the GenomeSpy App. Still work in progress.

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

@@ -33,8 +33,8 @@ export interface SinglePointSelection extends SelectionBase {
 export interface MultiPointSelection extends SelectionBase {
     type: "multi";
 
-    data: Datum[];
-    uniqueIds: Set<number>;
+    /** Maps unique id to datum */
+    data: Map<number, Datum>;
 }
 
 export type Selection =

package/dist/src/view/axisView.js

@@ -271,7 +271,7 @@ function createAxis(axisProps, type) {
      */
     const createDomain = () => ({
         name: "domain",
-        data: { values: [0] },
+        data: { values: [{}] },
         mark: {
             type: "rule",
             clip: false,
@@ -334,7 +334,7 @@ function createAxis(axisProps, type) {
      */
     const createTitle = () => ({
         name: "title",
-        data: { values: [0] },
+        data: { values: [{}] },
         mark: {
             type: "text",
             clip: false,

package/dist/src/view/paramMediator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paramMediator.d.ts","sourceRoot":"","sources":["../../../src/view/paramMediator.js"],"names":[],"mappings":"AAoUA;;;GAGG;AACH,6BAHW,GAAG,+CAKb;AAED;;;;;;;GAOG;AACH,oFASC;AAED;;;GAGG;AACH,gJAEC;AAED;;;GAGG;AACH,gMAEC;AAED;;;;;;;;;;GAUG;AACH,mFANW,aAAa,+CAEW,IAAI,KAwCtC;AAED;;;;;;GAMG;AACH,4CAHW,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;GAOG;AACH,2CAHW,GAAG,GACD,eAAe,CAW3B;AA9bD;;;;;;;;GAQG;AACH;IA2BI;;;;;OAKG;IACH,2BALW,MAAM,aAAa,EAU7B;IA7BD;;;OAGG;IACH,0BAHU,IAAI,MAAM,EAAE,IAAI,MAAM,IAAI,CAAC,CAAC,CAGvB;IA2Bf;;;OAGG;IACH,wEAzCqB,GAAG,KAAK,IAAI,CAmGhC;IAED;;;;;;;OAOG;IACH,6BANW,MAAM,6BAEN,OAAO,iBACS,IAAI,CAgC9B;IAED;;;OAGG;IACH,qBAFW,MAAM,WAlIc,GAAG,KAAK,IAAI,CA0I1C;IAED;;;OAGG;IACH,oBAFW,MAAM,OAIhB;IAED;;;OAGG;IACH,qBAFW,MAAM,OAKhB;IAED;;OAEG;IACH,kFAIC;IAED;;;;OAIG;IACH,gCAHW,MAAM,GACJ,aAAa,CAQzB;IAID;;;;OAIG;IACH,uBAFW,MAAM,mBA4EhB;IAED;;;;OAIG;IACH,qBAFW,MAAM,OAKhB;IAED;;;;;OAKG;IACH,sBAFa,OAAO,CAiBnB;;CACJ;;;;;;;;8BAvTY,OAAO,wBAAwB,EAAE,kBAAkB,GAAG;IAAE,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,MAAM,CAAA;CAAC"}
+{"version":3,"file":"paramMediator.d.ts","sourceRoot":"","sources":["../../../src/view/paramMediator.js"],"names":[],"mappings":"AA0UA;;;GAGG;AACH,6BAHW,GAAG,+CAKb;AAED;;;;;;;GAOG;AACH,oFASC;AAED;;;GAGG;AACH,gJAEC;AAED;;;GAGG;AACH,gMAEC;AAED;;;;;;;;;;GAUG;AACH,mFANW,aAAa,+CAEW,IAAI,KAwCtC;AAED;;;;;;GAMG;AACH,4CAHW,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;GAOG;AACH,2CAHW,GAAG,GACD,eAAe,CAW3B;AA/bD;;;;;;;;GAQG;AACH;IA2BI;;;;;OAKG;IACH,2BALW,MAAM,aAAa,EAU7B;IA7BD;;;OAGG;IACH,0BAHU,IAAI,MAAM,EAAE,IAAI,MAAM,IAAI,CAAC,CAAC,CAGvB;IA2Bf;;;OAGG;IACH,wEAzCqB,GAAG,KAAK,IAAI,CAoGhC;IAED;;;;;;;OAOG;IACH,6BANW,MAAM,6BAEN,OAAO,iBACS,IAAI,CAgC9B;IAED;;;OAGG;IACH,qBAFW,MAAM,WAnIc,GAAG,KAAK,IAAI,CA2I1C;IAED;;;OAGG;IACH,oBAFW,MAAM,OAIhB;IAED;;;OAGG;IACH,qBAFW,MAAM,OAKhB;IAED;;OAEG;IACH,kFAIC;IAED;;;;OAIG;IACH,gCAHW,MAAM,GACJ,aAAa,CAQzB;IAID;;;;OAIG;IACH,uBAFW,MAAM,mBA4EhB;IAED;;;;OAIG;IACH,qBAFW,MAAM,OAKhB;IAED;;;;;OAKG;IACH,sBAFa,OAAO,CAiBnB;;CACJ;;;;;;;;8BAxTY,OAAO,wBAAwB,EAAE,kBAAkB,GAAG;IAAE,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,MAAM,CAAA;CAAC"}

package/dist/src/view/paramMediator.js

@@ -1,6 +1,11 @@
 import { isString } from "vega-util";
 import createFunction from "../utils/expression.js";
-import { createSinglePointSelection } from "../selection/selection.js";
+import {
+    createMultiPointSelection,
+    createSinglePointSelection,
+    isPointSelectionConfig,
+    isTogglingEnabledInPointSelectionConfig,
+} from "../selection/selection.js";
 
 /**
  * A class that manages parameters and expressions.
@@ -100,13 +105,14 @@ export default class ParamMediator {
         }
 
         if ("select" in param) {
-            const type = isString(param.select)
-                ? param.select
-                : param.select.type;
-
-            // Set initial value so that production rules in shaders can be generated, etc.
-            if (type == "point") {
-                setter(createSinglePointSelection(null));
+            const select = param.select;
+            if (isPointSelectionConfig(select)) {
+                // Set initial value so that production rules in shaders can be generated, etc.
+                setter(
+                    isTogglingEnabledInPointSelectionConfig(select)
+                        ? createMultiPointSelection()
+                        : createSinglePointSelection(null)
+                );
             }
         }
 

package/dist/src/view/unitView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unitView.d.ts","sourceRoot":"","sources":["../../../src/view/unitView.js"],"names":[],"mappings":"AAsBA;;;;GAIG;AACH,wBAHU,OAAO,OAAO,iBAAiB,EAAE,QAAQ,EAAE,cAAc,kBAAkB,EAAE,OAAO,CAAC,CAc7F;AAEF;IAeI;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,QAAQ,WAClC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAiCzC;IA5BG,yCAAgB;IAIZ,iDAAiD;IACjD,MADW,OAAO,kBAAkB,EAAE,OAAO,CACnB;IAsFlC,2DAIC;IAED;;;;;OAKG;IAEH,iEA+FC;IAED;;;;;OAKG;IACH,4IAEC;IAkBD;;OAEG;IACH,uDAEC;IAED;;;;;;;;;;;;;OAaG;IACH,uEAHW,OAAO,oBAAoB,EAAE,IAAI,iDAqB3C;IAED,uBAQC;IAgBD;;;;OAIG;IACH,8BAJW,MAAM,+DAEJ,OAAO,iBAAiB,EAAE,kBAAkB,CAKxD;;CACJ;iBA/VgB,WAAW"}
+{"version":3,"file":"unitView.d.ts","sourceRoot":"","sources":["../../../src/view/unitView.js"],"names":[],"mappings":"AA4BA;;;;GAIG;AACH,wBAHU,OAAO,OAAO,iBAAiB,EAAE,QAAQ,EAAE,cAAc,kBAAkB,EAAE,OAAO,CAAC,CAc7F;AAEF;IAeI;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,QAAQ,WAClC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAiCzC;IA5BG,yCAAgB;IAIZ,iDAAiD;IACjD,MADW,OAAO,kBAAkB,EAAE,OAAO,CACnB;IAoHlC,2DAIC;IAED;;;;;OAKG;IAEH,iEA+FC;IAED;;;;;OAKG;IACH,4IAEC;IAkBD;;OAEG;IACH,uDAEC;IAED;;;;;;;;;;;;;OAaG;IACH,uEAHW,OAAO,oBAAoB,EAAE,IAAI,iDAqB3C;IAED,uBAQC;IAgBD;;;;OAIG;IACH,8BAJW,MAAM,+DAEJ,OAAO,iBAAiB,EAAE,kBAAkB,CAKxD;;CACJ;iBAnYgB,WAAW"}

package/dist/src/view/unitView.js

@@ -16,7 +16,13 @@ import {
 import createDomain from "../utils/domainArray.js";
 import AxisResolution from "./axisResolution.js";
 import View from "./view.js";
-import { createSinglePointSelection } from "../selection/selection.js";
+import {
+    createMultiPointSelection,
+    createSinglePointSelection,
+    isPointSelectionConfig,
+    isTogglingEnabledInPointSelectionConfig,
+    updateMultiPointSelection,
+} from "../selection/selection.js";
 import { isString } from "vega-util";
 import { UNIQUE_ID_KEY } from "../data/transforms/identifier.js";
 
@@ -102,8 +108,7 @@ export default class UnitView extends View {
             }
 
             const select = param.select;
-            const type = isString(select) ? select : select.type;
-            if (type === "point") {
+            if (isPointSelectionConfig(select)) {
                 // Handle projection-free point selections
 
                 const none = -1;
@@ -123,15 +128,46 @@ export default class UnitView extends View {
                     ["mouseover", "pointerover"].includes(on)
                         ? "mousemove"
                         : "click",
-                    (rect, event) => {
+                    (
+                        rect,
+                        /** @type {import("../utils/interactionEvent.js").default} */ event
+                    ) => {
+                        const mouseEvent = /** @type {MouseEvent} */ (
+                            event.uiEvent
+                        );
                         const datum = getHoveredDatum();
                         const id = datum ? datum[UNIQUE_ID_KEY] : none;
-                        if (id != lastId) {
-                            lastId = id;
-                            const selection = createSinglePointSelection(
-                                getHoveredDatum()
-                            );
-                            setter(selection);
+
+                        if (isTogglingEnabledInPointSelectionConfig(select)) {
+                            const toggle = mouseEvent.shiftKey;
+
+                            if (toggle) {
+                                if (datum) {
+                                    const previousSelection =
+                                        this.paramMediator.getValue(name);
+                                    setter(
+                                        updateMultiPointSelection(
+                                            previousSelection,
+                                            {
+                                                toggle: [datum],
+                                            }
+                                        )
+                                    );
+                                }
+                            } else {
+                                setter(
+                                    createMultiPointSelection(
+                                        datum ? [datum] : null
+                                    )
+                                );
+                            }
+                        } else {
+                            if (id != lastId) {
+                                lastId = id;
+                                const selection =
+                                    createSinglePointSelection(datum);
+                                setter(selection);
+                            }
                         }
                     }
                 );

package/package.json

@@ -7,7 +7,7 @@
   },
   "contributors": [],
   "license": "MIT",
-  "version": "0.54.0",
+  "version": "0.56.0",
   "jsdelivr": "dist/bundle/index.js",
   "unpkg": "dist/bundle/index.js",
   "browser": "dist/bundle/index.js",
@@ -67,5 +67,5 @@
   "devDependencies": {
     "@types/long": "^4.0.1"
   },
-  "gitHead": "38fcc65c16a986706fc946c4aae3c5199e02a119"
+  "gitHead": "3b83e28aecd08d1362bb373929823dc69cf9b705"
 }