feat(webapp): Show top 10 items in Explore page (#1663)

* feat: show top 10 groups and Other
* chore: make Other non-clickable

Author: pavelpashkovsky

webapp/javascript/pages/TagExplorerView.tsx

@@ -109,6 +109,9 @@ const TIMELINE_SERIES_COLORS = [
   Color.rgb(222, 218, 247),
 ];
 
+const TOP_N_ROWS = 10;
+const OTHER_TAG_NAME = 'Other';
+
 // structured data to display/style table cells
 interface TableValuesData {
   color?: Color;
@@ -260,6 +263,10 @@ function TagExplorerView() {
   const { groupsData, activeTagProfile } = getGroupsData();
 
   const handleGroupByTagValueChange = (v: string) => {
+    if (v === OTHER_TAG_NAME) {
+      return;
+    }
+
     dispatch(actions.setTagExplorerViewGroupByTagValue(v));
   };
 
@@ -292,6 +299,32 @@ function TagExplorerView() {
     return acc;
   }, [] as string[]);
 
+  const sortedGroupsByTotal = [...filteredGroupsData].sort(
+    (a, b) => calculateTotal(b.data.samples) - calculateTotal(a.data.samples)
+  );
+
+  const topNGroups = sortedGroupsByTotal.slice(0, TOP_N_ROWS);
+  const groupsRemainder = sortedGroupsByTotal.slice(
+    TOP_N_ROWS,
+    sortedGroupsByTotal.length
+  );
+
+  const groups =
+    filteredGroupsData.length > TOP_N_ROWS
+      ? [
+          ...topNGroups,
+          {
+            tagName: OTHER_TAG_NAME,
+            color: Color('#888'),
+            data: {
+              samples: groupsRemainder.reduce((acc: number[], current) => {
+                return acc.concat(current.data.samples);
+              }, []),
+            },
+          } as TimelineGroupData,
+        ]
+      : filteredGroupsData;
+
   return (
     <>
       <PageTitle title={formatTitle('Tag Explorer View', query)} />
@@ -321,12 +354,12 @@ function TagExplorerView() {
                 timezone={offset === 0 ? 'utc' : 'browser'}
                 data-testid="timeline-explore-page"
                 id="timeline-chart-explore-page"
-                timelineGroups={filteredGroupsData}
+                timelineGroups={groups}
                 // to not "dim" timelines when "All" option is selected
                 activeGroup={
                   groupByTagValue !== ALL_TAGS ? groupByTagValue : ''
                 }
-                showTagsLegend={filteredGroupsData.length > 1}
+                showTagsLegend={groups.length > 1}
                 handleGroupByTagValueChange={handleGroupByTagValueChange}
                 onSelect={(from, until) =>
                   dispatch(setDateRange({ from, until }))
@@ -351,8 +384,8 @@ function TagExplorerView() {
         >
           <div className={styles.statisticsBox}>
             <div className={styles.pieChartWrapper}>
-              {filteredGroupsData?.length ? (
-                <TotalSamplesChart filteredGroupsData={filteredGroupsData} />
+              {groups?.length ? (
+                <TotalSamplesChart filteredGroupsData={groups} />
               ) : (
                 <LoadingSpinner />
               )}
@@ -362,7 +395,7 @@ function TagExplorerView() {
               whereDropdownItems={whereDropdownItems}
               groupByTag={groupByTag}
               groupByTagValue={groupByTagValue}
-              groupsData={filteredGroupsData}
+              groupsData={groups}
               handleGroupByTagValueChange={handleGroupByTagValueChange}
               isLoading={type === 'loading'}
               activeTagProfile={activeTagProfile}
@@ -431,6 +464,11 @@ function Table({
     );
 
   const handleTableRowClick = (value: string) => {
+    // prevent clicking on single "application without tags" group row or Other row
+    if (value === appName || value === OTHER_TAG_NAME) {
+      return;
+    }
+
     if (value !== groupByTagValue) {
       handleGroupByTagValueChange(value);
     } else {
@@ -544,9 +582,7 @@ function Table({
       const percentage = (total / groupsTotal) * 100;
       const row = {
         isRowSelected: isTagSelected(tagName),
-        // prevent clicking on single "application without tags" group row
-        onClick:
-          tagName !== appName ? () => handleTableRowClick(tagName) : undefined,
+        onClick: () => handleTableRowClick(tagName),
         cells: [
           {
             value: (