chore: make feature-dataviz components standalone

apps/search/src/app/app.module.ts

@@ -2,7 +2,6 @@ import { HttpClientModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { FeatureCatalogModule } from '@geonetwork-ui/feature/catalog'
-import { FeatureDatavizModule } from '@geonetwork-ui/feature/dataviz'
 import { FeatureMapModule } from '@geonetwork-ui/feature/map'
 import { UiLayoutModule } from '@geonetwork-ui/ui/layout'
 import {
@@ -38,7 +37,6 @@ export const metaReducers: MetaReducer<any>[] = !environment.production
     FeatureCatalogModule,
     UiLayoutModule,
     FeatureMapModule,
-    FeatureDatavizModule,
     StoreModule.forRoot({}, { metaReducers }),
     !environment.production ? StoreDevtoolsModule.instrument() : [],
     EffectsModule.forRoot(),

apps/webcomponents/src/app/webcomponents.module.ts

@@ -33,7 +33,6 @@ import {
   MapStateContainerComponent,
 } from '@geonetwork-ui/feature/map'
 import { GnDatasetViewChartComponent } from './components/gn-dataset-view-chart/gn-dataset-view-chart.component'
-import { FeatureDatavizModule } from '@geonetwork-ui/feature/dataviz'
 import { FeatureAuthModule } from '@geonetwork-ui/feature/auth'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { provideGn4 } from '@geonetwork-ui/api/repository'
@@ -89,7 +88,6 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
         useClass: EmbeddedTranslateLoader,
       },
     }),
-    FeatureDatavizModule,
     FeatureAuthModule,
     BrowserAnimationsModule,
     MapStateContainerComponent,

libs/feature/dataviz/src/index.ts

@@ -1,4 +1,3 @@
-export * from './lib/feature-dataviz.module'
 export * from './lib/service/data.service'
 export * from './lib/chart-view/chart-view.component'
 export * from './lib/figure/figure-container/figure-container.component'

libs/feature/dataviz/src/lib/chart-view/chart-view.component.spec.ts

@@ -6,43 +6,16 @@ import {
   tick,
 } from '@angular/core/testing'
 import { ChartViewComponent } from './chart-view.component'
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  NO_ERRORS_SCHEMA,
-  Output,
-} from '@angular/core'
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core'
 import { TranslateModule } from '@ngx-translate/core'
 import { DataService } from '../service/data.service'
 import { firstValueFrom, of, throwError } from 'rxjs'
 import { By } from '@angular/platform-browser'
 import { aSetOfLinksFixture } from '@geonetwork-ui/common/fixtures'
 import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs'
 import { FetchError } from '@geonetwork-ui/data-fetcher'
-
-@Component({
-  selector: 'gn-ui-chart',
-  template: '<div></div>',
-})
-export class MockChartComponent {
-  @Input() data: object[]
-  @Input() labelProperty: string
-  @Input() valueProperty: string
-  @Input() secondaryValueProperty: string
-  @Input() type: string
-}
-
-@Component({
-  selector: 'gn-ui-dropdown-selector',
-  template: '<div></div>',
-})
-export class MockDropdownSelectorComponent {
-  @Input() selected: any
-  @Input() choices: unknown[]
-  @Output() selectValue = new EventEmitter<any>()
-}
+import { MockBuilder } from 'ng-mocks'
+import { ChartComponent } from '@geonetwork-ui/ui/dataviz'
 
 const SAMPLE_DATA_ITEMS = [
   { type: 'Feature', properties: { id: 1 } },
@@ -109,15 +82,12 @@ describe('ChartViewComponent', () => {
   let component: ChartViewComponent
   let fixture: ComponentFixture<ChartViewComponent>
   let dataService: DataService
-  let chartComponent: MockChartComponent
+  let chartComponent: ChartComponent
+
+  beforeEach(() => MockBuilder(ChartViewComponent))
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        ChartViewComponent,
-        MockDropdownSelectorComponent,
-        MockChartComponent,
-      ],
       imports: [TranslateModule.forRoot()],
       providers: [
         {
@@ -143,7 +113,7 @@ describe('ChartViewComponent', () => {
     component.link = aSetOfLinksFixture().dataCsv()
     flushMicrotasks()
     chartComponent = fixture.debugElement.query(
-      By.directive(MockChartComponent)
+      By.directive(ChartComponent)
     ).componentInstance
     fixture.detectChanges()
   }))

libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts

@@ -12,7 +12,10 @@ import {
   FieldAggregation,
   getJsonDataItemsProxy,
 } from '@geonetwork-ui/data-fetcher'
-import { DropdownChoice } from '@geonetwork-ui/ui/inputs'
+import {
+  DropdownChoice,
+  DropdownSelectorComponent,
+} from '@geonetwork-ui/ui/inputs'
 import { BehaviorSubject, combineLatest, EMPTY, Observable } from 'rxjs'
 import {
   catchError,
@@ -26,7 +29,13 @@ import {
 import { DataService } from '../service/data.service'
 import { InputChartType } from '@geonetwork-ui/common/domain/model/dataviz/dataviz-configuration.model'
 import { DatasetOnlineResource } from '@geonetwork-ui/common/domain/model/record'
-import { TranslateService } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+import { ChartComponent } from '@geonetwork-ui/ui/dataviz'
+import {
+  LoadingMaskComponent,
+  PopupAlertComponent,
+} from '@geonetwork-ui/ui/widgets'
 
 marker('chart.type.bar')
 marker('chart.type.barHorizontal')
@@ -45,6 +54,15 @@ marker('chart.aggregation.count')
   templateUrl: './chart-view.component.html',
   styleUrls: ['./chart-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    DropdownSelectorComponent,
+    TranslateModule,
+    ChartComponent,
+    LoadingMaskComponent,
+    PopupAlertComponent,
+  ],
+  standalone: true,
 })
 export class ChartViewComponent {
   @Input() set link(value: DatasetOnlineResource) {

libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.spec.ts

@@ -1,25 +1,17 @@
-import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import {
   someFigureItemFixture,
   someHabFigureItemFixture,
 } from '../figure.fixtures'
 import { FigureContainerComponent } from './figure-container.component'
+import { MockBuilder } from 'ng-mocks'
+import { FigureService } from '../figure.service'
 
 describe('FigureContainerComponent', () => {
   let component: FigureContainerComponent
   let fixture: ComponentFixture<FigureContainerComponent>
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FigureContainerComponent],
-      schemas: [NO_ERRORS_SCHEMA],
-    })
-      .overrideComponent(FigureContainerComponent, {
-        set: { changeDetection: ChangeDetectionStrategy.Default },
-      })
-      .compileComponents()
-  })
+  beforeEach(() => MockBuilder(FigureContainerComponent).keep(FigureService))
 
   beforeEach(() => {
     fixture = TestBed.createComponent(FigureContainerComponent)
@@ -34,22 +26,22 @@ describe('FigureContainerComponent', () => {
     beforeEach(() => {
       component.dataset = someFigureItemFixture()
       component.expression = 'average|age'
-      component.ngOnChanges(null)
+      component.ngOnChanges()
     })
     it('computes the average', () => {
       expect(component.figure).toEqual('26.67')
     })
     it('with correct digits', () => {
       component.digits = 3
-      component.ngOnChanges(null)
+      component.ngOnChanges()
       expect(component.figure).toEqual('26.667')
     })
   })
   describe('when sum', () => {
     beforeEach(() => {
       component.dataset = someHabFigureItemFixture()
       component.expression = 'sum|pop'
-      component.ngOnChanges(null)
+      component.ngOnChanges()
     })
     it('computes the sum', () => {
       expect(component.figure).toEqual('159176260999')
@@ -59,7 +51,7 @@ describe('FigureContainerComponent', () => {
     beforeEach(() => {
       component.dataset = someHabFigureItemFixture()
       component.expression = 'sumfds--fdfdspop'
-      component.ngOnChanges(null)
+      component.ngOnChanges()
     })
     it('returns Nan', () => {
       expect(component.figure).toEqual('NaN')

libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.ts

@@ -4,14 +4,16 @@ import {
   Input,
   OnChanges,
 } from '@angular/core'
-import { TableItemModel } from '@geonetwork-ui/ui/dataviz'
+import { TableItemModel, UiDatavizModule } from '@geonetwork-ui/ui/dataviz'
 import { FigureService } from '../figure.service'
 
 @Component({
   selector: 'gn-ui-figure-container',
   templateUrl: './figure-container.component.html',
   styleUrls: ['./figure-container.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [UiDatavizModule],
 })
 export class FigureContainerComponent implements OnChanges {
   @Input() dataset: TableItemModel[]

libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.spec.ts

@@ -1,56 +1,14 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Input,
-  NO_ERRORS_SCHEMA,
-  Output,
-} from '@angular/core'
+import { ChangeDetectorRef } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { pointFeatureCollectionFixture } from '@geonetwork-ui/common/fixtures'
 import { GeoTableViewComponent } from './geo-table-view.component'
-import { MapContext } from '@geospatial-sdk/core'
-import { Subject } from 'rxjs'
-import type { FeatureCollection } from 'geojson'
-
-@Component({
-  selector: 'gn-ui-map-container',
-  template: '<div></div>',
-})
-export class MockMapContainerComponent {
-  @Input() context: MapContext
-  @Output() featuresClick = new Subject()
-  openlayersMap = Promise.resolve({})
-}
-
-@Component({
-  selector: 'gn-ui-table',
-  template: '<div></div>',
-})
-export class MockTableComponent {
-  @Input() data: FeatureCollection
-  @Input() activeId: string
-  scrollToItem = jest.fn()
-}
+import { MockBuilder } from 'ng-mocks'
 
 describe('GeoTableViewComponent', () => {
   let component: GeoTableViewComponent
   let fixture: ComponentFixture<GeoTableViewComponent>
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        GeoTableViewComponent,
-        MockMapContainerComponent,
-        MockTableComponent,
-      ],
-      schemas: [NO_ERRORS_SCHEMA],
-    })
-      .overrideComponent(GeoTableViewComponent, {
-        set: { changeDetection: ChangeDetectionStrategy.Default },
-      })
-      .compileComponents()
-  })
+  beforeEach(() => MockBuilder(GeoTableViewComponent))
 
   beforeEach(() => {
     fixture = TestBed.createComponent(GeoTableViewComponent)

libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts

@@ -15,13 +15,18 @@ import {
 import type { Feature, FeatureCollection } from 'geojson'
 import { Subscription } from 'rxjs'
 import { MapContext } from '@geospatial-sdk/core'
-import { MapContainerComponent } from '@geonetwork-ui/ui/map'
+import {
+  FeatureDetailComponent,
+  MapContainerComponent,
+} from '@geonetwork-ui/ui/map'
 
 @Component({
   selector: 'gn-ui-geo-table-view',
   templateUrl: './geo-table-view.component.html',
   styleUrls: ['./geo-table-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TableComponent, MapContainerComponent, FeatureDetailComponent],
+  standalone: true,
 })
 export class GeoTableViewComponent implements OnInit, OnDestroy {
   @Input() data: FeatureCollection = { type: 'FeatureCollection', features: [] }