How to create a proxy class that inherits SourceProxy, bundles ConeSource, and exposes ConeSource properties using VTK.js? - oop

Question

Note: This question is a bit arcane, if you don't have experience with The Visualization Toolkit (VTK.js) you may want to skip it (on the other hand, if you are a master of OOP and proxies...).
I'm attempting to build a "Hello World" implementation of VTK.js' proxies. This involves:
Creating a proxyManager that manages the proxies.
Creating a custom proxy that inherits from the SourceProxy.
This proxy should bundle ConeSource (non-proxy) and expose ConeSource's properties.
Creating a representation of the resulting geometric proxy.
Passing this representation to a view that displays inside a container on a page.
I used some code from VTK.js' documentation to create a basic geometric cone (not proxied):
import '#kitware/vtk.js/Rendering/Profiles/Geometry';
import vtkFullScreenRenderWindow from '#kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkActor from '#kitware/vtk.js/Rendering/Core/Actor';
import vtkMapper from '#kitware/vtk.js/Rendering/Core/Mapper';
import vtkConeSource from '#kitware/vtk.js/Filters/Sources/ConeSource';
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
// Create our cone
const coneSource = vtkConeSource.newInstance({ height: 1.0 });
const mapper = vtkMapper.newInstance();
mapper.setInputConnection(coneSource.getOutputPort());
const actor = vtkActor.newInstance();
actor.setMapper(mapper);
renderer.addActor(actor);
renderer.resetCamera();
renderWindow.render();
This works fine, it's moving to proxies that I'm struggling with.
I've been looking at a few successful implementations of VTK.js proxies:
Example included with VTK.js source code.
Medical Image Visualization in MIQA.
Another Medical Image Visualization application called VolView
Of these the example included in the VTK.js source code should be the simplest but it is an animation proxy so the principles don't quite translate (at least I haven't been able to get similar code working for a geometry proxy).
The example I've worked with the most is that found in MIQA. Most of the code is found inside a src/vtk folder but some important calls are made in the Vuex store (src/store/index.ts, especially shrinkProxyManager, prepareProxyManager, and swapToFrame), utils ([src/utils][9] folder (crosshairs.js and fill2DView.js), and the Vue components VtkViewer (src/components/VtkViewer.vue) and DecisionButtons (src/components/DecisionButtons.vue).
I've tried a bunch of different approaches (e.g. using the animation example, the miqa source, the volview source) including those outlined in this VTK.js Proxies thread.
In the VTK.js proxies there is a minimal implementation that looks like this:
source = proxyManager.createProxy('Sources', 'TrivialProducer', { name: 'myImage' });
source.setInputData(myImageData);
view = proxyManager.createProxy('Views', 'View3D', { name: 'my3DView' });
view.setContainer(someHTMLElement);
rep = proxyManager.getRepresentation(source, view);
view.addRepresentation(rep);
But I'm unsure how to make the source proxy something like GeometryProducer? Any help is appreciated.