From 53cd12a16a8d534d922df91a170682255019d123 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Wed, 8 Aug 2018 18:00:53 +0200
Subject: [PATCH] feat(plugins): Add initial version of ViewportPlugin class
 (#242)

* Add initial version of ViewportPlugin class
* Move entrypoints from OHIFPlugin to OHIF.plugins
* Add URL route to DICOMWeb server for Standalone Viewer
---
 OHIFViewer/package-lock.json                  | 798 ++++++++----------
 .../viewer/gridLayout/gridLayout.html         |  14 +-
 .../viewer/gridLayout/gridLayout.js           |  10 +-
 .../viewer/imageControls/imageControls.js     |   4 +-
 .../imageViewerViewport.js                    |  22 +-
 Packages/ohif-viewerbase/client/index.js      |   4 +-
 .../client/lib/classes/LayoutManager.js       |  81 +-
 .../lib/classes/{ => plugins}/OHIFPlugin.js   |  30 +-
 .../lib/classes/plugins/ViewportPlugin.js     | 169 ++++
 .../client/lib/classes/plugins/index.js       |  18 +
 .../client/lib/panelNavigation.js             |  16 +-
 .../client/lib/setActiveViewport.js           |  33 +-
 .../client/lib/thumbnailDragHandlers.js       |  14 +-
 .../client/lib/viewportUtils.js               |   2 +-
 .../public/DICOMCloud_public.json             |  21 +
 StandaloneViewer/StandaloneViewer/routes.js   |  32 +
 development.Dockerfile                        |   1 +
 dockerfile                                    |   1 +
 18 files changed, 708 insertions(+), 562 deletions(-)
 rename Packages/ohif-viewerbase/client/lib/classes/{ => plugins}/OHIFPlugin.js (58%)
 create mode 100644 Packages/ohif-viewerbase/client/lib/classes/plugins/ViewportPlugin.js
 create mode 100644 Packages/ohif-viewerbase/client/lib/classes/plugins/index.js
 create mode 100644 StandaloneViewer/StandaloneViewer/public/DICOMCloud_public.json

diff --git a/OHIFViewer/package-lock.json b/OHIFViewer/package-lock.json
index 45492c355..07ea4f4a0 100644
--- a/OHIFViewer/package-lock.json
+++ b/OHIFViewer/package-lock.json
@@ -13,6 +13,11 @@
         "regenerator-runtime": "^0.11.1"
       }
     },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
     "agent-base": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz",
@@ -22,6 +27,25 @@
         "es6-promisify": "^5.0.0"
       }
     },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+    },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+    },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      }
+    },
     "async-limiter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz",
@@ -31,444 +55,21 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
     },
     "bcrypt": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-3.0.0.tgz",
-      "integrity": "sha512-gjicxsD4e5U3nH0EqiEb5y+fKpsZ7F52wcnmNfu45nxnolWVAYh7NgbdfilY+5x1v6cLspxmzz4hf+ju2pFxhA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-2.0.0.tgz",
+      "integrity": "sha512-KL3nXU8H6QR/dgSUWHkjId5xIOJn8DTl4idFl720nsBwoq5ArAqIVmZ5BbD8LiCH+wjS7NX9hBvp30rGMmU0LA==",
       "requires": {
         "nan": "2.10.0",
-        "node-pre-gyp": "0.10.2"
-      },
-      "dependencies": {
-        "abbrev": {
-          "version": "1.1.1",
-          "bundled": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "bundled": true
-        },
-        "aproba": {
-          "version": "1.2.0",
-          "bundled": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.5",
-          "bundled": true,
-          "requires": {
-            "delegates": "^1.0.0",
-            "readable-stream": "^2.0.6"
-          }
-        },
-        "balanced-match": {
-          "version": "1.0.0",
-          "bundled": true
-        },
-        "brace-expansion": {
-          "version": "1.1.11",
-          "bundled": true,
-          "requires": {
-            "balanced-match": "^1.0.0",
-            "concat-map": "0.0.1"
-          }
-        },
-        "chownr": {
-          "version": "1.0.1",
-          "bundled": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "bundled": true
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "bundled": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "bundled": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "bundled": true
-        },
-        "debug": {
-          "version": "2.6.9",
-          "bundled": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "deep-extend": {
-          "version": "0.6.0",
-          "bundled": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "bundled": true
-        },
-        "detect-libc": {
-          "version": "1.0.3",
-          "bundled": true
-        },
-        "fs-minipass": {
-          "version": "1.2.5",
-          "bundled": true,
-          "requires": {
-            "minipass": "^2.2.1"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "bundled": true
-        },
-        "gauge": {
-          "version": "2.7.4",
-          "bundled": true,
-          "requires": {
-            "aproba": "^1.0.3",
-            "console-control-strings": "^1.0.0",
-            "has-unicode": "^2.0.0",
-            "object-assign": "^4.1.0",
-            "signal-exit": "^3.0.0",
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wide-align": "^1.1.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.2",
-          "bundled": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "bundled": true
-        },
-        "iconv-lite": {
-          "version": "0.4.23",
-          "bundled": true,
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
-        },
-        "ignore-walk": {
-          "version": "3.0.1",
-          "bundled": true,
-          "requires": {
-            "minimatch": "^3.0.4"
-          }
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "bundled": true,
-          "requires": {
-            "once": "^1.3.0",
-            "wrappy": "1"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "bundled": true
-        },
-        "ini": {
-          "version": "1.3.5",
-          "bundled": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "bundled": true,
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "bundled": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "bundled": true,
-          "requires": {
-            "brace-expansion": "^1.1.7"
-          }
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "bundled": true
-        },
-        "minipass": {
-          "version": "2.3.3",
-          "bundled": true,
-          "requires": {
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.0"
-          },
-          "dependencies": {
-            "safe-buffer": {
-              "version": "5.1.2",
-              "bundled": true
-            },
-            "yallist": {
-              "version": "3.0.2",
-              "bundled": true
-            }
-          }
-        },
-        "minizlib": {
-          "version": "1.1.0",
-          "bundled": true,
-          "requires": {
-            "minipass": "^2.2.1"
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "bundled": true,
-          "requires": {
-            "minimist": "0.0.8"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "bundled": true
-        },
-        "needle": {
-          "version": "2.2.1",
-          "bundled": true,
-          "requires": {
-            "debug": "^2.1.2",
-            "iconv-lite": "^0.4.4",
-            "sax": "^1.2.4"
-          }
-        },
-        "node-pre-gyp": {
-          "version": "0.10.2",
-          "bundled": true,
-          "requires": {
-            "detect-libc": "^1.0.2",
-            "mkdirp": "^0.5.1",
-            "needle": "^2.2.0",
-            "nopt": "^4.0.1",
-            "npm-packlist": "^1.1.6",
-            "npmlog": "^4.0.2",
-            "rc": "^1.2.7",
-            "rimraf": "^2.6.1",
-            "semver": "^5.3.0",
-            "tar": "^4"
-          }
-        },
-        "nopt": {
-          "version": "4.0.1",
-          "bundled": true,
-          "requires": {
-            "abbrev": "1",
-            "osenv": "^0.1.4"
-          }
-        },
-        "npm-bundled": {
-          "version": "1.0.3",
-          "bundled": true
-        },
-        "npm-packlist": {
-          "version": "1.1.10",
-          "bundled": true,
-          "requires": {
-            "ignore-walk": "^3.0.1",
-            "npm-bundled": "^1.0.1"
-          }
-        },
-        "npmlog": {
-          "version": "4.1.2",
-          "bundled": true,
-          "requires": {
-            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "~1.1.0",
-            "gauge": "~2.7.3",
-            "set-blocking": "~2.0.0"
-          }
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "bundled": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "bundled": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "bundled": true,
-          "requires": {
-            "wrappy": "1"
-          }
-        },
-        "os-homedir": {
-          "version": "1.0.2",
-          "bundled": true
-        },
-        "os-tmpdir": {
-          "version": "1.0.2",
-          "bundled": true
-        },
-        "osenv": {
-          "version": "0.1.5",
-          "bundled": true,
-          "requires": {
-            "os-homedir": "^1.0.0",
-            "os-tmpdir": "^1.0.0"
-          }
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "bundled": true
-        },
-        "process-nextick-args": {
-          "version": "2.0.0",
-          "bundled": true
-        },
-        "rc": {
-          "version": "1.2.8",
-          "bundled": true,
-          "requires": {
-            "deep-extend": "^0.6.0",
-            "ini": "~1.3.0",
-            "minimist": "^1.2.0",
-            "strip-json-comments": "~2.0.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "bundled": true
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "2.3.5",
-          "bundled": true,
-          "requires": {
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.3",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~2.0.0",
-            "safe-buffer": "~5.1.1",
-            "string_decoder": "~1.0.3",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "rimraf": {
-          "version": "2.6.2",
-          "bundled": true,
-          "requires": {
-            "glob": "^7.0.5"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.1",
-          "bundled": true
-        },
-        "safer-buffer": {
-          "version": "2.1.2",
-          "bundled": true
-        },
-        "sax": {
-          "version": "1.2.4",
-          "bundled": true
-        },
-        "semver": {
-          "version": "5.5.0",
-          "bundled": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "bundled": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "bundled": true
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "bundled": true,
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        },
-        "string_decoder": {
-          "version": "1.0.3",
-          "bundled": true,
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "bundled": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "bundled": true
-        },
-        "tar": {
-          "version": "4.4.4",
-          "bundled": true,
-          "requires": {
-            "chownr": "^1.0.1",
-            "fs-minipass": "^1.2.5",
-            "minipass": "^2.3.3",
-            "minizlib": "^1.1.0",
-            "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.2"
-          },
-          "dependencies": {
-            "safe-buffer": {
-              "version": "5.1.2",
-              "bundled": true
-            },
-            "yallist": {
-              "version": "3.0.2",
-              "bundled": true
-            }
-          }
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "bundled": true
-        },
-        "wide-align": {
-          "version": "1.1.3",
-          "bundled": true,
-          "requires": {
-            "string-width": "^1.0.2 || 2"
-          }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "bundled": true
-        }
+        "node-pre-gyp": "0.9.0"
       }
     },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -480,11 +81,20 @@
       "integrity": "sha512-c5mRlguI/Pe2dSZmpER62rSCu0ryKmWddzRYsuXc50U2/g8jMOulc31VZMa4mYx31U5xsmSOpDCgH88Vl9cDGQ==",
       "dev": true
     },
+    "chownr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz",
+      "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE="
+    },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
     "concat-stream": {
       "version": "1.6.2",
@@ -498,6 +108,11 @@
         "typedarray": "^0.0.6"
       }
     },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+    },
     "core-js": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
@@ -506,8 +121,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "debug": {
       "version": "3.1.0",
@@ -518,6 +132,21 @@
         "ms": "2.0.0"
       }
     },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
+    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+    },
+    "detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
+    },
     "es6-promise": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz",
@@ -565,17 +194,38 @@
         "pend": "~1.2.0"
       }
     },
+    "fs-minipass": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
+      "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
+      "requires": {
+        "minipass": "^2.2.1"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      }
     },
     "glob": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
       "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -585,6 +235,11 @@
         "path-is-absolute": "^1.0.0"
       }
     },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
+    },
     "https-proxy-agent": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz",
@@ -595,11 +250,26 @@
         "debug": "^3.1.0"
       }
     },
+    "iconv-lite": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
+      "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "ignore-walk": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
+      "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
+      "requires": {
+        "minimatch": "^3.0.4"
+      }
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -608,14 +278,25 @@
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ini": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
+    },
+    "is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "requires": {
+        "number-is-nan": "^1.0.0"
+      }
     },
     "isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
     },
     "loglevel": {
       "version": "1.6.1",
@@ -632,7 +313,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -640,14 +320,29 @@
     "minimist": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-      "dev": true
+      "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
+    },
+    "minipass": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.3.tgz",
+      "integrity": "sha512-/jAn9/tEX4gnpyRATxgHEOV6xbcyxgT7iUnxo9Y3+OB0zX00TgKIv/2FZCf5brBbICcwbLqVv2ImjvWWrQMSYw==",
+      "requires": {
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.0"
+      }
+    },
+    "minizlib": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.0.tgz",
+      "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
+      "requires": {
+        "minipass": "^2.2.1"
+      }
     },
     "mkdirp": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       }
@@ -655,28 +350,125 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "nan": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
       "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA=="
     },
+    "needle": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.2.1.tgz",
+      "integrity": "sha512-t/ZswCM9JTWjAdXS9VpvqhI2Ct2sL2MdY4fUXqGJaGBk13ge99ObqRksRTbBE56K+wxUXwwfZYOuZHifFW9q+Q==",
+      "requires": {
+        "debug": "^2.1.2",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
+    "node-pre-gyp": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.9.0.tgz",
+      "integrity": "sha1-vdTDr6ybGx6/8Kn/M2KFnrZ4G7g=",
+      "requires": {
+        "detect-libc": "^1.0.2",
+        "mkdirp": "^0.5.1",
+        "needle": "^2.2.0",
+        "nopt": "^4.0.1",
+        "npm-packlist": "^1.1.6",
+        "npmlog": "^4.0.2",
+        "rc": "^1.1.7",
+        "rimraf": "^2.6.1",
+        "semver": "^5.3.0",
+        "tar": "^4"
+      }
+    },
+    "nopt": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+      "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
+      "requires": {
+        "abbrev": "1",
+        "osenv": "^0.1.4"
+      }
+    },
+    "npm-bundled": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.3.tgz",
+      "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow=="
+    },
+    "npm-packlist": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.1.11.tgz",
+      "integrity": "sha512-CxKlZ24urLkJk+9kCm48RTQ7L4hsmgSVzEk0TLGPzzyuFxD7VNgy5Sl24tOLMzQv773a/NeJ1ce1DKeacqffEA==",
+      "requires": {
+        "ignore-walk": "^3.0.1",
+        "npm-bundled": "^1.0.1"
+      }
+    },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
     },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+    },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "pend": {
       "version": "1.2.0",
@@ -687,8 +479,7 @@
     "process-nextick-args": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
-      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
-      "dev": true
+      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
     },
     "progress": {
       "version": "2.0.0",
@@ -718,11 +509,28 @@
         "ws": "^5.1.1"
       }
     },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+        }
+      }
+    },
     "readable-stream": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
       "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
-      "dev": true,
       "requires": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -742,7 +550,6 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
       "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
-      "dev": true,
       "requires": {
         "glob": "^7.0.5"
       }
@@ -750,18 +557,78 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
+    "semver": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
+      "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA=="
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
+    "signal-exit": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
+    },
+    "string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "requires": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "strip-ansi": "^3.0.0"
+      }
     },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
       "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.0"
       }
     },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+    },
+    "tar": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.6.tgz",
+      "integrity": "sha512-tMkTnh9EdzxyfW+6GK6fCahagXsnYk6kE6S9Gr9pjVdys769+laCTbodXDhPAjzVtEBazRgP0gYqOjnk9dQzLg==",
+      "requires": {
+        "chownr": "^1.0.1",
+        "fs-minipass": "^1.2.5",
+        "minipass": "^2.3.3",
+        "minizlib": "^1.1.0",
+        "mkdirp": "^0.5.0",
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.2"
+      }
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -771,14 +638,20 @@
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      }
     },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "ws": {
       "version": "5.2.2",
@@ -789,6 +662,11 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "yallist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
+      "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k="
+    },
     "yauzl": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz",
diff --git a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html b/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html
index e5f1a522e..9c5dbb36c 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html
+++ b/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.html
@@ -1,10 +1,16 @@
 <template name="gridLayout">
     <div id='imageViewerViewports'>
         {{#each viewport in viewports}}
-            <div class="viewportContainer {{getClass @index}}" style="height:{{height}}%;width:{{width}}%;">
-                <div class="removable">
-                    {{>imageViewerViewport (clone viewport)}}
-                </div>
+            <div class="viewportContainer {{getClass @index}} {{ activeClass @index }}" style="height:{{height}}%;width:{{width}}%;">
+                {{ #if eq viewport.plugin 'cornerstone'}}
+                    <div class="removable">
+                        {{>imageViewerViewport (clone viewport)}}
+                    </div>
+                {{ else }}
+                    <div class="viewport-plugin-{{viewport.plugin}}"
+                        style="height:100%; width: 100%">
+                    </div>
+                {{ /if }}
                 {{>seriesQuickSwitch (clone this viewport=viewport viewportIndex=@index)}}
             </div>
         {{/each}}
diff --git a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.js b/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.js
index 293ef6a8d..b937980b8 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/gridLayout/gridLayout.js
@@ -30,7 +30,7 @@ Template.gridLayout.helpers({
         }
 
         const actualRow = Math.floor(index / columns);
-            
+
         if ( actualRow === 0 ) {
             return TOP_CLASS;
         }
@@ -40,7 +40,13 @@ Template.gridLayout.helpers({
 
         return MIDDLE_CLASS;
     },
-    
+
+    activeClass(index) {
+        if (Session.get('activeViewport') === index) {
+            return 'active';
+        };
+    },
+
     // Return the viewports list
     viewports() {
         const instance = Template.instance();
diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js b/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js
index d122f4664..14eb94f2f 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/imageControls/imageControls.js
@@ -65,8 +65,8 @@ Template.imageControls.events({
             // Using the slider in an inactive viewport
             // should cause that viewport to become active
             const $slider = $(event.currentTarget);
-            const newActiveElement = $slider.parents('.viewportContainer').find('.imageViewerViewport');
-            setActiveViewport(newActiveElement);
+            const viewportContainer = $slider.parents('.viewportContainer');
+            setActiveViewport(viewportContainer);
 
             // Subtract 1 here since the slider goes from 1 to N images
             // But the stack indexing starts at 0
diff --git a/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js b/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
index 5cb543392..d6d202e0e 100644
--- a/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
+++ b/Packages/ohif-viewerbase/client/components/viewer/imageViewerViewport/imageViewerViewport.js
@@ -21,6 +21,8 @@ const allCornerstoneEvents = ['click', 'cornerstonetoolsmousedown', 'cornerstone
     'cornerstonetoolsmousewheel', 'cornerstonetoolsdoubletap', 'cornerstonetoolstouchpress',
     'cornerstonetoolsmultitouchstart', 'cornerstonetoolsmultitouchstartactive', 'cornerstonetoolsmultitouchdrag'];
 
+const PLUGIN_CORNERSTONE = 'cornerstone';
+
 /**
  * This function loads a study series into a viewport element.
  *
@@ -40,7 +42,7 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
     // Get the current element and it's index in the list of all viewports
     // The viewport index is often used to store information about a viewport element
     const element = data.element;
-    const viewportIndex = $('.imageViewerViewport').index(element);
+    const viewportIndex = templateData.viewportIndex;
 
     const layoutManager = OHIF.viewerbase.layoutManager;
     layoutManager.viewportData = layoutManager.viewportData || {};
@@ -115,7 +117,8 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
         displaySetInstanceUid,
         currentImageIdIndex,
         viewport: viewport || data.viewport,
-        viewportIndex
+        viewportIndex,
+        plugin: PLUGIN_CORNERSTONE
     };
 
     // Handle the case where the imageId isn't loaded correctly and the
@@ -461,7 +464,9 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
         // This is done to ensure that the active element has the current
         // focus, so that keyboard events are triggered.
         if (viewportIndex === Session.get('activeViewport')) {
-            setActiveViewport(element);
+            const viewportContainer = $element.parents('.viewportContainer');
+
+            setActiveViewport(viewportContainer);
         }
 
         // Run any renderedCallback that exists in the data context
@@ -469,9 +474,6 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
             data.renderedCallback(element);
         }
 
-        // Update the LayoutManagerUpdated session key
-        layoutManager.updateSession();
-
         // Check if it has after loadAndCacheImage callback
         if (typeof callbacks.after === 'function') {
             OHIF.log.info('imageViewerViewport after callback');
@@ -624,8 +626,8 @@ Template.imageViewerViewport.onRendered(function() {
                 viewportIndexToZoom = layoutManager.zoomedViewportIndex || 0;
             }
             // Set zoomed viewport as active...
-            const element = $('.imageViewerViewport').get(viewportIndexToZoom);
-            setActiveViewport(element);
+            const viewportContainer = $('.viewportContainer').get(viewportIndexToZoom);
+            setActiveViewport(viewportContainer);
         });
     }
 
@@ -682,6 +684,8 @@ Template.imageViewerViewport.onDestroyed(function() {
 Template.imageViewerViewport.events({
     'OHIFActivateViewport .imageViewerViewport'(event) {
         OHIF.log.info('imageViewerViewport OHIFActivateViewport');
-        setActiveViewport(event.currentTarget);
+
+        const viewportContainer = $(event.currentTarget).parents('.viewportContainer').get(0);
+        setActiveViewport(viewportContainer);
     }
 });
diff --git a/Packages/ohif-viewerbase/client/index.js b/Packages/ohif-viewerbase/client/index.js
index 158841d63..c3375f0dd 100644
--- a/Packages/ohif-viewerbase/client/index.js
+++ b/Packages/ohif-viewerbase/client/index.js
@@ -227,8 +227,8 @@ import { InstanceMetadata } from './lib/classes/metadata/InstanceMetadata';
 import { StudySummary } from './lib/classes/metadata/StudySummary';
 Viewerbase.metadata = { StudyMetadata, SeriesMetadata, InstanceMetadata, StudySummary };
 
-import { OHIFPlugin } from './lib/classes/OHIFPlugin';
-Viewerbase.OHIFPlugin = OHIFPlugin;
+import { plugins } from './lib/classes/plugins/';
+Viewerbase.plugins = plugins;
 
 // TypeSafeCollection
 import { TypeSafeCollection } from './lib/classes/TypeSafeCollection';
diff --git a/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js b/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js
index caf1aa03a..da90e8296 100644
--- a/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js
+++ b/Packages/ohif-viewerbase/client/lib/classes/LayoutManager.js
@@ -1,4 +1,5 @@
-import { Meteor } from 'meteor/meteor';import { Blaze } from 'meteor/blaze';
+import { Meteor } from 'meteor/meteor';
+import { Blaze } from 'meteor/blaze';
 import { Session } from 'meteor/session';
 import { Tracker } from 'meteor/tracker';
 import { Template } from 'meteor/templating';
@@ -7,6 +8,8 @@ import { $ } from 'meteor/jquery';
 
 import { OHIF } from 'meteor/ohif:core';
 
+const PLUGIN_CORNERSTONE = 'cornerstone';
+
 let isInteractingWithViewport = false;
 Meteor.startup(() => {
     const setInteracting = flag => {
@@ -41,11 +44,16 @@ export class LayoutManager {
 
         this.isZoomed = false;
 
-        const updateSessionFn = () => Tracker.afterFlush(() => {
-            Session.set('LayoutManagerUpdated', Math.random());
+        const updateSessionFn = () => {
+            const random = Math.random();
+            Session.set('LayoutManagerUpdated', random);
             this.observer.changed();
+        };
+
+        this.updateSession = _.throttle(updateSessionFn, 300, {
+            leading: true,
+            trailing: false
         });
-        this.updateSession = _.throttle(updateSessionFn, 300);
     }
 
     /**
@@ -121,7 +129,8 @@ export class LayoutManager {
                 studyInstanceUid,
                 seriesInstanceUid,
                 displaySetInstanceUid,
-                sopInstanceUid
+                sopInstanceUid,
+                plugin: PLUGIN_CORNERSTONE
             };
 
             additionalData.push(data);
@@ -181,6 +190,12 @@ export class LayoutManager {
             this.setDefaultViewportData();
         }
 
+        this.viewportData.forEach(data => {
+            if (!data.plugin) {
+                data.plugin = PLUGIN_CORNERSTONE;
+            }
+        })
+
         // imageViewerViewports occasionally needs relevant layout data in order to set
         // the element style of the viewport in question
         const layoutProps = this.layoutProps;
@@ -190,13 +205,13 @@ export class LayoutManager {
 
         this.viewportData.forEach(viewportData => {
             const viewportDataAndLayoutProps = $.extend(viewportData, layoutProps);
+
             data.viewportData.push(viewportDataAndLayoutProps);
         });
 
         const layoutTemplate = Template[this.layoutTemplateName];
-        const $parentNode = $(this.parentNode);
 
-        $parentNode.html('');
+        this.parentNode.innerHTML = '';
         this.updateLayoutClass();
         Blaze.renderWithData(layoutTemplate, data, this.parentNode);
 
@@ -218,12 +233,15 @@ export class LayoutManager {
         OHIF.log.info(`LayoutManager rerenderViewportWithNewDisplaySet: ${viewportIndex}`);
 
         // The parent container is identified because it is later removed from the DOM
-        const element = $('.imageViewerViewport').eq(viewportIndex);
-        const container = element.parents('.viewportContainer').get(0);
+        const container = $('.viewportContainer').get(viewportIndex);
 
         // Record the current viewportIndex so this can be passed into the re-rendering call
         data.viewportIndex = viewportIndex;
 
+        // If we have been provided with a plugin to use, use it.
+        // Otherwise, use whichever plugin is currently in use in this viewport.
+        const plugin = data.plugin || this.viewportData[viewportIndex].plugin;
+
         // Update the dictionary of loaded displaySet for the specified viewport
         this.viewportData[viewportIndex] = {
             viewportIndex: viewportIndex,
@@ -231,27 +249,40 @@ export class LayoutManager {
             seriesInstanceUid: data.seriesInstanceUid,
             studyInstanceUid: data.studyInstanceUid,
             renderedCallback: data.renderedCallback,
-            currentImageIdIndex: data.currentImageIdIndex || 0
+            currentImageIdIndex: data.currentImageIdIndex || 0,
+            plugin,
         };
 
-        // Remove the hover styling
-        element.find('canvas').not('.magnifyTool').removeClass('faded');
-
-        // Remove the whole template, add in the new one
-        const viewportContainer = element.parents('.removable');
-
         const newViewportContainer = document.createElement('div');
-        newViewportContainer.className = 'removable';
-
-        // Remove the parent element of the template
-        // This is a workaround since otherwise Blaze UI onDestroyed doesn't fire
-        viewportContainer.remove();
-
-        container.appendChild(newViewportContainer);
 
         // Render and insert the template
-        Blaze.renderWithData(Template.imageViewerViewport, data, newViewportContainer);
+        if (plugin === PLUGIN_CORNERSTONE) {
+            // Remove the hover styling
+            const element = $(container).find('.imageViewerViewport');
 
+            element.find('canvas').not('.magnifyTool').removeClass('faded');
+
+            // Remove the whole template, add in the new one
+            const viewportContainer = element.parents('.removable');
+
+            newViewportContainer.className = 'removable';
+
+            // Remove the parent element of the template
+            // This is a workaround since otherwise Blaze UI onDestroyed doesn't fire
+            viewportContainer.remove();
+
+            container.appendChild(newViewportContainer);
+
+            Blaze.renderWithData(Template.imageViewerViewport, data, newViewportContainer);
+        } else {
+            newViewportContainer.className = `viewport-plugin-${plugin}`;
+            newViewportContainer.style.width = '100%';
+            newViewportContainer.style.height = '100%';
+
+            container.innerHTML = '';
+            container.appendChild(newViewportContainer);
+        }
+        
         this.updateSession();
     }
 
@@ -283,7 +314,7 @@ export class LayoutManager {
 
         const layoutTemplate = Template.gridLayout;
 
-        $(this.parentNode).html('');
+        this.parentNode.innerHTML = '';
         Blaze.renderWithData(layoutTemplate, data, this.parentNode);
 
         this.isZoomed = true;
diff --git a/Packages/ohif-viewerbase/client/lib/classes/OHIFPlugin.js b/Packages/ohif-viewerbase/client/lib/classes/plugins/OHIFPlugin.js
similarity index 58%
rename from Packages/ohif-viewerbase/client/lib/classes/OHIFPlugin.js
rename to Packages/ohif-viewerbase/client/lib/classes/plugins/OHIFPlugin.js
index ff96a8d53..e35ac4e0f 100644
--- a/Packages/ohif-viewerbase/client/lib/classes/OHIFPlugin.js
+++ b/Packages/ohif-viewerbase/client/lib/classes/plugins/OHIFPlugin.js
@@ -1,5 +1,4 @@
-// TODO: Add plugin reloader
-class OHIFPlugin {
+export class OHIFPlugin {
     // TODO: this class is still under development and will
     // likely change in the near future
     constructor () {
@@ -25,10 +24,12 @@ class OHIFPlugin {
     // reload all the dependency scripts and also
     // the main plugin script url.
     static reloadPlugin(plugin) {
-        plugin.scriptURLs = plugin.scriptURLs || {};
-        plugin.scriptURLs.forEach(scriptURL => {
-            this.loadScript(scriptURL).onload = function() {}
-        });
+        console.warn(`reloadPlugin: ${plugin.name}`);
+        if (plugin.scriptURLs && plugin.scriptURLs.length) {
+            plugin.scriptURLs.forEach(scriptURL => {
+                this.loadScript(scriptURL).onload = function() {}
+            });
+        }
 
         let scriptURL = plugin.url;
 
@@ -37,20 +38,11 @@ class OHIFPlugin {
         }
 
         this.loadScript(scriptURL).onload = function() {
-            if (OHIFPlugin.entryPoints[plugin.name]) {
-                OHIFPlugin.entryPoints[plugin.name]();
+            const entryPointFunction = OHIF.plugins.entryPoints[plugin.name];
+
+            if (entryPointFunction) {
+                entryPointFunction();
             }
         }
     }
 }
-
-// each plugin registers an entry point function to be called
-// when the loading is complete (called above in reloadPlugin).
-
-// TODO: Move to OHIF.plugins.entryPoints?
-OHIFPlugin.entryPoints = {};
-
-export { OHIFPlugin };
-
-// TODO: Should we remove this? Authors should be able to use new 'OHIF.viewerbase.OHIFPlugin()'
-window.OHIFPlugin = OHIFPlugin;
diff --git a/Packages/ohif-viewerbase/client/lib/classes/plugins/ViewportPlugin.js b/Packages/ohif-viewerbase/client/lib/classes/plugins/ViewportPlugin.js
new file mode 100644
index 000000000..f6547eee0
--- /dev/null
+++ b/Packages/ohif-viewerbase/client/lib/classes/plugins/ViewportPlugin.js
@@ -0,0 +1,169 @@
+import { Session } from 'meteor/session';
+import { Tracker } from 'meteor/tracker';
+
+import { OHIF } from 'meteor/ohif:core';
+
+import { OHIFPlugin } from "./OHIFPlugin";
+
+export class ViewportPlugin extends OHIFPlugin {
+    constructor(name) {
+        super();
+
+        this.name = name;
+        this._destroyed = false;
+
+        this._setupListeners();
+    }
+
+    /**
+     * Retrieve a Display Set for a specific viewport by viewport index,
+     * if one is already displayed in the viewport.
+     *
+     * @static
+     * @param {Number} viewportIndex
+     * @return {undefined|ImageSet}
+     */
+    static getDisplaySet(viewportIndex) {
+        // TODO: Move layoutManager from viewerbase to viewer
+        const { layoutManager } = OHIF.viewerbase;
+        const viewportData = layoutManager.viewportData[viewportIndex];
+        const { studyInstanceUid, displaySetInstanceUid } = viewportData;
+        const studyMetadata = OHIF.viewer.StudyMetadataList.findBy({ studyInstanceUID: studyInstanceUid });
+
+        return studyMetadata.findDisplaySet(displaySet => {
+            return displaySet.displaySetInstanceUid === displaySetInstanceUid;
+        });
+    }
+
+    /**
+     * Set up the viewport using the plugin.
+     *
+     * This should be implemented by the child class.
+     *
+     * @abstract
+     *
+     * @param {HTMLElement} div
+     * @param {ImageSet} displaySet
+     * @param {Object} viewportDetails
+     */
+    setupViewport(div, displaySet, viewportDetails) {
+        throw new Error('You must override this method!');
+    }
+
+    /**
+     * Switch a single viewport to use the current ViewportPlugin
+     *
+     * @param {Number} viewportIndex The viewport to switch to the current plugin type
+     */
+    setViewportToPlugin(viewportIndex) {
+        if (!this.name) {
+            throw new Error('ViewportPlugin subclasses must have a name');
+        }
+
+        const { layoutManager } = OHIF.viewerbase;
+        const viewportData = layoutManager.viewportData[viewportIndex];
+        if (viewportData.plugin === this.name) {
+            OHIF.log.info(`setViewportToPlugin: Viewport ${viewportIndex} already set to plugin ${this.name}`);
+            return;
+        }
+
+        viewportData.plugin = this.name;
+
+        layoutManager.rerenderViewportWithNewDisplaySet(viewportIndex, viewportData);
+    }
+
+    /**
+     * Runs 'setupViewport' for the ViewportPlugin on all viewports which should
+     * be rendered by this plugin, but have not yet been initialized. Viewports
+     * which already contain contents are skipped.
+     *
+     * @private
+     */
+    _initEmptyPluginViewports() {
+        if (!this.name) {
+            throw new Error('ViewportPlugin subclasses must have a name');
+        }
+
+        // Find all Viewport HTMLElements currently using this plugin
+        const pluginDivs = Array.from(document.querySelectorAll(`.viewport-plugin-${this.name}`));
+
+        // If there are no Viewports using this plugin, stop here
+        if (!pluginDivs.length) {
+            return;
+        }
+
+        const emptyPluginDivs = pluginDivs.filter(div => {
+            // Keep only divs owned by the plugin which have no contents
+            return div.innerHTML.trim() === '';
+        });
+
+        OHIF.log.info(`${this.name}: Initializing ${emptyPluginDivs.length} viewports`);
+
+        // Retrieve the list of all viewports, so we can figure out the viewport details
+        const allViewports = Array.from(document.querySelectorAll('.viewportContainer'));
+
+        emptyPluginDivs.forEach(div => {
+            // Identify the Viewport index, and any display set that is currently
+            // hung in the viewport
+            const viewportIndex = allViewports.indexOf(div.parentNode);
+            const viewportDetails = { viewportIndex };
+            const displaySet = ViewportPlugin.getDisplaySet(viewportIndex);
+
+            // Use the plugin's setupViewport function to render the contents
+            // of this viewport.
+            this.setupViewport(div, viewportDetails, displaySet);
+        });
+    }
+
+    /**
+     * Listen for changes to the viewport layout which would necessitate a
+     * rerendering of the viewports. When this happens, re-render all viewports
+     * which are using this plugin.
+     *
+     * @private
+     */
+    _setupListeners() {
+        if (!this.name) {
+            throw new Error('ViewportPlugin subclasses must have a name');
+        }
+
+        console.warn(`_setupListeners: ${this.name}`);
+
+        // TODO: Stop using Meteor's reactivity here
+        Tracker.autorun((computation) => {
+            const random = Session.get('LayoutManagerUpdated');
+            console.warn(`LayoutManagerUpdated: ${this.name}: ${random}`);
+
+            // Bail out if this is the first time the autorun
+            // executes (i.e. when it is being defined).
+            //
+            // Note: This has to be checked after the dependency on the
+            // Session variable above, or the reactive dependency will not
+            // be established.
+            if (computation.firstRun === true) {
+                return;
+            }
+
+            // In case we need to disable the use
+            // of this plugin, we can also stop the
+            // reactive computation by setting
+            // this.destroyed to true.
+            if (this._destroyed === true) {
+                computation.stop();
+            }
+
+            // Identify all viewports which should be
+            // rendered by the ViewportPlugin, and render
+            // them.
+            this._initEmptyPluginViewports();
+        });
+    }
+
+    /**
+     * Stop listening for changes to the viewport layout in order to
+     * automatically rerender viewports setup for use by this plugin.
+     */
+    stopListeners() {
+        this._destroyed = true;
+    }
+}
diff --git a/Packages/ohif-viewerbase/client/lib/classes/plugins/index.js b/Packages/ohif-viewerbase/client/lib/classes/plugins/index.js
new file mode 100644
index 000000000..d77b077a0
--- /dev/null
+++ b/Packages/ohif-viewerbase/client/lib/classes/plugins/index.js
@@ -0,0 +1,18 @@
+import { OHIF } from 'meteor/ohif:core';
+
+import { OHIFPlugin } from './OHIFPlugin';
+import { ViewportPlugin } from './ViewportPlugin';
+
+// Each plugin registers an entry point function to be called
+// when the loading is complete.
+
+const plugins = {
+    OHIFPlugin,
+    ViewportPlugin,
+    entryPoints: {}
+};
+
+// TODO: When we reorganize the packages, we should figure out where to put this.
+OHIF.plugins = plugins;
+
+export default plugins;
diff --git a/Packages/ohif-viewerbase/client/lib/panelNavigation.js b/Packages/ohif-viewerbase/client/lib/panelNavigation.js
index f5397afc3..dbe9feaf6 100644
--- a/Packages/ohif-viewerbase/client/lib/panelNavigation.js
+++ b/Packages/ohif-viewerbase/client/lib/panelNavigation.js
@@ -8,18 +8,18 @@ const loadPreviousActivePanel = () => {
     let currentIndex = Session.get('activeViewport');
     currentIndex--;
 
-    const $viewports = $('.imageViewerViewport');
+    const $viewports = $('.viewportContainer');
     const numViewports = $viewports.length;
     if (currentIndex < 0) {
         currentIndex = numViewports - 1;
     }
 
-    const element = $viewports.get(currentIndex);
-    if (!element) {
+    const viewportContainer = $viewports.get(currentIndex);
+    if (!viewportContainer) {
         return;
     }
 
-    setActiveViewport(element);
+    setActiveViewport(viewportContainer);
 };
 
 const loadNextActivePanel = () => {
@@ -27,18 +27,18 @@ const loadNextActivePanel = () => {
     let currentIndex = Session.get('activeViewport');
     currentIndex++;
 
-    const $viewports = $('.imageViewerViewport');
+    const $viewports = $('.viewportContainer');
     const numViewports = $viewports.length;
     if (currentIndex >= numViewports) {
         currentIndex = 0;
     }
 
-    const element = $viewports.get(currentIndex);
-    if (!element) {
+    const viewportContainer = $viewports.get(currentIndex);
+    if (!viewportContainer) {
         return;
     }
 
-    setActiveViewport(element);
+    setActiveViewport(viewportContainer);
 };
 
 /**
diff --git a/Packages/ohif-viewerbase/client/lib/setActiveViewport.js b/Packages/ohif-viewerbase/client/lib/setActiveViewport.js
index 2b7b80748..838e0d439 100644
--- a/Packages/ohif-viewerbase/client/lib/setActiveViewport.js
+++ b/Packages/ohif-viewerbase/client/lib/setActiveViewport.js
@@ -6,21 +6,17 @@ import { OHIF } from 'meteor/ohif:core';
 import { StudyPrefetcher } from './classes/StudyPrefetcher';
 import { displayReferenceLines } from './displayReferenceLines';
 
+const PLUGIN_CORNERSTONE = 'cornerstone';
+
 /**
  * Sets a viewport element active
  * @param  {node} element DOM element to be activated or viewportIndex
  */
 export function setActiveViewport(element) {
-    const $viewerports = $('.imageViewerViewport');
+    const $viewports = $('.viewportContainer');
+    const viewportIndex = $viewports.index(element);
 
-    let viewportIndex;
-    if (typeof element === 'number') {
-        viewportIndex = element;
-    } else {
-        viewportIndex = $viewerports.index(element);
-    }
-
-    const $element = $viewerports.eq(viewportIndex);
+    const $element = $viewports.eq(viewportIndex);
     if (!$element.length) {
         OHIF.log.info('setActiveViewport element does not exist');
         return;
@@ -38,25 +34,16 @@ export function setActiveViewport(element) {
     // with the viewport index that it was fired from.
     Session.set('activeViewport', viewportIndex);
 
-    const randomId = Random.id();
-
-    // Update the Session variable to inform that a viewport is active
-    Session.set('viewportActivated', randomId);
-
-    // Update the Session variable to the UI re-renders
-    Session.set('LayoutManagerUpdated', randomId);
-
-    // Add the 'active' class to the parent container to highlight the active viewport
-    $('#imageViewerViewports .viewportContainer').removeClass('active');
-    $element.parents('.viewportContainer').addClass('active');
-
     // Finally, enable stack prefetching and hide the reference lines from
     // the newly activated viewport that has a canvas
+    const { layoutManager } = OHIF.viewerbase;
+    const viewportData = layoutManager.viewportData[viewportIndex];
 
-    if ($element.find('canvas').length) {
+    if (viewportData.plugin === PLUGIN_CORNERSTONE &&
+        $element.find('canvas').length) {
         // Cornerstone Tools compare DOM elements (check getEnabledElement cornerstone function)
         // so we can't pass a jQuery object as an argument, otherwise it throws an excepetion
-        const domElement = $element.get(0);
+        const domElement = $element.find('.imageViewerViewport').get(0);
         displayReferenceLines(domElement);
         StudyPrefetcher.getInstance().prefetch();
 
diff --git a/Packages/ohif-viewerbase/client/lib/thumbnailDragHandlers.js b/Packages/ohif-viewerbase/client/lib/thumbnailDragHandlers.js
index 7f5341463..dadfb87d8 100644
--- a/Packages/ohif-viewerbase/client/lib/thumbnailDragHandlers.js
+++ b/Packages/ohif-viewerbase/client/lib/thumbnailDragHandlers.js
@@ -161,15 +161,15 @@ const thumbnailDragHandler = event => {
     }
 
     // Remove any current faded effects on viewports
-    $('.imageViewerViewport canvas').removeClass('faded');
+    $('.viewportContainer canvas').removeClass('faded');
 
     // Figure out what to do depending on what we're dragging over
-    const $viewportsDraggedOver = $(elemBelow).parents('.imageViewerViewport');
+    const $viewportsDraggedOver = $(elemBelow).parents('.viewportContainer');
     if ($viewportsDraggedOver.length) {
         // If we're dragging over a non-empty viewport, fade it and change the cursor style
         $viewportsDraggedOver.find('canvas').not('.magnifyTool').addClass('faded');
         document.body.style.cursor = 'copy';
-    } else if (elemBelow.classList.contains('imageViewerViewport') && elemBelow.classList.contains('empty')) {
+    } else if (elemBelow.classList.contains('viewportContainer') && elemBelow.classList.contains('empty')) {
         // If we're dragging over an empty viewport, just change the cursor style
         document.body.style.cursor = 'copy';
     } else {
@@ -207,7 +207,7 @@ const thumbnailDragEndHandler = (event, data, handlers) => {
     $('.imageThumbnailClone').remove();
 
     // Remove any current faded effects on viewports
-    $('.imageViewerViewport canvas').removeClass('faded');
+    $('.viewportContainer canvas').removeClass('faded');
 
     // If none exists, stop here
     if (!elemBelow) {
@@ -218,12 +218,12 @@ const thumbnailDragEndHandler = (event, data, handlers) => {
     elemBelow.classList.remove('faded');
 
     let element;
-    const $viewportsDraggedOver = $(elemBelow).closest('.imageViewerViewport');
+    const $viewportsDraggedOver = $(elemBelow).closest('.viewportContainer');
 
     if ($viewportsDraggedOver.length) {
         // If we're dragging over a non-empty viewport, retrieve it
         element = $viewportsDraggedOver.get(0);
-    } else if (elemBelow.classList.contains('imageViewerViewport') &&
+    } else if (elemBelow.classList.contains('viewportContainer') &&
                elemBelow.classList.contains('empty')) {
         // If we're dragging over an empty viewport, retrieve that instead
         element = elemBelow;
@@ -238,7 +238,7 @@ const thumbnailDragEndHandler = (event, data, handlers) => {
     }
 
     // Get the dropped viewport index
-    const viewportIndex = $('.imageViewerViewport').index(element);
+    const viewportIndex = $('.viewportContainer').index(element);
 
     // Rerender the viewport using the dragged thumbnail data
     OHIF.viewerbase.layoutManager.rerenderViewportWithNewDisplaySet(viewportIndex, data);
diff --git a/Packages/ohif-viewerbase/client/lib/viewportUtils.js b/Packages/ohif-viewerbase/client/lib/viewportUtils.js
index 862b5110f..86e719da3 100644
--- a/Packages/ohif-viewerbase/client/lib/viewportUtils.js
+++ b/Packages/ohif-viewerbase/client/lib/viewportUtils.js
@@ -327,7 +327,7 @@ const isStackScrollLinkingDisabled = () => {
     let linkableViewportsCount = 0;
 
     // Its called everytime active viewport and/or layout change
-    Session.get('viewportActivated');
+    Session.get('activeViewport');
     Session.get('LayoutManagerUpdated');
 
     const synchronizer = OHIF.viewer.stackImagePositionOffsetSynchronizer;
diff --git a/StandaloneViewer/StandaloneViewer/public/DICOMCloud_public.json b/StandaloneViewer/StandaloneViewer/public/DICOMCloud_public.json
new file mode 100644
index 000000000..273ddc906
--- /dev/null
+++ b/StandaloneViewer/StandaloneViewer/public/DICOMCloud_public.json
@@ -0,0 +1,21 @@
+{
+  "servers": {
+    "dicomWeb": [
+      {
+        "name": "DICOMCloud Public Server",
+        "wadoUriRoot": "https://dicomcloud.azurewebsites.net/WadoUri",
+        "qidoRoot": "https://dicomcloud.azurewebsites.net/qidors",
+        "wadoRoot": "https://dicomcloud.azurewebsites.net/wadors",
+        "qidoSupportsIncludeField": false,
+        "imageRendering": "wadouri",
+        "thumbnailRendering": "wadouri",
+        "requestOptions": {
+          "requestFromBrowser": true,
+          "logRequests": true,
+          "logResponses": false,
+          "logTiming": true
+        }
+      }]
+  },
+  "defaultServiceType": "dicomWeb"
+}
diff --git a/StandaloneViewer/StandaloneViewer/routes.js b/StandaloneViewer/StandaloneViewer/routes.js
index 3686512cb..725805107 100644
--- a/StandaloneViewer/StandaloneViewer/routes.js
+++ b/StandaloneViewer/StandaloneViewer/routes.js
@@ -52,6 +52,38 @@ if (Meteor.isClient) {
                 OHIF.log.info(JSON.stringify(oReq.responseText, null, 2));
                 this.data = JSON.parse(oReq.responseText);
 
+                if (this.data.servers && query.studyInstanceUids) {
+                    console.warn('Using Server Definition!');
+
+                    const server = this.data.servers.dicomWeb[0];
+                    server.type = 'dicomWeb';
+
+                    const serverId = OHIF.servers.collections.servers.insert(server);
+
+                    OHIF.servers.collections.currentServer.insert({
+                        serverId
+                    });
+
+                    studyInstanceUids = query.studyInstanceUids.split(';');
+                    const seriesInstanceUids = [];
+
+                    const viewerData = {
+                        studyInstanceUids,
+                        seriesInstanceUids
+                    };
+
+                    OHIF.studies.retrieveStudiesMetadata(studyInstanceUids, seriesInstanceUids).then(studies => {
+                        this.data = {
+                            studies,
+                            viewerData
+                        };
+
+                        next();
+                    });
+
+                    return;
+                }
+
                 next();
             });
 
diff --git a/development.Dockerfile b/development.Dockerfile
index 051f7950d..6c5457cae 100644
--- a/development.Dockerfile
+++ b/development.Dockerfile
@@ -9,6 +9,7 @@ RUN apt-get update && apt-get install -y \
 	curl \
 	g++ \
 	git \
+	python \
 	build-essential
 
 RUN curl https://install.meteor.com/ | sh
diff --git a/dockerfile b/dockerfile
index a5ce21e14..201092b54 100644
--- a/dockerfile
+++ b/dockerfile
@@ -9,6 +9,7 @@ RUN apt-get update && apt-get install -y \
 	curl \
 	g++ \
 	git \
+	python \
 	build-essential
 
 RUN curl https://install.meteor.com/ | sh