adjust scroll area expertise | deploy sudirman

.gitignore

@@ -59,3 +59,5 @@ tests/playwright-report/
 
 # Dummy
 /dump
+platform/app/dist.zip
+platform/app/dist-sudirman.zip

extensions/default/src/Components/SidePanelWithServices.tsx

@@ -26,6 +26,8 @@ const SidePanelWithServices = ({
   const [sidePanelOpen, setSidePanelOpen] = useState(activeTabIndexProp !== null);
   const [activeTabIndex, setActiveTabIndex] = useState(activeTabIndexProp);
   const [tabs, setTabs] = useState(tabsProp ?? panelService.getPanels(side));
+  const [studyInstanceUID, setStudyInstanceUID] = useState('');
+  const [lastActivatedStudyUID, setLastActivatedStudyUID] = useState('');
 
   const handleActiveTabIndexChange = useCallback(({ activeTabIndex }) => {
     setActiveTabIndex(activeTabIndex);
@@ -71,11 +73,35 @@ const SidePanelWithServices = ({
     const activatePanelSubscription = panelService.subscribe(
       panelService.EVENTS.ACTIVATE_PANEL,
       (activatePanelEvent: Types.ActivatePanelEvent) => {
-        if (sidePanelOpen || activatePanelEvent.forceActive) {
+        const isExpertisePanel = activatePanelEvent.panelId.includes('-exp-');
-          const tabIndex = tabs.findIndex(tab => tab.id === activatePanelEvent.panelId);
+        const realPanelID = isExpertisePanel
-          if (tabIndex !== -1) {
+          ? activatePanelEvent.panelId.split('-exp-')[0]
-            setActiveTabIndex(tabIndex);
+          : 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);
+
+        if (isExpertisePanel && side === 'right') {
+         // Extract study UID from the panel ID
+         const currentStudyUID = activatePanelEvent.panelId.split('-exp-')[1];
+
+         // Toggle logic - close if same study is clicked again, open if different study
+         if (currentStudyUID === lastActivatedStudyUID && sidePanelOpen) {
+           // Same study - close panel
+           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) {
+          setActiveTabIndex(tabIndex);
         }
       }
     );
@@ -83,7 +109,7 @@ const SidePanelWithServices = ({
     return () => {
       activatePanelSubscription.unsubscribe();
     };
-  }, [tabs, sidePanelOpen, panelService]);
+  }, [tabs, sidePanelOpen, panelService, lastActivatedStudyUID]);
 
   return (
     <SidePanel
@@ -95,6 +121,8 @@ const SidePanelWithServices = ({
       onClose={handleClose}
       onActiveTabIndexChange={handleActiveTabIndexChange}
       expandedWidth={expandedWidth}
+      servicesManager={servicesManager} // Pass servicesManager ke SidePanel
+      studyInstanceUID={studyInstanceUID}
     />
   );
 };

extensions/default/src/ViewerLayout/index.tsx

@@ -146,6 +146,7 @@ function ViewerLayout({
               side="right"
               activeTabIndex={rightPanelClosedState ? null : 0}
               servicesManager={servicesManager}
+              expandedWidth={400}
             />
           ) : null}
         </React.Fragment>

platform/app/public/config/default.js

@@ -23,116 +23,20 @@ window.config = {
     // above, the number of requests can be go a lot higher.
     prefetch: 25,
   },
-  expertise: true, //* Tambahan untuk enable expertise (CustomizableViewportOverlay)
+  expertise: false, //* Tambahan untuk enable expertise (CustomizableViewportOverlay)
-  // filterQueryParam: false,
+  expertise_host: `http://192.168.2.13`, // IP ke NV di PACS Server, untuk fetch expertise bawaan versi NV
-  // defaultDataSourceName: 'dicomweb',
+  pacs_document_host: `192.168.2.13`, // IP ke NV di PACS Server untuk ambil pdf
+  pacs_document_port: 8080,
   defaultDataSourceName: 'local-proxy',
-  /* Dynamic config allows user to pass "configUrl" query string this allows to load config without recompiling application. The regex will ensure valid configuration source */
-  // dangerouslyUseDynamicConfig: {
-  //   enabled: true,
-  //   // regex will ensure valid configuration source and default is /.*/ which matches any character. To use this, setup your own regex to choose a specific source of configuration only.
-  //   // Example 1, to allow numbers and letters in an absolute or sub-path only.
-  //   // regex: /(0-9A-Za-z.]+)(\/[0-9A-Za-z.]+)*/
-  //   // Example 2, to restricts to either hosptial.com or othersite.com.
-  //   // regex: /(https:\/\/hospital.com(\/[0-9A-Za-z.]+)*)|(https:\/\/othersite.com(\/[0-9A-Za-z.]+)*)/
-  //   regex: /.*/,
-  // },
   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',
       sourceName: 'local-proxy',
       configuration: {
         friendlyName: 'Static WADO Local Data',
         name: 'DCM4CHEE',
-        qidoRoot: 'http://128.199.154.150:5000/rs',
+        qidoRoot: `http://192.168.2.13:5000/rs`, // IP ke dicomweb-proxy PACS Server. URI selalu /rs
-        wadoRoot: 'http://128.199.154.150:5000/rs',
+        wadoRoot: `http://192.168.2.13:5000/rs`, // IP ke dicomweb-proxy PACS Server. URI selalu /rs      qidoSupportsIncludeField: false,
-        qidoSupportsIncludeField: false,
         supportsReject: true,
         supportsStow: true,
         imageRendering: 'wadors',

platform/app/public/config/google.js

@@ -1,6 +1,9 @@
 /** @type {AppTypes.Config} */
 window.config = {
   routerBasename: '/',
+  pacs_document_host: '152.42.173.210',
+  pacs_document_port: 8080,
+  expertise: false,
   enableGoogleCloudAdapter: false,
   // below flag is for performance reasons, but it might not work for all servers
   showWarningMessageForCrossOrigin: true,
@@ -8,37 +11,24 @@ window.config = {
   showLoadingIndicator: true,
   strictZSpacingForVolumeViewport: true,
   // This is an array, but we'll only use the first entry for now
-  oidc: [
+  // Remove OIDC configuration since proxy handles authentication
-    {
+  // oidc: [
-      // ~ REQUIRED
+  //   {
-      // Authorization Server URL
+  //     // ~ REQUIRED
-      authority: 'https://accounts.google.com',
+  //     // Authorization Server URL
-      client_id: '382212153306-7q39hdie4ecj0uhemkitvedo93bnvfhn.apps.googleusercontent.com',
+  //     authority: 'https://accounts.google.com',
-      redirect_uri: '/callback',
+  //     client_id: '382212153306-7q39hdie4ecj0uhemkitvedo93bnvfhn.apps.googleusercontent.com',
-      response_type: 'id_token token',
+  //     redirect_uri: '/callback',
-      scope:
+  //     response_type: 'id_token token',
-        'email profile openid https://www.googleapis.com/auth/cloudplatformprojects.readonly https://www.googleapis.com/auth/cloud-healthcare', // email profile openid
+  //     scope:
-      // ~ OPTIONAL
+  //       'email profile openid https://www.googleapis.com/auth/cloudplatformprojects.readonly https://www.googleapis.com/auth/cloud-healthcare', // email profile openid
-      post_logout_redirect_uri: '/logout-redirect.html',
+  //     // ~ OPTIONAL
-      revoke_uri: 'https://accounts.google.com/o/oauth2/revoke?token=',
+  //     post_logout_redirect_uri: '/logout-redirect.html',
-      automaticSilentRenew: true,
+  //     revoke_uri: 'https://accounts.google.com/o/oauth2/revoke?token=',
-      revokeAccessTokenOnSignout: true,
+  //     automaticSilentRenew: true,
-
+  //     revokeAccessTokenOnSignout: true,
-      // Tambahan dari Google CLoud Secret
+  //   },
-      project_id: "westone-433204",
+  // ],
-      auth_uri: "https://accounts.google.com/o/oauth2/auth",
-      token_uri: "https://oauth2.googleapis.com/token",
-      auth_provider_x509_cert_url: "https://www.googleapis.com/oauth2/v1/certs",
-      client_secret: "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",
-      redirect_uris: [
-        "http://devkedungdoro.aplikasi.web.id:3000/callback"
-      ],
-      javascript_origins: [
-        "https://devone.aplikasi.web.id",
-        "http://devkedungdoro.aplikasi.web.id:3000"
-      ]
-    },
-  ],
   extensions: [],
   modes: [],
   showStudyList: true,
@@ -51,12 +41,9 @@ window.config = {
       configuration: {
         friendlyName: 'dcmjs DICOMWeb Server',
         name: 'GCP',
-        wadoUriRoot:
+        wadoUriRoot: `http://152.42.173.210:5555/dicomWeb`,
-          'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif/dicomWeb',
+        qidoRoot: `http://152.42.173.210:5555/dicomWeb`,
-        qidoRoot:
+        wadoRoot: `http://152.42.173.210:5555/dicomWeb`,
-          'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif/dicomWeb',
-        wadoRoot:
-          'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif/dicomWeb',
         qidoSupportsIncludeField: true,
         imageRendering: 'wadors',
         thumbnailRendering: 'wadors',
@@ -66,12 +53,12 @@ window.config = {
         dicomUploadEnabled: true,
         omitQuotationForMultipartRequest: true,
         configurationAPI: 'ohif.dataSourceConfigurationAPI.google',
-        defaultDicomStoreConfiguredItems: {
+        // defaultDicomStoreConfiguredItems: {
-          id: 'projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage',
+        //   id: 'projects/ohifproxy/locations/asia-southeast2/datasets/sas-storage',
-          itemType: '3',
+        //   itemType: '3',
-          name: 'ohif',
+        //   name: 'store-1',
-          url: 'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif'
+        //   url: 'https://healthcare.googleapis.com/v1/projects/ohifproxy/locations/asia-southeast2/datasets/sas-storage/dicomStores/store-1'
-        },
+        // },
       },
     },
     {

platform/ui-next/src/components/SidePanel/SidePanel.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Icons } from '../Icons';
 import { TooltipTrigger, TooltipContent, TooltipProvider, Tooltip } from '../Tooltip';
 import { Separator } from '../Separator';
+import { ScrollArea } from '../ScrollArea';
 
 type StyleMap = {
   open: {
@@ -152,10 +153,23 @@ const SidePanel = ({
   onClose,
   expandedWidth = 280,
   onActiveTabIndexChange,
+  servicesManager, // Tambah servicesManager as a prop
+  studyInstanceUID,
 }) => {
   const [panelOpen, setPanelOpen] = useState(activeTabIndexProp !== null);
   const [activeTabIndex, setActiveTabIndex] = useState(0);
 
+  const [isExpertiseVisible, setIsExpertiseVisible] = useState(false); // New state for expertise visibility
+  const [expertiseData, setExpertiseData] = useState(null);
+  const [isExpertiseLoading, setIsExpertiseLoading] = useState(false);
+
+  const { cornerstoneViewportService } = servicesManager.services;
+  const [viewportData, setViewportData] = useState(null);
+
+  // Harusnya (viewportId), tapi karena gabutuh perubahan viewport maka dihardcode 'default'
+  // const viewportInfo = cornerstoneViewportService.getViewportInfo('default');
+  // const studyInstanceUID = viewportInfo?.viewportData?.data?.[0]?.StudyInstanceUID || '';
+
   const styleMap = createStyleMap(expandedWidth, borderSize, collapsedWidth);
   const baseStyle = createBaseStyle(expandedWidth);
   const gridAvailableWidth = expandedWidth - closeIconWidth - gridHorizontalPadding;
@@ -196,6 +210,16 @@ const SidePanel = ({
     updateActiveTabIndex(activeTabIndexProp);
   }, [activeTabIndexProp, updateActiveTabIndex]);
 
+  const toggleExpertiseVisibility = () => {
+    const shouldOpenExpertise = !isExpertiseVisible;
+    setIsExpertiseVisible(shouldOpenExpertise);
+
+    // Open the side panel if the expertise panel is being shown
+    if (shouldOpenExpertise && !panelOpen) {
+      updatePanelOpen(true);
+    }
+  };
+
   const getCloseStateComponent = () => {
     const _childComponents = Array.isArray(tabs) ? tabs : [tabs];
     return (
@@ -255,6 +279,196 @@ const SidePanel = ({
     );
   };
 
+  // Tambahkan di atas useEffect fetchExpertiseData
+  useEffect(() => {
+    const fetchAccessionNumber = async () => {
+      if (!studyInstanceUID) {
+        console.warn('No StudyInstanceUID available');
+        return;
+      }
+
+      try {
+        const qidoRootUrl = getQidoRootUrl();
+        if (!qidoRootUrl) {
+          console.warn('QIDO root URL not configured');
+          return;
+        }
+
+        // Fetch data with specific fields including Accession Number
+        const response = await fetch(
+          `${qidoRootUrl}/studies?includefield=00080050&StudyInstanceUID=${studyInstanceUID}`
+        );
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch study data');
+        }
+
+        const data = await response.json();
+
+        if (data && data.length > 0) {
+          // Extract accession number from DICOM tag 00080050
+          const accessionNumber = data[0]['00080050']?.Value?.[0] || '';
+
+          // If we have an accession number, call fetchExpertiseData
+          if (accessionNumber) {
+            console.log('Found Accession Number:', accessionNumber);
+            fetchExpertiseData(accessionNumber);
+          } else {
+            console.warn('Accession number not found in study data');
+          }
+        } else {
+          console.warn('No study data returned');
+        }
+      } catch (error) {
+        console.error('Error fetching accession number:', error);
+      }
+    };
+
+    // Helper function to get QIDO root URL
+    const getQidoRootUrl = () => {
+      const { config } = window;
+      if (!config?.dataSources || !config.defaultDataSourceName) {
+        return null;
+      }
+
+      const dataSource = config.dataSources.find(
+        ds => ds.sourceName === config.defaultDataSourceName
+      );
+
+      return dataSource?.configuration?.qidoRoot;
+    };
+
+    fetchAccessionNumber();
+  }, [studyInstanceUID]); // Run when studyInstanceUID changes
+
+  // Ubah fungsi fetchExpertiseData menjadi dengan parameter accessionNumber
+  const fetchExpertiseData = async accessionNumber => {
+    try {
+      // Check if window.config.expertise_host exists
+      if (!window.config?.expertise_host) {
+        console.warn('Expertise host not configured in window.config.expertise_host');
+        return;
+      }
+
+      if (!accessionNumber) {
+        console.warn('No accession number available for expertise lookup');
+        return;
+      }
+
+      setIsExpertiseLoading(true);
+      const url = `${window.config.expertise_host}/nv/query.php?method=view&AccessionNumber=${encodeURIComponent(accessionNumber)}`;
+
+      const response = await fetch(url);
+      const data = await response.json();
+      console.log('Study data:', data);
+
+      if (data?.study?.expertise && data.study.expertise.length > 0) {
+        setExpertiseData(data.study.expertise[0]);
+      }
+    } catch (error) {
+      console.error('Error fetching expertise data:', error);
+    } finally {
+      setIsExpertiseLoading(false);
+    }
+  };
+
+  const getExpertisePanel = () => {
+    if (side !== 'right') return null; // Only show in the right side panel
+
+    if (isExpertiseLoading) {
+      return (
+        <div className="flex h-[500px] w-[350px] items-center justify-center text-white">
+          Loading expertise data...
+        </div>
+      );
+    }
+
+    if (!expertiseData) {
+      return null;
+    }
+
+    const parseExpertise = text => {
+      if (!text) return {};
+
+      const result = {};
+      let currentSection = 'Keterangan';
+
+      // Split expertise text by lines and process each line
+      const lines = text.split('\r\n').filter(line => line.trim() !== '');
+
+      lines.forEach(line => {
+        // Check if this is a section header
+        if (line.includes(':') && !line.trim().startsWith('-')) {
+          const parts = line.split(':');
+          currentSection = parts[0].trim();
+          const value = parts[1]?.trim() || '';
+
+          if (value) {
+            if (!result[currentSection]) {
+              result[currentSection] = [];
+            }
+            result[currentSection].push(value);
+          }
+        } else if (line.toLowerCase().includes('kesan')) {
+          currentSection = 'Kesan';
+        } else {
+          // Add line to current section
+          if (!result[currentSection]) {
+            result[currentSection] = [];
+          }
+          result[currentSection].push(line.trim());
+        }
+      });
+
+      return result;
+    };
+
+    const parsedSections = parseExpertise(expertiseData.expertise);
+
+    // Create formatted data structure
+    const formattedData = [
+      { label: 'Dokter Pengirim', value: expertiseData.ordering_physician || '' },
+      { label: 'Dokter Radiologis', value: expertiseData.radiologist || '' },
+      { label: 'Waktu Expertise', value: expertiseData.expertise_dttm || '' },
+    ];
+
+    // Add additional sections from parsed text
+    Object.entries(parsedSections).forEach(([key, value]) => {
+      formattedData.push({
+        label: key,
+        value: Array.isArray(value) ? value : [value],
+      });
+    });
+
+    return (
+      <ScrollArea className="border-input bg-background h-[500px] w-full rounded-md border p-2 text-sm text-white">
+        <h3 className="mb-4 text-lg font-bold">Expertise</h3>
+        {formattedData.map((section, index) => (
+          <div
+            key={index}
+            className="mb-4"
+          >
+            <h5 className="text-base font-bold">{section.label}:</h5>
+            {Array.isArray(section.value) ? (
+              <ul className="list-disc pl-6">
+                {section.value.map((item, idx) => (
+                  <li
+                    key={idx}
+                    className="break-words"
+                  >
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="break-words">{section.value}</p>
+            )}
+          </div>
+        ))}
+      </ScrollArea>
+    );
+  };
+
   const getCloseIcon = () => {
     return (
       <div
@@ -386,6 +600,7 @@ const SidePanel = ({
             }
             return null;
           })}
+          {getExpertisePanel()} {/* Add expertise panel here */}
         </>
       ) : (
         <React.Fragment>{getCloseStateComponent()}</React.Fragment>
@@ -413,6 +628,8 @@ SidePanel.propTypes = {
   onClose: PropTypes.func,
   onActiveTabIndexChange: PropTypes.func,
   expandedWidth: PropTypes.number,
+  servicesManager: PropTypes.object.isRequired, // Tambah servicesManager prop
+  studyInstanceUID: PropTypes.string, // Tambahkan prop studyInstanceUID
 };
 
 export { SidePanel };

platform/ui-next/src/components/StudyBrowser/StudyBrowser.tsx

@@ -62,6 +62,8 @@ const StudyBrowser = ({
               data-cy="thumbnail-list"
               viewPreset={viewPreset}
               onThumbnailContextMenu={onThumbnailContextMenu}
+              servicesManager={servicesManager} // Pass servicesManager ke Study Item
+              studyInstanceUid={studyInstanceUid}
             />
           </React.Fragment>
         );

platform/ui-next/src/components/StudyItem/StudyItem.tsx

@@ -20,7 +20,11 @@ const StudyItem = ({
   onClickUntrack,
   viewPreset = 'thumbnails',
   onThumbnailContextMenu,
+  servicesManager, // Tambah servicesManager as a prop
+  studyInstanceUid = '',
 }: withAppTypes) => {
+  // FETCHING ACCESSION NUMBER DAN EXPERTISE
+
   return (
     <Accordion
       type="single"
@@ -55,15 +59,33 @@ const StudyItem = ({
           }}
         >
           {isExpanded && displaySets && (
-            <ThumbnailList
+            <>
-              thumbnails={displaySets}
+              {/* Expertise Button */}
-              activeDisplaySetInstanceUIDs={activeDisplaySetInstanceUIDs}
+              <div
-              onThumbnailClick={onClickThumbnail}
+                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"
-              onThumbnailDoubleClick={onDoubleClickThumbnail}
+                onClick={() => {
-              onClickUntrack={onClickUntrack}
+                  // Trigger the expertise panel in the right side panel (segmentation Panel)
-              viewPreset={viewPreset}
+                  servicesManager.services.panelService.activatePanel(
-              onThumbnailContextMenu={onThumbnailContextMenu}
+                    // '@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>
@@ -86,6 +108,8 @@ StudyItem.propTypes = {
   onDoubleClickThumbnail: PropTypes.func,
   onClickUntrack: PropTypes.func,
   viewPreset: PropTypes.string,
+  servicesManager: PropTypes.object.isRequired, // Tambah servicesManager prop
+  studyInstanceUid: PropTypes.string.string,
 };
 
 export { StudyItem };