dev(yarn link): make it possible to yarn link easily with cornerstone…

…3D and update docs (OHIF#3563)

.webpack/rules/transpileJavaScript.js

@@ -33,7 +33,11 @@ function transpileJavaScript(mode) {
       rootMode: 'upward',
       envName: mode,
       cacheCompression: false,
-      cacheDirectory: true,
+      // Note: This was causing a lot of issues with yarn link of the cornerstone
+      // only set this to true if you don't have a yarn link to external libs
+      // otherwise expect the lib changes not to be reflected in the dev server
+      // as it will be cached
+      cacheDirectory: false,
     },
   };
 }

.webpack/webpack.base.js

@@ -79,6 +79,11 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
     module: {
       noParse: [/(codec)/, /(dicomicc)/],
       rules: [
+        {
+          test: /\.js$/,
+          enforce: 'pre',
+          use: 'source-map-loader',
+        },
         transpileJavaScriptRule(mode),
         loadWebWorkersRule,
         // loadShadersRule,

babel.config.js

@@ -13,12 +13,16 @@ module.exports = {
       'inline-react-svg',
       {
         svgo: {
-          plugins: extendDefaultPlugins([
+          plugins: [
             {
-              name: 'removeViewBox',
-              active: false,
+              name: 'preset-default',
+              params: {
+                overrides: {
+                  removeViewBox: false,
+                },
+              },
             },
-          ]),
+          ],
         },
       },
     ],

extensions/cornerstone-dicom-sr/package.json

@@ -44,9 +44,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.5.0",
-    "@cornerstonejs/core": "^1.5.0",
-    "@cornerstonejs/tools": "^1.5.0",
+    "@cornerstonejs/adapters": "^1.7.1",
+    "@cornerstonejs/core": "^1.7.1",
+    "@cornerstonejs/tools": "^1.7.1",
     "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.4.1",
+    "@cornerstonejs/dicom-image-loader": "^1.7.1",
     "@ohif/core": "3.7.0-beta.40",
     "@ohif/ui": "3.7.0-beta.40",
     "dcmjs": "^0.29.6",
@@ -52,10 +52,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
-    "@cornerstonejs/adapters": "^1.5.0",
-    "@cornerstonejs/core": "^1.5.0",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.5.0",
-    "@cornerstonejs/tools": "^1.5.0",
+    "@cornerstonejs/adapters": "^1.7.1",
+    "@cornerstonejs/core": "^1.7.1",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.7.1",
+    "@cornerstonejs/tools": "^1.7.1",
     "@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.5.0",
-    "@cornerstonejs/tools": "^1.5.0",
+    "@cornerstonejs/core": "^1.7.1",
+    "@cornerstonejs/tools": "^1.7.1",
     "@ohif/core": "3.7.0-beta.40",
     "@ohif/extension-cornerstone-dicom-sr": "3.7.0-beta.40",
     "@ohif/ui": "3.7.0-beta.40",
@@ -47,7 +47,7 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@ohif/ui": "3.7.0-beta.40",
-    "@xstate/react": "^0.8.1",
+    "@xstate/react": "^3.2.2",
     "xstate": "^4.10.0"
   }
 }

package.json

@@ -74,6 +74,7 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/plugin-transform-typescript": "^7.13.0",
     "@babel/preset-env": "^7.16.11",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.13.0",
     "@types/jest": "^27.5.0",
@@ -124,6 +125,7 @@
     "semver": "^7.5.1",
     "serve": "^14.2.0",
     "shader-loader": "^1.3.1",
+    "source-map-loader": "^4.0.1",
     "start-server-and-test": "^1.10.0",
     "style-loader": "^1.0.0",
     "terser-webpack-plugin": "^5.1.4",

platform/app/.webpack/webpack.pwa.js

@@ -186,8 +186,6 @@ module.exports = (env, argv) => {
         chunkFilename: '[id].css',
       })
     );
-  } else {
-    mergedConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
   }
 
   return mergedConfig;

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.4.4",
+    "@cornerstonejs/dicom-image-loader": "^1.7.1",
     "@ohif/core": "3.7.0-beta.40",
     "@ohif/extension-cornerstone": "3.7.0-beta.40",
     "@ohif/extension-cornerstone-dicom-rt": "3.7.0-beta.40",

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.4.4",
+    "@cornerstonejs/dicom-image-loader": "^1.7.1",
     "@ohif/ui": "3.7.0-beta.40",
     "cornerstone-math": "0.1.9",
     "dicom-parser": "^1.8.21"

platform/docs/docs/configuration/dataSources/dicom-web.md

@@ -212,7 +212,7 @@ An overview of steps for running OHIF Viewer using a local DCM4CHEE is shown
 below:
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/557570043?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>
+    <iframe src="https://player.vimeo.com/video/843233881?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>
 
 [dcm4chee]: https://github.com/dcm4che/dcm4chee-arc-light

platform/docs/docs/deployment/nginx--image-archive.md

@@ -95,7 +95,7 @@ You can see the overview of the mentioned steps:
 
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/554726410?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>
+    <iframe src="https://player.vimeo.com/video/843233827?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>
 
 <!-- ### Setup

platform/docs/docs/deployment/static-assets.md

@@ -46,7 +46,7 @@ _Advanced_
 
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/551957463?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>
+    <iframe src="https://player.vimeo.com/video/843233793?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>
 
 

platform/docs/docs/development/getting-started.md

@@ -99,7 +99,7 @@ You should see the following output:
 ### 🎉 Celebrate 🎉
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/545988245?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>
+    <iframe src="https://player.vimeo.com/video/843233770?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>
 
 ### Building for Production

platform/docs/docs/development/link.md

@@ -0,0 +1,62 @@
+---
+sidebar_position: 8
+sidebar_label: Local Linking
+---
+
+# Introduction
+
+Local linking allows you to develop and test a library in the context of an application before it's published or when you encounter
+a bug that you suspect is related to a library. With Yarn, this can be achieved through the yarn link command.
+
+The general procedure is as follows:
+
+
+Link the Library:
+
+```sh
+cd /path/to/library
+yarn link
+```
+
+This command will create a symlink in a global directory for the library.
+
+
+Link to the Application:
+
+```sh
+cd /path/to/application
+yarn link "library-name"
+```
+
+Creates a symlink from the global directory to the application's node_modules.
+
+
+# Tutorial for linking Cornerstone3D to OHIF
+
+Below we demonstrate how to link Cornerstone3D to OHIF Viewer. This is useful for testing and debugging Cornerstone3D in the context of OHIF Viewer.
+
+<div style={{padding:"56.25% 0 0 0", position:"relative"}}>
+    <iframe src="https://player.vimeo.com/video/849096279?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>
+
+::tip
+Since `@cornerstonejs/tools` depends on `@cornerstonejs/core`, if you need the changes
+you made in `@cornerstonejs/core` to be reflected in `@cornerstonejs/tools`, you need to
+also link `@cornerstonejs/core` to `@cornerstonejs/tools`.
+
+```sh
+cd /path/to/cornerstonejs-core
+# for the core
+yarn link
+
+cd /path/to/cornerstonejs-tools
+yarn link "@cornerstonejs/core"
+
+# for the tools
+yarn link
+
+# inside OHIF
+cd /path/to/OHIFViewer
+yarn link "@cornerstonejs/core"
+yarn link "@cornerstonejs/tools"
+```

platform/docs/docs/platform/extensions/modules/data-source.md

@@ -61,11 +61,9 @@ You can add your custom datasource by creating the implementation using
 `IWebApiDataSource.create` from `@ohif/core`. This factory function creates a
 new "Web API" data source that fetches data over HTTP.
 
-You need to make sure, you implement the following functions for the data
-source.
-
 ```js title="platform/core/src/DataSources/IWebApiDataSource.js"
 function create({
+  initialize,
   query,
   retrieve,
   store,
@@ -80,7 +78,18 @@ function create({
 ```
 
 You can take a look at `dicomweb` data source implementation to get an idea
-`extensions/default/src/DicomWebDataSource/index.js`
+`extensions/default/src/DicomWebDataSource/index.js` but here here are some
+important api endpoints that you need to implement:
+
+
+- `initialize`: This method is called when the data source is first created in the mode.tsx, it is used to initialize the data source and set the configuration. For instance, `dicomwebDatasource` uses this method to grab the StudyInstanceUID from the URL and set it as the active study, as opposed to `dicomJSONDatasource` which uses url in the browser to fetch the data and store it in a cache
+- `query.studies.search`: This is used in the study panel on the left to fetch the prior studies for the same MRN which is then used to display on the `All` tab. it is also used in the Worklist to show all the studies from the server.
+- `query.series.search`: This is used to fetch the series information for a given study that is expanded in the Worklist.
+- `retrieve.bulkDataURI`: used to render RTSTUCTURESET in the viewport.
+- `retrieve.series.metadata`: It is a crucial end point that is used to fetch series level metadata which for hanging displaySets and displaySet creation.
+- `store.dicom`: If you don't need store functionality, you can skip this method. This is used to store the data in the backend.
+
+
 
 ## Static WADO Client
 

platform/docs/docs/platform/services/ui/ui-modal-service.md

@@ -17,7 +17,7 @@ article: ["Best Practices for Modals / Overlays / Dialog Windows"][ux-article]
 
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/549261451?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>
+    <iframe src="https://player.vimeo.com/video/843233754?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>
 
 ## Interface

platform/docs/docs/platform/services/ui/ui-notification-service.md

@@ -19,7 +19,7 @@ article: ["How To Design Notifications For Better UX"][ux-article]
 
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/549260975?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>
+    <iframe src="https://player.vimeo.com/video/843233715?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>
 
 

platform/docs/docs/resources.md

@@ -43,7 +43,7 @@ The Imaging Network Ontario (ImNO) is an annual symposium that brings together
 medical imaging researchers and scientists from across Canada to share
 knowledge, ideas, and experiences.
 [[Slides]](https://docs.google.com/presentation/d/18XZDon4-Sitc2a70V5sFyhyUVZI_mIgfXHGtdxhZMjE/edit?usp=sharing)
-[[Video]](https://vimeo.com/691134870/ad7d308a44)
+[[Video]](https://vimeo.com/843234581/ad7d308a44)
 
 
 ### [NA-MIC Project Week 36th 2022 - Remote](https://github.com/NA-MIC/ProjectWeek/blob/master/PW36_2022_Virtual/README.md)
@@ -81,7 +81,7 @@ Healthcare Imaging with Cloud Healthcare API
 
 OHIF pitch for Informatics Technology for Cancer Research (ITCR)
 [[Slides]](https://docs.google.com/presentation/d/1MZXnZrVAnjmhVIWqC-aRSvJOoMMRLhLddACdCa1TybM/edit?usp=sharing)
-[[Video]](https://vimeo.com/678769373/625bdb8793)
+[[Video]](https://vimeo.com/843234613/625bdb8793)
 
 ## 2019
 

platform/docs/docs/user-guide/viewer/Language.md

@@ -18,5 +18,5 @@ Summary of language changing usage can be seen below:
 ##  Overview Video
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/559038442?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>
+    <iframe src="https://player.vimeo.com/video/843233906?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>

platform/docs/docs/user-guide/viewer/measurement-panel.md

@@ -62,13 +62,13 @@ For instance, running the Viewer on a local DCM4CHEE:
 
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/557569965?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>
+    <iframe src="https://player.vimeo.com/video/843233857?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>
 
 ## Overview Video
 An overview of measurement drawing and exporting can be seen below:
 
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/545986384?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>
+    <iframe src="https://player.vimeo.com/video/843233565?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>