Skip to content

[RFR] visual filter tests #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[RFR] visual filter tests #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 71 additions & 60 deletions integers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
<body>
<div class="buttons">
<button id="prime">Highlight Primes</button>
<button id="even">Highlight Even</button>
<button id="even2">Stable highlight Even</button>
<button id="b">Clear</button>
<button id="select-ids">Select ids</button>
<input id="input-ids" title="selection" label="selection" type="text" value="1066 1968 2431 10012" />
<button id="prime" data-testid="primes">Highlight Primes</button>
<button id="even" data-testid="evens">Highlight Even</button>
<button id="even2" data-testid="evens2">Stable highlight Even</button>
<button id="b" data-testid="clear">Clear</button>
<button id="select-ids" data-testid="select-ids">Select ids</button>
<input
id="input-ids"
title="selection"
label="selection"
type="text"
value="1066 1968 2431 10012"
/>
<button id="select-lots-of-ids">Select lots of ids</button>
<div id="filter">FILTER:</div>
<div id="filter2">FILTER2:</div>
Expand All @@ -26,7 +32,7 @@
Int16,
Int32,
Dictionary,
makeVector
makeVector,
} from 'apache-arrow';
const num_batches = 1;
window.RecordBatch = RecordBatch;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 = {};
Expand All @@ -178,68 +185,70 @@
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++) {
if (i < 10) {
// 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(() => {
Expand All @@ -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);
}
});
Expand Down Expand Up @@ -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,
Expand All @@ -382,7 +393,7 @@
data: indices,
dictionary: labelsArrow,
});
return returnval
return returnval;
}
</script>

Expand All @@ -398,4 +409,4 @@
.tooltip {
transform: translate(-50%, -100%);
}
</style>
</style>
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions tests/basic_display.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()));
Expand Down
48 changes: 48 additions & 0 deletions tests/filters.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variable prodcuts5 appears to be misspelled - it should be products5 to match the data-testid attribute defined in integers.html. This will help maintain consistency between the test and the component being tested.

Spotted by Graphite Reviewer

Is this helpful? React 👍 or 👎 to let us know.

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');
// });
});
Binary file added tests/filters.spec.ts-snapshots/evens-chromium-darwin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tests/filters.spec.ts-snapshots/primes-chromium-darwin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added tests/filters.spec.ts-snapshots/products-chromium-darwin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.