IM-291 Datasets Key.jsx uses datasetsRegistry

demo/js/farming.js

@@ -37,6 +37,7 @@ var datasetsPlugin = createDatasetsPlugin({
 		id: 'field-parcels',
 		label: 'Field parcels',
 		geojson: `${process.env.FARMING_API_URL}/api/collections/parcels/items?sbi=106325052`, // 106200212
+		idProperty: 'id',
 		transformRequest: transformDataRequest,
 		maxFeatures: 50000,
 		// filter: [

demo/js/index.js

@@ -125,6 +125,7 @@ const datasetsPlugin = createDatasetsPlugin({
 		showInKey: true,
 		showInMenu: true,
 		style: {
+			symbolDescription: 'Land cover',
 			fillPattern: 'horizontal-hatch',
 			fillPatternForegroundColor: { outdoor: '#00897B', dark: '#ffffff' },
 			fillPatternBackgroundColor: 'transparent'
@@ -190,7 +191,7 @@ const datasetsPlugin = createDatasetsPlugin({
 	{
 		id: 'existing-fields',
 		label: 'Existing fields',
-		// groupLabel: 'Test group',
+		groupLabel: 'Test group',
 		filter: ['all',['==', ['get', 'sbi'], '106223377'],['==', ['get', 'is_dominant_land_cover'], true]],
 		tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}'],
 		sourceLayer: 'field_parcels_filtered',
@@ -204,7 +205,8 @@ const datasetsPlugin = createDatasetsPlugin({
 			fill: 'rgba(21,101,192,0.1)',
 			symbolDescription: { outdoor: 'blue outline', dark: 'white outline' }
 		}
-	},{
+	},
+	{
 		id: 'historic-monuments',
 		label: 'Historic monuments',
 		geojson: pointData,
@@ -215,6 +217,7 @@ const datasetsPlugin = createDatasetsPlugin({
 		style: {
 			symbol: 'square',
 			symbolGraphic: 'M3 15H1V1h2v2h2V1h2v5h2V4h2v2h2V4h2v11H6V9H3v6z', // Historic monument
+			symbolAnchor: [0.1, 0.1],
 			// symbolBackgroundColor: { outdoor: '#ca3535', dark: '#ffffff' },
 			// symbolForegroundColor: { outdoor: '#ffffff', dark: '#0b0c0c' }
 		},
@@ -224,6 +227,7 @@ const datasetsPlugin = createDatasetsPlugin({
 			filter: ['in', ['get', 'category'], 'prehistoric'],
 			showInMenu: true,
 			style: {
+				symbolAnchor: [0.5, 0.5],
 				symbolBackgroundColor: '#00897B',
 			}
 		},{
@@ -232,6 +236,7 @@ const datasetsPlugin = createDatasetsPlugin({
 			filter: ['in', ['get', 'category'], 'roman'],
 			showInMenu: true,
 			style: {
+				// symbolAnchor: [0.1, 0.1],
 				symbolBackgroundColor: '#ca3535',
 			}
 		},{
@@ -240,13 +245,15 @@ const datasetsPlugin = createDatasetsPlugin({
 			filter: ['in', ['get', 'category'], 'medieval'],
 			showInMenu: true,
 			style: {
+				// symbolAnchor: [0.9, 0.9],
 				symbolBackgroundColor: '#1565C0',
 			}
 		}]
-	},{
+	},
+	{
 		id: 'hedge-control',
 		label: 'Hedge control',
-		// groupLabel: 'Test group',
+		groupLabel: 'Test group',
 		tiles: ['https://farming-tiles-702a60f45633.herokuapp.com/field_parcels_with_hedges/{z}/{x}/{y}'],
 		sourceLayer: 'hedge_control',
 		minZoom: 10,
@@ -261,7 +268,8 @@ const datasetsPlugin = createDatasetsPlugin({
 			symbolDescription: { outdoor: 'blue outline' },
 			keySymbolShape: 'line',
 		}
-	}]
+	}
+]
 })
 
 const interactiveMap = new InteractiveMap('map', {
@@ -346,18 +354,26 @@ 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' }), 1000)
+
+	// Hide all landcovers
+	setTimeout(() => datasetsPlugin.setDatasetVisibility(false, { datasetId: 'land-covers' }), 2000)
+	// Specifically hide landcovers-130-131
+	setTimeout(() => datasetsPlugin.setDatasetVisibility(false, { datasetId: 'land-covers', sublayerId: '130-131' }), 3000)
+	// Show landcovers - expect landcovers-130-131 to remain hidden
+	setTimeout(() => datasetsPlugin.setDatasetVisibility(true, { datasetId: 'land-covers' }), 4000)
+	// now reshow show landcovers-130-131
+	setTimeout(() => datasetsPlugin.setDatasetVisibility(true, { datasetId: 'land-covers', sublayerId: '130-131' }), 5000)
+
 	// 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)
+	// setTimeout(() => datasetsPlugin.setStyle({ stroke: { outdoor: '#ffff00' }, }, { datasetId: 'hedge-control' }), 2000)
 })
 
 // Ref to the selected features

plugins/beta/datasets/src/DatasetsInit.jsx

@@ -73,13 +73,13 @@ export function DatasetsInit ({ pluginConfig, pluginState, appState, mapState, m
     initDatasets()
   }, [isMapStyleReady, appState.mode])
 
-  useEffect(() => {
-    dispatch({ type: 'BUILD_KEY_GROUPS', payload: null })
-  }, [pluginState.datasets])
-
   const datasetsRef = useRef(pluginState.mappedDatasets)
+  const orderedDatasetsRef = useRef(pluginState.orderedDatasets)
   datasetsRef.current = pluginState.mappedDatasets
-  useEffect(() => datasetRegistry.attach(datasetsRef.current), [pluginState.mappedDatasets])
+  orderedDatasetsRef.current = pluginState.orderedDatasets
+  useEffect(() => {
+    datasetRegistry.attach(datasetsRef.current, pluginState.orderedDatasets)
+  }, [pluginState.mappedDatasets, pluginState.orderedDatasets])
   useLayerAdapterActions('setStyle', dispatch, pluginState, [pluginState.layerAdapterActions.setStyle])
   useLayerAdapterActions('setDatasetVisibility', dispatch, pluginState, [pluginState.layerAdapterActions.setDatasetVisibility])
 

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

@@ -89,7 +89,7 @@ export class MapLibreDataset extends Dataset {
       minzoom: this.minZoom,
       maxzoom: this.maxZoom,
       layout: {
-        visibility: this.visibility === 'hidden' ? 'none' : 'visible',
+        visibility: this.visibility,
         'icon-image': imageId,
         'icon-anchor': anchorToMaplibre(anchor || symbolDef?.anchor || [0.5, 0.5]),
         'icon-allow-overlap': true
@@ -106,7 +106,7 @@ export class MapLibreDataset extends Dataset {
       'source-layer': this.sourceLayer,
       minzoom: this.minZoom,
       maxzoom: this.maxZoom,
-      layout: { visibility: this.visibility === 'hidden' ? 'none' : 'visible' },
+      layout: { visibility: this.visibility },
       paint,
       ...(this.filter ? { filter: this.filter } : {})
     }
@@ -120,7 +120,7 @@ export class MapLibreDataset extends Dataset {
       'source-layer': this.sourceLayer,
       minzoom: this.minZoom,
       maxzoom: this.maxZoom,
-      layout: { visibility: this.visibility === 'hidden' ? 'none' : 'visible' },
+      layout: { visibility: this.visibility },
       paint,
       ...(this.filter ? { filter: this.filter } : {})
     }

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

@@ -356,12 +356,11 @@ export default class MaplibreLayerAdapter {
       const { sublayerIds } = registryDataset
       sublayerIds.forEach(sublayerId => { this.setDatasetVisibility(sublayerId) })
     } else {
-      const { visible } = registryDataset
+      const { visibility } = registryDataset
       const datasetId = registryDataset.id
       style.layers.filter(layer =>
         layer.id === datasetId || layer.id.startsWith(`${datasetId}-`)
       ).forEach(layer => {
-        const visibility = visible ? 'visible' : 'none'
         this._map.setLayoutProperty(layer.id, 'visibility', visibility)
       })
     }

plugins/beta/datasets/src/components/key/KeyGroupItem.jsx

@@ -0,0 +1,18 @@
+import { KeyItem } from './KeyItem.jsx'
+
+export const KeyGroupItem = ({ headingId, label, datasets, symbolRegistry, patternRegistry, mapStyle }) => {
+  return (
+    <section className='im-c-datasets-key__group' aria-labelledby={headingId}>
+      <h3 id={headingId} className='im-c-datasets-key__group-heading'>{label}</h3>
+      {datasets.map(dataset =>
+        <KeyItem
+          key={`${dataset.id}`}
+          registryDataset={dataset}
+          symbolRegistry={symbolRegistry}
+          patternRegistry={patternRegistry}
+          mapStyle={mapStyle}
+        />
+      )}
+    </section>
+  )
+}

plugins/beta/datasets/src/components/key/KeyItem.jsx

@@ -0,0 +1,20 @@
+import { getValueForStyle } from '../../../../../../src/utils/getValueForStyle.js'
+import { KeySvg } from './KeySvg.jsx'
+
+export const KeyItem = ({ registryDataset, symbolRegistry, patternRegistry, mapStyle }) => {
+  return (
+    <dl className='im-c-datasets-key__item'>
+      <dt className='im-c-datasets-key__item-symbol'>
+        <KeySvg registryDataset={registryDataset} symbolRegistry={symbolRegistry} patternRegistry={patternRegistry} mapStyle={mapStyle} />
+      </dt>
+      <dd className='im-c-datasets-key__item-label'>
+        {registryDataset.label}
+        {registryDataset.symbolDescription && (
+          <span className='govuk-visually-hidden'>
+            ({getValueForStyle(registryDataset.symbolDescription, mapStyle.id)})
+          </span>
+        )}
+      </dd>
+    </dl>
+  )
+}

plugins/beta/datasets/src/components/key/KeySvg.jsx

@@ -0,0 +1,22 @@
+import { KeySvgPattern } from './KeySvgPattern.jsx'
+import { KeySvgSymbol } from './KeySvgSymbol.jsx'
+import { KeySvgLine } from './KeySvgLine.jsx'
+import { KeySvgRect } from './KeySvgRect.jsx'
+
+export const KeySvg = ({ symbolRegistry, registryDataset, mapStyle, patternRegistry }) => {
+  const { hasSymbol, hasPattern, style } = registryDataset
+  const symbolDef = hasSymbol && symbolRegistry.getSymbolDef(style)
+  if (symbolDef) {
+    return <KeySvgSymbol mapStyle={mapStyle} registryDataset={registryDataset} symbolRegistry={symbolRegistry} symbolDef={symbolDef} />
+  }
+
+  if (hasPattern) {
+    return <KeySvgPattern mapStyle={mapStyle} registryDataset={registryDataset} patternRegistry={patternRegistry} />
+  }
+
+  if (style.keySymbolShape === 'line') {
+    return <KeySvgLine mapStyle={mapStyle} registryDataset={registryDataset} />
+  }
+
+  return <KeySvgRect mapStyle={mapStyle} registryDataset={registryDataset} />
+}