UI redo dec 24

README.md

@@ -211,6 +211,7 @@ const main = () => {
 - `provVis` (optional): [Sidebar options](#sidebar-options) for the provenance visualization sidebar. See [Trrack-Vis](https://github.com/Trrack/trrackvis) for more information about Trrack provenance visualization.
 - `elementSidebar` (optional): [Sidebar options](#sidebar-options) for the element visualization sidebar. This sidebar is used for element queries, element selection datatable, and supplimental plot generation.
 - `altTextSidebar` (optional): [Sidebar options](#sidebar-options) for the text description sidebar. This sidebar is used to display the generated text descriptions for an Upset 2.0 plot, given that the `generateAltText` function is provided.
+- `footerHeight` (optional)(`number`): Height of the footer overlayed on the upset plot, in px, if one exists. Used to prevent the bottom of the sidebars from overlapping with the footer.
 - `generateAltText` (optional)(`() => Promise<AltText>`): Async function which should return a generated AltText object. See [Alt Text Generation](#alt-text-generation) for more information about Alt Text generation.
 
 ##### Configuration (Grammar) options

e2e-tests/attributeSelector.spec.ts

@@ -3,51 +3,53 @@ import { beforeTest } from './common';
 
 test.beforeEach(beforeTest);
 
+/**
+ * Selects or deselects an attribute from the attribute dropdown
+ * @param page the page to interact with
+ * @param attributeName the name of the attribute to toggle
+ * @param checked whether to select or deselect the attribute
+ */
+async function toggleAttribute(page, attributeName, checked) {
+  await page.getByLabel('Attributes').first().click();
+  await page.getByRole('option', { name: attributeName }).getByRole('checkbox').setChecked(checked);
+  await page.locator('#menu- > .MuiBackdrop-root').click();
+}
+
 test('Attribute Dropdown', async ({ page }) => {
   await page.goto('http://localhost:3000/?workspace=Upset+Examples&table=simpsons&sessionId=193');
 
   /// /////////////////
   // Age
   /// /////////////////
   // Deseslect and assert that it's removed from the plot
-  await page.getByLabel('Attributes selection menu').click();
-  await page.getByRole('checkbox', { name: 'Age' }).uncheck();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
+  await toggleAttribute(page, 'Age', false);
   await expect(page.getByLabel('Age').locator('rect')).toHaveCount(0);
 
   // Reselect and assert that it's added back to the plot
-  await page.getByLabel('Attributes selection menu').click();
-  await page.getByLabel('Age').check();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
-  await expect(page.getByText('Age', { exact: true })).toBeVisible();
+  await toggleAttribute(page, 'Age', true);
+  // This doesn't make sense but it works to find the Age column header
+  await expect(page.locator('g').filter({ hasText: /^Age2020404060608080$/ }).locator('rect')).toBeVisible();
 
   /// /////////////////
   // Degree
   /// /////////////////
   // Deselect and assert that it's removed from the plot
-  await page.getByLabel('Attributes selection menu').click();
-  await page.getByRole('checkbox', { name: 'Degree' }).uncheck();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
+  await toggleAttribute(page, 'Degree', false);
   await expect(page.locator('#upset-svg').getByLabel('Number of intersecting sets').locator('rect')).toHaveCount(0);
 
   // Reselect and assert that it's added back to the plot
-  await page.getByLabel('Attributes selection menu').click();
-  await page.getByRole('checkbox', { name: 'Degree' }).check();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
+  await toggleAttribute(page, 'Degree', true);
   await expect(page.locator('#upset-svg').getByLabel('Number of intersecting sets').locator('rect')).toBeVisible();
 
   /// /////////////////
   // Deviation
   /// /////////////////
   // Deselect and assert that it's removed from the plot
-  await page.getByLabel('Attributes selection menu').click();
-  await page.getByRole('checkbox', { name: 'Deviation' }).uncheck();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
+  await toggleAttribute(page, 'Deviation', false);
   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('Attributes selection menu').click();
-  await page.getByRole('checkbox', { name: 'Deviation' }).check();
-  await page.locator('.MuiPopover-root > .MuiBackdrop-root').click();
-  await expect(page.getByText('Deviation', { exact: true })).toBeVisible();
+  await toggleAttribute(page, 'Deviation', true);
+  // This also doesn't make sense but uniquely selects the Deviation column header
+  await expect(page.locator('g').filter({ hasText: /^#Deviation-10%-10%-5%-5%0%0%5%5%10%10%Age2020404060608080$/ }).locator('rect').nth(1)).toBeVisible();
 });

e2e-tests/datatable.spec.ts

@@ -9,8 +9,9 @@ test('Datatable', async ({ page }) => {
   // //////////////////
   // Open the datatable
   // //////////////////
+  await page.getByLabel('Additional options menu').click();
   const page1Promise = page.waitForEvent('popup');
-  await page.getByRole('button', { name: 'Data Table' }).click();
+  await page.getByLabel('Data Tables (raw and computed)').click();
 
   // //////////////////
   // Test downloads

e2e-tests/elementView.spec.ts

@@ -59,7 +59,7 @@ test('Element View', async ({ page, browserName }) => {
   await row.dispatchEvent('click');
 
   // test expansion buttons
-  await page.getByLabel('Expand the sidebar in full').click();
+  await page.getByRole('button', { name: 'Expand the sidebar in full' }).click();
   await page.getByLabel('Reduce the sidebar to normal').click();
 
   // Ensure all headings are visible
@@ -78,8 +78,9 @@ test('Element View', async ({ page, browserName }) => {
 
   // Check that the datatable is visible and populated
   const dataTable = page.getByText(
-    'LabelAgeSchoolBlue HairDuff FanEvilMalePower PlantBart10yesnononoyesnoRalph8yesnononoyesnoMartin Prince10yesnononoyesnoRows per page:1001–3 of',
+    'LabelDegreeDeviationAgeSchoolBlue HairDuff FanEvilBart10yesnononoRalph8yesnononoMartin Prince10yesnononoRows per page:1001–3 of',
   );
+  dataTable.scrollIntoViewIfNeeded();
   await expect(dataTable).toBeVisible();
   const nameCell = await page.getByRole('cell', { name: 'Bart' });
   await expect(nameCell).toBeVisible();
@@ -122,7 +123,7 @@ test('Element View', async ({ page, browserName }) => {
   await downloadPromise;
 
   // Check that the close button is visible and works
-  const elementViewClose = await page.getByLabel('Close the sidebar');
+  const elementViewClose = await page.getByRole('button', { name: 'Close the sidebar' });
   await expect(elementViewClose).toBeVisible();
   await elementViewClose.click();
 

e2e-tests/provenance.spec.ts

@@ -24,9 +24,11 @@ test('Selection History', async ({ page }) => {
 
   // Testing history for an aggregate row selection & deselection
   await page.getByRole('radio', { name: 'Degree' }).check();
-  await page.locator('g').filter({ hasText: /^Degree 3Degree 3$/ }).locator('rect').nth(0).click();
+  await page.locator('g').filter({ hasText: /^Degree 3Degree 3$/ }).locator('rect').nth(0)
+    .click();
   await expect(page.locator('div').filter({ hasText: /^Select intersection "Degree 3"$/ }).nth(2)).toBeVisible();
-  await page.locator('g').filter({ hasText: /^Degree 3Degree 3$/ }).locator('rect').nth(0).click();
+  await page.locator('g').filter({ hasText: /^Degree 3Degree 3$/ }).locator('rect').nth(0)
+    .click();
   await expect(page.getByText('Deselect intersection').nth(1)).toBeVisible();
 
   // Check that selections are maintained after de-aggregation

packages/app/.eslintrc.js

@@ -0,0 +1,72 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:import/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'airbnb',
+    'plugin:import/typescript',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 13,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint'],
+  root: true,
+  rules: {
+    'react/jsx-filename-extension': [
+      2,
+      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+    ],
+    'import/prefer-default-export': 'off',
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: ['.storybook/**', '**/stories/**'],
+      },
+    ],
+    'react/function-component-definition': 'off',
+    'no-plusplus': ['warn', { allowForLoopAfterthoughts: true }],
+    'dot-notation': 'off',
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+    'react/jsx-props-no-spreading': 'off',
+    'react/require-default-props': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-wrap-multilines': 'off',
+    'react/no-unknown-property': 'off',
+    'operator-linebreak': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+    '@typescript-eslint/no-explicit-any': 'off',
+    'max-len': 'off',
+    'no-unused-vars': 'off',
+    'no-param-reassign': 'off',
+    'import/no-cycle': 'off',
+    'no-underscore-dangle': 'off',
+    'no-nested-ternary': 'off',
+    'jsx-a11y/tabindex-no-positive': 'off',
+    'no-bitwise': 'warn',
+  },
+};

packages/app/src/App.tsx

@@ -1,17 +1,21 @@
-import { createContext, useEffect, useMemo, useState } from 'react';
+import {
+  createContext, useEffect, useMemo, useState,
+} from 'react';
 
-import { UpsetProvenance, UpsetActions, getActions, initializeProvenanceTracking } from '@visdesignlab/upset2-react';
+import {
+  UpsetProvenance, UpsetActions, getActions, initializeProvenanceTracking,
+} from '@visdesignlab/upset2-react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { convertConfig, DefaultConfig, UpsetConfig } from '@visdesignlab/upset2-core';
+import { CircularProgress } from '@mui/material';
+import { ProvenanceGraph } from '@trrack/core/graph/graph-slice';
 import { dataSelector, encodedDataAtom } from './atoms/dataAtom';
 import { Root } from './components/Root';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { DataTable } from './components/DataTable';
-import { convertConfig, DefaultConfig, UpsetConfig } from '@visdesignlab/upset2-core';
 import { configAtom } from './atoms/configAtoms';
 import { queryParamAtom } from './atoms/queryParamAtom';
 import { getMultinetSession } from './api/session';
-import { CircularProgress } from '@mui/material';
-import { ProvenanceGraph } from '@trrack/core/graph/graph-slice';
 
 /** @jsxImportSource @emotion/react */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -29,60 +33,60 @@ function App() {
   const multinetData = useRecoilValue(dataSelector);
   const encodedData = useRecoilValue(encodedDataAtom);
   const setState = useSetRecoilState(configAtom);
-  const data = (encodedData === null) ? multinetData : encodedData
+  const data = (encodedData === null) ? multinetData : encodedData;
   const { workspace, sessionId } = useRecoilValue(queryParamAtom);
   const [sessionState, setSessionState] = useState<SessionState>(null); // null is not tried to load, undefined is tried and no state to load, and value is loaded value
 
   const conf = useMemo(() => {
-    const config: UpsetConfig = { ...DefaultConfig }
+    const config: UpsetConfig = { ...DefaultConfig };
     if (data !== null) {
-      const conf: UpsetConfig = JSON.parse(JSON.stringify(config))
+      const newConf: UpsetConfig = JSON.parse(JSON.stringify(config));
       if (config.visibleSets.length === 0) {
         const setList = Object.entries(data.sets);
-        conf.visibleSets = setList.slice(0, defaultVisibleSets).map((set) => set[0]) // get first 6 set names
-        conf.allSets = setList.map((set) => {return { name: set[0], size: set[1].size }})
+        newConf.visibleSets = setList.slice(0, defaultVisibleSets).map((set) => set[0]); // get first 6 set names
+        newConf.allSets = setList.map((set) => ({ name: set[0], size: set[1].size }));
       }
 
       // Add first 4 attribute columns (deviation + 3 attrs) to visibleAttributes
-      conf.visibleAttributes = [...DefaultConfig.visibleAttributes, ...data.attributeColumns.slice(0, 4)];
+      newConf.visibleAttributes = [...DefaultConfig.visibleAttributes, ...data.attributeColumns.slice(0, 4)];
 
       // Default: a histogram for each attribute if no plots exist
-      if (conf.plots.histograms.length + conf.plots.scatterplots.length === 0) {
-        conf.plots.histograms = data.attributeColumns.map((attr) => {
-          return { 
-            attribute: attr, 
-            bins: 20, // 20 bins is the default used in upset/.../AddPlot.tsx
-            type: 'Histogram', 
-            frequency: false, 
-            id: Date.now().toString() // Same calculation as in upset/.../AddPlot.tsx
-          }
-        })
+      if (newConf.plots.histograms.length + newConf.plots.scatterplots.length === 0) {
+        newConf.plots.histograms = data.attributeColumns.map((attr) => ({
+          attribute: attr,
+          bins: 20, // 20 bins is the default used in upset/.../AddPlot.tsx
+          type: 'Histogram',
+          frequency: false,
+          id: Date.now().toString(), // Same calculation as in upset/.../AddPlot.tsx
+        }));
       }
 
-      return conf;
+      return newConf;
     }
+
+    return config;
   }, [data]);
 
   // Initialize Provenance and pass it setter to connect
   const { provenance, actions } = useMemo(() => {
     if (sessionState) {
-      const provenance: UpsetProvenance = initializeProvenanceTracking(conf);
-      const actions: UpsetActions = getActions(provenance);
+      const prov: UpsetProvenance = initializeProvenanceTracking(conf ?? undefined);
+      const act: UpsetActions = getActions(prov);
 
       // Make sure the provenance state gets converted every time this is called
-      (provenance as UpsetProvenance & {_getState: typeof provenance.getState})._getState = provenance.getState;
-      provenance.getState = () => convertConfig(
-        (provenance as UpsetProvenance & {_getState: typeof provenance.getState})._getState()
+      (prov as UpsetProvenance & {_getState: typeof prov.getState})._getState = prov.getState;
+      prov.getState = () => convertConfig(
+        (prov as UpsetProvenance & {_getState: typeof prov.getState})._getState(),
       );
 
       if (sessionState && sessionState !== 'not found') {
-        provenance.importObject(structuredClone(sessionState));
+        prov.importObject(structuredClone(sessionState));
       }
 
       // Make sure the config atom stays up-to-date with the provenance
-      provenance.currentChange(() => setState(provenance.getState()));
+      prov.currentChange(() => setState(prov.getState()));
 
-      return { provenance: provenance, actions: actions };
+      return { provenance: prov, actions: act };
     }
     return { provenance: null, actions: null };
   }, [conf, setState, sessionState]);
@@ -108,31 +112,29 @@ function App() {
     update();
   }, [sessionId, workspace]);
 
+  const provContext = useMemo(() => (provenance && actions ? { provenance, actions } : null), [provenance, actions]);
+
   // Update the state on first render and if the provenance object changes
-  useEffect(() => {if (provenance?.getState()) setState(provenance?.getState())}, [provenance, setState]);
+  useEffect(() => { if (provenance?.getState()) setState(provenance?.getState()); }, [provenance, setState]);
 
   return (
     <BrowserRouter>
-      {provenance ? 
+      {(provenance && provContext) ?
         <ProvenanceContext.Provider
-          value={{
-              provenance,
-              actions,
-          }}
+          value={provContext}
         >
           <Routes>
             <Route path="*" element={<Root provenance={provenance} actions={actions} data={null} config={conf} />} />
             <Route path="/" element={<Root provenance={provenance} actions={actions} data={data} config={conf} />} />
             <Route path="/datatable" element={<DataTable />} />
           </Routes>
         </ProvenanceContext.Provider>
-      :
+        :
         <Routes>
           <Route path="*" element={<CircularProgress />} />
           <Route path="/" element={<CircularProgress />} />
           <Route path="/datatable" element={<DataTable />} />
-        </Routes>
-      }
+        </Routes>}
     </BrowserRouter>
   );
 }