Hide hidden sets & intersection size labels according to config settings

packages/upset/src/components/Columns/SizeBar.tsx

@@ -10,6 +10,7 @@ import { maxSize } from '../../atoms/maxSizeAtom';
 import { useScale } from '../../hooks/useScale';
 import translate from '../../utils/transform';
 import { newShade } from '../../utils/colors';
+import { showIntersectionSizesSelector } from '../../atoms/config/displayAtoms';
 
 /**
  * A bar that represents the size of a row in the upset plot.
@@ -47,6 +48,9 @@ type Rect = {
 
 const colors = ['rgb(189, 189, 189)', 'rgb(136, 136, 136)', 'rgb(37, 37, 37)'];
 
+/**
+ * Size bar for a row in the upset plot, showing number of elements in the subset.
+ */
 export const SizeBar: FC<Props> = ({ row, size, selected }) => {
   const dimensions = useRecoilValue(dimensionsSelector);
   const sizeDomain = useRecoilValue(maxSize);
@@ -55,6 +59,7 @@ export const SizeBar: FC<Props> = ({ row, size, selected }) => {
   const bookmarkedColorPallete = useRecoilValue(bookmarkedColorPalette);
   const nextColor = useRecoilValue(nextColorSelector);
   const elementSelectionColor = useRecoilValue(elementColorSelector);
+  const showText = useRecoilValue(showIntersectionSizesSelector);
 
   /*
    * Constants
@@ -294,16 +299,18 @@ export const SizeBar: FC<Props> = ({ row, size, selected }) => {
           />
         </>
       )}
-      <text
-        textAnchor="start"
-        dominantBaseline="middle"
-        transform={translate(
-          (fullBars > 0 ? dimensions.attribute.width : sizeWidth) + 5,
-          dimensions.body.rowHeight / 2,
-        )}
-      >
-        {size}
-      </text>
+      {showText && (
+        <text
+          textAnchor="start"
+          dominantBaseline="middle"
+          transform={translate(
+            (fullBars > 0 ? dimensions.attribute.width : sizeWidth) + 5,
+            dimensions.body.rowHeight / 2,
+          )}
+        >
+          {size}
+        </text>
+      )}
     </g>
   );
 };

packages/upset/src/components/Header/MatrixHeader.tsx

@@ -8,12 +8,14 @@ import { useScale } from '../../hooks/useScale';
 import { SetHeader } from './SetHeader';
 import { HiddenSets } from './HiddenSets';
 import translate from '../../utils/transform';
+import { showHiddenSetsSelector } from '../../atoms/config/displayAtoms';
 
 export const MatrixHeader = () => {
   const visibleSets = useRecoilValue(visibleSetSelector);
   const dimensions = useRecoilValue(dimensionsSelector);
   const maxSize = useRecoilValue(maxSetSizeSelector);
   const hiddenSets = useRecoilValue(hiddenSetSelector);
+  const showHiddenSets = useRecoilValue(showHiddenSetsSelector);
 
   const { set } = dimensions;
 
@@ -22,31 +24,33 @@ export const MatrixHeader = () => {
   return (
     <>
       <SetHeader visibleSets={visibleSets} scale={scale} />
-      <foreignObject
-        width={
+      {showHiddenSets && (
+        <foreignObject
+          width={
           dimensions.size.width +
           dimensions.gap +
           dimensions.attribute.width
         }
-        height={dimensions.set.size.height + 15}
-        transform={translate(dimensions.matrixColumn.width +
+          height={dimensions.set.size.height + 15}
+          transform={translate(dimensions.matrixColumn.width +
                 dimensions.bookmarkStar.gap +
                 dimensions.bookmarkStar.width +
                 dimensions.bookmarkStar.gap, 0)}
-      >
-        <div
-          id="hiddenSetDiv"
-          style={{
-            overflowX: 'auto',
-            overflowY: 'hidden',
-            height: '100%',
-          }}
         >
-          <svg width={hiddenSets.length * (set.width + 1)} xmlns="http://www.w3.org/2000/svg">
-            <HiddenSets hiddenSets={hiddenSets} scale={scale} />
-          </svg>
-        </div>
-      </foreignObject>
+          <div
+            id="hiddenSetDiv"
+            style={{
+              overflowX: 'auto',
+              overflowY: 'hidden',
+              height: '100%',
+            }}
+          >
+            <svg width={hiddenSets.length * (set.width + 1)} xmlns="http://www.w3.org/2000/svg">
+              <HiddenSets hiddenSets={hiddenSets} scale={scale} />
+            </svg>
+          </div>
+        </foreignObject>
+      )}
     </>
   );
 };