feat: cornerstone3D stack and volume viewports (#2787)
* feat: cs3d working stack viewport and tools (#19) * Squashed everything * fix weird react issue * fix eslint / prettier stuff * thumbnails work now with cpu rendering * feat: use new loadImageToCanvas in cs3d * make jump to measurement work * fix active thumbnail * fix measurement delete * fix window level presets * remove segmentation and sync groups for now * fix the dicom pdf and dicom video * fix cornerstone window assignment for cypress * apply review comments Co-authored-by: Erik <erik.sweed@gmail.com> * feat: cs3d tools and toolGroups (#20) * add more tools to work with cs3d mode * fix hotkeys * add stack manager usage for stach viewports * add image scrollbar * wip viewport overlay * fix toAnnotation schema for tools * fix the unnecessary size change that triggered resize * hanging protocol improvement to allow unmatched errors * study description matching for hanging protocol * fix the displaysetOptions to work * fix handle the active tool when a new viewport is added * fix separate toolGroups for mode * apply review comments * apply review comments * yarn lock * feat: overlay component (#21) * fix default displayset options * add viewport overlay * apply review comments * feat: loading and orientation indicators (#22) * add loading indicator * add orientation marker initial work * apply review comments * fix: orientation markers (#23) * finished the orientation markers * fix various broken cypress tests * apply review comments * update yarn lock * feat: re-working measurement tracking mode with cornerstone3d (#2805) * feat: cs3d working stack viewport and tools (#19) * Squashed everything * fix weird react issue * fix eslint / prettier stuff * thumbnails work now with cpu rendering * feat: use new loadImageToCanvas in cs3d * make jump to measurement work * fix active thumbnail * fix measurement delete * fix window level presets * remove segmentation and sync groups for now * fix the dicom pdf and dicom video * fix cornerstone window assignment for cypress * apply review comments Co-authored-by: Erik <erik.sweed@gmail.com> * feat: Add Measurement tracking mode with cs3D (#2789) * feat: first render for cornerstone3d tracked viewport * make tool active work * wip for SR extension * renamed dicom sr to cornerstone dicom sr * remove cornerstone from dicom pdf and video * move dicom sr logic to sr extension * feat: Add hydration for the length tool * fix SR display tool for length using cs3d * fix default config * fix: various bugs with sr viewport and tracking * fix promptying to continue tracking for when SR is created * feat: add keep trackign of unique identifiers * fix hydration for same imageIds * feat: Add SR toolGroup creation on modeEnter * feat: remove the need for separate mapper for SR hydration * add SR display for ellipse * handle hydration of elliptical ROI tool * remove cornerstone extension * add arrow mapping * feat: Add ArrowAnnotate SR display and hydration * apply review comments * apply review comments * move viewport labels to the viewportData * apply review comments * fix: integration cypress tests with cornerstone3D and add CINE tool (#2795) * fix: integration cypress tests with cornerstone3D * revert to addOrUpdate as it makes more sense * fix local drag and drop * fix tests * move dicomLoaderService to cornerstone extension * fix various import bugs * fix bug for local PT series * fix various unit tests * bump cs3d versions * add angle and magnify tool * bump dependencies to avoid broken peerDeps * feat: add initial work for capture using cs3d * feat: show annotations on the image capture * feat: add svg layer export * feat: Add CINE Tool * feat: remove unnecessary viewport rendering for cine state changes Co-authored-by: Erik Ziegler <erik.sweed@gmail.com> * docs: modify and improve documentation (#2800) * cleanup docs versionings * feat: Add all version explanations * version docs for 3.0 * wip for changing docs * wip for updated docs * add utility module documentation * fix demo with nohoisting of history * add slides and video to resources * apply review comments * fix: drag and drop SR into SR viewport (#2803) * update yarn lock Co-authored-by: Erik <erik.sweed@gmail.com> * update pathnames to match v3-stable * update the e2e pathname * fix: various bugs with regard to tracking workflow (#2811) * fix: various issues with measurement panel * fix: update default tool style for annotations * fix: annotatoin label getting removed * feat: Add backward compatibility for SR hydration with legacy cornerstone * fix: cursors and ellipse ROI max style * fix: ArrowAnnotate SRDisplay * apply review comments * bump package versions * fix: bugin rehydration of SR * fix: e2e tests * fix active viewport thickness and arrowTool ui * add readme for measurement tracking * use uploaded image for readme * add back images * try to fix e2e test * fix: window level presets hotkeys * Update README.md * update yarn lock * feat: volume api and TMTV mode (#2817) * feat: volumeAPI and TMTV mode * feat: use cs3d cache service to obtain viewportData * wip for volume api * wip: fusion viewport * feat: add blend mode option * wip for image scrollbar * fix drag and drop thumbnail * wip for image scrollbar for voluems * fix: element mismatch bug for scroll * feat: Add image scrollbar to volumes * feat: add syncGroups to volume api * feat: add tmtv mode initial setup * feat: add initial image options for the stack viewports * feat: Add custom load strategy for volume viewports via HP * apply review comments fix: Jump presets cs3d (#2812) * feat: Add JumpPreset to OHIF for Cornerstone3D * fix: accessing viewport service from servicesManager feat: volume API and TMTV mode (#2814) * fix: do not display overlays on mip viewports * feat: add optional disableCommands for toggle buttons * fix: toggleCrossharis * feat: config the crosshairs * feat: add PetSUV Panel for changing metadata * feat: initial work for the rectangleROIThreshold panel * wip: measurement service * roi threshold working * feat: Add displayText to segmentations * feat: add remove segmentation * feat: add csv export * feat: add RT export for annotations in tmtv mode * fix: fusion to use pt in tmtv mode and measuremet mappings * fix: various bugs * apply review comments * apply review comments * feat: add fusion color maps * add readme to tmtv mode * Update README.md * fix: try to fix build * fix unit tests * Update README.md * feat: add about to the panel * fix: changing strategy in roi panel * apply review comments * update package versions * wip for stackPrefetch * fix: cornerstone3d hydration and renaming (#2818) * update readme * renamed cornerstone extension * wip for renaming cornerstone3D variables * wip for renaming cornerstone3D variables * wip for fixing bugs for SR viewport * fix: jumpToMeasurement and initial label after hydration * fix: fileName capitalization * feat: use the new prefetch stack in the cs3d (#2820) * feat: use the new prefetch stack in the cs3d * use viewport scroll api for stack viewport * fix cine stop when scrollbar changes * feat: use new prefetch events * fix loading state to not show repeatedly * fix: various bugs for tmtv mode thresholding and new icons (#2823) * feat: make tmtv mode available in worklist * feat: add new icons for tmtv mode * feat: add fusion color icon * fix: parallel scale calculation * fix: bump Cornerstone to get large image support working * fix: Fix issues with CPU viewport flipping, including config files * fix: bump cornerstone to fix magnify tool * fix: Bump Cornerstone version to fix resetCamera issue in StackViewport * ci: Add _headers file to enable CORS headers for Netlify Drag/Drop deploys * fix: WADO-URI was not working. PET Metadata was coming from the wrong place. Fixed some minor React errors * feat(OHIF):Allow modes and extensions to be added after commpile time. (#2838) Also works with the compile time add that the existing cli uses, so that both build types work. Eric and I agreed this doesn't change existing functionality, but is almost entirely build issues/fixes. * bump: dependency versions to fix hydration bugs (#2848) * bump: dcmjs version to fix hydration bugs * try to fix tests * bump dependency versions Co-authored-by: Alireza <ar.sedghi@gmail.com> Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>
This commit is contained in:
668 files changed
+41669
-13410
No files matched your search
@@ -0,0 +1,151 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Icon } from '../';
|
||||
|
||||
const SegmentationItem = ({
|
||||
id,
|
||||
index,
|
||||
label,
|
||||
displayText,
|
||||
isActive,
|
||||
isVisible,
|
||||
onClick,
|
||||
onEdit,
|
||||
onDelete,
|
||||
toggleVisibility,
|
||||
}) => {
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
|
||||
const onEditHandler = event => {
|
||||
event.stopPropagation();
|
||||
onEdit({ id, isActive, event });
|
||||
};
|
||||
|
||||
const onClickHandler = event => onClick({ id, isActive, event });
|
||||
|
||||
const onMouseEnter = () => setIsHovering(true);
|
||||
const onMouseLeave = () => setIsHovering(false);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames(
|
||||
'group relative flex cursor-pointer items-stretch bg-black border outline-none border-transparent transition duration-300',
|
||||
{
|
||||
'rounded overflow-hidden border-primary-light': isActive,
|
||||
}
|
||||
)}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClickHandler}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
data-cy={'measurement-item'}
|
||||
>
|
||||
<div
|
||||
className={classnames(
|
||||
'text-center flex items-center justify-center w-6 h-auto text-base transition duration-300',
|
||||
{
|
||||
'bg-primary-light text-black': isActive,
|
||||
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{isHovering ? (
|
||||
<Icon
|
||||
name="close"
|
||||
className={classnames(
|
||||
'w-5 transition duration-500 text-center hover:opacity-80',
|
||||
{
|
||||
'bg-primary-light text-black': isActive,
|
||||
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
||||
}
|
||||
)}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onDelete(id);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<span>{index}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="relative flex flex-col w-full p-1">
|
||||
<div className="flex items-center mb-1 ml-2">
|
||||
<div className="flex items-center flex-1 text-base text-primary-light">
|
||||
<div
|
||||
className="w-3 h-3 mt-1 mr-2 rounded-full"
|
||||
style={{ backgroundColor: 'red' }}
|
||||
></div>
|
||||
{label}
|
||||
</div>
|
||||
<div className="flex items-center w-1/4">
|
||||
<div>
|
||||
<Icon
|
||||
className={classnames(
|
||||
'text-white w-3 absolute cursor-pointer transition duration-300 hover:opacity-80',
|
||||
{ 'invisible opacity-0 mr-2': !isActive && !isHovering },
|
||||
{ 'visible opacity-1': !isActive && isHovering }
|
||||
)}
|
||||
name="pencil"
|
||||
style={{
|
||||
top: 7,
|
||||
right: 14,
|
||||
transform: isActive || isHovering ? '' : 'translateX(100%)',
|
||||
}}
|
||||
onClick={e => onEditHandler(e)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Icon
|
||||
className={classnames(
|
||||
'text-white w-4 cursor-pointer transition duration-300 hover:opacity-80'
|
||||
)}
|
||||
name={isVisible ? 'eye-visible' : 'eye-hidden'}
|
||||
onClick={e => {
|
||||
// stopPropagation needed to avoid disable the current active item
|
||||
e.stopPropagation();
|
||||
toggleVisibility(e, id);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
{displayText &&
|
||||
displayText.map(line => (
|
||||
<span
|
||||
key={line}
|
||||
className="pl-2 text-base text-white border-l border-primary-light"
|
||||
>
|
||||
{line}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SegmentationItem.propTypes = {
|
||||
id: PropTypes.oneOfType([
|
||||
PropTypes.number.isRequired,
|
||||
PropTypes.string.isRequired,
|
||||
]),
|
||||
index: PropTypes.number.isRequired,
|
||||
label: PropTypes.string,
|
||||
displayText: PropTypes.arrayOf(PropTypes.string),
|
||||
isActive: PropTypes.bool,
|
||||
isVisible: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
onEdit: PropTypes.func,
|
||||
onDelete: PropTypes.func,
|
||||
toggleVisibility: PropTypes.func,
|
||||
};
|
||||
|
||||
SegmentationItem.defaultProps = {
|
||||
isActive: false,
|
||||
displayText: [],
|
||||
};
|
||||
|
||||
export default SegmentationItem;
|
||||
@@ -1,120 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Icon } from '../';
|
||||
|
||||
const SegmentationTable = ({ title, amount, data }) => {
|
||||
const [activeItem, setActiveItem] = useState(null);
|
||||
|
||||
// TODO: colorLUT should be defined in the application
|
||||
const colorLUT = [
|
||||
'#932a13',
|
||||
'#821393',
|
||||
'#2b7fc4',
|
||||
'#12c457',
|
||||
'#7f7d2e',
|
||||
'#7f2e4a',
|
||||
'#866943',
|
||||
'#65ae7f',
|
||||
'#334b5f',
|
||||
'#3cb0dc',
|
||||
'#292ac9',
|
||||
'#629753',
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between px-2 py-1 bg-secondary-main">
|
||||
<span className="text-base font-bold text-white tracking-widest uppercase">
|
||||
{title}
|
||||
</span>
|
||||
<div className="flex">
|
||||
<span className="text-base font-bold text-white">{amount}</span>
|
||||
<Icon
|
||||
name="eye-hidden"
|
||||
className="w-6 text-white ml-2 cursor-pointer transition duration-300 hover:opacity-80"
|
||||
onClick={() => alert('TBD')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-64">
|
||||
{!!data.length &&
|
||||
data.map((e, i) => {
|
||||
const itemKey = i;
|
||||
const currentItem = i + 1;
|
||||
const isActive = !!activeItem && activeItem[title] === i;
|
||||
|
||||
const handleOnClick = () => {
|
||||
setActiveItem((s) => {
|
||||
return {
|
||||
...s,
|
||||
[title]: s && s[title] === itemKey ? null : itemKey,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={classnames(
|
||||
'group flex cursor-default bg-black border border-transparent transition duration-300 rounded overflow-hidden',
|
||||
{
|
||||
'border-primary-light': isActive,
|
||||
}
|
||||
)}
|
||||
onClick={handleOnClick}
|
||||
onKeyDown={handleOnClick}
|
||||
role="button"
|
||||
tabIndex="0"
|
||||
>
|
||||
<div
|
||||
className={classnames(
|
||||
'text-center w-6 py-1 text-base transition duration-300',
|
||||
{
|
||||
'bg-primary-light text-black': isActive,
|
||||
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{currentItem}
|
||||
</div>
|
||||
<div className="px-2 py-1 flex flex-1 items-center justify-between">
|
||||
<span className="text-base text-primary-light mb-1 flex items-center flex-1">
|
||||
<div
|
||||
className="w-3 h-3 rounded-full mr-2"
|
||||
style={{ backgroundColor: colorLUT[i] }}
|
||||
></div>
|
||||
Label short description
|
||||
</span>
|
||||
<Icon
|
||||
className={classnames(
|
||||
'text-white w-6 cursor-pointer transition duration-300 hover:opacity-80'
|
||||
)}
|
||||
name="eye-visible"
|
||||
onClick={(e) => {
|
||||
// stopPropagation needed to avoid disable the current active item
|
||||
e.stopPropagation();
|
||||
alert('Toggle');
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SegmentationTable.defaultProps = {
|
||||
amount: null,
|
||||
data: [],
|
||||
};
|
||||
|
||||
SegmentationTable.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
data: PropTypes.array, // TODO: define better the array structure
|
||||
};
|
||||
|
||||
export default SegmentationTable;
|
||||
@@ -0,0 +1,130 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Icon } from '../';
|
||||
import SegmentationItem from './SegmentationItem';
|
||||
|
||||
const SegmentationTable = ({
|
||||
title,
|
||||
amount,
|
||||
segmentations,
|
||||
activeSegmentationId,
|
||||
onClick,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onToggleVisibility,
|
||||
onToggleVisibilityAll,
|
||||
}) => {
|
||||
const [hiddenSegmentationIds, setHiddenSegmentationIds] = useState([]);
|
||||
|
||||
const handleToggleAll = () => {
|
||||
// filter segmentation ids that are hidden
|
||||
const visibleSegmentationsIds = segmentations
|
||||
.filter(segmentation => !hiddenSegmentationIds.includes(segmentation.id))
|
||||
.map(segmentation => segmentation.id);
|
||||
|
||||
// check if there is at least one visible segmentation
|
||||
// if there is set all to invisible state
|
||||
if (visibleSegmentationsIds.length > 0) {
|
||||
// make all invisible
|
||||
setHiddenSegmentationIds(
|
||||
segmentations.map(segmentation => segmentation.id)
|
||||
);
|
||||
|
||||
// toggle those that are visible
|
||||
onToggleVisibilityAll(visibleSegmentationsIds);
|
||||
}
|
||||
|
||||
// if there is no visible segmentation, set
|
||||
// all to visible state
|
||||
if (visibleSegmentationsIds.length === 0) {
|
||||
// copy hidden segmentation ids
|
||||
const Ids = [...hiddenSegmentationIds];
|
||||
setHiddenSegmentationIds([]);
|
||||
|
||||
// toggle those that are hidden
|
||||
onToggleVisibilityAll(Ids);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between px-2 py-1 bg-secondary-main">
|
||||
<span className="text-base font-bold tracking-widest text-white uppercase">
|
||||
{title}
|
||||
</span>
|
||||
<div className="flex">
|
||||
<span className="text-base font-bold text-white">{amount}</span>
|
||||
<Icon
|
||||
name="eye-hidden"
|
||||
className="w-6 ml-2 text-white transition duration-300 cursor-pointer hover:opacity-80"
|
||||
onClick={() => handleToggleAll()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-x-hidden overflow-y-auto ohif-scrollbar max-h-64">
|
||||
{!!segmentations.length &&
|
||||
segmentations.map((segmentation, i) => {
|
||||
const { id, label, displayText = [] } = segmentation;
|
||||
return (
|
||||
<SegmentationItem
|
||||
key={id}
|
||||
id={id}
|
||||
index={i + 1}
|
||||
label={label ?? `Segmentation ${i + 1}`}
|
||||
displayText={displayText}
|
||||
isActive={activeSegmentationId === id}
|
||||
isVisible={!hiddenSegmentationIds.includes(id)}
|
||||
onClick={() => {
|
||||
onClick(id);
|
||||
}}
|
||||
onEdit={() => {
|
||||
onEdit(id);
|
||||
}}
|
||||
onDelete={() => {
|
||||
onDelete(id);
|
||||
}}
|
||||
toggleVisibility={() => {
|
||||
onToggleVisibility(id);
|
||||
|
||||
// if segmentation is visible, remove it from hiddenSegmentationIds
|
||||
if (hiddenSegmentationIds.includes(id)) {
|
||||
setHiddenSegmentationIds(
|
||||
hiddenSegmentationIds.filter(hiddenId => hiddenId !== id)
|
||||
);
|
||||
} else {
|
||||
// if segmentation is hidden, add it to hiddenSegmentationIds
|
||||
setHiddenSegmentationIds([...hiddenSegmentationIds, id]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SegmentationTable.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
amount: PropTypes.number.isRequired,
|
||||
segmentations: PropTypes.array.isRequired,
|
||||
activeSegmentationId: PropTypes.string.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
onEdit: PropTypes.func.isRequired,
|
||||
onDelete: PropTypes.func.isRequired,
|
||||
onToggleVisibility: PropTypes.func.isRequired,
|
||||
onToggleVisibilityAll: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
SegmentationTable.defaultProps = {
|
||||
title: '',
|
||||
amount: 0,
|
||||
segmentations: [],
|
||||
activeSegmentationId: '',
|
||||
onClick: () => {},
|
||||
onEdit: () => {},
|
||||
onToggleVisibility: () => {},
|
||||
onToggleVisibilityAll: () => {},
|
||||
};
|
||||
|
||||
export default SegmentationTable;
|
||||
Reference in new issue
Block a user