mascot-vis 1.12.2 → 2.0.0

package/dist/mascot.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// version: 1.12.2
+// version: 2.0.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) :
@@ -2555,7 +2555,7 @@
 
 	function repeatNodeLink(scene, node, link, data) {
 		let nodeDS = data.nodeTable.getFieldSummary(nodeId).unique.map(d => node.dataScope ? node.dataScope.cross(nodeId, d) : new DataScope(data.nodeTable).cross(nodeId, d));
-		let nodeColl = scene.collection(), id2node = {};
+		let linkColl = scene.collection(), nodeColl = scene.collection(), id2node = {};
 		nodeColl.dataScope = node.dataScope ? node.dataScope.clone() :  new DataScope(data.nodeTable);
 		
 		//do not initialize classId here, initialize in scene.mark/glyph/new Collection()
@@ -2572,7 +2572,6 @@
 		});
 
 		let linkDS = data.linkTable.getFieldSummary(atlas_rowId).unique.map(d => link.dataScope ? link.dataScope.cross(atlas_rowId, d) : new DataScope(data.linkTable).cross(atlas_rowId, d));
-		let linkColl = scene.collection();
 		linkColl.dataScope = link.dataScope ? link.dataScope.clone() : new DataScope(data.linkTable);
 
 		linkColl.addChild(link);
@@ -2590,8 +2589,6 @@
 			l.target = id2node[tid];
 			l._updateBounds();
 		}
-		scene.addChild(linkColl);
-		scene.addChild(nodeColl);
 		
 		return [nodeColl, linkColl];
 	}
@@ -7041,15 +7038,19 @@
 	        this._x = ("x" in args) ? args["x"] : 0;
 	        this._y = ("y" in args) ? args["y"] : 0;
 	        this._showTitle = ("showTitle" in args) ? args["showTitle"] : true;
+	        this._orientation = ("orientation" in args) ? args["orientation"] : Orientation.Vertical;
+	        
 	        //for categorical legend
 	        if (!("numCols" in args) && !("numRows" in args)) {
-	            this._numCols = 1;
+	            if (this._orientation === Orientation.Vertical)
+	                this._numCols = 1;
+	            else
+	                this._numRows = 1;
 	        }
 	        else {
 	            this._numCols = args["numCols"];
 	            this._numRows = args["numRows"];
 	        }
-	        this._orientation = ("orientation" in args) ? args["orientation"] : Orientation.Vertical;
 	        this._initialize();
 	    }
 
@@ -7225,21 +7226,35 @@
 	    }
 
 	    _createCategoricalColorLegend(scene, f) {
-	        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 text = scene.mark("text", {fillColor: this._textColor, "fontSize": this._fontSize, x: this._x + 20, y: this._y + titleSize, "anchor": ["left", "top"]});
-	        let glyph = scene.glyph(rect, text);
 	        let scale = this.encoding.scale;
 	        let dt = new DataTable(scale.domain.map(d => ({"category": d, "value": scale.map(d)})));
-	        let coll = scene.repeat(glyph, dt);
-	        scene.encode(text, {"channel": "text", "field": "category", "_remember": false});
-	        scene.encode(rect, {"channel": "fillColor", "field": "category", "_remember": false, scale: scale});
-	        coll.layout = layout("grid", {"numCols": this._numCols, "numRows": this._numRows});
-	        this.addChild(coll);
+	        let longestText = dt.getUniqueFieldValues("category").sort((a,b) => b.length - a.length)[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 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);
+	            scene.encode(text, {"channel": "text", "field": "category", "_remember": false});
+	            scene.encode(rect, {"channel": "fillColor", "field": "category", "_remember": false, scale: scale});
+	            coll.layout = layout("grid", {"numCols": this._numCols, "numRows": this._numRows});
+	            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 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);
+	            scene.encode(text, {"channel": "text", "field": "category", "_remember": false});
+	            scene.encode(rect, {"channel": "fillColor", "field": "category", "_remember": false, scale: scale});
+	            coll.layout = layout("grid", {"numCols": this._numCols, "numRows": this._numRows, "colGap": 15});
+	            this.addChild(coll);
+	        }
+	        
 	    }
 
 	    pathHitTest(x, y) {
@@ -8229,6 +8244,7 @@
 
 	        this.source = undefined;
 	        this.target = undefined;
+	        this.directed = "directed" in args ? args.directed : false;
 
 	        this.sourceAnchor = "sourceAnchor" in args ? args.sourceAnchor : ["center", "middle"];
 	        this.targetAnchor = "targetAnchor" in args ? args.targetAnchor : ["center", "middle"];
@@ -8263,6 +8279,21 @@
 	        return `M ${r0[0]} ${r0[1]} C ${r1[0]} ${r1[1]} ${r2[0]} ${r2[1]} ${r3[0]} ${r3[1]}`
 	    }
 
+	    arc(x1, y1, x2, y2, clockwise) {
+	        let sx = x1, ex = x2, sy = y1, ey = y2;
+	        if (!this.directed && x1 > x2) {
+	            sx = x2;
+	            ex = x1;
+	            sy = y2;
+	            ey = y1;
+	        }
+	        let rx = Math.abs(sx-ex)/2,
+	            ry = Math.abs(sy-ey)/2,
+	            r = Math.max(rx, ry),
+	            sweep_flag = clockwise ? 1 : 0;
+	        return `M ${sx} ${sy} A ${r} ${r} 0 0 ${sweep_flag} ${ex} ${ey}`
+	    }
+
 	    _updateBounds() {
 	        if (this.source != undefined && this.target != undefined){
 	            let x1 = this.source.bounds[this.sourceAnchor[0]] + this.sourceOffset[0],
@@ -8288,6 +8319,10 @@
 	                return this.bezierCurveHorizontal(x1, y1, x2, y2);
 	            case "curveVertical":
 	                return this.bezierCurveVertical(x1, y1, x2, y2);
+	            case "arcClockwise":
+	                return this.arc(x1, y1, x2, y2, true);
+	            case "arcAntiClockwise":
+	                return this.arc(x1, y1, x2, y2, false);
 	            case "linear":
 	            default:
 	                return `M ${x1} ${y1} L ${x2} ${y2}`;
@@ -8774,7 +8809,7 @@
 	        this._nodeTable.tree = this;
 	        this._linkTable.tree = this;
 	        this._data = data;
-	        this.aggregateFromLeaves("value", "average");
+	        //this.aggregateFromLeaves("value", "average");
 	    }
 
 	    get type() {
@@ -23884,6 +23919,7 @@
 	        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() {
@@ -23897,7 +23933,7 @@
 	        if (!graph) return;
 	        
 	        var g = new dagre_1.Graph();
-	        g.setGraph({edgesep: 50});
+	        g.setGraph({edgesep: this._edgeSep});
 	        g.setDefaultEdgeLabel(function() { return {}; });
 
 	        //in case the node ids in the input graph file are integers

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mascot-vis",
-	"version": "1.12.2",
+	"version": "2.0.0",
 	"description": "Manipulable Semantic Components in Data Visualization",
 	"scripts": {
 		"build": "rollup --config",