Typescript compilation errors

[bjornandre]

This project does not build at the moment. I get the following typescript compilation errors:

node_modules/@jupyter-widgets/base/lib/widget.d.ts:55:5 - error TS2416: Property 'initialize' in type 'WidgetModel' is not assignable to the same property in base type 'Model<any, ModelSetOptions, {}>'.
  Type '(attributes: any, options: { model_id: string; comm?: any; widget_manager: any; }) => void' is not assignable to type '(attributes?: any, options?: ModelConstructorOptions<this>) => void'.
    Types of parameters 'options' and 'options' are incompatible.
      Type 'ModelConstructorOptions<this>' is missing the following properties from type '{ model_id: string; comm?: any; widget_manager: any; }': model_id, widget_manager

55     initialize(attributes: any, options: {
       ~~~~~~~~~~

node_modules/@jupyter-widgets/base/lib/widget.d.ts:199:52 - error TS2344: Type 'WidgetModel' does not satisfy the constraint 'Model<any, ModelSetOptions, {}>'.
  Types of property 'initialize' are incompatible.
    Type '(attributes: any, options: { model_id: string; comm?: any; widget_manager: any; }) => void' is not assignable to type '(attributes?: any, options?: ModelConstructorOptions<Model<any, ModelSetOptions, {}>>) => void'.
      Types of parameters 'options' and 'options' are incompatible.
        Type 'ModelConstructorOptions<Model<any, ModelSetOptions, {}>>' is missing the following properties from type '{ model_id: string; comm?: any; widget_manager: any; }': model_id, widget_manager

199 export declare class WidgetView extends NativeView<WidgetModel> {
                                                       ~~~~~~~~~~~

node_modules/@jupyter-widgets/base/lib/widget.d.ts:203:48 - error TS2344: Type 'WidgetModel' does not satisfy the constraint 'Model<any, ModelSetOptions, {}>'.

203     constructor(options?: Backbone.ViewOptions<WidgetModel> & {
                                                   ~~~~~~~~~~~

node_modules/@jupyter-widgets/base/lib/widget.d.ts:243:102 - error TS2344: Type 'T' does not satisfy the constraint 'Model<any, ModelSetOptions, {}>'.
  Type 'WidgetModel' is not assignable to type 'Model<any, ModelSetOptions, {}>'.
    Types of property 'initialize' are incompatible.
      Type '(attributes: any, options: { model_id: string; comm?: any; widget_manager: any; }) => void' is not assignable to type '(attributes?: any, options?: ModelConstructorOptions<Model<any, ModelSetOptions, {}>>) => void'.
        Types of parameters 'options' and 'options' are incompatible.
          Type 'ModelConstructorOptions<Model<any, ModelSetOptions, {}>>' is not assignable to type '{ model_id: string; comm?: any; widget_manager: any; }'.

243     interface InitializeParameters<T extends WidgetModel = WidgetModel> extends Backbone.ViewOptions<T> {
                                                                                                         ~

node_modules/@jupyter-widgets/jupyterlab-manager/lib/manager.d.ts:41:5 - error TS2416: Property 'callbacks' in type 'WidgetManager' is not assignable to the same property in base type 'ManagerBase<Widget>'.
  Type '(view?: WidgetView) => { iopub: { output: (msg: IIOPubMessage<IOPubMessageType>) => void; }; }' is not assignable to type '(view?: WidgetView) => ICallbacks'.
    Call signature return types '{ iopub: { output: (msg: IIOPubMessage<IOPubMessageType>) => void; }; }' and 'ICallbacks' are incompatible.
      The types of 'iopub' are incompatible between these types.
        Type '{ output: (msg: IIOPubMessage<IOPubMessageType>) => void; }' is not assignable to type '{ [key: string]: (msg: IMessage<MessageType>) => void; }'.
          Property 'output' is incompatible with index signature.
            Type '(msg: IIOPubMessage<IOPubMessageType>) => void' is not assignable to type '(msg: IMessage<MessageType>) => void'.
              Types of parameters 'msg' and 'msg' are incompatible.
                Type 'IMessage<MessageType>' is not assignable to type 'IIOPubMessage<IOPubMessageType>'.
                  Types of property 'channel' are incompatible.
                    Type 'Channel' is not assignable to type '"iopub"'.
                      Type '"shell"' is not assignable to type '"iopub"'.

41     callbacks(view?: WidgetView): {
       ~~~~~~~~~

node_modules/@jupyter-widgets/jupyterlab-manager/lib/manager.d.ts:72:5 - error TS2416: Property 'display_view' in type 'WidgetManager' is not assignable to the same property in base type 'ManagerBase<Widget>'.
  Type '(msg: any, view: View<Model<any, ModelSetOptions, {}>>, options: any) => Promise<Widget>' is not assignable to type '(msg: IMessage<MessageType>, view: DOMWidgetView, options: any) => Promise<Widget>'.
    Types of parameters 'view' and 'view' are incompatible.
      Type 'DOMWidgetView' is not assignable to type 'View<Model<any, ModelSetOptions, {}>>'.
        Types of property 'preinitialize' are incompatible.
          Type '(options?: ViewOptions<WidgetModel>) => void' is not assignable to type '(options?: ViewOptions<Model<any, ModelSetOptions, {}>>) => void'.
            Types of parameters 'options' and 'options' are incompatible.
              Type 'ViewOptions<Model<any, ModelSetOptions, {}>>' is not assignable to type 'ViewOptions<WidgetModel>'.
                Type 'Model<any, ModelSetOptions, {}>' is missing the following properties from type 'WidgetModel': comm_live, send, close, _handle_comm_closed, and 23 more.

72     display_view(msg: any, view: Backbone.View<Backbone.Model>, options: any): Promise<Widget>;
       ~~~~~~~~~~~~

node_modules/@jupyter-widgets/jupyterlab-manager/lib/output.d.ts:24:5 - error TS2416: Property 'widget_manager' in type 'OutputModel' is not assignable to the same property in base type 'OutputModel'.
  Type 'WidgetManager' is not assignable to type 'ManagerBase<any>'.
    Types of property 'display_view' are incompatible.
      Type '(msg: any, view: View<Model<any, ModelSetOptions, {}>>, options: any) => Promise<Widget>' is not assignable to type '(msg: IMessage<MessageType>, view: DOMWidgetView, options: any) => Promise<any>'.
        Types of parameters 'view' and 'view' are incompatible.
          Type 'DOMWidgetView' is not assignable to type 'View<Model<any, ModelSetOptions, {}>>'.

24     widget_manager: WidgetManager;
       ~~~~~~~~~~~~~~

node_modules/@jupyter-widgets/jupyterlab-manager/lib/output.d.ts:53:5 - error TS2416: Property 'model' in type 'OutputView' is not assignable to the same property in base type 'OutputView'.
  Type 'OutputModel' is not assignable to type 'WidgetModel'.
    Types of property 'widget_manager' are incompatible.
      Type 'WidgetManager' is not assignable to type 'ManagerBase<any>'.

53     model: OutputModel;
       ~~~~~

src/plugin.ts:35:3 - error TS2322: Type '(app: JupyterLab, registry: IJupyterWidgetRegistry) => void' is not assignable to type '(app: JupyterFrontEnd<IShell>, ...args: any[]) => void | Promise<void>'.
  Types of parameters 'app' and 'app' are incompatible.
    Type 'JupyterFrontEnd<IShell>' is missing the following properties from type 'JupyterLab': registerPluginErrors, status, info, paths, and 4 more.

35   activate: activateWidgetExtension,
     ~~~~~~~~

  node_modules/@lumino/application/types/index.d.ts:84:5
    84     activate: (app: T, ...args: any[]) => U | Promise<U>;
           ~~~~~~~~
    The expected type comes from property 'activate' which is declared here on type 'JupyterFrontEndPlugin<void>'

src/plugin.ts:64:40 - error TS2345: Argument of type '(v: output.OutputView) => void' is not assignable to parameter of type '(value: WidgetView) => void | PromiseLike<void>'.
  Types of parameters 'v' and 'value' are incompatible.
    Type 'WidgetView' is missing the following properties from type 'OutputView': _createElement, _outputView, pWidget, setLayout, and 8 more.

64             this.model.views[key].then((v: output.OutputView) => {
                                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/plugin.ts:79:9 - error TS2322: Type 'typeof SidecarModel' is not assignable to type 'typeof WidgetModel | typeof WidgetView'.
  Type 'typeof SidecarModel' is not assignable to type 'typeof WidgetModel'.
    Construct signature return types 'SidecarModel' and 'WidgetModel' are incompatible.
      The types of 'widget_manager' are incompatible between these types.
        Type 'WidgetManager' is not assignable to type 'ManagerBase<any>'.

79         SidecarModel: SidecarModel,
           ~~~~~~~~~~~~

src/plugin.ts:80:9 - error TS2322: Type 'typeof SidecarView' is not assignable to type 'typeof WidgetModel | typeof WidgetView'.
  Type 'typeof SidecarView' is missing the following properties from type 'typeof WidgetModel': _deserialize_state, serializers

80         SidecarView: SidecarView
           ~~~~~~~~~~~

src/widget.ts:32:57 - error TS2345: Argument of type 'this' is not assignable to parameter of type 'DOMWidgetModel'.
  Type 'SidecarModel' is not assignable to type 'DOMWidgetModel'.
    Types of property 'widget_manager' are incompatible.
      Type 'WidgetManager' is not assignable to type 'ManagerBase<any>'.

32     this.widget_manager.display_model(undefined as any, this, {});
                                                           ~~~~

Found 13 errors.

[psychemedia]

I was wondering whether this project would be updated to work in JupyterLab 3 or whether it is deprecated?

It's a really handy tool for those of us who don't have the skill or time to develop JupyterLab applications / widgets etc because it used to let us roll essentially roll our own from cell outputs.

[jasongrout]

This is definitely not deprecated. Help is welcome, of course

[psychemedia]

It seems to have a lot of overlap with jupyterlab/jupyterlab#3692 ? If display() allowed opening into a separate output window, would that be any different to what sidecar does? (I don't really understand how the plumbing works, I'm just a needy user ;-)

[alejandrosame]

@jasongrout How should one tackle the upgrade of this? It's hard to get an overview with the fragmentation between jupyter, jupyter-widgets and jupyterlab repositories.

[ianhi]

@alejandrosame maybe base it off the upgrade of ipympl done here: matplotlib/ipympl#272

[ianhi]

edit see #56 (comment) for the updated version for jlab3

@bjornandre these typescript errors just got discussed on gitter here: https://gitter.im/jupyter-widgets/Lobby?at=5f99daf3b4283c208a2f2f8f

If you use npm instead of jlpm/yarn then the errors are resolved. So the dev install instructions should be:

# Create a new conda environment
conda create -n jupyterlab-sidecar -c conda-forge jupyterlab ipywidgets nodejs

# Activate the conda environment
conda activate jupyterlab-sidecar

# Install dependencies
npm install && npm run build

jupyter labextension install @jupyter-widgets/jupyterlab-manager --no-build
jupyter labextension install .

pip install -e .

[remborg]

Thanks @ianhi this helps, however I get another issue now with the last command pip install -e .
error: [Errno 2] No such file or directory: '/home/remborg/Projects/JupyterLab/jupyterlab-sidecar/node_modules/is-wsl/node_modules/.bin/is-docker'
So I've added is-wsl manually (npm add is-wsl) and this worked, except that now I get the same error as above but coming from python:

...
    [4/4] Building fresh packages...
    success Saved lockfile.
    $ npm run build:lib
    npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1603978849798-0.31302473445397383/node but npm is using /home/remborg/anaconda3/envs/jupyterlab-sidecar/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
    
    > @jupyter-widgets/jupyterlab-sidecar@0.5.0 build:lib /home/remborg/Projects/JupyterLab/jupyterlab-sidecar
    > tsc
    
    node_modules/@jupyter-widgets/base/lib/widget.d.ts(55,5): error TS2416: Property 'initialize' in type 'WidgetModel' is not assignable to the same property in base type 'Model<any, ModelSetOptions, {}>'.
      Type '(attributes: any, options: { model_id: string; comm?: any; widget_manager: any; }) => void' is not assignable to type '(attributes?: any, options?: ModelConstructorOptions<this>) => void'.
        Types of parameters 'options' and 'options' are incompatible.
          Type 'ModelConstructorOptions<this>' is missing the following properties from type '{ model_id: string; comm?: any; widget_manager: any; }': model_id, widget_manager
    node_modules/@jupyter-widgets/base/lib/widget.d.ts(199,52): error TS2344: Type 'WidgetModel' does not satisfy the constraint 'Model<any, ModelSetOptions, {}>'.
      Types of property 'initialize' are incompatible.
        Type '(attributes: any, options: { model_id: string; comm?: any; widget_manager: any; }) => void' is not assignable to type '(attributes?: any, options?: ModelConstructorOptions<Model<any, ModelSetOptions, {}>>) => void'.
          Types of parameters 'options' and 'options' are incompatible.
            Type 'ModelConstructorOptions<Model<any, ModelSetOptions, {}>>' is missing the following properties from type '{ model_id: string; comm?: any; widget_manager: any; }': model_id, widget_manager
    node_modules/@jupyter-widgets/base/lib/widget.d.ts(203,48): error TS2344: Type 'WidgetModel' does not satisfy the constraint 'Model<any, ModelSetOptions, {}>'.
    node_modules/@jupyter-widgets/base/lib/widget.d.ts(243,102): error TS2344: Type 'T' does not satisfy the constraint 'Model<any, ModelSetOptions, {}>'.
      Type 'WidgetModel' is not assignable to type 'Model<any, ModelSetOptions, {}>'.
        Types of property 'initialize' are incompatible.
          Type '(attributes: any, options: { model_id: string; comm?: any; widget_manager: any; }) => void' is not assignable to type '(attributes?: any, options?: ModelConstructorOptions<Model<any, ModelSetOptions, {}>>) => void'.
            Types of parameters 'options' and 'options' are incompatible.
              Type 'ModelConstructorOptions<Model<any, ModelSetOptions, {}>>' is not assignable to type '{ model_id: string; comm?: any; widget_manager: any; }'.
    node_modules/@jupyter-widgets/jupyterlab-manager/lib/manager.d.ts(72,5): error TS2416: Property 'display_view' in type 'WidgetManager' is not assignable to the same property in base type 'ManagerBase<Widget>'.
      Type '(msg: any, view: View<Model<any, ModelSetOptions, {}>>, options: any) => Promise<Widget>' is not assignable to type '(msg: IMessage<MessageType>, view: DOMWidgetView, options: any) => Promise<Widget>'.
        Types of parameters 'view' and 'view' are incompatible.
          Type 'DOMWidgetView' is not assignable to type 'View<Model<any, ModelSetOptions, {}>>'.
            Types of property 'preinitialize' are incompatible.
              Type '(options?: ViewOptions<WidgetModel>) => void' is not assignable to type '(options?: ViewOptions<Model<any, ModelSetOptions, {}>>) => void'.
                Types of parameters 'options' and 'options' are incompatible.
                  Type 'ViewOptions<Model<any, ModelSetOptions, {}>>' is not assignable to type 'ViewOptions<WidgetModel>'.
                    Type 'Model<any, ModelSetOptions, {}>' is missing the following properties from type 'WidgetModel': comm_live, send, close, _handle_comm_closed, and 23 more.
    node_modules/@jupyter-widgets/jupyterlab-manager/lib/output.d.ts(24,5): error TS2416: Property 'widget_manager' in type 'OutputModel' is not assignable to the same property in base type 'OutputModel'.
      Type 'WidgetManager' is not assignable to type 'ManagerBase<any>'.
        Types of property 'display_view' are incompatible.
          Type '(msg: any, view: View<Model<any, ModelSetOptions, {}>>, options: any) => Promise<Widget>' is not assignable to type '(msg: IMessage<MessageType>, view: DOMWidgetView, options: any) => Promise<any>'.
            Types of parameters 'view' and 'view' are incompatible.
              Type 'DOMWidgetView' is not assignable to type 'View<Model<any, ModelSetOptions, {}>>'.
    node_modules/@jupyter-widgets/jupyterlab-manager/lib/output.d.ts(53,5): error TS2416: Property 'model' in type 'OutputView' is not assignable to the same property in base type 'OutputView'.
      Type 'OutputModel' is not assignable to type 'WidgetModel'.
        Types of property 'widget_manager' are incompatible.
          Type 'WidgetManager' is not assignable to type 'ManagerBase<any>'.
    node_modules/@types/backbone/index.d.ts(115,60): error TS2694: Namespace 'JQuery' has no exported member 'TriggeredEvent'.
    node_modules/@types/jquery/index.d.ts(8155,87): error TS2344: Type '"button" | "view" | "key" | "char" | "altKey" | "bubbles" | "cancelable" | "changedTouches" | "ctrlKey" | "detail" | "eventPhase" | "metaKey" | "pageX" | "pageY" | "shiftKey" | ... 13 more ... | "touches"' does not satisfy the constraint '"repeat" | "button" | "code" | "view" | "height" | "width" | "target" | "type" | "x" | "y" | "key" | "location" | "char" | "NONE" | "altKey" | "bubbles" | "cancelable" | "changedTouches" | ... 52 more ... | "DOM_KEY_LOCATION_STANDARD"'.
      Type '"toElement"' is not assignable to type '"repeat" | "button" | "code" | "view" | "height" | "width" | "target" | "type" | "x" | "y" | "key" | "location" | "char" | "NONE" | "altKey" | "bubbles" | "cancelable" | "changedTouches" | ... 52 more ... | "DOM_KEY_LOCATION_STANDARD"'.
    src/plugin.ts(64,40): error TS2345: Argument of type '(v: output.OutputView) => void' is not assignable to parameter of type '(value: WidgetView) => void | PromiseLike<void>'.
      Types of parameters 'v' and 'value' are incompatible.
        Type 'WidgetView' is missing the following properties from type 'OutputView': _createElement, _outputView, pWidget, setLayout, and 8 more.
    src/plugin.ts(79,9): error TS2322: Type 'typeof SidecarModel' is not assignable to type 'typeof WidgetModel | typeof WidgetView'.
      Type 'typeof SidecarModel' is not assignable to type 'typeof WidgetModel'.
        Construct signature return types 'SidecarModel' and 'WidgetModel' are incompatible.
          The types of 'widget_manager' are incompatible between these types.
            Type 'WidgetManager' is not assignable to type 'ManagerBase<any>'.
    src/plugin.ts(80,9): error TS2322: Type 'typeof SidecarView' is not assignable to type 'typeof WidgetModel | typeof WidgetView'.
      Type 'typeof SidecarView' is missing the following properties from type 'typeof WidgetModel': _deserialize_state, serializers
    src/widget.ts(32,57): error TS2345: Argument of type 'this' is not assignable to parameter of type 'DOMWidgetModel'.
      Type 'SidecarModel' is not assignable to type 'DOMWidgetModel'.
        Types of property 'widget_manager' are incompatible.
          Type 'WidgetManager' is not assignable to type 'ManagerBase<any>'.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! @jupyter-widgets/jupyterlab-sidecar@0.5.0 build:lib: `tsc`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the @jupyter-widgets/jupyterlab-sidecar@0.5.0 build:lib script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /home/remborg/.npm/_logs/2020-10-29T13_41_02_808Z-debug.log
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
    Traceback (most recent call last):
      File "<string>", line 1, in <module>
      File "/home/remborg/Projects/JupyterLab/jupyterlab-sidecar/setup.py", line 110, in <module>
        setup(**setup_args)
      File "/home/remborg/anaconda3/envs/jupyterlab-sidecar/lib/python3.9/site-packages/setuptools/__init__.py", line 163, in setup
        return distutils.core.setup(**attrs)
      File "/home/remborg/anaconda3/envs/jupyterlab-sidecar/lib/python3.9/distutils/core.py", line 148, in setup
        dist.run_commands()
      File "/home/remborg/anaconda3/envs/jupyterlab-sidecar/lib/python3.9/distutils/dist.py", line 966, in run_commands
        self.run_command(cmd)
      File "/home/remborg/anaconda3/envs/jupyterlab-sidecar/lib/python3.9/distutils/dist.py", line 985, in run_command
        cmd_obj.run()
      File "/home/remborg/Projects/JupyterLab/jupyterlab-sidecar/setupbase.py", line 469, in run
        [self.run_command(cmd) for cmd in cmds]
      File "/home/remborg/Projects/JupyterLab/jupyterlab-sidecar/setupbase.py", line 469, in <listcomp>
        [self.run_command(cmd) for cmd in cmds]
      File "/home/remborg/anaconda3/envs/jupyterlab-sidecar/lib/python3.9/distutils/cmd.py", line 313, in run_command
        self.distribution.run_command(command)
      File "/home/remborg/anaconda3/envs/jupyterlab-sidecar/lib/python3.9/distutils/dist.py", line 985, in run_command
        cmd_obj.run()
      File "/home/remborg/Projects/JupyterLab/jupyterlab-sidecar/setupbase.py", line 265, in run
        c.run()
      File "/home/remborg/Projects/JupyterLab/jupyterlab-sidecar/setupbase.py", line 364, in run
        run(npm_cmd + ['install'], cwd=node_package)
      File "/home/remborg/Projects/JupyterLab/jupyterlab-sidecar/setupbase.py", line 216, in run
        return subprocess.check_call(cmd, **kwargs)
      File "/home/remborg/anaconda3/envs/jupyterlab-sidecar/lib/python3.9/subprocess.py", line 373, in check_call
        raise CalledProcessError(retcode, cmd)
    subprocess.CalledProcessError: Command '['/home/remborg/.nvm/versions/node/v12.16.3/bin/yarn', 'install']' returned non-zero exit status 1. 
 ERROR: Command errored out with exit status 1: /home/remborg/anaconda3/envs/jupyterlab-sidecar/bin/python3.9 -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'/home/remborg/Projects/JupyterLab/jupyterlab-sidecar/setup.py'"'"'; __file__='"'"'/home/remborg/Projects/JupyterLab/jupyterlab-sidecar/setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' develop --no-deps Check the logs for full command output.

So a script is running yarn under the hood... I believe that fixing the root issue with yarn will then fix everything.

[remborg]

Just found out that npm run watch doesn't work neither.

[ianhi]

Up to date instructions that work in a fresh env in #61

# Create a new conda environment
conda create -n jupyterlab-sidecar -c conda-forge jupyterlab ipywidgets nodejs -y

# Activate the conda environment
conda activate jupyterlab-sidecar

# Install package in development mode
pip install -e .

# Link your development version of the extension with JupyterLab
jupyter labextension develop . --overwrite

# Rebuild extension Typescript source after making changes
jlpm run build

You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.

# Watch the source directory in one terminal, automatically rebuilding when needed
jlpm run watch
# Run JupyterLab in another terminal
jupyter lab