Removing optionsModal from DOM

LesionTracker/client/components/app/app.html

@@ -28,7 +28,6 @@
         <div class="tab-pane" id="viewerTab">
         </div>
     </div>
-    {{>optionsModal}}
     {{>serverInformationModal}}
     {{>lastLoginModal}}
     {{>progressDialog}}

LesionTracker/client/components/toolbarSection/toolbarSection.html

@@ -5,7 +5,7 @@
                 {{>roundedButtonGroup leftSidebarToggleButtonData}}
             </div>
 
-            {{>toolbarSectionTools toolbarButtons=toolbarButtons extraToolbarButtons=extraToolbarButtons}}
+            {{>toolbarSectionTools toolbarButtons=toolbarButtons}}
 
             {{#if splitView}}
                 {{>studySeriesQuickSwitch (clone this side="right" viewportIndex=1)}}

LesionTracker/client/components/toolbarSection/toolbarSection.js

@@ -1,5 +1,6 @@
 import { Template } from 'meteor/templating';
 import { Session } from 'meteor/session';
+import { OHIF } from 'meteor/ohif:core';
 import { Viewerbase } from 'meteor/ohif:viewerbase';
 
 Template.toolbarSection.helpers({
@@ -233,14 +234,9 @@ Template.toolbarSection.events({
     },
 
     'click #toggleTrial'(event) {
-        const $this = $(event.currentTarget);
+        if (!$(event.currentTarget).hasClass('disabled')) {
-
+            OHIF.ui.showDialog('trialOptionsModal');
-        // Stop here if the tool is disabled
-        if ($this.hasClass('disabled')) {
-            return;
         }
-
-        $('#optionsModal').modal();
     }
 });
 

LesionTracker/client/routes.js

@@ -15,7 +15,6 @@ Router.onBeforeAction('loading');
 
 var data = {
     additionalTemplates: [
-        'optionsModal',
         'serverInformationModal',
         'lastLoginModal',
         'viewSeriesDetailsModal'

OHIFViewer/client/components/toolbarSection/toolbarSection.html

@@ -4,9 +4,7 @@
             <div class="pull-left m-t-1">
                 {{>roundedButtonGroup leftSidebarToggleButtonData}}
             </div>
-            {{>toolbarSectionTools
+            {{>toolbarSectionTools toolbarButtons=toolbarButtons}}
-                toolbarButtons=toolbarButtons
-                extraToolbarButtons=extraToolbarButtons}}
             <div class="pull-right m-t-1 rm-x-1">
                 {{>roundedButtonGroup rightSidebarToggleButtonData}}
             </div>

Packages/ohif-lesiontracker/both/configuration/tools/bidirectional.js

@@ -1,5 +1,6 @@
 import { SimpleSchema } from 'meteor/aldeed:simple-schema';
 import { MeasurementSchemaTypes } from 'meteor/ohif:measurements/both/schema/measurements';
+// import { OHIF } from 'meteor/ohif:core';
 
 const CornerstoneHandleSchema = MeasurementSchemaTypes.CornerstoneHandleSchema;
 
@@ -68,7 +69,7 @@ const displayFunction = data => {
     // const nodalType = data.isNodal ? 'nodal' : 'extraNodal';
 
     // Get criteria types
-    // const criteriaTypes = TrialCriteriaTypes.find({
+    // const criteriaTypes = OHIF.lesiontracker.TrialCriteriaTypes.find({
     //     selected: true
     // }).map(criteria => {
     //     return criteria.id;

Packages/ohif-lesiontracker/client/components/index.js

@@ -1,9 +1,9 @@
 import './dialog/nonTargetMeasurement.html';
 import './dialog/nonTargetMeasurement.js';
 
-import './optionsModal/optionsModal.html';
+import './trialOptionsModal/irRCDescription.html';
-import './optionsModal/optionsModal.styl';
+import './trialOptionsModal/recistDescription.html';
-import './optionsModal/optionsModal.js';
 
-import './optionsModal/recistDescription/recistDescription.html';
+import './trialOptionsModal/trialOptionsModal.html';
-import './optionsModal/irRCDescription/irRCDescription.html';
+import './trialOptionsModal/trialOptionsModal.styl';
+import './trialOptionsModal/trialOptionsModal.js';

Packages/ohif-lesiontracker/client/components/optionsModal/optionsModal.html

@@ -1,39 +0,0 @@
-<template name="optionsModal">
-    <div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="optionsModalLabel">
-        <div class="modal-dialog modal-lg" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                    <h4 class="modal-title" id="optionsModalLabel">Clinical Trial Options</h4>
-                </div>
-                <div class="modal-body">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <h3>Select one or more Trial Criteria types:</h3>
-                                {{ #each trialCriteriaTypes}}
-                                    <label for="{{id}}Criteria" class="trialCriteriaLabel">
-                                        <!-- TODO: Change to checkbox for multiple criteria !-->
-                                        <input type="radio" name="trialCriteria" id="{{id}}Criteria" value='{{id}}' class="trialCriteria" checked={{selected}}>
-                                         {{name}}
-                                    </label>
-                                {{ /each }}
-                            <div>
-                                <h3>Selected Trial Criteria:</h3>
-                                {{ #each trialCriteriaTypes}}
-                                    {{ #if selected }}
-                                        <div class="trialCriteriaPanel panel fade in" id="{{id}}Description">
-                                            {{> Template.dynamic template=descriptionTemplate }}
-                                        </div>
-                                    {{ /if }}
-                                {{ /each }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>

Packages/ohif-lesiontracker/client/components/optionsModal/optionsModal.js

@@ -1,53 +0,0 @@
-import { OHIF } from 'meteor/ohif:core';
-
-TrialCriteriaTypes = new Meteor.Collection(null);
-TrialCriteriaTypes._debugName = 'TrialCriteriaTypes';
-
-TrialCriteriaTypes.insert({
-    id: 'RECIST',
-    name: 'RECIST 1.1',
-    descriptionTemplate: 'recistDescription',
-    selected: true
-});
-
-TrialCriteriaTypes.insert({
-    id: 'irRC',
-    name: 'irRC',
-    descriptionTemplate: 'irRCDescription',
-    selected: false
-});
-
-Template.optionsModal.helpers({
-    trialCriteriaTypes: function() {
-        return TrialCriteriaTypes.find();
-    }
-});
-
-Template.optionsModal.events({
-    /**
-     * When the trial criteria radio buttons are changed, change the
-     * trial assessment criteria for the Lesion Tracker
-     *
-     * @param e The 'change' event on the selected radio button
-     */
-    'change input.trialCriteria': function(e) {
-        var isChecked = e.currentTarget.checked;
-
-        // Set "Selected" to false for the entire collection
-        // TODO: Remove this when we allow multiple criteria
-        TrialCriteriaTypes.update({}, {
-            $set: {
-                selected: false
-            }
-        }, {
-            multi: true
-        });
-
-        // Set the current Criteria in the collection to selected
-        TrialCriteriaTypes.update(this._id, {
-            $set: {
-                selected: isChecked
-            }
-        });
-    }
-});

Packages/ohif-lesiontracker/client/components/optionsModal/optionsModal.styl

@@ -1,7 +0,0 @@
-.trialCriteriaLabel
-  margin: 0 5px
-  
-#optionsModal
-  .panel
-    background-color: transparent
-    

Packages/ohif-lesiontracker/client/components/trialOptionsModal/trialOptionsModal.html

@@ -0,0 +1,17 @@
+<template name="trialOptionsModal">
+    {{#dialogForm (extend this
+        schema=instance.schema id='trialOptionsModal' dialogClass='modal-lg'
+        confirmLabel='Save' title='Clinical Trial Options'
+    )}}
+        <h3 class="m-t-0">Select one or more Trial Criteria types:</h3>
+        {{>groupRadio class='js-trial' labelClass='form-group' key='trialCriteria'}}
+        <div>
+            <h3>Selected Trial Criteria:</h3>
+            <div class="m-t-2">
+                {{#let descriptionTemplate=(getDescriptionTemplate instance.selectedTrial.get)}}
+                    {{>Template.dynamic template=descriptionTemplate}}
+                {{/let}}
+            </div>
+        </div>
+    {{/dialogForm}}
+</template>

Packages/ohif-lesiontracker/client/components/trialOptionsModal/trialOptionsModal.js

@@ -0,0 +1,72 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { _ } from 'meteor/underscore';
+import { OHIF } from 'meteor/ohif:core';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
+
+Meteor.startup(() => {
+    const TrialCriteriaTypes = new Meteor.Collection(null);
+    TrialCriteriaTypes._debugName = 'TrialCriteriaTypes';
+
+    TrialCriteriaTypes.insert({
+        id: 'RECIST',
+        name: 'RECIST 1.1',
+        descriptionTemplate: 'recistDescription',
+        selected: true
+    });
+
+    TrialCriteriaTypes.insert({
+        id: 'irRC',
+        name: 'irRC',
+        descriptionTemplate: 'irRCDescription',
+        selected: false
+    });
+
+    OHIF.lesiontracker.TrialCriteriaTypes = TrialCriteriaTypes;
+});
+
+Template.trialOptionsModal.onCreated(() => {
+    const instance = Template.instance();
+    const { TrialCriteriaTypes } = OHIF.lesiontracker;
+    const types = TrialCriteriaTypes.find().fetch();
+    const defaultValue = _.findWhere(types, { selected: true })._id;
+    instance.selectedTrial = new ReactiveVar(defaultValue);
+
+    instance.schema = new SimpleSchema({
+        trialCriteria: {
+            type: String,
+            allowedValues: _.pluck(types, '_id'),
+            valuesLabels: _.pluck(types, 'name'),
+            defaultValue
+        }
+    });
+
+    instance.data.promise.then(formData => {
+        // Set "selected" to false for the entire collection
+        TrialCriteriaTypes.update({}, {
+            $set: { selected: false }
+        }, {
+            multi: true
+        });
+
+        // TODO: Use filter with "_id: $in" when allowing multiple criteria
+        // Set "selected" to true for the current criteria
+        TrialCriteriaTypes.update(formData.trialCriteria, {
+            $set: { selected: true }
+        });
+    });
+});
+
+Template.trialOptionsModal.helpers({
+    getDescriptionTemplate(_id) {
+        return OHIF.lesiontracker.TrialCriteriaTypes.findOne(_id).descriptionTemplate;
+    }
+});
+
+Template.trialOptionsModal.events({
+    'change .js-trial'(event, instance) {
+        const form = instance.$('form').first().data('component');
+        instance.selectedTrial.set(form.value().trialCriteria);
+    }
+});

Packages/ohif-lesiontracker/client/components/trialOptionsModal/trialOptionsModal.styl

@@ -0,0 +1,3 @@
+#trialOptionsModal
+  .panel
+    background-color: transparent

Packages/ohif-lesiontracker/client/lib/MeasurementValidation.js

@@ -218,7 +218,7 @@ function assessSingleMeasurement(constraints, measurementData) {
 function validateSingleMeasurement(measurementData) {
     // Obtain the name of the current TrialResponseAssessmentCriteria that
     // we are using.
-    var criteriaTypes = TrialCriteriaTypes.find({
+    var criteriaTypes = OHIF.lesiontracker.TrialCriteriaTypes.find({
         selected: true
     }).map(function(criteria) {
         return criteria.id;
@@ -268,7 +268,7 @@ function validateGroups() {
 
     // Obtain the names of the current TrialResponseAssessmentCriteria that
     // we are using.
-    var criteriaTypes = TrialCriteriaTypes.find({
+    var criteriaTypes = OHIF.lesiontracker.TrialCriteriaTypes.find({
         selected: true
     }).map(function(criteria) {
         return criteria.id;
@@ -305,7 +305,7 @@ function validateGroups() {
 function validateAll() {
     // Obtain the names of the current TrialResponseAssessmentCriteria that
     // we are using.
-    var criteriaTypes = TrialCriteriaTypes.find({
+    var criteriaTypes = OHIF.lesiontracker.TrialCriteriaTypes.find({
         selected: true
     }).map(function(criteria) {
         return criteria.id;

Packages/ohif-lesiontracker/package.js

@@ -38,7 +38,6 @@ Package.onUse(function(api) {
     api.export('ValidationErrors', 'client');
     api.export('LesionLocations', 'client');
     api.export('LocationResponses', 'client');
-    api.export('TrialCriteriaTypes', 'client');
 
     // Export collections spanning both client and server
     api.export('Configuration', ['client', 'server']);

Packages/ohif-measurements/client/components/measurementTable/measurementTableView/measurementTableView.js

@@ -39,7 +39,7 @@ Template.measurementTableView.helpers({
 
     getNewToolGroup(tool) {
         const configuration = OHIF.measurements.MeasurementApi.getConfiguration();
-        const trialCriteriaType = TrialCriteriaTypes.findOne({ selected: true });
+        const trialCriteriaType = OHIF.lesiontracker.TrialCriteriaTypes.findOne({ selected: true });
         const trialCriteriaTypeId = trialCriteriaType.id.toLowerCase();
         const trialToolGroupMap = {
             recist: 'nonTargets',

Packages/ohif-measurements/client/conformance/ConformanceCriteria.js

@@ -22,9 +22,9 @@ class ConformanceCriteria {
         }, 300);
 
         Tracker.autorun(() => {
-            const trialCriteriaType = TrialCriteriaTypes.findOne({ selected: true });
+            const selectedType = OHIF.lesiontracker.TrialCriteriaTypes.findOne({ selected: true });
             this.measurementApi.changeObserver.depend();
-            validate(trialCriteriaType);
+            validate(selectedType);
         });
     }