Keys now handle no items in groups or overall

Author: markfee

demo/js/index.js

@@ -70,7 +70,6 @@ const framePlugin = createFramePlugin({
 
 const datasetsPlugin = createDatasetsPlugin({
 	layerAdapter: maplibreLayerAdapter,
-	
 	// Example: Dynamic bbox-based fetching (uncomment to test)
 	datasets: [
 	{

plugins/beta/datasets/src/index.js

@@ -1,8 +1,10 @@
 // /plugins/datasets/index.js
 import './datasets.scss'
 
-export default function createPlugin (options = {}) {
+export default function createPlugin (options = { }) {
+  console.log('options', options)
   const plugin = {
+    noKeyItemText: 'No features displayed',
     ...options,
     id: 'datasets',
     load: async () => {

plugins/beta/datasets/src/panels/EmptyKey.jsx

@@ -0,0 +1,7 @@
+export const EmptyKey = ({ text }) => {
+  return (
+    <div class='im-c-datasets-key'>
+      <p class='im-c-datasets-key__empty-message'>{text}</p>
+    </div>
+  )
+}

plugins/beta/datasets/src/panels/Key.jsx

@@ -3,13 +3,17 @@ import { getValueForStyle } from '../../../../../src/utils/getValueForStyle'
 import { hasPattern, getKeyPatternPaths } from '../../../../../src/utils/patternUtils.js'
 import { mergeSublayer } from '../utils/mergeSublayer.js'
 import { hasSymbol, getSymbolDef, getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js'
+import { EmptyKey } from './EmptyKey.jsx'
 
 const SVG_SIZE = 20
 const SVG_SYMBOL_SIZE = 38
 const SVG_CENTER = SVG_SIZE / 2
 const PATTERN_INSET = 2
 
-export const Key = ({ mapState, pluginState, services }) => {
+export const Key = ({ pluginConfig, mapState, pluginState, services }) => {
+  if (!pluginState?.key?.items?.length) {
+    return (<EmptyKey text={pluginConfig.noKeyItemText} />)
+  }
   const { mapStyle } = mapState
   const { symbolRegistry, patternRegistry } = services
 

plugins/beta/datasets/src/reducer.js

@@ -1,5 +1,5 @@
 import { applyDatasetDefaults } from './defaults.js'
-import { buildKeyState } from './utils/buildKeyState.js'
+import { keyReducer } from './reducers/keyReducer.js'
 
 const initialState = {
   datasets: null,
@@ -195,17 +195,8 @@ const setSublayerOpacity = (state, payload) => {
 
 const setLayerAdapter = (state, payload) => ({ ...state, layerAdapter: payload })
 
-const buildKeyGroups = (state) => {
-  const visibleDatasets = state.datasets
-    ? state.datasets.filter(dataset => dataset.showInKey && dataset.visibility !== 'hidden')
-    : []
-  const items = buildKeyState(visibleDatasets)
-  const hasGroups = items.some(item => item.type === 'sublayers' || item.type === 'group')
-  return { ...state, key: { items, hasGroups } }
-}
-
 const actions = {
-  BUILD_KEY_GROUPS: buildKeyGroups,
+  BUILD_KEY_GROUPS: keyReducer,
   SET_DATASETS: setDatasets,
   ADD_DATASET: addDataset,
   REMOVE_DATASET: removeDataset,

…beta/datasets/src/utils/buildKeyState.js …beta/datasets/src/reducers/keyReducer.jsplugins/beta/datasets/src/utils/buildKeyState.js renamed to plugins/beta/datasets/src/reducers/keyReducer.js plugins/beta/datasets/src/utils/buildKeyState.js renamed to plugins/beta/datasets/src/reducers/keyReducer.js

@@ -1,16 +1,26 @@
-export const buildKeyState = (datasets) => {
+export const keyReducer = (state) => {
+  const datasets = state.datasets || []
   const seenGroups = new Set()
   const items = []
+  let hasGroups = false
   datasets.forEach(dataset => {
+    if (!dataset.showInKey || dataset.visibility === 'hidden') {
+      return
+    }
     if (dataset.sublayers?.length) {
-      items.push({ type: 'sublayers', dataset })
+      const { sublayerVisibility = [] } = dataset
+      if (Object.values(sublayerVisibility).some((value) => value !== 'hidden')) {
+        hasGroups = true
+        items.push({ type: 'sublayers', dataset })
+      }
       return
     }
     if (dataset.groupLabel) {
       if (seenGroups.has(dataset.groupLabel)) {
         return
       }
       seenGroups.add(dataset.groupLabel)
+      hasGroups = true
       items.push({
         type: 'group',
         groupLabel: dataset.groupLabel,
@@ -20,5 +30,5 @@ export const buildKeyState = (datasets) => {
     }
     items.push({ type: 'flat', dataset })
   })
-  return items
+  return { ...state, key: { items, hasGroups } }
 }