Filtering the list by clicking on bars in the chart

• Type: Story
• Status: Ready for QA
• Priority: Minor
• Resolution: Unresolved
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: Content Dashboard
• Labels:
  • d_20_09
  • d_20_11
  • fc_21_02
• Epic/Theme:
  • Content_Performance_Analytics
• Epic Link: tango-graph-ux-improvements
• Sprint: TANGO | #45 DIS | Sep11-Sep25, TANGO | #46 DIS | Sep25-Oct09, TANGO | #47 DEV | Oct09-Oct23, TANGO | #48 DIS | Oct31-Nov13, TANGO | #49 DIS | Nov13-Nov27, TANGO | #50 DIS | Nov27-Dec11, TANGO | #51 DIS | Dec11-Dec28, TANGO | #54 DEV | Feb05-Feb19, TANGO | #55 DEV | Feb19-Mar05
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/99045

Motivation

After the user's test carried out in the LPS-117343 epic, we've confirmed that a way to zoom into one category's assets in the graph is needed. By clicking on the bars in the chart, users will be able to filter the content's list below. The filter will consist in applying an "AND" operator with the selected category over the already existing filters.

Design

https://www.figma.com/file/vij7bXlz21buXTHqyFGCMv/LPS-120676-Filtering-the-list-by-clicking-on-bars-in-the-chart?node-id=430%3A5

Technical Requirements

• When clicking on a bar in the graph, the list of contents below will be restricted by adding the filters matching the categories (it could be one or two)
• The new filters added will:
  • work with an AND operator between them, and in respect of the filters that may be already applied 
  • be shown in the filter section with their corresponding labels
• When the user clicks in a bar and the matching filters are applied, an alert will be shown: Press ESC to remove bar’s category filters.
• To draw the action back, te user can:
  • press ESC key
  • click on or off the same bar
  • click on another bar
• Click on "Clear all" button will clear all filters (the ones added with the recent action and the existing ones if there were any)
• When clicking on another bar, the filters coming from the recent action will be removed and the new ones will be added
• If the user: adds a new filter by any means, or removes one of the pre-existent or new ones, then the selected bar will get deselected and the back actions will be no longer available. In case of adding new filters, the filters that were already applied will remain and will be combined with the new ones.
• Nice to have feature: when there are grey bars in the graph (corresponding to NoVocab Specified), user can click on them and see the list of assets (with only one category) displayed. If it is not feasible, then when clicking on grey bars and not-allowed action icon must show.

 Acceptance Criteria

• Given the audit graph
• When the user clicks on one of the colored bars
• Then the rest of the bars disappear

–

• Given the audit graph with one of the bars selected
• When the user clicks again on the bar, or outside the bar, or hits ESC key
• Then the bar gets deselected

–

• Given the audit graph
• When the user clicks on one of the colored bars
• Then the filters corresponding to the categories in that bar are applied, they are shown as filter labels in the management tool bar and the list of contents is filtered by them (with an AND operator)

–

• Given the audit graph 
• When there are some filters already applied and the user clicks on one of the colored bars
• Then the new filters corresponding to the categories in that bar are applied, they are shown as filter labels in the management tool bar and the list of contents is filtered by them (with an AND operator)

–

• Given the audit graph with several filters already applied
• When the user clicks on a bar, the new filters are applied and s/he hits the Clear button
• Then all the filters (the existing and the new ones) are removed, and the graph shows all the bars corresponding to the featured vocabularies and their categories

–

• Given the audit graph with several filters already applied
• When the user clicks on a bar, the new filters are applied and s/he deletes any of the existing or new ones, but not all of them
• Then the remaining filters do not disappear and the graph shows all the bars and the list all the assets corresponding to the filters applied

–

• Given the audit graph
• When the user clicks on one of the grey bars
• Then the filter corresponding to the category in that bar is applied, it is shown as a filter label in the management tool bar and the list of contents is filtered by it 

–

• When the user clicks on a bar and the matching filters are applied 
• Then an alert is shown until the user hits ESC, removes one of the filters, or adds a new one

–

Test Scenarios

AC ID	Test Strategy	Test Scenarios	Is it covered by FrontEnd ? (JS-Unit)	Is it covered by BackEnd? (unit or integration)	Poshi?
01	Low	When a user clicks on one of the colored bars of the audit graph, the rest of the bars disappear	-	-	-
01	Low	When a user clicks on one of the colored bars of the audit graph, a message appears above the graph "Press escape to remove the bar's category filters"	NO	N/A
02	Medium	When a user clicks on a gray bar of the audit graph, the filter corresponding to the category in that bar is applied, it is shown as a filter label in the management tool bar and the list of contents is filtered by it	NO	N/A
03	Critical	When a user clicks on one of the colored bars of the audit graph, the filters corresponding to the categories in that bar are applied, they are shown as filter labels in the management tool bar and the list of contents is filtered by them (with an AND operator)	NO	N/A
04	High	When a user clicks on one of the colored bars of the audit graph, so the filters corresponding to the categories in that bar are applied, and the user clicks on the Clear (X) button, all the filters (the existing and the new ones) are removed, and the graph shows all the bars corresponding to the featured vocabularies and their categories	NO	N/A
05	High	When a user clicks on one of the colored bars of the audit graph, so the filters corresponding to the categories in that bar are applied, and the user removes one or more filters (but not all), the filters (the existing and the new ones) left do not disappear and the graph shows all the bars corresponding to the featured vocabularies and their categories	NO	N/A
06	Low	When there is a bar selected and the user clicks on the bar, the bar gets deselected	-	-	-
07	Low	When there is a bar selected and the user clicks outside the bar, the bar gets deselected	-	-	-
06	Low	When there is a bar selected and the user presses Esc, the bar gets deselected	NO	N/A
07	Medium	When there are filters already applied and the user clicks in a bar, the new filters corresponding to the categories in that bar are applied, they are shown as filter labels in the management tool bar and the list of contents is filtered by them	NO	N/A
08	Low	When the user clicks ESC when a bar is selected, the alert shown disappears	NO	N/A
09	Low	When the user removes one of the filters when a bar is selected, the alert shown disappears	NO	N/A
10	Low	When the user adds a new one when a bar is selected, the alert shown disappears	NO	N/A