feat(frontend): clearly list variants not included in calculations

Author: rileyhgrant

frontend/src/components/VariantListPage/VariantListVariants.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   Checkbox,
   HStack,
+  List,
   ListItem,
   Text,
   Tooltip,
@@ -32,6 +33,7 @@ import {
 import MultipleSelect from "../MultipleSelect";
 import { DownloadVariantListLink } from "./DownloadVariantList";
 import VariantsTable from "./VariantsTable";
+import HelpTextHover from "../HelpTextHover";
 
 export const combineVariants = (
   variants: Variant[],
@@ -181,16 +183,48 @@ const VariantListVariants = (props: VariantListVariantsProps) => {
     (variant) => (variant.AC || [])[0] === 0
   ).length;
 
+  const unselectedVariants = renderedVariants.filter(
+    (variant) => !selectedVariants.has(variant.id)
+  );
+  const neverIncludedVariants = renderedVariants.filter((variant) =>
+    notIncludedVariants.has(variant.id)
+  );
+
+  const unselectedVariantsTooltip = (
+    <>
+      <Text>Currently unselected variants:</Text>
+      <List>
+        {unselectedVariants
+          .filter((variant) => !notIncludedVariants.has(variant.id))
+          .map((variant) => {
+            return <ListItem pl={"2"}>• {variant.id}</ListItem>;
+          })}
+      </List>
+      <Text>Currently fully excluded variants:</Text>
+      <List>
+        {neverIncludedVariants.map((variant) => {
+          return <ListItem pl={"2"}>• {variant.id}</ListItem>;
+        })}
+      </List>
+    </>
+  );
+
   return (
     <>
       <Text mb={2}>
         This variant list contains {renderedVariants.length} variant
         {variantList.variants.length !== 1 ? "s" : ""}.
       </Text>
-      <Text mb={2}>
-        {notIncludedVariants.size} variant
-        {notIncludedVariants.size !== 1 ? "s" : ""} are not included.
-      </Text>
+      {unselectedVariants.length > 0 && (
+        <>
+          <Text mb={2}>
+            {unselectedVariants.length} variant
+            {unselectedVariants.length !== 1 ? "s are" : " is"} not currently
+            not included in calculations.{" "}
+            <HelpTextHover helpText={unselectedVariantsTooltip} />
+          </Text>
+        </>
+      )}
 
       {variantList.status === "Ready" ? (
         <>