Adding a button to generate a report for a workflow #2770

xudongwu-0 · 2024-08-09T22:03:09Z

This PR introduces the functionality with a button in the menu to generate an initial report with a snapshot of the workflow.

The file was created in this pr: ReportGenerationService

generateWorkflowSnapshot(workflowName: string): Captures a snapshot of the workflow editor as a base64-encoded PNG image URL. It ensures all image resources are loaded before taking the snapshot using html2canvas.
generateReportAsHtmll(workflowSnapshotURL: string, workflowName: string): Generates an HTML file containing the workflow snapshot and triggers a download of the file. The file name is derived from the workflow name.

The file was changed in this pr: MenuComponent:

onClickGenerateReport: Displays a notification indicating the report generation has started, calls generateWorkflowSnapshot from ReportGenerationService to capture the workflow snapshot, and then calls generateResultsAsHtml to generate and download the HTML report.

Operation Process：Click the button below.

Here is the generated report.

chenlica · 2024-08-09T23:02:49Z

Suggestions:

Give an overview of the design;
Attach screenshots of the generated report.

bobbai00

Good job! The code is much clearer now.

Please take care of the comments. Also functionality-wise, can you see if there is a way to embed the operator icon into the exported image?

core/gui/src/app/workspace/service/report-print/report-print.service.ts

core/gui/src/app/workspace/component/menu/menu.component.ts

core/gui/src/app/workspace/service/report-print/report-print.service.ts

… the yarn format:fix

bobbai00

Left some comments.

core/gui/src/app/workspace/component/menu/menu.component.ts

core/gui/src/app/workspace/service/report-print/report-print.service.ts

bobbai00

Left some comments

core/gui/src/app/workspace/component/menu/menu.component.ts

core/gui/src/app/workspace/service/report-print/report-print.service.ts

add notificationService

bobbai00

Looks good. left some comments

core/gui/src/app/workspace/service/report-print/report-print.service.ts

add short comments

chenlica · 2024-08-12T19:35:17Z

A few comments:

Include the description about this PR only, not other PRs.
Give an overview of the design, not just the function names.
Fix grammatical errors.

chenlica · 2024-08-12T19:58:44Z

The description says: "After running the workflow, click the bottom below." What if the user clicks the button before the execution is finished? If it's not clickable, can we disable the button before the execution?

xudongwu-0 · 2024-08-12T20:10:54Z

The description says: "After running the workflow, click the bottom below." What if the user clicks the button before the execution is finished? If it's not clickable, can we disable the button before the execution?

I think it is clickable before finishing execution in this pr. But after adding the outcomes of operators as part B, if the user clicks the button before the execution is finished, the report will not include the outcome. I have edited the description. I will try to disable it after adding the outcomes of operators.

core/gui/src/app/workspace/component/menu/menu.component.html

core/gui/src/app/workspace/component/menu/menu.component.ts

core/gui/src/app/workspace/service/report-print/report-print.service.ts

chenlica · 2024-08-12T20:58:18Z

Change the subject to something like: "Adding a button to generate a report for a workflow"

core/gui/src/app/app.module.ts

core/gui/src/app/workspace/component/menu/menu.component.html

core/gui/src/app/workspace/component/menu/menu.component.ts

core/gui/src/app/workspace/service/report-generate/report-generate.service.ts

chenlica

LGTM now after the changes.

xudongwu-0 · 2024-08-13T05:01:15Z

LGTM now after the changes.

Thank you for your time and patience.

This PR enhances the report generation functionality by integrating comprehensive operator results handling, allowing for more detailed and informative reports. This PR is a continuation and enhancement of the previous PR, which can be found at the following link: #2770 The file was modified in this PR: ReportGenerationService getAllOperatorResults(operatorIds: string[]): Collects all operator results from the workflow, processes them, and generates an HTML report containing both the workflow snapshot and the results for each operator. The final report is automatically downloaded with a file name derived from the workflow name. retrieveOperatorInfoReport(operatorId: string,allResults: { operatorId: string; html: string }[]): Fetches and processes the result for a given operator, generating an HTML snippet that is included in the final report. Handles different result types, including paginated results and snapshot results. generateReportAsHtml(workflowSnapshot: string, allResults: string[], workflowName: string): Generates a comprehensive HTML file containing the workflow snapshot and all operator results, then triggers a download of the report. The file name is created using the workflow name, ensuring easy identification of the report. The file was changed in this PR: MenuComponent onClickGenerateReport: Displays a notification indicating that the report generation has started, collects the operator results using getAllOperatorResults from ReportGenerationService, and then calls generateReportAsHtml to generate and download the comprehensive HTML report. Operation Process: Click the button below to generate the report with detailed operator results and the workflow snapshot. ![image](https://github.com/user-attachments/assets/38311e39-cda1-4c85-a4f2-80d4f4a092fc) Here is a part of the example report. ![image](https://github.com/user-attachments/assets/e93b10b4-347a-4ce1-aa8b-45d943b56c21) ![image](https://github.com/user-attachments/assets/128aa56a-867f-4ee3-a15e-8f7fe32a5cd5)

…ion (#2807) This PR enhances the report generation functionality by adding Operator JSON and Comments Section. This PR is a continuation and enhancement of the previous PR, which can be found at the following link: #2770 and #2792 1. The file was modified in this PR: ReportGenerationService retrieveOperatorInfoReport(operatorId: string,allResults: { operatorId: string; html: string }[]): Implements a 'Toggle Detail' button beneath each operator, allowing users to expand and view the operator's corresponding JSON, formatted using a JSON viewer. Adds a comments section below each operator, enabling users to leave their own comments. It can be use 2. generateReportAsHtml(workflowSnapshot: string, allResults: string[], workflowName: string): Generates a comprehensive HTML file containing the workflow snapsho, all operator results, operator details, and comments section ,then triggers a download of the report. add 'Download Workflow JSON' button, allowing user download the whole JSON file directly from the report. Operation Process: Click the button below to generate the report with detailed operator results and the workflow snapshot. ![image](https://github.com/user-attachments/assets/737a7087-7997-40f6-b1eb-931f139399e6) Here is a part of the example report. ![image](https://github.com/user-attachments/assets/82bc91e8-0d25-4d2b-97d1-8f844552329e) ![image](https://github.com/user-attachments/assets/93f98a15-bc1c-45d5-a5ee-31953e00491f)

This PR enhances the report generation functionality by adding animation during the process. This PR is a continuation and enhancement of the previous PR: Adding a button to generate a report for a workflow: #2770 Enhancing Report Generation by adding Operator Results: #2792 Enhancing Report Generation by Adding Operator Json and Comments Section : #2807 Ai Flag: #2818 and #2808 Key Changes: **menu.component.ts:** At the start, notification.blank is called to display a message, and notification.remove is used to remove it at the end. Upon successful generation, this.notificationService.success is invoked. **notification.service.ts:** notification.blank and notification.remove have been added. Screenshot of the notification: ![image](https://github.com/user-attachments/assets/76f01cfd-dd52-4ba5-8f87-d2703473e82e) ![image](https://github.com/user-attachments/assets/a0a06876-275d-4062-a62a-0b423488107c)

#2816) This PR enhances the report generation functionality by addingStory-teller Ai based on Ai flag. This PR is a continuation and enhancement of the previous PR: Adding a button to generate a report for a workflow: #2770 Enhancing Report Generation by adding Operator Results: #2792 Enhancing Report Generation by Adding Operator Json and Comments Section : #2807 Ai Flag: #2818 and #2808 **New Methods:** checkAiAssistantEnabled(): Validates whether the AI Assistant feature is enabled by checking the availability of the required API key. This function ensures that subsequent AI-based functionalities are executed only when the AI Assistant is available. generateComment(operatorInfo: any): Generates insightful comments for each operator using OpenAI’s GPT model, tailored for a highly educated audience but one that might not have deep statistical knowledge. The comments are plain text, enhancing the overall readability and value of the report. generateSummaryComment(operatorInfo: any): Produces a concise, insightful summary comment that highlights key findings, trends, and areas of improvement across the workflow, focusing particularly on UDFs. This function is crucial for providing a comprehensive understanding of the workflow to users. **Enhanced Methods:** retrieveOperatorInfoReport(operatorId: string, allResults: { operatorId: string; html: string }[]): Implements the checkAiAssistantEnabled, generateComment, and generateSummaryComment functions to enrich the operator information section in the generated reports. The function now adds a "Toggle Detail" button beneath each operator, allowing users to expand and view the operator’s corresponding JSON, formatted using a JSON viewer. Additionally, a comments section is added below each operator, enabling users to leave or view AI-generated comments. generateReportAsHtml(workflowSnapshot: string, allResults: string[], workflowName: string): Generates a comprehensive HTML file containing the workflow snapshot, all operator results, operator details, and comments. This method integrates AI-generated comments and a summary section at the end of the report. It also introduces a "Download Workflow JSON" button, allowing users to download the entire workflow JSON file directly from the report. **Operation Process:** Click the button below to generate the report with detailed operator results and the workflow snapshot. ![image](https://github.com/user-attachments/assets/4c2fccf7-c931-4e9c-a2d2-a6bcc9d640a1) To turn on the ai feature, you need to modify the following sections in application.udf ![image](https://github.com/user-attachments/assets/d88755af-c86e-4eb3-a717-59a69b74200e) For example, to turn on the openai: ![image](https://github.com/user-attachments/assets/588de609-806e-46f8-abea-6a08030243fb) Here is a part of the example report. ![image](https://github.com/user-attachments/assets/3911a558-497f-45bc-a948-1a7a3a671a85) ![image](https://github.com/user-attachments/assets/f8fa5284-5a5b-4d70-a18b-283a2b3c612f)

This PR enhances the report generation functionality by integrating comprehensive operator results handling, allowing for more detailed and informative reports. This PR is a continuation and enhancement of the previous PR, which can be found at the following link: #2770 The file was modified in this PR: ReportGenerationService getAllOperatorResults(operatorIds: string[]): Collects all operator results from the workflow, processes them, and generates an HTML report containing both the workflow snapshot and the results for each operator. The final report is automatically downloaded with a file name derived from the workflow name. retrieveOperatorInfoReport(operatorId: string,allResults: { operatorId: string; html: string }[]): Fetches and processes the result for a given operator, generating an HTML snippet that is included in the final report. Handles different result types, including paginated results and snapshot results. generateReportAsHtml(workflowSnapshot: string, allResults: string[], workflowName: string): Generates a comprehensive HTML file containing the workflow snapshot and all operator results, then triggers a download of the report. The file name is created using the workflow name, ensuring easy identification of the report. The file was changed in this PR: MenuComponent onClickGenerateReport: Displays a notification indicating that the report generation has started, collects the operator results using getAllOperatorResults from ReportGenerationService, and then calls generateReportAsHtml to generate and download the comprehensive HTML report. Operation Process: Click the button below to generate the report with detailed operator results and the workflow snapshot. ![image](https://github.com/user-attachments/assets/38311e39-cda1-4c85-a4f2-80d4f4a092fc) Here is a part of the example report. ![image](https://github.com/user-attachments/assets/e93b10b4-347a-4ce1-aa8b-45d943b56c21) ![image](https://github.com/user-attachments/assets/128aa56a-867f-4ee3-a15e-8f7fe32a5cd5)

…ion (#2807) This PR enhances the report generation functionality by adding Operator JSON and Comments Section. This PR is a continuation and enhancement of the previous PR, which can be found at the following link: #2770 and #2792 1. The file was modified in this PR: ReportGenerationService retrieveOperatorInfoReport(operatorId: string,allResults: { operatorId: string; html: string }[]): Implements a 'Toggle Detail' button beneath each operator, allowing users to expand and view the operator's corresponding JSON, formatted using a JSON viewer. Adds a comments section below each operator, enabling users to leave their own comments. It can be use 2. generateReportAsHtml(workflowSnapshot: string, allResults: string[], workflowName: string): Generates a comprehensive HTML file containing the workflow snapsho, all operator results, operator details, and comments section ,then triggers a download of the report. add 'Download Workflow JSON' button, allowing user download the whole JSON file directly from the report. Operation Process: Click the button below to generate the report with detailed operator results and the workflow snapshot. ![image](https://github.com/user-attachments/assets/737a7087-7997-40f6-b1eb-931f139399e6) Here is a part of the example report. ![image](https://github.com/user-attachments/assets/82bc91e8-0d25-4d2b-97d1-8f844552329e) ![image](https://github.com/user-attachments/assets/93f98a15-bc1c-45d5-a5ee-31953e00491f)

This PR enhances the report generation functionality by adding animation during the process. This PR is a continuation and enhancement of the previous PR: Adding a button to generate a report for a workflow: #2770 Enhancing Report Generation by adding Operator Results: #2792 Enhancing Report Generation by Adding Operator Json and Comments Section : #2807 Ai Flag: #2818 and #2808 Key Changes: **menu.component.ts:** At the start, notification.blank is called to display a message, and notification.remove is used to remove it at the end. Upon successful generation, this.notificationService.success is invoked. **notification.service.ts:** notification.blank and notification.remove have been added. Screenshot of the notification: ![image](https://github.com/user-attachments/assets/76f01cfd-dd52-4ba5-8f87-d2703473e82e) ![image](https://github.com/user-attachments/assets/a0a06876-275d-4062-a62a-0b423488107c)

#2816) This PR enhances the report generation functionality by addingStory-teller Ai based on Ai flag. This PR is a continuation and enhancement of the previous PR: Adding a button to generate a report for a workflow: #2770 Enhancing Report Generation by adding Operator Results: #2792 Enhancing Report Generation by Adding Operator Json and Comments Section : #2807 Ai Flag: #2818 and #2808 **New Methods:** checkAiAssistantEnabled(): Validates whether the AI Assistant feature is enabled by checking the availability of the required API key. This function ensures that subsequent AI-based functionalities are executed only when the AI Assistant is available. generateComment(operatorInfo: any): Generates insightful comments for each operator using OpenAI’s GPT model, tailored for a highly educated audience but one that might not have deep statistical knowledge. The comments are plain text, enhancing the overall readability and value of the report. generateSummaryComment(operatorInfo: any): Produces a concise, insightful summary comment that highlights key findings, trends, and areas of improvement across the workflow, focusing particularly on UDFs. This function is crucial for providing a comprehensive understanding of the workflow to users. **Enhanced Methods:** retrieveOperatorInfoReport(operatorId: string, allResults: { operatorId: string; html: string }[]): Implements the checkAiAssistantEnabled, generateComment, and generateSummaryComment functions to enrich the operator information section in the generated reports. The function now adds a "Toggle Detail" button beneath each operator, allowing users to expand and view the operator’s corresponding JSON, formatted using a JSON viewer. Additionally, a comments section is added below each operator, enabling users to leave or view AI-generated comments. generateReportAsHtml(workflowSnapshot: string, allResults: string[], workflowName: string): Generates a comprehensive HTML file containing the workflow snapshot, all operator results, operator details, and comments. This method integrates AI-generated comments and a summary section at the end of the report. It also introduces a "Download Workflow JSON" button, allowing users to download the entire workflow JSON file directly from the report. **Operation Process:** Click the button below to generate the report with detailed operator results and the workflow snapshot. ![image](https://github.com/user-attachments/assets/4c2fccf7-c931-4e9c-a2d2-a6bcc9d640a1) To turn on the ai feature, you need to modify the following sections in application.udf ![image](https://github.com/user-attachments/assets/d88755af-c86e-4eb3-a717-59a69b74200e) For example, to turn on the openai: ![image](https://github.com/user-attachments/assets/588de609-806e-46f8-abea-6a08030243fb) Here is a part of the example report. ![image](https://github.com/user-attachments/assets/3911a558-497f-45bc-a948-1a7a3a671a85) ![image](https://github.com/user-attachments/assets/f8fa5284-5a5b-4d70-a18b-283a2b3c612f)

xudongwu-0 added 2 commits August 9, 2024 14:57

add the screenshot function

fe4e1b2

add the screenshot function

8a0c2cd

xudongwu-0 self-assigned this Aug 9, 2024

xudongwu-0 requested review from bobbai00 and chenlica August 9, 2024 22:03

run yarn format:fix

7bebbc1

bobbai00 reviewed Aug 10, 2024

View reviewed changes

replace that async with Observe of getWorkflowSnapshot().

2456359

xudongwu-0 force-pushed the report-pr-1 branch from 635468b to 2456359 Compare August 10, 2024 03:18

replace that async with Observe of getWorkflowSnapshot().

c84f0d0

xudongwu-0 force-pushed the report-pr-1 branch from 7f73525 to c84f0d0 Compare August 10, 2024 03:32

replace that async with Observe of getWorkflowSnapshot(). Go through…

3c4fe25

… the yarn format:fix

xudongwu-0 force-pushed the report-pr-1 branch from 4dcb6f1 to 3c4fe25 Compare August 10, 2024 03:33

xudongwu-0 requested a review from bobbai00 August 10, 2024 03:47

bobbai00 reviewed Aug 10, 2024

View reviewed changes

2nd comments.

4d495b8

xudongwu-0 force-pushed the report-pr-1 branch from 7aac413 to 4d495b8 Compare August 10, 2024 20:19

bobbai00 reviewed Aug 11, 2024

View reviewed changes

core/gui/src/app/workspace/component/menu/menu.component.ts Outdated Show resolved Hide resolved

core/gui/src/app/workspace/service/report-print/report-print.service.ts Outdated Show resolved Hide resolved

xudongwu-0 added 2 commits August 11, 2024 10:03

timeout - Promise

f278c87

add notificationService

setTimeout - Promise

1fac658

add notificationService

xudongwu-0 force-pushed the report-pr-1 branch from 2c60511 to 1fac658 Compare August 11, 2024 17:11

xudongwu-0 requested a review from bobbai00 August 11, 2024 18:25

bobbai00 reviewed Aug 12, 2024

View reviewed changes

xudongwu-0 added 2 commits August 12, 2024 10:16

add workflowName to getWorkflowSnapshot by this.currentWorkflowName.

ee10f26

add short comments

add workflowName to getWorkflowSnapshot by this.currentWorkflowName.

0f788b1

add short comments

xudongwu-0 force-pushed the report-pr-1 branch from 1882b52 to 0f788b1 Compare August 12, 2024 17:19

chenlica reviewed Aug 12, 2024

View reviewed changes

xudongwu-0 changed the title ~~Report pr 1~~ Adding a button to generate a report for a workflow Aug 12, 2024

change the name of functions and service advised by Prof Li

521ed07

xudongwu-0 force-pushed the report-pr-1 branch from 59749ec to 521ed07 Compare August 12, 2024 21:34

chenlica reviewed Aug 13, 2024

View reviewed changes

change the name of functions and service advised by Prof Li

059cd1c

xudongwu-0 force-pushed the report-pr-1 branch from bcb2b1d to 059cd1c Compare August 13, 2024 04:09

reportPrintService ->reportGenerationService

5dd95fd

xudongwu-0 force-pushed the report-pr-1 branch from cd147df to 5dd95fd Compare August 13, 2024 04:39

Merge branch 'master' into report-pr-1

b4442aa

chenlica approved these changes Aug 13, 2024

View reviewed changes

xudongwu-0 merged commit 7f244f2 into master Aug 13, 2024

xudongwu-0 deleted the report-pr-1 branch August 13, 2024 05:03

xudongwu-0 mentioned this pull request Aug 20, 2024

Enhancing Report Generation by adding Operator Results #2792

Merged

xudongwu-0 mentioned this pull request Aug 27, 2024

Enhancing Report Generation by Adding Operator Json and Comments Section #2807

Merged

xudongwu-0 mentioned this pull request Sep 3, 2024

Enhancing Report Generation by Adding Story-teller Ai based on Ai flag #2816

Merged

This was referenced Sep 17, 2024

Enhance Report Generation by Adding Animation During the Generation Process #2840

Closed

Add notification when report is generating #2843

Merged

Adding a button to generate a report for a workflow #2770

Adding a button to generate a report for a workflow #2770

Uh oh!

Conversation

xudongwu-0 commented Aug 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chenlica commented Aug 9, 2024

Uh oh!

bobbai00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bobbai00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bobbai00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bobbai00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chenlica commented Aug 12, 2024

Uh oh!

chenlica commented Aug 12, 2024

Uh oh!

xudongwu-0 commented Aug 12, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chenlica commented Aug 12, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chenlica left a comment

Choose a reason for hiding this comment

Uh oh!

xudongwu-0 commented Aug 13, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

xudongwu-0 commented Aug 9, 2024 •

edited

Loading