Fixed bugs in standalone Viewer, recreated client-only build

Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.js

@@ -205,6 +205,10 @@ Template.thumbnailEntry.onCreated(() => {
     instance.isDragAndDrop = _.isUndefined(instance.data.viewportIndex);
 });
 
+Template.thumbnailEntry.onRendered(() => {
+    console.warn('thumbnailEntry onRendered');
+});
+
 Template.thumbnailEntry.events({
     // Event handlers for drag and drop
     'touchstart .thumbnailEntry, mousedown .thumbnailEntry'(event, instance) {
@@ -250,6 +254,21 @@ Template.thumbnailEntry.helpers({
         return Template.instance().isDragAndDrop ? 'draggable' : '';
     },
     instanceNumber() {
-        return Template.instance().data.thumbnail.stack.images[0].instanceNumber;
+        const thumbnail = Template.instance().data.thumbnail;
+        if (!thumbnail) {
+            return;
+        }
+
+        const stack = thumbnail.stack;
+        if (!stack) {
+            return;
+        }
+
+        const firstImage = stack.images[0];
+        if (!firstImage) {
+            return;
+        }
+
+        return firstImage.instanceNumber;
     }
 });

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js

@@ -35,6 +35,10 @@ Template.cineDialog.onCreated(() => {
 
         // Update playClip toolData for this imageId
         const element = getActiveViewportElement();
+        if (!element) {
+            return;
+        }
+
         const playClipToolData = cornerstoneTools.getToolState(element, 'playClip');
         playClipToolData.data[0].framesPerSecond = OHIF.viewer.cine.framesPerSecond;
 
@@ -77,6 +81,9 @@ Template.cineDialog.onCreated(() => {
         Tracker.afterFlush(() => {
             // Get the active viewportElement
             const element = getActiveViewportElement();
+            if (!element) {
+                return;
+            }
 
             // Get the cornerstone playClip tool data
             const toolData = cornerstoneTools.getToolState(element, 'playClip').data[0];

Packages/viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js

@@ -497,6 +497,9 @@ Template.imageViewerViewport.onDestroyed(function() {
 
     // When a viewport element is being destroyed
     var element = this.find('.imageViewerViewport');
+    if (!element) {
+        return;
+    }
 
     // Try to stop any currently playing clips
     // Otherwise the interval will continuously throw errors

Packages/viewerbase/lib/WLPresets.js

@@ -20,5 +20,9 @@ applyWLPreset = function(presetName, element) {
 
 applyWLPresetToActiveElement = function(presetName) {
     var element = getActiveViewportElement();
+    if (!element) {
+        return;
+    }
+
     applyWLPreset(presetName, element);
 };

Packages/viewerbase/lib/viewportFunctions.js

@@ -8,6 +8,10 @@ getActiveViewportElement = () => {
 
 zoomIn = () => {
     const element = getActiveViewportElement();
+    if (!element) {
+        return;
+    }
+
     let viewport = cornerstone.getViewport(element);
     const scaleIncrement = 0.15;
     const maximumScale = 10;
@@ -17,6 +21,10 @@ zoomIn = () => {
 
 zoomOut = () => {
     const element = getActiveViewportElement();
+    if (!element) {
+        return;
+    }
+
     let viewport = cornerstone.getViewport(element);
     const scaleIncrement = 0.15;
     const minimumScale = 0.05;
@@ -26,11 +34,19 @@ zoomOut = () => {
 
 zoomToFit = () => {
     const element = getActiveViewportElement();
+    if (!element) {
+        return;
+    }
+
     cornerstone.fitToWindow(element);
 };
 
 rotateL = () => {
     const element = getActiveViewportElement();
+    if (!element) {
+        return;
+    }
+
     let viewport = cornerstone.getViewport(element);
     viewport.rotation -= 90;
     cornerstone.setViewport(element, viewport);
@@ -39,6 +55,10 @@ rotateL = () => {
 
 rotateR = () => {
     const element = getActiveViewportElement();
+    if (!element) {
+        return;
+    }
+
     let viewport = cornerstone.getViewport(element);
     viewport.rotation += 90;
     cornerstone.setViewport(element, viewport);
@@ -47,6 +67,10 @@ rotateR = () => {
 
 invert = () => {
     const element = getActiveViewportElement();
+    if (!element) {
+        return;
+    }
+
     let viewport = cornerstone.getViewport(element);
     viewport.invert = (viewport.invert === false);
     cornerstone.setViewport(element, viewport);
@@ -121,6 +145,10 @@ isPlaying = () => {
 
     // Get the viewport element and its current playClip tool state
     const element = getActiveViewportElement();
+    if (!element) {
+        return;
+    }
+
     const toolState = cornerstoneTools.getToolState(element, 'playClip');
 
     // Stop here if the tool state is not defined yet
@@ -134,5 +162,6 @@ isPlaying = () => {
     // Return true if the clip is playing
     return !_.isUndefined(clipState.intervalId);
 };
+
 // Create an event listener to update playing state when a clip stops playing
 $(window).on('CornerstoneToolsClipStopped', () => Session.set('UpdateCINE', Random.id()));

StandaloneViewer/README.md

@@ -3,7 +3,7 @@
 Run the application:
 
 ```bash
-PACKAGE_DIRS="../Packages" meteor
+PACKAGE_DIRS="../../Packages" meteor
 ```
 
 Open your web browser and navigate to one of the following URLs to test the standalone viewer application:
@@ -30,7 +30,7 @@ It is possible to build this standalone viewer to run as a client-only bundle of
 2. Next, build the client bundle into an output folder ("myOutputFolder") with a base URL ("localhost:3000"). In production, this would be the URL where the Viewer is available.
 
   ````
-  PACKAGE_DIRS="../../Viewers/Packages" meteor-build-client myOutputFolder -u localhost:3000
+  PACKAGE_DIRS="../../Packages" meteor-build-client myOutputFolder -u localhost:3000
   ```
 
 

StandaloneViewer/SampleClientOnlyBuild/index.html

@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/ae7143c43d1e026d6ff990de9ba5e3122b9af4c7.css?meteor_css_resource=true">
-        <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/40f07a3197e5e2c1c335548dd2bdac341b8c01a1.css?meteor_css_resource=true">
+        <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/90adf05ed662c03d2d9af690f115f6fff7cf8723.css?meteor_css_resource=true">
+        <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/42829e110ce3790969b93b4b40b41097b91b623e.css?meteor_css_resource=true">
         <script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.4.1.1%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22production%22%7D%2C%22ROOT_URL%22%3A%22localhost%3A3000%22%7D"));</script>
-        <script type="text/javascript" src="/416e978deeca5c0bcc93ad52c2481efd5a1205b0.js"></script>
+        <script type="text/javascript" src="/099fe52d37f20fa59c58ba61e783d73eb2b4db91.js"></script>
 
         <meta charset="utf-8">
     <title>OHIF DICOM Viewer</title>

StandaloneViewer/SampleClientOnlyBuild/packages/hangingprotocols/assets/dots.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 75 75" version="1.1" x="0px" y="0px"><g><path style="" d="M 21.484375 11.132812 C 21.484375 16.777344 16.90625 21.355469 11.261719 21.355469 C 5.617188 21.355469 1.039062 16.777344 1.039062 11.132812 C 1.039062 5.488281 5.617188 0.910156 11.261719 0.910156 C 16.90625 0.910156 21.484375 5.488281 21.484375 11.132812 Z M 21.484375 11.132812 " stroke="none" fill-rule="nonzero" fill="rgb(0%,0%,0%)" fill-opacity="1"></path><path style="" d="M 47.722656 11.132812 C 47.722656 16.777344 43.144531 21.355469 37.5 21.355469 C 31.855469 21.355469 27.277344 16.777344 27.277344 11.132812 C 27.277344 5.488281 31.855469 0.910156 37.5 0.910156 C 43.144531 0.910156 47.722656 5.488281 47.722656 11.132812 Z M 47.722656 11.132812 " stroke="none" fill-rule="nonzero" fill="rgb(0%,0%,0%)" fill-opacity="1"></path><path style="" d="M 74.21875 11.132812 C 74.21875 16.777344 69.640625 21.355469 63.996094 21.355469 C 58.351562 21.355469 53.773438 16.777344 53.773438 11.132812 C 53.773438 5.488281 58.351562 0.910156 63.996094 0.910156 C 69.640625 0.910156 74.21875 5.488281 74.21875 11.132812 Z M 74.21875 11.132812 " stroke="none" fill-rule="nonzero" fill="rgb(0%,0%,0%)" fill-opacity="1"></path><path style="" d="M 21.355469 37.5 C 21.355469 43.144531 16.777344 47.71875 11.132812 47.71875 C 5.488281 47.71875 0.910156 43.144531 0.910156 37.5 C 0.910156 31.851562 5.488281 27.277344 11.132812 27.277344 C 16.777344 27.277344 21.355469 31.851562 21.355469 37.5 Z M 21.355469 37.5 " stroke="none" fill-rule="nonzero" fill="rgb(0%,0%,0%)" fill-opacity="1"></path><path style="" d="M 47.59375 37.5 C 47.59375 43.144531 43.015625 47.71875 37.371094 47.71875 C 31.726562 47.71875 27.148438 43.144531 27.148438 37.5 C 27.148438 31.851562 31.726562 27.277344 37.371094 27.277344 C 43.015625 27.277344 47.59375 31.851562 47.59375 37.5 Z M 47.59375 37.5 " stroke="none" fill-rule="nonzero" fill="rgb(0%,0%,0%)" fill-opacity="1"></path><path style="" d="M 74.089844 37.5 C 74.089844 43.144531 69.511719 47.71875 63.867188 47.71875 C 58.222656 47.71875 53.644531 43.144531 53.644531 37.5 C 53.644531 31.851562 58.222656 27.277344 63.867188 27.277344 C 69.511719 27.277344 74.089844 31.851562 74.089844 37.5 Z M 74.089844 37.5 " stroke="none" fill-rule="nonzero" fill="rgb(0%,0%,0%)" fill-opacity="1"></path><path style="" d="M 21.484375 63.214844 C 21.484375 68.859375 16.90625 73.4375 11.261719 73.4375 C 5.617188 73.4375 1.039062 68.859375 1.039062 63.214844 C 1.039062 57.570312 5.617188 52.992188 11.261719 52.992188 C 16.90625 52.992188 21.484375 57.570312 21.484375 63.214844 Z M 21.484375 63.214844 " stroke="none" fill-rule="nonzero" fill="rgb(0%,0%,0%)" fill-opacity="1"></path><path style="" d="M 47.722656 63.214844 C 47.722656 68.859375 43.144531 73.4375 37.5 73.4375 C 31.855469 73.4375 27.277344 68.859375 27.277344 63.214844 C 27.277344 57.570312 31.855469 52.992188 37.5 52.992188 C 43.144531 52.992188 47.722656 57.570312 47.722656 63.214844 Z M 47.722656 63.214844 " stroke="none" fill-rule="nonzero" fill="rgb(0%,0%,0%)" fill-opacity="1"></path><path style="" d="M 74.21875 63.214844 C 74.21875 68.859375 69.640625 73.4375 63.996094 73.4375 C 58.351562 73.4375 53.773438 68.859375 53.773438 63.214844 C 53.773438 57.570312 58.351562 52.992188 63.996094 52.992188 C 69.640625 52.992188 74.21875 57.570312 74.21875 63.214844 Z M 74.21875 63.214844 " stroke="none" fill-rule="nonzero" fill="rgb(0%,0%,0%)" fill-opacity="1"></path></g></svg>

StandaloneViewer/StandaloneViewer/client/components/flexboxLayout/flexboxLayout.html

@@ -3,7 +3,7 @@
         <div class="sidebarMenu sidebar-left {{#if leftSidebarOpen}}sidebar-open{{/if}}">
             {{> studyBrowser (clone this)}}
         </div>
-        <div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}} {{#if rightSidebarOpen}}sidebar-right-open{{/if}}">
+        <div class="mainContent {{#if leftSidebarOpen}}sidebar-left-open{{/if}}">
             {{> standaloneViewerMain (clone this)}}
         </div>
     </div>

StandaloneViewer/StandaloneViewer/client/components/flexboxLayout/flexboxLayout.js

@@ -11,9 +11,5 @@ Template.flexboxLayout.events({
 Template.flexboxLayout.helpers({
     leftSidebarOpen() {
         return Template.instance().data.state.get('leftSidebar');
-    },
-
-    rightSidebarOpen() {
-        return Template.instance().data.state.get('rightSidebar');
     }
 });

StandaloneViewer/StandaloneViewer/client/components/standaloneViewerMain/standaloneViewerMain.js

@@ -2,7 +2,12 @@ import { OHIF } from 'meteor/ohif:core';
 
 Template.standaloneViewerMain.onCreated(() => {
     // Attach the Window resize listener
-    $(window).on('resize', handleResize);
+
+    // TODO: Check why this seems to need to be in a defer clause
+    // here, but not in the other viewers...
+    Meteor.defer(() => {
+        $(window).on('resize', handleResize);
+    });
 
     // Create the synchronizer used to update reference lines
     OHIF.viewer.updateImageSynchronizer = new cornerstoneTools.Synchronizer('CornerstoneNewImage', cornerstoneTools.updateImageSynchronizer);