mascot-vis 2.1.0 → 3.0.0

package/src-old/layout/Stack.js

@@ -0,0 +1,264 @@
+import {Orientation, Alignment, LayoutType, Errors, ItemType, Direction} from "../util/Constants";
+import { normalizeAngle } from "../util/DataUtil";
+import { getLeafMarks } from "../util/ItemUtil";
+import Layout from "./Layout";
+
+export default class StackLayout extends Layout {
+
+	constructor(args) {
+		super();
+		this.type = LayoutType.Stack;
+		this._orientation = args.orientation;
+		this._direction = args.direction;
+		this._left = args.left;
+		this._top = args.top;
+		this._horzCellAlignment = "horzCellAlignment" in args && args["horzCellAlignment"] ? args.horzCellAlignment : Alignment.Left;
+		this._vertCellAlignment = "vertCellAlignment" in args && args["vertCellAlignment"]  ? args.vertCellAlignment : Alignment.Bottom;
+		this._gap = "gap" in args ? args.gap : 0;
+	}
+
+	// toJSON() {
+	// 	let json = {args: {}};
+	// 	json.type = this.type;
+	// 	json.args.orientation = this._orientation;
+	// 	json.args.direction = this._direction;
+	// 	json.args.left = this._left;
+	// 	json.args.top = this._top;
+	// 	json.args.gap = this._gap;
+	// 	json.args.horzCellAlignment = this._horzCellAlignment;
+	// 	json.args.vertCellAlignment = this._vertCellAlignment;
+	// 	return json;
+	// }
+
+	clone() {
+		let s = new StackLayout({orientation: this._orientation, direction: this._direction, left: this._left, top: this._top});
+		s._horzCellAlignment = this._horzCellAlignment;
+		s._vertCellAlignment = this._vertCellAlignment;
+		return s;
+	}
+
+	_stackAreasVert() {
+		let areas = this.group.children, gb = this.group.bounds, 
+			start = this._vertCellAlignment === Alignment.Top ? gb.top : gb.bottom,
+			dir = this._vertCellAlignment === Alignment.Top ? 1 : -1;
+		let vCnt = areas[0].vertices.length/2,
+			cumuHts = new Array(vCnt).fill(0);
+		for (let area of areas) {
+			for (let i = 0; i < vCnt; i++) {
+				let v1 = area.vertices[i],
+					v2 = area.vertices[vCnt*2 - i - 1],
+					ht = Math.abs(v1.y - v2.y);
+				let y1 = start + cumuHts[i] * dir, y2 = start + (cumuHts[i] + ht) * dir;
+				v1._doTranslate(0, y1 - v1.y);
+				v2._doTranslate(0, y2 - v2.y);
+				cumuHts[i] += ht;
+			}
+			area._updateBounds();
+		}
+		if (this.vertCellAlignment === Alignment.Middle) {
+			for (let area of areas) {
+				for (let i = 0; i < vCnt; i++) {
+					let v1 = area.vertices[i],
+						v2 = area.vertices[vCnt*2 - i - 1];
+					let b = gb.middle + cumuHts[i]/2;
+					v1._doTranslate(0, b - gb.bottom);
+					v2._doTranslate(0, b - gb.bottom);
+				}
+				area._updateBounds();
+			}
+		}
+		this.group._updateBounds();
+	}
+
+	_stackAreasHorz() {
+		let areas = this.group.children, gb = this.group.bounds, 
+			start = this._horzCellAlignment === Alignment.Right ? gb.right : gb.left,
+			dir = this._horzCellAlignment === Alignment.Right ? -1 : 1;
+		let vCnt = areas[0].vertices.length/2,
+			cumuWds = new Array(vCnt).fill(0);
+		for (let area of areas) {
+			for (let i = 0; i < vCnt; i++) {
+				let v1 = area.vertices[i],
+					v2 = area.vertices[vCnt*2 - i - 1],
+					wd = Math.abs(v1.x - v2.x);
+				let y1 = start + cumuWds[i] * dir, y2 = start + (cumuWds[i] + wd) * dir;
+				v1._doTranslate(0, y1 - v1.y);
+				v2._doTranslate(0, y2 - v2.y);
+				cumuWds[i] += wd;
+			}
+			area._updateBounds();
+		}
+		if (this._horzCellAlignment === Alignment.Center) {
+			for (let area of areas) {
+				for (let i = 0; i < vCnt; i++) {
+					let v1 = area.vertices[i],
+						v2 = area.vertices[vCnt*2 - i - 1];
+					let l = gb.center - cumuWds[i]/2;
+					v1._doTranslate(0, l - gb.left);
+					v2._doTranslate(0, l - gb.left);
+				}
+				area._updateBounds();
+			}
+		}
+		this.group._updateBounds();		
+	}
+
+	_stackAreas() {
+		let area = this.group.children[0];
+		if (area.orientation === Orientation.Horizontal) {
+			this._stackAreasVert();
+		} else {
+			this._stackAreasHorz();
+		}
+	}
+
+	_stackArcs() {
+		let group = this.group;
+		if (this._orientation === Orientation.Angular) {
+			let startAngle = this.startAngle ? this.startAngle : 90,
+				dir = this._direction ? this._direction : Direction.Clockwise;
+			if (dir === Direction.Clockwise) {
+				for (let c of group.children) {
+					let temp = normalizeAngle(startAngle - c.angle);
+					c.adjustAngle(temp, startAngle);
+					startAngle = temp;
+				}
+			} else {
+				for (let c of group.children) {
+					let temp = normalizeAngle(startAngle + c.angle);
+					c.adjustAngle(startAngle, temp);
+					startAngle = temp;
+				}
+			}	
+		}
+	}
+
+	_stackRects() {
+		let scene = this.group.getScene();
+		let group = this.group, o = this._orientation;
+		let bounds = group.children.map(d => d.bounds);
+		let lefts = bounds.map(d => d.left),
+			tops = bounds.map(d => d.top),
+			wds = bounds.map(d => d.width),
+			hts = bounds.map(d => d.height);
+		let left = this._left == undefined ? Math.min(...lefts) : this._left,
+			top = this._top == undefined ? Math.min(...tops) : this._top;
+
+		let maxWd = Math.max(...wds), maxHt = Math.max(...hts);
+		if (o == Orientation.Vertical) {
+			let centerX = left + maxWd/2;
+			for (let i = 0; i < group.children.length; i++) {
+				let c = group.children[i]; 
+				let dx = centerX - c.bounds.x,
+					dy = top + c.bounds.height/2 - c.bounds.y;
+				top += c.bounds.height + this._gap;
+				c._doTranslate(dx, dy);
+				//alignment
+				let cdx = 0, cdy = 0;
+				let xEnc = scene.getEncodingByItem(c, "x");
+				if (!xEnc) {
+					switch (this._horzCellAlignment) {
+						case Alignment.Left:
+							cdx = left - c.bounds.left;
+							break;
+						case Alignment.Center:
+							cdx = left + maxWd/2 - c.bounds.x;
+							break;
+						case Alignment.Right:
+							cdx = left + maxWd - c.bounds.right;
+							break;
+					}
+				}
+				c._doTranslate(cdx, cdy);
+			}
+		} else {
+			let centerY = top + maxHt/2;
+			for (let i = 0; i < group.children.length; i++) {
+				let c = group.children[i]; 
+				let dx = left + c.bounds.width/2 - c.bounds.x,
+					dy = centerY - c.bounds.y;
+				left += c.bounds.width + this._gap;
+				c._doTranslate(dx, dy);
+
+				//TODO: alignment
+				let cdx = 0, cdy = 0;
+				let yEnc = scene.getEncodingByItem(c, "y");
+				if (!yEnc) {
+					switch (this._vertCellAlignment) {
+						case Alignment.Top:
+							cdy = top - c.bounds.top;
+							break;
+						case Alignment.Middle:
+							cdy = top + maxHt/2 - c.bounds.y;
+							break;
+						case Alignment.Bottom:
+							cdy = top + maxHt - c.bounds.bottom;
+							break;
+					}
+				}
+				c._doTranslate(cdx, cdy);
+			}
+		}
+		this.group._updateBounds();	
+	}
+
+	run() {
+		if (this.group == undefined || !this.group.children || this.group.children.length === 0)
+			return;
+		let leafMark = getLeafMarks(this.group)[0];
+		switch (leafMark.type) {
+			case ItemType.Area:
+				this._stackAreas();
+				break;
+			case ItemType.Arc:
+			case ItemType.Pie:
+				if (leafMark.parent === this.group)
+					this._stackArcs();
+				break;
+			case ItemType.Rect:
+			case ItemType.Image:
+			case ItemType.Circle:
+				this._stackRects();
+				break;
+			default:
+				break;
+		}
+	}
+
+	set vertCellAlignment(v) {
+		if (v != Alignment.Top && v != Alignment.Bottom && v != Alignment.Middle) {
+			throw Errors.UNKOWN_ALIGNMENT;
+		}
+		this._vertCellAlignment = v;
+		this.run();
+	}
+
+	get vertCellAlignment() {
+		return this._vertCellAlignment;
+	}
+
+	set horzCellAlignment(h) {
+		if (h != Alignment.Left && h != Alignment.Center && h != Alignment.Right) {
+			throw Errors.UNKOWN_ALIGNMENT;
+		}
+		this._horzCellAlignment = h;
+		this.run();
+	}
+
+	get horzCellAlignment() {
+		return this._horzCellAlignment;
+	}
+
+	get cellBounds() {
+		return this.group.children.map(d => d.bounds);
+	}
+
+	get orientation() {
+		return this._orientation;
+	}
+
+	set orientation(o) {
+		this._orientation = o;
+		this.run();
+	}
+}

package/src-old/layout/Strata.js

@@ -0,0 +1,88 @@
+import { Direction, ItemType, LayoutType, nodeId } from "../util/Constants";
+import { normalizeAngle } from "../util/DataUtil";
+import Layout from "./Layout";
+
+export default class StrataLayout extends Layout {
+
+    constructor(args) {
+		super();
+		this.type = LayoutType.Strata;
+		this._direction = args.direction;
+		this._rootMark = args.rootMark;
+		this._gap = "gap" in args ? args.gap : 0;
+	}
+
+    toJSON() {
+		let json = {args: {}};
+		json.type = this.type;
+		json.args.direction = this._direction;
+		json.args.rootMark = this._rootMark.id;
+		json.args.gap = this._gap;
+		return json;
+	}
+
+    clone() {
+
+    }
+
+    run() {
+        if (this.group == undefined || !this.group.children || this.group.children.length === 0)
+			return;
+        
+        let tree = this.group.firstChild.dataScope.dataTable.tree;
+        if (!tree) return;
+
+        let nodeId2mark = {};
+		for (let item of this.group.children) {
+			nodeId2mark[item.dataScope.getFieldValue(nodeId)] = item;
+		}
+
+        if (this._rootMark.type === ItemType.Rect) {
+            this._layoutRects(tree.getRoot(), tree, nodeId2mark);
+        } else if (this._rootMark.type === ItemType.Circle) {
+            this._layoutArcs(tree.getRoot(), tree, nodeId2mark);
+        }
+    }
+
+    _layoutArcs(node, tree, node2mark) {
+		let childrenNodes = tree.getChildren(node);
+		if (childrenNodes.length === 0) return;
+		let parentMark = node2mark[node[nodeId]];
+		let startAngle = parentMark.type == ItemType.Arc || parentMark.type == ItemType.Pie ? parentMark.startAngle : 90;
+		for (let i = 0; i < childrenNodes.length; i++) {
+			let cn = childrenNodes[i],
+				mark = node2mark[cn[nodeId]];
+			if (mark.type === ItemType.Arc) {
+                let temp = normalizeAngle(startAngle + mark.angle);
+                // console.log(mark.dataScope.getFieldValue("event_attribute"), mark.startAngle, mark.endAngle, mark.angle);
+				
+				mark.adjustAngle(startAngle, temp);
+				startAngle = temp; 
+			}
+			this._layoutArcs(cn, tree, node2mark);
+		}
+        //console.log("-------------");
+	}
+
+    _layoutRects(node, tree, node2mark) {
+        let childrenNodes = tree.getChildren(node);
+		if (childrenNodes.length === 0) return;
+		let parentMark = node2mark[node[nodeId]];
+        let x, y;
+        switch (this._direction) {
+            case Direction.Down:
+            default:
+                x = parentMark.left;
+                y = parentMark.bottom;
+                break;
+        }
+		for (let i = 0; i < childrenNodes.length; i++) {
+			let cn = childrenNodes[i],
+				mark = node2mark[cn[nodeId]];
+			
+            mark._doTranslate(x - mark.left , y - mark.top);
+            x += mark.width; 
+            this._layoutRects(cn, tree, node2mark);
+		}
+    }
+}

package/src-old/layout/Sugiyama.js

@@ -0,0 +1,59 @@
+// import { dagStratify, decrossOpt, sugiyama } from "d3-dag";
+import { LayoutType, nodeId } from "../util/Constants";
+import Layout from "./Layout";
+import * as dagre from "dagre";
+
+export default class SugiyamaLayout extends Layout {
+
+    constructor(args) {
+        super();
+        this.type = LayoutType.Sugiyama;
+        this._width = "width" in args ? args["width"] : 500;
+        this._height = "height" in args ? args["height"] : 300;
+        this._top = "top" in args ? args["top"] : 0;
+        this._left = "left" in args ? args["left"] : 0;
+        this._edgeSep = "edgeSep" in args? args["edgeSep"] : 50;
+    }
+
+    toJSON() {
+        let json = {args: {}};
+		json.type = this.type;
+		return json;
+    }
+
+    run() {
+        let graph = this.group.children[0].dataScope._dt.graph;
+        if (!graph) return;
+        
+        var g = new dagre.graphlib.Graph();
+        g.setGraph({edgesep: this._edgeSep});
+        g.setDefaultEdgeLabel(function() { return {}; });
+
+        //in case the node ids in the input graph file are integers
+        let nodeIdHash = new Map();
+        for (let n of this.group.children) {
+            let id = n.dataScope.getFieldValue(nodeId);
+            nodeIdHash.set(id, id + "");
+            g.setNode(id, {label: n.text ? n.text : "", width: n.bounds.width, height: n.bounds.height});
+        }
+        for (let l of graph.links) {
+            g.setEdge(l.source, l.target);
+        }
+        dagre.layout(g);
+
+        const nid2pos = {};
+        let t = Math.min(...g.nodes().map(d => g.node(d).y)), l = Math.min(...g.nodes().map(d => g.node(d).x));
+        let dx = this._left - l, dy = this._top - t;
+        for (const id of g.nodes()) {
+            nid2pos[id] = {x: g.node(id).x + dx, y: g.node(id).y + dy};
+        }
+
+        for (let node of this.group.children) {
+            let nid = node.dataScope.getFieldValue(nodeId);
+            node.x = nid2pos[nodeIdHash.get(nid)].x;
+            node.y = nid2pos[nodeIdHash.get(nid)].y;
+        }
+        this.group._updateBounds();
+        this.group.getScene()._updateAncestorBounds(this.group);
+    }
+}

package/src-old/layout/TidyTree.js

@@ -0,0 +1,105 @@
+import Layout from "./Layout";
+import * as d3 from "d3";
+import { Errors, LayoutType, nodeId, Orientation } from "../util/Constants";
+
+export default class TidyTreeLayout extends Layout {
+
+    constructor(args) {
+        super();
+        this.type = LayoutType.TidyTree;
+        this._width = "width" in args ? args.width : 500;
+        this._height = "height" in args ? args.height : 500;
+        this._left = "left" in args ? args.left : 100;
+        this._top = "top" in args ? args.top : 100;
+        this._orientation = "orientation" in args ? args.orientation : Orientation.Horizontal;
+    }
+    
+    toJSON() {
+        let json = {args: {}};
+		json.args.type = this.type;
+		json.args.orientation = this._orientation;
+		json.args.left = this._left;
+		json.args.top = this._top;
+		json.args.width = this._width;
+		json.args.height = this._height;
+		return json;
+    }
+
+    run() {
+        if (this.group == undefined)
+			return;
+        let dt = this.group.children[0].dataScope._dt;
+        if (dt.tree) {
+            let hierarchy = d3.hierarchy(dt.tree._data);
+            let wd = Math.max(...this.group.children.map(d => d.bounds.width)), ht = Math.max(...this.group.children.map(d => d.bounds.height));
+            let size = this._orientation == Orientation.Horizontal ? [this._height, this._width] : [this._width, this._height];
+            let tree = d3.tree().nodeSize([wd, ht]).size(size)(hierarchy);
+            this._apply(tree, this.group);
+            this.group._updateBounds();
+            this.group.getScene()._updateAncestorBounds(this.group);
+        } else {
+            throw Errors.LAYOUT_WITHOUT_TREE;
+        }
+    }
+
+    _apply(d3Tree, coll) {
+        let mark = coll.children.filter(d => d.dataScope.getFieldValue(nodeId) == d3Tree.data[nodeId])[0];
+
+        let x, y;
+        switch (this._orientation) {
+            case Orientation.Horizontal:
+                x = d3Tree.y + this._left;
+                y = d3Tree.x + this._top;
+                break;
+            case Orientation.Vertical:
+                x = d3Tree.x + this._left;
+                y = this._top + d3Tree.y;
+                break;
+        }
+
+        mark.x = x;
+        mark.y = y;
+        
+        if (d3Tree.children && d3Tree.children.length > 0) {
+            for (let c of d3Tree.children)
+                this._apply(c, coll);
+        }
+    }
+
+    get orientation() {
+        return this._orientation;
+    }
+
+    set orientation(o) {
+        this._orientation = o;
+        this.run();
+    }
+
+    get width() {
+        return this._width;
+    }
+
+    set width(w) {
+        this._width = w;
+        this.run();
+    }
+
+    get height() {
+        return this._width;
+    }
+
+    set height(h) {
+        this._height = h;
+        this.run();
+    }
+
+    get size() {
+        return [this._width, this._height];
+    }
+
+    set size(s) {
+        this._width = s[0];
+        this._height = s[1];
+        this.run();
+    }
+}

package/src-old/layout/Treemap.js

@@ -0,0 +1,87 @@
+import * as d3 from "d3";
+import Layout from "./Layout";
+
+export default class TreemapLayout extends Layout {
+
+    constructor(args) {
+        super();
+        this.type = "treemap";
+        this._width = args["width"];
+        this._height = args["height"];
+        this._top = args["top"];
+        this._left = args["left"];
+    }
+
+    toJSON() {
+        let json = {args: {}};
+		json.type = this.type;
+		json.args.left = this._left;
+		json.args.top = this._top;
+		json.args.width = this._width;
+		json.args.height = this._height;
+		return json;
+    }
+
+    clone() {
+        return new TreemapLayout({width: this._width, height: this._height, top: this._top, left: this._left});
+    }
+
+    run() {
+        if (this.group == undefined || !this.group.children || this.group.children.length == 0)
+			return;
+        let w = this._width ? this._width : this.group.bounds.width,
+            h = this._height ? this._height : this.group.bounds.height,
+            top = this._top === undefined ? this.group.bounds.top : this._top,
+            left = this._left === undefined ? this.group.bounds.left : this._left;
+        let hierarchy = d3.hierarchy((this.group)).sum(d => d.type == "rect" ? d.bounds.width * d.bounds.height : 0);
+        d3.treemap().size([w,h])(hierarchy);
+        this._apply(hierarchy, left, top);
+        this.group.getScene()._updateAncestorBounds(hierarchy.leaves()[0].data);
+    }
+
+    _apply(node, left, top) {
+        if (node.data.type == "collection" && node.children) {
+            for (let c of node.children)
+                this._apply(c, left, top);
+        } else if (node.data.type == "rect") {
+            node.data.resize(node.x1 - node.x0, node.y1 - node.y0);
+            node.data._doTranslate(node.x0 + left - node.data.bounds.left, node.y0 + top - node.data.bounds.top);
+        }
+    }
+
+    get width() {
+        return this._width;
+    }
+
+    set width(w) {
+        this._width = w;
+        this.run();
+    }
+
+    get height() {
+        return this._width;
+    }
+
+    set height(h) {
+        this._height = h;
+        this.run();
+    }
+
+    get top() {
+        return this._top;
+    }
+
+    set top(t) {
+        this._top = t;
+        this.run();
+    }
+
+    get left() {
+        return this._left;
+    }
+
+    set left(l) {
+        this._left = l;
+        this.run();
+    }
+}