Improving new study browser and moving studies services to ohif:studies

Packages/ohif-viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.html

@@ -4,8 +4,8 @@
             <div class="p-x-1">
                 {{>imageThumbnail (clone this)}}
             </div>
-            <div class="seriesDetails clearfix m-x-1 {{#unless stack.seriesDescription}}info-only{{/unless}}">
-                <div class="seriesDescription">
+            <div class="seriesDetails flex-h m-x-1 {{#unless stack.seriesDescription}}info-only{{/unless}}">
+                <div class="seriesDescription flex-grow">
                     {{stack.seriesDescription}}
                 </div>
                 <div class="seriesInformation">

Packages/ohif-viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl

@@ -47,13 +47,7 @@ $seriesCountBackgroundColor = #678696
             margin-left: 0
             width: auto
 
-  .seriesDescription
-    float: left
-    width: calc(100% - 50px)
-
   .seriesInformation
-    display: table
-    float: right
     padding-right: 4px
     max-width: 50px
 
@@ -66,6 +60,9 @@ $seriesCountBackgroundColor = #678696
       float: right
       font-size: 12px
       margin-left: 4px
+      overflow: hidden
+      text-overflow: ellipsis
+      white-space: nowrap
       width: calc(100% - 15px)
 
     .icon

Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepoint.js

@@ -68,7 +68,7 @@ Template.studyTimepoint.events({
             $selection.removeClass('loading');
             $selection.toggleClass('active');
             // Recalculates the timepoint height to make CSS transition smoother
-            const $thumbnails = $selection.find('.studyTimepointThumbnails');
+            const $thumbnails = $selection.find('.study-browser-series');
             $thumbnails.one('transitionend', () => $timepoint.trigger('displayStateChanged'));
         }
 

Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointStudy.html

@@ -18,10 +18,12 @@
                 </div>
             </div>
             {{#if isSidebar}}
-                <div class="studyTimepointThumbnails">
-                    {{#each thumbnail in (studyThumbnails this.study)}}
-                        {{>thumbnailEntry (clone this thumbnail=thumbnail)}}
-                    {{/each}}
+                <div class="study-browser-series">
+                    <div class="study-series-container">
+                        {{#each thumbnail in (studyThumbnails this.study)}}
+                            {{>thumbnailEntry (clone this thumbnail=thumbnail)}}
+                        {{/each}}
+                    </div>
                 </div>
             {{/if}}
         </div>

Packages/ohif-viewerbase/client/components/viewer/studyTimepointBrowser/studyTimepointStudy.js

@@ -52,7 +52,7 @@ Template.studyTimepointStudy.onCreated(() => {
         }
 
         const $study = instance.getStudyElement();
-        const $thumbnails = $study.find('.studyTimepointThumbnails');
+        const $thumbnails = $study.find('.study-browser-series');
         $study.addClass('active');
         // If element already has max-height property set, .height()
         // will return that value, so remove it to recalculate
@@ -80,7 +80,7 @@ Template.studyTimepointStudy.onRendered(() => {
 
 Template.studyTimepointStudy.events({
     // Recalculates the timepoint height to make CSS transition smoother
-    'transitionend .studyTimepointThumbnails'(event, instance) {
+    'transitionend .study-browser-series'(event, instance) {
         if (event.target === event.currentTarget) {
             $(event.currentTarget).closest('.studyTimepoint').trigger('displayStateChanged');
         }
@@ -117,7 +117,7 @@ Template.studyTimepointStudy.events({
             if (!alreadyLoaded) {
                 const $studies = instance.getStudyElement(true);
                 $studies.trigger('loadStarted');
-                OHIF.studylist.retrieveStudyMetadata(studyInstanceUid).then(study => {
+                OHIF.studies.retrieveStudyMetadata(studyInstanceUid).then(study => {
                     instance.data.study = study;
                     OHIF.viewer.Studies.insert(study);