feat(charts): add In view filter to chart list

src/app/modules/map/ol/lib/charts/chart-utils.spec.ts

@@ -1,5 +1,9 @@
 import { expect, describe, it } from 'vitest';
-import { extentFromBounds, resolveLayerMaxZoom } from './chart-utils';
+import {
+  extentFromBounds,
+  isChartInView,
+  resolveLayerMaxZoom
+} from './chart-utils';
 
 describe('resolveLayerMaxZoom', () => {
   it('returns chart max when over-zoom disabled', () => {
@@ -32,4 +36,48 @@ describe('extentFromBounds', () => {
   it('returns undefined for invalid bounds values', () => {
     expect(extentFromBounds([90, 90, 90, 300])).toBe(undefined);
   });
+
+  it('returns a transformed extent for valid mid-range bounds', () => {
+    const extent = extentFromBounds([-10, -10, 10, 10]);
+    expect(extent).toBeDefined();
+    expect(extent).toHaveLength(4);
+    expect(extent?.every((n) => Number.isFinite(n))).toBe(true);
+  });
+
+  it('rejects bounds that touch the +/-180 / +/-90 edges', () => {
+    expect(extentFromBounds([-180, 0, 10, 10])).toBe(undefined);
+    expect(extentFromBounds([-10, -90, 10, 10])).toBe(undefined);
+    expect(extentFromBounds([-10, -10, 180, 10])).toBe(undefined);
+    expect(extentFromBounds([-10, -10, 10, 90])).toBe(undefined);
+  });
+
+  it('accepts bounds just inside the edges', () => {
+    expect(extentFromBounds([-179.99, -89.99, 179.99, 89.99])).toBeDefined();
+  });
+});
+
+describe('isChartInView', () => {
+  const extent = [10, 40, 20, 50];
+
+  it('keeps a chart whose bounds overlap the extent', () => {
+    expect(isChartInView([15, 45, 30, 60], extent)).toBe(true);
+  });
+
+  it('keeps a chart fully contained within the extent', () => {
+    expect(isChartInView([12, 42, 18, 48], extent)).toBe(true);
+  });
+
+  it('drops a chart whose bounds are disjoint from the extent', () => {
+    expect(isChartInView([30, 45, 40, 60], extent)).toBe(false);
+  });
+
+  it('keeps a chart that only touches the extent edge', () => {
+    expect(isChartInView([20, 40, 30, 50], extent)).toBe(true);
+  });
+
+  it('keeps charts with missing or malformed bounds (treated as global)', () => {
+    expect(isChartInView(undefined, extent)).toBe(true);
+    expect(isChartInView([10, 40, 20], extent)).toBe(true);
+    expect(isChartInView([], extent)).toBe(true);
+  });
 });

src/app/modules/map/ol/lib/charts/chart-utils.ts

@@ -1,4 +1,4 @@
-import { Extent } from 'ol/extent';
+import { Extent, intersects } from 'ol/extent';
 import { transformExtent } from 'ol/proj';
 
 export function resolveLayerMaxZoom(
@@ -28,3 +28,31 @@ export function extentFromBounds(bounds?: number[]): Extent | undefined {
   }
   return transformExtent(bounds, 'EPSG:4326', 'EPSG:3857');
 }
+
+/**
+ * Determines whether a chart should remain visible when the chart list is
+ * filtered to the current map view.
+ *
+ * Charts without valid bounds metadata are treated as global (not tied to a
+ * region) and are always kept. Both `bounds` and `extent` are EPSG:4326
+ * [minLon, minLat, maxLon, maxLat], so they are compared directly without
+ * re-projection.
+ *
+ * Limitation: this is a plain min/max overlap test and does not account for a
+ * viewport that crosses the antimeridian (+/-180 longitude); near the dateline a
+ * chart may be wrongly included or excluded.
+ *
+ * Example:
+ *   bounds=[10, 40, 20, 50], extent=[15, 45, 30, 60] -> true  (overlap)
+ *   bounds=[10, 40, 20, 50], extent=[30, 45, 40, 60] -> false (disjoint)
+ *   bounds=undefined,        extent=[...]            -> true  (global chart)
+ */
+export function isChartInView(
+  bounds: number[] | undefined,
+  extent: Extent
+): boolean {
+  if (!Array.isArray(bounds) || bounds.length !== 4) {
+    return true;
+  }
+  return intersects(bounds, extent);
+}

src/app/modules/skresources/components/charts/chartlist.html

@@ -92,20 +92,29 @@
         matTooltip="Display Chart Boundaries"
         matTooltipPosition="above"
       >
-        Boundaries
+        Bounds
+      </mat-slide-toggle>
+      <mat-slide-toggle
+        style="margin-left: 12px"
+        [hideIcon]="true"
+        [checked]="inViewOnly"
+        (change)="toggleInViewOnly($event.checked)"
+        matTooltip="Show only charts visible in the current map view"
+        matTooltipPosition="above"
+      >
+        In view
       </mat-slide-toggle>
       <button
-        mat-button
+        mat-icon-button
         (click)="showChartLayers(true)"
         matTooltip="Re-order Charts"
         matTooltipPosition="above"
       >
         <mat-icon>import_export</mat-icon>
-        Re-order
       </button>
 
       <button
-        mat-button
+        mat-icon-button
         matTooltip="Add Chart"
         matTooltipPosition="above"
         [matMenuTriggerFor]="addchartmenu"

src/app/modules/skresources/components/charts/chartlist.ts

@@ -39,6 +39,7 @@ import {
 import { SKResourceGroupService } from '../groups/groups.service';
 import { SKChart } from '../../resource-classes';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isChartInView } from 'src/app/modules/map/ol/lib/charts/chart-utils';
 
 @Component({
   selector: 'chart-list',
@@ -69,6 +70,7 @@ export class ChartListComponent extends ResourceListBase {
   protected override filteredList = signal<FBCharts>([]);
 
   displayChartLayers = false;
+  protected inViewOnly = false;
 
   protected app = inject(AppFacade);
   private worker = inject(SKWorkerService);
@@ -91,6 +93,13 @@ export class ChartListComponent extends ResourceListBase {
         this.initItems(true);
       }
     });
+    // re-apply the filter as the map view changes while the in-view filter is on
+    effect(() => {
+      this.app.mapExtent();
+      if (this.inViewOnly) {
+        this.doFilter();
+      }
+    });
   }
 
   ngOnInit() {
@@ -283,6 +292,34 @@ export class ChartListComponent extends ResourceListBase {
     }
   }
 
+  /**
+   * @description Toggle filtering of the chart list to the current map view.
+   */
+  protected toggleInViewOnly(checked: boolean) {
+    this.inViewOnly = checked;
+    this.doFilter();
+  }
+
+  /**
+   * @description Filter and sort charts by name, additionally restricting the
+   * list to charts visible in the current map view when the in-view filter is on.
+   */
+  protected override doFilter() {
+    const text = this.filterText?.toLowerCase() ?? '';
+    const extent = this.app.mapExtent();
+    const useExtent =
+      this.inViewOnly && Array.isArray(extent) && extent.length === 4;
+    const fl = this.fullList.filter((item) => {
+      if (text && !item[1].name?.toLowerCase().includes(text)) {
+        return false;
+      }
+      return useExtent ? isChartInView(item[1].bounds, extent) : true;
+    });
+    fl.sort((a, b) => a[1].name.localeCompare(b[1].name));
+    this.filteredList.update(() => fl.slice(0));
+    this.alignSelections();
+  }
+
   /**
    * @description Add new chart source to resources
    * */