Bypassing Choosing Google Healthcare Dicom Store in OHIF #7

New Issue

mario · 2025-04-02T11:24:45+07:00

mario commented

2025-04-02 11:24:45 +07:00

Date: Wed, 2 Apr 2025
Tags: #ohif #dicom

By default ketika datasource dari Google Healthcare, maka akan muncul modal untuk melakukan pemilihan DICOM Store.

Ketika kita hanya mempunyai 1 DICOM Store, hal ini menjadi sebuah kekurangan dalam segi UX. Oleh karena itu, perlu dilakukan bypassing.

Idenya ialah men-define DICOM store secara default dari config, sehingga tidak perlu memilih lagi.

Tahap 1: Hardcode DICOM Store

Modal tersebut berada di extensions/default/src/Components/DataSourceConfigurationComponent.tsx dan dipanggil pada kondisi berikut:

if (configuredItems.length !== configurationAPI.getItemLabels().length) {
// Not the correct number of configured items, so show the modal to configure the data source.
      showConfigurationModal();
    }

Oleh karena itu, sebelum pengecekan tersebut kita harus pastikan panjang keduanya sama sehingga tidak perlu menampilkan modal.

Berikut cara hardcode:

...
const [configuredItems, setConfiguredItems] =
    useState<Array<Types.BaseDataSourceConfigurationAPIItem>>();

// Tambahan
const dicomStoreConfiguredItems = {
  id : 'projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage',
  itemType: '3',
  name: 'ohif',
  url: 'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif'
};

useEffect(() => {
...

...
// Tambahkan dicomStoreConfiguredItems ke configuraedItems
if (!configuredItems.some(item => item.id === dicomStoreConfiguredItems.id)) {
  setConfiguredItems(prevItems => [...prevItems, dicomStoreConfiguredItems]);
}

if (configuredItems.length !== configurationAPI.getItemLabels().length) {
  // Not the correct number of configured items, so show the modal to configure the data source.
  showConfigurationModal();
}
...

Tahap 2: Ambil dari Config

Tambahkan kode berikut di google.js

...
omitQuotationForMultipartRequest: true,
configurationAPI: 'ohif.dataSourceConfigurationAPI.google',
// Tambahan:
defaultDicomStoreConfiguredItems: {
  id: 'projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage',
  itemType: '3',
  name: 'ohif',
  url: 'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif'
},
...

Tambahan di extensions/default/src/Components/DataSourceConfigurationComponent.tsx:

// ... existing code ...
const [dicomStoreConfiguredItems, setDicomStoreConfiguredItems] = useState();

useEffect(() => {
  let shouldUpdate = true;

  const dataSourceChangedCallback = async () => {
    const activeDataSourceDef = extensionManager.getActiveDataSourceDefinition();

    if (!activeDataSourceDef.configuration.configurationAPI) {
      return;
    }

    // Tambahan untuk ambil defaultDicomStoreConfiguredItems dari config
setDicomStoreConfiguredItems(activeDataSourceDef.configuration.defaultDicomStoreConfiguredItems);
// ... existing code ...

useEffect(() => {
  if (!configurationAPI || !configuredItems || !dicomStoreConfiguredItems) {
    return;
  }
// Tambahan untuk bypassing
  if (!configuredItems.some(item => item.id === dicomStoreConfiguredItems.id)) {
    setConfiguredItems(prevItems => [...prevItems, dicomStoreConfiguredItems]);
  }
// ... existing code ...

Perubahan yang dilakukan:

Mengubah dicomStoreConfiguredItems menjadi state menggunakan useState
Menambahkan pengecekan !dicomStoreConfiguredItems sebelum mengakses propertinya
Menggunakan setDicomStoreConfiguredItems untuk mengupdate nilai
Dengan perubahan ini, kode akan lebih aman karena:

Nilai dicomStoreConfiguredItems akan dipertahankan antara render
Tidak akan terjadi error karena mengakses properti dari undefined
Perubahan state akan memicu re-render yang sesuai

Date: Wed, 2 Apr 2025 Tags: #ohif #dicom By default ketika datasource dari Google Healthcare, maka akan muncul modal untuk melakukan pemilihan DICOM Store. ![image](/attachments/01c87c19-845a-43ad-a191-d926c9084778) Ketika kita hanya mempunyai 1 DICOM Store, hal ini menjadi sebuah kekurangan dalam segi UX. Oleh karena itu, perlu dilakukan *bypassing*. Idenya ialah **men-define DICOM store secara default dari config**, sehingga tidak perlu memilih lagi. --- #### Tahap 1: Hardcode DICOM Store Modal tersebut berada di `extensions/default/src/Components/DataSourceConfigurationComponent.tsx` dan dipanggil pada kondisi berikut: ```js if (configuredItems.length !== configurationAPI.getItemLabels().length) { // Not the correct number of configured items, so show the modal to configure the data source. showConfigurationModal(); } ``` Oleh karena itu, *sebelum pengecekan tersebut kita harus pastikan panjang keduanya* sama sehingga tidak perlu menampilkan modal. Berikut **cara hardcode**: ```js ... const [configuredItems, setConfiguredItems] = useState<Array<Types.BaseDataSourceConfigurationAPIItem>>(); // Tambahan const dicomStoreConfiguredItems = { id : 'projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage', itemType: '3', name: 'ohif', url: 'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif' }; useEffect(() => { ... ... // Tambahkan dicomStoreConfiguredItems ke configuraedItems if (!configuredItems.some(item => item.id === dicomStoreConfiguredItems.id)) { setConfiguredItems(prevItems => [...prevItems, dicomStoreConfiguredItems]); } if (configuredItems.length !== configurationAPI.getItemLabels().length) { // Not the correct number of configured items, so show the modal to configure the data source. showConfigurationModal(); } ... ``` --- #### Tahap 2: Ambil dari Config Tambahkan kode berikut di `google.js` ```js ... omitQuotationForMultipartRequest: true, configurationAPI: 'ohif.dataSourceConfigurationAPI.google', // Tambahan: defaultDicomStoreConfiguredItems: { id: 'projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage', itemType: '3', name: 'ohif', url: 'https://healthcare.googleapis.com/v1/projects/westone-433204/locations/asia-southeast2/datasets/sas-dicom-storage/dicomStores/ohif' }, ... ``` Tambahan di `extensions/default/src/Components/DataSourceConfigurationComponent.tsx`: ```js // ... existing code ... const [dicomStoreConfiguredItems, setDicomStoreConfiguredItems] = useState(); useEffect(() => { let shouldUpdate = true; const dataSourceChangedCallback = async () => { const activeDataSourceDef = extensionManager.getActiveDataSourceDefinition(); if (!activeDataSourceDef.configuration.configurationAPI) { return; } // Tambahan untuk ambil defaultDicomStoreConfiguredItems dari config setDicomStoreConfiguredItems(activeDataSourceDef.configuration.defaultDicomStoreConfiguredItems); // ... existing code ... useEffect(() => { if (!configurationAPI || !configuredItems || !dicomStoreConfiguredItems) { return; } // Tambahan untuk bypassing if (!configuredItems.some(item => item.id === dicomStoreConfiguredItems.id)) { setConfiguredItems(prevItems => [...prevItems, dicomStoreConfiguredItems]); } // ... existing code ... ``` Perubahan yang dilakukan: 1. Mengubah `dicomStoreConfiguredItems` menjadi state menggunakan useState 2. Menambahkan pengecekan `!dicomStoreConfiguredItems` sebelum mengakses propertinya 3. Menggunakan `setDicomStoreConfiguredItems` untuk mengupdate nilai Dengan perubahan ini, kode akan lebih aman karena: - Nilai `dicomStoreConfiguredItems` akan dipertahankan antara render - *Tidak akan terjadi error* karena mengakses properti dari undefined - Perubahan state akan memicu re-render yang sesuai

image.png

89 KiB

mario closed this issue

2025-04-02 11:25:02 +07:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: mario/ohif-viewer#7