KitwareMedical · thewtex · May 3, 2022 · Apr 22, 2022 · Apr 22, 2022 · May 2, 2022
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ node_modules
 dist
 *.pyc
 docs/_build
+itk
diff --git a/client/.babelrc → client/babel.config.json b/client/.babelrc → client/babel.config.json
@@ -6,9 +6,11 @@
         "browsers": ["last 2 versions"]
       }
     }],
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "mobx"
   ],
   "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
     ["@babel/plugin-proposal-class-properties"]
   ]
 }
diff --git a/client/index.html b/client/index.html
@@ -3,9 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
-    <link rel="stylesheet" type="text/css" href="/client/src/style.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script defer type="text/javascript" src="https://cdn.jsdelivr.net/npm/itk-vtk-viewer@11.12.4/dist/itkVtkViewer.js">
+    <script>
       var loading = true
     </script>
   </head>

diff --git a/client/package.json b/client/package.json
@@ -24,13 +24,19 @@
   "dependencies": {
     "@babel/runtime": "^7.13.10",
     "@kitware/vtk.js": "^19.0.2",
+    "autoprefixer": "^10.4.6",
     "babel-loader": "^8.2.3",
+    "babel-preset-mobx": "^2.0.0",
+    "copy-webpack-plugin": "^10.2.4",
     "itk-viewer-icons": "^11.11.2",
     "itk-viewer-material-ui": "^0.2.0",
+    "itk-vtk-viewer": "^12.0.3",
     "material-ui": "^0.20.2",
     "ndarray-pack": "^1.2.1",
+    "postcss-loader": "^6.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "regenerator-runtime": "^0.13.9"
+    "regenerator-runtime": "^0.13.9",
+    "webpackbar": "^5.0.2"
   }
 }
diff --git a/client/src/ImageSelector.jsx b/client/src/ImageSelector.jsx
@@ -8,6 +8,7 @@ import {
 } from './utils'
 import './style.css'
 import { debounce } from 'lodash'
+import createViewer from 'itk-vtk-viewer/src/createViewer'
 
 function ImageSelector(props) {
   const { service } = props
@@ -66,7 +67,7 @@ function ImageSelector(props) {
       return image_data
     })
     toggleProgressCircle(true)
-    window.itkVtkViewer.createViewer(
+    createViewer(
       document.querySelector('.content'),
       {
         ...img_data,

diff --git a/client/src/index.js b/client/src/index.js
@@ -1,6 +1,7 @@
 import materialUIMachineOptions from 'itk-viewer-material-ui/src/materialUIMachineOptions'
 import modifiedCreateInterface from './main'
 import { encodeScijsArray, fetchJSON } from './utils'
+import createViewer from 'itk-vtk-viewer/src/createViewer'
 
 const uiMachineOptions = { ...materialUIMachineOptions }
 
@@ -11,19 +12,19 @@ uiMachineOptions.actions = uiMachineActions
 
 const container = document.querySelector('.content')
 
-async function createViewer() {
+async function init() {
   const img_data = await fetchJSON('../tensorboard_plugin_3d/images/current').then(response => {
     let image_data = {image: encodeScijsArray(response.image)}
     if (response.label) {
       image_data.labelImage = encodeScijsArray(response.label)
     }
     return image_data
   })
-  window.itkVtkViewer.createViewer(container,
+  createViewer(container,
     {
       ...img_data,
       rotate: false,
       config: { uiMachineOptions },
     })
 }
-createViewer()
+init()
diff --git a/client/update-static.js b/client/update-static.js
@@ -1,8 +1,7 @@
-const fs = require('fs')
+const fs = require('fs-extra')
 const path = require('path')
 
-console.log(__dirname)
-fs.copyFileSync(
+fs.copySync(
   path.resolve(__dirname, 'dist/index.html'),
-  path.resolve(__dirname, '../tensorboard_plugin_3d/static/index.html')
+  path.resolve(__dirname, '../tensorboard_plugin_3d/static/index.html'),
 )
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -1,36 +1,94 @@
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const InlineChunkHtmlPlugin = require('inline-chunk-html-plugin')
+const CopyPlugin = require('copy-webpack-plugin')
+const WebPackBar = require('webpackbar')
+
+const entry = path.resolve(__dirname, 'node_modules', 'itk-vtk-viewer', 'src', 'index.js')
+const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core
+  .rules
+const cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css
+  .rules
+const itkConfig = path.resolve(__dirname, 'node_modules', 'itk-vtk-viewer', 'src', 'itkConfig.js')
+
+const fallback = {
+  path: false,
+  url: false,
+  module: false,
+  fs: false,
+  stream: require.resolve('stream-browserify'),
+  crypto: false,
+}
+
+const moduleConfigRules = [
+  {
+    test: /\.(js|jsx)$/i,
+    loader: 'babel-loader',
+    options: {
+      presets: ['@babel/preset-env','@babel/preset-react','babel-preset-mobx'],
+    },
+  },
+  {
+    test: /\.worker.js$/,
+    use: [{ loader: 'worker-loader', options: { inline: 'no-fallback' } }],
+  },
+  {
+    test: /\.(png|jpe?g|gif)$/i,
+    type: 'asset',
+    parser: { dataUrlCondition: { maxSize: 128 * 1024 } },
+  }, // 128kb
+  { test: /\.svg$/, type: 'asset/source' },
+].concat(vtkRules, cssRules)
 
 const isDev = process.env.NODE_ENV !== 'production'
+const __parent = path.resolve(__dirname, '..')
 
 module.exports = {
   mode: isDev ? 'development' : 'production',
   entry: ['regenerator-runtime/runtime.js', './src/index.js'],
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'index.js'
+    filename: 'index.js',
+    publicPath: '',
   },
   resolve: {
-    extensions: ['.js', '.jsx']
+    extensions: ['.js', '.jsx'],
+    alias: {
+      '../itkConfig.js': itkConfig,
+      '../../itkConfig.js': itkConfig,
+    },
+    fallback,
   },
   module: {
-    rules: [
+    rules: moduleConfigRules.concat([
       {
-        test: /\.(js|jsx)$/i,
-        loader: 'babel-loader',
-        options: { presets: ['@babel/preset-env','@babel/preset-react'] }
+        test: entry,
+        loader: 'expose-loader',
+        options: { exposes: 'itkVtkViewer' },
       },
-      { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
-      { test: /\.(png|jpe?g|gif)$/i, use: ['file-loader'] },
-    ]
+    ]),
   },
   plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.join(
+            __dirname,
+            'node_modules',
+            'itk-vtk-viewer',
+            'dist',
+            'itk',
+          ),
+          to: path.join(__parent, 'tensorboard_plugin_3d', 'static', 'itk'),
+        },
+      ],
+    }),
     new HtmlWebpackPlugin({
       inject: true,
       scriptLoading: 'blocking',
       template: 'index.html'
     }),
-    !isDev ? new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]) : undefined
+    !isDev ? new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/.*/]) : undefined,
+    new WebPackBar(),
   ].filter(Boolean)
 }