feat(dataset): add dataset file editor #3654
Conversation
bobbai00
changed the title
...pp/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
Show resolved
Hide resolved
| </button> | ||
|
|
||
| <!-- README creation form --> | ||
| <div *ngIf="showReadmeForm"> |
There was a problem hiding this comment.
you should try to reuse the file editor component, a separate form seems to be redundant
| --> | ||
|
|
||
| <!-- Loading State --> | ||
| <div *ngIf="isLoading" class="file-loading"> |
There was a problem hiding this comment.
Few high level comments regarding this component:
-
Can you merge it with the
file-renderercomponent: if a file is editable,
show an edit button. And when users click that button, show the editing interface. This can avoid the redundancy file header. -
I still want you to explore the library way of having the markdown editor. Implementing one by ourselves brings high maintenance cost and can be error-pruning.
There was a problem hiding this comment.
This project is worth checking out: https://github.com/ghiscoding/angular-markdown-editor
| "backbone": "1.4.1", | ||
| "bootstrap": "^5.3.7", | ||
| "bootstrap-markdown": "^2.10.0", | ||
| "content-disposition": "0.5.4", |
There was a problem hiding this comment.
Please fix the versions of the libraries you introduced by removing ^
| "html2canvas": "1.4.1", | ||
| "jointjs": "3.5.4", | ||
| "jquery": "^3.7.1", | ||
| "js-abbreviation-number": "1.4.0", |
There was a problem hiding this comment.
Move it to the dependee package, and leave a comment
| "es6-weak-map": "2.0.3", | ||
| "file-saver": "2.0.5", | ||
| "font-awesome": "^4.7.0", | ||
| "fuse.js": "6.5.3", |
| "@types/graphlib": "2.1.8", | ||
| "@types/jasmine": "4.6.4", | ||
| "@types/jquery": "^3", | ||
| "@types/json-schema": "7.0.9", |
There was a problem hiding this comment.
@aglinxinyuan Please take a look to see if both devDependencies & dependencies need to have these packages
| chunkSizeMB: number = 50; | ||
| maxConcurrentChunks: number = 10; | ||
|
|
||
| public isCreatingReadme: boolean = false; |
| .pipe( | ||
| switchMap(blob => { | ||
| return new Promise<string>((resolve, reject) => { | ||
| const reader = new FileReader(); |
There was a problem hiding this comment.
Replace Promise style with rxjs style
| this.fileExists = false; | ||
| this.fileContent = ""; | ||
| this.editingContent = ""; | ||
| console.log("File not found or error loading"); |
| } | ||
| } | ||
|
|
||
| public getFileName(): string { |
There was a problem hiding this comment.
remove this, and test the editing of a file in folders
|
|
||
| public fileContent: string = ""; | ||
| public fileExists: boolean = false; | ||
| public isLoading: boolean = false; |
There was a problem hiding this comment.
A general comment: see if you can remove some of the state variables
| } | ||
|
|
||
| public isEditable(): boolean { | ||
| return this.fileType === "markdown" || this.fileType === "text"; |
Signed-off-by: Xinyuan Lin <xinyual3@uci.edu>
github-actions
bot
added
dependencies
3 participants
Purpose
This PR adds a file editor feature for datasets, enabling users to create, edit, and manage Markdown and text files directly within the dataset interface. The component makes it easy to extend the functionality to new file types in the future (CSV). The files are stored as versioned files within the dataset using the existing FileService, ensuring proper version control. It also provides an easy way to create a README file directly from the dataset versioning tab
closes #3517
Design document
Changes
UserDatasetFileEditorComponentthat:angular-markdown-editorfor md files and a basic text box for txt filesDemo:
demo.mp4