cos-archives / hgrid Goto Github PK
View Code? Open in Web Editor NEW[UNMAINTAINED] A Javascript-based hierarchical grid that can be used to manage and organize file/folder-like data
License: Apache License 2.0
[UNMAINTAINED] A Javascript-based hierarchical grid that can be used to manage and organize file/folder-like data
License: Apache License 2.0
There are a few errors in the draggable plugin. Some variables not being declared with var, an extra comma or two at the end of lists. Now I have some squiggly red lines in my IDE.
Besides the fact that this will eventually be needed for certain OSF features (e.g. pointers, S3 addon), this would be a useful feature to have
System will freeze
Grunt and bower automate much of the build work, but there are still a number of steps in the release process that could be automated, which are documented in the readme: https://github.com/CenterForOpenScience/hgrid#releasing
It would be nice to have a script or Grunt task to fully automate releases.
There is nothing gained by allowing urlAdd
, urlMove
, etc. to be functions that always return the same value.
It would be much more useful if the you could pass in functions that have access to each item.
Example:
Hgrid.create({
...
urlAdd: function(item) {
return this.url + item.uid + "/upload";
}
})
If neither of those options are passed in, HGrid should fail early with a helpful error message.
Sometimes the HGrid fails to load. I suspect that what's happening is that the Dropzone module isn't loading, and so the HGrid doesn't load.
That being said, I say that about most of my Javascript problems in the past week or so, so it could be that I'm just a little obsessive about JS loading problems.
The thin line that shows where we would insert an item in a list should only show if we will take advantage of that information. Otherwise, it should just highlight the folder that is the active drop target.
I don't have this dialied in yet, but I have a complex hierarchy:
Trying to drag ABA into ACA causes an error in HGrid.js line 1311 - 'Row element is not rendered in the DOM.'
I need a way to, on a folder-by-folder basis, prevent the UI from letting a folder present as a valid drop target. So, for example, a canAcceptDrop (or a modification of acceptDrop, depending) that would let me return true or false if the selected items can be dropped here. At the very least, it shouldn't highlight the folder as a valid drop target. I might also want to be able to modify the css cursor property for those folders as well differently from what I'm doing for the rest of the folders.
Hgrid gets stuck in an infinite loop (in the prep
method) if a data item doesn't have a parent_uid
property.
data = [
{'uid': 0, 'type': 'folder', 'name': 'skaters', 'parent_uid': 'null'},
{'uid': 3, 'type': 'folder', 'name': 'soccer_players'}, // No parent_uid
];
myGrid = HGrid.create({
container: "#myGrid",
info: data,
breadcrumbBox: "#myGridBreadcrumbs",
dropZone: true,
url: '/',
});
// Inifinite loop...
Talked about this briefly with @jakerose27 , but we haven't resolved it yet. Tests pass on both of our computers.
I will look into this more tonight.
File/folder is dropped into the correct place, but folder highlighted is not always correct
If you choose an item on the same level as a target you want to drag into, you cannot drag the item into the target if the target is directly above the item in the grid. The target will highlight, but the thin purple insertion line does not show and the onDrop does not trigger.
For example: How do a make the breadcrumbs look different? What classes do I select? How do I make folders, etc. look different?
I thought I had used the right format for the README file to block code off properly, but I didn't. I'm not sure what I'm doing wrong here... And it looks like crap.
I needed to set the internal DropZone option parallelUploads
but couldn't access it through the HGrid setup. I wound up creating the grid and then patching the option on afterwards:
myGrid.dropZoneObj.options.parallelUploads = 1;
It would be easier to expose DropZone configuration in HGrid initialization:
var myGrid = HGrid.create({
dropZoneOpts = {
parallelUploads: 1
}
});
and passing those options to DropZone.
I will get to this shortly.
As is, when we are dragging a folder to the top level, there is no way to show that the folder will appear in the top level. What should we do to solve this?
Tooltips?
Suggestions appreciated.
HGrid expects its input data to be an Array or and object that of the form {data: [...array of data...]
.
If a developer unknowingly/accidentally enters data as an Object, HGrid will fail in unexpected ways. This can be a major gotcha for new users.
HGrid should fail early if an improper data format is passed in.
h/t @brianjgeiger
Overriding success
in ajaxOptions
interferes with AJAX initialization.
Simple fix. Will get to this in the near future.
Will still only drag/drop the first row.
This occurs in the included example: /examples/ajax-lazy-example.html
I will look into this now.
The draggable plugin is currently moving things whenever they are dropped. I need to update this based on info we get back from the server. The biggest problem is sometimes things are being copied and not moved, and they shouldn't be removed from the original folder.
I am partial to MIT for its simplicity. It is also the license used by both Dropzone and SlickGrid.
It would read like so:
Copyright (c) 2014 Center For Open Science
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
attn: @JeffSpies @jakerose27 @xferguson : Any objections to this?
Invoked when acceptDrop throws an error by calling done
with a string argument, similar to HGrid's uploadAccept
/uploadError
behavior
This is somewhat of a large and vague bug, but the row selection plugin for SlickGrid doesn't seem to always work with HGrid. I haven't done thorough testing, but with my setup for the Dashboard project organizer, if I have more than two columns, at least one column isn't going to be have its CSS set as selected when it's been selected.
It gets worse with multiple row selection on, but most of the CSS problems clear off if the rows fall far enough away from the visible area and come back. I have attached an animated GIF to show some of the issues and how they interact with various events.
Steps:
Expected:
Actual:
This glitch isn't occurring with the drag & drop file move functionality, so I assume it has to do with the math and conditionals around arg.insertBefore
How hard would it be to give the disclosure controls ( [+] [-] on the folders) a third state that could be a waiting indicator while it's loading data from an ajax request?
Steps to take:
Expected:
Actual:
I'm not sure if this would be better dealt with by passing the new folder size to the view from the backend, or by adding up the sizes of the child elements via the front end.
Using reloadFolder() on a leaf folder causes the folder to disappear from the hgrid, even if reloading would have made it into a non-leaf folder. Attached is a gif of reloading a branch folder, then a leaf folder, and reloading the page to show that the leaf folder should still be in the structure.
The error is "Invalid or non-matching id" on line 3585 of hgrid.js.
The docs are confusing on this, and passing a string argument here creates an infinite loop.
E.g.
var myGrid = HGrid.create({
container: "#my-grid",
info: "data_info",
columns: [
{id: "uid", name: "Data ID", width: 40, field: "uid"},
{id: "name", name: "Data name", width: 400, field: "name"}
]
});
should be
var myGrid = HGrid.create({
container: "#my-grid",
info: data_info,
columns: [
{id: "uid", name: "Data ID", width: 40, field: "uid"},
{id: "name", name: "Data name", width: 400, field: "name"}
]
});
If you use the reloadFolder() function twice on a folder before the folder returns, the contents of the reloaded folder will be doubled.
Clicking on the "HGrid" breadcrumb does not lead back out to full grid.
Add-ons, like GitHub, should remain as folder children under the project/component (i.e., same level as osf files), their files within
Every drag/drop move and sort result in a necessary destruction and recreation of grid. A better solution is needed.
I keep getting an error from Travis CI that Build#3 is failing when I merge:
https://travis-ci.org/CenterForOpenScience/HGrid/builds/14238065
I am not sure I understand what's going on here or what needs to change.
Expand/collapse isn't working and grid only looks same after reload
When a folder is clicked to expand or collapse, the filter must go through every item to make sure it is not shown. The function call is dataView.updateItem() in grid.onClick.subscribe on line 1336. If we can figure out a way to only filter through items that are the target item's children, then we can significantly speed up the filtering of the grid.
Steps:
Expected:
Actual:
The page continues to work fine, but this error is logged.
Uncaught Error: No URL provided. dropzone.js:604
Dropzone dropzone.js:604
require.register.Dropzone.discover dropzone.js:1211
require.register.init dropzone.js:1401
URL it refers to is explicitly stated in the view index.html:line38 :
var myDropzone = new Dropzone("#myGrid", {url: "/uploader"} );
If two or more items have the same UID, my browser becomes unresponsive. HGrid should probably raise an error instead, or remove the offending item(s) with a warning.
When we want to implement reordering, it looks pretty simple to do. If we can get it in easily, I think people would appreciate it a lot. If not, we set it for a future update. Here's a sample code from the unit test for reordering via the API.
payload = {'new_list': [
'{0}:node'.format(self.private_component._primary_key),
'{0}:node'.format(self.public_component._primary_key),
]
}
url = lookup('api', 'project_reorder_components', pid=self.project._primary_key)
res = self.app.post_json(url, payload, auth=self.contrib.auth)
Need to have some sort of versioning system in place soon.
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.