dev(yarn link): make it possible to yarn link easily with cornerstone3D and update docs (#3563)

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,7 +62,7 @@ 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
@@ -70,5 +70,5 @@ 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>

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

@@ -45,7 +45,7 @@ Below, you can see different icons that appear for a tracked vs. untracked serie
 <!-- trackedMeasurements -->
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/570278865?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/843234022?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>
 
 
@@ -55,7 +55,7 @@ Below, you can see different icons that appear for a tracked vs. untracked serie
 <!-- untrackedMeasurements -->
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/570280036?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/843234086?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>
 
 
@@ -84,7 +84,7 @@ The full workflow for saving measurements to SR and loading SR into the viewer i
 <!-- SR Restore and Yes -->
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/570278845?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/843233998?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>
 
 <br></br>
@@ -93,13 +93,13 @@ The full workflow for saving measurements to SR and loading SR into the viewer i
 <!-- SR Restore and No -->
 <!-- SR Export and measurement restore -->
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/570278814?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/843233976?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>
 
 <br></br>
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/570278799?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/843233958?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>
 
 ### Loading DICOM SR into an Already Tracked Series
@@ -120,5 +120,5 @@ you cannot edit the DICOM SR measurement.
 
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/570278726?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/843233929?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/toolbar.md

@@ -81,5 +81,5 @@ An overview of tool usage can been seen below:
 
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/545989422?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/843233686?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/viewport.md

@@ -35,5 +35,5 @@ An overview of viewport layout change, and manipulation can be seen below:
 
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
-    <iframe src="https://player.vimeo.com/video/545995881?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/843233651?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/docusaurus.config.js

@@ -255,13 +255,11 @@ module.exports = {
         disableSwitch: false,
         // respectPrefersColorScheme: true,
       },
-      /*
-    announcementBar: {
-      id: 'supportus',
-      content:
-        '⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/OHIF/Viewers">GitHub</a>! ⭐️',
-    },
-     */
+      announcementBar: {
+        id: 'healthimaging',
+        content:
+          '🚀 AWS has announced the general availability of <a target="_blank" rel="noopener noreferrer" href=" https://aws.amazon.com/about-aws/whats-new/2023/07/general-availability-aws-healthimaging/">HealthImaging!</a> Easily connect your OHIF to it. Learn more <a target="_blank" rel="noopener noreferrer" href="https://github.com/RadicalImaging/ohif-aws-healthimaging">Here!</a>! 🌟',
+      },
       prism: {
         theme: require('prism-react-renderer/themes/github'),
         darkTheme: require('prism-react-renderer/themes/dracula'),

platform/docs/src/css/custom.css

@@ -36,6 +36,8 @@
   --ifm-color-warning: #e9e489;
   --ifm-alert-color: #333333;
   --ohif-color-border: #7bb2ce;
+  --site-primary-hue-saturation: 167 68%;
+  --site-primary-hue-saturation-light: 167 56%; /* do we really need this extra one? */
 }
 
 html[data-theme='dark'] .header-github-link:before {
@@ -286,3 +288,20 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   @apply bg-red-300 text-red-500;
   @apply dark:bg-blue-900 dark:text-blue-100;
 }
+
+div[class^='announcementBar_'] {
+  --site-announcement-bar-stripe-color1: hsl(
+    var(--site-primary-hue-saturation) 85%
+  );
+  --site-announcement-bar-stripe-color2: hsl(
+    var(--site-primary-hue-saturation) 95%
+  );
+  background: repeating-linear-gradient(
+    35deg,
+    var(--site-announcement-bar-stripe-color1),
+    var(--site-announcement-bar-stripe-color1) 20px,
+    var(--site-announcement-bar-stripe-color2) 10px,
+    var(--site-announcement-bar-stripe-color2) 40px
+  );
+  font-weight: 700;
+}