mascot-vis 2.0.0 → 3.0.0

package/src-old/renderer/SVGInteractionHandler.js

@@ -0,0 +1,241 @@
+import * as d3 from 'd3';
+import { atlas_rowId, ItemType } from '../util/Constants';
+import { getPeers } from "../util/ItemUtil";
+import Brush from '../interaction/brush';
+
+export default class SVGInteractionHandler {
+
+    constructor(svgRenderer) {
+        this._renderer = svgRenderer;
+        this._globalPredicates = {};
+    }
+    created = 0;
+
+    processInteraction(i, scene) {
+        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.bisect(value._axisCoordinates, _r[key][0])]
+                let val2 = value._actualLabels[d3.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 (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) {
+        let selection = {};
+        if (item) {
+            selection.item = item;
+        } else if (selDef.item) {
+            //TODO
+        }
+
+        let field = selDef.field ? selDef.field : atlas_rowId;
+        if (selection.item) {
+            selection.predicate = { "field": field, "value": selection.item.dataScope.getFieldValue(field) };
+        } else {
+            //from axis
+        }
+        return selection;
+    }
+
+    addGlobalPredicate(scene, p) {
+        if (!(scene.id in this._globalPredicates)) {
+            this._globalPredicates[scene.id] = {};
+        }
+        this._globalPredicates[scene.id][p.field] = p;
+    }
+
+    getGlobalPredicates(scene) {
+        return (scene.id in this._globalPredicates) ? Object.values(this._globalPredicates[scene.id]) : [];
+    }
+}

package/src-old/renderer/SVGRenderer.js

@@ -0,0 +1,325 @@
+import {ItemType, Style2SVG} from "../util/Constants";
+import * as d3 from 'd3';
+import SVGInteractionHandler from "./SVGInteractionHandler";
+
+export default class SVGRenderer {
+
+	constructor(svgId) {
+		this._svgId = svgId;
+		this._compMap = {};
+		this._decoMap = {}; 
+		this._interactionHandler = new SVGInteractionHandler(this);
+	}
+
+	/**
+	 * 
+	 * @param {*} scene 
+	 * @param {*} supported keys for params: 
+	 * flatten (do not organize elements in scene graph hierarchy)
+	 * collectionBounds (draw collection borders)  
+	 */
+	render(scene, params) {
+		let args = params ? params : {};
+		for (let k in this._decoMap) {
+			this._decoMap[k].remove();
+			delete this._decoMap[k];
+		}
+		this._removed = {};
+		for (let k in this._compMap) {
+			this._removed[k] = 1;
+		}
+		this._renderItem(scene, args);
+		for (let k in this._removed) {
+			this._compMap[k].remove();
+			delete this._compMap[k];
+		}
+		if (!("visualOnly" in args)) {
+			for (let i of scene._interactions)
+				this._interactionHandler.processInteraction(i, scene);
+		}
+	}
+
+	clear() {
+		let svg = document.getElementById(this._svgId);
+        while (svg.firstChild) {
+			svg.firstChild.remove();
+		}
+		this._compMap = {};
+		this._decoMap = {};
+	}
+
+	_renderItem(c, args) {
+		let cid = c.id,
+			parent = c.parent;
+		
+		let svgParent;
+		if (parent && parent.id && parent.id in this._compMap && !args.flatten) {
+			svgParent = d3.select("#"+this._svgId).select("#"+parent.id);
+		} else {
+			svgParent = d3.select("#"+this._svgId);
+		}
+
+		if (!(cid in this._compMap)) {
+			//TODO: what if the parent is not rendered? What if the hierarchy has changed?
+			this._compMap[cid] = svgParent.append(this._getSVGElementType(c));
+		} else {
+			delete this._removed[cid];
+		}
+
+		if (c.type == ItemType.Gridlines) {
+			this._compMap[cid].lower();
+		}
+
+		let el = this._compMap[cid];
+
+		el.attr("id", cid);
+		if (c.classId)
+			el.attr("class", c.classId);
+
+		if (c.type == ItemType.Scene) {
+			d3.select("#"+this._svgId).style("background", c.fillColor ? c.fillColor : "#fff");
+		}
+
+		// if (c.type == "vertex") {
+		// 	//TODO: render vertices
+		// 	return;
+		// }
+
+		let pathTypes = [ItemType.Path, ItemType.Polygon, ItemType.Link, ItemType.Pie, ItemType.Line, ItemType.Area, ItemType.Ring, ItemType.Arc]; 
+		if (pathTypes.indexOf(c.type) >= 0) {
+			el.attr("d", c.getSVGPathData());
+			if (!c.closed)
+				el.style("fill", "none");
+			if (cid.indexOf("axis") == 0) {
+				el.style("shape-rendering", "crispEdges");
+			}
+		// } else if (c.type == ItemType.Line) {
+		// 	el.attr("x1", c.vertices[0].x);
+		// 	el.attr("y1", c.vertices[0].y);
+		// 	el.attr("x2", c.vertices[1].x);
+		// 	el.attr("y2", c.vertices[1].y);
+		// 	if (cid.indexOf("axis") == 0) {
+		// 		el.style("shape-rendering", "crispEdges");
+		// 	}
+		} else if (c.type == ItemType.Circle) {
+			el.attr("cx", c.x);
+			el.attr("cy", c.y);
+			el.attr("r", c.radius);
+		} else if (c.type == ItemType.Rect) {
+			//do not use c.left, c.top, c.width, c.height as the rectangle may be flipped
+			//use c.bounds
+			let b = c.bounds;
+			el.attr("x", b.left).attr("y", b.top).attr("width", b.width).attr("height", b.height);
+		} else if (c.type == ItemType.PointText) {
+			el.attr("text-anchor", this._getTextAnchor(c.anchor[0]))
+				.attr("alignment-baseline", this._getTextAnchor(c.anchor[1]))
+				.attr("dominant-baseline", this._getTextAnchor(c.anchor[1]))
+				.text(c.text)
+				.attr("x", c.x).attr("y", c.y);
+		} else if (c.type == ItemType.Image) {
+			el.attr("href", c.src).attr("x", c.x).attr("y", c.y).attr("width", c.width).attr("height", c.height);
+		}
+
+		// for (let a in c.attrs) {
+		// 	el.attr(Attr2SVG[a], c.attrs[a]);
+		// }
+
+		for (let s in c.styles) {
+			if (c.styles[s] === undefined)
+				continue;
+			if (s.indexOf("Color") > 0 && c.styles[s].type == ItemType.LinearGradient) {
+				if (d3.select("#"+this._svgId).select("defs").empty())
+					d3.select("#"+this._svgId).append("defs");
+				let defs = d3.select("defs"), gradient = c.styles[s];
+				if (defs.select("#" + gradient.id).empty()) {
+					let grad = defs.append("linearGradient").attr("id", gradient.id);
+					grad.attr("x1", gradient.x1+"%").attr("x2", gradient.x2+"%").attr("y1", gradient.y1+"%").attr("y2", gradient.y2+"%");
+					for (let stop of gradient.stops)
+						grad.append("stop").attr("offset", stop.offset+"%").style("stop-color", stop.color).style("stop-opacity", stop.opacity);
+				}
+				el.style(Style2SVG[s], "url(#" + gradient.id + ")");
+			} else {
+				el.style(Style2SVG[s], c.styles[s]);
+			}
+				
+		}
+
+		if (c._rotate)
+			el.attr("transform", "rotate(" + c._rotate.join(" ") + ")");
+
+		// render vertices if shape is defined
+		if (c.vertices) {
+			// let shapes = c.vertices.map(d => d.shape).filter(d => d !== undefined);
+			// if (shapes.length > 0) 
+			this._renderVertices(c, args);
+		}
+
+		// render scene bound
+		if (c.type == ItemType.Collection && args && args["collectionBounds"]) {
+			let b = c.bounds;
+			if (c.layout && c.layout.type == "grid") {
+				this._renderLayout(c);
+			} else {
+				if (!(c.id in this._decoMap)) {
+					this._decoMap[c.id] = d3.select("#"+this._svgId).append("rect").attr("class", "deco");
+				}
+				this._decoMap[c.id].attr("x", b.left).attr("y", b.top)
+					.attr("width", b.width).attr("height", b.height).attr("fill", "none")
+					.attr("stroke", "#1ecb40").attr("stroke-width", "2px")
+					.attr("stroke-dasharray", "5,5");
+			}
+		}
+
+		//render text/axis bound
+		// if (c.type == ItemType.PointText || c.type == ItemType.Axis) {
+		// 	let id = c.id + "-box";
+		// 	let b = c.bounds;
+		// 	if (!(id in this._decoMap)) {
+		// 		this._decoMap[id] = d3.select("#"+this._svgId).append("rect");
+		// 	}
+		// 	this._decoMap[id].attr("x", b.left).attr("y", b.top)
+		// 		.attr("width", b.width).attr("height", b.height).attr("fill", "none")
+		// 		.attr("stroke", "#1ecb40").attr("stroke-width", "1px")
+		// 		.attr("stroke-dasharray", "5,5");
+		// }
+
+		if (c.children) {
+			for (let child of c.children) {
+				this._renderItem(child, args);
+			}
+		}
+
+	}
+
+	_renderVertices(c, args) {
+		let id = c.id+"-vertices";
+		if (!(id in this._compMap) && !args.flatten) {
+			let parent = c.parent,
+				pid = parent ? parent.id : this._svgId;
+			this._compMap[id] = d3.select("#"+pid).append("g").attr("id", id);
+		} else {
+			delete this._removed[id];
+		}
+
+		if (!args.flatten) {
+			let shapes = c.vertices.map(d => d.shape).filter(d => d !== undefined);
+			if (shapes.length === 0) {
+				this._compMap[id].style("visible", "hidden");
+				return;
+			} else {
+				this._compMap[id].style("visible", "visible");
+			}
+		}
+
+		let vertices = c.vertices.filter(d => d.shape !== undefined),
+			svgParent = args.flatten ? d3.select("#"+this._svgId) : d3.select("#"+id);
+		for (let v of vertices) {
+			let vid = id+"-"+v.id;
+			if (!(vid in this._compMap)) {
+				this._compMap[vid] = svgParent.append(v.shape).attr("id", vid);
+			} else if (v.shape !== this._compMap[vid].node().tagName) {
+				this._compMap[vid].remove();
+				this._compMap[vid] = svgParent.append(v.shape).attr("id", vid);
+				delete this._removed[vid];
+			} else {
+				delete this._removed[vid];
+			}
+			if (v.shape == "rect") {
+				d3.select("#"+vid).attr("x", v.x - v.width/2).attr("y", v.y - v.height/2)
+					.attr("width", v.width).attr("height", v.height);
+			} else if (v.shape == "circle") {
+				d3.select("#"+vid).attr("cx", v.x).attr("cy", v.y).attr("r", v.radius);
+			}
+			d3.select("#"+vid).style("fill", v.fillColor).style("opacity", v.opacity)
+				.style("stroke-width", v.strokeWidth).style("stroke", v.strokeColor);
+		}
+	}
+
+	_renderLayout(c) {
+		let gridId = c.id+"-grid";
+		if (!(gridId in this._decoMap)) {
+			this._decoMap[gridId] = d3.select("#"+this._svgId).append("g")
+				.attr("id", gridId).attr("class", "deco");
+		}
+		let cellBounds = c.layout.cellBounds, rowGap = c.layout.rowGap;
+		this._decoMap[gridId].selectAll("rect").remove();
+		this._decoMap[gridId].selectAll("rect").data(cellBounds.slice(0, cellBounds.length -1))
+			.enter().append("rect").attr("x", d => d.left).attr("y", d => d.bottom)
+				.attr("width", d => d.width).attr("height", rowGap)
+				.style("fill", "pink").style("opacity", 0.5)
+				;
+		for (let cb of cellBounds) {
+			this._decoMap[gridId].append("rect").attr("x", cb.left).attr("y", cb.top)
+			.attr("width", cb.width).attr("height", cb.height)
+			.attr("stroke", "blue").attr("stroke-width", "1px")
+			.attr("stroke-dasharray", "5,5").attr("fill", "none");
+		}
+		// let left = Math.min(...cellBounds.map(d => d.left)),
+		// 	top = Math.min(...cellBounds.map(d => d.top))
+		// this._decoMap[gridId].append("rect").attr("x", left).attr("y", top)
+		// 	.attr("width", c.bounds.width).attr("height", c.bounds.height)
+		// 	.attr("stroke", "blue").attr("stroke-width", "1px")
+		// 	.attr("stroke-dasharray", "5,5").attr("fill", "none");
+
+	}
+
+	_getTextAnchor(anchor) {
+		switch(anchor) {
+            case "top":
+                return "text-before-edge";
+				//return "hanging";
+            case "bottom":
+				//return "text-after-edge";
+				return "auto";
+			case "left":
+				return "start";
+			case "right":
+				return "end";
+			case "center":
+				return "middle";
+			case "middle":
+				return "middle";
+			default:
+				return anchor;
+        }
+	}
+
+	_getSVGElementType(cpnt) {
+		switch (cpnt.type) {
+			case ItemType.Rect:
+				return "rect";
+			case ItemType.Collection:
+			case ItemType.Group:
+			case ItemType.Glyph:
+			case ItemType.Scene:
+			case ItemType.Axis:
+			case ItemType.Legend:
+			case ItemType.Gridlines:
+				return "g";
+			case ItemType.Area:
+			case ItemType.Path:
+			case ItemType.Polygon:
+			case ItemType.Ring:
+			case ItemType.Pie:
+			case ItemType.Arc:
+			case ItemType.Link:
+			case ItemType.Line:
+				return "path";
+			case ItemType.Circle:
+				return "circle";
+				//return "line";
+			case ItemType.PointText:
+				return "text";
+			case "vertex":
+				if (cpnt.shape == "circle")
+					return "circle";
+				else if (cpnt.shape == "rect")
+					return "rect";
+				else throw "argument exception";
+			case "image":
+				return "image";
+			default:
+				break;
+		}
+	}
+}