@jbrowse/plugin-alignments 1.7.9 → 2.0.0

package/src/AlignmentsFeatureDetail/__snapshots__/index.test.js.snap

@@ -2,84 +2,76 @@
 
 exports[`open up a widget 1`] = `
 <div
-  class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1ps6pg7-MuiPaper-root"
   data-testid="alignment-side-drawer"
 >
   <div
-    class="MuiPaper-root MuiAccordion-root MuiAccordion-expanded MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded MuiAccordion-gutters css-1elwnq4-MuiPaper-root-MuiAccordion-root"
   >
     <div
-      aria-disabled="false"
       aria-expanded="true"
-      class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-expanded"
+      class="MuiButtonBase-root MuiAccordionSummary-root Mui-expanded MuiAccordionSummary-gutters css-sh22l5-MuiButtonBase-root-MuiAccordionSummary-root"
       role="button"
       tabindex="0"
     >
       <div
-        class="MuiAccordionSummary-content MuiAccordionSummary-expanded"
+        class="MuiAccordionSummary-content Mui-expanded MuiAccordionSummary-contentGutters css-o4b71y-MuiAccordionSummary-content"
       >
         <span
-          class="MuiTypography-root MuiTypography-button"
+          class="MuiTypography-root MuiTypography-button css-1f0on15-MuiTypography-root"
         >
            
           ctgA_3_555_0:0:0_2:0... - match
         </span>
       </div>
       <div
-        aria-disabled="false"
-        aria-hidden="true"
-        class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiAccordionSummary-expanded MuiIconButton-edgeEnd"
+        class="MuiAccordionSummary-expandIconWrapper Mui-expanded css-yw020d-MuiAccordionSummary-expandIconWrapper"
       >
-        <span
-          class="MuiIconButton-label"
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium tss-rb1zhf-expandIcon css-i4bv87-MuiSvgIcon-root"
+          data-testid="ExpandMoreIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root makeStyles-expandIcon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-            />
-          </svg>
-        </span>
-        <span
-          class="MuiTouchRipple-root"
-        />
+          <path
+            d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+          />
+        </svg>
       </div>
     </div>
     <div
-      class="MuiCollapse-root MuiCollapse-entered"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-pwcg7p-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
         >
           <div
+            class="MuiAccordion-region"
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root makeStyles-expansionPanelDetails"
+              class="MuiAccordionDetails-root tss-1g973hk-expansionPanelDetails css-15v22id-MuiAccordionDetails-root"
             >
               <p
-                class="MuiTypography-root MuiTypography-body1"
+                class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
               >
                 Core details
               </p>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                 >
                   Position
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <div>
                     ctgA:3..102 (+)
@@ -87,15 +79,15 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                 >
                   Name
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <div>
                     ctgA_3_555_0:0:0_2:0:0_102d
@@ -103,15 +95,15 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                 >
                   Length
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <div>
                     100
@@ -119,15 +111,15 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                 >
                   Type
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <div>
                     match
@@ -135,24 +127,24 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <hr
-                class="MuiDivider-root"
+                class="MuiDivider-root MuiDivider-fullWidth css-9mgopn-MuiDivider-root"
               />
               <p
-                class="MuiTypography-root MuiTypography-body1"
+                class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
               >
                 Attributes
               </p>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                   style="width: 96px;"
                 >
                   seq
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <div>
                     TTGTTGCGGAGTTGAACAACGGCATTAGGAACACTTCCGTCTCTCACTTTTATACGATTATGATTGGTTCTTTAGCCTTGGTTTAGATTGGTAGTAGTAG
@@ -160,16 +152,16 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                   style="width: 96px;"
                 >
                   score
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <div>
                     37
@@ -177,16 +169,16 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                   style="width: 96px;"
                 >
                   qual
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <button
                     type="button"
@@ -204,16 +196,16 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                   style="width: 96px;"
                 >
                   MQ
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <div>
                     37
@@ -221,16 +213,16 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                   style="width: 96px;"
                 >
                   CIGAR
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <div>
                     100M
@@ -238,16 +230,16 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                   style="width: 96px;"
                 >
                   length_on_ref
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <div>
                     100
@@ -255,16 +247,16 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                   style="width: 96px;"
                 >
                   template_length
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <div>
                     0
@@ -272,16 +264,16 @@ exports[`open up a widget 1`] = `
                 </div>
               </div>
               <div
-                class="makeStyles-field"
+                class="tss-1m8nxnb-field"
               >
                 <div
-                  class="makeStyles-fieldName"
+                  class="tss-1y9c7n2-fieldName"
                   style="width: 96px;"
                 >
                   seq_length
                 </div>
                 <div
-                  class="makeStyles-fieldValue"
+                  class="tss-1omt041-fieldValue"
                 >
                   <div>
                     100
@@ -295,532 +287,464 @@ exports[`open up a widget 1`] = `
     </div>
   </div>
   <div
-    class="MuiPaper-root MuiAccordion-root MuiAccordion-expanded MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded MuiAccordion-gutters css-1elwnq4-MuiPaper-root-MuiAccordion-root"
   >
     <div
-      aria-disabled="false"
       aria-expanded="true"
-      class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-expanded"
+      class="MuiButtonBase-root MuiAccordionSummary-root Mui-expanded MuiAccordionSummary-gutters css-sh22l5-MuiButtonBase-root-MuiAccordionSummary-root"
       role="button"
       tabindex="0"
     >
       <div
-        class="MuiAccordionSummary-content MuiAccordionSummary-expanded"
+        class="MuiAccordionSummary-content Mui-expanded MuiAccordionSummary-contentGutters css-o4b71y-MuiAccordionSummary-content"
       >
         <span
-          class="MuiTypography-root MuiTypography-button"
+          class="MuiTypography-root MuiTypography-button css-1f0on15-MuiTypography-root"
         >
            
           Flags
         </span>
       </div>
       <div
-        aria-disabled="false"
-        aria-hidden="true"
-        class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiAccordionSummary-expanded MuiIconButton-edgeEnd"
+        class="MuiAccordionSummary-expandIconWrapper Mui-expanded css-yw020d-MuiAccordionSummary-expandIconWrapper"
       >
-        <span
-          class="MuiIconButton-label"
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium tss-rb1zhf-expandIcon css-i4bv87-MuiSvgIcon-root"
+          data-testid="ExpandMoreIcon"
+          focusable="false"
+          viewBox="0 0 24 24"
         >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root makeStyles-expandIcon"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-            />
-          </svg>
-        </span>
-        <span
-          class="MuiTouchRipple-root"
-        />
+          <path
+            d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+          />
+        </svg>
       </div>
     </div>
     <div
-      class="MuiCollapse-root MuiCollapse-entered"
+      class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-pwcg7p-MuiCollapse-root"
       style="min-height: 0px;"
     >
       <div
-        class="MuiCollapse-wrapper"
+        class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
       >
         <div
-          class="MuiCollapse-wrapperInner"
+          class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
         >
           <div
+            class="MuiAccordion-region"
             role="region"
           >
             <div
-              class="MuiAccordionDetails-root makeStyles-expansionPanelDetails"
+              class="MuiAccordionDetails-root tss-1g973hk-expansionPanelDetails css-15v22id-MuiAccordionDetails-root"
             >
               <div
-                class="MuiFormGroup-root"
+                class="MuiFormGroup-root css-dmmspl-MuiFormGroup-root"
               >
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="read paired"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="read paired"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     read paired
                   </span>
                 </label>
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="read mapped in proper pair"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="read mapped in proper pair"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     read mapped in proper pair
                   </span>
                 </label>
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="read unmapped"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="read unmapped"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     read unmapped
                   </span>
                 </label>
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="mate unmapped"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="mate unmapped"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     mate unmapped
                   </span>
                 </label>
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="read reverse strand"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="read reverse strand"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     read reverse strand
                   </span>
                 </label>
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="mate reverse strand"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="mate reverse strand"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     mate reverse strand
                   </span>
                 </label>
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="first in pair"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="first in pair"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     first in pair
                   </span>
                 </label>
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="second in pair"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="second in pair"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     second in pair
                   </span>
                 </label>
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="not primary alignment"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="not primary alignment"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     not primary alignment
                   </span>
                 </label>
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="read fails platform/vendor quality checks"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="read fails platform/vendor quality checks"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     read fails platform/vendor quality checks
                   </span>
                 </label>
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="read is PCR or optical duplicate"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="read is PCR or optical duplicate"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     read is PCR or optical duplicate
                   </span>
                 </label>
                 <label
-                  class="MuiFormControlLabel-root"
+                  class="MuiFormControlLabel-root MuiFormControlLabel-labelPlacementEnd css-j204z7-MuiFormControlLabel-root"
                 >
                   <span
-                    aria-disabled="false"
-                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root MuiCheckbox-colorSecondary makeStyles-compact MuiIconButton-colorSecondary"
+                    class="MuiCheckbox-root MuiCheckbox-colorPrimary MuiButtonBase-root MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-root tss-18u5im4-compact css-12wnr2w-MuiButtonBase-root-MuiCheckbox-root"
                   >
-                    <span
-                      class="MuiIconButton-label"
+                    <input
+                      class="PrivateSwitchBase-input css-1m9pwf3"
+                      data-indeterminate="false"
+                      name="supplementary alignment"
+                      readonly=""
+                      type="checkbox"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                      data-testid="CheckBoxOutlineBlankIcon"
+                      focusable="false"
+                      viewBox="0 0 24 24"
                     >
-                      <input
-                        class="PrivateSwitchBase-input"
-                        data-indeterminate="false"
-                        name="supplementary alignment"
-                        readonly=""
-                        type="checkbox"
-                        value=""
+                      <path
+                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                       />
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
-                        />
-                      </svg>
-                    </span>
+                    </svg>
                     <span
-                      class="MuiTouchRipple-root"
+                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                     />
                   </span>
                   <span
-                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                    class="MuiTypography-root MuiTypography-body1 MuiFormControlLabel-label css-ahj2mt-MuiTypography-root"
                   >
                     supplementary alignment
                   </span>