Skip to content

Added simplified cohort sample UI. #2373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrisknoll merged 6 commits into from
Nov 19, 2020
Merged

Added simplified cohort sample UI. #2373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
81ad1f0
Added simplified cohort sample UI.
chrisknoll Nov 9, 2020
326577c
Fix refresh UI redraw.
chrisknoll Nov 9, 2020
5b53f91
Merge remote-tracking branch 'remotes/origin/master' into cohort-samp…
chrisknoll Nov 11, 2020
b615abc
Simplified sample form validation.
chrisknoll Nov 11, 2020
7d8a880
Fixed validation rules.
chrisknoll Nov 13, 2020
4ed75da
Adjusted selection criteria label.
chrisknoll Nov 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion js/pages/cohort-definitions/cohort-definition-manager.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,35 @@

.cohort-conceptset-button-pane .btn-success.disabled {
color: #f3f3f3;
}
}

.sampleCreatingForm label {
font-weight: bold !important;
}

.myCustomInputError {
border-color: #a94442
}

.myCustomInputSuccess {
border-color: #3c763d
}

.myCustomTextError {
color: #a94442 !important
}

.myCustomTextSuccess {
color: #3c763d !important
}

.sample-list.fa-trash {
color: red;
cursor: pointer;
}

.sample-list.fa-refresh {
color: #265a88;
cursor: pointer;
}

186 changes: 184 additions & 2 deletions js/pages/cohort-definitions/cohort-definition-manager.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<!-- /ko -->
</div>
</div>
<name-validation params="hasEmptyName: !isNameFilled(), hasInvalidCharacters: isNameFilled() && !isNameCharactersValid(),
<name-validation params="hasEmptyName: !isNameFilled(), hasInvalidCharacters: isNameFilled() && !isNameCharactersValid(),
hasInvalidLength: isNameFilled() && !isNameLengthValid(), hasDefaultName: isDefaultName()"></name-validation>

</div>
Expand All @@ -44,6 +44,10 @@
<a>Generation</a>
</li>

<li role="presentation" data-bind="css: { active: $component.tabMode() == 'samples' }, click: clickSampleTab">
<a>Samples</a>
</li>

<li role="presentation" data-bind="css: { active: $component.tabMode() == 'reporting' }, click: function() { $component.selectTab('reporting'); }">
<a>Reporting</a>
</li>
Expand Down Expand Up @@ -354,8 +358,186 @@ <h3>Appendix 1: Concept Set Definitions</h3>
<div data-bind="component: { name: 'warnings', params: $component.warningParams }"></div>
</div>
</div>
<!-- samples content -->
<div role="tabpanel" data-bind="css: { active: $component.tabMode() == 'samples' }" class="tab-pane">
<div class="pad-5">
<div class="panel panel-primary">
<div class="panel-heading">
Sample Selections
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<select class="form-control"
data-bind="css :{ invalid: $component.sampleSourceKey()==undefined },
options: $component.cdmSources(),
optionsValue:'sourceKey', optionsText:'sourceName',
value:$component.sampleSourceKey,
optionsCaption:'Select a Source'">
</select>
</div>
</div>
</div>
</div>
<div class="pull-right"
data-bind="visible: !$component.isLoadingSampleData() && $component.sampleSourceKey()"
>
<button
type="button"
class="btn btn-sm btn-primary"
data-bind="click:addNewSample"
>
Add new sample
</button>
</div>
<!-- samples list table -->
<div data-bind="visible: !$component.isLoadingSampleData() && $component.sampleSourceKey()">
<faceted-datatable
params="{
reference: sampleList,
columns: sampleListCols,
order: [[0,'asc']],
pageLength: 5,
rowClick: onSampleListRowClick,
}"
/>
</div>
<!-- A sample data table -->
<div data-bind="visible: $component.sampleSourceKey() && $component.selectedSampleId() && !$component.sampleDataLoading()">
<faceted-datatable
params="{
reference: sampleData,
columns: sampleCols,
order: [[0,'asc']],
pageLength: 15,
rowClick: onSampleDataClick,
}"
/>
</div>

<loading data-bind="visible: $component.sampleDataLoading()"></loading>
<!-- notifications -->
<div data-bind="visible: sampleData() && sampleData().length == 0">
<div class="panel panel-danger" data-bind="visible: !$component.isCohortGenerated">
<div class="panel-heading">
Cohort Not Generated
</div>
<div class="panel-body">
This cohort has not been generated in the data source you selected. Please return to the generation tab to generate the cohort before accessing samples.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<atlas-modal params="{
showModal: showSampleCreatingModal,
title: 'Create new sample',
data: {
sampleName: sampleName,
sampleNameError: sampleNameError,
patientCount: patientCount,
patientCountError: patientCountError,
sampleAgeType: sampleAgeType,
isAgeRange: isAgeRange,
isAgeRangeError: isAgeRangeError,
firstAge: firstAge,
firstAgeError: firstAgeError,
secondAge: secondAge,
isMaleSample: isMaleSample,
isFeMaleSample: isFeMaleSample,
isOtherGenderSample: isOtherGenderSample,
createNewSample: createNewSample,
newSampleCreatingLoader: newSampleCreatingLoader,
isSampleFormValid: isSampleFormValid
}
}">
<form data-bind="submit: createNewSample" class="sampleCreatingForm" novalidate>
<div class="form-group" data-bind="css: {'has-error': sampleNameError()==true, 'has-success': sampleNameError()==false}">
<span class="help-block">*Mandatory fields</span>
<label for="sampleCreatingName" class="control-label">*Sample name</label>
<input required data-bind="textInput: sampleName" type="text" id="sampleCreatingName" class="form-control" placeholder="Enter sample name">
<span class="help-block" data-bind="visible: sampleNameError()">Sample name cannot be empty</span>
</div>
<div class="form-group" data-bind="css: {'has-error': patientCountError(), 'has-success': !patientCountError()}">
<label class="control-label">*Number of patients</label>
<input step="1" data-bind="textInput: patientCount.numeric()" type="number" class="form-control" placeholder="Enter a number">
<span class="help-block" data-bind="visible: patientCountError()">Number of patients must be a positive integer</span>
</div>

<div class="form-group ageRange">
<label
data-bind="value: sampleAgeType, css: {myCustomTextError: isAgeRangeError() || firstAgeError(), myCustomTextSuccess: !isAgeRangeError()}"
for="sampleCreatingAge"
class="control-label">
Select age criteria
</label>
<div class="row">
<div class="col-md-7" style="padding-left: 0">
<select
data-bind="value: sampleAgeType, css: {myCustomInputError: isAgeRangeError() || firstAgeError(), myCustomInputSuccess: !isAgeRangeError()}"
id="sampleCreatingAge"
class="form-control">
<option value="lessThan">Less than</option>
<option value="lessThanOrEqual">Less or equal to</option>
<option value="equalTo">Equal to</option>
<option value="greaterThan">Greater than</option>
<option value="greaterThanOrEqual">Greater or equal to</option>
<option value="between">Between</option>
<option value="notBetween">Not between</option>
</select>
</div>
<div data-bind="css: {'col-md-2':isAgeRange(), 'col-md-5':!isAgeRange()}">
<input
data-bind="textInput: firstAge.numeric(), css: {myCustomInputError: isAgeRangeError() || firstAgeError(), myCustomInputSuccess: !(isAgeRangeError() || firstAgeError())}"
type="text"
class="form-control"
placeholder="Enter a number">
<span data-bind="visible: !isAgeRange() && firstAgeError(), css: {myCustomTextError: firstAgeError(), myCustomTextSuccess: !firstAgeError()}">Age must be a non-negative integer</span>
</div>
<div class="col-md-1" data-bind="visible: isAgeRange"><div style="margin-top: .5em; text-align: center">and</div></div>
<div class="col-md-2" data-bind="visible: isAgeRange">
<input
data-bind="textInput: secondAge.numeric(), css: {myCustomInputError: isAgeRangeError, myCustomInputSuccess: !isAgeRangeError()}"
type="text"
class="form-control"
placeholder="Enter a number">
</div>
<span data-bind="visible: isAgeRangeError(), css: {myCustomTextError: isAgeRangeError(), myCustomTextSuccess: !isAgeRangeError()}">First and second age must be non-negative integers and not equal</span>
</div>
</div>

<div class="form-group">
<label class="control-label">Indicate gender (leave empty to select all gender)</label>
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checked: isMaleSample"> Male
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checked: isFeMaleSample"> Female
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" data-bind="checked: isOtherGenderSample"> Other
</label>
</div>
</div>
<!-- ko if: !newSampleCreatingLoader() -->
<button type="submit" class="btn btn-primary" data-bind="enable: isSampleFormValid()">Submit</button>
<!-- /ko -->
<!-- ko if: newSampleCreatingLoader() -->
<button class="btn btn-primary" type="button" disabled>
<i class="fa fa-spinner fa-spin"></i>
Creating sample...
</button>
<!-- /ko -->
</form>
</atlas-modal>

<atlas-modal params="{
showModal: analysisTypesOpened,
iconClass: 'fa fa-group',
Expand Down Expand Up @@ -428,4 +610,4 @@ <h3>Appendix 1: Concept Set Definitions</h3>

<script type="text/html" id="failed-status-tmpl">
<a href='#' data-bind="css: $component.classes('status-link'), click: () => $component.showExitMessage($data.item.sourceKey), text: $data.status"></a>
</script>
</script>
Loading