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

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
-          id="segmentation-dropdown"
-          showDropdownIcon={false}
-          list={[
-            {
-              title: 'Rename',
-              onClick: () => {
-                onSegmentationEdit(id);
+        {!disableEditing && (
+          <Dropdown
+            id="segmentation-dropdown"
+            showDropdownIcon={false}
+            list={[
+              {
+                title: 'Rename',
+                onClick: () => {
+                  onSegmentationEdit(id);
+                },
               },
-            },
-            {
-              title: 'Delete',
-              onClick: () => {
-                onSegmentationDelete(id);
+              {
+                title: 'Delete',
+                onClick: () => {
+                  onSegmentationDelete(id);
+                },
               },
-            },
-          ]}
-        >
-          <IconButton
-            id={''}
-            variant="text"
-            color="inherit"
-            size="initial"
-            className="text-primary-active"
+            ]}
           >
-            <Icon name="panel-group-more" />
-          </IconButton>
-        </Dropdown>
+            <IconButton
+              id={''}
+              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
-                name="row-edit"
-                className={classnames('w-5 h-5', {
-                  'text-white': isLocked,
-                  'text-primary-light': !isLocked,
-                })}
-                onClick={e => {
-                  e.stopPropagation();
-                  onEdit(segmentationId, segmentIndex);
-                }}
-              />
+              {!disableEditing && (
+                <Icon
+                  name="row-edit"
+                  className={classnames('w-5 h-5', {
+                    'text-white': isLocked,
+                    'text-primary-light': !isLocked,
+                  })}
+                  onClick={e => {
+                    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 = {