chore: fixes post review

The gn-mapviewer web component should work now layers should appear with their label in the layers panel Add missing styles in web components Fix a failing e2e test
geonetwork · Sep 18, 2024 · d011705 · d011705
1 parent 66308c0
commit d011705
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 9 deletions.
diff --git a/apps/metadata-editor-e2e/src/e2e/edit.cy.ts b/apps/metadata-editor-e2e/src/e2e/edit.cy.ts
@@ -346,7 +346,7 @@ describe('editor form', () => {
     describe('geographical coverage', () => {
       it('should show a map', () => {
         cy.get('gn-ui-form-field-spatial-extent')
-          .find('gn-ui-map')
+          .find('gn-ui-map-container')
           .should('be.visible')
       })
       describe('spatial extents', () => {

diff --git a/apps/webcomponents/project.json b/apps/webcomponents/project.json
@@ -15,7 +15,12 @@
         "polyfills": "apps/webcomponents/src/polyfills.ts",
         "tsConfig": "apps/webcomponents/tsconfig.app.json",
         "assets": [],
-        "styles": [],
+        "styles": [
+          "tailwind.base.css",
+          "apps/webcomponents/src/styles.css",
+          "node_modules/tippy.js/dist/tippy.css",
+          "node_modules/ol/ol.css"
+        ],
         "scripts": [],
         "allowedCommonJsDependencies": [
           "duration-relativetimeformat",

diff --git a/apps/webcomponents/src/app/components/gn-map-viewer/gn-map-viewer.component.html b/apps/webcomponents/src/app/components/gn-map-viewer/gn-map-viewer.component.html
@@ -1,5 +1,5 @@
 <div class="h-full w-full relative">
-  <gn-ui-map-container></gn-ui-map-container>
+  <gn-ui-map-state-container></gn-ui-map-state-container>
   <gn-ui-layers-panel
     class="absolute"
     style="top: 20px; left: 20px; bottom: 20px"

diff --git a/apps/webcomponents/src/app/webcomponents.module.ts b/apps/webcomponents/src/app/webcomponents.module.ts
@@ -28,7 +28,11 @@ import { GnResultsListComponent } from './components/gn-results-list/gn-results-
 import { GnSearchInputComponent } from './components/gn-search-input/gn-search-input.component'
 import { GnDatasetViewTableComponent } from './components/gn-dataset-view-table/gn-dataset-view-table.component'
 import { GnMapViewerComponent } from './components/gn-map-viewer/gn-map-viewer.component'
-import { FeatureMapModule } from '@geonetwork-ui/feature/map'
+import {
+  FeatureMapModule,
+  LayersPanelComponent,
+  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'
@@ -90,6 +94,8 @@ const CUSTOM_ELEMENTS: [new (...args) => BaseComponent, string][] = [
     FeatureDatavizModule,
     FeatureAuthModule,
     BrowserAnimationsModule,
+    MapStateContainerComponent,
+    LayersPanelComponent,
   ],
   providers: [
     provideGn4(),

diff --git a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.spec.ts b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.spec.ts
@@ -119,6 +119,7 @@ describe('GeoTableViewComponent', () => {
           coordinates: [2.335333, 51.070817],
           type: 'Point',
         },
+        maxZoom: 13,
       })
     })
   })

diff --git a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.stories.ts b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.stories.ts
@@ -12,17 +12,23 @@ import {
   FeatureDetailComponent,
   MapContainerComponent,
 } from '@geonetwork-ui/ui/map'
-import { polygonFeatureCollectionFixture } from '@geonetwork-ui/common/fixtures'
+import { pointFeatureCollectionFixture } from '@geonetwork-ui/common/fixtures'
 import { TableComponent } from '@geonetwork-ui/ui/dataviz'
 import { HttpClientModule } from '@angular/common/http'
 import { TRANSLATE_DEFAULT_CONFIG } from '@geonetwork-ui/util/i18n'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 
 export default {
   title: 'Map/GeoTable',
   component: GeoTableViewComponent,
   decorators: [
     moduleMetadata({
-      imports: [FeatureDetailComponent, MapContainerComponent, TableComponent],
+      imports: [
+        FeatureDetailComponent,
+        MapContainerComponent,
+        TableComponent,
+        BrowserAnimationsModule,
+      ],
     }),
     applicationConfig({
       providers: [
@@ -38,6 +44,6 @@ export default {
 
 export const Primary: StoryObj<GeoTableViewComponent> = {
   args: {
-    data: polygonFeatureCollectionFixture(),
+    data: pointFeatureCollectionFixture(),
   },
 }
diff --git a/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts b/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts
@@ -96,6 +96,7 @@ export class GeoTableViewComponent implements OnInit, OnDestroy {
       ...this.mapContext,
       view: {
         geometry: feature.geometry,
+        maxZoom: 13,
       },
     }
     // FIXME: animate the view

diff --git a/libs/feature/map/src/lib/layers-panel/layers-panel.component.html b/libs/feature/map/src/lib/layers-panel/layers-panel.component.html
@@ -13,11 +13,11 @@
       <mat-icon class="material-symbols-outlined -ml-2 mr-2 shrink-0"
         >chevron_right</mat-icon
       >
-      <span class="mr-2 grow">{{ layer.title }}</span>
+      <span class="mr-2 grow">{{ layer.label }}</span>
       <a
         href
         class="underline text-sm text-red-700 hover:text-red-900"
-        (click)="deleteLayer(index)"
+        (click)="deleteLayer(index); $event.preventDefault()"
       >
         delete
       </a>
-Original file line number
+Diff line change
@@ Expand Up / @@ -119,6 +119,7 @@ describe('GeoTableViewComponent', () => { @@
               coordinates: [2.335333, 51.070817],
               type: 'Point',
             },
+            maxZoom: 13,
           })
         })
       })
@@ Expand Down @@