IM-258 added a datasetRegistry and refactored setStyle

demo/js/index.js

@@ -346,14 +346,16 @@ interactiveMap.on('datasets:ready', function () {
 	// setTimeout(() => datasetsPlugin.setFeatureVisibility(false, [55], { datasetId: 'land-covers', idProperty: null }), 2000)
 	// setTimeout(() => datasetsPlugin.setFeatureVisibility(true, [55], { datasetId: 'land-covers', idProperty: null }), 4000)
 
-	setTimeout(() => datasetsPlugin.setStyle(
-		{ 
-			stroke: { outdoor: '#ff0000', dark: '#ffffff' }, 
-			fillPattern: 'horizontal-hatch', 
-			fillPatternForegroundColor:  { outdoor: '#ff0000', dark: '#ffffff' },
-			fillPatternBackgroundColor: 'transparent'
-		}, 
-		{ datasetId: 'land-covers', sublayerId: '130-131' }), 2000)
+	// setTimeout(() => datasetsPlugin.setStyle(
+	// 	{
+	// 		stroke: { outdoor: '#ff0000', dark: '#ffffff' },
+	// 		fillPattern: 'horizontal-hatch',
+	// 		fillPatternForegroundColor:  { outdoor: '#ff0000', dark: '#ffffff' },
+	// 		fillPatternBackgroundColor: 'transparent'
+	// 	},
+	// 	{ datasetId: 'land-covers', sublayerId: '130-131' }), 2000)
+	// setTimeout(() => datasetsPlugin.setDatasetVisibility(false), 1000)
+	// setTimeout(() => datasetsPlugin.setDatasetVisibility(true), 5000)
 	// setTimeout(() => datasetsPlugin.setDatasetVisibility(true, { datasetId: 'hedge-control' }), 500)
 	// setTimeout(() => datasetsPlugin.setStyle({ stroke: { outdoor: '#ffff00' }, }, { datasetId: 'hedge-control' }), 1000)
 })

plugins/beta/datasets/src/DatasetsInit.jsx

@@ -2,6 +2,23 @@
 import { useEffect, useRef } from 'react'
 import { EVENTS } from '../../../../src/config/events.js'
 import { createDatasets } from './datasets.js'
+import { datasetRegistry } from './registry/datasetRegistry.js'
+
+const useLayerAdapterActions = (methodName, dispatch, pluginState, dependencies) =>
+  useEffect(() => {
+    const methodParameters = pluginState.layerAdapterActions?.[methodName] || []
+    const method = pluginState.layerAdapter?.[methodName]
+    console.log('useEffect:', ...methodParameters.map((params) => `${params[0]},`))
+    if (method && methodParameters.length) {
+      methodParameters.forEach((parameters) => {
+        console.log(`calling ${methodName} with ${parameters[0]}`)
+        method.bind(pluginState.layerAdapter)(...parameters)
+      })
+      if (methodParameters.length) {
+        dispatch({ type: 'SET_LAYER_ADAPTER_ACTIONS', payload: { [methodName]: [] } })
+      }
+    }
+  }, [...dependencies])
 
 export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, mapProvider, services }) {
   const { dispatch } = pluginState
@@ -49,6 +66,9 @@ export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, m
         dispatch,
         eventBus
       })
+      if (LayerAdapter.createDataset) {
+        datasetRegistry.attachCreateDataset(LayerAdapter.createDataset)
+      }
     }
 
     initDatasets()
@@ -58,6 +78,11 @@ export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, m
     dispatch({ type: 'BUILD_KEY_GROUPS', payload: null })
   }, [pluginState.datasets])
 
+  const datasetsRef = useRef(pluginState.mappedDatasets)
+  datasetsRef.current = pluginState.mappedDatasets
+  useEffect(() => datasetRegistry.attach(datasetsRef.current), [pluginState.mappedDatasets])
+  useLayerAdapterActions('setStyle', dispatch, pluginState, [pluginState.layerAdapterActions.setStyle])
+
   // Cleanup only on unmount
   useEffect(() => {
     return () => {

plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.js

@@ -0,0 +1,128 @@
+import { Dataset } from '../../../registry/dataset.js'
+import { MAX_TILE_ZOOM, hashString } from '../layerIds.js'
+import { anchorToMaplibre } from '../symbolImages.js'
+
+export class MapLibreDataset extends Dataset {
+  get isDynamicSource () {
+    return typeof this.geojson === 'string' && !!this.idProperty && typeof this.transformRequest === 'function'
+  }
+
+  get fillLayerId () {
+    if (this.hasSublayers) {
+      return null
+    }
+    if (this.hasSymbol) {
+      return null
+    }
+    if (this.hasFill) {
+      return this.id
+    }
+    return null
+  }
+
+  get strokeLayerId () {
+    if (this.hasSublayers) {
+      return null
+    }
+    if (this.hasSymbol) {
+      return null
+    }
+    if (this.hasStroke) {
+      return this.hasFill ? `${this.id}-stroke` : this.id
+    }
+    return null
+  }
+
+  get symbolLayerId () {
+    if (this.hasSublayers) {
+      return null
+    }
+    if (this.hasSymbol) {
+      return this.id
+    }
+    return null
+  }
+
+  get layerIds () {
+    if (this.hasSublayers) {
+      return this.sublayers.flatMap(sublayer => sublayer.layerIds).filter(Boolean)
+    }
+    return [this.symbolLayerId, this.fillLayerId, this.strokeLayerId].filter(Boolean)
+  }
+
+  get sourceId () {
+    if (this.isSublayer) { return this.parent.sourceId }
+    if (this.tiles) {
+      const tilesKey = Array.isArray(this.tiles) ? this.tiles.join(',') : this.tiles
+      return `tiles-${hashString(tilesKey)}`
+    }
+    if (this.geojson) {
+      if (this.isDynamicSource) { return `geojson-dynamic-${this.id}` }
+      if (typeof this.geojson === 'string') { return `geojson-${hashString(this.geojson)}` }
+      return `geojson-${this.id}`
+    }
+    return `source-${this.id}`
+  }
+
+  get source () {
+    if (this.tiles) {
+      return {
+        type: 'vector',
+        tiles: this.tiles,
+        minzoom: this.minZoom || 0,
+        maxzoom: this.maxZoom || MAX_TILE_ZOOM
+      }
+    }
+    if (this.geojson) {
+      const data = this.isDynamicSource ? { type: 'FeatureCollection', features: [] } : this.geojson
+      return { type: 'geojson', data, generateId: true }
+    }
+    return null
+  }
+
+  getSymbolSource (imageId, anchor, symbolDef) {
+    return {
+      id: this.symbolLayerId,
+      type: 'symbol',
+      source: this.sourceId,
+      'source-layer': this.sourceLayer,
+      minzoom: this.minZoom,
+      maxzoom: this.maxZoom,
+      layout: {
+        visibility: this.visibility === 'hidden' ? 'none' : 'visible',
+        'icon-image': imageId,
+        'icon-anchor': anchorToMaplibre(anchor || symbolDef?.anchor || [0.5, 0.5]),
+        'icon-allow-overlap': true
+      },
+      ...(this.filter ? { filter: this.filter } : {})
+    }
+  }
+
+  getFillSource (paint) {
+    return {
+      id: this.fillLayerId,
+      type: 'fill',
+      source: this.sourceId,
+      'source-layer': this.sourceLayer,
+      minzoom: this.minZoom,
+      maxzoom: this.maxZoom,
+      layout: { visibility: this.visibility === 'hidden' ? 'none' : 'visible' },
+      paint,
+      ...(this.filter ? { filter: this.filter } : {})
+    }
+  }
+
+  getStrokeSource (paint) {
+    return {
+      id: this.strokeLayerId,
+      type: 'line',
+      source: this.sourceId,
+      'source-layer': this.sourceLayer,
+      minzoom: this.minZoom,
+      maxzoom: this.maxZoom,
+      layout: { visibility: this.visibility === 'hidden' ? 'none' : 'visible' },
+      paint,
+      ...(this.filter ? { filter: this.filter } : {})
+    }
+  }
+}

plugins/beta/datasets/src/adapters/maplibre/datasets/mapLibreDataset.test.js

@@ -0,0 +1,80 @@
+import { MapLibreDataset } from './mapLibreDataset.js'
+import { datasetRegistry } from '../../../registry/datasetRegistry.js'
+import { datasets } from '../../../reducers/__data__/demoDatasets.js'
+import { mappedDatasetsReducer } from '../../../reducers/mappedDatasetsReducer.js'
+
+describe('MapLibreDataset', () => {
+  beforeAll(() => {
+    const { mappedDatasets } = mappedDatasetsReducer({ datasets })
+    datasetRegistry.attach({
+      ...mappedDatasets,
+      'ds-fill-only': { id: 'ds-fill-only', style: { fill: 'blue' } },
+      'ds-pattern-only': { id: 'ds-pattern-only', style: { fillPattern: 'dots' } },
+      'ds-transparent-fill': { id: 'ds-transparent-fill', style: { fill: 'transparent' } },
+      'ds-no-style': { id: 'ds-no-style', style: {} }
+    })
+    datasetRegistry.attachCreateDataset(def => new MapLibreDataset(def))
+  })
+
+  describe('layerIds', () => {
+    it('returns [id] when dataset has a symbol (historic-monuments-prehistoric inherits symbol from parent)', () => {
+      const dataset = datasetRegistry.getDataset('historic-monuments-prehistoric')
+      expect(dataset.layerIds).toEqual(['historic-monuments-prehistoric'])
+    })
+
+    it('returns [id, id-stroke] when dataset has both fill and stroke (existing-fields)', () => {
+      const dataset = datasetRegistry.getDataset('existing-fields')
+      expect(dataset.layerIds).toEqual(['existing-fields', 'existing-fields-stroke'])
+    })
+
+    it('returns [id] when dataset has only fill', () => {
+      const dataset = datasetRegistry.getDataset('ds-fill-only')
+      expect(dataset.layerIds).toEqual(['ds-fill-only'])
+    })
+
+    it('returns [id] when dataset has only stroke (hedge-control)', () => {
+      const dataset = datasetRegistry.getDataset('hedge-control')
+      expect(dataset.layerIds).toEqual(['hedge-control'])
+    })
+
+    it('returns [id] when dataset has a fillPattern but no stroke', () => {
+      const dataset = datasetRegistry.getDataset('ds-pattern-only')
+      expect(dataset.layerIds).toEqual(['ds-pattern-only'])
+    })
+
+    it('returns [id, id-stroke] when dataset has fillPattern and stroke (land-covers-130-131)', () => {
+      const dataset = datasetRegistry.getDataset('land-covers-130-131')
+      expect(dataset.layerIds).toEqual(['land-covers-130-131', 'land-covers-130-131-stroke'])
+    })
+
+    it('returns null when fill is transparent and there is no stroke, symbol, or pattern', () => {
+      const dataset = datasetRegistry.getDataset('ds-transparent-fill')
+      expect(dataset.layerIds).toEqual([])
+    })
+
+    it('returns null when dataset has no fill, stroke, symbol, or pattern', () => {
+      const dataset = datasetRegistry.getDataset('ds-no-style')
+      expect(dataset.layerIds).toEqual([])
+    })
+
+    it('returns the combined layerIds from all sublayers (historic-monuments)', () => {
+      const dataset = datasetRegistry.getDataset('historic-monuments')
+      expect(dataset.layerIds).toEqual([
+        'historic-monuments-prehistoric',
+        'historic-monuments-roman',
+        'historic-monuments-medieval'
+      ])
+    })
+
+    it('returns the combined layerIds from all sublayers (land-covers)', () => {
+      const dataset = datasetRegistry.getDataset('land-covers')
+      expect(dataset.layerIds).toEqual([
+        'land-covers-130-131', 'land-covers-130-131-stroke',
+        'land-covers-332', 'land-covers-332-stroke',
+        'land-covers-110', 'land-covers-110-stroke',
+        'land-covers-379', 'land-covers-379-stroke',
+        'land-covers-other', 'land-covers-other-stroke'
+      ])
+    })
+  })
+})