LT-275: Storing and showing common used labels

Packages/ohif-core/client/components/bootstrap/index.js

@@ -7,3 +7,5 @@ import './input/select.html';
 import './input/text.html';
 import './input/selectTree.html';
 import './input/selectTree.js';
+import './input/selectTreeCommon.html';
+import './input/selectTreeCommon.js';

Packages/ohif-core/client/components/bootstrap/input/selectTree.html

@@ -24,6 +24,7 @@
                     <div class="tree-inputs">
                         {{#each item in (reactive this.items)}}
                             {{>inputRadio
+                                id=(concat this.storageKey '_' (encodeId item.value))
                                 class=this.radioClass
                                 name=this.key
                                 value=item.value
@@ -43,20 +44,12 @@
                 </div>
             {{/let}}
         </div>
-        {{#unless this.root}}
-            {{>selectTreeCommon this}}
-        {{/unless}}
+        {{#if (and (not this.root) this.storageKey)}}
+            {{>selectTreeCommon (clone this component=this.component)}}
+        {{/if}}
     {{/group}}
 </template>
 
-<template name="selectTreeCommon">
-    <div class="select-tree-common">
-        <div class="content">
-            <h5 class="title">Common</h5>
-        </div>
-    </div>
-</template>
-
 <template name="selectTreeBreadcrumb">
     <div class="tree-breadcrumb clearfix">
         {{>selectTreeBreadcrumbParent

Packages/ohif-core/client/components/bootstrap/input/selectTree.js

@@ -1,3 +1,4 @@
+import { OHIF } from 'meteor/ohif:core';
 import { Meteor } from 'meteor/meteor';
 import { Template } from 'meteor/templating';
 import { _ } from 'meteor/underscore';
@@ -67,9 +68,9 @@ Template.selectTree.onRendered(() => {
 });
 
 Template.selectTree.events({
-    'click .select-tree-root'(event, instance) {
+    'click .select-tree-root>.tree-content'(event, instance) {
         // Detect the first interaction with the component and do the animation
-        $(event.currentTarget).addClass('interacted');
+        $(event.currentTarget).parent().addClass('interacted');
     },
 
     'change .select-tree:first>.tree-content>.tree-options>.tree-inputs>label>input'(event, instance) {
@@ -95,6 +96,22 @@ Template.selectTree.events({
             // Change the active item
             $label.addClass('active');
 
+            const storageKey = instance.data.storageKey;
+            if (storageKey) {
+                const storedData = _.extend({}, OHIF.user.getData(storageKey));
+
+                const itemKey = OHIF.string.encodeId($target.val());
+                if (storedData[itemKey]) {
+                    storedData[itemKey]++;
+                } else {
+                    storedData[itemKey] = 1;
+                }
+
+                console.warn('>>>>', storageKey, storedData, itemKey);
+
+                OHIF.user.setData(storageKey, storedData);
+            }
+
             // Mark the component as selected
             instance.setSelected(true);
         } else {

Packages/ohif-core/client/components/bootstrap/input/selectTreeCommon.html

@@ -0,0 +1,10 @@
+<template name="selectTreeCommon">
+    <div class="select-tree-common">
+        <div class="content">
+            <h5 class="title">Common</h5>
+            {{#each item in items}}
+                <label for="{{this.storageKey}}_{{encodeId item.value}}">{{item.label}}</label>
+            {{/each}}
+        </div>
+    </div>
+</template>

Packages/ohif-core/client/components/bootstrap/input/selectTreeCommon.js

@@ -0,0 +1,39 @@
+import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
+import { _ } from 'meteor/underscore';
+
+Template.selectTreeCommon.helpers({
+    // Get the common items ordered by use history
+    items() {
+        const instance = Template.instance();
+
+        // 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;
+    }
+});