mascot-vis 2.1.0 → 3.0.0

package/src-new-ts/depgraph/variable/Variable.js

@@ -0,0 +1,39 @@
+import { generateUniqueID } from "../../util.js";
+
+export default class Variable {
+    constructor(type) {
+        this._id = "v_" + generateUniqueID();
+        this._type = type;
+        this._incomings = [];
+        this._outgoings = [];
+        this._undirected = [];
+    }
+
+    get id() {
+        return this._id;
+    }
+
+    get incomingEdges() {
+        return this._incomings;
+    }
+
+    get outgoingEdges() {
+        return this._outgoings;
+    }
+
+    get undirectedEdges() {
+        return this._undirected;
+    }
+
+    get type() {
+        return this._type;
+    }
+}
+
+export const VarType = Object.freeze({
+    CHANNEL: 'channel',
+    DATASCOPE: 'datascope',
+    DOMAIN: 'domain',
+    BOUNDS: 'bounds',
+    FIELD: 'field'
+});

package/src-new-ts/element/gradient/LinearGradient.js

@@ -0,0 +1,37 @@
+import { generateUniqueID } from "../../util.js";
+import { ElementType } from "../../action/createElement.js";
+
+export default class LinearGradient {
+
+    constructor(params) {
+        let args = params ? params : {};
+        this._stops = [];
+        this.type = ElementType.LinearGradient;
+        this.id = this.type + generateUniqueID();
+        this.x1 = ("x1" in args) ? args.x1 : 0;
+        this.x2 = ("x2" in args) ? args.x2 : 100;
+        this.y1 = ("y1" in args) ? args.y1 : 0;
+        this.y2 = ("y2" in args) ? args.y2 : 0;
+    }
+
+    toJSON() {
+        let json = {};
+        json.type = this.type;
+        json.id = this.id;
+        json.x1 = this.x1;
+        json.x2 = this.x2;
+        json.y1 = this.y1;
+        json.y2 = this.y2;
+        json.stops = this._stops;
+        return json;
+    }
+
+    addStop(offset, color, opacity) {
+        this._stops.push({ offset: offset, color: color, opacity: opacity });
+    }
+
+    get stops() {
+        return this._stops;
+    }
+
+}

package/src-new-ts/element/group/Collection.js

@@ -0,0 +1,109 @@
+import { ElementType } from "../../action/createElement.js";
+import { MSCRowID } from "../../data/Table.js";
+import { FieldType } from "../../data/field.js";
+import { CanvasProvider } from "../../render/CanvasRenderer.js";
+import { generateUniqueID } from "../../util.js";
+import Group from "./Group.js";
+
+export default class Collection extends Group {
+
+    constructor() {
+        super();
+        this._type = ElementType.Collection;
+        this._id = this.type + generateUniqueID();
+        this._classId = this.id;
+        this._childrenOrder = undefined;
+    }
+
+    get childrenOrder() {
+        if (!this._childrenOrder)
+            return { "field": MSCRowID, "direction": "asc" };
+        else
+            return this._childrenOrder;
+    }
+
+    set childrenOrder(o) {
+        if (!("field" in o) && !("direction" in o)) return;
+        let field = o.field;
+        if (!this.dataScope.dataTable.hasField(field)) {
+            console.warn("Cannot order collection children by an non-existent field", o.field);
+            return;
+        }
+        this._childrenOrder = o;
+        let f;
+        if (field === MSCRowID) {
+            f = (a, b) => parseInt(a.dataScope.getFieldValue(field).substring(1)) - parseInt(b.dataScope.getFieldValue(field).substring(1));
+        } else {
+            let type = this.children[0].dataScope.getFieldType(field);
+            switch (type) {
+                case FieldType.Date:
+                    break;
+                case FieldType.Number:
+                case FieldType.Integer:
+                    f = (a, b) => a.dataScope.aggregateNumericalField(field) - b.dataScope.aggregateNumericalField(field);
+                    break;
+                case FieldType.String:
+                    if (o.ranking)
+                        f = (a, b) => o.ranking.indexOf(a.dataScope.getFieldValue(field)) - o.ranking.indexOf(b.dataScope.getFieldValue(field));
+                    else
+                        f = (a, b) => (a.dataScope.getFieldValue(field) < b.dataScope.getFieldValue(field) ? -1 : 1);
+                    break;
+            }
+        }
+        this.children.sort(f);
+
+        if (o.direction == "desc")
+            this.children.reverse();
+        if (this.layout)
+            this.layout.run();
+    }
+
+    duplicate() {
+        let coll = this.getScene().collection();
+        for (let i = 0; i < this.children.length; i++) {
+            let c = this.children[i];
+            coll.addChild(c.duplicate());
+        }
+        coll.classId = this.classId;
+        this.parent.addChild(coll);
+        if (this._layout) {
+            let layout = this._layout.clone();
+            coll.layout = layout;
+        }
+        return coll;
+    }
+
+    contains(x, y) {
+        let irregular2Ds = [ElementType.Arc, ElementType.Pie, ElementType.Polygon, ElementType.Area];
+        if (irregular2Ds.indexOf(this.firstChild.type) >= 0) {
+            let svgData = this.getSVGPathData();
+            if (svgData !== "") {
+                let ctx = CanvasProvider.getContext(),
+                    p = new Path2D(svgData);
+                ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
+                ctx.stroke(p);
+                return ctx.isPointInPath(p, x, y);
+            }
+        }
+        if (!this._bounds) {
+            this._updateBounds();
+        }
+        return this._bounds.contains(x, y);
+    }
+
+    getSVGPathData() {
+        let d = "";
+        for (let i of this.children) {
+            if (i.getSVGPathData)
+                d += i.getSVGPathData();
+            else if (i.bounds) {
+                let b = i.bounds;
+                d += ["M", b.left, b.top].join(" ");
+                d += ["L", b.right, b.top].join(" ");
+                d += ["L", b.right, b.bottom].join(" ");
+                d += ["L", b.left, b.bottom, "Z"].join(" ");
+            }
+        }
+        return d;
+    }
+}

package/src-new-ts/element/group/Group.js

@@ -0,0 +1,307 @@
+/**
+* Same as group in graphical design tools 
+**/
+
+import { generateUniqueID } from "../../util.js";
+import { ElementType } from "../../action/createElement.js";
+
+export default class Group {
+	
+	constructor() {
+		this._children = [];
+		this._dataScope = undefined;
+		this._layout = undefined;
+		this._type = ElementType.Group;
+		this._id = this.type + generateUniqueID();
+	}
+
+	get id() {
+		return this._id;
+	}
+
+    get type() {
+        return this._type;
+    }
+
+	// set id(id) {
+	// 	if (this.type === ElementType.Scene || !this.getScene())
+	// 		this._id = id;
+	// 	else {
+	// 		delete this.getScene()._itemMap[this._id];
+	// 		this._id = id;
+	// 		this.getScene()._itemMap[id] = this;
+	// 	}
+	// }
+
+	contains(x, y) {
+		if (!this._bounds) {
+			this._updateBounds();
+		}
+		return this._bounds.contains(x, y);
+	}
+
+	toJSON() {
+		let json = {};
+		json.type = this.type;
+		json.id = this.id;
+		if (this._dataScope)
+			json.dataScope = this._dataScope.toJSON();
+		if (this.classId)
+			json.classId = this.classId;
+		if (this._layout)
+			json.layout = this._layout.toJSON();
+		if (this._bounds)
+			json.bounds = this._bounds.toJSON();
+		json.children = [];
+		if (this.children.length > 0) { //&& this.type != ItemType.Axis
+			for (let c of this.children) {
+				json.children.push(c.toJSON());
+			}
+		}
+		if (this.childrenOrder) {
+			json.childrenOrder = this.childrenOrder;
+		}
+		return json;
+	}
+
+    get children() {
+        return this._children;
+    }
+
+	addChild(c) {
+		if (this.children.indexOf(c) >= 0) return;
+		if (c.parent)
+			c.parent.removeChild(c);
+		this.children.push(c);
+		c.parent = this;
+	}
+
+	addChildAt(c,index){
+		if (c.parent)
+			c.parent.removeChild(c);
+		this.children.splice(index, 0, c);
+		c.parent = this;
+	}
+
+	removeChild(c) {
+		let idx = this.children.indexOf(c);
+		if (idx >= 0) {
+			this.children.splice(idx, 1);
+			c.parent = null;
+		}
+	}
+
+	removeChildAt(i) {
+		this.children[i].parent = null;
+		this.children.splice(i, 1);
+	}
+
+	removeAll() {
+		for (let c of this.children)
+			c.parent = null;
+		this.children = [];
+	}
+
+	get dataScope() {
+		return this._dataScope;
+	}
+
+	set dataScope(ds) {
+		this._dataScope = ds;
+		if (ds === undefined) {
+			for (let c of this.children) {
+				c.dataScope = ds;
+			}
+		} else {
+			for (let c of this.children) {
+				if (c.dataScope)
+					c.dataScope = c.dataScope.merge(ds);
+				else
+					c.dataScope = ds;
+			}
+		}
+	}
+
+	// _doTranslate(dx, dy) {
+	// 	for (let child of this.children) {
+	// 		child._doTranslate(dx, dy);
+	// 	}
+	// 	this._updateBounds();
+	// 	if (this._layout) {
+	// 		if (this._layout._left !== undefined)
+	// 			this._layout._left += dx;
+	// 		if (this._layout._top !== undefined)
+	// 			this._layout._top += dy;
+	// 		if (this._layout.x !== undefined)
+	// 			this._layout.x += dx;
+	// 		if (this._layout.y !== undefined)
+	// 			this._layout.y += dy;
+	// 		//this._layout.run();
+	// 	}
+	// 	this._updateBounds();
+	// }
+
+	getInternalEncodings(channel) {
+		if (this.children.length == 0)
+			return [];
+		let item = this.children[0], scene = this.getScene();
+		let encodingKeys = Object.keys(scene.encodings);
+		let classIds = [];
+		while(item) {
+			if (item.classId && classIds.indexOf(item.classId) < 0)
+				classIds.push(item.classId);
+			if (item.type === ElementType.Glyph) {
+				item.children.forEach(d => classIds.push(d.classId));
+				break;
+			} else if (item.children) {
+				item = item.children[0];
+			} else
+				break;
+		}
+		let result = [];
+		for (let k of encodingKeys) {
+			let tokens = k.split("_");
+			for (let classId of classIds) {
+				if (tokens[0] == classId) {
+					if (scene.encodings[k][channel])
+						result.push(scene.encodings[k][channel]);
+				}
+			}
+		}
+		return result;
+	}
+
+	get firstChild() {
+		return this.children[0];
+	}
+
+	get lastChild() {
+		return this.children[this.children.length - 1];
+	}
+
+	set layout(l) {
+		this._layout = l;
+		if (l) {
+			l.group = this;
+			this._layout.run();
+		} else {
+			//check if there are position encodings and reapply them
+			let xEncs = this.getInternalEncodings("x"),
+				yEncs = this.getInternalEncodings("y");
+			for (let e of xEncs) {
+				e._map();
+				e._apply();
+			}
+			for (let e of yEncs) {
+				e._map();
+				e._apply();
+			}	
+		}
+	}
+
+	get layout() {
+		return this._layout;
+	}
+
+	// get bounds() {
+	// 	if (!this._bounds) {
+	// 		this._updateBounds();
+	// 	}
+	// 	return this._bounds;
+	// }
+
+	// get refBounds() {
+	// 	let cRefBounds = this.children.map (d => d.refBounds);
+	// 	let left = Math.min(...cRefBounds.map(d => d.left)), top = Math.min(...cRefBounds.map(d => d.top)),
+	// 		right = Math.max(...cRefBounds.map(d => d.right)), bottom = Math.max(...cRefBounds.map(d => d.bottom));
+	// 	return new Rectangle(left, top, right - left, bottom - top);
+	// }
+
+	get x() {
+		return this.bounds.x;
+	}
+
+	get y() {
+		return this.bounds.y;
+	}
+
+	// _updateBounds() {
+	// 	if (this.children.length > 0){
+	// 		this._bounds = this.children[0].bounds.clone();
+	// 		for (let i = 1; i < this.children.length; i++) {
+	// 			if (this.children[i].visibility == "hidden")
+	// 				continue;
+	// 			this._bounds = this._bounds.union(this.children[i].bounds);
+	// 		}
+	// 		if (this._layout && this._layout.type == "grid") {
+	// 			let cellBounds = this._layout.cellBounds;
+	// 			for (let i = 0; i < cellBounds.length; i++) {
+	// 				this._bounds = this._bounds.union(cellBounds[i]);
+	// 			}
+	// 		}
+	// 	} else {
+	// 		this._bounds = new Rectangle(0, 0, 0, 0);
+	// 	}
+	// }
+
+	// sortChildrenByData(field, reverse, order) {
+	// 	let type = this.children[0].dataScope.getFieldType(field);
+	// 	let f; 
+	// 	switch (type) {
+	// 		case DataType.Date:
+	// 			break;
+	// 		case DataType.Number:
+	// 		case DataType.Integer:
+	// 			f = (a, b) =>  a.dataScope.aggregateNumericalField(field) - b.dataScope.aggregateNumericalField(field);
+	// 			break;
+	// 		case DataType.String:
+	// 			if (order)
+	// 				f = (a, b) => order.indexOf(a.dataScope.getFieldValue(field)) - order.indexOf(b.dataScope.getFieldValue(field));
+	// 			else
+	// 				f = (a, b) =>  (a.dataScope.getFieldValue(field) < b.dataScope.getFieldValue(field) ? -1 : 1 );
+	// 			break;
+	// 	}
+	// 	this.children.sort(f);
+	// 	if (reverse)
+	// 		this.children.reverse();
+	// 	if (this.layout)
+	// 		this.layout.run();
+	// 	this._childrenOrder = {field: field, direction: reverse ? "desc" : "asc", ranking: order};
+	// }
+
+	// sortChildren(channel, reverse){
+	// 	let f;
+	// 	switch (channel){
+	// 		case "x":
+	// 		case "y":
+	// 		case "width":
+	// 		case "height":
+	// 			f = (a, b) => a.bounds[channel] - b.bounds[channel];
+	// 			break;
+	// 		default:
+	// 			f = (a, b) => a[channel] - b[channel];
+	// 			break;
+	// 	}
+	// 	this.children.sort(f);
+	// 	if (reverse)
+	// 		this.children.reverse();
+	// 	if (this.layout)
+	// 		this.layout.run();
+	// 	this.childrenOrder = {channel: channel, reverse: reverse};
+	// }
+
+	set visibility(v) {
+		if (v == "hidden")
+			this._visibility = v;
+		else
+			this._visibility = "visible";
+		for (let c of this.children)
+			c.visibility = v;
+	}
+
+	get visibility() {
+		if (!this._visibility)
+			return "visible";
+		return this._visibility;
+	}
+}

package/src-new-ts/element/group/Scene.js

@@ -0,0 +1,98 @@
+import { ElementType, PrimitiveMark } from "../../action/createElement.js";
+import Group from "./Group.js";
+import { generateUniqueID } from "../../util.js";
+import DependencyGraph from "../../depgraph/DepGraph.js";
+import { encodingSpecified, newMarkCreated } from "../../depgraph/updateDepGraph.js";
+import { VarType } from "../../depgraph/variable/Variable.js";
+import DataTable, { MSCRowID } from "../../data/Table.js";
+import { repeatElement, validateRepeatArguments } from "../../action/repeat.js";
+import Tree from "../../data/Tree.js";
+import Network from "../../data/Network.js";
+import { createMark } from "../../action/createElement.js";
+import { getPeers } from "../../action/traverseScene.js";
+import { validateEncodeArguments } from "../../action/encode.js";
+import { createScale } from "../../encode/Scale.js";
+
+export default class Scene extends Group {
+
+    constructor(args) {
+        super();
+        this._itemMap = {};
+        this._type = ElementType.Scene;
+        this._id = this._type + generateUniqueID();
+        if (args && args.fillColor) {
+            this.fillColor = args.fillColor;
+        }
+        this._encodings = {};
+        this._depGraph = new DependencyGraph();
+    }
+
+    get depGraph() {
+        return this._depGraph;
+    }
+
+    mark(type, param) {
+        if (Object.values(PrimitiveMark).indexOf(type) < 0)
+            throw new Error("Mascot does not allow directly creating a " + type);
+        let args = param === undefined ? {} : param;
+        args.type = type;
+        let m = createMark(args);
+        if (m !== null) {
+            m._classId = m.id;
+            this.addChild(m);
+            this._itemMap[m.id] = m;
+            newMarkCreated(m, this._depGraph);
+        }
+        return m;
+    }
+
+    repeat(elem, data, param) {
+        param["field"] = param["field"] || MSCRowID;
+        validateRepeatArguments(elem, data, param);
+
+        if (data instanceof Tree || data instanceof Network) {
+            throw "Not implemented";
+            // return repeatNodeLink(this, elem[0], elem[1], data);
+        } else if (data instanceof DataTable) {
+            let collection = repeatElement(this, elem, param["field"], data);
+            // console.log(this._depGraph);
+            if (param.layout)
+                collection.layout = param.layout;
+            return collection;
+        }
+    }
+
+    //example usage in the scatterplot demo: scn.encode(circle, { field: "GDP per capita", channel: "x" });
+    encode(elem, param) {
+        //TODO: complete the validateEncodeArguments function in action/encode.js to validate the arguments
+        validateEncodeArguments(elem, param);
+        let scale = param.scale ? param.scale : createScale(param.field, param.channel, elem),
+            aggregator = param.aggregator ? param.aggregator : "sum";
+        encodingSpecified(param.field, param.channel, elem, scale, aggregator, this._depGraph);
+    }
+
+
+    /**
+     * 
+     * @param {*} varType: type of variable: channel, field, bounds, datascope, scale, ... 
+     * @param {*} newVal: variable value: "x", "y", "radius", etc. for channel, ... 
+     * @param {*} compnt: the component that the variable belongs to, e.g., channel/bounds/datascope: element, field: dataset
+     */
+    onChange(varType, ...params) {
+        if (Object.values(VarType).indexOf(varType) < 0)
+            throw new Error('Unknown Variable Type: ' + varType);
+        this._depGraph.processChange(varType, ...params);
+    }
+
+    setChannels(root, params) {
+        this.setProperties(params, root);
+        getPeers(root).map(elem => this.setProperties(params, elem));
+        this.onChange('channel', ...Object.keys(params), root);
+    }
+
+    setProperties(params, c) {
+        for (const [key, value] of Object.entries(params)) {
+            if ('_' + key in c) c['_' + key] = value;
+        }
+    }
+}

package/src-new-ts/element/mark/CircleMark.ts

@@ -0,0 +1,85 @@
+import Mark from "./Mark";
+
+// Define an interface for constructor arguments
+interface CircleMarkArgs {
+    x?: number;
+    y?: number;
+    radius?: number;
+    [key: string]: any; // This allows for additional properties not explicitly defined here
+}
+
+export default class CircleMark extends Mark {
+    private _x: number;
+    private _y: number;
+    private _radius: number;
+
+    constructor(args: CircleMarkArgs) {
+        super(args);
+        this._x = args.x ?? 0; // Use nullish coalescing operator
+        this._y = args.y ?? 0;
+        this._radius = args.radius ?? 100;
+    }
+
+    // Define setters and getters with types
+    set strokeColor(c: string) {
+        
+    }
+
+    set radius(r: number) {
+        this._radius = r;
+    }
+
+    get strokeColor(): string {
+        return this.styles.strokeColor;
+    }
+
+    get strokeDash(): string {
+        return this.styles.strokeDash;
+    }
+
+    get fillColor(): string {
+        return this.styles.fillColor;
+    }
+
+    get strokeWidth(): number {
+        return this.styles.strokeWidth;
+    }
+
+    get x(): number {
+        return this._x;
+    }
+
+    get y(): number {
+        return this._y;
+    }
+
+    get radius(): number {
+        return this._radius;
+    }
+
+    get area(): number {
+        return Math.PI * Math.pow(this._radius, 2);
+    }
+
+    copyPropertiesTo(target: CircleMark): void {
+        super.copyPropertiesTo(target);
+        target._x = this._x;
+        target._y = this._y;
+        target._radius = this._radius;
+    }
+
+    getSVGPathData(): string {
+        return [
+            "M", this._x, this._y,
+            "m", -this._radius, "0",
+            "a", this._radius, this._radius, "0 1,0", this._radius * 2, "0",
+            "a", this._radius, this._radius, "0 1,0", -(this._radius * 2), "0"
+        ].join(" ");
+    }
+
+    contains(px: number, py: number): boolean {
+        
+        const dist = Math.sqrt(Math.pow(px - this.x, 2) + Math.pow(py - this.y, 2));
+        return dist <= this.radius + this.strokeWidth;
+    }
+}