Adds faceted search #261
Adds faceted search #261
Conversation
src/index.less
Outdated
| padding: 0; | ||
| } | ||
|
|
||
| ul.nav-stacked > li > a { |
There was a problem hiding this comment.
I think using class as oppose to structure might scale better but it can be improved later,
I need to fix the query a bit but then I would really welcome the help how to make faceted search easier to use. I need to do a bit of a research in this area. |
|
Can we have a description to the PR explaining what is the intent behind the change? So we can validate it works as intended? :) |
Oh sorry, I thought I opened a draft. Anyway add the description now. |
|
@samueldr @turboMaCk This is now ready for review. |
|
Changing the Sort criteria affects the URL, but does not change it in the combo box, and does not seem to affect the results. Though, refreshing with the URL affected seems to work. Looks like something isn't causing the refresh of the results to be sent.
|
|
The clickable area for a result is... odd...
In green is the clickable area. Suggestions:
|
|
Platforms listing in a result isn't filtered to useful platforms anymore. This makes for useless verbosity:
The current search filters platforms for those that are... pragmatically useful? At least those with binary cache coverage.
Also note that the platforms listed in the facets (left bar) might also somewhat face the same issue. I don't really know how useful it is to show all of those platforms Nixpkgs doesn't actually support. |
|
Package metadata is hard to understand. I guess that it is attribute name, version, for the first elements, then the license, homepage and source links are oddly not link-like. Two main issues, first is there is no labeling on what the thing is, then there is no way to know that a thing is a link without hovering. Sadly, I don't really know how to better solve it for being useful at a glance. The table-like layout used previously really is the pragmatic approach, it is hard to misunderstand.
|
|
I assume all narrow-viewport issues are to be looked at with the nixos-styles redesign. It's hard to fix all of this in a narrow layout. Though, if not prohibitively expensive, it would be nice to have the side bar (with the facets) somehow be a togglable thing when narrow. (No actual need to fix before merging, but something to keep in mind.) |
|
Having an item opened at the bottom of the page, then changing facets scrolls to the opened item. I guess that comes from the handling of navigation to a deep URL. I don't know how easy this is going to be to fix. To reproduce:
|
|
It is basically impossible to select information in an opened item. This is because the selection click, on release, hides the item. Not useful to select those installation instructions! I guess the solution is somewhat linked to the problematic activation area issue (where changing the background colour would help). It might be necessary to do like the current implementation, and only close when the always present "header" is clicked. To help users, a "useless" "× close" button could be added too.
|
| @@ -148,259 +190,357 @@ update navKey msg model = | |||
| view : Model -> Html Msg | |||
| view model = | |||
| Search.view { toRoute = Route.Packages, categoryName = "packages" } | |||
| "Search NixOS packages" | |||
| [ text "Search more than " | |||
| , strong [] [ text "80 000 packages" ] | |||
There was a problem hiding this comment.
Any strategies to help ensure this number doesn't drift too far?
There was a problem hiding this comment.
Ideally this would be done as a counter that counts from 0 to a number which is fetched from the backend meanwhile. But for now this was the easier hack.
| @@ -111,126 +111,64 @@ update navKey msg model = | |||
| view : Model -> Html Msg | |||
| view model = | |||
| Search.view { toRoute = Route.Options, categoryName = "options" } | |||
| "Search NixOS options" | |||
| [ text "Search more than " | |||
| , strong [] [ text "10 000 options" ] | |||
There was a problem hiding this comment.
Any strategies to help ensure this number doesn't drift too far?
There was a problem hiding this comment.
I think there are essentially two ways.
- dynamic - fetch this information over network
- static - inline this information during build
I think @garbas will know what is the right call more than me. However I agree that hard-coding this is won't be scalable. But I'm ok resolving this in separate issue/PR.
There was a problem hiding this comment.
Ideally this would be done as a counter that counts from 0 to a number which is fetched from the backend meanwhile. But for now this was the easier hack.
There was a problem hiding this comment.
There is a Count API that we can use from elasticsearch https://www.elastic.co/guide/en/elasticsearch/reference/current/search-count.html
|
Don't let this shower of papercuts discourage you. In reality this PR are good steps towards improvement. |
|
@samueldr Thank you a ton! I really appreciate the deep review. I'll try to address reported issues today or tomorrow. Thank you again. |
There was a problem hiding this comment.
Here are my few comments:
- The search icon looks weird for me:
- I find it confusing that the "Show more detail" text is on the separator:
- Could be great to underline the items where you can click, otherwise, it won't be obvious:
- After clicking a title, the focus outline stays:
Otherwise, it looks great!
|
@hugolgst which browser is it? This is how it looks for me in FF
|
|
I'm using google-chrome in i3-wm (don't know if this has a role) |
Also I now filter platforms in import-channel script and only import allowed platforms.
This is now fixed |
I'm not sure how to do this better without importing additional font. I would leave this for now since I plan to work on redesign next. And there we will make sure this kind of things don't happen.
I also find it confusing. But I don't have better idea - at this point - how to solve it. As for the previous item I would table this until the redesign.
This is somehow connected with the previous item since it is about displaying all the fields of a package. When redesigning (implementing the same design as nixos.org) I will look how to improve this.
I'm also not able to reproduce this outline. I wonder if this is something specific to you. Can you debug it and see which style change would fix it? |
I just noticed you saif you were using chrome. I can see this being a problem there. let me fix it. |
|
Thanks for the answers @garbas. outline: none; |
This reverts commit ae8332b.
|
Regarding the mobile stuff I will implement them also with the redesign. At the current state it would just take to long to implement this properly. The sooner I merge this the sooner I will start working on redesign. |
This should be reproducible in any chromium based browser which all have default rule for this.
While I agree it doesn't look nice I think we would went into rabbit hole if we would try to fix all these things within the scope of the PR. I would suggest:
It took me a while to figure out what this is about because from screenshot it was not apparent where is this I think this is yet another regression caused by 4d505f3 (the font awesome removal). Adding font awesome will make
I personally don't find it confusing but if some does it should be addressed. But I would take it as a consideration for redesign rather than try to design it within this PR
I don't think we should try to solve these small things in scope of this. We need outline for keyboard navigation. I would suggest opening separate issue to improve outline styling just so we don't forget to make sure this is improved in scope of redesign. |
|
I was looking into icon/font-face. It turned out that in FireFox this is using adding |
|
This pull request has been mentioned on NixOS Discourse. There might be relevant details there: https://discourse.nixos.org/t/tweag-nix-dev-update-6/11195/1 |
This PR add faceted (filtered) search for packages.
At the same time it changes the layout of the results, from table to ordered list. While the design is not final, the structure of the result items should give hint how this is going to be styled with https://github.com/nixos/nixos-common-styles.
A lot of inspiration was taken from github's search -> https://github.com/search
Fixes #163 #261 #95 #201