react-cheminfo 0.66.0 → 0.68.0

package/src/ir/core/irState.ts

@@ -13,7 +13,7 @@
  * a stale band is then impossible rather than merely unlikely.
  */
 
-import type { IrSidePanelId } from './irSidePanels.ts';
+import type { IrPanelId, IrSidePanelId } from './irSidePanels.ts';
 import type { IrDomain, IrMode, IrSpectrum } from './irSpectrum.ts';
 import type { IrTechnique } from './irTechnique.ts';
 import { defaultIrMode, irModeFor, offersIrMode } from './irTechnique.ts';
@@ -42,8 +42,11 @@ export interface IrView {
   domain: IrDomain | null;
   /** Which tool a drag across the chart is running. */
   tool: IrTool;
-  /** The side panels that are open, in the order their icons are stacked. */
-  openPanelIds: IrSidePanelId[];
+  /**
+   * The side panels that are open: the viewer's own and any a host added. An id
+   * no panel on offer answers to opens nothing.
+   */
+  openPanelIds: IrPanelId[];
   /** Why the last action was refused, `null` as soon as one succeeds. */
   error: string | null;
 }
@@ -139,10 +142,10 @@ export interface CreateIrStateOptions {
    */
   settings?: Partial<IrSettings>;
   /**
-   * The panels open to begin with.
+   * The panels open to begin with, the viewer's own or a host's.
    * @default DEFAULT_SIDE_PANELS
    */
-  panelIds?: IrSidePanelId[];
+  panelIds?: readonly IrPanelId[];
 }
 
 /**

package/src/ir/ui/IrCanvas.tsx

@@ -1,6 +1,7 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import type { IrBand } from '../core/irBand.ts';
+import type { IrPlotClick } from '../core/irEditorApi.ts';
 import type { IrDomain } from '../core/irSpectrum.ts';
 
 import { IrChart } from './IrChart.tsx';
@@ -32,6 +33,12 @@ export interface IrCanvasProps {
    * @default undefined
    */
   chartId?: string;
+  /**
+   * Told of a click on the plot — a press let go without travelling, never the
+   * end of a drag — with the spectrum selected at that moment.
+   * @default undefined
+   */
+  onPlotClick?: (click: IrPlotClick) => void;
 }
 
 /**
@@ -50,7 +57,13 @@ export interface IrCanvasProps {
  * @returns The canvas.
  */
 export function IrCanvas(props: IrCanvasProps) {
-  const { highlight = null, onHighlight, attachChart, chartId } = props;
+  const {
+    highlight = null,
+    onHighlight,
+    attachChart,
+    chartId,
+    onPlotClick,
+  } = props;
   const { state, visibleSpectra, assigned } = useIrEditorState();
   const actions = useIrActions();
   const { domain, tool, selectedId } = state.view;
@@ -63,6 +76,17 @@ export function IrCanvas(props: IrCanvasProps) {
     [actions],
   );
 
+  // Which spectrum was selected is the viewer's to say, not the chart's: the
+  // chart only knows where the press landed.
+  const onClickAt = useMemo(
+    () =>
+      onPlotClick === undefined
+        ? undefined
+        : (wavenumber: number) =>
+            onPlotClick({ wavenumber, spectrumId: selectedId }),
+    [onPlotClick, selectedId],
+  );
+
   return (
     <div style={rootStyle}>
       <div ref={attachChart} id={chartId} style={chartStyle}>
@@ -79,6 +103,7 @@ export function IrCanvas(props: IrCanvasProps) {
           onDomainChange={onDomainChange}
           drag={tool === 'box' ? 'box' : 'xAxis'}
           emphasisedId={selectedId}
+          onPlotClick={onClickAt}
         />
       </div>
       <IrStatusBar />

package/src/ir/ui/IrChart.tsx

@@ -3,6 +3,7 @@ import { useCallback, useId, useLayoutEffect, useMemo, useRef } from 'react';
 
 import { sameChartDomain } from '../../chart/core/chartDomain.ts';
 import { MARGIN, plotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartPoint } from '../../chart/core/svgPoint.ts';
 import { Axes } from '../../chart/ui/Axes.tsx';
 import { SelectionRect } from '../../chart/ui/SelectionRect.tsx';
 import { chartSurfaceStyle } from '../../chart/ui/chartSurface.ts';
@@ -56,6 +57,7 @@ export function IrChart(props: IrChartProps): ReactElement {
     onHighlight,
     domain = null,
     onDomainChange,
+    onPlotClick,
     drag = 'xAxis',
     emphasisedId = null,
     width,
@@ -81,6 +83,14 @@ export function IrChart(props: IrChartProps): ReactElement {
   const frameWidth = plot.right + MARGIN.right;
   const frameHeight = plot.bottom + MARGIN.bottom;
 
+  const onClick = useMemo(
+    () =>
+      onPlotClick === undefined
+        ? undefined
+        : (point: ChartPoint) => onPlotClick(point.x),
+    [onPlotClick],
+  );
+
   // The host's window goes *into* the zoom rather than over it, so a drag is
   // always measured against what is on screen.
   const zoom = useIrZoom({
@@ -91,6 +101,7 @@ export function IrChart(props: IrChartProps): ReactElement {
     plot,
     domain,
     drag,
+    onClick,
   });
 
   // The scales the zoom measured its gestures against — the x one running right

package/src/ir/ui/IrEditor.tsx

@@ -1,10 +1,11 @@
 import type { Ref } from 'react';
 
-import type { IrEditorHandle } from '../core/irEditorApi.ts';
-import type { IrSidePanelId } from '../core/irSidePanels.ts';
+import type { IrEditorHandle, IrPlotClick } from '../core/irEditorApi.ts';
+import type { IrPanelId } from '../core/irSidePanels.ts';
 import type { IrMode, IrSpectrum } from '../core/irSpectrum.ts';
 
 import { VibrationalEditor } from './VibrationalEditor.tsx';
+import type { IrHostPanel } from './irHostPanels.ts';
 
 export interface IrEditorProps {
   /**
@@ -32,10 +33,27 @@ export interface IrEditorProps {
    */
   mode?: IrMode;
   /**
-   * The side panels open to begin with.
+   * The side panels open to begin with: the viewer's own — `'spectra'`,
+   * `'bands'`, `'metadata'` — or the id of one of `panels`. An id no panel
+   * answers to is ignored.
    * @default DEFAULT_SIDE_PANELS
    */
-  defaultPanelIds?: IrSidePanelId[];
+  defaultPanelIds?: readonly IrPanelId[];
+  /**
+   * Panels the host adds to the viewer's own — a structure to predict a
+   * spectrum from, say. Their icons come first in the activity bar, in the
+   * order given, and each then behaves as a built-in panel does: toggled on its
+   * own, stacked in the same column with a share of its height, folded and
+   * closed from its header.
+   * @default []
+   */
+  panels?: readonly IrHostPanel[];
+  /**
+   * The plot was clicked at this wavenumber (a press that did not travel, i.e.
+   * not a zoom drag), with the spectrum selected at that moment.
+   * @default undefined
+   */
+  onPlotClick?: (click: IrPlotClick) => void;
   /**
    * The handle a host drives the viewer through: take these spectra, frame this
    * wavenumber, select that one.

package/src/ir/ui/IrShell.tsx

@@ -7,11 +7,9 @@ import { useFigureDownload } from '../../download/ui/useFigureDownload.tsx';
 import { PanelRail } from '../../panel/ui/PanelRail.tsx';
 import type { IrBand } from '../core/irBand.ts';
 import type { IrCommandHandlers } from '../core/irCommands.ts';
-import type { IrEditorHandle } from '../core/irEditorApi.ts';
+import type { IrEditorHandle, IrPlotClick } from '../core/irEditorApi.ts';
 import { otherIrMode } from '../core/irMode.ts';
-import { irSidePanels } from '../core/irSidePanels.ts';
 import type { IrSpectrum } from '../core/irSpectrum.ts';
-import { DEFAULT_SIDE_PANEL } from '../core/irState.ts';
 import { irCommandOffered } from '../core/irTechniqueCommands.ts';
 
 import { IrAboutDialog } from './IrAboutDialog.tsx';
@@ -21,9 +19,11 @@ import { IrDocumentationDialog } from './IrDocumentationDialog.tsx';
 import { IrHeader } from './IrHeader.tsx';
 import { IrSidePanel } from './IrSidePanel.tsx';
 import { IrToolbar } from './IrToolbar.tsx';
+import type { IrHostPanel } from './irHostPanels.ts';
 import { useIrActions, useIrEditorState } from './irStateContext.ts';
 import { useIrHandle } from './useIrHandle.ts';
 import { useIrShortcuts } from './useIrShortcuts.ts';
+import { useIrSide } from './useIrSide.ts';
 import { useValueAxisZoom } from './useValueAxisZoom.ts';
 
 export interface IrShellProps {
@@ -32,6 +32,13 @@ export interface IrShellProps {
    * @default undefined
    */
   handle?: Ref<IrEditorHandle>;
+  /** The panels the host adds to the viewer's own, ahead of them. */
+  panels: readonly IrHostPanel[];
+  /**
+   * Told of a click on the plot, with the spectrum selected at that moment.
+   * @default undefined
+   */
+  onPlotClick?: (click: IrPlotClick) => void;
 }
 
 /**
@@ -49,12 +56,13 @@ export interface IrShellProps {
  * @returns The screen.
  */
 export function IrShell(props: IrShellProps) {
-  const { handle } = props;
+  const { handle, panels, onPlotClick } = props;
 
   const { state, visibleSpectra, selectedSpectrum } = useIrEditorState();
   const actions = useIrActions();
   const { toggle: toggleFullScreen } = useFullscreen();
   const { openPanelIds, tool } = state.view;
+  const side = useIrSide(panels);
   const { mode, pickBands, showAssignments, technique } = state.settings;
 
   const [isAboutOpen, setIsAboutOpen] = useState(false);
@@ -122,20 +130,6 @@ export function IrShell(props: IrShellProps) {
   useIrShortcuts(root, commands);
   useIrHandle(handle);
 
-  /**
-   * Open or close the side, as the splitter is dragged shut and back open.
-   * @param open - Whether the side is now open.
-   */
-  function setSideOpen(open: boolean): void {
-    if (!open) {
-      for (const panelId of openPanelIds) actions.togglePanel(panelId);
-      return;
-    }
-    // Dragging the splitter back open must land on something, or it opens on an
-    // empty column and reads as broken.
-    if (openPanelIds.length === 0) actions.togglePanel(DEFAULT_SIDE_PANEL);
-  }
-
   return (
     <IrCommandProvider handlers={commands} technique={technique}>
       {/* `tabIndex` so a click anywhere in the viewer makes this the target the
@@ -156,23 +150,28 @@ export function IrShell(props: IrShellProps) {
             direction="horizontal"
             controlledSide="end"
             defaultSize="360px"
-            open={openPanelIds.length > 0}
-            onOpenChange={setSideOpen}
+            open={side.isOpen}
+            onOpenChange={side.setOpen}
           >
             <IrCanvas
               highlight={highlight}
               onHighlight={setHighlight}
               chartId={chartId}
+              onPlotClick={onPlotClick}
             />
 
-            <IrSidePanel highlight={highlight} onHighlight={setHighlight} />
+            <IrSidePanel
+              panels={panels}
+              highlight={highlight}
+              onHighlight={setHighlight}
+            />
           </SplitPane>
 
           {/* Outside the split, so the icons stay put against the right edge
               while the panel beside them is resized or closed. */}
           <div style={railStyle}>
             <PanelRail
-              panels={irSidePanels}
+              panels={side.panels}
               openIds={openPanelIds}
               onToggle={actions.togglePanel}
             />

package/src/ir/ui/IrSidePanel.tsx

@@ -1,14 +1,24 @@
+import { useMemo } from 'react';
+
+import { panelStyle } from '../../panel/core/panelStyles.ts';
 import { SidePanelStack } from '../../panel/ui/SidePanelStack.tsx';
 import type { IrBand } from '../core/irBand.ts';
 import type { IrSidePanelId } from '../core/irSidePanels.ts';
-import { irSidePanels } from '../core/irSidePanels.ts';
 
 import { BandsPanel } from './BandsPanel.tsx';
 import { MetadataPanel } from './MetadataPanel.tsx';
 import { SpectraPanel } from './SpectraPanel.tsx';
+import type { IrHostPanel } from './irHostPanels.ts';
+import { irStackPanels, isIrHostPanel } from './irHostPanels.ts';
 import { useIrActions, useIrEditorState } from './irStateContext.ts';
 
 export interface IrSidePanelProps {
+  /**
+   * The panels the host adds to the viewer's own, stacked above them in the
+   * order given.
+   * @default []
+   */
+  panels?: readonly IrHostPanel[];
   /**
    * The band the pointer is resting on.
    * @default null
@@ -29,28 +39,41 @@ export interface IrSidePanelProps {
  * bands are is one question asked of two panels. The header carries the close
  * button and nothing else — a panel's own actions are a toolbar inside its body,
  * so they travel with it.
+ *
+ * A host's panel is stacked like the viewer's own, and its body is laid out in
+ * the same column a built-in panel fills, so it takes its share of the height
+ * and scrolls within it rather than pushing the stack.
  * @param props - Component props.
  * @returns The panel stack.
  */
 export function IrSidePanel(props: IrSidePanelProps) {
-  const { highlight = null, onHighlight } = props;
+  const {
+    panels: hostPanels = NO_PANELS,
+    highlight = null,
+    onHighlight,
+  } = props;
   const { state } = useIrEditorState();
   const actions = useIrActions();
   const { openPanelIds } = state.view;
+  const panels = useMemo(() => irStackPanels(hostPanels), [hostPanels]);
 
   return (
     <SidePanelStack
-      panels={irSidePanels}
+      panels={panels}
       openPanelIds={openPanelIds}
       onClose={actions.togglePanel}
     >
-      {(panel) => (
-        <PanelBody
-          panelId={panel.id}
-          highlight={highlight}
-          onHighlight={onHighlight}
-        />
-      )}
+      {(panel) =>
+        isIrHostPanel(panel) ? (
+          <div style={panelStyle}>{panel.content}</div>
+        ) : (
+          <PanelBody
+            panelId={panel.id}
+            highlight={highlight}
+            onHighlight={onHighlight}
+          />
+        )
+      }
     </SidePanelStack>
   );
 }
@@ -76,3 +99,6 @@ function PanelBody(props: PanelBodyProps) {
   if (panelId === 'metadata') return <MetadataPanel />;
   return <BandsPanel highlight={highlight} onHighlight={onHighlight} />;
 }
+
+/** What a stack the host adds nothing to holds, kept stable for the memo. */
+const NO_PANELS: readonly IrHostPanel[] = [];

package/src/ir/ui/RamanEditor.tsx

@@ -1,10 +1,11 @@
 import type { Ref } from 'react';
 
-import type { IrEditorHandle } from '../core/irEditorApi.ts';
-import type { IrSidePanelId } from '../core/irSidePanels.ts';
+import type { IrEditorHandle, IrPlotClick } from '../core/irEditorApi.ts';
+import type { IrPanelId } from '../core/irSidePanels.ts';
 import type { IrSpectrum } from '../core/irSpectrum.ts';
 
 import { VibrationalEditor } from './VibrationalEditor.tsx';
+import type { IrHostPanel } from './irHostPanels.ts';
 
 /** The handle a host drives a Raman viewer through: the infrared one's. */
 export type RamanEditorHandle = IrEditorHandle;
@@ -25,10 +26,27 @@ export interface RamanEditorProps {
    */
   onChange?: (spectra: IrSpectrum[]) => void;
   /**
-   * The side panels open to begin with.
+   * The side panels open to begin with: the viewer's own — `'spectra'`,
+   * `'bands'`, `'metadata'` — or the id of one of `panels`. An id no panel
+   * answers to is ignored.
    * @default DEFAULT_SIDE_PANELS
    */
-  defaultPanelIds?: IrSidePanelId[];
+  defaultPanelIds?: readonly IrPanelId[];
+  /**
+   * Panels the host adds to the viewer's own. Their icons come first in the
+   * activity bar, in the order given, and each then behaves as a built-in panel
+   * does: toggled on its own, stacked in the same column with a share of its
+   * height, folded and closed from its header.
+   * @default []
+   */
+  panels?: readonly IrHostPanel[];
+  /**
+   * The plot was clicked at this Raman shift (a press that did not travel, i.e.
+   * not a zoom drag), with the spectrum selected at that moment. The shift is
+   * reported as `wavenumber`, the name both techniques share.
+   * @default undefined
+   */
+  onPlotClick?: (click: IrPlotClick) => void;
   /**
    * The handle a host drives the viewer through: take these spectra, frame this
    * Raman shift, select that one.

package/src/ir/ui/VibrationalEditor.tsx

@@ -1,13 +1,14 @@
 import type { Ref } from 'react';
 import { RootLayout } from 'react-science/ui';
 
-import type { IrEditorHandle } from '../core/irEditorApi.ts';
-import type { IrSidePanelId } from '../core/irSidePanels.ts';
+import type { IrEditorHandle, IrPlotClick } from '../core/irEditorApi.ts';
+import type { IrPanelId } from '../core/irSidePanels.ts';
 import type { IrMode, IrSpectrum } from '../core/irSpectrum.ts';
 import type { IrTechnique } from '../core/irTechnique.ts';
 
 import { IrShell } from './IrShell.tsx';
 import { IrStateProvider } from './IrStateProvider.tsx';
+import type { IrHostPanel } from './irHostPanels.ts';
 import { useIrEditor } from './useIrEditor.ts';
 
 export interface VibrationalEditorProps {
@@ -34,10 +35,23 @@ export interface VibrationalEditorProps {
    */
   mode?: IrMode;
   /**
-   * The side panels open to begin with.
+   * The side panels open to begin with, the viewer's own or the host's. An id
+   * no panel answers to is ignored.
    * @default DEFAULT_SIDE_PANELS
    */
-  defaultPanelIds?: IrSidePanelId[];
+  defaultPanelIds?: readonly IrPanelId[];
+  /**
+   * Panels the host adds to the viewer's own: their icons come first in the
+   * activity bar, in the order given, and each behaves as a built-in panel does.
+   * @default []
+   */
+  panels?: readonly IrHostPanel[];
+  /**
+   * The plot was clicked at this wavenumber (a press that did not travel, i.e.
+   * not a zoom drag), with the spectrum selected at that moment.
+   * @default undefined
+   */
+  onPlotClick?: (click: IrPlotClick) => void;
   /**
    * The handle a host drives the viewer through.
    * @default undefined
@@ -59,6 +73,8 @@ export function VibrationalEditor(props: VibrationalEditorProps) {
     onChange,
     mode,
     defaultPanelIds,
+    panels = NO_PANELS,
+    onPlotClick,
     ref,
   } = props;
 
@@ -77,7 +93,7 @@ export function VibrationalEditor(props: VibrationalEditorProps) {
           the backdrop white. Above the shell rather than inside it, so the shell
           can ask whether it is full screen and offer the way out. */}
       <RootLayout style={rootLayoutStyle}>
-        <IrShell handle={ref} />
+        <IrShell handle={ref} panels={panels} onPlotClick={onPlotClick} />
       </RootLayout>
     </IrStateProvider>
   );
@@ -92,3 +108,6 @@ const rootLayoutStyle = { minHeight: 0 } as const;
 
 /** What a viewer opens on when it is handed nothing, kept stable for the memo. */
 const NO_SPECTRA: IrSpectrum[] = [];
+
+/** What a viewer the host adds no panel to offers, kept stable for the memo. */
+const NO_PANELS: readonly IrHostPanel[] = [];

package/src/ir/ui/index.ts

@@ -47,6 +47,7 @@ export { createIrActions } from './irActions.ts';
 export type { IrChartProps } from './irChartProps.ts';
 export type { IrCommandContextValue } from './irCommandContext.tsx';
 export { useIrCommand, useIrCommandProps } from './irCommandContext.tsx';
+export type { IrHostPanel } from './irHostPanels.ts';
 export { useIrActions, useIrEditorState } from './irStateContext.ts';
 export type { IrEditorApi, UseIrEditorOptions } from './useIrEditor.ts';
 export { useIrEditor } from './useIrEditor.ts';

package/src/ir/ui/irActions.ts

@@ -9,7 +9,7 @@
 import type { Dispatch } from 'react';
 
 import type { IrAction } from '../core/irReducer.ts';
-import type { IrSidePanelId } from '../core/irSidePanels.ts';
+import type { IrPanelId } from '../core/irSidePanels.ts';
 import type { IrDomain, IrSpectrum } from '../core/irSpectrum.ts';
 import type { IrSettings, IrTool, PartialIrState } from '../core/irState.ts';
 
@@ -35,8 +35,8 @@ export interface IrEditorActions {
   resetDomain: () => void;
   /** Run this tool on the next drag. */
   setTool: (tool: IrTool) => void;
-  /** Open or close a side panel. */
-  togglePanel: (panelId: IrSidePanelId) => void;
+  /** Open or close a side panel, the viewer's own or one a host added. */
+  togglePanel: (panelId: IrPanelId) => void;
   /** Say why something was refused, or that nothing is wrong any more. */
   setError: (error: string | null) => void;
   /** Change how the spectra are drawn and read. */

package/src/ir/ui/irChartProps.ts

@@ -94,6 +94,13 @@ export interface IrChartProps {
    * @default undefined
    */
   onDomainChange?: (domain: IrDomain) => void;
+  /**
+   * Told the wavenumber a click on the plot landed at: a press let go over the
+   * plot without travelling. The end of a drag is never one, nor is a press let
+   * go over the axis labels, which inverts to a value the chart is not drawing.
+   * @default undefined
+   */
+  onPlotClick?: (wavenumber: number) => void;
   /**
    * What a drag across the plot asks for: the wavenumber axis alone, or exactly
    * the rectangle it sweeps out. A viewer offering a square-zoom tool switches

package/src/ir/ui/irHostPanels.ts

@@ -0,0 +1,76 @@
+/**
+ * The panels a host adds to the viewer's own, and the one list both make.
+ *
+ * A host panel is a panel like any other once it is in the list: the activity
+ * bar and the stack read the same list, so it toggles, folds and closes
+ * exactly as the spectra or the bands do. The host brings the body and nothing
+ * else — the header, its close button and the place in the column are the
+ * viewer's, which is what keeps every header reading the same.
+ */
+
+import type { IconName } from '@blueprintjs/core';
+import type { ReactNode } from 'react';
+
+import { irSidePanels } from '../core/irSidePanels.ts';
+
+/** A panel the host adds to the editor's own stack. */
+export interface IrHostPanel {
+  /**
+   * Its identity in the activity bar and in `defaultPanelIds`; never a
+   * built-in id. One that is, or that an earlier host panel already took, is
+   * left out: one icon cannot open two panels.
+   */
+  id: string;
+  /** What its header and its activity-bar item say. */
+  title: string;
+  /** Its glyph in the activity bar (a Blueprint IconName). */
+  icon: IconName;
+  /**
+   * Its body. It brings its own toolbar as first row: the header carries the
+   * close button only.
+   *
+   * It is laid out in a column filling the panel's share of the height, so a
+   * toolbar row in `panelToolbarStyle` followed by a body in `panelBodyStyle`,
+   * both from `react-cheminfo/core`, keeps the toolbar in place while a tall
+   * body scrolls under it. It is rendered inside the viewer, so a component in
+   * it reaches the viewer it stands in through `useIrEditorState` and
+   * `useIrActions` — to overlay a predicted spectrum, say.
+   */
+  content: ReactNode;
+}
+
+/** One panel of the side: one of the viewer's own, or one a host added. */
+export type IrStackPanel = (typeof irSidePanels)[number] | IrHostPanel;
+
+/**
+ * Every panel the side offers, in the order the activity bar stacks them: the
+ * host's first, in the order given, then the viewer's own.
+ * @param hostPanels - What the host adds.
+ * @returns The panels; the viewer's own list itself when the host adds none.
+ */
+export function irStackPanels(
+  hostPanels: readonly IrHostPanel[],
+): readonly IrStackPanel[] {
+  if (hostPanels.length === 0) return irSidePanels;
+  const taken = new Set<string>(BUILT_IN_IDS);
+  const panels: IrStackPanel[] = [];
+  for (const panel of hostPanels) {
+    if (taken.has(panel.id)) continue;
+    taken.add(panel.id);
+    panels.push(panel);
+  }
+  panels.push(...irSidePanels);
+  return panels;
+}
+
+/**
+ * Whether a panel of the side is one a host added, whose body it brings.
+ * @param panel - The panel.
+ * @returns True for a host's panel.
+ */
+export function isIrHostPanel(panel: IrStackPanel): panel is IrHostPanel {
+  return 'content' in panel;
+}
+
+/** The ids no host panel may take. */
+const BUILT_IN_IDS: readonly string[] = irSidePanels.map((panel) => panel.id);

package/src/ir/ui/useIrSide.ts

@@ -0,0 +1,60 @@
+/**
+ * The side of the viewer: the panels it offers, whether any of them is open,
+ * and what dragging the splitter shut and back open does to them.
+ *
+ * A hook of its own beside the shell, because the shell lays the side out and
+ * this decides what is on it.
+ */
+
+import { useMemo } from 'react';
+
+import { DEFAULT_SIDE_PANEL } from '../core/irState.ts';
+
+import type { IrHostPanel, IrStackPanel } from './irHostPanels.ts';
+import { irStackPanels } from './irHostPanels.ts';
+import { useIrActions, useIrEditorState } from './irStateContext.ts';
+
+/** The side, as the shell lays it out. */
+export interface IrSide {
+  /** Every panel on offer, in the order their icons are stacked. */
+  panels: readonly IrStackPanel[];
+  /** Whether a panel on offer is open, which is whether the side is. */
+  isOpen: boolean;
+  /**
+   * Open or close the side, as the splitter is dragged shut and back open.
+   * @param open - Whether the side is now open.
+   */
+  setOpen: (open: boolean) => void;
+}
+
+/**
+ * The side of the viewer this is called inside.
+ * @param hostPanels - The panels the host adds to the viewer's own.
+ * @returns The panels on offer, whether the side is open, and how to open it.
+ */
+export function useIrSide(hostPanels: readonly IrHostPanel[]): IrSide {
+  const { state } = useIrEditorState();
+  const actions = useIrActions();
+  const { openPanelIds } = state.view;
+
+  const panels = useMemo(() => irStackPanels(hostPanels), [hostPanels]);
+  // Read off the panels on offer rather than off the ids: an id no panel
+  // answers to opens nothing, and a side open on it alone is an empty column.
+  const isOpen = panels.some((panel) => openPanelIds.includes(panel.id));
+
+  /**
+   * Open or close the side.
+   * @param open - Whether the side is now open.
+   */
+  function setOpen(open: boolean): void {
+    if (!open) {
+      for (const panelId of openPanelIds) actions.togglePanel(panelId);
+      return;
+    }
+    // Dragging the splitter back open must land on something, or it opens on an
+    // empty column and reads as broken.
+    if (!isOpen) actions.togglePanel(DEFAULT_SIDE_PANEL);
+  }
+
+  return { panels, isOpen, setOpen };
+}