@genspectrum/dashboard-components 0.8.3 → 0.8.4

package/custom-elements.json

@@ -903,7 +903,7 @@
           "type": {
             "text": "StoryObj<MutationFilterProps>"
           },
-          "default": "{ ...Template, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); const submitButton = () => canvas.getByRole('button', { name: '+' }); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enter a valid mutation', async () => { await userEvent.type(inputField(), 'A123T'); await waitFor(() => submitButton().click()); await waitFor(() => expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { nucleotideMutations: ['A123T'], aminoAcidMutations: [], nucleotideInsertions: [], aminoAcidInsertions: [], }, }), ), ); }); }, }"
+          "default": "{ ...Template, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enter a valid mutation', async () => { await userEvent.type(inputField(), 'A123T'); const option = await canvas.findByRole('option'); await userEvent.click(option); await waitFor(() => expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { nucleotideMutations: ['A123T'], aminoAcidMutations: [], nucleotideInsertions: [], aminoAcidInsertions: [], }, }), ), ); }); }, }"
         },
         {
           "kind": "variable",
@@ -911,7 +911,7 @@
           "type": {
             "text": "StoryObj<MutationFilterProps>"
           },
-          "default": "{ ...Template, args: { initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); await waitFor(() => { expect(canvas.getByText('seg1:123T')).toBeVisible(); expect(canvas.getByText('gene2:56')).toBeVisible(); return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
+          "default": "{ ...Template, args: { initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(() => { const placeholderText = inputField().getAttribute('placeholder'); expect(placeholderText).toEqual( 'Enter a mutation (e.g. seg1:A123T, ins_seg1:123:AT, gene1:M123E, ins_gene1:123:ME)', ); }); await waitFor(() => { expect(canvas.getByText('seg1:123T')).toBeVisible(); expect(canvas.getByText('gene2:56')).toBeVisible(); return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
         }
       ],
       "exports": [
@@ -955,7 +955,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\nThis component provides an input field to specify filters for nucleotide and amino acid mutations and insertions.\n\nInput values have to be provided one at a time and submitted by pressing the Enter key or by clicking the '+' button.\nAfter submission, the component validates the input and fires an event with the selected mutations.\nAll previously selected mutations are displayed at the input field and added to the event.\nUsers can remove a mutation by clicking the 'x' button next to the mutation.\n\n## Input Validation\n\nValidation of the input is performed according to the following rules:\n\n### Mutations\n\nMutations have to conform to the following format: `<gene/segment>:<symbol at reference><position><Substituted symbol/Deletion>`\n- Gene/segment: The gene or segment where the mutation occurs. Must be contained in the reference genome.\n  (Optional for elements with only one gene/segment)\n- Symbol at reference: The symbol at the reference position. (Optional)\n- Position: The position of the mutation. (Required)\n- Substituted symbol/Deletion: The substituted symbol or '-' for a deletion. (Required)\n\nExamples: `S:614G`, `614G`, `614-`, `614G`\n\n### Insertions\n\nInsertions have to conform to the following format: `ins_<gene/segment>:<position>:<Inserted symbols>`\n- Gene/segment: The gene or segment where the insertion occurs. Must be contained in the reference genome.\n  (Optional for elements with only one gene/segment)\n- Position: The position of the insertion. (Required)\n- Inserted symbols: The symbols that are inserted. (Required)\n\nExamples: `ins_S:614:G`, `ins_614:G`",
+          "description": "## Context\nThis component provides an input field to specify filters for nucleotide and amino acid mutations and insertions.\n\nInput values have to be provided one at a time and submitted by pressing the Enter key or by selecting an option from the dropdown.\nAlternatively, they can be provided as a string of comma-separated values, which will be directly parsed and validated.\nAfter submission (after pressing Enter or pasting a comma-separated string) an event is fired with the selected mutations.\nAll previously selected mutations are displayed at the input field and added to the event.\nUsers can remove a mutation by clicking the 'x' button next to the mutation.\n\n## Input Validation\n\nValidation of the input is performed according to the following rules:\n\n### Mutations\n\nMutations have to conform to the following format: `<gene/segment>:<symbol at reference><position><Substituted symbol/Deletion>`\n- Gene/segment: The gene or segment where the mutation occurs. Must be contained in the reference genome.\n  (Optional for elements with only one gene/segment)\n- Symbol at reference: The symbol at the reference position. (Optional)\n- Position: The position of the mutation. (Required)\n- Substituted symbol/Deletion: The substituted symbol or '-' for a deletion. (Required)\n\nExamples: `S:614G`, `614G`, `614-`, `614G`\n\n### Insertions\n\nInsertions have to conform to the following format: `ins_<gene/segment>:<position>:<Inserted symbols>`\n- Gene/segment: The gene or segment where the insertion occurs. Must be contained in the reference genome.\n  (Optional for elements with only one gene/segment)\n- Position: The position of the insertion. (Required)\n- Inserted symbols: The symbols that are inserted. (Required)\n\nExamples: `ins_S:614:G`, `ins_614:G`",
           "name": "MutationFilterComponent",
           "members": [
             {

package/dist/dashboard-components.js

@@ -4741,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;
 }
@@ -4819,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;
 }
@@ -4867,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;
 }
@@ -4898,12 +4898,6 @@ 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, 1)));
@@ -4924,14 +4918,18 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   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, 1));
+  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, 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, 1));
@@ -4945,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;
@@ -5015,6 +5009,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   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, 1));
@@ -5090,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, 1));
-}
 .hover\\:scale-110:hover {
   --tw-scale-x: 1.1;
   --tw-scale-y: 1.1;
@@ -5108,6 +5102,10 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   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;
 }
@@ -5127,15 +5125,6 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
 }
-.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);
-}
 .peer:hover ~ .peer-hover\\:visible {
   visibility: visible;
 }
@@ -10001,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,
@@ -10033,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
         }
       )
     ] })
@@ -10099,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) {