react-cheminfo 0.11.0 → 0.13.0

package/src/scatter/ui/ScatterMatrixCell.tsx

@@ -124,7 +124,7 @@ function frameProps(
 }
 
 // A diagonal cell has no pair of its own, so it offers itself against the
-// neighbour it is nearest: whoever clicked `PC 3` wants to see PC 3, and the
+// neighbour it is nearest: whoever clicked `PC3` wants to see PC3, and the
 // map has to plot it against something.
 function opener(
   grid: ScatterMatrixGrid,

package/src/scatter/ui/ScatterMatrixDiagonal.tsx

@@ -4,8 +4,9 @@ import type { ChartBins } from '../../chart/core/chartBins.ts';
 import type { ChartExtent } from '../../chart/core/chartExtent.ts';
 import type { MatrixLike } from '../../chart/core/matrix.ts';
 import type { ChartFrameRender } from '../../chart/ui/ChartFrame.tsx';
+import { formatPercent } from '../../format/core/numbers.ts';
+import type { ScatterGroupSpread } from '../core/scatterGroupSpread.ts';
 
-import type { ScatterGroupSpread } from './scatterGroupSpread.ts';
 import type { ScatterMatrixAxis } from './scatterMatrixProps.ts';
 
 /**
@@ -102,7 +103,7 @@ export function ScatterMatrixDiagonal(
           textAnchor="end"
           style={SHARE_STYLE}
         >
-          {`${(share * 100).toFixed(1)} %`}
+          {formatPercent(share)}
         </text>
       )}
     </g>

package/src/scatter/ui/ScatterOverlayLayers.tsx

@@ -0,0 +1,40 @@
+import type { ReactElement } from 'react';
+
+import { ScatterLabelLayer } from './ScatterLabelLayer.tsx';
+import { LASSO_STYLE } from './scatterPlotModel.ts';
+import type { ScatterLabels } from './useScatterLabels.ts';
+
+/** What {@link ScatterOverlayLayers} draws. */
+interface ScatterOverlayLayersProps {
+  /** The seated words, from `useScatterLabels`. */
+  labels: ScatterLabels;
+  /** Radius of a dot, which a line back to a moved word starts clear of. */
+  radius: number;
+  /** The lasso being drawn, as an SVG `d`; `''` between drags. */
+  lassoPath: string;
+}
+
+/**
+ * What a scatter figure draws over its dots and under the surface that takes
+ * the pointer: the names of the points, the names of the groups, and the lasso
+ * while it is being dragged — in that order, so a group's name is never hidden
+ * under a sample's and the lasso is never hidden under either.
+ * @param props - See {@link ScatterOverlayLayersProps}.
+ * @returns The layers.
+ */
+export function ScatterOverlayLayers(
+  props: ScatterOverlayLayersProps,
+): ReactElement {
+  const { labels, radius, lassoPath } = props;
+  return (
+    <>
+      {labels.named === undefined ? null : (
+        <ScatterLabelLayer labels={labels.named} radius={radius} />
+      )}
+      {labels.crowds === undefined ? null : (
+        <ScatterLabelLayer labels={labels.crowds} radius={radius} strong />
+      )}
+      {lassoPath === '' ? null : <path d={lassoPath} {...LASSO_STYLE} />}
+    </>
+  );
+}

package/src/scatter/ui/ScatterPlot.tsx

@@ -1,21 +1,13 @@
 import type { MouseEvent as ReactMouseEvent, ReactElement } from 'react';
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useMemo } from 'react';
 
 import { ChartFrame } from '../../chart/ui/ChartFrame.tsx';
 
 import { ScatterEllipseLayer } from './ScatterEllipseLayer.tsx';
-import { ScatterLabelLayer } from './ScatterLabelLayer.tsx';
 import { ScatterMarkLayer } from './ScatterMarkLayer.tsx';
+import { ScatterOverlayLayers } from './ScatterOverlayLayers.tsx';
 import { ScatterPointLayer } from './ScatterPointLayer.tsx';
-import { surfacePosition } from './lassoGesture.ts';
 import {
-  SCATTER_GROUP_LABEL_SIZE,
-  SCATTER_LABEL_SIZE,
-} from './scatterLabelBoxes.ts';
-import { placeScatterLabels } from './scatterLabelPlacement.ts';
-import { scatterGroupLabels, scatterPointLabels } from './scatterLabels.ts';
-import {
-  LASSO_STYLE,
   SCATTER_HOVER_SLACK,
   scatterGroupInk,
   scatterPixelMarks,
@@ -24,13 +16,7 @@ import {
 import type { ScatterPlotProps } from './scatterPlotProps.ts';
 import { useScatterFrame } from './useScatterFrame.ts';
 import { useScatterInteraction } from './useScatterInteraction.ts';
-
-export type {
-  ScatterGroup,
-  ScatterMarker,
-  ScatterPlotProps,
-  ScatterPointOpen,
-} from './scatterPlotProps.ts';
+import { useScatterLabels } from './useScatterLabels.ts';
 
 /**
  * A cloud of points with a lasso, group outlines and a hover card.
@@ -45,42 +31,15 @@ export type {
  * @returns The plot.
  */
 export function ScatterPlot(props: ScatterPlotProps): ReactElement {
-  const {
-    x,
-    y,
-    width,
-    height,
-    xAxis,
-    yAxis,
-    groupOf,
-    groups,
-    mutedGroups,
-    ellipse = null,
-    ellipseMinimumPoints,
-    ellipseFillOpacity,
-    showGroupMeans,
-    markers,
-    pointRadius = 3.5,
-    outlinedFrom,
-    pointLabels,
-    showGroupLabels = false,
-    selected,
-    defaultSelected,
-    onSelectionChange,
-    selectMode,
-    onHoverChange,
-    onPinChange,
-    onPointDoubleClick,
-    onLassoChange,
-    touchLasso,
-    viewport,
-    onViewportChange,
-    wheelZoom,
-    wheelZoomDelay,
-    overlay,
-    label,
-    testId,
-  } = props;
+  const { x, y, width, height, xAxis, yAxis, groupOf, groups } = props;
+  const { mutedGroups, ellipse = null, ellipseMinimumPoints } = props;
+  const { ellipseFillOpacity, showGroupMeans, markers } = props;
+  const { pointRadius = 3.5, outlinedFrom, pointLabels } = props;
+  const { showGroupLabels = false, selected, defaultSelected } = props;
+  const { onSelectionChange, selectMode, onHoverChange, onPinChange } = props;
+  const { onPointDoubleClick, onLassoChange, touchLasso, viewport } = props;
+  const { onViewportChange, wheelZoom, wheelZoomDelay, overlay } = props;
+  const { label, className, testId } = props;
 
   const frame = useScatterFrame({
     x,
@@ -94,51 +53,21 @@ export function ScatterPlot(props: ScatterPlotProps): ReactElement {
     wheelZoom,
     wheelZoomDelay,
   });
-  const { points, rect, toX, toY, inside, ref: surface, reset } = frame;
+  const { points, rect, toX, toY, inside, geometry } = frame;
+  const { ref: surface, reset } = frame;
   const ink = useMemo(
     () => scatterGroupInk(groups, mutedGroups),
     [groups, mutedGroups],
   );
-  const named = useMemo(
-    () =>
-      pointLabels === undefined
-        ? undefined
-        : placeScatterLabels(
-            scatterPointLabels(points, pointLabels, {
-              groupOf,
-              colors: ink.colors,
-            }),
-            {
-              fontSize: SCATTER_LABEL_SIZE,
-              radius: pointRadius,
-              bounds: rect,
-            },
-          ),
-    [points, pointLabels, groupOf, ink.colors, pointRadius, rect],
-  );
-  const crowds = useMemo(
-    () =>
-      showGroupLabels && groups !== undefined
-        ? placeScatterLabels(
-            scatterGroupLabels(
-              points,
-              groups.map((group) => group.label),
-              {
-                groupOf,
-                colors: ink.colors,
-              },
-            ),
-            {
-              fontSize: SCATTER_GROUP_LABEL_SIZE,
-              bold: true,
-              centered: true,
-              radius: pointRadius,
-              bounds: rect,
-            },
-          )
-        : undefined,
-    [points, showGroupLabels, groups, groupOf, ink.colors, pointRadius, rect],
-  );
+  const labels = useScatterLabels(points, {
+    pointLabels,
+    showGroupLabels,
+    groups,
+    groupOf,
+    colors: ink.colors,
+    radius: pointRadius,
+    bounds: rect,
+  });
   const interaction = useScatterInteraction({
     points,
     originX: rect.x,
@@ -152,44 +81,28 @@ export function ScatterPlot(props: ScatterPlotProps): ReactElement {
     hoverRadius: pointRadius + SCATTER_HOVER_SLACK,
     onHoverChange,
     onPinChange,
+    onLassoChange,
   });
 
   function handleDoubleClick(event: ReactMouseEvent<SVGRectElement>): void {
-    const at = surfacePosition(event, rect.x, rect.y);
-    const index = interaction.pointAt(at.x, at.y);
-    if (index === -1 || onPointDoubleClick === undefined) {
+    const opened = interaction.openAt(event);
+    if (opened === null || onPointDoubleClick === undefined) {
       reset();
       return;
     }
-    onPointDoubleClick({
-      index,
-      x: at.x,
-      y: at.y,
-      clientX: event.clientX,
-      clientY: event.clientY,
-    });
+    onPointDoubleClick(opened);
   }
 
-  // Held in a ref so an inline arrow, which is how every caller writes it, does
-  // not put the callback in the effect's dependencies and report a drag that
-  // never changed on every render.
-  const report = useRef(onLassoChange);
-  useLayoutEffect(() => {
-    report.current = onLassoChange;
-  });
-  const drawing = interaction.lasso.drawing;
-  useEffect(() => {
-    report.current?.(drawing);
-  }, [drawing]);
-
   return (
     <ChartFrame
       width={width}
       height={height}
       x={frame.xAxis}
       y={frame.yAxis}
-      busy={drawing}
+      geometry={geometry}
+      busy={interaction.lasso.drawing}
       overlay={overlay}
+      className={className}
       testId={testId}
       label={label ?? scatterPlotLabel(xAxis, yAxis, points.x.length)}
     >
@@ -228,15 +141,11 @@ export function ScatterPlot(props: ScatterPlotProps): ReactElement {
             showGroupMeans={showGroupMeans}
             marks={scatterPixelMarks(markers, toX, toY)}
           />
-          {named === undefined ? null : (
-            <ScatterLabelLayer labels={named} radius={pointRadius} />
-          )}
-          {crowds === undefined ? null : (
-            <ScatterLabelLayer labels={crowds} radius={pointRadius} strong />
-          )}
-          {interaction.lasso.pathData === '' ? null : (
-            <path d={interaction.lasso.pathData} {...LASSO_STYLE} />
-          )}
+          <ScatterOverlayLayers
+            labels={labels}
+            radius={pointRadius}
+            lassoPath={interaction.lasso.pathData}
+          />
           <rect
             {...rect}
             ref={surface}

package/src/scatter/ui/ScatterPointLayer.tsx

@@ -1,6 +1,8 @@
 import type { ReactElement } from 'react';
 import { memo } from 'react';
 
+import { chartGroupIndex } from '../../chart/core/chartGroups.ts';
+import { chartRoundPixel } from '../../chart/core/chartScale.ts';
 import type { ScreenPoints } from '../core/screenPoints.ts';
 
 /** What {@link ScatterPointLayer} draws. */
@@ -40,6 +42,18 @@ export interface ScatterPointLayerProps {
    * @default 3.5
    */
   radius?: number;
+  /**
+   * One radius per point, in pixels, for a figure whose dots are not all the
+   * same size — a cloud draws the dots at the front of its box larger.
+   * @default undefined — every dot takes `radius`
+   */
+  radii?: ArrayLike<number>;
+  /**
+   * The rows in the order they are painted, for a figure where a dot in front
+   * has to cover the one behind it.
+   * @default undefined — the rows are painted in their own order
+   */
+  order?: ArrayLike<number>;
   /**
    * The index from which points are drawn as outlines rather than filled.
    *
@@ -77,30 +91,36 @@ export const ScatterPointLayer = memo(function ScatterPointLayer(
     opacities,
     fallbackColor = 'var(--text-faint)',
     radius = 3.5,
+    radii,
+    order,
     outlinedFrom,
   } = props;
 
   const xs = points.x;
   const ys = points.y;
   const count = Math.min(xs.length, ys.length);
+  const steps = order === undefined ? count : Math.min(count, order.length);
   const hollowFrom = outlineStart(outlinedFrom, count);
+  const groups = colors?.length ?? 0;
   const ink = groupInk(colors, opacities, fallbackColor);
 
   const dots: ReactElement[] = [];
-  for (let index = 0; index < count; index++) {
+  for (let step = 0; step < steps; step++) {
+    const index = order === undefined ? step : (order[step] as number);
     const x = xs[index];
     const y = ys[index];
-    if (x === undefined || y === undefined) break;
+    if (x === undefined || y === undefined) continue;
     if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
-    const slot = (groupOf?.[index] ?? -1) + 1;
+    const slot = chartGroupIndex(groupOf, index, groups) + 1;
     const color = ink.colors[slot] ?? fallbackColor;
     const hollow = index >= hollowFrom;
+    const size = radii?.[index];
     dots.push(
       <circle
         key={index}
-        cx={round(x)}
-        cy={round(y)}
-        r={radius}
+        cx={chartRoundPixel(x)}
+        cy={chartRoundPixel(y)}
+        r={size === undefined ? radius : chartRoundPixel(size)}
         fill={hollow ? 'none' : color}
         stroke={hollow ? color : undefined}
         strokeWidth={hollow ? OUTLINE_WIDTH : undefined}
@@ -130,9 +150,8 @@ function outlineStart(outlinedFrom: number | undefined, count: number): number {
  *
  * Both arrays are offset by one, so a point in no group — which arrives as
  * `-1` — reads its fallback through the same indexed read as every other
- * point, and a group index past the end simply reads past the end. An opacity
- * of one is stored as `undefined` because that is the value the attribute is
- * then left out with.
+ * point. An opacity of one is stored as `undefined` because that is the value
+ * the attribute is then left out with.
  * @param colors - The colour of each group, in group order.
  * @param opacities - How strongly each group is drawn, in the same order.
  * @param fallbackColor - Colour of a point belonging to no group.
@@ -160,9 +179,3 @@ function groupInk(
  * exactly the wrong thing to say about a projected sample.
  */
 const OUTLINE_WIDTH = 1.5;
-
-/*
- * Two decimals, which is under a tenth of a device pixel at any zoom a browser
- * offers and keeps the markup short enough to read in a failing test.
- */
-const round = (value: number): number => Math.round(value * 100) / 100;

package/src/scatter/ui/index.ts

@@ -13,10 +13,8 @@ export type { ScatterEllipseLayerProps } from './ScatterEllipseLayer.tsx';
 export { ScatterEllipseLayer } from './ScatterEllipseLayer.tsx';
 export type { ScatterLabelLayerProps } from './ScatterLabelLayer.tsx';
 export { ScatterLabelLayer } from './ScatterLabelLayer.tsx';
-export type {
-  ScatterMarkLayerProps,
-  ScatterPixelMark,
-} from './ScatterMarkLayer.tsx';
+export type { ScatterMarkLayerProps } from './ScatterMarkLayer.tsx';
+export type { ScatterPixelMark } from './scatterMarkGlyph.tsx';
 export { ScatterMarkLayer } from './ScatterMarkLayer.tsx';
 export { ScatterMatrix } from './ScatterMatrix.tsx';
 export type { ScatterMatrixCellProps } from './ScatterMatrixCell.tsx';
@@ -26,12 +24,15 @@ export type {
   ScatterMatrixGrid,
 } from './ScatterMatrixDiagonal.tsx';
 export { ScatterMatrixDiagonal } from './ScatterMatrixDiagonal.tsx';
+export { ScatterPlot } from './ScatterPlot.tsx';
 export type {
   ScatterGroup,
-  ScatterMarker,
-  ScatterPlotProps,
-} from './ScatterPlot.tsx';
-export { ScatterPlot } from './ScatterPlot.tsx';
+  ScatterGroupProps,
+  ScatterInteractionProps,
+  ScatterPointOpen,
+} from './scatterFigureProps.ts';
+export type { ScatterGroupInk, ScatterPlotView } from './scatterPlotModel.ts';
+export type { ScatterMarker, ScatterPlotProps } from './scatterPlotProps.ts';
 export type { ScatterPointLayerProps } from './ScatterPointLayer.tsx';
 export { ScatterPointLayer } from './ScatterPointLayer.tsx';
 export type {
@@ -40,6 +41,7 @@ export type {
   LassoGesture,
   LassoGestureOptions,
   ScatterSurfaceProps,
+  SurfaceEvent,
 } from './lassoGesture.ts';
 export {
   DEFAULT_LASSO_MIN_DISTANCE,
@@ -50,10 +52,6 @@ export {
   scheduleFrame,
   surfacePosition,
 } from './lassoGesture.ts';
-export type {
-  ScatterGroupSpread,
-  ScatterGroupSpreadOptions,
-} from './scatterGroupSpread.ts';
 export type { LabelBox } from './scatterLabelBoxes.ts';
 export {
   LabelBoxField,
@@ -70,10 +68,6 @@ export type {
   ScatterLabelPlacementOptions,
 } from './scatterLabelPlacement.ts';
 export { placeScatterLabels } from './scatterLabelPlacement.ts';
-export {
-  scatterGroupSpread,
-  scatterPairEllipse,
-} from './scatterGroupSpread.ts';
 export { scatterMatrixDots } from './scatterMatrixDots.tsx';
 export {
   SCATTER_MATRIX_GAP,
@@ -108,7 +102,7 @@ export { useScatterFrame } from './useScatterFrame.ts';
 export type {
   ScatterInteractionApi,
   ScatterInteractionOptions,
-} from './useScatterInteraction.ts';
+} from './scatterInteractionTypes.ts';
 export { useScatterInteraction } from './useScatterInteraction.ts';
 export type {
   ScatterKeyboardApi,

package/src/scatter/ui/scatterFigureProps.ts

@@ -0,0 +1,191 @@
+/**
+ * What the flat map and the turning cloud are both handed.
+ *
+ * The two figures share their groups, their labels, their selection and their
+ * hover card on purpose — a reader who has learned one has learned the other —
+ * so the options that drive those are declared once here and each figure's
+ * own props add only what its frame needs.
+ */
+
+import type { ReactNode } from 'react';
+
+import type { ScatterSelectionMode } from '../core/scatterSelection.ts';
+
+import type { SelectionChange } from './useScatterSelection.ts';
+
+/** One group of points on a scatter plot. */
+export interface ScatterGroup {
+  /** A stable id, named in the legend and in a group's own callbacks. */
+  id: string;
+  /** What it is called, in the reader's words. */
+  label: string;
+  /** Its colour, normally from `chartSeriesColor`. */
+  color: string;
+}
+
+/** A point the reader opened, and where they opened it. */
+export interface ScatterPointOpen {
+  /** Its row, as an index into the arrays the caller passed. */
+  index: number;
+  /** Where the reader clicked, in pixels from the figure's left edge. */
+  x: number;
+  /** Where they clicked, in pixels from its top edge. */
+  y: number;
+  /**
+   * Where they clicked in the window, which is what an editor floating over
+   * the page — a menu, a popover, a dialog anchored on the point — is placed
+   * from. The pair above is the figure's own space, for a caller drawing
+   * inside it.
+   */
+  clientX: number;
+  /** Where they clicked in the window. */
+  clientY: number;
+}
+
+/** How the points of a scatter figure are grouped, sized and named. */
+export interface ScatterGroupProps {
+  /**
+   * Which group each point belongs to, as an index into `groups`. A point with
+   * `-1`, `NaN`, or an index outside the range, is drawn in the muted ink and
+   * left out of every outline.
+   * @default undefined — every point is one crowd
+   */
+  groupOf?: ArrayLike<number>;
+  /**
+   * The groups, in the order they are coloured and listed.
+   * @default undefined
+   */
+  groups?: readonly ScatterGroup[];
+  /**
+   * Which groups are drawn faint, by id — what a legend entry switches.
+   * @default undefined — every group is drawn in full
+   */
+  mutedGroups?: ReadonlySet<string>;
+  /**
+   * Radius of a dot, in pixels. A cloud draws the dot at the middle of its box
+   * at this size, one at the front larger and one at the back smaller.
+   * @default 3.5
+   */
+  pointRadius?: number;
+  /**
+   * The index from which points are drawn as outlines rather than filled.
+   *
+   * It is how a sample the model was built from is told from one placed into
+   * it afterwards: the first kind helped choose where the axes point and is
+   * bound to sit somewhere reasonable, while the second can land anywhere.
+   * Points before it are filled, points from it on are hollow.
+   * @default undefined — every point is filled
+   */
+  outlinedFrom?: number;
+  /**
+   * What each point is called, written beside its own dot. A point whose entry
+   * is `undefined` is left unnamed, so a caller may label the twenty samples
+   * it cares about and leave the crowd alone.
+   *
+   * Names are placed so that no two overlap: one that cannot be fitted near
+   * its own dot is moved aside with a line back to it, and one with nowhere
+   * left to go is dropped rather than written over another.
+   * @default undefined — no point is named
+   */
+  pointLabels?: ReadonlyArray<string | undefined>;
+  /**
+   * Whether each group's name is written once, over the middle of that group.
+   * It needs `groupOf` and `groups`, since it is their names it writes. They
+   * are placed like `pointLabels`, biggest group first, so the name that
+   * speaks for the most samples keeps the middle of its own crowd.
+   * @default false
+   */
+  showGroupLabels?: boolean;
+}
+
+/** How a reader picks, hovers and opens the points of a scatter figure. */
+export interface ScatterInteractionProps {
+  /**
+   * The selected rows. Present, the caller owns the selection; the outline
+   * drawn while a lasso is being dragged stays inside the component either
+   * way, so a controlled parent is never asked to re-render sixty times a
+   * second.
+   * @default undefined — the figure keeps its own
+   */
+  selected?: readonly number[];
+  /**
+   * The rows selected before the reader touches anything.
+   * @default undefined — nothing is selected
+   */
+  defaultSelected?: readonly number[];
+  /**
+   * Called when a lasso is released, a dot is clicked, or the keyboard commits
+   * — never while a lasso is being drawn, and never while a cloud is turned.
+   * @default undefined
+   */
+  onSelectionChange?: (change: SelectionChange) => void;
+  /**
+   * What a gesture does to the selection when no modifier is held. Shift
+   * always adds and Alt always removes, whatever this says.
+   * @default 'replace'
+   */
+  selectMode?: ScatterSelectionMode;
+  /**
+   * Called with the row under the pointer, or `-1` when the pointer is on
+   * none.
+   * @default undefined
+   */
+  onHoverChange?: (index: number) => void;
+  /**
+   * Called with the row whose card the reader pinned, or `-1`.
+   * @default undefined
+   */
+  onPinChange?: (index: number) => void;
+  /**
+   * Called when the reader double-clicks a point: the gesture for "tell me
+   * more about this one", or "let me change it".
+   *
+   * A double click is also two clicks, so the point is selected first and its
+   * card pinned. That is deliberate: the alternative is to hold every single
+   * click for the length of the double-click interval before acting on it, and
+   * clicking a dot is the commonest gesture in the figure — making it feel
+   * slow to save a redundant selection on the rarest one is the wrong trade.
+   * On a cloud it fires whichever gesture a drag is set to, since a double
+   * click is not a drag.
+   * @default undefined
+   */
+  onPointDoubleClick?: (point: ScatterPointOpen) => void;
+  /**
+   * Called when a lasso starts being drawn and again when it ends, and never
+   * in between.
+   *
+   * The floating chrome reads the drag from the overlay surface instead, which
+   * costs the caller nothing. This is for the piece of chrome that has to say
+   * what letting go will do while sitting *outside* the figure — a caption in
+   * the flow beneath it, which cannot reach that surface.
+   * @default undefined
+   */
+  onLassoChange?: (drawing: boolean) => void;
+  /**
+   * How long the pointer has to rest over the figure before the wheel is
+   * caught, in milliseconds.
+   * @default CHART_WHEEL_DWELL
+   */
+  wheelZoomDelay?: number;
+  /**
+   * What floats over the figure — an `OverlayBar`, a legend, a caption, a
+   * readout.
+   * @default undefined
+   */
+  overlay?: ReactNode;
+  /**
+   * What a screen reader is told the figure shows.
+   * @default a sentence built from the axis names and the point count
+   */
+  label?: string;
+  /**
+   * A class for the figure's outermost element, for a site placing it.
+   * @default undefined
+   */
+  className?: string;
+  /**
+   * Value of the `data-testid` attribute of the wrapper.
+   * @default undefined
+   */
+  testId?: string;
+}