Skip to content

Commit

Permalink
feat: ✨ impvoed subject structure import flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@JacobiClark
JacobiClark committed Dec 1, 2023
1 parent 90c6461 commit 1cb31ae
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 115 deletions.
6 changes: 6 additions & 0 deletions assets/css/guided.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -771,6 +771,12 @@
padding: 0px 3px;
}

.flex-center {
display: flex;
justify-content: center;
align-items: center;
}

.guided--container-footer-buttons.flex-start {
justify-content: flex-start;
}
Expand Down
48 changes: 14 additions & 34 deletions scripts/guided-mode/guided-curate-dataset.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1361,7 +1361,7 @@ const savePageChanges = async (pageBeingLeftID) => {
You indicated that you would like to import your subject structure from a spreadsheet, however,
you have not added any subjects.
<br/><br/>
Please fill out and import the spreadsheet or select the option to add your subject structure manually.
Please fill out and import the spreadsheet or select that you would not like to add your subject structure via a spreadsheet.
`,
});
throw errorArray;
Expand Down Expand Up @@ -7821,6 +7821,11 @@ const patchPreviousGuidedModeVersions = async () => {
sodaJSONObj["cuartion-mode"] = "guided";
}

// Skip the subject spreadsheet importatin page if subjects have already been imported
if (getExistingSubjectNames().length > 0) {
guidedSkipPage("guided-subject-structure-spreadsheet-importation-tab");
}

// If no other conditions are met, return the page the user was last on
return sodaJSONObj["page-before-exit"];
};
Expand Down Expand Up @@ -11387,7 +11392,7 @@ const validateDatasetStructureSpreadsheet = async (sheetData) => {

if (sheetData.length === 0) {
await swalShowError(
"Empty dataset structure",
"Empty subject spreadsheet structure",
"Please add data to the spreadsheet and try again"
);
return false;
Expand Down Expand Up @@ -11540,18 +11545,10 @@ document
return;
}

// Get the count of existing subjects, pools, and samples to compare after the import is done
const preImportSubjectCount = getExistingSubjectNames().length;
const preImportPoolCount = getExistingPoolNames().length;
const preImportSampleCount = getExistingSampleNames().length;

for (const row of sheetData) {
const subjectName = lowercaseFirstLetter(row["Subject ID"]);
const subjectsPool = lowercaseFirstLetter(row["Pool ID"]);
const sampleName = lowercaseFirstLetter(row["Sample ID"]);
console.log("SUBJECT NAME", subjectName);
console.log("SUBJECTS POOL", subjectsPool);
console.log("SAMPLE NAME", sampleName);

// Check to see if the subject already exists
const subjectAlreadyExists = getExistingSubjectNames().includes(subjectName);
Expand All @@ -11574,31 +11571,14 @@ document
}
}

// Get the count of existing subjects, pools, and samples to compare after the import is done
const postImportSubjectCount = getExistingSubjectNames().length;
const postImportPoolCount = getExistingPoolNames().length;
const postImportSampleCount = getExistingSampleNames().length;

const subjectsAdded = postImportSubjectCount - preImportSubjectCount;
const poolsAdded = postImportPoolCount - preImportPoolCount;
const samplesAdded = postImportSampleCount - preImportSampleCount;

let successfulImportString = "";
if (subjectsAdded > 0) {
successfulImportString += `<p><strong>${subjectsAdded}</strong> subjects added</p>`;
}
if (poolsAdded > 0) {
successfulImportString += `<p><strong>${poolsAdded}</strong> pools added</p>`;
}
if (samplesAdded > 0) {
successfulImportString += `<p><strong>${samplesAdded}</strong> samples added</p>`;
}

await swalShowInfo(
"Dataset structure successfully imported",
`${successfulImportString}
<br />
You will now be taken to the next step where you can review/edit the imported data.`
"Subject structure successfully imported",
`
You will now be taken to the next step where you can review/edit the imported data.
<br />
<br />
<b>Note:</b> You will not be able to return to this step once you proceed.
`
);
$("#guided-next-button").click();
});
Expand Down
215 changes: 134 additions & 81 deletions sections/guided_mode/guided_curate_dataset.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1203,10 +1203,16 @@ <h2 class="guided--text-user-directions">
<h1 class="text-sub-step-title">Subject spreadsheet importation</h1>
<p class="help-text">
The SDS requires a unique ID for each subject in your dataset. SODA provides a feature
that allows you to create a list of your subjects in an external spreadsheet, and then
import the list into SODA, saving you from manually typing out each subject in the
SODA UI.
that allows you to create a list of your subjects in an external spreadsheet and then
import the list into SODA, saving you from having to type out each subject in the SODA
UI.
</p>
<div class="alert alert-primary" role="alert">
<p class="help-text">
<strong>Tip:</strong> Importing subjects from a spreadsheet is recommended if you
have a large amount of subjects and/or samples.
</p>
</div>
</div>
<div class="guided--section">
<label class="guided--form-label centered">
Expand Down Expand Up @@ -1329,81 +1335,6 @@ <h2 class="guided--text-user-directions">
</div>
</div>
<div class="guided--section" id="guided-section-spreadsheet-import">
<div class="sub-section mb-3" id="import-instructions-subjects">
<div class="info-dropdown" style="align-self: center">
<p class="info-dropdown-text" data-dropdown-type="info">How do I</p>
<i class="fas fa-chevron-right"></i>
</div>
<div class="info-container">
<img
class="mb-3"
style="width: 90%"
src="assets/img/subjects-spreadseet-example.png"
/>
<p class="help-text text-left w-100">
<b>Subject ID column: </b> Type each subject's name here, starting with 'sub-'.
Avoid using special characters or spaces.
</p>
</div>
</div>
<div class="sub-section mb-3" id="import-instructions-subjects-pools">
<img
class="mb-3"
style="width: 90%"
src="assets/img/subjects-pools-spreadseet-example.png"
/>
<p class="help-text text-left w-100">
<b>Subject ID column: </b> Type each subject's name here, starting with 'sub-'.
Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Pool ID column: </b> Type the name of the pool that subject belongs to here,
starting with 'pool-'. Avoid using special characters or spaces.
</p>
</div>
<div class="sub-section mb-3" id="import-instructions-subjects-samples">
<img
class="mb-3"
style="width: 90%"
src="assets/img/subjects-samples-spreadseet-example.png"
/>
<p class="help-text text-left w-100">
<b>Subject ID column: </b> Type each subject's name here, starting with 'sub-'.
Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Sample ID column: </b> Type each sample's name here, starting with 'sam-'. All
sample names must be unique. Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Note: </b> If a subject has more than one sample, repeat the subject's name in
the 'Subject ID' column for each sample.
</p>
</div>
<div class="sub-section mb-3" id="import-instructions-subjects-pools-samples">
<img
class="mb-3"
style="width: 90%"
src="assets/img/subjects-pools-samples-spreadseet-example.png"
/>
<p class="help-text text-left w-100">
<b>Subject ID column: </b> Type each subject's name here, starting with 'sub-'.
Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Pool ID column: </b> Type the name of the pool that subject belongs to here,
starting with 'pool-'. Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Sample ID column: </b> Type each sample's name here, starting with 'sam-'. All
sample names must be unique. Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Note: </b> If a pooled subject has more than one sample, repeat the subject's
name in the 'Subject ID' column, the subject's pool's name in the 'Pool ID'
column, and the sample's name in the 'Sample ID' column for each sample.
</p>
</div>
<h2 class="text-sub-step-title">
<span class="sub-pool-sample-structure-description-text"></span> spreadsheet
creation
Expand Down Expand Up @@ -1433,9 +1364,131 @@ <h2 class="text-sub-step-title">
Open the
<span class="sub-pool-sample-structure-description-text"></span> spreadsheet
</button>
<p class="help-text step-after-spreadsheet-path-declared mt-5 mb-2">
<b>Step 2. </b>Once you have filled out the spreadsheet, click the button below to
import it into SODA.
<p class="help-text text-left step-after-spreadsheet-path-declared mt-5 mb-2 w-100">
<b>Step 2. </b>Add your
<span class="sub-pool-sample-structure-description-text"></span> IDS to the
spreadsheet and save it.
</p>
<div class="guided--section step-after-spreadsheet-path-declared">
<div class="sub-section mb-3" id="import-instructions-subjects">
<div class="info-dropdown" style="align-self: center">
<p class="info-dropdown-text" data-dropdown-type="info">
How do I fill out the
<span class="sub-pool-sample-structure-description-text"></span> spreadsheet?
</p>
<i class="fas fa-chevron-right"></i>
</div>
<div class="info-container">
<div class="flex-center">
<img
class="mb-3"
style="width: 90%"
src="assets/img/subjects-spreadseet-example.png"
/>
</div>
<p class="help-text text-left w-100">
<b>Subject ID column: </b> Type each subject's name here, starting with
'sub-'. Avoid using special characters or spaces.
</p>
</div>
</div>
<div class="sub-section mb-3" id="import-instructions-subjects-pools">
<div class="info-dropdown" style="align-self: center">
<p class="info-dropdown-text" data-dropdown-type="info">
How do I fill out the
<span class="sub-pool-sample-structure-description-text"></span> spreadsheet?
</p>
<i class="fas fa-chevron-right"></i>
</div>
<div class="info-container">
<div class="flex-center">
<img
class="mb-3"
style="width: 90%"
src="assets/img/subjects-pools-spreadseet-example.png"
/>
</div>
<p class="help-text text-left w-100">
<b>Subject ID column: </b> Type each subject's name here, starting with
'sub-'. Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Pool ID column: </b> Type the name of the pool that subject belongs to
here, starting with 'pool-'. Avoid using special characters or spaces.
</p>
</div>
</div>
<div class="sub-section mb-3" id="import-instructions-subjects-samples">
<div class="info-dropdown" style="align-self: center">
<p class="info-dropdown-text" data-dropdown-type="info">
How do I fill out the
<span class="sub-pool-sample-structure-description-text"></span> spreadsheet?
</p>
<i class="fas fa-chevron-right"></i>
</div>
<div class="info-container">
<div class="flex-center">
<img
class="mb-3"
style="width: 90%"
src="assets/img/subjects-samples-spreadseet-example.png"
/>
</div>
<p class="help-text text-left w-100">
<b>Subject ID column: </b> Type each subject's name here, starting with
'sub-'. Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Sample ID column: </b> Type each sample's name here, starting with 'sam-'.
All sample names must be unique. Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Note: </b> If a subject has more than one sample, repeat the subject's name
in the 'Subject ID' column for each sample.
</p>
</div>
</div>
<div class="sub-section mb-3" id="import-instructions-subjects-pools-samples">
<div class="info-dropdown" style="align-self: center">
<p class="info-dropdown-text" data-dropdown-type="info">
How do I fill out the
<span class="sub-pool-sample-structure-description-text"></span> spreadsheet?
</p>
<i class="fas fa-chevron-right"></i>
</div>
<div class="info-container">
<div class="flex-center">
<img
class="mb-3"
style="width: 90%"
src="assets/img/subjects-pools-samples-spreadseet-example.png"
/>
</div>
<p class="help-text text-left w-100">
<b>Subject ID column: </b> Type each subject's name here, starting with
'sub-'. Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Pool ID column: </b> Type the name of the pool that subject belongs to
here, starting with 'pool-'. Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Sample ID column: </b> Type each sample's name here, starting with 'sam-'.
All sample names must be unique. Avoid using special characters or spaces.
</p>
<p class="help-text text-left">
<b>Note: </b> If a pooled subject has more than one sample, repeat the
subject's name in the 'Subject ID' column, the subject's pool's name in the
'Pool ID' column, and the sample's name in the 'Sample ID' column for each
sample.
</p>
</div>
</div>
</div>
<p class="help-text text-left step-after-spreadsheet-path-declared mt-2 mb-2">
<b>Step 3. </b>Once you have filled out the
<span class="sub-pool-sample-structure-description-text"></span> spreadsheet, click
the button below to import it into SODA.
</p>
<button
class="ui positive button soda-green-background step-after-spreadsheet-path-declared"
Expand Down

0 comments on commit 1cb31ae

Please sign in to comment.