From 6b74dd82873ded1daaccdb33dc6822402816459a Mon Sep 17 00:00:00 2001 From: Nate Lanza Date: Tue, 10 Dec 2024 15:00:43 -0700 Subject: [PATCH 1/5] Add set membership columns to the element view table --- packages/upset/src/atoms/dataAtom.ts | 11 +++++++++ .../components/ElementView/ElementTable.tsx | 24 ++++++++++++++++--- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/packages/upset/src/atoms/dataAtom.ts b/packages/upset/src/atoms/dataAtom.ts index 22b6ca92..1232bb53 100644 --- a/packages/upset/src/atoms/dataAtom.ts +++ b/packages/upset/src/atoms/dataAtom.ts @@ -22,3 +22,14 @@ export const queryColumnsSelector = selector({ && !BUILTIN_COLS.includes(col)); }, }); + +/** + * Returns the boolean columns that indicate set membership + */ +export const setColumnsSelector = selector({ + 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 index 3af6df8b..99680191 100644 --- 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 { columnsAtom } from '../../atoms/columnAtom'; +import { setColumnsSelector } from '../../atoms/dataAtom'; /** * Hook to generate rows for the DataGrid @@ -40,10 +41,27 @@ function useColumns(columns: string[]) { * Table to display elements */ export const ElementTable: FC = () => { - const attributeColumns = useRecoilValue(attributeAtom); + const allColumns = useRecoilValue(columnsAtom); const elements = useRecoilValue(selectedItemsSelector); const rows = useRows(elements); - const columns = useColumns(['_label', ...attributeColumns]); + const setColumns = useRecoilValue(setColumnsSelector); + let columns = useColumns(['_label', ...allColumns.filter((col) => !col.startsWith('_'))]); + // Sort set columns to the right of other columns & add a boolean type to + columns = columns.sort((a, b) => { + if (setColumns.includes(a.field) && setColumns.includes(b.field)) { + return 0; + } + if (setColumns.includes(a.field)) { + return 1; + } + if (setColumns.includes(b.field)) { + return -1; + } + return 0; + }).map((col) => ({ + ...col, + type: setColumns.includes(col.field) ? 'boolean' : 'string', + })); return ( Date: Tue, 10 Dec 2024 16:10:46 -0700 Subject: [PATCH 2/5] Bugfix: only use att & set columns in element vis table --- .../components/ElementView/ElementTable.tsx | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/upset/src/components/ElementView/ElementTable.tsx b/packages/upset/src/components/ElementView/ElementTable.tsx index 99680191..c360907e 100644 --- a/packages/upset/src/components/ElementView/ElementTable.tsx +++ b/packages/upset/src/components/ElementView/ElementTable.tsx @@ -7,6 +7,7 @@ import { useRecoilValue } from 'recoil'; import { selectedItemsSelector } from '../../atoms/elementsSelectors'; import { columnsAtom } from '../../atoms/columnAtom'; import { setColumnsSelector } from '../../atoms/dataAtom'; +import { attributeAtom } from '../../atoms/attributeAtom'; /** * Hook to generate rows for the DataGrid @@ -41,24 +42,13 @@ function useColumns(columns: string[]) { * Table to display elements */ export const ElementTable: FC = () => { - const allColumns = useRecoilValue(columnsAtom); + const attColumns = useRecoilValue(attributeAtom); const elements = useRecoilValue(selectedItemsSelector); const rows = useRows(elements); const setColumns = useRecoilValue(setColumnsSelector); - let columns = useColumns(['_label', ...allColumns.filter((col) => !col.startsWith('_'))]); + let columns = useColumns(['_label', ...([...attColumns, ...setColumns].filter((col) => !col.startsWith('_')))]); // Sort set columns to the right of other columns & add a boolean type to - columns = columns.sort((a, b) => { - if (setColumns.includes(a.field) && setColumns.includes(b.field)) { - return 0; - } - if (setColumns.includes(a.field)) { - return 1; - } - if (setColumns.includes(b.field)) { - return -1; - } - return 0; - }).map((col) => ({ + columns = columns.map((col) => ({ ...col, type: setColumns.includes(col.field) ? 'boolean' : 'string', })); From 996153c26b0b11dd6001f476b62ba85099604711 Mon Sep 17 00:00:00 2001 From: Nate Lanza Date: Tue, 10 Dec 2024 16:14:32 -0700 Subject: [PATCH 3/5] Fix element view test for new table --- e2e-tests/elementView.spec.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/e2e-tests/elementView.spec.ts b/e2e-tests/elementView.spec.ts index 123b0664..a808409b 100644 --- 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(); From 327d4cf066454cd1483b0fd9994df2bb07a10efb Mon Sep 17 00:00:00 2001 From: Nate Lanza Date: Tue, 10 Dec 2024 16:26:00 -0700 Subject: [PATCH 4/5] Remove unused import --- packages/upset/src/components/ElementView/ElementTable.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/upset/src/components/ElementView/ElementTable.tsx b/packages/upset/src/components/ElementView/ElementTable.tsx index c360907e..c8a60e38 100644 --- a/packages/upset/src/components/ElementView/ElementTable.tsx +++ b/packages/upset/src/components/ElementView/ElementTable.tsx @@ -5,7 +5,6 @@ import { FC, useMemo } from 'react'; import { useRecoilValue } from 'recoil'; import { selectedItemsSelector } from '../../atoms/elementsSelectors'; -import { columnsAtom } from '../../atoms/columnAtom'; import { setColumnsSelector } from '../../atoms/dataAtom'; import { attributeAtom } from '../../atoms/attributeAtom'; From c49f9c01cffdb67276ac94a4e57b05fe97b8f7f6 Mon Sep 17 00:00:00 2001 From: Nate Lanza Date: Wed, 11 Dec 2024 12:55:12 -0700 Subject: [PATCH 5/5] Address PR: Change attColumns to attributeColumns & fix comment --- packages/upset/src/components/ElementView/ElementTable.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/upset/src/components/ElementView/ElementTable.tsx b/packages/upset/src/components/ElementView/ElementTable.tsx index c8a60e38..de2b855e 100644 --- a/packages/upset/src/components/ElementView/ElementTable.tsx +++ b/packages/upset/src/components/ElementView/ElementTable.tsx @@ -41,12 +41,12 @@ function useColumns(columns: string[]) { * Table to display elements */ export const ElementTable: FC = () => { - const attColumns = useRecoilValue(attributeAtom); + const attributeColumns = useRecoilValue(attributeAtom); const elements = useRecoilValue(selectedItemsSelector); const rows = useRows(elements); const setColumns = useRecoilValue(setColumnsSelector); - let columns = useColumns(['_label', ...([...attColumns, ...setColumns].filter((col) => !col.startsWith('_')))]); - // Sort set columns to the right of other columns & add a boolean type to + 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',