Skip to content

Commit

Permalink
Merge pull request #1486 from AAFC-BICoE/35416-Add-Quality-Contol-tab…
Browse files Browse the repository at this point in the history 
…le-to-MolecularAnalysisRun-view

35416 Add Quality Control table to MolecularAnalysisRun view
  • Loading branch information
@brandonandre
brandonandre authored Dec 18, 2024
2 parents 52968b0 + 7e566a3 commit 4190f63
Show file tree
Hide file tree
Showing 5 changed files with 232 additions and 105 deletions.
18 changes: 16 additions & 2 deletions packages/dina-ui/components/molecular-analysis/MolecularAnalysisRunFormFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
import { DinaMessage, useDinaIntl } from "../../intl/dina-ui-intl";
import { GroupSelectField } from "../group-select/GroupSelectField";
import { AttachmentReadOnlySection } from "../object-store/attachment-list/AttachmentReadOnlySection";
import { QualityControlSection } from "../seqdb/molecular-analysis-workflow/QualityControlSection";
import {
SequencingRunItem,
useMolecularAnalysisRunView
Expand All @@ -16,7 +17,13 @@ import { SeqdbMessage } from "packages/dina-ui/intl/seqdb-intl";
export function MolecularAnalysisRunFormFields() {
const { initialValues } = useDinaFormContext();
const { formatMessage } = useDinaIntl();
const { loading, sequencingRunItems, columns } = useMolecularAnalysisRunView({
const {
loading,
sequencingRunItems,
columns,
qualityControls,
qualityControlTypes
} = useMolecularAnalysisRunView({
molecularAnalysisRunId: initialValues.id
});
return loading ? (
Expand All @@ -35,7 +42,7 @@ export function MolecularAnalysisRunFormFields() {
className="col-md-6"
/>
</div>
<div className="col-12">
<div className="col-12 mb-3">
<strong>
<SeqdbMessage id="molecularAnalysisRunItems" />
</strong>
Expand All @@ -46,6 +53,13 @@ export function MolecularAnalysisRunFormFields() {
sort={[{ id: "wellCoordinates", desc: false }]}
/>
</div>
{/* Sequencing Quality Control */}
<QualityControlSection
qualityControls={qualityControls}
qualityControlTypes={qualityControlTypes}
editMode={false}
loading={loading}
/>
<div className="col-12 mt-3">
<AttachmentReadOnlySection
attachmentPath={`seqdb-api/molecular-analysis-run/${initialValues.id}/attachments`}
Expand Down
73 changes: 68 additions & 5 deletions packages/dina-ui/components/molecular-analysis/useMolecularAnalysisRun.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ import {
attachPcrBatchItemMetagenomics,
attachStorageUnitUsageMetagenomics
} from "./useMetagenomicsWorkflowMolecularAnalysisRun";
import { QualityControl } from "packages/dina-ui/types/seqdb-api/resources/QualityControl";
import useVocabularyOptions from "../collection/useVocabularyOptions";

export interface UseMolecularAnalysisRunProps {
seqBatchId: string;
Expand Down Expand Up @@ -652,9 +654,25 @@ export function useMolecularAnalysisRunView({
useState<SequencingRunItem[]>();
const [loading, setLoading] = useState<boolean>(true);
const { compareByStringAndNumber } = useStringComparator();

// Quality control items
const [qualityControls, setQualityControls] = useState<QualityControl[]>([]);
const { loading: loadingVocabularyItems, vocabOptions: qualityControlTypes } =
useVocabularyOptions({
path: "seqdb-api/vocabulary/qualityControlType"
});
const molecularAnalysisRunItemQuery = useQuery<MolecularAnalysisRunItem[]>(
{
path: `seqdb-api/molecular-analysis-run-item?filter[rsql]=run.uuid==${molecularAnalysisRunId}`
path: `seqdb-api/molecular-analysis-run-item`,
filter: filterBy([], {
extraFilters: [
{
selector: "run.uuid",
comparison: "==",
arguments: molecularAnalysisRunId
}
]
})("")
},
{
onSuccess: async ({ data: molecularAnalysisRunItems }) => {
Expand Down Expand Up @@ -710,7 +728,12 @@ export function useMolecularAnalysisRunView({
(runItem) => runItem.usageType !== "quality-control"
)?.[0].usageType;
setColumns(
getMolecularAnalysisRunColumns(compareByStringAndNumber, usageType)
getMolecularAnalysisRunColumns(
compareByStringAndNumber,
usageType,
undefined,
true
)
);

if (usageType === "seq-reaction") {
Expand Down Expand Up @@ -749,6 +772,42 @@ export function useMolecularAnalysisRunView({
sequencingRunItemsChain,
bulkGet
);
const qualityControlRunItems = molecularAnalysisRunItems.filter(
(runItem) => runItem.usageType === "quality-control"
);
// Get quality controls
if (qualityControlRunItems && qualityControlRunItems?.length > 0) {
const newQualityControls: QualityControl[] = [];

// Go through each quality control run item and then we do a query for each quality control.
for (const item of qualityControlRunItems) {
const qualityControlQuery = await apiClient.get<QualityControl>(
`seqdb-api/quality-control`,
{
filter: filterBy([], {
extraFilters: [
{
selector: "molecularAnalysisRunItem.uuid",
comparison: "==",
arguments: item?.id
}
]
})(""),
include: "molecularAnalysisRunItem"
}
);

const qualityControlFound = qualityControlQuery
?.data?.[0] as QualityControl;
if (qualityControlFound) {
newQualityControls.push({
...qualityControlFound
});
}
}

setQualityControls(newQualityControls);
}
// All finished loading.
setSequencingRunItems(sequencingRunItemsChain);
setLoading(false);
Expand All @@ -772,7 +831,6 @@ export function useMolecularAnalysisRunView({
sequencingRunItemsChain,
bulkGet
);

// All finished loading.
setSequencingRunItems(sequencingRunItemsChain);
setLoading(false);
Expand All @@ -781,9 +839,14 @@ export function useMolecularAnalysisRunView({
}
);
return {
loading: molecularAnalysisRunItemQuery.loading || loading,
loading:
molecularAnalysisRunItemQuery.loading ||
loadingVocabularyItems ||
loading,
sequencingRunItems,
columns
columns,
qualityControls,
qualityControlTypes
};
}

Expand Down
107 changes: 11 additions & 96 deletions packages/dina-ui/components/seqdb/molecular-analysis-workflow/MolecularAnalysisRunStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { FaTrash } from "react-icons/fa";
import { VocabularyOption } from "../../collection/VocabularySelectField";
import Select from "react-select";
import { useIntl } from "react-intl";
import { QualityControlSection } from "./QualityControlSection";

export interface MolecularAnalysisRunStepProps {
molecularAnalysisId: string;
Expand Down Expand Up @@ -138,7 +139,7 @@ export function MolecularAnalysisRunStep({
<div className="col-12 mt-3">
<DinaForm initialValues={{}} readOnly={!editMode}>
{/* Sequencing Run Content */}
<div className="col-12">
<div className="col-12 mb-3">
<strong>
<DinaMessage id="molecularAnalysisRunStep_sequencingRunContent" />
</strong>
Expand All @@ -151,101 +152,15 @@ export function MolecularAnalysisRunStep({
</div>

{/* Sequencing Quality Control */}
{(editMode || qualityControls.length > 0) && (
<div className="col-12 mt-3">
<div className="card p-3">
<div className="d-flex align-items-center justify-content-between mb-3">
<h2 className="fieldset-h2-adjustment">
<DinaMessage id="molecularAnalysisRunStep_sequencingQualityControl" />
</h2>
{editMode && (
<Button
onClick={() => createNewQualityControl()}
className="add-datablock"
>
<DinaMessage id="addCustomPlaceName" />
</Button>
)}
</div>
{qualityControls.map((qualityControl, index) => {
return (
<div className="card p-3 mb-3" key={index}>
<div className="row">
<div className="col-6">
<strong>Name:</strong>
{editMode ? (
<input
className="form-control mt-1"
name={`qualityControl-name-${index}`}
data-testid={`qualityControl-name-${index}`}
value={qualityControl.name}
onChange={(newValue) =>
updateQualityControl(index, {
...qualityControl,
name: newValue?.target?.value ?? ""
})
}
/>
) : (
<p className="mb-0">{qualityControl.name}</p>
)}
</div>
<div className="col-5">
<strong>Type:</strong>
{editMode ? (
<Select<VocabularyOption>
options={qualityControlTypes}
value={qualityControlTypes.find(
(option) =>
option.value === qualityControl?.qcType
)}
isLoading={loading}
placeholder={formatMessage({
id: "queryBuilder_identifier_placeholder"
})}
onChange={(newValue) => {
updateQualityControl(index, {
...qualityControl,
qcType: newValue?.value ?? ""
});
}}
controlShouldRenderValue={true}
isClearable={false}
className={"col ps-0 mt-1"}
captureMenuScroll={true}
menuShouldScrollIntoView={false}
minMenuHeight={600}
/>
) : (
<p className="mb-0">
{
qualityControlTypes.find(
(type) =>
type.value === qualityControl.qcType
)?.label
}
</p>
)}
</div>
<div className="col-1">
{editMode && (
<Button
onClick={() => deleteQualityControl(index)}
variant="danger"
className="delete-datablock w-100 mt-4"
data-testid={`delete-quality-control-${index}`}
>
<FaTrash />
</Button>
)}
</div>
</div>
</div>
);
})}
</div>
</div>
)}
<QualityControlSection
qualityControls={qualityControls}
qualityControlTypes={qualityControlTypes}
editMode={editMode}
loading={loading}
updateQualityControl={updateQualityControl}
createNewQualityControl={createNewQualityControl}
deleteQualityControl={deleteQualityControl}
/>

{/* Attachments */}
{editMode ? (
Expand Down
Loading

0 comments on commit 4190f63

Please sign in to comment.