About custom front-end extensions for notebook version 7.0

[innocent-art]

I am not sure if notebook v7 still supports the 'nbextensions' extension mechanism. I encountered several issues when using it in v7. After installing the package 'nbextension' using 'pip install jupyter_contrib_nbextensions', I tried to verify it with the command 'jupyter nbextension list', but it returned the error message "Jupyter command jupyter-nbextension not found." Then, I attempted to reinstall the package using "pip install --upgrade --force-reinstall jupyter_contrib_nbextensions". Following that, I ran two additional commands: "jupyter contrib nbextension install --user" and "jupyter nbextensions_configurator enable --user". However, after completing these steps, I noticed that my notebook version was downgraded to v6, which is incorrect. I would like to ask for assistance in resolving this issue because my requirement is to customize front-end extensions, such as adding a file search box on the tree page.

[jtpio]

I am not sure if notebook v7 still supports the 'nbextensions' extension mechanism.

The extension mechanism in v7 is different than in v6. There is some documentation about this in https://jupyter-notebook.readthedocs.io/en/latest/migrating/frontend-extensions.html. If you have some critical extensions that are not yet available in v7 you can temporarily use nbclassic which should support the v6 extensions.

such as adding a file search box on the tree page.

Note that this specific feature is already available in Notebook 7 and can be enabled via the settings system:

filename-searcher-enable.mp4

It would be nice to add this to the documentation, maybe in this page: https://jupyter-notebook.readthedocs.io/en/latest/ui_components.html

[innocent-art]

Thank you for the guidance. In fact, I'm making modifications within a standalone Jupyter Notebook v7 project codebase. I have looked into JupyterLab plugin development and compared the directory structures of Notebook v7 and JupyterLab plugins, realizing that they are different. For example, when using the "cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts" command to generate a template, the generated structure is different from what I see in the "packages" directory of my Notebook v7 project. Despite this, I tried to mimic those packages and created a custom package within the "packages" directory. The package includes files like src/index.ts, style, package.json, and tsconfig.json. However, when I rerun the 'pip install -e ".[dev,test]"' command, it reports build errors for both the "_metapackage" package and my custom package. I'm unsure how to properly connect my custom package with the entire project to make it work effectively.

[jtpio]

standalone Jupyter Notebook v7 project codebase

Do you need to start from a standalone notebook project codebase? Is it a fork?

You can develop extensions against a released version of Notebook 7 directly without having to build the whole Notebook 7 application.

[innocent-art]

Thank you for your guidance. I have now completed the development of a plugin based on your YouTube video "Create an extension for JupyterLab and Jupyter Notebook 7" and successfully made the plugin effective in my project. During this process, I encountered an issue. After generating the template and packaging it, when I tried to install it using the command "jupyter labextension develop . --overwrite," I received an error: "ERROR: No matching distribution found for jupyterlab<5,>=4.0.0." At that time, I was using Ubuntu 22 as my virtual machine version. Later, I changed the virtual machine version to Ubuntu 20.04, and only then the plugin started running properly. Could you confirm if this issue was indeed caused by the Ubuntu version?

Additionally, during the plugin development process, for example, if I want to add a search box next to the "New" button on the "tree" page of Jupyter Notebook v7, currently, I can only manually select the parent tag using JavaScript and insert DOM content into it using "appendChild." Is there a shortcut method or API available to accomplish this? I apologize for not being able to find any relevant documentation or links.

[jtpio]

Could you confirm if this issue was indeed caused by the Ubuntu version?

Hmm not sure. Normally the Ubuntu version should not matter that much. The error suggests there was an issue finding the right version of JupyterLab. But JupyterLab 4 has now been published which means it should be able to install it: https://pypi.org/project/jupyterlab/4.0.0/

if I want to add a search box next to the "New" button on the "tree" page of Jupyter Notebook v7, currently, I can only manually select the parent tag using JavaScript and insert DOM content into it using "appendChild." Is there a shortcut method or API available to accomplish this? I apologize for not being able to find any relevant documentation or links.

You can take a similar approach as the search box mentioned in the comment above using the toolbar registry. In the Notebook 7 code base it is defined here:

notebook/packages/tree-extension/src/index.ts

Lines 253 to 272 in 185778b

	toolbarRegistry.addFactory(
	FILE_BROWSER_FACTORY,
	'fileNameSearcher',
	(browser: FileBrowser) => {
	const searcher = FilenameSearcher({
	updateFilter: (
	filterFn: (item: string) => Partial<IScore> | null,
	query?: string
	) => {
	browser.model.setFilter((value) => {
	return filterFn(value.name.toLowerCase());
	});
	},
	useFuzzyFilter: true,
	placeholder: trans.__('Filter files by name'),
	forceRefresh: true,
	});
	searcher.addClass(FILTERBOX_CLASS);
	return searcher;
	}

Which can then be specified in as a toolbar item here:

notebook/packages/tree-extension/schema/widget.json

Line 7 in 185778b

{ "name": "fileNameSearcher", "rank": 950, "disabled": true },

So your extension can define a similar plugin.

There is some documentation about this in JupyterLab, but maybe we could indeed improve the Notebook 7 docs as well to make it easier to find such information.

[innocent-art]

I'm sorry to disturb you again, but I'm having trouble solving a problem during the development process. I'm not sure why, but when I cleared all the environments and tried to reinstall a custom plugin, I encountered an error when running the command "pip install -e .". The specific error message is shown in the image. I'm not sure what is causing it, so I need to seek your advice.