@carto/ps-react-ui 4.6.2 → 4.7.0

package/src/widgets/actions/brush-toggle/hit-test.test.ts

@@ -0,0 +1,65 @@
+import { describe, test, expect } from 'vitest'
+import { hitTestCategoryRange, hitTestRects } from './hit-test'
+
+describe('hitTestCategoryRange', () => {
+  test('returns empty when dataLength is zero', () => {
+    expect(hitTestCategoryRange(0, 5, 0)).toEqual([])
+  })
+
+  test('snaps fractional range outward so partial overlaps are included', () => {
+    // xStart=1.3, xEnd=3.7 → floor(1.3)=1, ceil(3.7)=4 → [1, 2, 3, 4]
+    expect(hitTestCategoryRange(1.3, 3.7, 10)).toEqual([1, 2, 3, 4])
+  })
+
+  test('handles integer endpoints inclusively', () => {
+    expect(hitTestCategoryRange(2, 4, 10)).toEqual([2, 3, 4])
+  })
+
+  test('clamps to [0, dataLength - 1]', () => {
+    expect(hitTestCategoryRange(-2.5, 12.8, 5)).toEqual([0, 1, 2, 3, 4])
+  })
+
+  test('normalizes reversed inputs (xEnd < xStart)', () => {
+    expect(hitTestCategoryRange(3.7, 1.3, 10)).toEqual([1, 2, 3, 4])
+  })
+
+  test('returns empty when range is entirely out of bounds', () => {
+    expect(hitTestCategoryRange(10, 12, 5)).toEqual([])
+    expect(hitTestCategoryRange(-5, -1, 5)).toEqual([])
+  })
+
+  test('returns adjacent indices for a very narrow fractional range when snapping outward', () => {
+    // xStart=2.1, xEnd=2.3 partially overlaps both categories, so floor=2 and ceil=3 → [2, 3]
+    expect(hitTestCategoryRange(2.1, 2.3, 10)).toEqual([2, 3])
+  })
+})
+
+describe('hitTestRects', () => {
+  test('returns empty for no rects', () => {
+    expect(hitTestRects([], 10)).toEqual([])
+  })
+
+  test('unions and dedups across overlapping rects', () => {
+    const rects = [
+      { xStart: 1, xEnd: 3 },
+      { xStart: 2, xEnd: 4 },
+    ]
+    expect(hitTestRects(rects, 10)).toEqual([1, 2, 3, 4])
+  })
+
+  test('returns sorted ascending indices for disjoint rects', () => {
+    const rects = [
+      { xStart: 7, xEnd: 8 },
+      { xStart: 1, xEnd: 2 },
+    ]
+    expect(hitTestRects(rects, 10)).toEqual([1, 2, 7, 8])
+  })
+
+  test('drops rects entirely out of bounds', () => {
+    const rects = [
+      { xStart: 20, xEnd: 25 },
+      { xStart: 1, xEnd: 2 },
+    ]
+    expect(hitTestRects(rects, 10)).toEqual([1, 2])
+  })
+})

package/src/widgets/actions/brush-toggle/hit-test.ts

@@ -0,0 +1,45 @@
+import type { BrushRect } from './types'
+
+/**
+ * Returns integer dataIndices covered by a brush rectangle on a category axis.
+ *
+ * `xStart` / `xEnd` come from `instance.convertFromPixel({ xAxisIndex: 0 }, …)`
+ * which, for a category axis, returns fractional positions around integer
+ * category indices (e.g. `1.3` lands between categories 1 and 2). We snap the
+ * range outward (`floor` / `ceil`) so a drag that visually covers any part of
+ * a category's bar includes that index.
+ *
+ * Results are clamped to `[0, dataLength - 1]` and returned in ascending order.
+ */
+export function hitTestCategoryRange(
+  xStart: number,
+  xEnd: number,
+  dataLength: number,
+): number[] {
+  if (dataLength <= 0) return []
+  const [lo, hi] = xStart <= xEnd ? [xStart, xEnd] : [xEnd, xStart]
+
+  const start = Math.max(0, Math.floor(lo))
+  const end = Math.min(dataLength - 1, Math.ceil(hi))
+  if (start > end) return []
+
+  const indices: number[] = []
+  for (let i = start; i <= end; i += 1) indices.push(i)
+  return indices
+}
+
+/**
+ * Union of `hitTestCategoryRange` across multiple rectangles. Used for
+ * multi-brush selections where each drawn rectangle contributes to the
+ * combined selection.
+ */
+export function hitTestRects(rects: BrushRect[], dataLength: number): number[] {
+  if (rects.length === 0) return []
+  const seen = new Set<number>()
+  for (const rect of rects) {
+    for (const i of hitTestCategoryRange(rect.xStart, rect.xEnd, dataLength)) {
+      seen.add(i)
+    }
+  }
+  return Array.from(seen).sort((a, b) => a - b)
+}

package/src/widgets/actions/brush-toggle/style.ts

@@ -1,4 +1,5 @@
 import type { SxProps, Theme } from '@mui/material'
+import type { CSSProperties } from 'react'
 
 export const styles = {
   container: {
@@ -12,3 +13,34 @@ export const styles = {
     },
   },
 } satisfies Record<string, SxProps<Theme>>
+
+/**
+ * Plain CSS objects for the brush overlay — we're outside MUI's sx pipeline
+ * here because the rectangles are rendered via a React portal into the chart
+ * div (not part of the MUI tree). Colors borrow from the base palette; if
+ * theme-aware styling is needed later, move to styled components.
+ */
+export const overlayStyles: Record<string, CSSProperties> = {
+  // `top` and `height` are filled in at render time from the chart's plot
+  // rect so rectangles don't bleed over the legend / axis labels.
+  //
+  // Colors track ECharts 6's `backgroundTint` token (used by the default
+  // brush) — a barely-visible pale blue-gray translucent fill that washes
+  // bars underneath rather than masking them. Border is a hairline dark
+  // alpha so the selection edges are just findable, not prominent.
+  rect: {
+    position: 'absolute',
+    background: 'rgba(234, 237, 245, 0.2)',
+    border: '1px dashed rgba(0, 0, 0, 0.15)',
+    pointerEvents: 'none',
+  },
+  // Live drag preview — identical to committed rect (no "in-progress" vs
+  // "committed" visual distinction; the preview just disappears on
+  // `pointerup` as the rect takes its place).
+  rectPreview: {
+    position: 'absolute',
+    background: 'rgba(234, 237, 245, 0.6)',
+    border: '1px dashed rgba(0, 0, 0, 0.15)',
+    pointerEvents: 'none',
+  },
+}

package/src/widgets/actions/brush-toggle/types.ts

@@ -14,10 +14,30 @@ export interface BrushSelectedItems {
 }
 
 /**
- * State stored in widget store for brush functionality
+ * A selection rectangle in x-axis data coords. Stored in the widget store so
+ * it survives config-pipeline re-renders (which call `setOption` with
+ * `notMerge: true` and wipe any ECharts-side state). The overlay re-projects
+ * these to pixel positions on every chart render / resize.
+ *
+ * Both bar and histogram widgets use `xAxis.type === 'category'`, so the
+ * coords are category indices (possibly fractional — `convertFromPixel`
+ * returns floats like `1.3` between categories 1 and 2).
+ */
+export interface BrushRect {
+  xStart: number
+  xEnd: number
+}
+
+/**
+ * State stored in widget store for brush functionality.
  */
 export interface BrushConfig {
+  /** Whether brush mode is enabled. */
   brush?: boolean
+  /** Persisted selection rectangles in data-axis coords. */
+  brushRects?: BrushRect[]
+  /** Last selection emitted to the `onBrushSelected` callback. */
+  brushSelection?: BrushSelectedItems
 }
 
 export type BrushState<T = unknown> = BaseWidgetState<T & BrushConfig>
@@ -27,6 +47,21 @@ export interface BrushToggleProps {
   id: string
   /** Callback fired when items are selected via brush */
   onBrushSelected?: (items: BrushSelectedItems) => void
+  /** When true, allows multiple brush selection areas. Brush stays active after each selection. */
+  multiBrush?: boolean
+  /**
+   * Initial brush-enabled state. Only applied on first mount if the widget
+   * store has no `brush` value yet — subsequent remounts preserve whatever
+   * state the user has toggled to.
+   */
+  defaultEnabled?: boolean
+  /**
+   * Current selection count from the consumer (e.g. `selectedItems.length`).
+   * When this transitions to `0` (typically when the user presses the clear
+   * button in `WidgetSelectionSummary`), BrushToggle clears its persisted
+   * brush rectangles and the on-chart selection.
+   */
+  selections?: number
   /** Custom labels for the action */
   labels?: {
     /** Tooltip when brush is disabled (button will enable brush) */

package/src/widgets/bar/config.ts

@@ -13,6 +13,7 @@ import {
   createChartDownloadConfig,
   applyXAxisFormatter,
   niceNum,
+  buildSeriesLabelConfig,
 } from '../utils/chart-config'
 
 export const barDownloadConfig = createChartDownloadConfig<BarWidgetData>(
@@ -60,6 +61,9 @@ function getOption({
         axisLabel: {
           padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
           margin: 0,
+          showMinLabel: undefined,
+          showMaxLabel: undefined,
+          hideOverlap: true,
         },
       },
       labelFormatter,
@@ -130,6 +134,7 @@ function getOption({
       emphasis: {
         focus: 'series',
       },
+      ...buildSeriesLabelConfig(formatter),
     })),
   } as EchartOptionsProps
 }

package/src/widgets/echart/options.ts

@@ -23,10 +23,7 @@ export function getCommonOptions({
     },
     tooltip: {
       axisPointer: {
-        type: 'shadow',
-        shadowStyle: {
-          color: 'rgba(44,48,50, 0.08)',
-        },
+        type: 'line',
       },
       backgroundColor: theme.palette.grey[900],
       borderWidth: 0,

package/src/widgets/histogram/config.ts

@@ -10,6 +10,7 @@ import {
   createTooltipPositioner,
   createTooltipFormatter,
   niceNum,
+  buildHistogramSeriesLabelConfig,
 } from '../utils/chart-config'
 import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
 import type { ConfigProps } from '../loader/types'
@@ -108,6 +109,7 @@ export function histogramConfig(props: HistogramConfig): HistogramWidgetConfig {
     type: 'histogram',
     option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
     formatter: props.formatter,
+    labelFormatter: props.labelFormatter,
   }
 }
 
@@ -126,7 +128,7 @@ function getOption({
   let niceMax = 1
 
   return {
-    legend: buildLegendConfig({ hasLegend }),
+    legend: buildLegendConfig({ hasLegend, labelFormatter }),
     grid: buildGridConfig(hasLegend, theme),
     xAxis: {
       type: 'category',
@@ -137,8 +139,8 @@ function getOption({
       axisLabel: {
         fontSize: theme.typography.overlineDelicate.fontSize,
         fontFamily: theme.typography.overlineDelicate.fontFamily,
-        showMinLabel: true,
-        showMaxLabel: true,
+        showMinLabel: undefined,
+        showMaxLabel: undefined,
         hideOverlap: true,
         margin: 0,
         padding: [
@@ -209,7 +211,9 @@ function getOption({
 
         const marker = typeof item.marker === 'string' ? item.marker : ''
         const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
-        const name = item.name ?? ''
+        const name = labelFormatter
+          ? String(labelFormatter(item.name ?? ''))
+          : (item.name ?? '')
 
         return { name, seriesName, marker, value: formattedValue }
       }),
@@ -222,6 +226,7 @@ function getOption({
       emphasis: {
         focus: 'series',
       },
+      ...buildHistogramSeriesLabelConfig(formatter),
     })),
   } as EchartOptionsProps
 }

package/src/widgets/pie/config.ts

@@ -12,6 +12,7 @@ import {
   createTooltipFormatter,
   createChartDownloadConfig,
   niceNum,
+  buildSeriesLabelConfig,
 } from '../utils/chart-config'
 
 export const pieDownloadConfig = createChartDownloadConfig<PieWidgetData>(
@@ -133,6 +134,7 @@ function getOption({
         emphasis: {
           focus: 'series',
         },
+        ...buildSeriesLabelConfig(formatter, 'x'),
       })),
     }
   }

package/src/widgets/scatterplot/config.ts

@@ -15,6 +15,7 @@ import {
   createChartDownloadConfig,
   applyYAxisFormatter,
   applyXAxisFormatter,
+  buildSeriesLabelConfig,
 } from '../utils/chart-config'
 
 export const scatterplotDownloadConfig =
@@ -129,6 +130,7 @@ function getOption({
       datasetIndex: index,
       type: 'scatter',
       symbolSize: 8,
+      ...buildSeriesLabelConfig(formatter),
     })),
   } as EchartOptionsProps
 }

package/src/widgets/timeseries/config.ts

@@ -16,6 +16,7 @@ import {
   createChartDownloadConfig,
   applyYAxisFormatter,
   applyXAxisFormatter,
+  buildSeriesLabelConfig,
 } from '../utils/chart-config'
 
 export const timeseriesDownloadConfig =
@@ -129,6 +130,7 @@ function getOption({
       emphasis: {
         focus: 'series',
       },
+      ...buildSeriesLabelConfig(formatter),
     })),
   } as EchartOptionsProps
 }

package/src/widgets/utils/chart-config/index.ts

@@ -21,6 +21,8 @@ export {
   applyXAxisFormatter,
   applyYAxisFormatter,
   niceNum,
+  buildSeriesLabelConfig,
+  buildHistogramSeriesLabelConfig,
 } from './option-builders'
 
 export { createChartDownloadConfig } from './download-config'

package/src/widgets/utils/chart-config/option-builders.test.ts

@@ -1,5 +1,10 @@
 import { describe, it, expect } from 'vitest'
-import { niceNum } from './option-builders'
+import type { CallbackDataParams } from 'echarts/types/dist/shared'
+import {
+  niceNum,
+  buildSeriesLabelConfig,
+  buildHistogramSeriesLabelConfig,
+} from './option-builders'
 
 describe('niceNum', () => {
   it('should return 0 for 0', () => {
@@ -38,3 +43,102 @@ describe('niceNum', () => {
     expect(niceNum(1)).toBe(1)
   })
 })
+
+describe('buildSeriesLabelConfig', () => {
+  it('should return empty object when no formatter provided', () => {
+    expect(buildSeriesLabelConfig()).toEqual({})
+    expect(buildSeriesLabelConfig(undefined)).toEqual({})
+  })
+
+  it('should return label config with formatter when formatter provided', () => {
+    const formatter = (v: number) => `$${v}`
+    const result = buildSeriesLabelConfig(formatter)
+    expect(result).toHaveProperty('label')
+    expect((result as { label: { formatter: unknown } }).label).toHaveProperty(
+      'formatter',
+    )
+  })
+
+  it('should format value from dataset params using y encode key', () => {
+    const formatter = (v: number) => `$${v}`
+    const result = buildSeriesLabelConfig(formatter, 'y')
+    const label = (
+      result as {
+        label: { formatter: (p: Partial<CallbackDataParams>) => string }
+      }
+    ).label
+    const params = {
+      encode: { y: [1] },
+      dimensionNames: ['category', 'amount'],
+      value: { category: 'A', amount: 42 },
+    }
+    expect(label.formatter(params as unknown as CallbackDataParams)).toBe('$42')
+  })
+
+  it('should format value from dataset params using x encode key', () => {
+    const formatter = (v: number) => `${v}%`
+    const result = buildSeriesLabelConfig(formatter, 'x')
+    const label = (
+      result as {
+        label: { formatter: (p: Partial<CallbackDataParams>) => string }
+      }
+    ).label
+    const params = {
+      encode: { x: [1] },
+      dimensionNames: ['name', 'value'],
+      value: { name: 'Foo', value: 75 },
+    }
+    expect(label.formatter(params as unknown as CallbackDataParams)).toBe('75%')
+  })
+
+  it('should return empty string when encode index is undefined', () => {
+    const formatter = (v: number) => `$${v}`
+    const result = buildSeriesLabelConfig(formatter, 'y')
+    const label = (
+      result as {
+        label: { formatter: (p: Partial<CallbackDataParams>) => string }
+      }
+    ).label
+    const params = {
+      encode: {},
+      dimensionNames: ['category', 'amount'],
+      value: { category: 'A', amount: 42 },
+    }
+    expect(label.formatter(params as unknown as CallbackDataParams)).toBe('')
+  })
+})
+
+describe('buildHistogramSeriesLabelConfig', () => {
+  it('should return empty object when no formatter provided', () => {
+    expect(buildHistogramSeriesLabelConfig()).toEqual({})
+    expect(buildHistogramSeriesLabelConfig(undefined)).toEqual({})
+  })
+
+  it('should format raw numeric value', () => {
+    const formatter = (v: number) => `${v} units`
+    const result = buildHistogramSeriesLabelConfig(formatter)
+    const label = (
+      result as {
+        label: { formatter: (p: Partial<CallbackDataParams>) => string }
+      }
+    ).label
+    const params = { value: 100 }
+    expect(label.formatter(params as unknown as CallbackDataParams)).toBe(
+      '100 units',
+    )
+  })
+
+  it('should stringify non-numeric values', () => {
+    const formatter = (v: number) => `${v} units`
+    const result = buildHistogramSeriesLabelConfig(formatter)
+    const label = (
+      result as {
+        label: { formatter: (p: Partial<CallbackDataParams>) => string }
+      }
+    ).label
+    const params = { value: 'text' }
+    expect(label.formatter(params as unknown as CallbackDataParams)).toBe(
+      'text',
+    )
+  })
+})

package/src/widgets/utils/chart-config/option-builders.ts

@@ -225,3 +225,59 @@ export function createTooltipFormatter(
     return tooltip(name, formattedValues.join(''))
   }
 }
+
+/**
+ * Builds a series `label` config that applies formatter to the data value
+ * extracted from a dataset row using ECharts encode/dimensionNames.
+ *
+ * Does not set `show` — labels remain hidden by default per ECharts defaults.
+ *
+ * @param formatter - Optional numeric value formatter
+ * @param encodeKey - The encode dimension key to extract ('y' for vertical charts, 'x' for horizontal)
+ */
+export function buildSeriesLabelConfig(
+  formatter?: (value: number) => string,
+  encodeKey = 'y',
+): { label: { formatter: (params: CallbackDataParams) => string } } | object {
+  if (!formatter) return {}
+
+  return {
+    label: {
+      formatter: (params: CallbackDataParams) => {
+        const encodeIndex = params.encode?.[encodeKey]?.[0]
+        if (encodeIndex === undefined) return ''
+        const dimName = params.dimensionNames?.[encodeIndex]
+        const row = params.value as Record<string, string | number>
+        const value = dimName ? row[dimName] : undefined
+        return typeof value === 'number'
+          ? formatter(value)
+          : String(value ?? '')
+      },
+    },
+  }
+}
+
+/**
+ * Builds a series `label` config that applies formatter to a raw numeric value.
+ * Used by histogram where series data is number[] (not datasets).
+ *
+ * Does not set `show` — labels remain hidden by default per ECharts defaults.
+ *
+ * @param formatter - Optional numeric value formatter
+ */
+export function buildHistogramSeriesLabelConfig(
+  formatter?: (value: number) => string,
+): { label: { formatter: (params: CallbackDataParams) => string } } | object {
+  if (!formatter) return {}
+
+  return {
+    label: {
+      formatter: (params: CallbackDataParams) => {
+        const value = params.value as number
+        return typeof value === 'number'
+          ? formatter(value)
+          : String(value ?? '')
+      },
+    },
+  }
+}

package/dist/options-D9wflre6.js

@@ -1,49 +0,0 @@
-function t({
-  theme: o
-}) {
-  return {
-    grid: {
-      left: parseInt(o.spacing(1)),
-      top: parseInt(o.spacing(3)),
-      right: parseInt(o.spacing(1)),
-      bottom: parseInt(o.spacing(4)),
-      containLabel: !0
-    },
-    toolbox: {
-      show: !1
-    },
-    tooltip: {
-      axisPointer: {
-        type: "shadow",
-        shadowStyle: {
-          color: "rgba(44,48,50, 0.08)"
-        }
-      },
-      backgroundColor: o.palette.grey[900],
-      borderWidth: 0,
-      padding: [parseInt(o.spacing(1)), parseInt(o.spacing(1))],
-      textStyle: {
-        color: o.palette.common.white,
-        fontSize: 11,
-        fontFamily: o.typography.caption.fontFamily
-      },
-      trigger: "axis"
-    },
-    legend: {
-      type: "scroll",
-      bottom: 0
-    },
-    axisPointer: {
-      lineStyle: {
-        color: o.palette.grey[400]
-      }
-    },
-    xAxis: {},
-    yAxis: {},
-    color: [o.palette.secondary.main, ...Object.values(o.palette.qualitative?.bold ?? {})]
-  };
-}
-export {
-  t as g
-};
-//# sourceMappingURL=options-D9wflre6.js.map

package/dist/options-D9wflre6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"options-D9wflre6.js","sources":["../src/widgets/echart/options.ts"],"sourcesContent":["import type { EchartOptionsProps, EchartWidgetOptionProps } from './types'\n\n/**\n * Returns the shared base ECharts options used across all EChart-based widgets (bar, pie, histogram, etc.).\n *\n * @remarks\n * Configures grid spacing, tooltip styling, legend, axis pointer, and the default color palette\n * derived from the MUI theme.\n */\nexport function getCommonOptions({\n  theme,\n}: EchartWidgetOptionProps<unknown>): EchartOptionsProps {\n  return {\n    grid: {\n      left: parseInt(theme.spacing(1)),\n      top: parseInt(theme.spacing(3)),\n      right: parseInt(theme.spacing(1)),\n      bottom: parseInt(theme.spacing(4)),\n      containLabel: true,\n    },\n    toolbox: {\n      show: false,\n    },\n    tooltip: {\n      axisPointer: {\n        type: 'shadow',\n        shadowStyle: {\n          color: 'rgba(44,48,50, 0.08)',\n        },\n      },\n      backgroundColor: theme.palette.grey[900],\n      borderWidth: 0,\n      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],\n      textStyle: {\n        color: theme.palette.common.white,\n        fontSize: 11,\n        fontFamily: theme.typography.caption.fontFamily,\n      },\n      trigger: 'axis',\n    },\n    legend: {\n      type: 'scroll',\n      bottom: 0,\n    },\n    axisPointer: {\n      lineStyle: {\n        color: theme.palette.grey[400],\n      },\n    },\n    xAxis: {},\n    yAxis: {},\n    color: [\n      theme.palette.secondary.main,\n      ...Object.values(\n        (theme.palette as { qualitative?: { bold?: Record<string, string> } })\n          .qualitative?.bold ?? {},\n      ),\n    ],\n  }\n}\n"],"names":["getCommonOptions","theme","grid","left","parseInt","spacing","top","right","bottom","containLabel","toolbox","show","tooltip","axisPointer","type","shadowStyle","color","backgroundColor","palette","grey","borderWidth","padding","textStyle","common","white","fontSize","fontFamily","typography","caption","trigger","legend","lineStyle","xAxis","yAxis","secondary","main","Object","values","qualitative","bold"],"mappings":"AASO,SAASA,EAAiB;AAAA,EAC/BC,OAAAA;AACgC,GAAuB;AACvD,SAAO;AAAA,IACLC,MAAM;AAAA,MACJC,MAAMC,SAASH,EAAMI,QAAQ,CAAC,CAAC;AAAA,MAC/BC,KAAKF,SAASH,EAAMI,QAAQ,CAAC,CAAC;AAAA,MAC9BE,OAAOH,SAASH,EAAMI,QAAQ,CAAC,CAAC;AAAA,MAChCG,QAAQJ,SAASH,EAAMI,QAAQ,CAAC,CAAC;AAAA,MACjCI,cAAc;AAAA,IAAA;AAAA,IAEhBC,SAAS;AAAA,MACPC,MAAM;AAAA,IAAA;AAAA,IAERC,SAAS;AAAA,MACPC,aAAa;AAAA,QACXC,MAAM;AAAA,QACNC,aAAa;AAAA,UACXC,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEFC,iBAAiBhB,EAAMiB,QAAQC,KAAK,GAAG;AAAA,MACvCC,aAAa;AAAA,MACbC,SAAS,CAACjB,SAASH,EAAMI,QAAQ,CAAC,CAAC,GAAGD,SAASH,EAAMI,QAAQ,CAAC,CAAC,CAAC;AAAA,MAChEiB,WAAW;AAAA,QACTN,OAAOf,EAAMiB,QAAQK,OAAOC;AAAAA,QAC5BC,UAAU;AAAA,QACVC,YAAYzB,EAAM0B,WAAWC,QAAQF;AAAAA,MAAAA;AAAAA,MAEvCG,SAAS;AAAA,IAAA;AAAA,IAEXC,QAAQ;AAAA,MACNhB,MAAM;AAAA,MACNN,QAAQ;AAAA,IAAA;AAAA,IAEVK,aAAa;AAAA,MACXkB,WAAW;AAAA,QACTf,OAAOf,EAAMiB,QAAQC,KAAK,GAAG;AAAA,MAAA;AAAA,IAC/B;AAAA,IAEFa,OAAO,CAAA;AAAA,IACPC,OAAO,CAAA;AAAA,IACPjB,OAAO,CACLf,EAAMiB,QAAQgB,UAAUC,MACxB,GAAGC,OAAOC,OACPpC,EAAMiB,QACJoB,aAAaC,QAAQ,CAAA,CAC1B,CAAC;AAAA,EAAA;AAGP;"}