TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions 2 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:
AlirezaandJoe Boccanfuso authored and GitHub committed 2025-04-09 16:49:55 -04:00
1 parent c05ec1909f
commit 43bc142439
46 files changed
+504 -467
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

extensions/cornerstone-dicom-pmap/package.json
+2 -2
View File
@@ -46,8 +46,8 @@
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.9.4",
"@cornerstonejs/core": "^3.9.4",
"@cornerstonejs/adapters": "^3.9.5",
"@cornerstonejs/core": "^3.9.5",
"@kitware/vtk.js": "32.12.0",
"react-color": "^2.19.3"
}
extensions/cornerstone-dicom-seg/package.json
+2 -2
View File
@@ -46,8 +46,8 @@
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.9.4",
"@cornerstonejs/core": "^3.9.4",
"@cornerstonejs/adapters": "^3.9.5",
"@cornerstonejs/core": "^3.9.5",
"@kitware/vtk.js": "32.12.0",
"react-color": "^2.19.3"
}
extensions/cornerstone-dicom-sr/package.json
+3 -3
View File
@@ -46,9 +46,9 @@
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.9.4",
"@cornerstonejs/core": "^3.9.4",
"@cornerstonejs/tools": "^3.9.4",
"@cornerstonejs/adapters": "^3.9.5",
"@cornerstonejs/core": "^3.9.5",
"@cornerstonejs/tools": "^3.9.5",
"classnames": "^2.3.2"
}
}
extensions/cornerstone-dynamic-volume/package.json
+2 -2
View File
@@ -42,8 +42,8 @@
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"@cornerstonejs/core": "^3.9.4",
"@cornerstonejs/tools": "^3.9.4",
"@cornerstonejs/core": "^3.9.5",
"@cornerstonejs/tools": "^3.9.5",
"classnames": "^2.3.2"
}
}
extensions/cornerstone-dynamic-volume/src/panels/PanelGenerateImage.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
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 { utilities as csUtils, volumeLoader, eventTarget, Enums, cache } from '@cornerstonejs/core';
import { utilities as cstUtils } from '@cornerstonejs/tools';
extensions/cornerstone/package.json
+7 -7
View File
@@ -38,7 +38,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",
"@ohif/core": "3.10.0-beta.158",
"@ohif/ui": "3.10.0-beta.158",
"dcmjs": "*",
@@ -51,12 +51,12 @@
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^3.9.4",
"@cornerstonejs/ai": "^3.9.4",
"@cornerstonejs/core": "^3.9.4",
"@cornerstonejs/labelmap-interpolation": "^3.9.4",
"@cornerstonejs/polymorphic-segmentation": "^3.9.4",
"@cornerstonejs/tools": "^3.9.4",
"@cornerstonejs/adapters": "^3.9.5",
"@cornerstonejs/ai": "^3.9.5",
"@cornerstonejs/core": "^3.9.5",
"@cornerstonejs/labelmap-interpolation": "^3.9.5",
"@cornerstonejs/polymorphic-segmentation": "^3.9.5",
"@cornerstonejs/tools": "^3.9.5",
"@itk-wasm/morphological-contour-interpolation": "1.1.0",
"@kitware/vtk.js": "32.12.0",
"html2canvas": "^1.4.1",
extensions/cornerstone/src/components/ViewportWindowLevel/ViewportWindowLevel.tsx
-5
View File
@@ -229,11 +229,6 @@ const ViewportWindowLevel = ({
No window level data available
</div>
)}
{isLoading && (
<div className="text-muted-foreground py-2 text-center text-sm">
Loading window level data...
</div>
)}
</PanelSection.Content>
</PanelSection>
);
extensions/cornerstone/src/customizations/segmentationPanelCustomization.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
checked={useCenterAsSegmentIndex}
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 className="flex items-center gap-2">
extensions/default/src/Actions/createReportAsync.tsx
-1
View File
@@ -1,4 +1,3 @@
import React from 'react';
import { DicomMetadataStore } from '@ohif/core';
/**
extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx
+2 -2
View File
@@ -153,7 +153,7 @@ const DicomTagBrowser = ({
</Select>
</div>
{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">
Instance Number ({instanceNumber} of {activeDisplaySet?.images?.length})
</span>
@@ -169,7 +169,7 @@ const DicomTagBrowser = ({
/>
</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">
Search metadata
</span>
extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx
+5 -1
View File
@@ -28,7 +28,9 @@ const useResizablePanels = (
leftPanelClosed,
setLeftPanelClosed,
rightPanelClosed,
setRightPanelClosed
setRightPanelClosed,
hasLeftPanels,
hasRightPanels
) => {
const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = useState(
panelGroupDefinition.left.initialExpandedWidth
@@ -156,6 +158,8 @@ const useResizablePanels = (
rightPanelExpandedWidth,
leftResizablePanelMinimumSize,
rightResizablePanelMinimumSize,
hasLeftPanels,
hasRightPanels,
]);
/**
extensions/default/src/ViewerLayout/index.tsx
+3 -1
View File
@@ -52,7 +52,9 @@ function ViewerLayout({
leftPanelClosed,
setLeftPanelClosed,
rightPanelClosed,
setRightPanelClosed
setRightPanelClosed,
hasLeftPanels,
hasRightPanels
);
const handleMouseEnter = () => {
extensions/default/src/customizations/reportDialogCustomization.tsx
+73 -49
View File
@@ -1,5 +1,5 @@
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 { useSystem } from '@ohif/core';
@@ -71,69 +71,93 @@ function ReportDialog({ dataSources, hide, onSave, onCancel }: ReportDialogProps
const showDataSourceSelect = dataSources?.length > 1;
return (
<div className="text-foreground mt-2 flex min-w-[400px] max-w-md flex-col gap-4">
<div className="flex flex-col gap-3">
<div className="text-foreground flex min-w-[400px] max-w-md flex-col">
<div className="flex flex-col gap-4">
<div className="flex gap-4">
{showDataSourceSelect && (
<div className="mt-1 w-1/2">
<div className="mb-1 pl-1 text-base">Data source</div>
<>
<div className="mt-1 w-1/2">
<div className="mb-1 pl-1 text-base">Data source</div>
<Select
value={selectedDataSource}
onValueChange={setSelectedDataSource}
>
<SelectTrigger>
<SelectValue placeholder="Select a data source" />
</SelectTrigger>
<SelectContent>
{dataSources.map(source => (
<SelectItem
key={source.value}
value={source.value}
>
{source.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className={showDataSourceSelect ? 'mt-1 w-1/2' : 'mt-1 w-full'}>
<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>
</>
)}
</div>
<div className="flex items-end gap-4">
{!showDataSourceSelect && (
<div className="w-1/3">
<div className="mb-1 pl-1 text-base">Series</div>
<Select
value={selectedDataSource}
onValueChange={setSelectedDataSource}
value={selectedSeries}
onValueChange={setSelectedSeries}
>
<SelectTrigger>
<SelectValue placeholder="Select a data source" />
<SelectValue placeholder="Select a series" />
</SelectTrigger>
<SelectContent>
{dataSources.map(source => (
{seriesOptions.map(series => (
<SelectItem
key={source.value}
value={source.value}
key={series.value}
value={series.value}
>
{source.label}
{series.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
<div className={showDataSourceSelect ? 'mt-1 w-1/2' : 'mt-1 w-full'}>
<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>
</div>
<div className={showDataSourceSelect ? 'flex gap-4' : ''}>
<div className="mt-4 w-full">
<InputDialog
value={reportName}
onChange={setReportName}
submitOnEnter
>
<InputDialog.Field>
<InputDialog.Input
placeholder="Report name"
disabled={!!selectedSeries}
/>
</InputDialog.Field>
</InputDialog>
</div>
<InputDialog
value={reportName}
onChange={setReportName}
submitOnEnter
className="flex-1"
>
<InputDialog.Field className="mb-0">
<InputDialog.Input
placeholder="Report name"
disabled={!!selectedSeries}
/>
</InputDialog.Field>
</InputDialog>
</div>
<div className="flex justify-end gap-2">
extensions/measurement-tracking/package.json
+2 -2
View File
@@ -32,8 +32,8 @@
"start": "yarn run dev"
},
"peerDependencies": {
"@cornerstonejs/core": "^3.9.4",
"@cornerstonejs/tools": "^3.9.4",
"@cornerstonejs/core": "^3.9.5",
"@cornerstonejs/tools": "^3.9.5",
"@ohif/core": "3.10.0-beta.158",
"@ohif/extension-cornerstone-dicom-sr": "3.10.0-beta.158",
"@ohif/extension-default": "3.10.0-beta.158",
extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/untrackSeriesModal.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { FooterAction } from '@ohif/ui-next';
export function UntrackSeriesModal({ hide, onConfirm, message }) {
return (
<div className="text-foreground">
<div className="text-foreground text-[13px]">
<div>
<p>{message}</p>
<p className="mt-2">