fix: button expertise view tiap study

This commit is contained in:
mario
2025-04-15 03:06:17 +00:00
parent 841f84bfdb
commit ca84179aa6
5 changed files with 41 additions and 106 deletions

View File

@@ -26,6 +26,8 @@ const SidePanelWithServices = ({
const [sidePanelOpen, setSidePanelOpen] = useState(activeTabIndexProp !== null); const [sidePanelOpen, setSidePanelOpen] = useState(activeTabIndexProp !== null);
const [activeTabIndex, setActiveTabIndex] = useState(activeTabIndexProp); const [activeTabIndex, setActiveTabIndex] = useState(activeTabIndexProp);
const [tabs, setTabs] = useState(tabsProp ?? panelService.getPanels(side)); const [tabs, setTabs] = useState(tabsProp ?? panelService.getPanels(side));
const [studyInstanceUID, setStudyInstanceUID] = useState('');
const [lastActivatedStudyUID, setLastActivatedStudyUID] = useState('');
const handleActiveTabIndexChange = useCallback(({ activeTabIndex }) => { const handleActiveTabIndexChange = useCallback(({ activeTabIndex }) => {
setActiveTabIndex(activeTabIndex); setActiveTabIndex(activeTabIndex);
@@ -71,23 +73,33 @@ const SidePanelWithServices = ({
const activatePanelSubscription = panelService.subscribe( const activatePanelSubscription = panelService.subscribe(
panelService.EVENTS.ACTIVATE_PANEL, panelService.EVENTS.ACTIVATE_PANEL,
(activatePanelEvent: Types.ActivatePanelEvent) => { (activatePanelEvent: Types.ActivatePanelEvent) => {
// Handle the `-exp` suffix logic const isExpertisePanel = activatePanelEvent.panelId.includes('-exp-');
const isExpertisePanel = activatePanelEvent.panelId.endsWith('-exp');
const realPanelID = isExpertisePanel const realPanelID = isExpertisePanel
? activatePanelEvent.panelId.replace(/-exp$/, '') ? activatePanelEvent.panelId.split('-exp-')[0]
: activatePanelEvent.panelId; : activatePanelEvent.panelId;
// studyInstanceUID = take from activatePanelEvent.panelId after '-exp-
setStudyInstanceUID(isExpertisePanel ? activatePanelEvent.panelId.split('-exp-')[1] : null);
const tabIndex = tabs.findIndex(tab => tab.id === realPanelID); const tabIndex = tabs.findIndex(tab => tab.id === realPanelID);
if (isExpertisePanel && side === 'right') { if (isExpertisePanel && side === 'right') {
const shouldOpen = !sidePanelOpen; // Use sidePanelOpen to determine toggle state // Extract study UID from the panel ID
setSidePanelOpen(shouldOpen); const currentStudyUID = activatePanelEvent.panelId.split('-exp-')[1];
if (shouldOpen) { // Toggle logic - close if same study is clicked again, open if different study
setActiveTabIndex(tabIndex !== -1 ? tabIndex : null); if (currentStudyUID === lastActivatedStudyUID && sidePanelOpen) {
} else { // Same study - close panel
setActiveTabIndex(null); setSidePanelOpen(false);
} setActiveTabIndex(null);
setLastActivatedStudyUID('');
} else {
// Different study or panel was closed - open panel with new study
setSidePanelOpen(true);
setActiveTabIndex(tabIndex !== -1 ? tabIndex : null);
setStudyInstanceUID(currentStudyUID);
setLastActivatedStudyUID(currentStudyUID);
}
} else if (tabIndex !== -1) { } else if (tabIndex !== -1) {
setActiveTabIndex(tabIndex); setActiveTabIndex(tabIndex);
} }
@@ -97,7 +109,7 @@ const SidePanelWithServices = ({
return () => { return () => {
activatePanelSubscription.unsubscribe(); activatePanelSubscription.unsubscribe();
}; };
}, [tabs, sidePanelOpen, panelService]); }, [tabs, sidePanelOpen, panelService, lastActivatedStudyUID]);
return ( return (
<SidePanel <SidePanel
@@ -110,6 +122,7 @@ const SidePanelWithServices = ({
onActiveTabIndexChange={handleActiveTabIndexChange} onActiveTabIndexChange={handleActiveTabIndexChange}
expandedWidth={expandedWidth} expandedWidth={expandedWidth}
servicesManager={servicesManager} // Pass servicesManager ke SidePanel servicesManager={servicesManager} // Pass servicesManager ke SidePanel
studyInstanceUID={studyInstanceUID}
/> />
); );
}; };

View File

@@ -23,8 +23,8 @@ window.config = {
// above, the number of requests can be go a lot higher. // above, the number of requests can be go a lot higher.
prefetch: 25, prefetch: 25,
}, },
expertise: true, //* Tambahan untuk enable expertise (CustomizableViewportOverlay) expertise: false, //* Tambahan untuk enable expertise (CustomizableViewportOverlay)
expertise_host: `http://128.199.154.150`, expertise_host: `http://${window.location.hostname}`, //* Tambahan untuk fetch data Expertise)
// filterQueryParam: false, // filterQueryParam: false,
// defaultDataSourceName: 'dicomweb', // defaultDataSourceName: 'dicomweb',
defaultDataSourceName: 'local-proxy', defaultDataSourceName: 'local-proxy',
@@ -39,100 +39,14 @@ window.config = {
// regex: /.*/, // regex: /.*/,
// }, // },
dataSources: [ dataSources: [
{
namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
sourceName: 'dicomweb',
configuration: {
friendlyName: 'AWS S3 Static wado server',
name: 'aws',
wadoUriRoot: 'https://d14fa38qiwhyfd.cloudfront.net/dicomweb',
qidoRoot: 'https://d14fa38qiwhyfd.cloudfront.net/dicomweb',
wadoRoot: 'https://d14fa38qiwhyfd.cloudfront.net/dicomweb',
qidoSupportsIncludeField: false,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
enableStudyLazyLoad: true,
supportsFuzzyMatching: false,
supportsWildcard: true,
staticWado: true,
singlepart: 'bulkdata,video',
// whether the data source should use retrieveBulkData to grab metadata,
// and in case of relative path, what would it be relative to, options
// are in the series level or study level (some servers like series some study)
bulkDataURI: {
enabled: true,
relativeResolution: 'studies',
transform: url => url.replace('/pixeldata.mp4', '/rendered'),
},
omitQuotationForMultipartRequest: true,
},
},
{
namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
sourceName: 'ohif2',
configuration: {
friendlyName: 'AWS S3 Static wado secondary server',
name: 'aws',
wadoUriRoot: 'https://dd14fa38qiwhyfd.cloudfront.net/dicomweb',
qidoRoot: 'https://dd14fa38qiwhyfd.cloudfront.net/dicomweb',
wadoRoot: 'https://dd14fa38qiwhyfd.cloudfront.net/dicomweb',
qidoSupportsIncludeField: false,
supportsReject: false,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
enableStudyLazyLoad: true,
supportsFuzzyMatching: false,
supportsWildcard: true,
staticWado: true,
singlepart: 'bulkdata,video',
// whether the data source should use retrieveBulkData to grab metadata,
// and in case of relative path, what would it be relative to, options
// are in the series level or study level (some servers like series some study)
bulkDataURI: {
enabled: true,
relativeResolution: 'studies',
},
omitQuotationForMultipartRequest: true,
},
},
{
namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
sourceName: 'ohif3',
configuration: {
friendlyName: 'AWS S3 Static wado secondary server',
name: 'aws',
wadoUriRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
qidoRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
wadoRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
qidoSupportsIncludeField: false,
supportsReject: false,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
enableStudyLazyLoad: true,
supportsFuzzyMatching: false,
supportsWildcard: true,
staticWado: true,
singlepart: 'bulkdata,video',
// whether the data source should use retrieveBulkData to grab metadata,
// and in case of relative path, what would it be relative to, options
// are in the series level or study level (some servers like series some study)
bulkDataURI: {
enabled: true,
relativeResolution: 'studies',
},
omitQuotationForMultipartRequest: true,
},
},
{ {
namespace: '@ohif/extension-default.dataSourcesModule.dicomweb', namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
sourceName: 'local-proxy', sourceName: 'local-proxy',
configuration: { configuration: {
friendlyName: 'Static WADO Local Data', friendlyName: 'Static WADO Local Data',
name: 'DCM4CHEE', name: 'DCM4CHEE',
qidoRoot: 'http://128.199.154.150:5000/rs', qidoRoot: `http://${window.location.hostname}:5050/rs`,
wadoRoot: 'http://128.199.154.150:5000/rs', wadoRoot: `http://${window.location.hostname}:5050/rs`,
qidoSupportsIncludeField: false, qidoSupportsIncludeField: false,
supportsReject: true, supportsReject: true,
supportsStow: true, supportsStow: true,

View File

@@ -154,6 +154,7 @@ const SidePanel = ({
expandedWidth = 280, expandedWidth = 280,
onActiveTabIndexChange, onActiveTabIndexChange,
servicesManager, // Tambah servicesManager as a prop servicesManager, // Tambah servicesManager as a prop
studyInstanceUID,
}) => { }) => {
const [panelOpen, setPanelOpen] = useState(activeTabIndexProp !== null); const [panelOpen, setPanelOpen] = useState(activeTabIndexProp !== null);
const [activeTabIndex, setActiveTabIndex] = useState(0); const [activeTabIndex, setActiveTabIndex] = useState(0);
@@ -166,8 +167,8 @@ const SidePanel = ({
const [viewportData, setViewportData] = useState(null); const [viewportData, setViewportData] = useState(null);
// Harusnya (viewportId), tapi karena gabutuh perubahan viewport maka dihardcode 'default' // Harusnya (viewportId), tapi karena gabutuh perubahan viewport maka dihardcode 'default'
const viewportInfo = cornerstoneViewportService.getViewportInfo('default'); // const viewportInfo = cornerstoneViewportService.getViewportInfo('default');
const studyInstanceUID = viewportInfo?.viewportData?.data?.[0]?.StudyInstanceUID || ''; // const studyInstanceUID = viewportInfo?.viewportData?.data?.[0]?.StudyInstanceUID || '';
const styleMap = createStyleMap(expandedWidth, borderSize, collapsedWidth); const styleMap = createStyleMap(expandedWidth, borderSize, collapsedWidth);
const baseStyle = createBaseStyle(expandedWidth); const baseStyle = createBaseStyle(expandedWidth);
@@ -623,6 +624,7 @@ SidePanel.propTypes = {
onActiveTabIndexChange: PropTypes.func, onActiveTabIndexChange: PropTypes.func,
expandedWidth: PropTypes.number, expandedWidth: PropTypes.number,
servicesManager: PropTypes.object.isRequired, // Tambah servicesManager prop servicesManager: PropTypes.object.isRequired, // Tambah servicesManager prop
studyInstanceUID: PropTypes.string, // Tambahkan prop studyInstanceUID
}; };
export { SidePanel }; export { SidePanel };

View File

@@ -63,6 +63,7 @@ const StudyBrowser = ({
viewPreset={viewPreset} viewPreset={viewPreset}
onThumbnailContextMenu={onThumbnailContextMenu} onThumbnailContextMenu={onThumbnailContextMenu}
servicesManager={servicesManager} // Pass servicesManager ke Study Item servicesManager={servicesManager} // Pass servicesManager ke Study Item
studyInstanceUid={studyInstanceUid}
/> />
</React.Fragment> </React.Fragment>
); );

View File

@@ -21,7 +21,10 @@ const StudyItem = ({
viewPreset = 'thumbnails', viewPreset = 'thumbnails',
onThumbnailContextMenu, onThumbnailContextMenu,
servicesManager, // Tambah servicesManager as a prop servicesManager, // Tambah servicesManager as a prop
studyInstanceUid = '',
}: withAppTypes) => { }: withAppTypes) => {
// FETCHING ACCESSION NUMBER DAN EXPERTISE
return ( return (
<Accordion <Accordion
type="single" type="single"
@@ -59,16 +62,17 @@ const StudyItem = ({
<> <>
{/* Expertise Button */} {/* Expertise Button */}
<div <div
className="bg-primary-dark hover:bg-primary-active mx-4 my-4 cursor-pointer rounded-lg border border-white py-2 text-center text-white" 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={() => { onClick={() => {
// Trigger the expertise panel in the right side panel (segmentation Panel) // Trigger the expertise panel in the right side panel (segmentation Panel)
servicesManager.services.panelService.activatePanel( servicesManager.services.panelService.activatePanel(
'@ohif/extension-cornerstone.panelModule.panelSegmentation-exp', // '@ohif/extension-cornerstone.panelModule.panelSegmentation-exp',
`@ohif/extension-cornerstone.panelModule.panelSegmentation-exp-${studyInstanceUid}`,
true true
); );
}} }}
> >
View Expertise Expertise
</div> </div>
{/* Thumbnails */} {/* Thumbnails */}
@@ -105,6 +109,7 @@ StudyItem.propTypes = {
onClickUntrack: PropTypes.func, onClickUntrack: PropTypes.func,
viewPreset: PropTypes.string, viewPreset: PropTypes.string,
servicesManager: PropTypes.object.isRequired, // Tambah servicesManager prop servicesManager: PropTypes.object.isRequired, // Tambah servicesManager prop
studyInstanceUid: PropTypes.string.string,
}; };
export { StudyItem }; export { StudyItem };