From 394678c04e5df34119db8bb69740f7d5a1957c8d Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 17 Aug 2016 19:48:06 -0300
Subject: [PATCH 01/41] LT-275: Creating 3 columns layout for open source
 version

---
 .../design/styles/components/selectTree.styl  |  1 -
 .../components/measureFlow/measureFlow.html   |  2 +-
 .../components/measureFlow/measureFlow.js     |  7 +--
 .../components/measureFlow/measureFlow.styl   | 49 +++++++++++++++++--
 .../bootstrap/input/selectTree.html           |  2 +-
 .../components/bootstrap/input/selectTree.js  |  5 +-
 .../components/playground/playground.html     |  2 +-
 7 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/Packages/design/styles/components/selectTree.styl b/Packages/design/styles/components/selectTree.styl
index 0dfe25a85..543f5ed92 100644
--- a/Packages/design/styles/components/selectTree.styl
+++ b/Packages/design/styles/components/selectTree.styl
@@ -146,7 +146,6 @@ $gray6 = #303030
 
       &.active
         box-shadow: 0 0 0 200px white, inset 0 0 0 200px white
-        position: fixed
         transition(box-shadow 0.3s ease)
         z-index: 0
 
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.html b/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
index 964454710..ec6d6cfa0 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
@@ -1,5 +1,5 @@
 <template name="measureFlow">
-    <div class="measure-flow {{instance.state.get}}" style="position:fixed; top:200px; left:400px">
+    <div class="measure-flow {{#if this.treeColumns}}tree-columns{{/if}} {{instance.state.get}}" style="position:fixed; top:200px; left:400px">
         <button class="btn-add">Add label</button>
         {{#if eq instance.state.get 'selected'}}
             <div class="tree-leaf">
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
index d52219261..be7157d4d 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
@@ -119,6 +119,7 @@ Template.measureFlow.events({
                 label: 'Assign label',
                 searchPlaceholder: 'Search labels',
                 storageKey: 'measureLabelCommon',
+                treeColumns: instance.data.treeColumns,
                 position
             };
 
@@ -206,14 +207,14 @@ Template.measureFlow.events({
         // Change the measure flow state to selected
         instance.state.set('selected');
 
+        // Get the clicked label window offset
+        const labelOffset = $label.offset();
+
         // Wait for the DOM re-rendering
         Tracker.afterFlush(() => {
             // Get the measure flow div
             const $measureFlow = instance.$('.measure-flow');
 
-            // Get the clicked label window offset
-            const labelOffset = $label.offset();
-
             // Subtract the label box shadow height from the label's position
             labelOffset.top -= 10;
 
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
index 5fbe75f6b..4cd2c0556 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
@@ -30,10 +30,6 @@
     width: 213px
 
     &>.tree-options
-      margin-right: -17px
-      max-height: 250px
-      overflow-x: hidden
-      overflow-y: scroll
       position: relative
       z-index: 2
 
@@ -120,3 +116,48 @@
 
     span
       display: block
+
+  &.tree-columns
+
+    .select-tree-root
+
+      .select-tree-common
+        padding-left: 0
+        padding-right: 6px
+        right: auto
+        left: 0
+        width: 33.333333333333%
+
+      &>.tree-content
+        transform-origin(0% 50%)
+        width: 426px
+
+      .select-tree-common .content
+        right: -100%
+
+      &.started .select-tree-common .content
+        right: 6px
+
+      &.interacted .select-tree-common .content
+        animation-name: selectTreeCommonCloseRight
+
+      .tree-inputs>label
+        float: left
+        width: 50%
+
+@keyframes selectTreeCommonCloseRight {
+  from {
+    height: 37px
+    display: table
+    right: 6px
+    opacity: 1
+    visibility: visible
+  }
+  to {
+    height: 100%
+    right: -100%
+    opacity: 0
+    visibility: hidden
+    width: calc(100% - 6px)
+  }
+}
diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.html b/Packages/ohif-core/client/components/bootstrap/input/selectTree.html
index fe1f10849..633547864 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.html
+++ b/Packages/ohif-core/client/components/bootstrap/input/selectTree.html
@@ -21,7 +21,7 @@
                     {{#if this.root}}
                         {{>selectTreeBreadcrumb component=this.component}}
                     {{/if}}
-                    <div class="tree-inputs">
+                    <div class="tree-inputs clearfix">
                         {{#each item in treeItems}}
                             {{>inputRadio
                                 id=(concat this.storageKey '_' (encodeId item.value))
diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
index 9fa7a776c..7871eacbf 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
+++ b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
@@ -25,7 +25,10 @@ Template.selectTree.onRendered(() => {
     instance.component = component;
 
     // Set the margin to display the common section
-    $treeRoot.children('.tree-content').css('margin-right', $treeRoot.width());
+    const isTreeColumns = instance.data.treeColumns;
+    const marginProperty = isTreeColumns ? 'margin-left' : 'margin-right';
+    const marginWidth = isTreeColumns ? $treeRoot.width() / 2 : $treeRoot.width();
+    $treeRoot.children('.tree-content').css(marginProperty, marginWidth);
 
     // Make the component respect the window boundaries
     $treeRoot.bounded();
diff --git a/Packages/ohif-core/client/components/playground/playground.html b/Packages/ohif-core/client/components/playground/playground.html
index 07b5941a6..8dcd60861 100644
--- a/Packages/ohif-core/client/components/playground/playground.html
+++ b/Packages/ohif-core/client/components/playground/playground.html
@@ -1,6 +1,6 @@
 <template name="componentPlayground">
     <div class="component-playground">
-        {{>measureFlow}}
+        {{>measureFlow treeColumns=true}}
         <!--
             <div class="p-a-3">
                 {{>selectTree

From 82b23f43687f5a0faff53aacaff50e5eae84b9be Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Thu, 18 Aug 2016 08:02:46 -0300
Subject: [PATCH 02/41] LT-275: Implementing label selection by search

---
 .../client/components/bootstrap/input/selectTree.js  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
index 7871eacbf..ee2db68cf 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
+++ b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
@@ -147,6 +147,18 @@ Template.selectTree.events({
         $treeRoot.addClass('interacted');
     },
 
+    'keydown .tree-search input'(event, instance) {
+        // Get the search term
+        const searchTerm = $(event.currentTarget).val().trim();
+
+        const $labels = instance.$('.tree-inputs:first>label');
+
+        // Select the label if ENTER was pressed and there is only one result
+        if (searchTerm.length && $labels.length === 1 && event.which === 13) {
+            $labels.find('input').click();
+        }
+    },
+
     'change .select-tree:first>.tree-content>.tree-options>.tree-inputs>label>input'(event, instance) {
         const component = instance.component;
         const $target = $(event.currentTarget);

From d5ecfbdd394ce427b766b18fd09cc1fccbd4779b Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Thu, 18 Aug 2016 08:49:00 -0300
Subject: [PATCH 03/41] LT-275: Adding fixed common labels to open source
 version

---
 .../components/measureFlow/measureFlow.js     | 46 ++++++++++++-------
 .../bootstrap/input/selectTree.html           |  4 +-
 .../components/bootstrap/input/selectTree.js  | 21 ---------
 .../bootstrap/input/selectTreeCommon.js       | 32 +++++++++++++
 4 files changed, 64 insertions(+), 39 deletions(-)

diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
index be7157d4d..4e92b488e 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
@@ -56,30 +56,24 @@ Template.measureFlow.onCreated(() => {
 
     const items = [
         'Adrenal',
-        'Bladder',
-        'Bone',
-        'Brain',
-        'Breast',
-        'Colon',
-        'Esophagus',
-        'Extremities',
-        'Gallbladder',
-        'Kidney',
-        'Liver',
-        'Lung',
-        'Lymph Node',
         'Muscle',
+        'Bladder',
         'Neck',
-        'Other: Soft Tissue',
+        'Bone',
+        'Other Soft Tissue',
+        'Brain',
         'Ovary',
+        'Breast',
         'Pancreas',
-        'Pelvis',
-        'Peritoneum/Omentum',
+        'Colon',
         'Prostate',
-        'Retroperitoneum',
+        'Esophagus',
         'Small Bowel',
+        'Extremities',
         'Spleen',
+        'Gallbladder',
         'Stomach',
+        'Kidney',
         'Subcutaneous'
     ];
 
@@ -90,6 +84,25 @@ Template.measureFlow.onCreated(() => {
             value: item
         });
     });
+
+    const commonItems = [
+        'Abdomen/Chest Wall',
+        'Lung',
+        'Lymph Node',
+        'Liver',
+        'Mediastinum/Hilum',
+        'Pelvis',
+        'Peritoneum/Omentum',
+        'Retroperitoneum'
+    ];
+
+    instance.commonItems = [];
+    _.each(commonItems, item => {
+        instance.commonItems.push({
+            label: item,
+            value: item
+        });
+    });
 });
 
 Template.measureFlow.onRendered(() => {
@@ -116,6 +129,7 @@ Template.measureFlow.events({
             const data = {
                 key: 'label',
                 items: instance.items,
+                commonItems: instance.commonItems,
                 label: 'Assign label',
                 searchPlaceholder: 'Search labels',
                 storageKey: 'measureLabelCommon',
diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.html b/Packages/ohif-core/client/components/bootstrap/input/selectTree.html
index 633547864..85dbbe921 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.html
+++ b/Packages/ohif-core/client/components/bootstrap/input/selectTree.html
@@ -45,8 +45,8 @@
                 </div>
             {{/let}}
         </div>
-        {{#if (and (not this.root) this.storageKey)}}
-            {{>selectTreeCommon (clone this component=this.component)}}
+        {{#if (and (not this.root) (or this.storageKey this.commonItems))}}
+            {{>selectTreeCommon (clone this component=this.component treeInstance=instance)}}
         {{/if}}
     {{/group}}
 </template>
diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
index ee2db68cf..dbdf85056 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
+++ b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
@@ -250,27 +250,6 @@ Template.selectTree.events({
                 currentInstance = currentInstance.component.parent.templateInstance;
             }
         }
-    },
-
-    'click .select-tree-common label'(event, instance) {
-        // Get the clicked label
-        const $target = $(event.currentTarget);
-
-        // Build the input selector based on the label target
-        const inputSelector = '#' + $target.attr('for');
-
-        // Check if the input is not rendered
-        if (!$(inputSelector).length) {
-            // Change the search terms with the clicked label string
-
-            instance.$('.tree-search input').val($target.text()).trigger('input');
-            // Wait for options rerendering
-
-            Tracker.afterFlush(() => {
-                // Wait for components initialization
-                Meteor.defer(() => $(inputSelector).click());
-            });
-        }
     }
 });
 
diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTreeCommon.js b/Packages/ohif-core/client/components/bootstrap/input/selectTreeCommon.js
index b2f7feee4..9acecd500 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTreeCommon.js
+++ b/Packages/ohif-core/client/components/bootstrap/input/selectTreeCommon.js
@@ -2,11 +2,43 @@ import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
 import { _ } from 'meteor/underscore';
 
+Template.selectTreeCommon.events({
+    'click .select-tree-common label'(event, instance) {
+        // Get the clicked label
+        const $target = $(event.currentTarget);
+
+        // Build the input selector based on the label target
+        const inputSelector = '#' + $target.attr('for');
+
+        // Get the tree instance
+        const treeInstance = instance.data.treeInstance;
+
+        // Check if the input is not rendered
+        if (!$(inputSelector).length) {
+            // Change the search terms with the clicked label string
+
+            treeInstance.$('.tree-search input').val($target.text()).trigger('input');
+            // Wait for options rerendering
+
+            Tracker.afterFlush(() => {
+                // Wait for components initialization
+                Meteor.defer(() => $(inputSelector).click());
+            });
+        }
+    }
+});
+
+
 Template.selectTreeCommon.helpers({
     // Get the common items ordered by use history
     items() {
         const instance = Template.instance();
 
+        // Return the common items if given
+        if (instance.data.commonItems) {
+            return instance.data.commonItems;
+        }
+
         // Get all the tree leaves
         const leaves = instance.data.component.getLeaves();
 

From 8fdf9c2b1c99aa0a1eeed89c43bfd26a5c2002da Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Thu, 18 Aug 2016 17:15:59 -0300
Subject: [PATCH 04/41] LT-275: Enabling labels selection by the common section

---
 .../design/styles/components/selectTree.styl  |  2 +-
 .../components/measureFlow/measureFlow.js     | 27 ++++++---
 .../components/measureFlow/measureFlow.styl   |  9 +++
 .../components/bootstrap/input/selectTree.js  | 56 +++++++++++++++++++
 .../bootstrap/input/selectTreeCommon.js       | 39 +------------
 .../components/playground/playground.html     |  2 +-
 6 files changed, 87 insertions(+), 48 deletions(-)

diff --git a/Packages/design/styles/components/selectTree.styl b/Packages/design/styles/components/selectTree.styl
index 543f5ed92..42e870c45 100644
--- a/Packages/design/styles/components/selectTree.styl
+++ b/Packages/design/styles/components/selectTree.styl
@@ -217,7 +217,7 @@ $gray6 = #303030
       .content
         margin-left: 0
 
-  &.interacted
+  &.interacted, &.selected
 
     .select-tree-common
       z-index: 1
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
index 4e92b488e..f6df8dee1 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
@@ -55,25 +55,33 @@ Template.measureFlow.onCreated(() => {
     }];
 
     const items = [
+        'Abdomen/Chest Wall',
         'Adrenal',
-        'Muscle',
         'Bladder',
-        'Neck',
         'Bone',
-        'Other Soft Tissue',
         'Brain',
-        'Ovary',
         'Breast',
-        'Pancreas',
         'Colon',
-        'Prostate',
         'Esophagus',
-        'Small Bowel',
         'Extremities',
-        'Spleen',
         'Gallbladder',
-        'Stomach',
         'Kidney',
+        'Liver',
+        'Lung',
+        'Lymph Node',
+        'Mediastinum/Hilum',
+        'Muscle',
+        'Neck',
+        'Other Soft Tissue',
+        'Ovary',
+        'Pancreas',
+        'Pelvis',
+        'Peritoneum/Omentum',
+        'Prostate',
+        'Retroperitoneum',
+        'Small Bowel',
+        'Spleen',
+        'Stomach',
         'Subcutaneous'
     ];
 
@@ -130,6 +138,7 @@ Template.measureFlow.events({
                 key: 'label',
                 items: instance.items,
                 commonItems: instance.commonItems,
+                hideCommon: instance.data.hideCommon,
                 label: 'Assign label',
                 searchPlaceholder: 'Search labels',
                 storageKey: 'measureLabelCommon',
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
index 4cd2c0556..20ab85271 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
@@ -121,6 +121,15 @@
 
     .select-tree-root
 
+      &.interacted .select-tree-common .content
+        animation-name: none
+
+      &.selected .select-tree-common .content
+        animation-name: selectTreeCommonCloseLeft
+
+      .tree-search input
+        display: none
+
       .select-tree-common
         padding-left: 0
         padding-right: 6px
diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
index dbdf85056..2a1bb6741 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
+++ b/Packages/ohif-core/client/components/bootstrap/input/selectTree.js
@@ -11,6 +11,45 @@ import transition from 'meteor/ohif:core/client/lib/third-party/transition-to-fr
 Template.selectTree.onCreated(() => {
     const instance = Template.instance();
 
+    // Return the common items
+    instance.getCommonItems = () => {
+        const instance = Template.instance();
+
+        // Return the common items if given
+        if (instance.data.commonItems) {
+            return instance.data.commonItems;
+        }
+
+        // Get all the tree leaves
+        const leaves = instance.data.component.getLeaves();
+
+        // Generate an object with encoded keys from the tree leaves
+        leavesObject = {};
+        _.each(leaves, leaf => {
+            leavesObject[OHIF.string.encodeId(leaf.value)] = leaf;
+        });
+
+        // Get the current items ranking
+        const ranking = OHIF.user.getData(instance.data.storageKey);
+
+        // Sort the items based on how many times each one was used
+        const sorted = [];
+        _.each(ranking, (count, key) => sorted.push([key, count]));
+        sorted.sort((a, b) => b[1] - a[1]);
+
+        // Create the result and push every item respecting the ranking order
+        const result = [];
+        _.each(sorted, item => {
+            const current = leavesObject[item[0]];
+            if (current) {
+                result.push(current);
+            }
+        });
+
+        // Return the resulting array
+        return result;
+    };
+
     // Create a reactive variable to control the search
     instance.searchTerm = new ReactiveVar('');
 });
@@ -270,6 +309,23 @@ Template.selectTree.helpers({
 
             // Filter only the tree leaves
             items = _.filter(items, item => !item.items);
+        } else if (instance.data.hideCommon) {
+            // Get the values of common items
+            const commonValues = _.pluck(instance.getCommonItems(), 'value');
+
+            // Filter only the items that are not common
+            items = _.filter(items, item => !_.contains(commonValues, item.value));
+        }
+
+        // Return the items sorted for tree columns
+        if (instance.data.treeColumns) {
+            const begin = items.splice(0, Math.ceil(items.length / 2));
+            const sortedItems = [];
+            _.each(begin, (item, index) => {
+                sortedItems.push(item);
+                items[index] && sortedItems.push(items[index]);
+            });
+            items = sortedItems;
         }
 
         // Return the tree items
diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTreeCommon.js b/Packages/ohif-core/client/components/bootstrap/input/selectTreeCommon.js
index 9acecd500..534aec32a 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTreeCommon.js
+++ b/Packages/ohif-core/client/components/bootstrap/input/selectTreeCommon.js
@@ -28,44 +28,9 @@ Template.selectTreeCommon.events({
     }
 });
 
-
 Template.selectTreeCommon.helpers({
-    // Get the common items ordered by use history
+    // Get the common items
     items() {
-        const instance = Template.instance();
-
-        // Return the common items if given
-        if (instance.data.commonItems) {
-            return instance.data.commonItems;
-        }
-
-        // Get all the tree leaves
-        const leaves = instance.data.component.getLeaves();
-
-        // Generate an object with encoded keys from the tree leaves
-        leavesObject = {};
-        _.each(leaves, leaf => {
-            leavesObject[OHIF.string.encodeId(leaf.value)] = leaf;
-        });
-
-        // Get the current items ranking
-        const ranking = OHIF.user.getData(instance.data.storageKey);
-
-        // Sort the items based on how many times each one was used
-        const sorted = [];
-        _.each(ranking, (count, key) => sorted.push([key, count]));
-        sorted.sort((a, b) => b[1] - a[1]);
-
-        // Create the result and push every item respecting the ranking order
-        const result = [];
-        _.each(sorted, item => {
-            const current = leavesObject[item[0]];
-            if (current) {
-                result.push(current);
-            }
-        });
-
-        // Return the resulting array
-        return result;
+        return Template.instance().data.treeInstance.getCommonItems();
     }
 });
diff --git a/Packages/ohif-core/client/components/playground/playground.html b/Packages/ohif-core/client/components/playground/playground.html
index 8dcd60861..b72f3c364 100644
--- a/Packages/ohif-core/client/components/playground/playground.html
+++ b/Packages/ohif-core/client/components/playground/playground.html
@@ -1,6 +1,6 @@
 <template name="componentPlayground">
     <div class="component-playground">
-        {{>measureFlow treeColumns=true}}
+        {{>measureFlow treeColumns=true hideCommon=true}}
         <!--
             <div class="p-a-3">
                 {{>selectTree

From 8f98efc7ea2ddbeea33298bd68213b23abb4c13b Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Fri, 19 Aug 2016 18:09:39 -0300
Subject: [PATCH 05/41] LT-275: Final polish on style for both versions

---
 .../design/styles/components/selectTree.styl  | 23 +++++++++--
 .../components/measureFlow/measureFlow.html   |  1 +
 .../components/measureFlow/measureFlow.styl   | 40 ++++++++++++-------
 .../bootstrap/input/selectTree.html           |  4 +-
 4 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/Packages/design/styles/components/selectTree.styl b/Packages/design/styles/components/selectTree.styl
index 42e870c45..bd4011610 100644
--- a/Packages/design/styles/components/selectTree.styl
+++ b/Packages/design/styles/components/selectTree.styl
@@ -76,6 +76,7 @@ $gray6 = #303030
     display: block
     margin: 0
     padding: 5px
+    position: relative
     text-align: center
 
     span
@@ -85,6 +86,14 @@ $gray6 = #303030
     input
       border-color: $gray5
       font-weight: normal
+      padding-left: 34px
+
+      & ~ i
+        color: $gray1
+        font-size: 18px
+        left: 16px
+        position: absolute
+        top: 37px
 
   .tree-breadcrumb
     line-height: 32px
@@ -171,7 +180,7 @@ $gray6 = #303030
       border-radius: 5px
       color: white
       opacity: 0.9
-      padding: 5px 12px 12px
+      padding: 0 15px 12px
       position: absolute
       top: 50%
       transform(translateY(-50%))
@@ -179,13 +188,21 @@ $gray6 = #303030
 
       h5.title
         color: $gray5
-        font-size: 12px
         font-weight: normal
         line-height: 20px
-        margin: 0
+        margin: 12px 0 16px
 
       label
+        cursor: pointer
         display: block
+        font-weight: 300
+        line-height: 26px
+        margin: 0
+        padding-left: 3px
+        transition(padding 0.3s ease)
+
+        &:hover
+          padding-left: 0
 
 .select-tree-root
 
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.html b/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
index ec6d6cfa0..17bca7d28 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
@@ -3,6 +3,7 @@
         <button class="btn-add">Add label</button>
         {{#if eq instance.state.get 'selected'}}
             <div class="tree-leaf">
+                <i class="icon-check"></i>
                 <span>{{instance.value.label}}</span>
                 {{#if instance.descriptionEdit.get}}
                     <div class="description clearfix">
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
index 20ab85271..06851eb56 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
@@ -39,22 +39,11 @@
   &>.tree-leaf
     position: relative
 
-    &:before
-      animateZoomIn()
+    .icon-check
       background-color: $activeColor
-      border-radius: 20px
-      color: $uiGray
-      content: '\f00c'
-      display: block
-      font-family: FontAwesome
-      font-size: 24px
-      height: 40px
       left: -46px
-      line-height: 40px
       position: absolute
-      text-align: center
       top: 3px
-      width: 40px
 
     span
       background: white
@@ -127,8 +116,9 @@
       &.selected .select-tree-common .content
         animation-name: selectTreeCommonCloseLeft
 
-      .tree-search input
-        display: none
+      .tree-search
+        input, i
+          display: none
 
       .select-tree-common
         padding-left: 0
@@ -170,3 +160,25 @@
     width: calc(100% - 6px)
   }
 }
+
+.icon-check
+  background-color: white
+  border-radius: 20px
+  display: block
+  height: 40px
+  overflow: hidden
+  position: relative
+  width: 40px
+
+  &:before
+    border: 2px solid black
+    border-left-width: 0
+    border-top-width: 0
+    content: ''
+    display: block
+    height: 18px
+    left: 15px
+    position: absolute
+    top: 9px
+    transform(rotate(45deg))
+    width: 9px
diff --git a/Packages/ohif-core/client/components/bootstrap/input/selectTree.html b/Packages/ohif-core/client/components/bootstrap/input/selectTree.html
index 85dbbe921..f0cf042b3 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/selectTree.html
+++ b/Packages/ohif-core/client/components/bootstrap/input/selectTree.html
@@ -11,11 +11,13 @@
         <div class="tree-content">
             {{#let currentNode=this.currentNode.get}}
                 {{#if (and (not this.root) (ne this.search false))}}
-                    {{>inputText
+                    {{#inputText
                         label=this.label
                         labelClass='tree-search'
                         placeholder=(choose this.searchPlaceholder 'Search')
                     }}
+                        <i class="fa fa-search"></i>
+                    {{/inputText}}
                 {{/if}}
                 <div class="tree-options {{#if currentNode}}collapsed{{/if}}">
                     {{#if this.root}}

From 3b993dadc057977f7cd0401aa580300b3902fad5 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Mon, 22 Aug 2016 19:13:38 -0300
Subject: [PATCH 06/41] LT-281: Creating architectural mechanism to allow theme
 switching

---
 Packages/design/package.js                    |  2 +
 .../design/styles/imports/theme-tide.styl     | 57 ++++++++++++
 .../styles/imports/theme-tigerlilly.styl      | 92 ++++++++++---------
 Packages/design/styles/imports/theming.styl   | 25 +++++
 Packages/design/styles/imports/variables.styl |  9 +-
 .../components/measureFlow/measureFlow.styl   | 12 ++-
 6 files changed, 147 insertions(+), 50 deletions(-)
 create mode 100644 Packages/design/styles/imports/theming.styl

diff --git a/Packages/design/package.js b/Packages/design/package.js
index 41de0594b..8b624df74 100644
--- a/Packages/design/package.js
+++ b/Packages/design/package.js
@@ -18,7 +18,9 @@ Package.onUse(function(api) {
         'styles/imports/mixins.styl',
         'styles/imports/spacings.styl',
         'styles/imports/variables.styl',
+        'styles/imports/theming.styl',
         'styles/imports/theme-tide.styl',
+        'styles/imports/theme-tigerlilly.styl'
     ], 'client', {
         isImport: true
     });
diff --git a/Packages/design/styles/imports/theme-tide.styl b/Packages/design/styles/imports/theme-tide.styl
index 7aa395feb..b27ce8a43 100644
--- a/Packages/design/styles/imports/theme-tide.styl
+++ b/Packages/design/styles/imports/theme-tide.styl
@@ -1,3 +1,60 @@
+$themes['tide'] = {
+  // Common pallete
+  $uiYellow: #E29E4A
+  $uiSkyBlue: #6FBDE2
+
+  $uiLightGray: #516873
+  $uiGray: #263340
+  $uiGrayDark: #16202B
+  $uiGrayDarker: #151A1F
+  $uiGrayDarkest: #14191E
+
+  // Interface UI Colors
+  $defaultColor: #9cd0fe
+  $hoverColor: #ffffff
+  $activeColor: #00a4d9
+  $uiBorderColor: #436270
+  $uiBorderColorDark: #3C5D80
+  $uiBorderColorActive: #00a4d9
+  $primaryBackgroundColor: #000000
+  $boxBackgroundColor: #344a61
+  $boxBackgroundColorDark: #22374D
+
+  // Text Colors
+  $textColorActive: black //#89bae5
+  $textPrimaryColor: #ffffff
+  $textSecondaryColor: #6a8fb1
+
+  // Other Colors
+  $menuBackgroundColor: #F2F2F2
+  $imageSliderColor: #163239
+
+  // Viewport Settings
+  $viewportBorderThickness: 1px
+  $viewportBorderColor: $uiBorderColorDark
+  $viewportBorderColorHover: $uiBorderColor
+  $viewportBorderColorActive: $uiBorderColorActive
+
+  // Sizes
+  $topBarHeight: 40px
+  $toolbarHeight: 78px
+  $toolbarDrawerHeight: 62px
+
+  // Thicknesses
+  $uiBorderThickness: 1px
+
+  // Fonts
+  $logoFontFamily: "Sanchez"
+  $logoFontWeight: 300
+
+  // Transitions
+  $transitionDuration: 0.3s
+  $transitionEffect: ease
+  $sidebarTransition: all $transitionDuration $transitionEffect
+  $studiesSidebarMenuWidth: 307px
+  $lesionsSidebarMenuWidth: 323px
+}
+
 // Common pallete
 $uiYellow = #E29E4A
 $uiSkyBlue = #6FBDE2
diff --git a/Packages/design/styles/imports/theme-tigerlilly.styl b/Packages/design/styles/imports/theme-tigerlilly.styl
index e305a9878..ba473d261 100644
--- a/Packages/design/styles/imports/theme-tigerlilly.styl
+++ b/Packages/design/styles/imports/theme-tigerlilly.styl
@@ -1,54 +1,56 @@
-// Common pallete
-$uiYellow = #E29E4A
-$uiSkyBlue = #6FBDE2
+$themes['tigerlilly'] = {
+  // Common pallete
+  $uiYellow: #E29E4A
+  $uiSkyBlue: #6FBDE2
 
-$uiLightGray = #516873
-$uiGray = #263340
-$uiGrayDark = #16202B
-$uiGrayDarker = #151A1F
-$uiGrayDarkest = #14191E
+  $uiLightGray: #516873
+  $uiGray: #263340
+  $uiGrayDark: #16202B
+  $uiGrayDarker: #151A1F
+  $uiGrayDarkest: #14191E
 
-// Interface UI Colors
-$defaultColor = #98ceff
-$hoverColor = #ffffff
-$activeColor = #ff8a3d
-$uiBorderColor = #744b71
-$uiBorderColorDark = #744b71
-$uiBorderColorActive = #ff8a3d
-$primaryBackgroundColor = #000000
-$boxBackgroundColor = #5b3a59
-$boxBackgroundColorDark = #4b2f40
+  // Interface UI Colors
+  $defaultColor: #98ceff
+  $hoverColor: #ffffff
+  $activeColor: #ff8a3d
+  $uiBorderColor: #744b71
+  $uiBorderColorDark: #744b71
+  $uiBorderColorActive: #ff8a3d
+  $primaryBackgroundColor: #000000
+  $boxBackgroundColor: #5b3a59
+  $boxBackgroundColorDark: #4b2f40
 
-// Text Colors
-$textColorActive = #ff8a3d
-$textPrimaryColor = #ffffff
-$textSecondaryColor = #6a8fb1
+  // Text Colors
+  $textColorActive: black
+  $textPrimaryColor: #ffffff
+  $textSecondaryColor: #6a8fb1
 
-// Other Colors
-$menuBackgroundColor = #F2F2F2
-$imageSliderColor = #4b2c3c //#163239
+  // Other Colors
+  $menuBackgroundColor: #F2F2F2
+  $imageSliderColor: #4b2c3c //#163239
 
-// Viewport Settings
-$viewportBorderThickness = 1px
-$viewportBorderColor = $uiBorderColorDark
-$viewportBorderColorHover = $uiBorderColor
-$viewportBorderColorActive = $uiBorderColorActive
+  // Viewport Settings
+  $viewportBorderThickness: 1px
+  $viewportBorderColor: $uiBorderColorDark
+  $viewportBorderColorHover: $uiBorderColor
+  $viewportBorderColorActive: $uiBorderColorActive
 
-// Sizes
-$topBarHeight = 40px
-$toolbarHeight = 78px
-$toolbarDrawerHeight = 62px
+  // Sizes
+  $topBarHeight: 40px
+  $toolbarHeight: 78px
+  $toolbarDrawerHeight: 62px
 
-// Thicknesses
-$uiBorderThickness = 1px
+  // Thicknesses
+  $uiBorderThickness: 1px
 
-// Fonts
-$logoFontFamily = "Sanchez"
-$logoFontWeight = 300
+  // Fonts
+  $logoFontFamily: "Sanchez"
+  $logoFontWeight: 300
 
-// Transitions
-$transitionDuration = 0.3s
-$transitionEffect = ease
-$sidebarTransition = all $transitionDuration $transitionEffect
-$studiesSidebarMenuWidth = 307px
-$lesionsSidebarMenuWidth = 323px
\ No newline at end of file
+  // Transitions
+  $transitionDuration: 0.3s
+  $transitionEffect: ease
+  $sidebarTransition: all $transitionDuration $transitionEffect
+  $studiesSidebarMenuWidth: 307px
+  $lesionsSidebarMenuWidth: 323px
+}
diff --git a/Packages/design/styles/imports/theming.styl b/Packages/design/styles/imports/theming.styl
new file mode 100644
index 000000000..528ac4e43
--- /dev/null
+++ b/Packages/design/styles/imports/theming.styl
@@ -0,0 +1,25 @@
+parseSpaceVars($theme, $value)
+  $valueSplit = split(' ', $value)
+  $list = ''
+  pop($list)
+  for $property in $valueSplit
+    if ($theme[$property])
+      push($list, $theme[$property])
+    else
+      push($list, $property)
+  join(' ', $list)
+
+parseCommaVars($theme, $value)
+  $valueSplit = split(',', $value)
+  $list = ''
+  pop($list)
+  for $sentence in $valueSplit
+    push($list, parseSpaceVars($theme, $sentence))
+  unquote(join(',', $list))
+
+theme($property, $value)
+  / {selector()}
+    {$property}: parseCommaVars($themes[$defaultTheme], $value)
+  for $themeName, $theme in $themes
+    / body.theme-{$themeName} {selector()}
+      {$property}: parseCommaVars($theme, $value)
diff --git a/Packages/design/styles/imports/variables.styl b/Packages/design/styles/imports/variables.styl
index 621d56a85..362c5a1b8 100644
--- a/Packages/design/styles/imports/variables.styl
+++ b/Packages/design/styles/imports/variables.styl
@@ -1,2 +1,7 @@
-//@import "./theme-tigerlilly.styl"
-@import "./theme-tide.styl"
\ No newline at end of file
+$themes = {}
+$defaultTheme = 'tide'
+
+@import "./theming.styl"
+
+@import "./theme-tide.styl"
+@import "./theme-tigerlilly.styl"
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
index 06851eb56..bfbf89da1 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
@@ -10,10 +10,13 @@
       opacity: 0
 
   .btn-add
-    background-color: $activeColor
-    border: 2px solid $uiBorderColor
+    // color: $textColorActive
+    // background-color: $activeColor
+    // border: 2px solid $uiBorderColor
+    theme('color', '$textColorActive')
+    theme('background-color', '$activeColor')
+    theme('border', '2px solid $uiBorderColor')
     border-radius: 14px
-    color: $textColorActive
     cursor: pointer
     font-weight: bold
     height: 24px
@@ -26,6 +29,9 @@
     transition(opacity 0.3s ease)
     white-space: nowrap
 
+    // / {selector()}
+    //   color: $themes['tide']['uiYellow'] !important
+
   .select-tree-root>.tree-content
     width: 213px
 

From 28a904b29045e51ffaca7cca0b8d8a73a79e4415 Mon Sep 17 00:00:00 2001
From: Aysel Afsar <aysel.afsar@gmail.com>
Date: Wed, 24 Aug 2016 11:03:21 -0400
Subject: [PATCH 07/41] LT-274: Fix blank date in last login dialog on first
 logon - Remove redundant lastLoginModal.js file - Refactor userAccountMenu.js

---
 LesionTracker/.meteor/packages                |   1 +
 LesionTracker/.meteor/versions                |   2 +
 .../lastLoginModal/lastLoginModal.js          |   9 --
 .../userAccountMenu/userAccountMenu.js        | 116 +++++++++++-------
 Packages/lesiontracker/package.js             |   1 -
 Packages/lesiontracker/server/reviewers.js    |   8 +-
 6 files changed, 81 insertions(+), 56 deletions(-)
 delete mode 100644 Packages/lesiontracker/client/components/lastLoginModal/lastLoginModal.js

diff --git a/LesionTracker/.meteor/packages b/LesionTracker/.meteor/packages
index 9dceea041..063656cd3 100644
--- a/LesionTracker/.meteor/packages
+++ b/LesionTracker/.meteor/packages
@@ -64,3 +64,4 @@ fastclick@1.0.12
 standard-minifier-css@1.1.8
 standard-minifier-js@1.1.8
 johdirr:meteor-git-rev
+u2622:persistent-session
diff --git a/LesionTracker/.meteor/versions b/LesionTracker/.meteor/versions
index 7d4b6c902..91c298cc5 100644
--- a/LesionTracker/.meteor/versions
+++ b/LesionTracker/.meteor/versions
@@ -3,6 +3,7 @@ accounts-password@1.2.12
 aldeed:simple-schema@1.5.3
 aldeed:template-extension@4.0.0
 allow-deny@1.0.5
+amplify@1.0.0
 anti:gagarin@0.4.11
 anti:i18n@0.4.3
 arsnebula:reactive-promise@0.9.1
@@ -124,6 +125,7 @@ tracker@1.1.0
 twbs:bootstrap@3.3.6
 typ:accounts-ldap@1.0.1
 typ:ldapjs@0.7.3
+u2622:persistent-session@0.4.4
 ui@1.0.11
 underscore@1.0.9
 url@1.0.10
diff --git a/Packages/lesiontracker/client/components/lastLoginModal/lastLoginModal.js b/Packages/lesiontracker/client/components/lastLoginModal/lastLoginModal.js
deleted file mode 100644
index 388677bf0..000000000
--- a/Packages/lesiontracker/client/components/lastLoginModal/lastLoginModal.js
+++ /dev/null
@@ -1,9 +0,0 @@
-Template.lastLoginModal.helpers({
-    lastLoginDate: function() {
-        var userLoginDate = ReactiveMethod.call('getPriorLoginDate');
-        if (userLoginDate && userLoginDate.priorLoginDate) {
-            return moment(userLoginDate.priorLoginDate).format("MMMM Do YYYY, HH:mm:ss A");
-        }
-        return;
-    }
-});
\ No newline at end of file
diff --git a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.js b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.js
index 58ec7edaf..6d75389fb 100644
--- a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.js
+++ b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.js
@@ -1,3 +1,10 @@
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { Session } from 'meteor/session';
+
+// Display the last login modal as default
+Session.setDefault('displayLastLoginModal', true);
+
 Template.userAccountMenu.helpers({
     name: function() {
         var nameSplit = Meteor.user().profile.fullName.split(' ');
@@ -29,68 +36,87 @@ Template.userAccountMenu.events({
         $('#serverInformationModal').modal('show');
     },
     'click #logoutButton': function() {
-        // Remove reviewers info for the user
-        Meteor.call('removeUserFromReviewers', Meteor.userId());
-
         Meteor.logout(function() {
             Router.go('/entrySignIn');
         });
     }
 });
 
-Template.userAccountMenu.onRendered(function() {
-    var oldUserId;
-    var lastLoginModalInterval;
+Template.userAccountMenu.onCreated(function userAccountMenuCreated() {
+    const instance =  Template.instance();
 
-    this.autorun(function() {
-        // Hook login/logout
-        var user = Meteor.user();
-        if (!user) {
+    // Create reactive last login date
+    instance.lastLoginDate = new ReactiveVar();
+
+    // We need oldUser to remove Reviewers if the user logged out
+    let oldUser;
+
+    // Get last login date
+    Meteor.call('getPriorLoginDate', function(error, lastLoginDate){
+        if (error) {
+            console.log(error);
             return;
         }
 
-        var newUserId = user._id;
+        // Format the last login date
+        const formattedLastLoginDate = moment(lastLoginDate).format("MMMM Do YYYY, HH:mm:ss A");
 
-        if (oldUserId === null && newUserId) {
-            Session.set('showLastLoginModal', true);
+        instance.lastLoginDate.set(formattedLastLoginDate);
 
-            // Log
-            HipaaLogger.logEvent({
-                eventType: 'init',
-                userId: user._id,
-                userName: user.fullName
-            });
+    });
 
-        } else if (newUserId === null && oldUserId) {
-            // Set showLastLoginModal as null
-            Session.set('showLastLoginModal', null);
-
-            // Destroy interval for last login modal
-            Meteor.clearInterval(lastLoginModalInterval);
-            console.log('The user logged out');
-
-            // Log
-            // TODO: eventType is not defined for logout in hipaa-audit-log
-            /*HipaaLogger.logEvent({
-             eventType: 'logout',
-             userId: oldUserId,
-             userName: userName
-             });*/
-
-            // Remove the user from Reviewers
-            Meteor.call('removeUserFromReviewers', oldUserId);
+    instance.autorun(function() {
+        const lastLoginDate = instance.lastLoginDate.get();
+        if (!lastLoginDate) {
+            return;
         }
 
-        oldUserId = Meteor.userId();
+        // Hook login/logout
+        var user = Meteor.user();
+        if (!user) {
+            // Display last login modal for the next login
+            Session.setPersistent('displayLastLoginModal', true);
+
+            if (oldUser) {
+                // Log Signout
+                // TODO: eventType for logout is not defined
+                // HipaaLogger.logEvent({
+                //     eventType: 'logout',
+                //     userId: oldUser._id,
+                //     userName: oldUser.profile.fullName
+                //  });
+
+                // Remove the user by oldUserId from Reviewers
+                Meteor.call('removeUserFromReviewers', oldUser._id);
+            }
+            return;
+        }
+
+        // Set oldUser
+        oldUser = user;
 
         // Trigger last login date popup
-        if (Session.get('showLastLoginModal')) {
-            Modal.show('lastLoginModal');
-
-            lastLoginModalInterval = Meteor.setInterval(function() {
-                Modal.hide('lastLoginModal');
-                Session.set('showLastLoginModal', null);
-            }, 3000);
+        if (!Session.get('displayLastLoginModal')) {
+            return;
         }
+
+        // Displaye the modal
+        Modal.show('lastLoginModal', {
+            lastLoginDate: lastLoginDate
+        });
+
+        // Hide the modal after 5sec
+        Meteor.setTimeout(() => {
+            Modal.hide('lastLoginModal');
+            Session.setPersistent('displayLastLoginModal', false);
+        }, 5000);
+
+        // Log signin
+        HipaaLogger.logEvent({
+            eventType: 'init',
+            userId: user._id,
+            userName: user.profile.fullName
+        });
+
     });
 });
\ No newline at end of file
diff --git a/Packages/lesiontracker/package.js b/Packages/lesiontracker/package.js
index ad16e3a8a..9f06f4a55 100644
--- a/Packages/lesiontracker/package.js
+++ b/Packages/lesiontracker/package.js
@@ -197,7 +197,6 @@ Package.onUse(function(api) {
     api.addFiles('client/components/confirmRemoveTimepointAssociation/confirmRemoveTimepointAssociation.js', 'client');
 
     api.addFiles('client/components/lastLoginModal/lastLoginModal.html', 'client');
-    api.addFiles('client/components/lastLoginModal/lastLoginModal.js', 'client');
 
     api.addFiles('client/components/confirmDeleteDialog/confirmDeleteDialog.html', 'client');
     api.addFiles('client/components/confirmDeleteDialog/confirmDeleteDialog.styl', 'client');
diff --git a/Packages/lesiontracker/server/reviewers.js b/Packages/lesiontracker/server/reviewers.js
index 27aa79d84..fb228c166 100644
--- a/Packages/lesiontracker/server/reviewers.js
+++ b/Packages/lesiontracker/server/reviewers.js
@@ -85,7 +85,13 @@ Meteor.methods({
     },
 
     getPriorLoginDate: function() {
-        return Meteor.users.findOne({_id: Meteor.userId()}, {fields: {priorLoginDate: 1}});
+        return Meteor.users.findOne({
+            _id: Meteor.userId()
+        }, {
+            fields: {
+                priorLoginDate: 1
+            }
+        }).priorLoginDate;
     }
 });
 

From c266599ed7626c47fd68e927051fef5f42eb5663 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 24 Aug 2016 15:21:50 -0300
Subject: [PATCH 08/41] OHIF-61: Fixing 'more' tools dropdown

---
 .../viewer/toolbarSectionTools/toolbarSectionTools.styl      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl b/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl
index c618e0283..27f29e873 100644
--- a/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl
+++ b/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl
@@ -9,8 +9,9 @@ $distance = 12px
     bottom: - ($toolbarDrawerHeight + $distance)
     height: $toolbarDrawerHeight
     left: 0
+    min-width: 100%
     position: absolute
-    width: 100%
+    white-space: nowrap
 
     .toolbarSectionDrawer
       background-color: $uiGrayDarker
@@ -30,4 +31,4 @@ $distance = 12px
       width: 8px
 
     &.active .buttonLabel i
-      transform(rotateX(180deg))
\ No newline at end of file
+      transform(rotateX(180deg))

From 4b627198b73fef1ec73bf52eff3ad40f7c2f3758 Mon Sep 17 00:00:00 2001
From: Aysel Afsar <aysel.afsar@gmail.com>
Date: Wed, 24 Aug 2016 17:36:03 -0400
Subject: [PATCH 09/41] OHIF-48: Add pagination for worklist

---
 OHIFViewer/.meteor/packages                   |  1 +
 OHIFViewer/.meteor/versions                   |  1 +
 .../worklistPagination.html                   | 29 ++++++++++
 .../worklistPagination/worklistPagination.js  | 58 +++++++++++++++++++
 .../worklistPagination.styl                   | 39 +++++++++++++
 .../worklistResult/worklistResult.html        |  4 ++
 .../worklistResult/worklistResult.js          | 49 ++++++++++++----
 .../jquery.twbsPagination.min.js              |  9 +++
 Packages/worklist/package.js                  |  5 ++
 9 files changed, 184 insertions(+), 11 deletions(-)
 create mode 100644 Packages/worklist/client/components/worklistPagination/worklistPagination.html
 create mode 100644 Packages/worklist/client/components/worklistPagination/worklistPagination.js
 create mode 100644 Packages/worklist/client/components/worklistPagination/worklistPagination.styl
 create mode 100644 Packages/worklist/client/lib/jquery.twbsPagination/jquery.twbsPagination.min.js

diff --git a/OHIFViewer/.meteor/packages b/OHIFViewer/.meteor/packages
index edd4b466c..23b2c3b6b 100644
--- a/OHIFViewer/.meteor/packages
+++ b/OHIFViewer/.meteor/packages
@@ -41,3 +41,4 @@ standard-minifier-css@1.1.8
 standard-minifier-js@1.1.8
 aldeed:simple-schema
 johdirr:meteor-git-rev
+aldeed:template-extension
diff --git a/OHIFViewer/.meteor/versions b/OHIFViewer/.meteor/versions
index 4bc7a8cbb..94eb784aa 100644
--- a/OHIFViewer/.meteor/versions
+++ b/OHIFViewer/.meteor/versions
@@ -1,4 +1,5 @@
 aldeed:simple-schema@1.5.3
+aldeed:template-extension@4.0.0
 allow-deny@1.0.5
 arsnebula:reactive-promise@0.9.1
 autoupdate@1.3.11
diff --git a/Packages/worklist/client/components/worklistPagination/worklistPagination.html b/Packages/worklist/client/components/worklistPagination/worklistPagination.html
new file mode 100644
index 000000000..050e4ec6f
--- /dev/null
+++ b/Packages/worklist/client/components/worklistPagination/worklistPagination.html
@@ -0,0 +1,29 @@
+<template name="worklistPagination">
+        <div class="worklistPagination">
+            <div class="row">
+                <div class="col-xs-4 col-sm-3 col-md-3">
+                    {{#with recordCount}}
+                         <div class="form-inline form-group rows-per-page">
+                            <label>
+                                <span>Show</span>
+                                <select class="js-select-rows-per-page">
+                                    <option value="25">25</option>
+                                    <option value="50">50</option>
+                                    <option value="100">100</option>
+                                </select>
+
+                                <span class="rows-per-page-label">rows per page</span>
+                            </label>
+                        </div>
+                    {{/with}}
+                </div>
+                <div class="col-xs-8 col-sm-9 col-md-9">
+                    <div class="form-inline form-group page-number">
+                        <label>
+                            <ul id="pagination" class="no-margins"></ul>
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+</template>
\ No newline at end of file
diff --git a/Packages/worklist/client/components/worklistPagination/worklistPagination.js b/Packages/worklist/client/components/worklistPagination/worklistPagination.js
new file mode 100644
index 000000000..4409a471b
--- /dev/null
+++ b/Packages/worklist/client/components/worklistPagination/worklistPagination.js
@@ -0,0 +1,58 @@
+import { Template } from 'meteor/templating';
+
+import './worklistPagination.html';
+
+const visiblePages = 10;
+Template.worklistPagination.onCreated(function() {
+    let instance = Template.instance();
+    // replace parentVariable with the name of the instance variable
+    instance.parent = this.parent(1);
+});
+
+Template.worklistPagination.onRendered(function() {
+    const instance = Template.instance();
+    const $paginationControl = instance.$('#pagination');
+
+    // Track changes on recordCount and rowsPerPage
+    instance.autorun(function() {
+        const recordCount = instance.parent.recordCount.get();
+        const rowsPerPage = instance.parent.rowsPerPage.get();
+
+        // Destroy plugin if exists
+        if ($paginationControl.data().twbsPagination) {
+            $paginationControl.twbsPagination('destroy');
+        }
+
+        if (recordCount && rowsPerPage) {
+            const totalPageNumber = Math.ceil(recordCount / rowsPerPage);
+
+            // Initialize plugin
+            $paginationControl.twbsPagination({
+                totalPages: totalPageNumber,
+                visiblePages: visiblePages,
+                onPageClick: function (event, page) {
+                    // Update currentPage
+                    // Decrease page by 1 to set currentPage
+                    // Since reactive table current page index starts by 0
+                    instance.parent.currentPage.set(page - 1);
+                }
+            });
+        }
+    });
+});
+
+Template.worklistPagination.helpers({
+    recordCount() {
+        const instance = Template.instance();
+        return instance.parent.recordCount.get();
+    }
+});
+
+Template.worklistPagination.events({
+    'change .js-select-rows-per-page'(event, instance) {
+        const rowsPerPage = $(event.currentTarget).val();
+
+        // Update rowsPerPage of parent
+        instance.parent.rowsPerPage.set(parseInt(rowsPerPage, 10));
+    }
+});
diff --git a/Packages/worklist/client/components/worklistPagination/worklistPagination.styl b/Packages/worklist/client/components/worklistPagination/worklistPagination.styl
new file mode 100644
index 000000000..1cb183ff9
--- /dev/null
+++ b/Packages/worklist/client/components/worklistPagination/worklistPagination.styl
@@ -0,0 +1,39 @@
+@import "{design}/app"
+
+.worklistPagination
+    font-size: 13px
+    font-weight: normal !important
+
+  .rows-per-page
+    padding-top: 20px
+
+    label
+      font-weight: normal
+
+    select
+      background-color: $primaryBackgroundColor
+      color: white
+
+  .page-number
+    text-align: right
+
+    label
+      font-weight: normal
+
+      ul#pagination
+
+        li
+          a
+            padding: 4px 8px
+            background-color: $primaryBackgroundColor
+            color: white
+
+            &:hover
+              color: $activeColor
+
+        .active
+
+          a
+            background-color: $uiGrayDarker
+            color: white
+
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.html b/Packages/worklist/client/components/worklistResult/worklistResult.html
index 3fe695877..b74813f4b 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.html
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.html
@@ -92,6 +92,10 @@
             {{/each}}
             </tbody>
         </table>
+
+        <!-- Pagination -->
+        {{> worklistPagination }}
+
         {{#if session "showLoadingText"}}
             {{>loadingText}}
         {{ else }}
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.js b/Packages/worklist/client/components/worklistResult/worklistResult.js
index 5edb2c79c..828081518 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.js
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.js
@@ -6,19 +6,37 @@ Template.worklistResult.helpers({
      * by Patient name and Study Date in Ascending order.
      */
     studies() {
-        const sortOption = Session.get('sortOption');
-        if (sortOption) {
-            return WorklistStudies.find({}, {
-                sort: sortOption
-            });
+        const instance = Template.instance();
+        let studies;
+        let sortOption = {
+            patientName: 1,
+            studyDate: 1
+        };
+
+        // Update sort option if session is defined
+        if (Session.get('sortOption')) {
+            sortOption = Session.get('sortOption');
         }
 
-        return WorklistStudies.find({}, {
-            sort: {
-                patientName: 1,
-                studyDate: 1
-            }
-        });
+        // Pagination parameters
+        const rowsPerPage = instance.rowsPerPage.get();
+        const currentPage = instance.currentPage.get();
+        const offset = rowsPerPage * currentPage;
+        const limit = offset + rowsPerPage;
+
+        studies = WorklistStudies.find({}, {
+            sort: sortOption
+        }).fetch();
+
+        if (!studies) {
+            return;
+        }
+
+        // Update record count
+        instance.recordCount.set(studies.length);
+
+        // Limit studies
+        return studies.slice(offset, limit);
     },
 
     numberOfStudies() {
@@ -163,6 +181,15 @@ Template.worklistResult.onCreated(() => {
     instance.sortOption = new ReactiveVar();
     instance.sortingColumns = new ReactiveDict();
 
+    // Pagination parameters
+
+    // Rows per page is 25 as default
+    instance.rowsPerPage = new ReactiveVar(25);
+
+    // Set currentPage indexed 0
+    instance.currentPage = new ReactiveVar(0);
+    instance.recordCount = new ReactiveVar();
+
     // Set sortOption
     const sortOptionSession = Session.get('sortOption');
     if (sortOptionSession) {
diff --git a/Packages/worklist/client/lib/jquery.twbsPagination/jquery.twbsPagination.min.js b/Packages/worklist/client/lib/jquery.twbsPagination/jquery.twbsPagination.min.js
new file mode 100644
index 000000000..7cc71f9c4
--- /dev/null
+++ b/Packages/worklist/client/lib/jquery.twbsPagination/jquery.twbsPagination.min.js
@@ -0,0 +1,9 @@
+/*
+ * jQuery Bootstrap Pagination v1.3.1
+ * https://github.com/esimakin/twbs-pagination
+ *
+ * Copyright 2014-2015 Eugene Simakin <eugenesimakin@mail.ru>
+ * Released under Apache 2.0 license
+ * http://apache.org/licenses/LICENSE-2.0.html
+ */
+!function(a,b,c,d){"use strict";var e=a.fn.twbsPagination,f=function(c,d){if(this.$element=a(c),this.options=a.extend({},a.fn.twbsPagination.defaults,d),this.options.startPage<1||this.options.startPage>this.options.totalPages)throw new Error("Start page option is incorrect");if(this.options.totalPages=parseInt(this.options.totalPages),isNaN(this.options.totalPages))throw new Error("Total pages option is not correct!");if(this.options.visiblePages=parseInt(this.options.visiblePages),isNaN(this.options.visiblePages))throw new Error("Visible pages option is not correct!");if(this.options.totalPages<this.options.visiblePages&&(this.options.visiblePages=this.options.totalPages),this.options.onPageClick instanceof Function&&this.$element.first().on("page",this.options.onPageClick),this.options.href){var e,f=this.options.href.replace(/[-\/\\^$*+?.|[\]]/g,"\\$&");f=f.replace(this.options.hrefVariable,"(\\d+)"),null!=(e=new RegExp(f,"i").exec(b.location.href))&&(this.options.startPage=parseInt(e[1],10))}var g="function"==typeof this.$element.prop?this.$element.prop("tagName"):this.$element.attr("tagName");return"UL"===g?this.$listContainer=this.$element:this.$listContainer=a("<ul></ul>"),this.$listContainer.addClass(this.options.paginationClass),"UL"!==g&&this.$element.append(this.$listContainer),this.render(this.getPages(this.options.startPage)),this.setupEvents(),this.options.initiateStartPageClick&&this.$element.trigger("page",this.options.startPage),this};f.prototype={constructor:f,destroy:function(){return this.$element.empty(),this.$element.removeData("twbs-pagination"),this.$element.off("page"),this},show:function(a){if(1>a||a>this.options.totalPages)throw new Error("Page is incorrect.");return this.render(this.getPages(a)),this.setupEvents(),this.$element.trigger("page",a),this},buildListItems:function(a){var b=[];if(this.options.first&&b.push(this.buildItem("first",1)),this.options.prev){var c=a.currentPage>1?a.currentPage-1:this.options.loop?this.options.totalPages:1;b.push(this.buildItem("prev",c))}for(var d=0;d<a.numeric.length;d++)b.push(this.buildItem("page",a.numeric[d]));if(this.options.next){var e=a.currentPage<this.options.totalPages?a.currentPage+1:this.options.loop?1:this.options.totalPages;b.push(this.buildItem("next",e))}return this.options.last&&b.push(this.buildItem("last",this.options.totalPages)),b},buildItem:function(b,c){var d=a("<li></li>"),e=a("<a></a>"),f=null;switch(b){case"page":f=c,d.addClass(this.options.pageClass);break;case"first":f=this.options.first,d.addClass(this.options.firstClass);break;case"prev":f=this.options.prev,d.addClass(this.options.prevClass);break;case"next":f=this.options.next,d.addClass(this.options.nextClass);break;case"last":f=this.options.last,d.addClass(this.options.lastClass)}return d.data("page",c),d.data("page-type",b),d.append(e.attr("href",this.makeHref(c)).html(f)),d},getPages:function(a){var b=[],c=Math.floor(this.options.visiblePages/2),d=a-c+1-this.options.visiblePages%2,e=a+c;0>=d&&(d=1,e=this.options.visiblePages),e>this.options.totalPages&&(d=this.options.totalPages-this.options.visiblePages+1,e=this.options.totalPages);for(var f=d;e>=f;)b.push(f),f++;return{currentPage:a,numeric:b}},render:function(b){var c=this;this.$listContainer.children().remove(),this.$listContainer.append(this.buildListItems(b)),this.$listContainer.children().each(function(){var d=a(this),e=d.data("page-type");switch(e){case"page":d.data("page")===b.currentPage&&d.addClass(c.options.activeClass);break;case"first":d.toggleClass(c.options.disabledClass,1===b.currentPage);break;case"last":d.toggleClass(c.options.disabledClass,b.currentPage===c.options.totalPages);break;case"prev":d.toggleClass(c.options.disabledClass,!c.options.loop&&1===b.currentPage);break;case"next":d.toggleClass(c.options.disabledClass,!c.options.loop&&b.currentPage===c.options.totalPages)}})},setupEvents:function(){var b=this;this.$listContainer.find("li").each(function(){var c=a(this);return c.off(),c.hasClass(b.options.disabledClass)||c.hasClass(b.options.activeClass)?void c.on("click",!1):void c.click(function(a){!b.options.href&&a.preventDefault(),b.show(parseInt(c.data("page")))})})},makeHref:function(a){return this.options.href?this.options.href.replace(this.options.hrefVariable,a):"#"}},a.fn.twbsPagination=function(b){var c,e=Array.prototype.slice.call(arguments,1),g=a(this),h=g.data("twbs-pagination"),i="object"==typeof b&&b;return h||g.data("twbs-pagination",h=new f(this,i)),"string"==typeof b&&(c=h[b].apply(h,e)),c===d?g:c},a.fn.twbsPagination.defaults={totalPages:0,startPage:1,visiblePages:5,initiateStartPageClick:!0,href:!1,hrefVariable:"{{number}}",first:"First",prev:"Previous",next:"Next",last:"Last",loop:!1,onPageClick:null,paginationClass:"pagination",nextClass:"next",prevClass:"prev",lastClass:"last",firstClass:"first",pageClass:"page",activeClass:"active",disabledClass:"disabled"},a.fn.twbsPagination.Constructor=f,a.fn.twbsPagination.noConflict=function(){return a.fn.twbsPagination=e,this}}(window.jQuery,window,document);
\ No newline at end of file
diff --git a/Packages/worklist/package.js b/Packages/worklist/package.js
index 520b5106e..214f38c0d 100644
--- a/Packages/worklist/package.js
+++ b/Packages/worklist/package.js
@@ -69,6 +69,10 @@ Package.onUse(function (api) {
     api.addFiles('client/components/progressDialog/progressDialog.html', 'client');
     api.addFiles('client/components/progressDialog/progressDialog.styl', 'client');
     api.addFiles('client/components/progressDialog/progressDialog.js', 'client');
+
+    api.addFiles('client/components/worklistPagination/worklistPagination.html', 'client');
+    api.addFiles('client/components/worklistPagination/worklistPagination.styl', 'client');
+    api.addFiles('client/components/worklistPagination/worklistPagination.js', 'client');
     
     // Client-side library functions
     api.addFiles('client/lib/getStudyMetadata.js', 'client');
@@ -79,6 +83,7 @@ Package.onUse(function (api) {
     api.addFiles('client/lib/worklist.js', 'client');
     api.addFiles('client/lib/queryStudies.js', 'client');
     api.addFiles('client/lib/importStudies.js', 'client');
+    api.addFiles('client/lib/jquery.twbsPagination/jquery.twbsPagination.min.js', 'client');
 
     // Server-side functions
     api.addFiles('server/publications.js', 'server');

From c3be49d23881e0980d58e13b2d6751aa7293c6ae Mon Sep 17 00:00:00 2001
From: weiwei <weiwei@toca.com>
Date: Thu, 25 Aug 2016 10:31:09 +0800
Subject: [PATCH 10/41] add wado proxy package

---
 OHIFViewer/.meteor/packages | 1 +
 OHIFViewer/.meteor/versions | 1 +
 2 files changed, 2 insertions(+)
 mode change 100644 => 100755 OHIFViewer/.meteor/packages
 mode change 100644 => 100755 OHIFViewer/.meteor/versions

diff --git a/OHIFViewer/.meteor/packages b/OHIFViewer/.meteor/packages
old mode 100644
new mode 100755
index edd4b466c..025469895
--- a/OHIFViewer/.meteor/packages
+++ b/OHIFViewer/.meteor/packages
@@ -41,3 +41,4 @@ standard-minifier-css@1.1.8
 standard-minifier-js@1.1.8
 aldeed:simple-schema
 johdirr:meteor-git-rev
+wadoproxy
diff --git a/OHIFViewer/.meteor/versions b/OHIFViewer/.meteor/versions
old mode 100644
new mode 100755
index 4bc7a8cbb..11a52834d
--- a/OHIFViewer/.meteor/versions
+++ b/OHIFViewer/.meteor/versions
@@ -99,6 +99,7 @@ underscore@1.0.9
 url@1.0.10
 validatejs@0.0.1
 viewerbase@0.0.1
+wadoproxy@0.0.1
 webapp@1.3.10
 webapp-hashing@1.0.9
 worklist@0.0.1

From 793c2f3c0f3213124b0ed5c78ab93c2dcfe8a30d Mon Sep 17 00:00:00 2001
From: Aysel Afsar <aysel.afsar@gmail.com>
Date: Thu, 25 Aug 2016 12:08:40 -0400
Subject: [PATCH 11/41] OHIF-55: Add Test Drive button to login with demo user
 for Lesion Tracker

---
 Packages/active-entry/package.js              |  3 +-
 .../activeEntrySignIn/activeEntrySignIn.js    | 25 ++++++++++++
 Packages/lesiontracker/package.js             |  3 ++
 .../lesiontracker/server/createDemoUser.js    | 39 +++++++++++++++++++
 4 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 Packages/lesiontracker/client/components/activeEntry/activeEntrySignIn/activeEntrySignIn.js
 create mode 100644 Packages/lesiontracker/server/createDemoUser.js

diff --git a/Packages/active-entry/package.js b/Packages/active-entry/package.js
index 1c549ad7c..8f78f11bc 100755
--- a/Packages/active-entry/package.js
+++ b/Packages/active-entry/package.js
@@ -26,7 +26,8 @@ Package.onUse(function (api) {
 
   api.use([
     'zuuk:stale-session@1.0.8',
-    'typ:accounts-ldap'
+    'typ:accounts-ldap',
+    'random'
   ], ['client', 'server']);
 
   api.addFiles([
diff --git a/Packages/lesiontracker/client/components/activeEntry/activeEntrySignIn/activeEntrySignIn.js b/Packages/lesiontracker/client/components/activeEntry/activeEntrySignIn/activeEntrySignIn.js
new file mode 100644
index 000000000..0894f4ff8
--- /dev/null
+++ b/Packages/lesiontracker/client/components/activeEntry/activeEntrySignIn/activeEntrySignIn.js
@@ -0,0 +1,25 @@
+import { Template } from 'meteor/templating';
+import { ActiveEntry } from 'meteor/clinical:active-entry';
+
+
+Template.entrySignIn.hooks({
+
+    rendered: function () {
+        // Create Test Drive button dynamically
+        let btnTestDrive = $('<button/>', {
+            id: 'btnTestDrive',
+            text: 'Test Drive',
+            class: 'btn btn-primary',
+            style: 'position: absolute; width: 150px; top: 20px; right: 20px; padding-left: 0;',
+            title: 'Login with Demo User',
+            click: function () {
+                // Login with demo user
+                ActiveEntry.signIn('demo@ohif.org', '12345678aA*');
+            }
+        });
+
+        const entrySignIn = this.find('#entrySignIn');
+        $(entrySignIn).append(btnTestDrive);
+    }
+
+});
\ No newline at end of file
diff --git a/Packages/lesiontracker/package.js b/Packages/lesiontracker/package.js
index 9f06f4a55..d71ac5b3b 100644
--- a/Packages/lesiontracker/package.js
+++ b/Packages/lesiontracker/package.js
@@ -101,6 +101,8 @@ Package.onUse(function(api) {
     api.addFiles('client/components/activeEntry/activeEntry.styl', 'client');
     api.addFiles('client/components/activeEntry/activeEntry.js', 'client');
 
+    api.addFiles('client/components/activeEntry/activeEntrySignIn/activeEntrySignIn.js', 'client');
+
     api.addFiles('client/components/hipaaLogPage/hipaaLogPage.styl', 'client');
     api.addFiles('client/components/hipaaLogPage/hipaaLogPage.js', 'client');
 
@@ -211,6 +213,7 @@ Package.onUse(function(api) {
     api.addFiles('server/publications.js', 'server');
     api.addFiles('server/methods.js', [ 'server' ]);
     api.addFiles('server/reviewers.js', [ 'server' ]);
+    api.addFiles('server/createDemoUser.js', [ 'server' ]);
 
     // Both client and server functions
     api.addFiles('both/collections.js', [ 'client', 'server' ]);
diff --git a/Packages/lesiontracker/server/createDemoUser.js b/Packages/lesiontracker/server/createDemoUser.js
new file mode 100644
index 000000000..9c0e5f2b6
--- /dev/null
+++ b/Packages/lesiontracker/server/createDemoUser.js
@@ -0,0 +1,39 @@
+import { Accounts } from 'meteor/accounts-base';
+
+
+Meteor.startup(function() {
+    const options = {
+        email: 'demo@ohif.org',
+        password: '12345678aA*',
+        profile: {
+            fullName: 'Demo User'
+        }
+    };
+
+    createDemoUser = function() {
+        const user = Meteor.users.findOne({
+            emails: {
+                $elemMatch: {
+                    address: 'demo@ohif.org'
+                }
+            }
+        });
+        if (user) {
+            return;
+        }
+        console.log('create user!');
+
+        // Create user
+        const userId = Accounts.createUser(options);
+
+        if (!userId) {
+            console.log('Demo user cannot be created');
+            return;
+        }
+    };
+
+    // Create demo user
+    createDemoUser();
+
+});
+

From 0835c31ba0924d1784a70b3cf24e78d4070b2230 Mon Sep 17 00:00:00 2001
From: weiwei <weiwei@toca.com>
Date: Fri, 26 Aug 2016 15:03:04 +0800
Subject: [PATCH 12/41] added wado uri proxy

---
 Packages/wadoproxy/package.js                 | 23 +++++++++++++
 Packages/wadoproxy/server/initialize.js       |  9 +++++
 Packages/wadoproxy/server/namespace.js        |  8 +++++
 Packages/wadoproxy/server/routes.js           | 33 +++++++++++++++++++
 Packages/worklist/package.js                  |  1 +
 .../server/services/dimse/retrieveMetadata.js |  2 +-
 .../server/services/wado/retrieveMetadata.js  |  2 +-
 config/medkenOrthanc.json                     | 32 ++++++++++--------
 8 files changed, 95 insertions(+), 15 deletions(-)
 create mode 100755 Packages/wadoproxy/package.js
 create mode 100755 Packages/wadoproxy/server/initialize.js
 create mode 100755 Packages/wadoproxy/server/namespace.js
 create mode 100755 Packages/wadoproxy/server/routes.js

diff --git a/Packages/wadoproxy/package.js b/Packages/wadoproxy/package.js
new file mode 100755
index 000000000..abc3589fc
--- /dev/null
+++ b/Packages/wadoproxy/package.js
@@ -0,0 +1,23 @@
+Package.describe({
+    name: 'wadoproxy',
+    summary: 'WADO-URI Proxy',
+    version: '0.0.1'
+});
+
+Package.onUse(function(api) {
+    api.versionsFrom('1.4');
+
+    api.use('ecmascript');
+    api.use('standard-app-packages');
+    api.use('clinical:router');
+
+
+    api.addFiles('server/namespace.js');
+    
+    // Server-only
+    api.addFiles('server/initialize.js', 'server');
+    api.addFiles('server/routes.js', 'server');
+
+    // Global exports
+    api.export('WADOProxy');
+});
diff --git a/Packages/wadoproxy/server/initialize.js b/Packages/wadoproxy/server/initialize.js
new file mode 100755
index 000000000..1e917067a
--- /dev/null
+++ b/Packages/wadoproxy/server/initialize.js
@@ -0,0 +1,9 @@
+
+Settings = Object.assign((Meteor.settings && Meteor.settings.proxy) ? Meteor.settings.proxy : {}, {
+    uri : "/__wado_proxy",
+    enabled: true
+})
+
+http = require("http");
+url = require("url");
+querystring = require("querystring");
\ No newline at end of file
diff --git a/Packages/wadoproxy/server/namespace.js b/Packages/wadoproxy/server/namespace.js
new file mode 100755
index 000000000..33ea111a6
--- /dev/null
+++ b/Packages/wadoproxy/server/namespace.js
@@ -0,0 +1,8 @@
+WADOProxy = {};
+
+WADOProxy.convertURL = function(wadoURL) {
+    if (!Settings.enabled) {
+        return wadoURL;
+    }
+    return Settings.uri + '?' + querystring.stringify({url: wadoURL});
+}
\ No newline at end of file
diff --git a/Packages/wadoproxy/server/routes.js b/Packages/wadoproxy/server/routes.js
new file mode 100755
index 000000000..9cf40ba69
--- /dev/null
+++ b/Packages/wadoproxy/server/routes.js
@@ -0,0 +1,33 @@
+Router.route(Settings.uri, function () {
+    let response = this.response;
+    if (!this.params.query.url) {
+        response.writeHead(500);
+        response.end('No wado url provided');
+        return;
+    }
+
+    let proxyRequest,
+        wadoUrl = url.parse(this.params.query.url, false);
+
+    var options = {
+        headers: {}
+    };
+    //options.headers = this.request.headers;
+    if (this.request.headers['referer']) {
+        options.headers.referer = this.request.headers['referer'];
+    }
+    if (this.request.headers['user-agent']) {
+        options.headers['user-agent'] = this.request.headers['user-agent'];
+    }
+
+    options.method = this.request.method;
+    options.host = wadoUrl.hostname;
+    options.port = wadoUrl.port ? wadoUrl.port : 80;
+    options.path = wadoUrl.path;
+
+    proxyRequest = http.request(options, function (proxyResponse) {
+        proxyResponse.pipe(response, {end: true});
+    });
+    //proxyRequest.end();
+    this.request.pipe(proxyRequest, {end: true});
+}, {where: 'server'});
\ No newline at end of file
diff --git a/Packages/worklist/package.js b/Packages/worklist/package.js
index 214f38c0d..bbe7336cf 100644
--- a/Packages/worklist/package.js
+++ b/Packages/worklist/package.js
@@ -29,6 +29,7 @@ Package.onUse(function (api) {
     api.use('dimseservice');
     api.use('orthanc-remote');
     api.use('viewerbase');
+    api.use('wadoproxy');
 
     // TODO: Replace with NPM dependency
     api.use('cornerstone'); // Only for HammerJS
diff --git a/Packages/worklist/server/services/dimse/retrieveMetadata.js b/Packages/worklist/server/services/dimse/retrieveMetadata.js
index 07b6ea8b4..8f3ca1445 100755
--- a/Packages/worklist/server/services/dimse/retrieveMetadata.js
+++ b/Packages/worklist/server/services/dimse/retrieveMetadata.js
@@ -111,7 +111,7 @@ function resultDataToStudyMetadata(studyInstanceUid, resultData) {
 
         // Retrieve the actual data over WADO-URI
         var server = Meteor.settings.servers.dicomWeb[0];
-        instanceSummary.wadouri = server.wadoUriRoot + '?requestType=WADO&studyUID=' + studyInstanceUid + '&seriesUID=' + seriesInstanceUid + '&objectUID=' + sopInstanceUid + "&contentType=application%2Fdicom";
+        instanceSummary.wadouri = WADOProxy.convertURL(server.wadoUriRoot + '?requestType=WADO&studyUID=' + studyInstanceUid + '&seriesUID=' + seriesInstanceUid + '&objectUID=' + sopInstanceUid + "&contentType=application%2Fdicom");
 
         series.instances.push(instanceSummary);
     });
diff --git a/Packages/worklist/server/services/wado/retrieveMetadata.js b/Packages/worklist/server/services/wado/retrieveMetadata.js
index 92405fbff..b08c822f9 100644
--- a/Packages/worklist/server/services/wado/retrieveMetadata.js
+++ b/Packages/worklist/server/services/wado/retrieveMetadata.js
@@ -116,7 +116,7 @@ function resultDataToStudyMetadata(server, studyInstanceUid, resultData) {
         };
 
         if (server.imageRendering === 'wadouri') {
-            instanceSummary.wadouri = server.wadoUriRoot + '?requestType=WADO&studyUID=' + studyInstanceUid + '&seriesUID=' + seriesInstanceUid + '&objectUID=' + sopInstanceUid + '&contentType=application%2Fdicom';
+            instanceSummary.wadouri = WADOProxy.convertURL(server.wadoUriRoot + '?requestType=WADO&studyUID=' + studyInstanceUid + '&seriesUID=' + seriesInstanceUid + '&objectUID=' + sopInstanceUid + '&contentType=application%2Fdicom');
         } else {
             instanceSummary.wadorsuri = server.wadoRoot + '/studies/' + studyInstanceUid + '/series/' + seriesInstanceUid + '/instances/' + sopInstanceUid + '/frames/1';
         }
diff --git a/config/medkenOrthanc.json b/config/medkenOrthanc.json
index 6bb678173..7b335dddf 100644
--- a/config/medkenOrthanc.json
+++ b/config/medkenOrthanc.json
@@ -15,20 +15,26 @@
           "logTiming": true
         }
       }
-    ]
+    ],
+    "dimse" : [{
+      "name": "ORTHANC_DIMSE",
+      "peers": [
+        {
+          "host": "208.100.41.100",
+          "port": 4242,
+          "aeTitle": "MKORTHANC",
+          "default": true
+        },
+        {
+          "host": "0.0.0.0",
+          "port": 11112,
+          "aeTitle": "OHIFDCM",
+          "default": true,
+          "server": true
+        }
+      ]
+    }]
   },
-  "dimse" : [{
-    "host" : "208.100.41.100",
-    "port" : 4242,
-    "aeTitle" : "MKORTHANC",
-    "default": true
-  },{
-    "host" : "0.0.0.0",
-    "port" : 11112,    
-    "aeTitle" : "OHIFDCM",
-    "default" : true,
-    "server" : true
-  }],
   "defaultServiceType": "dimse",
   "medkenpanel" : {
     "prefix" : "admin"

From 0eeb05e72b03fddf09adcc1f106079d93be1dc4c Mon Sep 17 00:00:00 2001
From: Aysel Afsar <aysel.afsar@gmail.com>
Date: Fri, 26 Aug 2016 12:04:34 -0400
Subject: [PATCH 13/41] OHIF-101: Display Series Details for selected studies

---
 LesionTracker/.meteor/versions                |   1 +
 LesionTracker/client/routes.js                |   3 +-
 OHIFViewer/.meteor/packages                   |   1 +
 OHIFViewer/.meteor/versions                   |   1 +
 .../components/ohifViewer/ohifViewer.html     |   1 +
 .../lesionTracker/lesionTracker.html          |   1 +
 .../lesionTrackerWorklistContextMenu.html     |   5 +-
 .../seriesDetailsTable.html                   | 104 ++++++++++++++++++
 .../seriesDetailsTable/seriesDetailsTable.js  |  51 +++++++++
 .../seriesDetailsTable.styl                   |  30 +++++
 .../studyContextMenu/studyContextMenu.html    |   4 +
 .../studyContextMenu/studyContextMenu.js      |  21 ++++
 .../viewSeriesDetailsModal.html               |  20 ++++
 Packages/worklist/package.js                  |   6 +
 14 files changed, 247 insertions(+), 2 deletions(-)
 create mode 100644 Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.html
 create mode 100644 Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.js
 create mode 100644 Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.styl
 create mode 100644 Packages/worklist/client/components/viewSeriesDetailsModal/viewSeriesDetailsModal.html

diff --git a/LesionTracker/.meteor/versions b/LesionTracker/.meteor/versions
index 91c298cc5..bd51597af 100644
--- a/LesionTracker/.meteor/versions
+++ b/LesionTracker/.meteor/versions
@@ -131,6 +131,7 @@ underscore@1.0.9
 url@1.0.10
 validatejs@0.0.1
 viewerbase@0.0.1
+wadoproxy@0.0.1
 webapp@1.3.10
 webapp-hashing@1.0.9
 worklist@0.0.1
diff --git a/LesionTracker/client/routes.js b/LesionTracker/client/routes.js
index 04516d6d3..3da643097 100644
--- a/LesionTracker/client/routes.js
+++ b/LesionTracker/client/routes.js
@@ -16,7 +16,8 @@ var data = {
         'optionsModal',
         'serverInformationModal',
         'confirmRemoveTimepointAssociation',
-        'lastLoginModal'
+        'lastLoginModal',
+        'viewSeriesDetailsModal'
     ]
 };
 
diff --git a/OHIFViewer/.meteor/packages b/OHIFViewer/.meteor/packages
index 2cf867dd9..af7747e20 100755
--- a/OHIFViewer/.meteor/packages
+++ b/OHIFViewer/.meteor/packages
@@ -43,3 +43,4 @@ aldeed:simple-schema
 johdirr:meteor-git-rev
 wadoproxy
 aldeed:template-extension
+peppelg:bootstrap-3-modal
diff --git a/OHIFViewer/.meteor/versions b/OHIFViewer/.meteor/versions
index 56784812e..8a20cef19 100755
--- a/OHIFViewer/.meteor/versions
+++ b/OHIFViewer/.meteor/versions
@@ -73,6 +73,7 @@ observe-sequence@1.0.12
 ohif:core@0.0.1
 ordered-dict@1.0.8
 orthanc-remote@0.0.1
+peppelg:bootstrap-3-modal@1.0.4
 practicalmeteor:chai@2.1.0_1
 practicalmeteor:loglevel@1.2.0_2
 promise@0.8.3
diff --git a/OHIFViewer/client/components/ohifViewer/ohifViewer.html b/OHIFViewer/client/components/ohifViewer/ohifViewer.html
index 1525ea0d7..e0bbad1db 100644
--- a/OHIFViewer/client/components/ohifViewer/ohifViewer.html
+++ b/OHIFViewer/client/components/ohifViewer/ohifViewer.html
@@ -25,4 +25,5 @@
     </div>
     {{> worklist }}
     {{> aboutModal }}
+    {{> viewSeriesDetailsModal }}
 </template>
\ No newline at end of file
diff --git a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html
index 48021f2d9..b14819565 100644
--- a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html
+++ b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html
@@ -38,4 +38,5 @@
     {{ >lastLoginModal }}
     {{ >studyContextMenu }}
     {{ >progressDialog}}
+    {{ >viewSeriesDetailsModal }}
 </template>
diff --git a/Packages/lesiontracker/client/components/lesionTrackerWorklistContextMenu/lesionTrackerWorklistContextMenu.html b/Packages/lesiontracker/client/components/lesionTrackerWorklistContextMenu/lesionTrackerWorklistContextMenu.html
index b24e896c8..b09da608b 100644
--- a/Packages/lesiontracker/client/components/lesionTrackerWorklistContextMenu/lesionTrackerWorklistContextMenu.html
+++ b/Packages/lesiontracker/client/components/lesionTrackerWorklistContextMenu/lesionTrackerWorklistContextMenu.html
@@ -24,7 +24,10 @@
                     Remove Association
                 </a>
                 <hr/>
-                <a class="disabled">View Series Details</a>
+                <a id="viewSeriesDetails" type="button"
+                   title="View Series Details">
+                    View Series Details
+                </a>
                 <a class="disabled">Anonymize</a>
                 <a class="disabled">Send</a>
                 <hr/>
diff --git a/Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.html b/Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.html
new file mode 100644
index 000000000..537ecb4a7
--- /dev/null
+++ b/Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.html
@@ -0,0 +1,104 @@
+<template name="seriesDetailsTable">
+    {{#unless selectedStudies.length}}
+        <p align="center">Series details not found</p>
+    {{/unless}}
+    {{#each selectedStudies}}
+        <div class="selectedStudyContainer">
+            <table class="table table-responsive tblStudyDetails">
+                <tbody>
+                <tr>
+                    <td class="center patientID">
+                        <div>
+                            <span>Patient ID</span>
+                        </div>
+                        <input type="text"
+                               class="form-control"
+                               id="patientID"
+                               placeholder="Patient ID"
+                               disabled="disabled"
+                               value="{{ patientId }}">
+                    </td>
+                    <td class="patientName">
+                        <div>
+                            <span>Patient Name</span>
+                        </div>
+                        <input type="text"
+                               class="form-control"
+                               id="patientName"
+                               placeholder="Patient Name"
+                               disabled="disabled"
+                               value="{{ formatPN patientName }}">
+                    </td>
+                    <td class="accessionNumber">
+                        <div>
+                            <span>Accession Number</span>
+                        </div>
+                        <input type="text"
+                               class="form-control"
+                               id="accessionNumber"
+                               placeholder="Accession Number"
+                               disabled="disabled"
+                               value="{{ accessionNumber }}">
+                    </td>
+                </tr>
+                <tr>
+                    <td class="studyDescription">
+                        <div>
+                            <span>Study Description</span>
+                        </div>
+                        <input type="text"
+                               class="form-control"
+                               id="studyDescription"
+                               placeholder="Study Description"
+                               disabled="disabled"
+                               value="{{ studyDescription }}">
+                    </td>
+                    <td class="studyDate">
+                        <div>
+                            <span>Study Date</span>
+                        </div>
+                        <input type="text"
+                               class="form-control"
+                               id="studyDate"
+                               placeholder="Study Date"
+                               disabled="disabled"
+                               value="{{ formatDA studyDate }}">
+                    </td>
+
+                    <td></td>
+                </tr>
+                </tbody>
+            </table>
+
+            <table class="table table-responsive tblSeriesDetails">
+                <thead>
+                <tr>
+                    <th class="header">Number</th>
+                    <th class="header">Modality</th>
+                    <th class="header">Description</th>
+                    <th class="header">Instances</th>
+                </tr>
+                </thead>
+
+                <tbody>
+                {{#if displaySeriesLoadingText}}
+                    <tr>
+                        <td colspan="4" class="center">
+                            {{> loadingText }}
+                        </td>
+                    </tr>
+                {{/if}}
+
+                {{#each seriesList}}
+                    <tr>
+                        <td class="center">{{ seriesNumber }}</td>
+                        <td class="center">{{ modality }}</td>
+                        <td class="center">{{ seriesDescription }}</td>
+                        <td class="center">{{ instances.length }}</td>
+                    </tr>
+                {{/each}}
+                </tbody>
+            </table>
+        </div>
+    {{/each}}
+</template>
\ No newline at end of file
diff --git a/Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.js b/Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.js
new file mode 100644
index 000000000..09b8ea22e
--- /dev/null
+++ b/Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.js
@@ -0,0 +1,51 @@
+Template.seriesDetailsTable.onCreated(() => {
+    const instance = Template.instance();
+
+    // Create selected studies
+    instance.selectedStudies = new ReactiveDict();
+
+    let selectedStudiesData = instance.data.selectedStudies;
+
+    if (!selectedStudiesData) {
+        return;
+    }
+
+    // Display loading text while getting series
+    _.each(selectedStudiesData, selectedStudy => {
+
+        selectedStudy.displaySeriesLoadingText = true;
+    });
+
+    // Set reactive selected studies
+    instance.selectedStudies.set('studies', selectedStudiesData);
+});
+
+Template.seriesDetailsTable.onRendered(() => {
+    const instance = Template.instance();
+    const studies = instance.selectedStudies.get('studies');
+
+    if (!studies) {
+        return;
+    }
+
+    // Get series list for the study
+    _.map(studies, (selectedStudy, index) => {
+        studies[index].seriesList = [];
+        getStudyMetadata(selectedStudy.studyInstanceUid, study => {
+
+            // Set series list
+            studies[index].seriesList = study.seriesList;
+            studies[index].displaySeriesLoadingText = false;
+
+            // Update selected studies
+            instance.selectedStudies.set('studies', studies);
+        });
+    });
+});
+
+Template.seriesDetailsTable.helpers({
+    selectedStudies() {
+        const instance = Template.instance();
+        return instance.selectedStudies.get('studies');
+    }
+});
\ No newline at end of file
diff --git a/Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.styl b/Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.styl
new file mode 100644
index 000000000..4fc3a14fe
--- /dev/null
+++ b/Packages/worklist/client/components/seriesDetailsTable/seriesDetailsTable.styl
@@ -0,0 +1,30 @@
+@import "{design}/app"
+
+.selectedStudyContainer
+  margin-bottom: 15px;
+
+  .tblStudyDetails
+    tbody > tr > td > label
+      color: $textPrimaryColor
+
+    tbody > tr > td > input[type="text"]
+      height: 28px
+      background-color: $primaryBackgroundColor
+      color: $textPrimaryColor
+      width: calc(100% - 10px)
+      border-radius: 4px
+      box-sizing: border-box
+
+  .tblSeriesDetails
+    thead > tr > th
+      text-align: center
+
+    tbody > tr
+
+      td
+        text-align: center
+        color: $textPrimaryColor
+
+    .loadingTextDiv
+      font-size: 13px
+      color: $textSecondaryColor
\ No newline at end of file
diff --git a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.html b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.html
index 0326400b4..cea0fd3e0 100644
--- a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.html
+++ b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.html
@@ -6,6 +6,10 @@
          onselectstart='return false;'>
         <ul>
             <li>
+                <a id="viewSeriesDetails" type="button"
+                   title="View Series Details">
+                    View Series Details
+                </a>
                 <a class="disabled">Anonymize</a>
                 <a class="disabled">Send</a>
                 <hr/>
diff --git a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.js b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.js
index d6f8c647d..830f5785e 100644
--- a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.js
+++ b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.js
@@ -13,6 +13,8 @@ function closeHandler(dialog) {
  */
 openStudyContextMenu = function(e) {
     Worklist.functions['exportSelectedStudies'] = exportSelectedStudies;
+    Worklist.functions['viewSeriesDetails'] = viewSeriesDetails;
+
 
     Template.studyContextMenu.study = $(e.currentTarget);
 
@@ -68,6 +70,25 @@ function exportSelectedStudies() {
     exportStudies(selectedStudies);
 }
 
+/**
+ * Display series details of study in modal
+ */
+function viewSeriesDetails() {
+    var selectedStudies = WorklistSelectedStudies.find({}, {
+        sort: {
+            studyDate: 1
+        }
+    }).fetch();
+
+    if (!selectedStudies) {
+        return;
+    }
+
+    Modal.show('viewSeriesDetailsModal', {
+        selectedStudies: selectedStudies
+    });
+}
+
 Template.studyContextMenu.events({
     'click a': function(e) {
         var study = Template.studyContextMenu.study;
diff --git a/Packages/worklist/client/components/viewSeriesDetailsModal/viewSeriesDetailsModal.html b/Packages/worklist/client/components/viewSeriesDetailsModal/viewSeriesDetailsModal.html
new file mode 100644
index 000000000..f14e8e4cd
--- /dev/null
+++ b/Packages/worklist/client/components/viewSeriesDetailsModal/viewSeriesDetailsModal.html
@@ -0,0 +1,20 @@
+<template name="viewSeriesDetailsModal">
+    <div class="modal" id="viewSeriesDetailsModal" tabindex="-1" role="dialog" aria-labelledby="viewSeriesDetailsModalLabel">
+        <div class="modal-dialog" 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="associationModalLabel">Series Details</h4>
+                </div>
+                <div class="modal-body">
+                    {{> seriesDetailsTable
+                            selectedStudies=selectedStudies
+                    }}
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal" id='cancelAssociation'>Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/Packages/worklist/package.js b/Packages/worklist/package.js
index bbe7336cf..c6245d51c 100644
--- a/Packages/worklist/package.js
+++ b/Packages/worklist/package.js
@@ -74,6 +74,12 @@ Package.onUse(function (api) {
     api.addFiles('client/components/worklistPagination/worklistPagination.html', 'client');
     api.addFiles('client/components/worklistPagination/worklistPagination.styl', 'client');
     api.addFiles('client/components/worklistPagination/worklistPagination.js', 'client');
+
+    api.addFiles('client/components/viewSeriesDetailsModal/viewSeriesDetailsModal.html', 'client');
+
+    api.addFiles('client/components/seriesDetailsTable/seriesDetailsTable.html', 'client');
+    api.addFiles('client/components/seriesDetailsTable/seriesDetailsTable.styl', 'client');
+    api.addFiles('client/components/seriesDetailsTable/seriesDetailsTable.js', 'client');
     
     // Client-side library functions
     api.addFiles('client/lib/getStudyMetadata.js', 'client');

From 396f83b449b4429bf6377237e3e2839c9455b088 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Mon, 29 Aug 2016 09:10:51 -0300
Subject: [PATCH 14/41] LT-288: Fixing viewer crash for non associated studies

---
 .../lesiontracker/client/api/timepoint.js     | 18 +++++++--
 .../components/caseProgress/caseProgress.js   |  7 ++++
 .../components/lesionTable/lesionTable.html   | 22 ++++++-----
 .../lesionTableHeaderRow.js                   |  7 ++++
 .../toolbarSection/toolbarSection.js          | 24 ++++++++----
 .../toolbarSectionButton.html                 | 38 +++++++++----------
 .../toolbarSectionButton.js                   | 10 +++++
 7 files changed, 88 insertions(+), 38 deletions(-)

diff --git a/Packages/lesiontracker/client/api/timepoint.js b/Packages/lesiontracker/client/api/timepoint.js
index 5499da0ee..11537c7db 100644
--- a/Packages/lesiontracker/client/api/timepoint.js
+++ b/Packages/lesiontracker/client/api/timepoint.js
@@ -26,8 +26,14 @@ class TimepointApi {
         });
     }
 
+    // Return the prior timepoint
     prior() {
-        const latestDate = this.current().latestDate;
+        const current = this.current();
+        if (!current) {
+            return;
+        }
+
+        const latestDate = current.latestDate;
         return this.timepoints.findOne({
             latestDate: {
                 $lt: latestDate
@@ -41,9 +47,15 @@ class TimepointApi {
 
     // Return only the current and prior Timepoints
     currentAndPrior() {
-        let timepoints = [this.current()];
+        const timepoints = [];
+
+        const current = this.current();
+        if (current) {
+            timepoints.push(current);
+        }
+
         const prior = this.prior();
-        if (prior) {
+        if (current && prior._id !== current._id) {
             timepoints.push(prior);
         }
 
diff --git a/Packages/lesiontracker/client/components/caseProgress/caseProgress.js b/Packages/lesiontracker/client/components/caseProgress/caseProgress.js
index 0f7303aa8..9ca6c6aef 100644
--- a/Packages/lesiontracker/client/components/caseProgress/caseProgress.js
+++ b/Packages/lesiontracker/client/components/caseProgress/caseProgress.js
@@ -7,7 +7,14 @@ Template.caseProgress.onCreated(() => {
     instance.progressText = new ReactiveVar();
     instance.isLocked = new ReactiveVar();
 
+    // Get the current timepoint
     const current = instance.data.timepointApi.current();
+
+    // Stop here if no timepoint was found
+    if (!current) {
+        return;
+    }
+
     if (!current.timepointId) {
         console.warn('Case has no timepointId');
         return;
diff --git a/Packages/lesiontracker/client/components/lesionTable/lesionTable.html b/Packages/lesiontracker/client/components/lesionTable/lesionTable.html
index 2034895b9..39bcb5f32 100644
--- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.html
+++ b/Packages/lesiontracker/client/components/lesionTable/lesionTable.html
@@ -1,13 +1,17 @@
 <template name="lesionTable">
     <div id="lesionTableContainer">
-        <div class="lesionTableLayoutChanger viewerRoundedButtonGroup">
-            {{>roundedButtonGroup buttonGroupData}}
-        </div>
-        <div class="lesionTableTimepointHeaderRow">
-            {{#each this.timepoints.get}}
-                {{>lesionTableTimepointHeader}}
-            {{/each}}
-        </div>
-        {{>lesionTableView (clone this)}}
+        {{#if this.timepoints.get.length}}
+            <div class="lesionTableLayoutChanger viewerRoundedButtonGroup">
+                {{>roundedButtonGroup buttonGroupData}}
+            </div>
+            <div class="lesionTableTimepointHeaderRow">
+                {{#each this.timepoints.get}}
+                    {{>lesionTableTimepointHeader}}
+                {{/each}}
+            </div>
+            {{>lesionTableView (clone this)}}
+        {{else}}
+            <h3 class="p-x-1 text-center">No associated timepoint</h3>
+        {{/if}}
     </div>
 </template>
diff --git a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.js b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.js
index 441045710..2db4de0b6 100644
--- a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.js
+++ b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.js
@@ -16,7 +16,14 @@ Template.lesionTableHeaderRow.onCreated(() => {
     const instance = Template.instance();
     instance.maxNumLesions = new ReactiveVar();
 
+    // Get the current timepoint
     const current = instance.data.timepointApi.current();
+
+    // Stop here if no timepoint was found
+    if (!current) {
+        return;
+    }
+
     const timepointType = current.timepointType;
 
     if (!instance.data.currentTimepointId) {
diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
index 8fc3b88f3..c90de53af 100644
--- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
+++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.js
@@ -53,7 +53,10 @@ Template.toolbarSection.helpers({
     },
 
     toolbarButtons() {
-        var buttonData = [];
+        // Check if the measure tools shall be disabled
+        const isMesureDisabled = !Template.instance().data.timepointApi.currentTimepointId;
+        const buttonData = [];
+
         buttonData.push({
             id: 'zoom',
             title: 'Zoom',
@@ -86,14 +89,16 @@ Template.toolbarSection.helpers({
             id: 'bidirectional',
             title: 'Target',
             classes: 'imageViewerTool rm-l-3',
-            svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-target'
+            svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-target',
+            disabled: isMesureDisabled
         });
 
         buttonData.push({
             id: 'nonTarget',
             title: 'Non-Target',
             classes: 'imageViewerTool toolbarSectionButton',
-            svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-non-target'
+            svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-non-target',
+            disabled: isMesureDisabled
         });
 
         buttonData.push({
@@ -107,28 +112,33 @@ Template.toolbarSection.helpers({
     },
 
     extraToolbarButtons() {
-        let buttonData = [];
+        // Check if the measure tools shall be disabled
+        const isMesureDisabled = !Template.instance().data.timepointApi.currentTimepointId;
+        const buttonData = [];
 
         // TODO: Get real icons for CR / UN / EX
         buttonData.push({
             id: 'crTool',
             title: 'CR Tool',
             classes: 'imageViewerTool toolbarSectionButton',
-            svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-temp'
+            svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-temp',
+            disabled: isMesureDisabled
         });
 
         buttonData.push({
             id: 'unTool',
             title: 'UN Tool',
             classes: 'imageViewerTool toolbarSectionButton',
-            svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-temp'
+            svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-temp',
+            disabled: isMesureDisabled
         });
 
         buttonData.push({
             id: 'exTool',
             title: 'EX Tool',
             classes: 'imageViewerTool toolbarSectionButton',
-            svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-temp'
+            svgLink: '/packages/viewerbase/assets/icons.svg#icon-tools-measure-temp',
+            disabled: isMesureDisabled
         });
 
         return buttonData;
diff --git a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html b/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html
index d8b165cb4..066d3a2ac 100644
--- a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html
+++ b/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.html
@@ -1,22 +1,22 @@
 <template name="toolbarSectionButton">
-    {{ #if this.buttonTemplateName }}
-    {{> UI.dynamic template=this.buttonTemplateName data=this }}
-    {{ else }}
-    <div id="{{this.id}}"
-         class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}}"
-         title="{{this.title}}">
-        <div class="svgContainer">
-            {{ #if this.svgLink }}
-            <svg>
-                <use xlink:href={{this.svgLink}}></use>
-            </svg>
-            {{ else }}
-            <i class={{iconClasses}}></i>
-            {{ /if }}
+    {{#if this.buttonTemplateName}}
+        {{>UI.dynamic template=this.buttonTemplateName data=this}}
+    {{else}}
+        <div id="{{this.id}}"
+            class="toolbarSectionButton rp-x-1 {{this.classes}} {{activeClass}} {{#if this.disabled}}disabled{{/if}}"
+            title="{{this.title}}">
+            <div class="svgContainer">
+                {{#if this.svgLink}}
+                <svg>
+                    <use xlink:href={{this.svgLink}}></use>
+                </svg>
+                {{else}}
+                <i class={{iconClasses}}></i>
+                {{/if}}
+            </div>
+            <div class="buttonLabel">
+                {{this.title}}
+            </div>
         </div>
-        <div class="buttonLabel">
-            {{this.title}}
-        </div>
-    </div>
-    {{ /if }}
+    {{/if}}
 </template>
diff --git a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js b/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js
index 8cc3447ec..3a2759b64 100644
--- a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js
+++ b/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js
@@ -15,6 +15,11 @@ Template.toolbarSectionButton.helpers({
 
 Template.toolbarSectionButton.events({
     'click .imageViewerTool'(event, instance) {
+        // Stop here if the tool is disabled
+        if ($(event.currentTarget).hasClass('disabled')) {
+            return;
+        }
+
         const tool = event.currentTarget.id;
         const elements = instance.$('.imageViewerViewport');
 
@@ -29,6 +34,11 @@ Template.toolbarSectionButton.events({
         }
     },
     'click .imageViewerCommand'(event, instance) {
+        // Stop here if the tool is disabled
+        if ($(event.currentTarget).hasClass('disabled')) {
+            return;
+        }
+
         const command = event.currentTarget.id;
         if (!OHIF.viewer.functionList || !OHIF.viewer.functionList.hasOwnProperty(command)) {
             return;

From a6ad256410f89dade380787c195ee3f0c9c74681 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Mon, 29 Aug 2016 09:27:26 -0300
Subject: [PATCH 15/41] LT-288: Fixing wrong conditional for prior timepoint

---
 Packages/lesiontracker/client/api/timepoint.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Packages/lesiontracker/client/api/timepoint.js b/Packages/lesiontracker/client/api/timepoint.js
index 11537c7db..ac4bd84b5 100644
--- a/Packages/lesiontracker/client/api/timepoint.js
+++ b/Packages/lesiontracker/client/api/timepoint.js
@@ -55,7 +55,7 @@ class TimepointApi {
         }
 
         const prior = this.prior();
-        if (current && prior._id !== current._id) {
+        if (current && prior && prior._id !== current._id) {
             timepoints.push(prior);
         }
 

From dce2f89f374bdbebaad997b30c5a0039ff126b70 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Mon, 29 Aug 2016 13:47:53 -0300
Subject: [PATCH 16/41] LT-67: Fixing: default servers (JSON) were not being
 listed

---
 Packages/lesiontracker/both/collections.js | 4 +++-
 Packages/lesiontracker/package.js          | 2 +-
 Packages/lesiontracker/server/servers.js   | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/Packages/lesiontracker/both/collections.js b/Packages/lesiontracker/both/collections.js
index 4e734d327..c4f742aa4 100644
--- a/Packages/lesiontracker/both/collections.js
+++ b/Packages/lesiontracker/both/collections.js
@@ -1,5 +1,8 @@
 import { Mongo } from 'meteor/mongo';
 
+// Servers describe the DICOM servers configurations
+Servers = new Mongo.Collection('servers');
+
 Timepoints = new Mongo.Collection('timepoints');
 Studies = new Mongo.Collection('studies');
 Measurements = new Mongo.Collection('measurements');
@@ -12,6 +15,5 @@ ImageMeasurements = new Mongo.Collection('imageMeasurements');
 // panel, and represents items such as data quality,
 AdditionalFindings = new Mongo.Collection('additionalFindings');
 
-Servers = new Mongo.Collection('servers');
 WorklistSubscriptions = ['studies', 'timepoints'];
 Reviewers = new Mongo.Collection('reviewers');
diff --git a/Packages/lesiontracker/package.js b/Packages/lesiontracker/package.js
index d71ac5b3b..5461f5700 100644
--- a/Packages/lesiontracker/package.js
+++ b/Packages/lesiontracker/package.js
@@ -209,8 +209,8 @@ Package.onUse(function(api) {
     api.addFiles('client/components/emailVerification/emailVerification.js', 'client');
 
     // Server functions
-    api.addFiles('server/servers.js', 'server');
     api.addFiles('server/publications.js', 'server');
+    api.addFiles('server/servers.js', 'server');
     api.addFiles('server/methods.js', [ 'server' ]);
     api.addFiles('server/reviewers.js', [ 'server' ]);
     api.addFiles('server/createDemoUser.js', [ 'server' ]);
diff --git a/Packages/lesiontracker/server/servers.js b/Packages/lesiontracker/server/servers.js
index 35aecefc7..5e10fc48d 100644
--- a/Packages/lesiontracker/server/servers.js
+++ b/Packages/lesiontracker/server/servers.js
@@ -69,4 +69,4 @@ Meteor.methods({
     serverSave: serverSettings => ServersControl.save(serverSettings),
     serverSetActive: serverId => ServersControl.setActive(serverId),
     serverRemove: serverId => ServersControl.remove(serverId)
-});
\ No newline at end of file
+});

From eb63e885817088ea598c3f27367d805e2f9eb322 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Mon, 29 Aug 2016 14:05:53 -0300
Subject: [PATCH 17/41] LT-67: Adjusting schema to switch to forms and inputs

---
 Packages/worklist/both/schema.js | 56 +++++++++++++++++---------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/Packages/worklist/both/schema.js b/Packages/worklist/both/schema.js
index 78ad516a0..57bb71405 100644
--- a/Packages/worklist/both/schema.js
+++ b/Packages/worklist/both/schema.js
@@ -3,23 +3,23 @@ import { SimpleSchema } from 'meteor/aldeed:simple-schema';
 export const DICOMWebRequestOptions = new SimpleSchema({
     auth: {
         type: String,
-        label: 'Username:Password Authentication String',
+        label: 'Authentication',
         optional: true
     },
     logRequests: {
         type: Boolean,
         defaultValue: true,
-        label: 'Log Requests?',
+        label: 'Requests',
     },
     logResponses: {
         type: Boolean,
         defaultValue: false,
-        label: 'Log Responses?',  
+        label: 'Responses',
     },
     logTiming: {
         type: Boolean,
         defaultValue: true,
-        label: 'Log Timing?',
+        label: 'Timing',
     },
 });
 
@@ -31,35 +31,35 @@ export const DICOMWebServer = new SimpleSchema({
     },
     wadoUriRoot: {
         type: String,
-        label: 'WADO URI Root',
-        max: 1000
-    },
-    qidoRoot: {
-        type: String,
-        label: 'QIDO Root',
+        label: 'WADO URI root',
         max: 1000
     },
     // TODO: Remove this
     wadoUriRootNOTE: {
         type: String,
-        label: 'WADO URI Root Note',
+        label: 'WADO URI root note',
         optional: true
     },
     wadoRoot: {
         type: String,
-        label: 'WADO Root',
+        label: 'WADO root',
+        max: 1000
+    },
+    imageRendering: {
+        type: String,
+        label: 'Image rendering',
+        defaultValue: 'wadouri'
+    },
+    qidoRoot: {
+        type: String,
+        label: 'QIDO root',
         max: 1000
     },
     qidoSupportsIncludeField: {
         type: Boolean,
-        label: 'QIDO Supports Include Field?',
+        label: 'QIDO supports including fields',
         defaultValue: false
     },
-    imageRendering: {
-        type: String,
-        label: 'Image Rendering',
-        defaultValue: 'wadouri'
-    },
     requestOptions: {
         type: DICOMWebRequestOptions,
         label: 'Request Options'
@@ -67,9 +67,17 @@ export const DICOMWebServer = new SimpleSchema({
 });
 
 export const DIMSEPeer = new SimpleSchema({
+    aeTitle: {
+        type: String,
+        label: 'Application Entity (AE) Title',
+    },
+    hostAE: {
+        type: String,
+        label: 'Application Entity (AE) Host',
+    },
     host: {
         type: String,
-        label: 'Host URL',
+        label: 'Host Domain/IP',
     },
     port: {
         type: Number,
@@ -78,18 +86,14 @@ export const DIMSEPeer = new SimpleSchema({
         defaultValue: 11112,
         max: 65535
     },
-    aeTitle: {
-        type: String,
-        label: 'Application Entity (AE) Title',
-    },
     default: {
         type: Boolean,
-        label: 'Default?',
+        label: 'Default',
         defaultValue: false
     },
     server: {
         type: Boolean,
-        label: 'Server?',
+        label: 'Server',
         defaultValue: false
     },
     supportsInstanceRetrievalByStudyUid: {
@@ -102,7 +106,7 @@ export const DIMSEPeer = new SimpleSchema({
 export const DIMSEServer = new SimpleSchema({
     name: {
         type: String,
-        label: 'Name',
+        label: 'Server Name',
         max: 100
     },
     peers: {

From 6cbfc1c1803f5064f23a31de4a3d7788438c192b Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Mon, 29 Aug 2016 16:51:02 -0300
Subject: [PATCH 18/41] LT-67: Migrating the main form and its inputs to
 components

---
 LesionTracker/.meteor/packages                |  8 ++--
 OHIFViewer/.meteor/packages                   |  1 +
 Packages/design/styles/common/global.styl     | 20 +++++++++-
 .../serverInformationForm.html                | 28 ++++----------
 .../serverInformationForm.js                  | 32 +++++++++++-----
 Packages/ohif-core/both/index.js              |  1 +
 Packages/ohif-core/both/schema.js             |  6 +++
 .../client/components/base/mixins/form.js     | 17 +++++++--
 .../components/base/mixins/schemaData.js      | 10 +++++
 .../client/components/base/mixins/select.js   | 38 +++++++++++++++++++
 .../components/base/templates/input.html      |  1 +
 .../components/base/templates/select.html     |  1 +
 .../client/components/bootstrap/index.js      |  1 +
 .../components/bootstrap/input/hidden.html    |  7 ++++
 Packages/ohif-core/package.js                 |  3 ++
 Packages/worklist/both/schema.js              | 10 ++++-
 16 files changed, 145 insertions(+), 39 deletions(-)
 create mode 100644 Packages/ohif-core/both/index.js
 create mode 100644 Packages/ohif-core/both/schema.js
 create mode 100644 Packages/ohif-core/client/components/bootstrap/input/hidden.html

diff --git a/LesionTracker/.meteor/packages b/LesionTracker/.meteor/packages
index 063656cd3..1326f3bf7 100644
--- a/LesionTracker/.meteor/packages
+++ b/LesionTracker/.meteor/packages
@@ -8,13 +8,13 @@ npm-bcrypt@0.8.7
 
 meteor-base@1.0.4             # Packages every Meteor app needs to have
 mobile-experience@1.0.4       # Packages for a great mobile UX
-mongo@1.1.10                   # The database Meteor supports right now
+mongo@1.1.10                  # The database Meteor supports right now
 blaze-html-templates@1.0.4    # Compile .html files into Meteor Blaze views
 session@1.1.6                 # Client-side reactive dictionary for your app
-jquery@1.11.9                  # Helpful client-side library
+jquery@1.11.9                 # Helpful client-side library
 tracker@1.1.0                 # Meteor's client-side reactive programming library
 
-es5-shim@4.6.13                # ECMAScript 5 compatibility for older browsers.
+es5-shim@4.6.13               # ECMAScript 5 compatibility for older browsers.
 ecmascript@0.5.7              # Enable ECMAScript2015+ syntax in app code
 
 clinical:router
@@ -26,6 +26,8 @@ clinical:fonts
 clinical:hipaa-audit-log
 clinical:hipaa-logger
 
+aldeed:simple-schema          # Third party package to deal with schemas
+
 design
 ohif:core
 
diff --git a/OHIFViewer/.meteor/packages b/OHIFViewer/.meteor/packages
index af7747e20..4108a86e1 100755
--- a/OHIFViewer/.meteor/packages
+++ b/OHIFViewer/.meteor/packages
@@ -26,6 +26,7 @@ spacebars@1.0.12
 check@1.2.3
 cornerstone
 dicomweb
+aldeed:simple-schema          # Third party package to deal with schemas
 design
 ohif:core
 ecmascript@0.5.7
diff --git a/Packages/design/styles/common/global.styl b/Packages/design/styles/common/global.styl
index ac25bb23a..ccaf049ef 100644
--- a/Packages/design/styles/common/global.styl
+++ b/Packages/design/styles/common/global.styl
@@ -4,10 +4,27 @@ html body
   font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
   // Try to fix LT-273, need a monitor to test on though.
   //text-rendering: optimizeLegibility
-  
+
 html hr
   border-top: 1px solid $uiBorderColor
 
+label.form-group
+  width: 100%
+
+  &>span.select2
+    display: block
+    width: 100% !important
+
+    span.select2-selection
+      min-height: 34px
+
+      span.select2-selection__rendered
+          height: 34px
+          line-height: 34px
+
+      span.select2-selection__arrow
+          height: 34px
+
 .center-table
   display: table
   margin-left: auto
@@ -38,4 +55,3 @@ html hr
 
     .modal-header, .modal-footer
       border-color: $uiBorderColor
-
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
index 435b795a4..03b89862e 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
@@ -1,33 +1,19 @@
 <template name="serverInformationForm">
-    <form class="server-information-form">
-        <input type="hidden" name="_id">
+    {{#form class='server-information-form' schema=instance.currentSchema}}
+        {{>inputHidden key='_id'}}
         <div class="row">
             <div class="col-lg-6">
-                <div class="form-group">
-                    <label class="wrapper">
-                        <strong>Server Name</strong>
-                        <input type="text" name="name" class="form-control">
-                    </label>
-                </div>
+                {{>inputText labelClass='form-group' key='name'}}
             </div>
             <div class="col-lg-6">
-                <div class="form-group">
-                    <label class="wrapper">
-                        <strong>Server Type</strong>
-                        <select name="type" class="form-control js-server-type">
-                            <option>Select</option>
-                            <option value="dicomWeb">DICOM Web</option>
-                            <option value="dimse">DIMSE</option>
-                        </select>
-                    </label>
-                </div>
+                {{>inputSelect labelClass='form-group' key='type' hideSearch=true}}
             </div>
         </div>
         <hr>
-        {{#if eq this.serverType.get "dicomWeb"}}
+        {{#if eq this.serverType.get 'dicomWeb'}}
           {{>serverInformationDicomWeb this}}
         {{/if}}
-        {{#if eq this.serverType.get "dimse"}}
+        {{#if eq this.serverType.get 'dimse'}}
           {{>serverInformationDimse this}}
         {{/if}}
         {{#if this.serverType.get}}
@@ -35,5 +21,5 @@
                 <input type="submit" class="btn btn-primary" value="Save">
             </div>
         {{/if}}
-    </form>
+    {{/form}}
 </template>
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
index 69a8c1465..4f2a36d69 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
@@ -1,9 +1,27 @@
-Template.serverInformationForm.onRendered(function() {
-    var instance = Template.instance();
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { DICOMWebServer as dicomSchema } from 'meteor/worklist/both/schema';
+import { DIMSEServer as dimseSchema } from 'meteor/worklist/both/schema';
+
+Template.serverInformationForm.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.currentSchema = new ReactiveVar(dicomSchema);
+});
+
+Template.serverInformationForm.onRendered(() => {
+    const instance = Template.instance();
 
     instance.data.$form = instance.$('form');
-    instance.autorun(function() {
-        var mode = instance.data.mode.get();
+
+    instance.autorun(() => {
+        const typeComponent = instance.$('[data-key=type]').data('component');
+        typeComponent.changeObserver.depend();
+        instance.data.serverType.set(typeComponent.value());
+    });
+
+    instance.autorun(() => {
+        const mode = instance.data.mode.get();
         if (mode === 'edit') {
             var data = instance.data.currentItem.get();
             FormUtils.setFormData(instance.data.$form, data);
@@ -12,11 +30,7 @@ Template.serverInformationForm.onRendered(function() {
 });
 
 Template.serverInformationForm.events({
-    'change .js-server-type': function(event, instance) {
-        var value = $(event.currentTarget).val();
-        instance.data.serverType.set(value);
-    },
-    submit: function(event, instance) {
+    submit(event, instance) {
         event.preventDefault();
         var formData = FormUtils.getFormData(instance.data.$form);
         Meteor.call('serverSave', formData, function(error) {
diff --git a/Packages/ohif-core/both/index.js b/Packages/ohif-core/both/index.js
new file mode 100644
index 000000000..94b130b86
--- /dev/null
+++ b/Packages/ohif-core/both/index.js
@@ -0,0 +1 @@
+import './schema.js';
diff --git a/Packages/ohif-core/both/schema.js b/Packages/ohif-core/both/schema.js
new file mode 100644
index 000000000..516330e6a
--- /dev/null
+++ b/Packages/ohif-core/both/schema.js
@@ -0,0 +1,6 @@
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
+
+SimpleSchema.extendOptions({
+    valuesLabels: Match.Optional([String]),
+    emptyOption: Match.Optional(Boolean)
+});
diff --git a/Packages/ohif-core/client/components/base/mixins/form.js b/Packages/ohif-core/client/components/base/mixins/form.js
index 2e04a6f50..345c0891a 100644
--- a/Packages/ohif-core/client/components/base/mixins/form.js
+++ b/Packages/ohif-core/client/components/base/mixins/form.js
@@ -1,5 +1,6 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
 
 /*
  * form: controls a form and its registered inputs
@@ -11,9 +12,19 @@ OHIF.mixins.form = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
-            // Define the form's data schema
-            const schema = instance.data.schema;
-            component.schema = schema && schema.newContext();
+            // Run this computation every time the schema property is changed
+            instance.autorun(() => {
+                let schema;
+
+                // Check if the schema is reactive
+                if (instance.data.schema instanceof ReactiveVar) {
+                    // Register a dependency on schema property
+                    schema = instance.data.schema.get();
+                }
+
+                // Set the form's data schema
+                component.schema = schema && schema.newContext();
+            });
 
             // Check if the form data is valid in its schema
             component.validate = () => {
diff --git a/Packages/ohif-core/client/components/base/mixins/schemaData.js b/Packages/ohif-core/client/components/base/mixins/schemaData.js
index bb6cacc5b..6bddc2012 100644
--- a/Packages/ohif-core/client/components/base/mixins/schemaData.js
+++ b/Packages/ohif-core/client/components/base/mixins/schemaData.js
@@ -17,6 +17,11 @@ const getCurrentSchema = (parentComponent, key) => {
     // Get the current schema data using component's key
     const currentSchema = _.clone(schema._schema[key]);
 
+    // Stop here if no schema was found for the given key
+    if (!currentSchema) {
+        return;
+    }
+
     // Merge the sub-schema properties if it's an array
     if (Array.isArray(currentSchema.type())) {
         _.extend(currentSchema, schema._schema[key + '.$']);
@@ -53,6 +58,11 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
                 data.label = new ReactiveVar(currentSchema.label);
             }
 
+            // Set the emptyOption data attribute if given on schema
+            if (currentSchema.emptyOption) {
+                data.emptyOption = currentSchema.emptyOption;
+            }
+
             // Fill the items if it's an array schema
             if (!data.items && Array.isArray(currentSchema.allowedValues)) {
                 // Initialize the items array
diff --git a/Packages/ohif-core/client/components/base/mixins/select.js b/Packages/ohif-core/client/components/base/mixins/select.js
index 17fe6d95f..966eaaf6e 100644
--- a/Packages/ohif-core/client/components/base/mixins/select.js
+++ b/Packages/ohif-core/client/components/base/mixins/select.js
@@ -7,6 +7,43 @@ import { Template } from 'meteor/templating';
 OHIF.mixins.select = new OHIF.Mixin({
     dependencies: 'formItem',
     composition: {
+
+        onCreated() {
+            const instance = Template.instance();
+
+            // Check if this select will include an empty option
+            if (instance.data.emptyOption) {
+                // Get the option items
+                let items = instance.data.items;
+
+                // Check if the items are reactive and get them if true
+                const isReactive = items instanceof ReactiveVar;
+                if (isReactive) {
+                    items = items.get();
+                }
+
+                // Check if there is already an empty option on items list
+                const query = {
+                    value: ''
+                };
+                if (!_.findWhere(items, query)) {
+                    // Clone the current items
+                    const newItems = _.clone(items);
+                    newItems.unshift({
+                        label: 'Select',
+                        value: ''
+                    });
+
+                    // Set the new items list including the empty option
+                    if (isReactive) {
+                        instance.data.items.set(newItems);
+                    } else {
+                        instance.data.items = newItems;
+                    }
+                }
+            }
+        },
+
         onRendered() {
             const instance = Template.instance();
             const component = instance.component;
@@ -14,5 +51,6 @@ OHIF.mixins.select = new OHIF.Mixin({
             // Set the element to be controlled
             component.$element = instance.$('select:first');
         }
+
     }
 });
diff --git a/Packages/ohif-core/client/components/base/templates/input.html b/Packages/ohif-core/client/components/base/templates/input.html
index 847826cef..2df32a319 100644
--- a/Packages/ohif-core/client/components/base/templates/input.html
+++ b/Packages/ohif-core/client/components/base/templates/input.html
@@ -6,6 +6,7 @@
         name="{{this.name}}"
         value="{{reactive this.value}}"
         placeholder="{{this.placeholder}}"
+        data-key="{{this.key}}"
         {{this.tagAttributes}}
     >
     {{>UI.contentBlock}}
diff --git a/Packages/ohif-core/client/components/base/templates/select.html b/Packages/ohif-core/client/components/base/templates/select.html
index 99536a06a..fa1535a33 100644
--- a/Packages/ohif-core/client/components/base/templates/select.html
+++ b/Packages/ohif-core/client/components/base/templates/select.html
@@ -4,6 +4,7 @@
         class="{{this.class}}"
         name="{{this.name}}"
         multiple="{{#if this.multiple}}multiple{{/if}}"
+        data-key="{{this.key}}"
         {{this.tagAttributes}}
     >
         {{>UI.contentBlock}}
diff --git a/Packages/ohif-core/client/components/bootstrap/index.js b/Packages/ohif-core/client/components/bootstrap/index.js
index 6bc4a245e..b8aa81556 100644
--- a/Packages/ohif-core/client/components/bootstrap/index.js
+++ b/Packages/ohif-core/client/components/bootstrap/index.js
@@ -1,6 +1,7 @@
 import './form/form.html';
 import './form/group.html';
 
+import './input/hidden.html';
 import './input/groupRadio.html';
 import './input/radio.html';
 import './input/select.html';
diff --git a/Packages/ohif-core/client/components/bootstrap/input/hidden.html b/Packages/ohif-core/client/components/bootstrap/input/hidden.html
new file mode 100644
index 000000000..01ec712ea
--- /dev/null
+++ b/Packages/ohif-core/client/components/bootstrap/input/hidden.html
@@ -0,0 +1,7 @@
+<template name="inputHidden">
+    {{>baseComponent (extend this
+        base='baseInput'
+        type='hidden'
+        mixins=(concat 'input ' this.mixins)
+    )}}
+</template>
diff --git a/Packages/ohif-core/package.js b/Packages/ohif-core/package.js
index 2f08ef057..9969718ed 100644
--- a/Packages/ohif-core/package.js
+++ b/Packages/ohif-core/package.js
@@ -34,4 +34,7 @@ Package.onUse(function(api) {
     // Server imports and methods
     api.addFiles('server/index.js', 'server');
 
+    // Client and server imports
+    api.addFiles('both/index.js', ['client', 'server']);
+
 });
diff --git a/Packages/worklist/both/schema.js b/Packages/worklist/both/schema.js
index 57bb71405..c64e4da0c 100644
--- a/Packages/worklist/both/schema.js
+++ b/Packages/worklist/both/schema.js
@@ -26,9 +26,17 @@ export const DICOMWebRequestOptions = new SimpleSchema({
 export const DICOMWebServer = new SimpleSchema({
     name: {
         type: String,
-        label: 'Name',
+        label: 'Server Name',
         max: 100
     },
+    type: {
+        type: String,
+        label: 'Server Type',
+        allowedValues: ['dicomWeb', 'dimse'],
+        valuesLabels: ['DICOM Web', 'DIMSE'],
+        optional: true,
+        emptyOption: true
+    },
     wadoUriRoot: {
         type: String,
         label: 'WADO URI root',

From 4e70e62b7bf20f0fd6ebe70253ccecde21d12bcb Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Mon, 29 Aug 2016 18:22:40 -0300
Subject: [PATCH 19/41] LT-67: Migrating DICOMWeb form inputs to components

---
 .../serverInformationDicomWeb.html            | 30 +++++++-------
 .../serverInformationForm.html                |  3 +-
 .../serverInformationForm.js                  | 24 +++++++++++-
 Packages/ohif-core/both/schema.js             |  3 +-
 .../client/components/base/mixins/select.js   | 38 ------------------
 .../client/components/base/mixins/select2.js  | 37 ++++++++++++++++++
 Packages/worklist/both/schema.js              | 39 ++++++++++---------
 7 files changed, 97 insertions(+), 77 deletions(-)

diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
index 5efd42467..8090f4511 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
@@ -1,28 +1,28 @@
 <template name="serverInformationDicomWeb">
     <div class="row">
-        {{>serverInformationFormField name="wadoUriRoot" label="WADO URI root"}}
-        {{>serverInformationFormField name="wadoUriRootNOTE" label="WADO URI root note"}}
-        {{>serverInformationFormField name="wadoRoot" label="WADO root"}}
         <div class="col-lg-6">
-            <div class="form-group">
-                <label class="wrapper">
-                    <strong>Image rendering</strong>
-                    <select name="imageRendering" class="form-control">
-                        <option>Select</option>
-                        <option value="wadouri">WADO URI</option>
-                        <option value="orthanc">ORTHANC</option>
-                    </select>
-                </label>
-            </div>
+            {{>inputText labelClass='form-group' key='wadoUriRoot'}}
+        </div>
+        <div class="col-lg-6">
+            {{>inputText labelClass='form-group' key='wadoUriRootNOTE'}}
+        </div>
+        <div class="col-lg-6">
+            {{>inputText labelClass='form-group' key='wadoRoot'}}
+        </div>
+        <div class="col-lg-6">
+            {{>inputSelect labelClass='form-group' key='imageRendering' hideSearch=true
+                options=(clone placeholder='Select an option...')}}
+        </div>
+        <div class="col-lg-6">
+            {{>inputText labelClass='form-group' key='qidoRoot'}}
         </div>
-        {{>serverInformationFormField name="qidoRoot" label="QIDO root"}}
         <div class="col-lg-6">
             <strong>QIDO options</strong>
             <div class="form-group">
                 <div class="form-control">
                     <div class="checkbox">
                         <label>
-                            <input type="checkbox" name="qidoSupportsIncludeField">
+                            <input type="checkbox" name="">
                             <span>QIDO supports including fields</span>
                         </label>
                     </div>
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
index 03b89862e..eda51afe9 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
@@ -6,7 +6,8 @@
                 {{>inputText labelClass='form-group' key='name'}}
             </div>
             <div class="col-lg-6">
-                {{>inputSelect labelClass='form-group' key='type' hideSearch=true}}
+                {{>inputSelect labelClass='form-group' key='type' hideSearch=true
+                    options=(clone placeholder='Choose a server type...')}}
             </div>
         </div>
         <hr>
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
index 4f2a36d69..fda1e38bf 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
@@ -13,18 +13,38 @@ Template.serverInformationForm.onRendered(() => {
     const instance = Template.instance();
 
     instance.data.$form = instance.$('form');
+    instance.data.form = instance.data.$form.data('component');
 
+    // Handle the server type
     instance.autorun(() => {
+        // Get the server type component
         const typeComponent = instance.$('[data-key=type]').data('component');
+
+        // Run this computation every time the user change the server type
         typeComponent.changeObserver.depend();
-        instance.data.serverType.set(typeComponent.value());
+
+        // Get the current server type value
+        const type = typeComponent.value();
+
+        // Set the serverType reactive value
+        instance.data.serverType.set(type);
+
+        // Change the schema based on the selected server type
+        if (type === 'dimse') {
+            instance.currentSchema.set(dimseSchema);
+        } else {
+            instance.currentSchema.set(dicomSchema);
+        }
     });
 
+    // Handle the form mode (edit or add)
     instance.autorun(() => {
         const mode = instance.data.mode.get();
+
+        // Check if it is on edit mode and load the saved data
         if (mode === 'edit') {
             var data = instance.data.currentItem.get();
-            FormUtils.setFormData(instance.data.$form, data);
+            instance.data.form.value(data);
         }
     });
 });
diff --git a/Packages/ohif-core/both/schema.js b/Packages/ohif-core/both/schema.js
index 516330e6a..6c2b354b7 100644
--- a/Packages/ohif-core/both/schema.js
+++ b/Packages/ohif-core/both/schema.js
@@ -1,6 +1,5 @@
 import { SimpleSchema } from 'meteor/aldeed:simple-schema';
 
 SimpleSchema.extendOptions({
-    valuesLabels: Match.Optional([String]),
-    emptyOption: Match.Optional(Boolean)
+    valuesLabels: Match.Optional([String])
 });
diff --git a/Packages/ohif-core/client/components/base/mixins/select.js b/Packages/ohif-core/client/components/base/mixins/select.js
index 966eaaf6e..17fe6d95f 100644
--- a/Packages/ohif-core/client/components/base/mixins/select.js
+++ b/Packages/ohif-core/client/components/base/mixins/select.js
@@ -7,43 +7,6 @@ import { Template } from 'meteor/templating';
 OHIF.mixins.select = new OHIF.Mixin({
     dependencies: 'formItem',
     composition: {
-
-        onCreated() {
-            const instance = Template.instance();
-
-            // Check if this select will include an empty option
-            if (instance.data.emptyOption) {
-                // Get the option items
-                let items = instance.data.items;
-
-                // Check if the items are reactive and get them if true
-                const isReactive = items instanceof ReactiveVar;
-                if (isReactive) {
-                    items = items.get();
-                }
-
-                // Check if there is already an empty option on items list
-                const query = {
-                    value: ''
-                };
-                if (!_.findWhere(items, query)) {
-                    // Clone the current items
-                    const newItems = _.clone(items);
-                    newItems.unshift({
-                        label: 'Select',
-                        value: ''
-                    });
-
-                    // Set the new items list including the empty option
-                    if (isReactive) {
-                        instance.data.items.set(newItems);
-                    } else {
-                        instance.data.items = newItems;
-                    }
-                }
-            }
-        },
-
         onRendered() {
             const instance = Template.instance();
             const component = instance.component;
@@ -51,6 +14,5 @@ OHIF.mixins.select = new OHIF.Mixin({
             // Set the element to be controlled
             component.$element = instance.$('select:first');
         }
-
     }
 });
diff --git a/Packages/ohif-core/client/components/base/mixins/select2.js b/Packages/ohif-core/client/components/base/mixins/select2.js
index 7fab646d1..5630548f4 100644
--- a/Packages/ohif-core/client/components/base/mixins/select2.js
+++ b/Packages/ohif-core/client/components/base/mixins/select2.js
@@ -8,6 +8,43 @@ import { $ } from 'meteor/jquery';
 OHIF.mixins.select2 = new OHIF.Mixin({
     dependencies: 'select',
     composition: {
+        onCreated() {
+            const instance = Template.instance();
+
+            // Check if this select will include a placeholder
+            const placeholder = instance.data.options && instance.data.options.placeholder;
+            if (placeholder) {
+                // Get the option items
+                let items = instance.data.items;
+
+                // Check if the items are reactive and get them if true
+                const isReactive = items instanceof ReactiveVar;
+                if (isReactive) {
+                    items = items.get();
+                }
+
+                // Check if there is already an empty option on items list
+                const query = {
+                    value: ''
+                };
+                if (!_.findWhere(items, query)) {
+                    // Clone the current items
+                    const newItems = _.clone(items) || [];
+                    newItems.unshift({
+                        label: placeholder,
+                        value: ''
+                    });
+
+                    // Set the new items list including the empty option
+                    if (isReactive) {
+                        instance.data.items.set(newItems);
+                    } else {
+                        instance.data.items = newItems;
+                    }
+                }
+            }
+        },
+
         onRendered() {
             const instance = Template.instance();
             const component = instance.component;
diff --git a/Packages/worklist/both/schema.js b/Packages/worklist/both/schema.js
index c64e4da0c..fd2153ec2 100644
--- a/Packages/worklist/both/schema.js
+++ b/Packages/worklist/both/schema.js
@@ -1,5 +1,19 @@
 import { SimpleSchema } from 'meteor/aldeed:simple-schema';
 
+const serverNameDefinitions = {
+    type: String,
+    label: 'Server Name',
+    max: 100
+};
+
+const serverTypeDefinitions = {
+    type: String,
+    label: 'Server Type',
+    allowedValues: ['dicomWeb', 'dimse'],
+    valuesLabels: ['DICOM Web', 'DIMSE'],
+    optional: true
+};
+
 export const DICOMWebRequestOptions = new SimpleSchema({
     auth: {
         type: String,
@@ -24,19 +38,8 @@ export const DICOMWebRequestOptions = new SimpleSchema({
 });
 
 export const DICOMWebServer = new SimpleSchema({
-    name: {
-        type: String,
-        label: 'Server Name',
-        max: 100
-    },
-    type: {
-        type: String,
-        label: 'Server Type',
-        allowedValues: ['dicomWeb', 'dimse'],
-        valuesLabels: ['DICOM Web', 'DIMSE'],
-        optional: true,
-        emptyOption: true
-    },
+    name: serverNameDefinitions,
+    type: serverTypeDefinitions,
     wadoUriRoot: {
         type: String,
         label: 'WADO URI root',
@@ -56,7 +59,8 @@ export const DICOMWebServer = new SimpleSchema({
     imageRendering: {
         type: String,
         label: 'Image rendering',
-        defaultValue: 'wadouri'
+        allowedValues: ['wadouri', 'orthanc'],
+        valuesLabels: ['WADO URI', 'ORTHANC']
     },
     qidoRoot: {
         type: String,
@@ -112,11 +116,8 @@ export const DIMSEPeer = new SimpleSchema({
 });
 
 export const DIMSEServer = new SimpleSchema({
-    name: {
-        type: String,
-        label: 'Server Name',
-        max: 100
-    },
+    name: serverNameDefinitions,
+    type: serverTypeDefinitions,
     peers: {
         type: [ DIMSEPeer ],
         label: 'DIMSE Peers',

From 18516b47f09a2ce0f9b70a2279f140f721bb63c9 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Tue, 30 Aug 2016 10:37:54 -0300
Subject: [PATCH 20/41] LT-67: Creating checkbox component

---
 .../serverInformationDicomWeb.html            |  5 +---
 .../ohif-core/client/components/base/index.js |  1 +
 .../client/components/base/mixins/checkbox.js | 26 +++++++++++++++++++
 .../client/components/bootstrap/index.js      |  1 +
 .../components/bootstrap/input/checkbox.html  | 15 +++++++++++
 .../components/bootstrap/input/radio.html     |  2 +-
 6 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 Packages/ohif-core/client/components/base/mixins/checkbox.js
 create mode 100644 Packages/ohif-core/client/components/bootstrap/input/checkbox.html

diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
index 8090f4511..95e405c27 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
@@ -21,10 +21,7 @@
             <div class="form-group">
                 <div class="form-control">
                     <div class="checkbox">
-                        <label>
-                            <input type="checkbox" name="">
-                            <span>QIDO supports including fields</span>
-                        </label>
+                        {{>inputCheckbox key='qidoSupportsIncludeField'}}
                     </div>
                 </div>
             </div>
diff --git a/Packages/ohif-core/client/components/base/index.js b/Packages/ohif-core/client/components/base/index.js
index bdc4cb34a..bc57de0ae 100644
--- a/Packages/ohif-core/client/components/base/index.js
+++ b/Packages/ohif-core/client/components/base/index.js
@@ -10,6 +10,7 @@ import './mixins/formItem.js';
 import './mixins/group.js';
 import './mixins/groupRadio.js';
 import './mixins/input.js';
+import './mixins/checkbox.js';
 import './mixins/schemaData.js';
 import './mixins/select.js';
 import './mixins/select2.js';
diff --git a/Packages/ohif-core/client/components/base/mixins/checkbox.js b/Packages/ohif-core/client/components/base/mixins/checkbox.js
new file mode 100644
index 000000000..20071c4e0
--- /dev/null
+++ b/Packages/ohif-core/client/components/base/mixins/checkbox.js
@@ -0,0 +1,26 @@
+import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
+import { _ } from 'meteor/underscore';
+
+/*
+ * inputCheckbox: controls a checkbox input
+ */
+OHIF.mixins.checkbox = new OHIF.Mixin({
+    dependencies: 'input',
+    composition: {
+        onCreated() {
+            const instance = Template.instance();
+            const component = instance.component;
+
+            // Get or set the checked state using jQuery's prop method
+            component.value = value => {
+                const isGet = _.isUndefined(value);
+                if (isGet) {
+                    return component.$element.is(':checked');
+                }
+
+                component.$element.prop('checked', value);
+            };
+        }
+    }
+});
diff --git a/Packages/ohif-core/client/components/bootstrap/index.js b/Packages/ohif-core/client/components/bootstrap/index.js
index b8aa81556..2baa5508b 100644
--- a/Packages/ohif-core/client/components/bootstrap/index.js
+++ b/Packages/ohif-core/client/components/bootstrap/index.js
@@ -1,6 +1,7 @@
 import './form/form.html';
 import './form/group.html';
 
+import './input/checkbox.html';
 import './input/hidden.html';
 import './input/groupRadio.html';
 import './input/radio.html';
diff --git a/Packages/ohif-core/client/components/bootstrap/input/checkbox.html b/Packages/ohif-core/client/components/bootstrap/input/checkbox.html
new file mode 100644
index 000000000..038312206
--- /dev/null
+++ b/Packages/ohif-core/client/components/bootstrap/input/checkbox.html
@@ -0,0 +1,15 @@
+<template name="inputCheckbox">
+    {{#baseComponent (extend this
+        base='baseInput'
+        type='checkbox'
+        mixins=(concat 'checkbox ' this.mixins)
+        labelAfter=(valueIf (isUndefined this.labelAfter) true this.labelAfter)
+        labelClass=(concat 'checkboxLabel ' this.labelClass)
+        wrappers=(concat ''
+            (valueIf reactive this.label 'wrapperLabel ' '')
+            this.wrappers
+        )
+    )}}
+        {{>UI.contentBlock}}
+    {{/baseComponent}}
+</template>
diff --git a/Packages/ohif-core/client/components/bootstrap/input/radio.html b/Packages/ohif-core/client/components/bootstrap/input/radio.html
index 4e72172df..d2377667e 100644
--- a/Packages/ohif-core/client/components/bootstrap/input/radio.html
+++ b/Packages/ohif-core/client/components/bootstrap/input/radio.html
@@ -4,7 +4,7 @@
         type='radio'
         mixins=(concat 'input ' this.mixins)
         labelAfter=(valueIf (isUndefined this.labelAfter) true this.labelAfter)
-        labelClass=(concat 'checkboxLabel ' this.labelClass)
+        labelClass=(concat 'radioLabel ' this.labelClass)
         wrappers=(concat ''
             (valueIf reactive this.label 'wrapperLabel ' '')
             this.wrappers

From 9e2ab2d21a40508bed504f9a2ce799e458934a4d Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Tue, 30 Aug 2016 11:03:57 -0300
Subject: [PATCH 21/41] LT-67: Migrating the remaining DicomWEB inputs to
 components

---
 .../serverInformationDicomWeb.html            | 19 ++++++-------------
 .../serverInformationDicomWeb.js              |  6 +++---
 .../serverInformationForm.js                  |  7 ++++---
 .../client/components/base/mixins/form.js     | 18 ++++++++++++++++++
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
index 95e405c27..478aa1b0b 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
@@ -30,28 +30,21 @@
     <hr>
     <h4>Request options</h4>
     <div class="row">
-        {{>serverInformationFormField name="requestOptions.auth" label="Authentication"}}
+        <div class="col-lg-6">
+            {{>inputText labelClass='form-group' key='requestOptions.auth'}}
+        </div>
         <div class="col-lg-6">
             <strong>Logging options</strong>
             <div class="form-group">
                 <div class="form-control clearfix">
                     <div class="checkbox pull-left">
-                        <label>
-                            <input type="checkbox" name="requestOptions.logRequests">
-                            <span>Requests</span>
-                        </label>
+                        {{>inputCheckbox key='requestOptions.logRequests'}}
                     </div>
                     <div class="checkbox pull-left">
-                        <label>
-                            <input type="checkbox" name="requestOptions.logResponses">
-                            <span>Responses</span>
-                        </label>
+                        {{>inputCheckbox key='requestOptions.logResponses'}}
                     </div>
                     <div class="checkbox pull-left">
-                        <label>
-                            <input type="checkbox" name="requestOptions.logTiming">
-                            <span>Timing</span>
-                        </label>
+                        {{>inputCheckbox key='requestOptions.logTiming'}}
                     </div>
                 </div>
             </div>
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.js b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.js
index d067f8f0f..270811222 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.js
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.js
@@ -1,10 +1,10 @@
 Template.serverInformationDicomWeb.onRendered(function() {
     var instance = Template.instance();
     instance.autorun(function() {
-        var mode = instance.data.mode.get();
+        const mode = instance.data.mode.get();
         if (mode === 'edit') {
-            var data = instance.data.currentItem.get();
-            FormUtils.setFormData(instance.data.$form, data);
+            const data = instance.data.currentItem.get();
+            instance.data.form.value(data);
         }
     });
 });
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
index fda1e38bf..699c2d847 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
@@ -1,5 +1,6 @@
 import { Template } from 'meteor/templating';
 import { ReactiveVar } from 'meteor/reactive-var';
+import { Tracker } from 'meteor/tracker';
 import { DICOMWebServer as dicomSchema } from 'meteor/worklist/both/schema';
 import { DIMSEServer as dimseSchema } from 'meteor/worklist/both/schema';
 
@@ -12,7 +13,7 @@ Template.serverInformationForm.onCreated(() => {
 Template.serverInformationForm.onRendered(() => {
     const instance = Template.instance();
 
-    instance.data.$form = instance.$('form');
+    instance.data.$form = instance.$('form:first');
     instance.data.form = instance.data.$form.data('component');
 
     // Handle the server type
@@ -21,7 +22,7 @@ Template.serverInformationForm.onRendered(() => {
         const typeComponent = instance.$('[data-key=type]').data('component');
 
         // Run this computation every time the user change the server type
-        typeComponent.changeObserver.depend();
+        typeComponent.depend();
 
         // Get the current server type value
         const type = typeComponent.value();
@@ -43,7 +44,7 @@ Template.serverInformationForm.onRendered(() => {
 
         // Check if it is on edit mode and load the saved data
         if (mode === 'edit') {
-            var data = instance.data.currentItem.get();
+            const data = instance.data.currentItem.get();
             instance.data.form.value(data);
         }
     });
diff --git a/Packages/ohif-core/client/components/base/mixins/form.js b/Packages/ohif-core/client/components/base/mixins/form.js
index 345c0891a..cc2061faf 100644
--- a/Packages/ohif-core/client/components/base/mixins/form.js
+++ b/Packages/ohif-core/client/components/base/mixins/form.js
@@ -26,6 +26,24 @@ OHIF.mixins.form = new OHIF.Mixin({
                 component.schema = schema && schema.newContext();
             });
 
+            // Get a registered item in form by its key
+            component.item = itemKey => {
+                let found;
+
+                // Iterate over each registered form item
+                component.registeredItems.forEach(child => {
+                    const key = child.templateInstance.data.key;
+
+                    // Change the found item if current key is the same as given
+                    if (key === itemKey) {
+                        found = child;
+                    }
+                });
+
+                // Return the found item or undefined if it was not found
+                return found;
+            };
+
             // Check if the form data is valid in its schema
             component.validate = () => {
                 // Assume validation result as true

From 2a119a546411297b3f7376df2c5a84f00affe874 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Tue, 30 Aug 2016 14:04:32 -0300
Subject: [PATCH 22/41] LT-67: Refactoring schema validation

---
 .../serverInformationDicomWeb.html            |  12 +-
 .../serverInformationForm.js                  |   2 +-
 Packages/lesiontracker/client/utils/form.js   | 105 ------------------
 Packages/lesiontracker/package.js             |   3 -
 .../client/components/base/mixins/form.js     |  59 +---------
 .../client/components/base/mixins/formItem.js |  17 ++-
 .../client/components/base/mixins/group.js    |  56 ++++++++++
 .../components/base/mixins/schemaData.js      |  20 +++-
 Packages/ohif-core/client/lib/blaze.js        |   2 +-
 Packages/ohif-core/client/lib/index.js        |   1 +
 Packages/ohif-core/client/lib/object.js       |  50 +++++++++
 .../client/compatibility/dialogPolyfill.js    |   5 +-
 12 files changed, 156 insertions(+), 176 deletions(-)
 delete mode 100644 Packages/lesiontracker/client/utils/form.js
 create mode 100644 Packages/ohif-core/client/lib/object.js

diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
index 478aa1b0b..49db1b73c 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
@@ -29,25 +29,25 @@
     </div>
     <hr>
     <h4>Request options</h4>
-    <div class="row">
+    {{#group class='row' key='requestOptions'}}
         <div class="col-lg-6">
-            {{>inputText labelClass='form-group' key='requestOptions.auth'}}
+            {{>inputText labelClass='form-group' key='auth'}}
         </div>
         <div class="col-lg-6">
             <strong>Logging options</strong>
             <div class="form-group">
                 <div class="form-control clearfix">
                     <div class="checkbox pull-left">
-                        {{>inputCheckbox key='requestOptions.logRequests'}}
+                        {{>inputCheckbox key='logRequests'}}
                     </div>
                     <div class="checkbox pull-left">
-                        {{>inputCheckbox key='requestOptions.logResponses'}}
+                        {{>inputCheckbox key='logResponses'}}
                     </div>
                     <div class="checkbox pull-left">
-                        {{>inputCheckbox key='requestOptions.logTiming'}}
+                        {{>inputCheckbox key='logTiming'}}
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    {{/group}}
 </template>
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
index 699c2d847..41cfd26c6 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
@@ -53,7 +53,7 @@ Template.serverInformationForm.onRendered(() => {
 Template.serverInformationForm.events({
     submit(event, instance) {
         event.preventDefault();
-        var formData = FormUtils.getFormData(instance.data.$form);
+        var formData = instance.data.form.value();
         Meteor.call('serverSave', formData, function(error) {
             if (error) {
                 // TODO: check for errors: not-authorized, data-write
diff --git a/Packages/lesiontracker/client/utils/form.js b/Packages/lesiontracker/client/utils/form.js
deleted file mode 100644
index 80a790594..000000000
--- a/Packages/lesiontracker/client/utils/form.js
+++ /dev/null
@@ -1,105 +0,0 @@
-class Form {
-
-    // Identify the element's type and get its value
-    static getElementValue($element) {
-        var type = $element.attr('type');
-        var value;
-        switch (type) {
-            case 'checkbox':
-                value = $element.is(':checked');
-                break;
-            default:
-                value = $element.val();
-        }
-        return value;
-    };
-
-    // Identify the element's type and get its value
-    static setElementValue($element, value) {
-        if (!$element.length) {
-            return;
-        }
-
-        var type = $element.attr('type');
-        switch (type) {
-            case 'checkbox':
-                $element.prop('checked', !!value);
-                break;
-            default:
-                $element.val(value);
-        }
-        $element.trigger('change');
-    };
-
-    // Transforms a shallow object with keys separated by "." into a nested object
-    static getNestedObject(shallowObject) {
-        var nestedObject = {};
-        for (var key in shallowObject) {
-            var value = shallowObject[key];
-            var propertyArray = key.split('.');
-            var currentObject = nestedObject;
-            while (propertyArray.length) {
-                var currentProperty = propertyArray.shift();
-                if (!propertyArray.length) {
-                    currentObject[currentProperty] = value;
-                } else {
-                    if (!currentObject[currentProperty]) {
-                        currentObject[currentProperty] = {};
-                    }
-
-                    currentObject = currentObject[currentProperty];
-                }
-            }
-        }
-
-        return nestedObject;
-    };
-
-    // Transforms a nested object into a shallowObject merging its keys with "." character
-    static getShallowObject(nestedObject) {
-        var shallowObject = {};
-        var putValues = function(baseKey, nestedObject, resultObject) {
-            for (var key in nestedObject) {
-                var currentKey = baseKey ? baseKey + '.' + key : key;
-                var currentValue = nestedObject[key];
-                if (typeof currentValue === 'object') {
-                    if (currentValue instanceof Array) {
-                        currentKey += '[]';
-                    }
-
-                    putValues(currentKey, currentValue, resultObject);
-                } else {
-                    resultObject[currentKey] = currentValue;
-                }
-            }
-        };
-
-        putValues('', nestedObject, shallowObject);
-        return shallowObject;
-    }
-
-    // Gets the nested data for the given form
-    static getFormData($form) {
-        var data = {};
-        $form.find(':input[name]').each((index, element) => {
-            var $element = $(element);
-            var value = this.getElementValue($element);
-            var name = $element.attr('name');
-            data[name] = value;
-        });
-        return this.getNestedObject(data);
-    }
-
-    // Sets the nested data in the given form
-    static setFormData($form, data) {
-        var shallowData = this.getShallowObject(data);
-        for (var key in shallowData) {
-            var value = shallowData[key];
-            var $element = $form.find(':input[name="' + key + '"]');
-            this.setElementValue($element, value);
-        }
-    }
-
-}
-
-FormUtils = Form;
diff --git a/Packages/lesiontracker/package.js b/Packages/lesiontracker/package.js
index 5461f5700..8fc480663 100644
--- a/Packages/lesiontracker/package.js
+++ b/Packages/lesiontracker/package.js
@@ -58,9 +58,6 @@ Package.onUse(function(api) {
 
     api.addFiles('client/tools.js', 'client');
 
-    // Utility classes
-    api.addFiles('client/utils/form.js', 'client');
-
     // UI Components
     api.addFiles('client/components/viewer/viewer.html', 'client');
     api.addFiles('client/components/viewer/viewer.styl', 'client');
diff --git a/Packages/ohif-core/client/components/base/mixins/form.js b/Packages/ohif-core/client/components/base/mixins/form.js
index cc2061faf..28d5eb64c 100644
--- a/Packages/ohif-core/client/components/base/mixins/form.js
+++ b/Packages/ohif-core/client/components/base/mixins/form.js
@@ -12,62 +12,13 @@ OHIF.mixins.form = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
-            // Run this computation every time the schema property is changed
-            instance.autorun(() => {
-                let schema;
+            // Set the form identifier flag
+            component.isForm = true;
 
-                // Check if the schema is reactive
-                if (instance.data.schema instanceof ReactiveVar) {
-                    // Register a dependency on schema property
-                    schema = instance.data.schema.get();
-                }
-
-                // Set the form's data schema
-                component.schema = schema && schema.newContext();
-            });
-
-            // Get a registered item in form by its key
-            component.item = itemKey => {
-                let found;
-
-                // Iterate over each registered form item
-                component.registeredItems.forEach(child => {
-                    const key = child.templateInstance.data.key;
-
-                    // Change the found item if current key is the same as given
-                    if (key === itemKey) {
-                        found = child;
-                    }
-                });
-
-                // Return the found item or undefined if it was not found
-                return found;
-            };
-
-            // Check if the form data is valid in its schema
-            component.validate = () => {
-                // Assume validation result as true
-                let result = true;
-
-                // Return true if there's no data schema defined
-                if (!component.schema) {
-                    return result;
-                }
-
-                // Iterate over each registered form item and validate it
-                component.registeredItems.forEach(child => {
-                    const key = child.templateInstance.data.key;
-
-                    // Change result to false if any form item is invalid
-                    if (key && !child.validate()) {
-                        result = false;
-                    }
-                });
-
-                // Return the validation result
-                return result;
-            };
+            // Reset the pathKey
+            instance.data.pathKey = '';
         },
+
         onRendered() {
             const instance = Template.instance();
             const component = instance.component;
diff --git a/Packages/ohif-core/client/components/base/mixins/formItem.js b/Packages/ohif-core/client/components/base/mixins/formItem.js
index fd1f4c76e..12f9fc308 100644
--- a/Packages/ohif-core/client/components/base/mixins/formItem.js
+++ b/Packages/ohif-core/client/components/base/mixins/formItem.js
@@ -73,16 +73,27 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 }
             };
 
+            // Search for the parent form component
+            component.getForm = () => {
+                let currentComponent = component;
+                while (currentComponent) {
+                    currentComponent = currentComponent.parent;
+                    if (currentComponent && currentComponent.isForm) {
+                        return currentComponent;
+                    }
+                }
+            };
+
             // Check if the component value is valid in its form's schema
             component.validate = () => {
                 // Get the component's form
-                const form = component.parent;
+                const form = component.getForm();
 
                 // Get the form's data schema
                 const schema = form && form.schema;
 
                 // Get the current component's key
-                const key = instance.data.key;
+                const key = instance.data.pathKey;
 
                 // Return true if validation is not needed
                 if (!key || !schema || !component.$wrapper.is(':visible')) {
@@ -156,11 +167,13 @@ OHIF.mixins.formItem = new OHIF.Mixin({
 
             // TODO: [design] remove log, show error box/hint over the wrapper
             errorin(event, instance) {
+                event.stopPropagation();
                 console.log('ERROR when validating component', instance.component);
             },
 
             // TODO: [design] hide error box/hint
             errorout(event, instance) {
+                event.stopPropagation();
             }
 
         }
diff --git a/Packages/ohif-core/client/components/base/mixins/group.js b/Packages/ohif-core/client/components/base/mixins/group.js
index 4e212cd2c..ffb1235cf 100644
--- a/Packages/ohif-core/client/components/base/mixins/group.js
+++ b/Packages/ohif-core/client/components/base/mixins/group.js
@@ -12,6 +12,20 @@ OHIF.mixins.group = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
+            // Run this computation every time the schema property is changed
+            instance.autorun(() => {
+                let schema = instance.data.schema;
+
+                // Check if the schema is reactive
+                if (schema instanceof ReactiveVar) {
+                    // Register a dependency on schema property
+                    schema = schema.get();
+                }
+
+                // Set the form's data schema
+                component.schema = schema && schema.newContext();
+            });
+
             // Get or set the child components values
             component.value = value => {
                 const isGet = _.isUndefined(value);
@@ -35,6 +49,48 @@ OHIF.mixins.group = new OHIF.Mixin({
                 component.$element.trigger('change');
             };
 
+            // Get a registered item in form by its key
+            component.item = itemKey => {
+                let found;
+
+                // Iterate over each registered form item
+                component.registeredItems.forEach(child => {
+                    const key = child.templateInstance.data.key;
+
+                    // Change the found item if current key is the same as given
+                    if (key === itemKey) {
+                        found = child;
+                    }
+                });
+
+                // Return the found item or undefined if it was not found
+                return found;
+            };
+
+            // Check if the form data is valid in its schema
+            component.validate = () => {
+                // Assume validation result as true
+                let result = true;
+
+                // Return true if there's no data schema defined
+                if (!component.schema) {
+                    return result;
+                }
+
+                // Iterate over each registered form item and validate it
+                component.registeredItems.forEach(child => {
+                    const key = child.templateInstance.data.key;
+
+                    // Change result to false if any form item is invalid
+                    if (key && !child.validate()) {
+                        result = false;
+                    }
+                });
+
+                // Return the validation result
+                return result;
+            };
+
             // Disable or enable the component
             component.disable = isDisable => {
                 component.registeredItems.forEach(child => child.disable(isDisable));
diff --git a/Packages/ohif-core/client/components/base/mixins/schemaData.js b/Packages/ohif-core/client/components/base/mixins/schemaData.js
index 6bddc2012..15f9de7dc 100644
--- a/Packages/ohif-core/client/components/base/mixins/schemaData.js
+++ b/Packages/ohif-core/client/components/base/mixins/schemaData.js
@@ -7,7 +7,13 @@ import { _ } from 'meteor/underscore';
 // Helper function to get the component's current schema
 const getCurrentSchema = (parentComponent, key) => {
     // Get the parent component schema
-    const schema = parentComponent && parentComponent.schema;
+    let schema = parentComponent && parentComponent.schema;
+
+    // Try to get the form schema if it was not found
+    if (parentComponent && !schema) {
+        const form = parentComponent.getForm();
+        schema = form && form.schema;
+    }
 
     // Stop here if there's no key or schema defined
     if (!key || !schema) {
@@ -45,8 +51,18 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
             // Get the parent component
             const parent = OHIF.blaze.getParentComponent(Blaze.currentView);
 
+            // Get he parent component key
+            let parentKey = parent && parent.templateInstance.data.pathKey;
+
+            // Set the path key for this component
+            data.pathKey = data.key || '';
+            if (data.pathKey && typeof parentKey === 'string') {
+                const prefix = parentKey ? `${parentKey}.` : '';
+                data.pathKey = `${prefix}${data.pathKey}`;
+            }
+
             // Get the current schema data using component's key
-            const currentSchema = getCurrentSchema(parent, data.key);
+            const currentSchema = getCurrentSchema(parent, data.pathKey);
 
             // Stop here if there's no schema data for current key
             if (!currentSchema) {
diff --git a/Packages/ohif-core/client/lib/blaze.js b/Packages/ohif-core/client/lib/blaze.js
index beeaf083f..a8a03763a 100644
--- a/Packages/ohif-core/client/lib/blaze.js
+++ b/Packages/ohif-core/client/lib/blaze.js
@@ -31,7 +31,7 @@ OHIF.blaze.getParentView = (view, parentViewName) => {
 };
 
 // Search for the parent component of the given view
-OHIF.blaze.getParentComponent = (view) => {
+OHIF.blaze.getParentComponent = view => {
     let currentView = view;
     while (currentView) {
         currentView = currentView.originalParentView || currentView.parentView;
diff --git a/Packages/ohif-core/client/lib/index.js b/Packages/ohif-core/client/lib/index.js
index 1699c91cd..6588528d9 100644
--- a/Packages/ohif-core/client/lib/index.js
+++ b/Packages/ohif-core/client/lib/index.js
@@ -1,3 +1,4 @@
 import './blaze.js';
+import './object.js';
 import './string.js';
 import './user.js';
diff --git a/Packages/ohif-core/client/lib/object.js b/Packages/ohif-core/client/lib/object.js
new file mode 100644
index 000000000..4cef24679
--- /dev/null
+++ b/Packages/ohif-core/client/lib/object.js
@@ -0,0 +1,50 @@
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.object = {};
+
+// Transforms a shallow object with keys separated by "." into a nested object
+OHIF.blaze.getNestedObject = shallowObject => {
+    var nestedObject = {};
+    for (var key in shallowObject) {
+        var value = shallowObject[key];
+        var propertyArray = key.split('.');
+        var currentObject = nestedObject;
+        while (propertyArray.length) {
+            var currentProperty = propertyArray.shift();
+            if (!propertyArray.length) {
+                currentObject[currentProperty] = value;
+            } else {
+                if (!currentObject[currentProperty]) {
+                    currentObject[currentProperty] = {};
+                }
+
+                currentObject = currentObject[currentProperty];
+            }
+        }
+    }
+
+    return nestedObject;
+};
+
+// Transforms a nested object into a shallowObject merging its keys with "." character
+OHIF.blaze.getShallowObject = nestedObject => {
+    var shallowObject = {};
+    var putValues = function(baseKey, nestedObject, resultObject) {
+        for (var key in nestedObject) {
+            var currentKey = baseKey ? baseKey + '.' + key : key;
+            var currentValue = nestedObject[key];
+            if (typeof currentValue === 'object') {
+                if (currentValue instanceof Array) {
+                    currentKey += '[]';
+                }
+
+                putValues(currentKey, currentValue, resultObject);
+            } else {
+                resultObject[currentKey] = currentValue;
+            }
+        }
+    };
+
+    putValues('', nestedObject, shallowObject);
+    return shallowObject;
+};
diff --git a/Packages/viewerbase/client/compatibility/dialogPolyfill.js b/Packages/viewerbase/client/compatibility/dialogPolyfill.js
index 1ff46a6fc..77a4ceea6 100644
--- a/Packages/viewerbase/client/compatibility/dialogPolyfill.js
+++ b/Packages/viewerbase/client/compatibility/dialogPolyfill.js
@@ -230,7 +230,8 @@ var dialogPolyfill = (function() {
 
         // TODO: Only install when any dialogs are open.
         document.addEventListener('submit', function(ev) {
-            var method = ev.target.getAttribute('method').toLowerCase();
+            var method = ev.target.getAttribute('method');
+            method = method ? method.toLowerCase() : '';
             if (method != 'dialog') { return; }
             ev.preventDefault();
 
@@ -408,4 +409,4 @@ var dialogPolyfill = (function() {
         dialogPolyfill.dm.handleKey.bind(dialogPolyfill.dm));
 
     return dialogPolyfill;
-})();
\ No newline at end of file
+})();

From c3d7c2af09b4b645690c7bafd1c5da666c8986e2 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Wed, 31 Aug 2016 11:11:45 +0200
Subject: [PATCH 23/41] Fix image scrolling direction issue and DIMSE Server
 schema issue

---
 OHIFViewer/.meteor/packages                   |  1 -
 .../viewer/imageControls/imageControls.js     | 23 +++++++++++++++++--
 Packages/worklist/both/schema.js              |  1 +
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/OHIFViewer/.meteor/packages b/OHIFViewer/.meteor/packages
index 4108a86e1..c305d0da9 100755
--- a/OHIFViewer/.meteor/packages
+++ b/OHIFViewer/.meteor/packages
@@ -40,7 +40,6 @@ clinical:router
 fastclick@1.0.12
 standard-minifier-css@1.1.8
 standard-minifier-js@1.1.8
-aldeed:simple-schema
 johdirr:meteor-git-rev
 wadoproxy
 aldeed:template-extension
diff --git a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.js b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.js
index a77a2d385..e88c73381 100644
--- a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.js
+++ b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.js
@@ -16,14 +16,33 @@ Template.imageControls.onRendered(() => {
 })
 
 Template.imageControls.events({
-    'input #imageSlider, change #imageSlider': function(e) {
+    'keydown #imageSlider'(event) {
+        // We don't allow direct keyboard up/down input on the
+        // image sliders since the natural direction is reversed (0 is at the top)
+
+        // Prevent the browser's default behaviour (scrolling)
+        event.preventDefault();
+
+        // Store the KeyCodes in an object for readability
+        const keys = {
+            DOWN: 40,
+            UP: 38
+        };
+
+        if (event.which === keys.DOWN) {
+            OHIF.viewer.hotkeyFunctions.scrollDown();
+        } else if (event.which === keys.UP) {
+            OHIF.viewer.hotkeyFunctions.scrollUp();
+        }
+    },
+    'input #imageSlider, change #imageSlider'(event) {
         // Note that we throttle requests to prevent the
         // user's ultrafast scrolling from firing requests too quickly.
         clearTimeout(slideTimeout);
         slideTimeout = setTimeout(() => {
             // Using the slider in an inactive viewport
             // should cause that viewport to become active
-            const slider = $(e.currentTarget);
+            const slider = $(event.currentTarget);
             const newActiveElement = slider.parents().eq(2).siblings('.imageViewerViewport').get(0);
             setActiveViewport(newActiveElement);
 
diff --git a/Packages/worklist/both/schema.js b/Packages/worklist/both/schema.js
index fd2153ec2..30edd1ade 100644
--- a/Packages/worklist/both/schema.js
+++ b/Packages/worklist/both/schema.js
@@ -86,6 +86,7 @@ export const DIMSEPeer = new SimpleSchema({
     hostAE: {
         type: String,
         label: 'Application Entity (AE) Host',
+        optional: true
     },
     host: {
         type: String,

From e5eb98cbc0943b1c10e2a6f62e85f0ed9bb3a928 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 31 Aug 2016 08:09:27 -0300
Subject: [PATCH 24/41] LT-67: Migrating DIMSE inputs to components

---
 .../serverInformationDicomWeb.js              |  4 +--
 .../serverInformationDimse.html               | 34 ++++++++++---------
 .../serverInformationDimse.js                 | 24 ++++++-------
 .../client/components/base/mixins/group.js    | 20 +++++++----
 .../components/base/mixins/schemaData.js      |  9 +++--
 Packages/worklist/both/schema.js              |  4 +--
 6 files changed, 54 insertions(+), 41 deletions(-)

diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.js b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.js
index 270811222..09c315466 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.js
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.js
@@ -1,5 +1,5 @@
-Template.serverInformationDicomWeb.onRendered(function() {
-    var instance = Template.instance();
+Template.serverInformationDicomWeb.onRendered(() => {
+    const instance = Template.instance();
     instance.autorun(function() {
         const mode = instance.data.mode.get();
         if (mode === 'edit') {
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html
index c5caeabc5..34eade647 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html
@@ -5,39 +5,41 @@
             <button class="btn btn-primary pull-right js-new-peer">New peer</button>
         </div>
         <hr>
-        <div class="row">
+        {{#group class='row' key='peers' arrayValues=true}}
             {{#each peer in instance.peers.get}}
-                <div class="col-lg-6">
+                {{#group class='col-lg-6'}}
                     <div class="panel panel-default panel-body">
                         <div class="row">
-                            {{>serverInformationFormField name=(concat "peers[]." @index ".aeTitle") label="AE title"}}
-                            {{>serverInformationFormField name=(concat "peers[]." @index ".hostAE") label="AE host"}}
-                            {{>serverInformationFormField name=(concat "peers[]." @index ".host") label="Host"}}
-                            {{>serverInformationFormField name=(concat "peers[]." @index ".port") label="Port"}}
+                            <div class="col-lg-6">
+                                {{>inputText class='form-control' key='aeTitle'}}
+                            </div>
+                            <div class="col-lg-6">
+                                {{>inputText class='form-control' key='hostAE'}}
+                            </div>
+                            <div class="col-lg-6">
+                                {{>inputText class='form-control' key='host'}}
+                            </div>
+                            <div class="col-lg-6">
+                                {{>inputText class='form-control' key='port'}}
+                            </div>
                             <div class="col-lg-12">
                                 <strong>Settings</strong>
                                 <div class="form-group">
                                     <div class="form-control clearfix">
                                         <div class="checkbox pull-left">
-                                            <label>
-                                                <input type="checkbox" name="peers[].{{@index}}.default">
-                                                <span>Default</span>
-                                            </label>
+                                            {{>inputCheckbox key='default'}}
                                         </div>
                                         <div class="checkbox pull-left">
-                                            <label>
-                                                <input type="checkbox" name="peers[].{{@index}}.server">
-                                                <span>Server</span>
-                                            </label>
+                                            {{>inputCheckbox key='server'}}
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
+                {{/group}}
             {{/each}}
-        </div>
+        {{/group}}
     </div>
     <hr>
 </template>
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.js b/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.js
index 29b32aa1b..0249b580c 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.js
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.js
@@ -1,29 +1,29 @@
-Template.serverInformationDimse.onCreated(function() {
-    var instance = Template.instance();
+Template.serverInformationDimse.onCreated(() => {
+    const instance = Template.instance();
     instance.peers = new ReactiveVar([]);
-    instance.autorun(function() {
-        var currentItem = instance.data.currentItem.get();
+    instance.autorun(() => {
+        const currentItem = instance.data.currentItem.get();
         if (currentItem) {
             instance.peers.set(currentItem.peers || []);
         }
     });
 });
 
-Template.serverInformationDimse.onRendered(function() {
-    var instance = Template.instance();
-    instance.autorun(function() {
-        var mode = instance.data.mode.get();
+Template.serverInformationDimse.onRendered(() => {
+    const instance = Template.instance();
+    instance.autorun(() => {
+        const mode = instance.data.mode.get();
         if (mode === 'edit') {
-            var data = instance.data.currentItem.get();
-            FormUtils.setFormData(instance.data.$form, data);
+            const data = instance.data.currentItem.get();
+            instance.data.form.value(data);
         }
     });
 });
 
 Template.serverInformationDimse.events({
-    'click .js-new-peer': function(event, instance) {
+    'click .js-new-peer'(event, instance) {
         event.preventDefault();
-        var peers = instance.peers.get();
+        const peers = instance.peers.get();
         peers.push({});
         instance.peers.set(peers);
     }
diff --git a/Packages/ohif-core/client/components/base/mixins/group.js b/Packages/ohif-core/client/components/base/mixins/group.js
index ffb1235cf..79450cd7e 100644
--- a/Packages/ohif-core/client/components/base/mixins/group.js
+++ b/Packages/ohif-core/client/components/base/mixins/group.js
@@ -29,22 +29,30 @@ OHIF.mixins.group = new OHIF.Mixin({
             // Get or set the child components values
             component.value = value => {
                 const isGet = _.isUndefined(value);
+                const isArray = instance.data.arrayValues;
+                const result = isArray ? [] : {};
+
                 if (isGet) {
-                    const result = {};
                     component.registeredItems.forEach(child => {
-                        const key = child.templateInstance.data.key;
-                        if (key) {
-                            result[key] = child.value();
+                        if (!isArray) {
+                            const key = child.templateInstance.data.key;
+                            if (key) {
+                                result[key] = child.value();
+                            }
+                        } else {
+                            result.push(child.value());
                         }
                     });
                     return result;
                 }
 
-                const groupValue = typeof value === 'object' ? value : {};
+                const groupValue = typeof value === 'object' ? value : result;
+                let i = 0;
                 component.registeredItems.forEach(child => {
-                    const key = child.templateInstance.data.key;
+                    const key = isArray ? i : child.templateInstance.data.key;
                     const childValue = _.isUndefined(groupValue[key]) ? null : groupValue[key];
                     child.value(childValue);
+                    i++;
                 });
                 component.$element.trigger('change');
             };
diff --git a/Packages/ohif-core/client/components/base/mixins/schemaData.js b/Packages/ohif-core/client/components/base/mixins/schemaData.js
index 15f9de7dc..c7518ee4b 100644
--- a/Packages/ohif-core/client/components/base/mixins/schemaData.js
+++ b/Packages/ohif-core/client/components/base/mixins/schemaData.js
@@ -52,10 +52,13 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
             const parent = OHIF.blaze.getParentComponent(Blaze.currentView);
 
             // Get he parent component key
-            let parentKey = parent && parent.templateInstance.data.pathKey;
+            const parentKey = parent && parent.templateInstance.data.pathKey;
+
+            // Check if the parent is an array group
+            const isParentArray = parent && parent.templateInstance.data.arrayValues;
 
             // Set the path key for this component
-            data.pathKey = data.key || '';
+            data.pathKey = data.key || (isParentArray ? '$' : '');
             if (data.pathKey && typeof parentKey === 'string') {
                 const prefix = parentKey ? `${parentKey}.` : '';
                 data.pathKey = `${prefix}${data.pathKey}`;
@@ -107,7 +110,7 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
             const component = instance.component;
 
             // Get the current schema data using component's key
-            const currentSchema = getCurrentSchema(component.parent, instance.data.key);
+            const currentSchema = getCurrentSchema(component.parent, instance.data.pathKey);
 
             // Stop here if there's no schema data for current key
             if (!currentSchema) {
diff --git a/Packages/worklist/both/schema.js b/Packages/worklist/both/schema.js
index 30edd1ade..9ac6846e6 100644
--- a/Packages/worklist/both/schema.js
+++ b/Packages/worklist/both/schema.js
@@ -81,11 +81,11 @@ export const DICOMWebServer = new SimpleSchema({
 export const DIMSEPeer = new SimpleSchema({
     aeTitle: {
         type: String,
-        label: 'Application Entity (AE) Title',
+        label: 'AE Title',
     },
     hostAE: {
         type: String,
-        label: 'Application Entity (AE) Host',
+        label: 'AE Host',
         optional: true
     },
     host: {

From a057243745794cff678fab42901b359108a5e366 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 31 Aug 2016 09:51:28 -0300
Subject: [PATCH 25/41] LT-67: Creating default custom validatior for empty
 strings

---
 .../serverInformationForm.html                |  3 +-
 Packages/ohif-core/both/schema.js             | 24 +++++++++++++++-
 .../client/components/base/mixins/group.js    | 28 +++++++++++++++++--
 .../components/base/templates/select.html     |  1 +
 4 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
index eda51afe9..9101be616 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
@@ -6,7 +6,8 @@
                 {{>inputText labelClass='form-group' key='name'}}
             </div>
             <div class="col-lg-6">
-                {{>inputSelect labelClass='form-group' key='type' hideSearch=true
+                {{>inputSelect labelClass='form-group' key='type'
+                    hideSearch=true disabled=(eq this.mode.get 'edit')
                     options=(clone placeholder='Choose a server type...')}}
             </div>
         </div>
diff --git a/Packages/ohif-core/both/schema.js b/Packages/ohif-core/both/schema.js
index 6c2b354b7..ca1d9776e 100644
--- a/Packages/ohif-core/both/schema.js
+++ b/Packages/ohif-core/both/schema.js
@@ -1,5 +1,27 @@
 import { SimpleSchema } from 'meteor/aldeed:simple-schema';
 
+/*
+ Extend the available options on schema definitions:
+
+  * valuesLabels: Used in conjunction with allowedValues to define the text
+    label for each value (used on forms)
+
+  * textOptional: Used to allow empty strings
+
+ */
 SimpleSchema.extendOptions({
-    valuesLabels: Match.Optional([String])
+    valuesLabels: Match.Optional([String]),
+    textOptional: Match.Optional(Boolean)
+});
+
+// Add default required validation for empty strings which can be bypassed
+// using textOptional=true definition
+SimpleSchema.addValidator(function() {
+    if (
+        this.definition.optional !== true &&
+        this.definition.textOptional !== true &&
+        this.value === ''
+    ) {
+        return 'required';
+    }
 });
diff --git a/Packages/ohif-core/client/components/base/mixins/group.js b/Packages/ohif-core/client/components/base/mixins/group.js
index 79450cd7e..f64d3565e 100644
--- a/Packages/ohif-core/client/components/base/mixins/group.js
+++ b/Packages/ohif-core/client/components/base/mixins/group.js
@@ -30,23 +30,43 @@ OHIF.mixins.group = new OHIF.Mixin({
             component.value = value => {
                 const isGet = _.isUndefined(value);
                 const isArray = instance.data.arrayValues;
+
+                // Create the result data as array or object
                 const result = isArray ? [] : {};
 
+                // Get the group current value and return it
                 if (isGet) {
+                    // Iterate over each registered item and extract its value
                     component.registeredItems.forEach(child => {
-                        if (!isArray) {
+                        // Check if it is an array or an object group
+                        if (isArray) {
+                            // Push the item value to the result array
+                            result.push(child.value());
+                        } else {
+                            // Get the item key
                             const key = child.templateInstance.data.key;
+
+                            //Check if a key is set for the item
                             if (key) {
+                                // Add the item value to the result object
                                 result[key] = child.value();
                             }
-                        } else {
-                            result.push(child.value());
                         }
                     });
+
+                    // Return the resulting data as array or object
                     return result;
                 }
 
+                // Get the group current value
                 const groupValue = typeof value === 'object' ? value : result;
+
+                // Stop here if there is no value defined for this group
+                if (!groupValue) {
+                    return;
+                }
+
+                // Iterate over each registered item and set its value
                 let i = 0;
                 component.registeredItems.forEach(child => {
                     const key = isArray ? i : child.templateInstance.data.key;
@@ -54,6 +74,8 @@ OHIF.mixins.group = new OHIF.Mixin({
                     child.value(childValue);
                     i++;
                 });
+
+                // Trigger the change event after setting the new value
                 component.$element.trigger('change');
             };
 
diff --git a/Packages/ohif-core/client/components/base/templates/select.html b/Packages/ohif-core/client/components/base/templates/select.html
index fa1535a33..3db0c7de0 100644
--- a/Packages/ohif-core/client/components/base/templates/select.html
+++ b/Packages/ohif-core/client/components/base/templates/select.html
@@ -4,6 +4,7 @@
         class="{{this.class}}"
         name="{{this.name}}"
         multiple="{{#if this.multiple}}multiple{{/if}}"
+        disabled="{{#if this.disabled}}disabled{{/if}}"
         data-key="{{this.key}}"
         {{this.tagAttributes}}
     >

From 52770dc79ca10652cafaffe5a285a84e2b78984e Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 31 Aug 2016 10:17:46 -0300
Subject: [PATCH 26/41] LT-67: Validating server information with its schema

---
 .../serverInformationForm/serverInformationForm.js    | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
index 41cfd26c6..1ff70c6c1 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
@@ -53,7 +53,16 @@ Template.serverInformationForm.onRendered(() => {
 Template.serverInformationForm.events({
     submit(event, instance) {
         event.preventDefault();
-        var formData = instance.data.form.value();
+
+        // Stop here if the form validation fails
+        if (!instance.data.form.validate()) {
+            return;
+        }
+
+        // Get the current form data
+        const formData = instance.data.form.value();
+
+        // Call the save method
         Meteor.call('serverSave', formData, function(error) {
             if (error) {
                 // TODO: check for errors: not-authorized, data-write

From e9ec386e722f4746160e8684792a95ba433b6a8d Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Tue, 23 Aug 2016 14:24:51 -0300
Subject: [PATCH 27/41] LT-281: Replacing variables for theme calls

---
 .../flexboxLayout/flexboxLayout.styl          | 10 +--
 .../components/ohifViewer/ohifViewer.styl     | 20 ++---
 .../toolbarSection/toolbarSection.styl        |  4 +-
 .../client/components/viewer/viewer.styl      |  2 +-
 .../roundedButtonGroup.styl                   | 30 +++----
 Packages/design/styles/common/global.styl     | 12 ++-
 Packages/design/styles/components/radio.styl  | 12 +--
 .../design/styles/components/select2.styl     |  4 +-
 .../design/styles/imports/theme-tide.styl     | 82 -------------------
 .../styles/imports/theme-tigerlilly.styl      | 27 ------
 Packages/design/styles/imports/theming.styl   | 11 ++-
 Packages/design/styles/imports/variables.styl | 25 ++++--
 .../protocolEditor/protocolEditor.styl        | 32 ++++----
 .../ruleEntryDialog/ruleEntryDialog.styl      |  9 +-
 .../components/ruleTable/ruleTable.styl       | 14 ++--
 .../settingEntryDialog.styl                   |  9 +-
 .../settingsTable/settingsTable.styl          | 14 ++--
 .../components/stageDetails/stageDetails.styl |  8 +-
 .../stageSortable/stageSortable.styl          | 24 +++---
 .../textEntryDialog/textEntryDialog.styl      |  9 +-
 .../additionalFindings.styl                   | 20 ++---
 .../components/caseProgress/caseProgress.styl |  6 +-
 .../flexboxLayout/flexboxLayout.styl          |  6 +-
 .../components/lesionTable/lesionTable.styl   |  2 +-
 .../lesionTableHUD/lesionTableHUD.styl        | 30 +++----
 .../lesionTableHeaderRow.styl                 | 20 ++---
 .../lesionTableRow/lesionTableRow.styl        | 34 ++++----
 .../lesionTableTimepointCell.styl             |  4 +-
 .../lesionTableTimepointHeader.styl           |  6 +-
 .../lesionTracker/lesionTracker.styl          | 18 ++--
 .../components/measureFlow/measureFlow.styl   |  9 +-
 .../radialProgressBar/radialProgressBar.styl  | 10 +--
 .../studySeriesQuickSwitch.styl               | 18 ++--
 .../studyTimepointBrowser.styl                | 18 ++--
 .../studyTimepointStudy.styl                  | 20 ++---
 .../toolbarSection/toolbarSection.styl        | 10 +--
 .../userAccountMenu/userAccountMenu.styl      |  8 +-
 .../client/components/viewer/viewer.styl      |  2 +-
 .../basic/aboutModal/aboutModal.styl          |  2 +-
 .../imageThumbnail/imageThumbnail.styl        | 10 +--
 .../thumbnailEntry/thumbnailEntry.styl        | 10 +--
 .../annotationDialogs/annotationDialogs.styl  | 10 +--
 .../viewer/cineDialog/cineDialog.styl         | 18 ++--
 .../viewer/imageControls/imageControls.styl   | 12 +--
 .../imageViewerViewport.styl                  |  2 +-
 .../viewer/layoutChooser/layoutChooser.styl   | 15 ++--
 .../loadingIndicator/loadingIndicator.styl    | 14 ++--
 .../toolbarSectionButton.styl                 | 24 +++---
 .../toolbarSectionTools.styl                  |  4 +-
 .../viewer/viewerMain/viewerMain.styl         | 10 +--
 .../viewportOverlay/viewportOverlay.styl      |  2 +-
 .../studyContextMenu/studyContextMenu.styl    |  2 +-
 .../worklist/client/components/worklist.styl  |  8 +-
 .../worklistResult/worklistResult.styl        | 39 ++++-----
 .../worklistToolbar/worklistToolbar.styl      |  6 +-
 55 files changed, 341 insertions(+), 446 deletions(-)

diff --git a/OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl b/OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl
index 39dbec75d..bc608d9b9 100644
--- a/OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl
+++ b/OHIFViewer/client/components/flexboxLayout/flexboxLayout.styl
@@ -27,11 +27,11 @@ $lesionsSidebarMenuWidth = 450px
         transform(translateX(0%))
 
   .sidebar-left
-    max-width: $studiesSidebarMenuWidth
-    order: 1
+    theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
     flex: 1
     margin-left: - $studiesSidebarMenuWidth
-    border-right: $uiBorderThickness $uiBorderColor solid
+    max-width: $studiesSidebarMenuWidth
+    order: 1
 
     &.sidebar-open
       margin-left: 0
@@ -62,7 +62,7 @@ $lesionsSidebarMenuWidth = 450px
       max-width: $lesionsSidebarMenuWidth + 270px
 
     &:before
-      background-color: $uiBorderColor
+      theme('background-color', '$uiBorderColor')
       content: ''
       display: block
       height: 100%
@@ -75,6 +75,6 @@ $lesionsSidebarMenuWidth = 450px
       margin-right: 0
 
   .studiesListedChanger
+    theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
     padding: 20px 10px
     text-align: center
-    border-bottom: $uiBorderThickness $uiBorderColor solid
diff --git a/OHIFViewer/client/components/ohifViewer/ohifViewer.styl b/OHIFViewer/client/components/ohifViewer/ohifViewer.styl
index df922b898..a8c2b9261 100644
--- a/OHIFViewer/client/components/ohifViewer/ohifViewer.styl
+++ b/OHIFViewer/client/components/ohifViewer/ohifViewer.styl
@@ -9,8 +9,8 @@ $expandedHeight = 160px
 
 .topBar
   height: $topBarHeight
-  color: $textPrimaryColor
-  background-color: $primaryBackgroundColor
+  theme('color', '$textPrimaryColor')
+  theme('background-color', '$primaryBackgroundColor')
   transition(all 0.5s ease)
 
   .brandSection
@@ -26,14 +26,14 @@ $expandedHeight = 160px
       display: inline-block
       font-family: $logoFontFamily
       font-weight: $logoFontWeight
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       line-height: 30px
 
   .studyListLinkSection
-    border-left: $uiBorderThickness solid $uiBorderColor;
-    
+    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
+
   .btn
-    color: $textSecondaryColor
+    theme('color', '$textSecondaryColor')
     cursor: pointer
     font-size: 13px
     font-weight: 500
@@ -41,10 +41,10 @@ $expandedHeight = 160px
     margin-top: 3px
 
     &:hover
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
     &:active
-      color: $activeColor
+      theme('color', '$activeColor')
 
   &.studyList
     background-color: rgba(21, 25, 30, 0.7)
@@ -75,5 +75,5 @@ $expandedHeight = 160px
   .tab-pane
     .viewerContainer
       .loadingTextDiv
-        color: $textSecondaryColor
-        font-size: 30px
\ No newline at end of file
+        theme('color', '$textSecondaryColor')
+        font-size: 30px
diff --git a/OHIFViewer/client/components/toolbarSection/toolbarSection.styl b/OHIFViewer/client/components/toolbarSection/toolbarSection.styl
index 886b938e2..e6ac4b683 100644
--- a/OHIFViewer/client/components/toolbarSection/toolbarSection.styl
+++ b/OHIFViewer/client/components/toolbarSection/toolbarSection.styl
@@ -1,7 +1,7 @@
 @import "{design}/app"
 
 .toolbarSection
-  border-bottom: $uiBorderColor $uiBorderThickness solid
+  theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
   flex: 0 0 auto
   height: $toolbarHeight
   overflow: hidden
@@ -11,4 +11,4 @@
   width: 100%
 
   &.expanded
-    height: $toolbarHeight + $toolbarDrawerHeight
\ No newline at end of file
+    height: $toolbarHeight + $toolbarDrawerHeight
diff --git a/OHIFViewer/client/components/viewer/viewer.styl b/OHIFViewer/client/components/viewer/viewer.styl
index e42b65915..6847a00d1 100644
--- a/OHIFViewer/client/components/viewer/viewer.styl
+++ b/OHIFViewer/client/components/viewer/viewer.styl
@@ -6,5 +6,5 @@
   width: 100%
 
 .loadingTextDiv
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
   font-size: 30px
diff --git a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
index 6226a603f..d4d3a9225 100644
--- a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
+++ b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
@@ -1,7 +1,7 @@
 @import "{design}/app"
 
 $height = 25px
-$textColorActive = #2D2D2D
+$textColorButtonActive = #2D2D2D
 
 .roundedButtonGroup
 
@@ -15,9 +15,9 @@ $textColorActive = #2D2D2D
 
     .roundedButton
       align-items: center
-      background-color: $uiGrayDark
-      border: 2px $uiBorderColorDark solid
-      color: $textSecondaryColor
+      theme('background-color', '$uiGrayDark')
+      theme('border', '2px solid $uiBorderColorDark')
+      theme('color', '$textSecondaryColor')
       display: flex
       font-size: 11px
       font-weight: 500
@@ -29,19 +29,19 @@ $textColorActive = #2D2D2D
       transition: transition($sidebarTransition)
 
       svg
-        fill: $defaultColor
-        stroke: $defaultColor
+        theme('fill', '$defaultColor')
+        theme('stroke', '$defaultColor')
 
       svg
       span
         margin: 0 2px
-        
+
       i
         line-height: 15px
         font-size: 15px
 
     .bottomLabel
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
       font-size: 12px
       font-weight: 500
       line-height: 12px
@@ -58,16 +58,16 @@ $textColorActive = #2D2D2D
       border-top-right-radius: $height
 
     &:hover .roundedButton
-      background-color: $boxBackgroundColor
-      color: $uiGrayDark
+      theme('color', '$uiGrayDark')
+      theme('background-color', '$boxBackgroundColor')
 
     &.active .roundedButton
-      background-color: $activeColor
-      border-color: $uiBorderColorActive
-      color: $textColorActive
+      theme('background-color', '$activeColor')
+      theme('border-color', '$uiBorderColorActive')
+      color: $textColorButtonActive
 
     &:hover .roundedButton
     &.active .roundedButton
       svg
-        fill: $uiGrayDark
-        stroke: $uiGrayDark
+        theme('fill', '$uiGrayDark')
+        theme('stroke', '$uiGrayDark')
diff --git a/Packages/design/styles/common/global.styl b/Packages/design/styles/common/global.styl
index ccaf049ef..37f73f735 100644
--- a/Packages/design/styles/common/global.styl
+++ b/Packages/design/styles/common/global.styl
@@ -2,11 +2,9 @@
 
 html body
   font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
-  // Try to fix LT-273, need a monitor to test on though.
-  //text-rendering: optimizeLegibility
 
 html hr
-  border-top: 1px solid $uiBorderColor
+  theme('border-top', '1px solid $uiBorderColor')
 
 label.form-group
   width: 100%
@@ -49,9 +47,9 @@ label.form-group
 
 .modal-dialog
   .modal-content
-    background: $primaryBackgroundColor
-    border-color: $uiBorderColor
-    color: $textSecondaryColor
+    theme('background', '$primaryBackgroundColor')
+    theme('border-color', '$uiBorderColor')
+    theme('color', '$textSecondaryColor')
 
     .modal-header, .modal-footer
-      border-color: $uiBorderColor
+      theme('border-color', '$uiBorderColor')
\ No newline at end of file
diff --git a/Packages/design/styles/components/radio.styl b/Packages/design/styles/components/radio.styl
index 0756f7854..5f0c14970 100644
--- a/Packages/design/styles/components/radio.styl
+++ b/Packages/design/styles/components/radio.styl
@@ -3,12 +3,12 @@
 .group-radio
   label
     cursor: pointer
-    
+
     input
       height: 0
       width: 0
       visibility: hidden
-      
+
     span
       padding-left: 23px
       position: relative
@@ -23,14 +23,14 @@
         top: 50%
         transform(translateY(-50%))
         width: 16px
-    
+
     input:focus + span:before
       // TODO: [design] define a outline for the design
+      theme('box-shadow', '0 0 2px 2px $textSecondaryColor')
       outline: none
-      box-shadow: 0 0 2px 2px $textSecondaryColor
-    
+
     input:checked + span:after
-      background: $uiBorderColorDark
+      theme('background', '$uiBorderColorDark')
       border-radius: 5px
       content: ''
       height: 10px
diff --git a/Packages/design/styles/components/select2.styl b/Packages/design/styles/components/select2.styl
index a1ef36961..6dc188eb1 100644
--- a/Packages/design/styles/components/select2.styl
+++ b/Packages/design/styles/components/select2.styl
@@ -22,8 +22,8 @@ span.select2.select2-container
     padding-left: 11px
 
   span.select2-selection__arrow
+    theme('border-left', '1px solid $primaryBackgroundColor')
     background-color: $gray1
-    border-left: 1px solid $primaryBackgroundColor
     border-top-right-radius: $borderRadius
     border-bottom-right-radius: $borderRadius
     right: 0
@@ -42,8 +42,8 @@ span.select2.select2-container
       placeholder-color($gray4)
 
     li.select2-selection__choice
+      theme('border-color', '$uiGray')
       background-color: #FFF
-      border-color: $uiGray
       border-radius: $borderRadius
       color: $gray4
       font-size: 12px
diff --git a/Packages/design/styles/imports/theme-tide.styl b/Packages/design/styles/imports/theme-tide.styl
index b27ce8a43..ebc64a651 100644
--- a/Packages/design/styles/imports/theme-tide.styl
+++ b/Packages/design/styles/imports/theme-tide.styl
@@ -18,7 +18,6 @@ $themes['tide'] = {
   $uiBorderColorActive: #00a4d9
   $primaryBackgroundColor: #000000
   $boxBackgroundColor: #344a61
-  $boxBackgroundColorDark: #22374D
 
   // Text Colors
   $textColorActive: black //#89bae5
@@ -26,86 +25,5 @@ $themes['tide'] = {
   $textSecondaryColor: #6a8fb1
 
   // Other Colors
-  $menuBackgroundColor: #F2F2F2
   $imageSliderColor: #163239
-
-  // Viewport Settings
-  $viewportBorderThickness: 1px
-  $viewportBorderColor: $uiBorderColorDark
-  $viewportBorderColorHover: $uiBorderColor
-  $viewportBorderColorActive: $uiBorderColorActive
-
-  // Sizes
-  $topBarHeight: 40px
-  $toolbarHeight: 78px
-  $toolbarDrawerHeight: 62px
-
-  // Thicknesses
-  $uiBorderThickness: 1px
-
-  // Fonts
-  $logoFontFamily: "Sanchez"
-  $logoFontWeight: 300
-
-  // Transitions
-  $transitionDuration: 0.3s
-  $transitionEffect: ease
-  $sidebarTransition: all $transitionDuration $transitionEffect
-  $studiesSidebarMenuWidth: 307px
-  $lesionsSidebarMenuWidth: 323px
 }
-
-// Common pallete
-$uiYellow = #E29E4A
-$uiSkyBlue = #6FBDE2
-
-$uiLightGray = #516873
-$uiGray = #263340
-$uiGrayDark = #16202B
-$uiGrayDarker = #151A1F
-$uiGrayDarkest = #14191E
-
-// Interface UI Colors
-$defaultColor = #9cd0fe
-$hoverColor = #ffffff
-$activeColor = #00a4d9
-$uiBorderColor = #436270
-$uiBorderColorDark = #3C5D80
-$uiBorderColorActive = #00a4d9
-$primaryBackgroundColor = #000000
-$boxBackgroundColor = #344a61
-$boxBackgroundColorDark = #22374D
-
-// Text Colors
-$textColorActive = black //#89bae5
-$textPrimaryColor = #ffffff
-$textSecondaryColor = #6a8fb1
-
-// Other Colors
-$menuBackgroundColor = #F2F2F2
-$imageSliderColor = #163239
-
-// Viewport Settings
-$viewportBorderThickness = 1px
-$viewportBorderColor = $uiBorderColorDark
-$viewportBorderColorHover = $uiBorderColor
-$viewportBorderColorActive = $uiBorderColorActive
-
-// Sizes
-$topBarHeight = 40px
-$toolbarHeight = 78px
-$toolbarDrawerHeight = 62px
-
-// Thicknesses
-$uiBorderThickness = 1px
-
-// Fonts
-$logoFontFamily = "Sanchez"
-$logoFontWeight = 300
-
-// Transitions
-$transitionDuration = 0.3s
-$transitionEffect = ease
-$sidebarTransition = all $transitionDuration $transitionEffect
-$studiesSidebarMenuWidth = 307px
-$lesionsSidebarMenuWidth = 323px
diff --git a/Packages/design/styles/imports/theme-tigerlilly.styl b/Packages/design/styles/imports/theme-tigerlilly.styl
index ba473d261..2e796532d 100644
--- a/Packages/design/styles/imports/theme-tigerlilly.styl
+++ b/Packages/design/styles/imports/theme-tigerlilly.styl
@@ -18,7 +18,6 @@ $themes['tigerlilly'] = {
   $uiBorderColorActive: #ff8a3d
   $primaryBackgroundColor: #000000
   $boxBackgroundColor: #5b3a59
-  $boxBackgroundColorDark: #4b2f40
 
   // Text Colors
   $textColorActive: black
@@ -26,31 +25,5 @@ $themes['tigerlilly'] = {
   $textSecondaryColor: #6a8fb1
 
   // Other Colors
-  $menuBackgroundColor: #F2F2F2
   $imageSliderColor: #4b2c3c //#163239
-
-  // Viewport Settings
-  $viewportBorderThickness: 1px
-  $viewportBorderColor: $uiBorderColorDark
-  $viewportBorderColorHover: $uiBorderColor
-  $viewportBorderColorActive: $uiBorderColorActive
-
-  // Sizes
-  $topBarHeight: 40px
-  $toolbarHeight: 78px
-  $toolbarDrawerHeight: 62px
-
-  // Thicknesses
-  $uiBorderThickness: 1px
-
-  // Fonts
-  $logoFontFamily: "Sanchez"
-  $logoFontWeight: 300
-
-  // Transitions
-  $transitionDuration: 0.3s
-  $transitionEffect: ease
-  $sidebarTransition: all $transitionDuration $transitionEffect
-  $studiesSidebarMenuWidth: 307px
-  $lesionsSidebarMenuWidth: 323px
 }
diff --git a/Packages/design/styles/imports/theming.styl b/Packages/design/styles/imports/theming.styl
index 528ac4e43..68b752750 100644
--- a/Packages/design/styles/imports/theming.styl
+++ b/Packages/design/styles/imports/theming.styl
@@ -1,3 +1,9 @@
+$themes = {}
+$defaultTheme = 'tide'
+
+@import "./theme-tide.styl"
+@import "./theme-tigerlilly.styl"
+
 parseSpaceVars($theme, $value)
   $valueSplit = split(' ', $value)
   $list = ''
@@ -21,5 +27,6 @@ theme($property, $value)
   / {selector()}
     {$property}: parseCommaVars($themes[$defaultTheme], $value)
   for $themeName, $theme in $themes
-    / body.theme-{$themeName} {selector()}
-      {$property}: parseCommaVars($theme, $value)
+    for $selectorPiece in split(',', selector())
+      / body.theme-{$themeName} {$selectorPiece}
+        {$property}: parseCommaVars($theme, $value)
diff --git a/Packages/design/styles/imports/variables.styl b/Packages/design/styles/imports/variables.styl
index 362c5a1b8..9a5d3896b 100644
--- a/Packages/design/styles/imports/variables.styl
+++ b/Packages/design/styles/imports/variables.styl
@@ -1,7 +1,22 @@
-$themes = {}
-$defaultTheme = 'tide'
-
 @import "./theming.styl"
 
-@import "./theme-tide.styl"
-@import "./theme-tigerlilly.styl"
+// Sizes
+$topBarHeight = 40px
+$toolbarHeight = 78px
+$toolbarDrawerHeight = 62px
+$studiesSidebarMenuWidth = 307px
+$lesionsSidebarMenuWidth = 323px
+
+// Fonts
+$logoFontFamily = "Sanchez"
+$logoFontWeight = 300
+
+// Transitions
+$transitionDuration = 0.3s
+$transitionEffect = ease
+$sidebarTransition = all $transitionDuration $transitionEffect
+
+
+// Thicknesses
+$viewportBorderThickness = 1px
+$uiBorderThickness = 1px
diff --git a/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl b/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl
index 6a1061a22..9c5bdb8dc 100644
--- a/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl
+++ b/Packages/hangingprotocols/client/components/protocolEditor/protocolEditor.styl
@@ -3,12 +3,12 @@
 $height = 20px
 
 #protocolEditor
+  theme('background', '$primaryBackgroundColor')
   height: 100%
   width: 450px
   padding: 10px 0
   position: absolute
   top: 0
-  background: $primaryBackgroundColor
 
   .navigationButtons
     ul
@@ -35,27 +35,27 @@ $height = 20px
         cursor: pointer
         text-decoration: none
         outline: none
-        background-color: $uiGrayDark
-        border: 2px $uiBorderColorDark solid
-        color: $textSecondaryColor
+        theme('background-color', '$uiGrayDark')
+        theme('border', '2px solid $uiBorderColorDark')
+        theme('color', '$textSecondaryColor')
         transition: transition($sidebarTransition)
         border-radius: $height
 
       &.active a
-        background-color: $activeColor
-        border-color: $uiBorderColorActive
-        color: $textColorActive
+        theme('background-color', '$activeColor')
+        theme('border-color', '$uiBorderColorActive')
+        theme('color', '$textColorActive')
         transition: transition($sidebarTransition)
 
   p
   h2
   h3
   h4
-    color: $defaultColor
+    theme('color', '$defaultColor')
 
   label
   ul
-    color: $defaultColor
+    theme('color', '$defaultColor')
     font-weight: 400
 
   label
@@ -68,7 +68,7 @@ $height = 20px
     width: 40%
     border: none
     background: #212121
-    color: $defaultColor
+    theme('color', '$defaultColor')
     text-align: center
 
   button.btn
@@ -85,11 +85,11 @@ $height = 20px
     bottom: 0
     width: 100%
     margin-bottom: 0
-    background: $uiGrayDarker
+    theme('background', '$uiGrayDarker')
 
     p
       font-size: 8pt
-      color: $defaultColor
+      theme('color', '$defaultColor')
       margin: 0 10px
       display: inline-block
 
@@ -107,11 +107,11 @@ $height = 20px
   #selectProtocol
     text-align: center
 
-    .btn-file 
+    .btn-file
       position: relative
       overflow: hidden
-      
-    .btn-file input[type=file] 
+
+    .btn-file input[type=file]
       position: absolute
       top: 0
       right: 0
@@ -141,4 +141,4 @@ $height = 20px
       padding: 40px
 
       h3
-        color: $defaultColor
\ No newline at end of file
+        theme('color', '$defaultColor')
diff --git a/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl b/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl
index 51b5164a5..7d7681269 100644
--- a/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl
+++ b/Packages/hangingprotocols/client/components/ruleEntryDialog/ruleEntryDialog.styl
@@ -1,6 +1,9 @@
 @import "{design}/app.styl"
 
 .ruleEntryDialog
+  theme('background', '$uiGrayDarkest')
+  theme('border', '1px solid $uiBorderColor')
+  theme('color', '$textSecondaryColor')
   display: none
   position: absolute
   top: 0
@@ -14,12 +17,8 @@
   padding: 10px
   background-color: rgba(255,255,255,1)
   outline: none
-
   opacity: 0.95
   border-radius: 8px
-  border: 1px solid $uiBorderColor
-  background: $uiGrayDarkest
-  color: $textSecondaryColor
 
   .dialogContent
     text-align: center
@@ -44,4 +43,4 @@
     color: black
     height: 30px
     border-radius: 2px
-    border: 0
\ No newline at end of file
+    border: 0
diff --git a/Packages/hangingprotocols/client/components/ruleTable/ruleTable.styl b/Packages/hangingprotocols/client/components/ruleTable/ruleTable.styl
index 5b92f45cc..0a6f57387 100644
--- a/Packages/hangingprotocols/client/components/ruleTable/ruleTable.styl
+++ b/Packages/hangingprotocols/client/components/ruleTable/ruleTable.styl
@@ -4,7 +4,7 @@ table.ruleTable
   thead
     tr
       th
-        color: $defaultColor
+        theme('color', '$defaultColor')
         text-align: center
 
       th:first-child
@@ -13,7 +13,7 @@ table.ruleTable
   tbody
     tr
       td
-        color: $defaultColor
+        theme('color', '$defaultColor')
         text-align: center
 
         .failWarning
@@ -26,10 +26,10 @@ table.ruleTable
             transition(all 0.1s ease)
             
             &:hover
-              color: $hoverColor
+              theme('color', '$hoverColor')
               
             &:active  
-              color: $activeColor
+              theme('color', '$activeColor')
 
       td:first-child
         text-align: left
@@ -37,14 +37,14 @@ table.ruleTable
 .addRuleContainer
   margin: 10px 0
   text-align: center
-  color: $defaultColor
+  theme('color', '$defaultColor')
 
   .addRule
     cursor: pointer
     transition(all 0.1s ease)
     
     &:hover
-      color: $hoverColor
+      theme('color', '$hoverColor')
       
     &:active  
-      color: $activeColor
\ No newline at end of file
+      theme('color', '$activeColor')
\ No newline at end of file
diff --git a/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl b/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl
index 31d543b13..be233ff38 100644
--- a/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl
+++ b/Packages/hangingprotocols/client/components/settingEntryDialog/settingEntryDialog.styl
@@ -1,6 +1,9 @@
 @import "{design}/app.styl"
 
 .settingEntryDialog
+  theme('border', '1px solid $uiBorderColor')
+  theme('background', '$uiGrayDarkest')
+  theme('color', '$textSecondaryColor')
   display: none
   position: absolute
   top: 0
@@ -13,12 +16,8 @@
   margin: auto
   padding: 10px
   outline: none
-
   opacity: 0.95
   border-radius: 8px
-  border: 1px solid $uiBorderColor
-  background: $uiGrayDarkest
-  color: $textSecondaryColor
 
   .dialogContent
     text-align: center
@@ -43,4 +42,4 @@
     color: black
     height: 30px
     border-radius: 2px
-    border: 0
\ No newline at end of file
+    border: 0
diff --git a/Packages/hangingprotocols/client/components/settingsTable/settingsTable.styl b/Packages/hangingprotocols/client/components/settingsTable/settingsTable.styl
index c57ee1895..801b6f7d6 100644
--- a/Packages/hangingprotocols/client/components/settingsTable/settingsTable.styl
+++ b/Packages/hangingprotocols/client/components/settingsTable/settingsTable.styl
@@ -4,7 +4,7 @@ table.settingsTable
   thead
     tr
       th
-        color: $defaultColor
+        theme('color', '$defaultColor')
         text-align: center
 
       th:first-child
@@ -15,7 +15,7 @@ table.settingsTable
 
     tr
       td
-        color: $defaultColor
+        theme('color', '$defaultColor')
         text-align: center
 
         .editSetting
@@ -24,10 +24,10 @@ table.settingsTable
           transition(all 0.1s ease)
           
           &:hover
-            color: $hoverColor
+            theme('color', '$hoverColor')
             
           &:active  
-            color: $activeColor
+            theme('color', '$activeColor')
             
       td:first-child
         text-align: left
@@ -35,14 +35,14 @@ table.settingsTable
 .addSettingContainer
   margin: 10px 0
   text-align: center
-  color: $defaultColor
+  theme('color', '$defaultColor')
 
   .addSetting
     cursor: pointer
     transition(all 0.1s ease)
     
     &:hover
-      color: $hoverColor
+      theme('color', '$hoverColor')
       
     &:active  
-      color: $activeColor
\ No newline at end of file
+      theme('color', '$activeColor')
\ No newline at end of file
diff --git a/Packages/hangingprotocols/client/components/stageDetails/stageDetails.styl b/Packages/hangingprotocols/client/components/stageDetails/stageDetails.styl
index e9c6d0190..ea8dc373e 100644
--- a/Packages/hangingprotocols/client/components/stageDetails/stageDetails.styl
+++ b/Packages/hangingprotocols/client/components/stageDetails/stageDetails.styl
@@ -14,19 +14,19 @@
 
   h3
   label
-    color: $defaultColor
+    theme('color', '$defaultColor')
 
   label
     margin-right: 10px
     width: 25%
 
   input
+    theme('background-color', '$boxBackgroundColor')Dark
     min-width: 50px
     width: 40%
     border: none
-    background: $boxBackgroundColorDark
-    color: $defaultColor
+    theme('color', '$defaultColor')
     text-align: center
 
   .stageEditorSection
-    margin: 30px 0
\ No newline at end of file
+    margin: 30px 0
diff --git a/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl b/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl
index c283529ef..e5d24a7a1 100644
--- a/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl
+++ b/Packages/hangingprotocols/client/components/stageSortable/stageSortable.styl
@@ -8,14 +8,14 @@
       padding: 3px
 
       span
-        color: $defaultColor
+        theme('color', '$defaultColor')
         cursor: pointer
 
         &:hover
-          color: $hoverColor
+          theme('color', '$hoverColor')
         
         &.active
-          color: $activeColor
+          theme('color', '$activeColor')
 
     .sortable-handle
       cursor: move
@@ -36,44 +36,44 @@
 
     .deleteStage
       cursor: pointer
-      color: $defaultColor
+      theme('color', '$defaultColor')
       transition(all 0.1s ease)
       
       &:hover
-        color: $hoverColor
+        theme('color', '$hoverColor')
         
       &:active  
-        color: $activeColor
+        theme('color', '$activeColor')
 
   .addStage
     margin: 10px 0
     text-align: center
-    color: $defaultColor
+    theme('color', '$defaultColor')
 
     #addStage
       transition(all 0.1s ease)
       
       &:hover
-        color: $hoverColor
+        theme('color', '$hoverColor')
         
       &:active  
-        color: $activeColor
+        theme('color', '$activeColor')
 
   .moveStageButtons
     margin: 10px 0
     text-align: center
 
     a
-      color: $defaultColor
+      theme('color', '$defaultColor')
       cursor: pointer
       text-decoration: none
       transition(all 0.1s ease)
       
       &:hover
-        color: $hoverColor
+        theme('color', '$hoverColor')
         
       &:active  
-        color: $activeColor
+        theme('color', '$activeColor')
 
       &[disabled="true"]
         opacity: 0.7
diff --git a/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl b/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl
index 8ae55fe18..f64cdb223 100644
--- a/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl
+++ b/Packages/hangingprotocols/client/components/textEntryDialog/textEntryDialog.styl
@@ -1,6 +1,9 @@
 @import "{design}/app.styl"
 
 .textEntryDialog
+  theme('border', '1px solid $uiBorderColor')
+  theme('background', '$uiGrayDarkest')
+  theme('color', '$textSecondaryColor')
   display: none
   position: absolute
   top: 0
@@ -13,12 +16,8 @@
   margin: auto
   padding: 10px
   outline: none
-
   opacity: 0.95
   border-radius: 8px
-  border: 1px solid $uiBorderColor
-  background: $uiGrayDarkest
-  color: $textSecondaryColor
 
   .dialogContent
     margin-bottom: 10px
@@ -36,4 +35,4 @@
     color: black
     height: 30px
     border-radius: 2px
-    border: 0
\ No newline at end of file
+    border: 0
diff --git a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl
index 0b8428f90..d1bb55b7b 100644
--- a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl
+++ b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.styl
@@ -22,22 +22,22 @@
       display: none
 
     .header
+      theme('background-color', '$uiGray')
+      theme('color', '$textPrimaryColor')
       height: 33px
       line-height: 33px
       font-weight: bold
       font-size: 14px
       padding: 1px 13px 0
-      color: $textPrimaryColor
-      background-color: $uiGray
 
     .form-group
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       margin-bottom: 0
       padding: 7px 27px 7px 11px
       width: 100%
 
       &:not(:last-child)
-        border-bottom: $uiBorderThickness solid $uiBorderColorDark
+        theme('border-bottom', '%s solid $uiBorderColorDark' % $uiBorderThickness)
 
       & > .wrapperText
         display: block
@@ -81,21 +81,21 @@
     .buttonSection
       cursor: pointer
       height: 90px
-      color: $defaultColor
+      theme('color', '$defaultColor')
 
       &:hover
-        color: $hoverColor
+        theme('color', '$hoverColor')
 
         .svgContainer
           svg
-            fill: $hoverColor
+            theme('fill', '$hoverColor')
 
       &:active
-        color: $activeColor
+        theme('color', '$activeColor')
 
         .svgContainer
           svg
-            fill: $activeColor
+            theme('fill', '$activeColor')
 
       div
         float: left
@@ -112,4 +112,4 @@
         svg
           width: 36px
           height: 36px
-          fill: $textPrimaryColor
+          theme('fill', '$textPrimaryColor')
diff --git a/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl b/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl
index 528e032df..3fe96cb04 100644
--- a/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl
+++ b/Packages/lesiontracker/client/components/caseProgress/caseProgress.styl
@@ -13,15 +13,15 @@
     margin-left: 22px
 
     h5
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       line-height: 46px
       margin: 0
       font-size: 15px
       font-weight: bold
 
     button.btn
-      background-color: $activeColor
-      border: 1px solid $uiBorderColorActive
+      theme('background-color', '$activeColor')
+      theme('border', '1px solid $uiBorderColorActive')
       color: #000
       cursor: pointer
       font-size: 15px
diff --git a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
index 69807f422..70b178a6a 100644
--- a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
+++ b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
@@ -25,11 +25,11 @@
         transform(translateX(0%))
 
   .sidebar-left
+    theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
     max-width: $studiesSidebarMenuWidth
     order: 1
     flex: 1
     margin-left: - $studiesSidebarMenuWidth
-    border-right: $uiBorderThickness $uiBorderColor solid
 
     &.sidebar-open
       margin-left: 0
@@ -60,7 +60,7 @@
       max-width: $lesionsSidebarMenuWidth + 270px
 
     &:before
-      background-color: $uiBorderColor
+      theme('background-color', '$uiBorderColor')
       content: ''
       display: block
       height: 100%
@@ -73,6 +73,6 @@
       margin-right: 0
 
   .studiesListedChanger
+    theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
     padding: 20px 10px
     text-align: center
-    border-bottom: $uiBorderThickness $uiBorderColor solid
diff --git a/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl b/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl
index fc37495bc..27fa6756a 100644
--- a/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl
+++ b/Packages/lesiontracker/client/components/lesionTable/lesionTable.styl
@@ -1,7 +1,7 @@
 @import "{design}/app"
 
 #lesionTableContainer
-  background-color: $primaryBackgroundColor
+  theme('background-color', '$primaryBackgroundColor')
   height: 100%
   width: 100%
 
diff --git a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl
index 08c47f4f5..edbc8416f 100644
--- a/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl
+++ b/Packages/lesiontracker/client/components/lesionTableHUD/lesionTableHUD.styl
@@ -22,9 +22,9 @@ $borderColor = rgba(77, 99, 110, 0.81)
     padding-left: 0
 
   .header
-    background: $uiGrayDarkest
+    theme('background', '$uiGrayDarkest')
+    theme('color', '$textSecondaryColor')
     border-bottom: $uiBorderThickness solid $borderColor
-    color: $textSecondaryColor
     font-weight: 300
     font-size: 20px
     height: 55px
@@ -34,12 +34,12 @@ $borderColor = rgba(77, 99, 110, 0.81)
     width: 100%
 
     svg.buttonClose
-      color: $defaultColor
+      theme('color', '$defaultColor')
       cursor: pointer
       height: 14px
       position: absolute
       right: 14px
-      stroke: $defaultColor
+      theme('stroke', '$defaultColor')
       top: 20px
       width: 14px
 
@@ -48,19 +48,19 @@ $borderColor = rgba(77, 99, 110, 0.81)
     padding-bottom: 20px
 
   .footer
+    theme('background', '$uiGrayDarkest')
+    border-top: $uiBorderThickness solid $borderColor
     width: 100%
     height: 70px
     position: absolute
     bottom: 0
-    background: $uiGrayDarkest
-    border-top: $uiBorderThickness solid $borderColor
     padding: 10px
 
     .toolbarSectionButton
       display: inline-block
-      color: $defaultColor
-      fill: $defaultColor
-      stroke: $defaultColor
+      theme('color', '$defaultColor')
+      theme('fill', '$defaultColor')
+      theme('stroke', '$defaultColor')
       padding: 0 10px
       height: $toolbarHeight
       min-width: 30px
@@ -85,15 +85,15 @@ $borderColor = rgba(77, 99, 110, 0.81)
         height: 21px
 
       &:active, &.active
-        color: $activeColor
+        theme('color', '$activeColor')
 
         svg
-          fill: $activeColor
-          stroke: $activeColor
+          theme('fill', '$activeColor')
+          theme('stroke', '$activeColor')
 
       &:hover
-        color: $hoverColor
+        theme('color', '$hoverColor')
 
         svg
-          fill: $hoverColor
-          stroke: $hoverColor
+          theme('fill', '$hoverColor')
+          theme('stroke', '$hoverColor')
diff --git a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl
index 8352934cf..9d8d65a25 100644
--- a/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl
+++ b/Packages/lesiontracker/client/components/lesionTableHeaderRow/lesionTableHeaderRow.styl
@@ -3,10 +3,10 @@
 $headerRowHeight = 63px
 
 .lesionTableHeaderRow
-  background-color: $uiGrayDarker
-  color: $textSecondaryColor
+  theme('background-color', '$uiGrayDarker')
+  theme('color', '$textSecondaryColor')
   display: flex
-  fill: $textSecondaryColor
+  theme('fill', '$textSecondaryColor')
   height: $headerRowHeight
   line-height: $headerRowHeight
   margin-top: 2px
@@ -35,13 +35,13 @@ $headerRowHeight = 63px
       max-width: 11px
 
       &:hover
-        fill: $hoverColor
+        theme('fill', '$hoverColor')
 
       &:active
-        fill: $activeColor
+        theme('fill', '$activeColor')
 
   .type
-    color: $textSecondaryColor
+    theme('color', '$textSecondaryColor')
     font-size: 22px
     font-weight: 300
     line-height: $headerRowHeight
@@ -49,8 +49,8 @@ $headerRowHeight = 63px
     text-align: left
 
   .numberOfLesions
+    theme('color', '$uiSkyBlue')
     float: right
-    color: $uiSkyBlue
     font-weight: 300
     font-size: 40px
     max-width: 54px
@@ -63,7 +63,7 @@ $headerRowHeight = 63px
     text-align: right
 
     .maxNumLesions
-      background-color: $textSecondaryColor
+      theme('background-color', '$textSecondaryColor')
       border-radius: 3px
       color: black
       display: table
@@ -79,5 +79,5 @@ $headerRowHeight = 63px
 
     &.warning
       .maxNumLesions
-        color: $textPrimaryColor
-        background-color: $uiYellow
\ No newline at end of file
+        theme('background-color', '$uiYellow')
+        theme('color', '$textPrimaryColor')
diff --git a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
index aa9ca8ba9..5e38b2c4e 100644
--- a/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
+++ b/Packages/lesiontracker/client/components/lesionTableRow/lesionTableRow.styl
@@ -10,7 +10,7 @@
   width: calc(100% + 6px)
 
   &:before
-    background-color: $activeColor
+    theme('background-color', '$activeColor')
     border-top-left-radius: 7px
     border-bottom-left-radius: 7px
     content: ''
@@ -30,16 +30,16 @@
       opacity: 1
 
     .lesionRowSidebar
-      color: $activeColor
+      theme('color', '$activeColor')
 
     .rowOptions
       height: 35px
       visibility: visible
 
   &.response-status .lesionRowSidebar .response-status-icon
-    background-color: $defaultColor
+    theme('background-color', '$defaultColor')
+    theme('color', '$uiGray')
     border-radius: 11px
-    color: $uiGray
     font-size: 12px
     font-weight: 700
     height: 21px
@@ -49,8 +49,8 @@
     width: 21px
 
   &.warning .lesionRowSidebar
-    color: $textPrimaryColor
-    background-color: $uiYellow
+    theme('background-color', '$uiYellow')
+    theme('color', '$textPrimaryColor')
 
     .warning-icon, svg
       width: 22px
@@ -60,31 +60,31 @@
       margin: 7px auto 0
 
     svg
-      fill: $textPrimaryColor
+      theme('fill', '$textPrimaryColor')
 
   .rowOptions
-    background-color: $uiGrayDarker
+    theme('background-color', '$uiGrayDarker')
     height: 0
     overflow: hidden
     transition(all 0.3s ease)
     visibility: hidden
 
     .rowAction
-      color: $defaultColor
+      theme('color', '$defaultColor')
       cursor: pointer
       line-height: 35px
       transition(all 0.3s ease)
 
       &:hover, &:active
-        color: $textPrimaryColor
+        theme('color', '$textPrimaryColor')
 
         svg
-          fill: $textPrimaryColor
-          stroke: $textPrimaryColor
+          theme('fill', '$textPrimaryColor')
+          theme('stroke', '$textPrimaryColor')
 
     svg
-      fill: $defaultColor
-      stroke: $defaultColor
+      theme('fill', '$defaultColor')
+      theme('stroke', '$defaultColor')
       transition(all 0.3s ease)
 
       &.edit-icon
@@ -96,8 +96,8 @@
         height: 11px
 
   .lesionRowSidebar
-    background: $uiGray
-    color: $textSecondaryColor
+    theme('background', '$uiGray')
+    theme('color', '$textSecondaryColor')
     cursor: pointer
     flex: 1
     max-width: 30px
@@ -120,7 +120,7 @@
     .location
       font-weight: 400
       font-size: 14px
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
       height: 30px
       line-height: 30px
       margin-left: -2px
diff --git a/Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.styl b/Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.styl
index 0457b0c3f..622c188a0 100644
--- a/Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.styl
+++ b/Packages/lesiontracker/client/components/lesionTableTimepointCell/lesionTableTimepointCell.styl
@@ -1,6 +1,6 @@
 @import "{design}/app"
 
 .lesionTableTimepointCell
-  border-left: $uiBorderThickness $uiBorderColor solid
-  color: $textPrimaryColor
+  theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
+  theme('color', '$textPrimaryColor')
   padding: 0 10px
diff --git a/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl b/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl
index 93e732fc5..18811e41e 100644
--- a/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl
+++ b/Packages/lesiontracker/client/components/lesionTableTimepointHeader/lesionTableTimepointHeader.styl
@@ -5,18 +5,18 @@
   justify-content: space-around
 
   div
-    border-left: $uiBorderColor $uiBorderThickness solid
+    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
     font-weight: 400
     padding-left: 12px
     text-align: left
 
   .timepointName
-    color: $textSecondaryColor
+    theme('color', '$textSecondaryColor')
     font-size: 12px
     line-height: 12px
 
   .timepointDate
-    color: $textPrimaryColor
+    theme('color', '$textPrimaryColor')
     font-size: 14px
     line-height: 20px
     padding-bottom: 6px
diff --git a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl
index 1619a3359..a8c2b9261 100644
--- a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl
+++ b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl
@@ -9,8 +9,8 @@ $expandedHeight = 160px
 
 .topBar
   height: $topBarHeight
-  color: $textPrimaryColor
-  background-color: $primaryBackgroundColor
+  theme('color', '$textPrimaryColor')
+  theme('background-color', '$primaryBackgroundColor')
   transition(all 0.5s ease)
 
   .brandSection
@@ -26,14 +26,14 @@ $expandedHeight = 160px
       display: inline-block
       font-family: $logoFontFamily
       font-weight: $logoFontWeight
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       line-height: 30px
 
   .studyListLinkSection
-    border-left: $uiBorderThickness solid $uiBorderColor;
-    
+    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
+
   .btn
-    color: $textSecondaryColor
+    theme('color', '$textSecondaryColor')
     cursor: pointer
     font-size: 13px
     font-weight: 500
@@ -41,10 +41,10 @@ $expandedHeight = 160px
     margin-top: 3px
 
     &:hover
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
     &:active
-      color: $activeColor
+      theme('color', '$activeColor')
 
   &.studyList
     background-color: rgba(21, 25, 30, 0.7)
@@ -75,5 +75,5 @@ $expandedHeight = 160px
   .tab-pane
     .viewerContainer
       .loadingTextDiv
-        color: $textSecondaryColor
+        theme('color', '$textSecondaryColor')
         font-size: 30px
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
index bfbf89da1..502d0f3a6 100644
--- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
@@ -10,9 +10,6 @@
       opacity: 0
 
   .btn-add
-    // color: $textColorActive
-    // background-color: $activeColor
-    // border: 2px solid $uiBorderColor
     theme('color', '$textColorActive')
     theme('background-color', '$activeColor')
     theme('border', '2px solid $uiBorderColor')
@@ -46,7 +43,7 @@
     position: relative
 
     .icon-check
-      background-color: $activeColor
+      theme('background-color', '$activeColor')
       left: -46px
       position: absolute
       top: 3px
@@ -73,10 +70,10 @@
         animateFadeOut()
 
       button
+        theme('border', '1px solid $uiBorderColor')
+        theme('color', '$textPrimaryColor')
         background-color: transparent
         border-radius: 16px
-        border: 1px solid $uiBorderColor
-        color: $textPrimaryColor
         font-weight: normal
         height: 31px
         line-height: 31px
diff --git a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl
index 09bc9fb27..465ef4aef 100644
--- a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl
+++ b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl
@@ -11,12 +11,12 @@ $circleSize = 46px
 
   #svg circle
     stroke-dashoffset: 0
-    stroke: $uiBorderColorDark
+    theme('stroke', '$uiBorderColorDark')
     stroke-width: 3px
     vendorize(transition, stroke-dashoffset 1s linear)
 
   #svg #bar
-    stroke: $activeColor
+    theme('stroke', '$activeColor')
     vendorize(transform, rotate(270deg))
     vendorize(transform-origin, center center)
 
@@ -28,14 +28,14 @@ $circleSize = 46px
     font-weight: 700
     font-size: 17px
     text-align: center
-    color: $activeColor
+    theme('color', '$activeColor')
     top: 0
 
     svg
-      fill: $activeColor
+      theme('fill', '$activeColor')
       left: 50%
       position: absolute
-      stroke: $activeColor
+      theme('stroke', '$activeColor')
       top: 50%
       transform(translateX(-50%) translateY(-50%))
 
diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
index 13a5ca71d..00da950df 100644
--- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
+++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
@@ -15,7 +15,7 @@ $seriesSpacing = 2px
       transform(translateX(-50%))
 
   &.left
-    border-right: 1px solid $uiBorderColor
+    theme('border-right', '1px solid $uiBorderColor')
     right: 50%
 
   &.right
@@ -26,7 +26,7 @@ $seriesSpacing = 2px
     z-index: 3
 
   &:before
-    background-color: $primaryBackgroundColor
+    theme('background-color', '$primaryBackgroundColor')
     bottom: 0
     content: ''
     left: 0
@@ -98,10 +98,10 @@ $seriesSpacing = 2px
       .studyTimepointBrowser
         background-color: transparent
       .studyTimepointStudy.active .studyModality
-        box-shadow: inset 0 0 0 3px $activeColor
+        theme('box-shadow', 'inset 0 0 0 3px $activeColor')
       .studyBox
-        background-color: $uiGrayDark
-        border: solid 1px $activeColor
+        theme('background-color', '$uiGrayDark')
+        theme('border', 'solid 1px $activeColor')
         border-radius: 11px
         display: block
         height: $switchSize
@@ -113,7 +113,7 @@ $seriesSpacing = 2px
       width: $switchSize + $seriesSpacing
 
       .seriesItem
-        background-color: $boxBackgroundColorDark
+        theme('background-color', '$boxBackgroundColor')Dark
         border-radius: 3px
         height: 15px
         margin: $seriesSpacing
@@ -121,17 +121,17 @@ $seriesSpacing = 2px
 
         &.count
           background-color: transparent
-          color: $textPrimaryColor
+          theme('color', '$textPrimaryColor')
           font-size: 12px
           font-weight: 500
           line-height: 17px
           text-align: center
 
         &.active
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
 
     .label
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
       display: block
       font-size: 12px
       font-weight: 300
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl
index 17223a024..4d736d99e 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl
@@ -3,15 +3,15 @@
 $timepointButtonHeight = 55px
 
 .studyTimepointBrowser
-  background-color: $primaryBackgroundColor
+  theme('background-color', '$primaryBackgroundColor')
   float: left
   height: 100%
   position: relative
   width: 100%
 
   .timepointButtonContainer
-    background-color: $primaryBackgroundColor
-    border-bottom: 1px solid $uiBorderColor
+    theme('background-color', '$primaryBackgroundColor')
+    theme('border-bottom', '1px solid $uiBorderColor')
     display: none
     height: $timepointButtonHeight
     left: 10px
@@ -38,7 +38,7 @@ $timepointButtonHeight = 55px
         transform: rotateX(180deg)
       .timepointFollowupTitle
         font-size: 14px
-        color: $textSecondaryColor
+        theme('color', '$textSecondaryColor')
         text-transform: uppercase
 
   .timepointHeader
@@ -50,7 +50,7 @@ $timepointButtonHeight = 55px
     .timepointFollowupTitle
     .timepointDate
     .timepointModalities
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
       transition($sidebarTransition)
 
     &:hover
@@ -59,7 +59,7 @@ $timepointButtonHeight = 55px
       .expandIcon i
       .timepointDate
       .timepointModalities
-        color: $textPrimaryColor !important
+        theme('color', '$textPrimaryColor') !important
 
     .timepointDetails
     .timepointModalities
@@ -70,10 +70,10 @@ $timepointButtonHeight = 55px
       overflow: hidden
 
     .expandIcon i
-      color: $defaultColor
+      theme('color', '$defaultColor')
 
     .timepointFollowupTitle
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       padding-top: 2px
 
   .studyTimepointScrollArea
@@ -91,7 +91,7 @@ $timepointButtonHeight = 55px
       margin-right: 16px
 
   .studySidebarTimepoint .thumbnailEntry.active:before
-    background-color: $activeColor
+    theme('background-color', '$activeColor')
     border-top-right-radius: 7px
     border-bottom-right-radius: 7px
     content: ''
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
index 2d058dae9..e1d31d584 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
@@ -3,8 +3,6 @@
 $boxBorderColor = transparent
 $boxHoverBackgroundColor = #14191E
 $boxHoverBorderColor = #2d4660
-$boxActiveBackgroundColor = $activeColor
-$boxActiveTextColor = $primaryBackgroundColor
 $boxActiveBorderColor = #131D29
 $boxWidth = 50px
 $borderThickness = 2px
@@ -41,11 +39,11 @@ $spacerY = 12px
   &.active
     .studyModality
       .studyModalityBox
-        color: $boxActiveTextColor
+        theme('color', '$primaryBackgroundColor')
         &
         &:before
         &:after
-          background-color: $boxActiveBackgroundColor
+          theme('background-color', '$activeColor')
           border-color: $boxActiveBorderColor
 
   &:not(.active) .studyTimepointThumbnails
@@ -69,10 +67,10 @@ $spacerY = 12px
     border-color: $boxHoverBorderColor
 
     &.additional
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
 
   &.additional
-    color: $textPrimaryColor
+    theme('color', '$textPrimaryColor')
     font-size: 16px
     font-weight: normal
     height: 91px
@@ -89,13 +87,13 @@ $spacerY = 12px
     top: $spacerY
     .studyDate
       margin-top: 8px
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
     .studyDescription
       margin-top: 8px
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
 
   .studyModalityBox
-    color: $textSecondaryColor
+    theme('color', '$textSecondaryColor')
     line-height: $boxWidth
     margin-left: $nestingMargin * 2
     margin-top: $nestingMargin * 2
@@ -109,8 +107,8 @@ $spacerY = 12px
     &
     &:before
     &:after
-      background-color: $boxBackgroundColor
-      border: $borderThickness solid $primaryBackgroundColor
+      theme('border', '$borderThickness solid $primaryBackgroundColor')
+      theme('background-color', '$boxBackgroundColor')
       border-radius: $boxBorderRadius
       height: $boxWidth + ($borderThickness * 2)
       transition($sidebarTransition)
diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
index 389e1ecec..f093294e2 100644
--- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
+++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
@@ -1,7 +1,7 @@
 @import "{design}/app"
 
 .toolbarSection
-  border-bottom: $uiBorderColor $uiBorderThickness solid
+  theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
   flex: 0 0 auto
   height: $toolbarHeight
   overflow: hidden
@@ -14,11 +14,11 @@
     height: $toolbarHeight + $toolbarDrawerHeight
 
   .toolbarSectionEntry
-    color: $defaultColor
+    theme('color', '$defaultColor')
     cursor: pointer
     display: inline-block
-    fill: $defaultColor
+    theme('fill', '$defaultColor')
     margin-top: 3px
     min-width: 30px
-    stroke: $defaultColor
-    text-align: center
\ No newline at end of file
+    theme('stroke', '$defaultColor')
+    text-align: center
diff --git a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl
index c55aa873e..45a733782 100644
--- a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl
+++ b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl
@@ -5,7 +5,7 @@
   height: 100%
 
   .dropdown-toggle
-    color: $defaultColor
+    theme('color', '$defaultColor')
     cursor: pointer
     font-size: 13px
     font-weight: 400
@@ -13,19 +13,19 @@
     text-decoration: none
 
     .menuButton
-      border-left: solid 1px $defaultColor
+      theme('border-left', 'solid 1px $defaultColor')
       display: inline-block
       height: 18px
       padding: 0 8px
 
       .fa
-        color: $defaultColor
+        theme('color', '$defaultColor')
         font-size: 17px
         line-height: 18px
 
       .caret-down
+        theme('color', '$uiLightGray')
         margin: 0 4px 4px 2px
-        color: $uiLightGray
 
   ul.dropdown-menu
     li
diff --git a/Packages/lesiontracker/client/components/viewer/viewer.styl b/Packages/lesiontracker/client/components/viewer/viewer.styl
index 250aa52d7..0e2f65bb1 100644
--- a/Packages/lesiontracker/client/components/viewer/viewer.styl
+++ b/Packages/lesiontracker/client/components/viewer/viewer.styl
@@ -19,4 +19,4 @@
     &:not(:last-child)
     .removable
       .imageViewerViewport
-        border-right: $uiBorderThickness solid $uiBorderColor
+        theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
diff --git a/Packages/viewerbase/client/components/basic/aboutModal/aboutModal.styl b/Packages/viewerbase/client/components/basic/aboutModal/aboutModal.styl
index 6df9f2012..4c61e50af 100644
--- a/Packages/viewerbase/client/components/basic/aboutModal/aboutModal.styl
+++ b/Packages/viewerbase/client/components/basic/aboutModal/aboutModal.styl
@@ -6,7 +6,7 @@
       display: inline-block
       font-family: $logoFontFamily
       font-weight: $logoFontWeight
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       font-size: 20pt
       line-height: 45px
       text-decoration: none
diff --git a/Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl b/Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl
index bbf320102..1d4180008 100644
--- a/Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl
+++ b/Packages/viewerbase/client/components/studyBrowser/imageThumbnail/imageThumbnail.styl
@@ -1,15 +1,15 @@
 @import "{design}/app"
 
 .thumbnailEntry.active .imageThumbnail
-  border-color: $activeColor
+  theme('border-color', '$activeColor')
   box-shadow: none
   transition($sidebarTransition)
 
 .imageThumbnail
-  background-color: $primaryBackgroundColor
+  theme('box-shadow', 'inset 0 0 0 1px $uiBorderColorDark')
+  theme('background-color', '$primaryBackgroundColor')
   border: 5px solid transparent
   border-radius: 12px
-  box-shadow: inset 0 0 0 1px $uiBorderColorDark
   height: 135px
   margin: 0 auto
   padding 1px 7px
@@ -18,7 +18,7 @@
   width: 217px
 
   &:hover
-    border-color: $hoverColor
+    theme('border-color', '$hoverColor')
     box-shadow: none
 
 .imageThumbnailCanvas
@@ -28,7 +28,7 @@
 .thumbnailLoadingIndicator
   display: none
   pointer-events: none
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
   height: 20px
   width: 100%
   top: 0
diff --git a/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl b/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl
index 310d7724f..eb058f6ac 100644
--- a/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl
+++ b/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl
@@ -13,7 +13,7 @@ $seriesCountBackgroundColor = #678696
     cursor: -moz-grab
 
   .seriesDetails
-    color: $textPrimaryColor
+    theme('color', '$textPrimaryColor')
     font-size: 14px
     line-height: 1.3em
     min-height: 36px
@@ -33,7 +33,7 @@ $seriesCountBackgroundColor = #678696
       margin-right: 4px
 
     .seriesInformationNumbers
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
       float: left
       font-size: 12px
 
@@ -42,7 +42,7 @@ $seriesCountBackgroundColor = #678696
       text-align: right
 
       strong
-        color: $activeColor
+        theme('color', '$activeColor')
         font-size: 10px
         font-weight: 900
 
@@ -52,7 +52,7 @@ $seriesCountBackgroundColor = #678696
         position: relative
 
         &:after
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
           box-shadow: 1px 1px rgba(0, 0, 0, .115)
           left: -5px
           position: absolute
@@ -60,7 +60,7 @@ $seriesCountBackgroundColor = #678696
 
         &
         &:after
-          border: 1px solid $primaryBackgroundColor
+          theme('border', '1px solid $primaryBackgroundColor')
           content: ''
           display: block
           height: 11px
diff --git a/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl b/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl
index 3ff9125e2..21919e4c4 100644
--- a/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl
+++ b/Packages/viewerbase/client/components/viewer/annotationDialogs/annotationDialogs.styl
@@ -1,6 +1,9 @@
 @import "{design}/app.styl"
 
 .annotationDialog
+  theme('border', '1px solid $uiBorderColor')
+  theme('background', '$uiGrayDarkest')
+  theme('color', '$textSecondaryColor')
   display: none
   z-index: 1000
   position: absolute
@@ -9,17 +12,12 @@
   left: 0
   right: 0
   margin: auto
-
   overflow: hidden
   padding: 10px
   width: 300px
   height: 140px
-
   opacity: 0.95
   border-radius: 8px
-  border: 1px solid $uiBorderColor
-  background: $uiGrayDarkest
-  color: $textSecondaryColor
 
   h5, label
     font-weight: 400
@@ -31,4 +29,4 @@
     margin-left: 5px
 
   .annotationDialogConfirm
-    float: right
\ No newline at end of file
+    float: right
diff --git a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl
index c5353ac00..a9966399f 100644
--- a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl
+++ b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.styl
@@ -1,6 +1,9 @@
 @import "{design}/app.styl"
 
 #cineDialog
+  theme('border', '1px solid $uiBorderColor')
+  theme('background', '$uiGrayDarkest')
+  theme('color', '$textSecondaryColor')
   display: none
   z-index: 1000
   position: absolute
@@ -8,17 +11,12 @@
   left: auto
   bottom: 3px
   right: 3px
-
   overflow: hidden
   padding: 10px
   width: 300px
   height: 175px
-
   opacity: 0.95
   border-radius: 8px
-  border: 1px solid $uiBorderColor
-  background: $uiGrayDarkest
-  color: $textSecondaryColor
 
   h5, label
     font-weight: 400
@@ -26,18 +24,18 @@
   box-sizing: border-box
 
   .btn
-    background: $uiGrayDarkest
-    color: $textSecondaryColor
+    theme('background', '$uiGrayDarkest')
+    theme('color', '$textSecondaryColor')
 
     &:hover
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
     &:active, &.active
-      color: $activeColor
+      theme('color', '$activeColor')
 
   #cineOptions
     padding: 5px 0
     overflow: auto
 
     #loopSection
-      padding-right: 12px
\ No newline at end of file
+      padding-right: 12px
diff --git a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl
index 647a147af..a4d1cd86a 100644
--- a/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl
+++ b/Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl
@@ -75,7 +75,7 @@ $imageSliderCursor = grab
       // --- Style the range thumb --- //
       &::-webkit-slider-thumb
         -webkit-appearance: none !important
-        background-color: $imageSliderColor
+        theme('background-color', '$imageSliderColor')
         border-radius: $imageSliderBorderRadius
         border: $imageSliderBorder
         height: $imageSliderWidth
@@ -84,10 +84,10 @@ $imageSliderCursor = grab
         margin-top: -7px
 
         &:active
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
 
       &::-moz-range-thumb
-        background-color: $imageSliderColor
+        theme('background-color', '$imageSliderColor')
         border-radius: $imageSliderBorderRadius
         border: $imageSliderBorder
         height: $imageSliderWidth
@@ -96,10 +96,10 @@ $imageSliderCursor = grab
         z-index: 7
 
         &:active
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
 
       &::-ms-thumb
-        background-color: $imageSliderColor
+        theme('background-color', '$imageSliderColor')
         border-radius: $imageSliderBorderRadius
         border: $imageSliderBorder
         height: $imageSliderWidth
@@ -107,7 +107,7 @@ $imageSliderCursor = grab
         cursor: $imageSliderCursor
 
         &:active
-          background-color: $activeColor
+          theme('background-color', '$activeColor')
 
 // Set left position in IE, border-width attribute breaks left position of imageSlider
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
diff --git a/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.styl b/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.styl
index bdeacfc8e..afd6269a2 100644
--- a/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.styl
+++ b/Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.styl
@@ -15,7 +15,7 @@
 .viewportInstructions
   display: none
   font-size: 13px
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
   line-height: 18px
   pointer-events: none // Necessary for drag/drop through to cornerstone element below
   text-align: center
diff --git a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl
index 7b7629839..f611e626b 100644
--- a/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl
+++ b/Packages/viewerbase/client/components/viewer/layoutChooser/layoutChooser.styl
@@ -3,29 +3,28 @@
 $borderColor = rgba(77, 99, 110, 0.81)
 
 .layoutChooser
+  theme('background', '$uiGrayDarkest')
   width: 92px
   height: 92px
   min-width: 92px // to override bootstrap's dropdown-menu class
   min-height: 92px
-
-  //background-color: $primaryBackgroundColor
+  // theme('background-color', '$primaryBackgroundColor')
   opacity: 0.95
   border-radius: 8px
   border: 1px solid $borderColor;
-  background: $uiGrayDarkest
 
   &.open
     display: block
 
   table
     margin: 0 auto
-    
+
     td
+      theme('border', '1px solid $uiBorderColorDark')
       cursor: pointer
-      border: 1px solid $uiBorderColorDark
-      width: 20px
       height: 20px
       transition(background-color 0.1s ease)
-      
+      width: 20px
+
       &:hover, &.hover // Add the hover class here to be triggered by mouseenter/mouseleave
-        background-color: $activeColor
\ No newline at end of file
+        theme('background-color', '$activeColor')
diff --git a/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl b/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl
index ebe12e251..34a66a158 100644
--- a/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl
+++ b/Packages/viewerbase/client/components/viewer/loadingIndicator/loadingIndicator.styl
@@ -1,21 +1,21 @@
 @import "{design}/app.styl"
 
 .imageViewerLoadingIndicator
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
 
 .faded
   opacity: 0.5
 
 .imageViewerErrorLoadingIndicator
-  color: $uiYellow
-  
+  theme('color', '$uiYellow')
+
   p, h4
     text-align: center
     padding: 4px 0
-    
+
   p
     font-size: 11pt
-      
+
 .loadingIndicator
   display: none
   pointer-events: none // Necessary for click-through to cornerstone element below
@@ -26,11 +26,11 @@
   font-size: 18px
   z-index: 100
   background-color: rgba(0,0,0,0.75)
-  
+
   .indicatorContents
     position: absolute
     top: 40%
     width: 100%
     font-size: 30px
     font-weight: 300
-    text-align: center
\ No newline at end of file
+    text-align: center
diff --git a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl b/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl
index 2b9ef52f4..4de8e5427 100644
--- a/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl
+++ b/Packages/viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.styl
@@ -2,9 +2,9 @@
 
 .toolbarSectionButton
   display: inline-block
-  color: $defaultColor
-  fill: $defaultColor
-  stroke: $defaultColor
+  theme('color', '$defaultColor')
+  theme('fill', '$defaultColor')
+  theme('stroke', '$defaultColor')
   min-width: 30px
   cursor: pointer
   text-align: center
@@ -14,7 +14,7 @@
     cursor: not-allowed
 
   .buttonLabel
-    color: $textSecondaryColor
+    theme('color', '$textSecondaryColor')
     font-size: 12px
     font-weight: 500
 
@@ -34,22 +34,22 @@
 
   &:hover
     .buttonLabel
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
     svg
-      fill: $hoverColor
-      stroke: $hoverColor
+      theme('fill', '$hoverColor')
+      theme('stroke', '$hoverColor')
       
     i
-      color: $hoverColor
+      theme('color', '$hoverColor')
 
   &:active, &.active
     .buttonLabel
-      color: $activeColor
+      theme('color', '$activeColor')
 
     svg
-      fill: $activeColor
-      stroke: $activeColor
+      theme('fill', '$activeColor')
+      theme('stroke', '$activeColor')
       
     i
-      color: $activeColor
\ No newline at end of file
+      theme('color', '$activeColor')
\ No newline at end of file
diff --git a/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl b/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl
index 27f29e873..f9cfd6868 100644
--- a/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl
+++ b/Packages/viewerbase/client/components/viewer/toolbarSectionTools/toolbarSectionTools.styl
@@ -14,9 +14,9 @@ $distance = 12px
     white-space: nowrap
 
     .toolbarSectionDrawer
-      background-color: $uiGrayDarker
+      theme('background-color', '$uiGrayDarker')
       border-radius: 7px
-      color: $textPrimaryColor
+      theme('color', '$textPrimaryColor')
       content: ''
       display: block
       font-size: 18px
diff --git a/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl b/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl
index 0defc7727..547c11f21 100644
--- a/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl
+++ b/Packages/viewerbase/client/components/viewer/viewerMain/viewerMain.styl
@@ -11,8 +11,8 @@
 
     #imageViewerViewports
       .viewportContainer
+        theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness)
         float: left
-        border: $viewportBorderThickness solid $viewportBorderColor
 
         outline: 0 // Prevent blue outline in Chrome
 
@@ -22,12 +22,12 @@
           outline: 0 // Prevent blue outline in Chrome
 
         &:hover
-          border: $viewportBorderThickness solid $viewportBorderColorHover
-          
+          theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness)
+
         &.active, &:hover.active
-          border: $viewportBorderThickness solid $viewportBorderColorActive
+          theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness)
 
         .removable
           width: 100%
           height: 100%
-          position: relative // Necessary so that the viewportOverlay is on top of the viewports
\ No newline at end of file
+          position: relative // Necessary so that the viewportOverlay is on top of the viewports
diff --git a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
index b89bd8a1d..9821400a7 100644
--- a/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
+++ b/Packages/viewerbase/client/components/viewer/viewportOverlay/viewportOverlay.styl
@@ -3,7 +3,7 @@
 $viewportTagPadding = 20px
 
 .imageViewerViewportOverlay
-  color: $textSecondaryColor
+  theme('color', '$textSecondaryColor')
 
   .dicomTag
     position: absolute
diff --git a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl
index 04a0f9a55..67e8e7337 100644
--- a/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl
+++ b/Packages/worklist/client/components/studyContextMenu/studyContextMenu.styl
@@ -50,7 +50,7 @@
         color: black
 
         &:not(.disabled):hover
-          color: $activeColor
+          theme('color', '$activeColor')
           text-decoration: none
 
         &.disabled
diff --git a/Packages/worklist/client/components/worklist.styl b/Packages/worklist/client/components/worklist.styl
index a96826a8f..ed7b6c258 100644
--- a/Packages/worklist/client/components/worklist.styl
+++ b/Packages/worklist/client/components/worklist.styl
@@ -1,17 +1,17 @@
 @import "{design}/app"
 
 body
-  background-color: $primaryBackgroundColor
+  theme('background-color', '$primaryBackgroundColor')
 
 #tblStudyList
   tr
     height: 20px
 
 #worklistTab
-  background-color: $primaryBackgroundColor
+  theme('background-color', '$primaryBackgroundColor')
 
 .worklistContainer
-  background-color: $primaryBackgroundColor
+  theme('background-color', '$primaryBackgroundColor')
   margin: 0 auto
   color: white
   float: left;
@@ -22,7 +22,7 @@ body
   height: calc(100% - 91px)
 
   .loadingTextDiv
-    color: $textSecondaryColor
+    theme('color', '$textSecondaryColor')
     font-size: 30px
 
   .tab-pane
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.styl b/Packages/worklist/client/components/worklistResult/worklistResult.styl
index 186ac3771..dab56222a 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.styl
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.styl
@@ -1,20 +1,19 @@
 @import "{design}/app"
 
-$hoverColor = #2c363f
-$textPrimaryColor = white
-$textSecondaryColor = #91b9cd
+$tableHoverColor = #2c363f
+$tableTextPrimaryColor = white
+$tableTextSecondaryColor = #91b9cd
 
 $inputBackgroundColor = #2c363f
 $inputPlaceholderColor = lightgray
 
 $studyListToolbarHeight = 75px
-$theadBackgroundColor =  $uiGrayDarker
 $tablePadding = 8%
 $bodyCellHeight = 40px
 
 .studyListToolbar
+  theme('background', '$uiGrayDarker')
   height: $studyListToolbarHeight
-  background: $uiGrayDarker
   border-bottom: 2px solid black
   padding: 0 30px
 
@@ -24,7 +23,7 @@ $bodyCellHeight = 40px
   .header
     font-size: 22px
     font-weight: 300
-    color: $textSecondaryColor
+    color: $tableTextSecondaryColor
     padding: 0 10px
     line-height: $studyListToolbarHeight
 
@@ -33,14 +32,14 @@ $bodyCellHeight = 40px
     line-height: $studyListToolbarHeight
 
   .studyCount
+    theme('color', '$uiSkyBlue')
     font-size: 40px
     font-weight: 100
-    color: $uiSkyBlue
     padding: 0 10px
     line-height: $studyListToolbarHeight
 
 .theadBackground
-  background-color: $theadBackgroundColor
+  theme('background-color', '$uiGrayDarker')
   width: 100%
   height: 122px
   position: absolute
@@ -54,18 +53,18 @@ $bodyCellHeight = 40px
   z-index: 2
 
   .loadingTextDiv
-    color: $textSecondaryColor
+    color: $tableTextSecondaryColor
     font-size: 30px
 
   .notFound
-    color: $textSecondaryColor
+    color: $tableTextSecondaryColor
     font-size: 30px
     font-weight: 200
     text-align: center
 
   table#tblStudyList
     thead
-      background-color: $theadBackgroundColor
+      theme('background-color', '$uiGrayDarker')
       white-space: nowrap
 
       tr
@@ -85,7 +84,7 @@ $bodyCellHeight = 40px
             width: 100%
             min-width: 95px
             margin: 0 auto
-            color: $textPrimaryColor
+            color: $tableTextPrimaryColor
             font-weight: 400
             padding: 20px
 
@@ -97,10 +96,10 @@ $bodyCellHeight = 40px
               margin: 0 5px
 
             &:hover
-              color: $activeColor
+              theme('color', '$activeColor')
 
             &.active, &:active
-              color: $activeColor
+              theme('color', '$activeColor')
 
           input.worklist-search
             height: 34px
@@ -136,16 +135,15 @@ $bodyCellHeight = 40px
         background-color: black
 
         &:nth-child(even)
-          background-color: $uiGrayDarker
+          theme('background-color', '$uiGrayDarker')
 
         td
           height: $bodyCellHeight
           line-height: $bodyCellHeight
-          color: $textPrimaryColor
+          color: $tableTextPrimaryColor
           font-weight: 300
           border-top: 1px solid #436270
           white-space: nowrap
-
           transition(all 0.1s ease)
 
           &:first-child
@@ -155,15 +153,14 @@ $bodyCellHeight = 40px
             padding-right: $tablePadding
 
         &:hover, &:active, &.active
-          background-color: $hoverColor
+          background-color: $tableHoverColor
           color: white
 
           td
             // This selector is necessary to override bootstrap's 'table' class
             border-top: 1px solid #436270
             border-bottom: 1px solid #436270
-            background-color: $hoverColor
-
+            background-color: $tableHoverColor
 
 @media only screen and (max-width: 1000px)
   $tablePaddingMediumScreen = 10px
@@ -188,4 +185,4 @@ $bodyCellHeight = 40px
       th.accessionNumber, td.accessionNumber,
       th.modalities, td.modalities,
       th.numberOfStudyRelatedInstances, td.numberOfStudyRelatedInstances
-        display: none
\ No newline at end of file
+        display: none
diff --git a/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl b/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl
index 825737701..990c37355 100644
--- a/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl
+++ b/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl
@@ -5,7 +5,7 @@
     margin: 0 10px
 
     label
-      color: $textSecondaryColor
+      theme('color', '$textSecondaryColor')
       font-weight: 400
       cursor: pointer
 
@@ -13,10 +13,10 @@
         pointer-events: none
 
       &:hover
-        color: $hoverColor
+        theme('color', '$hoverColor')
 
       &:active
-        color: $activeColor
+        theme('color', '$activeColor')
 
     input
       width: 0.1px;

From 6e84a388b64841ea57cbd54eb4025336b741756f Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 31 Aug 2016 11:59:26 -0300
Subject: [PATCH 28/41] LT-67: Creating data parser and styling components with
 validation error

---
 Packages/design/package.js                    |  3 +-
 Packages/design/styles/components/states.styl |  7 +++++
 .../design/styles/imports/theme-tide.styl     |  5 ++++
 .../styles/imports/theme-tigerlilly.styl      |  5 ++++
 .../serverInformationDimse.html               |  2 +-
 .../client/components/base/mixins/checkbox.js |  2 +-
 .../client/components/base/mixins/formItem.js |  2 +-
 .../client/components/base/mixins/group.js    | 10 +++++--
 .../components/base/mixins/groupRadio.js      |  2 +-
 .../components/base/mixins/schemaData.js      | 30 +++++++++++++++++++
 .../components/base/mixins/selectTree.js      |  2 +-
 .../client/components/base/templates/div.html |  1 +
 .../components/base/templates/input.html      |  2 +-
 .../components/base/templates/select.html     |  2 +-
 Packages/worklist/both/schema.js              | 21 ++++++-------
 15 files changed, 76 insertions(+), 20 deletions(-)
 create mode 100644 Packages/design/styles/components/states.styl

diff --git a/Packages/design/package.js b/Packages/design/package.js
index 8b624df74..77f3ee544 100644
--- a/Packages/design/package.js
+++ b/Packages/design/package.js
@@ -37,7 +37,8 @@ Package.onUse(function(api) {
     api.addFiles([
         'styles/components/radio.styl',
         'styles/components/select2.styl',
-        'styles/components/selectTree.styl'
+        'styles/components/selectTree.styl',
+        'styles/components/states.styl'
     ], 'client');
 
     // Rounded Button Group
diff --git a/Packages/design/styles/components/states.styl b/Packages/design/styles/components/states.styl
new file mode 100644
index 000000000..78582a0b4
--- /dev/null
+++ b/Packages/design/styles/components/states.styl
@@ -0,0 +1,7 @@
+@import "{design}/app"
+
+.state-error:not(.component-group)
+    &.form-control, .form-control
+        theme('background-color', '$uiStateError')
+        theme('border-color', '$uiStateErrorBorder')
+        theme('color', '$uiStateErrorText')
diff --git a/Packages/design/styles/imports/theme-tide.styl b/Packages/design/styles/imports/theme-tide.styl
index ebc64a651..6f7d9d203 100644
--- a/Packages/design/styles/imports/theme-tide.styl
+++ b/Packages/design/styles/imports/theme-tide.styl
@@ -3,6 +3,11 @@ $themes['tide'] = {
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
+  // State pallete
+  $uiStateError: #FFCCCC
+  $uiStateErrorBorder: #993333
+  $uiStateErrorText: #661111
+
   $uiLightGray: #516873
   $uiGray: #263340
   $uiGrayDark: #16202B
diff --git a/Packages/design/styles/imports/theme-tigerlilly.styl b/Packages/design/styles/imports/theme-tigerlilly.styl
index 2e796532d..21292a45c 100644
--- a/Packages/design/styles/imports/theme-tigerlilly.styl
+++ b/Packages/design/styles/imports/theme-tigerlilly.styl
@@ -3,6 +3,11 @@ $themes['tigerlilly'] = {
   $uiYellow: #E29E4A
   $uiSkyBlue: #6FBDE2
 
+  // State pallete
+  $uiStateError: #FFCCCC
+  $uiStateErrorBorder: #CC6666
+  $uiStateErrorText: #661111
+
   $uiLightGray: #516873
   $uiGray: #263340
   $uiGrayDark: #16202B
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html
index 34eade647..5b94094f0 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationDimse/serverInformationDimse.html
@@ -1,7 +1,7 @@
 <template name="serverInformationDimse">
     <div class="panel panel-default panel-body">
         <div class="clearfix">
-            <h4 class="pull-left">Peer list</h4>
+            <h4 class="pull-left">Peer List</h4>
             <button class="btn btn-primary pull-right js-new-peer">New peer</button>
         </div>
         <hr>
diff --git a/Packages/ohif-core/client/components/base/mixins/checkbox.js b/Packages/ohif-core/client/components/base/mixins/checkbox.js
index 20071c4e0..0b05a65d3 100644
--- a/Packages/ohif-core/client/components/base/mixins/checkbox.js
+++ b/Packages/ohif-core/client/components/base/mixins/checkbox.js
@@ -16,7 +16,7 @@ OHIF.mixins.checkbox = new OHIF.Mixin({
             component.value = value => {
                 const isGet = _.isUndefined(value);
                 if (isGet) {
-                    return component.$element.is(':checked');
+                    return component.parseData(component.$element.is(':checked'));
                 }
 
                 component.$element.prop('checked', value);
diff --git a/Packages/ohif-core/client/components/base/mixins/formItem.js b/Packages/ohif-core/client/components/base/mixins/formItem.js
index 12f9fc308..118741b11 100644
--- a/Packages/ohif-core/client/components/base/mixins/formItem.js
+++ b/Packages/ohif-core/client/components/base/mixins/formItem.js
@@ -31,7 +31,7 @@ OHIF.mixins.formItem = new OHIF.Mixin({
             component.value = value => {
                 const isGet = _.isUndefined(value);
                 if (isGet) {
-                    return component.$element.val();
+                    return component.parseData(component.$element.val());
                 }
 
                 component.$element.val(value).trigger('change');
diff --git a/Packages/ohif-core/client/components/base/mixins/group.js b/Packages/ohif-core/client/components/base/mixins/group.js
index f64d3565e..3c5356831 100644
--- a/Packages/ohif-core/client/components/base/mixins/group.js
+++ b/Packages/ohif-core/client/components/base/mixins/group.js
@@ -98,21 +98,27 @@ OHIF.mixins.group = new OHIF.Mixin({
             };
 
             // Check if the form data is valid in its schema
+            const validateSelf = component.validate;
             component.validate = () => {
                 // Assume validation result as true
                 let result = true;
 
                 // Return true if there's no data schema defined
-                if (!component.schema) {
+                if (component.isForm && !component.schema) {
                     return result;
                 }
 
+                // Validate the component itself if it has a key
+                if (instance.data.pathKey && !validateSelf()) {
+                    result = false;
+                }
+
                 // Iterate over each registered form item and validate it
                 component.registeredItems.forEach(child => {
                     const key = child.templateInstance.data.key;
 
                     // Change result to false if any form item is invalid
-                    if (key && !child.validate()) {
+                    if ((key || instance.data.arrayValues) && !child.validate()) {
                         result = false;
                     }
                 });
diff --git a/Packages/ohif-core/client/components/base/mixins/groupRadio.js b/Packages/ohif-core/client/components/base/mixins/groupRadio.js
index ecedc5fd2..c366d75ce 100644
--- a/Packages/ohif-core/client/components/base/mixins/groupRadio.js
+++ b/Packages/ohif-core/client/components/base/mixins/groupRadio.js
@@ -21,7 +21,7 @@ OHIF.mixins.groupRadio = new OHIF.Mixin({
                 component.registeredItems.forEach(child => elements.push(child.$element[0]));
                 const $elements = $(elements);
                 if (isGet) {
-                    return $elements.filter(':checked').val();
+                    return component.parseData($elements.filter(':checked').val());
                 }
 
                 $elements.filter(`[value='${value}']`).prop('checked', true).trigger('change');
diff --git a/Packages/ohif-core/client/components/base/mixins/schemaData.js b/Packages/ohif-core/client/components/base/mixins/schemaData.js
index c7518ee4b..038b31e4f 100644
--- a/Packages/ohif-core/client/components/base/mixins/schemaData.js
+++ b/Packages/ohif-core/client/components/base/mixins/schemaData.js
@@ -30,6 +30,7 @@ const getCurrentSchema = (parentComponent, key) => {
 
     // Merge the sub-schema properties if it's an array
     if (Array.isArray(currentSchema.type())) {
+        console.warn('>>>>IS ARRAY', currentSchema);
         _.extend(currentSchema, schema._schema[key + '.$']);
     }
 
@@ -105,6 +106,35 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
             }
         },
 
+        onCreated() {
+            const instance = Template.instance();
+            const component = instance.component;
+
+            // Create a data parser according to current schema key
+            component.parseData = value => {
+                // Get the current schema data using component's key
+                const currentSchema = getCurrentSchema(component.parent, instance.data.pathKey);
+
+                // Stop here if there's no schema data for current key
+                if (!currentSchema) {
+                    return;
+                }
+
+                // Check if the schema is a Number
+                if (currentSchema.type === Number) {
+                    return parseFloat(value);
+                }
+
+                // Check if the schema is a Boolean
+                if (currentSchema.type === Boolean) {
+                    return !!value;
+                }
+
+                // Return the original value if none of the checks matched
+                return value;
+            };
+        },
+
         onMixins() {
             const instance = Template.instance();
             const component = instance.component;
diff --git a/Packages/ohif-core/client/components/base/mixins/selectTree.js b/Packages/ohif-core/client/components/base/mixins/selectTree.js
index 2e8320964..319800632 100644
--- a/Packages/ohif-core/client/components/base/mixins/selectTree.js
+++ b/Packages/ohif-core/client/components/base/mixins/selectTree.js
@@ -30,7 +30,7 @@ OHIF.mixins.selectTree = new OHIF.Mixin({
 
                 // Return the current value
                 if (isGet) {
-                    return rootInstance.currentValue;
+                    return component.parseData(rootInstance.currentValue);
                 }
 
                 // Change the current value
diff --git a/Packages/ohif-core/client/components/base/templates/div.html b/Packages/ohif-core/client/components/base/templates/div.html
index a39733ce3..b628f9c1e 100644
--- a/Packages/ohif-core/client/components/base/templates/div.html
+++ b/Packages/ohif-core/client/components/base/templates/div.html
@@ -2,6 +2,7 @@
     <div
         id="{{this.id}}"
         class="{{this.class}}"
+        data-key="{{this.pathKey}}"
         {{this.tagAttributes}}
     >
         {{>UI.contentBlock}}
diff --git a/Packages/ohif-core/client/components/base/templates/input.html b/Packages/ohif-core/client/components/base/templates/input.html
index 2df32a319..1c75a95c2 100644
--- a/Packages/ohif-core/client/components/base/templates/input.html
+++ b/Packages/ohif-core/client/components/base/templates/input.html
@@ -6,7 +6,7 @@
         name="{{this.name}}"
         value="{{reactive this.value}}"
         placeholder="{{this.placeholder}}"
-        data-key="{{this.key}}"
+        data-key="{{this.pathKey}}"
         {{this.tagAttributes}}
     >
     {{>UI.contentBlock}}
diff --git a/Packages/ohif-core/client/components/base/templates/select.html b/Packages/ohif-core/client/components/base/templates/select.html
index 3db0c7de0..148827e2b 100644
--- a/Packages/ohif-core/client/components/base/templates/select.html
+++ b/Packages/ohif-core/client/components/base/templates/select.html
@@ -5,7 +5,7 @@
         name="{{this.name}}"
         multiple="{{#if this.multiple}}multiple{{/if}}"
         disabled="{{#if this.disabled}}disabled{{/if}}"
-        data-key="{{this.key}}"
+        data-key="{{this.pathKey}}"
         {{this.tagAttributes}}
     >
         {{>UI.contentBlock}}
diff --git a/Packages/worklist/both/schema.js b/Packages/worklist/both/schema.js
index 9ac6846e6..6443e3d7d 100644
--- a/Packages/worklist/both/schema.js
+++ b/Packages/worklist/both/schema.js
@@ -23,18 +23,18 @@ export const DICOMWebRequestOptions = new SimpleSchema({
     logRequests: {
         type: Boolean,
         defaultValue: true,
-        label: 'Requests',
+        label: 'Requests'
     },
     logResponses: {
         type: Boolean,
         defaultValue: false,
-        label: 'Responses',
+        label: 'Responses'
     },
     logTiming: {
         type: Boolean,
         defaultValue: true,
-        label: 'Timing',
-    },
+        label: 'Timing'
+    }
 });
 
 export const DICOMWebServer = new SimpleSchema({
@@ -81,7 +81,7 @@ export const DICOMWebServer = new SimpleSchema({
 export const DIMSEPeer = new SimpleSchema({
     aeTitle: {
         type: String,
-        label: 'AE Title',
+        label: 'AE Title'
     },
     hostAE: {
         type: String,
@@ -90,7 +90,7 @@ export const DIMSEPeer = new SimpleSchema({
     },
     host: {
         type: String,
-        label: 'Host Domain/IP',
+        label: 'Host Domain/IP'
     },
     port: {
         type: Number,
@@ -120,8 +120,9 @@ export const DIMSEServer = new SimpleSchema({
     name: serverNameDefinitions,
     type: serverTypeDefinitions,
     peers: {
-        type: [ DIMSEPeer ],
-        label: 'DIMSE Peers',
+        type: [DIMSEPeer],
+        label: 'Peer List',
+        minCount: 1
     }
 });
 
@@ -147,12 +148,12 @@ export const PublicServerConfig = new SimpleSchema({
 
 export const Servers = new SimpleSchema({
     dicomWeb: {
-        type: [ DICOMWebServer ],
+        type: [DICOMWebServer],
         label: 'DICOMWeb Servers',
         optional: true
     },
     dimse: {
-        type: [ DIMSEServer ],
+        type: [DIMSEServer],
         label: 'DIMSE Servers',
         optional: true
     }

From c4ac8cbeefa9ec47287309fa2c4bfed92ee371ec Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 31 Aug 2016 13:57:22 -0300
Subject: [PATCH 29/41] LT-67: Fixing change event bubbling on formItem mixin

---
 .../client/components/base/mixins/formItem.js       | 13 +++++++++++--
 .../client/components/base/mixins/schemaData.js     |  1 -
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/Packages/ohif-core/client/components/base/mixins/formItem.js b/Packages/ohif-core/client/components/base/mixins/formItem.js
index 118741b11..533d0f622 100644
--- a/Packages/ohif-core/client/components/base/mixins/formItem.js
+++ b/Packages/ohif-core/client/components/base/mixins/formItem.js
@@ -160,9 +160,18 @@ OHIF.mixins.formItem = new OHIF.Mixin({
 
         events: {
 
-            // Enable reactivity by changing a Tracker.Dependency observer
+            // Handle the change event for the component
             change(event, instance) {
-                instance.component.changeObserver.changed();
+                const component = instance.component;
+
+                // Prevent execution on upper components
+                if (event.currentTarget === component.$element[0]) {
+                    // Enable reactivity by changing a Tracker.Dependency observer
+                    component.changeObserver.changed();
+
+                    // Revalidate the component
+                    component.validate();
+                }
             },
 
             // TODO: [design] remove log, show error box/hint over the wrapper
diff --git a/Packages/ohif-core/client/components/base/mixins/schemaData.js b/Packages/ohif-core/client/components/base/mixins/schemaData.js
index 038b31e4f..cf50265c2 100644
--- a/Packages/ohif-core/client/components/base/mixins/schemaData.js
+++ b/Packages/ohif-core/client/components/base/mixins/schemaData.js
@@ -30,7 +30,6 @@ const getCurrentSchema = (parentComponent, key) => {
 
     // Merge the sub-schema properties if it's an array
     if (Array.isArray(currentSchema.type())) {
-        console.warn('>>>>IS ARRAY', currentSchema);
         _.extend(currentSchema, schema._schema[key + '.$']);
     }
 

From 662cfe3c942d8c8b5368323405eecda8ca1c8ce9 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 31 Aug 2016 14:33:16 -0300
Subject: [PATCH 30/41] LT-67: Fixing nested properties validation

---
 .../ohif-core/client/components/base/mixins/formItem.js     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Packages/ohif-core/client/components/base/mixins/formItem.js b/Packages/ohif-core/client/components/base/mixins/formItem.js
index 533d0f622..378b609dc 100644
--- a/Packages/ohif-core/client/components/base/mixins/formItem.js
+++ b/Packages/ohif-core/client/components/base/mixins/formItem.js
@@ -1,6 +1,6 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
-import { Tracker } from "meteor/tracker";
+import { Tracker } from 'meteor/tracker';
 import { _ } from 'meteor/underscore';
 import { $ } from 'meteor/jquery';
 
@@ -101,9 +101,9 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 }
 
                 // Create the data document for validation
-                const document = {
+                const document = OHIF.blaze.getNestedObject({
                     [key]: component.value()
-                };
+                });
 
                 // Check if the document validation failed
                 if (!schema.validateOne(document, key)) {

From 486a7b30ed2350a5a2dd5d55d7193a27f9b70b94 Mon Sep 17 00:00:00 2001
From: Evren Ozkan <evren217@gmail.com>
Date: Wed, 31 Aug 2016 15:52:58 -0400
Subject: [PATCH 31/41] This fix has been reset somehow, so applying it again:
 - Check study instances whether they have image data based on sopClassUid or
 rows (JPEG and PNG images do not have sopClassUid)

---
 Packages/viewerbase/lib/createStacks.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Packages/viewerbase/lib/createStacks.js b/Packages/viewerbase/lib/createStacks.js
index bedde4e91..e5c53b6c2 100644
--- a/Packages/viewerbase/lib/createStacks.js
+++ b/Packages/viewerbase/lib/createStacks.js
@@ -30,8 +30,8 @@ createStacks = function(study) {
         // series into another display set.
         let stackableInstances = [];
         series.instances.forEach(instance => {
-            // All imaging modalities must have a valid value for rows (or columns)
-            if (!instance.rows) {
+            // All imaging modalities must have a valid value for sopClassUid or rows
+            if (!isImage(instance.sopClassUid) && !instance.rows) {
                 return;
             }
 

From a47ecf0aacecf033d9ec3051d0046259ef19e131 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Wed, 31 Aug 2016 22:08:42 +0200
Subject: [PATCH 32/41] Import fixes necessary for client-only builds

---
 Packages/ohif-core/package.js                | 1 +
 Packages/viewerbase/lib/viewportFunctions.js | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/Packages/ohif-core/package.js b/Packages/ohif-core/package.js
index 9969718ed..cb7385098 100644
--- a/Packages/ohif-core/package.js
+++ b/Packages/ohif-core/package.js
@@ -20,6 +20,7 @@ Package.onUse(function(api) {
 
     // Component's library dependencies
     api.use('natestrauser:select2@4.0.1', 'client');
+    api.use('aldeed:simple-schema');
 
     // UI Styles
     api.addFiles([
diff --git a/Packages/viewerbase/lib/viewportFunctions.js b/Packages/viewerbase/lib/viewportFunctions.js
index 62dc6f3f6..ec371cc3e 100644
--- a/Packages/viewerbase/lib/viewportFunctions.js
+++ b/Packages/viewerbase/lib/viewportFunctions.js
@@ -1,3 +1,5 @@
+import { OHIF } from 'meteor/ohif:core';
+
 getActiveViewportElement = function() {
     var viewportIndex = Session.get("activeViewport") || 0;
     return $('.imageViewerViewport').get(viewportIndex);

From 33e72970644f606f7bb39c051d96fa600d93a67d Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Wed, 31 Aug 2016 19:17:00 -0300
Subject: [PATCH 33/41] LT-67: Displaying the validation error messages inside
 the form

---
 .../serverInformationForm.js                  |  2 +-
 Packages/ohif-core/both/schema.js             |  7 +++
 .../client/components/base/mixins/form.js     | 56 ++++++++++++++++++-
 .../client/components/base/mixins/formItem.js | 14 ++++-
 .../client/components/base/templates/div.html |  1 -
 .../components/base/templates/form.html       |  7 +++
 .../components/base/templates/input.html      |  1 -
 .../components/base/templates/select.html     |  1 -
 Packages/worklist/both/schema.js              |  3 +-
 9 files changed, 84 insertions(+), 8 deletions(-)

diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
index 1ff70c6c1..49a70d5ea 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
@@ -19,7 +19,7 @@ Template.serverInformationForm.onRendered(() => {
     // Handle the server type
     instance.autorun(() => {
         // Get the server type component
-        const typeComponent = instance.$('[data-key=type]').data('component');
+        const typeComponent = instance.$('[data-key=type] :input').data('component');
 
         // Run this computation every time the user change the server type
         typeComponent.depend();
diff --git a/Packages/ohif-core/both/schema.js b/Packages/ohif-core/both/schema.js
index ca1d9776e..ea60afe58 100644
--- a/Packages/ohif-core/both/schema.js
+++ b/Packages/ohif-core/both/schema.js
@@ -25,3 +25,10 @@ SimpleSchema.addValidator(function() {
         return 'required';
     }
 });
+
+// Including [label] for some messages
+SimpleSchema.messages({
+    maxCount: '[label] can not have more than [maxCount] values',
+    minCount: '[label] must have at least [minCount] values',
+    notAllowed: '[label] has an invalid value: "[value]"'
+});
diff --git a/Packages/ohif-core/client/components/base/mixins/form.js b/Packages/ohif-core/client/components/base/mixins/form.js
index 28d5eb64c..d25ada047 100644
--- a/Packages/ohif-core/client/components/base/mixins/form.js
+++ b/Packages/ohif-core/client/components/base/mixins/form.js
@@ -1,6 +1,8 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
-import { ReactiveVar } from 'meteor/reactive-var';
+import { Tracker } from 'meteor/tracker';
+import { _ } from 'meteor/underscore';
+import { $ } from 'meteor/jquery';
 
 /*
  * form: controls a form and its registered inputs
@@ -15,8 +17,16 @@ OHIF.mixins.form = new OHIF.Mixin({
             // Set the form identifier flag
             component.isForm = true;
 
+            component.validationObserver = new Tracker.Dependency();
+
             // Reset the pathKey
             instance.data.pathKey = '';
+
+            // Debound the observer call to prevent tons of re-rendering
+            component.validationRan = _.debounce(() => {
+                // Enable reactivity by changing a Tracker.Dependency observer
+                component.validationObserver.changed();
+            }, 200);
         },
 
         onRendered() {
@@ -25,6 +35,50 @@ OHIF.mixins.form = new OHIF.Mixin({
 
             // Set the component main and style elements
             component.$style = component.$element = instance.$('form:first');
+        },
+
+        events: {
+            'click .validation-error-container a'(event, instance) {
+                // Get the target key
+                const targetKey = $(event.currentTarget).attr('data-target');
+
+                // Focus the first input inside the element with error state
+                instance.$(`.state-error[data-key="${targetKey}"] :input:first`).focus();
+            }
+        },
+
+        helpers: {
+            validationErrors() {
+                const instance = Template.instance();
+                const component = instance.component;
+
+                // Create a dependency on child components validation
+                component.validationObserver.depend();
+
+                // Stop here if no schema was defined for the form
+                if (!component.schema) {
+                    return;
+                }
+
+                // Check if there were some validation errors
+                if (component.schema._invalidKeys.length) {
+                    const result = [];
+
+                    // Iterate over each validation error and add to result
+                    component.schema._invalidKeys.forEach(item => {
+                        const label = component.schema._schema[item.name].label;
+                        let message = component.schema.keyErrorMessage(item.name);
+                        message = message.replace(label, `<strong>${label}</strong>`);
+                        result.push({
+                            key: item.name,
+                            message: Spacebars.SafeString(message)
+                        });
+                    });
+
+                    // Return the resulting validation errors
+                    return result;
+                }
+            }
         }
     }
 });
diff --git a/Packages/ohif-core/client/components/base/mixins/formItem.js b/Packages/ohif-core/client/components/base/mixins/formItem.js
index 378b609dc..1580ebae9 100644
--- a/Packages/ohif-core/client/components/base/mixins/formItem.js
+++ b/Packages/ohif-core/client/components/base/mixins/formItem.js
@@ -105,8 +105,14 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                     [key]: component.value()
                 });
 
+                // Get the validation result
+                const validationResult = schema.validateOne(document, key);
+
+                // Notify the form that the validation ran
+                form.validationRan();
+
                 // Check if the document validation failed
-                if (!schema.validateOne(document, key)) {
+                if (!validationResult) {
                     // Set the component in error state and display the message
                     component.error(schema.keyErrorMessage(key));
 
@@ -136,6 +142,9 @@ OHIF.mixins.formItem = new OHIF.Mixin({
 
             // Set the most outer wrapper element
             component.$wrapper = instance.wrapper.$('*').first();
+
+            // Add the pathKey to the wrapper element
+            component.$wrapper.attr('data-key', instance.data.pathKey);
         },
 
         onDestroyed() {
@@ -154,8 +163,9 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 component.$style = component.$element;
             }
 
-            // Set the component in jQuery data after all mixins are rendered
+            // Set the component in element and wrapper jQuery data
             component.$element.data('component', component);
+            component.$wrapper.data('component', component);
         },
 
         events: {
diff --git a/Packages/ohif-core/client/components/base/templates/div.html b/Packages/ohif-core/client/components/base/templates/div.html
index b628f9c1e..a39733ce3 100644
--- a/Packages/ohif-core/client/components/base/templates/div.html
+++ b/Packages/ohif-core/client/components/base/templates/div.html
@@ -2,7 +2,6 @@
     <div
         id="{{this.id}}"
         class="{{this.class}}"
-        data-key="{{this.pathKey}}"
         {{this.tagAttributes}}
     >
         {{>UI.contentBlock}}
diff --git a/Packages/ohif-core/client/components/base/templates/form.html b/Packages/ohif-core/client/components/base/templates/form.html
index b198b345b..e5a4e0e4a 100644
--- a/Packages/ohif-core/client/components/base/templates/form.html
+++ b/Packages/ohif-core/client/components/base/templates/form.html
@@ -11,6 +11,13 @@
         target="{{this.target}}"
         {{this.tagAttributes}}
     >
+        {{#if validationErrors}}
+            <div class="validation-error-container alert alert-danger" role="alert">
+                {{#each error in validationErrors}}
+                    <p><a href="#" class="text-danger" data-target="{{error.key}}">{{error.message}}</a></p>
+                {{/each}}
+            </div>
+        {{/if}}
         {{>UI.contentBlock}}
     </form>
 </template>
diff --git a/Packages/ohif-core/client/components/base/templates/input.html b/Packages/ohif-core/client/components/base/templates/input.html
index 1c75a95c2..847826cef 100644
--- a/Packages/ohif-core/client/components/base/templates/input.html
+++ b/Packages/ohif-core/client/components/base/templates/input.html
@@ -6,7 +6,6 @@
         name="{{this.name}}"
         value="{{reactive this.value}}"
         placeholder="{{this.placeholder}}"
-        data-key="{{this.pathKey}}"
         {{this.tagAttributes}}
     >
     {{>UI.contentBlock}}
diff --git a/Packages/ohif-core/client/components/base/templates/select.html b/Packages/ohif-core/client/components/base/templates/select.html
index 148827e2b..938b3d9be 100644
--- a/Packages/ohif-core/client/components/base/templates/select.html
+++ b/Packages/ohif-core/client/components/base/templates/select.html
@@ -5,7 +5,6 @@
         name="{{this.name}}"
         multiple="{{#if this.multiple}}multiple{{/if}}"
         disabled="{{#if this.disabled}}disabled{{/if}}"
-        data-key="{{this.pathKey}}"
         {{this.tagAttributes}}
     >
         {{>UI.contentBlock}}
diff --git a/Packages/worklist/both/schema.js b/Packages/worklist/both/schema.js
index 6443e3d7d..1ce640523 100644
--- a/Packages/worklist/both/schema.js
+++ b/Packages/worklist/both/schema.js
@@ -90,7 +90,8 @@ export const DIMSEPeer = new SimpleSchema({
     },
     host: {
         type: String,
-        label: 'Host Domain/IP'
+        label: 'Host Domain/IP',
+        regEx: SimpleSchema.RegEx.WeakDomain
     },
     port: {
         type: Number,

From 34a16930ef3ae457718e1f430bf62bf95eb7c850 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Thu, 1 Sep 2016 08:49:36 -0300
Subject: [PATCH 34/41] LT-67: Adding validation error tooltips when focusing
 fields

---
 Packages/design/styles/components/states.styl | 27 ++++++++++---
 .../client/components/base/mixins/formItem.js | 38 +++++++++++++++----
 .../client/components/base/mixins/select2.js  |  4 +-
 3 files changed, 56 insertions(+), 13 deletions(-)

diff --git a/Packages/design/styles/components/states.styl b/Packages/design/styles/components/states.styl
index 78582a0b4..e8fa37fa5 100644
--- a/Packages/design/styles/components/states.styl
+++ b/Packages/design/styles/components/states.styl
@@ -1,7 +1,24 @@
 @import "{design}/app"
 
-.state-error:not(.component-group)
-    &.form-control, .form-control
-        theme('background-color', '$uiStateError')
-        theme('border-color', '$uiStateErrorBorder')
-        theme('color', '$uiStateErrorText')
+.state-error
+    &+.tooltip
+
+        .tooltip-inner
+            color: white
+            theme('background-color', '$uiStateErrorBorder')
+
+        &.top .tooltip-arrow
+            theme('border-top-color', '$uiStateErrorBorder')
+        &.right .tooltip-arrow
+            theme('border-right-color', '$uiStateErrorBorder')
+        &.bottom .tooltip-arrow
+            theme('border-bottom-color', '$uiStateErrorBorder')
+        &.left .tooltip-arrow
+            theme('border-left-color', '$uiStateErrorBorder')
+
+
+    &:not(.component-group)
+        &.form-control, .form-control
+            theme('background-color', '$uiStateError')
+            theme('border-color', '$uiStateErrorBorder')
+            theme('color', '$uiStateErrorText')
diff --git a/Packages/ohif-core/client/components/base/mixins/formItem.js b/Packages/ohif-core/client/components/base/mixins/formItem.js
index 1580ebae9..2842e1dab 100644
--- a/Packages/ohif-core/client/components/base/mixins/formItem.js
+++ b/Packages/ohif-core/client/components/base/mixins/formItem.js
@@ -65,14 +65,25 @@ OHIF.mixins.formItem = new OHIF.Mixin({
 
                 // Set or remove the error message
                 if (errorMessage) {
-                    component.$element.trigger('errorin');
                     component.$wrapper.attr('data-error', errorMessage);
                 } else {
-                    component.$element.trigger('errorout');
                     component.$wrapper.removeAttr('data-error', errorMessage);
                 }
             };
 
+            // Toggle the state over the component
+            component.toggleTooltip = (isShow, message) => {
+                if (isShow) {
+                    console.warn('>>>>message', message);
+                    component.$wrapper.tooltip({
+                        trigger: 'manual',
+                        title: message
+                    }).tooltip('show');
+                } else {
+                    component.$wrapper.tooltip('destroy');
+                }
+            };
+
             // Search for the parent form component
             component.getForm = () => {
                 let currentComponent = component;
@@ -184,15 +195,28 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 }
             },
 
-            // TODO: [design] remove log, show error box/hint over the wrapper
-            errorin(event, instance) {
+            focus(event, instance) {
+                const component = instance.component;
+
+                // Prevent event bubbling
                 event.stopPropagation();
-                console.log('ERROR when validating component', instance.component);
+
+                // Check for error state and message
+                const errorMessage = component.$wrapper.attr('data-error');
+                if (errorMessage) {
+                    // Show the tooltip with the error message
+                    component.toggleTooltip(true, errorMessage);
+                }
             },
 
-            // TODO: [design] hide error box/hint
-            errorout(event, instance) {
+            blur(event, instance) {
+                const component = instance.component;
+
+                // Prevent event bubbling
                 event.stopPropagation();
+
+                // Hide any tooltips
+                component.toggleTooltip(false);
             }
 
         }
diff --git a/Packages/ohif-core/client/components/base/mixins/select2.js b/Packages/ohif-core/client/components/base/mixins/select2.js
index 5630548f4..68453b389 100644
--- a/Packages/ohif-core/client/components/base/mixins/select2.js
+++ b/Packages/ohif-core/client/components/base/mixins/select2.js
@@ -65,7 +65,9 @@ OHIF.mixins.select2 = new OHIF.Mixin({
         },
 
         events: {
-            'focus .select2-hidden-accessible'(event, instance) {
+            'focusin .select2-hidden-accessible'(event, instance) {
+                event.preventDefault();
+
                 // Redirect the focus to select2 focus control in case of hidden
                 // accessible being focused (e.g. clicking on outer label)
                 $(event.currentTarget).nextAll('.select2:first').find('.select2-selection').focus();

From 620f5fd4ff7a5325963736ab62022def7d0eac0c Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Thu, 1 Sep 2016 08:53:16 -0300
Subject: [PATCH 35/41] LT-67: Focusing the first form input on validation
 error

---
 .../ohif-core/client/components/base/mixins/form.js    | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/Packages/ohif-core/client/components/base/mixins/form.js b/Packages/ohif-core/client/components/base/mixins/form.js
index d25ada047..9a6db08a6 100644
--- a/Packages/ohif-core/client/components/base/mixins/form.js
+++ b/Packages/ohif-core/client/components/base/mixins/form.js
@@ -35,6 +35,16 @@ OHIF.mixins.form = new OHIF.Mixin({
 
             // Set the component main and style elements
             component.$style = component.$element = instance.$('form:first');
+
+            instance.autorun(() => {
+                // Run this computation everytime the validation is triggered
+                component.validationObserver.depend();
+
+                // Focus the first error field if some validation failed
+                if (component.schema && component.schema._invalidKeys.length) {
+                    instance.$('.state-error :input:first').focus();
+                }
+            });
         },
 
         events: {

From c05e36eca8cc180f2c7c4889b39175b6e306b107 Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Thu, 1 Sep 2016 13:33:17 -0300
Subject: [PATCH 36/41] LT-67: Styling select2 error state and adding its error
 tooltip

---
 Packages/design/styles/components/states.styl |  5 ++
 .../additionalFindings.html                   |  2 +-
 .../serverInformationDicomWeb.html            |  2 +-
 .../serverInformationForm.html                |  2 +-
 .../client/components/base/mixins/form.js     | 22 +++---
 .../client/components/base/mixins/formItem.js | 73 ++++++++++++++++---
 .../client/components/base/mixins/group.js    |  3 +
 .../client/components/base/mixins/select2.js  | 29 +++++---
 Packages/worklist/both/schema.js              |  4 +-
 9 files changed, 106 insertions(+), 36 deletions(-)

diff --git a/Packages/design/styles/components/states.styl b/Packages/design/styles/components/states.styl
index e8fa37fa5..1915cdea8 100644
--- a/Packages/design/styles/components/states.styl
+++ b/Packages/design/styles/components/states.styl
@@ -22,3 +22,8 @@
             theme('background-color', '$uiStateError')
             theme('border-color', '$uiStateErrorBorder')
             theme('color', '$uiStateErrorText')
+
+        .select2-selection
+            theme('background-color', '$uiStateError')
+            theme('border-color', '$uiStateErrorBorder')
+            theme('color', '$uiStateErrorText')
diff --git a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html
index 6c50cc4de..dcd49b839 100644
--- a/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html
+++ b/Packages/lesiontracker/client/components/additionalFindings/additionalFindings.html
@@ -15,7 +15,7 @@
                         key='regionsOfMetastaticDisease'
                         multiple=true
                         options=(clone
-                            placeholder='Choose a region...'
+                            placeholder='Choose a region'
                             allowClear=true
                         )
                     }}
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
index 49db1b73c..8a2dc16be 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationDicomWeb/serverInformationDicomWeb.html
@@ -11,7 +11,7 @@
         </div>
         <div class="col-lg-6">
             {{>inputSelect labelClass='form-group' key='imageRendering' hideSearch=true
-                options=(clone placeholder='Select an option...')}}
+                options=(clone placeholder='Select an option')}}
         </div>
         <div class="col-lg-6">
             {{>inputText labelClass='form-group' key='qidoRoot'}}
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
index 9101be616..132a6b5da 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
@@ -8,7 +8,7 @@
             <div class="col-lg-6">
                 {{>inputSelect labelClass='form-group' key='type'
                     hideSearch=true disabled=(eq this.mode.get 'edit')
-                    options=(clone placeholder='Choose a server type...')}}
+                    options=(clone placeholder='Choose a server type')}}
             </div>
         </div>
         <hr>
diff --git a/Packages/ohif-core/client/components/base/mixins/form.js b/Packages/ohif-core/client/components/base/mixins/form.js
index 9a6db08a6..ab9bfbeb0 100644
--- a/Packages/ohif-core/client/components/base/mixins/form.js
+++ b/Packages/ohif-core/client/components/base/mixins/form.js
@@ -27,6 +27,18 @@ OHIF.mixins.form = new OHIF.Mixin({
                 // Enable reactivity by changing a Tracker.Dependency observer
                 component.validationObserver.changed();
             }, 200);
+
+            // Change the validation function to focus the fields with error
+            const validateSelf = component.validate;
+            component.validate = () => {
+                // Call the original validation function
+                validateSelf();
+
+                // Focus the first error field if some validation failed
+                if (component.schema && component.schema._invalidKeys.length) {
+                    instance.$('.state-error :input:first').focus();
+                }
+            };
         },
 
         onRendered() {
@@ -35,16 +47,6 @@ OHIF.mixins.form = new OHIF.Mixin({
 
             // Set the component main and style elements
             component.$style = component.$element = instance.$('form:first');
-
-            instance.autorun(() => {
-                // Run this computation everytime the validation is triggered
-                component.validationObserver.depend();
-
-                // Focus the first error field if some validation failed
-                if (component.schema && component.schema._invalidKeys.length) {
-                    instance.$('.state-error :input:first').focus();
-                }
-            });
         },
 
         events: {
diff --git a/Packages/ohif-core/client/components/base/mixins/formItem.js b/Packages/ohif-core/client/components/base/mixins/formItem.js
index 2842e1dab..88b7c4ae8 100644
--- a/Packages/ohif-core/client/components/base/mixins/formItem.js
+++ b/Packages/ohif-core/client/components/base/mixins/formItem.js
@@ -1,6 +1,7 @@
 import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
 import { Tracker } from 'meteor/tracker';
+import { Meteor } from 'meteor/meteor';
 import { _ } from 'meteor/underscore';
 import { $ } from 'meteor/jquery';
 
@@ -53,6 +54,19 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 component.$wrapper[method]();
             };
 
+            // Check if the focus is inside this element
+            component.hasFocus = () => {
+                // Get the focused element
+                const focused = $(':focus')[0];
+
+                // Check if the focused element is inside the component
+                const contains = $.contains(component.$wrapper[0], focused);
+                const isEqual = component.$wrapper[0] === focused;
+
+                // Return true if he component has the focus
+                return contains || isEqual;
+            };
+
             // Add or remove a state from the component
             component.state = (state, flag) => {
                 component.$wrapper.toggleClass(`state-${state}`, !!flag);
@@ -71,19 +85,50 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 }
             };
 
-            // Toggle the state over the component
+            // Toggle the tooltip over the component
             component.toggleTooltip = (isShow, message) => {
-                if (isShow) {
-                    console.warn('>>>>message', message);
+                if (isShow && message) {
+                    // Stop here if the tooltip is already created
+                    if (component.$wrapper.next('.tooltip').length) {
+                        return;
+                    }
+
+                    // Create the tooltip
                     component.$wrapper.tooltip({
                         trigger: 'manual',
                         title: message
                     }).tooltip('show');
                 } else {
+                    // Destroy the tooltip
                     component.$wrapper.tooltip('destroy');
                 }
             };
 
+            // Toggle a state message as a tooltip over the component
+            component.toggleMessage = isShow => {
+                // Check if the action is to hide
+                if (!isShow) {
+                    Meteor.setTimeout(() => {
+                        // Check if the component has the focus
+                        if (component.hasFocus()) {
+                            // Prevent the tooltip from being hidden
+                            return;
+                        }
+
+                        // Hide the tooltip
+                        component.toggleTooltip(false);
+                    }, 100);
+                    return;
+                }
+
+                // Check for error state and message
+                const errorMessage = component.$wrapper.attr('data-error');
+                if (errorMessage) {
+                    // Show the tooltip with the error message
+                    component.toggleTooltip(true, errorMessage);
+                }
+            },
+
             // Search for the parent form component
             component.getForm = () => {
                 let currentComponent = component;
@@ -198,25 +243,31 @@ OHIF.mixins.formItem = new OHIF.Mixin({
             focus(event, instance) {
                 const component = instance.component;
 
+                // Stop here if it is an group
+                if (component.isGroup || component.isCustomFocus) {
+                    return;
+                }
+
                 // Prevent event bubbling
                 event.stopPropagation();
 
-                // Check for error state and message
-                const errorMessage = component.$wrapper.attr('data-error');
-                if (errorMessage) {
-                    // Show the tooltip with the error message
-                    component.toggleTooltip(true, errorMessage);
-                }
+                // Check for state messages and show it
+                component.toggleMessage(true);
             },
 
             blur(event, instance) {
                 const component = instance.component;
 
+                // Stop here if it is an group
+                if (component.isGroup || component.isCustomFocus) {
+                    return;
+                }
+
                 // Prevent event bubbling
                 event.stopPropagation();
 
-                // Hide any tooltips
-                component.toggleTooltip(false);
+                // Hide state messages
+                component.toggleMessage(false);
             }
 
         }
diff --git a/Packages/ohif-core/client/components/base/mixins/group.js b/Packages/ohif-core/client/components/base/mixins/group.js
index 3c5356831..c2e87a981 100644
--- a/Packages/ohif-core/client/components/base/mixins/group.js
+++ b/Packages/ohif-core/client/components/base/mixins/group.js
@@ -12,6 +12,9 @@ OHIF.mixins.group = new OHIF.Mixin({
             const instance = Template.instance();
             const component = instance.component;
 
+            // Set the group identifier flag
+            component.isGroup = true;
+
             // Run this computation every time the schema property is changed
             instance.autorun(() => {
                 let schema = instance.data.schema;
diff --git a/Packages/ohif-core/client/components/base/mixins/select2.js b/Packages/ohif-core/client/components/base/mixins/select2.js
index 68453b389..987495dd1 100644
--- a/Packages/ohif-core/client/components/base/mixins/select2.js
+++ b/Packages/ohif-core/client/components/base/mixins/select2.js
@@ -11,6 +11,9 @@ OHIF.mixins.select2 = new OHIF.Mixin({
         onCreated() {
             const instance = Template.instance();
 
+            // Set the custom focus flag
+            instance.component.isCustomFocus = true;
+
             // Check if this select will include a placeholder
             const placeholder = instance.data.options && instance.data.options.placeholder;
             if (placeholder) {
@@ -54,6 +57,22 @@ OHIF.mixins.select2 = new OHIF.Mixin({
 
             // Store the select2 instance to allow its further destruction
             component.select2Instance = component.$element.data('select2');
+
+            // Get the focusable elements
+            const elements = [];
+            elements.push(component.$element[0]);
+            elements.push(component.$element.nextAll('.select2:first').find('.select2-selection')[0]);
+
+            // Attach focus and blur handlers to focusable elements
+            $(elements).on('focus', event => {
+                event.stopPropagation();
+                // Show the state message on elements focus
+                component.toggleMessage(true);
+            }).on('blur', event => {
+                event.stopPropagation();
+                // Hide the state message on elements blur
+                component.toggleMessage(false);
+            });
         },
 
         onDestroyed() {
@@ -62,16 +81,6 @@ OHIF.mixins.select2 = new OHIF.Mixin({
 
             // Destroy the select2 instance to remove unwanted DOM elements
             component.select2Instance.destroy();
-        },
-
-        events: {
-            'focusin .select2-hidden-accessible'(event, instance) {
-                event.preventDefault();
-
-                // Redirect the focus to select2 focus control in case of hidden
-                // accessible being focused (e.g. clicking on outer label)
-                $(event.currentTarget).nextAll('.select2:first').find('.select2-selection').focus();
-            }
         }
     }
 });
diff --git a/Packages/worklist/both/schema.js b/Packages/worklist/both/schema.js
index 1ce640523..4eec4cc74 100644
--- a/Packages/worklist/both/schema.js
+++ b/Packages/worklist/both/schema.js
@@ -59,8 +59,8 @@ export const DICOMWebServer = new SimpleSchema({
     imageRendering: {
         type: String,
         label: 'Image rendering',
-        allowedValues: ['wadouri', 'orthanc'],
-        valuesLabels: ['WADO URI', 'ORTHANC']
+        allowedValues: ['', 'wadouri', 'orthanc'],
+        valuesLabels: ['', 'WADO URI', 'ORTHANC']
     },
     qidoRoot: {
         type: String,

From ed8bb26fa486c77cb1d5176f5ae6e8174be9fe69 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Mon, 29 Aug 2016 10:03:02 +0200
Subject: [PATCH 37/41] Request options are now properly passed into WADO Proxy
 (LT-165)

---
 Packages/wadoproxy/package.js                 |  1 -
 Packages/wadoproxy/server/initialize.js       |  1 -
 Packages/wadoproxy/server/namespace.js        |  8 +-
 Packages/wadoproxy/server/routes.js           | 77 +++++++++++++------
 .../server/services/dimse/retrieveMetadata.js |  2 +-
 .../server/services/wado/retrieveMetadata.js  |  2 +-
 config/dcm4cheeDIMSE.json                     |  2 +-
 config/orthancDIMSE.json                      |  2 +-
 8 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/Packages/wadoproxy/package.js b/Packages/wadoproxy/package.js
index abc3589fc..fea0bdf9a 100755
--- a/Packages/wadoproxy/package.js
+++ b/Packages/wadoproxy/package.js
@@ -11,7 +11,6 @@ Package.onUse(function(api) {
     api.use('standard-app-packages');
     api.use('clinical:router');
 
-
     api.addFiles('server/namespace.js');
     
     // Server-only
diff --git a/Packages/wadoproxy/server/initialize.js b/Packages/wadoproxy/server/initialize.js
index 1e917067a..cd6073b40 100755
--- a/Packages/wadoproxy/server/initialize.js
+++ b/Packages/wadoproxy/server/initialize.js
@@ -1,4 +1,3 @@
-
 Settings = Object.assign((Meteor.settings && Meteor.settings.proxy) ? Meteor.settings.proxy : {}, {
     uri : "/__wado_proxy",
     enabled: true
diff --git a/Packages/wadoproxy/server/namespace.js b/Packages/wadoproxy/server/namespace.js
index 33ea111a6..a9c3980bc 100755
--- a/Packages/wadoproxy/server/namespace.js
+++ b/Packages/wadoproxy/server/namespace.js
@@ -1,8 +1,12 @@
 WADOProxy = {};
 
-WADOProxy.convertURL = function(wadoURL) {
+WADOProxy.convertURL = (wadoURL, requestOptions) => {
     if (!Settings.enabled) {
         return wadoURL;
     }
-    return Settings.uri + '?' + querystring.stringify({url: wadoURL});
+    if (!wadoURL) {
+        return null;
+    }
+
+    return Settings.uri + '?' + querystring.stringify({url: wadoURL, options: requestOptions ? JSON.stringify(requestOptions) : null});
 }
\ No newline at end of file
diff --git a/Packages/wadoproxy/server/routes.js b/Packages/wadoproxy/server/routes.js
index 9cf40ba69..b12c1a9c8 100755
--- a/Packages/wadoproxy/server/routes.js
+++ b/Packages/wadoproxy/server/routes.js
@@ -1,33 +1,64 @@
-Router.route(Settings.uri, function () {
-    let response = this.response;
-    if (!this.params.query.url) {
+// Setup a Route using Iron Router to avoid Cross-origin resource sharing
+// (CORS) errors. We only handle this route on the Server.
+Router.route(Settings.uri, function() {
+    const request = this.request;
+    const response = this.response;
+    const params = this.params;
+    const requestOptions = params.query.options ? JSON.parse(params.query.options) : {};
+
+    // If no Web Access to DICOM Objects (WADO) Service URL is provided
+    // return an error for the request.
+    if (!params.query.url) {
         response.writeHead(500);
-        response.end('No wado url provided');
+        response.end('Error: No WADO URL was provided.\n');
         return;
     }
 
-    let proxyRequest,
-        wadoUrl = url.parse(this.params.query.url, false);
+    // Use Node's URL parse to decode the query URL
+    const wadoUrl = url.parse(params.query.url);
 
-    var options = {
-        headers: {}
+    // Create an object to hold the information required
+    // for the request to the PACS. 
+    let options = {
+        headers: {},
+        method: request.method,
+        hostname: wadoUrl.hostname,
+        port: wadoUrl.port, //maybe null
+        path: wadoUrl.path,
     };
-    //options.headers = this.request.headers;
-    if (this.request.headers['referer']) {
-        options.headers.referer = this.request.headers['referer'];
+
+    if (request.headers['referer']) {
+        options.headers.referer = request.headers['referer'];
     }
-    if (this.request.headers['user-agent']) {
-        options.headers['user-agent'] = this.request.headers['user-agent'];
+    if (request.headers['user-agent']) {
+        options.headers['user-agent'] = request.headers['user-agent'];
+    }    
+
+    // Retrieve the authorization user:password string for the PACS,
+    // if one is required, and include it in the request to the PACS.
+    //const wadoAuth = 'orthanc:orthanc'; 
+    if (requestOptions.auth) {
+        options.auth = requestOptions.auth;
     }
 
-    options.method = this.request.method;
-    options.host = wadoUrl.hostname;
-    options.port = wadoUrl.port ? wadoUrl.port : 80;
-    options.path = wadoUrl.path;
-
-    proxyRequest = http.request(options, function (proxyResponse) {
-        proxyResponse.pipe(response, {end: true});
+    // Use Node's HTTP API to send a request to the PACS
+    const proxyRequest = http.request(options, (proxyResponse) => {
+        // When we receive data from the PACS, stream it as the
+        // response to the original request.
+        // console.log(`Got response: ${proxyResponse.statusCode}`);
+        response.writeHead(proxyResponse.statusCode, proxyResponse.headers);
+        return proxyResponse.pipe(response, {end: true});
     });
-    //proxyRequest.end();
-    this.request.pipe(proxyRequest, {end: true});
-}, {where: 'server'});
\ No newline at end of file
+
+    // If our request to the PACS fails, log the error message
+    proxyRequest.on('error', (error) => {
+        response.writeHead(500);
+        response.end(`Error: Problem with request to PACS: ${error.message}\n`);
+    });
+
+    // Stream the original request information into the request
+    // to the PACS
+    request.pipe(proxyRequest);
+}, {
+    where: 'server'
+});
\ No newline at end of file
diff --git a/Packages/worklist/server/services/dimse/retrieveMetadata.js b/Packages/worklist/server/services/dimse/retrieveMetadata.js
index 8f3ca1445..44fd9c4b8 100755
--- a/Packages/worklist/server/services/dimse/retrieveMetadata.js
+++ b/Packages/worklist/server/services/dimse/retrieveMetadata.js
@@ -111,7 +111,7 @@ function resultDataToStudyMetadata(studyInstanceUid, resultData) {
 
         // Retrieve the actual data over WADO-URI
         var server = Meteor.settings.servers.dicomWeb[0];
-        instanceSummary.wadouri = WADOProxy.convertURL(server.wadoUriRoot + '?requestType=WADO&studyUID=' + studyInstanceUid + '&seriesUID=' + seriesInstanceUid + '&objectUID=' + sopInstanceUid + "&contentType=application%2Fdicom");
+        instanceSummary.wadouri = WADOProxy.convertURL(server.wadoUriRoot + '?requestType=WADO&studyUID=' + studyInstanceUid + '&seriesUID=' + seriesInstanceUid + '&objectUID=' + sopInstanceUid + "&contentType=application%2Fdicom", server.requestOptions);
 
         series.instances.push(instanceSummary);
     });
diff --git a/Packages/worklist/server/services/wado/retrieveMetadata.js b/Packages/worklist/server/services/wado/retrieveMetadata.js
index b08c822f9..7658cba26 100644
--- a/Packages/worklist/server/services/wado/retrieveMetadata.js
+++ b/Packages/worklist/server/services/wado/retrieveMetadata.js
@@ -116,7 +116,7 @@ function resultDataToStudyMetadata(server, studyInstanceUid, resultData) {
         };
 
         if (server.imageRendering === 'wadouri') {
-            instanceSummary.wadouri = WADOProxy.convertURL(server.wadoUriRoot + '?requestType=WADO&studyUID=' + studyInstanceUid + '&seriesUID=' + seriesInstanceUid + '&objectUID=' + sopInstanceUid + '&contentType=application%2Fdicom');
+            instanceSummary.wadouri = WADOProxy.convertURL(server.wadoUriRoot + '?requestType=WADO&studyUID=' + studyInstanceUid + '&seriesUID=' + seriesInstanceUid + '&objectUID=' + sopInstanceUid + '&contentType=application%2Fdicom', server.requestOptions);
         } else {
             instanceSummary.wadorsuri = server.wadoRoot + '/studies/' + studyInstanceUid + '/series/' + seriesInstanceUid + '/instances/' + sopInstanceUid + '/frames/1';
         }
diff --git a/config/dcm4cheeDIMSE.json b/config/dcm4cheeDIMSE.json
index 4e9615ac9..450bf189a 100644
--- a/config/dcm4cheeDIMSE.json
+++ b/config/dcm4cheeDIMSE.json
@@ -4,7 +4,7 @@
       {
         "name": "DCM4CHEE",
         "wadoUriRootNOTE": "either this uri is not correct for wado-uri or wado-uri is not configured on orthanc currently",
-        "wadoUriRoot": "http://localhost:8043/dcm4chee-arc/aets/DCM4CHEE/wado",
+        "wadoUriRoot": "http://localhost:8080/dcm4chee-arc/aets/DCM4CHEE/wado",
         "qidoRoot": "http://localhost:8080/dcm4chee-arc/aets/DCM4CHEE/rs",
         "wadoRoot": "http://localhost:8080/dcm4chee-arc/aets/DCM4CHEE/rs",
         "qidoSupportsIncludeField": false,
diff --git a/config/orthancDIMSE.json b/config/orthancDIMSE.json
index 8d713c603..55e0cdd0b 100644
--- a/config/orthancDIMSE.json
+++ b/config/orthancDIMSE.json
@@ -4,7 +4,7 @@
       {
         "name": "Orthanc",
         "wadoUriRootNOTE": "either this uri is not correct for wado-uri or wado-uri is not configured on orthanc currently",
-        "wadoUriRoot": "http://localhost:8043/wado",
+        "wadoUriRoot": "http://localhost:8042/wado",
         "qidoRoot": "http://localhost:8042/dicom-web",
         "wadoRoot": "http://localhost:8042/dicom-web",
         "qidoSupportsIncludeField": false,

From 8ec58015ce5fffb48eac05eebc1e52013084e48f Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Fri, 2 Sep 2016 09:53:32 +0200
Subject: [PATCH 38/41] Remove unnecessary CORS proxy scripts (LT-165). Update
 to Meteor 1.4.1.1

---
 LesionTracker/.meteor/.finished-upgraders |  1 +
 LesionTracker/.meteor/packages            | 25 +++++-----
 LesionTracker/.meteor/release             |  2 +-
 LesionTracker/.meteor/versions            | 59 ++++++++++++-----------
 OHIFViewer/.meteor/.finished-upgraders    |  1 +
 OHIFViewer/.meteor/packages               | 17 ++++---
 OHIFViewer/.meteor/release                |  2 +-
 OHIFViewer/.meteor/versions               | 51 ++++++++++----------
 config/orthancDICOMWeb.json               |  2 +-
 etc/OrthancProxy.js                       | 20 --------
 etc/dcm4cheCORSproxy.js                   | 20 --------
 etc/nodeCORSProxy.example                 | 20 --------
 etc/nodeCORSProxy.js                      | 20 --------
 etc/setupLocalOrthanc.sh                  | 11 -----
 14 files changed, 83 insertions(+), 168 deletions(-)
 mode change 100755 => 100644 OHIFViewer/.meteor/packages
 mode change 100755 => 100644 OHIFViewer/.meteor/versions
 delete mode 100644 etc/OrthancProxy.js
 delete mode 100644 etc/dcm4cheCORSproxy.js
 delete mode 100644 etc/nodeCORSProxy.example
 delete mode 100644 etc/nodeCORSProxy.js
 delete mode 100755 etc/setupLocalOrthanc.sh

diff --git a/LesionTracker/.meteor/.finished-upgraders b/LesionTracker/.meteor/.finished-upgraders
index 3e712bc5a..a541808f2 100644
--- a/LesionTracker/.meteor/.finished-upgraders
+++ b/LesionTracker/.meteor/.finished-upgraders
@@ -13,3 +13,4 @@ notices-for-facebook-graph-api-2
 1.3.0-split-minifiers-package
 1.3.5-remove-old-dev-bundle-link
 1.4.0-remove-old-dev-bundle-link
+1.4.1-add-shell-server-package
diff --git a/LesionTracker/.meteor/packages b/LesionTracker/.meteor/packages
index 1326f3bf7..7a8c5460b 100644
--- a/LesionTracker/.meteor/packages
+++ b/LesionTracker/.meteor/packages
@@ -4,18 +4,18 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-npm-bcrypt@0.8.7
+npm-bcrypt@0.9.1
 
 meteor-base@1.0.4             # Packages every Meteor app needs to have
 mobile-experience@1.0.4       # Packages for a great mobile UX
-mongo@1.1.10                  # The database Meteor supports right now
+mongo@1.1.12                  # The database Meteor supports right now
 blaze-html-templates@1.0.4    # Compile .html files into Meteor Blaze views
 session@1.1.6                 # Client-side reactive dictionary for your app
 jquery@1.11.9                 # Helpful client-side library
 tracker@1.1.0                 # Meteor's client-side reactive programming library
 
-es5-shim@4.6.13               # ECMAScript 5 compatibility for older browsers.
-ecmascript@0.5.7              # Enable ECMAScript2015+ syntax in app code
+es5-shim@4.6.14               # ECMAScript 5 compatibility for older browsers.
+ecmascript@0.5.8              # Enable ECMAScript2015+ syntax in app code
 
 clinical:router
 clinical:extended-api
@@ -36,15 +36,15 @@ cornerstone
 worklist
 viewerbase
 dicomweb
-accounts-base@1.2.9
-accounts-password@1.2.12
+accounts-base@1.2.11
+accounts-password@1.3.0
 
 ian:accounts-ui-bootstrap-3
 twbs:bootstrap
-http@1.2.8
+http@1.2.9
 arsnebula:reactive-promise
-promise@0.8.3
-stylus@2.513.4
+promise@0.8.4
+stylus@2.513.5
 fortawesome:fontawesome
 random@1.0.10
 reactive-var@1.0.10
@@ -58,12 +58,13 @@ check@1.2.3
 aldeed:template-extension@4.0.0
 zuuk:stale-session
 gilbertwat:bootstrap3-daterangepicker
-email@1.1.16
+email@1.1.17
 peppelg:bootstrap-3-modal
 simple:reactive-method
 hangingprotocols
 fastclick@1.0.12
-standard-minifier-css@1.1.8
-standard-minifier-js@1.1.8
+standard-minifier-css@1.2.0
+standard-minifier-js@1.2.0
 johdirr:meteor-git-rev
 u2622:persistent-session
+shell-server
diff --git a/LesionTracker/.meteor/release b/LesionTracker/.meteor/release
index c85944c1d..72980bc2f 100644
--- a/LesionTracker/.meteor/release
+++ b/LesionTracker/.meteor/release
@@ -1 +1 @@
-METEOR@1.4.0.1
+METEOR@1.4.1.1
diff --git a/LesionTracker/.meteor/versions b/LesionTracker/.meteor/versions
index bd51597af..23dedb6c0 100644
--- a/LesionTracker/.meteor/versions
+++ b/LesionTracker/.meteor/versions
@@ -1,5 +1,5 @@
-accounts-base@1.2.9
-accounts-password@1.2.12
+accounts-base@1.2.11
+accounts-password@1.3.0
 aldeed:simple-schema@1.5.3
 aldeed:template-extension@4.0.0
 allow-deny@1.0.5
@@ -8,15 +8,15 @@ anti:gagarin@0.4.11
 anti:i18n@0.4.3
 arsnebula:reactive-promise@0.9.1
 autoupdate@1.3.11
-babel-compiler@6.9.0
-babel-runtime@0.1.10
+babel-compiler@6.9.1
+babel-runtime@0.1.11
 base64@1.0.9
 binary-heap@1.0.9
 blaze@2.1.8
 blaze-html-templates@1.0.4
 blaze-tools@1.0.9
 boilerplate-generator@1.0.9
-caching-compiler@1.1.6
+caching-compiler@1.1.7
 caching-html-compiler@1.0.6
 callback-hook@1.0.9
 check@1.2.3
@@ -32,23 +32,23 @@ clinical:router-location@2.1.0
 clinical:router-middleware-stack@2.1.2
 clinical:router-url@2.1.0
 clinical:theming@0.4.10
-coffeescript@1.2.3
+coffeescript@1.2.4_1
 cornerstone@0.0.1
 ddp@1.2.5
-ddp-client@1.3.0
+ddp-client@1.3.1
 ddp-common@1.2.6
 ddp-rate-limiter@1.0.5
-ddp-server@1.3.9
+ddp-server@1.3.10
 deps@1.0.12
 design@0.0.1
 dicomweb@0.0.1
 diff-sequence@1.0.6
 dimseservice@0.0.1
-ecmascript@0.5.7
-ecmascript-runtime@0.3.12
+ecmascript@0.5.8
+ecmascript-runtime@0.3.14
 ejson@1.0.12
-email@1.1.16
-es5-shim@4.6.13
+email@1.1.17
+es5-shim@4.6.14
 fastclick@1.0.12
 fortawesome:fontawesome@4.5.0
 geojson-utils@1.0.9
@@ -58,7 +58,7 @@ hangingprotocols@0.0.1
 hot-code-push@1.0.4
 html-tools@1.0.10
 htmljs@1.0.10
-http@1.2.8
+http@1.2.9
 ian:accounts-ui-bootstrap-3@1.2.89
 id-map@1.0.8
 insecure@1.0.7
@@ -72,25 +72,25 @@ launch-screen@1.0.12
 lesiontracker@0.0.1
 livedata@1.0.18
 localstorage@1.0.11
-logging@1.1.14
+logging@1.1.15
 mdg:validation-error@0.5.1
-meteor@1.2.16
+meteor@1.2.17
 meteor-base@1.0.4
 meteor-platform@1.2.6
-minifier-css@1.2.13
-minifier-js@1.2.13
+minifier-css@1.2.14
+minifier-js@1.2.14
 minimongo@1.0.17
 mobile-experience@1.0.4
 mobile-status-bar@1.0.12
-modules@0.7.5
-modules-runtime@0.7.5
+modules@0.7.6
+modules-runtime@0.7.6
 momentjs:moment@2.14.4
-mongo@1.1.10
+mongo@1.1.12
 mongo-id@1.0.5
 mrt:moment@2.8.1
-natestrauser:select2@4.0.2
-npm-bcrypt@0.8.7
-npm-mongo@1.5.45
+natestrauser:select2@4.0.3
+npm-bcrypt@0.9.1
+npm-mongo@1.5.49
 observe-sequence@1.0.12
 ohif:core@0.0.1
 ordered-dict@1.0.8
@@ -98,7 +98,7 @@ orthanc-remote@0.0.1
 peppelg:bootstrap-3-modal@1.0.4
 practicalmeteor:chai@2.1.0_1
 practicalmeteor:loglevel@1.2.0_2
-promise@0.8.3
+promise@0.8.4
 random@1.0.10
 rate-limit@1.0.5
 reactive-dict@1.1.8
@@ -110,16 +110,17 @@ rwatts:uuid@0.1.0
 service-configuration@1.0.10
 session@1.1.6
 sha@1.0.8
+shell-server@0.2.1
 silentcicero:jszip@0.0.4
 simple:reactive-method@1.0.2
 spacebars@1.0.12
 spacebars-compiler@1.0.12
 srp@1.0.9
 standard-app-packages@1.0.9
-standard-minifier-css@1.1.8
-standard-minifier-js@1.1.8
-stylus@2.513.4
-templating@1.2.13
+standard-minifier-css@1.2.0
+standard-minifier-js@1.2.0
+stylus@2.513.5
+templating@1.2.14
 templating-tools@1.0.4
 tracker@1.1.0
 twbs:bootstrap@3.3.6
@@ -132,7 +133,7 @@ url@1.0.10
 validatejs@0.0.1
 viewerbase@0.0.1
 wadoproxy@0.0.1
-webapp@1.3.10
+webapp@1.3.11
 webapp-hashing@1.0.9
 worklist@0.0.1
 zuuk:stale-session@1.0.8
diff --git a/OHIFViewer/.meteor/.finished-upgraders b/OHIFViewer/.meteor/.finished-upgraders
index 3e712bc5a..a541808f2 100644
--- a/OHIFViewer/.meteor/.finished-upgraders
+++ b/OHIFViewer/.meteor/.finished-upgraders
@@ -13,3 +13,4 @@ notices-for-facebook-graph-api-2
 1.3.0-split-minifiers-package
 1.3.5-remove-old-dev-bundle-link
 1.4.0-remove-old-dev-bundle-link
+1.4.1-add-shell-server-package
diff --git a/OHIFViewer/.meteor/packages b/OHIFViewer/.meteor/packages
old mode 100755
new mode 100644
index c305d0da9..69073452a
--- a/OHIFViewer/.meteor/packages
+++ b/OHIFViewer/.meteor/packages
@@ -5,20 +5,20 @@
 # but you can also edit it by hand.
 
 twbs:bootstrap
-http@1.2.8
+http@1.2.9
 arsnebula:reactive-promise
-promise@0.8.3
-stylus@2.513.4
+promise@0.8.4
+stylus@2.513.5
 fortawesome:fontawesome
 mrt:moment
 meteor-base@1.0.4
 mobile-experience@1.0.4
-mongo@1.1.10
+mongo@1.1.12
 blaze-html-templates@1.0.4
 session@1.1.6
 jquery@1.11.9
 tracker@1.1.0
-logging@1.1.14
+logging@1.1.15
 reload@1.1.10
 random@1.0.10
 ejson@1.0.12
@@ -29,7 +29,7 @@ dicomweb
 aldeed:simple-schema          # Third party package to deal with schemas
 design
 ohif:core
-ecmascript@0.5.7
+ecmascript@0.5.8
 viewerbase
 worklist
 reactive-var@1.0.10
@@ -38,9 +38,10 @@ hangingprotocols
 reactive-dict@1.1.8
 clinical:router
 fastclick@1.0.12
-standard-minifier-css@1.1.8
-standard-minifier-js@1.1.8
+standard-minifier-css@1.2.0
+standard-minifier-js@1.2.0
 johdirr:meteor-git-rev
 wadoproxy
 aldeed:template-extension
 peppelg:bootstrap-3-modal
+shell-server
diff --git a/OHIFViewer/.meteor/release b/OHIFViewer/.meteor/release
index c85944c1d..72980bc2f 100644
--- a/OHIFViewer/.meteor/release
+++ b/OHIFViewer/.meteor/release
@@ -1 +1 @@
-METEOR@1.4.0.1
+METEOR@1.4.1.1
diff --git a/OHIFViewer/.meteor/versions b/OHIFViewer/.meteor/versions
old mode 100755
new mode 100644
index 8a20cef19..6d529819e
--- a/OHIFViewer/.meteor/versions
+++ b/OHIFViewer/.meteor/versions
@@ -3,15 +3,15 @@ aldeed:template-extension@4.0.0
 allow-deny@1.0.5
 arsnebula:reactive-promise@0.9.1
 autoupdate@1.3.11
-babel-compiler@6.9.0
-babel-runtime@0.1.10
+babel-compiler@6.9.1
+babel-runtime@0.1.11
 base64@1.0.9
 binary-heap@1.0.9
 blaze@2.1.8
 blaze-html-templates@1.0.4
 blaze-tools@1.0.9
 boilerplate-generator@1.0.9
-caching-compiler@1.1.6
+caching-compiler@1.1.7
 caching-html-compiler@1.0.6
 callback-hook@1.0.9
 check@1.2.3
@@ -19,19 +19,19 @@ clinical:router@2.0.19
 clinical:router-location@2.1.0
 clinical:router-middleware-stack@2.1.2
 clinical:router-url@2.1.0
-coffeescript@1.2.3
+coffeescript@1.2.4_1
 cornerstone@0.0.1
 ddp@1.2.5
-ddp-client@1.3.0
+ddp-client@1.3.1
 ddp-common@1.2.6
-ddp-server@1.3.9
+ddp-server@1.3.10
 deps@1.0.12
 design@0.0.1
 dicomweb@0.0.1
 diff-sequence@1.0.6
 dimseservice@0.0.1
-ecmascript@0.5.7
-ecmascript-runtime@0.3.12
+ecmascript@0.5.8
+ecmascript-runtime@0.3.14
 ejson@1.0.12
 fastclick@1.0.12
 fortawesome:fontawesome@4.5.0
@@ -41,7 +41,7 @@ hangingprotocols@0.0.1
 hot-code-push@1.0.4
 html-tools@1.0.10
 htmljs@1.0.10
-http@1.2.8
+http@1.2.9
 id-map@1.0.8
 iron:controller@1.0.12
 iron:core@1.0.11
@@ -51,24 +51,24 @@ johdirr:meteor-git-rev@0.0.4
 jquery@1.11.9
 launch-screen@1.0.12
 livedata@1.0.18
-logging@1.1.14
-mdg:validation-error@0.2.0
-meteor@1.2.16
+logging@1.1.15
+mdg:validation-error@0.5.1
+meteor@1.2.17
 meteor-base@1.0.4
 meteor-platform@1.2.6
-minifier-css@1.2.13
-minifier-js@1.2.13
+minifier-css@1.2.14
+minifier-js@1.2.14
 minimongo@1.0.17
 mobile-experience@1.0.4
 mobile-status-bar@1.0.12
-modules@0.7.5
-modules-runtime@0.7.5
+modules@0.7.6
+modules-runtime@0.7.6
 momentjs:moment@2.14.4
-mongo@1.1.10
+mongo@1.1.12
 mongo-id@1.0.5
 mrt:moment@2.8.1
-natestrauser:select2@4.0.2
-npm-mongo@1.5.45
+natestrauser:select2@4.0.3
+npm-mongo@1.5.49
 observe-sequence@1.0.12
 ohif:core@0.0.1
 ordered-dict@1.0.8
@@ -76,7 +76,7 @@ orthanc-remote@0.0.1
 peppelg:bootstrap-3-modal@1.0.4
 practicalmeteor:chai@2.1.0_1
 practicalmeteor:loglevel@1.2.0_2
-promise@0.8.3
+promise@0.8.4
 random@1.0.10
 reactive-dict@1.1.8
 reactive-var@1.0.10
@@ -85,14 +85,15 @@ retry@1.0.8
 routepolicy@1.0.11
 rwatts:uuid@0.1.0
 session@1.1.6
+shell-server@0.2.1
 silentcicero:jszip@0.0.4
 spacebars@1.0.12
 spacebars-compiler@1.0.12
 standard-app-packages@1.0.9
-standard-minifier-css@1.1.8
-standard-minifier-js@1.1.8
-stylus@2.513.4
-templating@1.2.13
+standard-minifier-css@1.2.0
+standard-minifier-js@1.2.0
+stylus@2.513.5
+templating@1.2.14
 templating-tools@1.0.4
 tracker@1.1.0
 twbs:bootstrap@3.3.6
@@ -102,6 +103,6 @@ url@1.0.10
 validatejs@0.0.1
 viewerbase@0.0.1
 wadoproxy@0.0.1
-webapp@1.3.10
+webapp@1.3.11
 webapp-hashing@1.0.9
 worklist@0.0.1
diff --git a/config/orthancDICOMWeb.json b/config/orthancDICOMWeb.json
index ee2f1a1f2..0e9bba1ba 100644
--- a/config/orthancDICOMWeb.json
+++ b/config/orthancDICOMWeb.json
@@ -4,7 +4,7 @@
       {
         "name": "Orthanc",
         "wadoUriRootNOTE": "either this uri is not correct for wado-uri or wado-uri is not configured on orthanc currently",
-        "wadoUriRoot": "http://localhost:8043/wado",
+        "wadoUriRoot": "http://localhost:8042/wado",
         "qidoRoot": "http://localhost:8042/dicom-web",
         "wadoRoot": "http://localhost:8042/dicom-web",
         "qidoSupportsIncludeField": false,
diff --git a/etc/OrthancProxy.js b/etc/OrthancProxy.js
deleted file mode 100644
index be7c16053..000000000
--- a/etc/OrthancProxy.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// This sets up a proxy to work around CORS.
-// See http://chafey.blogspot.be/2014/09/working-around-cors.html
-// For more information
-var http = require('http'),
-    httpProxy = require('http-proxy');
-
-var proxy =  httpProxy.createProxyServer({
-    target: 'http://localhost:8042',
-    auth: 'orthanc:orthanc'
-}).listen(8043);
-
-proxy.on('proxyRes', function(proxyReq, req, res, options) {
-  // add the CORS header to the response
-  res.setHeader('Access-Control-Allow-Origin', '*');
-});
-
-proxy.on('error', function(e) {
-  // suppress errors
-  console.log(e);
-});
diff --git a/etc/dcm4cheCORSproxy.js b/etc/dcm4cheCORSproxy.js
deleted file mode 100644
index d47fbeed3..000000000
--- a/etc/dcm4cheCORSproxy.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// This sets up a proxy to work around CORS.
-// See http://chafey.blogspot.be/2014/09/working-around-cors.html
-// For more information
-var http = require('http'),
-    httpProxy = require('http-proxy');
-
-var proxy =  httpProxy.createProxyServer({
-    target: 'http://localhost:8080',
-    auth: 'user:user'
-}).listen(8043);
-
-proxy.on('proxyRes', function(proxyReq, req, res, options) {
-  // add the CORS header to the response
-  res.setHeader('Access-Control-Allow-Origin', '*');
-});
-
-proxy.on('error', function(e) {
-  // suppress errors
-  console.log(e);
-});
diff --git a/etc/nodeCORSProxy.example b/etc/nodeCORSProxy.example
deleted file mode 100644
index ae50b166e..000000000
--- a/etc/nodeCORSProxy.example
+++ /dev/null
@@ -1,20 +0,0 @@
-// This sets up a proxy to work around CORS.
-// See http://chafey.blogspot.be/2014/09/working-around-cors.html
-// For more information
-var http = require('http'),
-    httpProxy = require('http-proxy');
-
-var proxy =  httpProxy.createProxyServer({
-    target: 'http://localhost:8042',
-    auth: 'orthanc:orthanc'
-}).listen(8042);
-
-proxy.on('proxyRes', function(proxyReq, req, res, options) {
-  // add the CORS header to the response
-  res.setHeader('Access-Control-Allow-Origin', '*');
-});
-
-proxy.on('error', function(e) {
-  // suppress errors
-  console.log(e);
-});
diff --git a/etc/nodeCORSProxy.js b/etc/nodeCORSProxy.js
deleted file mode 100644
index be7c16053..000000000
--- a/etc/nodeCORSProxy.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// This sets up a proxy to work around CORS.
-// See http://chafey.blogspot.be/2014/09/working-around-cors.html
-// For more information
-var http = require('http'),
-    httpProxy = require('http-proxy');
-
-var proxy =  httpProxy.createProxyServer({
-    target: 'http://localhost:8042',
-    auth: 'orthanc:orthanc'
-}).listen(8043);
-
-proxy.on('proxyRes', function(proxyReq, req, res, options) {
-  // add the CORS header to the response
-  res.setHeader('Access-Control-Allow-Origin', '*');
-});
-
-proxy.on('error', function(e) {
-  // suppress errors
-  console.log(e);
-});
diff --git a/etc/setupLocalOrthanc.sh b/etc/setupLocalOrthanc.sh
deleted file mode 100755
index 269371c68..000000000
--- a/etc/setupLocalOrthanc.sh
+++ /dev/null
@@ -1,11 +0,0 @@
-#!/bin/bash
-echo "Retrieving docker default machine IP address..."
-MACHINEIP=$(docker-machine ip default)
-echo "Copying nodeCORSProxy.example to nodeCORSProxy.js"
-cp nodeCORSProxy.example nodeCORSProxy.js
-sed -i '' "s/localhost:8042/$MACHINEIP:8042/g" nodeCORSProxy.js
-echo "Installing node http-proxy from npm..."
-npm install http-proxy
-echo "Running proxy server..."
-echo "In a separate tab/terminal, go to /main and run ./bin/orthancDICOMWeb.sh to start the Meteor server"
-node nodeCORSProxy.js

From cefea4547241af4877d590ea370c9b965ae6081c Mon Sep 17 00:00:00 2001
From: weiwei <weiwei@toca.com>
Date: Fri, 2 Sep 2016 20:08:28 +0800
Subject: [PATCH 39/41] change default port of dimse server to 11119

---
 config/dcm4cheeDIMSE.json | 2 +-
 config/medkenOrthanc.json | 2 +-
 config/orthancDIMSE.json  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/config/dcm4cheeDIMSE.json b/config/dcm4cheeDIMSE.json
index 450bf189a..5727ef832 100644
--- a/config/dcm4cheeDIMSE.json
+++ b/config/dcm4cheeDIMSE.json
@@ -28,7 +28,7 @@
         },
         {
           "host": "0.0.0.0",
-          "port": 11112,
+          "port": 11119,
           "aeTitle": "DCM4CHEE",
           "default": true,
           "server": true
diff --git a/config/medkenOrthanc.json b/config/medkenOrthanc.json
index 7b335dddf..f80d1ef9e 100644
--- a/config/medkenOrthanc.json
+++ b/config/medkenOrthanc.json
@@ -27,7 +27,7 @@
         },
         {
           "host": "0.0.0.0",
-          "port": 11112,
+          "port": 11119,
           "aeTitle": "OHIFDCM",
           "default": true,
           "server": true
diff --git a/config/orthancDIMSE.json b/config/orthancDIMSE.json
index 55e0cdd0b..895e46155 100644
--- a/config/orthancDIMSE.json
+++ b/config/orthancDIMSE.json
@@ -28,7 +28,7 @@
         },
         {
           "host": "0.0.0.0",
-          "port": 11112,
+          "port": 11119,
           "aeTitle": "OHIFDCM",
           "default": true,
           "server": true

From 4a389d2304b5d28c18ecfd0c19b55f9be37d1bb5 Mon Sep 17 00:00:00 2001
From: weiwei <weiwei@toca.com>
Date: Fri, 2 Sep 2016 20:28:54 +0800
Subject: [PATCH 40/41] fixed study level number of intances default to 0

---
 .../worklist/client/components/worklistResult/worklistResult.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.js b/Packages/worklist/client/components/worklistResult/worklistResult.js
index 828081518..3f8301ed9 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.js
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.js
@@ -167,7 +167,7 @@ function search() {
                 (convertStringToStudyDate(study.studyDate) <= new Date(studyDateTo).setHours(0, 0, 0, 0) || !studyDateTo || studyDateTo === '')) {
 
                 // Convert numberOfStudyRelatedInstance string into integer
-                study.numberOfStudyRelatedInstances = parseInt(study.numberOfStudyRelatedInstances);
+                study.numberOfStudyRelatedInstances = !isNaN(study.numberOfStudyRelatedInstances) ? parseInt(study.numberOfStudyRelatedInstances) : 0;
 
                 // Insert any matching studies into the WorklistStudies Collection
                 WorklistStudies.insert(study);

From 1603450da836233633c1321bee33b5f4b3645b5a Mon Sep 17 00:00:00 2001
From: weiwei <weiwei@toca.com>
Date: Fri, 2 Sep 2016 20:58:49 +0800
Subject: [PATCH 41/41] switch default server port for dcm4chee config back to
 11112

---
 config/dcm4cheeDIMSE.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/dcm4cheeDIMSE.json b/config/dcm4cheeDIMSE.json
index 5727ef832..450bf189a 100644
--- a/config/dcm4cheeDIMSE.json
+++ b/config/dcm4cheeDIMSE.json
@@ -28,7 +28,7 @@
         },
         {
           "host": "0.0.0.0",
-          "port": 11119,
+          "port": 11112,
           "aeTitle": "DCM4CHEE",
           "default": true,
           "server": true