ResliceCursorWidget Not working

I implemented the ResliceCursorWidget script and the html file inside glance, but I can’t figure out what the problem is with the code. I checked the console (browser) and the terminal, and both show no errors.
I believe the issue is with the ResliceWidget functions I’m using; they may be incorrect; I’ve checked the functions on vtk.js github, the Reslice class reference, and the documentation.
Could you please check the code and let me know what is wrong with it?

Here’s the code for the html and script files.
template.html

<div>
    <v-container :class="$style.container" class="black">
        <v-layout wrap align-center>
          <v-flex xs12>
            <source-select
              label="Target volume"
              :filterFunc="resliceFilterImages"
              bindToActiveSource
              hideIfOneDataset
              @input="setTargetVolume"
            />
          </v-flex>
        </v-layout>
      </v-container>
      <v-container :class="$style.container" class="black">
        <v-layout wrap align-center>
          <template v-if="enabled">
            <v-btn text @click="disable">
              <v-icon left>mdi-cursor</v-icon>
              Hide
            </v-btn>
          </template>
          <template v-else>
            <v-btn text @click="enable" :disabled="!canReslice" class="white--text">
              <v-icon left color="white">mdi-plus</v-icon>
              Reslice
            </v-btn>
          </template>
          <v-spacer />
          <v-btn @click="reset"  text class="white--text">
            <v-icon left color="white">mdi-replay</v-icon>
            Reset
          </v-btn>
        </v-layout>
      </v-container>
</div>

Script.js

import { mapState, mapActions } from 'vuex';
import SourceSelect from 'glance/src/components/widgets/SourceSelect';
import { getCropFilter, makeSubManager } from 'glance/src/utils';

export default {
    name: 'ResliceCursor',
    components: {
        SourceSelect,
    },
    props: ['enabled'],
    data() {
        return {
            targetVolumeId: -1,
            widgetId: -1,
            canReset: false,
        };
    },
    computed: {
        targetVolume() {
            return this.$proxyManager.getProxyById(this.targetVolumeId);
        },
        resliceProxy() {
            return this.$proxyManager.getProxyById(this.widgetId);
        },
        canReslice() {
            return this.targetVolumeId > -1;
        },
        ...mapState('widgets', {
            allResliceStates: 'resliceStates',
        }),
    },
    watch: {
        enabled(enabled) {
            if (enabled) {
                const resliceFilter = this.getCropFilter(this.targetVolume);

                let resliceProxy = this.resliceProxy;
                if (!resliceProxy) {
                    resliceProxy = this.$proxyManager
                        .getProxyInGroup('Widgets')
                        .find((w) => w.getProxyName() === 'ResliceCursor');
                    if (!resliceProxy) {
                        resliceProxy = this.$proxyManager.createProxy('Widgets', 'ResliceCursor');
                    }
                    this.widgetId = resliceProxy.getProxyId();
                }

                const widget = resliceProxy.getWidget();
                const widgetState = resliceProxy.getWidgetState();

                widget.updateCameraPoints(false);

                const imageData = this.targetVolume.getDataset();
                widget.setImage(imageData);

                widget.placeWidget(imageData.getBounds());


                if(resliceFilter.isResetAvailable()) {
                    const state = widgetState.updateReslice();
                    state.setPlanes(resliceFilter.updateReslice());
                }

                const resliceState = widgetState.updateReslice();
                this.state.sub(
                    resliceState.onModified(() => {
                        const reslicer = resliceState.getPlanes();
                        resliceFilter.updateReslice(reslicer);
                        this.canReset = resliceFilter.isResetAvailable();
                        this.storeResliceState(this.targetVolumeId, reslicer);
                    })
                );

                resliceProxy.addToViews();
            } else {
                this.resliceProxy.removeFromViews();
                this.$proxyManager.deleteProxy(this.resliceProxy);
                this.widgetId = -1;
                this.stateSub.unsub();
            }
        },
        targetVolumeId(id) {
            if (this.enabled) {
                this.disable();
            }

            this.canReset = false;
            if (id !== -1) {
                const resliceFilter = this.getCropFilter(this.targetVolume);
                this.canReset = resliceFilter.isResetAvailable();
            }
        },
    },
    mounted() {
        this.stateSub = makeSubManager();
    },
    beforeDestroy() {
        this.stateSub.unsub();
    },
    methods: {
        resliceFilterImages(source) {
            return (
                source.getProxyName() === 'TrivialProducer' &&
                source.getType() === 'vtkImageData'
            );
        },
        getCropFilter(volProxy) {
            return getCropFilter(this.$proxyManager, volProxy);
        },
        setTargetVolume(sourceId) {
            this.targetVolumeId = sourceId;
        },
        enable() {
            this.$emit('enable', true);
            console.log("Reslice Button Responding");
        },
        disable() {
            this.$emit('enable', false);
        },
        reset() {
            console.log("Reset Working");
            if (this.targetVolume) {
                const Rfilter = this.getCropFilter(this.targetVolume);
                Rfilter.reset();
                this.canReset = false;

                if (this.resliceProxy) {
                    const state = this.resliceProxy.getWidgetState().updateReslice();
                    state.setPlanes(Rfilter.updateReslice());
                }
            }
        },
        storeResliceState(datasetId, data) {
            this.setResliceState({ datasetId, data});
        },

        ...mapActions('widgets', ['setResliceState']),
    },
}

Any Update?

My follow-up is posted here: ResliceCursor Implementation inside glance · Issue #444 · Kitware/glance · GitHub

I would recommend not posting the same question in multiple places, since more effort is needed to keep track of which one is the “latest”. This results in the conversation being unnecessarily spread out. Please keep to one thread, preferably on the Glance issue tracker.