Add instructions for using the viewer

docs/visual_dataset/for_users.mdx

@@ -0,0 +1,34 @@
+---
+title: "For Users"
+sidebar_position: 2
+---
+
+Datasets containing volumetric data can be visualized using the "Visual Datasets" feature
+by processing the dataset with the plugin `pl-visual-dataset` as described in the page
+["For Dataset Publishers"](./for_dataset_publishers). In the feed view of *ChRIS_ui*, an
+additional button appears for `pl-visual-dataset` nodes, labeled "View Volumes".
+
+![Screenshot of ChRIS_ui feed view](./feed_view.png)
+
+Clicking the button takes you to "Volume View". You can click the feed icon next to the
+feed title in the top-left to go back.
+
+![Screenshot of Volume View](./volume_view.png)
+
+There is a list of files in the sidebar. Click on a file to open it, or <kbd>CTRL</kbd>/&#8984;-click
+to overlay the file on top of another selected file. When volume labels are loaded, you can see the name
+of the label at the bottom of the screen.
+
+:::tip
+
+Select the T1/T2 MRI volume first, and select the labels last.
+
+:::
+
+With one or more files selected, volume options can be adjusted in the "Volume Options" tab.
+Image contrast can be adjusted by `cal_min` and `cal_max` sliders. There is also a slider for `opacity`.
+
+![Screenshot of Volume Options](./volume_options.png)
+
+On desktop layouts, additional tools and controls can be found in the top right corner.
+For example, select the "Measurement tool" to measure distances.

docusaurus.config.js

@@ -42,6 +42,7 @@ const config = {
   //
   // Documentation: https://docusaurus.io/docs/blog#multiple-blogs
   plugins: [
+    'plugin-image-zoom',
     [
       '@docusaurus/plugin-content-blog',
       {
@@ -205,7 +206,9 @@ const config = {
         searchPagePath: 'search',
 
         //... other Algolia params
-      }
+      },
+      // https://github.com/flexanalytics/plugin-image-zoom
+      // imageZoom: {}
     }),
 };
 

package.json

@@ -24,6 +24,7 @@
     "@docusaurus/preset-classic": "3.1.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.1.0",
+    "plugin-image-zoom": "github:flexanalytics/plugin-image-zoom",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.2.0",
     "react-data-table-component": "^7.6.2",

src/css/custom.css

@@ -65,3 +65,9 @@ h6 {
 [data-theme='dark'] .dark-zoom [data-rmiz-modal-overlay="visible"] {
   background-color: rgba(15, 15, 15, 1);
 }
+
+/* configuration of flexanalytics/plugin-image-zoom */
+
+[data-theme='dark'] .medium-zoom-overlay {
+  background-color: rgba(15, 15, 15, 1) !important;
+}