SOB bounty sort/filter option

[arash009]

@arash009 commented on Tue Nov 28 2017

Preamble

Idea: #48
Title: SOB Bounty sort/filter option
Status: Draft
Created: 2017-11-28

Summary

There is no way currently to sort or filter the list of bounties on the page. A sort and filter option would be very useful as our list of active bounties start to add up.

Vision

As a developer looking for bounties to work on, I would like to be able to search, filter, and sort the bounties available, in order that I can find suitable bounties that I'm interested in without having to scroll through a large list.

Swarm Participants

• Lead Contributor:
• Testing & Evaluation:
• Contributor:
• Contributor:
• UX (if relevant): @denis-sharypin

Requirements

Sort options should include:

• Date
• Bounty value
• Repo/Org

Filter options should include:

• Repo/Org
• Min/Max bounty value
• Bounty type? (bug/feature/security/non-development)
• Programming language
• Date

Goals & Implementation Plan

Minimum Viable Product

Goal Date:
Description:

Iteration 1..N

Goal Date:
Description:

Supporting Role Communication

Post-Mortem

Copyright

Copyright and related rights waived via CC0.

[arash009]

Maybe when you hover over an active chip, you can get an "x" on the right which allows you to remove the filter. See example: https://www.google.com/flights/beta?source=flgw#flt=/m/08966./m/0156q.2017-12-31*/m/0156q./m/08966.2018-01-04;c:CHF;e:1;s:0*0;dt:0000-1500;at:1100-2400;sd:1;t:f

Also in terms of price, I like the bar that you can drag as per the google flights example, instead of manually entering numbers

Also, and this might be more related to implementation than design, do we have to have an "apply" or can the page auto refresh as the filter is changed, so no need for a confirmation button.

I'm happy for this to be the first iteration if those additional items will add complexity.

[denis-sharypin]

@arash009 , @tpatja I uploaded a web version of a feature to Zeplin. Please, use a standalone version of the app since a file is too big and web version is a bit slow
zpl://screen?sid=5a3975388594db787e1e5a96&pid=59dd4d45719799b4220a2e49
(https://zpl.io/VkKk9g8)

Mobile design of the filter/sort feature will be soon

[pablodip]

This is "in progress" but there is no assignee. @arash009 Are you working on it? Just getting used to the workflow. :)

[dbalatero]

I was wondering the same as @pablodip – I'd like this feature, therefore I'd like to help implement it if my help is needed! ;)

[andytudhope]

Hey @pablodip and @dbalatero! My two favourite people 😉 So, Arash is the PM of open bounty and not one of the technical folks. If you two would like to work on this together, I think you should go ahead as you have correctly noticed that there is currently no-one else assigned to it.

[dbalatero]

If you two would like to work on this together

@pablodip I'm totally down to work together. Full disclosure though, I'm crash-learning Clojure and react-native for that matter on this project, so I don't want to slow you down. My plan was to pick off small features and do them to level up my skills.

I can help with UI design/ideas, and I can definitely jump in and start coding too. Since you were first commenter on this PR, you should take the lead on it? I'm on Riot, same username if you want to hit me up there!

[pablodip]

@dbalatero

I can start working on this on the 15th of January. How do you think we could split the work? I can only picture splitting backend and frontend, but let me know if you can think of any other ways. :) If so, which part do you prefer?

[pablodip]

Some notes:

• Filters to not have for now, since we don've have the data yet: type, language.
• Filters to add: currency.
• Filters to change: "more", by owner.

[pablodip]

Hey @denis-sharypin, a couple of UX questions. :)

• Do you want any change of style when hovering an option in the list of sorting options?
• Do you want the current sorting option with a different style, or being disabled in the list?

[arash009]

I would say depends on how much complexity we are adding and delay to get it complete. Ideally something like this would be great https://www.google.com/flights/beta?source=flgw#flt=/m/08966./m/0156q.2017-12-31*/m/0156q./m/08966.2018-01-04;c:CHF;e:1;s:0*0;dt:0000-1500;at:1100-2400;sd:1;t:f

[pablodip]

@arash009 Do you mean that we should forget those questions for now?

By the way, the animations in the filter boxes of Google Flights are great! :)) And it is also nice the arrow indicating that the filter expands.

I have a couple of UX more questions, by the way, @denis-sharypin :

• When the list of bounties is empty because no bounty matches the filter, right not it shows "No recent activity yet". I guess that is something from the past. What should it show now?
• The current design doesn't fit mobile. How about disabling filters in mobile for now until we have a design for them? That way we would have filters and sorting in computer sooner, and limiting somehow the mobile experience isn't a bad strategy for now, probably better that that having it broken.

[arash009]

My recommendation:
1- Something like "No matching bounties found"
2- Great idea. Lets create a separate requirement/story for that and put it in the backlog so we dont forget

[denis-sharypin]

Agree with Arash comment

[churik]

1. Default sorting ('Most recent') shows bounty funded a month ago, than two months ago, and in the end of list - new bounties (currently on 11 page)

Steps:

• open https://openbounty.status.im:444/app

Actual result:

old(not oldest) items on the top, newest on the bottom of the list

Expected result:

newest on the top, sorting matches time on bounty (time, when bounty contract was updated)

Video: http://take.ms/bVRh1

[churik]

2. If you change sort option not on 1 page - you stay in the same page

Steps:

• open https://openbounty.status.im:444/app
• go to 2 page
• change sorting option to 'Lowest Value'

Actual result:

user stays on 2 page

Expected result:

redirecting to 1 page

Video (with sound): http://take.ms/83lUU

[churik]

3. Applying filter not on 1 page leads to JS error, and you cannot apply filter anymore until manually page reloading

Steps:

• open https://openbounty.status.im:444/app
• go to 2 page
• apply some filter

Actual result:

JS error; filter stucks until user manually reloads 'Open bounties' page

Expected result:

redirecting to 1 page; filetered results are shown

Video (with sound): http://take.ms/e44Gd

[churik]

4. No sorting in 'Owner' popup

Steps:

• open https://openbounty.status.im:444/app
• tap on 'Owner'

Actual result:

Expected result:

• Owners are sorted by alphabet;
• Scroll bar is displayed when we have more than particular (lets say 10) amount of owners - it can be really long on prod env;

[churik]

5. General question - why the max option in Value is 1000? There are a lot of bounties with value more than 1000$ in prod env, so my suggestion is 10000$
   

6. I suggest rename option 'With no claims' to 'Not claimed yet' (it sounds more reasonable, no?)
   

[churik]

7. Filter not applied when you click on value in 'Claims', 'Date' (FireFox only)

Steps:

• open https://openbounty.status.im:444/app
• click on 'Date'
• click on 'Last week' (with mouse or touchpad)

Actual result:

Filter not applied and just closed (video is attached)
Filter applied only if you tap on value with touchpad.

Expected result:

Filter is applied

NOTE: reproducible only in FireFox (no issue in Chrome, Safari)
Video: http://take.ms/ltYxL6

OS: Mac OSx El High Sierrra 10.13.1
Browser: FireFox 58.0.1

[pablodip]

@churik

7.) Sorry, just saw the detailed info above, that it was marked as 4.). Quesion: when you say click, do you mean only with mouse?

[churik]

Re 6. @arash009 agree! let's ask @denis-sharypin to help us with it?

@pablodip
Re 1. Good question. If you currently use created_at, it means that this time just is not shown on SOB, and I suggest to use updated_atas value which user used to see in Open Bounties. So, latest should be on top, sorting by updated_at.

Re 7. Well for me it is not working when you click with mouse and when you click on value (not tap) with touchpad.

[pablodip]

@churik

1.) Okay, will use updated_at for now to make the sorting clear in the UI, and will probably have to define well the date semantics that we want in the future.

7.) Okaayy, understood and reproduced now! I normally only tap, and I think that it should have the same semantics than clicking for a browser, that is why it works in Safari and Chrome. So I will investigate that weird behaviour. Thanks! :)

[denis-sharypin]

@arash009 I Agree with @pablodip there is no place for such a big label. I would keep it consistent with other filters. We could go with a design like this for example in future iterations

[churik]

8. Cannot remove filter 'Owner' when it includes several owners from start and end of the list (Safari only)

Steps:

• open https://openbounty.status.im:444/app
• click on 'Owner'
• tick on first owner
• scroll and tick last owner from the list
• try to remove filter

Actual result:

Filter is not removed; 3 of 2 owners are shown (attached video with more details)

Expected result:

Filter is removed

NOTE: reproducible only in Safari
Video (with sound): http://take.ms/IyMre

OS: Mac OSx El High Sierrra 10.13.1
Browser: Safari 11.0.1

[churik]

11. When all filters applied, they are aligned only to the top

Steps:

• open https://openbounty.status.im:444/app
• apply all filters

Actual result:

Expected result:

Filters are aligned to the top and to the bottom.

OS: WIN 10 home, Mac OSx
Browser: IE 11, Edge, Chrome

[churik]

So, new list:

• 8.Cannot remove filter 'Owner' when it includes several owners from start and end of the list (Safari only)
• 11. When all filters applied, they are aligned only to the top

[pablodip]

8.) I think that I already know why this happens and will try to fix it in a PR.
9, 10, 12.) How about disabling filtering and sorting in Windows and creating two independent issues as bounties to fix those issues and enable the features?

[denis-sharypin]

@pablodip

I have proposals on how to fix the issue with the filter alignments.

1. We have to make a left column wider (787px) and a right column narrower (320px). Space between them is 24px.

2. We have to move a sort feature to the line below where the number of bounties is. Which means if there are no bounties we don't show a sort control and a number of bounties. Please, keep an eye on the separator between sort/number of bounties and other bounties under them.

Zeplin file: https://zpl.io/b6Q8qnj

Zeplin

Zeplin - Login

Collaboration app for UI designers and frontend developers

[andytudhope]

LGTM

Seems like there is then lots of potential to add new filters as we go too; bounties for new bounty filters 👍 Maybe we could right-align the totals earned in the right column and then have the name be shortened if it is a really long username?

[churik]

9, 10, 12.) How about disabling filtering and sorting in Windows and creating two independent issues as bounties to fix those issues and enable the features?

I didn't agree because I believe we have a lot of users on Windows.
I don't have a statistic data, but I pretty sure that Windows is one of most general OS.
So I prefer to see fixed at least 10.
cc @arash009

[pablodip]

@churik I'm not saying that it isn't important, just that we could have it now for some users while unblocking the develop branch, and we could delegate the fixes and enable it for Windows once it is fixed there. I just don't have a Windows setup here to be able to fix it. :S

[churik]

9, 10,12 moved to #262

[churik]

Test-plan with all test results can be found here: https://ethstatus.testrail.net/index.php?/plans/view/94
Separate issue #269 is created as I believe it is not show-stopper for this feature.

For now:

• all mentioned above issues are fixed;
• filtering/sorting option is completely disabled for all Windows users (because of UI filtering/sorting issues (WINDOWS) #262)
  Checked in Chrome, FireFox, IE;
• filtering is disabled for mobile.