Skip to main content

Loading Medical Data

The first thing you might want to do with Sethealth is to load medical data into the system.

Sethealth exposes all the medical data APIs in the med module. This module exposes a set of different APIs to load medical from different sources and formats.

The main API is med.loadFromSource(source: MedSource). This function takes a config object that specifis the source's input and the format of the data, for the moment, sethealth supports the following formats:

  • "dicom"
  • "nrrd"
  • "nifty"
  • "png"
  • "raw"

Loading from source#

Some medical imaging formats such as nrrd and nifty are self-contained, so a single URL might be enough to load the whole 3D image:

import * as sethealth from '@sethealth/core';
const res = await sethealth.med.loadFromSource({
type: 'nrrd' // 'dicom' | 'nifty' | 'png' | 'raw'
input: 'https://public.sethealth.app/ankle.nrrd.gz'
});
if (res.error) {
// loading failed
} else {
const handlers = res.value;
const medicalData = handlers[0];
console.log(medicalData);
}

However, in other formats such as dicom, a single image (or study) might be spread across multiple files, if this is the case, the input option can also accept an array of URLs:

import * as sethealth from '@sethealth/core';
const res = await sethealth.med.loadFromSource({
type: 'dicom'
input: [
'https://public.sethealth.app/ankle/100.dcm',
'https://public.sethealth.app/ankle/101.dcm'
'https://public.sethealth.app/ankle/102.dcm'
'https://public.sethealth.app/ankle/103.dcm'
'https://public.sethealth.app/ankle/104.dcm'
'https://public.sethealth.app/ankle/105.dcm'
'https://public.sethealth.app/ankle/106.dcm'
'https://public.sethealth.app/ankle/107.dcm'
'https://public.sethealth.app/ankle/108.dcm'
'https://public.sethealth.app/ankle/109.dcm'
'https://public.sethealth.app/ankle/110.dcm'
'https://public.sethealth.app/ankle/111.dcm'
'https://public.sethealth.app/ankle/112.dcm'
'https://public.sethealth.app/ankle/113.dcm'
'https://public.sethealth.app/ankle/114.dcm'
'https://public.sethealth.app/ankle/115.dcm'
]
});
if (res.error) {
// loading failed
} else {
const handlers = res.value;
const medicalData = handlers[0];
console.log(medicalData);
}

::: Don't worry about the order of the URLs in the array, Sethealth will sort them correctly under the hood :::

As you can see, this loadFromSource() (and all loading APIs) return a Result<T> object. This is because loading APIs are likely to fail because of network of filesystem disconnections, so the developers need to take proper action when this errors happen.

Now, the value of the Result is an array of MedHandler, each one is potentially a different medical resource. This can happen because a single source might contain more than one image.

Now with medicalData you can do all sorts of things, such as, getting the raw pixels, quering the dicom for different metadata, compute the image histogram, visualize it... please refer to the med module docs to see all.

Loading from the filesystem#

Sethealth includes a convenient API in order to load medical images from the local filesyste:

import * as sethealth from "@sethealth/core";
const result = await sethealth.med.loadFromFilesystem();
if (result.error) {
console.error("Something happened while loading", result.error);
return;
}
const medicalData = result.value[0];
console.log(medicalData);

This API will show a file selection dialog that the user can use to import medical data from their local computer.

Analogously to the loadFromSource() API, this API also returns Result object that can be unwrapped to an array of medical resources.

<SetFileLoader/>#

Since loading medical data from the local system is an extremelly common use case, Sethealth comes with an UI component that handles the whole process seamlessly.

Under the hood, <SetFileLoader/> uses the same APIs exposed in med, but provides some extra value:

  • Showing a file selection dialog when clicked.
  • Displaying a drag-and-drop area for users to load medical data easily.
  • Display the correct progress bar while the data is being loaded.
<SetFileLoader type="med" onSetMedLoad={this.onMedLoad}>
Drop your medical files here
</SetFileLoader>

As you can see in the example above, a type and an event handler are passed down as attributes.

The type specifies which kind of resource this component is intended to load. By default it's "med", however, this components can also be used to load other kind of assets, such as:

  • "med": loading a medical files (dicoms, nifty, nrrd)
  • "geometry": 3d model files, such as the .stl format.
  • "files": any file, this component will load the file without trying to parse it.

Events#

Once this component sucesfully loads some medical data (after some user interaction), it emits the setMedLoad event, which includes the same array of handlers from loadFromSource() and loadFromFilesystem().

private async onMedLoad(ev: CustomEvent<MedLoadDetail>) {
const handlers = ev.detail.items;
}

Live example#