Link file types from statistics

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html

@@ -56,6 +56,7 @@
                   [ngbPopover]="getFileTypeName(filetype)"
                   i18n-ngbPopover
                   triggers="mouseenter:mouseleave"
+                  (click)="filterByFileType(filetype)"
                   [attr.aria-label]="getFileTypeName(filetype)"
                   [class.me-1px]="!last"
                   [style.width]="getFileTypePercent(filetype) + '%'"
@@ -70,7 +71,7 @@
           <div class="d-flex flex-wrap align-items-start">
             @for (filetype of statistics?.document_file_type_counts; track filetype; let i = $index) {
               <div class="d-flex">
-                <div class="text-nowrap me-2">
+                <div class="text-nowrap me-2" [class.cursor-pointer]="filetype.mime_type !== 'Other'" (click)="filterByFileType(filetype)">
                   <span class="badge rounded-pill bg-primary d-inline-block p-0 me-1" [style.opacity]="getItemOpacity(i)"></span>
                   <small class="text-nowrap"><span class="fw-bold">{{ getFileTypeExtension(filetype) }}</span>&nbsp;<span class="text-muted">({{getFileTypePercent(filetype) | number: '1.0-1'}}%)</span></small>
                 </div>

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts

@@ -9,12 +9,14 @@ import { RouterTestingModule } from '@angular/router/testing'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { Subject } from 'rxjs'
 import { routes } from 'src/app/app-routing.module'
+import { FILTER_MIME_TYPE } from 'src/app/data/filter-rule-type'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { PermissionsGuard } from 'src/app/guards/permissions.guard'
 import {
   FileStatus,
   WebsocketStatusService,
 } from 'src/app/services/websocket-status.service'
+import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { environment } from 'src/environments/environment'
 import { WidgetFrameComponent } from '../widget-frame/widget-frame.component'
 import { StatisticsWidgetComponent } from './statistics-widget.component'
@@ -24,6 +26,7 @@ describe('StatisticsWidgetComponent', () => {
   let fixture: ComponentFixture<StatisticsWidgetComponent>
   let httpTestingController: HttpTestingController
   let websocketStatusService: WebsocketStatusService
+  let documentListViewService: DocumentListViewService
   const fileStatusSubject = new Subject<FileStatus>()
 
   beforeEach(async () => {
@@ -48,6 +51,7 @@ describe('StatisticsWidgetComponent', () => {
     jest
       .spyOn(websocketStatusService, 'onDocumentConsumptionFinished')
       .mockReturnValue(fileStatusSubject)
+    documentListViewService = TestBed.inject(DocumentListViewService)
     component = fixture.componentInstance
 
     httpTestingController = TestBed.inject(HttpTestingController)
@@ -231,4 +235,25 @@ describe('StatisticsWidgetComponent', () => {
       'CurrentASN:'
     )
   })
+
+  it('should support quick filter by mime type', () => {
+    const qfSpy = jest.spyOn(documentListViewService, 'quickFilter')
+    component.filterByFileType({
+      mime_type: 'application/pdf',
+      mime_type_count: 160,
+    })
+    expect(qfSpy).toHaveBeenCalledWith([
+      {
+        rule_type: FILTER_MIME_TYPE,
+        value: 'application/pdf',
+      },
+    ])
+
+    qfSpy.mockClear()
+    component.filterByFileType({
+      mime_type: 'Other',
+      mime_type_count: 160,
+    })
+    expect(qfSpy).not.toHaveBeenCalled()
+  })
 })

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts

@@ -6,7 +6,10 @@ import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap'
 import * as mimeTypeNames from 'mime-names'
 import { first, Subject, Subscription, takeUntil } from 'rxjs'
 import { ComponentWithPermissions } from 'src/app/components/with-permissions/with-permissions.component'
-import { FILTER_HAS_TAGS_ANY } from 'src/app/data/filter-rule-type'
+import {
+  FILTER_HAS_TAGS_ANY,
+  FILTER_MIME_TYPE,
+} from 'src/app/data/filter-rule-type'
 import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
 import { DocumentListViewService } from 'src/app/services/document-list-view.service'
 import { WebsocketStatusService } from 'src/app/services/websocket-status.service'
@@ -132,4 +135,14 @@ export class StatisticsWidgetComponent
       },
     ])
   }
+
+  filterByFileType(filetype: DocumentFileType) {
+    if (filetype.mime_type === 'Other') return
+    this.documentListViewService.quickFilter([
+      {
+        rule_type: FILTER_MIME_TYPE,
+        value: filetype.mime_type,
+      },
+    ])
+  }
 }