fix(bugs): Update dependencies and enhance UI components (#4478)

platform/app/package.json

@@ -53,7 +53,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^2.1.17",
+    "@cornerstonejs/dicom-image-loader": "^2.2.1",
     "@emotion/serialize": "^1.1.3",
     "@ohif/core": "3.9.0-beta.109",
     "@ohif/extension-cornerstone": "3.9.0-beta.109",

platform/core/package.json

@@ -37,7 +37,7 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/dicom-image-loader": "^2.1.17",
+    "@cornerstonejs/dicom-image-loader": "^2.2.1",
     "@ohif/ui": "3.9.0-beta.109",
     "cornerstone-math": "0.1.9",
     "dicom-parser": "^1.8.21"

platform/core/src/services/CustomizationService/CustomizationService.ts

@@ -165,6 +165,10 @@ export default class CustomizationService extends PubSubService {
     this.modeCustomizations.clear();
   }
 
+  public onModeExit(): void {
+    this.onModeEnter();
+  }
+
   public getModeCustomizations(): Map<string, Customization> {
     return this.modeCustomizations;
   }

platform/core/src/utils/generateAcceptHeader.ts

@@ -9,15 +9,20 @@ const generateAcceptHeader = (
   }
 
   let acceptHeader = ['multipart/related'];
+  let hasTransferSyntax = false;
   if (requestTransferSyntaxUID && typeForTS[requestTransferSyntaxUID]) {
     const type = typeForTS[requestTransferSyntaxUID];
     acceptHeader.push('type=' + type);
     acceptHeader.push('transfer-syntax=' + requestTransferSyntaxUID);
+    hasTransferSyntax = true;
   } else {
     acceptHeader.push('type=application/octet-stream');
   }
 
-  acceptHeader.push('transfer-syntax=*');
+  if (!hasTransferSyntax) {
+    acceptHeader.push('transfer-syntax=*');
+  }
+
   if (!omitQuotationForMultipartRequest) {
     //need to add quotation for each mime type of each accept entry
     acceptHeader = acceptHeader.map(mime => {

platform/docs/docs/migration-guide/3p8-to-3p9/0-general.md

@@ -178,6 +178,31 @@ Now:
 
 ---
 
+## SidePanel auto switch if open
+
+In `basic viewer` mode, if the side panel is open and the segmentation panel is active, adding a measurement will automatically switch to the measurement panel. This switch won't occur if the side panel is closed. To enable or disable this feature, adjust your mode configuration accordingly.
+
+```js
+panelService.addActivatePanelTriggers('your.panel.id', [
+{
+  sourcePubSubService: segmentationService,
+  sourceEvents: [segmentationService.EVENTS.SEGMENTATION_ADDED],
+},
+])
+
+panelService.addActivatePanelTriggers('your.panel.id', [
+  {
+    sourcePubSubService: measurementService,
+    sourceEvents: [
+      measurementService.EVENTS.MEASUREMENT_ADDED,
+      measurementService.EVENTS.RAW_MEASUREMENT_ADDED,
+    ],
+  },
+])
+```
+
+---
+
 ## DicomUpload
 
 The DICOM upload functionality in OHIF has been refactored to use the standard customization service pattern. Now you don't need to put

platform/ui-next/package.json

@@ -53,7 +53,6 @@
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-shepherd": "6.1.1",
-    "sanitize-html": "^2.13.1",
     "shepherd.js": "13.0.3",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",

platform/ui-next/src/components/DataRow/DataRow.tsx

@@ -8,7 +8,6 @@ import {
 } from '../../components/DropdownMenu';
 import { Icons } from '../../components/Icons/Icons';
 import { Tooltip, TooltipTrigger, TooltipContent } from '../../components/Tooltip/Tooltip';
-import sanitizeHtml from 'sanitize-html';
 
 /**
  * DataRow is a complex UI component that displays a selectable, interactive row with hierarchical data.
@@ -131,7 +130,7 @@ const DataRow: React.FC<DataRowProps> = ({
           key={`empty-${indent}`}
           className="h-2"
         ></div>
-      ); // Empty row
+      );
     }
     const cleanText = decodeHTML(text);
     return (
@@ -142,11 +141,11 @@ const DataRow: React.FC<DataRowProps> = ({
         {indentation}
         {cleanText.includes(':') ? (
           <>
-            <span className="font-medium">{sanitizeHtml(cleanText.split(':')[0])}:</span>
-            {sanitizeHtml(cleanText.split(':')[1])}
+            <span className="font-medium">{cleanText.split(':')[0]}:</span>
+            {cleanText.split(':')[1]}
           </>
         ) : (
-          <span className="font-medium">{sanitizeHtml(cleanText)}</span>
+          <span className="font-medium">{cleanText}</span>
         )}
       </div>
     );

platform/ui-next/src/components/SegmentationTable/AddSegmentRow.tsx

@@ -51,17 +51,19 @@ export const AddSegmentRow: React.FC<AddSegmentRowProps> = ({ children = null, s
 
   return (
     <div className="bg-primary-dark my-px flex h-7 w-full items-center justify-between rounded pl-0.5 pr-7">
-      {allowAddSegment ? (
-        <Button
-          size="sm"
-          variant="ghost"
-          className="pr pl-0.5"
-          onClick={() => onSegmentAdd(segmentationIdToUse)}
-        >
-          <Icons.Add />
-          Add Segment
-        </Button>
-      ) : null}
+      <div className="flex-1">
+        {allowAddSegment ? (
+          <Button
+            size="sm"
+            variant="ghost"
+            className="pr pl-0.5"
+            onClick={() => onSegmentAdd(segmentationIdToUse)}
+          >
+            <Icons.Add />
+            Add Segment
+          </Button>
+        ) : null}
+      </div>
       <Button
         size="icon"
         variant="ghost"

platform/ui-next/src/components/SegmentationTable/SegmentationSelectorHeader.tsx

@@ -61,7 +61,7 @@ export const SegmentationSelectorHeader: React.FC<{ children?: React.ReactNode }
     info: seg.segmentation.cachedStats?.info,
   }));
 
-  const allowExport = exportOptions.find(
+  const allowExport = exportOptions?.find(
     ({ segmentationId }) => segmentationId === activeSegmentation.id
   )?.isExportable;
 

platform/ui-next/src/components/SidePanel/SidePanel.tsx

@@ -149,6 +149,7 @@ const SidePanel = ({
   activeTabIndex: activeTabIndexProp = null,
   tabs,
   onOpen,
+  onClose,
   expandedWidth = 280,
   onActiveTabIndexChange,
 }) => {
@@ -167,9 +168,11 @@ const SidePanel = ({
       setPanelOpen(panelOpen);
       if (panelOpen && onOpen) {
         onOpen();
+      } else if (onClose && !panelOpen) {
+        onClose();
       }
     },
-    [onOpen]
+    [onOpen, onClose]
   );
 
   const updateActiveTabIndex = useCallback(
@@ -407,6 +410,7 @@ SidePanel.propTypes = {
     ),
   ]),
   onOpen: PropTypes.func,
+  onClose: PropTypes.func,
   onActiveTabIndexChange: PropTypes.func,
   expandedWidth: PropTypes.number,
 };