# Using itk-vtk-viewer from local build

**URL:** <https://discourse.vtk.org/t/using-itk-vtk-viewer-from-local-build/10546>\
**Category:** Development\
**Tags:** python\
**Created:** [January 26, 2023, 11:28am UTC](https://discourse.vtk.org/t/using-itk-vtk-viewer-from-local-build/10546 "2023-01-26T11:28:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kevin\_Sweeney](https://discourse.vtk.org/user_avatar/discourse.vtk.org/kevin_sweeney/32/3935_2.png) [@Kevin\_Sweeney](https://discourse.vtk.org/u/Kevin_Sweeney)\
**Post date:** [January 26, 2023, 11:28am UTC](https://discourse.vtk.org/t/using-itk-vtk-viewer-from-local-build/10546/1 "2023-01-26T11:28:13Z")

</div>

(Newbie question)

I want to be able to make changes to `itk-vtk-viewer` and test the new code within my current project.  
([Geometry / Point selection · Issue #575 · Kitware/itk-vtk-viewer · GitHub](https://github.com/Kitware/itk-vtk-viewer/issues/575))

I have forked the [repo](https://github.com/Kitware/itk-vtk-viewer) and have cloned locally.

How do I load in the code from my local version of `itk-vtk-viewer` so that I can see the changes when I run my project?

Thanks

---

<div class="post-metadata">

**Author:** ![Kevin\_Sweeney](https://discourse.vtk.org/user_avatar/discourse.vtk.org/kevin_sweeney/32/3935_2.png) [@Kevin\_Sweeney](https://discourse.vtk.org/u/Kevin_Sweeney)\
**Post date:** [January 27, 2023, 1:41pm UTC](https://discourse.vtk.org/t/using-itk-vtk-viewer-from-local-build/10546/2 "2023-01-27T13:41:36Z")

</div>

@PaulHax @thewtex (tagging as have been helpful before)

I can see that the `viewer_config.py` file from `itkwidgets` points to the `ITK_VIEWER_SRC` location. I have cloned `itkwidgets` locally and created a local version of the package (`python -m pip -e .`) which means I can edit `itkwidgets` as required. I have tried pointing the `ITK_VIEWER_SRC` to my local folder but that is not working. How do I tell `itkwidgets` to use my local `itk-vtk-viewer` code instead of that at `ITK_VIEWER_SRC = ("https://bafybeidadaazleqcepkcofenl5vvnf6uod6tjqvlkoj2ceynhbyzkku5hu.on.fleek.co/")`

---

<div class="post-metadata">

**Author:** ![Kevin\_Sweeney](https://discourse.vtk.org/user_avatar/discourse.vtk.org/kevin_sweeney/32/3935_2.png) [@Kevin\_Sweeney](https://discourse.vtk.org/u/Kevin_Sweeney)\
**Post date:** [February 1, 2023, 10:03am UTC](https://discourse.vtk.org/t/using-itk-vtk-viewer-from-local-build/10546/3 "2023-02-01T10:03:48Z")

</div>

@Sebastien_Jourdain (tagging as have been helpful before)

I have stepped back a number of versions due to a known [bug](https://github.com/InsightSoftwareConsortium/itkwidgets/issues/556) - which results in the current version of `itkwidgets` not working for me.

Using `itkwidgets` v0.32.0

**To review:**  
I am trying to edit files (`js`) within `itk-vtk-viewer` [project](https://github.com/Kitware/itk-vtk-viewer) which are called by [itkwidgets](https://github.com/InsightSoftwareConsortium/itkwidgets) in Python, however I am unable to determine the steps to be able to do so. I am looking to add some functionality to the `itkwidgets` package by updating the annotations returned by some function calls within the `itk-vtk-viewer` `js` files.

I have forked `itkwidgets` from git and installed locally using `python -m pip install -e .`. I can import this package in my notebook and have confirmed that it is loaded and working as expected.

My expectation is that I should be able to point the package (`itkwidgets`) towards a local version of the `js` project (`itk-vtk-viewer`) so that any edits made can be observed in the notebook.

(Part I do not understand)

- In a `viewer.js` file (`itkwidgets`) it specifies the location of the `js` code that I want to edit:
  - `import createViewer from 'itk-vtk-viewer/src/createViewer'`

- This `viewer.js` file is pointed to in a `index.js` file:
  - `const { ViewerModel, ViewerView } = require('./viewer.js');`

- and this `index.js` file is pointed to within the `package.json` file.

My original thoughts were that I should be able to change the location pointed to in `viewer.js` file to a local folder and it would point towards the new code. However, even if I change the line to `import createViewer from '/<NON_EXISTENT_FOLDER>/src/createViewer'`. The code still runs as before. If I point towards the local version, I would expect some added `console.log`’s to be printed, but again this does not occur.

I have tried reinstalling the package using `pip` following the change but that did not help either.

Any help appreciated.

---

<div class="post-metadata">

**Author:** ![PaulHax](https://discourse.vtk.org/user_avatar/discourse.vtk.org/paulhax/32/2748_2.png) [@PaulHax](https://discourse.vtk.org/u/PaulHax)\
**Post date:** [February 9, 2023, 4:56pm UTC](https://discourse.vtk.org/t/using-itk-vtk-viewer-from-local-build/10546/4 "2023-02-09T16:56:12Z")

</div>

Hello, sorry I missed your tag there. To point itkwidgets at your locally developed itk-vtk-viewer:

1. Start the itk-vtk-viewer dev server: `npm run start` which should serve at `http://localhost:8082/`
2. In the viewer\_config.py file of itkwidgets, set ITK\_VIEWER\_SRC to [http://localhost:8082/](http://localhost:8082/)

itk-vtk-viewer needs to be served by http server. Can’t just point itkwidgets at a file.

Hope that gets you hacking.

---

<div class="post-metadata">

**Author:** ![Kevin\_Sweeney](https://discourse.vtk.org/user_avatar/discourse.vtk.org/kevin_sweeney/32/3935_2.png) [@Kevin\_Sweeney](https://discourse.vtk.org/u/Kevin_Sweeney)\
**Post date:** [February 23, 2023, 3:50pm UTC](https://discourse.vtk.org/t/using-itk-vtk-viewer-from-local-build/10546/5 "2023-02-23T15:50:14Z")

</div>

@PaulHax Sorry, now it was my turn to miss your tag!

I appreciate this help, but as specified in my latest post above, I have to use `itkwidgets` v0.32.0 due to a known [bug](https://github.com/InsightSoftwareConsortium/itkwidgets/issues/556) which restricts me being able to use the latest version.

Within v0.32.0, the method to link to `itk-vtk-viewer` is different.

---

<div class="post-metadata">

**Author:** ![Kevin\_Sweeney](https://discourse.vtk.org/user_avatar/discourse.vtk.org/kevin_sweeney/32/3935_2.png) [@Kevin\_Sweeney](https://discourse.vtk.org/u/Kevin_Sweeney)\
**Post date:** [February 28, 2023, 10:33am UTC](https://discourse.vtk.org/t/using-itk-vtk-viewer-from-local-build/10546/6 "2023-02-28T10:33:28Z")

</div>

@PaulHax

I have tried a few things, and believe I am on the right track, but still getting some errors.

**Current steps:**

- Fork both `itk-vtk-viewer` and `itkwidgets` repos and clone locally.
- Set `itkwidgets` to `v0.32.0` (required version) and `itk-vtk-viewer` to `v10.7.4` (as per version specified in `package.json` file from `itkwidgets`)

**itk-vtk-viewer**

- Install/build the `itk-vtk-viewer` package
  - `cd itk-vtk-viewer`
  - `npm install`

- Then create a link to the package
  - `npm link`

**itkwidgets**

- I delete the `itk-vtk-viewer` info from the dependancies list in the `package.json` fil
  - I do not want this module installed when calling `npm install`

- Install the rest of the required modules for `itkwidgets`
  - `cd itkwidgets/js`
  - `npm install`

- I then need to link the `itk-vtk-viewer` module
  - To do this I add the following lines to the `setup.py` file
    - `check_call([npmName, 'link', 'itk-vtk-viewer'], cwd=node_root, stdout=sys.stdout, stderr=sys.stderr)`

- I then try to install the `itkwidgets` package in dev mode
  - `python -m pip install -e .` from the parent directory

**Outputs**

- The linking of the module seems to work as I can see it in the list if I call `check_call(['ls','node_modules'], cwd=node_root, stdout=sys.stdout, stderr=sys.stderr)` following the linking.

- However, am getting an error specifying:

**Error Message**

> …  
> itkwidgets@0.32.0 build  
> webpack --mode production -p
> 
> ℹ Compiling Webpack  
> Browserslist: caniuse-lite is outdated. Please run:  
> npx browserslist@latest --update-db  
> ℹ Compiling Webpack (repeated 3 times)  
> ✔ Webpack: Compiled successfully in 5.80s  
> Hash: 4a78116d9ef989538c9b2b50b9c939e990b653640817ccd06068362b3f638bd9ee9b1faba8410a05  
> Version: webpack 4.42.1  
> Child  
> Hash: 4a78116d9ef989538c9b  
> Time: 5825ms  
> Built at: 28/02/2023 10:21:29  
> Asset Size Chunks Chunk Names  
> extension.js 1.08 KiB 0 [emitted] main  
> Entrypoint main = extension.js  
> [0] ./lib/extension.js 521 bytes {0} [built]  
> Child  
> Hash: 2b50b9c939e990b65364  
> Time: 65384ms  
> Built at: 28/02/2023 10:22:29  
> 3 assets  
> Entrypoint main = index.js index.js.map  
> [34] (webpack)/buildin/global.js 723 bytes {0} [built]  
> [58] external “@jupyter-widgets/base” 42 bytes {0} [built]  
> [81] /…/itk-vtk-viewer/src/Rendering/updateGradientOpacity.js 1.36 KiB {0} [built]  
> [83] /…/itk-vtk-viewer/src/UserInterface/hex2rgb.js 375 bytes {0} [built]  
> [85] /…/itk-vtk-viewer/src/Rendering/updateLabelMapPiecewiseFunction.js 1.89 KiB {0} [built]  
> [87] ./lib/index.js 694 bytes {0} [built]  
> [88] ./lib/viewer.js 71.1 KiB {0} [built]  
> [148] /…/itk-vtk-viewer/src/Rendering/updateVolumeProperties.js 1.87 KiB {0} [built]  
> [149] /…/itk-vtk-viewer/src/UserInterface/Image/updateTransferFunctionWidget.js 1.31 KiB {0} [built]  
> [161] /…/itk-vtk-viewer/src/Rendering/updateLabelMapComponentWeight.js 1.16 KiB {0} [built]  
> [173] ./lib/itkConfigJupyter.js 271 bytes {0} [built]  
> [214] /…/itk-vtk-viewer/src/createViewer.js 34.2 KiB {0} [built]  
> [225] /…/itk-vtk-viewer/src/vtk/proxyManagerConfiguration.js 3.1 KiB {0} [built]  
> [468] ./lib/lineProfiler.js 6.27 KiB {0} [built]  
> [469] ./package.json 1.95 KiB {0} [built]  
> + 455 hidden modules
> 
> ```
> ERROR in /.../itk-vtk-viewer/src/UserInterface/createCategoricalColorIconSelector.js
> Module not found: Error: Can't resolve '@thewtex/iconselect.js/lib/control/iconselect' in '/.../itk-vtk-viewer/src/UserInterface'
> @ /.../itk-vtk-viewer/src/UserInterface/createCategoricalColorIconSelector.js 12:18-74
> @ /.../itk-vtk-viewer/src/UserInterface/Image/createLabelMapColorWidget.js
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> 
> ERROR in /.../itk-vtk-viewer/src/UserInterface/createColorMapIconSelector.js
> Module not found: Error: Can't resolve '@thewtex/iconselect.js/lib/control/iconselect' in '/.../itk-vtk-viewer/src/UserInterface'
> @ /.../itk-vtk-viewer/src/UserInterface/createColorMapIconSelector.js 12:18-74
> @ /.../itk-vtk-viewer/src/UserInterface/Image/createColorRangeInput.js
> @ /.../itk-vtk-viewer/src/UserInterface/createImageUI.js
> @ /.../itk-vtk-viewer/src/UserInterface/index.js
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> 
> ERROR in /.../itk-vtk-viewer/src/ViewerStore.js
> Module not found: Error: Can't resolve 'eventemitter3' in '/.../itk-vtk-viewer/src'
> @ /.../itk-vtk-viewer/src/ViewerStore.js 24:43-67
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> 
> ERROR in /.../itk-vtk-viewer/src/UserInterface/addKeyboardShortcuts.js
> Module not found: Error: Can't resolve 'mousetrap' in '/.../itk-vtk-viewer/src/UserInterface'
> @ /.../itk-vtk-viewer/src/UserInterface/addKeyboardShortcuts.js 10:40-60
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> Child worker:
> 2 assets
> Entrypoint main = e2e5b834a5dc5a56c944.worker.js e2e5b834a5dc5a56c944.worker.js.map
> 5 modules
> Child
> Hash: 0817ccd06068362b3f63
> Time: 67725ms
> Built at: 28/02/2023 10:22:31
> 3 assets
> Entrypoint main = index.js index.js.map
> [34] (webpack)/buildin/global.js 723 bytes {0} [built]
> [58] external "@jupyter-widgets/base" 42 bytes {0} [built]
> [81] /.../itk-vtk-viewer/src/Rendering/updateGradientOpacity.js 1.36 KiB {0} [built]
> [83] /.../itk-vtk-viewer/src/UserInterface/hex2rgb.js 375 bytes {0} [built]
> [85] /.../itk-vtk-viewer/src/Rendering/updateLabelMapPiecewiseFunction.js 1.89 KiB {0} [built]
> [87] ./lib/index.js 694 bytes {0} [built]
> [88] ./lib/viewer.js 71.1 KiB {0} [built]
> [148] /.../itk-vtk-viewer/src/Rendering/updateVolumeProperties.js 1.87 KiB {0} [built]
> [149] /.../itk-vtk-viewer/src/UserInterface/Image/updateTransferFunctionWidget.js 1.31 KiB {0} [built]
> [161] /.../itk-vtk-viewer/src/Rendering/updateLabelMapComponentWeight.js 1.16 KiB {0} [built]
> [173] ./lib/itkConfigCDN.js 114 bytes {0} [built]
> [174] ./lib/embed.js 399 bytes {0} [built]
> [215] /.../itk-vtk-viewer/src/createViewer.js 34.2 KiB {0} [built]
> [469] ./lib/lineProfiler.js 6.27 KiB {0} [built]
> [470] ./package.json 1.95 KiB {0} [built]
> + 456 hidden modules
> 
> ERROR in /.../itk-vtk-viewer/src/UserInterface/createCategoricalColorIconSelector.js
> Module not found: Error: Can't resolve '@thewtex/iconselect.js/lib/control/iconselect' in '/.../itk-vtk-viewer/src/UserInterface'
> @ /.../itk-vtk-viewer/src/UserInterface/createCategoricalColorIconSelector.js 12:18-74
> @ /.../itk-vtk-viewer/src/UserInterface/Image/createLabelMapColorWidget.js
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> @ ./lib/embed.js
> 
> ERROR in /.../itk-vtk-viewer/src/UserInterface/createColorMapIconSelector.js
> Module not found: Error: Can't resolve '@thewtex/iconselect.js/lib/control/iconselect' in '/.../itk-vtk-viewer/src/UserInterface'
> @ /.../itk-vtk-viewer/src/UserInterface/createColorMapIconSelector.js 12:18-74
> @ /.../itk-vtk-viewer/src/UserInterface/Image/createColorRangeInput.js
> @ /.../itk-vtk-viewer/src/UserInterface/createImageUI.js
> @ /.../itk-vtk-viewer/src/UserInterface/index.js
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> @ ./lib/embed.js
> 
> ERROR in /.../itk-vtk-viewer/src/ViewerStore.js
> Module not found: Error: Can't resolve 'eventemitter3' in '/.../itk-vtk-viewer/src'
> @ /.../itk-vtk-viewer/src/ViewerStore.js 24:43-67
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> @ ./lib/embed.js
> 
> ERROR in /.../itk-vtk-viewer/src/UserInterface/addKeyboardShortcuts.js
> Module not found: Error: Can't resolve 'mousetrap' in '/.../itk-vtk-viewer/src/UserInterface'
> @ /.../itk-vtk-viewer/src/UserInterface/addKeyboardShortcuts.js 10:40-60
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> @ ./lib/embed.js
> Child worker:
> 2 assets
> Entrypoint main = a6481b1cabc91a7ecac9.worker.js a6481b1cabc91a7ecac9.worker.js.map
> 5 modules
> Child
> Hash: 8bd9ee9b1faba8410a05
> Time: 62803ms
> Built at: 28/02/2023 10:22:26
> 3 assets
> Entrypoint main = labextension.js labextension.js.map
> [0] external "@babel/runtime/helpers/interopRequireDefault" 42 bytes {0} [built]
> [2] external "@babel/runtime/helpers/defineProperty" 42 bytes {0} [built]
> [3] external "@babel/runtime/helpers/interopRequireWildcard" 42 bytes {0} [built]
> [6] external "mobx" 42 bytes {0} [built]
> [7] external "@babel/runtime/helpers/toConsumableArray" 42 bytes {0} [built]
> [35] external "@babel/runtime/regenerator" 42 bytes {0} [built]
> [36] external "@babel/runtime/helpers/asyncToGenerator" 42 bytes {0} [built]
> [79] external "@jupyter-widgets/base" 42 bytes {0} [built]
> [80] ./lib/index.js 694 bytes {0} [built]
> [81] ./lib/viewer.js 71.1 KiB {0} [built]
> [82] external "jupyter-dataserializers" 42 bytes {0} [built]
> [144] ./lib/extension-jupyterlab.js 406 bytes {0} [built]
> [150] /.../itk-vtk-viewer/src/createViewer.js 34.2 KiB {0} [built]
> [386] ./lib/lineProfiler.js 6.27 KiB {0} [built]
> [387] ./package.json 1.95 KiB {0} [built]
> + 373 hidden modules
> 
> ERROR in /.../itk-vtk-viewer/src/UserInterface/createCategoricalColorIconSelector.js
> Module not found: Error: Can't resolve '@thewtex/iconselect.js/lib/control/iconselect' in '/.../itk-vtk-viewer/src/UserInterface'
> @ /.../itk-vtk-viewer/src/UserInterface/createCategoricalColorIconSelector.js 12:18-74
> @ /.../itk-vtk-viewer/src/UserInterface/Image/createLabelMapColorWidget.js
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> @ ./lib/extension-jupyterlab.js
> 
> ERROR in /.../itk-vtk-viewer/src/UserInterface/createColorMapIconSelector.js
> Module not found: Error: Can't resolve '@thewtex/iconselect.js/lib/control/iconselect' in '/.../itk-vtk-viewer/src/UserInterface'
> @ /.../itk-vtk-viewer/src/UserInterface/createColorMapIconSelector.js 12:18-74
> @ /.../itk-vtk-viewer/src/UserInterface/Image/createColorRangeInput.js
> @ /.../itk-vtk-viewer/src/UserInterface/createImageUI.js
> @ /.../itk-vtk-viewer/src/UserInterface/index.js
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> @ ./lib/extension-jupyterlab.js
> 
> ERROR in /.../itk-vtk-viewer/src/ViewerStore.js
> Module not found: Error: Can't resolve 'eventemitter3' in '/.../itk-vtk-viewer/src'
> @ /.../itk-vtk-viewer/src/ViewerStore.js 24:43-67
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> @ ./lib/extension-jupyterlab.js
> 
> ERROR in /.../itk-vtk-viewer/src/UserInterface/addKeyboardShortcuts.js
> Module not found: Error: Can't resolve 'mousetrap' in '/.../itk-vtk-viewer/src/UserInterface'
> @ /.../itk-vtk-viewer/src/UserInterface/addKeyboardShortcuts.js 10:40-60
> @ /.../itk-vtk-viewer/src/createViewer.js
> @ ./lib/viewer.js
> @ ./lib/index.js
> @ ./lib/extension-jupyterlab.js
> Child worker:
> 2 assets
> Entrypoint main = a6481b1cabc91a7ecac9.worker.js a6481b1cabc91a7ecac9.worker.js.map
> 5 modules
> rebuilding js and css failed
> missing files: ['/.../itkwidgets/itkwidgets/static/index.js']
> Traceback (most recent call last):
> File "<string>", line 1, in <module>
> File "/.../itkwidgets/setup.py", line 212, in <module>
> setup(**setup_args)
> File "/.../opt/anaconda3/lib/python3.9/site-packages/setuptools/ __init__.py", line 87, in setup
> return distutils.core.setup(**attrs)
> File "/.../opt/anaconda3/lib/python3.9/site-packages/setuptools/_distutils/core.py", line 148, in setup
> return run_commands(dist)
> File "/.../opt/anaconda3/lib/python3.9/site-packages/setuptools/_distutils/core.py", line 163, in run_commands
> dist.run_commands()
> File "/.../opt/anaconda3/lib/python3.9/site-packages/setuptools/_distutils/dist.py", line 967, in run_commands
> self.run_command(cmd)
> File "/.../opt/anaconda3/lib/python3.9/site-packages/setuptools/dist.py", line 1214, in run_command
> super().run_command(command)
> File "/.../opt/anaconda3/lib/python3.9/site-packages/setuptools/_distutils/dist.py", line 986, in run_command
> cmd_obj.run()
> File "/.../itkwidgets/setup.py", line 49, in run
> raise e
> File "/.../itkwidgets/setup.py", line 42, in run
> self.distribution.run_command('jsdeps')
> File "/.../opt/anaconda3/lib/python3.9/site-packages/setuptools/dist.py", line 1214, in run_command
> super().run_command(command)
> File "/.../opt/anaconda3/lib/python3.9/site-packages/setuptools/_distutils/dist.py", line 986, in run_command
> cmd_obj.run()
> File "/.../itkwidgets/setup.py", line 120, in run
> check_call([npmName, 'run', 'build'], cwd=node_root,
> File "/.../opt/anaconda3/lib/python3.9/subprocess.py", line 373, in check_call
> raise CalledProcessError(retcode, cmd)
> subprocess.CalledProcessError: Command '['npm', 'run', 'build']' returned non-zero exit status 2.
> ----------------------------------------
> 
> ```
> 
> WARNING: Discarding file:///…/itkwidgets. Command errored out with exit status 1: python setup.py egg\_info Check the logs for full command output.  
> ERROR: Command errored out with exit status 1: python setup.py egg\_info Check the logs for full command output.

Any help here would be appreciated

* * *

**Additional Notes:**

- `python -m pip install -e .` works sucessfully if I just build `itkwidgets` without amending or linking `itk-vtk-viewer`
  - `static` folder now contains `index.js` (plus other files)

- Using `install` rather than link:
  - `npm install /.../itk-vtk-viewer --save`
  - Updates the `package.json` and `package-lock.json` files
  - Then tried `python -m pip install -e .`
    - That seems to work as well (builds without errors anyway)
    - But only if I have run it without any changes, as stated above, first. Otherwise get same error as with link