[UI] Import Jupyter notebook

[senwang86]

Summary

• Add a right click menu item to import a single Jupyter notebook, both code cells and markdown cells are rendered correctly.
• All cells are grouped in a single column within a single scope.
• A notebook can be imported more than once.
• The notebook can be imported from inside the scope.

Test

Follow-up

• More tests by importing other public Github notebooks
• Another round of the "export" test for the content integrity.

[lihebi]

Thanks! Attaching a few minor comments.

[lihebi]

This magic number 130 must be kept consistent with the 130 in Canvas.tsx. Let's store it in one global variable and access it in both files. Also, we can use some floating number to mark it special, e.g., 136.66.

[senwang86]

Given it's a hacky way to apply autolayout, I think we can use 130 here. We need to find a better way for autolayer eventually.

[lihebi]

Given it's a hacky way

Precisely because it is hacky, we want to avoid breaking it accidentally, by:

• using a global variable to avoid potential inconsistency error
• using some floating numbers to prevent a pod from being the same value.

[lihebi]

I see you have changed to a global variable. The floating number isn't that critical (as long as it's not 120).

[lihebi]

The current moveIntoScope function is pretty heavy because it calls the three heavy functions adjustLevel(), updateView, and buildNode2Children at its end (ref). I can see it to be very slow when a repo becomes large.

Those three functions only need to be called once at the end of the ipynbImport action. So let's add a moveIntoScopeLight without those three functions and use it here.

moveIntoScopeLight() {...}
moveIntoScope() {
    moveIntoScopeLight(); 
    get().adjustLevel();
    get().updateView();
    get().buildNode2Children();
}
importIpynb() {
    ...
    for() {...
        moveIntoScopeLight()
    }
    get().adjustLevel();
    get().updateView();
    get().buildNode2Children();
    ...
}

[lihebi]

This was for debugging. Not needed.

[forrestbao]

Thanks @senwang86. Maybe the import menu can be moved to the navigation bar?

[senwang86]

Thanks @senwang86. Maybe the import menu can be moved to the navigation bar?

I initially placed the "import button" in the navigation bar, but later realized that the user may want to control "where" the imported notebook is inserted. In the end, I capture the right-click position on canvas and utilize it as the insertion position.

[forrestbao]

Thanks @senwang86. Maybe the import menu can be moved to the navigation bar?

I initially placed the "import button" in the navigation bar, but later realized that the user may want to control "where" the imported notebook is inserted. In the end, I capture the right-click position on canvas and utilize it as the insertion position.

Good thoughts.

[lihebi]

Thanks, Sen!

[forrestbao]

Hi @senwang86, can I make a minor additional feature request? Can you allow .py scripts to be imported into Codepod? Just the text content.

[senwang86]

Hi @senwang86, can I make a minor additional feature request? Can you allow .py scripts to be imported into Codepod? Just the text content.

Sure, I believe we can begin by importing a .py file into a single pod. I'm wondering if the "local runtime" would be a better fit for the multiple file import case though.

[forrestbao]

Yes, importing one .py file into a single pod is good enough for now. The reason I want to import .py file is because I can then see, modify and use its content in the same interface with the rest of the code in a Codepod repo. Changes can be quickly reflected in the runtime without needing to reimport a module.

[senwang86]

Yes, importing one .py file into a single pod is good enough for now. The reason I want to import .py file is because I can then see, modify and use its content in the same interface with the rest of the code in a Codepod repo. Changes can be quickly reflected in the runtime without needing to reimport a module.

Please check #374 .

[forrestbao]

@senwang86, please add support to import execution output from a ipynb when you have time