LT-275: Creating final measure flow using selectTree component

Packages/design/styles/components/selectTree.styl

@@ -58,6 +58,7 @@ $gray6 = #303030
 .select-tree-root
   display: inline-block
   position: relative
+  z-index: 0
 
   &>.tree-content
     border: 1px solid $gray3
@@ -183,6 +184,9 @@ $gray6 = #303030
         line-height: 20px
         margin: 0
 
+      label
+        display: block
+
 .select-tree-root
 
   &>.tree-content

Packages/lesiontracker/client/components/measureFlow/measureFlow.html

@@ -0,0 +1,12 @@
+<template name="measureFlow">
+    <div class="measure-flow">
+        <button>Add label</button>
+        {{>selectTree
+            key='label'
+            items=instance.items
+            label='Assign label'
+            searchPlaceholder='Search labels'
+            storageKey='measureLabelCommon'
+        }}
+    </div>
+</template>

Packages/lesiontracker/client/components/measureFlow/measureFlow.js

@@ -0,0 +1,50 @@
+Template.measureFlow.onCreated(() => {
+    const instance = Template.instance();
+
+    const items = [
+        'Adrenal',
+        'Bladder',
+        'Bone',
+        'Brain',
+        'Breast',
+        'Colon',
+        'Esophagus',
+        'Extremities',
+        'Gallbladder',
+        'Kidney',
+        'Liver',
+        'Lung',
+        'Lymph Node',
+        'Muscle',
+        'Neck',
+        'Other: Soft Tissue',
+        'Ovary',
+        'Pancreas',
+        'Pelvis',
+        'Peritoneum/Omentum',
+        'Prostate',
+        'Retroperitoneum',
+        'Small Bowel',
+        'Spleen',
+        'Stomach',
+        'Subcutaneous'
+    ];
+
+    instance.items = [];
+    _.each(items, item => {
+        instance.items.push({
+            label: item,
+            value: item
+        });
+    });
+});
+
+Template.measureFlow.events({
+    'click .tree-leaf input'(event, instance) {
+        console.warn('>>>>event', event);
+        const $label = $(event.currentTarget).closest('label');
+        const $container = $label.closest('.select-tree-root').find('.tree-options:first');
+        const top = $label.position().top;
+        $container.scrollTop(top);
+    }
+});

Packages/lesiontracker/client/components/measureFlow/measureFlow.styl

@@ -0,0 +1,12 @@
+.measure-flow
+
+  .select-tree-root>.tree-content>.tree-options
+    margin-right: -20px
+    max-height: 250px
+    overflow-x: hidden
+    overflow-y: scroll
+    position: relative
+    z-index: 2
+
+    .tree-inputs
+      position: relative

Packages/lesiontracker/package.js

@@ -55,7 +55,7 @@ Package.onUse(function(api) {
     ], 'client', {
         bare: true
     });
-    
+
     api.addFiles('client/tools.js', 'client');
 
     // Utility classes
@@ -175,6 +175,10 @@ Package.onUse(function(api) {
     api.addFiles('client/components/lesionTrackerWorklistStudy/lesionTrackerWorklistStudy.styl', 'client');
     api.addFiles('client/components/lesionTrackerWorklistStudy/lesionTrackerWorklistStudy.js', 'client');
 
+    api.addFiles('client/components/measureFlow/measureFlow.html', 'client');
+    api.addFiles('client/components/measureFlow/measureFlow.styl', 'client');
+    api.addFiles('client/components/measureFlow/measureFlow.js', 'client');
+
     api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.html', 'client');
     api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.styl', 'client');
     api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.js', 'client');

Packages/ohif-core/client/components/playground/playground.html

@@ -1,4 +1,5 @@
 <template name="componentPlayground">
+<!--
     <div class="p-a-3">
         {{>selectTree
             key='label'
@@ -8,4 +9,6 @@
             storageKey='measureLabelCommon'
         }}
     </div>
+-->
+{{>measureFlow}}
 </template>