feat(frontend): preview an operator's result when hovering it on the canvas

frontend/src/app/workspace/component/menu/menu.component.html

@@ -227,6 +227,14 @@
                   >Status</label
                 >
               </li>
+              <li nz-menu-item>
+                <label
+                  nz-checkbox
+                  [(ngModel)]="showResultPreview"
+                  (ngModelChange)="toggleResultPreview()"
+                  >Result preview</label
+                >
+              </li>
               <li nz-menu-item>
                 <label
                   nz-checkbox

frontend/src/app/workspace/component/menu/menu.component.ts

@@ -160,6 +160,7 @@ export class MenuComponent implements OnInit, OnDestroy {
   public showNumWorkers: boolean = false;
   public showStatus: boolean = false;
   public showHeatmap: boolean = false;
+  public showResultPreview: boolean = true;
   public heatmapView: HeatmapView = HeatmapView.Runtime;
   public HeatmapView = HeatmapView; // make Angular HTML access enum definition
   protected readonly USER_WORKFLOW = USER_WORKFLOW;
@@ -243,6 +244,7 @@ export class MenuComponent implements OnInit, OnDestroy {
 
   public ngOnInit(): void {
     this.restorePersistedHeatmapOverlay();
+    this.showResultPreview = this.workflowActionService.getJointGraphWrapper().isResultPreviewEnabled();
     // The export flags are reset when a menu is destroyed, which is right when the workspace is
     // left and wrong when a workflow's two views hand over and the results are kept. Recompute
     // from what is in hand, so a menu arriving on retained results does not offer a dead button.
@@ -353,6 +355,10 @@ export class MenuComponent implements OnInit, OnDestroy {
     document.body.removeChild(tempSpan);
   }
 
+  toggleResultPreview() {
+    this.workflowActionService.getJointGraphWrapper().setResultPreviewEnabled(this.showResultPreview);
+  }
+
   toggleNumWorkers() {
     this.workflowActionService
       .getJointGraphWrapper()

frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.html

@@ -0,0 +1,69 @@
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  The ASF licenses this file
+ to you 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.
+-->
+
+<div
+  class="result-preview"
+  role="tooltip">
+  <div class="result-preview__header">
+    <span class="result-preview__title">{{ preview.title }}</span>
+    <span
+      class="result-preview__summary"
+      [class.result-preview__summary--error]="preview.kind === 'error'"
+      >{{ preview.summary }}</span
+    >
+  </div>
+  <table
+    *ngIf="preview.columns.length > 0"
+    class="result-preview__table">
+    <thead>
+      <tr>
+        <th
+          *ngFor="let column of preview.columns"
+          [title]="column">
+          {{ column }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let row of rows ?? []">
+        <td
+          *ngFor="let cell of row"
+          [title]="cell">
+          {{ cell }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div
+    *ngIf="preview.kind === 'table' && rows === undefined"
+    class="result-preview__note">
+    Loading rows…
+  </div>
+  <div
+    *ngIf="preview.moreColumns > 0"
+    class="result-preview__note">
+    +{{ preview.moreColumns }} more {{ preview.moreColumns === 1 ? "column" : "columns" }}
+  </div>
+  <div
+    *ngIf="preview.detail"
+    class="result-preview__detail"
+    [class.result-preview__detail--error]="preview.kind === 'error'">
+    {{ preview.detail }}
+  </div>
+</div>

frontend/src/app/workspace/component/workflow-editor/operator-result-preview/operator-result-preview.component.scss

@@ -0,0 +1,108 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+
+// One size for every operator, so the card does not jump as the pointer moves between them: it
+// fits the 5 rows and 6 columns the preview shows, and longer content is cut or scrolls inside.
+.result-preview {
+  box-sizing: border-box;
+  width: 440px;
+  height: 210px;
+  overflow: hidden;
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #262626;
+  background: white;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+
+  &__header {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 8px;
+  }
+
+  &__title {
+    min-width: 0;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__summary {
+    flex-shrink: 0;
+    color: #595959;
+
+    &--error {
+      color: #cf1322;
+    }
+  }
+
+  // the columns share the card's width evenly, whatever their contents
+  &__table {
+    flex-shrink: 0;
+    width: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    font-family: monospace;
+    font-size: 11px;
+
+    th,
+    td {
+      padding: 3px 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-align: left;
+      border-bottom: 1px solid #f0f0f0;
+    }
+
+    th {
+      font-weight: 600;
+      color: #595959;
+      background: #fafafa;
+    }
+  }
+
+  &__note {
+    flex-shrink: 0;
+    color: #595959;
+  }
+
+  // a long error message scrolls inside the card instead of growing it
+  &__detail {
+    min-height: 0;
+    overflow-y: auto;
+    padding: 6px 8px;
+    border-radius: 4px;
+    background: #f5f5f5;
+
+    &--error {
+      color: #a8071a;
+      background: #fff1f0;
+    }
+  }
+}