-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1069 from geonetwork/map-legend
[Datahub] Added dynamic legend generation based on map context
- Loading branch information
Showing
11 changed files
with
306 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,5 @@ | ||
| export * from './lib/components/map-container/map-container.component' | ||
| export * from './lib/components/map-container/map-settings.token' | ||
| export * from './lib/components/feature-detail/feature-detail.component' | ||
| export * from './lib/components/map-legend/map-legend.component' | ||
| export * from './lib/map-utils' |
5 changes: 5 additions & 0 deletions
5
libs/ui/map/src/lib/components/map-legend/map-legend.component.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| .geosdk--legend-container { | ||
| overflow: auto; | ||
| white-space: normal; | ||
| word-wrap: break-word; | ||
| } |
1 change: 1 addition & 0 deletions
1
libs/ui/map/src/lib/components/map-legend/map-legend.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <div *ngIf="legendHTML" [innerHTML]="legendHTML.outerHTML"></div> |
150 changes: 150 additions & 0 deletions
150
libs/ui/map/src/lib/components/map-legend/map-legend.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing' | ||
| import { MapLegendComponent } from './map-legend.component' | ||
| import { MapContext } from '@geospatial-sdk/core' | ||
| import { createLegendFromLayer } from '@geospatial-sdk/legend' | ||
|
|
||
| jest.mock('@geospatial-sdk/legend', () => ({ | ||
| createLegendFromLayer: jest.fn(), | ||
| })) | ||
|
|
||
| describe('MapLegendComponent', () => { | ||
| let component: MapLegendComponent | ||
| let fixture: ComponentFixture<MapLegendComponent> | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [MapLegendComponent], | ||
| }).compileComponents() | ||
| }) | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(MapLegendComponent) | ||
| component = fixture.componentInstance | ||
| fixture.detectChanges() | ||
| }) | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy() | ||
| }) | ||
|
|
||
| describe('Change of map-context', () => { | ||
| it('should create legend on first change', async () => { | ||
| const mockContext: MapContext = { | ||
| layers: [ | ||
| { | ||
| id: 'test-layer', | ||
| }, | ||
| ], | ||
| } as MapContext | ||
|
|
||
| const mockLegendElement = document.createElement('div') | ||
| ;(createLegendFromLayer as jest.Mock).mockResolvedValue(mockLegendElement) | ||
|
|
||
| const legendStatusChangeSpy = jest.spyOn( | ||
| component.legendStatusChange, | ||
| 'emit' | ||
| ) | ||
|
|
||
| await component.ngOnChanges({ | ||
| context: { | ||
| currentValue: mockContext, | ||
| previousValue: null, | ||
| firstChange: true, | ||
| isFirstChange: () => true, | ||
| }, | ||
| }) | ||
|
|
||
| expect(createLegendFromLayer).toHaveBeenCalledWith(mockContext.layers[0]) | ||
| expect(component.legendHTML).toBe(mockLegendElement) | ||
| expect(legendStatusChangeSpy).toHaveBeenCalledWith(true) | ||
| }) | ||
|
|
||
| it('should create legend and emit status on subsequent context changes', async () => { | ||
| const mockContext: MapContext = { | ||
| layers: [ | ||
| { | ||
| id: 'test-layer', | ||
| }, | ||
| ], | ||
| } as MapContext | ||
|
|
||
| const mockLegendElement = document.createElement('div') | ||
| ;(createLegendFromLayer as jest.Mock).mockResolvedValue(mockLegendElement) | ||
|
|
||
| const legendStatusChangeSpy = jest.spyOn( | ||
| component.legendStatusChange, | ||
| 'emit' | ||
| ) | ||
|
|
||
| await component.ngOnChanges({ | ||
| context: { | ||
| currentValue: mockContext, | ||
| previousValue: {}, | ||
| firstChange: false, | ||
| isFirstChange: () => false, | ||
| }, | ||
| }) | ||
|
|
||
| expect(createLegendFromLayer).toHaveBeenCalledWith(mockContext.layers[0]) | ||
| expect(component.legendHTML).toBe(mockLegendElement) | ||
| expect(legendStatusChangeSpy).toHaveBeenCalledWith(true) | ||
| }) | ||
|
|
||
| it('should emit nothing when no legend is created', async () => { | ||
| const mockContext: MapContext = { | ||
| layers: [ | ||
| { | ||
| id: 'test-layer', | ||
| }, | ||
| ], | ||
| } as MapContext | ||
|
|
||
| ;(createLegendFromLayer as jest.Mock).mockResolvedValue(false) | ||
|
|
||
| const legendStatusChangeSpy = jest.spyOn( | ||
| component.legendStatusChange, | ||
| 'emit' | ||
| ) | ||
|
|
||
| await component.ngOnChanges({ | ||
| context: { | ||
| currentValue: mockContext, | ||
| previousValue: {}, | ||
| firstChange: false, | ||
| isFirstChange: () => false, | ||
| }, | ||
| }) | ||
|
|
||
| expect(createLegendFromLayer).toHaveBeenCalledWith(mockContext.layers[0]) | ||
| expect(component.legendHTML).toBe(false) | ||
| expect(legendStatusChangeSpy).not.toHaveBeenCalled() | ||
| }) | ||
|
|
||
| it('should handle multiple layers', async () => { | ||
| const mockContext: MapContext = { | ||
| layers: [{ id: 'layer-1' }, { id: 'layer-2' }], | ||
| } as MapContext | ||
|
|
||
| const mockLegendElement = document.createElement('div') | ||
| ;(createLegendFromLayer as jest.Mock).mockResolvedValue(mockLegendElement) | ||
|
|
||
| const legendStatusChangeSpy = jest.spyOn( | ||
| component.legendStatusChange, | ||
| 'emit' | ||
| ) | ||
|
|
||
| await component.ngOnChanges({ | ||
| context: { | ||
| currentValue: mockContext, | ||
| previousValue: {}, | ||
| firstChange: false, | ||
| isFirstChange: () => false, | ||
| }, | ||
| }) | ||
|
|
||
| expect(createLegendFromLayer).toHaveBeenCalledWith(mockContext.layers[0]) | ||
| expect(component.legendHTML).toBe(mockLegendElement) | ||
| expect(legendStatusChangeSpy).toHaveBeenCalledWith(true) | ||
| }) | ||
| }) | ||
| }) |
39 changes: 39 additions & 0 deletions
39
libs/ui/map/src/lib/components/map-legend/map-legend.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { | ||
| Component, | ||
| EventEmitter, | ||
| Input, | ||
| OnChanges, | ||
| Output, | ||
| SimpleChanges, | ||
| ViewEncapsulation, | ||
| } from '@angular/core' | ||
| import { MapContext } from '@geospatial-sdk/core' | ||
| import { createLegendFromLayer } from '@geospatial-sdk/legend' | ||
| import { NgIf } from '@angular/common' | ||
|
|
||
| @Component({ | ||
| selector: 'gn-ui-map-legend', | ||
| templateUrl: './map-legend.component.html', | ||
| standalone: true, | ||
| styleUrls: ['./map-legend.component.css'], | ||
| encapsulation: ViewEncapsulation.None, | ||
| imports: [NgIf], | ||
| }) | ||
| export class MapLegendComponent implements OnChanges { | ||
| @Input() context: MapContext | null | ||
| @Output() legendStatusChange = new EventEmitter<boolean>() | ||
| legendHTML: HTMLElement | false | ||
|
|
||
| async ngOnChanges(changes: SimpleChanges) { | ||
| if ('context' in changes) { | ||
| const mapContext = changes['context'].currentValue | ||
| if (mapContext.layers && mapContext.layers.length > 0) { | ||
| const mapContextLayer = mapContext.layers[0] | ||
| this.legendHTML = await createLegendFromLayer(mapContextLayer) | ||
| if (this.legendHTML) { | ||
| this.legendStatusChange.emit(true) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.