zyratlo opened a new pull request, #4436:
URL: https://github.com/apache/texera/pull/4436
<!--
Thanks for sending a pull request (PR)! Here are some tips for you:
1. If this is your first time, please read our contributor guidelines:
[Contributing to
Texera](https://github.com/apache/texera/blob/main/CONTRIBUTING.md)
2. Ensure you have added or run the appropriate tests for your PR
3. If the PR is work in progress, mark it a draft on GitHub.
4. Please write your PR title to summarize what this PR proposes, we
are following Conventional Commits style for PR titles as well.
5. Be sure to keep the PR description updated to reflect all changes.
-->
### What changes were proposed in this PR?
<!--
Please clarify what changes you are proposing. The purpose of this section
is to outline the changes. Here are some tips for you:
1. If you propose a new API, clarify the use case for a new API.
2. If you fix a bug, you can clarify why it is a bug.
3. If it is a refactoring, clarify what has been changed.
3. It would be helpful to include a before-and-after comparison using
screenshots or GIFs.
4. Please consider writing useful notes for better and faster reviews.
-->
This PR introduces the frontend portion of the **Python Notebook Migration
Tool**, a new tool that converts a user-uploaded Python Jupyter notebook into a
Texera workflow. New frontend code inclues:
- `jupyter-notebook-panel component` which hosts the iframe in the Texera
workspace for the Jupyter server
- `jupyter-panel service` which handles the mapping computation and
highlighting logic and instantiating the jupyter-notebook-panel component
- `migration-llm` which contains the communication logic between the tool
and the LiteLLM proxy server
- `notebook-migration service` which stores the mapping, handles
communication with the Jupyter service, migration LLM service, and the backend
service.
Details about the backend are in the separate PR for the backend.
#### Demo Videos (these can also be found on the parent issue)
1. User uploads a Jupyter Notebook using the new tool button. They can
select any available model (depending on the LiteLLM configuration) and provide
their API key. In the demo video, the API key is stored as a system environment
variable, so it is left blank. After the user submits, they will need to wait
until the LLM responds.
https://github.com/user-attachments/assets/d698dc40-939f-49a9-9439-de6ba3f11ca5
2. After the LLM responds, the workspace will reload with the generated
workflow and the Jupyter popup.
https://github.com/user-attachments/assets/b471b334-2b42-46df-ae37-f834816f635f
3. The user can edit the workflow however they want. To assist with this
process, when the user clicks on a workflow operator, it will highlight the
corresponding notebook cell used to generate that operator, and vice versa.
https://github.com/user-attachments/assets/49ab77a2-0766-49ab-9faf-51b3488cfd03
4. The user can minimize the Jupyter panel and reopen it, and can also
delete the notebook associated with the workflow.
https://github.com/user-attachments/assets/bc7c1b62-298d-4001-8de6-9bd28a43dec4
5. When the user reopens a workflow that was generated from a notebook, it
will also reopen the notebook.
https://github.com/user-attachments/assets/ac94b8ba-cfb1-4c4e-9397-16779e2ec46a
### Any related issues, documentation, discussions?
<!--
Please use this section to link other resources if not mentioned already.
1. If this PR fixes an issue, please include `Fixes #1234`, `Resolves
#1234`
or `Closes #1234`. If it is only related, simply mention the issue
number.
2. If there is design documentation, please add the link.
3. If there is a discussion in the mailing list, please add the link.
-->
Closes #4428
This PR closes the sub-issue related to the frontend, the parent issue is
#4301.
#### Architecture Diagram (these can also be found on the parent issue)
<img width="1333" height="942" alt="Image"
src="https://github.com/user-attachments/assets/ce31d2ed-2aad-402c-9ec7-02d58ec53980";
/>
<img width="1332" height="935" alt="Image"
src="https://github.com/user-attachments/assets/b34491a3-9033-4e93-a303-07806079ab07";
/>
<img width="1343" height="938" alt="Image"
src="https://github.com/user-attachments/assets/a3e6d77a-e369-40dd-85f5-47be4eb2d4f9";
/>
### How was this PR tested?
<!--
If tests were added, say they were added here. Or simply mention that if the
PR
is tested with existing test cases. Make sure to include/update test cases
that
check the changes thoroughly including negative and positive cases if
possible.
If it was tested in a way different from regular unit tests, please clarify
how
you tested step by step, ideally copy and paste-able, so that other
reviewers can
test and check, and descendants can verify in the future. If tests were not
added,
please describe why they were not added and/or why it was difficult to add.
-->
New frontend tests related to this PR were added:
-
`frontend/src/app/workspace/component/jupyter-notebook-panel/jupyter-notebook-panel.component.spec.ts`
-
`frontend/src/app/workspace/service/jupyter-panel/jupyter-panel.service.spec.ts`
-
`frontend/src/app/workspace/service/notebook-migration/notebook-migration.service.spec.ts`
Pre-existing tests, builds, and checks were ran and passed.
### Was this PR authored or co-authored using generative AI tooling?
<!--
If generative AI tooling has been used in the process of authoring this PR,
please include the phrase: 'Generated-by: ' followed by the name of the tool
and its version. If no, write 'No'.
Please refer to the [ASF Generative Tooling
Guidance](https://www.apache.org/legal/generative-tooling.html) for details.
-->
Generated-by: ChatGPT (GPT-5.3)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
