LT-275: Storing and showing common used labels

Packages/ohif-core/client/components/base/mixins/selectTree.js

@@ -42,6 +42,23 @@ OHIF.mixins.selectTree = new OHIF.Mixin({
                 // Change the current node
                 instance.data.currentNode.set(node);
             };
+
+            // Return plain data for all the leaves inside current node
+            component.getLeaves = () => {
+                const recursiveSeek = (items, result=[]) => {
+                    _.each(items, item => {
+                        if (item.items) {
+                            recursiveSeek(item.items, result);
+                        } else {
+                            result.push(item);
+                        }
+                    });
+                    return result;
+                };
+
+                return recursiveSeek(instance.data.items);
+            };
+
         }
     }
 });

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;
+    }
+});

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

@@ -5,6 +5,7 @@
             items=instance.items
             label='Assign label'
             searchPlaceholder='Search labels'
+            storageKey='measureLabelCommon'
         }}
     </div>
 </template>

Packages/ohif-core/client/helpers/string.js

@@ -1,3 +1,4 @@
+import { OHIF } from 'meteor/ohif:core';
 import { _ } from 'meteor/underscore';
 import { Template } from 'meteor/templating';
 
@@ -14,3 +15,6 @@ Template.registerHelper('concat', (...args) => {
     });
     return result;
 });
+
+// Encode any string into a safe format for HTML id attribute
+Template.registerHelper('encodeId', string => OHIF.string.encodeId(string));

Packages/ohif-core/client/lib/string.js

@@ -31,3 +31,17 @@ OHIF.string.search = (object, query, property=null, result=[]) => {
     // Return the found items
     return result;
 };
+
+// Encode any string into a safe format for HTML id attribute
+OHIF.string.encodeId = string => {
+    // Return an underscore if the given string is empty or if it's not a string
+    if (string === '' || typeof string !== 'string') {
+        return '_';
+    }
+
+    // Create a converter to replace non accepted chars
+    const converter = match => '_' + match[0].charCodeAt(0).toString(16) + '_';
+
+    // Encode the given string and return it
+    return string.replace(/[^a-zA-Z0-9-]/g, converter);
+};

Packages/ohif-core/client/lib/user.js

@@ -14,8 +14,11 @@ OHIF.user.getData = key => {
     // Check if there is an user logged in
     OHIF.user.validate();
 
+    // Get user profile data
+    const profile = Meteor.user().profile;
+
     // Get the user persistent data
-    const data = Meteor.user().profile.persistent;
+    const data = profile && profile.persistent;
 
     if (data) {
         return data[key];