Tidy up filters on loci page (#250)

## Description

Tidy up filters on loci page above table.

Before/after:

<img width="300" alt="Screenshot 2025-08-11 at 12 30 56 PM"
src="https://github.com/user-attachments/assets/935a19ee-b435-4246-944d-8a206264474c"
/>

<img width="300" alt="Screenshot 2025-08-11 at 12 31 23 PM"
src="https://github.com/user-attachments/assets/da42eac9-9888-4dac-8fc1-0bc3eea02dc9"
/>

## Major Changes

## Minor Changes

- Compactify layout of filters above table on loci page.
- Change tag colors to be more distinctive.
- Fix and simplify tooltip CSS.

## 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/components/Tooltips.astro

@@ -4,7 +4,6 @@
 
 <script>
   import tippy from "tippy.js";
-  import "tippy.js/dist/tippy.css";
 
   /** add tooltips to any element with data-tooltip attribute */
 
@@ -64,3 +63,31 @@
 
   window.addEventListener("load", init);
 </script>
+
+<style is:global>
+  .tippy-box {
+    max-width: 350px;
+    padding: 10px 15px;
+    border-radius: var(--rounded);
+    background: var(--dark-gray);
+    color: var(--white);
+  }
+
+  .tippy-arrow {
+    z-index: -1;
+  }
+
+  .tippy-arrow::after {
+    display: block;
+    width: 10px;
+    height: 10px;
+    translate: 0 50%;
+    rotate: 45deg;
+    background: var(--dark-gray);
+    content: "";
+  }
+
+  [data-placement="bottom"] .tippy-arrow {
+    bottom: 100%;
+  }
+</style>

site/src/data/tags.js

@@ -1,7 +1,15 @@
 import { BsStars } from "react-icons/bs";
-import { FaCircleExclamation, FaCircleQuestion, FaCircleStop, FaCircleCheck, FaHourglassStart } from "react-icons/fa6";
+import {
+  FaCircleCheck,
+  FaCircleExclamation,
+  FaCircleQuestion,
+  FaCircleStop,
+  FaHourglassStart,
+} from "react-icons/fa6";
 import { newThreshold } from "./derived";
 
+/** https://tailwindcss.com/docs/colors */
+
 /** top-level tag types */
 export const tagOptions = [
   /** "important" tags */
@@ -10,38 +18,39 @@ export const tagOptions = [
     label: "New",
     tooltip: `Less than ~${newThreshold} years old`,
     Icon: BsStars,
-    color: `var(--primary)`,
+    color: "#0ea5e9",
     important: true,
   },
   {
     value: "contradictory_evidence",
     label: "Contradictory",
     tooltip: "Evidence either disputes or refutes gene-disease relationship",
     Icon: FaCircleExclamation,
-    color: "var(--secondary)",
+    color: "#ef4444",
     important: true,
   },
   {
     value: "limited_evidence",
     label: "Limited",
     tooltip: "There is limited evidence for this locus-disease relationship",
     Icon: FaCircleQuestion,
-    color: `var(--tertiary)`,
+    color: "#f59e0b",
     important: true,
   },
   {
     value: "supported_evidence",
     label: "Supported",
     tooltip: "There is compelling evidence for this locus-disease relationship",
     Icon: FaCircleCheck,
-    color: "var(--primary)",
+    color: "#10b981",
     important: true,
   },
   {
     value: "unknown_evidence",
     label: "Not Evaluated",
     tooltip: "This locus-disease relationship has not yet been evaluated",
     Icon: FaHourglassStart,
+    color: "#64748b",
     important: true,
   },
 

site/src/layouts/global.css

@@ -349,24 +349,6 @@ dd:empty::after {
   gap: 40px;
 }
 
-.tippy-box {
-  max-width: 350px;
-  padding: 10px 15px;
-  border-radius: var(--rounded);
-  background: var(--dark-gray);
-  color: var(--white);
-  font-size: 1rem;
-}
-
-.tippy-arrow {
-  z-index: 1;
-  color: var(--dark-gray);
-}
-
-.tippy-content {
-  padding: 0;
-}
-
 ::-webkit-scrollbar {
   width: 7px;
   height: 7px;

site/src/loci/Table.jsx

@@ -187,8 +187,7 @@ const Table = ({ loci }) => {
   return (
     <div className="col">
       {/* filters */}
-      <div className={clsx("row", classes.filters)}>
-        <TextBox placeholder="Search" value={search} onChange={setSearch} />
+      <div className="row">
         <div className="row">
           {importantTagOptions.map(({ Icon, label, color, tooltip }, index) => (
             <CheckBox
@@ -209,39 +208,43 @@ const Table = ({ loci }) => {
             />
           ))}
         </div>
-        <NumberBox
-          label="Motif max"
-          value={motif}
-          onChange={setMotif}
-          min={1}
-          max={maxMotif}
-        />
-        <div>
+
+        <div className="row">
+          <TextBox placeholder="Search" value={search} onChange={setSearch} />
+
+          <NumberBox
+            label="Motif max"
+            value={motif}
+            onChange={setMotif}
+            min={1}
+            max={maxMotif}
+          />
+
           <Select
             label="Inheritance"
             value={inheritance}
             onChange={setInheritance}
             options={inheritanceOptions}
           />
         </div>
-      </div>
 
-      {/* row count */}
-      <div className="row">
-        <strong>{filteredLoci.length.toLocaleString()} loci</strong>
-        <Button
-          design="plain"
-          onClick={() =>
-            /** download filtered loci */
-            downloadJson(filteredLoci, [
-              filteredLoci.length < derivedLoci.length ? "filtered" : "",
-              "loci",
-            ])
-          }
-          data-tooltip="Download filtered loci"
-        >
-          Download <LuDownload />
-        </Button>
+        {/* row count */}
+        <div className="row">
+          <strong>{filteredLoci.length.toLocaleString()} loci</strong>
+          <Button
+            design="plain"
+            onClick={() =>
+              /** download filtered loci */
+              downloadJson(filteredLoci, [
+                filteredLoci.length < derivedLoci.length ? "filtered" : "",
+                "loci",
+              ])
+            }
+            data-tooltip="Download filtered loci"
+          >
+            Download <LuDownload />
+          </Button>
+        </div>
       </div>
 
       {/* table */}

site/src/loci/Table.module.css

@@ -1,13 +1,3 @@
-.filters {
-  justify-content: space-between;
-}
-
-@media (max-width: 600px) {
-  .filters {
-    flex-direction: column;
-  }
-}
-
 .tags-cell {
   gap: 5px;
 }