@truedat/qx 8.6.7 → 8.7.1

package/src/components/dataViews/simpleForm/InformationForm.js

@@ -5,7 +5,7 @@ import { Divider, Header, Form, Segment } from "semantic-ui-react";
 import { useFormContext, Controller } from "react-hook-form";
 
 const SourceSelector = lazy(
-  () => import("@truedat/cx/sources/components/SourceSelector")
+  () => import("@truedat/cx/sources/components/SourceSelector"),
 );
 
 const InformationForm = ({
@@ -34,7 +34,7 @@ const InformationForm = ({
           rules={{
             required: formatMessage(
               { id: "form.validation.required" },
-              { prop: formatMessage({ id: "dataViews.form.name" }) }
+              { prop: formatMessage({ id: "dataViews.form.name" }) },
             ),
           }}
           render={({

package/src/components/dataViews/simpleForm/SelectionForm.js

@@ -16,7 +16,7 @@ export default function SelectionForm({ setStepInformation, stepInformation }) {
 
   const fields = _.flow(
     _.map.convert({ cap: false })((q, id) => ({ ...q, id })),
-    reduceQueryableFields(formatMessage)
+    reduceQueryableFields(formatMessage),
   )(queryables);
 
   useEffect(() => {

package/src/components/dataViews/simpleForm/SimpleDataViewEditor.js

@@ -5,12 +5,12 @@ import { Button, Divider, Grid, Icon, Form, Step } from "semantic-ui-react";
 import { FormProvider, useForm, useFieldArray } from "react-hook-form";
 import { useIntl } from "react-intl";
 import QxContext from "@truedat/qx/components/QxContext";
+import CancelButton from "../actions/CancelButton";
+import DataViewSummary from "../DataViewSummary";
 import InformationForm from "./InformationForm";
 import DatasetForm from "./DatasetForm";
 import AggregationForm from "./AggregationForm";
 import SelectionForm from "./SelectionForm";
-import CancelButton from "../actions/CancelButton";
-import DataViewSummary from "../DataViewSummary";
 
 export default function SimpleDataViewEditor({
   selectedDataView,
@@ -54,7 +54,7 @@ export default function SimpleDataViewEditor({
         const ok = await trigger(stepInformation[step]["fieldNames"]);
         const content = ok ? { status: "valid" } : { status: "error" };
         return [step, content];
-      })(steps)
+      })(steps),
     );
 
     setStepState({ ...stepState, ..._.fromPairs(validations) });

package/src/components/dataViews/summary/GroupBy.js

@@ -1,12 +1,12 @@
 import _ from "lodash/fp";
 import { useIntl } from "react-intl";
 import { List, Header, Icon, Label, Segment } from "semantic-ui-react";
+import { ExpressionViewer } from "@truedat/qx/components/common/ClauseViewer";
 import {
   getAggregateFields,
   getGroupByFields,
 } from "../queryableSummaryHelpers";
 import { getColorById } from "../queryableFunctions";
-import { ExpressionViewer } from "@truedat/qx/components/common/ClauseViewer";
 
 export default function GroupBy({ queryable }) {
   const { formatMessage } = useIntl();

package/src/components/dataViews/summary/Join.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
 import { useIntl } from "react-intl";
 import { List, Icon, Label, Header, Segment } from "semantic-ui-react";
-import { getJoinInfo } from "../queryableSummaryHelpers";
 import ClauseViewer from "@truedat/qx/components/common/ClauseViewer";
+import { getJoinInfo } from "../queryableSummaryHelpers";
 import JoinTypeIcon from "../queryableProperties/JoinTypeIcon";
 import { getColorById } from "../queryableFunctions";
 import "@truedat/qx/styles/Expression.less";
@@ -12,55 +12,57 @@ export default function Join({ queryable }) {
   const joinResource = getJoinInfo(queryable);
   const color = getColorById(queryable.id);
 
-  return joinResource && (
-    <>
-      <Header as="h5">
-        <Icon name="linkify" size="small" />
-        <Header.Content>
-          {formatMessage({ id: "dataViews.form.queryable.join" })}
-        </Header.Content>
-      </Header>
-      <Segment>
-        <List size="big">
-          <List.Item>
-            <List.Content>
-              <List.Description className="description-flex-wrap text-break-word">
-                <div style={{ display: "flex", rowGap: 5, flexWrap: "wrap" }}>
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                    }}
-                  >
-                    <JoinTypeIcon type={joinResource.joinType} />
-                    <Label horizontal>
-                      {formatMessage({
-                        id: `queryables.resource.selector.${joinResource.type}`,
-                      })}
-                    </Label>
-                  </div>
-                  <Label color={color} className="text-break-word">
-                    {joinResource.name}
-                  </Label>
-                </div>
-                {joinResource.alias && (
-                  <>
-                    <b style={{ marginRight: 4, marginLeft: 4 }}>as</b>
+  return (
+    joinResource && (
+      <>
+        <Header as="h5">
+          <Icon name="linkify" size="small" />
+          <Header.Content>
+            {formatMessage({ id: "dataViews.form.queryable.join" })}
+          </Header.Content>
+        </Header>
+        <Segment>
+          <List size="big">
+            <List.Item>
+              <List.Content>
+                <List.Description className="description-flex-wrap text-break-word">
+                  <div style={{ display: "flex", rowGap: 5, flexWrap: "wrap" }}>
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                      }}
+                    >
+                      <JoinTypeIcon type={joinResource.joinType} />
+                      <Label horizontal>
+                        {formatMessage({
+                          id: `queryables.resource.selector.${joinResource.type}`,
+                        })}
+                      </Label>
+                    </div>
                     <Label color={color} className="text-break-word">
-                      {joinResource.alias}
+                      {joinResource.name}
                     </Label>
-                  </>
-                )}
-                {joinResource.clauses && _.size(joinResource.clauses) > 0 && (
-                  <div style={{ marginTop: 4, width: "100%" }}>
-                    <ClauseViewer clause={joinResource.clauses} />
                   </div>
-                )}
-              </List.Description>
-            </List.Content>
-          </List.Item>
-        </List>
-      </Segment>
-    </>
+                  {joinResource.alias && (
+                    <>
+                      <b style={{ marginRight: 4, marginLeft: 4 }}>as</b>
+                      <Label color={color} className="text-break-word">
+                        {joinResource.alias}
+                      </Label>
+                    </>
+                  )}
+                  {joinResource.clauses && _.size(joinResource.clauses) > 0 && (
+                    <div style={{ marginTop: 4, width: "100%" }}>
+                      <ClauseViewer clause={joinResource.clauses} />
+                    </div>
+                  )}
+                </List.Description>
+              </List.Content>
+            </List.Item>
+          </List>
+        </Segment>
+      </>
+    )
   );
 }

package/src/components/dataViews/summary/Select.js

@@ -1,8 +1,8 @@
 import _ from "lodash/fp";
 import { useIntl } from "react-intl";
 import { List, Header, Icon, Segment } from "semantic-ui-react";
-import { getSelectFields } from "../queryableSummaryHelpers";
 import { ExpressionViewer } from "@truedat/qx/components/common/ClauseViewer";
+import { getSelectFields } from "../queryableSummaryHelpers";
 
 export default function Select({ queryable }) {
   const { formatMessage } = useIntl();

package/src/components/dataViews/summary/Where.js

@@ -14,7 +14,12 @@ const hasValidClauses = (clauses) => {
 
     return (
       _.size(expressions) > 0 &&
-      _.some((expr) => !_.isNil(expr?.value?.name) && (!_.isNil(expr?.value?.args?.arg1?.value) || !_.isNil(expr?.value?.args?.arg2?.value)))(expressions)
+      _.some(
+        (expr) =>
+          !_.isNil(expr?.value?.name) &&
+          (!_.isNil(expr?.value?.args?.arg1?.value) ||
+            !_.isNil(expr?.value?.args?.arg2?.value)),
+      )(expressions)
     );
   })(clauses);
 };

package/src/components/functions/FunctionEditor.js

@@ -65,7 +65,7 @@ export default function FunctionEditor({
                   rules={{
                     required: formatMessage(
                       { id: "form.validation.required" },
-                      { prop: formatMessage({ id: "functions.form.name" }) }
+                      { prop: formatMessage({ id: "functions.form.name" }) },
                     ),
                   }}
                   render={({

package/src/components/functions/Functions.js

@@ -36,7 +36,7 @@ export default function Functions() {
 
   const functions = data?.data;
   const userFunctions = _.reject(({ expression }) => _.isNil(expression))(
-    functions
+    functions,
   );
 
   const changeSelectedFunction = (selection) => {

package/src/components/functions/__tests__/FunctionEditor.spec.js

@@ -85,14 +85,14 @@ describe("<FunctionEditor />", () => {
     await user.click(rendered.getByRole("option", { name: /true/i }));
 
     await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled(),
     );
 
     await user.click(rendered.getByRole("button", { name: /cancel/i }));
     expect(onCancel).toHaveBeenCalledTimes(0);
 
     await user.click(
-      rendered.getByRole("button", { name: /modal-negative-action/i })
+      rendered.getByRole("button", { name: /modal-negative-action/i }),
     );
     expect(onCancel).toHaveBeenCalledTimes(0);
 
@@ -102,7 +102,7 @@ describe("<FunctionEditor />", () => {
     expect(rendered.container).toMatchSnapshot();
 
     await user.click(
-      rendered.getByRole("button", { name: /modal-affirmative-action/i })
+      rendered.getByRole("button", { name: /modal-affirmative-action/i }),
     );
     expect(onCancel).toHaveBeenCalledTimes(1);
   });
@@ -118,7 +118,7 @@ describe("<FunctionEditor />", () => {
     expect(onDelete).toHaveBeenCalledTimes(0);
 
     await user.click(
-      rendered.getByRole("button", { name: /modal-negative-action/i })
+      rendered.getByRole("button", { name: /modal-negative-action/i }),
     );
     expect(onDelete).toHaveBeenCalledTimes(0);
 
@@ -128,7 +128,7 @@ describe("<FunctionEditor />", () => {
     expect(rendered.container).toMatchSnapshot();
 
     await user.click(
-      rendered.getByRole("button", { name: /modal-affirmative-action/i })
+      rendered.getByRole("button", { name: /modal-affirmative-action/i }),
     );
     expect(onDelete).toHaveBeenCalledTimes(1);
   });
@@ -147,13 +147,13 @@ describe("<FunctionEditor />", () => {
     await user.click(rendered.getByRole("option", { name: /true/i }));
 
     await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled(),
     );
 
     await user.click(rendered.getByRole("button", { name: /save/i }));
 
     await waitFor(() =>
-      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled()
+      expect(rendered.getByRole("button", { name: /save/i })).toBeEnabled(),
     );
 
     expect(onSubmit.mock.calls[0][0]).toEqual({

package/src/components/functions/__tests__/FunctionParams.spec.js

@@ -9,7 +9,7 @@ describe("<FunctionParams />", () => {
     const rendered = render(
       <TestFormWrapper>
         <FunctionParams />
-      </TestFormWrapper>
+      </TestFormWrapper>,
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
@@ -22,7 +22,7 @@ describe("<FunctionParams />", () => {
     const rendered = render(
       <TestFormWrapper defaultValues={defaultValues}>
         <FunctionParams />
-      </TestFormWrapper>
+      </TestFormWrapper>,
     );
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
@@ -38,11 +38,11 @@ describe("<FunctionParams />", () => {
     const rendered = render(
       <TestFormWrapper watcher={watcher}>
         <FunctionParams />
-      </TestFormWrapper>
+      </TestFormWrapper>,
     );
     await waitForLoad(rendered);
     await user.click(
-      rendered.getByRole("button", { name: /functions.form.add_param/i })
+      rendered.getByRole("button", { name: /functions.form.add_param/i }),
     );
 
     const nameInput = () =>

package/src/components/qualityControls/ConceptLinkNew.js

@@ -1,12 +1,12 @@
 import { lazy, use } from "react";
 import { Header } from "semantic-ui-react";
 import { useIntl } from "react-intl";
-import QxContext from "../QxContext";
 import { makeTagOptionsSelector } from "@truedat/core/selectors";
 import { linkTo } from "@truedat/core/routes";
+import QxContext from "../QxContext";
 
 const ConceptLinkForm = lazy(
-  () => import("@truedat/lm/components/ConceptLinkForm")
+  () => import("@truedat/lm/components/ConceptLinkForm"),
 );
 
 const selectTagOptions = makeTagOptionsSelector("quality_control");

package/src/components/qualityControls/ConceptLinks.js

@@ -2,7 +2,7 @@ import { lazy, use } from "react";
 import QxContext from "../QxContext";
 
 const QualityControlConcepts = lazy(
-  () => import("@truedat/lm/components/QualityControlConcepts")
+  () => import("@truedat/lm/components/QualityControlConcepts"),
 );
 
 const ConceptLinks = () => {

package/src/components/qualityControls/ContentSummary.js

@@ -5,32 +5,34 @@ import { FormattedMessage } from "react-intl";
 import { Header, Icon } from "semantic-ui-react";
 
 const DynamicFormViewer = lazy(
-    () => import("@truedat/df/components/DynamicFormViewer")
+  () => import("@truedat/df/components/DynamicFormViewer"),
 );
 
 export default function ContentSummary({ qualityControl }) {
-    if (!qualityControl) return null;
+  if (!qualityControl) return null;
 
-    const { df_type, dynamic_content, domain_ids } = qualityControl;
+  const { df_type, dynamic_content, domain_ids } = qualityControl;
 
-    return df_type && (
-        <>
-            <Header as="h5">
-                <Icon name="info" size="small" />
-                <Header.Content>
-                    <FormattedMessage id="quality_control.form.information" />
-                </Header.Content>
-            </Header>
-            <DynamicFormViewer
-                boxLayout
-                template={df_type}
-                content={dynamic_content}
-                domainIds={domain_ids}
-            />
-        </>
-    );
+  return (
+    df_type && (
+      <>
+        <Header as="h5">
+          <Icon name="info" size="small" />
+          <Header.Content>
+            <FormattedMessage id="quality_control.form.information" />
+          </Header.Content>
+        </Header>
+        <DynamicFormViewer
+          boxLayout
+          template={df_type}
+          content={dynamic_content}
+          domainIds={domain_ids}
+        />
+      </>
+    )
+  );
 }
 
 ContentSummary.propTypes = {
-    qualityControl: PropTypes.object,
-};
+  qualityControl: PropTypes.object,
+};

package/src/components/qualityControls/ControlProperties.js

@@ -2,8 +2,8 @@ import { use, lazy } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { Form, Segment } from "semantic-ui-react";
 import QxContext from "@truedat/qx/components/QxContext";
-import ResourceWithValidation from "./controlProperties/ResourceWithValidation";
 import { useIntl } from "react-intl";
+import ResourceWithValidation from "./controlProperties/ResourceWithValidation";
 
 const SourceSelector = lazy(
   () => import("@truedat/cx/sources/components/SourceSelector"),

package/src/components/qualityControls/ControlPropertiesView.js

@@ -4,8 +4,8 @@ import { FormattedMessage } from "react-intl";
 import { Header, Icon, Segment, List, Label } from "semantic-ui-react";
 import { Loading } from "@truedat/core/components";
 import ClauseViewer from "@truedat/qx/components/common/ClauseViewer";
-import DataViewSummary from "../dataViews/DataViewSummary";
 import { useDataViewFetch } from "@truedat/qx/hooks/useDataViews";
+import DataViewSummary from "../dataViews/DataViewSummary";
 import { getColorById } from "../dataViews/queryableFunctions";
 
 const ratioViewProps = {

package/src/components/qualityControls/EditQualityControl.js

@@ -16,7 +16,7 @@ export default function EditQualityControl() {
   const { trigger, isMutating } = useQualityControlUpdateDraft(id);
   const { data, loading: qualityControlLoading } = useQualityControl(
     id,
-    version
+    version,
   );
   const qualityControl = data?.data;
   const loading = qualityControlLoading || isMutating;

package/src/components/qualityControls/NewDraftQualityControl.js

@@ -18,7 +18,7 @@ export default function NewDraftQualityControl() {
 
   const { data, loading: qualityControlLoading } = useQualityControl(
     id,
-    version
+    version,
   );
   const qualityControl = data?.data;
   const loading = qualityControlLoading || isMutating;

package/src/components/qualityControls/QualityControlActions.js

@@ -38,7 +38,7 @@ const ConfirmToggleActiveModal = ({ onConfirm, qualityControl }) => {
       size="small"
       content={formatMessage(
         { id: `quality_controls.actions.${action}.confirmation.content` },
-        { name: <i>{name}</i> }
+        { name: <i>{name}</i> },
       )}
       onConfirm={() => onConfirm()}
     />
@@ -70,7 +70,7 @@ const ConfirmDeletionModal = ({ qualityControl, onConfirm }) => {
       size="small"
       content={formatMessage(
         { id: `quality_controls.actions.delete.confirmation.content` },
-        { name: <i>{name}</i> }
+        { name: <i>{name}</i> },
       )}
       onConfirm={() => onConfirm()}
     />
@@ -121,7 +121,7 @@ export default function QualityControlActions() {
         "execute",
         "link_to_business_concept",
         "link_to_data_structure",
-      ])
+      ]),
     ),
     _.map((action) => {
       const actionIcon = {
@@ -175,7 +175,7 @@ export default function QualityControlActions() {
             onClick: () => updateStatus(action),
           };
       }
-    })
+    }),
   )(actions);
 
   const onCreateScoreGroup = ({ content, df_type }) => {

package/src/components/qualityControls/QualityControlEditor.js

@@ -4,9 +4,7 @@ import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Button, Divider, Grid, Icon, Form, Step } from "semantic-ui-react";
 import { FormProvider, useForm } from "react-hook-form";
-import {
-  ConfirmModal,
-} from "@truedat/core/components";
+import { ConfirmModal } from "@truedat/core/components";
 import useActionDomains from "@truedat/core/hooks/useActionDomains";
 import QxContext from "@truedat/qx/components/QxContext";
 import { fieldsFromResource } from "@truedat/qx/components/dataViews/queryableFunctions";
@@ -29,10 +27,9 @@ export default function QualityControlEditor({
   const [activeStep, setActiveStep] = useState(0);
   const [stepInformation, setStepInformation] = useState({});
   const [stepState, setStepState] = useState({});
-  const { data: domainsData, loading: loadingDomains } =
-    useActionDomains({
-      action: "publishQualityControls",
-    });
+  const { data: domainsData, loading: loadingDomains } = useActionDomains({
+    action: "publishQualityControls",
+  });
   const domains = _.propOr([], "domains")(domainsData);
   const { data: functionsData } = useFunctions();
   const functions = functionsData?.data;
@@ -50,7 +47,7 @@ export default function QualityControlEditor({
   const { domain_ids: domainIds } = formData;
 
   const allowedToPublish = _.every((domainId) =>
-    _.find({ id: `${domainId}` })(domains)
+    _.find({ id: `${domainId}` })(domains),
   )(domainIds);
 
   const updateStepInformation = (key, data) =>
@@ -62,7 +59,7 @@ export default function QualityControlEditor({
         const ok = await trigger(stepInformation[step]["fieldNames"]);
         const content = ok ? { status: "valid" } : { status: "error" };
         return [step, content];
-      })(steps)
+      })(steps),
     );
 
     setStepState({ ...stepState, ..._.fromPairs(validations) });
@@ -126,12 +123,10 @@ export default function QualityControlEditor({
   };
 
   const controlProperties = watch("control_properties");
-  const resource = controlProperties?.resource || controlProperties?.errors_resource;
+  const resource =
+    controlProperties?.resource || controlProperties?.errors_resource;
 
-  const fields = fieldsFromResource(
-    resource?.embedded?.name,
-    0
-  )({ resource });
+  const fields = fieldsFromResource(resource?.embedded?.name, 0)({ resource });
 
   const currentQualityControl = watch();
 
@@ -188,18 +183,14 @@ export default function QualityControlEditor({
                   />
                 </div>
                 <QxContext value={{ fields, functions }}>
-                  <div
-                    style={{ display: activeStep == 1 ? "block" : "none" }}
-                  >
+                  <div style={{ display: activeStep == 1 ? "block" : "none" }}>
                     <ControlPropertiesForm
                       isModification={isModification}
                       stepInformation={stepInformation[1]}
                       setStepInformation={updateStepInformation}
                     />
                   </div>
-                  <div
-                    style={{ display: activeStep == 2 ? "block" : "none" }}
-                  >
+                  <div style={{ display: activeStep == 2 ? "block" : "none" }}>
                     <SegmentationForm
                       stepInformation={stepInformation[2]}
                       setStepInformation={updateStepInformation}

package/src/components/qualityControls/QualityControlEvents.js

@@ -4,10 +4,10 @@ import { useEvents } from "@truedat/audit/hooks/useEvents";
 import { useTemplate } from "@truedat/core/hooks";
 import PropTypes from "prop-types";
 import { use, useMemo } from "react";
-import QxContext from "../QxContext";
-import { getParsedEvents } from "./events/getParsedEvents";
 import { useIntl } from "react-intl";
 import Moment from "react-moment";
+import QxContext from "../QxContext";
+import { getParsedEvents } from "./events/getParsedEvents";
 
 const MESSAGE_ID = 0;
 const MESSAGE_PARAMS = 1;

package/src/components/qualityControls/QualityControlHeader.js

@@ -55,10 +55,10 @@ export default function QualityControlHeader({ children }) {
         searchRelations(structureLinksPayload),
       ]).then(([conceptResponse, structureResponse]) => {
         const conceptCount = parseInt(
-          conceptResponse?.headers?.["x-total-count"] || "0"
+          conceptResponse?.headers?.["x-total-count"] || "0",
         );
         const structureCount = parseInt(
-          structureResponse?.headers?.["x-total-count"] || "0"
+          structureResponse?.headers?.["x-total-count"] || "0",
         );
         setConceptLinkCount(conceptCount);
         setStructureLinkCount(structureCount);

package/src/components/qualityControls/QualityControlRoutes.js

@@ -16,6 +16,7 @@ import {
   useQualityControlsSearch,
   useQualityControlsFilters,
 } from "../../hooks/useQualityControls";
+import { ScoreContextProvider } from "../scores/ScoreContext";
 import QualityControls from "./QualityControls";
 import QualityControl from "./QualityControl";
 import QualityControlHeader from "./QualityControlHeader";
@@ -28,7 +29,6 @@ import ConceptLinks from "./ConceptLinks";
 import ConceptLinkNew from "./ConceptLinkNew";
 import StructureLinks from "./StructureLinks";
 import StructureLinkNew from "./StructureLinkNew";
-import { ScoreContextProvider } from "../scores/ScoreContext";
 import QualityControlEvents from "./QualityControlEvents";
 
 const LoaderQualityControlScores = () => {

package/src/components/qualityControls/QualityControlScores.js

@@ -71,7 +71,7 @@ export function QualityControlScores({ columns }) {
   const versionsMap = _.flow(
     _.prop("versions"),
     _.map((qcv) => [qcv.version_id, qcv]),
-    _.fromPairs
+    _.fromPairs,
   )(qualityControl);
 
   const scoreRows = _.flow(
@@ -84,9 +84,9 @@ export function QualityControlScores({ columns }) {
         ...score,
         quality_control: qcv,
         firstInVersion: indexWithinVersion == 0,
-      }))
+      })),
     ),
-    _.reduce((acc, versionScores) => [...acc, ...versionScores], [])
+    _.reduce((acc, versionScores) => [...acc, ...versionScores], []),
   )(scores);
 
   return loading ? (

package/src/components/qualityControls/QualityControlSelector.js

@@ -31,7 +31,7 @@ function QualityControlSelectorContent({
   const handleSelect = (qualityControl) => {
     if (disabled) return;
     const selectedQualityControl = _.find(
-      (qc) => qc.quality_control_id === qualityControl.quality_control_id
+      (qc) => qc.quality_control_id === qualityControl.quality_control_id,
     )(qualityControls);
     setSelectedQualityControl(qualityControl);
     onSelect && onSelect(selectedQualityControl || qualityControl);