(texera) branch main updated: fix: visualization result panel iframe sizing after Angular upgrade (#4542)

[linxinyuan]

This is an automated email from the ASF dual-hosted git repository.

aglinxinyuan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/texera.git


The following commit(s) were added to refs/heads/main by this push:
     new 217ddc20bd fix: visualization result panel iframe sizing after Angular 
upgrade (#4542)
217ddc20bd is described below

commit 217ddc20bd10b7770b5a0c5f2dfb6ccf560d61ff
Author: Xinyuan Lin <xinyu...@uci.edu>
AuthorDate: Mon Apr 27 23:42:55 2026 -0700

    fix: visualization result panel iframe sizing after Angular upgrade (#4542)
    
    ### What changes were proposed in this PR?
    - Fix visualization result rendering in the result panel after the
    Angular upgrade.
    - Update result panel tab content styles so ng-zorro tab panes preserve
    full height.
    - Remove absolute iframe sizing from visualization output and let the
    iframe fill its container.
    
    ### Any related issues, documentation, discussions?
    Closes #4541
    
    
    ### How was this PR tested?
    Tested manually.
    
    
    ### Was this PR authored or co-authored using generative AI tooling?
    No.
---
 .../workspace/component/result-panel/result-panel.component.html    | 5 ++++-
 .../workspace/component/result-panel/result-panel.component.scss    | 6 ++++++
 .../visualization-frame-content.component.scss                      | 6 +++---
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git 
a/frontend/src/app/workspace/component/result-panel/result-panel.component.html 
b/frontend/src/app/workspace/component/result-panel/result-panel.component.html
index 0e3a74f8e2..a3d1865e1d 100644
--- 
a/frontend/src/app/workspace/component/result-panel/result-panel.component.html
+++ 
b/frontend/src/app/workspace/component/result-panel/result-panel.component.html
@@ -92,6 +92,7 @@
       Result Panel{{operatorTitle ? ': ' + operatorTitle : ''}}
     </h4>
     <nz-tabs
+      class="result-content"
       [nzSize]="'small'"
       [nzTabPosition]="'left'">
       <div *ngIf="frameComponentConfigs.size === 0">
@@ -103,7 +104,9 @@
       </div>
       <div *ngFor="let config of frameComponentConfigs | keyvalue">
         <nz-tab nzTitle="{{config.key}}">
-          <div #dynamicComponent>
+          <div
+            #dynamicComponent
+            class="result-content">
             <ng-container
               *ngComponentOutlet="config.value.component;inputs: 
config.value.componentInputs"></ng-container>
           </div>
diff --git 
a/frontend/src/app/workspace/component/result-panel/result-panel.component.scss 
b/frontend/src/app/workspace/component/result-panel/result-panel.component.scss
index 9dbdd63dd5..229857b4a4 100644
--- 
a/frontend/src/app/workspace/component/result-panel/result-panel.component.scss
+++ 
b/frontend/src/app/workspace/component/result-panel/result-panel.component.scss
@@ -67,6 +67,12 @@ $type-colors: (
   height: inherit;
 }
 
+.result-content,
+:host ::ng-deep .result-content .ant-tabs-content,
+:host ::ng-deep .result-content .ant-tabs-tabpane {
+  height: 100%;
+}
+
 #result-buttons {
   position: absolute;
   bottom: 0;
diff --git 
a/frontend/src/app/workspace/component/visualization-panel-content/visualization-frame-content.component.scss
 
b/frontend/src/app/workspace/component/visualization-panel-content/visualization-frame-content.component.scss
index 1eba108d9e..c84ac14627 100644
--- 
a/frontend/src/app/workspace/component/visualization-panel-content/visualization-frame-content.component.scss
+++ 
b/frontend/src/app/workspace/component/visualization-panel-content/visualization-frame-content.component.scss
@@ -18,8 +18,8 @@
  */
 
 #html-content {
-  position: absolute;
-  width: calc(100% - 115px);
-  height: calc(100% - 40px);
+  display: block;
+  width: 100%;
+  height: 100%;
   border: none;
 }