Skip to content

Commit

Permalink
Merge branch 'main' into 249-alternative-attribute-plots
Browse files Browse the repository at this point in the history
  • Loading branch information
@JakeWags
JakeWags authored Jul 25, 2024
2 parents b7d5f94 + eb1218b commit d6a230d
Show file tree
Hide file tree
Showing 17 changed files with 635 additions and 253 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,3 +162,4 @@ sketch
/docs/

# End of https://www.toptal.com/developers/gitignore/api/react,node,joed
.turbo/cookies/0.cookie
75 changes: 60 additions & 15 deletions e2e-tests/alttext.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@ test.beforeEach(async ({ page }) => {
test('Alt Text', async ({ page }) => {
await page.goto('http://localhost:3000/?workspace=Upset+Examples&table=simpsons&sessionId=193');

const altTextSidebarButton = await page.getByLabel('Open alt text sidebar');
const altTextSidebarButton = await page.getByLabel('Alt Text Sidebar', { exact: true });
await expect(altTextSidebarButton).toBeVisible();
await altTextSidebarButton.click();

const altTextSidebar = await page.getByLabel('Alt Text Sidebar', { exact: true });
const altTextSidebar = await page.getByLabel('Accessibility Sidebar', { exact: true });
await expect(altTextSidebar).toBeVisible();

const altTextHeading = await page.getByRole('heading', { name: 'Alt Text' });
const altTextHeading = await page.getByRole('heading', { name: 'Accessibility Sidebar' });
await expect(altTextHeading).toBeVisible();

/// /////////////////
Expand All @@ -75,27 +75,36 @@ test('Alt Text', async ({ page }) => {
/// /////////////////
// Plot Information
/// /////////////////
const plotInformation = await page.getByRole('button', { name: 'Plot Information' });
await expect(plotInformation).toBeVisible();
await plotInformation.click();

const editPlotInformationButton = await page.getByLabel('Toggle editable descriptions');
// Editing
const editPlotInformationButton = await page.getByLabel('Plot Information');
await expect(editPlotInformationButton).toBeVisible();
await editPlotInformationButton.click();

const datasetDescriptionInput = await page.getByPlaceholder('eg: movie genres and ratings');
const titleInput = await page.getByPlaceholder('Title');
await expect(titleInput).toBeVisible();
await expect(titleInput).toBeEditable();
await titleInput.click();
await titleInput.fill('upset plot');

const captionInput = await page.getByPlaceholder('Caption');
await expect(captionInput).toBeVisible();
await expect(captionInput).toBeEditable();
await captionInput.click();
await captionInput.fill('upset plot caption');

const datasetDescriptionInput = await page.getByPlaceholder('description of this dataset, eg: "movie genres and ratings');
await expect(datasetDescriptionInput).toBeVisible();
await expect(datasetDescriptionInput).toBeEditable();
await datasetDescriptionInput.click();
await datasetDescriptionInput.fill('Test dataset description');

const setsInput = await page.getByPlaceholder('eg: movie genres (dataset');
const setsInput = await page.getByPlaceholder('name for the sets in this data, eg: "movie genres');
await expect(setsInput).toBeVisible();
await expect(setsInput).toBeEditable();
await setsInput.click();
await setsInput.fill('Test sets value');

const itemsInput = await page.getByPlaceholder('eg: movies (dataset rows)');
const itemsInput = await page.getByPlaceholder('name for the items in this data, eg: "movies"');
await expect(itemsInput).toBeVisible();
await expect(itemsInput).toBeEditable();
await itemsInput.click();
Expand All @@ -105,18 +114,23 @@ test('Alt Text', async ({ page }) => {
await expect(plotInformationOutput).toBeVisible();
await expect(plotInformationOutput).toHaveText('This UpSet plot shows Test dataset description. The sets are Test sets value. The items are Test items value.');

await expect(page.getByLabel('Accessibility Sidebar')).toContainText('This UpSet plot shows Test dataset description. The sets are Test sets value. The items are Test items value.');
await page.getByRole('button', { name: 'Save' }).click();
await plotInformation.click();

// Display
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('upset plot');
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('upset plot caption');
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('This UpSet plot shows Test dataset description. The sets are Test sets value. The items are Test items value.');

/// /////////////////
// Short Description
/// /////////////////
await expect(page.getByText('This is an UpSet plot'))
.toContainText('This is an UpSet plot which shows set intersection of 6 sets out of 6 sets and the largest intersection is School, and Male (3). The plot is sorted by size and 12 non-empty intersections are shown.');
await page.getByRole('button', { name: 'Show More' }).click();
await page.getByRole('button', { name: 'Show Less' }).click();
await page.getByLabel("Display Long Description").click();
await page.getByLabel("Display Long Description").click();
await expect(page.getByText('This is an UpSet plot which')).toBeVisible();
await page.getByRole('button', { name: 'Show More' }).click();
await page.getByLabel("Display Long Description").click();

/// /////////////////
// Alt Text Output
Expand Down Expand Up @@ -169,4 +183,35 @@ test('Alt Text', async ({ page }) => {
await expect(trendAnalysis.heading).toBeVisible();
await expect(trendAnalysis.content).toBeVisible();
await expect(trendAnalysis.content).toHaveText(alttxt.trendAnalysis);

/// /////////////////
// User Description Test
/// /////////////////
await page.getByLabel('View User Description(s)').check();
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('No user-generated description available.');
await page.getByLabel('Display Long Description').uncheck();
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('No user-generated description available.');

// User short
await page.getByRole('button', { name: 'Edit Text Description' }).click();
await page.getByText('This is an UpSet plot which').click();
await page.getByText('This is an UpSet plot which').fill('This is an UpSet plot which shows set intersection of 6 sets out of 6 sets and the abcdefg largest intersection is School, and Male (3). The plot is sorted by size and 12 non-empty intersections are shown.');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('This is an UpSet plot which shows set intersection of 6 sets out of 6 sets and the abcdefg largest intersection is School, and Male (3). The plot is sorted by size and 12 non-empty intersections are shown.');

// User long, switching while editing
await page.getByRole('button', { name: 'Edit Text Description' }).click();
await page.getByLabel('Display Long Description').check();
await page.getByText('# UpSet Introduction This is').click();
await page.getByText('# UpSet Introduction This is').fill('# UpSet Introduction\nThis is an UpSet plot that visualizes set intersection. To learn about UpSet plots, visit https://upset.app.\n\n# Dataset Properties\nThe dataset contains 6 sets and 44 elements, of which 6 sets are shown in the plot.\n\n# Set Properties\nThe set sizes are diverging a lot, ranging from 3 to 18. The largest set is Male with 18 elements, followed by School with 6, Duff Fan with 6, Evil with 6, Power Plant with 5, and Blue Hair with 3.\n\n# Intersection Properties afdegb\nThe plot is sorted by size in ascending order. There are 12 non-empty intersections, all of which are shown in the plot. The largest 5 intersections are School, and Male (3), the empty intersection (3), Just Male (3), Duff Fan, Male, and Power Plant (3), and Evil, and Male (2).\n\n# Statistical Information\nThe average intersection size is 2, and the median is 2. The 90th percentile is 3, and the 10th percentile is 1. The largest set, Male, is present in 75.0% of all non-empty intersections. The smallest set, Blue Hair, is present in 16.7% of all non-empty intersections.\n\n# Trend Analysis\n The intersection sizes start from a value of 1 and then drastically rise up to 3. The empty intersection is present with a size of 3. An all set intersection is not present. The individual set intersections are large in size. The low degree set intersections lie in medium and largest sized intersections. The medium degree set intersections can be seen among small sized intersections. No high order intersections are present.\n\n');
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.locator('[id="Intersection\\ Properties\\ afdegb"]')).toContainText('Intersection Properties afdegb');

// Resetting descriptions
await page.getByRole('button', { name: 'Edit Text Description' }).click();
await page.getByRole('button', { name: 'Reset Descriptions' }).click();
await page.getByRole('button', { name: 'Save' }).click();
await expect(page.locator('[id="Intersection\\ Properties"]')).toContainText('Intersection Properties');
await page.getByLabel('Display Long Description').uncheck();
await expect(page.getByLabel('Accessibility Sidebar')).toContainText('This is an UpSet plot which shows set intersection of 6 sets out of 6 sets and the largest intersection is School, and Male (3). The plot is sorted by size and 12 non-empty intersections are shown.');
});
12 changes: 6 additions & 6 deletions e2e-tests/attributeSelector.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ test('Attribute Dropdown', async ({ page }) => {
// Age
/// /////////////////
// Deseslect and assert that it's removed from the plot
await page.getByLabel('Open attributes selection menu').click();
await page.getByLabel('Attributes selection menu').click();
await page.getByRole('checkbox', { name: 'Age' }).uncheck();
await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
await expect(page.getByLabel('Age').locator('rect')).toHaveCount(0);

// Reselect and assert that it's added back to the plot
await page.getByLabel('Open attributes selection menu').click();
await page.getByLabel('Attributes selection menu').click();
await page.getByLabel('Age').check();
await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
await expect(page.getByLabel('Age').locator('rect')).toBeVisible();
Expand All @@ -51,13 +51,13 @@ test('Attribute Dropdown', async ({ page }) => {
// Degree
/// /////////////////
// Deselect and assert that it's removed from the plot
await page.getByLabel('Open attributes selection menu').click();
await page.getByLabel('Attributes selection menu').click();
await page.getByRole('checkbox', { name: 'Degree' }).uncheck();
await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
await expect(page.locator('#upset-svg').getByLabel('Degree').locator('rect')).toHaveCount(0);

// Reselect and assert that it's added back to the plot
await page.getByLabel('Open attributes selection menu').click();
await page.getByLabel('Attributes selection menu').click();
await page.getByRole('checkbox', { name: 'Degree' }).check();
await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
await expect(page.locator('#upset-svg').getByLabel('Degree').locator('rect')).toBeVisible();
Expand All @@ -66,13 +66,13 @@ test('Attribute Dropdown', async ({ page }) => {
// Deviation
/// /////////////////
// Deselect and assert that it's removed from the plot
await page.getByLabel('Open attributes selection menu').click();
await page.getByLabel('Attributes selection menu').click();
await page.getByRole('checkbox', { name: 'Deviation' }).uncheck();
await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
await expect(page.getByLabel('Deviation', { exact: true }).locator('rect')).toHaveCount(0);

// Reselect and assert that it's added back to the plot
await page.getByLabel('Open attributes selection menu').click();
await page.getByLabel('Attributes selection menu').click();
await page.getByRole('checkbox', { name: 'Deviation' }).check();
await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
await expect(page.getByLabel('Deviation', { exact: true }).locator('rect')).toBeVisible();
Expand Down
2 changes: 1 addition & 1 deletion e2e-tests/elementView.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ test('Element View', async ({ page }) => {
await row.dispatchEvent('click');

// Open element view
await page.getByLabel('Open element view sidebar').click();
await page.getByLabel('Element View Sidebar Toggle').click();

// test expansion buttons
await page.getByLabel('Expand the sidebar in full').click();
Expand Down
14 changes: 7 additions & 7 deletions e2e-tests/provenance.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ test.beforeEach(async ({ page }) => {
*/
test('Selection History', async ({ page }) => {
await page.goto('http://localhost:3000/?workspace=Upset+Examples&table=simpsons&sessionId=193');
await page.getByLabel('Open additional options menu').click();
await page.getByLabel('Open history tree sidebar').click();
await page.getByLabel('Additional options menu').click();
await page.getByLabel('History tree sidebar').click();

const schoolIntersection = page.locator('#Subset_School > g:nth-child(3) > rect');
const duffFanIntersection = page.locator('[id="Subset_Duff_Fan\\~\\&\\~Male"] > g:nth-child(3) > rect');
Expand Down Expand Up @@ -68,11 +68,11 @@ test('Selection History', async ({ page }) => {
await expect(page.getByLabel('History Sidebar').getByText('Select intersection "School"')).toBeVisible();
// Check that deselection triggered by element view unbookmarking is reflected in history tree.
// Also tests that the bookmarking & unbookmarking is trracked
await page.getByLabel('Open element view sidebar').click();
await page.getByLabel('Element View Sidebar Toggle').click();
await page.locator('svg[data-testid="StarBorderIcon"]').click();
await page.locator('span.MuiChip-label+svg[data-testid="StarIcon"]').click();
await page.getByLabel('Open additional options menu').click();
await page.getByLabel('Open history tree sidebar').click();
await page.getByLabel('Additional options menu').click();
await page.getByLabel('History tree sidebar').click();

await expect(page.getByText('Unbookmark Duff Fan & Male')).toBeVisible();
await expect(page.getByText('Deselect intersection')).toBeVisible();
Expand All @@ -86,8 +86,8 @@ test('Selection History', async ({ page }) => {
*/
test('Overlap History', async ({ page }) => {
await page.goto('http://localhost:3000/?workspace=Upset+Examples&table=simpsons&sessionId=193');
await page.getByLabel('Open additional options menu').click();
await page.getByLabel('Open history tree sidebar').click();
await page.getByLabel('Additional options menu').click();
await page.getByLabel('History tree sidebar').click();

// Ensure that duplicate actions aren't recorded for decreasing first degree
await page.getByRole('radio', { name: 'Overlaps' }).check();
Expand Down
6 changes: 3 additions & 3 deletions packages/app/src/components/Footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const Footer = () => {
color="inherit"
size="medium"
disableElevation
aria-label="Open About Us modal"
aria-label="About Us"
aria-haspopup="dialog"
onClick={() => setAboutModal(true)}
>
Expand All @@ -39,7 +39,7 @@ const Footer = () => {
href="https://github.com/visdesignlab/upset2/issues"
target="_blank"
rel="noreferrer"
aria-label="Open GitHub issues for this project"
aria-label="GitHub issues for this project"
>
<Button
variant="contained"
Expand All @@ -59,7 +59,7 @@ const Footer = () => {
size="medium"
disableElevation
startIcon={<AccessibilityNew />}
aria-label="Open Accessibility Statement modal"
aria-label="Accessibility Statement"
aria-haspopup="dialog"
tabIndex={1}
onClick={() => setAccessibilityStatement(true)}
Expand Down
Loading

0 comments on commit d6a230d

Please sign in to comment.