Table zoom and Rows property

[masterBlasterBr]

Hello, I have 2 questions/issues:

1- When I use css zoom on a table the height keeps the same for clusterize and it breaks the code. Is there any way to pass row height to clusterize so it can scale with table zoom based on user code instead of capturing it automatically with refresh() ?

2- I'm constructing a table with local data arrays that append to clusterize rows property, so on clusterize object instance how can I access rows property with all my data and be able to change it ? ( I prefer to avoid update because maintaining and updating an too big global array may cost a lot to process)

Thanks

[NeXTs]

Hi

1. Saying zoom do you mean this one. It's low supported property by browsers. Why don't use transform: scale? It shouldn't affect height measurements. p.s. apply it to <tr> or <td>, table hides if apply this to tbody or table for some reason
2. Data rows were made private inside clusterize instance intentionally to prevent direct mutation of it. You should use supporting functions like .append/.prepend/.update to give a hint to clusterize about your intentions regarding desirable changes. How would you inform clusterize when it should update without them? It didn't use observables so it won't know when to update by itself.

[masterBlasterBr]

Hello thanks for the fast response

1- Yes, this is the property, css zoom. It's better than scale because at least in my tests when the table is fixed to 100% of parent's table i can zoom the table an it will keep parent's bounds, contrary to what happens with transform:scale(), so in my tests bounds were not respected. About the browsers, the supported ones are enough for the user experience. So finally, because zoom really doesn't change height and clusterize captures it automatically, the visualization gets wrong position results. The solution i thought for this problem was to change clusterize row height relative to zoom, then if my zoom value is 0.5 the I would change: clusterize.rowHeight*=0.5 so the library recognizes it as the same proportion as the user.

2- I use append() to inform clusterize about the changes (and it is great) but large arrays push() may get slow with time to maintain and use update() every time, because my table updates data dynamically So clusterize loads rows data persistent with the object I think. Then i would like to change directly from this resource. This would be useful to change classes, rows selected row's background color and etc...

[NeXTs]

1 - well in theory it's possible to determine zoom property and apply this formula clusterize.rowHeight*=zoom but to do so we'll need to look for all styles of all parents considering such cases like (1 parent may has zoom: .2, upper one may has zoom: 1.3, etc), doesn't we?

2 - Sorry but I still did not get your idea with object. .update method isn't such resource-intensive method, everything it does - updates current visible cluster layout in DOM for current scroll position. Common task. Furthermore if changes didn't affect visible cluster - it won't touch DOM at all, new data will be simply stored to clusterize instance and used once scroll reaches it. How many times per second you planning to call .update?

[masterBlasterBr]

1 - You would have these steps applied to all users if use an auto value catcher, even them not using the zoom property (wich is a rare case). So, a less structure invasive and not limitating solution would be just give access to clusterize.rowHeight property and let users of the library change values on zoom change callbacks. The zoom property to keep watching would be scrollId>table zoom only.

2- The problem with update is not the DOM syncronization, but the data array changes. If I use update with 2 giant arrays (one mine, one from Clusterize), passing mine to clusterize object every 0.2 secs, would be slow and consume too much memory. I'm dealing with data>100000 bases.

So my sugestion for both cases is: give access to rowHeight and rows[ ] properties trought clusterize object. It would make the library even more incredible and useful for big quantities of data. :+1:

[NeXTs]

Well, I am sorry but I still don't think this is good idea. Since you need this for your purposes you able to fork library, change this line to this.rows = isArray(data.rows) so you'll have access to rows by clusterize.rows and you actually already have access to item_height and cluster_height by clusterize.options.item_height

After applying changed you may publish it to npm so that it'll be easily accessible by npm