Merge pull request #435 from visdesignlab/309-query-table-incl-sets

Add set membership columns to the element view table
visdesignlab · Dec 12, 2024 · e84f782 · e84f782
2 parents f859df7 + c49f9c0
commit e84f782
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/e2e-tests/elementView.spec.ts b/e2e-tests/elementView.spec.ts
@@ -77,7 +77,9 @@ test('Element View', async ({ page, browserName }) => {
   await expect(selectionChip).toBeVisible();
 
   // Check that the datatable is visible and populated
-  const dataTable = page.locator('div').filter({ hasText: /^LabelAge$/ }).first();
+  const dataTable = page.getByText(
+    'LabelAgeSchoolBlue HairDuff FanEvilMalePower PlantBart10yesnononoyesnoRalph8yesnononoyesnoMartin Prince10yesnononoyesnoRows per page:1001–3 of',
+  );
   await expect(dataTable).toBeVisible();
   const nameCell = await page.getByRole('cell', { name: 'Bart' });
   await expect(nameCell).toBeVisible();

diff --git a/packages/upset/src/atoms/dataAtom.ts b/packages/upset/src/atoms/dataAtom.ts
@@ -22,3 +22,14 @@ export const queryColumnsSelector = selector<ColumnName[]>({
       && !BUILTIN_COLS.includes(col));
   },
 });
+
+/**
+ * Returns the boolean columns that indicate set membership
+ */
+export const setColumnsSelector = selector<ColumnName[]>({
+  key: 'set-columns',
+  get: ({ get }) => {
+    const data = get(dataAtom);
+    return data.setColumns;
+  },
+});
diff --git a/packages/upset/src/components/ElementView/ElementTable.tsx b/packages/upset/src/components/ElementView/ElementTable.tsx
@@ -4,8 +4,9 @@ import { Item } from '@visdesignlab/upset2-core';
 import { FC, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { attributeAtom } from '../../atoms/attributeAtom';
 import { selectedItemsSelector } from '../../atoms/elementsSelectors';
+import { setColumnsSelector } from '../../atoms/dataAtom';
+import { attributeAtom } from '../../atoms/attributeAtom';
 
 /**
  * Hook to generate rows for the DataGrid
@@ -43,7 +44,13 @@ export const ElementTable: FC = () => {
   const attributeColumns = useRecoilValue(attributeAtom);
   const elements = useRecoilValue(selectedItemsSelector);
   const rows = useRows(elements);
-  const columns = useColumns(['_label', ...attributeColumns]);
+  const setColumns = useRecoilValue(setColumnsSelector);
+  let columns = useColumns(['_label', ...([...attributeColumns, ...setColumns].filter((col) => !col.startsWith('_')))]);
+  // Add a boolean type to set columns so they display properly
+  columns = columns.map((col) => ({
+    ...col,
+    type: setColumns.includes(col.field) ? 'boolean' : 'string',
+  }));
 
   return (
     <Box