react-cheminfo 0.9.0 → 0.11.0

package/src/spectra/ui/problemsAbout.ts

@@ -0,0 +1,21 @@
+import type { SettingsProblem } from '../core/problems.ts';
+
+/**
+ * The problems whose `where` is, or starts with, one of the given words.
+ *
+ * The `where` strings are what `settingsProblems` writes, so a part of the
+ * panel asks for its own by naming the same words it is headed with — which
+ * keeps a problem next to the field that causes it rather than in one list at
+ * the top, far from anything the reader can act on.
+ * @param problems - Every problem the settings have.
+ * @param prefixes - The `where` strings the part answers for.
+ * @returns Only those problems, in the order they were found.
+ */
+export function problemsAbout(
+  problems: readonly SettingsProblem[],
+  ...prefixes: readonly string[]
+): SettingsProblem[] {
+  return problems.filter((entry) =>
+    prefixes.some((prefix) => entry.where.startsWith(prefix)),
+  );
+}

package/src/spectra/ui/rowKeys.ts

@@ -0,0 +1,47 @@
+/**
+ * A key no row is using yet.
+ *
+ * A row of the settings — a zone, a matrix step, a range — carries no identity
+ * of its own, so one is kept beside the list. Without it React reuses a removed
+ * row's box for the row that slides up, and the half-typed number in it goes
+ * with the wrong entry.
+ * @param keys - The keys in force.
+ * @returns The next free one.
+ */
+export function nextKey(keys: readonly number[]): number {
+  let highest = -1;
+  for (const key of keys) {
+    if (key > highest) highest = key;
+  }
+  return highest + 1;
+}
+
+/**
+ * The keys brought back in step with a list that changed from outside.
+ * @param keys - The keys in force.
+ * @param length - How many rows there now are.
+ * @returns One key per row.
+ */
+export function fitKeys(keys: readonly number[], length: number): number[] {
+  const fitted = keys.slice(0, length);
+  while (fitted.length < length) fitted.push(nextKey(fitted));
+  return fitted;
+}
+
+/**
+ * A list with one entry moved to another position.
+ * @param list - What to reorder.
+ * @param index - Which entry to move.
+ * @param target - Where it lands.
+ * @returns A new list.
+ */
+export function reorder<T>(
+  list: readonly T[],
+  index: number,
+  target: number,
+): T[] {
+  const moved = [...list];
+  const [entry] = moved.splice(index, 1);
+  if (entry !== undefined) moved.splice(target, 0, entry);
+  return moved;
+}

package/src/spectra/ui/scaleOptions.ts

@@ -0,0 +1,116 @@
+import type { ScaleSettings } from '../core/settings.ts';
+import { SCALE_METHODS } from '../core/settingsProblems.ts';
+
+/** The stretch of x a scaling is measured over. */
+export type ScaleRange = NonNullable<ScaleSettings['range']>;
+
+/** What each scaling is called, in the order the processor's switch lists them. */
+const METHOD_LABELS: Readonly<Record<string, string>> = {
+  min: 'Smallest value',
+  max: 'Largest value',
+  minmax: 'Both ends',
+  integration: 'Integral',
+};
+
+/** The method menu: leaving the spectra alone, then the only four that run. */
+export const SCALE_METHOD_OPTIONS: ReadonlyArray<{
+  value: string;
+  label: string;
+}> = [
+  { value: '', label: 'None — every spectrum is left as it is' },
+  ...SCALE_METHODS.map((method) => ({
+    value: method,
+    label: METHOD_LABELS[method] ?? method,
+  })),
+];
+
+/**
+ * The method menu with whatever the settings actually hold in it.
+ *
+ * A menu that does not carry the held value draws the first option instead, so
+ * a settings object saying `MAX` — or saying something the processor throws on
+ * — would be shown as `None` while meaning nothing of the sort. The held
+ * spelling is added rather than corrected, because the panel reports what the
+ * settings say and never quietly rewrites them.
+ * @param method - What the settings hold.
+ * @returns The None prompt and the four scalings, plus the held one when the
+ * menu lacks it.
+ */
+export function scaleMethodOptions(
+  method: string | undefined,
+): ReadonlyArray<{ value: string; label: string }> {
+  if (method === undefined || method === '') return SCALE_METHOD_OPTIONS;
+  for (const option of SCALE_METHOD_OPTIONS) {
+    if (option.value === method) return SCALE_METHOD_OPTIONS;
+  }
+  const known = METHOD_LABELS[method.toLowerCase()];
+  return [
+    ...SCALE_METHOD_OPTIONS,
+    {
+      value: method,
+      label:
+        known === undefined
+          ? `${method} — not a scaling the processor knows`
+          : `${method} — ${known}`,
+    },
+  ];
+}
+
+/**
+ * The scaling with another method, or with none when `None` is picked.
+ *
+ * A picked `None` drops the key rather than writing an empty string, because
+ * the processor reads any falsy method as "do not scale" and a key that is
+ * there but empty reads, to anyone looking at the settings, as a mistake.
+ * @param value - How every spectrum is scaled.
+ * @param method - What was picked.
+ * @returns A new scaling.
+ */
+export function withScaleMethod(
+  value: ScaleSettings,
+  method: string,
+): ScaleSettings {
+  const next: ScaleSettings = { ...value };
+  if (method === '') delete next.method;
+  else next.method = method;
+  return next;
+}
+
+/**
+ * The scaling with another reference, or with none when the box was emptied.
+ * @param value - How every spectrum is scaled.
+ * @param targetID - What was picked or typed.
+ * @returns A new scaling.
+ */
+export function withScaleTarget(
+  value: ScaleSettings,
+  targetID: string,
+): ScaleSettings {
+  const next: ScaleSettings = { ...value };
+  if (targetID === '') delete next.targetID;
+  else next.targetID = targetID;
+  return next;
+}
+
+/**
+ * The scaling measured over another window, dropping what is not set.
+ * @param value - How every spectrum is scaled.
+ * @param patch - The bounds that changed.
+ * @returns A new scaling, without a window at all once every bound is cleared.
+ */
+export function withScaleRange(
+  value: ScaleSettings,
+  patch: ScaleRange,
+): ScaleSettings {
+  const merged: ScaleRange = { ...value.range, ...patch };
+  const range: ScaleRange = {};
+  if (merged.from !== undefined) range.from = merged.from;
+  if (merged.to !== undefined) range.to = merged.to;
+  if (merged.fromIndex !== undefined) range.fromIndex = merged.fromIndex;
+  if (merged.toIndex !== undefined) range.toIndex = merged.toIndex;
+
+  const next: ScaleSettings = { ...value };
+  if (Object.keys(range).length === 0) delete next.range;
+  else next.range = range;
+  return next;
+}

package/src/ui.ts

@@ -1,5 +1,6 @@
 export * from './about/ui/index.ts';
 export * from './capsule/ui/index.ts';
+export * from './chart/ui/index.ts';
 export * from './chrome/ui/index.ts';
 export * from './citation/ui/index.ts';
 export * from './clipboard/ui/index.ts';
@@ -7,12 +8,18 @@ export * from './color/ui/index.ts';
 export * from './credits/ui/index.ts';
 export * from './delimited/ui/index.ts';
 export * from './disclosure/ui/index.ts';
+export * from './download/ui/index.ts';
 export * from './ecosystem/ui/index.ts';
 export * from './error/ui/index.ts';
 export * from './help/ui/index.ts';
 export * from './hooks/ui/index.ts';
+export * from './overlay/ui/index.ts';
 export * from './pedagogy/ui/index.ts';
 export * from './periodic/ui/index.ts';
+export * from './projection/ui/index.ts';
+export * from './scatter/ui/index.ts';
+export * from './scatter3d/ui/index.ts';
 export * from './share/ui/index.ts';
 export * from './shared/ui/index.ts';
+export * from './spectra/ui/index.ts';
 export * from './state/ui/index.ts';

package/styles/chrome.css

@@ -29,13 +29,13 @@
   --shadow-md: 0 4px 14px rgb(16 32 48 / 10%);
   --shadow-lg: 0 12px 32px rgb(16 32 48 / 16%);
 
-  --header-height: 3.5rem;
+  --header-height: 3rem;
   --page-max: 84rem;
 }
 
 /* The size goes on `body`, never on `html`: `rem` has to stay the browser's
    16px, or every measurement written here shrinks by 6.25% and the bar renders
-   52.5px tall on one site and 56px on its sibling. */
+   45px tall on one site and 48px on its sibling. */
 body {
   font-family:
     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
@@ -75,6 +75,14 @@ button {
   gap: 1rem;
 }
 
+/* A bar over something that fills the window rather than over a column of
+   content. The cap exists so the bar lines up with the page under it; on a
+   workbench there is no such column, and the centred bar reads as a mistake —
+   the brand floats inwards while the tool below runs to both edges. */
+.app-header__inner--full {
+  max-width: none;
+}
+
 .brand {
   display: flex;
   align-items: center;
@@ -148,7 +156,7 @@ button {
 .nav-link {
   display: inline-flex;
   align-items: center;
-  padding: 0.4rem 0.7rem;
+  padding: 0.3rem 0.7rem;
   border: 0;
   border-radius: 8px;
   background: none;
@@ -175,6 +183,16 @@ button {
   color: var(--accent);
 }
 
+/* A page the site cannot open yet: still listed, so the reader learns it is
+   there, but plainly not pressable. It never takes the hover wash, or it would
+   read as reachable under the pointer. */
+.nav-link--disabled,
+.nav-link--disabled:hover {
+  background: none;
+  color: var(--text-faint);
+  cursor: default;
+}
+
 .nav-link svg {
   width: 14px;
   height: 14px;
@@ -184,7 +202,8 @@ button {
    type is brought to the one the links beside them are set in. */
 .citation-button .bp6-button,
 .ecosystem-button .bp6-button {
-  padding: 0.4rem 0.7rem;
+  min-height: 0;
+  padding: 0.3rem 0.7rem;
   border-radius: 8px;
   color: var(--text-muted);
   font-size: 0.875rem;
@@ -214,6 +233,12 @@ button {
   margin: 0 auto;
 }
 
+/* Under a tool that fills the window, for the reason the bar runs full width
+   above it: the two edges of the chrome answer the two edges of the page. */
+.app-footer__inner--full {
+  max-width: none;
+}
+
 /* ── Printing ────────────────────────────────────────────────────────────── */
 
 /* Students print the cheatsheet. Let them, without the chrome. */