@carto/ps-react-ui 4.7.1 → 4.8.0

package/src/widgets-v2/echart/echart.tsx

@@ -0,0 +1,199 @@
+import { useCallback, useMemo } from 'react'
+import type * as echarts from 'echarts'
+import {
+  applyTransforms,
+  setEchartInstance,
+  useWidgetId,
+  useWidgetShallow,
+  type Transform,
+} from '../stores'
+import { EchartUI, type EchartsEventHandler } from './echart-ui'
+
+/**
+ * Default ECharts `replaceMerge` keys for every widget. `dataZoom` and
+ * `brush` are omitted so ZoomToggle / BrushToggle's user-driven runtime
+ * state (slider range, brushed areas in `multiple` mode) survives unrelated
+ * re-renders. `series` and `dataset` are also omitted: EchartUI fingerprints
+ * them per-render and adds them to `replaceMerge` only when their shape
+ * actually changes, keeping ECharts' per-series runtime state alive when
+ * only callback-style fields differ.
+ *
+ * Lives in this module (not the generic store) because it's an ECharts
+ * concept. Module-private — callers should not need it.
+ */
+const DEFAULT_REPLACE_MERGE: readonly string[] = ['toolbox']
+
+/**
+ * Reactive context passed to every {@link OptionFactory} call so the
+ * factory can rebuild render-time pieces (axis label / tooltip formatters)
+ * from the live store. Drives RelativeData / consumer-formatter changes
+ * through to the chart without rebuilding the structural option.
+ */
+export interface OptionFactoryContext {
+  formatter?: (value: number) => string
+  labelFormatter?: (value: string | number) => string | number
+}
+
+/**
+ * The per-widget option factory — a single callable that owns BOTH phases
+ * of option construction:
+ *
+ * - **Structural phase** — when `option == null`, return the theme-aware
+ *   structural option (tooltip / legend / color palette / series
+ *   template, optionally merged with a consumer-supplied `optionsOverride`).
+ *   No data is read. `<Widget.Echart>` calls the factory with
+ *   `(undefined, undefined)` synchronously during render to derive the
+ *   structural base; `configTransforms` (Stack/Zoom/Brush) then mutate it
+ *   in the same render pass.
+ * - **Merge phase** — when `option` is defined, fuse `data` into the
+ *   post-configTransforms option at fusion time. `<Widget.Echart>` calls
+ *   the factory with `(transformed, data, ctx)` on every render.
+ *
+ * The two phases share a closure (the factory creator captures `theme`,
+ * `formatter`, `labelFormatter`, `seriesNames`, `selection`, `optionsOverride`,
+ * …), so structural and merge agree on the same widget configuration.
+ *
+ * The third arg `ctx` carries the **live** store-side formatters at the
+ * call site — distinct from the closure-time formatters because actions
+ * like RelativeData can install a percent formatter on the store after
+ * the factory was constructed. The merge phase reads from `ctx`; the
+ * structural phase typically uses the closure-time values.
+ */
+export type OptionFactory = (
+  option: echarts.EChartsOption | undefined,
+  data: unknown,
+  ctx?: OptionFactoryContext,
+) => echarts.EChartsOption
+
+export interface EchartProps {
+  /**
+   * The per-widget {@link OptionFactory}. Required — `<Widget.Echart>`
+   * derives the structural option from it (so configTransforms have a base
+   * to mutate) and fuses `state.data` into the post-pipeline option at
+   * render time. Wrap the factory creator in `useMemo` so its identity is
+   * stable across renders.
+   */
+  optionFactory: OptionFactory
+  onEvents?: Record<string, EchartsEventHandler>
+  init?: echarts.EChartsInitOpts
+  className?: string
+}
+
+interface EchartSlice {
+  data: unknown
+  configTransforms: readonly Transform[]
+  formatter?: (value: number) => string
+  labelFormatter?: (value: string | number) => string | number
+}
+
+const echartSelector = (s: {
+  data: unknown
+  configTransforms: readonly Transform[]
+  formatter?: (value: number) => string
+  labelFormatter?: (value: string | number) => string | number
+}): EchartSlice => ({
+  data: s.data,
+  configTransforms: s.configTransforms,
+  formatter: s.formatter,
+  labelFormatter: s.labelFormatter,
+})
+
+/**
+ * Stateful Echart bridge — owns the entire ECharts coupling. The whole
+ * option pipeline lives here, not in the store:
+ *
+ * 1. **Structural** — `optionFactory(undefined, undefined)` produces the
+ *    theme-aware base. Memoized on the factory identity, so the consumer's
+ *    `useMemo` ID gates the rebuild.
+ * 2. **Transformed** — `applyTransforms(structural, configTransforms)`
+ *    applies any registered configTransforms (Stack/Zoom/Brush) over the
+ *    structural base. Memoized on `[structural, configTransforms]`.
+ * 3. **`replaceMerge`** — derived from the enabled configTransforms'
+ *    `replaceMergeKeys`, deduped and sorted, seeded with
+ *    {@link DEFAULT_REPLACE_MERGE}. Memoized on `[configTransforms]` so
+ *    ECharts sees a stable array reference across non-transform changes.
+ * 4. **Merge** — `optionFactory(transformed, data, ctx)` fuses post-
+ *    pipeline data into the option. Reactive `ctx` carries the live store
+ *    formatters so RelativeData's percent formatter flows through without
+ *    a structural rebuild.
+ *
+ * The `<Widget.Provider>` doesn't know about the factory at all: it stays
+ * a renderer-agnostic shell. The `ProviderProps` surface has no ECharts
+ * coupling, so non-Echart widgets don't transitively import the type.
+ */
+export function Echart({
+  optionFactory,
+  onEvents,
+  init,
+  className,
+}: EchartProps) {
+  const id = useWidgetId()
+  const slice = useWidgetShallow(id, echartSelector)
+
+  // Publish the live ECharts instance to the per-id registry so actions
+  // (e.g. `ZoomToggle`'s disable handler) can reach it imperatively. The
+  // callback identity is stable across renders (only `id` is in deps), so
+  // EchartUI's init effect doesn't see a fresh `onInstance` and re-init.
+  const onInstance = useCallback(
+    (chart: echarts.ECharts | null) => setEchartInstance(id, chart),
+    [id],
+  )
+
+  // Destructure so React Compiler sees specific deps instead of inferring
+  // the whole `slice` object. `useWidgetShallow` already shallow-compares
+  // the slice, so per-field deps drive each memo exactly when its inputs
+  // change.
+  const {
+    data: sliceData,
+    configTransforms,
+    formatter: sliceFormatter,
+    labelFormatter: sliceLabelFormatter,
+  } = slice
+
+  const structural = useMemo(
+    () => optionFactory(undefined, undefined),
+    [optionFactory],
+  )
+
+  const transformed = useMemo(
+    () =>
+      applyTransforms(structural, configTransforms) as echarts.EChartsOption,
+    [structural, configTransforms],
+  )
+
+  const replaceMerge = useMemo(() => {
+    const keys = new Set<string>(DEFAULT_REPLACE_MERGE)
+    for (const xf of configTransforms) {
+      if (xf.enabled && xf.replaceMergeKeys?.length) {
+        for (const k of xf.replaceMergeKeys) keys.add(k)
+      }
+    }
+    return Array.from(keys).sort()
+  }, [configTransforms])
+
+  const option = useMemo(
+    () =>
+      optionFactory(transformed, sliceData, {
+        formatter: sliceFormatter,
+        labelFormatter: sliceLabelFormatter,
+      }),
+    [
+      optionFactory,
+      transformed,
+      sliceData,
+      sliceFormatter,
+      sliceLabelFormatter,
+    ],
+  )
+
+  return (
+    <EchartUI
+      option={option}
+      replaceMerge={replaceMerge}
+      onEvents={onEvents}
+      init={init}
+      onInstance={onInstance}
+      className={className}
+    />
+  )
+}

package/src/widgets-v2/echart/index.ts

@@ -0,0 +1,22 @@
+export {
+  EchartUI,
+  DEFAULT_INIT_OPTS,
+  type EchartUIProps,
+  type EchartsEventHandler,
+} from './echart-ui'
+export {
+  Echart,
+  type EchartProps,
+  type OptionFactory,
+  type OptionFactoryContext,
+} from './echart'
+export {
+  useChartSelection,
+  type SelectionKey,
+  type UseChartSelectionOptions,
+  type ChartSelectionWiring,
+} from './use-chart-selection'
+export {
+  observeResize,
+  __resetSharedResizeObserver,
+} from './shared-resize-observer'

package/src/widgets-v2/echart/shared-resize-observer.test.ts

@@ -0,0 +1,91 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import {
+  __resetSharedResizeObserver,
+  observeResize,
+} from './shared-resize-observer'
+
+// Track every ResizeObserver instance created in the test run so we can
+// assert on construction / disconnect lifecycle. The shared module is a
+// singleton — between tests we reset both its state and the mock.
+const instances: {
+  observe: ReturnType<typeof vi.fn>
+  unobserve: ReturnType<typeof vi.fn>
+  disconnect: ReturnType<typeof vi.fn>
+}[] = []
+
+class MockResizeObserver {
+  observe = vi.fn()
+  unobserve = vi.fn()
+  disconnect = vi.fn()
+  constructor() {
+    instances.push(this)
+  }
+}
+
+beforeEach(() => {
+  __resetSharedResizeObserver()
+  instances.length = 0
+  vi.stubGlobal('ResizeObserver', MockResizeObserver)
+})
+
+afterEach(() => {
+  __resetSharedResizeObserver()
+  vi.unstubAllGlobals()
+})
+
+describe('observeResize', () => {
+  it('lazily creates a single observer for the first subscriber', () => {
+    const el = document.createElement('div')
+    observeResize(el, () => undefined)
+    expect(instances).toHaveLength(1)
+    expect(instances[0]?.observe).toHaveBeenCalledWith(el)
+  })
+
+  it('reuses the singleton observer for additional subscribers', () => {
+    const a = document.createElement('div')
+    const b = document.createElement('div')
+    observeResize(a, () => undefined)
+    observeResize(b, () => undefined)
+    expect(instances).toHaveLength(1)
+    expect(instances[0]?.observe).toHaveBeenCalledTimes(2)
+  })
+
+  it('unobserves on unsubscribe but keeps the observer while other subscribers remain', () => {
+    const a = document.createElement('div')
+    const b = document.createElement('div')
+    const stopA = observeResize(a, () => undefined)
+    observeResize(b, () => undefined)
+    stopA()
+    expect(instances[0]?.unobserve).toHaveBeenCalledWith(a)
+    expect(instances[0]?.disconnect).not.toHaveBeenCalled()
+  })
+
+  it('disconnects the observer once the last subscriber leaves', () => {
+    const a = document.createElement('div')
+    const stop = observeResize(a, () => undefined)
+    stop()
+    expect(instances[0]?.disconnect).toHaveBeenCalledTimes(1)
+  })
+
+  it('returns a no-op cleanup when ResizeObserver is unavailable', () => {
+    vi.stubGlobal('ResizeObserver', undefined)
+    const el = document.createElement('div')
+    const cb = vi.fn()
+    const stop = observeResize(el, cb)
+    // No constructor calls — no instances tracked.
+    expect(instances).toHaveLength(0)
+    // Cleanup is safe to call.
+    expect(() => stop()).not.toThrow()
+  })
+
+  it('re-instantiates the observer when a new subscriber arrives after disconnect', () => {
+    const a = document.createElement('div')
+    const b = document.createElement('div')
+    observeResize(a, () => undefined)()
+    expect(instances).toHaveLength(1)
+    expect(instances[0]?.disconnect).toHaveBeenCalledTimes(1)
+    observeResize(b, () => undefined)
+    expect(instances).toHaveLength(2)
+    expect(instances[1]?.observe).toHaveBeenCalledWith(b)
+  })
+})

package/src/widgets-v2/echart/shared-resize-observer.ts

@@ -0,0 +1,56 @@
+type ResizeCallback = () => void
+
+const callbacks = new Map<Element, ResizeCallback>()
+let observer: ResizeObserver | null = null
+
+/**
+ * Returns the singleton ResizeObserver, lazily constructing it on first use.
+ * Returns `null` when `ResizeObserver` is not available in the global scope
+ * (SSR, very old browsers, or tests that intentionally remove it).
+ */
+function getObserver(): ResizeObserver | null {
+  if (typeof ResizeObserver === 'undefined') return null
+  observer ??= new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const callback = callbacks.get(entry.target)
+      callback?.()
+    }
+  })
+  return observer
+}
+
+const NOOP_CLEANUP = (): void => undefined
+
+export function observeResize(
+  element: Element,
+  callback: ResizeCallback,
+): () => void {
+  const ro = getObserver()
+  // Gracefully degrade when no ResizeObserver is available — consumers
+  // still see one initial measure() pass via their own effect; we just
+  // skip the subsequent resize-driven re-measures.
+  if (!ro) return NOOP_CLEANUP
+  callbacks.set(element, callback)
+  ro.observe(element)
+  return () => {
+    callbacks.delete(element)
+    if (observer) {
+      observer.unobserve(element)
+      // Disconnect the singleton once the last subscriber leaves so the
+      // observer doesn't outlive its consumers in SSR teardown / micro-
+      // frontend unmount scenarios. A subsequent observeResize() will
+      // lazily re-create it via getObserver().
+      if (callbacks.size === 0) {
+        observer.disconnect()
+        observer = null
+      }
+    }
+  }
+}
+
+/** @internal — for tests only. */
+export function __resetSharedResizeObserver(): void {
+  if (observer) observer.disconnect()
+  callbacks.clear()
+  observer = null
+}

package/src/widgets-v2/echart/style.ts

@@ -0,0 +1,8 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const styles = {
+  root: {
+    width: '100%',
+    minHeight: 0,
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/widgets-v2/echart/use-chart-selection.test.tsx

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi } from 'vitest'
+import { act, renderHook } from '@testing-library/react'
+import { useChartSelection } from './use-chart-selection'
+
+describe('useChartSelection', () => {
+  it('clicking an item toggles it into and out of the selection', () => {
+    const onSelectionChange = vi.fn()
+    const { result, rerender } = renderHook(
+      ({ selection }: { selection: readonly string[] }) =>
+        useChartSelection<string>({
+          selection,
+          onSelectionChange,
+          keyFromClick: (p) => (p as { name?: string }).name ?? null,
+          keysFromBrush: () => [],
+        }),
+      { initialProps: { selection: [] as readonly string[] } },
+    )
+
+    act(() => {
+      result.current.onEvents.click?.({ name: 'A' })
+    })
+    expect(onSelectionChange).toHaveBeenLastCalledWith(['A'])
+
+    rerender({ selection: ['A'] })
+    act(() => {
+      result.current.onEvents.click?.({ name: 'A' })
+    })
+    expect(onSelectionChange).toHaveBeenLastCalledWith([])
+  })
+
+  it('emits the brushed selection only on brushEnd (brushSelected just caches)', () => {
+    const onSelectionChange = vi.fn()
+    const { result } = renderHook(() =>
+      useChartSelection<number>({
+        selection: [99],
+        onSelectionChange,
+        keyFromClick: () => null,
+        keysFromBrush: (selected) => selected.flatMap((s) => s.dataIndex),
+      }),
+    )
+
+    // Mid-drag updates fire brushSelected — these should NOT call back.
+    act(() => {
+      result.current.onEvents.brushSelected?.({
+        batch: [{ selected: [{ seriesIndex: 0, dataIndex: [3] }] }],
+      })
+      result.current.onEvents.brushSelected?.({
+        batch: [{ selected: [{ seriesIndex: 0, dataIndex: [3, 7] }] }],
+      })
+      result.current.onEvents.brushSelected?.({
+        batch: [{ selected: [{ seriesIndex: 0, dataIndex: [3, 7, 11] }] }],
+      })
+    })
+    expect(onSelectionChange).not.toHaveBeenCalled()
+
+    // Releasing the brush fires brushEnd — that's when we commit.
+    act(() => {
+      result.current.onEvents.brushEnd?.({})
+    })
+    expect(onSelectionChange).toHaveBeenCalledTimes(1)
+    expect(onSelectionChange).toHaveBeenLastCalledWith([3, 7, 11])
+  })
+
+  it('reports null `selection` when the consumer passes nothing or an empty list', () => {
+    const { result, rerender } = renderHook(
+      ({ selection }: { selection?: readonly string[] }) =>
+        useChartSelection<string>({
+          selection,
+          onSelectionChange: () => undefined,
+          keyFromClick: () => null,
+          keysFromBrush: () => [],
+        }),
+      {
+        initialProps: { selection: undefined } as {
+          selection?: readonly string[]
+        },
+      },
+    )
+    expect(result.current.selection).toBeNull()
+    rerender({ selection: [] })
+    expect(result.current.selection).toBeNull()
+    rerender({ selection: ['A'] })
+    expect(result.current.selection).toEqual(['A'])
+  })
+
+  it('is a no-op when `onSelectionChange` is missing', () => {
+    const { result } = renderHook(() =>
+      useChartSelection<string>({
+        selection: [],
+        keyFromClick: (p) => (p as { name?: string }).name ?? null,
+        keysFromBrush: () => ['x'],
+      }),
+    )
+    // Neither call should throw — handler short-circuits without a callback.
+    expect(() => result.current.onEvents.click?.({ name: 'A' })).not.toThrow()
+    expect(() =>
+      result.current.onEvents.brushSelected?.({
+        batch: [{ selected: [{ seriesIndex: 0, dataIndex: [0] }] }],
+      }),
+    ).not.toThrow()
+  })
+
+  it('skips clicks where keyFromClick returns null (e.g. axis-label clicks)', () => {
+    const onSelectionChange = vi.fn()
+    const { result } = renderHook(() =>
+      useChartSelection<string>({
+        selection: [],
+        onSelectionChange,
+        keyFromClick: () => null,
+        keysFromBrush: () => [],
+      }),
+    )
+    act(() => {
+      result.current.onEvents.click?.({ name: 'A' })
+    })
+    expect(onSelectionChange).not.toHaveBeenCalled()
+  })
+})

package/src/widgets-v2/echart/use-chart-selection.ts

@@ -0,0 +1,115 @@
+import { useCallback, useMemo, useRef } from 'react'
+import type { CallbackDataParams } from 'echarts/types/dist/shared'
+import type { EchartsEventHandler } from './echart-ui'
+
+export type SelectionKey = string | number
+
+export interface UseChartSelectionOptions<K extends SelectionKey> {
+  /** Controlled selection. `undefined` is treated the same as `[]`. */
+  selection?: readonly K[]
+  /** Receives the next selection. When omitted the wiring is a no-op. */
+  onSelectionChange?: (next: readonly K[]) => void
+  /**
+   * Pull a selection key out of an ECharts `click` event. Return `null` to
+   * skip (e.g. a click on empty plot area). For Bar/Pie/Timeseries this is
+   * usually `(p) => p.name`; for Histogram/Scatterplot it's the dataIndex.
+   */
+  keyFromClick: (params: CallbackDataParams) => K | null
+  /**
+   * Map a `brushSelected` payload's `selected[*]` entries (each carrying a
+   * `seriesIndex` + `dataIndex[]`) into the full set of selection keys for
+   * the brushed area. Called once per brush event.
+   */
+  keysFromBrush: (
+    selected: readonly { seriesIndex: number; dataIndex: number[] }[],
+  ) => K[]
+}
+
+export interface ChartSelectionWiring<K extends SelectionKey> {
+  /**
+   * Pass straight to `<Widget.Echart onEvents={…}>`. Wires `click` and
+   * `brushSelected` so the user's interactions reach `onSelectionChange`.
+   */
+  onEvents: Record<string, EchartsEventHandler>
+  /**
+   * The current selection — `null` when the consumer didn't pass one or it's
+   * empty. Mergers should treat `null` as "no dimming" and a non-null array
+   * as "render only these as fully opaque, dim the rest".
+   */
+  selection: readonly K[] | null
+}
+
+/**
+ * Translate ECharts' click + brush events into a consumer-owned selection
+ * with the expected dashboard semantics:
+ *
+ *   - **Click toggles** — clicking an item adds it to the selection if
+ *     absent, removes it if present.
+ *   - **Brush replaces** — finishing a brush stroke overwrites the selection
+ *     with whatever the brush covered (drag-to-empty clears).
+ *
+ * Wire the returned `onEvents` into `<Widget.Echart>` and feed
+ * `wiring.selection` to the widget's option factory so the merger can dim
+ * non-selected rows at fusion time.
+ */
+export function useChartSelection<K extends SelectionKey>({
+  selection,
+  onSelectionChange,
+  keyFromClick,
+  keysFromBrush,
+}: UseChartSelectionOptions<K>): ChartSelectionWiring<K> {
+  const handleClick = useCallback(
+    (event: unknown) => {
+      if (!onSelectionChange) return
+      const params = event as CallbackDataParams
+      const key = keyFromClick(params)
+      if (key == null) return
+      const current = selection ?? []
+      const idx = current.indexOf(key)
+      const next =
+        idx === -1
+          ? [...current, key]
+          : [...current.slice(0, idx), ...current.slice(idx + 1)]
+      onSelectionChange(next)
+    },
+    [selection, onSelectionChange, keyFromClick],
+  )
+
+  // ECharts fires `brushSelected` on every pointer-move while the user is
+  // drawing a brush, but we only want to push to `onSelectionChange` once
+  // the gesture ends. Cache the latest `brushSelected` payload here, then
+  // commit on `brushEnd`.
+  const latestBrushedRef = useRef<
+    readonly { seriesIndex: number; dataIndex: number[] }[]
+  >([])
+
+  const handleBrushSelected = useCallback((event: unknown) => {
+    const params = event as {
+      batch?: {
+        selected?: { seriesIndex: number; dataIndex: number[] }[]
+      }[]
+    }
+    latestBrushedRef.current = params.batch?.[0]?.selected ?? []
+  }, [])
+
+  const handleBrushEnd = useCallback(() => {
+    if (!onSelectionChange) return
+    onSelectionChange(keysFromBrush(latestBrushedRef.current))
+  }, [onSelectionChange, keysFromBrush])
+
+  const onEvents = useMemo<Record<string, EchartsEventHandler>>(
+    () => ({
+      click: handleClick,
+      brushSelected: handleBrushSelected,
+      brushEnd: handleBrushEnd,
+    }),
+    [handleClick, handleBrushSelected, handleBrushEnd],
+  )
+
+  const wiringSelection = useMemo(
+    () => (selection && selection.length > 0 ? selection : null),
+    [selection],
+  )
+
+  return { onEvents, selection: wiringSelection }
+}

package/src/widgets-v2/formula/delta.tsx

@@ -0,0 +1,61 @@
+import { Chip, type ChipProps } from '@mui/material'
+import type { DeltaSeverity } from './types'
+
+export interface DeltaProps {
+  /** Numeric magnitude. Used for the default percent label and severity inference. */
+  value: number
+  /** Pre-formatted label override; skips the default percent formatter. */
+  label?: string
+  /**
+   * Visual treatment. When omitted it's derived from the sign of `value`:
+   * `>0 → 'positive'`, `<0 → 'negative'`, `=0 → 'neutral'`.
+   */
+  severity?: DeltaSeverity
+  /** Override the default `Intl.NumberFormat({style:'percent'})` formatter. */
+  format?: (value: number) => string
+  ChipProps?: ChipProps
+}
+
+const defaultPercentFormatter = new Intl.NumberFormat(undefined, {
+  style: 'percent',
+  signDisplay: 'always',
+  maximumFractionDigits: 1,
+})
+
+const SEVERITY_TO_COLOR: Record<DeltaSeverity, ChipProps['color']> = {
+  positive: 'success',
+  negative: 'error',
+  neutral: 'default',
+}
+
+/**
+ * Comparative delta rendered as a small filled chip. Colour is driven by
+ * `severity` (or the sign of `value`); content is `label`, the result of
+ * `format(value)`, or the default percent format.
+ */
+export function Delta({
+  value,
+  label,
+  severity,
+  format,
+  ChipProps: chipProps,
+}: DeltaProps) {
+  const resolvedSeverity = severity ?? inferSeverity(value)
+  const text =
+    label ?? (format ? format(value) : defaultPercentFormatter.format(value))
+  return (
+    <Chip
+      size='small'
+      color={SEVERITY_TO_COLOR[resolvedSeverity]}
+      label={text}
+      sx={{ fontWeight: 600 }}
+      {...chipProps}
+    />
+  )
+}
+
+function inferSeverity(value: number): DeltaSeverity {
+  if (value > 0) return 'positive'
+  if (value < 0) return 'negative'
+  return 'neutral'
+}