Skip to content

Fix: Project Dataset & Notebook bugs #119

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
KobenjiSan wants to merge 6 commits into
base: develop
Choose a base branch
from
+1,913 −591
Open

Fix: Project Dataset & Notebook bugs #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c4dc7f0
fix: Add notebook forking logic and improve notebook item UI
KobenjiSan Feb 15, 2026
f8d2014
fix: CSV files reliably load in Datasets tab
KobenjiSan Feb 18, 2026
7054c7c
fix: Add notebook to forking with blob
KobenjiSan Feb 24, 2026
36f67cc
Merge branch 'develop' into fix/project-csv-display
KobenjiSan Feb 24, 2026
27ef052
Merge branch 'fix/notebook-forking' into fix/project-csv-display
KobenjiSan Feb 24, 2026
af1b38c
style: Update csv preview and project overview styles
KobenjiSan Feb 24, 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
189 changes: 111 additions & 78 deletions ...App/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,114 @@
<div class="card">
<p-table #table
[value]="loadedData"
[(selection)]="selectedData"
[tableStyle]="{'min-width': '100%'}"
[resizableColumns]="true"
styleClass="p-datatable-gridlines"
[scrollable]="true"
scrollHeight="100%"
[rows]="50"
[paginator]="true"
[loading]="loading"
[rowsPerPageOptions]="[10, 25, 50]"
[showCurrentPageReport]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[filterDelay]="0"
[globalFilterFields]="selectedColumns"
[columns]="selectedColumns"
[reorderableColumns]="true"
(onSort)="resetSelectedData($event)"
(onFilter)="resetSelectedData($event)"
>
<ng-template pTemplate="caption">
<div class="table-header" style="margin-bottom: 10px;">
<button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(table)"></button>
<span class="p-input-icon-left" style="float:right">
<i class="pi pi-search"></i>
<input #searchFilter pInputText type="text" placeholder="Global Search" (input)="applyFilterGlobal($event, 'contains')" />
</span>
</div>
<div>
<p-multiSelect [options]="cols" [(ngModel)]="selectedColumns"
selectedItemsLabel="{0} columns selected" [style]="{'min-width': '200px'}" placeholder="Choose Columns">
<ng-template let-item pTemplate="selectedItem">
{{item}}
</ng-template>
<ng-template let-item pTemplate="item">
{{item}}
</ng-template>
</p-multiSelect>
<p-button label="Visualize Data" style="float: right;" (onClick)="toggleModalVisualizeData()"></p-button>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 4rem" pResizableColumn>
<p-checkbox
[(ngModel)]="checked"
[binary]="true"
(onChange)="onCheckboxClick($event)">
</p-checkbox>
</th>
<th *ngFor="let column of columns" [pSortableColumn]="column" pResizableColumn pReorderableColumn>
<div class="flex justify-content-between align-items-center">
{{column}}
<p-sortIcon field={{column}}></p-sortIcon>
<p-columnFilter [type]="columnDataTypes[column]" [field]="column" display="menu" class="ml-auto"></p-columnFilter>
</div>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-item let-columns="columns">
<tr>
<td>
<p-tableCheckbox [value]="item"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">{{ item[col] }}</td>
</tr>
</ng-template>
</p-table>
<div style="display: flex;width: 100%; align-items: center;justify-content: center;margin: 10px;">
<p-button label="Export Data" (onClick)="seeSelectedData()"></p-button>
</div>
<div class="card data-table-card">
<p-table #table
[value]="loadedData"
[(selection)]="selectedData"
[tableStyle]="{'min-width': '100%'}"
[resizableColumns]="true"
styleClass="p-datatable-gridlines"
[scrollable]="true"
scrollHeight="100%"
[rows]="50"
[paginator]="true"
[loading]="loading"
[rowsPerPageOptions]="[10, 25, 50]"
[showCurrentPageReport]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
[filterDelay]="0"
[globalFilterFields]="selectedColumns"
[columns]="selectedColumns"
[reorderableColumns]="true"
(onSort)="resetSelectedData($event)"
(onFilter)="resetSelectedData($event)">

<ng-template pTemplate="caption">
<div class="table-header">
<!-- Clear -->
<button type="button"
class="btn btn-outline-primary"
(click)="clear(table)">
<i class="pi pi-filter-slash" aria-hidden="true"></i>
<span>Clear</span>
</button>

<!-- Search -->
<span class="p-input-icon-left table-search">
<i class="pi pi-search"></i>
<input #searchFilter
pInputText
type="text"
placeholder="Global Search"
(input)="applyFilterGlobal($event, 'contains')" />
</span>
</div>

<div class="table-tools">
<p-multiSelect [options]="cols"
[(ngModel)]="selectedColumns"
selectedItemsLabel="{0} columns selected"
[style]="{'min-width': '200px'}"
placeholder="Choose Columns">
<ng-template let-item pTemplate="selectedItem">{{item}}</ng-template>
<ng-template let-item pTemplate="item">{{item}}</ng-template>
</p-multiSelect>

<button type="button"
class="btn btn-primary"
(click)="toggleModalVisualizeData()">
Visualize Data
</button>
</div>
</ng-template>

<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 4rem" pResizableColumn>
<p-checkbox [(ngModel)]="checked"
[binary]="true"
(onChange)="onCheckboxClick($event)">
</p-checkbox>
</th>

<th *ngFor="let column of columns"
[pSortableColumn]="column"
pResizableColumn
pReorderableColumn>
<div class="flex justify-content-between align-items-center">
{{column}}
<p-sortIcon field="{{column}}"></p-sortIcon>
<p-columnFilter [type]="columnDataTypes[column]"
[field]="column"
display="menu"
class="ml-auto">
</p-columnFilter>
</div>
</th>
</tr>
</ng-template>

<ng-template pTemplate="body" let-item let-columns="columns">
<tr>
<td>
<p-tableCheckbox [value]="item"></p-tableCheckbox>
</td>
<td *ngFor="let col of columns">{{ item[col] }}</td>
</tr>
</ng-template>

</p-table>

<div class="export-row">
<button type="button"
class="btn btn-primary"
(click)="seeSelectedData()">
Export Data
</button>
</div>
</div>

<ng-template #visualizeDataModal>
<app-visualize-data [cols]="selectedColumns"
(closeModalEvent)="closeModalVisualizeData()"
[data]="(!selectedData || selectedData.length===0) ? tableData : selectedData"
[columnDataTypes]="columnDataTypes"></app-visualize-data>
</ng-template>
<app-visualize-data [cols]="selectedColumns"
(closeModalEvent)="closeModalVisualizeData()"
[data]="(!selectedData || selectedData.length===0) ? tableData : selectedData"
[columnDataTypes]="columnDataTypes">
</app-visualize-data>
</ng-template>
65 changes: 65 additions & 0 deletions ...App/src/app/projects/project-file-explorer/csvdata-browser/csvdata-browser.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
:host {
display: block;
height: 100%;
}

.data-table-card {
height: 100%;
display: flex;
flex-direction: column;
}

/* Caption rows */
.table-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-3);
}

.table-tools {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}

/* Make the search input behave */
.table-search {
width: min(380px, 100%);
}

.table-search input {
width: 100%;
}

/* Icon spacing inside our Bootstrap button */
.table-header .btn i {
margin-right: var(--space-1);
}

/* Footer export row */
.export-row {
width: 100%;
display: flex;
justify-content: center;
padding: var(--space-3);
}

/* Responsive stacking */
@media (max-width: 768px) {
.table-header,
.table-tools {
flex-direction: column;
align-items: stretch;
}

.table-search {
width: 100%;
}

.table-tools .btn {
width: 100%;
}
}
59 changes: 47 additions & 12 deletions ...roject-file-explorer/project-file-explorer-item/project-file-explorer-item.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,50 @@
<li class="list-group-item d-flex h-100" [class.active]="isSelected" (click)="selectItem()" (dblclick)="navigate()">
<div class="mr-auto" style="width: 100%">
<i class="fa fa-file mr-1" *ngIf="blobFileItem.type == 'file'"></i>
<i class="fa fa-folder mr-1" *ngIf='blobFileItem.type === "folder"'></i>
<li
class="list-group-item file-item"
[class.is-selected]="isSelected"
(click)="selectItem()"
(dblclick)="navigate()"
>
<div class="file-row">
<div class="file-left">
<i
class="fa file-icon"
[ngClass]="
blobFileItem.type === 'folder'
? 'fa-folder'
: blobFileItem.type === 'none'
? 'fa-arrow-left'
: 'fa-file'
"
aria-hidden="true"
></i>

<a (click)="navigate()">{{blobFileItem.name}}</a>
<div class="ml-auto" *ngIf="blobFileItem.type == 'file'" style="float: right">
<button type="button" class="btn btn-secondary" title="Get Shareable Link" (click)="displayShareableLink()">
<i class="fa fa-link mr-1"></i>
</button>
{{timeSince}}
</div>
<a
class="file-link"
(click)="navigate(); $event.stopPropagation()"
[attr.title]="
blobFileItem.type === 'none'
? 'Back'
: blobFileItem.type === 'folder'
? 'Open folder'
: 'Open file'
"
>
{{ blobFileItem.type === "none" ? "Back" : blobFileItem.name }}
</a>
</div>

<div class="file-right" *ngIf="blobFileItem.type === 'file'">
<span class="file-meta" aria-label="Last updated">{{ timeSince }}</span>

<button
type="button"
class="btn btn-primary"
title="Get Shareable Link"
aria-label="Get Shareable Link"
(click)="displayShareableLink(); $event.stopPropagation()"
>
<i class="fa fa-link" aria-hidden="true"></i>
</button>
</div>
</li>
</div>
</li>
Loading