From e3b89696f9cfff8e9c80f1a4c8d4093d5f605d75 Mon Sep 17 00:00:00 2001 From: Nate Lanza Date: Tue, 10 Dec 2024 18:05:29 -0700 Subject: [PATCH 1/3] Bugfix: Ensure row scale always uses the correct max value --- packages/upset/src/components/Header/SizeHeader.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/upset/src/components/Header/SizeHeader.tsx b/packages/upset/src/components/Header/SizeHeader.tsx index 9c1327cb..0d92829d 100644 --- a/packages/upset/src/components/Header/SizeHeader.tsx +++ b/packages/upset/src/components/Header/SizeHeader.tsx @@ -18,6 +18,7 @@ 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` @@ -36,7 +37,7 @@ export const SizeHeader: FC = () => { const sliderParentRef = useRef(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,11 +110,9 @@ 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]); From 3cd3bc47aabcd7199728abc01a256c8c77328b85 Mon Sep 17 00:00:00 2001 From: Nate Lanza Date: Wed, 11 Dec 2024 17:20:36 -0700 Subject: [PATCH 2/3] Remove unused subsetAtom & BackgroundRects --- packages/upset/src/atoms/subsetAtoms.ts | 19 ------ .../upset/src/components/BackgroundRects.tsx | 63 ------------------- 2 files changed, 82 deletions(-) delete mode 100644 packages/upset/src/atoms/subsetAtoms.ts delete mode 100644 packages/upset/src/components/BackgroundRects.tsx diff --git a/packages/upset/src/atoms/subsetAtoms.ts b/packages/upset/src/atoms/subsetAtoms.ts deleted file mode 100644 index 250ab75c..00000000 --- a/packages/upset/src/atoms/subsetAtoms.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { getSubsets, Subsets } from '@visdesignlab/upset2-core'; -import { selector } from 'recoil'; - -import { attributeAtom } from './attributeAtom'; -import { visibleSetSelector } from './config/visibleSetsAtoms'; -import { itemsAtom } from './itemsAtoms'; -import { setsAtom } from './setsAtoms'; - -export const subsetSelector = selector({ - key: 'subsets', - get: ({ get }) => { - const items = get(itemsAtom); - const sets = get(setsAtom); - const visibleSets = get(visibleSetSelector); - const attributeColumns = get(attributeAtom); - - return getSubsets(items, sets, visibleSets, attributeColumns); - }, -}); diff --git a/packages/upset/src/components/BackgroundRects.tsx b/packages/upset/src/components/BackgroundRects.tsx deleted file mode 100644 index 51b4bd25..00000000 --- a/packages/upset/src/components/BackgroundRects.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { css } from '@emotion/react'; -import { useRecoilValue } from 'recoil'; - -import { visibleSetSelector } from '../atoms/config/visibleSetsAtoms'; -import { dimensionsSelector } from '../atoms/dimensionsAtom'; -import { columnHoverAtom, rowHoverAtom } from '../atoms/highlightAtom'; -import { subsetSelector } from '../atoms/subsetAtoms'; -import { highlight } from '../utils/styles'; -import translate from '../utils/transform'; - -/** @jsxImportSource @emotion/react */ -export const BackgroundRects = () => { - const dimensions = useRecoilValue(dimensionsSelector); - const visibleSets = useRecoilValue(visibleSetSelector); - const subsets = useRecoilValue(subsetSelector); - const hoveredRow = useRecoilValue(rowHoverAtom); - const hoveredColumn = useRecoilValue(columnHoverAtom); - - return ( - <> - - {visibleSets.map((setName, idx) => ( - - - - ))} - - - {subsets.order.map((subsetId, idx) => ( - - - - ))} - - - ); -}; From 186a7b4899f812ba0884e13b795f637ce7389170 Mon Sep 17 00:00:00 2001 From: Nate Lanza Date: Wed, 11 Dec 2024 17:20:48 -0700 Subject: [PATCH 3/3] SizeHeader jsdoc --- packages/upset/src/components/Header/SizeHeader.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/upset/src/components/Header/SizeHeader.tsx b/packages/upset/src/components/Header/SizeHeader.tsx index 0d92829d..9a16c751 100644 --- a/packages/upset/src/components/Header/SizeHeader.tsx +++ b/packages/upset/src/components/Header/SizeHeader.tsx @@ -11,7 +11,6 @@ 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'; @@ -31,6 +30,9 @@ 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(null); @@ -118,7 +120,6 @@ export const SizeHeader: FC = () => { }, [subsets, maxSize, advancedScale]); const globalScale = useScale([0, itemCount], [0, dimensions.attribute.width]); - const detailScale = useScale([0, maxC], [0, dimensions.attribute.width]); useEffect(() => {