Reslice mapper representation

package.json

@@ -42,15 +42,15 @@
     "dev": "rollup ./src/index.js -c --watch"
   },
   "peerDependencies": {
-    "@kitware/vtk.js": "^26.8.0",
+    "@kitware/vtk.js": "^28.0.0",
     "react": "^16.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
-    "@kitware/vtk.js": "^26.5.3",
+    "@kitware/vtk.js": "^28.0.0",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "17.0.0",
     "@rollup/plugin-eslint": "^8.0.1",

src/core/ResliceRepresentation.js

@@ -0,0 +1,150 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import vtkSliceRepresentation from './SliceRepresentation';
+import { ViewContext, RepresentationContext, DownstreamContext } from './View';
+
+import vtkImageResliceMapper from '@kitware/vtk.js/Rendering/Core/ImageResliceMapper.js';
+import { SlabTypes } from '@kitware/vtk.js/Rendering/Core/ImageResliceMapper/Constants.js';
+
+/**
+ * ResliceRepresentation is an image slice representation that allows:
+ *   - Orthogonal slicing
+ *   - Oblique slicing
+ *   - Slab mode (thick slices)
+ *   - Slice a volume using arbitary geometry
+ */
+export default class ResliceRepresentation extends vtkSliceRepresentation {
+  constructor(props) {
+    super(props);
+    // Create the vtk.js objects
+    this.mapper = props.mapperInstance ?? vtkImageResliceMapper.newInstance();
+    this.actor.setMapper(this.mapper);
+    this.actor.getProperty().setRGBTransferFunction(0, this.lookupTable);
+    // this.actor.getProperty().setScalarOpacity(0, this.piecewiseFunction);
+    this.actor.getProperty().setInterpolationTypeToLinear();
+  }
+
+  render() {
+    return (
+      <ViewContext.Consumer>
+        {(view) => {
+          if (!this.view) {
+            view.renderer.addActor(this.actor);
+            this.view = view;
+          }
+          return (
+            <RepresentationContext.Provider value={this}>
+              <DownstreamContext.Provider value={this.mapper}>
+                <div key={this.props.id} id={this.props.id}>
+                  {this.props.children}
+                </div>
+              </DownstreamContext.Provider>
+            </RepresentationContext.Provider>
+          );
+        }}
+      </ViewContext.Consumer>
+    );
+  }
+
+  componentDidMount() {
+    this.update(this.props);
+  }
+
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    this.update(this.props, prevProps);
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount();
+    if (this.view && this.view.renderer) {
+      this.view.renderer.removeActor(this.actor);
+    }
+  }
+
+  update(props, previous) {
+    const {
+      slicePlane,
+      slicePolyData,
+      slabType,
+      slabThickness,
+      slabTrapezoidIntegration,
+    } = props;
+    let changed = false;
+    if (!previous || slicePlane !== previous.slicePlane) {
+      changed = this.mapper.setSlicePlane(slicePlane);
+    }
+    if (!previous || slicePolyData !== previous.slicePolyData) {
+      changed = this.mapper.setSlicePolyData(slicePolyData);
+    }
+    if (this.validData) {
+      if (
+        slabType != null &&
+        (!previous || slabType !== previous.slabType) &&
+        slabType >= SlabTypes.MIN &&
+        slabType <= SlabTypes.SUM
+      ) {
+        changed = this.mapper.setSlabType(slabType);
+      }
+      if (
+        slabThickness != null &&
+        (!previous || slabThickness !== previous.slabThickness)
+      ) {
+        changed = this.mapper.setSlabThickness(slabThickness);
+      }
+      if (
+        slabTrapezoidIntegration != null &&
+        (!previous ||
+          slabTrapezoidIntegration !== previous.slabTrapezoidIntegration)
+      ) {
+        changed = this.mapper.setSlabTrapezoidIntegration(
+          slabTrapezoidIntegration
+        );
+      }
+    }
+    super.update(props, previous);
+
+    // trigger render
+    if (changed) {
+      super.dataChanged();
+    }
+  }
+}
+
+ResliceRepresentation.defaultProps = {
+  sliceThickness: 0.0,
+  slabType: SlabTypes.MEAN,
+  slabTrapezoidIntegration: false,
+};
+
+ResliceRepresentation.propTypes = {
+  /**
+   * Slice plane
+   */
+  slicePlane: PropTypes.object,
+
+  /**
+   * Optional slice polydata
+   */
+  slicePolyData: PropTypes.object,
+
+  /**
+   * Slab type
+   */
+  slabType: PropTypes.number,
+
+  /**
+   * Slab thickness
+   */
+  slabThickness: PropTypes.number,
+
+  /**
+   * Slab trapezoid integration
+   */
+  slabTrapezoidIntegration: PropTypes.bool,
+
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+};

src/core/index.js

@@ -1,5 +1,6 @@
 import vtkVolumeRepresentation from './VolumeRepresentation';
 import vtkSliceRepresentation from './SliceRepresentation';
+import vtkResliceRepresentation from './ResliceRepresentation';
 import vtkVolumeController from './VolumeController';
 import vtkPointData from './PointData';
 import vtkPolyData from './PolyData';
@@ -20,6 +21,7 @@ import vtkMultiViewRoot from './MultiViewRoot';
 
 export const VolumeRepresentation = vtkVolumeRepresentation;
 export const SliceRepresentation = vtkSliceRepresentation;
+export const ResliceRepresentation = vtkResliceRepresentation;
 export const VolumeController = vtkVolumeController;
 export const PointData = vtkPointData;
 export const PolyData = vtkPolyData;
@@ -41,6 +43,7 @@ export const MultiViewRoot = vtkMultiViewRoot;
 export default {
   VolumeRepresentation: vtkVolumeRepresentation,
   SliceRepresentation: vtkSliceRepresentation,
+  ResliceRepresentation: vtkResliceRepresentation,
   VolumeController: vtkVolumeController,
   PointData: vtkPointData,
   PolyData: vtkPolyData,

src/light.js

@@ -13,6 +13,7 @@ import {
 // Core
 export const VolumeRepresentation = Core.VolumeRepresentation;
 export const SliceRepresentation = Core.SliceRepresentation;
+export const ResliceRepresentation = Core.ResliceRepresentation;
 export const VolumeController = Core.VolumeController;
 export const PointData = Core.PointData;
 export const PolyData = Core.PolyData;

usage/src/App.jsx

@@ -12,7 +12,10 @@ const SourceViewer = lazy(() => import('./Geometry/SourceViewer'));
 const Glyph = lazy(() => import('./Geometry/Glyph'));
 const CutterExample = lazy(() => import('./Geometry/CutterExample'));
 const SliceRendering = lazy(() => import('./Volume/SliceRendering'));
-const ImageSeriesRendering = lazy(() => import('./Volume/ImageSeriesRendering'));
+const ResliceRendering = lazy(() => import('./Volume/ResliceRendering'));
+const ImageSeriesRendering = lazy(() =>
+  import('./Volume/ImageSeriesRendering')
+);
 const SyntheticVolumeRendering = lazy(() =>
   import('./Volume/SyntheticVolumeRendering')
 );
@@ -31,6 +34,7 @@ const demos = [
   'Geometry/Glyph',
   'Geometry/CutterExample',
   'Volume/SliceRendering',
+  'Volume/ResliceRendering',
   'Volume/ImageSeriesRendering',
   'Volume/SyntheticVolumeRendering',
   'Volume/VolumeRendering',
@@ -91,8 +95,11 @@ function App() {
           {example === 'Geometry/SourceViewer' && <SourceViewer />}
           {example === 'Geometry/Glyph' && <Glyph />}
           {example === 'Geometry/CutterExample' && <CutterExample />}
+          {example === 'Volume/ResliceRendering' && <ResliceRendering />}
           {example === 'Volume/SliceRendering' && <SliceRendering />}
-          {example === 'Volume/ImageSeriesRendering' && <ImageSeriesRendering />}
+          {example === 'Volume/ImageSeriesRendering' && (
+            <ImageSeriesRendering />
+          )}
           {example === 'Volume/SyntheticVolumeRendering' && (
             <SyntheticVolumeRendering />
           )}

usage/src/Volume/ResliceRendering.jsx

@@ -0,0 +1,376 @@
+import React, { useState, useContext } from 'react';
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps.js';
+import { SlabTypes } from '@kitware/vtk.js/Rendering/Core/ImageResliceMapper/Constants.js';
+import { InterpolationType } from '@kitware/vtk.js/Rendering/Core/ImageProperty/Constants.js';
+import { newInstance as newVtkCylinderInstance } from '@kitware/vtk.js/Filters/Sources/CylinderSource.js';
+import { newInstance as newVtkPlaneInstance } from '@kitware/vtk.js/Common/DataModel/Plane.js';
+
+import {
+  View,
+  ShareDataSet,
+  ResliceRepresentation,
+  Reader,
+  Contexts,
+  VolumeController,
+  VolumeRepresentation,
+} from 'react-vtk-js';
+
+const plane = newVtkPlaneInstance({
+  origin: [127, 0, 0],
+  normal: [1, 0, 0],
+});
+const cyl = newVtkCylinderInstance({
+  height: 255,
+  radius: 50,
+  resolution: 20,
+  capping: 1,
+  center: [127, 127, 94],
+});
+
+function Slider(props) {
+  const view = useContext(Contexts.ViewContext);
+  const onChange = (e) => {
+    const value = Number(e.currentTarget.value);
+    props.setValue(value);
+    setTimeout(view.renderView, 0);
+  };
+  return (
+    <label
+      style={{
+        position: 'absolute',
+        zIndex: 100,
+        left: '5px',
+        top: '0px',
+        ...props.style,
+      }}
+    >
+      {props.label}
+      <input
+        type='range'
+        min='0'
+        max={props.max}
+        value={props.value}
+        onChange={onChange}
+        style={{
+          position: 'sticky',
+          zIndex: 100,
+          left: '5px',
+          top: '5px',
+          ...props.style,
+        }}
+      />
+    </label>
+  );
+}
+
+function DropDown(props) {
+  const view = useContext(Contexts.ViewContext);
+  function onChange(e) {
+    const value = e.currentTarget.value;
+    props.setValue(value);
+    setTimeout(view.renderView, 0);
+  }
+  return (
+    <label
+      style={{
+        position: 'absolute',
+        zIndex: 100,
+        left: '5px',
+        top: '5px',
+        ...props.style,
+      }}
+    >
+      {props.label}
+      <select
+        value={props.value}
+        onChange={onChange}
+        style={{
+          position: 'sticky',
+          zIndex: 100,
+          ...props.style,
+        }}
+      >
+        {props.options.map((opt) => (
+          <option key={opt} value={opt}>
+            {opt}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
+
+function EnumDropDown(props) {
+  const view = useContext(Contexts.ViewContext);
+  function onChange(e) {
+    const value = parseInt(e.currentTarget.value);
+    props.setValue(value);
+    setTimeout(view.renderView, 0);
+  }
+  return (
+    <label
+      style={{
+        position: 'absolute',
+        zIndex: 100,
+        left: '5px',
+        top: '55px',
+        ...props.style,
+      }}
+    >
+      {props.label}
+      <select
+        value={props.value}
+        label={props.label}
+        id={props.label}
+        onChange={onChange}
+        style={{
+          position: 'sticky',
+          zIndex: 100,
+          ...props.style,
+        }}
+      >
+        {Object.entries(props.options).map((opt) => {
+          return (
+            <option key={opt[0]} value={opt[1]}>
+              {opt[0]}
+            </option>
+          );
+        })}
+      </select>
+    </label>
+  );
+}
+
+function CheckBox(props) {
+  const view = useContext(Contexts.ViewContext);
+  function onChange(e) {
+    const value = e.currentTarget.checked;
+    props.setValue(value);
+    setTimeout(view.renderView, 0);
+  }
+  return (
+    <label
+      style={{
+        position: 'absolute',
+        zIndex: 100,
+        left: '5px',
+        top: '55px',
+        ...props.style,
+      }}
+    >
+      {props.label}
+      <input
+        type='checkbox'
+        checked={props.value}
+        onChange={onChange}
+        style={{
+          position: 'sticky',
+          zIndex: 100,
+          left: '105px',
+          ...props.style,
+        }}
+      />
+    </label>
+  );
+}
+
+function SliceFunction(props) {
+  const view = useContext(Contexts.ViewContext);
+  function onChange(e) {
+    const value = e.currentTarget.checked;
+    if (value) {
+      // Using a slice polydata
+      cyl.update();
+      props.setSlicePolyData(cyl.getOutputData());
+    } else {
+      // plane.update();
+      // props.setSlicePolyData(plane.getOutputData());
+      props.setSlicePolyData(null);
+      props.setSlicePlane(plane);
+    }
+    props.setValue(value);
+    setTimeout(view.renderView, 0);
+    setTimeout(view.resetCamera, 0);
+  }
+  return (
+    <label
+      style={{
+        position: 'absolute',
+        zIndex: 100,
+        left: '5px',
+        top: '55px',
+        ...props.style,
+      }}
+    >
+      {props.label}
+      <input
+        type='checkbox'
+        checked={props.value}
+        onChange={onChange}
+        style={{
+          position: 'sticky',
+          zIndex: 100,
+          left: '105px',
+          ...props.style,
+        }}
+      />
+    </label>
+  );
+}
+
+function PosSlider(props) {
+  const s = Slider(props);
+  plane.setOrigin(props.value, 0, 0);
+  return s;
+}
+
+function Example(props) {
+  const [slabThickness, setSlabThickness] = useState(0);
+  const [slabType, setSlabType] = useState(SlabTypes.MAX);
+  const [interpolationType, setInterpolationType] = useState(
+    InterpolationType.LINEAR
+  );
+  const [slabTrapezoidIntegration, setSlabTrapezoidIntegration] =
+    useState(false);
+  const [colorWindow, setColorWindow] = useState(2095);
+  const [colorLevel, setColorLevel] = useState(1000);
+  const [colorPreset, setColorPreset] = useState('Grayscale');
+  const [useLookupTableScalarRange, setUseLookupTableScalarRange] =
+    useState(false);
+  const [usePolyData, setUsePolyData] = useState(false);
+  const [slicePolyData, setSlicePolyData] = useState(null);
+  const [slicePlane, setSlicePlane] = useState(plane);
+  const [slicePos, setSlicePos] = useState(127);
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      <div style={{ width: '50vw', height: '100%', display: 'inline-block' }}>
+        <View
+          id='0'
+          cameraPosition={[1, 0, 0]}
+          cameraViewUp={[0, 0, -1]}
+          cameraParallelProjection={false}
+          background={[0.34, 0.35, 0.34]}
+        >
+          <ShareDataSet>
+            <Reader
+              vtkClass='vtkXMLImageDataReader'
+              url='https://data.kitware.com/api/v1/item/59e12e988d777f31ac6455c5/download'
+            />
+          </ShareDataSet>
+          <Slider
+            label='colorLevel'
+            max={4095}
+            value={colorLevel}
+            setValue={setColorLevel}
+            style={{ top: '30px', left: '5px' }}
+          />
+          <Slider
+            label='colorWindow'
+            max={4095}
+            value={colorWindow}
+            setValue={setColorWindow}
+            style={{ top: '30px', left: '255px' }}
+          />
+          <EnumDropDown
+            options={{
+              Linear: InterpolationType.LINEAR,
+              Nearest: InterpolationType.NEAREST,
+            }}
+            label='interpolationType'
+            value={interpolationType}
+            setValue={setInterpolationType}
+            style={{ top: '30px', left: '505px' }}
+          />
+          <DropDown
+            label='lookupTable'
+            options={vtkColorMaps.rgbPresetNames}
+            value={colorPreset}
+            setValue={setColorPreset}
+            style={{ top: '60px', left: '5px' }}
+          />
+          <CheckBox
+            label='useLookupTableScalarRange'
+            value={useLookupTableScalarRange}
+            setValue={setUseLookupTableScalarRange}
+            style={{ top: '60px', left: '505px' }}
+          />
+          <Slider
+            label='slabThickness'
+            max={10}
+            value={slabThickness}
+            setValue={setSlabThickness}
+            style={{ top: '90px', left: '5px' }}
+          />
+          <EnumDropDown
+            options={{
+              MIN: SlabTypes.MIN,
+              MAX: SlabTypes.MAX,
+              MEAN: SlabTypes.MEAN,
+              SUM: SlabTypes.SUM,
+            }}
+            label='slabMode'
+            value={slabType}
+            setValue={setSlabType}
+            style={{ top: '90px', left: '255px' }}
+          />
+          <CheckBox
+            label='slabTrapezoidIntegration'
+            value={slabTrapezoidIntegration}
+            setValue={setSlabTrapezoidIntegration}
+            style={{ top: '90px', left: '505px' }}
+          />
+          <SliceFunction
+            label='SliceFunction'
+            value={usePolyData}
+            setValue={setUsePolyData}
+            setSlicePolyData={setSlicePolyData}
+            setSlicePlane={setSlicePlane}
+            style={{ top: '5px', left: '5px' }}
+          />
+          <PosSlider
+            label='slicePosition'
+            max={255}
+            value={slicePos}
+            setValue={setSlicePos}
+            // setSlicePolyData={setSlicePolyData}
+            style={{ top: '5px', left: '255px' }}
+          />
+          <ResliceRepresentation
+            slabThickness={slabThickness}
+            slabType={slabType}
+            slabTrapezoidIntegration={slabTrapezoidIntegration}
+            slicePolyData={slicePolyData}
+            slicePlane={slicePlane}
+            property={{
+              colorWindow,
+              colorLevel,
+              useLookupTableScalarRange,
+              interpolationType,
+            }}
+            colorMapPreset={colorPreset}
+          >
+            <ShareDataSet />
+          </ResliceRepresentation>
+        </View>
+      </div>
+      <div style={{ width: '50vw', height: '100%', display: 'inline-block' }}>
+        <View
+          id='0'
+          background={[0, 0, 0]}
+          cameraPosition={[1, 0, 0]}
+          cameraViewUp={[0, 0, -1]}
+          cameraParallelProjection={false}
+        >
+          <VolumeRepresentation>
+            <div style={{ display: 'none' }}>
+              <VolumeController />
+            </div>
+            <ShareDataSet />
+          </VolumeRepresentation>
+        </View>
+      </div>
+    </div>
+  );
+}
+
+export default Example;

usage/src/Volume/SliceRendering.jsx

@@ -67,7 +67,9 @@ function DropDown(props) {
       }}
     >
       {props.options.map((opt) => (
-        <option value={opt}>{opt}</option>
+        <option key={opt} value={opt}>
+          {opt}
+        </option>
       ))}
     </select>
   );