Merge branch 'main' into separate-element-plots

visdesignlab · Jan 22, 2025 · 354e0c9 · 354e0c9
2 parents 66834f6 + 52884c8
commit 354e0c9
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 92 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/atoms/subsetAtoms.ts b/packages/upset/src/atoms/subsetAtoms.ts
diff --git a/packages/upset/src/components/BackgroundRects.tsx b/packages/upset/src/components/BackgroundRects.tsx
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

diff --git a/packages/upset/src/components/Header/SizeHeader.tsx b/packages/upset/src/components/Header/SizeHeader.tsx
@@ -11,13 +11,13 @@ import { sortByOrderSelector, sortBySelector } from '../../atoms/config/sortByAt
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
 import { itemsAtom } from '../../atoms/itemsAtoms';
 import { maxSize } from '../../atoms/maxSizeAtom';
-import { subsetSelector } from '../../atoms/subsetAtoms';
 import { useScale } from '../../hooks/useScale';
 import translate from '../../utils/transform';
 import { Axis } from '../custom/Axis';
 import { ProvenanceContext } from '../Root';
 import { contextMenuAtom } from '../../atoms/contextMenuAtom';
 import { HeaderSortArrow } from '../custom/HeaderSortArrow';
+import { flattenedRowsSelector } from '../../atoms/renderRowsAtom';
 
 /** @jsxImportSource @emotion/react */
 const hide = css`
@@ -30,13 +30,16 @@ const show = css`
   transition: opacity 0.5s;
 `;
 
+/**
+ * Header showing label & axis for cardinality bars
+ */
 export const SizeHeader: FC = () => {
   const { actions } = useContext(ProvenanceContext);
   const sliderRef = useRef<SVGRectElement>(null);
   const sliderParentRef = useRef<SVGGElement>(null);
   const dimensions = useRecoilValue(dimensionsSelector);
   const items = useRecoilValue(itemsAtom);
-  const subsets = useRecoilValue(subsetSelector);
+  const subsets = useRecoilValue(flattenedRowsSelector).map((r) => r.row);
   const sortBy = useRecoilValue(sortBySelector);
   const sortByOrder = useRecoilValue(sortByOrderSelector);
 
@@ -109,17 +112,14 @@ export const SizeHeader: FC = () => {
    * control and set a value
    */
   useEffect(() => {
-    if (advancedScale) return;
-    const subs = Object.values(subsets.values);
-    if (subs.length === 0) return;
+    if (advancedScale || subsets.length === 0) return;
 
-    const sizes = subs.map((s) => s.size);
+    const sizes = subsets.map((s) => s.size);
     const maxS = Math.max(...sizes);
     setMaxSize(maxS);
   }, [subsets, maxSize, advancedScale]);
 
   const globalScale = useScale([0, itemCount], [0, dimensions.attribute.width]);
-
   const detailScale = useScale([0, maxC], [0, dimensions.attribute.width]);
 
   useEffect(() => {