Merge pull request #1085 from geonetwork/wfs-dataset-limit

Datahub: Allow to set a feature limit for WFS

.prettierignore

@@ -1,6 +1,7 @@
 # Add files here to ignore them from prettier formatting
 
 /dist
+/package/dist
 /coverage
 /docs/.vitepress/cache
 /docs/.vitepress/dist

apps/datahub/src/app/app.module.ts

@@ -102,6 +102,7 @@ import {
   matStarOutline,
 } from '@ng-icons/material-icons/outline'
 import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
+import { MAX_FEATURE_COUNT } from './record/record-data-preview/record-data-preview.component'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 
@@ -256,6 +257,10 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
         maxZoom: getOptionalMapConfig()?.MAX_ZOOM,
       }),
     },
+    {
+      provide: MAX_FEATURE_COUNT,
+      useFactory: () => getOptionalMapConfig()?.MAX_FEATURE_COUNT,
+    },
     {
       provide: EXTERNAL_VIEWER_URL_TEMPLATE,
       useFactory: () => getOptionalMapConfig()?.EXTERNAL_VIEWER_URL_TEMPLATE,

apps/datahub/src/app/record/record-data-preview/record-data-preview.component.css

@@ -0,0 +1,39 @@
+/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+::ng-deep .mat-mdc-tab-labels {
+  /* move tabs on the right to let the title show */
+  margin-left: 140px;
+}
+::ng-deep .mat-mdc-tab.mdc-tab {
+  letter-spacing: 0.88px;
+}
+::ng-deep .mat-mdc-tab.mdc-tab:hover .tab-header-label {
+  color: var(--color-primary-darkest);
+}
+::ng-deep .mat-mdc-tab.mdc-tab.mdc-tab--active .tab-header-label {
+  opacity: 100%;
+  font-weight: bold;
+}
+::ng-deep .mdc-tab-indicator--active .mdc-tab-indicator__content {
+  border: none !important;
+}
+::ng-deep .mdc-tab__ripple::before {
+  background-color: transparent !important;
+}
+@media only screen and (max-width: 639px) {
+  /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
+  ::ng-deep .mat-mdc-tab-labels {
+    margin-left: 0px;
+  }
+  ::ng-deep .mat-mdc-tab.mdc-tab {
+    padding: 0px !important;
+    margin-right: 24px;
+    justify-content: left !important;
+  }
+  /*hide chart tab on mobile*/
+  ::ng-deep .mat-mdc-tab.mdc-tab:nth-child(3) {
+    display: none;
+  }
+}
+.tab-header-label {
+  @apply uppercase text-sm text-primary opacity-75 hover:text-primary-darker;
+}

apps/datahub/src/app/record/record-data-preview/record-data-preview.component.html

@@ -0,0 +1,93 @@
+<div
+  style="height: 612px"
+  *ngIf="(displayMap$ | async) || (displayData$ | async)"
+  id="preview"
+>
+  <div
+    class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
+    style="height: 512px"
+  >
+    <div class="container-lg px-4 lg:mx-auto">
+      <div>
+        <div
+          class="text-[28px] text-title font-title transform sm:translate-y-10"
+          translate
+        >
+          record.metadata.preview
+        </div>
+        <mat-tab-group
+          (selectedIndexChange)="onTabIndexChange($event)"
+          [selectedIndex]="(displayMap$ | async) ? 0 : 1"
+          animationDuration="200ms"
+          mat-stretch-tabs="false"
+          mat-align-tabs="start"
+        >
+          <mat-tab [disabled]="(displayMap$ | async) === false">
+            <ng-template mat-tab-label>
+              <span class="tab-header-label" translate>record.tab.map</span>
+            </ng-template>
+            <div
+              class="block"
+              style="height: 500px"
+              *ngIf="displayMap$ | async"
+            >
+              <gn-ui-map-view
+                [excludeWfs]="exceedsMaxFeatureCount$ | async"
+              ></gn-ui-map-view>
+            </div>
+          </mat-tab>
+          <mat-tab [disabled]="(displayData$ | async) === false">
+            <ng-template mat-tab-label>
+              <span class="tab-header-label" translate>record.tab.data</span>
+            </ng-template>
+            <div class="block" *ngIf="displayData$ | async">
+              <ng-container
+                *ngIf="exceedsMaxFeatureCount$ | async; else tableView"
+              >
+                <gn-ui-popup-alert
+                  type="warning"
+                  icon="matErrorOutlineOutline"
+                  class="block h-12 p-1"
+                >
+                  <span translate [translateParams]="{ count: maxFeatureCount }"
+                    >record.feature.limit</span
+                  >
+                </gn-ui-popup-alert>
+              </ng-container>
+              <ng-template #tableView>
+                <gn-ui-data-view mode="table"></gn-ui-data-view>
+              </ng-template>
+            </div>
+          </mat-tab>
+          <mat-tab [disabled]="(displayData$ | async) === false">
+            <ng-template mat-tab-label>
+              <span class="tab-header-label" translate>record.tab.chart</span>
+            </ng-template>
+            <div class="block" *ngIf="displayData$ | async">
+              <ng-container
+                *ngIf="exceedsMaxFeatureCount$ | async; else chartView"
+              >
+                <gn-ui-popup-alert
+                  type="warning"
+                  icon="matErrorOutlineOutline"
+                  class="block h-12 p-1"
+                >
+                  <span translate [translateParams]="{ count: maxFeatureCount }"
+                    >record.feature.limit</span
+                  >
+                </gn-ui-popup-alert>
+              </ng-container>
+              <ng-template #chartView>
+                <gn-ui-data-view mode="chart"></gn-ui-data-view>
+              </ng-template>
+            </div>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+    </div>
+  </div>
+</div>
+<gn-ui-data-view-share
+  *ngIf="displayViewShare$ | async"
+  [viewType]="selectedView$ | async"
+></gn-ui-data-view-share>