-
-
-
-
-
-
+
+
+
+
+
+
FILTER:
FILTER2:
@@ -26,7 +32,7 @@
Int16,
Int32,
Dictionary,
- makeVector
+ makeVector,
} from 'apache-arrow';
const num_batches = 1;
window.RecordBatch = RecordBatch;
@@ -80,7 +86,7 @@
});
}
const batches = [];
- const SIZE = 65536
+ const SIZE = 65536;
for (let i = 0; i < n_batches; i++) {
const batch = make_batch(i * SIZE, SIZE);
batches.push(batch);
@@ -162,6 +168,7 @@
for (const i of [2, 3, 5, 7, 11, 13, 17]) {
const button = document.createElement('button');
button.textContent = `products of ${i}`;
+ button.setAttribute('data-testid', `products${i}`);
button.addEventListener('click', function () {
bindproductsOf(i);
const encoding = {};
@@ -178,28 +185,30 @@
id.appendChild(button);
}
}
- const id = document.getElementById("categorical");
+ const id = document.getElementById('categorical');
const button = document.createElement('button');
button.textContent = `Color by lowest prime factor`;
plot.ready.then(() => {
- plot._root.promise.then(dataset => {
- [2, 3, 5, 7, 11, 13, 17, 19].map(prime => {
- if (plot.dataset.transformations[`products of ${prime}`] === undefined) {
- bindproductsOf(prime)
+ plot._root.promise.then((dataset) => {
+ [2, 3, 5, 7, 11, 13, 17, 19].map((prime) => {
+ if (
+ plot.dataset.transformations[`products of ${prime}`] === undefined
+ ) {
+ bindproductsOf(prime);
}
- })
- })
- })
+ });
+ });
+ });
button.addEventListener('click', function () {
plot.dataset.transformations['lowest_prime'] = async function (tile) {
- const factors = {}
+ const factors = {};
const primes = [2, 3, 5, 7, 11, 13, 17];
- const labels = ["NA", "2", "3", "5", "7", "11", "13", "seventeen"]
+ const labels = ['NA', '2', '3', '5', '7', '11', '13', 'seventeen'];
const indices = new Int8Array(tile.record_batch.numRows);
- const lookups = []
+ const lookups = [];
for (const prime of primes) {
- lookups.push(await tile.get_column(`products of ${prime}`))
+ lookups.push(await tile.get_column(`products of ${prime}`));
}
outer: for (let i = 0; i < tile.record_batch.numRows; i++) {
for (let j = 0; j < lookups.length; j++) {
@@ -207,39 +216,39 @@
// console.log(i, j, lookups[j].get(i))
}
if (lookups[j].get(i) > 0) {
- indices[i] = j + 1
- continue outer
+ indices[i] = j + 1;
+ continue outer;
}
}
}
- console.log("YOOHOO")
- console.log({ indices, labels })
- const dicto = dictionaryFromArrays(indices, labels)
- console.log({ dicto })
- console.log(dicto.length, dicto.toArray())
- return dicto
- }
+ console.log('YOOHOO');
+ console.log({ indices, labels });
+ const dicto = dictionaryFromArrays(indices, labels);
+ console.log({ dicto });
+ console.log(dicto.length, dicto.toArray());
+ return dicto;
+ };
plot.plotAPI({
encoding: {
color: {
- field: "lowest_prime",
- range: 'dark2'
- }
- }
- })
- })
+ field: 'lowest_prime',
+ range: 'dark2',
+ },
+ },
+ });
+ });
id.appendChild(button);
{
- const id = document.getElementById("categorical");
+ const id = document.getElementById('categorical');
// colorize by factors
- const numbers = []
+ const numbers = [];
for (let i = 0; i < 1_000_000; i++) {
- numbers.push("" + i)
+ numbers.push('' + i);
}
- let dictionaryBuilder = undefined
+ let dictionaryBuilder = undefined;
const button = document.createElement('button');
button.textContent = `Color by individual numbers as factors`;
plot.ready.then(() => {
@@ -248,21 +257,22 @@
dictionaryBuilder = plot.util.dictionaryFromArrays(numbers);
}
button.addEventListener('click', function () {
- plot.dataset.transformations['dictionary number coloring'] = async function (tile) {
- const num = await tile.get_column("integers");
- console.log({ num })
- return dictionaryBuilder(num.toArray())
- }
+ plot.dataset.transformations['dictionary number coloring'] =
+ async function (tile) {
+ const num = await tile.get_column('integers');
+ console.log({ num });
+ return dictionaryBuilder(num.toArray());
+ };
plot.plotAPI({
encoding: {
color: {
- field: "dictionary number coloring",
- range: 'category10'
- }
- }
- })
- })
- })
+ field: 'dictionary number coloring',
+ range: 'category10',
+ },
+ },
+ });
+ });
+ });
id.appendChild(button);
}
});
@@ -359,21 +369,22 @@
plot.plotAPI({ encoding: { foreground: null, size: {} } })
);
-
function dictionaryFromArrays(indices, labels) {
const labelsArrow = vectorFromArray(labels, new Utf8());
let t;
if (indices[Symbol.toStringTag] === `Int8Array`) {
- t = new Int8()
+ t = new Int8();
} else if (indices[Symbol.toStringTag] === `Int16Array`) {
- t = new Int16()
+ t = new Int16();
} else if (indices[Symbol.toStringTag] === `Int32Array`) {
- t = new Int32()
+ t = new Int32();
} else {
- console.log(indices[Symbol.toStringTag])
- throw new Error("values must be an array of signed integers, 32 bit or smaller.")
+ console.log(indices[Symbol.toStringTag]);
+ throw new Error(
+ 'values must be an array of signed integers, 32 bit or smaller.'
+ );
}
- console.log({ indices }, indices.length)
+ console.log({ indices }, indices.length);
const type = new Dictionary(labelsArrow.type, t, 0, false);
const returnval = makeVector({
type,
@@ -382,7 +393,7 @@
data: indices,
dictionary: labelsArrow,
});
- return returnval
+ return returnval;
}
@@ -398,4 +409,4 @@
.tooltip {
transform: translate(-50%, -100%);
}
-
\ No newline at end of file
+
diff --git a/package-lock.json b/package-lock.json
index 2945496a4..ea02189d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "deepscatter",
- "version": "2.14.0",
+ "version": "2.15.0-RC-0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "deepscatter",
- "version": "2.14.0",
+ "version": "2.15.0-RC-0",
"license": "CC BY-NC-SA 4.0",
"dependencies": {
"d3-array": "^3.2.2",
diff --git a/tests/basic_display.spec.ts b/tests/basic_display.spec.ts
index 65b5ff9e9..40ee87029 100644
--- a/tests/basic_display.spec.ts
+++ b/tests/basic_display.spec.ts
@@ -1,4 +1,5 @@
import { test, expect } from '@playwright/test';
+// import { sleep } from './helpers';
test.beforeEach(async ({ page }) => {
page.on('console', (msg) => console.log(msg.text()));
diff --git a/tests/filters.spec.ts b/tests/filters.spec.ts
new file mode 100644
index 000000000..08686843b
--- /dev/null
+++ b/tests/filters.spec.ts
@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test';
+
+const sleep = async (timeout) => {
+ await new Promise((resolve) => setTimeout(resolve, timeout));
+};
+
+test.describe('Visual Regression', () => {
+ test.beforeEach(async ({ page }) => {
+ page.on('console', (msg) => console.log(msg.text()));
+ await page.goto('http://localhost:3344/integers.html');
+ // await page.waitForLoadState('networkidle');
+ await sleep(2000);
+ });
+
+ test('Primes', async ({ page }) => {
+ const primes = await page.getByTestId('primes');
+ await expect(primes).toBeVisible();
+ await primes.click();
+ await sleep(500);
+ await expect(page).toHaveScreenshot('primes.png');
+ });
+
+ test('Evens', async ({ page }) => {
+ const evens = await page.getByTestId('evens');
+ await expect(evens).toBeVisible();
+ await evens.click();
+ await sleep(500);
+ await expect(page).toHaveScreenshot('evens.png');
+ });
+
+ test('Products', async ({ page }) => {
+ // await page.locator('#filter').getByTestId('prodcuts5');
+ // await page.locator('#filter2').getByTestId('prodcuts5');
+
+ const prodcuts5 = await page.getByTestId('products5').first();
+ await expect(prodcuts5).toBeVisible();
+ await prodcuts5.click();
+ await sleep(500);
+ await expect(page).toHaveScreenshot('products.png');
+ });
+
+ // test('Screeen.', async ({ page }) => {
+ // await page.goto('http://localhost:3344/integers.html');
+ // await page.getByTestId('evens').click();
+ // await sleep(500);
+ // await expect(page).toHaveScreenshot('evens.png');
+ // });
+});
diff --git a/tests/filters.spec.ts-snapshots/evens-chromium-darwin.png b/tests/filters.spec.ts-snapshots/evens-chromium-darwin.png
new file mode 100644
index 000000000..a7f8c6d87
Binary files /dev/null and b/tests/filters.spec.ts-snapshots/evens-chromium-darwin.png differ
diff --git a/tests/filters.spec.ts-snapshots/primes-chromium-darwin.png b/tests/filters.spec.ts-snapshots/primes-chromium-darwin.png
new file mode 100644
index 000000000..b025ecb45
Binary files /dev/null and b/tests/filters.spec.ts-snapshots/primes-chromium-darwin.png differ
diff --git a/tests/filters.spec.ts-snapshots/products-chromium-darwin.png b/tests/filters.spec.ts-snapshots/products-chromium-darwin.png
new file mode 100644
index 000000000..c27dea350
Binary files /dev/null and b/tests/filters.spec.ts-snapshots/products-chromium-darwin.png differ