fix(ui): Enhance UI Components and Update CornerstoneJS Dependencies and resizable panels (#4938)

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>

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": "^3.9.4",
+    "@cornerstonejs/dicom-image-loader": "^3.9.5",
     "@emotion/serialize": "^1.1.3",
     "@ohif/core": "3.10.0-beta.158",
     "@ohif/extension-cornerstone": "3.10.0-beta.158",

platform/app/public/config/default.js

@@ -276,7 +276,6 @@ window.config = {
     console.warn('test, navigate to https://ohif.org/');
   },
   // whiteLabeling: {
-  //   /* Optional: Should return a React component to be rendered in the "Logo" section of the application's Top Navigation bar */
   //   createLogoComponentFn: function (React) {
   //     return React.createElement(
   //       'a',
@@ -284,14 +283,13 @@ window.config = {
   //         target: '_self',
   //         rel: 'noopener noreferrer',
   //         className: 'text-purple-600 line-through',
-  //         href: '/',
+  //         href: '_X___IDC__LOGO__LINK___Y_',
   //       },
-  //       React.createElement('img',
-  //         {
-  //           src: './assets/customLogo.svg',
-  //           className: 'w-8 h-8',
-  //         }
-  //       ))
+  //       React.createElement('img', {
+  //         src: './Logo.svg',
+  //         className: 'w-14 h-14',
+  //       })
+  //     );
   //   },
   // },
 };

platform/core/package.json

@@ -37,8 +37,8 @@
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.4",
     "@cornerstonejs/codec-openjph": "^2.4.5",
-    "@cornerstonejs/core": "^3.9.4",
-    "@cornerstonejs/dicom-image-loader": "^3.9.4",
+    "@cornerstonejs/core": "^3.9.5",
+    "@cornerstonejs/dicom-image-loader": "^3.9.5",
     "@ohif/ui": "3.10.0-beta.158",
     "cornerstone-math": "0.1.9",
     "dicom-parser": "^1.8.21"

platform/core/src/classes/MetadataProvider.ts

@@ -518,7 +518,7 @@ const WADO_IMAGE_LOADER = {
     // Fallback for DX images.
     // TODO: We should use the rest of the results of this function
     // to update the UI somehow
-    const { PixelSpacing, type } = getPixelSpacingInformation(instance);
+    const { PixelSpacing, type } = getPixelSpacingInformation(instance) || {};
 
     let rowPixelSpacing;
     let columnPixelSpacing;

platform/docs/docs/migration-guide/3p9-to-3p10/1-General/routerBaseName.md

@@ -0,0 +1,55 @@
+---
+title: routerBaseName
+---
+
+
+## Migration Guide: Router Configuration (`routerBasename` and `PUBLIC_URL`)
+
+
+**Key Changes:**
+
+*   **`routerBasename` Default Value:** The recommended default value for `routerBasename` in the configuration file (`window.config`) has changed from `'/'` to `null`.
+*   **New Default Behavior:** If `routerBasename` is set to `null` (or is not defined) in the configuration, the application's base path will now automatically default to the value determined by `PUBLIC_URL`.
+*   **Clarified Roles:**
+    *   `routerBasename`: Explicitly defines the base path for the application's routes (e.g., `/viewer`). If `null`, it defaults to `PUBLIC_URL`.
+    *   `PUBLIC_URL`: Primarily defines the URL prefix from which static assets (like JavaScript files, CSS, images) are loaded. It defaults to `/` if not set.
+
+
+:::info
+see the comprehensive guide [here](/deployment/custom-url-access)
+:::
+
+**Migration Steps:**
+
+1.  **Review `routerBasename` Configuration:**
+    Locate the `routerBasename` setting within your application configuration file (typically found in `platform/app/public/config/*.js`).
+
+2.  **Update `routerBasename` Based on Hosting Scenario:**
+
+    *   **Scenario A: Hosting at the Root (`/`)**
+        If your application is served from the root domain (e.g., `https://example.com/`), it's recommended to update `routerBasename` to `null`. This aligns the routing base with the default asset loading path (`PUBLIC_URL` which defaults to `/`).
+
+        *Example Diff:*
+        ```diff
+        window.config = {
+        -  routerBasename: '/',
+        +  routerBasename: null,
+           // ... other config options
+           showStudyList: true,
+           dataSources: [ /* ... */ ],
+        ```
+        *Explanation:* Setting `routerBasename: null` leverages the new default behavior. The router will use `/` as its base because `PUBLIC_URL` defaults to `/`.
+
+    *   **Scenario B: Hosting at a Subpath (e.g., `/viewer/`)**
+        If your application is served from a subpath (e.g., `https://example.com/viewer/`), you should ensure `routerBasename` is explicitly set to that path.
+
+        *Example (No Change Needed if Already Correct):*
+        ```diff
+        window.config = {
+        // No change needed if already set correctly for subpath hosting
+           routerBasename: '/viewer',
+           // ... other config options
+           showStudyList: true,
+           dataSources: [ /* ... */ ],
+        ```
+        *Explanation:* Explicitly setting `routerBasename` ensures the application's internal routing works correctly under the `/viewer/` path.

platform/docs/src/pages/components-list.tsx

@@ -34,7 +34,6 @@ export default function ComponentsList() {
               <h1 className="text-foreground mb-3 text-5xl">Components</h1>
             </div>
             <TabsShowcase />
-
             <ButtonShowcase />
             <CheckboxShowcase />
             <DataRowShowcase />

platform/docs/src/pages/components/NumericMetaShowcase.tsx

@@ -176,12 +176,12 @@ const [dimensionGroupNumber, setDimensionGroupNumber] = useState(1);
             mode="stepper"
             min={-10}
             max={10}
-            step={0.1}
+            step={1}
             defaultValue={0}
           >
             <div className="flex items-center space-x-2">
               <Numeric.NumberStepper
-                className="w-[65px]"
+                className="w-[53px]"
                 direction="vertical"
               />
               <Numeric.Label>Zoom</Numeric.Label>

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

@@ -381,8 +381,8 @@ function NumberStepper({ className, children, direction, inputWidth }: NumberSte
           onChange={handleInputChange}
           onBlur={handleBlur}
           className={cn(
-            "h-6 appearance-none border-none p-0 text-center shadow-none focus:border-none focus:outline-none",
-            inputWidth ? inputWidth : "w-12 max-w-12"
+            'h-6 appearance-none border-none p-0 text-center shadow-none focus:border-none focus:outline-none',
+            inputWidth
           )}
         />
         {children}
@@ -410,16 +410,16 @@ function NumberStepper({ className, children, direction, inputWidth }: NumberSte
         onBlur={handleBlur}
         className={cn(
           'h-6 appearance-none border-none p-0 text-center shadow-none focus:border-none focus:outline-none',
-          inputWidth ? inputWidth : "w-12 max-w-12"
+          inputWidth ? inputWidth : 'max-w-12 min-w-0'
         )}
       />
-      <div className="ml-1 flex flex-col">
+      <div className="ml-1 flex flex-shrink-0 flex-col">
         <Button
           variant="ghost"
           size="icon"
           onClick={() => setSingleValue(singleValue + step)}
           disabled={singleValue >= max}
-          className="text-primary h-3 w-5 pr-px"
+          className="text-primary h-3 w-5"
         >
           <ChevronUp className="h-3 w-3" />
         </Button>
@@ -428,7 +428,7 @@ function NumberStepper({ className, children, direction, inputWidth }: NumberSte
           size="icon"
           onClick={() => setSingleValue(singleValue - step)}
           disabled={singleValue <= min}
-          className="text-primary h-3 w-5 pr-px"
+          className="text-primary h-3 w-5"
         >
           <ChevronDown className="h-3 w-3" />
         </Button>
@@ -483,4 +483,4 @@ export const Numeric = {
   NumberStepper,
 };
 
-export default Numeric;
+export default Numeric;

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

@@ -91,7 +91,7 @@ const ViewportDialog: React.FC<ViewportDialogProps> = ({
   return (
     <div
       ref={notificationRef}
-      className="border-input bg-muted mx-2 mt-2 flex flex-col rounded-md border p-2 outline-none"
+      className="border-input bg-muted mx-1.5 mt-2 flex flex-col rounded-md border p-2 outline-none"
       data-cy={id}
       onKeyDown={onKeyPress}
       tabIndex={0}

platform/ui-next/src/index.ts

@@ -1,6 +1,6 @@
 import * as utils from './utils';
+import { cn } from './utils';
 export * from './components';
 export * from './contextProviders';
 export * as Types from './types';
-
-export { utils };
+export { utils, cn };

platform/ui-next/src/utils/index.ts

@@ -1,4 +1,5 @@
 import { getToggledClassName } from './getToggledClassName';
 import roundNumber from './roundNumber';
+import { cn } from '../lib/utils';
 
-export { getToggledClassName, roundNumber };
+export { getToggledClassName, roundNumber, cn };