Multi-Frame Data

A SharedImageSet can consist of multiple frames, as reported by SharedImageSet.size(). This is how the ImFusion SDK models for example a 2D Ultrasound series or a 3D volume at various timestamps. The following demo shows a 2D Ultrasound series next to a single-frame CT volume. Use the mousewheel on the Ultrasound view or the slider below to scrub through the individual frames:

The currently selected (or focused) frame can be queried and changed:

const data = await imf.loadFileFromUrl('/data/ultrasound.imf');
imf.showAll(data);

const sis = imf.dataModel.getImage()!;
const focus = sis.focus();

if (sis.size() > 1)
  sis.setFocus(sis.size() - 1);

To react to changes made elsewhere (by another control) subscribe with onSelectionChanged. It returns an unsubscribe function:

const off = sis.onSelectionChanged(() => {
  console.log(sis.focus());
});

// later
off();

React

useFrameSelection subscribes to onSelectionChanged for you and returns the current focus index, a setter, and the total frame count. This allows you to implement a React component that controls and listens to updates to the currently focused frame:

import { useFrameSelection } from '@imfusion/sdk-react';

function FocusedFrame({ sis }: { sis: SharedImageSet }) {
  const { focus, setFocus, count } = useFrameSelection(sis);

  return (
    <input
      type="range"
      min={0}
      max={count - 1}
      value={focus}
      onChange={e => setFocus(Number(e.target.value))}
    />
  );
}

The Demo above is driven by a FrameSelection component which renders a slider that allows you to scrub through the selected frames and reports the currently focused frame and the total number of frames. It additionally handles the case of multiple SharedImageSets. You can for example query the currently visible data and the FrameSelection component will select any multi-frame images whose number of frames matches the first multi-frame image. The component then provides a single slider to sync the focused frame between these datasets:

function FocusWidget() {
  const visibleData = useVisibleData();
  return <FrameSelection data={visibleData} orientation={'horizontal'}></FrameSelection>;
}