Client side sorting for Modern debugging template (5.3.7.15+)

I have added client side sorting in vanilla javascript to the modern debugging template.

You can now sort queries, execution times, unscoped variables etc, just by clicking the row header (TH)

It was merged last week, the open PR count is way down to 101 open requests, it was 181.

There a lot of grammar improvements have also been merged in recently. If you see an
error message that could be improved, it’s easy to jump in and edit it via the github online editor.

6 Likes

@Zac_Spitzer really, really nice!!! Just downloaded the latest snapshot to take a look into it. Very good for finding bootlenecks. Is there a way to add a css cursor: pointer to the head cells, so you can see that the headers are clickable? something like setting a css like e.g. adding this to line 238 of Modern.cfc?

#-lucee-debugging-ExecTime table.details th::after { content: '\00A0\21E9'}
#-lucee-debugging-ExecTime table.details th { cursor:pointer }

I’ve seen there is a link to set a sorting for/after a page reload behind the table header AVG-Times and table header order links. That may be a little confusing. By the way… I know I can PR it myself, but I really still don’t feel that comfortable to do it right at the moment.

1 Like

that fix looks good, only problem is that might affect the other debugging templates which didn’t get sorting added, but I think they don’t have THEAD so it should work if you add the THEAD into the CSS selector.

#-lucee-debugging-ExecTime table.details thead th::after

Please go ahead and file a PR :slight_smile:

I agree it’s a bit clunky with both clunky server side and client side sorting, what to do?

Just added my first PR :smiley: Thanks for motivation and support Zac. Hope I did everything correctly. The guidelines state I should put LDEV number into commit, but I thought such a minor change shouldn’t have a JIRA ticket, or should I have created one first? Here is my PR:

When I first added the CSS I saw multiple table headers being affected (also in the search results of the reference tab). Then I added the css ID selector #-sign, isolating it to the “Execution-Tme” and “Implicit Variable Access” only.

As far as I can see from the code, I think your table sort javascript functionaltiy would make these links obsolete, but I wouldn’t necessary get rid of the server side sorting, because it does the same job without javascript (addional functionality if somehow javascript wouldn’t be available). And because: the arrow down character now is suggesting to be an clickable area too, I would let it that way for now.

2 Likes

congratulations!

actually, even the complex query table is sortable, there’s some funky logic in place to handle sorting multiple linked rows.

2 Likes