loci table changes (#256)

## Description

Closes #233

Enhancements to loci page

## Major Changes

- allow filtering by min/max motif length
- make checkboxes tri-state: true, false, or "mixed" (either)
- move downloads section lower, and make into table

## Minor Changes

- number boxes for motif length "snap" to available lengths
- add icons for more headings

## Checklist

- [x] All changes are well summarized
- [x] Check all tests pass
- [x] Check that the website preview looks good
- [x] Update the STRchive version in `CITATION.cff`, format X.Y.Z. If
any major changes, increment Y. If only minor changes, increment Z. If
the breaking change (rare), increment X.
- [x] Ask someone to review this PR

Author: vincerubinetti

site/src/assets/check.svg

@@ -1,18 +1,41 @@
+import { useEffect, useRef } from "react";
 import clsx from "clsx";
 import classes from "./CheckBox.module.css";
 
 /** checkbox with label */
-const CheckBox = ({ label, onChange, tooltip, className, ...props }) => (
-  <label data-tooltip={tooltip}>
-    <input
-      type="checkbox"
-      className={clsx(className, classes.box)}
-      onChange={(event) => onChange?.(event.target.checked)}
-      aria-label={tooltip}
-      {...props}
-    />
-    <span>{label}</span>
-  </label>
-);
+const CheckBox = ({
+  label,
+  checked,
+  onChange,
+  tooltip,
+  className,
+  ...props
+}) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    ref.current.indeterminate = checked === "mixed";
+  }, [checked]);
+
+  return (
+    <label data-tooltip={tooltip}>
+      <input
+        ref={ref}
+        type="checkbox"
+        className={clsx(className, classes.box)}
+        checked={!!checked}
+        onChange={() => {
+          if (checked === "mixed") onChange?.(true);
+          else if (checked === true) onChange?.(false);
+          else onChange?.("mixed");
+        }}
+        aria-checked={checked}
+        aria-label={tooltip}
+        {...props}
+      />
+      {label && <span>{label}</span>}
+    </label>
+  );
+};
 
 export default CheckBox;

site/src/assets/x.svg

@@ -3,15 +3,20 @@
   width: 20px;
   height: 20px;
   border-radius: calc(var(--rounded) / 2);
-  background: var(--white);
+  background-position: center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-color: var(--white);
   box-shadow: inset 0 0 0 2px var(--dark-gray);
   accent-color: var(--primary);
 }
 
-.box:checked {
+.box[aria-checked="true"] {
   background-image: url("../assets/check.svg");
-  background-position: center;
-  background-size: 65%;
-  background-repeat: no-repeat;
   background-color: var(--primary);
 }
+
+.box[aria-checked="false"] {
+  background-image: url("../assets/x.svg");
+  background-color: var(--secondary);
+}

site/src/components/CheckBox.jsx

@@ -22,9 +22,10 @@ const Component = `h${level}`;
 
 <style>
   .heading {
+    --gap: 0.5em;
     display: flex;
     align-items: center;
-    gap: 0.5em;
+    gap: var(--gap);
     overflow-wrap: anywhere;
   }
 
@@ -34,6 +35,8 @@ const Component = `h${level}`;
 
   .anchor {
     width: 0;
+    margin-left: calc(-1 * var(--gap));
+    translate: var(--gap) 0;
     color: var(--primary);
     white-space: nowrap;
     opacity: 0;

site/src/components/CheckBox.module.css

@@ -1,15 +1,33 @@
 import clsx from "clsx";
+import { sortBy, uniq } from "lodash-es";
 import classes from "./NumberBox.module.css";
 
 /** number input with label */
-const NumberBox = ({ label, value, onChange, className, ...props }) => (
+const NumberBox = ({
+  label,
+  value,
+  onChange,
+  className,
+  snapValues,
+  ...props
+}) => (
   <label>
-    <span>{label}</span>
+    {label && <span>{label}</span>}
     <input
       type="number"
       className={clsx(className, classes.box)}
       value={typeof value === "number" && !Number.isNaN(value) ? value : ""}
-      onChange={(event) => onChange?.(Number(event.target.value) || 0)}
+      onChange={(event) => {
+        let newValue = Number(event.target.value) || 0;
+        if (snapValues?.length) {
+          snapValues = sortBy(uniq(snapValues));
+          if (newValue < value)
+            newValue = snapValues.findLast((v) => v <= newValue);
+          if (newValue > value)
+            newValue = snapValues.find((v) => v >= newValue);
+        }
+        onChange?.(newValue);
+      }}
       {...props}
     />
   </label>

site/src/components/Heading.astro

@@ -4,7 +4,7 @@ import classes from "./Select.module.css";
 /** dropdown select with label */
 const Select = ({ label, options, onChange, ...props }) => (
   <label>
-    <span>{label}</span>
+    {label && <span>{label}</span>}
     <div className={classes.container}>
       <select
         className={classes.select}

site/src/components/NumberBox.jsx

@@ -6,7 +6,7 @@ import Button from "./Button";
 import classes from "./TableOfContents.module.css";
 
 /** all used heading elements */
-const headingSelector = "h2, h3, h4";
+const headingSelector = "h1, h2, h3, h4";
 
 /**
  * floating table of contents that outlines sections/headings on page. can be
@@ -33,7 +33,7 @@ const TableOfContents = () => {
         clone.querySelector("a").remove();
         const { innerHTML, id, tagName } = clone;
         const html = innerHTML.trim();
-        const level = (parseInt(tagName.slice(1)) || 0) - 1;
+        const level = parseInt(tagName.slice(1)) || 0;
         return { element, html, id, level };
       }),
     );

site/src/components/Select.jsx

@@ -4,10 +4,6 @@
   top: 0;
 }
 
-.aside svg {
-  opacity: 0.5;
-}
-
 .table {
   display: flex;
   position: absolute;
@@ -52,3 +48,7 @@
 .link[data-active] {
   font-weight: var(--bold);
 }
+
+.link svg {
+  opacity: 0.25;
+}

site/src/components/TableOfContents.jsx

@@ -11,7 +11,7 @@ const TextBox = ({ label, multi, onChange, ...props }) => {
 
   return (
     <label>
-      <span>{label}</span>
+      {label && <span>{label}</span>}
       <div className={classes.container}>
         <Component
           ref={ref}