OHIF-208 (#1842)
* Set measurement as active * Add basic dialog component * Update styles and prop types * Jump to image * Update dialog * Format date * Update summary to use primary modalities * delete empty studySummary page * add missing PropTypes import * fix for accidental sync'd viewports * CR Updates * CR Update avoid cache of measurements * Use get measurement * Add comment to edit function * Remove request and merge modalities from series * Update dependency: react-cornerstone-viewport@2.3.9 react-cornerstone-viewport * @ohif/extension-cornerstone: 2.3.8 → 2.3.9 * @ohif/extension-dicom-sr: 2.3.8 → 2.3.9 * Update extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js Co-authored-by: Danny Brown <danny.ri.brown@gmail.com> * Add debugs * remove console.debug * Update frameindex to imageindex * Use new rcv debounced function * Fix hovering * Update dialog text * Dismiss dialogs on esc * Update dependency: react-cornerstone-viewport@3.0.0 react-cornerstone-viewport * @ohif/extension-cornerstone: 2.3.9 → 3.0.0 * @ohif/extension-dicom-sr: 2.3.9 → 3.0.0 * OHIF-237 * remove console.debug * Remove dead code brought in from rebase * EmptyViewport should not display a message * Remove more dead code from rebase * fix variable naming * remove unused hook * bump yarn lock * formatting * Add arrow dialog * Filter based on trackedSeries Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>
This commit is contained in:
Igor OctavianoandDanny Brown authored and GitHub committed
1 parent
ae05de18af
commit
a156eadcb7
34 files changed
+603
-758
No files matched your search
@@ -0,0 +1,87 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Icon } from '@ohif/ui';
|
||||
|
||||
const MeasurementItem = ({ id, index, label, displayText, isActive, onClick, onEdit }) => {
|
||||
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 flex cursor-pointer bg-black border outline-none border-transparent transition duration-300',
|
||||
{
|
||||
'rounded overflow-hidden border-primary-light': isActive,
|
||||
}
|
||||
)}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClickHandler}
|
||||
onKeyDown={onClickHandler}
|
||||
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,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{index}
|
||||
</div>
|
||||
<div className="px-2 py-1 flex flex-1 flex-col relative">
|
||||
<span className="text-base text-primary-light mb-1">
|
||||
{label}
|
||||
</span>
|
||||
{displayText.map(line => (
|
||||
<span key={line} className="pl-2 border-l border-primary-light text-base text-white">
|
||||
{line}
|
||||
</span>
|
||||
))}
|
||||
<Icon
|
||||
className={classnames(
|
||||
'text-white w-4 absolute cursor-pointer transition duration-300',
|
||||
{ 'invisible opacity-0 mr-2': !isActive && !isHovering },
|
||||
{ 'visible opacity-1': !isActive && isHovering }
|
||||
)}
|
||||
name="pencil"
|
||||
style={{
|
||||
top: 4,
|
||||
right: 4,
|
||||
transform: isActive || isHovering ? '' : 'translateX(100%)',
|
||||
}}
|
||||
onClick={onEditHandler}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
MeasurementItem.propTypes = {
|
||||
id: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]),
|
||||
index: PropTypes.number.isRequired,
|
||||
label: PropTypes.string,
|
||||
displayText: PropTypes.array.isRequired,
|
||||
isActive: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
onEdit: PropTypes.func
|
||||
};
|
||||
|
||||
MeasurementItem.defaultProps = {
|
||||
isActive: false,
|
||||
};
|
||||
|
||||
export default MeasurementItem;
|
||||
@@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { Icon } from '@ohif/ui';
|
||||
|
||||
import MeasurementItem from './MeasurementItem';
|
||||
|
||||
const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
|
||||
return (
|
||||
@@ -13,66 +14,18 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
|
||||
<span className="text-base font-bold text-white">{amount}</span>
|
||||
</div>
|
||||
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-112">
|
||||
{!!data.length &&
|
||||
data.map(measurementItem => {
|
||||
const { id, label, displayText, isActive } = measurementItem;
|
||||
return (
|
||||
<div
|
||||
key={id}
|
||||
className={classnames(
|
||||
'group flex cursor-default bg-black border border-transparent transition duration-300 ',
|
||||
{
|
||||
'rounded overflow-hidden border-primary-light': isActive,
|
||||
}
|
||||
)}
|
||||
onClick={() => onClick(measurementItem.id)}
|
||||
onKeyDown={() => onClick(measurementItem.id)}
|
||||
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,
|
||||
}
|
||||
)}
|
||||
>
|
||||
{id}
|
||||
</div>
|
||||
<div className="px-2 py-1 flex flex-1 flex-col relative">
|
||||
<span className="text-base text-primary-light mb-1">
|
||||
{label}
|
||||
</span>
|
||||
{displayText.map(line => (
|
||||
<span className="pl-2 border-l border-primary-light text-base text-white">
|
||||
{line}
|
||||
</span>
|
||||
))}
|
||||
<Icon
|
||||
className={classnames(
|
||||
'text-white w-4 absolute cursor-pointer transition duration-300',
|
||||
{
|
||||
'invisible opacity-0 mr-2': !isActive,
|
||||
}
|
||||
)}
|
||||
name="pencil"
|
||||
style={{
|
||||
top: 4,
|
||||
right: 4,
|
||||
transform: isActive ? '' : 'translateX(100%)',
|
||||
}}
|
||||
onClick={e => {
|
||||
// stopPropagation needed to avoid disable the current active item
|
||||
e.stopPropagation();
|
||||
onEdit(id);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{data.length && data.map((measurementItem, index) => (
|
||||
<MeasurementItem
|
||||
key={measurementItem.id}
|
||||
id={measurementItem.id}
|
||||
index={index + 1}
|
||||
label={measurementItem.label}
|
||||
isActive={measurementItem.isActive}
|
||||
displayText={measurementItem.displayText}
|
||||
onClick={onClick}
|
||||
onEdit={onEdit}
|
||||
/>
|
||||
))}
|
||||
{!data.length && (
|
||||
<div
|
||||
className={classnames(
|
||||
@@ -99,8 +52,8 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
|
||||
MeasurementTable.defaultProps = {
|
||||
amount: null,
|
||||
data: [],
|
||||
onClick: () => {},
|
||||
onEdit: () => {},
|
||||
onClick: () => { },
|
||||
onEdit: () => { },
|
||||
};
|
||||
|
||||
MeasurementTable.propTypes = {
|
||||
|
||||
Reference in new issue
Block a user