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 325f697e28 feat(frontend): improve dataset detail page layout (#4337)
325f697e28 is described below
commit 325f697e287b3638fd79ec436dcf13c51053463f
Author: Xuan Gu <[email protected]>
AuthorDate: Sun Mar 29 15:06:36 2026 -0700
feat(frontend): improve dataset detail page layout (#4337)
<!--
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 refines the UI of the dataset detail page to make the layout
more compact and visually consistent. The changes mainly unify the
styling of status and metric chips, including visibility,
downloadability, view count, and likes.
**Demonstration**
Before:
<img width="1284" height="667" alt="before"
src="https://github.com/user-attachments/assets/bf7c2c92-35f2-4c98-a854-2d431073141a";
/>
After (non-owner view):
<img width="1480" height="766" alt="non-owner view"
src="https://github.com/user-attachments/assets/4dbe91df-eec8-4e2e-a3b9-b49e81589660";
/>
After (colorless):
<img width="1480" height="754" alt="colorless"
src="https://github.com/user-attachments/assets/60c3e9a3-fa74-43a6-8b51-b2498e0b19be";
/>
After (colored + setting menu):
<img width="1482" height="769" alt="colored setting"
src="https://github.com/user-attachments/assets/c4975c77-92c3-4787-b36d-f6a1b23bfc00";
/>
### 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.
-->
Tested manually
### 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
---
.../dataset-detail.component.html | 135 ++++++++++++-------
.../dataset-detail.component.scss | 149 ++++++++++++---------
2 files changed, 167 insertions(+), 117 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 c5780be7a7..4a47c5956f 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,9 +19,9 @@
<div *ngIf="!isMaximized">
<nz-card>
- <h2 class="dataset-title">Dataset: {{datasetName}}</h2>
+ <h2>Dataset: {{datasetName}}</h2>
<nz-card-meta
- style="padding-top: 10px"
+ style="padding-top: 5px"
[nzDescription]="descriptionTemplate">
<ng-template #descriptionTemplate>
Created at:
@@ -32,64 +32,95 @@
</span>
</ng-template>
</nz-card-meta>
- <texera-markdown-description
- [description]="datasetDescription"
- [editable]="userDatasetAccessLevel === 'WRITE'"
- (descriptionChange)="onDatasetDescriptionChange($event)">
- </texera-markdown-description>
- <div
- class="workflow-panel"
- style="padding-top: 30px">
- <div
- *ngIf="!(userDatasetAccessLevel === 'NONE')"
- class="dataset-controls">
- <div class="control-row">
- <label>Visibility:</label>
- <nz-switch
- [ngModel]="datasetIsPublic"
- (ngModelChange)="onPublicStatusChange($event)"
- [nzDisabled]="userDatasetAccessLevel !== 'WRITE'"
- nzCheckedChildren="public"
- nzUnCheckedChildren="private"></nz-switch>
- </div>
- <div
- class="control-row"
- *ngIf="isOwner">
- <label>Download:</label>
- <nz-switch
- [ngModel]="datasetIsDownloadable"
- (ngModelChange)="onDownloadableStatusChange($event)"
- nzCheckedChildren="allowed"
- nzUnCheckedChildren="blocked"></nz-switch>
- </div>
- </div>
- <button
- nz-button
- nzType="text"
- class="dropdown-item like-button"
- title="View"
- (click)="changeViewDisplayStyle()">
+
+ <div class="status-tag-row">
+ <nz-tag
+ class="status-tag"
+ [ngClass]="{ 'tag-public': datasetIsPublic }">
<i
nz-icon
- [nzType]="'eye'"
- class="like-icon">
- </i>
- <span>{{ formatCount(viewCount) }}</span>
- </button>
+ [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">
+ <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>
+
<button
+ *ngIf="userHasWriteAccess()"
nz-button
nzType="text"
- class="like-button"
- title="Like"
- [disabled]="!isLogin"
- (click)="toggleLike()">
+ class="tag-settings-btn"
+ nz-popover
+ nzPopoverTrigger="click"
+ nzPopoverPlacement="bottomRight"
+ [nzPopoverContent]="tagSettingsPopover"
+ nz-tooltip
+ nzTooltipTitle="Settings">
<i
nz-icon
- [nzType]="'like'"
- [ngClass]="{liked: isLiked}">
- </i>
- <span>{{ formatCount(likeCount) }}</span>
+ 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>
+ </div>
+ </ng-template>
+ </div>
+
+ <div class="description-section">
+ <texera-markdown-description
+ [description]="datasetDescription"
+ [editable]="userDatasetAccessLevel === 'WRITE'"
+ (descriptionChange)="onDatasetDescriptionChange($event)">
+ </texera-markdown-description>
</div>
</nz-card>
</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 797ce07d6b..22e6586d02 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
@@ -45,12 +45,6 @@
width: 100%; /* Make the select element take the full width of its parent */
}
-.right-panel-title {
- padding-left: 20px;
- text-align: center;
- margin-top: 10px;
-}
-
nz-layout {
height: 100%;
}
@@ -91,10 +85,6 @@ body {
margin: auto;
}
-.dataset-version-creator {
- height: 100%;
-}
-
.grayed-out {
filter: grayscale(1) opacity(0.7);
background-color: #f0f0f0; /* Adjust the color as needed */
@@ -149,30 +139,6 @@ nz-select {
font-size: 14px;
}
-.version-size-badge {
- margin-top: 10px;
-}
-
-.nz-tag {
- font-size: 12px;
-}
-
-.workflow-panel {
- align-items: center;
- gap: 10px;
-}
-
-.like-button {
- margin-left: 15px;
- width: 70px;
- border-radius: 8px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.liked {
- color: red;
-}
-
.empty-version-indicator {
margin-top: 15%;
}
@@ -214,37 +180,6 @@ nz-select {
padding: 6px;
}
-.dataset-controls {
- display: flex;
- flex-direction: column;
- gap: 12px;
- margin-right: 20px;
- margin-bottom: 20px;
-}
-
-.control-row {
- display: flex;
- align-items: center;
- gap: 12px;
-
- label {
- min-width: 80px;
- font-weight: 500;
- color: #666;
- }
-
- nz-switch {
- margin-left: 8px;
- }
-
- .help-text {
- margin-left: 8px;
- font-size: 12px;
- color: #999;
- font-style: italic;
- }
-}
-
.upload-stats {
font-size: 13px;
margin-bottom: 20px;
@@ -273,3 +208,87 @@ nz-select {
.section-divider {
margin: 8px 0;
}
+
+.status-tag-row {
+ margin-top: 16px;
+ display: flex;
+ align-items: center;
+ gap: 5px;
+}
+
+.status-tag {
+ padding: 3px 10px 3px 2px;
+ font-size: 13px;
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ background: #fff;
+ border-radius: 5px;
+
+ i {
+ width: 22px;
+ height: 22px;
+ line-height: 22px;
+ text-align: center;
+ border-radius: 4px;
+ background: #f0f0f0;
+ }
+}
+
+.tag-public i {
+ color: #3b82f6;
+ background: #eff6ff;
+}
+
+.tag-downloadable i {
+ color: #22c55e;
+ background: #f0fdf4;
+}
+
+.like-tag {
+ cursor: pointer;
+}
+
+.like-tag.liked {
+ i {
+ color: #ef4444;
+ background: #fef2f2;
+ }
+}
+
+.like-tag.disabled {
+ cursor: not-allowed;
+ opacity: 0.55;
+}
+
+.tag-settings-btn {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ border: 1px solid #d9d9d9;
+}
+
+.tag-settings-title {
+ font-weight: 600;
+}
+
+.tag-settings-row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 5px 0;
+}
+
+.tag-settings-row span {
+ min-width: 110px;
+}
+
+.tag-settings-row ::ng-deep .ant-switch {
+ min-width: 80px;
+}
+
+.description-section {
+ margin-top: 20px;
+ padding-top: 10px;
+ border-top: 1px solid #eee;
+}
