PWV-1: Refactoring ohif:studylist package

Packages/ohif-study-list/client/collections/index.js

@@ -0,0 +1 @@
+import './subscriptions.js';

Packages/ohif-study-list/client/components/index.js

@@ -0,0 +1,5 @@
+import './progressDialog';
+import './seriesDetailsModal';
+import './serverInformation';
+import './studyContextMenu';
+import './studylist';

Packages/ohif-study-list/client/components/progressDialog/index.js

@@ -0,0 +1,3 @@
+import './progressDialog.html';
+import './progressDialog.styl';
+import './progressDialog.js';

Packages/ohif-study-list/client/components/progressDialog/progressDialog.html

@@ -6,14 +6,13 @@
         <div class="dialogContent">
             <div class="progress">
                 <div class="progress-bar progress-bar-striped active"
-                     role="progressbar"
-                     style="width:{{progressStatus}}">
-                    {{formatNumberPrecision progressStatus 0}}%
-                </div>
+                    role="progressbar"
+                    style="width: {{progressStatus}}%"
+                >{{formatNumberPrecision progressStatus 0}}%</div>
             </div>
             <div id="message">
                 {{{progressMessage}}}
             </div>
         </div>
     </div>
-</template>
+</template>

Packages/ohif-study-list/client/components/progressDialog/progressDialog.js

@@ -1,4 +1,28 @@
-progressDialog = {
+import { Template } from 'meteor/templating';
+import { Session } from 'meteor/session';
+import { _ } from 'meteor/underscore';
+import { OHIF } from 'meteor/ohif:core';
+
+const updateProgress = numberOfCompleted => {
+    const progressDialogSettings = Session.get('progressDialogSettings');
+    progressDialogSettings.numberOfCompleted = numberOfCompleted;
+
+    Session.set('progressDialogSettings', progressDialogSettings);
+
+    if (progressDialogSettings.numberOfCompleted === progressDialogSettings.numberOfTotal) {
+        OHIF.studylist.progressDialog.close();
+    }
+};
+
+const setProgressMessage = message => {
+    let progressDialogSettings = Session.get('progressDialogSettings');
+    progressDialogSettings.message = message;
+    Session.set('progressDialogSettings', progressDialogSettings);
+};
+
+OHIF.studylist.progressDialog = {
+    update: _.debounce(updateProgress, 100),
+    setMessage: _.debounce(setProgressMessage, 100),
     show: function(title, numberOfTotal) {
         Session.set('progressDialogSettings', {
             title: title,
@@ -8,16 +32,6 @@ progressDialog = {
 
         $('#progressDialog').css('display', 'block');
     },
-    update: function(numberOfCompleted) {
-        var progressDialogSettings = Session.get('progressDialogSettings');
-        progressDialogSettings.numberOfCompleted = numberOfCompleted;
-
-        Session.set('progressDialogSettings', progressDialogSettings);
-
-        if (progressDialogSettings.numberOfCompleted === progressDialogSettings.numberOfTotal) {
-            progressDialog.close();
-        }
-    },
     close: function() {
         Session.set('progressDialogSettings', {
             title: '',
@@ -26,17 +40,12 @@ progressDialog = {
         });
 
         $('#progressDialog').css('display', 'none');
-    },
-    setMessage: function(message) {
-        let progressDialogSettings = Session.get('progressDialogSettings');
-        progressDialogSettings.message = message;
-        Session.set('progressDialogSettings', progressDialogSettings);
     }
 };
 
 Template.progressDialog.helpers({
     progressDialogTitle() {
-        var settings = Session.get('progressDialogSettings');
+        const settings = Session.get('progressDialogSettings');
         if (!settings) {
             return;
         }
@@ -55,11 +64,11 @@ Template.progressDialog.helpers({
             return;
         }
 
-        return settings.numberOfCompleted / settings.numberOfTotal;
+        return (settings.numberOfCompleted / settings.numberOfTotal) * 100;
     },
 
     progressMessage() {
-        var settings = Session.get('progressDialogSettings');
+        const settings = Session.get('progressDialogSettings');
         if (!settings) {
             return;
         }

Packages/ohif-study-list/client/components/seriesDetailsModal/index.js

@@ -0,0 +1,5 @@
+import './viewSeriesDetailsModal.html';
+
+import './seriesDetailsTable/seriesDetailsTable.html';
+import './seriesDetailsTable/seriesDetailsTable.styl';
+import './seriesDetailsTable/seriesDetailsTable.js';

Packages/ohif-study-list/client/components/serverInformation/index.js

@@ -0,0 +1,15 @@
+import './serverInformationDicomWeb/serverInformationDicomWeb.html';
+import './serverInformationDicomWeb/serverInformationDicomWeb.js';
+
+import './serverInformationDimse/serverInformationDimse.html';
+import './serverInformationDimse/serverInformationDimse.js';
+
+import './serverInformationForm/serverInformationForm.html';
+import './serverInformationForm/serverInformationForm.js';
+
+import './serverInformationList/serverInformationList.html';
+import './serverInformationList/serverInformationList.js';
+
+import './serverInformationModal/serverInformationModal.html';
+import './serverInformationModal/serverInformationModal.styl';
+import './serverInformationModal/serverInformationModal.js';

Packages/ohif-study-list/client/components/serverInformation/serverInformationForm/serverInformationFormField.html

@@ -1,10 +0,0 @@
-<template name="serverInformationFormField">
-    <div class="col-lg-6">
-        <div class="form-group">
-            <label class="wrapper">
-                <span>{{this.label}}</span>
-                <input type="text" name="{{this.name}}" class="form-control">
-            </label>
-        </div>
-    </div>
-</template>

Packages/ohif-study-list/client/components/studyContextMenu/index.js

@@ -0,0 +1,2 @@
+import './studyContextMenu.html';
+import './studyContextMenu.js';

Packages/ohif-study-list/client/components/studyContextMenu/studyContextMenu.html

@@ -1,25 +1,12 @@
 <template name="studyContextMenu">
-    {{#if uiSettings.studyListFunctionsEnabled}}
-    <div id="studyContextMenu" class="studyContextMenu noselect"
-         oncontextmenu='return false;'
-         unselectable='on'
-         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/>
-                <a class="disabled">Delete</a>
-                <a id="exportSelectedStudies"
-                   title="Export Selected Studies">
-                    Export
-                </a>
-            </li>
-        </ul>
-    </div>
-    {{/if}}
+    {{#dropdownForm}}
+        <li><a id="viewSeriesDetails" type="button"
+            title="View Series Details"
+        >View Series Details</a></li>
+        <li class="disabled"><a class="disabled">Anonymize</a></li>
+        <li class="disabled"><a class="disabled">Send</a></li>
+        <li class="divider" role="separator"></li>
+        <li class="disabled"><a class="disabled">Delete</a></li>
+        <li><a id="exportSelectedStudies" title="Export Selected Studies">Export</a></li>
+    {{/dropdownForm}}
 </template>

Packages/ohif-study-list/client/components/studyContextMenu/studyContextMenu.js

@@ -1,84 +1,48 @@
-function closeHandler(dialog) {
-    // Hide the dialog
-    $(dialog).css('display', 'none');
-
-    // Remove the backdrop
-    $('.removableBackdrop').remove();
-}
+import { OHIF } from 'meteor/ohif:core';
 
 /**
  * This function is used inside the StudyList package to define a right click callback
  *
- * @param e
+ * @param event
  */
-openStudyContextMenu = function(e) {
-    StudyList.functions['exportSelectedStudies'] = exportSelectedStudies;
-    StudyList.functions['viewSeriesDetails'] = viewSeriesDetails;
-
-
-    Template.studyContextMenu.study = $(e.currentTarget);
-
-    var dialog = $('#studyContextMenu');
-
-    // Show the nonTargetLesion dialog above
-    var dialogProperty = {
-        display: 'block'
-    };
-
-    var pageHeight = $(document).height();
-    dialogProperty.top = Math.max(e.pageY, 0);
-    dialogProperty.top = Math.min(dialogProperty.top, pageHeight - dialog.outerHeight());
-
-    var pageWidth = $(document).width();
-    dialogProperty.left = Math.max(e.pageX, 0);
-    dialogProperty.left = Math.min(dialogProperty.left, pageWidth - dialog.outerWidth());
-
-    // Device is touch device or not
-    // If device is touch device, set position center of screen vertically and horizontally
-    if (isTouchDevice()) {
-        // add dialogMobile class to provide a black, transparent background
-        dialog.addClass('dialogMobile');
-        dialogProperty.top = 0;
-        dialogProperty.left = 0;
-        dialogProperty.right = 0;
-        dialogProperty.bottom = 0;
-        dialogProperty.margin = 'auto';
+openStudyContextMenu = event => {
+    if (!OHIF.uiSettings.studyListFunctionsEnabled) {
+        return;
     }
 
-    dialog.css(dialogProperty);
-    dialog.focus();
+    StudyList.functions.exportSelectedStudies = exportSelectedStudies;
+    StudyList.functions.viewSeriesDetails = viewSeriesDetails;
 
-    // Show the backdrop
-    UI.render(Template.removableBackdrop, document.body);
+    Template.studyContextMenu.$study = $(event.currentTarget);
 
-    // Make sure the context menu is closed when the user clicks away
-    $('.removableBackdrop').one('mousedown touchstart', function() {
-        closeHandler(dialog);
-    });
+    const dropdown = OHIF.ui.showFormDropdown('studyContextMenu');
+    const $dropdown = $(dropdown);
+    const $dropdownMenu = $dropdown.children('.dropdown-menu');
+
+    dropdown.oncontextmenu = () => false;
+
+    $dropdownMenu.css({
+        position: 'fixed',
+        left: `${event.clientX}px`,
+        top: `${event.clientY}px`,
+        'z-index': 10000
+    }).bounded().focus();
 };
 
 /**
  * Exports all selected studies on the studylist
  */
 function exportSelectedStudies() {
-    var selectedStudies = StudyListSelectedStudies.find({}, {
-            sort: {
-                studyDate: 1
-            }
-        }).fetch() || [];
+    const selectedStudies = OHIF.studylist.getSelectedStudies();
 
-    exportStudies(selectedStudies);
+    OHIF.studylist.exportStudies(selectedStudies);
 }
 
 /**
  * Display series details of study in modal
  */
 function viewSeriesDetails() {
-    var selectedStudies = StudyListSelectedStudies.find({}, {
-        sort: {
-            studyDate: 1
-        }
-    }).fetch();
+    const selectedStudies = OHIF.studylist.getSelectedStudies();
 
     if (!selectedStudies) {
         return;
@@ -91,7 +55,7 @@ function viewSeriesDetails() {
 
 Template.studyContextMenu.events({
     'click a': function(e) {
-        var study = Template.studyContextMenu.study;
+        var study = Template.studyContextMenu.$study;
         var id = $(e.currentTarget).attr('id');
 
         var fn = StudyList.functions[id];
@@ -100,6 +64,5 @@ Template.studyContextMenu.events({
         }
 
         var dialog = $('#studyContextMenu');
-        closeHandler(dialog);
     }
 });

Packages/ohif-study-list/client/components/studyContextMenu/studyContextMenu.styl

@@ -1,63 +0,0 @@
-@import "{design}/app"
-
-.studyContextMenu
-  z-index: 10000
-  display: none
-  position: absolute
-  color:  #2f2f2f
-  background-color: #f2f2f2
-
-  width: -moz-fit-content
-  width: -webkit-fit-content
-  width: fit-content
-  width: 207px
-
-  height: -moz-fit-content
-  height: -webkit-fit-content
-  height: fit-content
-
-  min-width: 100px
-  font-size: 14px
-  text-align: left
-  -webkit-background-clip: padding-box
-  background-clip: padding-box
-  border: 1px solid rgba(0, 0, 0, .15)
-  border-radius: 3px
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
-  box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
-
-  hr
-    border-top: solid 1px #d1d1d1
-    margin: 2px
-
-  ul
-    width: 100%
-    margin: 5px 0
-    list-style: none
-    padding: 0
-
-    li
-      clear: both
-      white-space: nowrap
-
-      a
-        padding: 3px 15px
-        display: block
-        text-decoration: none
-        cursor: pointer
-        font-size: 15px
-        line-height: 1.7
-        color: black
-
-        &:not(.disabled):hover
-          theme('color', '$activeColor')
-          text-decoration: none
-
-        &.disabled
-          opacity: 0.4
-          pointer-events: none
-          cursor: default
-
-  .fa-lg
-    width: 40px
-    text-align: center

Packages/ohif-study-list/client/components/studylist/index.js

@@ -0,0 +1,19 @@
+import './studylist.html';
+import './studylist.js';
+import './studylist.styl';
+
+import './studylistStudy/studylistStudy.html';
+import './studylistStudy/studylistStudy.js';
+import './studylistStudy/studylistStudy.styl';
+
+import './studylistResult/studylistResult.html';
+import './studylistResult/studylistResult.js';
+import './studylistResult/studylistResult.styl';
+
+import './studylistToolbar/studylistToolbar.html';
+import './studylistToolbar/studylistToolbar.js';
+import './studylistToolbar/studylistToolbar.styl';
+
+import './studylistPagination/studylistPagination.html';
+import './studylistPagination/studylistPagination.styl';
+import './studylistPagination/studylistPagination.js';

Packages/ohif-study-list/client/components/studylist/studylist.html

@@ -14,6 +14,5 @@
     {{#each templateName in additionalTemplates}}
         {{> UI.dynamic template=templateName}}
     {{/each}}
-    {{>studyContextMenu }}
     {{>progressDialog}}
-</template>
+</template>

Packages/ohif-study-list/client/components/studylist/studylist.js

@@ -19,7 +19,7 @@ Session.setDefault('activeContentId', 'studylistTab');
 
 Template.studylist.onCreated(() => {
     const instance = Template.instance();
-    
+
     if (StudyList.subscriptions) {
         StudyList.subscriptions.forEach(subscriptionName => {
             instance.subscribe(subscriptionName);
@@ -44,18 +44,3 @@ Template.studylist.onRendered(() => {
 
     Meteor.subscribe('hangingprotocols');
 });
-
-Template.studylist.events({
-    'click #tablist a[data-toggle="tab"]': function(e) {
-        // If this tab is already active, do nothing
-        const tabButton = $(e.currentTarget);
-        const tabTitle = tabButton.parents('.tabTitle');
-        if (tabTitle.hasClass('active')) {
-            return;
-        }
-
-        // Otherwise, switch to the tab
-        const contentId = tabButton.data('target').replace('#', '');
-        switchToTab(contentId);
-    }
-});

Packages/ohif-study-list/client/components/tabTitle/tabTitle.html

@@ -1,8 +0,0 @@
-<template name="tabTitle">
-    <li role="presentation" class="tabTitle">
-        <a data-target="#{{contentid}}" role="tab" data-toggle="tab">
-            {{title}}
-            <button class="close">&times;</button>
-        </a>
-    </li>
-</template>

Packages/ohif-study-list/client/components/tabTitle/tabTitle.js

@@ -1,42 +0,0 @@
-Template.tabTitle.events({
-    /**
-     * Closes a tab when the close button is pressed in the title
-     * The next tab to the left is loaded if the current tab is closed
-     *
-     * @param e The click event used to close the tab
-     */
-    'click .close': function(e) {
-        console.log('click .close');
-        
-        // Identify the tab title DOM node
-        var tab = $(e.currentTarget).parents('a[data-toggle="tab"]').eq(0);
-
-        // Get the relevent contentId that this tab title represents
-        // Replace any hash marks (#) that were required by Bootstrap's tab switching
-        var contentId = tab.data('target').replace('#', '');
-    
-        // Check if we are closing the active tab. If we are, prepare to switch
-        // to the next tab to the left.    
-        var activeContentId = Session.get('activeContentId');
-        if (activeContentId === contentId) {
-            // Find the index of the tab that is being closed
-            var tabIndex = tab.parent('li').index();
-
-            // Find the index the tab to its left
-            var newActiveTabIndex = Math.max(tabIndex - 1, 0);
-
-            // Find the DOM node of the tab that will be activated
-            var newActiveTab = $('.tabTitle').eq(newActiveTabIndex);
-
-            // Find the content ID of the tab that will be switched to
-            var newActiveTabLink = newActiveTab.find('a[data-toggle=tab]');
-            var newContentId = newActiveTabLink.data('target').replace('#', '');
-
-            // Switch to this tab
-            switchToTab(newContentId);   
-        }
-
-        // Remove any stored data related to this tab from the global ViewerData structure
-        delete ViewerData[contentId];
-    }
-});

Packages/ohif-study-list/client/components/tabTitle/tabTitle.styl

@@ -1,4 +0,0 @@
-.tabTitle
-  button.close    
-    // Prevent blue glow around button in Chrome
-    outline: none 

Packages/ohif-study-list/client/index.js

@@ -0,0 +1,3 @@
+import './collections';
+import './lib';
+import './components';

Packages/ohif-study-list/client/lib/exportStudies.js

@@ -1,10 +1,13 @@
-var exportFailed;
+import { JSZip } from 'meteor/silentcicero:jszip';
+import { OHIF } from 'meteor/ohif:core';
+
+let exportFailed;
 
 /**
  * Exports requested studies
  * @param studiesToExport Studies to export
  */
-exportStudies = function(studiesToExport) {
+OHIF.studylist.exportStudies = studiesToExport => {
     if (studiesToExport.length < 1) {
         return;
     }
@@ -12,37 +15,45 @@ exportStudies = function(studiesToExport) {
     queryStudies(studiesToExport, exportQueriedStudies);
 };
 
-function exportQueriedStudies(studiesToExport) {
-    var numberOfFilesToExport = 0;
-    studiesToExport.forEach(function(study) {
+const exportQueriedStudies = studiesToExport => {
+    let numberOfFilesToExport = 0;
+    studiesToExport.forEach(study => {
         numberOfFilesToExport += getNumberOfFilesInStudy(study);
     });
 
-    progressDialog.show("Exporting Studies...", numberOfFilesToExport);
+    OHIF.studylist.progressDialog.show('Exporting Studies...', numberOfFilesToExport);
 
     try {
         exportQueriedStudiesInternal(studiesToExport, numberOfFilesToExport);
     } catch (err) {
-        progressDialog.close();
-        console.error("Failed to export studies: " + err.message);
+        OHIF.studylist.progressDialog.close();
+        OHIF.log.error(`Failed to export studies: ${err.message}`);
     }
-}
+};
 
-function exportQueriedStudiesInternal(studiesToExport, numberOfFilesToExport) {
-    var zip = new JSZip();
+const exportQueriedStudiesInternal = (studiesToExport, numberOfFilesToExport) => {
+    const zip = new JSZip();
 
     exportFailed = false;
-    var numberOfFilesExported = 0;
+    let numberOfFilesExported = 0;
 
-    studiesToExport.forEach(function(study) {
+    const onExportFailed = err => {
+        exportFailed = true;
+        OHIF.studylist.progressDialog.close();
+
+        //TODO: Export failed and dialog closed, so let user know
+        OHIF.log.error('Failed to export studies!', err);
+    };
+
+    studiesToExport.forEach(study => {
         sortStudy(study);
 
-        var studyFolder = zip.folder(study.studyInstanceUid);
+        const studyFolder = zip.folder(study.studyInstanceUid);
 
-        study.seriesList.forEach(function(series) {
-            var seriesFolder = studyFolder.folder(series.seriesInstanceUid);
+        study.seriesList.forEach(series => {
+            const seriesFolder = studyFolder.folder(series.seriesInstanceUid);
 
-            series.instances.forEach(function(instance) {
+            series.instances.forEach(instance => {
                 if (!instance.wadouri) {
                     return;
                 }
@@ -53,12 +64,12 @@ function exportQueriedStudiesInternal(studiesToExport, numberOfFilesToExport) {
                 }
 
                 //  Download and Zip the dicom file
-                var xhr = new XMLHttpRequest();
-                xhr.open("GET", instance.wadouri, true);
-                xhr.responseType = "blob";
+                const xhr = new XMLHttpRequest();
+                xhr.open('GET', instance.wadouri, true);
+                xhr.responseType = 'blob';
 
                 //  Downloaded the dicom file completely
-                xhr.onload = function(e) {
+                xhr.onload = () => {
                     //  If failed to download a dicom file, skip others
                     if (exportFailed) {
                         return;
@@ -66,17 +77,17 @@ function exportQueriedStudiesInternal(studiesToExport, numberOfFilesToExport) {
 
                     //  Failed to export a file
                     if (xhr.readyState === 4 && xhr.status !== 200) {
-                        onExportFailed("File not downloaded: " + instance.wadouri);
+                        onExportFailed(`File not downloaded: ${instance.wadouri}`);
                         return;
                     }
 
-                    var blobFile = new Blob([xhr.response], {type: 'application/dicom'});
+                    const blobFile = new Blob([xhr.response], { type: 'application/dicom' });
 
-                    var fileReader = new FileReader();
+                    const fileReader = new FileReader();
 
-                    fileReader.onload = function() {
+                    fileReader.onload = () => {
                         try {
-                            seriesFolder.file(instance.sopInstanceUid + ".dcm", fileReader.result, { binary: true });
+                            seriesFolder.file(`${instance.sopInstanceUid}.dcm`, fileReader.result, { binary: true });
                         } catch(err) {
                             onExportFailed(err.message);
                             return;
@@ -85,31 +96,21 @@ function exportQueriedStudiesInternal(studiesToExport, numberOfFilesToExport) {
                         numberOfFilesExported++;
 
                         if (numberOfFilesExported === numberOfFilesToExport) {
-                            var zipContent = zip.generate({ type: "blob" });
-                            saveAs(zipContent, "studies.zip");
+                            const zipContent = zip.generate({ type: 'blob' });
+                            saveAs(zipContent, 'studies.zip');
                         }
 
-                        progressDialog.update(numberOfFilesExported);
+                        OHIF.studylist.progressDialog.update(numberOfFilesExported);
                     };
 
                     fileReader.readAsArrayBuffer(blobFile);
                 };
 
                 //  Failed to download the dicom file
-                xhr.onerror = function() {
-                    onExportFailed("File not downloaded: " + instance.wadouri);
-                };
+                xhr.onerror = () => onExportFailed(`File not downloaded: ${instance.wadouri}`);
 
                 xhr.send();
             });
         });
     });
-}
-
-function onExportFailed(err) {
-    exportFailed = true;
-    progressDialog.close();
-
-    //TODO: Export failed and dialog closed, so let user know
-    console.error("Failed to export studies!", err);
-}
+};

Packages/ohif-study-list/client/lib/getSelectedStudies.js

@@ -0,0 +1,9 @@
+import { OHIF } from 'meteor/ohif:core';
+
+OHIF.studylist.getSelectedStudies = () => {
+    return StudyListSelectedStudies.find({}, {
+        sort: {
+            studyDate: 1
+        }
+    }).fetch() || [];
+};

Packages/ohif-study-list/client/lib/getStudiesMetadata.js

@@ -1,3 +1,4 @@
+import { $ } from 'meteor/jquery';
 import { OHIF } from 'meteor/ohif:core';
 
 /**
@@ -10,7 +11,7 @@ import { OHIF } from 'meteor/ohif:core';
  * @param doneCallback The callback function to be executed when the study retrieval has finished
  * @param failCallback The callback function to be executed when the study retrieval has failed
  */
-getStudiesMetadata = function(studyInstanceUids, doneCallback, failCallback) {
+OHIF.studylist.getStudiesMetadata = (studyInstanceUids, doneCallback, failCallback) => {
     // Check to make sure studyInstanceUids were actually input
     if (!studyInstanceUids || !studyInstanceUids.length) {
         if (failCallback && typeof failCallback === 'function') {
@@ -22,13 +23,13 @@ getStudiesMetadata = function(studyInstanceUids, doneCallback, failCallback) {
 
     // Create an empty array to store the Promises for each metaData
     // retrieval call
-    var promises = [];
+    const promises = [];
 
     // Loop through the array of studyInstanceUids
     studyInstanceUids.forEach(function(studyInstanceUid) {
         // Create a new Deferred to monitor the progress of the asynchronous
         // metaData retrieval
-        var deferred = new $.Deferred();
+        const deferred = new $.Deferred();
 
         // Send the call, and attach doneCallbacks and failCallbacks
         // which can resolve or reject the related promise based on its outcome
@@ -45,7 +46,7 @@ getStudiesMetadata = function(studyInstanceUids, doneCallback, failCallback) {
     // When all of the promises are complete, this callback runs
     $.when.apply($, promises).done(function() {
         // Convert the Arguments Array-like Object to an actual array
-        var studies = $.makeArray(arguments);
+        const studies = $.makeArray(arguments);
 
         // Pass the studies array to the doneCallback, if one exists
         if (doneCallback && typeof doneCallback === 'function') {

Packages/ohif-study-list/client/lib/importStudies.js

@@ -14,7 +14,7 @@ importStudies = function(filesToImport, importCallback) {
     };
     var numberOfFilesToUpload = filesToImport.length;
     var studiesToImport = [];
-    progressDialog.show({
+    OHIF.studylist.progressDialog.show({
         title: "Uploading Files...",
         numberOfCompleted: 0,
         numberOfTotal: numberOfFilesToUpload
@@ -38,7 +38,7 @@ importStudies = function(filesToImport, importCallback) {
             updateFileUploadStatus(fileUploadStatus, true);
 
             var numberOfFilesProcessedToUpload = fileUploadStatus.numberOfFilesUploaded + fileUploadStatus.numberOfFilesFailed;
-            progressDialog.update(numberOfFilesProcessedToUpload);
+            OHIF.studylist.progressDialog.update(numberOfFilesProcessedToUpload);
 
             if (numberOfFilesToUpload === numberOfFilesProcessedToUpload) {
                 //  The upload is completed, so import files
@@ -74,7 +74,7 @@ function importStudiesInternal(studiesToImport, importCallback) {
 
     var numberOfStudiesToImport = studiesToImport.length;
 
-    progressDialog.show({
+    OHIF.studylist.progressDialog.show({
         title: "Importing Studies...",
         numberOfCompleted: 0,
         numberOfTotal: numberOfStudiesToImport
@@ -84,13 +84,13 @@ function importStudiesInternal(studiesToImport, importCallback) {
     Meteor.call("createStudyImportStatus", function(err, studyImportStatusId) {
         if (err) {
             // Hide dialog
-            progressDialog.close();
+            OHIF.studylist.progressDialog.close();
             console.log(err.message);
             return;
         }
 
         //  Handle when StudyImportStatus collection is updated
-        StudyImportStatus.find(studyImportStatusId).observe({
+        OHIF.studylist.collections.StudyImportStatus.find(studyImportStatusId).observe({
             changed: function(studyImportStatus) {
                 if (!studyImportStatus) {
                     return;
@@ -100,16 +100,16 @@ function importStudiesInternal(studiesToImport, importCallback) {
 
                 // Show number of imported files
                 var successMessage = 'Imported '+studyImportStatus.numberOfStudiesImported+' of '+numberOfStudiesToImport;
-                progressDialog.setMessage({
+                OHIF.studylist.progressDialog.setMessage({
                     message: successMessage,
                     messageType: 'success'
                 });
-                progressDialog.update(numberOfStudiesProcessedToImport);
+                OHIF.studylist.progressDialog.update(numberOfStudiesProcessedToImport);
 
                 // Show number of failed files if there is at least one failed file
                 if (studyImportStatus.numberOfStudiesFailed > 0) {
                     var successMessage = 'Failed '+studyImportStatus.numberOfStudiesFailed+' of '+numberOfStudiesToImport;
-                    progressDialog.setMessage({
+                    OHIF.studylist.progressDialog.setMessage({
                         message: successMessage,
                         messageType: 'warning'
                     });

Packages/ohif-study-list/client/lib/index.js

@@ -0,0 +1,11 @@
+import './third-party/jquery.twbsPagination.min.js';
+
+import './exportStudies.js';
+import './getSelectedStudies.js';
+import './getStudyMetadata.js';
+import './getStudiesMetadata.js';
+import './importStudies.js';
+import './openNewTab.js';
+import './queryStudies.js';
+import './studylist.js';
+import './switchToTab.js';

Packages/ohif-study-list/client/lib/queryStudies.js

@@ -1,3 +1,5 @@
+import { OHIF } from 'meteor/ohif:core';
+
 /**
  * Queries requested studies to get their metadata from PACS
  * @param studiesToQuery Studies to query
@@ -11,7 +13,7 @@ queryStudies = function(studiesToQuery, doneCallback) {
     var studiesQueried = [];
     var numberOfStudiesToQuery = studiesToQuery.length;
 
-    progressDialog.show("Querying Studies...", numberOfStudiesToQuery);
+    OHIF.studylist.progressDialog.show("Querying Studies...", numberOfStudiesToQuery);
 
     studiesToQuery.forEach(function(studyToQuery) {
         getStudyMetadata(studyToQuery.studyInstanceUid, function(study) {
@@ -19,7 +21,7 @@ queryStudies = function(studiesToQuery, doneCallback) {
 
             var numberOfStudiesQueried = studiesQueried.length;
 
-            progressDialog.update(numberOfStudiesQueried);
+            OHIF.studylist.progressDialog.update(numberOfStudiesQueried);
 
             if (numberOfStudiesQueried === numberOfStudiesToQuery) {
                 doneCallback(studiesQueried);
@@ -45,4 +47,4 @@ getNumberOfFilesInStudy = function(study) {
     });
 
     return numberOFFilesToExport;
-};
+};

Packages/ohif-study-list/client/lib/switchToTab.js

@@ -13,9 +13,6 @@ switchToTab = function(contentId) {
 
     OHIF.log.info('Switching to tab: ' + contentId);
 
-    $('.tabTitle').removeClass('active');
-    $('.tabTitle a[data-target="#' + contentId + '"]').addClass('active');
-
     $('.tab-content .tab-pane').removeClass('active');
     if (contentId !== 'studylistTab') {
         $('.tab-content .tab-pane#viewerTab').addClass('active');
@@ -71,7 +68,7 @@ switchToTab = function(contentId) {
         var studyInstanceUids = ViewerData[contentId].studyInstanceUids;
 
         // Attempt to retrieve the meta data (it might be cached)
-        getStudiesMetadata(studyInstanceUids, function(studies) {
+        OHIF.studylist.getStudiesMetadata(studyInstanceUids, function(studies) {
             viewStudiesInTab(contentId, studies);
         });
     }