Open-Assistant icon indicating copy to clipboard operation
Open-Assistant copied to clipboard

Use DnDKit for all ranking tasks

Open AbdBarho opened this issue 2 years ago • 1 comments

Ranking tasks #33 #34 implemented in #127 and #154 use simple up / down buttons for ranking the items.

Use Drag and drop with https://dndkit.com/ to create a more interactive and pleasing experience for the user. Make sure it works on touch devices.

The modifications should be (in theory) constrained to the Sortable.tsx component.

Questions:

  • what happens when the text that should be ranked is too long that it covers the entire screen of a small smartphone?

AbdBarho avatar Dec 29 '22 20:12 AbdBarho

For text that's too long, can we have a button to collapse it and only show the first X characters?

fozziethebeat avatar Dec 29 '22 23:12 fozziethebeat

I'm interested in taking on this task. Initially I thought I'd just use dnd-kit/sortable to replace the arrow buttons and reimplement the existing sort functionality and then try to improve the ux for smaller/touch screens, making one PR so long as that is simple.

dnd-kit appears to have a specific sorting extension, I figured that should be used.

I assume that the arrows are not required if drag and drop works, please let me know if that is not the intent.

othrayte avatar Dec 31 '22 01:12 othrayte

I assume that the arrows are not required if drag and drop works, please let me know if that is not the intent.

Exactly. Yeah when it was built we didn't realize we wanted DnD. The arrows should go away and there should be a drag handle. Something like RxDragHandleDots2 or MdDragHandle. On the left or right side is debatable. (both?)

k-nearest-neighbor avatar Dec 31 '22 02:12 k-nearest-neighbor

Oops, just realized that @AbdBarho had already self assigned this issue and has a branch (dnd) which is further ahead and appears to have touch support. Anyway I've pushed my changes to my fork in case any of it is of any use (https://github.com/LAION-AI/Open-Assistant/compare/main...othrayte:Open-Assistant:dnd-ranking?expand=1).

othrayte avatar Dec 31 '22 04:12 othrayte

@othrayte thanks for wanting to contribute! I think the points that @k-nearest-neighbor mentioned are still open, with drag handles and styling and such. also what @fozziethebeat mentioned for the long text #190.

Feel free to improve what I did, as it was just a skeleton and not final by any means.

AbdBarho avatar Dec 31 '22 08:12 AbdBarho

@AbdBarho I created an issue for the drag handles (#223), I'm happy to take that on if someone wants to triage/cleanup the issue tags and assign me.

othrayte avatar Jan 01 '23 03:01 othrayte