116 lines
3.9 KiB
TypeScript
116 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classnames from 'classnames';
|
|
import { ThumbnailList } from '../ThumbnailList';
|
|
|
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../Accordion';
|
|
|
|
const StudyItem = ({
|
|
date,
|
|
description,
|
|
numInstances,
|
|
modalities,
|
|
isActive,
|
|
onClick,
|
|
isExpanded,
|
|
displaySets,
|
|
activeDisplaySetInstanceUIDs,
|
|
onClickThumbnail,
|
|
onDoubleClickThumbnail,
|
|
onClickUntrack,
|
|
viewPreset = 'thumbnails',
|
|
onThumbnailContextMenu,
|
|
servicesManager, // Tambah servicesManager as a prop
|
|
studyInstanceUid = '',
|
|
}: withAppTypes) => {
|
|
// FETCHING ACCESSION NUMBER DAN EXPERTISE
|
|
|
|
return (
|
|
<Accordion
|
|
type="single"
|
|
collapsible
|
|
onClick={onClick}
|
|
onKeyDown={() => {}}
|
|
className="flex-shrink-0"
|
|
role="button"
|
|
tabIndex={0}
|
|
defaultValue={isActive ? 'study-item' : undefined}
|
|
>
|
|
<AccordionItem value="study-item">
|
|
<AccordionTrigger className={classnames('hover:bg-accent bg-popover rounded')}>
|
|
<div className="flex h-[40px] flex-1 flex-row">
|
|
<div className="flex w-full flex-row items-center justify-between">
|
|
<div className="flex flex-col items-start text-[13px]">
|
|
<div className="text-white">{date}</div>
|
|
<div className="text-muted-foreground h-[18px] max-w-[160px] overflow-hidden truncate whitespace-nowrap">
|
|
{description}
|
|
</div>
|
|
</div>
|
|
<div className="text-muted-foreground mr-2 flex flex-col items-end text-[12px]">
|
|
<div className="max-w-[150px] overflow-hidden text-ellipsis">{modalities}</div>
|
|
<div>{numInstances}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent
|
|
onClick={event => {
|
|
event.stopPropagation();
|
|
}}
|
|
>
|
|
{isExpanded && displaySets && (
|
|
<>
|
|
{/* Expertise Button */}
|
|
<div
|
|
className="bg-primary-dark hover:bg-primary-active mx-8 my-4 cursor-pointer rounded-lg border border-white py-3 text-center text-white"
|
|
onClick={() => {
|
|
// Trigger the expertise panel in the right side panel (segmentation Panel)
|
|
servicesManager.services.panelService.activatePanel(
|
|
// '@ohif/extension-cornerstone.panelModule.panelSegmentation-exp',
|
|
`@ohif/extension-cornerstone.panelModule.panelSegmentation-exp-${studyInstanceUid}`,
|
|
true
|
|
);
|
|
}}
|
|
>
|
|
Expertise
|
|
</div>
|
|
|
|
{/* Thumbnails */}
|
|
<ThumbnailList
|
|
thumbnails={displaySets}
|
|
activeDisplaySetInstanceUIDs={activeDisplaySetInstanceUIDs}
|
|
onThumbnailClick={onClickThumbnail}
|
|
onThumbnailDoubleClick={onDoubleClickThumbnail}
|
|
onClickUntrack={onClickUntrack}
|
|
viewPreset={viewPreset}
|
|
onThumbnailContextMenu={onThumbnailContextMenu}
|
|
/>
|
|
</>
|
|
)}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
);
|
|
};
|
|
|
|
StudyItem.propTypes = {
|
|
date: PropTypes.string.isRequired,
|
|
description: PropTypes.string,
|
|
modalities: PropTypes.string.isRequired,
|
|
numInstances: PropTypes.number.isRequired,
|
|
trackedSeries: PropTypes.number,
|
|
isActive: PropTypes.bool,
|
|
onClick: PropTypes.func.isRequired,
|
|
isExpanded: PropTypes.bool,
|
|
displaySets: PropTypes.array,
|
|
activeDisplaySetInstanceUIDs: PropTypes.array,
|
|
onClickThumbnail: PropTypes.func,
|
|
onDoubleClickThumbnail: PropTypes.func,
|
|
onClickUntrack: PropTypes.func,
|
|
viewPreset: PropTypes.string,
|
|
servicesManager: PropTypes.object.isRequired, // Tambah servicesManager prop
|
|
studyInstanceUid: PropTypes.string.string,
|
|
};
|
|
|
|
export { StudyItem };
|