feat(config): Add activateViewportBeforeInteraction parameter for vie…

…wport interaction customization (OHIF#3847)

.vscode/settings.json

@@ -31,6 +31,6 @@
   "prettier.endOfLine": "lf",
   "workbench.colorCustomizations": {},
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   }
 }

modes/basic-dev-mode/package.json

@@ -37,7 +37,8 @@
     "@ohif/extension-dicom-video": "3.8.0-beta.28"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13"
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
   },
   "devDependencies": {
     "webpack": "^5.50.0",

modes/basic-test-mode/package.json

@@ -42,7 +42,8 @@
     "@ohif/extension-test": "3.8.0-beta.28"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13"
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
   },
   "devDependencies": {
     "webpack": "^5.50.0",

modes/longitudinal/package.json

@@ -43,7 +43,8 @@
     "@ohif/extension-measurement-tracking": "3.8.0-beta.28"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13"
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
   },
   "devDependencies": {
     "webpack": "^5.50.0",

modes/microscopy/package.json

@@ -37,6 +37,7 @@
     "@ohif/extension-dicom-microscopy": "3.8.0-beta.28"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13"
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
   }
 }

modes/segmentation/package.json

@@ -36,7 +36,8 @@
     "@ohif/core": "3.8.0-beta.28"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13"
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",

modes/segmentation/src/index.tsx

@@ -2,7 +2,6 @@ import { hotkeys } from '@ohif/core';
 import { id } from './id';
 import toolbarButtons from './toolbarButtons';
 import initToolGroups from './initToolGroups';
-import i18n from 'i18next';
 
 const ohif = {
   layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
@@ -45,7 +44,7 @@ function modeFactory({ modeConfiguration }) {
      * Mode name, which is displayed in the viewer's UI in the workList, for the
      * user to select the mode.
      */
-    displayName: i18n.t('Modes:Segmentation'),
+    displayName: 'Segmentation',
     /**
      * Runs when the Mode Route is mounted to the DOM. Usually used to initialize
      * Services and other resources.

modes/tmtv/package.json

@@ -41,7 +41,8 @@
     "@ohif/extension-measurement-tracking": "3.8.0-beta.28"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.13"
+    "@babel/runtime": "^7.20.13",
+    "i18next": "^17.0.3"
   },
   "devDependencies": {
     "webpack": "^5.50.0",

platform/app/src/components/ViewportGrid.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useCallback } from 'react';
+import React, {useEffect, useCallback, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import { ServicesManager, Types, MeasurementService } from '@ohif/core';
 import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
 import EmptyViewport from './EmptyViewport';
 import classNames from 'classnames';
+import { useAppConfig } from '@state';
 
 function ViewerViewportGrid(props) {
   const { servicesManager, viewportComponents, dataSource } = props;
@@ -17,6 +18,18 @@ function ViewerViewportGrid(props) {
     servicesManager as ServicesManager
   ).services;
 
+  /**
+   * Determine whether users need to use the tools directly, or whether they need to click once to activate the viewport before using tools.
+   * If 'activateViewportBeforeInteraction' is available in the 'window.config' object, use its value;
+   * otherwise, default to true.
+   * If true, users need to click once to activate the viewport before using the tools.
+   * if false, tools can be used directly.
+   */
+  const activateViewportBeforeInteraction = useMemo(() => {
+    const [appConfig] = useAppConfig();
+    return appConfig?.activateViewportBeforeInteraction ?? true;
+  }, []);
+
   /**
    * This callback runs after the viewports structure has changed in any way.
    * On initial display, that means if it has changed by applying a HangingProtocol,
@@ -311,7 +324,7 @@ function ViewerViewportGrid(props) {
           <div
             data-cy="viewport-pane"
             className={classNames('flex h-full w-full flex-col', {
-              'pointer-events-none': !isActive,
+              'pointer-events-none': !isActive && activateViewportBeforeInteraction,
             })}
           >
             <ViewportComponent

platform/docs/docs/configuration/configurationFiles.md

@@ -185,6 +185,7 @@ if auth headers are used, a preflight request is required.
   load the volume progressively as the data arrives (each webworker has the shared buffer and can write to it). However, there might be certain environments that do not support sharedArrayBuffer. In that case, you can set this flag to false and the viewer will use the regular arrayBuffer which might be slower for large volume loading.
 - `supportsWildcard`: (default to false), if set to true, the datasource will support wildcard matching for patient name and patient id.
 - `allowMultiSelectExport`: (default to false), if set to true, the user will be able to select the datasource to export the report to.
+- `activateViewportBeforeInteraction`: (default to true), if set to false, tools can be used directly without the need to click and activate the viewport.
 - `autoPlayCine`: (default to false), if set to true, data sets with the DICOM frame time tag (i.e. (0018,1063)) will auto play when displayed
 - `dangerouslyUseDynamicConfig`: Dynamic config allows user to pass `configUrl` query string. This allows to load config without recompiling application. If the `configUrl` query string is passed, the worklist and modes will load from the referenced json rather than the default .env config. If there is no `configUrl` path provided, the default behaviour is used and there should not be any deviation from current user experience.<br/>
 Points to consider while using `dangerouslyUseDynamicConfig`:<br/>