chore(version): update cs3d version and add iframe documentation (#3474)

.webpack/webpack.base.js

@@ -73,15 +73,6 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
       children: false,
       warnings: true,
     },
-    devServer: {
-      open: true,
-      port: 3000,
-      historyApiFallback: true,
-      headers: {
-        'Cross-Origin-Embedder-Policy': 'require-corp',
-        'Cross-Origin-Opener-Policy': 'same-origin',
-      },
-    },
     cache: {
       type: 'filesystem',
     },

extensions/cornerstone-dicom-sr/package.json

@@ -44,9 +44,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.1.8",
-    "@cornerstonejs/core": "^1.1.8",
-    "@cornerstonejs/tools": "^1.1.8",
+    "@cornerstonejs/adapters": "^1.2.4",
+    "@cornerstonejs/core": "^1.2.4",
+    "@cornerstonejs/tools": "^1.2.4",
     "classnames": "^2.3.2"
   }
 }

extensions/cornerstone/package.json

@@ -36,7 +36,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.1.8",
+    "@cornerstonejs/dicom-image-loader": "^1.2.4",
     "@ohif/core": "3.7.0-beta.11",
     "@ohif/ui": "3.7.0-beta.11",
     "dcmjs": "^0.29.6",
@@ -52,10 +52,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.1.8",
-    "@cornerstonejs/core": "^1.1.8",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.1.8",
-    "@cornerstonejs/tools": "^1.1.8",
+    "@cornerstonejs/adapters": "^1.2.4",
+    "@cornerstonejs/core": "^1.2.4",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.2.4",
+    "@cornerstonejs/tools": "^1.2.4",
     "@kitware/vtk.js": "27.3.1",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "4.0.8",

extensions/measurement-tracking/package.json

@@ -30,8 +30,8 @@
     "start": "yarn run dev"
   },
   "peerDependencies": {
-    "@cornerstonejs/core": "^1.1.8",
-    "@cornerstonejs/tools": "^1.1.8",
+    "@cornerstonejs/core": "^1.2.4",
+    "@cornerstonejs/tools": "^1.2.4",
     "@ohif/core": "3.7.0-beta.11",
     "@ohif/extension-cornerstone-dicom-sr": "3.7.0-beta.11",
     "@ohif/ui": "3.7.0-beta.11",

package.json

@@ -149,7 +149,7 @@
     ]
   },
   "resolutions": {
-    "@cornerstonejs/core": "^1.1.8",
+    "@cornerstonejs/core": "^1.2.4",
     "**/@babel/runtime": "^7.20.13",
     "commander": "8.3.0",
     "nth-check": "^2.1.1",

platform/app/netlify.toml

@@ -43,3 +43,5 @@
     # COMMENT: For sharedArrayBuffer, see https://developer.chrome.com/blog/enabling-shared-array-buffer/
     Cross-Origin-Embedder-Policy = "require-corp"
     Cross-Origin-Opener-Policy =  "same-origin"
+    # set CORP to cross-origin for anyone who wants to use the viewer in an iframe
+    Cross-Origin-Resource-Policy = "cross-origin"

platform/app/package.json

@@ -51,7 +51,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.1.8",
+    "@cornerstonejs/dicom-image-loader": "^1.2.4",
     "@ohif/core": "3.7.0-beta.11",
     "@ohif/extension-cornerstone": "3.7.0-beta.11",
     "@ohif/extension-cornerstone-dicom-rt": "3.7.0-beta.11",

platform/core/package.json

@@ -35,7 +35,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
     "@cornerstonejs/codec-openjph": "^2.4.2",
-    "@cornerstonejs/dicom-image-loader": "^1.1.8",
+    "@cornerstonejs/dicom-image-loader": "^1.2.4",
     "@ohif/ui": "3.7.0-beta.11",
     "cornerstone-math": "0.1.9",
     "dicom-parser": "^1.8.21"

platform/docs/docs/deployment/authorization.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 8
+sidebar_position: 7
 sidebar_label: Authorization
 ---
 

platform/docs/docs/deployment/build-for-production.md

@@ -70,7 +70,7 @@ and registered extension's features, are configured using this file.
 
 The easiest way to apply your own configuration is to modify the `default.js`
 file. For more advanced configuration options, check out our
-[configuration essentials guide](../configuration/index.md).
+[configuration essentials guide](../configuration/configurationFiles.md).
 
 ## Next Steps
 
@@ -108,6 +108,10 @@ yarn global add http-server
 npx http-server ./dist
 ```
 
+:::caution
+In the video below notice that there is `platform/viewer` which has been renamed to `platform/app` in the latest version
+:::
+
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
     <iframe src="https://player.vimeo.com/video/551957266?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"  frameBorder="0" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style= {{ position:"absolute",top:0,left:0,width:"100%",height:"100%"}} title="measurement-report"></iframe>
 </div>
@@ -127,6 +131,6 @@ web application. For a starting point, check out this repository's own use of:
 [circleci]: https://circleci.com/gh/OHIF/Viewers
 [circleci-config]: https://github.com/OHIF/Viewers/blob/master/.circleci/config.yml
 [netlify]: https://app.netlify.com/sites/ohif/deploys
-[netlify.toml]: https://github.com/OHIF/Viewers/blob/master/netlify.toml
+[netlify.toml]: https://github.com/OHIF/Viewers/blob/master/platform/app/netlify.toml
 [build-deploy-preview.sh]: https://github.com/OHIF/Viewers/blob/master/.netlify/build-deploy-preview.sh
 <!-- prettier-ignore-end -->

platform/docs/docs/deployment/google-cloud-healthcare.md

@@ -1,7 +0,0 @@
----
-sidebar_position: 7
----
-
-# Google Cloud Healthcare
-
-> Coming soon - We are working on bringing Google Cloud Healthcare to OHIF-v3

platform/docs/docs/deployment/iframe.md

@@ -0,0 +1,163 @@
+---
+sidebar_position: 7
+sidebar_label: iframe
+---
+
+# iframe
+
+With the transition to more advanced visualization, loading, and rendering techniques using WebWorkers, WASM, and WebGL, the script tag usage of the OHIF viewer v3 has been deprecated.
+An alternative option for script tag usage is to employ an iframe. You can utilize the iframe element to load the OHIF viewer and establish communication with it using the postMessage API if needed.
+
+We recommend utilizing modern development practices and incorporating OHIF viewer within your application using a more modular and integrated approach, such as leveraging bundlers, other UI
+components, and frameworks.
+
+## Static Build
+
+You can use the iframe element to load the OHIF viewer as a child element of your application if you need the
+viewer to be embedded within your application. The iframe element can be used as follows (use your own custom styles)
+
+```html
+<iframe src="./path-to-ohif-build" style="width: 100%; height: 500px; border: none"/>
+```
+
+The important thing to note here is that the iframe element is loading the OHIF viewer from the `./path-to-ohif-build`. This path can be
+named anything you want, but it should be the path to the OHIF viewer build directory. The build directory is the directory that
+contains the `index.html` file (See [build for production](./build-for-production.md) for more information).
+
+It is also required that the PUBLIC_URL environment variable is set to the same path. For example, if the iframe is
+`<iframe src="./ohif" />` (which means there is a `ohif` folder containing the build in your main app), then you need to:
+
+1. use a config (e.g. config/myConfig.js) file that is using the `routerBasename` of `/ohif` (note the one / - it is not /ohif/).
+2. build the viewer with `PUBLIC_URL=./ohif/ APP_CONFIG=config/myConfig.js yarn build` (note the one / - it is not /ohif/).
+
+:::tip
+Check to make sure the `app-config.js` in the build is reflecting the correct routerBasename.
+:::
+
+:::tip
+The PUBLIC_URL tells the application where to find the static assets and the routerBasename will tell the application how to handle the rouets
+:::
+
+### Try it locally
+
+Download the index.html and the build (against the /ohif/ path) from [here](https://ohif-assets.s3.us-east-2.amazonaws.com/iframe-basic/Archive.zip)
+
+Then run the
+
+```
+npx http-server unzipped-folder
+```
+
+You should be able to see
+
+![Alt text](../assets/img/iframe-basic.png)
+
+:::info
+Notice the Cross Origin Isolation Warning. It is present to indicate that OHIF cannot render volumes because the volume viewports
+use SharedArrayBuffer which is not allowed for non cross origin isolated apps. You can read more about Cross Origin Isolation here
+https://web.dev/coop-coep/ or follow the steps below to enable it.
+:::
+
+### Fixing the Cross Origin Isolation Warning to enable volume rendering
+
+For that we need a more sophisticated setup, since we need to add the Cross Origin Embedder Policy and Cross Origin Opener Policy headers
+to make the parent app cross origin isolated. For that we can use an Express server. (Note: you can use any other method
+to add the headers, this is just one of the methods)
+
+Download files from [here](https://ohif-assets.s3.us-east-2.amazonaws.com/iframe-express/Archive.zip)
+
+```js
+const express = require("express")
+const app = express()
+
+app.use((req, res, next) => {
+  res.setHeader("Cross-Origin-Opener-Policy", "same-origin")
+  res.setHeader("Cross-Origin-Embedder-Policy", "require-corp")
+  next()
+})
+
+app.use(express.static("public")) // 'public' should be the folder with the static OHIF build files
+
+app.listen(8080, () => console.log("Listening on port 8080!"))
+```
+
+![Alt text](../assets/img/iframe-headers.png)
+
+
+:::tip
+if you are using webpack with react you can set
+
+```js
+devServer: {
+  headers: {
+    "Cross-Origin-Opener-Policy": "same-origin",
+    "Cross-Origin-Embedder-Policy": "require-corp"
+  }
+}
+```
+
+:::
+
+:::tip
+If you are using Angular, you should modify the `angular.json` file to add the headers
+
+```js
+"serve": {
+  //
+  "configurations": {
+    //
+    "development": {
+      //
+      "headers": {
+        "Cross-Origin-Opener-Policy": "same-origin",
+        "Cross-Origin-Embedder-Policy": "require-corp"
+      }
+    }
+  },
+  //
+},
+```
+:::
+
+
+
+## Development Server
+
+If you are not using the static build, you can use the iframe to load the viewer from the local development server. For example, if you are running the viewer locally on port 3000, you can use the following iframe element to load the viewer:
+
+```html
+// e.g., app running on 3001 and iframe loading the viewer from 3000
+<iframe src="http://localhost:3000" style="width: 100%; height: 500px; border: none"/>
+```
+
+Notice that not including the static build removes the need for
+the PUBLIC_URL and the routerBasename. However, the Cross Origin Resource Policy (CORP)
+headers must be set because the viewer will be loaded from a different port. You can read
+more about CORP [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cross-Origin_Resource_Policy).
+Basically in the development server that is serving the viewer, add the following headers:
+
+```js
+// use this if the embedding app is running on the same site as OHIF
+// (e.g. parent/embedding app is http://localhost:3001 and OHIF is http://localhost:3000)
+"Cross-Origin-Resource-Policy": "same-site"
+or
+
+// use this if the embedding app is a completely different origin than OHIF (e.g.
+// parent/embedding app is http://192.168.1.2 and OHIF is http://localhost:3000)
+"Cross-Origin-Resource-Policy": "cross-origin"
+```
+
+:::info
+You can't set the `Cross-Origin-Resource-Policy` to `same-origin` since the viewer is loaded from a different port.
+:::
+
+:::tip
+If you are using webpack to serve the viewer it would be
+
+```js
+devServer: {
+  headers: {
+    "Cross-Origin-Resource-Policy": "same-site" // cross-origin is also valid
+  }
+}
+```

platform/docs/docs/deployment/index.md

@@ -5,29 +5,21 @@ sidebar_label: Overview
 
 # Deployment
 
-The OHIF Viewer can be embedded in other web applications via it's [packaged
-script source][viewer-npm], or served up as a stand-alone PWA ([progressive web
-application][pwa-url]) by building and hosting a collection of static assets. In
+The OHIF Viewer can be served as a stand-alone PWA ([progressive web
+application][pwa-url]) by building and hosting a collection of static assets or be embedded in other web applications via an iframe if needed. In
 either case, you will need to configure your instance of the Viewer so that it
 can connect to your data source (the database or PACS that provides the data
 your Viewer will display).
 
-## Overview
-
+:::tip
 Our goal is to make deployment as simple and painless as possible; however,
 there is an inherent amount of complexity in configuring and deploying web
 applications. If you find yourself a little lost, please don't hesitate to
-[reach out for help](/help)
+reach out to for help.
+:::
 
 ## Deployment Scenarios
 
-### Embedded Viewer (deprecated)
-
-`OHIF-v3` has deprecated deploying the viewer as an embedded viewer the number
-of underlying libraries that run web workers are increasing for OHIF. An example
-of these libraries is OHIF's 3D rendering functionality that is provided by
-`vtk-js`.
-
 ### Stand-alone Viewer
 
 Deploying the OHIF Viewer as a stand-alone web application provides many
@@ -43,7 +35,6 @@ _Today:_
 _In the future:_
 
 - The ability to package the viewer for [App Store distribution][app-store]
-- Leverage `service-workers` for offline support and speed benefits from caching
 
 #### Hosted Static Assets
 
@@ -52,10 +43,6 @@ HTML, CSS, JS, Font Files, and Images. We "build" those files from our
 `source code` with configuration specific to our project. We then make those
 files publicly accessible by hosting them on a Web Server.
 
-If you have not deployed a web application before, this may be a good time to
-[reach out for help](/help), as these steps assume prior web development and
-deployment experience.
-
 ##### Part 1 - Build Production Assets
 
 "Building", or creating, the files you will need is the same regardless of the
@@ -84,6 +71,16 @@ _Advanced_
 - [GCP + Cloudflare](./static-assets.md#gcp--cloudflare)
 - [Azure](./static-assets.md#azure)
 
+### Embedded Viewer (iframe)
+
+`OHIF-v3` has deprecated deploying the viewer as an embedded viewer via a script
+tag as the number of underlying libraries that run web workers are increasing for OHIF. An example of these libraries is OHIF's 3D rendering functionality that is provided by
+`vtk-js`.
+
+However, you can still embed the viewer using an iframe. You can utilize the iframe element to load the OHIF viewer and establish communication with it using the postMessage API if needed.
+Read more about how to use the iframe [here](./iframe.md).
+
+
 ## Data
 
 The OHIF Viewer is able to connect to any data source that implements the [DICOM

platform/docs/docs/deployment/user-account-control.md

@@ -1,7 +0,0 @@
----
-sidebar_position: 6
----
-
-# User Account Control
-
-> Coming soon - We are working on bringing the User Account Control to OHIF-v3

platform/docs/docs/migration-guide.md

@@ -1,6 +1,6 @@
 ---
 sidebar_position: 10
-sidebar_label: 💥 Migration Guide (NEW)💥
+sidebar_label: Migration Guide (NEW)
 ---
 
 # Migration Guide

platform/docs/docs/platform/environment-variables.md

@@ -11,7 +11,7 @@ There are a number of environment variables we use at build time to influence th
 NODE_ENV=< production | development >
 DEBUG=< true | false >
 APP_CONFIG=< relative path to application configuration file >
-PUBLIC_URL=<>
+PUBLIC_URL=< relative path to application root - default / >
 VERSION_NUMBER=<Set by CircleCI>
 BUILD_NUM=<Set by CircleCI>
 # i18n

platform/docs/docusaurus.config.js

@@ -6,13 +6,10 @@
  */
 
 const path = require('path');
-const versions = require('./versions.json');
-const VersionsArchived = require('./versionsArchived.json');
 
-const ArchivedVersionsDropdownItems = Object.entries(VersionsArchived).splice(
-  0,
-  5
-);
+// read this text file
+const fs = require('fs');
+const versions = fs.readFileSync('../../version.txt', 'utf8').split('\n');
 
 // This probably only makes sense for the beta phase, temporary
 // function getNextBetaVersionName() {
@@ -87,7 +84,7 @@ module.exports = {
         redirects: [
           {
             // we need this for https://cloud.google.com/healthcare/docs/how-tos/dicom-viewers
-            to: '/2.0/deployment/recipes/google-cloud-healthcare',
+            to: '/2.0-deprecated/deployment/recipes/google-cloud-healthcare',
             from: [
               '/connecting-to-image-archives/google-cloud-healthcare',
               '/connecting-to-image-archives/google-cloud-healthcare.html',
@@ -227,7 +224,7 @@ module.exports = {
           //     : undefined,
           versions: {
             current: {
-              label: 'Latest',
+              label: `${versions} (Latest)`,
             },
           },
         },
@@ -283,7 +280,7 @@ module.exports = {
         },
         items: [
           {
-            to: 'https://ohif.org/showcase',
+            href: 'https://ohif.org/showcase',
             label: 'Showcase',
             target: '_blank',
             position: 'left',
@@ -296,11 +293,17 @@ module.exports = {
             label: 'Docs',
           },
           {
-            to: 'https://ohif.org/collaborate',
+            href: 'https://ohif.org/collaborate',
             label: 'Collaborate',
             target: '_blank',
             position: 'left',
           },
+          {
+            to: '/migration-guide',
+            label: 'Migration Guides',
+            position: 'left',
+            className: 'new-badge',
+          },
           {
             to: '/help',
             //activeBaseRegex: '(^/help$)|(/help)',
@@ -312,21 +315,6 @@ module.exports = {
             position: 'right',
             dropdownActiveClassDisabled: true,
             dropdownItemsAfter: [
-              {
-                type: 'html',
-                value: '<hr class="dropdown-separator">',
-              },
-              {
-                type: 'html',
-                className: 'dropdown-archived-versions',
-                value: '<b>Archived versions</b>',
-              },
-              ...ArchivedVersionsDropdownItems.map(
-                ([versionName, versionUrl]) => ({
-                  label: versionName,
-                  href: versionUrl,
-                })
-              ),
               {
                 type: 'html',
                 value: '<hr class="dropdown-separator">',
@@ -379,9 +367,17 @@ module.exports = {
                 to: '/',
               },
               {
-                label: 'Installation',
+                label: 'Getting Started',
                 to: 'development/getting-started',
               },
+              {
+                label: 'FAQ',
+                to: '/faq',
+              },
+              {
+                label: 'Resources',
+                to: '/resources',
+              },
             ],
           },
           {
@@ -389,7 +385,7 @@ module.exports = {
             items: [
               {
                 label: 'Discussion board',
-                to: 'https://community.ohif.org/',
+                href: 'https://community.ohif.org/',
               },
               {
                 label: 'Help',
@@ -402,15 +398,15 @@ module.exports = {
             items: [
               {
                 label: 'Donate',
-                to: 'https://giving.massgeneral.org/ohif',
+                href: 'https://giving.massgeneral.org/ohif',
               },
               {
                 label: 'GitHub',
-                to: 'https://github.com/OHIF/Viewers',
+                href: 'https://github.com/OHIF/Viewers',
               },
               {
                 label: 'Twitter',
-                to: 'https://twitter.com/OHIFviewer',
+                href: 'https://twitter.com/OHIFviewer',
               },
             ],
           },

platform/docs/src/css/custom.css

@@ -273,3 +273,16 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   padding: 0 var(--ifm-pre-padding);
   border-left: 3px solid #ff000080;
 }
+
+.new-badge::after,
+.deprecated-badge::after {
+  font-size: 11px;
+  @apply inline-flex items-center justify-center rounded-sm;
+  @apply ml-1.5 px-1 py-0;
+}
+
+.new-badge::after {
+  content: ' (NEW)';
+  @apply bg-red-300 text-red-500;
+  @apply dark:bg-blue-900 dark:text-blue-100;
+}

platform/docs/src/pages/versions.md

@@ -5,50 +5,16 @@ with the latest software engineering practices, here we are listing the versions
 the OHIF platform that we are currently supporting, and the versions that have been
 deprecated.
 
-## Product Version vs Package Version
+## Product Version
 
-There are two types of versions that we need to consider here:
-
-- Product Version: which is the end user visible version of the viewer
-- Package Version: which is the underlying libraries/packages of the platform on npm.
 
 Currently we have three product versions:
 
 - Version 1 (deprecated): Built with Meteor as a full stack application.
-- Version 2 (master branch): Front end image viewer built with React
-- Version 3 (alpha release): Re-architected Version 2.0 to allow for a more modular and customizable viewer.
-
-As per package versioning, we follow semantic versioning which looks like *a.b.c* where:
-
-- *a* is for major breaking changes
-- *b* is for new features
-- *c* is for patches/bug fixes
-
-You can read more semantic versioning [here](https://semver.org/).
+- Version 2 (deprecated): Front end image viewer built with React
+- Version 3.x-beta (master branch): With latest bug fixes and features but not yet released (released under beta)
+- Version 3.x (release branch): Released version of the OHIF platform which is more stable and tested
 
 
-## Maintained Product Versions
-
-### Version 3.1 Cornerstone3D
-
-OHIF Version 3.1 is the next major upcoming release of the OHIF platform. It uses
-the next generation of the cornerstone library, [Cornerstone 3D](https://github.com/cornerstonejs/cornerstone3D-beta).
-We are in the process of performing a parity check between this version and the `master`
-branch before we merge it into the master branch. You can read more about the
-roadmap timelines [here](https://ohif.org/roadmap/).
-
-### Version 2.0: Master branch
-
-Currently, the master branch of OHIF is on Product Version 2.0.
-
-## Archived Versions
-
-### Version 3.0 Cornerstone Legacy
-
-Version 3.0 which uses [cornerstone-core](https://github.com/cornerstonejs/cornerstone) and
-[cornerstone-tools](https://github.com/cornerstonejs/cornerstoneTools) for rendering and
-manipulation/annotation of images.
-
-### Version 1.0 Meteor
-
-Deprecated in favor of Version 2.0. Built using full stack Meteor as a full stack application.
+You can read more about the differences between the versions in the [development section](../../docs/development/getting-started#branches) of the documentation
+to understand which version is more suitable for your use case.