Enhanced Cohort Sampling and Patient Profiles

.gitignore

@@ -7,3 +7,5 @@
 js/config-local.js
 js/version.js
 package-lock.json
+.vscode
+.env

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "eslint.alwaysShowStatus": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.quiet": true,
+  "prettier.singleQuote": true,
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true
+}

js/pages/cohort-definitions/cohort-definition-manager.css

@@ -56,4 +56,30 @@
 
 .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;
+}
+

js/pages/cohort-definitions/cohort-definition-manager.html

@@ -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>
@@ -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>
@@ -354,8 +358,209 @@ <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
+						class="row"
+						style="margin-top: 40px;"
+						data-bind="visible: $component.sampleSourceKey()&&$component.selectedSampleId&&!$component.sampleDataLoading()">
+							<div class="col-sm-3">
+								<h4 data-bind="text: selectedSampleName"></h4>
+							</div>
+							<div  class="col-sm-9 text-right">
+								<button
+								type="button"
+								class="btn btn-sm btn-primary"
+								data-bind="click:viewSamplePatient,
+								enable: $component.enableViewPatients(),
+								visible: $component.sampleSourceKey()&&$component.selectedSampleId()&&!$component.sampleDataLoading()">
+								View patient(s)
+								</button >
+							</div>
+						</div>
+
+						<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().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
+			}
+			id='sampleCreatingModal'
+			}"
+		>
+			<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()==true">Sample name cannot be empty</span>
+				</div>
+				<div class="form-group" data-bind="css: {'has-error': patientCountError()==true, 'has-success': patientCountError()==false}">
+					<label for="sampleCreatingPatientCount" class="control-label">*Number of patients</label>
+					<input step="1" data-bind="textInput: patientCount" type="number" class="form-control" id="sampleCreatingPatientCount" placeholder="Enter a number">
+					<span class="help-block" data-bind="visible: patientCountError()==true">Number of patients must be a positive integer</span>
+				</div>
+
+				<div class="form-group ageRange">
+					<label
+						data-bind="value: sampleAgeType, css: {myCustomTextError: isAgeRangeError()==true||firstAgeError()==true, myCustomTextSuccess: isAgeRangeError()==false}"
+						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()==true||firstAgeError()==true, myCustomInputSuccess: isAgeRangeError()==false}"
+								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, css: {myCustomInputError: isAgeRangeError()==true||firstAgeError()==true, myCustomInputSuccess: isAgeRangeError()==false}"
+								type="text"
+								class="form-control"
+								placeholder="Enter a number">
+								<span data-bind="visible: firstAgeError()==true, css: {myCustomTextError: firstAgeError()==true, myCustomTextSuccess: firstAgeError()==false}">Age must be a non-negative integer</span>
+						</div>
+						<div class="col-md-1" data-bind="visible: isAgeRange">
+							<button class="btn btn-link  disabled" style="color: black" >and</button>
+						</div>
+						<div class="col-md-2" data-bind="visible: isAgeRange">
+							<input
+							data-bind="textInput: secondAge, css: {myCustomInputError: isAgeRangeError()==true, myCustomInputSuccess: isAgeRangeError()==false}"
+							type="text"
+							class="form-control"
+							placeholder="Enter a number">
+						</div>
+						<span data-bind="visible: isAgeRangeError(), css: {myCustomTextError: isAgeRangeError()==true, myCustomTextSuccess: isAgeRangeError()==false}">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">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',
@@ -428,4 +633,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>