Seamless/Smooth st.slider for 3D medical scans

Custom Components
1

Hi,
When I use the default st.slider and st.image as shown in the code snippet below, the 2D slices of a 3D medical scan dont load smoothly/seamlessly (as they would in any medical scan viewer). Only once I halt at a particular point in the slider, does the st.image refresh itself.

# Step 1 - Load 3D image [depth, widdth, height]
usScanArray = loadUSScan(dcmPath)

# Step 2 - Define slide to scroll through depth
depthSlider = st.slider('Select time step', 0, usScanArray.shape[0] - 1)

# Step 3 - Display image
usScan2D = usScanArray[depthSlider, :, :]
st.image(usScan2D)

So I am attempting to build a custom component for this and would like to get some feedback on whats the best way to achieve this

  1. I tried the video tutorial here with the Discrete Slider example.
    • My first goal here was to see whether I can slide along the bar and have values update immediately, but was unable to accomplish that using both onChange(event, value) as well as onChangeCommitted(event, value). Online links say they are pretty much the same thing.
class MedicalScanSlider extends StreamlitComponentBase{
  public render = (): ReactNode => {
    
      const {startValue, endValue} = this.props.args;

      return (
        <div>
          <Slider
            defaultValue={startValue}
            min={startValue}
            max={endValue}
            onChange={(event, value) => {
              Streamlit.setComponentValue(value);
            }}
          />
        </div>
      );
  }
}

  1. Then I tried to pass the 3D volume directly as an input

    • I then get the error that it expects a 2D array. The traceback refers to pandas. Any idea why?

  2. My last option (thank you chatGPT) was try to flatten the input, and rebuild it as 3D inside the javascript component

    • My lack of experience with javascript coding is really blocking me from getting this done.
    • For e.g. what JS technique allows one to display a 2D array of numbers as an image? Maybe canvas as done in streamlit-drawable-canvas

A similar question was asked before.
Any help is appreciated.

2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.