Adjusting OHIF Viewer to the new structure

LesionTracker/.meteor/packages

@@ -65,6 +65,6 @@ fastclick@1.0.13
 standard-minifier-css@1.3.2
 standard-minifier-js@1.2.1
 johdirr:meteor-git-rev
-u2622:persistent-session
+u2622:persistent-session@0.4.4
 shell-server@0.2.1
 aldeed:collection2

LesionTracker/client/components/app/app.js

@@ -107,7 +107,7 @@ Template.app.helpers({
         const isViewer = Session.get('ViewerOpened');
 
         // Return empty if viewer was not opened yet
-        if (!OHIF.viewer.data.studyInstanceUids) return;
+        if (!OHIF.utils.ObjectPath.get(OHIF, 'viewer.data.studyInstanceUids')) return;
 
         return isViewer ? 'Study list' : 'Back to viewer';
     },

LesionTracker/client/components/app/app.styl

@@ -68,16 +68,16 @@ body>.header
     padding-right: $studyListPadding
 
     .brand
-        height: 100%
+      height: 100%
-        width: 80%
+      width: 80%
-        line-height: $topBarExpandedHeight - 10px
+      line-height: $topBarExpandedHeight - 10px
 
-        .logo-image
+      .logo-image
-          margin: 0 20px 0 0
+        margin: 0 20px 0 0
-          width: 50px
+        width: 50px
 
-        .logo-text
+      .logo-text
-          font-size: 30px
+        font-size: 30px
 
     .studyListLinkSection
       border: none

LesionTracker/client/components/viewer/viewer.js

@@ -5,8 +5,8 @@ import { Session } from 'meteor/session';
 import { ReactiveDict } from 'meteor/reactive-dict';
 import { _ } from 'meteor/underscore';
 import { $ } from 'meteor/jquery';
-
 import { OHIF } from 'meteor/ohif:core';
+
 import 'meteor/ohif:cornerstone';
 import 'meteor/ohif:viewerbase';
 import 'meteor/ohif:metadata';

LesionTracker/client/head.html

@@ -5,7 +5,7 @@
     <!-- Prevents page zooming -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
-    <link rel="shortcut icon" type="image/png" href="images/logo.png" sizes="16x16 32x32 64x64">
+    <link rel="shortcut icon" type="image/png" href="/images/logo.png" sizes="16x16 32x32 64x64">
     <!--Best display for mobile devices-->
     <meta http-equiv="cleartype" content="on">
     <meta name="MobileOptimized" content="320">

OHIFViewer/.meteor/packages

@@ -7,6 +7,7 @@
 # OHIF Packages
 ohif:design
 ohif:core
+ohif:header
 ohif:cornerstone
 ohif:viewerbase
 ohif:study-list
@@ -44,6 +45,7 @@ fastclick@1.0.13
 standard-minifier-css@1.3.2
 standard-minifier-js@1.2.1
 johdirr:meteor-git-rev
+u2622:persistent-session@0.4.4
 aldeed:template-extension
 peppelg:bootstrap-3-modal
 shell-server@0.2.1

OHIFViewer/.meteor/versions

@@ -6,6 +6,7 @@ aldeed:schema-index@1.1.1
 aldeed:simple-schema@1.5.3
 aldeed:template-extension@4.0.0
 allow-deny@1.0.5
+amplify@1.0.0
 arsnebula:reactive-promise@0.9.1
 autoupdate@1.3.12
 babel-compiler@6.13.0
@@ -76,9 +77,12 @@ ohif:cornerstone@0.0.1
 ohif:design@0.0.1
 ohif:dicom-services@0.0.1
 ohif:hanging-protocols@0.0.1
+ohif:header@0.0.1
 ohif:log@0.0.1
 ohif:metadata@0.0.1
 ohif:study-list@0.0.1
+ohif:themes@0.0.1
+ohif:themes-common@0.0.1
 ohif:viewerbase@0.0.1
 ohif:wadoproxy@0.0.1
 ordered-dict@1.0.9
@@ -110,6 +114,7 @@ templating-runtime@1.2.15
 templating-tools@1.0.5
 tracker@1.1.1
 twbs:bootstrap@3.3.6
+u2622:persistent-session@0.4.4
 ui@1.0.12
 underscore@1.0.10
 url@1.0.11

OHIFViewer/client/components/ohifViewer/ohifViewer.html

@@ -1,44 +1,25 @@
 <template name="ohifViewer">
-    <div class="topBar noselect {{#if onStudyList}}studyList{{/if}}">
+    {{#header brandHref='http://ohif.org' headerClasses=instance.headerClasses}}
-        <div class="clearfix">
+        {{#section 'brand'}}
-            <a target='_blank'
+            <svg class="logo-image">
-               class="brandSection pull-left"
+                <use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"}}></use>
-               href="http://ohif.org">
+            </svg>
-                <svg class="logoImage">
+            <div class="logo-text">Open Health Imaging Foundation</div>
-                    <use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"}}></use>
+        {{/section}}
-                </svg>
+        {{#section 'headerAfterBrand'}}
-                <div class="logoText">
-                    Open Health Imaging Foundation
-                </div>
-            </a>
             {{#if studyListToggleText}}
-                <a class="btn studyListLinkSection pull-left js-toggle-studyList">
+                <a href="#" class="btn studyListLinkSection pull-left js-toggle-studyList">
                     {{studyListToggleText}}
                 </a>
             {{/if}}
-            <span class="pull-right">
+        {{/section}}
-                <div class="dropdown">
+        {{#section 'headerMenu'}}
-                    <div class="dropdown-toggle noselect clearfix" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <span class="header-options pull-left m-r-1">Options</span>
-                        <span class="pull-left m-r-1">Options</span>
+            <div class="menu-toggle pull-right">
-                        <div class="menuButton pull-right"><span class="caret-down"></span></div>
+                <span class="caret-down"></span>
-                    </div>
+            </div>
-                    <ul class="dropdown-menu dropdown-menu-right">
+        {{/section}}
-                        <li>
+    {{/header}}
-                            <a id="serverInformation">
+
-                                <i class="fa fa-server fa-lg"></i> Server Information
+    {{>Template.dynamic template=(choose this.template 'studylist') data=this}}
-                            </a>
-                        </li>
-                        <li role="separator" class="divider"></li>
-                        <li>
-                            <a data-toggle="modal" data-target="#aboutModal">
-                                <i class="fa fa-info"></i> About
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </span>
-        </div>
-    </div>
-    {{>studylist}}
-    {{>aboutModal}}
 </template>

OHIFViewer/client/components/ohifViewer/ohifViewer.js

@@ -14,7 +14,7 @@ Template.ohifViewer.onCreated(() => {
         icon: 'fa fa-server fa-lg',
         separatorAfter: true
     }, {
-        action: () => $('#aboutModal').show(),
+        action: () => OHIF.ui.showDialog('aboutModal'),
         text: 'About',
         icon: 'fa fa-info'
     }]);
@@ -55,7 +55,7 @@ Template.ohifViewer.helpers({
         const isViewer = Session.get('ViewerOpened');
 
         // Return empty if viewer was not opened yet
-        if (!OHIF.viewer.data.studyInstanceUids) return;
+        if (!OHIF.utils.ObjectPath.get(OHIF, 'viewer.data.studyInstanceUids')) return;
 
         return isViewer ? 'Study list' : 'Back to viewer';
     }

OHIFViewer/client/components/ohifViewer/ohifViewer.styl

@@ -1,42 +1,37 @@
 @import "{ohif:design}/app"
 
-$expandedHeight = 160px
+body>.header
 
-.logoImage
+  .brand
-  display: inline-block
-  height: 100%
-  float: left
-
-.topBar
-  height: $topBarHeight
-  padding: 10px 10px 0
-  theme('color', '$textPrimaryColor')
-  theme('background-color', '$primaryBackgroundColor')
-  transition(all 0.5s ease)
-
-  &>.clearfix
-    position: relative
-
-  .brandSection
     height: 30px
     display: inline-block
     text-decoration: none
 
-    .logoImage
+    .logo-image
+      display: inline-block
+      fill: transparent
+      float: left
+      height: 100%
       margin: 0 8px 0 0
       width: 30px
 
-    .logoText
+    .logo-text
       display: inline-block
       font-family: $logoFontFamily
+      font-size: 14px
       font-weight: $logoFontWeight
       theme('color', '$textPrimaryColor')
       line-height: 30px
 
-  .studyListLinkSection
+  a.header-menu
-    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
+    theme('color', '$textPrimaryColor')
-    margin: 3px 0 0 10px
+
-    padding: 0 0 0 10px
+    .header-options
+      font-size: 13px
+
+    .menu-toggle
+      display: inline-block
+      height: 18px
 
   .btn
     theme('color', '$textSecondaryColor')
@@ -51,22 +46,25 @@ $expandedHeight = 160px
     &:active
       theme('color', '$activeColor')
 
-  &.studyList
+  .studyListLinkSection
-    background-color: rgba(21, 25, 30, 0.7)
+    theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
-    height: $expandedHeight
+    margin: 3px 0 0 10px
+    padding: 0 0 0 10px
+
+  &.header-big
     padding-left: $studyListPadding
     padding-right: $studyListPadding
 
-    .brandSection
+    .brand
       height: 100%
       width: 80%
-      line-height: $expandedHeight - 10px
+      line-height: $topBarExpandedHeight - 10px
 
-      .logoImage
+      .logo-image
-        width: 50px
         margin: 0 20px 0 0
+        width: 50px
 
-      .logoText
+      .logo-text
         font-size: 30px
 
     .studyListLinkSection

OHIFViewer/client/components/viewer/viewer.js

@@ -93,7 +93,6 @@ Template.viewer.onCreated(() => {
     } else {
         OHIF.log.info('Setting default viewer data');
         OHIF.viewer.loadedSeriesData = {};
-        OHIF.viewer.data = {};
         OHIF.viewer.data.loadedSeriesData = OHIF.viewer.loadedSeriesData;
 
         // Update the viewer data object

OHIFViewer/client/routes.js

@@ -1,5 +1,5 @@
-import { Session } from 'meteor/session';
 import { Router } from 'meteor/iron:router';
+import { OHIF } from 'meteor/ohif:core';
 
 Router.configure({
     layoutTemplate: 'layout',
@@ -7,26 +7,16 @@ Router.configure({
 });
 
 Router.onBeforeAction('loading');
-Router.onBeforeAction(function() {
-    this.next();
-});
 
 Router.route('/', function() {
-    this.render('ohifViewer');
+    Router.go('studylist', {}, { replaceState: true });
-});
+}, { name: 'home' });
 
-Router.route('/viewer/:_id', {
+Router.route('/studylist', function() {
-    layoutTemplate: 'layout',
+    this.render('ohifViewer', { data: { template: 'studylist' } });
-    name: 'viewer',
+}, { name: 'studylist' });
-    onBeforeAction: function() {
-        var studyInstanceUid = this.params._id;
 
-        this.render('ohifViewer', {
+Router.route('/viewer/:studyInstanceUids', function() {
-            data: function() {
+    const studyInstanceUids = this.params.studyInstanceUids.split(';');
-                return {
+    OHIF.viewerbase.renderViewer(this, { studyInstanceUids }, 'ohifViewer');
-                    studyInstanceUid: studyInstanceUid
+}, { name: 'viewerStudies' });
-                };
-            }
-        });
-    }
-});

Packages/ohif-user-management/client/components/index.js

@@ -9,7 +9,3 @@ import './lastLoginModal/lastLoginModal.html';
 
 import './timeoutCountdownDialog/timeoutCountdownDialog.html';
 import './timeoutCountdownDialog/timeoutCountdownDialog.js';
-
-import './userAccountMenu/userAccountMenu.html';
-import './userAccountMenu/userAccountMenu.styl';
-import './userAccountMenu/userAccountMenu.js';

Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.html

@@ -1,62 +0,0 @@
-<template name="userAccountMenu">
-    {{#if currentUser}}
-        <div id="userAccountMenu" class="dropdown">
-            <div class="dropdown-toggle noselect clearfix" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span class="userName pull-left m-r-1">{{name}} {{currentPath}}</span>
-                <div class="menuButton pull-right">
-                    <i class="fa fa-cog"></i> <span class="caret-down"></span>
-                </div>
-            </div>
-            <ul class="dropdown-menu dropdown-menu-right">
-                {{#if showStudyListMenu}}
-                    <li>
-                        <a href="{{absoluteUrl "studylist"}}" id="studylist">
-                            <svg class="study-list">
-                                <use xlink:href={{absoluteUrl "packages/ohif_user-management/assets/user-menu-icons.svg#study-list"}}></use>
-                            </svg> Study List
-                        </a>
-                    </li>
-                {{else}}
-                    <li>
-                        <a href="{{absoluteUrl "audit"}}" id="audit">
-                            <svg class="log">
-                                <use xlink:href={{absoluteUrl "packages/ohif_user-management/assets/user-menu-icons.svg#log"}}></use>
-                            </svg> View Audit Log
-                        </a>
-                    </li>
-                {{/if}}
-                <li role="separator" class="divider"></li>
-                <li>
-                    <a id="themeSelector">
-                        <svg class="theme">
-                            <use xlink:href={{absoluteUrl "packages/ohif_user-management/assets/user-menu-icons.svg#theme"}}></use>
-                        </svg> Themes
-                    </a>
-                </li>
-                <li role="separator" class="divider"></li>
-                <li>
-                    <a id="serverInformation">
-                        <svg class="server">
-                            <use xlink:href={{absoluteUrl "packages/ohif_user-management/assets/user-menu-icons.svg#server"}}></use>
-                        </svg> Server Information
-                    </a>
-                </li>
-                <li role="separator" class="divider"></li>
-                <li>
-                    <a href="{{absoluteUrl "changePassword"}}" id="changePassword">
-                        <svg class="password">
-                            <use xlink:href={{absoluteUrl "packages/ohif_user-management/assets/user-menu-icons.svg#password"}}></use>
-                        </svg> Change Password
-                    </a>
-                </li>
-                <li>
-                    <a id="logoutButton">
-                        <svg class="logout">
-                            <use xlink:href={{absoluteUrl "packages/ohif_user-management/assets/user-menu-icons.svg#logout"}}></use>
-                        </svg> Logout
-                    </a>
-                </li>
-            </ul>
-        </div>
-    {{/if}}
-</template>

Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.js

@@ -1,128 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { Template } from 'meteor/templating';
-import { ReactiveVar } from 'meteor/reactive-var';
-import { Session } from 'meteor/session';
-import { Router } from 'meteor/iron:router';
-import { moment } from 'meteor/momentjs:moment';
-import { OHIF } from 'meteor/ohif:core';
-
-// Display the last login modal as default
-Session.setDefault('displayLastLoginModal', true);
-
-Template.userAccountMenu.helpers({
-    name: function() {
-        const nameSplit = Meteor.user().profile.fullName.split(' ');
-        const lastName = nameSplit[nameSplit.length - 1];
-        nameSplit[nameSplit.length - 1] = lastName.substr(0, 1) + '.';
-        return nameSplit.join(' ');
-    },
-
-    currentUser: function() {
-        const verifyEmail = Meteor.settings && Meteor.settings.public && Meteor.settings.public.verifyEmail || false;
-
-        if (!Meteor.user() || !Meteor.userId()) {
-            return;
-        }
-
-        if (!verifyEmail) {
-            return true;
-        }
-
-        if (!Meteor.user().emails) {
-            return true;
-        }
-
-        return !!Meteor.user().emails[0].verified;
-    }
-});
-
-Template.userAccountMenu.events({
-    'click #serverInformation'() {
-        OHIF.ui.showDialog('serverInformationModal');
-    },
-
-    'click #themeSelector'() {
-        OHIF.ui.showDialog('themeSelectorModal');
-    },
-
-    'click #logoutButton'() {
-        Meteor.logout(function() {
-            Router.go('/entrySignIn');
-        });
-    }
-});
-
-Template.userAccountMenu.onCreated(function userAccountMenuCreated() {
-    const instance = Template.instance();
-
-    // 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) {
-            OHIF.log.error(error);
-            return;
-        }
-
-        // Format the last login date
-        const formattedLastLoginDate = moment(lastLoginDate).format('MMMM Do YYYY, HH:mm:ss A');
-
-        instance.lastLoginDate.set(formattedLastLoginDate);
-
-    });
-
-    instance.autorun(function() {
-        const lastLoginDate = instance.lastLoginDate.get();
-        if (!lastLoginDate) {
-            return;
-        }
-
-        // Hook login/logout
-        const 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('displayLastLoginModal')) {
-            return;
-        }
-
-        // Display the modal and hide it after 5 seconds
-        OHIF.ui.showDialog('lastLoginModal', {
-            lastLoginDate,
-            timeout: 5000
-        }).then(() => Session.setPersistent('displayLastLoginModal', false));
-
-        // Log signin
-        HipaaLogger.logEvent({
-            eventType: 'init',
-            userId: user._id,
-            userName: user.profile.fullName
-        });
-
-    });
-});

Packages/ohif-user-management/client/components/userAccountMenu/userAccountMenu.styl

@@ -1,62 +0,0 @@
-@import "{ohif:design}/app"
-
-$iconMargin = 5px
-$iconWidth = 16px
-$iconHeight = 16px
-
-#userAccountMenu
-  padding: 4px 0
-  height: 100%
-
-  .dropdown-toggle
-    theme('color', '$defaultColor')
-    cursor: pointer
-    font-size: 13px
-    font-weight: 400
-    line-height: 18px
-    text-decoration: none
-
-    .menuButton
-      theme('border-left', 'solid 1px $defaultColor')
-      display: inline-block
-      height: 18px
-      padding: 0 8px
-
-      .fa
-        theme('color', '$defaultColor')
-        font-size: 17px
-        line-height: 18px
-
-      .caret-down
-        theme('color', '$uiGrayLight')
-        margin: 0 4px 4px 2px
-
-  ul.dropdown-menu
-    li
-      cursor: pointer
-      
-      svg
-        margin-right: $iconMargin
-        width: $iconWidth
-        height: $iconHeight
-        text-align: center
-        
-      svg
-        display: inline-block
-        vertical-align: middle
-        
-        &.server
-          width: $iconWidth - 3
-          height: $iconWidth - 3
-          margin-right: $iconMargin + 2
-          margin-left: 1px
-          
-        &.theme
-          width: $iconWidth + 2
-          height: $iconWidth + 2
-          margin-right: $iconMargin - 2
-          
-        &.study-list
-          width: $iconWidth + 2
-          height: $iconWidth + 2
-          margin-right: $iconMargin - 2

Packages/ohif-viewerbase/client/components/basic/aboutModal/aboutModal.html

@@ -1,99 +1,77 @@
 <template name="aboutModal">
-    <div class="modal fade"
+    {{#dialogSimple (extend this id='aboutModal' dialogClass='modal-lg' title='About')}}
-         id="aboutModal"
+        <a target='_blank'
-         tabindex="-1"
+           class='forkOnGithub'
-         role="dialog"
+           href="{{githubUrl}}">
-         aria-labelledby="aboutModalLabel">
+            <img src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
-        <div class="modal-dialog modal-lg" role="document">
+                 alt="Fork me on GitHub"
-            <div class="modal-content">
+                 data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png">
-                <div class="modal-header">
+        </a>
-                    <button type="button"
+        <div class="logo p-x-3 p-y-3 clearfix">
-                            class="close"
+            <svg class="logoImage pull-left">
-                            data-dismiss="modal"
+                <use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"}}></use>
-                            aria-label="Close">
+            </svg>
-                        <span aria-hidden="true">&times;</span>
+            <a class="logoText pull-left"
-                    </button>
+               target="_blank"
-                    <h4 class="modal-title"
+               href="http://ohif.org">
-                        id="aboutModalLabel">
+                Open Health Imaging Foundation DICOM Viewer
-                        About
+            </a>
-                    </h4>
-                </div>
-                <div class="modal-body">
-                    <a target='_blank'
-                       class='forkOnGithub'
-                       href="{{githubUrl}}">
-                        <img src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
-                             alt="Fork me on GitHub"
-                             data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png">
-                    </a>
-                    <div class="logo p-x-3 p-y-3">
-                        <svg class="logoImage">
-                            <use xlink:href={{absoluteUrl "packages/ohif_viewerbase/assets/icons.svg#icon-ohif-logo"}}></use>
-                        </svg>
-                        <a class="logoText"
-                           target="_blank"
-                           href="http://ohif.org">
-                            Open Health Imaging Foundation DICOM Viewer
-                        </a>
-                    </div>
-                    <div class="p-x-1 p-y-1 m-y-2">
-                        <a class="btn btn-default inline"
-                           target='_blank'
-                           href="https://groups.google.com/forum/#!forum/cornerstone-platform">
-                            Visit the forum
-                        </a>
-                        <a class="btn btn-default inline"
-                           target='_blank'
-                           href="https://github.com/OHIF/Viewers/issues">
-                            Report an issue
-                        </a>
-                    </div>
-                    <div class="p-y-1 p-x-1">
-                        <h3>Version Information</h3>
-                        <table class="table table-responsive">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Value</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>Repository URL</td>
-                                    <td>
-                                        <a target='_blank'
-                                           href="{{githubUrl}}">{{githubUrl}}</a>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>Last Commit Hash</td>
-                                    <td>
-                                        <a target='_blank' href="{{githubUrl}}/commit/{{gitRev 'long'}}">
-                                        {{gitRev 'long'}}
-                                        </a>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>Latest Tag</td>
-                                    <td>
-                                        <a target='_blank' href="{{githubUrl}}/releases/tag/{{gitRev 'tag'}}">
-                                        {{gitRev 'tag'}}
-                                        </a>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>Branch</td>
-                                    <td>
-                                        <a target='_blank' href="{{githubUrl}}/tree/{{gitRev 'branch'}}">
-                                            {{gitRev 'branch'}}
-                                        </a>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
         </div>
-    </div>
+        <div class="p-x-1 p-y-1 m-y-2">
+            <a class="btn btn-default inline"
+               target='_blank'
+               href="https://groups.google.com/forum/#!forum/cornerstone-platform">
+                Visit the forum
+            </a>
+            <a class="btn btn-default inline"
+               target='_blank'
+               href="https://github.com/OHIF/Viewers/issues">
+                Report an issue
+            </a>
+        </div>
+        <div class="p-y-1 p-x-1">
+            <h3>Version Information</h3>
+            <table class="table table-responsive">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Value</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Repository URL</td>
+                        <td>
+                            <a target='_blank'
+                               href="{{githubUrl}}">{{githubUrl}}</a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Last Commit Hash</td>
+                        <td>
+                            <a target='_blank' href="{{githubUrl}}/commit/{{gitRev 'long'}}">
+                            {{gitRev 'long'}}
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Latest Tag</td>
+                        <td>
+                            <a target='_blank' href="{{githubUrl}}/releases/tag/{{gitRev 'tag'}}">
+                            {{gitRev 'tag'}}
+                            </a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Branch</td>
+                        <td>
+                            <a target='_blank' href="{{githubUrl}}/tree/{{gitRev 'branch'}}">
+                                {{gitRev 'branch'}}
+                            </a>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    {{/dialogSimple}}
 </template>

Packages/ohif-viewerbase/client/lib/renderViewer.js

@@ -6,7 +6,7 @@ import { OHIF } from 'meteor/ohif:core';
  * @param {Context} context Context of the router
  * @param {Object} params Parameters that will be used to prepare the viewer data
  */
-export const renderViewer = (context, params) => {
+export const renderViewer = (context, params, layoutTemplate='app') => {
     // Wait until the viewer data is ready to render it
     const promise = OHIF.viewerbase.prepareViewerData(params);
 
@@ -16,7 +16,7 @@ export const renderViewer = (context, params) => {
     // Render the viewer when the data is ready
     promise.then(({ studies, viewerData }) => {
         OHIF.viewer.data = viewerData;
-        context.render('app', {
+        context.render(layoutTemplate, {
             data: {
                 template: 'viewer',
                 studies