mascot-vis 3.0.0 → 3.0.1

package/tests/demo-tests/SVG2PNG.js

@@ -1,56 +0,0 @@
-import puppeteer from 'puppeteer';
-import fs from 'fs/promises'
-import path from 'path';
-
-
-import { fileURLToPath } from 'url';
-import { dirname } from 'path';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-const ioPath = path.join(__dirname, '..', '..', 'io');
-
-async function generatePNGs() {
-    const browser = await puppeteer.launch({ headless: "new" }); //"new"
-    const page = await browser.newPage();
-    const json = await fs.readFile("../../demos/static.json", 'utf8');
-    let demos = JSON.parse(json);
-    //let skip = ["IciclePlot", "Treemap", "TreemapBarChart", "Sunburst"];
-
-    await checkDirectory('../../io/svg_PNGs/');
-    for (const d in demos) {
-        if (demos[d].draft) continue;
-        if (d === "Isotype") continue;
-        //if (skip.includes(d)) continue;
-        console.log(d);
-
-        const s = await fs.readFile("../../io/scene/" + d + ".msc", 'utf8');
-        let scene = JSON.parse(s);
-        let wd = parseInt(scene.bounds.width/2 + scene.bounds.x) + 50,
-            ht = parseInt(scene.bounds.height/2 + scene.bounds.y) + 80;
-
-        const filePath = path.resolve(ioPath, 'svg', d + '.svg');
-        await page.setViewport({ width: wd, height: ht });
-        await page.goto('file://' + filePath);
-        await page.screenshot({ path: `../../io/svg_PNGs/${d}.png` });
-    }
-
-    await browser.close();
-}
-
-async function directoryExists(dirPath) {
-    try {
-        await fs.access(dirPath);
-        return true;
-    } catch {
-        return false;
-    }
-  }
-  
-  async function checkDirectory(dirPath) {
-    if (!(await directoryExists(dirPath))) {
-      await fs.mkdir(dirPath, { recursive: true });
-    }
-  }
-
-generatePNGs();

package/tests/demo-tests/demos2CanvasPNGs.js

@@ -1,69 +0,0 @@
-//const puppeteer = require('puppeteer');
-import puppeteer from 'puppeteer';
-import fs from 'fs/promises'
-//const fs = require('fs').promises;
-
-const rendererType = "webgl";
-
-async function main() {
-  const browser = await puppeteer.launch({ headless: "new" }); //false to debug
-  const page = await browser.newPage();
-
-  const json = await fs.readFile("../demos/static.json", 'utf8');
-  let demos = JSON.parse(json);
-
-  await checkDirectory('webgl_PNGs/');
-
-  for (const d in demos) {
-    if (demos[d].draft) continue;
-    if (d === "Isotype") continue;
-    console.log(d)
-
-    await page.goto('http://localhost:8020/io/index.html?executedBy='+ rendererType + '#' + d, { waitUntil: 'networkidle0' });
-
-    await page.waitForFunction((v) => window.demo == v, {}, d);
-    const scene = await page.evaluate(() => window.scene);
-
-    const canvas = await page.$('#canvasElement');
-
-    // saving canvas screenshot as png
-    let wd = parseInt(scene.bounds.width + scene.bounds.left) + 50,
-    ht = parseInt(scene.bounds.height + scene.bounds.top) + 80;
-
-    // take screenshot of specific area
-    const buffer = await canvas.screenshot({
-        clip: {
-            x:  0,
-            y:  0,
-            width: wd,
-            height: ht
-        }
-    });
-    await fs.writeFile(`webgl_PNGs/${d}.png`, buffer);
-
-  }
-
-  await browser.close();
-  
-}
-
-
-
-async function directoryExists(dirPath) {
-  try {
-      await fs.access(dirPath);
-      return true;
-  } catch {
-      return false;
-  }
-}
-
-async function checkDirectory(dirPath) {
-  if (!(await directoryExists(dirPath))) {
-    await fs.mkdir(dirPath, { recursive: true });
-  }
-}
-
-
-
-main();

package/tests/demo-tests/demos2ScenesSVGs.js

@@ -1,100 +0,0 @@
-//const puppeteer = require('puppeteer');
-import puppeteer from 'puppeteer';
-import fs from 'fs/promises'
-//const fs = require('fs').promises;
-
-const svgs = {}, scenes = {};
-const rendererType = "svg";
-
-async function main() {
-  const browser = await puppeteer.launch({ headless: "new" }); //set headless to false to debug, to "new" otherwise
-  const page = await browser.newPage();
-
-  const json = await fs.readFile("../../demos/static.json", 'utf8');
-  let demos = JSON.parse(json);
-  //let skip = ["IciclePlot", "Treemap", "TreemapBarChart", "Sunburst"];
-
-  for (const d in demos) {
-    if (demos[d].draft) continue;
-    if (d === "Isotype") continue;
-    //if (skip.includes(d)) continue;
-    console.log(d);
-
-    await page.goto('http://localhost:8020/tests/demo-tests/renderDemos.html?executedBy='+ rendererType + '#' + d, { waitUntil: 'networkidle0' });
-
-    await page.waitForFunction((v) => window.demo == v, {}, d);
-
-    const scene = await page.evaluate(() => window.scene);
-    scenes[d] = scene;
-
-    const svg = await page.$('#svgElement'); // selector for the element
-    const text = await page.evaluate(s => s.outerHTML, svg);
-    svgs[d] = text;
-  }
-
-  //console.log(window.serializationTest);
-
-  await browser.close();
-
-  writeScenes();
-  writeSVGs();
-}
-
-async function writeScenes() {
-  await checkDirectory('../../io/scene/');
-  //await checkDirectory('annotation/');
-  for (let d in scenes) {
-    let scene = scenes[d];
-    //let annotation = {ID: scene.id, type: "scene", children: []};
-    // for (let c of scene.children)
-    //   annotate(c, annotation.children);  
-    fs.writeFile('../../io/scene/' + d + '.msc', JSON.stringify(scene));
-    //fs.writeFile('annotation/' + d + '.json', JSON.stringify(annotation));
-  }
-}
-
-async function writeSVGs() {
-  await checkDirectory('../../io/svg/');
-  for (let d in svgs) {
-    let scene = scenes[d];
-    let wd = parseInt(scene.bounds.width)/2 + parseInt(scene.bounds.x) + 50,
-      ht = parseInt(scene.bounds.height)/2 + parseInt(scene.bounds.y) + 80;
-    const sizeInfo = `width="${wd}" height="${ht}" `;
-    const content = svgs[d].replace('xmlns:xlink', sizeInfo + 'xmlns:xlink');
-    fs.writeFile('../../io/svg/' + d + '.svg', content);
-  }
-}
-
-async function directoryExists(dirPath) {
-  try {
-      await fs.access(dirPath);
-      return true;
-  } catch {
-      return false;
-  }
-}
-
-async function checkDirectory(dirPath) {
-  if (!(await directoryExists(dirPath))) {
-    await fs.mkdir(dirPath, { recursive: true });
-  }
-}
-
-// function annotate(node, result) {
-//   let n = {ID: node.id, type: node.type};
-//   switch (node.type) {
-//       case "collection":
-//           n.layout = node.layout? node.layout : {type: "none"}; 
-//           break;
-//       default:
-//           break;
-//   }
-//   result.push(n);
-//   if (node.children && node.children.length > 0) {
-//       n.children = [];
-//       for (let c of node.children)
-//           annotate(c, n.children);
-//   }
-// }
-
-main();

package/tests/demo-tests/pathElementWorker.js

@@ -1,91 +0,0 @@
-const puppeteer = require('puppeteer');
-const fs = require('fs').promises;
-const path = require('path');
-
-async function main() {
-    const browser = await puppeteer.launch({ headless: "new" }); //"new"
-    const page = await browser.newPage();
-    const json = await fs.readFile("../demos/static.json", 'utf8');
-    let demos = JSON.parse(json);
-
-    //demos = { 'CyclePlot': 21 };
-
-    let marks = {};
-    for (const d in demos) {
-        if (demos[d].draft) continue;
-        if (d === "Isotype") continue;
-        const s = await fs.readFile("scene/" + d + ".msc", 'utf8');
-        let scene = JSON.parse(s);
-
-        const filePath = path.resolve(__dirname, 'svg', d + '.svg');
-        await page.goto('file://' + filePath);
-        await buildMarkHash(scene, page, marks, d);
-    }
-
-    await browser.close();
-
-    let data = [["d", "type", "attrs"].join("\t") + "\n"];
-    for (let k in marks) {
-        data.push(marks[k].d + "\t" + marks[k].type + "\t" + JSON.stringify(marks[k].attrs) + "\n");
-    }
-
-    await checkDirectory('pathElements/');
-    fs.writeFile('pathElements/pathMarks.tsv', data, (err) => {
-        if (err) throw err;
-      });
-}
-
-async function buildMarkHash(scene, page, marks, demo) {
-    for (let c of scene.children)
-        await getMarks(c, marks, page, demo);
-}
-
-async function getMarks(c, marks, page, demo) {
-    let shapes = ['path', 'line', 'arc', 'pie', 'ring', 'polygon', 'area', 'link'];
-    if (c.children && c.type !== "axis" && c.type !== "gridlines" && c.type !== "legend") {
-        for (let child of c.children)
-            await getMarks(child, marks, page, demo);
-    } else if (shapes.indexOf(c.type) >= 0) {
-        let element = await page.$('#' + c.id);
-        let v = await page.evaluate((el, attributeName) => el.getAttribute(attributeName), element, 'd');
-        let attrs = getMarkAttrs(c);
-        marks[demo+"-"+c.id] = { "type": c.type, "d": v, "attrs": attrs };
-    }
-}
-
-function getMarkAttrs(m) {
-    switch (m.type) {
-        case "arc":
-            return {"cx": m.args.x, 'cy': m.args.y, "innerRadius": m.args.innerRadius, "outerRadius": m.args.outerRadius, "startAngle": m.args.startAngle, "endAngle": m.args.endAngle};
-        case "pie":
-            return {"cx": m.args.x, 'cy': m.args.y, "radius": m.args.outerRadius, "startAngle": m.args.startAngle, "endAngle": m.args.endAngle};
-        case "ring":
-            return {"cx": m.args.x, 'cy': m.args.y, "innerRadius": m.args.innerRadius, "outerRadius": m.args.outerRadius};
-        case "polygon":
-            return {"cx": m.args.x, 'cy': m.args.y, "radius": m.args.radius, "numPts": m.vertices.length};
-        case "link": 
-            return {"mode": m.mode, "sourceAnchor": m.args.sourceAnchor, "targetAnchor": m.args.targetAnchor, "sourceOffset": m.args.sourceOffset, "targetOffset": m.args.targetOffset};
-        case "area":
-        case "line":
-        case "path":
-        default:
-            return {"numPts": m.vertices.length};
-    }
-}
-
-async function directoryExists(dirPath) {
-    try {
-        await fs.access(dirPath);
-        return true;
-    } catch {
-        return false;
-    }
-  }
-  
-  async function checkDirectory(dirPath) {
-    if (!(await directoryExists(dirPath))) {
-      await fs.mkdir(dirPath, { recursive: true });
-    }
-  }
-
-main();

package/tests/demo-tests/pixelTest.js

@@ -1,62 +0,0 @@
-//const fs = require('fs').promises;
-//const PNG = require('pngjs').PNG;
-//const pixelmatch = require('pixelmatch');
-//const process = require('process');
-import fs from 'fs/promises';
-import { PNG } from 'pngjs';
-import pixelmatch from 'pixelmatch';
-
-const executedBy = process.argv[2];
-
-try {
-    checkFormat(executedBy); // This will throw an error if no argument is provided or if the argument is not 'webgl' or 'svg'.
-} catch (error) {
-    console.error(error.message);
-    process.exit(1);
-}
-
-comparePNGs();
-
-async function comparePNGs() {
-    const json = await fs.readFile("../../demos/static.json", 'utf8');
-    let demos = JSON.parse(json);
-    let diff_count = 0, failed = [];
-    //let skip = ["IciclePlot", "Treemap", "TreemapBarChart", "Sunburst"];
-
-    for (const d in demos) {
-        if (demos[d].draft || d == "Isotype") continue;
-        //if (skip.includes(d)) continue;
-        console.log("testing", d);
-        const data1 = await fs.readFile("../../io/demoScreenshots/" + executedBy + '/' + d + ".png");
-        const data2 = await fs.readFile("../../io/" + executedBy + "_PNGs/" + d + ".png");
-        const img1 = PNG.sync.read(data1);
-        const img2 = PNG.sync.read(data2);
-
-        const { width, height } = img1;
-        const diff = new PNG({ width, height });
-
-        // Compare the images
-        const numDiffPixels = pixelmatch(
-            img1.data, img2.data, diff.data, width, height,
-            { threshold: 0.1 }
-        );
-
-        if (numDiffPixels !== 0) {
-            console.log(d, "different");
-            diff_count += 1;
-            failed.push(d);
-        }
-
-    }
-    console.log("Total mismatches: ", diff_count, failed);
-}
-
-function checkFormat(format) {
-    if (!format) {
-      throw new Error("No argument provided. You must provide 'webgl' or 'svg' as the argument.");
-    } else if (format !== "webgl" && format !== "svg") {
-      throw new Error("Invalid format. Argument format must be 'webgl' or 'svg'.");
-    }
-    // If the format is valid, continue with your logic
-    console.log(`Format '${format}' is valid.`);
-  }

package/tests/demo-tests/renderDemos.html

@@ -1,132 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8" />
-    <title>msc</title>
-    <script src="../../lib/pixi.min.js"></script>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-    <script src="../../dist/mascot-min.js"></script>
-    <script src="../../lib/acorn.js"></script>
-    <style>
-        html {
-            margin: 0px;
-            padding: 0px;
-            height: 100%;
-            font-family: Arial;
-        }
-
-        body {
-            height: 100vh;
-            width: 100%;
-            margin: 0px;
-            padding: 0px;
-            background: #f2f2f2;
-            overflow-x: hidden;
-            overflow-y: hidden;
-        }
-
-        #svgElement {
-            width: 1600px;
-            height: 1000px;
-            margin: 0;
-            padding: 0;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-
-        #canvasElement {
-            width: 1600;
-            height: 1000;
-            margin: 0;
-            padding: 0;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-    </style>
-</head>
-
-<body>
-    <canvas id="canvasElement"></canvas>
-    <svg id="svgElement" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
-    <script>
-        function loadScript(s, demo, renderer, dest, flatten) {
-            let script = s;
-            // eslint-disable-next-line no-undef
-            let parsed = acorn.parse(script, { ecmaVersion: "latest" });
-            let blocks = parsed.body.map((d) => script.substring(d.start, d.end));
-
-            //find lines with renderer and remove them
-            blocks = blocks.filter((l) => l.indexOf("render") < 0);
-            //add renderer lines
-            let sceneName = blocks
-                .filter((l) => l.indexOf("msc.scene(") > 0)[0]
-                .split("=")[0]
-                .replace("let", " ")
-                .trim();
-
-            let newScript =
-                blocks.join("\n") + "\n" +
-                "let renderer = msc.renderer('" + renderer + "','" + dest + "');\n" +
-                "renderer.clear();\n" +
-                (flatten ? "renderer.render(" + sceneName + ", {flatten: true});\n" : "renderer.render(" + sceneName + ");\n") +
-                // "let json = msc.serialize(" + sceneName + ");\n" + 
-                // "let obj = msc.deserialize(json);\n" + 
-                // "let equal = msc.isEqual(" + sceneName + ", obj);\n" + 
-                // "return [" + sceneName + ", equal]";
-                "return msc.serialize(" + sceneName + ");";
-
-            newScript = makeAsync(newScript);
-            //window.serializationTest = {};
-            let scn = eval(newScript);
-            scn.then(r => {
-                // window.scene = r[0];
-                // window.serializationTest[demo] = r[1]; 
-                window.scene = r;
-                window.demo = demo;
-            });
-        }
-
-        function makeAsync(s) {
-            // let c =
-            //   "try {\n" +
-            //   s +
-            //   "\n} catch (err) {showError(err.name ? err.name + ': ' + err.message : undefined, 0, 0, 0, err);}";
-            return "(async () => {" + s + "})();";
-        }
-
-        // eslint-disable-next-line no-unused-vars
-        // rendererType: "webgl" or "svg"
-        // rendererElemID: "canvasElement" or "svgElement"
-        function refresh() {
-            const params = new URLSearchParams(window.location.search);
-            const executedBy = params.get('executedBy');
-            if (executedBy == 'webgl') {
-                refreshAux('webgl', 'canvasElement')
-            } else {
-                refreshAux('svg', 'svgElement')
-            }
-        }
-
-        function refreshAux(rendererType, rendererElemID) {
-            let demo = window.location.hash.replace("#", "");
-            if (demo && demo != "") {
-                console.log(demo)
-                var oReq = new XMLHttpRequest();
-                oReq.addEventListener("load", function () {
-                    loadScript(this.responseText, demo, rendererType, rendererElemID);
-                });
-                oReq.open("GET", "../../demos/static/" + demo[0].toLowerCase() + demo.substring(1) + ".js");
-                oReq.send();
-            }
-        }
-
-        window.scene = {};
-        window.onhashchange = refresh;
-        window.onload = refresh;
-    </script>
-</body>
-
-</html>

package/tests/demo-tests/serializationTest.js

@@ -1,36 +0,0 @@
-import puppeteer from 'puppeteer';
-import fs from 'fs/promises'
-
-const scenes = {};
-const rendererType = "svg";
-
-async function main() {
-  const browser = await puppeteer.launch({ headless: "new" }); //set headless to false to debug, to "new" otherwise
-  const page = await browser.newPage();
-
-  const json = await fs.readFile("../../demos/static.json", 'utf8');
-  let demos = JSON.parse(json);
-  //let skip = ["IciclePlot", "Treemap", "TreemapBarChart", "Sunburst"];
-  let failed = [];
-
-  for (const d in demos) {
-    if (demos[d].draft) continue;
-    if (d === "Isotype") continue;
-    //if (skip.includes(d)) continue;
-    console.log(d);
-
-    await page.goto('http://localhost:8020/tests/demo-tests/serializeDemos.html?executedBy=' + rendererType + '#' + d, { waitUntil: 'networkidle0' });
-
-    await page.waitForFunction((v) => window.demo == v, {}, d);
-
-    const result = await page.evaluate(() => window.serializationTest);
-    scenes[d] = result;
-    if (!result)
-      failed.push(d);
-  }
-
-  await browser.close();
-  console.log(failed.length, "failed: ", failed);
-}
-
-main();

package/tests/demo-tests/serializeDemos.html

@@ -1,134 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <meta charset="utf-8" />
-    <title>msc</title>
-    <script src="../../lib/pixi.min.js"></script>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-    <script src="../../dist/mascot-min.js"></script>
-    <script src="../../lib/acorn.js"></script>
-    <style>
-        html {
-            margin: 0px;
-            padding: 0px;
-            height: 100%;
-            font-family: Arial;
-        }
-
-        body {
-            height: 100vh;
-            width: 100%;
-            margin: 0px;
-            padding: 0px;
-            background: #f2f2f2;
-            overflow-x: hidden;
-            overflow-y: hidden;
-        }
-
-        #svgElement {
-            width: 1600px;
-            height: 1000px;
-            margin: 0;
-            padding: 0;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-
-        #canvasElement {
-            width: 1600;
-            height: 1000;
-            margin: 0;
-            padding: 0;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-    </style>
-</head>
-
-<body>
-    <canvas id="canvasElement"></canvas>
-    <svg id="svgElement" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
-    <script>
-        function loadScript(s, demo, renderer, dest, flatten) {
-            let script = s;
-            // eslint-disable-next-line no-undef
-            let parsed = acorn.parse(script, { ecmaVersion: "latest" });
-            let blocks = parsed.body.map((d) => script.substring(d.start, d.end));
-
-            //find lines with renderer and remove them
-            blocks = blocks.filter((l) => l.indexOf("render") < 0);
-            //add renderer lines
-            let sceneName = blocks
-                .filter((l) => l.indexOf("msc.scene(") > 0)[0]
-                .split("=")[0]
-                .replace("let", " ")
-                .trim();
-
-            let newScript =
-                blocks.join("\n") + "\n" +
-                "let renderer = msc.renderer('" + renderer + "','" + dest + "');\n" +
-                "renderer.clear();\n" +
-                (flatten ? "renderer.render(" + sceneName + ", {flatten: true});\n" : "renderer.render(" + sceneName + ");\n") +
-                "\nlet json = msc.serialize(" + sceneName + ");" + 
-                "\nlet loadedScn = msc.deserialize(json);" + 
-                "\n return msc.isEqual(" + sceneName + ", loadedScn);"
-                // "let json = msc.serialize(" + sceneName + ");\n" + 
-                // "let obj = msc.deserialize(json);\n" + 
-                // "let equal = msc.isEqual(" + sceneName + ", obj);\n" + 
-                // "return [" + sceneName + ", equal]";
-                //"return msc.serialize(" + sceneName + ");";
-
-            newScript = makeAsync(newScript);
-            //window.serializationTest = {};
-            let scn = eval(newScript);
-            scn.then(r => {
-                // window.scene = r[0];
-                // window.serializationTest[demo] = r[1]; 
-                window.serializationTest = r;
-                window.demo = demo;
-            });
-        }
-
-        function makeAsync(s) {
-            // let c =
-            //   "try {\n" +
-            //   s +
-            //   "\n} catch (err) {showError(err.name ? err.name + ': ' + err.message : undefined, 0, 0, 0, err);}";
-            return "(async () => {" + s + "})();";
-        }
-
-        // eslint-disable-next-line no-unused-vars
-        // rendererType: "webgl" or "svg"
-        // rendererElemID: "canvasElement" or "svgElement"
-        function refresh() {
-            const params = new URLSearchParams(window.location.search);
-            const executedBy = params.get('executedBy');
-            if (executedBy == 'webgl') {
-                refreshAux('webgl', 'canvasElement')
-            } else {
-                refreshAux('svg', 'svgElement')
-            }
-        }
-
-        function refreshAux(rendererType, rendererElemID) {
-            let demo = window.location.hash.replace("#", "");
-            if (demo && demo != "") {
-                console.log(demo)
-                var oReq = new XMLHttpRequest();
-                oReq.addEventListener("load", function () {
-                    loadScript(this.responseText, demo, rendererType, rendererElemID);
-                });
-                oReq.open("GET", "../../demos/static/" + demo[0].toLowerCase() + demo.substring(1) + ".js");
-                oReq.send();
-            }
-        }
-
-        window.onhashchange = refresh;
-        window.onload = refresh;
-    </script>
-</body>
-
-</html>

package/tests/unit-tests/README.md

@@ -1,4 +0,0 @@
-## Run Tests
-Mascot uses [Jasmine](https://jasmine.github.io/setup/nodejs.html) for unit testing using Node.js. For tests on the demos, check out the `demo-tests` folder. Before running the tests, make sure to build the project with `npm run build`. 
-
-All the unit tests are in the `unit-tests` folder. To run the tests, do `npm run start` first, then `npm test`.