(texera) branch main updated: feat: reorganize dataset creation time display with timezone tooltip (#3702)

[linxinyuan]

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

linxinyuan 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 b65f18bb47 feat: reorganize dataset creation time display with 
timezone tooltip (#3702)
b65f18bb47 is described below

commit b65f18bb4729dd0837c663c432670ccb751e7285
Author: Xuan Gu <162244362+xua...@users.noreply.github.com>
AuthorDate: Tue Aug 26 23:31:21 2025 -0700

    feat: reorganize dataset creation time display with timezone tooltip (#3702)
    
    ### **Purpose**
    This PR addresses issue #3701, where the dataset creation time display
    was cluttered. It refactors the creation time display to align with
    workflow time formatting and improves readability by moving timezone
    details into a tooltip.
    
    ### **Changes**
    - **Consistent Formatting:**
    - Aligned dataset creation time format with workflow display (MM/dd/yyyy
    HH:mm:ss)
      - Used date-fns for date formatting
    
    - **Timezone Tooltip:**
    - Moved timezone information from inline display into a tooltip for a
    cleaner UI.
    - Tooltip now shows both GMT offset and full timezone name (e.g.,
    GMT-07:00 (Pacific Daylight Time)).
    
    ### **Demonstration**
    **Before:** creation time displayed inline with full timezone details
    <img width="704" height="255" alt="timezone"
    
src="https://github.com/user-attachments/assets/90648ef7-5307-43c1-a596-0bc469de63c1";
    />
    
    **After:**
    | Creation Time (Display) | Timezone (Tooltip) |
    |-------------------------|---------------------|
    | <img width="295" height="202" alt="time"
    
src="https://github.com/user-attachments/assets/68431adf-9ba1-4b80-8693-5c08a7c65d0a";
    /> | <img width="363" height="206" alt="new-timezone"
    
src="https://github.com/user-attachments/assets/f9c12b9b-547d-45c1-ba9c-2589ee6ce6c2";
    /> |
---
 .../user-dataset-explorer/dataset-detail.component.html     | 11 ++++++++++-
 .../user-dataset-explorer/dataset-detail.component.ts       | 13 ++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git 
a/core/gui/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
 
b/core/gui/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
index e0bee86403..0643855be8 100644
--- 
a/core/gui/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
+++ 
b/core/gui/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
@@ -22,7 +22,16 @@
     <h2 class="dataset-title">Dataset: {{datasetName}}</h2>
     <nz-card-meta
       style="padding-top: 10px"
-      nzDescription="Created at: {{datasetCreationTime}}"></nz-card-meta>
+      [nzDescription]="descriptionTemplate">
+      <ng-template #descriptionTemplate>
+        Created at:
+        <span
+          nz-tooltip
+          [nzTooltipTitle]="datasetCreationTimeTooltip">
+          {{datasetCreationTime}}
+        </span>
+      </ng-template>
+    </nz-card-meta>
     <nz-card-meta
       style="padding-top: 20px"
       nzDescription="{{datasetDescription}}"></nz-card-meta>
diff --git 
a/core/gui/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts
 
b/core/gui/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts
index 9849bb2306..ddc4998dbb 100644
--- 
a/core/gui/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts
+++ 
b/core/gui/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts
@@ -43,6 +43,7 @@ import { AdminSettingsService } from 
"../../../../service/admin/settings/admin-s
 import { HttpErrorResponse } from "@angular/common/http";
 import { Subscription } from "rxjs";
 import { formatSpeed, formatTime } from "src/app/common/util/format.util";
+import { format } from "date-fns";
 
 export const THROTTLE_TIME_MS = 1000;
 
@@ -56,6 +57,7 @@ export class DatasetDetailComponent implements OnInit {
   public datasetName: string = "";
   public datasetDescription: string = "";
   public datasetCreationTime: string = "";
+  public datasetCreationTimeTooltip: string = "";
   public datasetIsPublic: boolean = false;
   public datasetIsDownloadable: boolean = true;
   public userDatasetAccessLevel: "READ" | "WRITE" | "NONE" = "NONE";
@@ -269,7 +271,16 @@ export class DatasetDetailComponent implements OnInit {
           this.datasetIsDownloadable = dataset.isDownloadable;
           this.isOwner = dashboardDataset.isOwner;
           if (typeof dataset.creationTime === "number") {
-            this.datasetCreationTime = new 
Date(dataset.creationTime).toString();
+            const date = new Date(dataset.creationTime);
+            this.datasetCreationTime = format(date, "MM/dd/yyyy HH:mm:ss");
+            const timeZoneName =
+              new Intl.DateTimeFormat("en-US", {
+                timeZoneName: "long",
+              })
+                .format(date)
+                .split(", ")
+                .pop() || "";
+            this.datasetCreationTimeTooltip = `${format(date, "zzzz")} 
(${timeZoneName})`;
           }
         });
     }