mascot-vis 3.0.0 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mascot-vis",
-	"version": "3.0.0",
+	"version": "3.0.1",
 	"description": "Manipulable Semantic Components in Data Visualization",
 	"type": "module",
 	"scripts": {
@@ -28,7 +28,6 @@
 		"csv-parser": "^3.0.0",
 		"d3": "^7.9.0",
 		"jsdom": "^22.1.0",
-		"mascot-vis": "^2.1.0",
 		"pixi.js": "6.0.4",
 		"svelte-jsoneditor": "^0.3.58"
 	},

package/js/depGraphVis.js

@@ -1,66 +0,0 @@
-function visualizeDepGraph(dg) {
-    var g = new dagre.graphlib.Graph();
-    g.setGraph({});
-    g.setDefaultEdgeLabel(function() { return {}; });
-    g.graph().rankdir = "LR";
-
-    setupGraph(g, dg);
-    dagre.layout(g);
-    renderDepGraph(g);
-}
-
-function renderDepGraph(g) {
-    document.getElementById("depGraphVis").style.visibility = "visible";
-    let svg = d3.select("#depGraphVis");
-    svg.selectAll("*").remove();
-
-    svg.selectAll("path").data(g.edges()).enter().append("path")
-        .attr("d", e => getPathData(g.node(e.v), g.edge(e).points, g.node(e.w))).style("stroke", "#ccc").style("fill", "none");
-    
-    svg.selectAll("rect").data(g.nodes()).enter().append("rect")
-        .attr("x", d => g.node(d).x - g.node(d).width/2).attr("y", d => g.node(d).y - g.node(d).height/2)
-        .attr("width", d => g.node(d).width).attr("height", d => g.node(d).height)
-        .style("stroke", "#ccc").style("fill", d => g.node(d).type == "op" ? "yellow" : "white");
-    
-    svg.selectAll("text").data(g.nodes()).enter().append("text")
-        .attr("x", d => g.node(d).x - g.node(d).width/2).attr("y", d => g.node(d).y + g.node(d).height/2).text(d => g.node(d).label);
-    
-    let bbox = svg.node().getBBox(),
-        vb = [bbox.x - 10, bbox.y - 10, bbox.width + 20, bbox.height + 20];
-    svg.attr("viewBox", vb.join(" "));
-}
-
-function getPathData(source, points, target) {
-    let str = "M " + source.x + " " + source.y;
-    //"M " + points[0].x + " " + points[0].y;
-    for (let i = 0; i < points.length; i++)
-        str += " L " + points[i].x + " " + points[i].y;
-    str += " L " + target.x + " " + target.y;
-    return str;
-}
-
-function setupGraph(g, dg) {
-    let temp = d3.select("#depGraphVis").append("text");
-    for (let varType in dg._variables) {
-        for (let varId in dg._variables[varType]) {
-            let v = dg._variables[varType][varId],
-                label = v.channel ? v.channel : varType;
-            label += v.element ?  ": " + v.element.type : "";
-            temp.text(label);
-            g.setNode(varId, {type: "var", label: label, width: temp.node().getBBox().width, height: temp.node().getBBox().height});
-        }
-    }
-
-    for (let opType in dg._operators) {
-        for (let opId in dg._operators[opType]) {
-            let v = dg._operators[opType][opId],
-                label = opType;
-            temp.text(label);
-            g.setNode(opId, {type: "op", label: label, width: temp.node().getBBox().width, height: temp.node().getBBox().height});
-        }
-    }
-
-    for (let e of dg._edges) {
-        g.setEdge(e.fromNode.id, e.toNode.id);
-    }
-}

package/src-new-ts/action/createElement.ts

@@ -1,91 +0,0 @@
-// Assuming Collection.ts exists with a default export of Collection class
-import Collection from "../element/group/Collection";
-// Assuming Circle.ts exists with a default export of Circle class
-import Circle from "../element/mark/CircleMark";
-import Mark, {MarkArgs} from "../element/mark/Mark";
-
-
-
-
-// Updated to use TypeScript syntax for function parameter types
-export function duplicateMark(mark: Mark): Mark | null {
-    let m = createMark({ type: mark.type });
-    if (m === null) {
-        // Handle the case where m is null, possibly by returning null or throwing an error
-        console.error("Failed to create a mark of type", mark.type);
-        return null; // or throw new Error("Failed to create a mark.");
-    }
-    
-    mark.copyPropertiesTo(m);
-    m.classId = mark.classId;
-    if (mark.dataScope) {
-        // Ensure m is not null before accessing its properties
-        m.dataScope = mark.dataScope.clone();
-    }
-    return m;
-}
-
-// Ensure args conforms to the MarkArgs interface
-export function createMark(args: MarkArgs) {
-    let m: Mark | null = null;
-    switch (args.type) {
-        case ElementType.Circle:
-            m = new Circle(args);
-            break;
-        default:
-            break;
-    }
-    return m;
-}
-
-// Define a type for the `scene` parameter
-interface Scene {
-    addChild(child: Collection): void;
-    _itemMap: { [id: string]: Collection };
-}
-
-export function createCollection(scene: Scene) {
-    let c = new Collection();
-    scene.addChild(c);
-    scene._itemMap[c.id] = c;
-    return c;
-}
-
-// Using enum for PrimitiveMark
-export enum PrimitiveMark {
-    Rect = "rect",
-    Circle = "circle",
-    Line = "line",
-    Ring = "ring",
-    Path = "path",
-    Image = "image",
-    PointText = "pointText"
-}
-
-// Using enum for ElementType
-export enum ElementType {
-    Mark = "Mark",
-    Area = "Area",
-    Rect = "Rect",
-    Ellipse = "Ellipse",
-    Circle = "Circle",
-    Pie = "Pie",
-    Ring = "Ring",
-    Arc = "Arc",
-    Line = "Line",
-    Path = "Path",
-    Image = "Image",
-    PointText = "PointText",
-    Collection = "Collection",
-    Group = "Group",
-    Scene = "Scene",
-    Axis = "Axis",
-    Glyph = "Glyph",
-    Legend = "Legend",
-    Polygon = "Polygon",
-    Gridlines = "Gridlines",
-    LinearGradient = "LinearGradient",
-    Link = "Link",
-    DataTable = "Datatable",
-    Layout = "Layout"
-};

package/src-new-ts/action/encode.js

@@ -1,20 +0,0 @@
-/**
-    refer to validateRepeatArguments in action/repeat.js as well as
-    _validateEncodeArgs in src/item/group/Scene.js as examples
-*/
-export function validateEncodeArguments(elem, param) {
-    //the elem should have a data scope
-    //the param should have a field and a channel
-    if (!elem || !("channel" in param) || !("field" in param)) {
-        throw new Error("Incomplete information to do repeat. You must specify an item, a categorical data field and a data table");
-    }
-    //the field should be a valid column name in the elem's data scope
-    let datatable = elem.dataScope && elem.dataScope.dataTable;
-    if (!datatable || !datatable.hasField(param.field)) {
-        throw new Error("Data field does not exist in the data table");
-    }
-    //the channel should be a valid channel for the given elem
-    if (!["x", "y", "fillColor"].includes(param.channel)) {
-        throw new Error("Channel Not Supported");
-    }
-}

package/src-new-ts/action/repeat.js

@@ -1,128 +0,0 @@
-import DataScope from "../data/Scope.js";
-import DataTable, { MSCRowID } from "../data/Table.js";
-import { FieldType, validateField } from "../data/field.js";
-import { MSCNodeID } from "../data/Table.js";
-import { ElementType } from "./createElement.js";
-import { isMark } from "../element/mark/Mark.js";
-import { createCollection } from "./createElement.js";
-import Tree from "../data/Tree.js";
-import Network from "../data/Network.js";
-import Layout from "../layout/Layout.js";
-import { duplicateMark } from "./createElement.js";
-
-export function validateRepeatArguments(elem, data, param) {
-    if (!elem || data === undefined) {
-        throw new Error("Incomplete information to do repeat. You must specify an item, a categorical data field and a data table");
-    }
-
-    if (data instanceof Tree || data instanceof Network) {
-        if (!Array.isArray(elem) || elem.length !== 2)
-            throw new Error("To repeat with a tree or a network, you need to provide two marks, one for node and one for link");
-    } else if (data instanceof DataTable) {
-        validateField(param["field"], data);
-    }
-
-    if (param.layout && !(param.layout instanceof Layout)) {
-        throw new Error("Invalid layout: " + param.layout);
-    }
-}
-
-export function repeatable(obj) {
-    if (Array.isArray(obj)) {
-        if (obj.length === 1) {
-            return elementRepeatable(obj[0]);
-        } else {
-            for (let c of obj) {
-                if (!isMark(c) || c.dataScope)
-                    return false;
-            }
-        }
-        return true;
-    } else {
-        return elementRepeatable(obj);
-    }
-}
-
-export function elementRepeatable(elem) {
-    if ((isMark(elem) || elem.type == ElementType.Glyph) && !elem.dataScope)
-        return true;
-    else if (elem.type === ElementType.Collection)
-        return elem.firstChild.dataScope.numTuples > 1;
-    return false;
-}
-
-export function repeatElement(scene, elem, field, datatable) {
-    let type = datatable.getFieldType(field);
-
-    if (type != FieldType.String && type != FieldType.Date && type != FieldType.Integer) {
-        throw new Error("Repeat only works on a string or date field: " + field + " is " + type);
-    }
-
-    if (!repeatable(elem)) {
-        throw new Error("The " + elem.type + " is not repeatable");
-    }
-
-    return _doRepeat(scene, elem, field, datatable);
-}
-
-function _doRepeat(scene, elem, field, datatable) {
-    let ds = datatable.getFieldSummary(field).unique.map(d => elem.dataScope ? elem.dataScope.cross(field, d) : new DataScope(datatable).cross(field, d));
-    ds = ds.filter(d => !d.isEmpty());
-    let coll = createCollection(scene);
-    coll.dataScope = elem.dataScope ? elem.dataScope.clone() : new DataScope(datatable);
-
-    coll.addChild(elem);
-
-    for (let i = 1; i < ds.length; i++) {
-        let c = duplicateMark(elem);
-        coll.addChild(c);
-    }
-
-    coll.children.forEach((d, i) => d.dataScope = ds[i]);
-    //TODO: turn the folllwing into getter and setter
-    // if (!scene.cellAlign.hasOwnProperty(compnt.classId)) {
-    // 	scene.cellAlign[compnt.classId] = {x: Alignment.Left, y: Alignment.Bottom};
-    // }
-    //scene._reapplySizeBindings(elem);
-    return coll;
-}
-
-export function repeatNodeLink(scene, node, link, data) {
-    let nodeDS = data.nodeTable.getFieldSummary(MSCNodeID).unique.map(d => node.dataScope ? node.dataScope.cross(MSCNodeID, d) : new DataScope(data.nodeTable).cross(MSCNodeID, d));
-    let linkColl = scene.collection(), nodeColl = scene.collection(), id2node = {};
-    nodeColl.dataScope = node.dataScope ? node.dataScope.clone() : new (data.nodeTable);
-
-    //do not initialize classId here, initialize in scene.mark/glyph/new Collection()
-    // compnt.classId = compnt.id;
-    nodeColl.addChild(node);
-    for (let i = 1; i < nodeDS.length; i++) {
-        let c = node.duplicate();
-        nodeColl.addChild(c);
-    }
-
-    nodeColl.children.forEach((d, i) => {
-        d.dataScope = nodeDS[i];
-        id2node[d.dataScope.getFieldValue(MSCNodeID)] = d;
-    });
-
-    let linkDS = data.linkTable.getFieldSummary(MSCRowID).unique.map(d => link.dataScope ? link.dataScope.cross(MSCRowID, d) : new DataScope(data.linkTable).cross(MSCRowID, d));
-    linkColl.dataScope = link.dataScope ? link.dataScope.clone() : new DataScope(data.linkTable);
-
-    linkColl.addChild(link);
-    for (let i = 1; i < linkDS.length; i++) {
-        let c = link.duplicate();
-        linkColl.addChild(c);
-    }
-
-    linkColl.children.forEach((d, i) => d.dataScope = linkDS[i]);
-    let s = data.type === "tree" ? "parent" : "source", t = data.type === "tree" ? "child" : "target";
-    for (let l of linkColl.children) {
-        let sid = l.dataScope.getFieldValue(s),
-            tid = l.dataScope.getFieldValue(t);
-        l.source = id2node[sid];
-        l.target = id2node[tid];
-        l._updateBounds();
-    }
-
-    return [nodeColl, linkColl];
-}

package/src-new-ts/action/traverseScene.js

@@ -1,41 +0,0 @@
-import { matchCriteria } from "../data/predicate.js";
-import { ElementType } from "./createElement.js";
-
-export function getPeers(elem) {
-    let scene = getScene(elem);
-    return elem.classId ? findItems(scene, [{ "classId": elem.classId }]) : [];
-}
-
-export function findItems(container, predicates) {
-    let result = [];
-    findItemsRecursive(container, predicates, result);
-    return result;
-}
-
-function findItemsRecursive(itm, predicates, result) {
-    if (!itm) return;
-    if (itm.type == "axis" || itm.type == "legend" || itm.type == "gridlines") return;
-    if (matchCriteria(itm, predicates)) {
-        result.push(itm);
-    }
-
-    if (itm.vertices) {
-        for (let i of itm.vertices.concat(itm.segments)) {
-            if (matchCriteria(i, predicates))
-                result.push(i);
-        }
-    } else if (itm.children && itm.children.length > 0) {
-        for (let c of itm.children)
-            findItemsRecursive(c, predicates, result);
-    }
-}
-
-export function getScene(elem) {
-    let p = elem;
-    while (p) {
-        if (p.type == ElementType.Scene)
-            return p;
-        else
-            p = p.parent;
-    }
-}

package/src-new-ts/data/Network.js

@@ -1,2 +0,0 @@
-export default class Network {
-}

package/src-new-ts/data/Scope.js

@@ -1,135 +0,0 @@
-import * as d3 from 'd3';
-import { MSCRowID } from './Table.js';
-
-export default class DataScope {
-
-    constructor(datatable) {
-        this._field2value = {};
-        this._dt = datatable;
-        this._tuples = this._dt.data;
-    }
-
-    toJSON() {
-        let json = {};
-        json.dt = this._dt.id;
-        json.f2v = Object.assign({}, this._field2value);
-        json.tuples = this._tuples.map(d => parseInt(d[MSCRowID].substring(1)));
-        return json;
-    }
-
-    isFullTable() {
-        return Object.keys(this._field2value).length === 0;
-    }
-
-    isEmpty() {
-        return this._tuples.length == 0;
-    }
-
-    get numTuples() {
-        return this._tuples.length;
-    }
-
-    get fields() {
-        return Object.keys(this._field2value);
-    }
-
-    get dataTable() {
-        return this._dt;
-    }
-
-    get filters() {
-        return this._field2value;
-    }
-
-    merge(ds) {
-        let r = new DataScope(this._dt);
-        for (let field in ds._field2value) {
-            r = r.cross(field, ds._field2value[field]);
-        }
-        for (let field in this._field2value) {
-            r = r.cross(field, this._field2value[field]);
-        }
-        return r;
-    }
-
-    cross(field, value) {
-        let ds = this.clone();
-        ds._field2value[field] = value;
-        ds._updateTuples(field, value);
-        return ds;
-    }
-
-    clone() {
-        let ds = new DataScope(this._dt);
-        ds._field2value = Object.assign({}, this._field2value);
-        ds._tuples = this._tuples.map(d => d);
-        return ds;
-    }
-
-    getFieldValue(field) {
-        let values = this._tuples.map(d => d[field]);
-        values = [...new Set(values)];
-        if (values.length > 1) {
-            //throw new Error(Errors.MULTIPLE_VALUES_PER_FIELD);
-            //TODO: how to handle this?
-        }
-        return values[0];
-    }
-
-    getUniqueFieldValues(field) {
-        let values = this._tuples.map(d => d[field]);
-        return [...new Set(values)];
-    }
-
-    hasField(field) {
-        return (field in this._field2value);
-    }
-
-    getFieldType(field) {
-        return this._dt.getFieldType(field);
-    }
-
-    aggregateNumericalField(field, aggregator) {
-        let values = this._tuples.map(d => d[field]);
-        switch (aggregator) {
-            case Aggregator.Max:
-                return Math.max(...values);
-            case Aggregator.Min:
-                return Math.min(...values);
-            case Aggregator.Avg:
-            case Aggregator.Mean:
-                return d3.mean(values);
-            case Aggregator.Median:
-                return d3.median(values);
-            case Aggregator.Count:
-                return values.length;
-            case Aggregator.Percentile25:
-                return d3.quantile(values, 0.25);
-            case Aggregator.Percentile75:
-                return d3.quantile(values, 0.75);
-            case Aggregator.Sum:
-            default:
-                return d3.sum(values);
-        }
-    }
-
-    _updateTuples(field, value) {
-        this._tuples = this._tuples.filter(d => d[field] == value);
-    }
-
-    get tuples() {
-        return this._tuples;
-    }
-}
-
-export const Aggregator = {
-    Max: "max",
-    Min: "min",
-    Avg: "avg",
-    Median: "median",
-    Sum: "sum",
-    Count: "count",
-    Mean: "mean",
-    Percentile25: "percentile 25",
-    Percentile75: "percentile 75"
-}