react-cheminfo 0.64.1 → 0.66.0

package/src/ir/ui/IrDocumentationDialog.tsx

@@ -1,17 +1,27 @@
 import { Dialog, DialogBody } from '@blueprintjs/core';
 
+import { Prose } from '../../i18n/ui/Prose.tsx';
+import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import type { IrCommand, IrCommandId } from '../core/irCommands.ts';
-import { irCommands } from '../core/irCommands.ts';
 import { IR_MODE_RULES } from '../core/irMode.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
+import { irCommandsFor } from '../core/irTechniqueCommands.ts';
 
 import { IrLogo } from './IrLogo.tsx';
+import { useIrText } from './useIrText.ts';
 
 export interface IrDocumentationDialogProps {
   /** Whether the dialog is open. */
   isOpen: boolean;
   /** Close it. */
   onClose: () => void;
+  /**
+   * What the spectra were measured with, which decides what the guide says:
+   * only what is true of the technique, and only the commands it offers.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
 }
 
 /**
@@ -19,73 +29,36 @@ export interface IrDocumentationDialogProps {
  *
  * In the component rather than on a site, so there is nowhere to leave for and
  * nothing to keep in step: every key in the table below is read out of the same
- * `irCommands` the toolbar and the key handler read, so a shortcut cannot be
+ * command table the toolbar and the key handler read, so a shortcut cannot be
  * documented as one thing and bound as another.
  * @param props - Component props.
  * @returns The dialog.
  */
 export function IrDocumentationDialog(props: IrDocumentationDialogProps) {
-  const { isOpen, onClose } = props;
+  const { isOpen, onClose, technique = 'infrared' } = props;
+  const text = useIrText(technique);
+  const ids = Object.keys(irCommandsFor(technique)) as IrCommandId[];
 
   return (
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
-      title="Using the infrared viewer"
-      icon={<IrLogo size={20} />}
+      title={text.documentation}
+      icon={<IrLogo size={20} technique={technique} />}
       style={dialogStyle}
     >
       <DialogBody>
-        <h4 style={headingStyle}>Opening a spectrum</h4>
-        <p style={paragraphStyle}>
-          JCAMP-DX (<code>.jdx</code>, <code>.dx</code>) and Thermo Galactic SPC
-          (<code>.spc</code>) are read. A file holding several blocks — a sample
-          beside its background, or an infrared spectrum beside a Raman one —
-          gives one spectrum per infrared block; the others are left to their
-          own viewers. Two columns of numbers are not read yet.
-        </p>
-
-        <h4 style={headingStyle}>The axis runs backwards</h4>
-        <p style={paragraphStyle}>
-          Wavenumber decreases to the right, from 4000 cm⁻¹ down to 400, which
-          is how infrared spectra have been printed since the instruments
-          scanned that way. Every window is still stated low end first.
-        </p>
-
-        <h4 style={headingStyle}>Absorbance or transmittance</h4>
-        <p style={paragraphStyle}>
-          The same measurement, read the other way up — the file carries both,
-          whichever it was written in. In{' '}
-          <strong>{IR_MODE_RULES.transmittance.title}</strong> the bands hang
-          down from a baseline near 100; in{' '}
-          <strong>{IR_MODE_RULES.absorbance.title}</strong> they stand up out of
-          zero. The labels and the marks follow, so the pair reads the same way
-          up in either.
-        </p>
-
-        <h4 style={headingStyle}>Reading the bands</h4>
-        <p style={paragraphStyle}>
-          The bands of the <em>selected</em> spectrum are picked, marked on the
-          chart, and listed in the bands panel with{' '}
-          <strong>every vibration whose range contains them</strong> — narrowest
-          claim first. That is deliberate: a band at 1715 cm⁻¹ really is a
-          ketone, an aldehyde and a carboxylic acid until something else decides
-          between them, and the note on each candidate is what tells them apart.
-          Hovering a row marks the band on the chart, and hovering the chart
-          lights the row.
-        </p>
-        <p style={paragraphStyle}>
-          A band is reported at the sampled point it peaked on, so on a 4 cm⁻¹
-          grid a carbonyl centred at 1710 reads 1708 or 1712. Do not quote one
-          as though it were measured to the wavenumber.
-        </p>
+        {technique === 'raman' ? <RamanGuide /> : <InfraredGuide />}
 
         <h4 style={headingStyle}>Gestures and keys</h4>
         <table style={tableStyle}>
           <tbody>
-            {(Object.keys(irCommands) as IrCommandId[]).map((id) => (
-              <CommandRow key={id} id={id} />
-            ))}
+            {ids.map((id) => {
+              const entry = text.command(id);
+              return entry === undefined ? null : (
+                <CommandRow key={id} entry={entry} />
+              );
+            })}
           </tbody>
         </table>
       </DialogBody>
@@ -93,9 +66,81 @@ export function IrDocumentationDialog(props: IrDocumentationDialogProps) {
   );
 }
 
+/**
+ * What is true of reading an infrared spectrum here.
+ * @returns The sections.
+ */
+function InfraredGuide() {
+  return (
+    <>
+      <h4 style={headingStyle}>Opening a spectrum</h4>
+      <p style={paragraphStyle}>
+        JCAMP-DX (<code>.jdx</code>, <code>.dx</code>) and Thermo Galactic SPC (
+        <code>.spc</code>) are read. A file holding several blocks — a sample
+        beside its background, or an infrared spectrum beside a Raman one —
+        gives one spectrum per infrared block; the others are left to their own
+        viewers. Two columns of numbers are not read yet.
+      </p>
+
+      <h4 style={headingStyle}>The axis runs backwards</h4>
+      <p style={paragraphStyle}>
+        Wavenumber decreases to the right, from 4000 cm⁻¹ down to 400, which is
+        how infrared spectra have been printed since the instruments scanned
+        that way. Every window is still stated low end first.
+      </p>
+
+      <h4 style={headingStyle}>Absorbance or transmittance</h4>
+      <p style={paragraphStyle}>
+        The same measurement, read the other way up — the file carries both,
+        whichever it was written in. In{' '}
+        <strong>{IR_MODE_RULES.transmittance.title}</strong> the bands hang down
+        from a baseline near 100; in{' '}
+        <strong>{IR_MODE_RULES.absorbance.title}</strong> they stand up out of
+        zero. The labels and the marks follow, so the pair reads the same way up
+        in either.
+      </p>
+
+      <h4 style={headingStyle}>Reading the bands</h4>
+      <p style={paragraphStyle}>
+        The bands of the <em>selected</em> spectrum are picked, marked on the
+        chart, and listed in the bands panel with{' '}
+        <strong>every vibration whose range contains them</strong> — narrowest
+        claim first. That is deliberate: a band at 1715 cm⁻¹ really is a ketone,
+        an aldehyde and a carboxylic acid until something else decides between
+        them, and the note on each candidate is what tells them apart. Hovering
+        a row marks the band on the chart, and hovering the chart lights the
+        row.
+      </p>
+      <p style={paragraphStyle}>
+        A band is reported at the sampled point it peaked on, so on a 4 cm⁻¹
+        grid a carbonyl centred at 1710 reads 1708 or 1712. Do not quote one as
+        though it were measured to the wavenumber.
+      </p>
+    </>
+  );
+}
+
+/**
+ * What is true of reading a Raman spectrum here: only the bands, since it has
+ * one value axis, runs the usual way, and is not assigned.
+ * @returns The section.
+ */
+function RamanGuide() {
+  const t = useChromeT();
+  return (
+    <>
+      <h4 style={headingStyle}>Reading the bands</h4>
+      <p style={paragraphStyle}>
+        <Prose text={t('ir.raman.doc.bands')} />
+      </p>
+      <p style={paragraphStyle}>{t('ir.raman.doc.sampled')}</p>
+    </>
+  );
+}
+
 interface CommandRowProps {
-  /** Which command the row is about. */
-  id: IrCommandId;
+  /** The command, as the viewer words it. */
+  entry: IrCommand;
 }
 
 /**
@@ -104,8 +149,7 @@ interface CommandRowProps {
  * @returns The row.
  */
 function CommandRow(props: CommandRowProps) {
-  const { id } = props;
-  const entry = irCommands[id] as IrCommand;
+  const { entry } = props;
   const keys = entry.shortcut?.label ?? entry.shortcut?.keys;
 
   return (

package/src/ir/ui/IrEditor.tsx

@@ -1,13 +1,10 @@
 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 { IrMode, IrSpectrum } from '../core/irSpectrum.ts';
 
-import { IrShell } from './IrShell.tsx';
-import { IrStateProvider } from './IrStateProvider.tsx';
-import { useIrEditor } from './useIrEditor.ts';
+import { VibrationalEditor } from './VibrationalEditor.tsx';
 
 export interface IrEditorProps {
   /**
@@ -29,7 +26,8 @@ export interface IrEditorProps {
    */
   onChange?: (spectra: IrSpectrum[]) => void;
   /**
-   * Which value axis to open in.
+   * Which value axis to open in: transmittance or absorbance. Intensity, which
+   * infrared does not offer, opens transmittance instead.
    * @default 'transmittance'
    */
   mode?: IrMode;
@@ -49,6 +47,7 @@ export interface IrEditorProps {
 /**
  * An infrared spectrum viewer: a header across the top, the chart in the middle,
  * the tools down the left, and the panels that interrogate it down the right.
+ * `RamanEditor`, from `react-cheminfo/raman`, is the same viewer for Raman.
  *
  * The same shape as the mass viewer, deliberately — a page may well hold both,
  * and a chemist who has learned one should not have to learn the other. The chart
@@ -65,35 +64,5 @@ export interface IrEditorProps {
  * @returns The viewer.
  */
 export function IrEditor(props: IrEditorProps) {
-  const { data = NO_SPECTRA, onChange, mode, defaultPanelIds, ref } = props;
-
-  const editor = useIrEditor({
-    spectra: data,
-    settings: mode === undefined ? undefined : { mode },
-    panelIds: defaultPanelIds,
-    onChange,
-  });
-
-  return (
-    <IrStateProvider editor={editor}>
-      {/* `react-science`'s own root: it holds the element the browser is asked
-          to show full screen, points Blueprint's portals at that element so
-          dialogs and tooltips are not left behind in `document.body`, and paints
-          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} />
-      </RootLayout>
-    </IrStateProvider>
-  );
+  return <VibrationalEditor technique="infrared" {...props} />;
 }
-
-/**
- * The viewer fills what it is given, and its own children scroll rather than
- * push: `react-science` lays its root out as a column of full width and height,
- * and a flex column with no `minHeight` grows past its parent instead.
- */
-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[] = [];

package/src/ir/ui/IrHeader.tsx

@@ -2,6 +2,8 @@ import { Header, Toolbar, useFullscreen } from 'react-science/ui';
 
 import { IrLogo } from './IrLogo.tsx';
 import { useIrCommandProps } from './irCommandContext.tsx';
+import { useIrEditorState } from './irStateContext.ts';
+import { useIrText } from './useIrText.ts';
 
 /**
  * The bar across the top: the mark on the left, the viewer on the right.
@@ -17,13 +19,18 @@ import { useIrCommandProps } from './irCommandContext.tsx';
 export function IrHeader() {
   const command = useIrCommandProps();
   const { isFullScreen } = useFullscreen();
+  const { technique } = useIrEditorState().state.settings;
+  const text = useIrText(technique);
 
   return (
     <Header>
-      <Toolbar aria-label="Infrared spectrum viewer">
-        <Toolbar.Item icon={<IrLogo size={16} />} {...command('about')} />
+      <Toolbar aria-label={text.viewer}>
+        <Toolbar.Item
+          icon={<IrLogo size={16} technique={technique} />}
+          {...command('about')}
+        />
       </Toolbar>
-      <Toolbar aria-label="Infrared spectrum viewer help">
+      <Toolbar aria-label={text.viewerHelp}>
         <Toolbar.Item icon="help" {...command('documentation')} />
         {/* Always the last thing in the bar, hard against the right edge: the
             corner a window is made bigger from is the corner it is looked for

package/src/ir/ui/IrLogo.tsx

@@ -1,24 +1,37 @@
+import type { IrTechnique } from '../core/irTechnique.ts';
+
+import { useIrText } from './useIrText.ts';
+
 export interface IrLogoProps {
   /**
    * How big to draw it, in pixels.
    * @default 16
    */
   size?: number;
+  /**
+   * What the spectra were measured with, which decides which way the bands
+   * point.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
 }
 
 /**
- * The viewer's mark: three bands hanging from a baseline.
+ * The viewer's mark: three bands meeting a baseline.
  *
  * Drawn from the domain's own primitives rather than being a picture of a chart —
  * a transmittance baseline near the top with a strong band, a medium one and a
  * weak one dropping out of it, which is what an infrared spectrum looks like at a
- * glance and what nothing else looks like. Three elements, because that is what
- * survives 16 pixels.
+ * glance and what nothing else looks like. A Raman spectrum's bands stand up from
+ * a baseline near the foot instead, so its mark is the same three bands rising.
+ * Three elements, because that is what survives 16 pixels.
  * @param props - Component props.
  * @returns The mark, as SVG.
  */
 export function IrLogo(props: IrLogoProps) {
-  const { size = 16 } = props;
+  const { size = 16, technique = 'infrared' } = props;
+  const { mark } = useIrText(technique);
+  const { baseline, bands } = MARKS[technique];
 
   return (
     <svg
@@ -26,19 +39,19 @@ export function IrLogo(props: IrLogoProps) {
       height={size}
       viewBox="0 0 16 16"
       role="img"
-      aria-label="Infrared viewer"
+      aria-label={mark}
     >
-      {/* The baseline, high up, where 100 % transmittance runs. */}
+      {/* The baseline: high up where 100 % transmittance runs, low for Raman. */}
       <path
-        d="M1 3H15"
+        d={baseline}
         fill="none"
         stroke="#94a3b8"
         strokeWidth={1}
         strokeLinecap="round"
       />
-      {/* Three bands dropping out of it, strong, medium, weak. */}
+      {/* Three bands meeting it, strong, medium, weak. */}
       <path
-        d="M3 3V13M8 3V8.5M12.5 3V6"
+        d={bands}
         fill="none"
         stroke="#0072b2"
         strokeWidth={2}
@@ -47,3 +60,9 @@ export function IrLogo(props: IrLogoProps) {
     </svg>
   );
 }
+
+/** The two strokes of each technique's mark. */
+const MARKS: Record<IrTechnique, { baseline: string; bands: string }> = {
+  infrared: { baseline: 'M1 3H15', bands: 'M3 3V13M8 3V8.5M12.5 3V6' },
+  raman: { baseline: 'M1 13H15', bands: 'M3 13V3M8 13V7.5M12.5 13V10' },
+};

package/src/ir/ui/IrShell.tsx

@@ -1,11 +1,5 @@
 import type { Ref } from 'react';
-import {
-  useCallback,
-  useId,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
+import { useId, useMemo, useState } from 'react';
 import { SplitPane, useFullscreen } from 'react-science/ui';
 
 import { sanitizeFileName } from '../../download/core/sanitizeFileName.ts';
@@ -13,12 +7,12 @@ 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 { fullDomain } from '../core/irDomain.ts';
-import type { IrEditorHandle, ZoomToBandOptions } from '../core/irEditorApi.ts';
-import { otherIrMode, yAxisRules } from '../core/irMode.ts';
+import type { IrEditorHandle } from '../core/irEditorApi.ts';
+import { otherIrMode } from '../core/irMode.ts';
 import { irSidePanels } from '../core/irSidePanels.ts';
-import type { IrDomain, IrSpectrum } from '../core/irSpectrum.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';
 import { IrCanvas } from './IrCanvas.tsx';
@@ -28,7 +22,9 @@ import { IrHeader } from './IrHeader.tsx';
 import { IrSidePanel } from './IrSidePanel.tsx';
 import { IrToolbar } from './IrToolbar.tsx';
 import { useIrActions, useIrEditorState } from './irStateContext.ts';
+import { useIrHandle } from './useIrHandle.ts';
 import { useIrShortcuts } from './useIrShortcuts.ts';
+import { useValueAxisZoom } from './useValueAxisZoom.ts';
 
 export interface IrShellProps {
   /**
@@ -58,8 +54,8 @@ export function IrShell(props: IrShellProps) {
   const { state, visibleSpectra, selectedSpectrum } = useIrEditorState();
   const actions = useIrActions();
   const { toggle: toggleFullScreen } = useFullscreen();
-  const { openPanelIds, tool, domain } = state.view;
-  const { mode, pickBands, showAssignments } = state.settings;
+  const { openPanelIds, tool } = state.view;
+  const { mode, pickBands, showAssignments, technique } = state.settings;
 
   const [isAboutOpen, setIsAboutOpen] = useState(false);
   const [isDocumentationOpen, setIsDocumentationOpen] = useState(false);
@@ -79,27 +75,7 @@ export function IrShell(props: IrShellProps) {
   // times a second.
   const [highlight, setHighlight] = useState<IrBand | null>(null);
 
-  /**
-   * ChartScale the value axis by a factor, about the baseline the mode hangs from.
-   * @param factor - Above one to zoom out.
-   */
-  const scaleValueAxis = useCallback(
-    (factor: number) => {
-      const shown = domain ?? fullDomain(visibleSpectra, mode);
-      // Asked of the mode rather than written out again here: the baseline a
-      // value axis is scaled about is `irMode`'s to know, and a second copy of
-      // it is a second thing to get wrong.
-      const { baseline = 0 } = yAxisRules(mode);
-      actions.setDomain({
-        x: shown.x,
-        y: [
-          baseline + (shown.y[0] - baseline) * factor,
-          baseline + (shown.y[1] - baseline) * factor,
-        ],
-      });
-    },
-    [actions, domain, visibleSpectra, mode],
-  );
+  const { zoomIn, zoomOut } = useValueAxisZoom();
 
   const commands = useMemo<IrCommandHandlers>(
     () => ({
@@ -108,13 +84,18 @@ export function IrShell(props: IrShellProps) {
       fullScreen: toggleFullScreen,
       readTool: () => actions.setTool('read'),
       boxTool: () => actions.setTool(tool === 'box' ? 'read' : 'box'),
-      zoomIn: () => scaleValueAxis(1 / ZOOM_STEP),
-      zoomOut: () => scaleValueAxis(ZOOM_STEP),
+      zoomIn,
+      zoomOut,
       resetZoom: () => actions.resetDomain(),
-      toggleMode: () => actions.setSettings({ mode: otherIrMode(mode) }),
+      // A command the technique does not offer has no handler, so its key
+      // stays with the page.
+      toggleMode: irCommandOffered(technique, 'toggleMode')
+        ? () => actions.setSettings({ mode: otherIrMode(mode, technique) })
+        : undefined,
       togglePicking: () => actions.setSettings({ pickBands: !pickBands }),
-      toggleAssignments: () =>
-        actions.setSettings({ showAssignments: !showAssignments }),
+      toggleAssignments: irCommandOffered(technique, 'toggleAssignments')
+        ? () => actions.setSettings({ showAssignments: !showAssignments })
+        : undefined,
       exportImage: () => setFigureOpen(!isFigureOpen),
       clear: () => actions.clear(),
     }),
@@ -122,9 +103,11 @@ export function IrShell(props: IrShellProps) {
       actions,
       tool,
       mode,
+      technique,
       pickBands,
       showAssignments,
-      scaleValueAxis,
+      zoomIn,
+      zoomOut,
       toggleFullScreen,
       isFigureOpen,
       setFigureOpen,
@@ -137,28 +120,7 @@ export function IrShell(props: IrShellProps) {
   // again.
   const [root, setRoot] = useState<HTMLElement | null>(null);
   useIrShortcuts(root, commands);
-
-  useImperativeHandle(
-    handle,
-    (): IrEditorHandle => ({
-      getSpectra: () => state.data.spectra,
-      setSpectra: (spectra) => actions.setSpectra(spectra),
-      addSpectra: (spectra) => actions.addSpectra(spectra),
-      clear: () => actions.clear(),
-      setDomain: (next) => actions.setDomain(next),
-      resetDomain: () => actions.resetDomain(),
-      zoomToWavenumber: (wavenumber, options: ZoomToBandOptions = {}) => {
-        const { width = DEFAULT_FRAME_WIDTH } = options;
-        const shown: IrDomain = domain ?? fullDomain(visibleSpectra, mode);
-        actions.setDomain({
-          x: [wavenumber - width / 2, wavenumber + width / 2],
-          y: shown.y,
-        });
-      },
-      selectSpectrum: (id) => actions.selectSpectrum(id),
-    }),
-    [state.data.spectra, actions, domain, visibleSpectra, mode],
-  );
+  useIrHandle(handle);
 
   /**
    * Open or close the side, as the splitter is dragged shut and back open.
@@ -175,7 +137,7 @@ export function IrShell(props: IrShellProps) {
   }
 
   return (
-    <IrCommandProvider handlers={commands}>
+    <IrCommandProvider handlers={commands} technique={technique}>
       {/* `tabIndex` so a click anywhere in the viewer makes this the target the
           shortcuts are heard on: keys are delivered to whatever holds the caret,
           and an SVG never does. */}
@@ -221,27 +183,17 @@ export function IrShell(props: IrShellProps) {
       <IrAboutDialog
         isOpen={isAboutOpen}
         onClose={() => setIsAboutOpen(false)}
+        technique={technique}
       />
       <IrDocumentationDialog
         isOpen={isDocumentationOpen}
         onClose={() => setIsDocumentationOpen(false)}
+        technique={technique}
       />
     </IrCommandProvider>
   );
 }
 
-/**
- * What one press of zoom in or out is worth.
- *
- * A fifth, which is about what one notch of a mouse wheel does — so the button
- * and the wheel feel like the same gesture at two speeds rather than two
- * different ones.
- */
-const ZOOM_STEP = 1.2;
-
-/** How wide a window a host gets when it asks to frame a band without saying. */
-const DEFAULT_FRAME_WIDTH = 200;
-
 /**
  * What a picture of the chart is called.
  *

package/src/ir/ui/IrStatusBar.tsx

@@ -8,18 +8,21 @@ import {
   statusSpacerStyle as spacerStyle,
 } from '../../panel/core/statusBar.ts';
 import { countAssigned } from '../core/assignBands.ts';
-import { formatWavenumber } from '../core/irFormat.ts';
-import { boxZoomOnly, yAxisTitle } from '../core/irMode.ts';
+import { formatWavenumberRange } from '../core/irFormat.ts';
+import { boxZoomOnly } from '../core/irMode.ts';
+import { IR_TECHNIQUE_RULES } from '../core/irTechnique.ts';
 
 import { useIrEditorState } from './irStateContext.ts';
+import { useIrText } from './useIrText.ts';
 
 /**
  * The one line under the chart: what is drawn, what was found, what went wrong.
  *
  * Everything in it is derived, so it is the cheapest place in the viewer to
  * answer "did that work" — how many spectra are drawn of those open, how many
- * bands the picking found and how many the table had something to say about, and
- * the range the selected spectrum covers.
+ * bands the picking found and how many the table had something to say about
+ * (where the table covers the technique), and the range the selected spectrum
+ * covers, in the order its axis is read.
  *
  * The refusal is last and is the only red in the shell, so the eye that has just
  * pressed something and seen nothing happen lands on the reason.
@@ -30,12 +33,14 @@ export function IrStatusBar() {
     useIrEditorState();
   const { spectra } = state.data;
   const { error, tool } = state.view;
-  const { mode, pickBands } = state.settings;
+  const { mode, pickBands, technique } = state.settings;
+  const { reverseX, assignments } = IR_TECHNIQUE_RULES[technique];
+  const text = useIrText(technique);
 
   const range =
-    selectedSpectrum === null || selectedSpectrum.wavenumber.length === 0
-      ? null
-      : `${formatWavenumber(selectedSpectrum.wavenumber.at(-1) as number)}–${formatWavenumber(selectedSpectrum.wavenumber[0] as number)} cm⁻¹`;
+    selectedSpectrum === null
+      ? ''
+      : formatWavenumberRange(selectedSpectrum.wavenumber, reverseX);
 
   return (
     <div style={barStyle}>
@@ -45,7 +50,7 @@ export function IrStatusBar() {
           : `${countLabel(visibleSpectra.length, 'spectrum', 'spectra')} drawn of ${spectra.length}`}
       </span>
 
-      <span style={itemStyle}>{yAxisTitle(mode)}</span>
+      <span style={itemStyle}>{text.yTitle(mode)}</span>
 
       {selectedSpectrum === null ? null : (
         <span style={nameStyle} title={selectedSpectrum.name}>
@@ -53,12 +58,12 @@ export function IrStatusBar() {
         </span>
       )}
 
-      {range === null ? null : <span style={mutedStyle}>{range}</span>}
+      {range === '' ? null : <span style={mutedStyle}>{range}</span>}
 
       {pickBands && assigned.length > 0 ? (
         <span style={itemStyle}>
-          {countLabel(assigned.length, 'band', 'bands')},{' '}
-          {countAssigned(assigned)} assigned
+          {countLabel(assigned.length, 'band', 'bands')}
+          {assignments ? `, ${countAssigned(assigned)} assigned` : null}
         </span>
       ) : null}