feat(read-only config): read only ui for SEG/RT/SR (#3586)

extensions/cornerstone-dicom-seg/src/index.tsx

@@ -91,4 +91,4 @@ const extension = {
 };
 
 export default extension;
-export { hydrateSEGDisplaySet };
+export { hydrateSEGDisplaySet };

extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { SegmentationGroupTable } from '@ohif/ui';
 import callInputDialog from './callInputDialog';
-
+import { useAppConfig } from '@state';
 import { useTranslation } from 'react-i18next';
 
 export default function PanelSegmentation({
@@ -10,6 +10,8 @@ export default function PanelSegmentation({
   commandsManager,
 }) {
   const { segmentationService, uiDialogService } = servicesManager.services;
+  const [appConfig] = useAppConfig();
+  const disableEditing = appConfig?.disableEditing;
 
   const { t } = useTranslation('PanelSegmentation');
   const [selectedSegmentationId, setSelectedSegmentationId] = useState(null);
@@ -203,6 +205,7 @@ export default function PanelSegmentation({
           onSegmentationEdit={onSegmentationEdit}
           onSegmentClick={onSegmentClick}
           onSegmentEdit={onSegmentEdit}
+          disableEditing={disableEditing}
           onSegmentColorClick={onSegmentColorClick}
           onSegmentDelete={onSegmentDelete}
           onToggleSegmentVisibility={onToggleSegmentVisibility}
@@ -268,6 +271,7 @@ PanelSegmentation.propTypes = {
   commandsManager: PropTypes.shape({
     runCommand: PropTypes.func.isRequired,
   }),
+  appConfig: PropTypes.object.isRequired,
   servicesManager: PropTypes.shape({
     services: PropTypes.shape({
       segmentationService: PropTypes.shape({

extensions/cornerstone-dicom-sr/src/utils/hydrateStructuredReport.js

@@ -2,6 +2,8 @@ import { utilities, metaData } from '@cornerstonejs/core';
 import OHIF, { DicomMetadataStore } from '@ohif/core';
 import getLabelFromDCMJSImportedToolData from './getLabelFromDCMJSImportedToolData';
 import { adaptersSR } from '@cornerstonejs/adapters';
+import { annotation as CsAnnotation } from '@cornerstonejs/tools';
+const { locking } = CsAnnotation;
 
 const { guid } = OHIF.utils;
 const { MeasurementReport, CORNERSTONE_3D_TAG } = adaptersSR.Cornerstone3D;
@@ -41,9 +43,11 @@ const convertSites = (codingValues, sites) => {
  *
  */
 export default function hydrateStructuredReport(
-  { servicesManager, extensionManager },
+  { servicesManager, extensionManager, appConfig },
   displaySetInstanceUID
 ) {
+  const annotationManager = CsAnnotation.state.getAnnotationManager();
+  const disableEditing = appConfig?.disableEditing;
   const dataSource = extensionManager.getActiveDataSource()[0];
   const {
     measurementService,
@@ -218,7 +222,7 @@ export default function hydrateStructuredReport(
         m => m.annotationType === annotationType
       );
 
-      measurementService.addRawMeasurement(
+      const newAnnotationUID = measurementService.addRawMeasurement(
         source,
         annotationType,
         { annotation },
@@ -226,6 +230,13 @@ export default function hydrateStructuredReport(
         dataSource
       );
 
+      if (disableEditing) {
+        const addedAnnotation = annotationManager.getAnnotation(
+          newAnnotationUID
+        );
+        locking.setAnnotationLocked(addedAnnotation, true);
+      }
+
       if (!imageIds.includes(imageId)) {
         imageIds.push(imageId);
       }

extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx

@@ -7,6 +7,7 @@ import { setTrackingUniqueIdentifiersForElement } from '../tools/modules/dicomSR
 
 import { Icon, Tooltip, useViewportGrid, ViewportActionBar } from '@ohif/ui';
 import hydrateStructuredReport from '../utils/hydrateStructuredReport';
+import { useAppConfig } from '@state';
 
 const { formatDate } = utils;
 
@@ -27,6 +28,8 @@ function OHIFCornerstoneSRViewport(props) {
     extensionManager,
   } = props;
 
+  const [appConfig] = useAppConfig();
+
   const {
     displaySetService,
     cornerstoneViewportService,
@@ -76,7 +79,7 @@ function OHIFCornerstoneSRViewport(props) {
     sendTrackedMeasurementsEvent = (eventName, { displaySetInstanceUID }) => {
       measurementService.clearMeasurements();
       const { SeriesInstanceUIDs } = hydrateStructuredReport(
-        { servicesManager, extensionManager },
+        { servicesManager, extensionManager, appConfig },
         displaySetInstanceUID
       );
       const displaySets = displaySetService.getDisplaySetsForSeries(

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/TrackedMeasurementsContext.tsx

@@ -13,6 +13,7 @@ import promptTrackNewStudy from './promptTrackNewStudy';
 import promptSaveReport from './promptSaveReport';
 import promptHydrateStructuredReport from './promptHydrateStructuredReport';
 import hydrateStructuredReport from './hydrateStructuredReport';
+import { useAppConfig } from '@state';
 
 const TrackedMeasurementsContext = React.createContext();
 TrackedMeasurementsContext.displayName = 'TrackedMeasurementsContext';
@@ -29,6 +30,8 @@ function TrackedMeasurementsContextProvider(
   { servicesManager, commandsManager, extensionManager }, // Bound by consumer
   { children } // Component props
 ) {
+  const [appConfig] = useAppConfig();
+
   const [viewportGrid, viewportGridService] = useViewportGrid();
   const { activeViewportIndex, viewports } = viewportGrid;
   const { measurementService, displaySetService } = servicesManager.services;
@@ -125,27 +128,33 @@ function TrackedMeasurementsContextProvider(
     promptBeginTracking: promptBeginTracking.bind(null, {
       servicesManager,
       extensionManager,
+      appConfig,
     }),
     promptTrackNewSeries: promptTrackNewSeries.bind(null, {
       servicesManager,
       extensionManager,
+      appConfig,
     }),
     promptTrackNewStudy: promptTrackNewStudy.bind(null, {
       servicesManager,
       extensionManager,
+      appConfig,
     }),
     promptSaveReport: promptSaveReport.bind(null, {
       servicesManager,
       commandsManager,
       extensionManager,
+      appConfig,
     }),
     promptHydrateStructuredReport: promptHydrateStructuredReport.bind(null, {
       servicesManager,
       extensionManager,
+      appConfig,
     }),
     hydrateStructuredReport: hydrateStructuredReport.bind(null, {
       servicesManager,
       extensionManager,
+      appConfig,
     }),
   });
 
@@ -245,6 +254,7 @@ TrackedMeasurementsContextProvider.propTypes = {
   servicesManager: PropTypes.object.isRequired,
   commandsManager: PropTypes.object.isRequired,
   extensionManager: PropTypes.object.isRequired,
+  appConfig: PropTypes.object,
 };
 
 export {

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptHydrateStructuredReport.js

@@ -12,7 +12,7 @@ const RESPONSE = {
 };
 
 function promptHydrateStructuredReport(
-  { servicesManager, extensionManager },
+  { servicesManager, extensionManager, appConfig },
   ctx,
   evt
 ) {
@@ -25,7 +25,7 @@ function promptHydrateStructuredReport(
     displaySetInstanceUID
   );
 
-  return new Promise(async function(resolve, reject) {
+  return new Promise(async function (resolve, reject) {
     const promptResult = await _askTrackMeasurements(
       uiViewportDialogService,
       viewportIndex
@@ -37,7 +37,7 @@ function promptHydrateStructuredReport(
     if (promptResult === RESPONSE.HYDRATE_REPORT) {
       console.warn('!! HYDRATING STRUCTURED REPORT');
       const hydrationResult = hydrateStructuredReport(
-        { servicesManager, extensionManager },
+        { servicesManager, extensionManager, appConfig },
         displaySetInstanceUID
       );
 
@@ -57,7 +57,7 @@ function promptHydrateStructuredReport(
 }
 
 function _askTrackMeasurements(uiViewportDialogService, viewportIndex) {
-  return new Promise(function(resolve, reject) {
+  return new Promise(function (resolve, reject) {
     const message =
       'Do you want to continue tracking measurements for this study?';
     const actions = [

platform/core/src/services/MeasurementService/MeasurementService.ts

@@ -484,7 +484,7 @@ class MeasurementService extends PubSubService {
       });
     }
 
-    return newMeasurement.id;
+    return newMeasurement.uid;
   }
 
   /**

platform/docs/docs/configuration/configurationFiles.md

@@ -111,7 +111,8 @@ window.config = ({ servicesManager } = {}) => {
 ## Configuration Options
 
 Here are a list of some options available:
-
+- `disableEditing`:  If true, it disables editing in OHIF, hiding edit buttons in segmentation
+  panel and locking already stored measurements.
 - `maxNumberOfWebWorkers`: The maximum number of web workers to use for
   decoding. Defaults to minimum of `navigator.hardwareConcurrency` and
   what is specified by `maxNumberOfWebWorkers`. Some windows machines require smaller values.
@@ -163,10 +164,10 @@ if auth headers are used, a preflight request is required.
       onModeEnter: ({ servicesManager, extensionManager, commandsManager }) => {
         ...
       },
-      /** 
+      /**
-       * This mode allows its configuration to be overwritten by 
+       * This mode allows its configuration to be overwritten by
        * destructuring the modeConfiguration value from the mode fatory function
-       * at the end of the mode configuration definition. 
+       * at the end of the mode configuration definition.
        */
       ...modeConfiguration,
     };

platform/ui/src/components/SegmentationGroupTable/SegmentationGroup.tsx

@@ -13,11 +13,12 @@ const AddNewSegmentRow = ({
   onSegmentAdd,
   isVisible,
   showAddSegment,
+  disableEditing,
 }) => {
   return (
     <div>
       <div className="flex items-center pl-[29px] bg-black text-primary-active hover:opacity-80 cursor-pointer text-[12px] py-1">
-        {showAddSegment && (
+        {showAddSegment && !disableEditing && (
           <div className="flex items-center" onClick={() => onSegmentAdd()}>
             <Icon name="row-add" className="w-5 h-5" />
             <div className="">Add Segment</div>
@@ -53,6 +54,7 @@ const SegmentGroupHeader = ({
   isActive,
   segmentCount,
   onSegmentationEdit,
+  disableEditing,
   onSegmentationDelete,
 }) => {
   return (
@@ -92,34 +94,36 @@ const SegmentGroupHeader = ({
           e.stopPropagation();
         }}
       >
-        <Dropdown
+        {!disableEditing && (
-          id="segmentation-dropdown"
+          <Dropdown
-          showDropdownIcon={false}
+            id="segmentation-dropdown"
-          list={[
+            showDropdownIcon={false}
-            {
+            list={[
-              title: 'Rename',
+              {
-              onClick: () => {
+                title: 'Rename',
-                onSegmentationEdit(id);
+                onClick: () => {
+                  onSegmentationEdit(id);
+                },
               },
-            },
+              {
-            {
+                title: 'Delete',
-              title: 'Delete',
+                onClick: () => {
-              onClick: () => {
+                  onSegmentationDelete(id);
-                onSegmentationDelete(id);
+                },
               },
-            },
+            ]}
-          ]}
-        >
-          <IconButton
-            id={''}
-            variant="text"
-            color="inherit"
-            size="initial"
-            className="text-primary-active"
           >
-            <Icon name="panel-group-more" />
+            <IconButton
-          </IconButton>
+              id={''}
-        </Dropdown>
+              variant="text"
+              color="inherit"
+              size="initial"
+              className="text-primary-active"
+            >
+              <Icon name="panel-group-more" />
+            </IconButton>
+          </Dropdown>
+        )}
       </div>
     </div>
   );
@@ -134,6 +138,7 @@ const SegmentationGroup = ({
   onSegmentClick,
   isMinimized,
   onSegmentColorClick,
+  disableEditing,
   showAddSegment,
   segments,
   activeSegmentIndex,
@@ -162,6 +167,7 @@ const SegmentationGroup = ({
         segmentCount={segmentCount}
         onSegmentationEdit={onSegmentationEdit}
         onSegmentationDelete={onSegmentationDelete}
+        disableEditing={disableEditing}
       />
       {!isMinimized && (
         <div className="flex flex-col flex-auto min-h-0">
@@ -171,6 +177,7 @@ const SegmentationGroup = ({
             isVisible={isVisible}
             onToggleSegmentationVisibility={onToggleSegmentationVisibility}
             id={id}
+            disableEditing={disableEditing}
             showAddSegment={showAddSegment}
           />
           <div className="flex flex-col min-h-0 ohif-scrollbar overflow-y-hidden">
@@ -197,6 +204,7 @@ const SegmentationGroup = ({
                       isActive={activeSegmentIndex === segmentIndex}
                       isLocked={isLocked}
                       isVisible={isVisible}
+                      disableEditing={disableEditing}
                       onClick={onSegmentClick}
                       onEdit={onSegmentEdit}
                       onDelete={onSegmentDelete}
@@ -241,6 +249,7 @@ SegmentationGroup.propTypes = {
   onSegmentationConfigChange: PropTypes.func.isRequired,
   onSegmentationDelete: PropTypes.func.isRequired,
   onSegmentEdit: PropTypes.func.isRequired,
+  disableEditing: PropTypes.bool,
 };
 
 SegmentationGroup.defaultProps = {

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx

@@ -12,6 +12,7 @@ const SegmentItem = ({
   isVisible,
   color,
   showSegmentDelete,
+  disableEditing,
   isLocked = false,
   onClick,
   onEdit,
@@ -116,17 +117,19 @@ const SegmentItem = ({
           )}
           {isHovering && (
             <div className={classnames('flex items-center')}>
-              <Icon
+              {!disableEditing && (
-                name="row-edit"
+                <Icon
-                className={classnames('w-5 h-5', {
+                  name="row-edit"
-                  'text-white': isLocked,
+                  className={classnames('w-5 h-5', {
-                  'text-primary-light': !isLocked,
+                    'text-white': isLocked,
-                })}
+                    'text-primary-light': !isLocked,
-                onClick={e => {
+                  })}
-                  e.stopPropagation();
+                  onClick={e => {
-                  onEdit(segmentationId, segmentIndex);
+                    e.stopPropagation();
-                }}
+                    onEdit(segmentationId, segmentIndex);
-              />
+                  }}
+                />
+              )}
               {isVisible ? (
                 <Icon
                   name="row-hide"
@@ -224,6 +227,7 @@ SegmentItem.propTypes = {
   segmentIndex: PropTypes.number.isRequired,
   segmentationId: PropTypes.string.isRequired,
   label: PropTypes.string,
+  disableEditing: PropTypes.bool,
   // color as array
   color: PropTypes.array,
   isActive: PropTypes.bool.isRequired,

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx

@@ -15,6 +15,7 @@ const SegmentationGroupTable = ({
   onSegmentClick,
   onSegmentAdd,
   segmentationConfig,
+  disableEditing,
   onSegmentDelete,
   onSegmentEdit,
   onToggleSegmentationVisibility,
@@ -60,6 +61,7 @@ const SegmentationGroupTable = ({
                 id={id}
                 key={id}
                 label={label}
+                disableEditing={disableEditing}
                 isMinimized={isMinimized[id]}
                 segments={segments}
                 showAddSegment={showAddSegment}
@@ -82,7 +84,7 @@ const SegmentationGroupTable = ({
             );
           })}
       </div>
-      {showAddSegmentation && (
+      {showAddSegmentation && !disableEditing && (
         <div
           className="flex items-center cursor-pointer hover:opacity-80 text-primary-active bg-black text-[12px] pl-1 h-[45px]"
           onClick={() => onSegmentationAdd()}
@@ -106,6 +108,7 @@ SegmentationGroupTable.propTypes = {
   onToggleVisibility: PropTypes.func.isRequired,
   onToggleVisibilityAll: PropTypes.func.isRequired,
   segmentationConfig: PropTypes.object,
+  disableEditing: PropTypes.bool,
 };
 
 SegmentationGroupTable.defaultProps = {