TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>
This commit is contained in:
Alireza 2025-04-09 16:49:55 -04:00 committed by GitHub
parent c05ec1909f
commit 43bc142439
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
46 changed files with 504 additions and 467 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

626
bun.lock
View File

File diff suppressed because it is too large Load Diff

4
extensions/cornerstone-dicom-pmap/package.json
View File

@ -46,8 +46,8 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13", "@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.9.4", "@cornerstonejs/adapters": "^3.9.5",
"@cornerstonejs/core": "^3.9.4", "@cornerstonejs/core": "^3.9.5",
"@kitware/vtk.js": "32.12.0", "@kitware/vtk.js": "32.12.0",
"react-color": "^2.19.3" "react-color": "^2.19.3"
} }

4
extensions/cornerstone-dicom-seg/package.json
View File

@ -46,8 +46,8 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13", "@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.9.4", "@cornerstonejs/adapters": "^3.9.5",
"@cornerstonejs/core": "^3.9.4", "@cornerstonejs/core": "^3.9.5",
"@kitware/vtk.js": "32.12.0", "@kitware/vtk.js": "32.12.0",
"react-color": "^2.19.3" "react-color": "^2.19.3"
} }

6
extensions/cornerstone-dicom-sr/package.json
View File

@ -46,9 +46,9 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13", "@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.9.4", "@cornerstonejs/adapters": "^3.9.5",
"@cornerstonejs/core": "^3.9.4", "@cornerstonejs/core": "^3.9.5",
"@cornerstonejs/tools": "^3.9.4", "@cornerstonejs/tools": "^3.9.5",
"classnames": "^2.3.2" "classnames": "^2.3.2"
} }
} }

4
extensions/cornerstone-dynamic-volume/package.json
View File

@ -42,8 +42,8 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13", "@babel/runtime": "^7.20.13",
"@cornerstonejs/core": "^3.9.4", "@cornerstonejs/core": "^3.9.5",
"@cornerstonejs/tools": "^3.9.4", "@cornerstonejs/tools": "^3.9.5",
"classnames": "^2.3.2" "classnames": "^2.3.2"
} }
} }

2
extensions/cornerstone-dynamic-volume/src/panels/PanelGenerateImage.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { useCine } from '@ohif/ui'; import { useCine } from '@ohif/ui-next';
import { useViewportGrid } from '@ohif/ui-next'; import { useViewportGrid } from '@ohif/ui-next';
import { utilities as csUtils, volumeLoader, eventTarget, Enums, cache } from '@cornerstonejs/core'; import { utilities as csUtils, volumeLoader, eventTarget, Enums, cache } from '@cornerstonejs/core';
import { utilities as cstUtils } from '@cornerstonejs/tools'; import { utilities as cstUtils } from '@cornerstonejs/tools';

14
extensions/cornerstone/package.json
View File

@ -38,7 +38,7 @@
"@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2", "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
"@cornerstonejs/codec-openjpeg": "^1.2.4", "@cornerstonejs/codec-openjpeg": "^1.2.4",
"@cornerstonejs/codec-openjph": "^2.4.5", "@cornerstonejs/codec-openjph": "^2.4.5",
"@cornerstonejs/dicom-image-loader": "^3.9.4", "@cornerstonejs/dicom-image-loader": "^3.9.5",
"@ohif/core": "3.10.0-beta.158", "@ohif/core": "3.10.0-beta.158",
"@ohif/ui": "3.10.0-beta.158", "@ohif/ui": "3.10.0-beta.158",
"dcmjs": "*", "dcmjs": "*",
@ -51,12 +51,12 @@
}, },
"dependencies": { "dependencies": {
"@babel/runtime": "^7.20.13", "@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.9.4", "@cornerstonejs/adapters": "^3.9.5",
"@cornerstonejs/ai": "^3.9.4", "@cornerstonejs/ai": "^3.9.5",
"@cornerstonejs/core": "^3.9.4", "@cornerstonejs/core": "^3.9.5",
"@cornerstonejs/labelmap-interpolation": "^3.9.4", "@cornerstonejs/labelmap-interpolation": "^3.9.5",
"@cornerstonejs/polymorphic-segmentation": "^3.9.4", "@cornerstonejs/polymorphic-segmentation": "^3.9.5",
"@cornerstonejs/tools": "^3.9.4", "@cornerstonejs/tools": "^3.9.5",
"@itk-wasm/morphological-contour-interpolation": "1.1.0", "@itk-wasm/morphological-contour-interpolation": "1.1.0",
"@kitware/vtk.js": "32.12.0", "@kitware/vtk.js": "32.12.0",
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",

5
extensions/cornerstone/src/components/ViewportWindowLevel/ViewportWindowLevel.tsx
View File

@ -229,11 +229,6 @@ const ViewportWindowLevel = ({
No window level data available No window level data available
</div> </div>
)} )}
{isLoading && (
<div className="text-muted-foreground py-2 text-center text-sm">
Loading window level data...
</div>
)}
</PanelSection.Content> </PanelSection.Content>
</PanelSection> </PanelSection>
); );

2
extensions/cornerstone/src/customizations/segmentationPanelCustomization.tsx
View File

@ -68,7 +68,7 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
checked={useCenterAsSegmentIndex} checked={useCenterAsSegmentIndex}
onCheckedChange={handleUseCenterAsSegmentIndexChange} onCheckedChange={handleUseCenterAsSegmentIndexChange}
/> />
<span className="text-base text-white">Use Center as Segment Index</span> <span className="text-base text-white">Use center as segment index</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">

1
extensions/default/src/Actions/createReportAsync.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { DicomMetadataStore } from '@ohif/core'; import { DicomMetadataStore } from '@ohif/core';
/** /**

4
extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx
View File

@ -153,7 +153,7 @@ const DicomTagBrowser = ({
</Select> </Select>
</div> </div>
{shouldShowInstanceList && ( {shouldShowInstanceList && (
<div className="mx-auto flex w-1/5 flex-col"> <div className="mx-auto mt-0.5 flex w-1/4 flex-col">
<span className="text-muted-foreground flex h-6 items-center text-xs"> <span className="text-muted-foreground flex h-6 items-center text-xs">
Instance Number ({instanceNumber} of {activeDisplaySet?.images?.length}) Instance Number ({instanceNumber} of {activeDisplaySet?.images?.length})
</span> </span>
@ -169,7 +169,7 @@ const DicomTagBrowser = ({
/> />
</div> </div>
)} )}
<div className="ml-auto flex w-1/3 flex-col"> <div className="ml-auto mr-1 flex w-1/3 flex-col">
<span className="text-muted-foreground flex h-6 items-center text-xs"> <span className="text-muted-foreground flex h-6 items-center text-xs">
Search metadata Search metadata
</span> </span>

6
extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx
View File

@ -28,7 +28,9 @@ const useResizablePanels = (
leftPanelClosed, leftPanelClosed,
setLeftPanelClosed, setLeftPanelClosed,
rightPanelClosed, rightPanelClosed,
setRightPanelClosed setRightPanelClosed,
hasLeftPanels,
hasRightPanels
) => { ) => {
const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = useState( const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = useState(
panelGroupDefinition.left.initialExpandedWidth panelGroupDefinition.left.initialExpandedWidth
@ -156,6 +158,8 @@ const useResizablePanels = (
rightPanelExpandedWidth, rightPanelExpandedWidth,
leftResizablePanelMinimumSize, leftResizablePanelMinimumSize,
rightResizablePanelMinimumSize, rightResizablePanelMinimumSize,
hasLeftPanels,
hasRightPanels,
]); ]);
/** /**

4
extensions/default/src/ViewerLayout/index.tsx
View File

@ -52,7 +52,9 @@ function ViewerLayout({
leftPanelClosed, leftPanelClosed,
setLeftPanelClosed, setLeftPanelClosed,
rightPanelClosed, rightPanelClosed,
setRightPanelClosed setRightPanelClosed,
hasLeftPanels,
hasRightPanels
); );
const handleMouseEnter = () => { const handleMouseEnter = () => {

40
extensions/default/src/customizations/reportDialogCustomization.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useMemo, useState } from 'react'; import React, { useEffect, useMemo, useState } from 'react';
import { InputDialog } from '@ohif/ui-next'; import { InputDialog, cn } from '@ohif/ui-next';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@ohif/ui-next'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@ohif/ui-next';
import { useSystem } from '@ohif/core'; import { useSystem } from '@ohif/core';
@ -71,10 +71,11 @@ function ReportDialog({ dataSources, hide, onSave, onCancel }: ReportDialogProps
const showDataSourceSelect = dataSources?.length > 1; const showDataSourceSelect = dataSources?.length > 1;
return ( return (
<div className="text-foreground mt-2 flex min-w-[400px] max-w-md flex-col gap-4"> <div className="text-foreground flex min-w-[400px] max-w-md flex-col">
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-4">
<div className="flex gap-4"> <div className="flex gap-4">
{showDataSourceSelect && ( {showDataSourceSelect && (
<>
<div className="mt-1 w-1/2"> <div className="mt-1 w-1/2">
<div className="mb-1 pl-1 text-base">Data source</div> <div className="mb-1 pl-1 text-base">Data source</div>
<Select <Select
@ -96,7 +97,6 @@ function ReportDialog({ dataSources, hide, onSave, onCancel }: ReportDialogProps
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
)}
<div className={showDataSourceSelect ? 'mt-1 w-1/2' : 'mt-1 w-full'}> <div className={showDataSourceSelect ? 'mt-1 w-1/2' : 'mt-1 w-full'}>
<div className="mb-1 pl-1 text-base">Series</div> <div className="mb-1 pl-1 text-base">Series</div>
<Select <Select
@ -118,15 +118,40 @@ function ReportDialog({ dataSources, hide, onSave, onCancel }: ReportDialogProps
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</>
)}
</div> </div>
<div className={showDataSourceSelect ? 'flex gap-4' : ''}> <div className="flex items-end gap-4">
<div className="mt-4 w-full"> {!showDataSourceSelect && (
<div className="w-1/3">
<div className="mb-1 pl-1 text-base">Series</div>
<Select
value={selectedSeries}
onValueChange={setSelectedSeries}
>
<SelectTrigger>
<SelectValue placeholder="Select a series" />
</SelectTrigger>
<SelectContent>
{seriesOptions.map(series => (
<SelectItem
key={series.value}
value={series.value}
>
{series.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
<InputDialog <InputDialog
value={reportName} value={reportName}
onChange={setReportName} onChange={setReportName}
submitOnEnter submitOnEnter
className="flex-1"
> >
<InputDialog.Field> <InputDialog.Field className="mb-0">
<InputDialog.Input <InputDialog.Input
placeholder="Report name" placeholder="Report name"
disabled={!!selectedSeries} disabled={!!selectedSeries}
@ -134,7 +159,6 @@ function ReportDialog({ dataSources, hide, onSave, onCancel }: ReportDialogProps
</InputDialog.Field> </InputDialog.Field>
</InputDialog> </InputDialog>
</div> </div>
</div>
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<InputDialog> <InputDialog>

4
extensions/measurement-tracking/package.json
View File

@ -32,8 +32,8 @@
"start": "yarn run dev" "start": "yarn run dev"
}, },
"peerDependencies": { "peerDependencies": {
"@cornerstonejs/core": "^3.9.4", "@cornerstonejs/core": "^3.9.5",
"@cornerstonejs/tools": "^3.9.4", "@cornerstonejs/tools": "^3.9.5",
"@ohif/core": "3.10.0-beta.158", "@ohif/core": "3.10.0-beta.158",
"@ohif/extension-cornerstone-dicom-sr": "3.10.0-beta.158", "@ohif/extension-cornerstone-dicom-sr": "3.10.0-beta.158",
"@ohif/extension-default": "3.10.0-beta.158", "@ohif/extension-default": "3.10.0-beta.158",

2
extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/untrackSeriesModal.tsx
View File

@ -3,7 +3,7 @@ import { FooterAction } from '@ohif/ui-next';
export function UntrackSeriesModal({ hide, onConfirm, message }) { export function UntrackSeriesModal({ hide, onConfirm, message }) {
return ( return (
<div className="text-foreground"> <div className="text-foreground text-[13px]">
<div> <div>
<p>{message}</p> <p>{message}</p>
<p className="mt-2"> <p className="mt-2">

2
platform/app/package.json
View File

@ -53,7 +53,7 @@
"@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2", "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
"@cornerstonejs/codec-openjpeg": "^1.2.4", "@cornerstonejs/codec-openjpeg": "^1.2.4",
"@cornerstonejs/codec-openjph": "^2.4.5", "@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", "@emotion/serialize": "^1.1.3",
"@ohif/core": "3.10.0-beta.158", "@ohif/core": "3.10.0-beta.158",
"@ohif/extension-cornerstone": "3.10.0-beta.158", "@ohif/extension-cornerstone": "3.10.0-beta.158",

14
platform/app/public/config/default.js
View File

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

4
platform/core/package.json
View File

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

2
platform/core/src/classes/MetadataProvider.ts
View File

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

0
platform/docs/docs/migration-guide/3p9-to-3p10/General/commands.md → platform/docs/docs/migration-guide/3p9-to-3p10/1-General/commands.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/General/general-m.md → platform/docs/docs/migration-guide/3p9-to-3p10/1-General/general-m.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/General/hotkeys.md → platform/docs/docs/migration-guide/3p9-to-3p10/1-General/hotkeys.md
View File

55
platform/docs/docs/migration-guide/3p9-to-3p10/1-General/routerBaseName.md Normal file
View File

@ -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.

0
platform/docs/docs/migration-guide/3p9-to-3p10/CustomizationService/index.md → platform/docs/docs/migration-guide/3p9-to-3p10/2-CustomizationService/index.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/1-Introduction.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/1-Introduction.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/10-Migration-3p10-Tests.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/10-Migration-3p10-Tests.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/1a-Colors.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/1a-Colors.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/2-Migration-3p10-Icons.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/2-Migration-3p10-Icons.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/2a-Migration-3p10-Button.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/2a-Migration-3p10-Button.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/3-Migration-3p10-Input.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/3-Migration-3p10-Input.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/4-Migration-3p10-Tooltip.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/4-Migration-3p10-Tooltip.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/4a-Migration-3p10-Select.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/4a-Migration-3p10-Select.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/4a-Migration-3p10-Switch.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/4a-Migration-3p10-Switch.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/5-Migration-3p10-Toolbar.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/5-Migration-3p10-Toolbar.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/6-Migration-3p10-SegmentationTable.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/6-Migration-3p10-SegmentationTable.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/7-Migration-3p10-Tours.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/7-Migration-3p10-Tours.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/8-Migration-3p10-DialogService.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/8-Migration-3p10-DialogService.md
View File

0
platform/docs/docs/migration-guide/3p9-to-3p10/UI/9-Migration-3p10-ModalService.md → platform/docs/docs/migration-guide/3p9-to-3p10/3-UI/9-Migration-3p10-ModalService.md
View File

1
platform/docs/src/pages/components-list.tsx
View File

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

4
platform/docs/src/pages/components/NumericMetaShowcase.tsx
View File

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

12
platform/ui-next/src/components/Numeric/Numeric.tsx
View File

@ -381,8 +381,8 @@ function NumberStepper({ className, children, direction, inputWidth }: NumberSte
onChange={handleInputChange} onChange={handleInputChange}
onBlur={handleBlur} onBlur={handleBlur}
className={cn( className={cn(
"h-6 appearance-none border-none p-0 text-center shadow-none focus:border-none focus:outline-none", '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
)} )}
/> />
{children} {children}
@ -410,16 +410,16 @@ function NumberStepper({ className, children, direction, inputWidth }: NumberSte
onBlur={handleBlur} onBlur={handleBlur}
className={cn( className={cn(
'h-6 appearance-none border-none p-0 text-center shadow-none focus:border-none focus:outline-none', '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 <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setSingleValue(singleValue + step)} onClick={() => setSingleValue(singleValue + step)}
disabled={singleValue >= max} 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" /> <ChevronUp className="h-3 w-3" />
</Button> </Button>
@ -428,7 +428,7 @@ function NumberStepper({ className, children, direction, inputWidth }: NumberSte
size="icon" size="icon"
onClick={() => setSingleValue(singleValue - step)} onClick={() => setSingleValue(singleValue - step)}
disabled={singleValue <= min} 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" /> <ChevronDown className="h-3 w-3" />
</Button> </Button>

2
platform/ui-next/src/components/ViewportDialog/ViewportDialog.tsx
View File

@ -91,7 +91,7 @@ const ViewportDialog: React.FC<ViewportDialogProps> = ({
return ( return (
<div <div
ref={notificationRef} 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} data-cy={id}
onKeyDown={onKeyPress} onKeyDown={onKeyPress}
tabIndex={0} tabIndex={0}

4
platform/ui-next/src/index.ts
View File

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

3
platform/ui-next/src/utils/index.ts
View File

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

56
yarn.lock
View File

@ -1393,10 +1393,10 @@
resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9" resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ== integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
"@cornerstonejs/adapters@^3.9.4": "@cornerstonejs/adapters@^3.9.5":
version "3.9.4" version "3.9.5"
resolved "https://registry.yarnpkg.com/@cornerstonejs/adapters/-/adapters-3.9.4.tgz#ce12eeb800618f8a6817c80129ec140f83439990" resolved "https://registry.yarnpkg.com/@cornerstonejs/adapters/-/adapters-3.9.5.tgz#9957a97d22d79747a6deb4f2b4c2a86b8fe48331"
integrity sha512-0kuGAH5dCmxHFr+PjvH/AZJqFdVXXziEZm6Etl4yOOgY9JT81N0PZj5gaFAyvTmxyHb/EWZMhWLyG0D5XGLCmQ== integrity sha512-I8nPFmwNBqBwrH26w06gZfsJaHyZPN4nZC8GO7IerkVSkyYXgFEFC5iRdVuU+Kr94nWm8zPKyLqHx7hAeNudgw==
dependencies: dependencies:
"@babel/runtime-corejs2" "^7.17.8" "@babel/runtime-corejs2" "^7.17.8"
buffer "^6.0.3" buffer "^6.0.3"
@ -1404,10 +1404,10 @@
gl-matrix "^3.4.3" gl-matrix "^3.4.3"
ndarray "^1.0.19" ndarray "^1.0.19"
"@cornerstonejs/ai@^3.9.4": "@cornerstonejs/ai@^3.9.5":
version "3.9.4" version "3.9.5"
resolved "https://registry.yarnpkg.com/@cornerstonejs/ai/-/ai-3.9.4.tgz#88417a7104ab45cfd2598087fc12fcf812b3cb41" resolved "https://registry.yarnpkg.com/@cornerstonejs/ai/-/ai-3.9.5.tgz#40ac983158c325f204f605385d9bd4ad125d5844"
integrity sha512-W1mYcnddsp87Wka8UTzxNwPUF/f7wietvIxyRXQd7nPwR/nDVVbB2dLiUwirihISjumb6PnHjLyHM92on55HNA== integrity sha512-AgVPLVoYJeefPcp6tf5UNfS8qoEJc8VxrqZab6f+LybhSa2se52h+57rCB5Ihd7SziNvWyIdux7v1Iy3GiZm+g==
dependencies: dependencies:
"@babel/runtime-corejs2" "^7.17.8" "@babel/runtime-corejs2" "^7.17.8"
buffer "^6.0.3" buffer "^6.0.3"
@ -1443,20 +1443,20 @@
resolved "https://registry.yarnpkg.com/@cornerstonejs/codec-openjph/-/codec-openjph-2.4.5.tgz#8690b61a86fa53ef38a70eee9d665a79229517c0" resolved "https://registry.yarnpkg.com/@cornerstonejs/codec-openjph/-/codec-openjph-2.4.5.tgz#8690b61a86fa53ef38a70eee9d665a79229517c0"
integrity sha512-MZCUy8VG0VG5Nl1l58+g+kH3LujAzLYTfJqkwpWI2gjSrGXnP6lgwyy4GmPRZWVoS40/B1LDNALK905cNWm+sg== integrity sha512-MZCUy8VG0VG5Nl1l58+g+kH3LujAzLYTfJqkwpWI2gjSrGXnP6lgwyy4GmPRZWVoS40/B1LDNALK905cNWm+sg==
"@cornerstonejs/core@^3.9.4": "@cornerstonejs/core@^3.9.5":
version "3.9.4" version "3.9.5"
resolved "https://registry.yarnpkg.com/@cornerstonejs/core/-/core-3.9.4.tgz#63fe5e2749b2c01b3d427e40345eeb2d8feeedc6" resolved "https://registry.yarnpkg.com/@cornerstonejs/core/-/core-3.9.5.tgz#b42d8b93d2862b9673963f238e56109f299ca11e"
integrity sha512-kHjy2Q0iCNwQQe5FAXMHUWHqkFq3mGQ5Zzl3U9B8rQ3ne+at0wHfAFeJlRbT0uMkU1gw9AOMtb/L4QBWKy4o0A== integrity sha512-EwXeTNSlL7UnXmj8o1DigNZOsVbhtNDKT2Bbi66jhnzZQm+rTPyYeTva+FnnqvpxBb/6QqwDEJ8gwlXwV0Rk5w==
dependencies: dependencies:
"@kitware/vtk.js" "32.12.1" "@kitware/vtk.js" "32.12.1"
comlink "^4.4.1" comlink "^4.4.1"
gl-matrix "^3.4.3" gl-matrix "^3.4.3"
loglevel "^1.9.2" loglevel "^1.9.2"
"@cornerstonejs/dicom-image-loader@^3.9.4": "@cornerstonejs/dicom-image-loader@^3.9.5":
version "3.9.4" version "3.9.5"
resolved "https://registry.yarnpkg.com/@cornerstonejs/dicom-image-loader/-/dicom-image-loader-3.9.4.tgz#5e202e57ddbcf46b946857a2cfa2a703dc9fad9d" resolved "https://registry.yarnpkg.com/@cornerstonejs/dicom-image-loader/-/dicom-image-loader-3.9.5.tgz#4ba9c97e2875fe67c524788833bdf2e38154869d"
integrity sha512-QGWejZ+QFCquoPqmIaHWDusaX89EN24Cih/0WcVcKPs/5VGmo6wbFZzZoKLD4tDGV8HLF8FaGdJy3vTrde9lWg== integrity sha512-g0GZNkZ6PBRCl/dvi6NoQlmpmZhuLLeI4cdiFwV0Ug81HPkHdn8FQaqgy1XPOMknLSL6sJGZsJN2l2nW5COQSA==
dependencies: dependencies:
"@cornerstonejs/codec-charls" "^1.2.3" "@cornerstonejs/codec-charls" "^1.2.3"
"@cornerstonejs/codec-libjpeg-turbo-8bit" "^1.2.2" "@cornerstonejs/codec-libjpeg-turbo-8bit" "^1.2.2"
@ -1468,25 +1468,25 @@
pako "^2.0.4" pako "^2.0.4"
uuid "^9.0.0" uuid "^9.0.0"
"@cornerstonejs/labelmap-interpolation@^3.9.4": "@cornerstonejs/labelmap-interpolation@^3.9.5":
version "3.9.4" version "3.9.5"
resolved "https://registry.yarnpkg.com/@cornerstonejs/labelmap-interpolation/-/labelmap-interpolation-3.9.4.tgz#8f34f7ac32254cb54ddfacdd2687fa51f8e0c1b0" resolved "https://registry.yarnpkg.com/@cornerstonejs/labelmap-interpolation/-/labelmap-interpolation-3.9.5.tgz#159b4a9be8002d996ff8f1a5d39b0a9b90a3bbcc"
integrity sha512-D8T6itPVHF5641axmzkR3b2RjDVXWYNxm3MuQ10LMDZsqwUNL/eeqy2+0TRpPsDL/LSuX2/i+n+udohf0jdaqg== integrity sha512-U7XnaqrrEHGvH3kKdTwGiwLYaydxp5GVo0aqVvZaRDXMXfP3tbOpCfMQcqD+bv4Sh+Rr0719O5aDJ0+ENpA/MA==
dependencies: dependencies:
"@itk-wasm/morphological-contour-interpolation" "1.1.0" "@itk-wasm/morphological-contour-interpolation" "1.1.0"
itk-wasm "1.0.0-b.165" itk-wasm "1.0.0-b.165"
"@cornerstonejs/polymorphic-segmentation@^3.9.4": "@cornerstonejs/polymorphic-segmentation@^3.9.5":
version "3.9.4" version "3.9.5"
resolved "https://registry.yarnpkg.com/@cornerstonejs/polymorphic-segmentation/-/polymorphic-segmentation-3.9.4.tgz#a18bf58e60de1ab6d9f915a2fadc9fde5c022fd9" resolved "https://registry.yarnpkg.com/@cornerstonejs/polymorphic-segmentation/-/polymorphic-segmentation-3.9.5.tgz#d54145b90929f9e9e90f272acf5f416c28ca33e3"
integrity sha512-fXio1P4Ic7ZQmWuTELFPAA8DfG/u6l/0f21UlC6QQNrRX7aYWtOVA6fqQdcdE3bJD+iTeJNikGdEl0j05KqNqQ== integrity sha512-6ucJkb0X5CBBx00g3CzJGuLd6x4T99bPyKXa+y9Bek3jC+RyKI4vySS5RRKtQ4N59yuealZkBvV7dT0FseE8og==
dependencies: dependencies:
"@icr/polyseg-wasm" "0.4.0" "@icr/polyseg-wasm" "0.4.0"
"@cornerstonejs/tools@^3.9.4": "@cornerstonejs/tools@^3.9.5":
version "3.9.4" version "3.9.5"
resolved "https://registry.yarnpkg.com/@cornerstonejs/tools/-/tools-3.9.4.tgz#4a63fc350d8f45db5a2b4fcaea8b76e0893d5083" resolved "https://registry.yarnpkg.com/@cornerstonejs/tools/-/tools-3.9.5.tgz#65fa00b2e20f0442cde7f0383e96253393229bcf"
integrity sha512-ys2blsOp6rWHjGQvMn6x0fh1Qr9Gnr5lRTjhzucAClRgt1WWFW9v9AqwPMXDS/f94m3WFT995LuBOWlxcGUZtQ== integrity sha512-vdPsm4szolXmyBdDNTB1gyRCP5EEicsf+TOsTU5P6QYWR7cB+nyio7GeGK5zFQrUi0hb2a2qkVjjLQLQH9inAw==
dependencies: dependencies:
"@types/offscreencanvas" "2019.7.3" "@types/offscreencanvas" "2019.7.3"
comlink "^4.4.1" comlink "^4.4.1"