Skip to content

[Hackathon] feat(frontend): rich dataset file preview with type detection #5112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kunwp1 wants to merge 4 commits into
base: main
Choose a base branch
from
+1,973 −178
Open

[Hackathon] feat(frontend): rich dataset file preview with type detection #5112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b17f712
feat(frontend): rich dataset file preview with type detection
kunwp1 May 16, 2026
2728afe
fix(frontend): skip download for oversized files, drop size pill
kunwp1 May 16, 2026
845edba
feat(frontend): add "Open in workflow" CTA to file renderer
kunwp1 May 16, 2026
92cd901
feat(frontend): auto-add scan operator after "Open in workflow"
kunwp1 May 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"d3-shape": "2.1.0",
"dagre": "0.8.5",
"file-saver": "2.0.5",
"file-type": "^22.0.1",
"fuse.js": "6.5.3",
"html2canvas": "1.4.1",
"jointjs": "3.5.4",
Expand Down
50 changes: 49 additions & 1 deletion ...ser-dataset-explorer/user-dataset-file-renderer/user-dataset-file-renderer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,54 @@
nzType="warning"
nzMessage="Preview of the file type is currently not supported"></nz-alert>
</div>
<div *ngIf="detectedTypeMessage">
<nz-alert
nzType="info"
[nzMessage]="detectedTypeMessage"></nz-alert>
</div>

<div *ngIf="previewTruncated">
<nz-alert
nzType="warning"
nzMessage="Showing first 10 MB only"
nzDescription="This file is large; only the first 10 MB is parsed and rendered to avoid running the browser out of memory. Statistics shown reflect the previewed slice, not the whole file."
nzShowIcon></nz-alert>
</div>

<div *ngIf="metadataItems.length > 0 || canOpenInWorkflow" class="file-metadata-strip">
<span *ngFor="let item of metadataItems" class="metadata-pill">
<span class="metadata-label">{{ item.label }}</span>
<span class="metadata-value">{{ item.value }}</span>
</span>
<button
*ngIf="canOpenInWorkflow"
nz-button
nzType="primary"
nzSize="small"
class="open-in-workflow-btn"
(click)="onOpenInWorkflow()">
<span nz-icon nzType="play-circle" nzTheme="outline"></span>
Open in workflow
</button>
</div>

<nz-table
*ngIf="displayCSV || displayXlsx"
#basicTable
[nzData]="tableContent">
<thead>
<tr>
<th *ngFor="let column of tableDataHeader">{{ column }}</th>
<th *ngFor="let column of tableDataHeader; let i = index">
<div class="column-name">{{ column }}</div>
<div class="column-meta" *ngIf="fileMetadata?.columnTypes?.[i]">
<span class="column-type-tag">{{ fileMetadata?.columnTypes?.[i] }}</span>
<span
class="column-null-hint"
*ngIf="fileMetadata?.nullCounts?.[i] && fileMetadata!.nullCounts![i] > 0">
{{ fileMetadata?.nullCounts?.[i] }} null
</span>
</div>
</th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -79,6 +119,14 @@
alt="{{filePath}}"
class="full-size-image" />
</div>

<div *ngIf="displayPDF && safeResourceFileURL">
<iframe
[src]="safeResourceFileURL"
style="width: 100%; height: 600px; border: none;">
</iframe>
</div>

<div *ngIf="displayMarkdown">
<markdown [data]="textContent"></markdown>
</div>
Expand Down
62 changes: 62 additions & 0 deletions ...ser-dataset-explorer/user-dataset-file-renderer/user-dataset-file-renderer.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,65 @@
max-width: 90%;
max-height: 90%;
}

.file-metadata-strip {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
padding: 6px 0;
border-bottom: 1px solid #f0f0f0;
}

.metadata-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px 2px 6px;
background: #fafafa;
border: 1px solid #e8e8e8;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
}

.metadata-label {
color: #8c8c8c;
font-weight: 500;
}

.metadata-value {
color: #262626;
}

.column-name {
font-weight: 600;
}

.column-meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
font-weight: 400;
}

.column-type-tag {
display: inline-block;
padding: 0 6px;
font-size: 11px;
color: #1890ff;
background: #e6f4ff;
border: 1px solid #91caff;
border-radius: 3px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.column-null-hint {
font-size: 11px;
color: #d4380d;
}

.open-in-workflow-btn {
margin-left: auto;
}
Loading
Loading