@genspectrum/dashboard-components 0.8.2 → 0.8.4

package/dist/dashboard-components.js

@@ -1001,21 +1001,20 @@ const GsChart = ({ configuration }) => {
       return;
     }
     chartRef.current = new Chart(ctx, configuration);
-    resizeChartAfterFullscreenChange(chartRef, ctx, configuration);
+    const resizeChartAfterFullscreenChange = () => {
+      var _a;
+      (_a = chartRef.current) == null ? void 0 : _a.destroy();
+      chartRef.current = new Chart(ctx, configuration);
+    };
+    document.addEventListener("fullscreenchange", resizeChartAfterFullscreenChange);
     return () => {
       var _a;
+      document.removeEventListener("fullscreenchange", resizeChartAfterFullscreenChange);
       (_a = chartRef.current) == null ? void 0 : _a.destroy();
     };
   }, [canvasRef, configuration]);
   return /* @__PURE__ */ u$1("canvas", { ref: canvasRef });
 };
-const resizeChartAfterFullscreenChange = (chartRef, ctx, configuration) => {
-  document.addEventListener("fullscreenchange", () => {
-    var _a;
-    (_a = chartRef.current) == null ? void 0 : _a.destroy();
-    chartRef.current = new Chart(ctx, configuration);
-  });
-};
 Chart.register(...registerables, VennDiagramController, ArcSlice);
 const MutationComparisonVenn = ({
   data,
@@ -2195,7 +2194,7 @@ const tailwindStyle = `*, ::before, ::after {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -4742,15 +4741,15 @@ input.tab:checked + .tab-content,
 .mt-4 {
   margin-top: 1rem;
 }
-.inline-block {
-  display: inline-block;
-}
 .inline {
   display: inline;
 }
 .flex {
   display: flex;
 }
+.inline-flex {
+  display: inline-flex;
+}
 .table {
   display: table;
 }
@@ -4820,6 +4819,9 @@ input.tab:checked + .tab-content,
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.cursor-pointer {
+  cursor: pointer;
+}
 .resize {
   resize: both;
 }
@@ -4868,9 +4870,6 @@ input.tab:checked + .tab-content,
 .break-words {
   overflow-wrap: break-word;
 }
-.rounded-full {
-  border-radius: 9999px;
-}
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -4899,43 +4898,41 @@ input.tab:checked + .tab-content,
 .border-b-2 {
   border-bottom-width: 2px;
 }
-.border-solid {
-  border-style: solid;
-}
-.border-none {
-  border-style: none;
-}
 .border-error {
   --tw-border-opacity: 1;
-  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
+  border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity, 1)));
 }
 .border-gray-100 {
   --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
 }
 .border-gray-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
 }
 .border-gray-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 .border-gray-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
 }
-.border-red-500 {
+.border-slate-500 {
   --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+  border-color: rgb(100 116 139 / var(--tw-border-opacity, 1));
 }
 .bg-red-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
+}
+.bg-slate-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
 }
 .bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 .p-1 {
   padding: 0.25rem;
@@ -4946,10 +4943,6 @@ input.tab:checked + .tab-content,
 .p-4 {
   padding: 1rem;
 }
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -5014,23 +5007,27 @@ input.tab:checked + .tab-content,
 }
 .text-\\[\\#606060\\] {
   --tw-text-opacity: 1;
-  color: rgb(96 96 96 / var(--tw-text-opacity));
+  color: rgb(96 96 96 / var(--tw-text-opacity, 1));
+}
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
 }
 .text-blue-600 {
   --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
 .text-gray-600 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 .text-neutral-500 {
   --tw-text-opacity: 1;
-  color: rgb(115 115 115 / var(--tw-text-opacity));
+  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
 }
 .text-red-700 {
   --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
 }
 .underline {
   text-decoration-line: underline;
@@ -5060,6 +5057,9 @@ input.tab:checked + .tab-content,
 .duration-150 {
   transition-duration: 150ms;
 }
+.\\@container {
+  container-type: inline-size;
+}
 .mdi--fullscreen {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5 5h5v2H7v3H5zm9 0h5v5h-2V7h-3zm3 9h2v5h-5v-2h3zm-7 3v2H5v-5h2v3z'/%3E%3C/svg%3E");
 }
@@ -5088,10 +5088,6 @@ input.tab:checked + .tab-content,
     border-bottom-left-radius: var(--rounded-box, 1rem);
   }
 }
-.focus-within\\:border-gray-400:focus-within {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
 .hover\\:scale-110:hover {
   --tw-scale-x: 1.1;
   --tw-scale-y: 1.1;
@@ -5104,39 +5100,40 @@ input.tab:checked + .tab-content,
 }
 .hover\\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+.hover\\:bg-gray-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
 }
 .hover\\:font-bold:hover {
   font-weight: 700;
 }
 .hover\\:text-blue-700:hover {
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
+  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
 }
 .hover\\:text-blue-800:hover {
   --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
+  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
 }
 .hover\\:text-gray-400:hover {
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
 .hover\\:text-gray-700:hover {
   --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-.focus\\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.focus\\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
 .peer:hover ~ .peer-hover\\:visible {
   visibility: visible;
 }
+@container (min-width: 30rem) {
+
+  .\\@\\[30rem\\]\\:visible {
+    visibility: visible;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\\:max-w-5xl {
@@ -8801,9 +8798,7 @@ const MutationsOverTimeGrid = ({ data, colorScale }) => {
   const allMutations = data.getFirstAxisKeys();
   const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
   const dates = data.getSecondAxisKeys();
-  const [showProportionText, setShowProportionText] = h(false);
   const gridRef = A(null);
-  useShowProportion(gridRef, dates.length, setShowProportionText);
   return /* @__PURE__ */ u$1(Fragment, { children: [
     allMutations.length > MAX_NUMBER_OF_GRID_ROWS && /* @__PURE__ */ u$1("div", { className: "pl-2", children: [
       "Showing ",
@@ -8822,6 +8817,7 @@ const MutationsOverTimeGrid = ({ data, colorScale }) => {
           gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
           gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`
         },
+        className: "@container",
         children: shownMutations.map((mutation, rowIndex) => {
           return /* @__PURE__ */ u$1(Fragment, { children: [
             /* @__PURE__ */ u$1(
@@ -8851,7 +8847,6 @@ const MutationsOverTimeGrid = ({ data, colorScale }) => {
                       date,
                       mutation,
                       tooltipPosition,
-                      showProportionText,
                       colorScale
                     }
                   )
@@ -8865,30 +8860,12 @@ const MutationsOverTimeGrid = ({ data, colorScale }) => {
     )
   ] });
 };
-function useShowProportion(gridRef, girdColumns, setShowProportionText) {
-  y(() => {
-    const checkWidth = () => {
-      if (gridRef.current) {
-        const width = gridRef.current.getBoundingClientRect().width;
-        const widthPerDate = (width - remToPx(MUTATION_CELL_WIDTH_REM)) / girdColumns;
-        const maxWidthProportionText = 28;
-        setShowProportionText(widthPerDate > maxWidthProportionText);
-      }
-    };
-    checkWidth();
-    window.addEventListener("resize", checkWidth);
-    return () => {
-      window.removeEventListener("resize", checkWidth);
-    };
-  }, [girdColumns, gridRef, setShowProportionText]);
-}
-const remToPx = (rem) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
   const tooltipX = rowIndex < rows / 2 ? "bottom" : "top";
   const tooltipY = columnIndex < columns / 2 ? "start" : "end";
   return `${tooltipX}-${tooltipY}`;
 }
-const ProportionCell = ({ value, mutation, date, tooltipPosition, showProportionText, colorScale }) => {
+const ProportionCell = ({ value, mutation, date, tooltipPosition, colorScale }) => {
   const dateClass = toTemporalClass(date);
   const tooltipContent = /* @__PURE__ */ u$1("div", { children: [
     /* @__PURE__ */ u$1("p", { children: /* @__PURE__ */ u$1("span", { className: "font-bold", children: dateClass.englishName() }) }),
@@ -8918,7 +8895,7 @@ const ProportionCell = ({ value, mutation, date, tooltipPosition, showProportion
         color: getTextColorForScale(value.proportion, colorScale)
       },
       className: `w-full h-full text-center hover:font-bold text-xs group`,
-      children: showProportionText ? formatProportion(value.proportion, 0) : void 0
+      children: /* @__PURE__ */ u$1("span", { className: "invisible @[30rem]:visible", children: formatProportion(value.proportion, 0) })
     }
   ) }) });
 };
@@ -10013,31 +9990,19 @@ const MutationFilterInner = ({ initialValue }) => {
   const [selectedFilters, setSelectedFilters] = h(
     getInitialState(initialValue, referenceGenome)
   );
-  const [inputValue, setInputValue] = h("");
-  const [isError, setIsError] = h(false);
-  const formRef = A(null);
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    if (inputValue === "") {
-      return;
-    }
-    const parsedMutation = parseAndValidateMutation(inputValue, referenceGenome);
-    if (parsedMutation === null) {
-      setIsError(true);
-      return;
-    }
-    const newSelectedValues = {
+  const filterRef = A(null);
+  const handleRemoveValue = (option) => {
+    const newSelectedFilters = {
       ...selectedFilters,
-      [parsedMutation.type]: [...selectedFilters[parsedMutation.type], parsedMutation.value]
+      [option.type]: selectedFilters[option.type].filter((i2) => option.value.toString() != i2.toString())
     };
-    setSelectedFilters(newSelectedValues);
-    fireChangeEvent(newSelectedValues);
-    setInputValue("");
+    setSelectedFilters(newSelectedFilters);
+    fireChangeEvent(newSelectedFilters);
   };
   const fireChangeEvent = (selectedFilters2) => {
     var _a;
     const detail = mapToMutationFilterStrings(selectedFilters2);
-    (_a = formRef.current) == null ? void 0 : _a.dispatchEvent(
+    (_a = filterRef.current) == null ? void 0 : _a.dispatchEvent(
       new CustomEvent("gs-mutation-filter-changed", {
         detail,
         bubbles: true,
@@ -10045,38 +10010,25 @@ const MutationFilterInner = ({ initialValue }) => {
       })
     );
   };
-  const handleInputChange = (event) => {
-    setInputValue(event.target.value);
-    setIsError(false);
-  };
-  return /* @__PURE__ */ u$1("form", { className: "w-full border boder-gray-300 rounded-md relative", onSubmit: handleSubmit, ref: formRef, children: [
-    /* @__PURE__ */ u$1("div", { className: "absolute -top-3 -right-3", children: /* @__PURE__ */ u$1(MutationFilterInfo, {}) }),
-    /* @__PURE__ */ u$1("div", { className: "w-full flex p-2 flex-wrap items-center", children: [
+  return /* @__PURE__ */ u$1("div", { className: "w-full border border-gray-300 rounded-md relative", ref: filterRef, children: [
+    /* @__PURE__ */ u$1("div", { className: "absolute -top-3 -right-3 z-10", children: /* @__PURE__ */ u$1(MutationFilterInfo, {}) }),
+    /* @__PURE__ */ u$1("div", { className: "relative w-full p-1", children: [
       /* @__PURE__ */ u$1(
-        SelectedMutationDisplay,
+        MutationFilterSelector,
         {
-          selectedFilters,
-          setSelectedFilters,
-          fireChangeEvent
+          referenceGenome,
+          setSelectedFilters: (newSelectedFilters) => {
+            setSelectedFilters(newSelectedFilters);
+            fireChangeEvent(newSelectedFilters);
+          },
+          selectedFilters
         }
       ),
       /* @__PURE__ */ u$1(
-        "div",
+        SelectedMutationFilterDisplay,
         {
-          className: `w-full flex border ${isError ? "border-red-500" : "border-gray-300"} border-solid m-2 text-sm focus-within:border-gray-400 `,
-          children: [
-            /* @__PURE__ */ u$1(
-              "input",
-              {
-                className: "grow flex-1 p-1 border-none focus:outline-none focus:ring-0",
-                type: "text",
-                value: inputValue,
-                onInput: handleInputChange,
-                placeholder: getPlaceholder(referenceGenome)
-              }
-            ),
-            /* @__PURE__ */ u$1("button", { type: "submit", className: "btn btn-xs m-1", children: "+" })
-          ]
+          selectedFilters,
+          handleRemoveValue
         }
       )
     ] })
@@ -10111,123 +10063,164 @@ function getInitialState(initialValue, referenceGenome) {
     }
   );
 }
+const MutationFilterSelector = ({ referenceGenome, setSelectedFilters, selectedFilters }) => {
+  const [option, setOption] = h(null);
+  const [inputValue, setInputValue] = h("");
+  const selectorRef = A(null);
+  const handleInputChange = (newValue) => {
+    if (newValue.includes(",") || newValue.includes(";")) {
+      handleCommaSeparatedInput(newValue);
+    } else {
+      setInputValue(newValue);
+      const result = parseAndValidateMutation(newValue, referenceGenome);
+      setOption(result);
+    }
+  };
+  const handleCommaSeparatedInput = (inputValue2) => {
+    const inputValues = inputValue2.split(/[,;]/);
+    let newSelectedOptions = selectedFilters;
+    let updated = false;
+    const invalidQueries = [];
+    for (const value of inputValues) {
+      const trimmedValue = value.trim();
+      const parsedMutation = parseAndValidateMutation(trimmedValue, referenceGenome);
+      if (parsedMutation) {
+        const type = parsedMutation.type;
+        if (!selectedFilters[type].some((i2) => parsedMutation.value.toString() === i2.toString())) {
+          newSelectedOptions = {
+            ...newSelectedOptions,
+            [parsedMutation.type]: [...newSelectedOptions[parsedMutation.type], parsedMutation.value]
+          };
+          updated = true;
+        }
+      } else {
+        invalidQueries.push(trimmedValue);
+      }
+    }
+    setInputValue(invalidQueries.join(","));
+    if (updated) {
+      setSelectedFilters(newSelectedOptions);
+      setOption(null);
+    }
+  };
+  const handleOptionClick = () => {
+    if (option === null) {
+      return;
+    }
+    const type = option.type;
+    if (!selectedFilters[type].some((i2) => option.value.toString() === i2.toString())) {
+      const newSelectedValues = {
+        ...selectedFilters,
+        [option == null ? void 0 : option.type]: [...selectedFilters[option == null ? void 0 : option.type], option == null ? void 0 : option.value]
+      };
+      setSelectedFilters(newSelectedValues);
+    }
+    setInputValue("");
+    setOption(null);
+  };
+  const handleEnterPress = (event) => {
+    if (event.key === "Enter" && option !== null) {
+      handleOptionClick();
+    }
+  };
+  const handleBlur = (event) => {
+    var _a;
+    if (!((_a = selectorRef.current) == null ? void 0 : _a.contains(event.relatedTarget))) {
+      setOption(null);
+    }
+  };
+  return /* @__PURE__ */ u$1("div", { ref: selectorRef, tabIndex: -1, children: [
+    /* @__PURE__ */ u$1(
+      "input",
+      {
+        type: "text",
+        className: "w-full p-2 border-gray-300 border rounded-md",
+        placeholder: getPlaceholder(referenceGenome),
+        value: inputValue,
+        onInput: (e2) => {
+          handleInputChange(e2.target.value);
+        },
+        onKeyDown: (e2) => handleEnterPress(e2),
+        onFocus: () => handleInputChange(inputValue),
+        onBlur: handleBlur
+      }
+    ),
+    option != null && /* @__PURE__ */ u$1(
+      "div",
+      {
+        role: "option",
+        className: "hover:bg-gray-300 absolute cursor-pointer p-2 border-1 border-slate-500 bg-slate-200",
+        onClick: () => handleOptionClick(),
+        children: option.value.toString()
+      }
+    )
+  ] });
+};
 function getPlaceholder(referenceGenome) {
   const segmentPrefix = referenceGenome.nucleotideSequences.length > 1 ? `${referenceGenome.nucleotideSequences[0].name}:` : "";
   const firstGene = referenceGenome.genes[0].name;
   return `Enter a mutation (e.g. ${segmentPrefix}A123T, ins_${segmentPrefix}123:AT, ${firstGene}:M123E, ins_${firstGene}:123:ME)`;
 }
-const SelectedMutationDisplay = ({ selectedFilters, setSelectedFilters, fireChangeEvent }) => {
-  const onSelectedRemoved = (mutation, key) => {
-    const newSelectedValues = {
-      ...selectedFilters,
-      [key]: selectedFilters[key].filter((i2) => !mutation.equals(i2))
-    };
-    setSelectedFilters(newSelectedValues);
-    fireChangeEvent(newSelectedValues);
-  };
-  return /* @__PURE__ */ u$1(Fragment, { children: [
+const backgroundColor = {
+  aminoAcidMutations: singleGraphColorRGBByName("teal", 0.4),
+  nucleotideMutations: singleGraphColorRGBByName("green", 0.4),
+  aminoAcidInsertions: singleGraphColorRGBByName("purple", 0.4),
+  nucleotideInsertions: singleGraphColorRGBByName("indigo", 0.4)
+};
+const backgroundColorMap = (data) => {
+  return backgroundColor[data.type] || "lightgray";
+};
+const SelectedMutationFilterDisplay = ({ selectedFilters, handleRemoveValue }) => {
+  return /* @__PURE__ */ u$1("div", { className: "flex flex-wrap", children: [
     selectedFilters.nucleotideMutations.map((mutation) => /* @__PURE__ */ u$1(
-      SelectedNucleotideMutation,
+      SelectedFilter,
       {
-        mutation,
-        onDelete: (mutation2) => onSelectedRemoved(mutation2, "nucleotideMutations")
+        handleRemoveValue,
+        mutationFilter: { type: "nucleotideMutations", value: mutation }
       },
       mutation.toString()
     )),
     selectedFilters.aminoAcidMutations.map((mutation) => /* @__PURE__ */ u$1(
-      SelectedAminoAcidMutation,
+      SelectedFilter,
       {
-        mutation,
-        onDelete: (mutation2) => onSelectedRemoved(mutation2, "aminoAcidMutations")
+        handleRemoveValue,
+        mutationFilter: { type: "aminoAcidMutations", value: mutation }
       },
       mutation.toString()
     )),
-    selectedFilters.nucleotideInsertions.map((insertion) => /* @__PURE__ */ u$1(
-      SelectedNucleotideInsertion,
+    selectedFilters.nucleotideInsertions.map((mutation) => /* @__PURE__ */ u$1(
+      SelectedFilter,
       {
-        insertion,
-        onDelete: (insertion2) => onSelectedRemoved(insertion2, "nucleotideInsertions")
+        handleRemoveValue,
+        mutationFilter: { type: "nucleotideInsertions", value: mutation }
       },
-      insertion.toString()
+      mutation.toString()
     )),
-    selectedFilters.aminoAcidInsertions.map((insertion) => /* @__PURE__ */ u$1(
-      SelectedAminoAcidInsertion,
+    selectedFilters.aminoAcidInsertions.map((mutation) => /* @__PURE__ */ u$1(
+      SelectedFilter,
       {
-        insertion,
-        onDelete: (insertion2) => onSelectedRemoved(insertion2, "aminoAcidInsertions")
+        handleRemoveValue,
+        mutationFilter: { type: "aminoAcidInsertions", value: mutation }
       },
-      insertion.toString()
+      mutation.toString()
     ))
   ] });
 };
-const SelectedAminoAcidInsertion = ({ insertion, onDelete }) => {
-  const backgroundColor = singleGraphColorRGBByName("teal", 0.3);
-  const textColor = singleGraphColorRGBByName("teal", 1);
-  return /* @__PURE__ */ u$1(
-    SelectedFilter,
-    {
-      mutation: insertion,
-      onDelete,
-      backgroundColor,
-      textColor
-    }
-  );
-};
-const SelectedAminoAcidMutation = ({ mutation, onDelete }) => {
-  const backgroundColor = singleGraphColorRGBByName("rose", 0.3);
-  const textColor = singleGraphColorRGBByName("rose", 1);
-  return /* @__PURE__ */ u$1(
-    SelectedFilter,
-    {
-      mutation,
-      onDelete,
-      backgroundColor,
-      textColor
-    }
-  );
-};
-const SelectedNucleotideMutation = ({ mutation, onDelete }) => {
-  const backgroundColor = singleGraphColorRGBByName("indigo", 0.3);
-  const textColor = singleGraphColorRGBByName("indigo", 1);
-  return /* @__PURE__ */ u$1(
-    SelectedFilter,
-    {
-      mutation,
-      onDelete,
-      backgroundColor,
-      textColor
-    }
-  );
-};
-const SelectedNucleotideInsertion = ({ insertion, onDelete }) => {
-  const backgroundColor = singleGraphColorRGBByName("green", 0.3);
-  const textColor = singleGraphColorRGBByName("green", 1);
-  return /* @__PURE__ */ u$1(
-    SelectedFilter,
-    {
-      mutation: insertion,
-      onDelete,
-      backgroundColor,
-      textColor
-    }
-  );
-};
-const SelectedFilter = ({
-  mutation,
-  onDelete,
-  backgroundColor,
-  textColor
-}) => {
+const SelectedFilter = ({ handleRemoveValue, mutationFilter }) => {
   return /* @__PURE__ */ u$1(
     "span",
     {
-      class: "inline-block mx-1 px-2 py-1 font-medium text-xs rounded-full",
-      style: { backgroundColor, color: textColor },
+      name: mutationFilter.value.toString(),
+      className: "center p-2 m-1 inline-flex text-black rounded-md",
+      style: {
+        backgroundColor: backgroundColorMap(mutationFilter)
+      },
       children: [
-        mutation.toString(),
-        /* @__PURE__ */ u$1("button", { className: "ml-1", type: "button", onClick: () => onDelete(mutation), children: "✕" })
+        mutationFilter.value.toString(),
+        /* @__PURE__ */ u$1("button", { className: "ml-1", onClick: () => handleRemoveValue(mutationFilter), children: "×" })
       ]
-    }
+    },
+    mutationFilter.value.toString()
   );
 };
 function mapToMutationFilterStrings(selectedFilters) {