volview 4.0.0

package/server/serialize.py

@@ -0,0 +1,203 @@
+import json
+import struct
+import itk
+import numpy as np
+
+JS_TO_NPY_TYPEMAP = {
+    'Int8Array': {
+        'struct': (1, 'b'),
+        'dtype': 'int8',
+    },
+    'Int16Array': {
+        'struct': (2, 'h'),
+        'dtype': 'int16',
+    },
+    'Int32Array': {
+        'struct': (4, 'i'),
+        'dtype': 'int32',
+    },
+    'Uint8Array': {
+        'struct': (1, 'B'),
+        'dtype': 'uint8',
+    },
+    'Uint16Array': {
+        'struct': (2, 'H'),
+        'dtype': 'uint16',
+    },
+    'Uint32Array': {
+        'struct': (4, 'I'),
+        'dtype': 'uint32',
+    },
+    'Float32Array': {
+        'struct': (4, 'f'),
+        'dtype': 'float32',
+    },
+    'Float64Array': {
+        'struct': (8, 'd'),
+        'dtype': 'float64',
+    },
+}
+
+ITK_COMP_TO_JS_TYPEMAP = {
+    'SC': 'Int8Array',
+    'UC': 'Uint8Array',
+    'SS': 'Int16Array',
+    'US': 'Uint16Array',
+    'SI': 'Int32Array',
+    'UI': 'Uint32Array',
+    'F': 'Float32Array',
+    'D': 'Float64Array',
+    'B': 'Uint8Array'
+}
+
+
+def bytebuffer_to_numpy(blob, js_type):
+    typeinfo = JS_TO_NPY_TYPEMAP[js_type]
+    size, fmt = typeinfo['struct']
+    dtype = np.dtype(typeinfo['dtype'])
+
+    if len(blob) % size != 0:
+        raise ValueError('given byte buffer is not aligned to the type')
+
+    full_fmt = '<{0}{1}'.format(len(blob) // size, fmt)
+    return np.array(struct.unpack(full_fmt, blob), dtype=dtype, copy=False)
+
+
+def itk_image_pixel_type_to_js(itk_image):
+    component_str = repr(itk_image).split(
+        'itkImagePython.')[1].split(';')[0][8:]
+    # TODO handle mangling as per https://github.com/InsightSoftwareConsortium/itk-jupyter-widgets/blob/master/itkwidgets/trait_types.py#L49
+    return ITK_COMP_TO_JS_TYPEMAP[component_str[:-1]]
+
+
+class RpcEncoder(object):
+    def __init__(self, encoders=[], extra_args=[], extra_kwargs={}):
+        self._encoders = list(encoders)
+        self._extra_args = extra_args
+        self._extra_kwargs = extra_kwargs
+
+    def add_encoder(self, encoder):
+        self._encoders.append(encoder)
+
+    def remove_encoder(self, encoder):
+        self._encoders.remove(encoder)
+
+    def run_encoders(self, obj):
+        output = obj
+        for encoder in self._encoders:
+            output = encoder(output, *self._extra_args, **self._extra_kwargs)
+        return output
+
+    def encode(self, obj):
+        # run on every possible value
+        if isinstance(obj, list):
+            return self.run_encoders([self.encode(item) for item in obj])
+        if isinstance(obj, dict):
+            return self.run_encoders({k: self.encode(v) for k, v in obj.items()})
+        else:
+            return self.run_encoders(obj)
+
+
+class RpcDecoder(object):
+    def __init__(self, hooks=[], extra_args=[], extra_kwargs={}):
+        self._hooks = list(hooks)
+        self._extra_args = extra_args
+        self._extra_kwargs = extra_kwargs
+
+    def add_hook(self, hook):
+        self._hooks.append(hook)
+
+    def remove_hook(self, hook):
+        self._hooks.remove(hook)
+
+    def run_hooks(self, val):
+        output = val
+        for hook in self._hooks:
+            output = hook(output, *self._extra_args, **self._extra_kwargs)
+        return output
+
+    def decode(self, obj):
+        # only run hooks on dictionaries
+        if isinstance(obj, list):
+            return [self.decode(item) for item in obj]
+        if isinstance(obj, dict):
+            return self.run_hooks({k: self.decode(v) for k, v in obj.items()})
+        else:
+            return obj
+
+
+def itk_image_encoder(obj, attach):
+    if type(obj).__name__.startswith('itkImage'):
+        img = obj
+        size = list(img.GetLargestPossibleRegion().GetSize())
+        values = itk.GetArrayFromImage(img).flatten(order='C')
+        return {
+            'vtkClass': 'vtkImageData',
+            'dataDescription': 8,
+            'direction': list(
+                itk.GetArrayFromVnlMatrix(
+                    img.GetDirection().GetVnlMatrix().as_matrix()
+                ).flatten()
+            ),
+            'extent': [
+                0, size[0] - 1,
+                0, size[1] - 1,
+                0, size[2] - 1,
+            ],
+            'spacing': list(img.GetSpacing()),
+            'origin': list(img.GetOrigin()),
+            'pointData': {
+                'vtkClass': 'vtkDataSetAttributes',
+                'activeScalars': 0,  # the index of the only array
+                'arrays': [
+                    {
+                        'data': {
+                            'vtkClass': 'vtkDataArray',
+                            'size': len(values),
+                            'values': attach(values.tobytes()),
+                            'dataType': itk_image_pixel_type_to_js(img),
+                            'numberOfComponents': img.GetNumberOfComponentsPerPixel(),
+                            'name': 'Scalars',
+                        }
+                    }
+                ]
+            }
+        }
+    return obj
+
+
+def itk_image_decode_hook(obj):
+    if isinstance(obj, dict) and obj.get('vtkClass', None) == 'vtkImageData':
+        data_array = obj['pointData']['arrays'][0]['data']
+        pixel_data = bytebuffer_to_numpy(
+            data_array['values'], data_array['dataType'])
+
+        extent = obj['extent']
+        # numpy indexes in ZYX order, where X varies the fastest
+        dims = [
+            extent[5] - extent[4] + 1,
+            extent[3] - extent[2] + 1,
+            extent[1] - extent[0] + 1,
+        ]
+        direction = np.zeros((3, 3))
+        for x in range(3):
+            for y in range(3):
+                direction[x][y] = obj['direction'][x*3+y]
+
+        itk_image = itk.GetImageFromArray(np.reshape(pixel_data, dims))
+        # https://discourse.itk.org/t/set-image-direction-from-numpy-array/844/10
+        vnlmat = itk.GetVnlMatrixFromArray(direction)
+        itk_image.GetDirection().GetVnlMatrix().copy_in(vnlmat.data_block())
+        itk_image.SetOrigin(obj['origin'])
+        itk_image.SetSpacing(obj['spacing'])
+        return itk_image
+    return obj
+
+
+DEFAULT_DECODERS = [
+    itk_image_decode_hook,
+]
+
+DEFAULT_ENCODERS = [
+    itk_image_encoder,
+]

package/server/server.py

@@ -0,0 +1,84 @@
+import sys
+import os
+import webbrowser
+import socket
+import argparse
+import importlib
+
+from wslink.websocket import ServerProtocol
+from wslink import server
+from twisted.internet import reactor
+
+
+def get_port():
+    # Don't care about race condition here for getting a free port
+    # if someone binds the port between get_port() and actually binding,
+    # then the server won't start
+    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+    sock.bind(('localhost', 0))
+    _, port = sock.getsockname()
+    sock.close()
+    return port
+
+
+def create_protocol(ApiClass):
+    class ApiProtocol(ServerProtocol):
+        authKey = 'wslink-secret'
+
+        @staticmethod
+        def configure(options):
+            ApiProtocol.authKey = options.authKey
+
+        def initialize(self):
+            self.registerLinkProtocol(ApiClass())
+            self.updateSecret(ApiProtocol.authKey)
+
+    return ApiProtocol
+
+
+if __name__ == '__main__':
+    # https://stackoverflow.com/questions/7674790/bundling-data-files-with-pyinstaller-onefile
+    try:
+        basepath = sys._MEIPASS
+    except:
+        basepath = os.path.dirname(os.path.dirname(sys.argv[0]))
+
+    parser = argparse.ArgumentParser()
+    parser.add_argument('-H', '--host', default='localhost',
+                        help='Hostname for server to listen on')
+    parser.add_argument('-P', '--port', default=get_port(),
+                        help='Port for server to listen on')
+    parser.add_argument('-b', '--no-browser', action='store_true',
+                        help='Do not auto-open the browser')
+    parser.add_argument('api_script',
+                        help='Python file that exposes ServerApi')
+    args = parser.parse_args()
+
+    static_dir = os.path.join(basepath, 'www')
+    host = args.host
+    port = args.port
+    server_args = [
+        '--content', static_dir,
+        '--host', host,
+        '--port', str(port)
+    ]
+
+    wsurl = 'ws://{host}:{port}/ws'.format(host=host, port=port)
+    full_url = 'http://{host}:{port}/?wsServer={wsurl}'.format(
+        host=host, port=port, wsurl=wsurl)
+
+    def open_webapp():
+        webbrowser.open(full_url)
+
+    # if not args.no_browser:
+    #    print('If the browser doesn\'t open, navigate to:', full_url)
+    #    reactor.callLater(0.1, open_webapp)
+
+    sys.path.append(os.path.dirname(os.path.realpath(__file__)))
+
+    spec = importlib.util.spec_from_file_location('Api', args.api_script)
+    api_module = importlib.util.module_from_spec(spec)
+    spec.loader.exec_module(api_module)
+
+    server.start(server_args, create_protocol(api_module.Api))
+    server.stop_webserver()

package/server/test.py

@@ -0,0 +1,17 @@
+import itk
+import json
+from helper import RpcApi, rpc
+
+
+class Api(RpcApi):
+
+    @rpc('run')
+    def test(self, arg1, arg2):
+        print(type(arg1), type(arg2), arg2)
+        with open('spleen_10.json', 'r') as fp:
+            mm = json.load(fp)
+        return {
+            'segmentation': itk.imread('spleen_10-label.nrrd'),
+            # 'segmentation': itk.imread('/home/forrestli/data/Branch-label.nrrd'),
+            'measurements': mm,
+        }

package/src/assets/logo.svg

@@ -0,0 +1,20 @@
+<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_137_213)">
+<path d="M33.2403 22.7281C33.189 22.8061 33.1376 22.91 33.0606 22.988C31.7509 24.7549 29.0545 25.4824 25.6905 25.0147C25.5364 24.9887 25.3823 24.9628 25.2282 24.9368C23.1995 24.599 20.9911 23.8454 18.7826 22.7281C17.4729 22.0525 16.1633 21.221 14.905 20.2596C13.5439 19.2202 12.3113 18.1029 11.2584 16.9076C9.58926 15.0628 8.35663 13.1139 7.56056 11.2431C6.25089 8.15095 6.25089 5.39662 7.53488 3.6037C8.84455 1.83677 11.4125 1.16118 14.6225 1.65488C16.2146 1.88874 17.9609 2.43441 19.7584 3.23992C21.5303 4.04543 23.3536 5.11079 25.1255 6.46197C28.6693 9.13835 31.34 12.3864 32.7781 15.4525C34.1648 18.3628 34.3445 20.9612 33.2403 22.7281Z" fill="#3EAE2B"/>
+<path d="M33.2404 22.7281C33.189 22.8061 33.1377 22.91 33.0606 22.9879C31.7509 24.7549 29.0546 25.4824 25.6905 25.0147C25.5364 24.9887 25.3824 24.9627 25.2283 24.9368C23.3537 24.547 21.1966 23.8454 18.7827 22.7281C17.473 22.0525 16.1633 21.221 14.905 20.2596C13.544 19.2202 12.3114 18.1029 11.2585 16.9076C8.69052 12.6202 9.2298 7.29345 10.7706 5.60448C12.6452 3.52574 16.9337 3.05802 23.6361 7.60526C29.5425 11.6068 33.7796 19.3761 33.2404 22.7281Z" fill="black" fill-opacity="0.15"/>
+<path d="M30.1331 18.3627C30.1331 18.8564 30.0304 19.2982 29.8506 19.6879C29.7993 19.8179 29.7222 19.9478 29.6195 20.0777C29.2086 20.6493 28.541 21.0131 27.6422 21.195C26.7434 21.3769 25.6648 21.3249 24.4579 21.0911C22.044 20.6234 19.2706 19.3501 16.831 17.5312C16.8053 17.5053 16.7539 17.4793 16.7283 17.4533C14.3657 15.6344 12.5681 13.4257 11.5666 11.373C10.5394 9.26825 10.4624 7.42336 11.3098 6.28006C12.1316 5.13675 13.9035 4.79895 16.189 5.26667C18.4745 5.73439 21.1195 7.00762 23.5334 8.8525C25.9473 10.6974 27.9503 12.932 29.1059 15.0367C29.7993 16.258 30.1331 17.4013 30.1331 18.3627Z" fill="#3EAE2B"/>
+<path d="M29.8506 19.688C29.7992 19.8179 29.7222 19.9479 29.6195 20.0778C29.2086 20.6494 28.5409 21.0132 27.6421 21.1951C26.7433 21.377 25.6648 21.325 24.4578 21.0912C22.0439 20.6234 19.2705 19.3502 16.831 17.5313C16.8053 17.5053 16.7539 17.4793 16.7282 17.4534C13.8778 14.5691 13.7494 9.9699 14.905 8.67069C16.2146 7.5014 18.5258 7.52738 22.763 10.3856C26.3068 12.8022 29.5681 17.2975 29.8506 19.688Z" fill="black" fill-opacity="0.15"/>
+<path d="M26.3068 17.6092C26.1271 17.8431 25.8189 17.999 25.3567 18.077C24.8944 18.1289 24.3038 18.1029 23.6105 17.9211C22.2494 17.5833 20.6059 16.8037 19.0651 15.6344C17.5243 14.4652 16.3431 13.14 15.6754 11.9187C15.3416 11.3211 15.1618 10.7754 15.0848 10.3077C15.0334 9.83996 15.1105 9.52814 15.2902 9.29429C15.47 9.06043 15.7524 8.87854 16.2147 8.82657C16.6512 8.7746 17.2162 8.80059 17.8839 8.95649C18.5259 9.1124 19.2706 9.39822 20.0153 9.78799C20.76 10.1778 21.5561 10.6715 22.3008 11.2691C23.8416 12.4384 25.0742 13.7636 25.7932 14.9589C26.1528 15.5565 26.3582 16.1022 26.4352 16.5699C26.5379 17.0636 26.4609 17.4014 26.3068 17.6092Z" fill="#3EAE2B"/>
+<path d="M27.0001 17.921C26.769 18.5186 26.5379 18.9604 26.1527 19.506C23.8415 22.6241 19.0137 23.0659 15.624 20.4934C12.2343 17.921 11.3612 13.1139 13.6467 9.9958C14.1089 9.42415 14.4427 9.03438 14.982 8.59265C14.8793 8.6706 14.8022 8.74856 14.7252 8.85249C14.3914 9.29423 14.3143 9.8399 14.3914 10.4115C14.4684 10.9832 14.6995 11.6328 15.059 12.2824C15.7781 13.5816 17.0364 15.0108 18.6542 16.232C20.272 17.4533 21.9926 18.2848 23.482 18.6226C24.2267 18.8045 24.9201 18.8564 25.485 18.7785C26.0757 18.7005 26.5893 18.4667 26.9231 18.0249C26.9488 18.0249 26.9745 17.973 27.0001 17.921Z" fill="#0068C7"/>
+<path d="M30.5696 20.1297C30.2615 21.0651 29.1316 22.7801 28.4382 23.5596C24.7917 28.4706 17.1391 29.3281 11.6436 25.1706C6.17386 21.0911 5.17235 12.8021 8.81888 7.86512C9.38383 7.11157 10.334 5.9163 11.1557 5.21472C10.976 5.37063 10.7962 5.55252 10.6421 5.76039C9.51223 7.29346 9.76903 9.52811 10.8219 11.7368C11.9004 13.9714 13.8264 16.31 16.3174 18.2068C17.5757 19.1683 18.911 19.9738 20.272 20.5974C21.6331 21.221 22.9941 21.6887 24.2524 21.9226C25.5364 22.1824 26.7177 22.2344 27.7449 22.0265C28.7721 21.8187 29.6452 21.3769 30.2358 20.5974C30.3899 20.4415 30.4926 20.2856 30.5696 20.1297Z" fill="#0068C7"/>
+<path d="M34.2675 22.5203C33.7025 24.0534 32.6497 25.9502 31.1859 27.6652C25.2796 34.473 15.059 35.7463 7.71463 30.1597C0.395901 24.625 -1.32464 14.4652 3.47747 6.74784C4.55602 5.0069 6.63608 2.95414 7.86871 2.07068C7.84303 2.09666 7.14968 2.74627 6.8672 3.13603C5.30074 5.26674 5.42913 8.41084 6.79016 11.5809C8.15119 14.803 10.7705 18.1809 14.3914 20.9352C16.2146 22.3124 18.1149 23.4037 20.0152 24.2352C21.9155 25.0667 23.8158 25.5864 25.5621 25.8463C29.0545 26.314 32.1361 25.6384 33.7026 23.5077C33.9337 23.1959 34.1391 22.8581 34.2675 22.5203Z" fill="#0068C7"/>
+<path d="M33.5228 15.0888C32.0077 11.8928 29.2343 8.54078 25.6135 5.78645C22.0183 3.03212 18.115 1.34315 14.7509 0.82346C13.544 0.64157 12.3627 0.615586 11.3098 0.745507C11.2585 0.745507 11.2071 0.745507 11.1814 0.771492C11.0274 0.797476 10.8476 0.82346 10.6935 0.849444C10.6679 0.849444 10.6422 0.849444 10.5908 0.875429C10.4881 0.901413 10.3854 0.927397 10.3083 0.953381C10.2056 0.979366 10.1286 1.00535 10.0515 1.03133C9.9745 1.05732 9.89746 1.0833 9.82042 1.10929C9.07571 1.34315 8.40803 1.70692 7.8174 2.17464C7.45788 2.43448 7.14973 2.74629 6.86725 3.13606C5.30078 5.26677 5.42918 8.41086 6.79021 11.5809C8.15124 14.803 10.7706 18.1809 14.3914 20.9353C16.2147 22.3124 18.115 23.4038 20.0153 24.2353C21.9156 25.0668 23.8159 25.5865 25.5621 25.8463C29.0546 26.314 32.1361 25.6384 33.7026 23.5077C33.9337 23.2219 34.1135 22.8841 34.2675 22.5463C35.2177 20.4676 34.8068 17.7912 33.5228 15.0888ZM33.2404 22.7282C33.189 22.8061 33.1376 22.9101 33.0606 22.988C31.7509 24.755 29.0546 25.4825 25.6905 25.0148C25.5364 24.9888 25.3824 24.9628 25.2283 24.9368C23.1996 24.5991 20.9911 23.8455 18.7827 22.7282C17.473 22.0526 16.1633 21.2211 14.905 20.2597C13.544 19.2203 12.3114 18.103 11.2585 16.9077C9.5893 15.0628 8.35667 13.114 7.5606 11.2431C6.25093 8.15102 6.25093 5.39669 7.53492 3.60378C8.84459 1.83685 11.4126 1.16126 14.6225 1.65496C16.2147 1.88881 17.9609 2.43448 19.7585 3.24C21.5304 4.04551 23.3537 5.11086 25.1256 6.46204C28.6694 9.13842 31.3401 12.3865 32.7781 15.4526C34.1648 18.3628 34.3446 20.9613 33.2404 22.7282Z" fill="white"/>
+<path d="M29.8506 14.621C28.6436 12.4124 26.5636 10.0738 24.0726 8.17692C21.5817 6.28007 18.834 4.95487 16.3944 4.46117C14.5711 4.07141 12.8506 4.14936 11.618 4.9029C11.5923 4.9029 11.5666 4.92889 11.5666 4.92889C11.5666 4.92889 11.5409 4.92889 11.5409 4.95487C11.4896 4.98085 11.4382 5.00684 11.4125 5.05881C11.3355 5.11078 11.2584 5.18873 11.1814 5.2407C11.0016 5.3966 10.8219 5.57849 10.6678 5.78637C9.5379 7.31944 9.79469 9.55408 10.8476 11.7627C11.9261 13.9974 13.8521 16.336 16.343 18.2328C17.6013 19.1942 18.9367 19.9998 20.2977 20.6234C21.6587 21.247 23.0198 21.7147 24.2781 21.9486C25.5621 22.2084 26.7433 22.2604 27.7705 22.0525C28.7977 21.8446 29.6708 21.4029 30.2615 20.6234C30.3642 20.4935 30.4669 20.3375 30.5439 20.1816C31.3657 18.6226 30.9291 16.5958 29.8506 14.621ZM29.6195 20.0777C29.2086 20.6494 28.5409 21.0131 27.6421 21.195C26.7433 21.3769 25.6648 21.3249 24.4578 21.0911C22.0439 20.6234 19.2705 19.3501 16.8309 17.5312C14.4171 15.7124 12.5681 13.4517 11.5666 11.373C10.5394 9.26826 10.4624 7.42337 11.3098 6.28007C12.1316 5.13676 13.9035 4.79897 16.189 5.26668C18.4745 5.7344 21.1195 7.00763 23.5334 8.85251C25.9473 10.6974 27.9503 12.932 29.1059 15.0368C29.7992 16.284 30.1331 17.4273 30.1331 18.3887C30.1331 19.0383 29.979 19.61 29.6195 20.0777Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.2056 16.4658C27.1029 15.8942 26.8461 15.2446 26.4609 14.595C25.6905 13.2958 24.4065 11.8926 22.7887 10.6714C21.1965 9.4501 19.5274 8.59262 18.0893 8.25483C17.3703 8.07294 16.7026 8.02097 16.1376 8.09892C15.7011 8.15089 15.2902 8.33278 14.982 8.59262C14.8793 8.67057 14.8023 8.74853 14.7252 8.85246C14.3914 9.2942 14.3144 9.83987 14.3914 10.4115C14.4684 10.9832 14.6996 11.6328 15.0591 12.2824C15.7781 13.5816 17.0364 15.0107 18.6542 16.232C20.2721 17.4533 21.9926 18.2847 23.482 18.6225C24.2268 18.8044 24.9201 18.8564 25.4851 18.7784C26.0757 18.7005 26.5893 18.4666 26.9231 18.0249C26.9488 17.9729 26.9745 17.947 27.0002 17.895C27.2313 17.5052 27.2826 16.9855 27.2056 16.4658ZM26.3068 17.6092C26.1271 17.843 25.8189 17.9989 25.3567 18.0769C24.8944 18.1288 24.3038 18.1029 23.6104 17.921C22.2494 17.5832 20.6059 16.8036 19.0651 15.6344C17.5243 14.4651 16.3431 13.1399 15.6754 11.9186C15.3416 11.321 15.1618 10.7753 15.0848 10.3076C15.0334 9.83987 15.1104 9.52806 15.2902 9.2942C15.47 9.06034 15.7524 8.87845 16.2147 8.82648C16.6512 8.77451 17.2162 8.8005 17.8839 8.9564C18.5259 9.11231 19.2706 9.39813 20.0153 9.7879C20.76 10.1777 21.5561 10.6714 22.3008 11.269C23.8416 12.4383 25.0742 13.7635 25.7932 14.9588C26.1527 15.5564 26.3582 16.1021 26.4352 16.5698C26.5379 17.0635 26.4609 17.4013 26.3068 17.6092Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_137_213">
+<rect width="34" height="33" fill="white" transform="translate(0.781128 0.66748)"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/AboutBox.vue

@@ -0,0 +1,157 @@
+<template>
+  <v-card>
+    <v-card-title class="d-flex flex-row justify-center">
+      <vol-view-full-logo />
+    </v-card-title>
+    <v-card-text>
+      <p align="center">
+        <img
+          src="../assets/KitwareHeadAndNeck.jpg"
+          alt="Head and neck CT rendering"
+          style="width: 200px"
+          align="center"
+        /><br />
+      </p>
+      <p>
+        <a
+          rel="noopener noreferrer"
+          target="_blank"
+          href="https://volview.kitware.com/"
+        >
+          VolView
+        </a>
+        is an open-source web application developed at
+        <a
+          rel="noopener noreferrer"
+          target="_blank"
+          href="https://kitware.com/"
+        >
+          Kitware
+        </a>
+        for visualizing and annotating medical images. It key features include:
+      </p>
+
+      <ul>
+        <li>Fast: Drag-and-drop DICOM files for quick viewing</li>
+        <li>
+          Beautiful: Cinematic volume rendering to generate high-quality 3D
+          visualizations
+        </li>
+        <li>
+          Friendly: Familiar radiological image visualization and annotation
+          tools
+        </li>
+        <li>
+          Secure: Your data stays on your machine. No cloud services or data
+          servers are used.
+        </li>
+      </ul>
+      <br />
+      VolView is freely available for research, educational, and commercial
+      applications. It is built using a variety of open-source toolks created by
+      Kitware, such as
+      <a
+        rel="noopener noreferrer"
+        target="_blank"
+        href="https://github.com/InsightSoftwareConsortium/itk-wasm/"
+      >
+        itk-wasm
+      </a>
+      for DICOM I/O and image processing, and
+      <a
+        rel="noopener noreferrer"
+        target="_blank"
+        href="https://github.com/Kitware/vtk-js"
+      >
+        vtk.js
+      </a>
+      for in-browser scientific visualization.
+      <br />
+      <br />
+      Want help customizing VolView or creating a new web-based visualization
+      application?
+      <a
+        rel-="noopener noreferrer"
+        target="_blank"
+        href="https://www.kitware.com/contact/project/"
+        >Contact Kitware!</a
+      >
+      <br />
+      <br />
+      VolView source code:
+      <ul>
+        <li>
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://github.com/Kitware/VolView"
+          >
+            https://github.com/Kitware/VolView
+          </a>
+        </li>
+      </ul>
+      <br />
+      VolView bug reports and feature requests:
+      <ul>
+        <li>
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://github.com/Kitware/VolView/issues"
+          >
+            https://github.com/Kitware/VolView/issues
+          </a>
+        </li>
+      </ul>
+      <br />
+      This work was funded, in part, by the NIH via NIBIB and NIGMS R01EB021396,
+      NIBIB R01EB014955, NCI R01CA220681, and NINDS R42NS086295
+      <br />
+      <br />
+      Sample data provided by the following sources:
+      <ul>
+        <li>
+          PROSTATEx Challenge Data: Geert Litjens, Oscar Debats, Jelle Barentsz,
+          Nico Karssemeijer, and Henkjan Huisman. "ProstateX Challenge data",
+          The Cancer Imaging Archive (2017). DOI: 10.7937/K9TCIA.2017.MURS5CL
+          (<a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://wiki.cancerimagingarchive.net/pages/viewpage.action?pageId=23691656"
+            >TCIA</a
+          >)
+        </li>
+        <li>
+          MRA Head and Neck: Test case 98890234 from the "Patient Contributed
+          Image Repository" (<a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="http://www.pcir.org/researchers/98890234_20030505_MR.html"
+            >PCIR.org</a
+          >)
+        </li>
+        <li>
+          3D ultrasound of a fetus: Sample data from
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="http://tomovision.comi"
+            >tomovision.com</a
+          >
+        </li>
+      </ul>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { defineComponent } from '@vue/composition-api';
+import VolViewFullLogo from './icons/VolViewFullLogo.vue';
+
+export default defineComponent({
+  name: 'AboutBox',
+  components: {
+    VolViewFullLogo,
+  },
+});
+</script>

package/src/components/AiModule.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="ai-module" class="mx-2 fill-height">
+    <div id="submodule-select">
+      <v-select
+        v-model="currentSubModule"
+        :items="subModules"
+        item-text="name"
+        return-object
+        dense
+        filled
+        single-line
+        hide-details
+        placeholder="Select a module"
+        class="no-select"
+      />
+    </div>
+    <div id="component">
+      <template v-if="currentSubModule">
+        <component :is="currentSubModule.component" />
+      </template>
+      <div v-else>No submodule selected</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from '@vue/composition-api';
+
+import SpleenModule from './SpleenModule.vue';
+
+export default defineComponent({
+  name: 'AiModule',
+  setup() {
+    const currentSubModule = ref(null);
+
+    return {
+      currentSubModule,
+      subModules: [{ name: 'Spleen Segmentation', component: SpleenModule }],
+    };
+  },
+});
+</script>
+
+<style scoped>
+#ai-module {
+  display: flex;
+  flex-flow: column;
+}
+
+#submodule-select {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  padding-bottom: 12px;
+}
+
+#component {
+  flex: 2;
+  margin-top: 12px;
+  overflow-y: auto;
+}
+</style>

package/src/components/AnnotationsModule.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import MeasurementsList from './MeasurementsList.vue';
+import LabelmapList from './LabelmapList.vue';
+
+export default defineComponent({
+  components: {
+    MeasurementsList,
+    LabelmapList,
+  },
+  setup() {},
+});
+</script>
+
+<template>
+  <div class="overflow-y-auto mx-2 fill-height">
+    <v-list dense>
+      <v-subheader class="annot-subheader">Measurements</v-subheader>
+      <measurements-list />
+      <v-subheader class="annot-subheader">Labelmaps</v-subheader>
+      <labelmap-list />
+    </v-list>
+  </div>
+</template>
+
+<style scoped>
+.annot-subheader {
+  margin: 8px 0;
+}
+.theme--dark.annot-subheader {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.theme--light.annot-subheader {
+  background: rgba(0, 0, 0, 0.08);
+}
+</style>