faceting skeleton

[hongsudt]

• Create a UI element for faceting operation. This pane should be on the left hand-side. It should allow the user to adjust the pane width. The pane should allow scrolling horizontally and vertically. The result set should be on the right hand
• The faceting pane should list the main entity column names with the down arrow indicating an expanded area of operation.
• This faceting pane should be configurable to be displayed on hidden based on a chaise config parameter.

Note: this skeleton should incorporate all the flow mentioned in https://github.com/informatics-isi-edu/chaise/wiki/Faceting for one column.

[hongsudt]

@RFSH should you merge the UX code that you have to chaise?

[RFSH]

@hongsudt It is just a mock-up. I cannot see the value of merging it now. It is not functional and just shows how the UI works. It also needs improvement to its UI and UX. I will keep it in my own directory (https://dev.isrd.isi.edu/~ashafaei/chaise2/recordset/#1/isa:dataset).

[hongsudt]

• integrate the row count, column min/max into the flow..
  • min/max will be used for default facet values
  • row count is used to display # of matches

[hongsudt]

some more UX feedback:

• we should have the black x to clear the existing entry box for all types
• for checkbox, every time I check a box it goes back to the first page. Can we remember the current search page, so it won't bounce back?
• Can we make the area that summarizes existing filters sizable?
• The max of the facet pane width should be half a page
• There is a bug listing the current text filter. If I start with a pattern, then add the checkboxes, the same text pattern was listed instead of the item that I just selected.

[jrchudy]

Can we remember the current search page This won't be possible because selecting a new checkbox to facet on will produce a new set of data. That set of data may or may not include the data from the previous query that was being shown.

Can we make the area that summarizes existing filters sizable Do you mean on each facet or above the recordset table? Either way, this should be simple.

[hongsudt]

Based on the feedback today:

• Put the page title in the sticky area
• Search result area:
  • consolidate all filters associated with a facet together.
  • user should be able to click on the facet name to get to the facet list (auto-focus)
  • clear a facet, clear all filters associated with that facet?
• for text column
  • Show the checklist without any search box in a list format
  • All filters that have been checked will always be visible
  • There should be a default page size say 10. Don't show no more than page size - number of existing filters.
  • Have a find more in the bottom of the list which upon clicking shows a modal of all available options
  • Ignore the pattern search for the moment.
• For range column types
  • Allow user to define their own range. Once the user start typing in that area, automatically show an apply button and have the list checked. (Follow the REI example)
  • After the range is added, disable the input and allow users to un-check that range. Un-check a range leaves it in the list. No need to propagate this state in the permalink.
• UX
  • The facet pane and the search result pane should be independent. Each has its own auto scroll
  • Upon issue a new search, the search result page can be refresh to the top of the page. (Note: some people might like the position of the page to be the same instead of having the page scrolled up)
  • have a visual indicator that the facet pane is resizable
  • have a clear feature on all entry boxes

[RFSH]

UX HTML and CSS changes:

• [x] Move create button to the top of the page. (It should be optional in the recordset directive since it should still be functional in the modal).
• [x] Make sure that the title and subtitle of the page wrap (not truncate).
• [x] Fix the scroll in the recordset app (Left and right pane must be scrollable, not just table).
  • [ ] Make sure footer is relative to the content (at the bottom of the content).
  • [ ] Make sure the next and previous buttons are visible.
  • [ ] Dynamic view height for each page must be based on navbar and subnavbar
• [x] Make sure that table is overflow-x:auto (right now it's disabled).
• [x] Reduce the space between facet title and the content.
• [x] Increase the modal width. It's more visible in the entity pickers.
• [x] Modal scroll?! (verify with @hongsudt or @karlcz. currently it scrolls the whole page, not just the modal content)
• [x] Reduce the jumping when the facet columns are updated (we can introduce extra white space, etc.).
• [x] Tooltip is buggy (not taking care of html, and also sometimes it doesn't work).]
  • [x] Add the logic for enabling tooltip on directive resize
• [x] Limit width of filter pills by pixel (same size as search app).
• [x] Change pills in the modal to be the same as the one in recordset app (truncate).
  • Not sure what else needs to be done to make them more similar
• [x] Drop shadow is visible before page content has been loaded.
• [x] Have a clear feature on all entry boxes
• [x] find more needs more space below it
• [x] no results found needs to be at the top of the list container

[jrchudy]

@RFSH as I start working on a new task I will mark it in the above list. I am working from top to bottom.

[jrchudy]

Functional changes:

• [x] Create button should not throw an error when we have faceting.
  • [ ] Create button needs to use on focus and invalidate logic (instead of just opening a link).
• [ ] Edit button needs to use a url that doesn't include facets OR recordedit understands how to parse the faceting hash structure in the uri
• [x] flow control
• [x] Fix default opening logic
• [x] Fix range faceting
• [x] Calculate the size of url on each select and throw warning.
  • [ ] On the modal view, calculate on each select.
  • [x] Go to is:project, click on Abstract. It's throwing error. Investigate it.
  • [ ] The select all is selecting duplicates in the modal (if it was selected before opening the modal).
  • [ ] Fix the null/empty.

[RFSH]

UX:

• [x] The text in tooltip should be left justified
• [x] clear all chiclet should have "clear all facets" tooltip
• [x] For each chicklet, the x button tooltip should be "clear facet".
• [x] The facets that we're showing at the top of the page, don't have the ....
• [x] Find more should be adjusted (requires more explanation)
• [x] find more should show when scroll height > content height
• [ ] limit title content to 2 lines
• [x] We are not showing any feedback as to if you have typed something in the search box, but it hasn’t been applied yet.
• [x] Use angular ui accordion
  • [x] spinner is taking space. So page jumps a little
  • [x] Reduce the space between heading and content in range picker
  • [x] Add animation for when you click on a facet (slower scrolling)
  • [ ] Change border color of the focused facet.
• [x] come back from find more should focus facet
• [ ] Make sure that vm.initialized is not hiding content and we show loader for the whole page.
• [ ] For the tooltip of all filters on top: instead of comma separated it should be bullet (Aref: Since I didn't know how to use template in tooltip, I added an ermerstjs api, filtersString, which returns a string. We should investigate how we can use templates in tooltip and remove the ermrestjs api)
• [ ] dynamically set the height of the page based on the view height minus the navbar and bookmark bar height
• [ ] opening a facet is happening in two steps.
  • calculate the facet content area before showing that content (use ng-show/hide)
• [ ] Truncate the facet display names.

Functionality:

• [x] Clear all is not unchecking the range
• [x] when you come back from find more, it should update
• [x] ermrestjs bug: cnt(*) of total should be cnt(shortestkey)
  • [x] Make sure emrestjs test cases are not broken.
  • [ ] Make sure that it works fine for both attributegroup and entity reference.
• [x] add chaise config to use recordset or recordset with facetting
• [x] add search filter to the list of facets. Clear all should clear search too.
• [x] Add auto search logic to the search in facets.
• [x] (Buggy Logic) Search in Faceting is buggy.
• [x] (Buggy Logic) Fix the auto open logic. Right now it's clicking on facet.
• [x] (Shows Invalid Result) Fix the view more link. It should turn into a facet.
• [ ] Implement visible facet annotation support
  • [ ] Merge annotation/heuristic with permalink.
  • [x] add open to the permalink. It will just show the default mode (won't be updated by opening/closing facets). If it's true, open it. If it's false, close it. Otherwise open if it has filters. If all the filters are closed, open the first one by default.
• [x] When page loads, we're not getting the total count (since getting total count logic has been changed).
• [x] Focus on most top opened.
• [ ] Total count retrieval only works for entity references (We're not showing count in modal).

[karlcz]

It occurred to me that we might want a small UX toggle to expand/hide the faceting sidebar and a query parameter in the fragment ID to expose the toggle state. There might be scenarios where the DBA is constructing URLs from landing pages etc. and may want to make it open or closed depending on whether the page is intended to be more of a listing or more of a search interface. But having a small GUI toggle would let the user override the DBA choice if they have a different goal in mind...

Edit: so this would be more specific than a chaise-config setting. Maybe the chaise-config setting would set a default state for this parameter when not specified in the URL?

[jrchudy]

• [x] Chaise config option should enable/disable faceting completely
• [ ] query param option to show/hide faceting panel in RS
• [x] make more options bold
• [x] (BUG) keys for own table should not be entity picker
• [ ] allow facets to be open based on annotation definition and being set in the faceting uri (save state of open facets for bookmarks)
• [x] facet panel width facts
  • [x] default width -> 20%
  • [x] min width -> 150 px because of date and time inputs
• [ ] date/time inputs need a set width
• [ ] date/time inputs should remove the padding on left/right inside input box
• [ ] translate columns/foreign keys to proper facets (BUG that was showing "Publication (Dataset)" on dev.facebase)

[robes]

Bug: infinite spinner...

1. go to https://dev.facebase.org/~jchudy/chaise/recordset/#1/isa:dataset
2. expand Organism
3. select 'Mouse'
4. expand Mouse Gene
5. search on 'msx'
6. select 'MSX1'
7. expand Phenotype
8. spinning

[robes]

Bug: Accession should be scalar

As I mentioned in stand up, the Accession should be a set of scalar value 'FB00001232',... choices.

[robes]

Bug: factor in the 'view more' filters

As I mentioned in slack room. When you get to a recordset page from a record page's nested table's 'view more' link, the facets do not account for the join filters.

[robes]

Bug: filter on inbound foreign key should be an entity picker

Also as mentioned this morning in standup. The facets for entities linked by inbound FKeys, e.g., "Publication (Dataset)" or "Assay (Dataset)" seem to give you a range picker that ranges over the publication.dataset which is a fkey based on the dataset.id which is a serial key. Not meaningful for a user to select on, and anyway ought to be the entity picker for the linked entity, e.g., Publications.

[robes]

Bug: "Error: TypeError"

I don't know if its just stale code but as I mentioned on slack, I always get the above terminal error just going to the test link.

https://dev.facebase.org/~jchudy/chaise/recordset/#1/isa:dataset@sort(release_date::desc::,id)

I can dismiss it, in order to use and evaluate the new feature.

[robes]

Bug: show some label like "No value" in place of empty to represent the NULLs

I mentioned this in stand up too.

[robes]

Bug: use the display name for related references

I may be wrong... but I have a feeling you may not be using the display name of the related reference for the facets.

For example,

https://dev.facebase.org/~jchudy/chaise/recordset/#1/isa:person

Notice that there are two "Project" facets, because there are two assocations in the data model between person and project.

If you drill down you will see the nested table is named differently.

https://dev.facebase.org/~jchudy/chaise/record/#1/isa:person/name=Annette%20M.%20Werner

Faceting should be using the same heuristic. If it is already, then this issue is invalid.

Edit: I'm pretty certain that you are not using the reference display name. Here's another example,

https://dev.facebase.org/~jchudy/chaise/recordset/#1/isa:project

"Person" repeated twice.

[robes]

Bug: some shading effect which seems like it might be caused by different height divs/panels

See, https://dev.facebase.org/~jchudy/chaise/recordset/#1/isa:enhancer

It looks this way in both FF and Chrome. If needed I can post a screen shot.

[robes]

Bug: overlapping facets

See https://dev.facebase.org/~jchudy/chaise/recordset/#1/isa:enhancer/*::facets::N4IghgdgJiBcDaoDOB7ArgJwMYFM4gBsBLJAFwH0UAzcyMUlAWyKzAPLIzS1MxyRAAaEFgAWKFvziIQANzZo8sEACMMkMUTYACMNlGDtVMFi0FtjfjghiAnpaEgoJAA4Ewt+QUX41G0Wa6+obGpjqWSNZ2DsIkABIAKgCyADJwxgSRAL4AurlZQA@sort(id)

To recreate:

1. go to https://dev.facebase.org/~jchudy/chaise/recordset/#1/isa:enhancer
2. expand List of Anatomical Structure
3. select 'branchial arch, facial mesenchyme'
4. the Original Species Assembly facet is now overlapping the facet beneath it.

[robes]

Note: I cannot recreate but appears to be a bug lurking in there.

After playing around with expanding/collapsing facets; selecting/unselecting from one facet to reduce the set of options in another facet; I can work my way into a state where the other facets list will not get restored even though I’ve unselected all of the options in a different facet.

[jrchudy]

I have collected all of the bug reports and unfinished features that were discussed in this PR as well as in the slack channel, isrd-chaise, and created issues for them. Each of these issues were attached to either the round 1 epic (#678) or the round 2 epic (#1257).

Anymore comments or bugs should be reported as issues and we can triage them for either round 1 or round 2. This issue will no longer be used to track changes for faceting. Closing this issue.