feat: improve disableEditing flag (#3875)

Co-authored-by: Igor Octaviano <igoroctaviano@gmail.com>

extensions/default/src/CustomizableContextMenu/ContextMenuController.tsx

@@ -1,6 +1,7 @@
 import * as ContextMenuItemsBuilder from './ContextMenuItemsBuilder';
 import ContextMenu from '../../../../platform/ui/src/components/ContextMenu/ContextMenu';
 import { CommandsManager, ServicesManager, Types } from '@ohif/core';
+import { annotation as CsAnnotation } from '@cornerstonejs/tools';
 import { Menu, MenuItem, Point, ContextMenuProps } from './types';
 
 /**
@@ -47,6 +48,18 @@ export default class ContextMenuController {
 
     const { event, subMenu, menuId, menus, selectorProps } = contextMenuProps;
 
+    const annotationManager = CsAnnotation.state.getAnnotationManager();
+    const { locking } = CsAnnotation;
+    const targetAnnotationId = selectorProps?.nearbyToolData?.annotationUID as string;
+    const isLocked = locking.isAnnotationLocked(
+      annotationManager.getAnnotation(targetAnnotationId)
+    );
+
+    if (isLocked) {
+      console.warn('Annotation is locked.');
+      return;
+    }
+
     console.log('Getting items from', menus);
     const items = ContextMenuItemsBuilder.getMenuItems(
       selectorProps || contextMenuProps,

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

@@ -1,13 +1,13 @@
 import { hydrateStructuredReport as baseHydrateStructuredReport } from '@ohif/extension-cornerstone-dicom-sr';
 
-function hydrateStructuredReport({ servicesManager, extensionManager }, ctx, evt) {
+function hydrateStructuredReport({ servicesManager, extensionManager, appConfig }, ctx, evt) {
   const { displaySetService } = servicesManager.services;
   const { viewportId, displaySetInstanceUID } = evt;
   const srDisplaySet = displaySetService.getDisplaySetByUID(displaySetInstanceUID);
 
   return new Promise((resolve, reject) => {
     const hydrationResult = baseHydrateStructuredReport(
-      { servicesManager, extensionManager },
+      { servicesManager, extensionManager, appConfig },
       displaySetInstanceUID
     );
 

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx

@@ -10,6 +10,7 @@ import {
 } from '@ohif/ui';
 import { DicomMetadataStore, utils } from '@ohif/core';
 import { useDebounce } from '@hooks';
+import { useAppConfig } from '@state';
 import ActionButtons from './ActionButtons';
 import { useTrackedMeasurements } from '../../getContextModule';
 import debounce from 'lodash.debounce';
@@ -36,6 +37,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
   );
   const [displayMeasurements, setDisplayMeasurements] = useState([]);
   const measurementsPanelRef = useRef(null);
+  const [appConfig] = useAppConfig();
 
   useEffect(() => {
     const measurements = measurementService.getMeasurements();
@@ -244,6 +246,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
           />
         )}
       </div>
+      {!appConfig?.disableEditing && (
         <div className="flex justify-center p-4">
           <ActionButtons
             onExportClick={exportReport}
@@ -258,6 +261,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
             }
           />
         </div>
+      )}
     </>
   );
 }

platform/ui/src/components/MeasurementTable/MeasurementItem.tsx

@@ -4,7 +4,17 @@ import classnames from 'classnames';
 
 import Icon from '../Icon';
 
-const MeasurementItem = ({ uid, index, label, displayText, isActive, onClick, onEdit, item }) => {
+const MeasurementItem = ({
+  uid,
+  index,
+  label,
+  displayText,
+  isActive,
+  isLocked,
+  onClick,
+  onEdit,
+  item,
+}) => {
   const [isHovering, setIsHovering] = useState(false);
 
   const onEditHandler = event => {
@@ -49,6 +59,7 @@ const MeasurementItem = ({ uid, index, label, displayText, isActive, onClick, on
             dangerouslySetInnerHTML={{ __html: line }}
           ></span>
         ))}
+        {!isLocked && (
           <Icon
             className={classnames(
               'absolute w-4 cursor-pointer text-white transition duration-300',
@@ -63,6 +74,7 @@ const MeasurementItem = ({ uid, index, label, displayText, isActive, onClick, on
             }}
             onClick={onEditHandler}
           />
+        )}
       </div>
     </div>
   );

platform/ui/src/components/MeasurementTable/MeasurementTable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { ServicesManager } from '@ohif/core';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { annotation as CsAnnotation } from '@cornerstonejs/tools';
 
 import MeasurementItem from './MeasurementItem';
 
@@ -16,6 +17,8 @@ const MeasurementTable = ({ data, title, onClick, onEdit, servicesManager }) =>
     contentProps: {},
   });
   const CustomMeasurementItem = itemCustomization.content;
+  const annotationManager = CsAnnotation.state.getAnnotationManager();
+  const { locking } = CsAnnotation;
 
   return (
     <div>
@@ -25,19 +28,25 @@ const MeasurementTable = ({ data, title, onClick, onEdit, servicesManager }) =>
       </div>
       <div className="ohif-scrollbar max-h-112 overflow-hidden">
         {data.length !== 0 &&
-          data.map((measurementItem, index) => (
+          data.map((measurementItem, index) => {
+            const isLocked = locking.isAnnotationLocked(
+              annotationManager.getAnnotation(measurementItem.uid)
+            );
+            return (
               <CustomMeasurementItem
                 key={measurementItem.uid}
                 uid={measurementItem.uid}
                 index={index + 1}
                 label={measurementItem.label}
                 isActive={measurementItem.isActive}
+                isLocked={isLocked}
                 displayText={measurementItem.displayText}
                 item={measurementItem}
                 onClick={onClick}
                 onEdit={onEdit}
               />
-          ))}
+            );
+          })}
         {data.length === 0 && (
           <div className="group flex cursor-default border border-transparent bg-black transition duration-300">
             <div className="bg-primary-dark text-primary-light group-hover:bg-secondary-main w-6 py-1 text-center text-base transition duration-300"></div>