Giter Club home page Giter Club logo

jupyterlab-code-snippets's Introduction

JupyterLab Code Snippet

Save, reuse, and share code snippets using JupyterLab Code Snippets

Github Actions Status Binder npm version PyPI version Conda Version License Documentation Status

This extension is a derivative of Elyra's original design and further developed by Jupyter Cal Poly Team.

Read Press Release for more information.

Check out the Current Progress to keep up with our feature updates!

This extension is composed of a NPM package named jupyterlab-code-snippets for the frontend extension.

Alt Text

Requirements

  • JupyterLab >= 3.5.3
  • Python >= 3.7

Install

Install using jupyter:

jupyter labextension install jupyterlab-code-snippets

Install using pip:

pip install jupyterlab-code-snippets
conda install -c conda-forge jupyterlab-code-snippets

Troubleshoot

If it is installed, try:

jupyter lab clean
jupyter lab build

Contributing

Install

The jlpm command is JupyterLab's pinned version of yarn that is installed with JupyterLab. You may use yarn or npm in lieu of jlpm below.

# Clone the repo to your local environment
# Move to jupyter-lab-code-snippets directory

# Install dependencies
jlpm
# Build Typescript source
jlpm build
# Link your development version of the extension with JupyterLab
jupyter labextension install .
# Rebuild Typescript source after making changes
jlpm build
# Rebuild JupyterLab after making any changes
jupyter lab build

You can watch the source directory and run JupyterLab in watch mode to watch for changes in the extension's source and automatically rebuild the extension and application.

# Watch the source directory in another terminal tab
jlpm watch
# Run jupyterlab in watch mode in one terminal tab
jupyter lab --watch

Now every change will be built locally and bundled into JupyterLab. Be sure to refresh your browser page after saving file changes to reload the extension (note: you'll need to wait for webpack to finish, which can take 10s+ at times).

Uninstall

jupyter labextension uninstall jupyterlab-code-snippets

OR

pip uninstall jupyterlab-code-snippets

jupyterlab-code-snippets's People

Contributors

aivydang avatar dependabot[bot] avatar jahn96 avatar jld23 avatar kpinnipa avatar m-rossi avatar zsailer avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

jupyterlab-code-snippets's Issues

Delete after filter

Describe the bug
If a snippet is deleted right after a filter is selected, the filter option gets unselected and you can't go back to the original list of snippets without refreshing the page.

To Reproduce
Steps to reproduce the behavior:

  1. Go to snippets panel.
  2. Click on a filter.
  3. Scroll down to a snippet and select delete.
  4. See error.

Expected behavior
Snippet should get deleted and the filter panel should show the filter as selected and show only the filtered snippets.

Code Snippet Metadata

Should we keep the id field in snippet metadata ?

Currently, our snippet metadata has id field in order to keep the order of snippets in the snippet explorer when the page gets refreshed.

One issue with this is that if people want to share a snippet, they have to change its id in correspondence to their existing snippets.

Language compatibility check with notebook kernel

Is your feature request related to a problem? Please describe.
Currently, you can drag snippets written in Python to notebooks running with kernels with other languages.

Describe the solution you'd like
We can show the warning message saying the snippet is not compatible with notebook kernel.

Fuzzy Search for Code Snippets

Even if you search for a code snippet with the approximate match (partial hits), it will find the one you are looking for.

Additional context
image

Move or add snippets during search or tag-filter

Is your feature request related to a problem? Please describe.
Currently, users can't add snippets during search or tag-filter

Describe the solution you'd like
They can add snippets during search or tag-filter

Templated Fields

Problem Description
Currently no arguments can be passed to code snippets and no parameters can be set for a snippet.

Solution

  • Allow a place/way for arguments to be passed into a code snippet upon insertion. When creating the snippet users should be allowed to specify a number of parameters and when they insert it a dialog should appear that allows them to fill in these sections.

Problems to Address

  • Have to figure out where these args will be visually and how they will be editable:
    1. On the snippet?
    2. Can they be modified in the editor?
    3. Will types be included?
    4. Limit to number of parameters?
  • Design must be mostly solidified before implementation

Save using context menu

Is your feature request related to a problem? Please describe.
Save using context menu currently only works when text is highlighted. Save by highlighting is not fully functional in non-notebook files (current method is to copy text from file and paste it into the custom code snippet creator).

Describe the solution you'd like

  1. When a cell is right-clicked and the "save as code snippet" option is selected, the cell and all of the code within the cell will be saved as a code snippet.
  2. When on a non-notebook file is open, you can highlight text and save that text as a code snippet.

Could you remove the keyboard short cut of Shift S?

Every time when I was writing code with a Cap-S, the extension catches it as a short cut and jump out the window for adding new snippet. It's annoying and I even cannot find where to set the shortcut. Finally, I am annoyed and uninstalled the extension.

UI/UX: Changing/updating snippet names

Question: How can we make it easier to rename snippets?

Current task flow:

  • User browses snippets > clicks "..." button > chooses "edit snippet" > edits snippet in a separate file > saves/updates snippet

Ideation:

  • right click or double click the snippet to change it

Things to keep in mind:

  • Would this still open into the editor?
  • What would it look like in the snippet panel?

duplicate snippet name error - json already exists

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
When I create a snippet and click on "create & Save' I get the error mentioned in subject line. There is no other snippet saved by the same name. In fact, whatever you change the snippet name to , the same error is repeated.

Screenshots
image

Desktop (please complete the following information):

  • OS: WIndows 10
  • Browser Chrome
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Snippet commands misplaced in right click menu

Describe the bug
The snippet command in the context menu is placed between Clear Output and Clear all Outputs:

image

To Reproduce
Install extension and right click on a selection

Expected behavior
The clearing output commands would remain grouped and the snippet command would be placed somewhere else.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Ubuntu 20.04
  • Browser: Firefox
  • Version 2.0.1

Cannot install with JupyterLab 3.0.1

When trying to pip install with 3.0.1 it gives me the following error:
Conflicting Dependencies:
JupyterLab Extension Package

=3.0.0 <3.1.0 >=2.1.2 <3.0.0 @jupyterlab/application
=3.0.0 <3.1.0 >=2.2.4 <3.0.0 @jupyterlab/apputils
=5.0.0 <5.1.0 >=4.1.0 <5.0.0 @jupyterlab/coreutils
=3.0.0 <3.1.0 >=2.1.2 <3.0.0 @jupyterlab/docmanager
=3.0.0 <3.1.0 >=2.1.2 <3.0.0 @jupyterlab/fileeditor
=3.0.0 <3.1.0 >=2.1.2 <3.0.0 @jupyterlab/notebook
=3.0.0 <3.1.0 >=2.1.1 <3.0.0 @jupyterlab/rendermime
=6.0.0 <6.1.0 >=5.0.0 <6.0.0 @jupyterlab/services

UI: Snippet Preview

Snippet preview should match the height of the snippet content.

  • Reduce the amount of white space
  • Panel should adjust to size of snippet

Rename code snippet name

Describe the solution you'd like
Right click option to rename the name of the snippet.

Describe alternatives you've considered
Double click the snippet name to rename it.

Licensing—add Elyra's Apache License back

I noticed y'all removed the Elyra license from this package. Just as a teaching moment here, when handling such a license (Apache), you can only remove it if you get written permission from the Elyra team to remove this license.

In this case, we should keep their license, since your work is a derivative of their original design. We want to give them credit for their original contributions. Let's add their license back in and be clear that this is a derivative (maybe add a block of text at the top/bottom explaining your extension's relationship to theirs).

Thanks!

Differentiate between capitals and lowercase in search bar

For the search bar are we planning to leave it so it eliminates options based on capitalizations?

For example, if the user had snippets called "long" and "Long" and they typed "lo" into the search bar only the first result would show up. (Current state)

Filter tag not seen to enable filters of the snippets

Describe the bug
A clear and concise description of what the bug is:
The filters are not seen in the 'add-snippet' bar.

Expected behavior
I want to filter the tags, but I don't see the option to filter them. Moreover, I don't have the tag option provided when I try to save the snippet from Jupyter lab.

Screenshots
If applicable, add screenshots to help explain your problem.

  • added
    image

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Microsoft Edge
  • Version:86.0.622.61

Save only code cells as snippet

Is your feature request related to a problem? Please describe.
Markdown and raw cells are treated as code cells in the preview because currently, we only save text in the cells as a snippet.

Describe the solution you'd like
Save only code cells.

Additional context
In the screenshot below, you can see that markdown cell is saved as code cell.
Alt Text

inconvenient input format...

Is your feature request related to a problem? Please describe.
when i register new snippet, i 'm so inconvenient to fill a form exactly....

i dont like filling describing form,language (can allow blank form)
i hope it supports upper cases in title

#thank you (in personally , i like this extension so much .)

Dragging snippet is buggy

Describe the bug
Dragging a code snippet is sometimes buggy. If you don't see a drag image when dragging a snippet and just hover back on the drag icon, the hover activates a drag event.

To Reproduce
Steps to reproduce the behavior:

  1. Click and drag a code snippet.
  2. If you try step 1 several times, you may find that drag image does not appear right away.

Expected behavior
It should create a drag image when you click and drag a code snippet

Desktop (please complete the following information):

  • OS: iOS
  • Browser: any browser

Future Development Ideas

FUTURE FEATURE LIST

  • Templated Fields
    Create an interface that allows the use of parameters for code snippets. This will allow users to pass arguments into their snippets when inserting a snippet into their notebooks.

  • Tab Completion
    Implement a tab completion feature that tracks patterns in a users code and recommends potential code snippets that could finishes statements and definitions if the tab key is pressed. Potential idea to work with Kite/JupyterLab-lsp team to create this feature.

  • Color Code Tags
    Construct a color picking tool that allows for the selection of different colors for the tags in the snippets panel. If this change is implemented, potentially show dots on the actual snippet containers indicating some of the tags associated with the snippet. Attach hover feature to dots that will display the actual names of the tags.

  • Multi-cell Saving
    If multiple code cells are saved, create functionality that will maintain the cell structure upon editing and re-insertion into the notebook. This will allow for cells to be manually combined and also run separately if desired.

Licensing - change license to BSD

At the top of the file that contains some lines of code from Elyra, we need to add attribution to them by putting our license (BSD-3), comment about our usage on Elyra's code, and Elyra' license (Apache)

For example,
// Copyright (c) 2020, jupytercalpoly
// Distributed under the terms of the BSD-3 Clause License.
// Some lines of code are from Elyra
/*

  • Copyright 2018-2020 IBM Corporation
  • Licensed under the Apache License, Version 2.0 (the "License");
  • you may not use this file except in compliance with the License.
  • You may obtain a copy of the License at
  • http://www.apache.org/licenses/LICENSE-2.0
  • Unless required by applicable law or agreed to in writing, software
  • distributed under the License is distributed on an "AS IS" BASIS,
  • WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  • See the License for the specific language governing permissions and
  • limitations under the License.
    */

Tab Completion

Problem description
Currently, the methods to insert a snippet include the insert button, dragging and dropping, and copy-pasting. However, this requires the user to search for a snippet in the snippet explorer every time they intend to use it which can take time away from their work.

Solution
Create functionality that recognizes user patterns and suggests relevant snippets that match syntax that can be easily inserted by simply pressing the tab button. This will allow user to save time in searching for the snippet and more easily incorporate them into their workflow.

Things to think about

  • Potentially look at Kite for inspiration
  • Show snippet text when associated words are typed in a grayed out font (like gmail tab-complete)
  • Alternatively, when tab key is pressed after writing some code (example "import..."), a dropdown will appear showing the names/descriptions of related and relevant snippets. User can click on any of the names to complete their code with the snippet code.
    1. Design will be tricky and will most likely go through multiple iterations
    2. Have to make sure that this does not take away the tab key's functionality
    3. Have to make sure that the user is able to get rid of the pop up/grayed out text so it doesn't get in the way of their workflow.

Snippet Sorting/Organization

Problem
There are a limited amount of ways to sort snippets in the snippet panel.

Current Functionality

  • Sort by cell tags
  • Search by name and language

Solution

  • Sort by date created
  • Sort by last modified

Things to keep in mind

  • what would this look like in the snippets panel (what's the best way to display the sorting options)

Make snippets globally accessible on a system

Is your feature request related to a problem? Please describe.
Right now snippets are created and saved into a folder that is separate for each directory. This means that when jupyterlab is launched from a different directory it can be hard to access those snippets because they are in a folder in a separate directory.

Describe the solution you'd like
Figure out a way to make snippets available anywhere jupyterlab is launched. This way snippets from other projects can be used in a new workspace without needing to recreate them. This means sending all the snippets created to one location on the user's computer.

The way to see which snippet it previews is subtle

Is your feature request related to a problem? Please describe.
Header is too subtle to notice which snippet it previews.

Describe the solution you'd like
Create a border around the snippet that's clicked.

Describe alternatives you've considered
We can use draggable icon to indicate the selected snippet.

Edit snippets while searching or filtering

Describe the bug
Snippet doesn't get changed if I edit the snippet while searching or filtering

To Reproduce
Steps to reproduce the behavior:

  1. In the snippet explorer, search/ filter snippet
  2. Click on the three dots and edit one of the snippets
  3. Make changes and hit save
  4. See error

Expected behavior
The snippet should reflect the change in the editor

issue with closing preview

Describe the bug
If the delete snippet button is clicked while previewing snippet,
it will delete the the snippet but will not close the preview.

To Reproduce
Steps to reproduce the behavior:

  1. Click on a snippet on snippet panel to preview.
  2. Hit the close button in the snippet.
  3. See error

Expected behavior
Preview should also be closed.

Question about shortcut

  1. Customizing the keyboard shortcut on JupyterLab seems to just add a new shortcut instead of replacing it.
  2. Currently, the shortcut to save as snippet is Accel Shift S. And, this overrides Save AS.. shortcut, and this is a problem especially in non-notebook file because there's no way to get around it unlike notebook.

Right click to save cell as snippet

Is your feature request related to a problem? Please describe.
Currently, we can only right click to save a highlighted code as a snippet.

Describe the solution you'd like
Have another option to save cell(s) as a snippet.

Unable to build the extension after uninstall and reinstall.

Hello, last time I reported the problem of shortcut as Cap-S and I uninstalled the extension.

After that, you claim to have fixed the problem so I wanted to reinstall the extension. But I failed to build it or use it in the jupyterlab again. I enabled the extension, tried the command of clean and rebuild, but failed to activate the extension whatever measures do I take.

Could you help me with solving the problem or check if it is the problem of the extension?
image

Selecting multiple cells as a code snippet

Describe the bug
Saving multiple cells as a code snippet does not save the code at all.

To Reproduce
Steps to reproduce the behavior:

  1. Select multiple cells in notebook
  2. Save them as a code snippet
  3. Hover over the snippet
  4. See empty preview

Expected behavior
Preview should have a code from the selected cells.

Desktop (please complete the following information):

  • OS: iOS
  • Browser chrome, safari

Snippets panel looks strange in dark mode

Describe the bug
When JupyterLab dark is toggled, the snippets panel is still white but everything else is black so it looks weird. Also the hovers are inverted so it looks strange from that point of view as well. Also when a snippet is selected (previewing) the text is black but the highlight is a very dark gray so it is pretty difficult to read the text.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Settings
  2. Hover on JupyterLab Theme
  3. Select JupyterLab Dark on the side menu.
  4. See error

Expected behavior
Panel should match rest of color scheme. When snippet is selected, font color should be white or light grey to increase readability.

Screenshots
Screen Shot 2020-07-23 at 11 10 25 AM
Screen Shot 2020-07-23 at 11 11 21 AM

Desktop (please complete the following information):

  • OS: iOS
  • Browser: Chrome

Delete snippet while searching or filtering

Describe the bug
It lists all the snippets if I delete a snippet while searching or filtering

To Reproduce
Steps to reproduce the behavior:

  1. In the snippet explorer, search/ filter snippet
  2. Click on the three dots and delete one of the snippets
  3. See error

Expected behavior
A list of snippets should be remained just without the deleted snippet

UI/UX: Snippet Color Coding

Question: In what ways can we categorize snippets?

Current function/background:
In the past, we attempted to create snippets that could be sorted by using color tabs. After receiving feedback on color-coding, we decided to omit this way of sorting and stick with only using cell tags. In the future we would like to implement a way to color-code your snippets as another form of categorization.

Ideation:

  • color-coded cell tags (tags can be categorized further by project or function and labeled with colors)
  • color-coded tags/dots (small dots to represent common project or functions throughout snippets)

Things to keep in mind:

  • Is this method of categorization necessary or most effective?
  • How would this be represented in the snippet panel, editor, and creator?

Shift options icon

Bug
Options icon (3 dots) does not show up clearly depending on browser/model of computer. The current design places it too close to the scrollbar.

Solution
Shift icon some distance to the left to allow it to appear properly next to a variety of different scrollbars.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.