fix: button expertise view tiap study
This commit is contained in:
@@ -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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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 };
|
||||||
|
|||||||
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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 };
|
||||||
|
|||||||
Reference in New Issue
Block a user