From b2b465dbbcce763b578fab9fe73a4557969d9475 Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Wed, 8 Apr 2026 15:37:03 +0100 Subject: [PATCH 1/7] Started to create KeySymbols.jsx --- plugins/beta/datasets/src/{panels => components}/EmptyKey.jsx | 0 .../beta/datasets/src/{panels => components}/EmptyKey.test.jsx | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename plugins/beta/datasets/src/{panels => components}/EmptyKey.jsx (100%) rename plugins/beta/datasets/src/{panels => components}/EmptyKey.test.jsx (100%) diff --git a/plugins/beta/datasets/src/panels/EmptyKey.jsx b/plugins/beta/datasets/src/components/EmptyKey.jsx similarity index 100% rename from plugins/beta/datasets/src/panels/EmptyKey.jsx rename to plugins/beta/datasets/src/components/EmptyKey.jsx diff --git a/plugins/beta/datasets/src/panels/EmptyKey.test.jsx b/plugins/beta/datasets/src/components/EmptyKey.test.jsx similarity index 100% rename from plugins/beta/datasets/src/panels/EmptyKey.test.jsx rename to plugins/beta/datasets/src/components/EmptyKey.test.jsx From afc60f463544227ff34cf9be177ac9852aed315c Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Wed, 8 Apr 2026 15:59:29 +0100 Subject: [PATCH 2/7] datasets wip --- jest.config.mjs | 5 +- .../beta/datasets/src/components/KeySvg.jsx | 59 +++++++++++++ .../datasets/src/components/KeySvgPattern.jsx | 77 +++++++++++++++++ .../datasets/src/components/KeySvgSymbol.jsx | 77 +++++++++++++++++ plugins/beta/datasets/src/index.js | 1 - plugins/beta/datasets/src/panels/Key.jsx | 85 ++----------------- 6 files changed, 221 insertions(+), 83 deletions(-) create mode 100644 plugins/beta/datasets/src/components/KeySvg.jsx create mode 100644 plugins/beta/datasets/src/components/KeySvgPattern.jsx create mode 100644 plugins/beta/datasets/src/components/KeySvgSymbol.jsx diff --git a/jest.config.mjs b/jest.config.mjs index 1f0a2e68..378d1526 100755 --- a/jest.config.mjs +++ b/jest.config.mjs @@ -7,7 +7,8 @@ export default { '\\.mjs$': 'babel-jest' }, collectCoverageFrom: [ - '**/*.{js,jsx}' + // '**/*.{js,jsx}' + '/plugins/beta/**/*.{js,jsx}' ], projects: [{ displayName: 'unit-tests', @@ -25,7 +26,7 @@ export default { '/coverage', '/demo', '/src/test-utils.js', - '/plugins/beta/datasets/', + // '/plugins/beta/datasets/', '/providers/beta/', '/plugins/beta/draw-es', '/plugins/beta/draw-ml', diff --git a/plugins/beta/datasets/src/components/KeySvg.jsx b/plugins/beta/datasets/src/components/KeySvg.jsx new file mode 100644 index 00000000..83a1ed5e --- /dev/null +++ b/plugins/beta/datasets/src/components/KeySvg.jsx @@ -0,0 +1,59 @@ +import { getValueForStyle } from '../../../../../src/utils/getValueForStyle' +import { hasSymbol } from '../../../../../src/utils/symbolUtils.js' +import { hasPattern } from '../../../../../src/utils/patternUtils.js' +import { KeySvgPattern } from './KeySvgPattern.jsx' +import { KeySvgSymbol } from './KeySvgSymbol.jsx' +const SVG_SIZE = 20 +const SVG_CENTER = SVG_SIZE / 2 + +export const KeySvg = (props) => { + if (hasSymbol(props)) { + console.log('Rendering KeySvgSymbol') + return + } + if (hasPattern(props)) { + console.log('Rendering KeySvgPattern') + return + } + const { mapStyle } = props + const svgProps = { + xmlns: 'http://www.w3.org/2000/svg', + width: SVG_SIZE, + height: SVG_SIZE, + viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`, + className: 'am-c-datasets-key-symbol', + 'aria-hidden': 'true', + focusable: 'false' + } + + return ( + + {props.keySymbolShape === 'line' + ? ( + + ) + : ( + + )} + + ) +} diff --git a/plugins/beta/datasets/src/components/KeySvgPattern.jsx b/plugins/beta/datasets/src/components/KeySvgPattern.jsx new file mode 100644 index 00000000..456b11a9 --- /dev/null +++ b/plugins/beta/datasets/src/components/KeySvgPattern.jsx @@ -0,0 +1,77 @@ +import { getValueForStyle } from '../../../../../src/utils/getValueForStyle' +import { hasSymbol, getSymbolDef, getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js' +import { hasPattern, getKeyPatternPaths } from '../../../../../src/utils/patternUtils.js' + +const SVG_SIZE = 20 +const SVG_SYMBOL_SIZE = 38 +const SVG_CENTER = SVG_SIZE / 2 +const PATTERN_INSET = 2 + +export const KeySvgPattern = (props) => { + const { symbolRegistry, patternRegistry, mapStyle } = props + const appColorScheme = mapStyle?.appColorScheme ?? 'light' + const keyMapStyle = mapStyle ? { ...mapStyle, mapColorScheme: appColorScheme } : mapStyle + const svgProps = { + xmlns: 'http://www.w3.org/2000/svg', + width: hasSymbol(props) ? SVG_SYMBOL_SIZE : SVG_SIZE, + height: hasSymbol(props) ? SVG_SYMBOL_SIZE : SVG_SIZE, + viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`, + className: `am-c-datasets-key-symbol${hasSymbol(props) ? ' am-c-datasets-key-symbol--point' : ''}`, + 'aria-hidden': 'true', + focusable: 'false' + } + + if (hasSymbol(props)) { + const symbolDef = getSymbolDef(props, symbolRegistry) + if (symbolDef) { + const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(props), keyMapStyle) + const viewBox = getSymbolViewBox(props, symbolDef) + return ( + + + + ) + } + } + + if (hasPattern(props)) { + const paths = getKeyPatternPaths(props, mapStyle.id, patternRegistry) + return ( + + + + + ) + } + + return ( + + {props.keySymbolShape === 'line' + ? ( + + ) + : ( + + )} + + ) +} diff --git a/plugins/beta/datasets/src/components/KeySvgSymbol.jsx b/plugins/beta/datasets/src/components/KeySvgSymbol.jsx new file mode 100644 index 00000000..c5cc91c1 --- /dev/null +++ b/plugins/beta/datasets/src/components/KeySvgSymbol.jsx @@ -0,0 +1,77 @@ +import { getValueForStyle } from '../../../../../src/utils/getValueForStyle' +import { hasSymbol, getSymbolDef, getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js' +import { hasPattern, getKeyPatternPaths } from '../../../../../src/utils/patternUtils.js' + +const SVG_SIZE = 20 +const SVG_SYMBOL_SIZE = 38 +const SVG_CENTER = SVG_SIZE / 2 +const PATTERN_INSET = 2 + +export const KeySvgSymbol = (props) => { + const { symbolRegistry, patternRegistry, mapStyle } = props + const appColorScheme = mapStyle?.appColorScheme ?? 'light' + const keyMapStyle = mapStyle ? { ...mapStyle, mapColorScheme: appColorScheme } : mapStyle + const svgProps = { + xmlns: 'http://www.w3.org/2000/svg', + width: hasSymbol(props) ? SVG_SYMBOL_SIZE : SVG_SIZE, + height: hasSymbol(props) ? SVG_SYMBOL_SIZE : SVG_SIZE, + viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`, + className: `am-c-datasets-key-symbol${hasSymbol(props) ? ' am-c-datasets-key-symbol--point' : ''}`, + 'aria-hidden': 'true', + focusable: 'false' + } + + if (hasSymbol(props)) { + const symbolDef = getSymbolDef(props, symbolRegistry) + if (symbolDef) { + const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(props), keyMapStyle) + const viewBox = getSymbolViewBox(props, symbolDef) + return ( + + + + ) + } + } + + if (hasPattern(props)) { + const paths = getKeyPatternPaths(props, mapStyle.id, patternRegistry) + return ( + + + + + ) + } + + return ( + + {props.keySymbolShape === 'line' + ? ( + + ) + : ( + + )} + + ) +} diff --git a/plugins/beta/datasets/src/index.js b/plugins/beta/datasets/src/index.js index 7b6d8c7a..162a7172 100755 --- a/plugins/beta/datasets/src/index.js +++ b/plugins/beta/datasets/src/index.js @@ -2,7 +2,6 @@ import './datasets.scss' export default function createPlugin (options = { }) { - console.log('options', options) const plugin = { noKeyItemText: 'No features displayed', ...options, diff --git a/plugins/beta/datasets/src/panels/Key.jsx b/plugins/beta/datasets/src/panels/Key.jsx index 2b521a5a..5e9a1080 100755 --- a/plugins/beta/datasets/src/panels/Key.jsx +++ b/plugins/beta/datasets/src/panels/Key.jsx @@ -1,14 +1,8 @@ import React from 'react' 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 +import { EmptyKey } from '../components/EmptyKey.jsx' +import { KeySvg } from '../components/KeySvg.jsx' export const Key = ({ pluginConfig, mapState, pluginState, services }) => { if (!pluginState?.key?.items?.length) { @@ -17,80 +11,11 @@ export const Key = ({ pluginConfig, mapState, pluginState, services }) => { const { mapStyle } = mapState const { symbolRegistry, patternRegistry } = services - // Key symbols are rendered in the app UI panel, not on the map, so use the app color - // scheme for halo fallback — not the map color scheme (which could differ, e.g. aerial). - const appColorScheme = mapStyle?.appColorScheme ?? 'light' - const keyMapStyle = mapStyle ? { ...mapStyle, mapColorScheme: appColorScheme } : mapStyle - - const itemSymbol = (config) => { - const svgProps = { - xmlns: 'http://www.w3.org/2000/svg', - width: hasSymbol(config) ? SVG_SYMBOL_SIZE : SVG_SIZE, - height: hasSymbol(config) ? SVG_SYMBOL_SIZE : SVG_SIZE, - viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`, - className: `am-c-datasets-key-symbol${hasSymbol(config) ? ' am-c-datasets-key-symbol--point' : ''}`, - 'aria-hidden': 'true', - focusable: 'false' - } - - if (hasSymbol(config)) { - const symbolDef = getSymbolDef(config, symbolRegistry) - if (symbolDef) { - const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(config), keyMapStyle) - const viewBox = getSymbolViewBox(config, symbolDef) - return ( - - - - ) - } - } - - if (hasPattern(config)) { - const paths = getKeyPatternPaths(config, mapStyle.id, patternRegistry) - return ( - - - - - ) - } - - return ( - - {config.keySymbolShape === 'line' - ? ( - - ) - : ( - - )} - - ) - } - const renderEntry = (key, config) => (
-
{itemSymbol(config)}
+
+ +
{config.label} {config.symbolDescription && ( From 1dc2abb9106dd4de992df76f6475dfc759773475 Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Wed, 8 Apr 2026 16:12:47 +0100 Subject: [PATCH 3/7] datasets simplified KeySvgSymbol --- .../beta/datasets/src/components/KeySvg.jsx | 9 ++- .../datasets/src/components/KeySvgSymbol.jsx | 73 +++---------------- 2 files changed, 17 insertions(+), 65 deletions(-) diff --git a/plugins/beta/datasets/src/components/KeySvg.jsx b/plugins/beta/datasets/src/components/KeySvg.jsx index 83a1ed5e..f1f72732 100644 --- a/plugins/beta/datasets/src/components/KeySvg.jsx +++ b/plugins/beta/datasets/src/components/KeySvg.jsx @@ -1,5 +1,5 @@ import { getValueForStyle } from '../../../../../src/utils/getValueForStyle' -import { hasSymbol } from '../../../../../src/utils/symbolUtils.js' +import { hasSymbol, getSymbolDef } from '../../../../../src/utils/symbolUtils.js' import { hasPattern } from '../../../../../src/utils/patternUtils.js' import { KeySvgPattern } from './KeySvgPattern.jsx' import { KeySvgSymbol } from './KeySvgSymbol.jsx' @@ -7,9 +7,10 @@ const SVG_SIZE = 20 const SVG_CENTER = SVG_SIZE / 2 export const KeySvg = (props) => { - if (hasSymbol(props)) { - console.log('Rendering KeySvgSymbol') - return + const { symbolRegistry, patternRegistry } = props + const symbolDef = hasSymbol(props) && getSymbolDef(props, symbolRegistry) + if (symbolDef) { + return } if (hasPattern(props)) { console.log('Rendering KeySvgPattern') diff --git a/plugins/beta/datasets/src/components/KeySvgSymbol.jsx b/plugins/beta/datasets/src/components/KeySvgSymbol.jsx index c5cc91c1..efb9011a 100644 --- a/plugins/beta/datasets/src/components/KeySvgSymbol.jsx +++ b/plugins/beta/datasets/src/components/KeySvgSymbol.jsx @@ -1,77 +1,28 @@ -import { getValueForStyle } from '../../../../../src/utils/getValueForStyle' -import { hasSymbol, getSymbolDef, getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js' -import { hasPattern, getKeyPatternPaths } from '../../../../../src/utils/patternUtils.js' +import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js' const SVG_SIZE = 20 const SVG_SYMBOL_SIZE = 38 -const SVG_CENTER = SVG_SIZE / 2 -const PATTERN_INSET = 2 export const KeySvgSymbol = (props) => { - const { symbolRegistry, patternRegistry, mapStyle } = props - const appColorScheme = mapStyle?.appColorScheme ?? 'light' - const keyMapStyle = mapStyle ? { ...mapStyle, mapColorScheme: appColorScheme } : mapStyle + console.log('Rendering KeySvgSymbol') + const { symbolRegistry, mapStyle, symbolDef } = props + const mapColorScheme = mapStyle?.appColorScheme ?? 'light' + const keyMapStyle = { ...mapStyle, mapColorScheme } const svgProps = { xmlns: 'http://www.w3.org/2000/svg', - width: hasSymbol(props) ? SVG_SYMBOL_SIZE : SVG_SIZE, - height: hasSymbol(props) ? SVG_SYMBOL_SIZE : SVG_SIZE, + width: SVG_SYMBOL_SIZE, + height: SVG_SYMBOL_SIZE, viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`, - className: `am-c-datasets-key-symbol${hasSymbol(props) ? ' am-c-datasets-key-symbol--point' : ''}`, + className: 'am-c-datasets-key-symbol am-c-datasets-key-symbol--point', 'aria-hidden': 'true', focusable: 'false' } - if (hasSymbol(props)) { - const symbolDef = getSymbolDef(props, symbolRegistry) - if (symbolDef) { - const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(props), keyMapStyle) - const viewBox = getSymbolViewBox(props, symbolDef) - return ( - - - - ) - } - } - - if (hasPattern(props)) { - const paths = getKeyPatternPaths(props, mapStyle.id, patternRegistry) - return ( - - - - - ) - } - + const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(props), keyMapStyle) + const viewBox = getSymbolViewBox(props, symbolDef) return ( - - {props.keySymbolShape === 'line' - ? ( - - ) - : ( - - )} + + ) } From e268a6286779ce063004cff4a7a861b3a8be2c6b Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Wed, 8 Apr 2026 16:18:37 +0100 Subject: [PATCH 4/7] datasets simplified KeySvgPattern --- .../beta/datasets/src/components/KeySvg.jsx | 2 +- .../datasets/src/components/KeySvgPattern.jsx | 69 +++---------------- 2 files changed, 10 insertions(+), 61 deletions(-) diff --git a/plugins/beta/datasets/src/components/KeySvg.jsx b/plugins/beta/datasets/src/components/KeySvg.jsx index f1f72732..5ee2c8f6 100644 --- a/plugins/beta/datasets/src/components/KeySvg.jsx +++ b/plugins/beta/datasets/src/components/KeySvg.jsx @@ -13,7 +13,6 @@ export const KeySvg = (props) => { return } if (hasPattern(props)) { - console.log('Rendering KeySvgPattern') return } const { mapStyle } = props @@ -27,6 +26,7 @@ export const KeySvg = (props) => { focusable: 'false' } + console.log('Rendering default:', props.keySymbolShape) return ( {props.keySymbolShape === 'line' diff --git a/plugins/beta/datasets/src/components/KeySvgPattern.jsx b/plugins/beta/datasets/src/components/KeySvgPattern.jsx index 456b11a9..6e0833b8 100644 --- a/plugins/beta/datasets/src/components/KeySvgPattern.jsx +++ b/plugins/beta/datasets/src/components/KeySvgPattern.jsx @@ -1,77 +1,26 @@ -import { getValueForStyle } from '../../../../../src/utils/getValueForStyle' -import { hasSymbol, getSymbolDef, getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js' -import { hasPattern, getKeyPatternPaths } from '../../../../../src/utils/patternUtils.js' +import { getKeyPatternPaths } from '../../../../../src/utils/patternUtils.js' const SVG_SIZE = 20 -const SVG_SYMBOL_SIZE = 38 -const SVG_CENTER = SVG_SIZE / 2 const PATTERN_INSET = 2 export const KeySvgPattern = (props) => { - const { symbolRegistry, patternRegistry, mapStyle } = props - const appColorScheme = mapStyle?.appColorScheme ?? 'light' - const keyMapStyle = mapStyle ? { ...mapStyle, mapColorScheme: appColorScheme } : mapStyle + console.log('Rendering KeySvgPattern 2') + const { patternRegistry, mapStyle } = props const svgProps = { xmlns: 'http://www.w3.org/2000/svg', - width: hasSymbol(props) ? SVG_SYMBOL_SIZE : SVG_SIZE, - height: hasSymbol(props) ? SVG_SYMBOL_SIZE : SVG_SIZE, + width: SVG_SIZE, + height: SVG_SIZE, viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`, - className: `am-c-datasets-key-symbol${hasSymbol(props) ? ' am-c-datasets-key-symbol--point' : ''}`, + className: 'am-c-datasets-key-symbol', 'aria-hidden': 'true', focusable: 'false' } - if (hasSymbol(props)) { - const symbolDef = getSymbolDef(props, symbolRegistry) - if (symbolDef) { - const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(props), keyMapStyle) - const viewBox = getSymbolViewBox(props, symbolDef) - return ( - - - - ) - } - } - - if (hasPattern(props)) { - const paths = getKeyPatternPaths(props, mapStyle.id, patternRegistry) - return ( - - - - - ) - } - + const paths = getKeyPatternPaths(props, mapStyle.id, patternRegistry) return ( - {props.keySymbolShape === 'line' - ? ( - - ) - : ( - - )} + + ) } From 3bba27f6583db5b40c06f4914db696edc2fadcac Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Wed, 8 Apr 2026 16:39:37 +0100 Subject: [PATCH 5/7] datasets moved common svgProps to a file --- demo/js/index.js | 2 +- .../beta/datasets/src/components/KeySvg.jsx | 15 ++----------- .../datasets/src/components/KeySvgPattern.jsx | 12 +---------- .../datasets/src/components/KeySvgSymbol.jsx | 15 ++----------- .../datasets/src/components/svgProperties.js | 21 +++++++++++++++++++ 5 files changed, 27 insertions(+), 38 deletions(-) create mode 100644 plugins/beta/datasets/src/components/svgProperties.js diff --git a/demo/js/index.js b/demo/js/index.js index d4a483b0..fb1bdbe9 100755 --- a/demo/js/index.js +++ b/demo/js/index.js @@ -220,7 +220,7 @@ const datasetsPlugin = createDatasetsPlugin({ maxZoom: 24, showInKey: true, toggleVisibility: true, - visibility: 'hidden', + // visibility: 'hidden', style: { stroke: '#b58840', fill: 'transparent', diff --git a/plugins/beta/datasets/src/components/KeySvg.jsx b/plugins/beta/datasets/src/components/KeySvg.jsx index 5ee2c8f6..32b0d730 100644 --- a/plugins/beta/datasets/src/components/KeySvg.jsx +++ b/plugins/beta/datasets/src/components/KeySvg.jsx @@ -3,11 +3,10 @@ import { hasSymbol, getSymbolDef } from '../../../../../src/utils/symbolUtils.js import { hasPattern } from '../../../../../src/utils/patternUtils.js' import { KeySvgPattern } from './KeySvgPattern.jsx' import { KeySvgSymbol } from './KeySvgSymbol.jsx' -const SVG_SIZE = 20 -const SVG_CENTER = SVG_SIZE / 2 +import { svgProps, SVG_SIZE, SVG_CENTER } from './svgProperties.js' export const KeySvg = (props) => { - const { symbolRegistry, patternRegistry } = props + const { symbolRegistry } = props const symbolDef = hasSymbol(props) && getSymbolDef(props, symbolRegistry) if (symbolDef) { return @@ -16,16 +15,6 @@ export const KeySvg = (props) => { return } const { mapStyle } = props - const svgProps = { - xmlns: 'http://www.w3.org/2000/svg', - width: SVG_SIZE, - height: SVG_SIZE, - viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`, - className: 'am-c-datasets-key-symbol', - 'aria-hidden': 'true', - focusable: 'false' - } - console.log('Rendering default:', props.keySymbolShape) return ( diff --git a/plugins/beta/datasets/src/components/KeySvgPattern.jsx b/plugins/beta/datasets/src/components/KeySvgPattern.jsx index 6e0833b8..c18e75f1 100644 --- a/plugins/beta/datasets/src/components/KeySvgPattern.jsx +++ b/plugins/beta/datasets/src/components/KeySvgPattern.jsx @@ -1,20 +1,10 @@ import { getKeyPatternPaths } from '../../../../../src/utils/patternUtils.js' - -const SVG_SIZE = 20 +import { svgProps } from './svgProperties.js' const PATTERN_INSET = 2 export const KeySvgPattern = (props) => { console.log('Rendering KeySvgPattern 2') const { patternRegistry, mapStyle } = props - const svgProps = { - xmlns: 'http://www.w3.org/2000/svg', - width: SVG_SIZE, - height: SVG_SIZE, - viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`, - className: 'am-c-datasets-key-symbol', - 'aria-hidden': 'true', - focusable: 'false' - } const paths = getKeyPatternPaths(props, mapStyle.id, patternRegistry) return ( diff --git a/plugins/beta/datasets/src/components/KeySvgSymbol.jsx b/plugins/beta/datasets/src/components/KeySvgSymbol.jsx index efb9011a..188fc4f3 100644 --- a/plugins/beta/datasets/src/components/KeySvgSymbol.jsx +++ b/plugins/beta/datasets/src/components/KeySvgSymbol.jsx @@ -1,27 +1,16 @@ import { getSymbolStyleColors, getSymbolViewBox } from '../../../../../src/utils/symbolUtils.js' - -const SVG_SIZE = 20 -const SVG_SYMBOL_SIZE = 38 +import { svgSymbolProps } from './svgProperties.js' export const KeySvgSymbol = (props) => { console.log('Rendering KeySvgSymbol') const { symbolRegistry, mapStyle, symbolDef } = props const mapColorScheme = mapStyle?.appColorScheme ?? 'light' const keyMapStyle = { ...mapStyle, mapColorScheme } - const svgProps = { - xmlns: 'http://www.w3.org/2000/svg', - width: SVG_SYMBOL_SIZE, - height: SVG_SYMBOL_SIZE, - viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`, - className: 'am-c-datasets-key-symbol am-c-datasets-key-symbol--point', - 'aria-hidden': 'true', - focusable: 'false' - } const resolvedSvg = symbolRegistry.resolve(symbolDef, getSymbolStyleColors(props), keyMapStyle) const viewBox = getSymbolViewBox(props, symbolDef) return ( - + ) diff --git a/plugins/beta/datasets/src/components/svgProperties.js b/plugins/beta/datasets/src/components/svgProperties.js new file mode 100644 index 00000000..b959ed16 --- /dev/null +++ b/plugins/beta/datasets/src/components/svgProperties.js @@ -0,0 +1,21 @@ +export const SVG_SIZE = 20 +export const SVG_CENTER = SVG_SIZE / 2 +const SVG_SYMBOL_SIZE = 38 + +// base svgProps +export const svgProps = { + xmlns: 'http://www.w3.org/2000/svg', + width: SVG_SIZE, + height: SVG_SIZE, + viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`, + className: 'am-c-datasets-key-symbol', + 'aria-hidden': 'true', + focusable: 'false' +} + +export const svgSymbolProps = { + ...svgProps, + width: SVG_SYMBOL_SIZE, + height: SVG_SYMBOL_SIZE, + className: 'am-c-datasets-key-symbol am-c-datasets-key-symbol--point' +} From 6d56bfea842f3b1ea1384a5f812390f3f30bf05e Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Wed, 8 Apr 2026 16:50:55 +0100 Subject: [PATCH 6/7] datasets created KeySvgLine and KeySvgRect --- .../beta/datasets/src/components/KeySvg.jsx | 43 ++++--------------- .../datasets/src/components/KeySvgLine.jsx | 20 +++++++++ .../datasets/src/components/KeySvgRect.jsx | 23 ++++++++++ 3 files changed, 52 insertions(+), 34 deletions(-) create mode 100644 plugins/beta/datasets/src/components/KeySvgLine.jsx create mode 100644 plugins/beta/datasets/src/components/KeySvgRect.jsx diff --git a/plugins/beta/datasets/src/components/KeySvg.jsx b/plugins/beta/datasets/src/components/KeySvg.jsx index 32b0d730..70fd3eb7 100644 --- a/plugins/beta/datasets/src/components/KeySvg.jsx +++ b/plugins/beta/datasets/src/components/KeySvg.jsx @@ -1,9 +1,9 @@ -import { getValueForStyle } from '../../../../../src/utils/getValueForStyle' import { hasSymbol, getSymbolDef } from '../../../../../src/utils/symbolUtils.js' import { hasPattern } from '../../../../../src/utils/patternUtils.js' import { KeySvgPattern } from './KeySvgPattern.jsx' import { KeySvgSymbol } from './KeySvgSymbol.jsx' -import { svgProps, SVG_SIZE, SVG_CENTER } from './svgProperties.js' +import { KeySvgLine } from './KeySvgLine.jsx' +import { KeySvgRect } from './KeySvgRect.jsx' export const KeySvg = (props) => { const { symbolRegistry } = props @@ -11,39 +11,14 @@ export const KeySvg = (props) => { if (symbolDef) { return } + if (hasPattern(props)) { return } - const { mapStyle } = props - console.log('Rendering default:', props.keySymbolShape) - return ( - - {props.keySymbolShape === 'line' - ? ( - - ) - : ( - - )} - - ) + + if (props.keySymbolShape === 'line') { + return + } + + return } diff --git a/plugins/beta/datasets/src/components/KeySvgLine.jsx b/plugins/beta/datasets/src/components/KeySvgLine.jsx new file mode 100644 index 00000000..5e74f512 --- /dev/null +++ b/plugins/beta/datasets/src/components/KeySvgLine.jsx @@ -0,0 +1,20 @@ +import { svgProps, SVG_SIZE, SVG_CENTER } from './svgProperties.js' +import { getValueForStyle } from '../../../../../src/utils/getValueForStyle' + +export const KeySvgLine = (props) => { + const { mapStyle } = props + console.log('Rendering KeySvgLine:') + return ( + + + + ) +} diff --git a/plugins/beta/datasets/src/components/KeySvgRect.jsx b/plugins/beta/datasets/src/components/KeySvgRect.jsx new file mode 100644 index 00000000..e6b432e4 --- /dev/null +++ b/plugins/beta/datasets/src/components/KeySvgRect.jsx @@ -0,0 +1,23 @@ +import { getValueForStyle } from '../../../../../src/utils/getValueForStyle' +import { svgProps, SVG_SIZE } from './svgProperties.js' + +export const KeySvgRect = (props) => { + const { mapStyle } = props + console.log('Rendering KeySvgRect:') + return ( + + + + ) +} From 91b01496ff364ff14020aa331ca5fb1fa1fa3add Mon Sep 17 00:00:00 2001 From: Mark Fee Date: Wed, 8 Apr 2026 17:01:49 +0100 Subject: [PATCH 7/7] datasets tidied up --- jest.config.mjs | 5 ++--- plugins/beta/datasets/src/components/KeySvgLine.jsx | 1 - plugins/beta/datasets/src/components/KeySvgPattern.jsx | 1 - plugins/beta/datasets/src/components/KeySvgRect.jsx | 1 - plugins/beta/datasets/src/components/KeySvgSymbol.jsx | 1 - plugins/beta/datasets/src/components/svgProperties.js | 1 - 6 files changed, 2 insertions(+), 8 deletions(-) diff --git a/jest.config.mjs b/jest.config.mjs index 378d1526..1f0a2e68 100755 --- a/jest.config.mjs +++ b/jest.config.mjs @@ -7,8 +7,7 @@ export default { '\\.mjs$': 'babel-jest' }, collectCoverageFrom: [ - // '**/*.{js,jsx}' - '/plugins/beta/**/*.{js,jsx}' + '**/*.{js,jsx}' ], projects: [{ displayName: 'unit-tests', @@ -26,7 +25,7 @@ export default { '/coverage', '/demo', '/src/test-utils.js', - // '/plugins/beta/datasets/', + '/plugins/beta/datasets/', '/providers/beta/', '/plugins/beta/draw-es', '/plugins/beta/draw-ml', diff --git a/plugins/beta/datasets/src/components/KeySvgLine.jsx b/plugins/beta/datasets/src/components/KeySvgLine.jsx index 5e74f512..d1015383 100644 --- a/plugins/beta/datasets/src/components/KeySvgLine.jsx +++ b/plugins/beta/datasets/src/components/KeySvgLine.jsx @@ -3,7 +3,6 @@ import { getValueForStyle } from '../../../../../src/utils/getValueForStyle' export const KeySvgLine = (props) => { const { mapStyle } = props - console.log('Rendering KeySvgLine:') return ( { - console.log('Rendering KeySvgPattern 2') const { patternRegistry, mapStyle } = props const paths = getKeyPatternPaths(props, mapStyle.id, patternRegistry) diff --git a/plugins/beta/datasets/src/components/KeySvgRect.jsx b/plugins/beta/datasets/src/components/KeySvgRect.jsx index e6b432e4..0207d561 100644 --- a/plugins/beta/datasets/src/components/KeySvgRect.jsx +++ b/plugins/beta/datasets/src/components/KeySvgRect.jsx @@ -3,7 +3,6 @@ import { svgProps, SVG_SIZE } from './svgProperties.js' export const KeySvgRect = (props) => { const { mapStyle } = props - console.log('Rendering KeySvgRect:') return ( { - console.log('Rendering KeySvgSymbol') const { symbolRegistry, mapStyle, symbolDef } = props const mapColorScheme = mapStyle?.appColorScheme ?? 'light' const keyMapStyle = { ...mapStyle, mapColorScheme } diff --git a/plugins/beta/datasets/src/components/svgProperties.js b/plugins/beta/datasets/src/components/svgProperties.js index b959ed16..73dbe1e6 100644 --- a/plugins/beta/datasets/src/components/svgProperties.js +++ b/plugins/beta/datasets/src/components/svgProperties.js @@ -2,7 +2,6 @@ export const SVG_SIZE = 20 export const SVG_CENTER = SVG_SIZE / 2 const SVG_SYMBOL_SIZE = 38 -// base svgProps export const svgProps = { xmlns: 'http://www.w3.org/2000/svg', width: SVG_SIZE,