diff --git a/src/components/QuerySequence.jsx b/src/components/QuerySequence.jsx index 542dbbc..aff4674 100644 --- a/src/components/QuerySequence.jsx +++ b/src/components/QuerySequence.jsx @@ -3,6 +3,7 @@ import loadWebComponent from "../utils/loadWebComponent"; import { useEffect, useRef, useState } from "react"; import exampleQuery from "../utils/exampleQuery"; import { useBoolean } from "react-use"; +import { has } from "lodash"; const errorBadgeStyle = { borderColor: "var(--vf-ui-color--red)", @@ -22,22 +23,23 @@ const QuerySequence = ({ onStageSequence }) => { loadWebComponent("textarea-sequence", TextareaSequence); const textAreaSequenceRef = useRef(); const [errors, setErrors] = useState({}); - const [hasTextEntered, setHasTextEntered] = useBoolean(false); + const [hasText, setHasText] = useBoolean(false); useEffect(() => { const handleErrorChange = (e) => { - setErrors(e.detail.errors); + if (!hasText) setErrors({}); + else setErrors(e.detail.errors); }; const currentTextArea = textAreaSequenceRef?.current; if (!currentTextArea) return; currentTextArea.addEventListener("error-change", handleErrorChange); - currentTextArea.quill.once("text-change", () => setHasTextEntered(true)); + currentTextArea.quill.once("text-change", () => setHasText(true)); return () => { if (currentTextArea) { currentTextArea.removeEventListener("error-change", handleErrorChange); } }; - }, [textAreaSequenceRef, setHasTextEntered]); + }, [hasText, textAreaSequenceRef, setHasText]); return (
@@ -60,19 +62,18 @@ const QuerySequence = ({ onStageSequence }) => { alphabet="ACTGU " />
- {hasTextEntered && ( -
-
- {errors.hasInvalidCharacters && ( - - invalid alphabet - - )} - {(errors.missingFirstHeader || - errors.headerCheckRequiredForMultipleSequences) && ( +
+
+ {errors.hasInvalidCharacters && ( + + invalid alphabet + + )} + {(errors.missingFirstHeader || + errors.headerCheckRequiredForMultipleSequences) && ( { missing headers )} - {errors.tooShort && ( - - sequence length - - )} -
+ {errors.tooShort && ( + + sequence length + + )}
- )} - +
@@ -109,9 +108,10 @@ const QuerySequence = ({ onStageSequence }) => { className="vf-button vf-button--tertiary vf-button--sm" onClick={async () => { await textAreaSequenceRef.current.quill.setContents([]); + setHasText(false); setErrors({}); }} - disabled={!hasTextEntered} + disabled={!hasText} > Reset