mascot-vis 2.0.0 → 2.1.0

package/dist/mascot.js

@@ -1,10 +1,10 @@
 /* eslint-disable */
-// version: 2.0.0
+// version: 2.1.0
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3'), require('pixi.js')) :
 	typeof define === 'function' && define.amd ? define(['exports', 'd3', 'pixi.js'], factory) :
 	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.msc = {}, global.d3, global.PIXI));
-}(this, (function (exports, d3, PIXI) { 'use strict';
+}(this, (function (exports, d3$1, PIXI) { 'use strict';
 
 	function _interopNamespace(e) {
 		if (e && e.__esModule) return e;
@@ -26,7 +26,7 @@
 		return Object.freeze(n);
 	}
 
-	var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
+	var d3__namespace = /*#__PURE__*/_interopNamespace(d3$1);
 	var PIXI__namespace = /*#__PURE__*/_interopNamespace(PIXI);
 
 	class Rectangle {
@@ -129,7 +129,7 @@
 		Radial: "radial"
 	};
 
-	const Direction = {
+	const Direction$1 = {
 		Up: "up",
 		Down: "down",
 		Left: "left",
@@ -1453,6 +1453,19 @@
 		return cmpnt instanceof Path;
 	}
 
+	function itemIsRepeatable(itm) {
+		// if (!itm.dataScope)
+		// 	return true;
+		// else if (itm)
+		// 	return itm.dataScope.numTuples.length > 1;
+		if ((isMark(itm) || itm.type == ItemType.Glyph) && !itm.dataScope)
+			return true;
+		else if (itm.type === ItemType.Collection)
+			return itm.firstChild.dataScope.numTuples > 1;
+		
+		return false;
+	}
+
 	const ItemCounter = {
 		"area" : 0,
 		"rect" : 0,
@@ -2705,8 +2718,8 @@
 		_stackArcs() {
 			let group = this.group;
 			let startAngle = this.startAngle ? this.startAngle : 90,
-				dir = this._direction ? this._direction : Direction.Clockwise;
-			if (dir === Direction.Clockwise) {
+				dir = this._direction ? this._direction : Direction$1.Clockwise;
+			if (dir === Direction$1.Clockwise) {
 				for (let c of group.children) {
 					let temp = normalizeAngle(startAngle - c.angle);
 					c.adjustAngle(temp, startAngle);
@@ -3221,7 +3234,7 @@
 					// Add to collection
 					coll.addChild(arc);
 				}
-				coll.layout = layout("stack", {direction: Direction.Clockwise});
+				coll.layout = layout("stack", {direction: Direction$1.Clockwise});
 				// Replace original circle w/ coll of pies
 				parent.removeChild(p);
 				parent.addChild(coll);
@@ -3284,7 +3297,7 @@
 					coll.addChild(pie);
 				}
 		
-				coll.layout = layout("stack", {orientation: Orientation.Angular, direction: Direction.Clockwise});
+				coll.layout = layout("stack", {orientation: Orientation.Angular, direction: Direction$1.Clockwise});
 				// Replace original circle w/ coll of pies
 				parent.removeChild(p);
 				parent.addChild(coll);
@@ -7229,13 +7242,15 @@
 	        let scale = this.encoding.scale;
 	        let dt = new DataTable(scale.domain.map(d => ({"category": d, "value": scale.map(d)})));
 	        let longestText = dt.getUniqueFieldValues("category").sort((a,b) => b.length - a.length)[0];
+	        let mark = this.encoding.anyItem;
+	        let sw = isPath(mark) && mark.closed ? mark.strokeWidth : 0;
 	        if (this._orientation === Orientation.Vertical) {
 	            let titleSize = 0;
 	            if (this._showTitle) {
 	                this.addChild(new PointText({fillColor: this._textColor, "fontSize": this._fontSize, "text": f, x: this._x, y: this._y, "anchor": ["left", "top"]})); 
 	                titleSize = parseFloat(this._fontSize) + 5;
 	            }
-	            let rect = scene.mark("rect", {"top": this._y + 2 + titleSize, "left": this._x, "width": 10, "height": 10, "strokeWidth": 0, opacity: this.encoding.anyItem.opacity});
+	            let rect = scene.mark("rect", {"top": this._y + 2 + titleSize, "left": this._x, "width": 10, "height": 10, "strokeWidth": sw, "strokeColor": mark.strokeColor, "opacity": mark.opacity});
 	            let text = scene.mark("text", {text: longestText, fillColor: this._textColor, "fontSize": this._fontSize, x: this._x + 20, y: this._y + titleSize, "anchor": ["left", "top"]});
 	            let glyph = scene.glyph(rect, text);
 	            let coll = scene.repeat(glyph, dt);
@@ -7245,7 +7260,7 @@
 	            this.addChild(coll);
 	        } else {
 	            //do not show title for now
-	            let rect = scene.mark("rect", {"top": this._y, "left": this._x, "width": 10, "height": 10, "strokeWidth": 0, opacity: this.encoding.anyItem.opacity});
+	            let rect = scene.mark("rect", {"top": this._y, "left": this._x, "width": 10, "height": 10, "strokeWidth": sw, "strokeColor": mark.strokeColor, "opacity": this.encoding.anyItem.opacity});
 	            let text = scene.mark("text", {text: longestText, fillColor: this._textColor, "fontSize": this._fontSize, x: this._x + 15, y: this._y, "anchor": ["left", "top"]});
 	            let glyph = scene.glyph(rect, text);
 	            let coll = scene.repeat(glyph, dt);
@@ -9052,8 +9067,8 @@
 	}
 
 	function _doCircleStratify(scene, compnt, dir, sz, tree) {
-		let toReturn, direction = dir ? dir : Direction.Outward, size = sz ? sz : 50;
-		if (direction !== Direction.Inward && direction !== Direction.Outward) {
+		let toReturn, direction = dir ? dir : Direction$1.Outward, size = sz ? sz : 50;
+		if (direction !== Direction$1.Inward && direction !== Direction$1.Outward) {
 			throw Errors.UNKNOWN_DIRECTION + " " + direction;
 		}
 		let peers = getPeers(compnt, scene);
@@ -9124,8 +9139,8 @@
 	}
 
 	function _doRectStratify(scene, compnt, dir, sz, tree) {
-		let toReturn, direction = dir ? dir : Direction.Down, size = sz ? sz : 50;
-		if ([Direction.Up, Direction.Down, Direction.Left, Direction.Right].indexOf(direction) < 0) {
+		let toReturn, direction = dir ? dir : Direction$1.Down, size = sz ? sz : 50;
+		if ([Direction$1.Up, Direction$1.Down, Direction$1.Left, Direction$1.Right].indexOf(direction) < 0) {
 			throw Errors.UNKNOWN_DIRECTION + " " + direction;
 		}
 		let peers = getPeers(compnt, scene);
@@ -9157,10 +9172,10 @@
 		if (children.length === 0) return;
 		let x, y, width;
 		switch (direction) {
-			case Direction.Up:
-			case Direction.Down:
-			case Direction.Left:
-			case Direction.Right:
+			case Direction$1.Up:
+			case Direction$1.Down:
+			case Direction$1.Left:
+			case Direction$1.Right:
 			default:
 				x = compnt.left;
 				y = compnt.bottom;
@@ -9190,95 +9205,6 @@
 		}
 	}
 
-	class Interaction {
-
-	    constructor(listener, eventType, selDef, targetDef) {
-	        this._listener = listener;
-	        this._eventType = eventType;
-	        this._selDef = selDef;
-	        this._targetDef = targetDef;
-	    }
-
-	    getCallbackFunction(scene, handler) {
-	        let i = this;
-	        return function(e){
-	            e.stopPropagation();
-	            let sel = handler._getSelection(e, i.selectionDef, i._listener, scene.getItem(d3__namespace.select(this).attr("id")));
-	            let targets = getPeers(i.targetDef.item, scene);
-	            let predicates;
-	            if (i.selectionDef.remember) {
-	                handler.addGlobalPredicate(scene, sel.predicate);
-	                predicates = handler.getGlobalPredicates(scene);
-	            } else {
-	                predicates = handler.getGlobalPredicates(scene).concat([sel.predicate]);
-	            }
-	            for (let t of targets) {
-	                let selected = true;
-	                for (let p of predicates) {
-	                    if (!evaluatePredicate(t, p)) {
-	                        selected = false;
-	                        break;
-	                    }
-	                }
-	                for (let c in i.targetDef.effect) {
-	                    if (!(c in t.staticProperties))
-	                        t.staticProperties[c] = t[c];
-	                    if (selected) {
-	                        t[c] = i.targetDef.effect[c].selected;
-	                    } else if ("unselected" in i.targetDef.effect[c]) {
-	                        t[c] = i.targetDef.effect[c].unselected;
-	                    } else if (c in t.staticProperties) {
-	                        t[c] = t.staticProperties[c];
-	                    }
-	                }
-	            }
-	            // console.log(handler.getGlobalPredicates(scene));
-	            handler._renderer.render(scene, {visualOnly: true});
-	        }
-	    }
-
-	    getRestoreFunction(scene, handler, clearGlobalPredicates) {
-	        let i = this;
-	        return function(){
-	            let targets = getPeers(i.targetDef.item, scene);
-	            if (i.targetDef.effect) {
-	                for (let t of targets) {
-	                    for (let c in i.targetDef.effect)
-	                        t[c] = t.staticProperties[c];
-	                    //delete t.staticProperties[c];
-	                }
-	            } else {
-	                for (let t of targets) {
-	                    for (let c in t.staticProperties)
-	                        t[c] = t.staticProperties[c];
-	                    //t.staticProperties = {};
-	                }
-	            }
-
-	            if (clearGlobalPredicates)
-	                handler._globalPredicates = {};
-	            
-	            handler._renderer.render(scene, {visualOnly: true});
-	        }
-	    }
-
-	    get listener() {
-	        return this._listener;
-	    }
-
-	    get selectionDef() {
-	        return this._selDef;
-	    }
-
-	    get targetDef() {
-	        return this._targetDef;
-	    }
-
-	    get eventType() {
-	        return this._eventType;
-	    }
-	}
-
 	function classifyCollectionChildren(scene, c, field, layout) {
 	    let peers = getPeers(c, scene);
 	    for (let p of peers) {
@@ -9315,9 +9241,9 @@
 	    //return results;
 	}
 
-	class Scene extends Group{
+	class Scene extends Group {
 
-		constructor(args){
+		constructor(args) {
 			super();
 			if (args && args.fillColor) {
 				this.fillColor = args.fillColor;
@@ -9329,6 +9255,7 @@
 			this.constraints = {};
 			this._itemMap = {};
 			this._interactions = [];
+			this._interactionsObj = {};
 		}
 
 		clear() {
@@ -9350,10 +9277,10 @@
 		}
 
 		mark(type, param) {
-			let args = param === undefined ?  {} : param;
+			let args = param === undefined ? {} : param;
 			let m = null;
 			args.type = type;
-			switch(type) {
+			switch (type) {
 				case ItemType.Rect: {
 					if (!("top" in args))
 						args.top = 0;
@@ -9376,7 +9303,7 @@
 					break;
 				}
 				case ItemType.Area:
-					if (args !== undefined && "x1" in args && "y1" in args  && "x2" in args && "y2" in args) {
+					if (args !== undefined && "x1" in args && "y1" in args && "x2" in args && "y2" in args) {
 						let x1 = args["x1"], y1 = args["y1"], x2 = args["x2"], y2 = args["y2"];
 						// args.vertices contains all the vertices on two boundary lines
 						args.vertices = [[x1, y1], [x2, y1], [x2, y2], [x1, y2]];
@@ -9389,7 +9316,7 @@
 					break;
 				case ItemType.Line: {
 					//it is possible to create a skeleton line without x1, y1, x2, y2 args, e.g. when duplicating
-					if (args !== undefined && "x1" in args && "y1" in args  && "x2" in args && "y2" in args) {
+					if (args !== undefined && "x1" in args && "y1" in args && "x2" in args && "y2" in args) {
 						let x1 = args["x1"], y1 = args["y1"], x2 = args["x2"], y2 = args["y2"];
 						args.vertices = [[x1, y1], [x2, y2]];
 						//remove x1, y1, x2, y2 and compute these values at rendering time 
@@ -9406,7 +9333,7 @@
 				case ItemType.Path:
 					m = new Path(args);
 					break;
-				case ItemType.Circle: 
+				case ItemType.Circle:
 					m = new CirclePath(args);
 					break;
 				case ItemType.Ring:
@@ -9451,7 +9378,7 @@
 			return m;
 		}
 
-		glyph(...args){
+		glyph(...args) {
 			let g = new Glyph(args);
 			g.classId = g.id;
 			this.addChild(g);
@@ -9471,7 +9398,7 @@
 		}
 
 		repeat(item, data, param) {
-			if (!item || data === undefined){
+			if (!item || data === undefined) {
 				throw Errors.INCOMPLETE_REPEAT_INFO;
 			}
 
@@ -9481,8 +9408,8 @@
 				return repeatNodeLink(this, item[0], item[1], data);
 			} else {
 				let args = param ? param : {},
-				field = args["field"] ? args["field"] : DataTable.RowID,
-				callback = args["callback"];
+					field = args["field"] ? args["field"] : DataTable.RowID,
+					callback = args["callback"];
 
 				validateField(field, data);
 
@@ -9494,7 +9421,7 @@
 		}
 
 		repopulate(item, table, param) {
-			if (!item || table === undefined){
+			if (!item || table === undefined) {
 				throw Errors.INCOMPLETE_REPEAT_INFO;
 			}
 
@@ -9506,11 +9433,11 @@
 		}
 
 		densify(item, table, param) {
-			if (!item || table === undefined){
+			if (!item || table === undefined) {
 				throw Errors.INCOMPLETE_PARTITION_INFO;
 			}
 
-			let args = param ? param : {}, 
+			let args = param ? param : {},
 				orientation = args["orientation"],
 				field = args["field"] ? args["field"] : DataTable.RowID,
 				//following two are for circle densification
@@ -9519,7 +9446,7 @@
 				callback = args["callback"];
 
 			validateField(field, table);
-					
+
 			let newItem = densifyItem(this, item, orientation, field, table, callback, startAngle, direction);
 			SceneValidator.markDensified(item, newItem);
 			return newItem;
@@ -9537,14 +9464,14 @@
 			let args = param ? param : {},
 				direction = args["direction"],
 				size = args["size"];
-			
+
 			let collection = stratifyItem(this, item, direction, size, data);
 			//SceneValidator.markDivided(item, collection);
 			return collection;
 		}
 
 		divide(item, data, param) {
-			if (!item || data == undefined){
+			if (!item || data == undefined) {
 				throw Errors.INCOMPLETE_PARTITION_INFO;
 			}
 
@@ -9554,7 +9481,7 @@
 				callback = args["callback"];
 
 			validateField(field, data);
-					
+
 			let collection = divideItem(this, item, orientation, field, data, callback);
 			if (args.layout)
 				collection.layout = args.layout;
@@ -9563,8 +9490,8 @@
 			return collection;
 		}
 
-		classify(item, param){
-			if (!canClassify(item)){
+		classify(item, param) {
+			if (!canClassify(item)) {
 				throw Errors.CANNOT_CLASSIFY + item.type;
 			}
 
@@ -9573,7 +9500,7 @@
 				dt = item.firstChild.dataScope.dataTable,
 				layout = args.layout;
 			validateField(field, dt);
-					
+
 			classifyCollectionChildren(this, item, field, layout);
 
 			//SceneValidator.markDivided(item, collection);
@@ -9595,11 +9522,11 @@
 			} else if (!item.dataScope) {
 				throw Errors.BIND_WITHOUT_DATASCOPE;
 			}
-			
+
 
 			let datatable = args.table ? args.table : item.dataScope ? item.dataScope._dt : item.parent.dataScope._dt;
 
-			let ft= datatable.getFieldType(field);
+			let ft = datatable.getFieldType(field);
 			if (args.channel === "fillGradient" && [DataType.String, DataType.Boolean, DataType.Date].indexOf(ft) >= 0)
 				throw Errors.UNSUPPORTED_FIELDTYPE + args.channel + ": " + ft;
 
@@ -9609,7 +9536,7 @@
 
 		//supports encoding one single item or an array of items (which will use the same scale)
 		encode(itm, args) {
-			let arr = Array.isArray(itm) ? itm : [itm];		
+			let arr = Array.isArray(itm) ? itm : [itm];
 			let encs = [], scale;
 			for (let item of arr) {
 				let items;
@@ -9621,12 +9548,12 @@
 					}
 				}
 				this._validateEncodeArgs(item, args);
-				if (item.type == "vertex" && item.parent.type == ItemType.Area){
+				if (item.type == "vertex" && item.parent.type == ItemType.Area) {
 					let areas = getPeers(item.parent, this);
 					items = [];
-					let firstHalf = item.parent.vertices.indexOf(item) < item.parent.vertices.length/2;
-					for (let area of areas){
-						items = firstHalf ? items.concat(area.vertices.slice(0, area.vertices.length/2)) : items.concat(area.vertices.slice(area.vertices.length/2));
+					let firstHalf = item.parent.vertices.indexOf(item) < item.parent.vertices.length / 2;
+					for (let area of areas) {
+						items = firstHalf ? items.concat(area.vertices.slice(0, area.vertices.length / 2)) : items.concat(area.vertices.slice(area.vertices.length / 2));
 					}
 				} else {
 					items = getPeers(item, this);
@@ -9642,8 +9569,8 @@
 				if (!scale)
 					scale = enc.scale;
 				encs.push(enc);
-			} 
-			
+			}
+
 			return encs.length > 1 ? encs : encs[0];
 		}
 
@@ -9651,7 +9578,7 @@
 			let item = items[0],
 				channel = args["channel"],
 				field = args["field"];
-			
+
 			if (!("datatable" in args))
 				args.datatable = item.dataScope ? item.dataScope.dataTable : item.parent.dataScope.dataTable;
 			if (!("aggregator" in args))
@@ -9698,7 +9625,7 @@
 				case "fillGradient":
 					if (item.type === ItemType.Area)
 						bindToAreaMark(encoding);
-						break;
+					break;
 				case "angle":
 					bindToAngle(encoding);
 					break;
@@ -9716,7 +9643,7 @@
 					break;
 			}
 
-			if (!("_remember" in args)  || args._remember == true)
+			if (!("_remember" in args) || args._remember == true)
 				this._registerBinding(encoding);
 
 			if (channel.indexOf("Color") < 0)
@@ -9749,7 +9676,7 @@
 			//if so, do nothing and return false
 			if (!canAlign(items, direction, this)) return false;
 			let c = new AlignConstraint(items, direction);
-			if (c.id in this.constraints){
+			if (c.id in this.constraints) {
 				console.warn('constraint has been added');
 				return false;
 			}
@@ -9790,7 +9717,7 @@
 				itemAnchor = "itemAnchor" in args ? args.itemAnchor : (channel == "x" || channel == "angle") ? "center" : "middle",
 				baseAnchor = "baseAnchor" in args ? args.baseAnchor : (channel == "x" || channel == "angle") ? "center" : "middle";
 			let c = new AffixConstraint(item, baseItem, this, channel, itemAnchor, baseAnchor, offset);
-			if (c.id in this.constraints);
+			if (c.id in this.constraints) ;
 			this.constraints[c.id] = c;
 			c.apply();
 		}
@@ -9807,13 +9734,13 @@
 				if (enc.channel === "width") {
 					let existingChannels = this.children.filter(d => d.type === ItemType.Axis).map(d => d.channel);
 					if (!("orientation" in args))
-						args.orientation = existingChannels.indexOf("x") >= 0? "top" : "bottom";
+						args.orientation = existingChannels.indexOf("x") >= 0 ? "top" : "bottom";
 				} else if (enc.channel === "height") {
 					let existingChannels = this.children.filter(d => d.type === ItemType.Axis).map(d => d.channel);
 					if (!("orientation" in args))
-						args.orientation = existingChannels.indexOf("y") >= 0? "right" : "left";
+						args.orientation = existingChannels.indexOf("y") >= 0 ? "right" : "left";
 				}
-				let axis = new EncodingAxis(enc, args.item? args.item : enc.anyItem, args);
+				let axis = new EncodingAxis(enc, args.item ? args.item : enc.anyItem, args);
 				if ("tickValues" in args) {
 					axis.tickValues = args["tickValues"];
 					axis.labelValues = args["tickValues"];
@@ -9821,15 +9748,15 @@
 					axis.tickValues = enc._inferTickValues();
 					axis.labelValues = enc._inferTickValues();
 				}
-				
+
 				this.addChildAt(axis, 0);
 				this._itemMap[axis.id] = axis;
 				this._updateBounds();
 				return axis;
-			} 
-			
+			}
+
 			//TODO: find out item from the field
-			let item = args.item? args.item : findItems(this, [{"field": field}])[0];
+			let item = args.item ? args.item : findItems(this, [{ "field": field }])[0];
 			if (item === undefined) {
 				console.warn(Warnings.INCORRECT_AXIS_INFO + field);
 				return;
@@ -9845,7 +9772,7 @@
 				// if (args.item)
 				// 	groups = [args.item.parent];
 				for (let c of groups) {
-					let itm = findItems(c, [{"field": field}])[0];
+					let itm = findItems(c, [{ "field": field }])[0];
 					let items = getPeers(itm, c);
 					if (itm.dataScope.dataTable.getFieldType(field) === DataType.Date && !("labelFormat" in args)) {
 						args.labelFormat = "%m/%d/%y";
@@ -9888,7 +9815,7 @@
 					if (found) break;
 					else p = p.children[0];
 				}
-				
+
 				//handle axis if the updated item is a group/collection
 				let allChildren = getAllChildren(item);
 				let map = {};
@@ -9978,7 +9905,7 @@
 				delete this.encodings[key];
 			let toRemove = [];
 			for (let c of this.children) {
-				if (isGuide(c) && c.encoding && c.encoding === enc){
+				if (isGuide(c) && c.encoding && c.encoding === enc) {
 					toRemove.push(c);
 				}
 			}
@@ -10011,7 +9938,7 @@
 				delete args["labelValues"];
 				this.removeItem(a);
 				if (a instanceof LayoutAxis) {
-					if (layoutAxisClassIds.indexOf(a.classId)< 0) {
+					if (layoutAxisClassIds.indexOf(a.classId) < 0) {
 						this.axis(a.channel, a.field, args);
 						layoutAxisClassIds.push(a.classId);
 					}
@@ -10035,12 +9962,12 @@
 			this._updateBounds();
 		}
 
-		legend(channel, field, param){
+		legend(channel, field, param) {
 			let args = param ? param : {};
 			let enc = this.getEncodingByField(field, channel);
 			if (!enc)
 				throw Errors.INCORRECT_LEGEND_INFO + field;
-			
+
 			if (!("x" in args))
 				args["x"] = 100;
 			if (!("y" in args))
@@ -10052,17 +9979,17 @@
 			return legend;
 		}
 
-		gridlines(channel, field, params){
+		gridlines(channel, field, params) {
 			let enc = this.getEncodingByField(field, channel), args = params ? params : {};
 			if (!enc) return false;
 			let gl = new Gridlines(enc, args.item ? args.item : enc.anyItem, args);
-			
+
 			if ("values" in args) {
 				gl.values = args["values"];
 			} else {
 				gl.values = enc._inferTickValues();
 			}
-			
+
 			this.addChildAt(gl, 0);
 			this._itemMap[gl.id] = gl;
 			this._updateBounds();
@@ -10136,7 +10063,7 @@
 			return gl;
 		}
 
-		propagate(item, method, ...args){
+		propagate(item, method, ...args) {
 			let peers = getPeers(item, this);
 			for (let p of peers)
 				p[method](...args);
@@ -10242,12 +10169,12 @@
 							else
 								peers.forEach(d => d.resize(d.bounds.width, args[p], undefined, args["yRef"]));
 						} else if (item.type == ItemType.Circle && p == "radius") {
-							peers.forEach(d => d.resize(args[p]*2, args[p]*2, args["xRef"], args["yRef"]));
+							peers.forEach(d => d.resize(args[p] * 2, args[p] * 2, args["xRef"], args["yRef"]));
 						} else {
 							peers.forEach(d => d[p] = args[p]);
 						}
 					}
-						
+
 				} else if (item.type == "collection" || item.type == "group") {
 					for (let c of peers) {
 						for (let p in args) {
@@ -10268,7 +10195,7 @@
 				}
 			}
 
-			if (props.indexOf("baseline") >=0 && item.type === ItemType.Area)
+			if (props.indexOf("baseline") >= 0 && item.type === ItemType.Area)
 				SceneValidator.areaRebased(item, peers);
 
 			let layoutProps = ["layout", "rowGap", "colGap", "numRows", "numCols", "orientation", "vertCellAlignment", "horzCellAlignment", "direction", "childrenOrder"];
@@ -10281,7 +10208,7 @@
 		}
 
 		_canTranslate(item) {
-			let r = {x: true, y: true};
+			let r = { x: true, y: true };
 			if (item.type == ItemType.Axis) {
 				if (item.channel === "x" || item.channel === "width")
 					r.x = false;
@@ -10315,9 +10242,9 @@
 		_updateAncestorBounds(cpnt, cpntPeers) {
 			let peers = cpntPeers ? cpntPeers : getPeers(cpnt, this);
 			let parents = getParents(peers);
-			
+
 			while (parents.length > 0) {
-				for (let p of parents) { 
+				for (let p of parents) {
 					if (p.children && p.children.length > 0) {
 						p._updateBounds();
 					} else if (p.vertices) {
@@ -10377,7 +10304,7 @@
 				for (let p of parents) {
 					if (p.layout) {
 						p.layout.run();
-					} 
+					}
 					if (p.children && p.children.length > 0) {
 						p._updateBounds();
 					}
@@ -10389,13 +10316,13 @@
 			}
 		}
 
-		_reapplySizeBindings(compnt){
+		_reapplySizeBindings(compnt) {
 			let sizeChannels = ["width", "height"];
 			for (let classId in this.encodings) {
-				if (compnt.classId != classId)	continue;
+				if (compnt.classId != classId) continue;
 				let encodings = this.encodings[classId];
 				//TODO: re-use bindSpec and adjust scale accordingly
-				let peers = findItems(this, [{"classId": classId}]);
+				let peers = findItems(this, [{ "classId": classId }]);
 				for (let channel of sizeChannels) {
 					let encoding = encodings[channel];
 					if (!encoding) continue;
@@ -10460,7 +10387,7 @@
 					break;
 				} else if (c.children && c.children.length > 0) {
 					let itm = c.firstChild;
-					while(itm) {
+					while (itm) {
 						if (itm.dataScope) {
 							tables[itm.dataScope.dataTable.id] = itm.dataScope.dataTable;
 							break;
@@ -10489,38 +10416,579 @@
 			}
 		}
 
-		addInteraction(listener, eventType, selDef, targetDef) {
-			let i = new Interaction(listener, eventType, selDef, targetDef);
-			this._interactions.push(i);
+		addInteraction(obj) {
+			// let i = new Interaction(listener, eventType, selDef, targetDef);
+			this._interactions.push(obj);
+			this._interactionsObj[obj['event']] = obj;
 		}
 	}
 
+	const Direction = {
+	    North: 'N',
+	    South: 'S',
+	    East: 'E',
+	    West: 'W',
+	    NorthEast: 'NE',
+	    NorthWest: 'NW',
+	    SouthEast: 'SE',
+	    SouthWest: 'SW',
+	    Move: 'M'
+	};
+
+	class Brush {
+
+	    // Resize Corners and handling Bounds
+
+	    SVG = null;
+	    drag = false;
+	    selection = [];
+	    mouseDown = false;
+	    rectSvg = null;
+	    bounds = null;
+	    brushColor = '#9c3131';
+
+	    dir = null;
+	    bb = [];
+	    mouseDownEvent = null;
+
+	    constructor(id, brushColor, bounds = null) {
+	        this.SVG = d3.select("#" + id).style('cursor', 'crosshair');
+	        this.brushColor = brushColor;
+	        if (bounds) {
+	            this.bounds = bounds;
+	        }
+	    }
+
+	    brush() {
+	        document.addEventListener(
+	            'mousedown', ($e) => {
+	                this.mouseDownEvent = $e;
+	                if (!this.rectSvg) {
+	                    this.appendRectangles(this.brushColor);
+	                }
+	                if (this.bounds) {
+	                    if (!($e.layerX >= this.bounds.left && $e.layerX <= this.bounds.left + this.bounds.width
+	                        && $e.layerY >= this.bounds.top && $e.layerY <= this.bounds.top + this.bounds.height))
+	                        return;
+	                }
+	                this.drag = false;
+	                this.mouseDown = true;
+	                this.selection = [$e.layerX, $e.layerY];
+
+	                let x = this.bb[0];
+	                let y = this.bb[1];
+	                let height = this.bb[2];
+	                let width = this.bb[3];
+	                if (this.selection[0] > x + 3 && this.selection[0] < x + width - 3 && (this.selection[1] >= y + height - 3 && this.selection[1] <= y + height + 3)) {
+	                    this.dir = Direction.South;
+	                } else if (this.selection[0] > x + 3 && this.selection[0] < x + width - 3 && (this.selection[1] >= y - 3 && this.selection[1] <= y + 3)) {
+	                    this.dir = Direction.North;
+	                } else if (this.selection[1] > y + 3 && this.selection[1] < y + height - 3 && (this.selection[0] >= x + width - 3 && this.selection[0] <= x + width + 3)) {
+	                    this.dir = Direction.East;
+	                } else if (this.selection[1] > y + 3 && this.selection[1] < y + height - 3 && (this.selection[0] >= x - 3 && this.selection[0] <= x + 3)) {
+	                    this.dir = Direction.West;
+	                } else if (this.selection[0] >= x - 3 && this.selection[0] <= x + 3 && this.selection[1] >= y - 3 && this.selection[1] <= y + 3) {
+	                    this.dir = Direction.NorthWest;
+	                } else if (this.selection[0] >= x - 3 && this.selection[0] <= x + 3 && this.selection[1] >= y + height - 3 && this.selection[1] <= y + height + 3) {
+	                    this.dir = Direction.SouthWest;
+	                } else if (this.selection[0] >= x + width - 3 && this.selection[0] <= x + width + 3 && this.selection[1] >= y - 3 && this.selection[1] <= y + 3) {
+	                    this.dir = Direction.NorthEast;
+	                } else if (this.selection[0] >= x + width - 3 && this.selection[0] <= x + width + 3 && this.selection[1] >= y + height - 3 && this.selection[1] <= y + height + 3) {
+	                    this.dir = Direction.SouthEast;
+	                } else if (this.selection[0] > x + 3 && this.selection[0] < x + width - 3 && this.selection[1] > y + 3 && this.selection[1] < y + height - 3) {
+	                    this.dir = Direction.Move;
+	                } else {
+	                    this.dir = null;
+	                    this.updateRectangles(null, $e.layerX, $e.layerY, 0, 0);
+	                }
+	            });
+
+	        document.addEventListener(
+	            'mousemove', ($e) => {
+	                if (this.mouseDown) {
+	                    this.drag = true;
+	                    if (this.dir == Direction.North) {
+	                        if ($e.layerY > this.bb[1]) {
+	                            //pull down
+	                            if ($e.layerY <= this.bb[1] + this.bb[2])//When we are above bottom line of rect
+	                                this.updateRectangles(null, this.bb[0], $e.layerY, this.bb[3], this.bb[2] + this.bb[1] - $e.layerY);
+	                            else//When we go below bottom line of rect
+	                                this.updateRectangles(null, this.bb[0], this.bb[1] + this.bb[2], this.bb[3], $e.layerY - this.bb[1] - this.bb[2]);
+	                        } else {
+	                            // pull up
+	                            this.updateRectangles(null, this.bb[0], $e.layerY, this.bb[3], this.bb[2] + this.bb[1] - $e.layerY);
+	                        }
+	                    } else if (this.dir == Direction.South) {
+	                        if ($e.layerY > this.bb[1]) {
+	                            //pull down
+	                            this.updateRectangles(null, this.bb[0], this.bb[1], this.bb[3], $e.layerY - this.bb[1]);
+	                        } else {
+	                            // pull up
+	                            this.updateRectangles(null, this.bb[0], $e.layerY, this.bb[3], this.bb[1] - $e.layerY);
+	                        }
+	                        //x,y,height,width
+	                    } else if (this.dir == Direction.West) {
+	                        if ($e.layerX > this.bb[0]) {//Move Right
+	                            if ($e.layerX <= this.bb[0] + this.bb[3])// When we are to the left of rightmost border
+	                                this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[3] - $e.layerX + this.bb[0], this.bb[2]);
+	                            else
+	                                this.updateRectangles(null, this.bb[0] + this.bb[3], this.bb[1], $e.layerX - this.bb[0] - this.bb[3], this.bb[2]);
+
+	                        } else {// Move Left
+	                            this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[3] + this.bb[0] - $e.layerX, this.bb[2]);
+	                        }
+	                    } else if (this.dir == Direction.East) {
+	                        if ($e.layerX > this.bb[0]) {//Move Left
+	                            this.updateRectangles(null, this.bb[0], this.bb[1], $e.layerX - this.bb[0], this.bb[2]);
+	                        } else {
+	                            this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[0] - $e.layerX, this.bb[2]);
+	                        }
+	                    }
+	                    else if (this.dir == Direction.NorthEast) ;
+	                    else if (this.dir == Direction.NorthWest) ;
+	                    else if (this.dir == Direction.SouthEast) {
+	                        //Done
+	                        if ($e.layerX > this.bb[0] && $e.layerY > this.bb[1]) {
+	                            //4
+	                            this.updateRectangles(null, this.bb[0], this.bb[1], $e.layerX - this.bb[0], $e.layerY - this.bb[1]);
+	                        } else if ($e.layerX > this.bb[0] && $e.layerY < this.bb[1]) {
+	                            //1
+	                            this.updateRectangles(null, this.bb[0], $e.layerY, $e.layerX - this.bb[0], this.bb[1] - $e.layerY);
+	                        } else if ($e.layerX < this.bb[0] && $e.layerY < this.bb[1]) {
+	                            //2
+	                            this.updateRectangles(null, $e.layerX, $e.layerY, this.bb[0] - $e.layerX, this.bb[1] - $e.layerY);
+	                        } else {
+	                            //3
+	                            this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[0] - $e.layerX, $e.layerY - this.bb[1]);
+	                        }
+	                    }
+	                    else if (this.dir == Direction.SouthWest) ;
+	                    else if (this.dir == Direction.Move) {
+	                        this.updateRectangles(null, this.bb[0] + $e.layerX - this.selection[0], this.bb[1] + $e.layerY - this.selection[1], this.bb[3], this.bb[2]);
+	                        this.bb[0] = this.bb[0] + $e.layerX - this.selection[0];
+	                        this.bb[1] = this.bb[1] + $e.layerY - this.selection[1];
+	                        this.selection = [$e.layerX, $e.layerY];
+	                    }
+	                    else {
+	                        let { __x, __y, __height, __width } = this.getRectCoordinates($e, this.selection);
+	                        this.updateRectangles(null, __x, __y, __width, __height);
+	                    }
+	                }
+	            });
+
+	        document.addEventListener(
+	            'mouseup', ($e) => {
+	                if (this.mouseDown) {
+	                    if (this.drag) {
+	                        console.log('Brush');
+	                        let bb = this.rectSvg._groups[0][0].getBoundingClientRect();
+	                        this.bb = [bb.x - 183, bb.y, bb.height, bb.width];
+	                        document.dispatchEvent(new CustomEvent('brush', {
+	                            'detail': { selection: [[bb.x - 183, bb.y], [bb.x - 183 + bb.width, bb.y + bb.height]] },
+	                        }));
+	                        // Brush Update here
+	                    } else {
+	                        console.log('Click');
+	                        this.updateRectangles('none');
+	                        this.bb = [];
+	                        this.removeRectangles();
+	                        // Click Update here
+	                        document.dispatchEvent(new CustomEvent('brush', {
+	                            'detail': { e: this.mouseDownEvent },
+	                        }));
+	                    }
+	                    this.selection = [];
+	                    this.dir = null;
+	                    this.mouseDown = false;
+	                }
+	            });
+	        return 1;
+	    }
+	    removeRectangles() {
+	        this.rectSvg = null;
+	        d3.selectAll('.handle--selection').remove();
+	        d3.selectAll('.handle--n').remove();
+	        d3.selectAll('.handle--w').remove();
+	        d3.selectAll('.handle--e').remove();
+	        d3.selectAll('.handle--s').remove();
+	        d3.selectAll('.handle--nw').remove();
+	        d3.selectAll('.handle--ne').remove();
+	        d3.selectAll('.handle--sw').remove();
+	        d3.selectAll('.handle--se').remove();
+	        d3.selectAll('.handle--overlay').remove();
+
+	    }
+	    appendRectangles(brushColor) {
+	        this.SVG
+	            .append('rect')
+	            .attr("class", "handle--overlay")
+	            .attr("x", "0")
+	            .attr("x", "0")
+	            .attr("height", this.SVG._groups[0][0].clientHeight)
+	            .attr("width", this.SVG._groups[0][0].clientWidth)
+	            .style('cursor', 'crosshair')
+	            .style("opacity", '0');
+	        this.rectSvg = this.SVG
+	            .append('rect')
+	            .attr("class", "handle--selection")
+	            .style("fill", brushColor)
+	            .style('cursor', 'move')
+	            .style("opacity", '0.3')
+	            .attr("display", "none");
+	        this.SVG
+	            .append('rect')
+	            .attr("class", "handle--n")
+	            .style('cursor', 'ns-resize')
+	            .attr("display", "none")
+	            .style("opacity", '0');
+	        this.SVG
+	            .append('rect')
+	            .attr("class", "handle--w")
+	            .style('cursor', 'ew-resize')
+	            .attr("display", "none")
+	            .style("opacity", '0');
+	        this.SVG
+	            .append('rect')
+	            .attr("class", "handle--e")
+	            .style('cursor', 'ew-resize')
+	            .attr("display", "none")
+	            .style("opacity", '0');
+	        this.SVG
+	            .append('rect')
+	            .attr("class", "handle--s")
+	            .style('cursor', 'ns-resize')
+	            .attr("display", "none")
+	            .style("opacity", '0');
+	        this.SVG
+	            .append('rect')
+	            .attr("class", "handle--nw")
+	            .style('cursor', 'nwse-resize')
+	            .attr("display", "none")
+	            .style("opacity", '0');
+	        this.SVG
+	            .append('rect')
+	            .attr("class", "handle--ne")
+	            .style('cursor', 'nesw-resize')
+	            .attr("display", "none")
+	            .style("opacity", '0');
+	        this.SVG
+	            .append('rect')
+	            .attr("class", "handle--sw")
+	            .style('cursor', 'nesw-resize')
+	            .attr("display", "none")
+	            .style("opacity", '0');
+	        this.SVG
+	            .append('rect')
+	            .attr("class", "handle--se")
+	            .style('cursor', 'nwse-resize')
+	            .attr("display", "none")
+	            .style("opacity", '0');
+	    }
+	    updateRectangles(display = null, __x = null, __y = null, __width = null, __height = null) {
+	        d3.selectAll('.handle--selection').attr("display", display).attr("x", __x)
+	            .attr("y", __y)
+	            .attr("height", __height)
+	            .attr("width", __width);
+	        d3.selectAll('.handle--n').attr("display", display).attr("x", __x ? __x - 3 : __x)
+	            .attr("y", __y ? __y - 3 : __y)
+	            .attr("height", __height == 0 || __height ? 6 : __height)
+	            .attr("width", __width == 0 || __width ? __width + 6 : __width);
+	        d3.selectAll('.handle--w').attr("display", display).attr("x", __x ? __x - 3 : __x)
+	            .attr("y", __y ? __y - 3 : __y)
+	            .attr("height", __height == 0 || __height ? __height + 6 : __height)
+	            .attr("width", __width == 0 || __width ? 6 : __width);
+	        d3.selectAll('.handle--e').attr("display", display).attr("x", __x ? __x + __width - 3 : __x)
+	            .attr("y", __y ? __y - 3 : __y)
+	            .attr("height", __height == 0 || __height ? __height + 6 : __height)
+	            .attr("width", __width == 0 || __width ? 6 : __width);
+	        d3.selectAll('.handle--s').attr("display", display).attr("x", __x ? __x - 3 : __x)
+	            .attr("y", __y ? __y + __height - 3 : __y)
+	            .attr("height", __height == 0 || __height ? 6 : __height)
+	            .attr("width", __width == 0 || __width ? __width + 6 : __width);
+	        d3.selectAll('.handle--nw').attr("display", display).attr("x", __x ? __x - 3 : __x)
+	            .attr("y", __y ? __y - 3 : __y)
+	            .attr("height", __height == 0 || __height ? 6 : __height)
+	            .attr("width", __width == 0 || __width ? 6 : __width);
+	        d3.selectAll('.handle--ne').attr("display", display).attr("x", __x ? __x + __width - 3 : __x)
+	            .attr("y", __y ? __y - 3 : __y)
+	            .attr("height", __height == 0 || __height ? 6 : __height)
+	            .attr("width", __width == 0 || __width ? 6 : __width);
+	        d3.selectAll('.handle--sw').attr("display", display).attr("x", __x ? __x - 3 : __x)
+	            .attr("y", __y ? __y + __height - 3 : __y)
+	            .attr("height", __height == 0 || __height ? 6 : __height)
+	            .attr("width", __width == 0 || __width ? 6 : __width);
+	        d3.selectAll('.handle--se').attr("display", display).attr("x", __x ? __x + __width - 3 : __x)
+	            .attr("y", __y ? __y + __height - 3 : __y)
+	            .attr("height", __height == 0 || __height ? 6 : __height)
+	            .attr("width", __width == 0 || __width ? 6 : __width);
+	    }
+	    getRectCoordinates($e, selection) {
+	        let __x, __y, __width, __height = null;
+	        if ($e.layerY - selection[1] < 0) {
+	            if ($e.layerX - selection[0] > 0) {
+	                // LB-RT x+y-
+	                __x = selection[0];
+	                __y = $e.layerY;
+	                __height = selection[1] - $e.layerY;
+	                __width = $e.layerX - selection[0];
+	            } else {
+	                // RB-LT x-y-
+	                __x = $e.layerX;
+	                __y = $e.layerY;
+	                __height = selection[1] - $e.layerY;
+	                __width = selection[0] - $e.layerX;
+
+	            }
+	        } else {
+	            if ($e.layerX - selection[0] > 0) {
+	                // LT-BR x+y+
+	                __x = selection[0];
+	                __y = selection[1];
+	                __height = $e.layerY - selection[1];
+	                __width = $e.layerX - selection[0];
+	            } else {
+	                // RT-LB x-y+
+	                __x = $e.layerX;
+	                __y = selection[1];
+	                __height = $e.layerY - selection[1];
+	                __width = selection[0] - $e.layerX;
+	            }
+	        }
+
+	        if (this.bounds) {
+	            // Bounded
+	            if ($e.layerY - selection[1] > 0) {
+	                if (__y + __height > this.bounds.top + this.bounds.height) {
+	                    __height = this.bounds.top + this.bounds.height - selection[1];
+	                }
+	            } else {
+	                if (this.bounds.top + __height > selection[1]) {
+	                    __y = this.bounds.top;
+	                    __height = selection[1] - $e.layerY - (this.bounds.top + __height - selection[1]);
+	                }
+	            }
+
+	            if ($e.layerX - selection[0] > 0) {
+	                if (__x + __width > this.bounds.left + this.bounds.width) {
+	                    __width = this.bounds.left + this.bounds.width - selection[0];
+	                }
+	            } else {
+	                if (this.bounds.left + __width > selection[0]) {
+	                    __x = this.bounds.left;
+	                    __width = selection[0] - $e.layerX - (this.bounds.left + __width - selection[0]);
+	                }
+	            }
+	        }
+	        return { __x, __y, __height, __width };
+	    }
+	}
+
 	class SVGInteractionHandler {
 
 	    constructor(svgRenderer) {
 	        this._renderer = svgRenderer;
 	        this._globalPredicates = {};
 	    }
+	    created = 0;
 
 	    processInteraction(i, scene) {
-	        let listener = i.listener;
-	        if (isMark(listener)) {
-	            let selector = listener.classId ? "." + listener.classId : "#" + listener.id;
-	            switch (i.eventType) {
-	                case "hover":
-	                    d3__namespace.selectAll(selector).on("mouseover", i.getCallbackFunction(scene, this));
-	                    d3__namespace.selectAll(selector).on("mouseleave", i.getRestoreFunction(scene, this));
-	                    break;
-	                case "click":
-	                    d3__namespace.selectAll(selector).on("mousedown", i.getCallbackFunction(scene, this));
-	                    break;
+	        if (!i.target || !i.targetEval || !i.targetEval['false']) return
+	        if (i.listener.type == ItemType.Scene) {
+	            const originalProperties = [];
+	            getPeers(i.target, scene).forEach(path => {
+	                const obj = {};
+	                Object.keys(i.targetEval['false']).forEach(prop => {
+	                    obj[prop] = (path[prop]);
+	                });
+	                originalProperties.push(obj);
+	            });
+	            // if (i.event == 'click') {
+	            //     this._processClick(i, scene, originalProperties);
+	            // }
+	            if (i.event == 'brush' || i.event == 'click') {
+	                if (this.created == 0) {
+	                    // new Brush(this._renderer._svgId, '#9c3131', null).brush()
+	                    this.created = new Brush(this._renderer._svgId, '#9c3131', i.hitObject._bounds).brush();
+	                    document.addEventListener('brush', (e) => {
+	                        this._processBrush1(i, scene, originalProperties, e.detail.selection ? { selection: e.detail.selection } : null);
+	                        if (e.detail.selection == undefined) {
+	                            this._processClick(i, scene, originalProperties, e.detail.e);
+	                        }
+	                    });
+	                }
+	            }
+	        }
+	    }
+
+
+
+	    _processBrush1(i, scene, originalProperties, e) {
+	        let brushPredicateEvaluators = {};
+	        if (i.event == 'brush') {
+	            if (i.predicate.length <= 0) return;
+	            i.predicate.forEach(ele => {
+	                if (ele.type == 'range') {
+	                    let rangeData = [];
+	                    if (i.hitObject.type == 'axis') {
+	                        i.hitObject._labels.children.forEach(_ => {
+	                            rangeData.push({
+	                                axisCoordinate: _[ele.channel], actualValue: _.text
+	                            });
+	                        });
+	                    } else if (i.hitObject.type == 'collection') {
+	                        i.hitObject.children.forEach(_ => {
+	                            rangeData.push({
+	                                axisCoordinate: _[ele.channel], actualValue: _.dataScope.getFieldValue(ele.field)
+	                            });
+	                        });
+	                    }
+	                    rangeData.sort((a, b) => a.axisCoordinate - b.axisCoordinate);
+	                    brushPredicateEvaluators[ele.channel] = {
+	                        _actualLabels: rangeData.map(e => e.actualValue),
+	                        _axisCoordinates: rangeData.map(e => e.axisCoordinate)
+	                    };
+	                    rangeData = null;
+	                } else {
+	                    // Brush should not have other predicates
+	                    // Confirm with Leo
+	                    throw new Error(`Event Type Brush should not have ${i.predicate.type} as Predicate Type`)
+	                }
+	            });
+	        }
+	        if (e && e.selection) {
+	            let _r = {
+	                'x': [e.selection[0][0], e.selection[1][0]],
+	                'y': [e.selection[0][1], e.selection[1][1]]
+	            };
+	            let _range = { 'x': null, 'y': null };
+
+	            Object.entries(brushPredicateEvaluators).forEach(entry => {
+	                const [key, value] = entry;
+	                let val1 = value._actualLabels[d3__namespace.bisect(value._axisCoordinates, _r[key][0])];
+	                let val2 = value._actualLabels[d3__namespace.bisect(value._axisCoordinates, _r[key][1]) - 1];
+	                _range[key] = {
+	                    _high: val1 >= val2 ? val1 : val2,
+	                    _low: val1 < val2 ? val1 : val2
+	                };
+	            });
+	            let _x = i.predicate.filter(e => _range['x'] && e.channel == 'x')[0];
+	            let _y = i.predicate.filter(e => _range['y'] && e.channel == 'y')[0];
+	            let _1, _2 = false;
+	            getPeers(i.target, scene).forEach((path, _i) => {
+	                if (_x) {
+	                    _1 = _range['x']['_high'] >= path.dataScope.getFieldValue(_x['field']) &&
+	                        _range['x']['_low'] <= path.dataScope.getFieldValue(_x['field']);
+	                }
+	                if (_y) {
+	                    _2 = _range['y']['_high'] >= path.dataScope.getFieldValue(_y['field']) &&
+	                        _range['y']['_low'] <= path.dataScope.getFieldValue(_y['field']);
+	                }
+	                if ((_x == undefined && _2) || (_y == undefined && _1) || (_1 && _2)) {
+	                    this.setTargetProperties(originalProperties[_i], path);
+	                } else {
+	                    this.setTargetProperties(i.targetEval['false'], path);
+	                }
+	            });
+	        } else {
+	            getPeers(i.target, scene).forEach((path, _i) => {
+	                this.setTargetProperties(originalProperties[_i], path);
+	            });
+	        }
+	        this._renderer.render(scene, { visualOnly: true });
+	    }
+
+	    _processClick(i, scene, originalProperties, $e) {
+	        i = scene._interactionsObj['click'];
+	        let multiSelectSet = new Set();
+	        if (i.predicate[0].type == 'point') {
+	            //continent done
+	            //country - can leverage multi select done
+	            if ($e.target.id.includes(i.target.type)) {
+	                const _ = getPeers(i.target, scene).filter(e => e.id == $e.target.id);
+	                if (_.length > 0) {
+	                    getPeers(i.target, scene).forEach((path, _i) => {
+	                        if (path.dataScope.getFieldValue(i.predicate[0].field) == _[0].dataScope.getFieldValue(i.predicate[0].field)) {
+	                            this.setTargetProperties(originalProperties[_i], path);
+	                        } else {
+	                            this.setTargetProperties(i.targetEval['false'], path);
+	                        }
+	                    });
+	                }
+	            } else if (i.hitObject.type == 'legend' && i.hitObject.encoding.datatable._fieldSummaries[i.predicate[0].field].unique.includes($e.target.innerHTML)) {
+	                getPeers(i.target, scene).forEach((path, _i) => {
+	                    if (path.dataScope.getFieldValue(i.predicate[0].field) == $e.target.innerHTML) {
+	                        this.setTargetProperties(originalProperties[_i], path);
+	                    } else {
+	                        this.setTargetProperties(i.targetEval['false'], path);
+	                    }
+	                });
+	            } else {
+	                getPeers(i.target, scene).forEach((path, _i) => {
+	                    this.setTargetProperties(originalProperties[_i], path);
+	                });
 	            }
-	        } else if (listener.type == ItemType.Scene) {
-	            if (!i.targetDef || !i.targetDef.item) return;
-	            if (!i.selectionDef.item) {
-	                d3__namespace.select("#"+this._renderer._svgId).on("mousedown", i.getRestoreFunction(scene, this, true));
+	        } else if (i.predicate[0].type == 'list') {
+	            // countries done
+	            // continents
+	            if (i.predicate[0].multiByField) {
+	                // select Multiple fields  by continents for instance
+	                if ($e.target.id.includes(i.target.type)) {
+	                    const _ = getPeers(i.target, scene).filter(e => e.id == $e.target.id);
+	                    if (_.length > 0) {
+	                        multiSelectSet.add(_[0].dataScope.getFieldValue(i.predicate[0].field));
+	                        getPeers(i.target, scene).forEach((path, _i) => {
+	                            if (multiSelectSet.has(path.dataScope.getFieldValue(i.predicate[0].field))) {
+	                                this.setTargetProperties(originalProperties[_i], path);
+	                            } else {
+	                                this.setTargetProperties(i.targetEval['false'], path);
+	                            }
+	                        });
+	                    }
+	                } else {
+	                    multiSelectSet.clear();
+	                    getPeers(i.target, scene).forEach((path, _i) => {
+	                        this.setTargetProperties(originalProperties[_i], path);
+	                    });
+	                }
+	            } else {
+	                if ($e.target.id.includes(i.target.type)) {
+	                    if (multiSelectSet.has($e.target.id)) {
+	                        multiSelectSet.delete($e.target.id); // deselect
+	                    } else {
+	                        multiSelectSet.add($e.target.id);
+	                    }
+	                    getPeers(i.target, scene).forEach((path, _i) => {
+	                        if (multiSelectSet.has(path.id)) {
+	                            this.setTargetProperties(originalProperties[_i], path);
+	                        } else {
+	                            this.setTargetProperties(i.targetEval['false'], path);
+	                        }
+	                    });
+	                } else {
+	                    multiSelectSet.clear();
+	                    getPeers(i.target, scene).forEach((path, _i) => {
+	                        this.setTargetProperties(originalProperties[_i], path);
+	                    });
+	                }
 	            }
 	        }
+	        this._renderer.render(scene, { visualOnly: true });
+	    }
+
+	    evaluatePredicate(i, path, _range) {
+	        if (i.predicate.type == 'range') {
+	            return path.dataScope.getFieldValue(i.predicate.field) <= _[0] && path.dataScope.getFieldValue(i.predicate.field) >= _[1]
+	        }
+	    }
+
+	    setTargetProperties(obj, path) {
+	        Object.keys(obj).forEach(prop => {
+	            try {
+	                path[prop] = obj[prop];
+	            } catch (error) {
+	                console.log('Property not found');
+	            }
+	        });
 	    }
 
 	    _getSelection(e, selDef, listener, item) {
@@ -10531,7 +10999,7 @@
 
 	        let field = selDef.field ? selDef.field : atlas_rowId;
 	        if (selection.item) {
-	            selection.predicate = {"field": field, "value": selection.item.dataScope.getFieldValue(field)};
+	            selection.predicate = { "field": field, "value": selection.item.dataScope.getFieldValue(field) };
 	        }
 	        return selection;
 	    }
@@ -10553,7 +11021,7 @@
 		constructor(svgId) {
 			this._svgId = svgId;
 			this._compMap = {};
-			this._decoMap = {};
+			this._decoMap = {}; 
 			this._interactionHandler = new SVGInteractionHandler(this);
 		}
 
@@ -24026,7 +24494,7 @@
 			let parentMark = node2mark[node[nodeId]];
 	        let x, y;
 	        switch (this._direction) {
-	            case Direction.Down:
+	            case Direction$1.Down:
 	            default:
 	                x = parentMark.left;
 	                y = parentMark.bottom;
@@ -24333,18 +24801,24 @@
 
 	function canRepeat(compnt) {
 		if (Array.isArray(compnt)) {
-			for (let c of compnt) {
-				if (!isMark(c) || c.dataScope)
-					return false;
+			if (compnt.length === 1) {
+				return itemIsRepeatable(compnt[0]);
+			} else {
+				for (let c of compnt) {
+					if (!isMark(c) || c.dataScope)
+						return false;
+				}
 			}
 			return true;
-		} else if ((isMark(compnt) || compnt.type == ItemType.Glyph) && !compnt.dataScope) {
-			return true;
-		} else if (compnt.type == ItemType.Collection) {
-			//TODO: check if repeatable
-			return true;
+		} else {
+			return itemIsRepeatable(compnt);
 		}
-		return false;
+		// else if ((isMark(compnt) || compnt.type == ItemType.Glyph) && !compnt.dataScope) {
+		// 	return true;
+		// } else if (compnt.type == ItemType.Collection) {
+		// 	return itemIsRepeatable(compnt);
+		// }
+		//return false;
 	}
 
 	function canDivide(compnt) {