This is an automated email from the ASF dual-hosted git repository.
aicam 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 bda1f952fb feat: display cover image on dataset detail page (#5060)
bda1f952fb is described below
commit bda1f952fbbde2876769824ce630de7e1f3ba167
Author: Xuan Gu <[email protected]>
AuthorDate: Mon May 18 19:20:49 2026 -0700
feat: display cover image on dataset detail page (#5060)
<!--
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 adds cover image support to the dataset detail page header.
- Shows a blank box (280×120, no image) while the dataset record is
being fetched
- If a dataset does not have a cover image, a default placeholder is
displayed.
- If a dataset has a cover image, the uploaded image is displayed at
280×120
After a user picks a new cover via "set as cover", the image refreshes
in place without a page reload. The fixed cover endpoint
(`/dataset/{did}/cover`) is keyed in the `<img>` src with the cover's
relative path.
Demo
<img width="1394" height="790" alt="cover-image"
src="https://github.com/user-attachments/assets/734acc0f-387f-4d3c-ac67-8ff14fbe3343";
/>
### 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.
-->
Related to #4319
### 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.
-->
Passed existing automated tests.
### 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: Claude Opus 4.7
---
.../dataset-detail.component.html | 184 +++++++++++----------
.../dataset-detail.component.scss | 17 ++
.../dataset-detail.component.ts | 12 +-
3 files changed, 125 insertions(+), 88 deletions(-)
diff --git
a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
index 26dafff237..4fc5b9510e 100644
---
a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
+++
b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
@@ -19,99 +19,111 @@
<div *ngIf="!isMaximized">
<nz-card>
- <h2>Dataset: {{datasetName}}</h2>
- <nz-card-meta
- style="padding-top: 5px"
- [nzDescription]="descriptionTemplate">
- <ng-template #descriptionTemplate>
- Created at:
- <span
- nz-tooltip
- [nzTooltipTitle]="datasetCreationTimeTooltip">
- {{datasetCreationTime}}
- </span>
- </ng-template>
- </nz-card-meta>
+ <div class="dataset-header">
+ <div class="dataset-header-meta">
+ <h2>Dataset: {{datasetName}}</h2>
+ <nz-card-meta
+ style="padding-top: 5px"
+ [nzDescription]="descriptionTemplate">
+ <ng-template #descriptionTemplate>
+ Created at:
+ <span
+ nz-tooltip
+ [nzTooltipTitle]="datasetCreationTimeTooltip">
+ {{datasetCreationTime}}
+ </span>
+ </ng-template>
+ </nz-card-meta>
- <div class="status-tag-row">
- <nz-tag
- class="status-tag"
- [ngClass]="{ 'tag-public': datasetIsPublic }">
- <i
- nz-icon
- [nzType]="datasetIsPublic ? 'global' : 'lock'"
- nzTheme="outline"></i>
- {{ datasetIsPublic ? "Public" : "Private" }}
- </nz-tag>
+ <div class="status-tag-row">
+ <nz-tag
+ class="status-tag"
+ [ngClass]="{ 'tag-public': datasetIsPublic }">
+ <i
+ nz-icon
+ [nzType]="datasetIsPublic ? 'global' : 'lock'"
+ nzTheme="outline"></i>
+ {{ datasetIsPublic ? "Public" : "Private" }}
+ </nz-tag>
- <nz-tag
- class="status-tag"
- [ngClass]="{ 'tag-downloadable': datasetIsDownloadable }">
- <i
- nz-icon
- [nzType]="datasetIsDownloadable ? 'download' : 'stop'"
- nzTheme="outline"></i>
- {{ datasetIsDownloadable ? "Downloadable" : "Download restricted" }}
- </nz-tag>
+ <nz-tag
+ class="status-tag"
+ [ngClass]="{ 'tag-downloadable': datasetIsDownloadable }">
+ <i
+ nz-icon
+ [nzType]="datasetIsDownloadable ? 'download' : 'stop'"
+ nzTheme="outline"></i>
+ {{ datasetIsDownloadable ? "Downloadable" : "Download restricted"
}}
+ </nz-tag>
- <nz-tag class="status-tag">
- <i
- nz-icon
- nzType="eye"
- nzTheme="outline"></i>
- {{ formatCount(viewCount) }}
- </nz-tag>
+ <nz-tag class="status-tag">
+ <i
+ nz-icon
+ nzType="eye"
+ nzTheme="outline"></i>
+ {{ formatCount(viewCount) }}
+ </nz-tag>
- <nz-tag
- class="status-tag like-tag"
- [ngClass]="{ liked: isLiked, disabled: !isLogin }"
- (click)="isLogin && toggleLike()">
- <i
- nz-icon
- nzType="like"
- nzTheme="outline"></i>
- {{ formatCount(likeCount) }}
- </nz-tag>
+ <nz-tag
+ class="status-tag like-tag"
+ [ngClass]="{ liked: isLiked, disabled: !isLogin }"
+ (click)="isLogin && toggleLike()">
+ <i
+ nz-icon
+ nzType="like"
+ nzTheme="outline"></i>
+ {{ formatCount(likeCount) }}
+ </nz-tag>
- <button
- *ngIf="userHasWriteAccess()"
- nz-button
- nzType="text"
- class="tag-settings-btn"
- nz-popover
- nzPopoverTrigger="click"
- nzPopoverPlacement="bottomRight"
- [nzPopoverContent]="tagSettingsPopover"
- nz-tooltip
- nzTooltipTitle="Settings">
- <i
- nz-icon
- nzType="setting"
- nzTheme="outline"></i>
- </button>
+ <button
+ *ngIf="userHasWriteAccess()"
+ nz-button
+ nzType="text"
+ class="tag-settings-btn"
+ nz-popover
+ nzPopoverTrigger="click"
+ nzPopoverPlacement="bottomRight"
+ [nzPopoverContent]="tagSettingsPopover"
+ nz-tooltip
+ nzTooltipTitle="Settings">
+ <i
+ nz-icon
+ nzType="setting"
+ nzTheme="outline"></i>
+ </button>
- <ng-template #tagSettingsPopover>
- <div>
- <div class="tag-settings-title">Quick Settings</div>
- <div class="tag-settings-row">
- <span>Visibility:</span>
- <nz-switch
- [ngModel]="datasetIsPublic"
- (ngModelChange)="onPublicStatusChange($event)"
- [nzDisabled]="userDatasetAccessLevel !== 'WRITE'"
- nzCheckedChildren="public"
- nzUnCheckedChildren="private"></nz-switch>
- </div>
- <div class="tag-settings-row">
- <span>Downloadable:</span>
- <nz-switch
- [ngModel]="datasetIsDownloadable"
- (ngModelChange)="onDownloadableStatusChange($event)"
- [nzDisabled]="!isOwner"
- nzCheckedChildren="allowed"
- nzUnCheckedChildren="blocked"></nz-switch>
- </div>
+ <ng-template #tagSettingsPopover>
+ <div>
+ <div class="tag-settings-title">Quick Settings</div>
+ <div class="tag-settings-row">
+ <span>Visibility:</span>
+ <nz-switch
+ [ngModel]="datasetIsPublic"
+ (ngModelChange)="onPublicStatusChange($event)"
+ [nzDisabled]="userDatasetAccessLevel !== 'WRITE'"
+ nzCheckedChildren="public"
+ nzUnCheckedChildren="private"></nz-switch>
+ </div>
+ <div class="tag-settings-row">
+ <span>Downloadable:</span>
+ <nz-switch
+ [ngModel]="datasetIsDownloadable"
+ (ngModelChange)="onDownloadableStatusChange($event)"
+ [nzDisabled]="!isOwner"
+ nzCheckedChildren="allowed"
+ nzUnCheckedChildren="blocked"></nz-switch>
+ </div>
+ </div>
+ </ng-template>
</div>
+ </div>
+ <img
+ *ngIf="coverImageUrl; else coverPlaceholder"
+ class="dataset-cover-image"
+ [src]="coverImageUrl"
+ alt="Dataset cover" />
+ <ng-template #coverPlaceholder>
+ <div class="dataset-cover-image"></div>
</ng-template>
</div>
diff --git
a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.scss
b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.scss
index 8039258654..ef68650a39 100644
---
a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.scss
+++
b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.scss
@@ -316,3 +316,20 @@ nz-select {
align-items: center;
gap: 4px;
}
+
+.dataset-header {
+ display: flex;
+ gap: 24px;
+}
+
+.dataset-header-meta {
+ flex: 1;
+}
+
+.dataset-cover-image {
+ width: 280px;
+ height: 120px;
+ object-fit: cover;
+ border-radius: 8px;
+ margin-right: 80px;
+}
diff --git
a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts
b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts
index 1c34778426..85ca8d27cc 100644
---
a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts
+++
b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts
@@ -67,10 +67,12 @@ import { FilesUploaderComponent } from
"../../files-uploader/files-uploader.comp
import { NzProgressComponent } from "ng-zorro-antd/progress";
import { UserDatasetStagedObjectsListComponent } from
"./user-dataset-staged-objects-list/user-dataset-staged-objects-list.component";
import { NzInputDirective } from "ng-zorro-antd/input";
+import { AppSettings } from "../../../../../common/app-setting";
export const THROTTLE_TIME_MS = 1000;
export const ABORT_RETRY_MAX_ATTEMPTS = 10;
export const ABORT_RETRY_BACKOFF_BASE_MS = 100;
+const DEFAULT_COVER_IMAGE = "assets/card_background.jpg";
@UntilDestroy()
@Component({
@@ -119,6 +121,7 @@ export class DatasetDetailComponent implements OnInit {
public datasetCreationTime: string = "";
public datasetCreationTimeTooltip: string = "";
public datasetIsPublic: boolean = false;
+ public coverImageUrl: string = "";
public datasetIsDownloadable: boolean = true;
public userDatasetAccessLevel: "READ" | "WRITE" | "NONE" = "NONE";
public ownerEmail: string = "";
@@ -341,6 +344,9 @@ export class DatasetDetailComponent implements OnInit {
this.datasetIsDownloadable = dataset.isDownloadable;
this.ownerEmail = dashboardDataset.ownerEmail;
this.isOwner = dashboardDataset.isOwner;
+ this.coverImageUrl = dataset.coverImage
+ ?
`${AppSettings.getApiEndpoint()}/dataset/${this.did}/cover?v=${encodeURIComponent(dataset.coverImage)}`
+ : DEFAULT_COVER_IMAGE;
if (typeof dataset.creationTime === "number") {
const date = new Date(dataset.creationTime);
this.datasetCreationTime = format(date, "MM/dd/yyyy HH:mm:ss");
@@ -776,12 +782,14 @@ export class DatasetDetailComponent implements OnInit {
return;
}
+ const newCoverPath = `${this.selectedVersion.name}/${filePath}`;
this.datasetService
- .updateDatasetCoverImage(this.did,
`${this.selectedVersion.name}/${filePath}`)
+ .updateDatasetCoverImage(this.did, newCoverPath)
.pipe(untilDestroyed(this))
.subscribe({
next: () => {
- this.notificationService.success("Cover image set successfully");
+ this.coverImageUrl =
`${AppSettings.getApiEndpoint()}/dataset/${this.did}/cover?v=${encodeURIComponent(newCoverPath)}`;
+ this.notificationService.success("Cover image updated.");
},
error: (err: unknown) => {
this.notificationService.error(
