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

fix(new layout): address black screen bugs (#4008)

Browse Source
This commit is contained in:
Alireza 2024-03-28 16:45:11 -04:00 committed by GitHub
parent aac3546bed
commit 158a181670
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 100 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

10
extensions/cornerstone/package.json
View File

@ -38,7 +38,7 @@
"@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
"@cornerstonejs/codec-openjpeg": "^1.2.2",
"@cornerstonejs/codec-openjph": "^2.4.2",
"@cornerstonejs/dicom-image-loader": "^1.66.7",
"@cornerstonejs/dicom-image-loader": "^1.67.0",
"@icr/polyseg-wasm": "^0.4.0",
"@ohif/core": "3.8.0-beta.65",
"@ohif/ui": "3.8.0-beta.65",
@ -55,10 +55,10 @@
},
"dependencies": {
"@babel/runtime": "^7.20.13",
"@cornerstonejs/adapters": "^1.66.7",
"@cornerstonejs/core": "^1.66.7",
"@cornerstonejs/streaming-image-volume-loader": "^1.66.7",
"@cornerstonejs/tools": "^1.66.7",
"@cornerstonejs/adapters": "^1.67.0",
"@cornerstonejs/core": "^1.67.0",
"@cornerstonejs/streaming-image-volume-loader": "^1.67.0",
"@cornerstonejs/tools": "^1.67.0",
"@kitware/vtk.js": "29.7.0",
"html2canvas": "^1.4.1",
"lodash.debounce": "4.0.8",

3
extensions/cornerstone/src/commandsModule.ts
View File

@ -745,9 +745,6 @@ function commandsModule({
setViewportColormap: {
commandFn: actions.setViewportColormap,
},
toggleImageSliceSync: {
commandFn: actions.toggleImageSliceSync,
},
setSourceViewportForReferenceLinesTool: {
commandFn: actions.setSourceViewportForReferenceLinesTool,
},

26
extensions/cornerstone/src/services/ViewportService/CornerstoneViewportService.ts
View File

@ -696,20 +696,24 @@ class CornerstoneViewportService extends PubSubService implements IViewportServi
this.viewportsDisplaySets.set(viewport.id, displaySetInstanceUIDs);
if (hangingProtocolService.getShouldPerformCustomImageLoad()) {
// delegate the volume loading to the hanging protocol service if it has a custom image load strategy
return hangingProtocolService.runImageLoadStrategy({
viewportId: viewport.id,
volumeInputArray,
const volumesNotLoaded = volumeToLoad.filter(volume => !volume.loadStatus.loaded);
if (volumesNotLoaded.length) {
if (hangingProtocolService.getShouldPerformCustomImageLoad()) {
// delegate the volume loading to the hanging protocol service if it has a custom image load strategy
return hangingProtocolService.runImageLoadStrategy({
viewportId: viewport.id,
volumeInputArray,
});
}
volumesNotLoaded.forEach(volume => {
if (!volume.loadStatus.loading) {
volume.load();
}
});
}
volumeToLoad.forEach(volume => {
if (!volume.loadStatus.loaded && !volume.loadStatus.loading) {
volume.load();
}
});
// This returns the async continuation only
return this.setVolumesForViewport(viewport, volumeInputArray, presentations);
}

6
extensions/cornerstone/src/utils/CornerstoneViewportDownloadForm.tsx
View File

@ -1,11 +1,11 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect } from 'react';
import html2canvas from 'html2canvas';
import {
Enums,
getEnabledElement,
getOrCreateCanvas,
StackViewport,
VolumeViewport,
BaseVolumeViewport,
} from '@cornerstonejs/core';
import { ToolGroupManager } from '@cornerstonejs/tools';
import PropTypes from 'prop-types';
@ -154,7 +154,7 @@ const CornerstoneViewportDownloadForm = ({
console.warn('Unable to set properties', e);
}
});
} else if (downloadViewport instanceof VolumeViewport) {
} else if (downloadViewport instanceof BaseVolumeViewport) {
const actors = viewport.getActors();
// downloadViewport.setActors(actors);
actors.forEach(actor => {

55
extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
View File

@ -52,45 +52,28 @@ const generateAdvancedPresets = hangingProtocolService => {
.filter(preset => preset !== null);
};
function ToolbarLayoutSelectorWithServices({ servicesManager, ...props }) {
const { toolbarService } = servicesManager.services;
function ToolbarLayoutSelectorWithServices({ commandsManager, servicesManager, ...props }) {
const [isDisabled, setIsDisabled] = useState(false);
const handleMouseEnter = () => {
setIsDisabled(false);
};
const onSelection = useCallback(
props => {
toolbarService.recordInteraction({
interactionType: 'action',
commands: [
{
commandName: 'setViewportGridLayout',
commandOptions: { ...props },
},
],
});
setIsDisabled(true);
},
[toolbarService]
);
const onSelectionPreset = useCallback(
props => {
toolbarService.recordInteraction({
interactionType: 'action',
commands: [
{
commandName: 'setHangingProtocol',
commandOptions: { ...props },
},
],
});
setIsDisabled(true);
},
[toolbarService]
);
const onSelection = useCallback(props => {
commandsManager.run({
commandName: 'setViewportGridLayout',
commandOptions: { ...props },
});
setIsDisabled(true);
}, []);
const onSelectionPreset = useCallback(props => {
commandsManager.run({
commandName: 'setHangingProtocol',
commandOptions: { ...props },
});
setIsDisabled(true);
}, []);
return (
<div onMouseEnter={handleMouseEnter}>
@ -151,7 +134,7 @@ function LayoutSelector({
disableToolTip={tooltipDisabled}
dropdownContent={
DropdownContent !== null && (
<div className="flex">
<div className="flex ">
<div className="bg-secondary-dark flex flex-col gap-2.5 p-2">
<div className="text-aqua-pale text-xs">Common</div>
@ -159,7 +142,7 @@ function LayoutSelector({
{commonPresets.map((preset, index) => (
<LayoutPreset
key={index}
classNames="hover:bg-primary-dark group p-1"
classNames="hover:bg-primary-dark group p-1 cursor-pointer"
icon={preset.icon}
commandOptions={preset.commandOptions}
onSelection={onSelection}
@ -175,7 +158,7 @@ function LayoutSelector({
{advancedPresets.map((preset, index) => (
<LayoutPreset
key={index + commonPresets.length}
classNames="hover:bg-primary-dark group flex gap-2 p-1"
classNames="hover:bg-primary-dark group flex gap-2 p-1 cursor-pointer"
icon={preset.icon}
title={preset.title}
commandOptions={preset.commandOptions}

7
extensions/default/src/findViewportsByPosition.ts
View File

@ -44,6 +44,13 @@ export const findOrCreateViewport = (
},
};
}
// and lastly if there is no default viewport, then we see if we can grab the
// viewportsByPosition at the position index and use that
// const candidate = Object.values(viewportsByPosition)[position];
// // if it has something to display, then we can use it
// return candidate?.displaySetInstanceUIDs ? candidate : {};
return {};
};

3
extensions/default/src/getToolbarModule.tsx
View File

@ -29,7 +29,8 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
},
{
name: 'ohif.layoutSelector',
defaultComponent: ToolbarLayoutSelectorWithServices,
defaultComponent: props =>
ToolbarLayoutSelectorWithServices({ ...props, commandsManager, servicesManager }),
},
{
name: 'ohif.buttonGroup',

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

@ -32,8 +32,8 @@
"start": "yarn run dev"
},
"peerDependencies": {
"@cornerstonejs/core": "^1.66.7",
"@cornerstonejs/tools": "^1.66.7",
"@cornerstonejs/core": "^1.67.0",
"@cornerstonejs/tools": "^1.67.0",
"@ohif/core": "3.8.0-beta.65",
"@ohif/extension-cornerstone-dicom-sr": "3.8.0-beta.65",
"@ohif/ui": "3.8.0-beta.65",

16
modes/basic-test-mode/src/toolbarButtons.ts
View File

@ -179,15 +179,7 @@ const toolbarButtons: Button[] = [
type: 'tool',
icon: 'tool-3d-rotate',
label: '3D Rotate',
commands: [
{
commandName: 'setToolActive',
commandOptions: {
toolName: 'TrackBallRotate',
},
context: 'CORNERSTONE',
},
],
commands: setToolActiveToolbar,
},
},
{
@ -196,11 +188,7 @@ const toolbarButtons: Button[] = [
props: {
icon: 'tool-capture',
label: 'Capture',
commands: [
{
commandName: 'showDownloadViewportModal',
},
],
commands: 'showDownloadViewportModal',
evaluate: 'evaluate.action',
},
},

11
modes/longitudinal/src/toolbarButtons.ts
View File

@ -169,11 +169,7 @@ const toolbarButtons: Button[] = [
props: {
icon: 'tool-capture',
label: 'Capture',
commands: [
{
commandName: 'showDownloadViewportModal',
},
],
commands: 'showDownloadViewportModal',
evaluate: 'evaluate.action',
},
},
@ -184,11 +180,6 @@ const toolbarButtons: Button[] = [
rows: 3,
columns: 4,
evaluate: 'evaluate.action',
commands: [
{
commandName: 'setViewportGridLayout',
},
],
},
},
{

2
platform/app/package.json
View File

@ -53,7 +53,7 @@
"@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
"@cornerstonejs/codec-openjpeg": "^1.2.2",
"@cornerstonejs/codec-openjph": "^2.4.5",
"@cornerstonejs/dicom-image-loader": "^1.66.7",
"@cornerstonejs/dicom-image-loader": "^1.67.0",
"@emotion/serialize": "^1.1.3",
"@ohif/core": "3.8.0-beta.65",
"@ohif/extension-cornerstone": "3.8.0-beta.65",

2
platform/core/package.json
View File

@ -37,7 +37,7 @@
"@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
"@cornerstonejs/codec-openjpeg": "^1.2.2",
"@cornerstonejs/codec-openjph": "^2.4.2",
"@cornerstonejs/dicom-image-loader": "^1.66.7",
"@cornerstonejs/dicom-image-loader": "^1.67.0",
"@ohif/ui": "3.8.0-beta.65",
"cornerstone-math": "0.1.9",
"dicom-parser": "^1.8.21"

2
platform/ui/src/components/SplitButton/SplitButton.tsx
View File

@ -9,7 +9,7 @@ import Tooltip from '../Tooltip';
import ListMenu from '../ListMenu';
const baseClasses = {
Button: 'flex items-center rounded-md border-transparent cursor-pointer group/button',
Button: 'flex items-center rounded-md border-transparent group/button',
Primary:
'h-full border-l-2 border-t-2 border-b-2 rounded-tl-md rounded-bl-md group/primary !pl-2 !py-2',
Secondary:

6
platform/ui/src/components/ToolbarButton/ToolbarButton.tsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import IconButton from '../IconButton';
import Icon from '../Icon';
@ -14,6 +15,7 @@ const ToolbarButton = ({
dropdownContent,
//
className,
disabled,
size,
toolTipClassName,
disableToolTip = false,
@ -36,13 +38,14 @@ const ToolbarButton = ({
<Tooltip
isSticky={shouldShowDropdown}
content={shouldShowDropdown ? dropdownContent : label}
secondaryContent={disabled ? 'Not available on the current viewport' : null}
tight={shouldShowDropdown}
className={toolTipClassNameToUse}
isDisabled={disableToolTip}
>
<IconButton
size={sizeToUse}
className={className}
className={classNames(className, disabled ? '!cursor-default' : '')}
onClick={() => {
onInteraction({
itemId: id,
@ -78,6 +81,7 @@ ToolbarButton.propTypes = {
size: PropTypes.string,
toolTipClassName: PropTypes.string,
disableToolTip: PropTypes.bool,
disabled: PropTypes.bool,
};
export default ToolbarButton;

7
platform/ui/src/contextProviders/ViewportGridProvider.tsx
View File

@ -88,7 +88,11 @@ const determineActiveViewportId = (state: DefaultState, newViewports: Map) => {
// and find the best match
const currentOrientation = currentActiveViewport.viewportOptions.orientation;
const sortedViewports = Array.from(newViewports.values()).sort((a, b) => {
const filteredNewViewports = Array.from(newViewports.values()).filter(
viewport => viewport.displaySetInstanceUIDs?.length > 0
);
const sortedViewports = Array.from(filteredNewViewports.values()).sort((a, b) => {
// Compare orientations
const aOrientationMatch = a.viewportOptions.orientation === currentOrientation;
const bOrientationMatch = b.viewportOptions.orientation === currentOrientation;
@ -227,6 +231,7 @@ export function ViewportGridProvider({ children, service }) {
// If the viewport doesn't have a viewportId, we create one
if (!viewport.viewportOptions?.viewportId) {
const randomUID = utils.uuidv4().substring(0, 8);
viewport.viewportOptions = viewport.viewportOptions || {};
viewport.viewportOptions.viewportId = `viewport-${randomUID}`;
}

2
platform/ui/src/tailwind.css
View File

@ -30,5 +30,5 @@ body {
pointer-events: none;
cursor: not-allowed;
user-select: none;
opacity: 0.4;
opacity: 0.5;
}

48
yarn.lock
View File

@ -1565,13 +1565,13 @@
resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
"@cornerstonejs/adapters@^1.66.7":
version "1.66.7"
resolved "https://registry.yarnpkg.com/@cornerstonejs/adapters/-/adapters-1.66.7.tgz#924b9a1f00f56c986d9d175d12a182855e6af70b"
integrity sha512-HGEd39YOAe3jkTSyZhan3VY7QkQhMwMiYhqiREJpqWIyOLhCo25NTuMm8X6VIOpUvBGdE1dKyYlZrkANqF1CJQ==
"@cornerstonejs/adapters@^1.67.0":
version "1.67.0"
resolved "https://registry.yarnpkg.com/@cornerstonejs/adapters/-/adapters-1.67.0.tgz#84c881a2b1c7bc3cec2ae55df869d82740cc6049"
integrity sha512-EnIpdMD7kx42eJYGHsqjahWTZj/ZTkP+5XCWXpLp0BY0p+O53oSV9aYZXvyjd/kWQPr+30L+010zPuE5oQzIxA==
dependencies:
"@babel/runtime-corejs2" "^7.17.8"
"@cornerstonejs/tools" "^1.66.7"
"@cornerstonejs/tools" "^1.67.0"
buffer "^6.0.3"
dcmjs "^0.29.8"
gl-matrix "^3.4.3"
@ -1618,10 +1618,10 @@
resolved "https://registry.yarnpkg.com/@cornerstonejs/codec-openjph/-/codec-openjph-2.4.5.tgz#8690b61a86fa53ef38a70eee9d665a79229517c0"
integrity sha512-MZCUy8VG0VG5Nl1l58+g+kH3LujAzLYTfJqkwpWI2gjSrGXnP6lgwyy4GmPRZWVoS40/B1LDNALK905cNWm+sg==
"@cornerstonejs/core@^1.66.7":
version "1.66.7"
resolved "https://registry.yarnpkg.com/@cornerstonejs/core/-/core-1.66.7.tgz#57d0adcc67d95f93fc86848c2a05b9c57545b287"
integrity sha512-GOhV4fw9c0zm+7oH6q69otPYYEHI90hyMqJ0S/AWLwV7AwDuIRuRts3VELG5mSx4ju7zJalsO0Jfpvg3gPsW5w==
"@cornerstonejs/core@^1.67.0":
version "1.67.0"
resolved "https://registry.yarnpkg.com/@cornerstonejs/core/-/core-1.67.0.tgz#711a915b70b5273d8838b59c8c06c553079b0ee7"
integrity sha512-t8VI5acGGu0wN51UzHyEXOjlBjoAJjIVcbBOQejC0yOWfGoy+I9y/h5de41pZyhfbXYNNXA1dHZDDtLi9sauBg==
dependencies:
"@kitware/vtk.js" "29.7.0"
comlink "^4.4.1"
@ -1629,34 +1629,34 @@
gl-matrix "^3.4.3"
lodash.clonedeep "4.5.0"
"@cornerstonejs/dicom-image-loader@^1.66.7":
version "1.66.7"
resolved "https://registry.yarnpkg.com/@cornerstonejs/dicom-image-loader/-/dicom-image-loader-1.66.7.tgz#a35095908554e8e7ad717aab7652be7376d5305d"
integrity sha512-z8Nq3A+h+9oSjTqxPVyUm9Y3GV2PgPZJOGP0yYTyuEUqVnV3A9w5eB0/q84HGDaXF0ZsT4Y1J4Y3oOmKodb9lA==
"@cornerstonejs/dicom-image-loader@^1.67.0":
version "1.67.0"
resolved "https://registry.yarnpkg.com/@cornerstonejs/dicom-image-loader/-/dicom-image-loader-1.67.0.tgz#9e70858100821682105f88a927aa4dff96e75cda"
integrity sha512-ZhziYYKcci1X11iWA4qOzEVxtVUbDUKqx9ustsAD9vv9P7WfDOI4EHflUhW+X1hIAG5vl7xv6LAG0aRkVnwrrw==
dependencies:
"@cornerstonejs/codec-charls" "^1.2.3"
"@cornerstonejs/codec-libjpeg-turbo-8bit" "^1.2.2"
"@cornerstonejs/codec-openjpeg" "^1.2.2"
"@cornerstonejs/codec-openjph" "^2.4.5"
"@cornerstonejs/core" "^1.66.7"
"@cornerstonejs/core" "^1.67.0"
dicom-parser "^1.8.9"
pako "^2.0.4"
uuid "^9.0.0"
"@cornerstonejs/streaming-image-volume-loader@^1.66.7":
version "1.66.7"
resolved "https://registry.yarnpkg.com/@cornerstonejs/streaming-image-volume-loader/-/streaming-image-volume-loader-1.66.7.tgz#6261df726b5400db1785c7378ee2e27018b3574c"
integrity sha512-2Ihz+6sUJ6AzKhF1o4yaDGeS1ZOZdmBlMEztMruJelLWWu/gb42i58chINB7UDmAxS/atvf22UvVNPGvW9cHDw==
"@cornerstonejs/streaming-image-volume-loader@^1.67.0":
version "1.67.0"
resolved "https://registry.yarnpkg.com/@cornerstonejs/streaming-image-volume-loader/-/streaming-image-volume-loader-1.67.0.tgz#5e22c828e5a5c9932e728314edbfa95abf81982e"
integrity sha512-W5+CKSxkLI4BbcdXYVb/M+yeN6Z+G8AWOQISR8qX9NGnK3GR/Id7+9OH+HP6FmIZ4YBXew9/DOqRgEtTtyDZGQ==
dependencies:
"@cornerstonejs/core" "^1.66.7"
"@cornerstonejs/core" "^1.67.0"
comlink "^4.4.1"
"@cornerstonejs/tools@^1.66.7":
version "1.66.7"
resolved "https://registry.yarnpkg.com/@cornerstonejs/tools/-/tools-1.66.7.tgz#bc0bb71b6b33761a91ca116d542e39807de14d82"
integrity sha512-NKTkwWsVzyE62nYa1ljXkzDgVcbqZxsMeRDhtpMaWkVOK06FrClu2xvLfVM8Rz2AXF4Zsqcp0Rg0D6Z4U3g38Q==
"@cornerstonejs/tools@^1.67.0":
version "1.67.0"
resolved "https://registry.yarnpkg.com/@cornerstonejs/tools/-/tools-1.67.0.tgz#47c6459859cc5122f780a7ec67c2b9d41b067b38"
integrity sha512-CPFWRF4IePxHV8KoXE6PBY0Q3jw8riJ7ZaJajAzXLpgvTSvIYu0m7tNuFG8iKVppq6KTgSywO4r9VbfcvZXOyw==
dependencies:
"@cornerstonejs/core" "^1.66.7"
"@cornerstonejs/core" "^1.67.0"
"@icr/polyseg-wasm" "0.4.0"
"@types/offscreencanvas" "2019.7.3"
comlink "^4.4.1"