telamonian / tree-finder Goto Github PK
View Code? Open in Web Editor NEWVersatile tree-viewer/filebrowser widget, built on top of regular-table
License: BSD 3-Clause "New" or "Revised" License
Versatile tree-viewer/filebrowser widget, built on top of regular-table
License: BSD 3-Clause "New" or "Revised" License
Add a way for 3rd party apps to hook into the clipboard actions, including cut, copy, paste
Add third party hook into rename action that activates the renamer component on a given row/content
I'm finding it somewhat confusing that the panel element is now called <tree-finder>
. I'm going to rename it to <tree-finder-panel>
Currently, all of the commands (open
, cut
, paste
, etc) are associated with an rxjs
Subject
instance. The exact implementation is (as of v0.0.12) a bit all over the place. Let's standardize the implementation. One possible plan:
Subject
s live in ClipboardModel
(might need a rename)tree-finder
code and 3rd party integration code should follow the same patterns for interacting with the commands
next
fooSub.next(somerow)
fooSub.subscribe(row => {/*whatever*/})
Pros:
Cons:
subscribe
s to a Subject
will also be responsible for proper cleanup:// subscribe
const mysubscription = fooSub.subscribe(somecallback);
// later, clean up
mysubscription.unsubscribe()
When any given crumb is clicked on, the root of tree-finder should be set to the dir that crumbs represents
Currently if you want to modify the columns that are displayed, you need to update the colmnNames
on the model, and then re-init the panel widget. This causes the filter inputs to be reset, and causes flicker when re-initing.
Ideally, we could change the columns, and retain the filters of any columns that remain visible (any filters on hidden columns will as a matter of necessity be cleared).
The first pass at this will consist of one big input box that sits between the breadcrumbs and the top of the grid, and which will serve to filter on the file paths
Add a way for 3rd party apps to hook into the open action of tree-finder
get all those good-good new webpack 5.x features. Hopefully 5.x is mature enough now that this won't be too painful
Make the webpack build of tree-finder's dist bundle jump through all of the remaining nasty hoops, including
dist/theme
dirNODE_ENV
is set to "production"
<tree-finder-filters>
elem independent of the <tree-finder-grid>
elem<input>
s directly inline with the <tree-finder-grid>
's column headersFollowing on the discussion on future adoption of tree-finder in JupyterLab, I wanted to bring up some use-cases that are not accommodated by the current file browser, but would be great to have in the bright future with tree-finder.
As discussed in jupyterlab/jupyterlab-git#124 (comment) jupyterlab-git would like to be able to add custom indicators for the files to highlight which files were modified, added, deleted or are ignored. The idea is to implement it as both:
and let user choose which one to use. The text color modification would modify the filename display, so possibly could be implemented by allowing to update the classList
of the file item. The extra icon could be implemented using a special column (it makes sense to sort by the git status).
An initial work using the current JupyterLab filebrowser was done on jupyterlab/jupyterlab-git#885:
but it was a bit hackish and would not work if multiple extensions wanted to modify the filebrowser items.
Another briefly explored idea was to add icon modifier:
This does not seem optimal for this use case, but might be handy for other uses.
It would be useful to make it available for both files and folder, and maybe even the breadcrumbs section, to accommodated designs by @weihwang such as jupyterlab/jupyterlab-git#124 (comment):
Finally, it was proposed that it might be handy for multiple extensions to add custom decorators for files, as in an example brought up by @fcollonval over at jupyterlab/jupyterlab-git#885 (comment):
This one comes from VSCode and shows both a number of diagnostic warnings (e.g. linter errors) and the git status. This would mean that both the LSP extension and the git extension would need to simultaneously be able to modify the file items.
Finally, it would be great to have a working mechanism for toggling these columns.
To summarise I would like to request (and help in implementing) a public API for following functionalities:
Would all of the above be in scope for tree-finder? Is it possibly already capable of the above?
Add a way for 3rd party apps to hook into the drag-n-drop actions
For the column-header inline filter inputs
Currently neither of these things is true
The error message TypeError: this.table_model is undefined
appears in the Console under some circumstances when using jupyter-fs
.
A reproducible example can be found here: jpmorganchase/jupyter-fs#129
apparently I can fix a lot of the lingering issue with eg the sort header icons this way
Currently, exactly one new crumb will be created when a dir is opened, regardless of depth of dir in any expanded tree. Instead, the count of new crumbs should equal 1 plus the depth of the dir in the currently displayed tree
callbacks for drag n drop, open, various other actions
What I mean by random and consistent is that it should produce different values on each refresh (random), but now that re-opening dirs is a thing that can happen (thanks to the now functional breadcrumbs implementation), we'll also want the dirs to always contains the same values on reopen (consistent)
When I try to follow the development instructions in README.md and yarn start
the simple
example, I get the error
"Error: Can't resolve '~tree-finder/dist/tree-finder.css' in '/home/ubuntu/tree-finder/examples/simple/style' ".
The tree-finder UI is starting to mature and is now mostly feature complete.
The next thing to build in tree-finder will be support for commands (cut, copy, paste, open, etc). I think the easiest way to design these will be trial-by-fire: I'll take an app with an existing filebrowser UI, and existing backend implementations for commands, and try out the current tree-finder as a drop-in replacement.
The first target will be jupyter-fs
Add third party hook into refresh action that either invalidates all cached contents or a specific list of Content dirs.
Add a way for 3rd party apps to hook into the delete action
Right now, the <tree-finder-filters>
element can provide one filter input per column, and is working well. However, it still has some issues around syncing the input box widths with the grid column widths. To solve these problems once and for all, it would be nice to instead move the actual <input>
elems to be inline with the grid's column headers. This will also have the nice side effect of making the filter boxes smoothly animate growing larger/smaller when you click and drag on a column resizer.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.