Skip to main content

Visualize Tomography

Now that you know how to load medical data, you may want to visualize it.

In this case, Sethealth makes it very easy to visualize medical imaging thanks to set of custom components.

Workspace#

Before getting into too much details, it's required to understand workspaces in Sethealth.

Sethealth's workspaces are the ones in charge of connecting the medical data with the UI components, and keeping them syncronized.

Most of the components have a property/attribute called workspace where a Workspace value should be placed.

Here's the list of components that have a workspace property, you can use:

  • set-view-slices
  • set-view-volumetric
  • set-view-geometry
  • set-control-geometry
  • set-control-toolbar

Alright, let's see how we can create a workspace from previously loaded medical data..

import * as sethealth from "@sethealth/core";
const result = await sethealth.med.loadFromSource({
type: "nrrd",
input:
"https://public1-eu-sethealth.ams3.cdn.digitaloceanspaces.com/public/ankle.nrrd.gz",
});
if (result.error) {
console.error(result.error);
return;
}
const medicalData: MedHandler = result.value[0];
const workspace: Workspace = sethealth.workspace.create(medicalData);
console.log('This workspace represent my medical data', workspace);

Now with this workspace can be passed down to different components and all of them will share the same medical data.

In the example above the workspace was created from a MedHandler, but this is not the only way. A workspace can be instanciate from a previously serialized workspace (SerializableWorkspace), please refer to the workspace docs for further information.

View tomography slices#

Let's now use our workspace and connect it with the set-view-slices component, it will help us visualize on screen, a slice of the loaded medical data, in this case a CT:.

<SetViewSlices projection="axial" workspace={myWorkpsace}/>

Notice that in the example, we also provided the projection property, this allows the component to perform a reprojection of the same slices from a different angle. For further information, check out the <SetViewSlices> component docs.

Example#

Here you can see and edit a complete example:

Volumetric rendering of a CT#

Other kind of visualization is the Volumetric 3D rendering of a tomography, in this case, the set-view-volumetric would be use:

<SetViewVolumetric workspace={workspace}>/>

As shown above, the same workspace is also used. This component will render a volumetric ray casting of the same CT. Please refer to the docs for further information.

Live example#

View grid panel#

This "view" components can be combined and arranged to create a more complex visualization product. Sethealth comes with a built-in grid component that simplifies the task, set-grid-panel.

<SetGridPanel>
<SetPane viewId="1" type="slices-axial" workspace={workspace} />
<SetPane viewId="2" type="volumetric" workspace={workspace} />
<SetPane viewId="3" type="slices-sagital" workspace={workspace} />
<SetPane viewId="4" type="slices-coronal" workspace={workspace} />
</SetGridPanel>

Furthermore, these visualizers would be syncronized since they are sharing the same workspace. This components also provides different layout and personalization options, check out their docs.

Say that <SetPane> is a generic component for <SetViewVolumetric> and <SetViewSlices>.

Example#

Here you can see and edit a complete example: