(I #2638) Feature to Goto a page directly #2639

antoine2711 · 2020-05-24T04:13:18Z

(Closes #2638)

First implementation. Is functional.

2020-04-19 Update master

First implementation. Is functional.

Background-color for each « button » & validation for the page choice of the user: number, > 1 & < last & singular for a one page project.

wetneb · 2020-05-24T05:27:38Z

Thanks a lot! I am thinking that as a user it might be more natural to go to a particular row or record number, since the pagination changes depending on the filters applied and the page size.

antoine2711 · 2020-05-24T05:39:30Z

Thanks a lot! I am thinking that as a user it might be more natural to go to a particular row or record number, since the pagination changes depending on the filters applied and the page size.

Good question @wetneb. As a programer, I try to stay in the same logic that was there before. With the « page » concept, if you choose 2, and you go back one page with « previous », you end up strait with the first record at the top. I only mimicked the way the « last page » works, which takes into account the hidden rows.

OpenRefine/main/webapp/modules/core/scripts/views/data-table/data-table-view.js

Lines 500 to 508 in 1cdf81b

    
           DataTableView.prototype._onClickGotoPage = function(elmt, evt) { 
        
             var lastPage = Math.floor((theProject.rowModel.filtered - 1) / this._pageSize); 
        
             var promptMessage = "You are currently at page "+ (this._currentPage) +".\n" 
        
             if(lastPage > 1) { 
        
               promptMessage += "There are "+ (lastPage + 1) +" pages "; 
        
             } else { 
        
               promptMessage += "There is 1 page "; 
        
             }

It really follow thru the current's OR logic, so I fell this way is less disruptive to the user. But I might be wrong.

As with the other features I coded, my aim is to be as sure as possible it won't break. I know I'm not setting new marks in term of UI, but it's decent, simple, and… working. Also, no dirty tricks in the code, it really a lot on existing code/way OR works.

Of course, there could be:

go to page…
go to record…
go to row…

All beside each other. If you think this is the way, I'll code it.

Regards,
Antoine

wetneb · 2020-05-24T06:24:23Z

Yes, the API exposed by the backend is not really suited to go to a specific row at the moment: this would require backend changes.

In terms of UI, if we just do it based on page numbers as proposed in this PR, I think we could potentially have a number input directly in the table header, which would show the current page number: the user could edit it directly and confirm with the Enter key or a small button next to it.

Let's not rush this and ask @ostephens and @lisa761 what they think about it.

antoine2711 · 2020-05-24T07:07:30Z

Yes, the API exposed by the backend is not really suited to go to a specific row at the moment: this would require backend changes.

We could circumvent having to change the API by bringing the user to the page that contains the row or the first row of the record. It wouldn't be the first row of the page, but the user would have what he wants.

In terms of UI, if we just do it based on page numbers as proposed in this PR, I think we could potentially have a number input directly in the table header, which would show the current page number: the user could edit it directly and confirm with the Enter key or a small button next to it.

Yes, in terms of UI, that would be better. I didn't choose that path because it's a little bit more complex to code, and much less robust, even if it's not important or with effects if it breaks.

I also think we should consider this: by giving a small feature asked from a long time, effective even if in a basic form, we give value to the user at a minimal cost. Then, user usually feel entitled to come and comment about that (usually in the form: « thanks for this feature (…) but (…) ;-) ). Then, it's easy to get a feel of our user base, and act accordingly, with a possible incremental change in the next version. It gives a feeling to the user that they are listened to. And, in fact, it's not just a feeling, it's a processus and it's real.

It might not seem like that to a seasoned developer on GitHub, but there is a step learning curve for a user not too tecky to come here and start to interact. It's a bit intimidating also.

Let's not rush this and ask @ostephens and @lisa761 what they think about it.

Of course. Anyway, it's out now, and people can make their own mind and see if they like it! ;-)

Best Regards, @wetneb,
Antoine

P.S. I feel I've now pushed enough features in the last month, and it's now time to pause. But… if I was to continue, the next feature on the path would probably be to let a user change the name of a facet. It's also something that could be done simply, and without too much risks of breaking, and that would help a good bunch of users, I feel. (That is also another feature that would be MUCH easier to code with a GenericFacet JS parent class…)

But, instead, let's go in debug/testing mode for v3.4! ;-)

wetneb · 2020-05-24T07:11:41Z

Yes you have been incredibly productive, thank you very much! And I have the impression that you are tackling issues which are directly motivated by your own experience with the tool - those contributions are extremely valuable since they make a big difference to users. So thank you again!

lisa761 · 2020-05-25T07:02:15Z

This would be nice to keep if we keep a toggle between infinite scrolling and pagination. It's a useful feature for the users and the code doesn't seem to introduce anything particularly hard to work with for scrolling.

Changed from prompt() to <input type="number">, and visual X out Y.

thadguidry · 2020-05-25T18:16:59Z

@antoine2711

Any way for the down arrow in the input box to not rollover into negative integers, but instead 1 would be the lowest? I like the fluidity of being able to hold down the down arrow... letting it rollover back down to 1 at the lowest, releasing my mouse button, and page 1 would show. Right now, it doesn't work that way, if I hold down the mouse on down arrow, it goes past 1 into negative numbers and if I release my mouse button in the negative number range, the current page is selected.
I'd also try increasing the height of the input box to 16 pixels, as long as it doesn't adversely affect display of rows (this allows the up/down arrows to slightly increase for easier clicking)
The input box width of 50px cuts off display of 1 million + rows, so we should probably bump that to 70px width? Or can/should we auto-size that width?
The wording of [#####] of ##### leaves me wondering what the context is of those numbers... we should probably add the term pages after it? [#####] of ##### pages
Allow the focus to remain in the input box (until users click outside of it), so that users can easily use their Arrow keys on keyboard to go forward or back on page numbers. Currently, the input box loses focus the moment that the up or down arrow on my keyboard is pressed and it goes to the next page. More useful to stay focused in input box, so that I can tap my up arrow on keyboard to continually go forward until I click outside of the input box and lose the focus?

Everything else works fantastic and this is a major improvement!

This is how it looks for me on Windows with Firefox:

If the user choose below 1, 1 will be displayed, and if the user choose above the max, the max page will be displayed.

Add pages after « of maxValue », calculate the width of <input> based on max value.

Little fix.

antoine2711 · 2020-05-25T23:22:07Z

Hi @thadguidry,

Any way for the down arrow in the input box to not rollover into negative integers, but instead 1 would be the lowest? I like the fluidity of being able to hold down the down arrow... letting it rollover back down to 1 at the lowest, releasing my mouse button, and page 1 would show. Right now, it doesn't work that way, if I hold down the mouse on down arrow, it goes past 1 into negative numbers and if I release my mouse button in the negative number range, the current page is selected.

Very interesting question. Yesterday, I coded so that if the user go over the max, that it sticks to the max. I coded it yesterday, it's now pushed to GitHub. I now did the same with the lower limit, that is, if you go below 1, it will stick at 1. I think this will solve the issue you are raising here.

That code is now pushed.

I'd also try increasing the height of the input box to 16 pixels, as long as it doesn't adversely affect display of rows (this allows the up/down arrows to slightly increase for easier clicking)

Done.

The input box width of 50px cuts off display of 1 million + rows, so we should probably bump that to 70px width? Or can/should we auto-size that width?

Auto-size is difficult. It could be calculated… There. Did it. 20px + 8px per number.

The wording of [#####] of ##### leaves me wondering what the context is of those numbers... we should probably add the term pages after it? [#####] of ##### pages

Yes indeed. What would still be missing, is the i18n + TEMPLATING ! @wetneb, could you point me to an example of templating? Or a documentation link to implement it? I think I remember you talked about that in another issue.

Allow the focus to remain in the input box (until users click outside of it), so that users can easily use their Arrow keys on keyboard to go forward or back on page numbers. Currently, the input box loses focus the moment that the up or down arrow on my keyboard is pressed and it goes to the next page. More useful to stay focused in input box, so that I can tap my up arrow on keyboard to continually go forward until I click outside of the input box and lose the focus?

Yes, I also think this would be great. I tried to implement it, but failed :-( Any suggestion as to what I should do? Trapping the key down, setting an internal variable to « refocusAfterChange == true » and then, after change, put back the focus?

I'm dealing with internal browser behavior that I would have to modify… That maybe easier to ask than to code…

Everything else works fantastic and this is a major improvement!

Thank you! I'm happy you like it. It's actually not much code for a lot of user benefit! You now have a new version to checkout! The ball is in your court.

Regards,
Antoine

thadguidry · 2020-05-26T00:19:35Z

Hmm, negative numbers continue to show instead of stopping on 1.
Tried on both Edge (Chromium) and Firefox, depending on if you increase, release mouse button, and then decrease as shown:

thadguidry

This seems like it would be easier to just use the control attributes themselves?
<input type="number" id="something" name="something" min="1">
REF: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Correct min and max for <input>

antoine2711 · 2020-05-26T00:46:55Z

This seems like it would be easier to just use the control attributes themselves?
<input type="number" id="something" name="something" min="1">
REF: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

I think I did a mistake… I've put min and max as CSS styles… ;-) Silly me… Anyway, it's now fixed.

Regards, A.

main/webapp/modules/core/scripts/views/data-table/data-table-view.js

Add managment to keep the arrow's key in the CurrentPage <input>.

main/webapp/modules/core/scripts/views/data-table/data-table-view.js

Fixes for Thad’s KeyDown's « Infinite Paging » & PageSize changes.

Code rehookCurrentPageInput & spacing for PageSize section

antoine2711 · 2020-06-17T06:07:37Z

Ok then this must be something specific to my own setup, it is curious.

I will test it on Windows 10. Is that close to your setup, @wetneb? Also, I changed the way the delay was working, now, it really delay.

Regards,
Antoine

lisa761

This is probably because of the merge conflict. If you could undo the last commit, maybe I can take a look at the conflicts again? Because #2719 changed a lot of things with the table.

main/webapp/modules/core/scripts/views/data-table/data-table-view.js

main/webapp/modules/core/styles/views/data-table-view.less

Fix headerTable to tableHeader (PR OpenRefine#2719)

data-header-table to data-table-header

main/webapp/modules/core/styles/views/data-table-view.less

Remove .data-header-table-container

antoine2711 · 2020-06-17T10:06:50Z

@wetneb: Window 10

GC:

FF:

This all seams good.

Regards,
Antoine

wetneb · 2020-06-17T10:09:48Z

Yeah, not on my Debian, but that's a cosmetic issue that should not be a blocker for @lisa761's work.

tfmorris · 2020-06-17T17:27:22Z

@antoine2711 If this:

I've put back « page(s) » in french, let's deal with that some other time.

implies that you don't want to help test French plurals support, I really wish you'd reconsider, since I spent the time fixing it specifically for you.

tfmorris · 2020-06-17T17:29:04Z

main/webapp/modules/core/langs/translation-fr.json

@@ -537,6 +537,7 @@
    "core-views/view": "Aperçu",
    "core-views/extend-not-supported": "Ce service de réconciliation de supporte pas l'extension de données. Essayez de supprimer le service et de l'ajouter à nouveau. Si le problème persiste, contactez le fournisseur de service.",
    "core-views/to-text": "En texte",
+    "core-views/goto-page": "$1 de $2 page(s)",


This should be pluralized the same way Spanish and English is.

antoine2711 · 2020-06-17T18:01:32Z

@antoine2711 If this:

I've put back « page(s) » in french, let's deal with that some other time.

implies that you don't want to help test French plurals support, I really wish you'd reconsider, since I spent the time fixing it specifically for you.

Hi @tfmorris, please, when you see one of my action and you don't think it's inline with « OR standard » or your way of seeing things, do NOT assume it's true or it's my intention. You will have a better communications with me if you instead ask my thru a question.

In this particular case, the reason I removed this (after putting IT BACK a few days ago), it's because @wetneb wanted this issue resolve fast for his GSoS.

Also, I didn't want to make « noise » here about this, since it's not directly related. My intentions are to tackle this with PR #2717, where you will soon see me requesting your attention in order to fixed. From there, I will then fix this, also. From what I understand of you, you should like this way of working.

Regards,
Antoine

…ne#2639)" Go back to simply displaying a range of row numbers, because that will enable a solution for #33, OpenRefine#570 and OpenRefine#572. This reverts commit d7aaac2.

…#5411) * Adapt the GridState interface to separate sorting and pagination. This adds `getRowsBefore` methods, counterpart to the existing pagination methods, so that we can do efficient and correct pagination, solving #33 and #570 * Revert "(I #2638) Feature to Goto a page directly (#2639)" Go back to simply displaying a range of row numbers, because that will enable a solution for #33, #570 and #572. This reverts commit d7aaac2. * Do not move back to the first page when applying an action which refreshes the grid. Instead, the current page is refreshed. This closes #33, closes #570, closes #572. * Specify which actions preserve row and record ids This lets us preserve pagination only when it is guaranteed to show the same part of the data after the operation. * Make paging user-editable like before * Adapt cypress tests

…f the grid (OpenRefine#5411) * Adapt the GridState interface to separate sorting and pagination. This adds `getRowsBefore` methods, counterpart to the existing pagination methods, so that we can do efficient and correct pagination, solving #33 and OpenRefine#570 * Revert "(I OpenRefine#2638) Feature to Goto a page directly (OpenRefine#2639)" Go back to simply displaying a range of row numbers, because that will enable a solution for #33, OpenRefine#570 and OpenRefine#572. This reverts commit d7aaac2. * Do not move back to the first page when applying an action which refreshes the grid. Instead, the current page is refreshed. This closes #33, closes OpenRefine#570, closes OpenRefine#572. * Specify which actions preserve row and record ids This lets us preserve pagination only when it is guaranteed to show the same part of the data after the operation. * Make paging user-editable like before * Adapt cypress tests

…OpenRefine#5411) * Adapt the GridState interface to separate sorting and pagination. This adds `getRowsBefore` methods, counterpart to the existing pagination methods, so that we can do efficient and correct pagination, solving #33 and OpenRefine#570 * Revert "(I OpenRefine#2638) Feature to Goto a page directly (OpenRefine#2639)" Go back to simply displaying a range of row numbers, because that will enable a solution for #33, OpenRefine#570 and OpenRefine#572. This reverts commit d7aaac2. * Do not move back to the first page when applying an action which refreshes the grid. Instead, the current page is refreshed. This closes #33, closes OpenRefine#570, closes OpenRefine#572. * Specify which actions preserve row and record ids This lets us preserve pagination only when it is guaranteed to show the same part of the data after the operation. * Make paging user-editable like before * Adapt cypress tests

antoine2711 added 4 commits April 19, 2020 17:36

Merge pull request #1 from OpenRefine/master

50aa75f

2020-04-19 Update master

Merge branch 'master' of https://github.com/OpenRefine/OpenRefine

2f49878

2020-05-23 Merge branch 'master' of https://github.com/OpenRefine/Ope…

c775556

…nRefine

Start for Goto Page link.

2f92e9b

First implementation. Is functional.

antoine2711 requested review from thadguidry and wetneb May 24, 2020 04:13

Background-color & validation

1cdf81b

Background-color for each « button » & validation for the page choice of the user: number, > 1 & < last & singular for a one page project.

Changed from prompt() to <input type="number">

1fa634c

Changed from prompt() to <input type="number">, and visual X out Y.

antoine2711 added 3 commits May 25, 2020 17:43

Manage bounds in a sticky way

55c57d4

If the user choose below 1, 1 will be displayed, and if the user choose above the max, the max page will be displayed.

width of <input> & « of X pages »

18cc070

Add pages after « of maxValue », calculate the width of <input> based on max value.

Update data-table-view.js

a5709fb

Little fix.

thadguidry requested changes May 26, 2020

View reviewed changes

Correct min and max for <input>

f50ceb9

Correct min and max for <input>

thadguidry reviewed May 26, 2020

View reviewed changes

main/webapp/modules/core/scripts/views/data-table/data-table-view.js Outdated Show resolved Hide resolved

Managment of the arrow's key down.

929b654

Add managment to keep the arrow's key in the CurrentPage <input>.

antoine2711 requested a review from thadguidry May 26, 2020 02:31

thadguidry requested changes May 26, 2020

View reviewed changes

main/webapp/modules/core/scripts/views/data-table/data-table-view.js Outdated Show resolved Hide resolved

antoine2711 requested a review from thadguidry May 26, 2020 04:42

antoine2711 added 2 commits May 26, 2020 01:32

Fixes for Thad’s KeyDown's « Infinite Paging »

ce6f7de

Fixes for Thad’s KeyDown's « Infinite Paging » & PageSize changes.

Code rehookCurrentPageInput & spacing

0003a74

Code rehookCurrentPageInput & spacing for PageSize section

Merge branch 'master' into issue-2638-goto-any-page

2c171ff

lisa761 reviewed Jun 17, 2020

View reviewed changes

main/webapp/modules/core/scripts/views/data-table/data-table-view.js Outdated Show resolved Hide resolved

main/webapp/modules/core/styles/views/data-table-view.less Outdated Show resolved Hide resolved

antoine2711 added 2 commits June 17, 2020 04:17

Fix headerTable to tableHeader

07d26fb

Fix headerTable to tableHeader (PR OpenRefine#2719)

data-header-table to data-table-header

3f246dd

data-header-table to data-table-header

lisa761 reviewed Jun 17, 2020

View reviewed changes

main/webapp/modules/core/styles/views/data-table-view.less Outdated Show resolved Hide resolved

Remove .data-header-table-container

1e6bd73

Remove .data-header-table-container

antoine2711 requested review from lisa761 and wetneb June 17, 2020 08:41

lisa761 approved these changes Jun 17, 2020

View reviewed changes

wetneb merged commit d7aaac2 into OpenRefine:master Jun 17, 2020

tfmorris reviewed Jun 17, 2020

View reviewed changes

thadguidry mentioned this pull request Jan 21, 2022

Add documentation (and screen snippet) of new "Go to page" feature #4452

Closed

antoine2711 deleted the issue-2638-goto-any-page branch April 17, 2022 07:01

wetneb mentioned this pull request Nov 8, 2022

Preserve pagination after actions which trigger an update of the grid #5411

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(I #2638) Feature to Goto a page directly #2639

(I #2638) Feature to Goto a page directly #2639

antoine2711 commented May 24, 2020

wetneb commented May 24, 2020

antoine2711 commented May 24, 2020 •

edited

wetneb commented May 24, 2020

antoine2711 commented May 24, 2020

wetneb commented May 24, 2020

lisa761 commented May 25, 2020

thadguidry commented May 25, 2020 •

edited

antoine2711 commented May 25, 2020 •

edited

thadguidry commented May 26, 2020

thadguidry left a comment •

edited

antoine2711 commented May 26, 2020

antoine2711 commented Jun 17, 2020

lisa761 left a comment •

edited

antoine2711 commented Jun 17, 2020

wetneb commented Jun 17, 2020

tfmorris commented Jun 17, 2020

tfmorris Jun 17, 2020

antoine2711 commented Jun 17, 2020 •

edited

(I #2638) Feature to Goto a page directly #2639

(I #2638) Feature to Goto a page directly #2639

Conversation

antoine2711 commented May 24, 2020

wetneb commented May 24, 2020

antoine2711 commented May 24, 2020 • edited

wetneb commented May 24, 2020

antoine2711 commented May 24, 2020

wetneb commented May 24, 2020

lisa761 commented May 25, 2020

thadguidry commented May 25, 2020 • edited

antoine2711 commented May 25, 2020 • edited

thadguidry commented May 26, 2020

thadguidry left a comment • edited

Choose a reason for hiding this comment

antoine2711 commented May 26, 2020

antoine2711 commented Jun 17, 2020

lisa761 left a comment • edited

Choose a reason for hiding this comment

antoine2711 commented Jun 17, 2020

wetneb commented Jun 17, 2020

tfmorris commented Jun 17, 2020

tfmorris Jun 17, 2020

Choose a reason for hiding this comment

antoine2711 commented Jun 17, 2020 • edited

antoine2711 commented May 24, 2020 •

edited

thadguidry commented May 25, 2020 •

edited

antoine2711 commented May 25, 2020 •

edited

thadguidry left a comment •

edited

lisa761 left a comment •

edited

antoine2711 commented Jun 17, 2020 •

edited