Fix plot width calculation, expand accessibility statement

packages/app/src/components/AccessiblityStatement.tsx

@@ -25,7 +25,7 @@ export const AccessibilityStatement = ({ open, close, data }: Props) => {
   const hiddenSets = provenance.getState().allSets.filter((set: Column) => !visibleSets.includes(set.name));
 
   return (
-    <Dialog open={open} onClose={close} sx={{ padding: '20px' }}>
+    <Dialog open={open} onClose={close} sx={{ padding: '20px' }} fullWidth maxWidth="lg">
       <Box sx={{ padding: '20px' }}>
         <Typography variant="h4" component="h4">UpSet 2 Accessibility Statement</Typography>
         <p>

packages/upset/src/atoms/config/visibleAttributes.ts

@@ -2,6 +2,9 @@ import { selector } from 'recoil';
 
 import { upsetConfigAtom } from './upsetConfigAtoms';
 
+/**
+ * The attributes that are currently visible.
+ */
 export const visibleAttributesSelector = selector<string[]>({
   key: 'visible-attribute',
   get: ({ get }) => get(upsetConfigAtom).visibleAttributes,

packages/upset/src/atoms/dimensionsAtom.ts

@@ -12,13 +12,17 @@ ReturnType<typeof calculateDimensions>
     const visibleSets = get(visibleSetSelector);
     const rowCount = get(rowCountSelector);
     const hiddenSets = get(hiddenSetSelector);
-    const attributes = get(visibleAttributesSelector);
+    let attributes = get(visibleAttributesSelector);
+
+    const degree = attributes.includes('Degree');
+    attributes = attributes.filter((a) => a !== 'Degree');
 
     return calculateDimensions(
       visibleSets.length,
       hiddenSets.length,
       rowCount,
       attributes.length,
+      degree,
     );
   },
 });

packages/upset/src/dimensions.ts

@@ -1,8 +1,18 @@
+/**
+ * Calculates the dimensions of the plot
+ * @param nVisibleSets Number of visible sets
+ * @param nHiddenSets Number of hidden sets
+ * @param nIntersections Number of intersections
+ * @param nAttributes Number of visible attributes, excluding Degree
+ * @param degree Whether to show the Degree column
+ * @returns The dimensions of the plot, in an object with a variety of fields
+ */
 export function calculateDimensions(
   nVisibleSets: number = 0,
   nHiddenSets: number = 0,
   nIntersections: number = 0,
   nAttributes: number = 0,
+  degree: boolean = false,
 ) {
   const gap = 20;
 
@@ -83,11 +93,8 @@ export function calculateDimensions(
       bookmarkStar.gap +
       bookmarkStar.width + // Bookmark Star
       bookmarkStar.gap +
-      degreeColumn.gap +
-      degreeColumn.width + // Degree Column
-      degreeColumn.gap + // Add margin
-      attribute.width + // Deviation
-      attribute.vGap +
+      (degree ? degreeColumn.width + // Degree Column
+      degreeColumn.gap : 0) + // Add margin
       (attribute.vGap + attribute.width) * nAttributes, // Show all attributes
     totalHeight: set.size.height + set.label.height,
   };