react-cheminfo 0.9.0 → 0.10.0

package/src/projection/ui/ProjectionPanel.tsx

@@ -0,0 +1,199 @@
+import type { PointerEvent, ReactElement } from 'react';
+import { useRef, useState } from 'react';
+
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+import type { ProjectionSamples } from '../core/projectionSamples.ts';
+
+import { ProjectionMapTab } from './ProjectionMapTab.tsx';
+import { ProjectionPairsTab } from './ProjectionPairsTab.tsx';
+import { ProjectionReadout } from './ProjectionReadout.tsx';
+import { ProjectionSharesTab } from './ProjectionSharesTab.tsx';
+import type { ProjectionVariableTrack } from './ProjectionVariablesTab.tsx';
+import { ProjectionVariablesTab } from './ProjectionVariablesTab.tsx';
+import type { ProjectionMapView } from './projectionMapView.ts';
+import type { ProjectionModels } from './projectionTabModels.ts';
+import type { ProjectionStateApi } from './useProjectionState.ts';
+
+/** What {@link ProjectionPanel} needs. */
+export interface ProjectionPanelProps {
+  /** The tab, the options and the selection every tab shares. */
+  state: ProjectionStateApi;
+  /** What the run produced, whatever produced it. */
+  result: ProjectionResult;
+  /** Who the rows are. */
+  samples: ProjectionSamples;
+  /** The words the viewer writes, already merged over the defaults. */
+  copy: ProjectionCopy;
+  /** The two figures the bar explains and a tab draws. */
+  models: ProjectionModels;
+  /** The map's frame, its last report, and the words around it. */
+  map: ProjectionMapView;
+  /** Width of the figure, in pixels. */
+  width: number;
+  /** Height of the figure, in pixels. */
+  height: number;
+  /** How a number is written in a hover card and a readout. */
+  formatValue: (value: number) => string;
+  /** Stem of the `id` every pill carries, which names this panel's own tab. */
+  baseId: string;
+  /** The `id` the pills point at, when there are pills. */
+  panelId: string;
+  /** Whether the bar carries a strip of views at all. */
+  strip: boolean;
+  /**
+   * Called with the row under the pointer on the map, or `null`.
+   * @default undefined
+   */
+  onHoverSample?: (id: string | null) => void;
+  /**
+   * Called as the pointer crosses the "what differs" panels.
+   * @default undefined
+   */
+  onTrackVariable?: (track: ProjectionVariableTrack | null) => void;
+  /**
+   * Whether a drag on a touch screen draws a lasso rather than scrolling.
+   * @default false
+   */
+  touchLasso?: boolean;
+  /**
+   * Whether the wheel zooms the map, once the pointer has rested on it.
+   * @default false
+   */
+  wheelZoom?: boolean;
+}
+
+/**
+ * The one figure showing, and the card that follows the pointer over it.
+ *
+ * The four tabs are drawn here rather than in the shell because only one of
+ * them is ever rendered and all four sit in the same box under the same bar: a
+ * reader moving between them should see the picture change and nothing else
+ * move. The pointer is tracked at this level for the same reason — the card is
+ * the viewer's, so it says the same thing wherever it is raised.
+ *
+ * The box is named whether or not there is a strip of tabs above it, because
+ * that name is what the save glyph in the bar points at: a figure is saved by
+ * the `id` of the box holding it, and a box named only where there happen to be
+ * several tabs would be savable on some viewers and not on others.
+ * @param props - See {@link ProjectionPanelProps}.
+ * @returns The panel.
+ */
+export function ProjectionPanel(props: ProjectionPanelProps): ReactElement {
+  const { state, result, samples, copy, models, map } = props;
+  const { width, height, formatValue, baseId, panelId, strip } = props;
+  const { onHoverSample, onTrackVariable, touchLasso, wheelZoom } = props;
+
+  const box = useRef<HTMLDivElement>(null);
+  const pointer = useRef(NOWHERE);
+  const [anchor, setAnchor] = useState(NO_ANCHOR);
+
+  function trackPointer(event: PointerEvent<HTMLDivElement>): void {
+    const rect = box.current?.getBoundingClientRect();
+    if (rect === undefined) return;
+    pointer.current = {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top,
+    };
+  }
+
+  function noteHover(index: number): void {
+    setAnchor({ index, ...pointer.current });
+    onHoverSample?.(index < 0 ? null : (samples.ids[index] ?? null));
+  }
+
+  return (
+    <div
+      ref={box}
+      id={panelId}
+      role={strip ? 'tabpanel' : undefined}
+      aria-labelledby={strip ? `${baseId}-${state.tab}` : undefined}
+      onPointerMove={trackPointer}
+    >
+      {state.tab === 'pairs' ? (
+        <ProjectionPairsTab
+          result={result}
+          groups={state.groups}
+          options={state.options}
+          copy={copy}
+          width={width}
+          height={height}
+          selected={state.selected}
+          onSelectPair={state.selectPair}
+        />
+      ) : null}
+      {state.tab === 'variables' ? (
+        <ProjectionVariablesTab
+          profiles={models.profiles}
+          options={state.options}
+          copy={copy}
+          sampleName={models.sampleName}
+          width={width}
+          height={height}
+          onTrackVariable={onTrackVariable}
+          formatValue={formatValue}
+        />
+      ) : null}
+      {state.tab === 'shares' ? (
+        <ProjectionSharesTab
+          result={result}
+          shares={models.shares}
+          copy={copy}
+          width={width}
+          height={height}
+        />
+      ) : null}
+      {state.tab === 'map' ? (
+        <ProjectionMapTab
+          result={result}
+          groups={state.groups}
+          options={state.options}
+          copy={copy}
+          chrome={map.chrome}
+          ids={samples.ids}
+          viewport={map.viewport}
+          onViewportChange={map.setViewport}
+          wheelZoom={wheelZoom}
+          report={map.report}
+          width={width}
+          height={height}
+          selected={state.selected}
+          onSelectionChange={map.settle}
+          onHoverChange={noteHover}
+          touchLasso={touchLasso}
+          hoverCard={
+            anchor.index < 0 ? null : (
+              <ProjectionReadout
+                index={anchor.index}
+                result={result}
+                samples={samples}
+                groups={state.groups}
+                xAxis={state.options.xAxis}
+                yAxis={state.options.yAxis}
+                x={anchor.x}
+                y={anchor.y}
+                boxWidth={width}
+                boxHeight={height}
+                formatValue={formatValue}
+              />
+            )
+          }
+        />
+      ) : null}
+    </div>
+  );
+}
+
+/** Where the pointer is before it has been anywhere. */
+const NOWHERE = { x: 0, y: 0 };
+
+/**
+ * No row under the pointer, which is what draws no card at all.
+ *
+ * The pointer's position is kept in a ref and read into this state only when
+ * the row under it changes, because a card that re-rendered the figure on
+ * every pointer move would repaint two thousand dots sixty times a second to
+ * shift a tooltip by three pixels. Between two rows the card therefore stands
+ * where it was raised, which is where the reader is already looking.
+ */
+const NO_ANCHOR = { index: -1, x: 0, y: 0 };

package/src/projection/ui/ProjectionReadout.tsx

@@ -0,0 +1,149 @@
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+
+import type { OverlayReadoutRow } from '../../overlay/ui/OverlayReadout.tsx';
+import { OverlayReadout } from '../../overlay/ui/OverlayReadout.tsx';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+import type {
+  ProjectionSamples,
+  ResolvedProjectionGroups,
+} from '../core/projectionSamples.ts';
+
+import { formatProjectionValue } from './projectionFormat.ts';
+
+/** What {@link ProjectionReadout} says, and where. */
+export interface ProjectionReadoutProps {
+  /** The row the card is about, as an index into the score matrix. */
+  index: number;
+  /** What the run produced, for the axis names and the sample's own scores. */
+  result: ProjectionResult;
+  /** Who the rows are. */
+  samples: ProjectionSamples;
+  /** The groups as the figure draws them, for the row's group and its colour. */
+  groups: ResolvedProjectionGroups;
+  /** Which axis is drawn horizontally, from 0. */
+  xAxis: number;
+  /** Which axis is drawn vertically. */
+  yAxis: number;
+  /** Where the pointer is, in pixels from the figure's left. */
+  x: number;
+  /** Where the pointer is, in pixels from the figure's top. */
+  y: number;
+  /** Width of the figure, so the card can be flipped rather than clipped. */
+  boxWidth: number;
+  /** Height of the figure. */
+  boxHeight: number;
+  /**
+   * How a number is written.
+   * @default a rounding to three decimals with the trailing zeros dropped
+   */
+  formatValue?: (value: number) => string;
+  /**
+   * The most rows shown before a `+ n more` footer.
+   * @default 12
+   */
+  maxRows?: number;
+  /**
+   * Whether the card stays until it is dismissed.
+   * @default false
+   */
+  pinned?: boolean;
+  /**
+   * Called when the reader dismisses a pinned card.
+   * @default undefined
+   */
+  onUnpin?: () => void;
+  /**
+   * Value of the `data-testid` attribute of the card.
+   * @default undefined
+   */
+  testId?: string;
+}
+
+/**
+ * The card that says everything known about the sample under the pointer.
+ *
+ * It opens with what the reader can name the sample by, and only then with the
+ * two numbers the figure is drawn from: a card that led with `−2.257` would be
+ * asking a reader who has never met a component to care about the arithmetic
+ * before they have found their own sample in it. Whatever else is known comes
+ * last and in the caller's own order, because it is the part they came for and
+ * the part this package cannot guess at.
+ * @param props - See {@link ProjectionReadoutProps}.
+ * @returns The card.
+ */
+export function ProjectionReadout(props: ProjectionReadoutProps): ReactElement {
+  const {
+    index,
+    result,
+    samples,
+    groups,
+    xAxis,
+    yAxis,
+    x,
+    y,
+    boxWidth,
+    boxHeight,
+    formatValue = formatProjectionValue,
+    maxRows = 12,
+    pinned = false,
+    onUnpin,
+    testId,
+  } = props;
+
+  const rows = useMemo(
+    () =>
+      readoutRows(index, result, samples, groups, xAxis, yAxis, formatValue),
+    [formatValue, groups, index, result, samples, xAxis, yAxis],
+  );
+
+  return (
+    <OverlayReadout
+      x={x}
+      y={y}
+      boxWidth={boxWidth}
+      boxHeight={boxHeight}
+      title={samples.ids[index] ?? ''}
+      rows={rows}
+      maxRows={maxRows}
+      pinned={pinned}
+      onUnpin={onUnpin}
+      testId={testId}
+    />
+  );
+}
+
+function readoutRows(
+  index: number,
+  result: ProjectionResult,
+  samples: ProjectionSamples,
+  groups: ResolvedProjectionGroups,
+  xAxis: number,
+  yAxis: number,
+  formatValue: (value: number) => string,
+): OverlayReadoutRow[] {
+  const rows: OverlayReadoutRow[] = [];
+  const { axes, scores } = result;
+  const known = index >= 0 && index < scores.rows;
+
+  for (const axis of [xAxis, yAxis]) {
+    const name = axes[axis]?.name;
+    if (name === undefined) continue;
+    rows.push({
+      label: name,
+      value: formatValue(known ? scores.get(index, axis) : Number.NaN),
+    });
+  }
+
+  const group = groups.entries[groups.groupOf[index] ?? -1];
+  if (group !== undefined) {
+    rows.push({ label: groups.label, value: group.label, color: group.color });
+  }
+
+  if (known && samples.fields !== undefined) {
+    for (const field of samples.fields(index)) {
+      rows.push({ label: field.label, value: field.value });
+    }
+  }
+  return rows;
+}

package/src/projection/ui/ProjectionSharesControls.tsx

@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react';
+
+import type { OverlayTier } from '../../overlay/core/overlayTiers.ts';
+import { OverlayNumber } from '../../overlay/ui/OverlayNumber.tsx';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+
+import { PROJECTION_SHARE_STEP, WHOLE_SHARE } from './projectionTabStyles.ts';
+
+/** What the shares control is drawn from. */
+export interface ProjectionSharesControlsProps {
+  /** What the figure is showing; only the target is read here. */
+  options: ProjectionOptions;
+  /** Called with only the options that changed, for the viewer to merge. */
+  onChange: (patch: Partial<ProjectionOptions>) => void;
+  /** The words the bar writes, already merged over the defaults. */
+  copy: ProjectionCopy;
+  /**
+   * How much of itself the bar is writing. The caption in front of the
+   * stepper is the first thing to go, since the percentage beside it is what
+   * the reader is looking at and the name is in every announcement.
+   * @default 'full'
+   */
+  tier?: OverlayTier;
+}
+
+/**
+ * How much of the differences the reader wants accounted for, which is the
+ * only thing this tab has to change.
+ *
+ * It is written on the bar rather than left behind the cog because it is the
+ * tab's whole question — how many components do I have to keep — and a reader
+ * should not have to open anything to see the answer the figure is drawn
+ * against. The panel behind the cog offers the same setting named and
+ * explained; here it is the value alone.
+ * @param props - See {@link ProjectionSharesControlsProps}.
+ * @returns The stepper.
+ */
+export function ProjectionSharesControls(
+  props: ProjectionSharesControlsProps,
+): ReactElement {
+  const { options, onChange, copy, tier = 'full' } = props;
+
+  return (
+    <OverlayNumber
+      label={copy.help.shareTarget.title}
+      hideLabel={tier !== 'full'}
+      value={Math.round(options.shareTarget * WHOLE_SHARE)}
+      min={0}
+      max={WHOLE_SHARE}
+      step={PROJECTION_SHARE_STEP}
+      unit="%"
+      onChange={(target) => onChange({ shareTarget: target / WHOLE_SHARE })}
+    />
+  );
+}

package/src/projection/ui/ProjectionSharesMarks.tsx

@@ -0,0 +1,241 @@
+import type { ReactElement } from 'react';
+
+import type { ChartBand } from '../../chart/core/chartBand.ts';
+import { chartBand, chartBandCenter } from '../../chart/core/chartBand.ts';
+import type { ChartFrameRender } from '../../chart/ui/ChartFrame.tsx';
+import type { ExplainedShares } from '../core/explainedShares.ts';
+
+import {
+  AXIS_CAPTION_STYLE,
+  AXIS_LAYER_STYLE,
+  AXIS_NAME_STYLE,
+  SHARES_BOTTOM_ROOM,
+  SHARES_CAPTION_OFFSET,
+  SHARES_LEFT_ROOM,
+  SHARES_NAME_OFFSET,
+  SHARES_RIGHT_ROOM,
+  TOTAL_LABEL_STYLE,
+  WHOLE_SHARE,
+} from './projectionTabStyles.ts';
+
+/** What {@link SharesMarks} draws. */
+export interface SharesMarksProps {
+  /** The bars, their running total and the target they are measured against. */
+  shares: ExplainedShares;
+  /** The frame they are drawn in. */
+  frame: ChartFrameRender;
+  /** The slots the bars stand on. */
+  band: ChartBand;
+}
+
+/**
+ * The bars, the running total over them, and the target they are measured
+ * against.
+ *
+ * Every bar takes its own component's colour. The total is one grey line with
+ * a dot per component and its name at its right-hand end, so the reader is
+ * never sent to a key to find out which of the two things on the chart is
+ * which. The target is one dashed rule and a light band reaching the first
+ * component that meets it — one honest marker, where Kaiser's rule and an
+ * elbow would be two folk rules a novice reads as verdicts.
+ * @param props - See {@link SharesMarksProps}.
+ * @returns The marks.
+ */
+export function SharesMarks(props: SharesMarksProps): ReactElement {
+  const { shares, frame, band } = props;
+  const { components, target, reachesTargetAt } = shares;
+  const { plot, y } = frame;
+  const zero = y.offset;
+  const bars: ReactElement[] = [];
+  const dots: ReactElement[] = [];
+  let path = '';
+  let lastX = plot.left;
+  let lastY = zero;
+
+  for (let index = 0; index < components.length; index++) {
+    const component = components[index];
+    if (component === undefined) continue;
+    const top = y.offset + component.share * WHOLE_SHARE * y.factor;
+    const middle = chartBandCenter(band, index);
+    bars.push(
+      <rect
+        key={component.number}
+        data-component={component.number}
+        x={middle - band.bandWidth / 2}
+        y={Math.min(top, zero)}
+        width={band.bandWidth}
+        height={Math.abs(zero - top)}
+        fill={component.color}
+      >
+        <title>{hoverCard(shares, index)}</title>
+      </rect>,
+    );
+    lastX = middle;
+    lastY = y.offset + component.cumulative * WHOLE_SHARE * y.factor;
+    path += `${index === 0 ? 'M' : 'L'}${round(middle)} ${round(lastY)}`;
+    dots.push(<circle key={component.number} cx={middle} cy={lastY} r={2.5} />);
+  }
+
+  const total = components.at(-1)?.cumulative ?? 0;
+  return (
+    <>
+      {target > 0 ? targetMark(target, reachesTargetAt, frame, band) : null}
+      <g data-shares="bars">{bars}</g>
+      <path
+        data-shares="total"
+        d={path}
+        fill="none"
+        stroke="var(--text-muted)"
+        strokeWidth={1.5}
+      />
+      <g data-shares="total-dots" fill="var(--text-muted)">
+        {dots}
+      </g>
+      <text
+        x={lastX - DOT_GAP}
+        y={Math.max(plot.top + LABEL_ROOM, lastY - DOT_GAP)}
+        textAnchor="end"
+        style={TOTAL_LABEL_STYLE}
+      >
+        {`Running total ${(total * WHOLE_SHARE).toFixed(1)}%`}
+      </text>
+    </>
+  );
+}
+
+/** What {@link SharesAxis} writes. */
+export interface SharesAxisProps {
+  /** The bars, for their names. */
+  shares: ExplainedShares;
+  /** Total width of the figure, in pixels, which the slots are laid out in. */
+  width: number;
+  /** Total height, which fixes the baseline the names sit on. */
+  height: number;
+  /** What the axis measures, written under the names. */
+  caption: string;
+}
+
+/**
+ * The component names under the bars, and what the axis measures under them.
+ *
+ * They are written in a layer of their own because a frame clips its children
+ * to the plot and these sit below it — the same reason the tracked line chart
+ * writes its slot names this way rather than as frame children.
+ * @param props - See {@link SharesAxisProps}.
+ * @returns The names.
+ */
+export function SharesAxis(props: SharesAxisProps): ReactElement {
+  const { shares, width, height, caption } = props;
+  const right = Math.max(SHARES_LEFT_ROOM, width - SHARES_RIGHT_ROOM);
+  const band = chartBand(shares.components.length, SHARES_LEFT_ROOM, right);
+  const baseline = height - SHARES_BOTTOM_ROOM;
+
+  return (
+    <svg width="100%" height="100%" style={AXIS_LAYER_STYLE}>
+      {shares.components.map((component, index) => (
+        <text
+          key={component.number}
+          x={chartBandCenter(band, index)}
+          y={baseline + SHARES_NAME_OFFSET}
+          textAnchor="middle"
+          style={AXIS_NAME_STYLE}
+        >
+          {component.label}
+        </text>
+      ))}
+      <text
+        x={(SHARES_LEFT_ROOM + right) / 2}
+        y={baseline + SHARES_CAPTION_OFFSET}
+        textAnchor="middle"
+        style={AXIS_CAPTION_STYLE}
+      >
+        {caption}
+      </text>
+    </svg>
+  );
+}
+
+/**
+ * The dashed rule at the target, and the light band over the components that
+ * reach it.
+ * @param target - The cumulative share the marker aims at.
+ * @param reachesTargetAt - The first component to meet it, counting from one.
+ * @param frame - The frame the marks are drawn in.
+ * @param band - The slots the bars stand on.
+ * @returns The marker.
+ */
+function targetMark(
+  target: number,
+  reachesTargetAt: number | null,
+  frame: ChartFrameRender,
+  band: ChartBand,
+): ReactElement {
+  const { plot, y } = frame;
+  const at = y.offset + target * WHOLE_SHARE * y.factor;
+  const covered =
+    reachesTargetAt === null
+      ? 0
+      : band.offset + band.step * reachesTargetAt - plot.left;
+
+  return (
+    <g data-shares="target">
+      {covered > 0 ? (
+        <rect
+          x={plot.left}
+          y={plot.top}
+          width={covered}
+          height={plot.bottom - plot.top}
+          fill={TARGET_BAND}
+        />
+      ) : null}
+      <line
+        x1={plot.left}
+        x2={plot.right}
+        y1={at}
+        y2={at}
+        stroke="var(--border-strong)"
+        strokeWidth={1}
+        strokeDasharray="4 3"
+      />
+    </g>
+  );
+}
+
+/**
+ * What the pointer is told about one bar: its own share, the running total up
+ * to it, and the variance of its scores as fine print for the one reader in
+ * fifty who wants it.
+ * @param shares - The bars.
+ * @param index - Which one, from 0.
+ * @returns The card's text.
+ */
+function hoverCard(shares: ExplainedShares, index: number): string {
+  const component = shares.components[index];
+  if (component === undefined) return '';
+  const own = (component.share * WHOLE_SHARE).toFixed(2);
+  const together = (component.cumulative * WHOLE_SHARE).toFixed(2);
+  const line = `${component.label} — ${own}% of the differences. The first ${component.number} together: ${together}%.`;
+  const { eigenvalue } = component;
+  return eigenvalue === undefined
+    ? line
+    : `${line}\nλ = ${Math.round(eigenvalue * ROUNDING) / ROUNDING}`;
+}
+
+/** The light wash over the components that reach the target. */
+const TARGET_BAND = 'color-mix(in srgb, var(--border-strong) 22%, transparent)';
+
+/**
+ * How far the total's name sits from its last dot, and how far it is kept
+ * below the top of the plot.
+ *
+ * A whole model's total is 100 %, which lands the last dot on the very top
+ * rule — and a name six pixels above that is six pixels outside the frame's
+ * clip, so it would simply not be drawn.
+ */
+const DOT_GAP = 6;
+const LABEL_ROOM = 12;
+
+/** Decimals the fine print rounds an eigenvalue to. */
+const ROUNDING = 1000;
+
+const round = (value: number): number => Math.round(value * 100) / 100;

package/src/projection/ui/ProjectionSharesMore.tsx

@@ -0,0 +1,53 @@
+import type { ReactElement } from 'react';
+
+import { OverlayNumber } from '../../overlay/ui/OverlayNumber.tsx';
+import { OverlayPanel } from '../../overlay/ui/OverlayPanel.tsx';
+import { PROJECTION_PANEL_NAME } from '../core/projectionStrings.ts';
+import { PROJECTION_TAB_DEFAULTS } from '../core/projectionTabDefaults.ts';
+
+import type { ProjectionSharesControlsProps } from './ProjectionSharesControls.tsx';
+import { PROJECTION_SHARE_STEP, WHOLE_SHARE } from './projectionTabStyles.ts';
+
+/** What the shares panel behind the cog is drawn from. */
+export type ProjectionSharesMoreProps = Omit<
+  ProjectionSharesControlsProps,
+  'tier'
+>;
+
+/**
+ * What the shares figure keeps behind the cog: the one target it has, named
+ * and explained, and the way back to the share the figure came with.
+ *
+ * The stepper is on the bar as well, and that is not an oversight. The bar
+ * writes the number because the number is the tab's whole question — how much
+ * of the differences am I asking to account for — while this is the only place
+ * it is called anything, the only place the sentence behind its name is
+ * offered, and the only place a reader who has stepped it somewhere odd can
+ * put it back.
+ * @param props - See {@link ProjectionSharesMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export function ProjectionSharesMore(
+  props: ProjectionSharesMoreProps,
+): ReactElement {
+  const { options, onChange, copy } = props;
+  const { help, tab } = copy;
+
+  return (
+    <OverlayPanel
+      title={tab.shares}
+      onReset={() => onChange(PROJECTION_TAB_DEFAULTS.shares)}
+    >
+      <OverlayNumber
+        label={PROJECTION_PANEL_NAME.shareTarget}
+        help={help.shareTarget}
+        value={Math.round(options.shareTarget * WHOLE_SHARE)}
+        min={0}
+        max={WHOLE_SHARE}
+        step={PROJECTION_SHARE_STEP}
+        unit="%"
+        onChange={(target) => onChange({ shareTarget: target / WHOLE_SHARE })}
+      />
+    </OverlayPanel>
+  );
+}