react-cheminfo 0.76.0 → 0.78.0

package/src/shared/ui/FullscreenStage.tsx

@@ -0,0 +1,96 @@
+/**
+ * A box that can fill the screen: the 3D canvas and its toolbars, a side panel.
+ *
+ * A box filling the screen hides everything outside it, and the popovers and
+ * tooltips of what it holds are portalled to `document.body`: while the box
+ * fills the screen they are portalled into it instead, the way react-science's
+ * `RootLayout` keeps its own menus visible. Otherwise the portal options of the
+ * page around the box are passed through untouched.
+ */
+
+import { PortalContext, PortalProvider } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import { useCallback, useContext, useState } from 'react';
+import { FullScreenProvider, useFullscreen } from 'react-science/ui';
+
+import { canFillScreen } from './canFillScreen.ts';
+
+/** Whether a box fills the screen, and how to change that. */
+export interface StageFullscreen {
+  /** Whether the box fills the screen. */
+  active: boolean;
+  /** Fill the screen, or leave it. */
+  toggle: () => void;
+}
+
+/** Props of {@link FullscreenStage}. */
+export interface FullscreenStageProps {
+  /**
+   * Style of the box, or a function handed whether the box fills the screen,
+   * for a box shaped differently while it does.
+   */
+  style: CSSProperties | ((fillsScreen: boolean) => CSSProperties);
+  /**
+   * Called with the box once it is mounted, and with `null` once it is gone.
+   * It must keep its identity across renders.
+   * @default undefined
+   */
+  onStage?: (element: HTMLDivElement | null) => void;
+  /**
+   * What is drawn in the box, handed whether it fills the screen and the
+   * toggle, or `undefined` where the browser cannot fill the screen.
+   */
+  children: (fullscreen: StageFullscreen | undefined) => ReactNode;
+}
+
+/**
+ * The box, able to fill the screen.
+ * @param props - See {@link FullscreenStageProps}.
+ * @returns The box.
+ */
+export function FullscreenStage(props: FullscreenStageProps): ReactElement {
+  return (
+    <FullScreenProvider>
+      {(fullscreenRef) => <Stage {...props} fullscreenRef={fullscreenRef} />}
+    </FullScreenProvider>
+  );
+}
+
+interface StageProps extends FullscreenStageProps {
+  /** Where `FullScreenProvider` expects the element that fills the screen. */
+  fullscreenRef: { current: HTMLDivElement | null };
+}
+
+function Stage(props: StageProps): ReactElement {
+  const { style, onStage, children, fullscreenRef } = props;
+  const { isFullScreen, toggle } = useFullscreen();
+  const portal = useContext(PortalContext);
+  const [canFill] = useState(canFillScreen);
+  const [stage, setStage] = useState<HTMLDivElement | null>(null);
+  const stageRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      fullscreenRef.current = element;
+      setStage(element);
+      onStage?.(element);
+    },
+    [fullscreenRef, onStage],
+  );
+
+  // The provider is always there, so entering full screen changes a value
+  // rather than the tree, and what the box holds is never mounted again.
+  return (
+    <div
+      ref={stageRef}
+      style={typeof style === 'function' ? style(isFullScreen) : style}
+    >
+      <PortalProvider
+        portalClassName={portal.portalClassName}
+        portalContainer={
+          isFullScreen && stage !== null ? stage : portal.portalContainer
+        }
+      >
+        {children(canFill ? { active: isFullScreen, toggle } : undefined)}
+      </PortalProvider>
+    </div>
+  );
+}

package/src/shared/ui/canFillScreen.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether this browser lets a page fill the screen: neither an iPhone nor a
+ * frame without `allowfullscreen` does.
+ * @returns Whether `requestFullscreen` can succeed.
+ */
+export function canFillScreen(): boolean {
+  return typeof document !== 'undefined' && document.fullscreenEnabled;
+}

package/src/shared/ui/index.ts

@@ -7,3 +7,9 @@ export type {
   ActionTooltipTarget,
 } from './useActionTooltip.ts';
 export { ACTION_TOOLTIP_DELAY, useActionTooltip } from './useActionTooltip.ts';
+export { canFillScreen } from './canFillScreen.ts';
+export type {
+  FullscreenStageProps,
+  StageFullscreen,
+} from './FullscreenStage.tsx';
+export { FullscreenStage } from './FullscreenStage.tsx';

package/src/split/ui/splitPanes.tsx

@@ -65,9 +65,9 @@ export interface SplitPanesProps extends SplitRange {
    */
   stackBelow?: number;
   /**
-   * The gutter each pane keeps beside the splitter, in pixels, so neither
-   * figure is read against its edge.
-   * @default 6
+   * The gutter each pane keeps beside the splitter, in pixels. The bar is
+   * already the separation, so a gutter only widens it into a band of page.
+   * @default 0
    */
   gutter?: number;
   /**
@@ -234,7 +234,7 @@ const STACK_ACROSS = 860;
 const STACK_DOWN = 420;
 
 /** The gutter a pane keeps beside the splitter, in pixels. */
-const GUTTER = 6;
+const GUTTER = 0;
 
 /** The gap between the panes once they have stacked, in pixels. */
 const STACKED_GAP = 16;

package/src/structure/core/structureNotations.ts

@@ -56,6 +56,13 @@ export interface StructureNotation {
   block: boolean;
 }
 
+/**
+ * Notations the caller has already written, shown instead of the ones
+ * OpenChemLib would write. A drawing program's molfile keeps its
+ * abbreviations as superatoms, which a round trip through OpenChemLib drops.
+ */
+export type SuppliedNotations = Partial<Record<StructureNotationKind, string>>;
+
 /** What a molfile is, for the application that opens one. */
 const MOLFILE_TYPE = 'chemical/x-mdl-molfile';
 
@@ -66,35 +73,45 @@ const MOLFILE_TYPE = 'chemical/x-mdl-molfile';
  * tautomer cannot always be canonized — comes back empty rather than taking
  * the rest of the list down with it.
  * @param molecule - The structure, as the editor handed it over. Not modified.
+ * @param supplied - Notations the caller wrote itself, used as they are.
  * @returns One entry per notation, in the order they are shown.
  */
-export function structureNotations(molecule: Molecule): StructureNotation[] {
-  const idCode = written(() => molecule.getIDCode());
+export function structureNotations(
+  molecule: Molecule,
+  supplied: SuppliedNotations = {},
+): StructureNotation[] {
+  const value = (kind: StructureNotationKind, write: () => string) =>
+    supplied[kind] ?? written(write);
   return [
     {
       kind: 'smiles',
-      value: written(() => molecule.toIsomericSmiles()),
+      value: value('smiles', () => molecule.toIsomericSmiles()),
       canonical: false,
       block: false,
     },
     {
       kind: 'molfileV3000',
-      value: written(() => molecule.toMolfileV3()),
+      value: value('molfileV3000', () => molecule.toMolfileV3()),
       canonical: false,
       file: { suffix: '-v3000', extension: 'mol', mimeType: MOLFILE_TYPE },
       block: true,
     },
     {
       kind: 'molfileV2000',
-      value: written(() => molecule.toMolfile()),
+      value: value('molfileV2000', () => molecule.toMolfile()),
       canonical: false,
       file: { suffix: '-v2000', extension: 'mol', mimeType: MOLFILE_TYPE },
       block: true,
     },
-    { kind: 'idCode', value: idCode, canonical: true, block: false },
+    {
+      kind: 'idCode',
+      value: value('idCode', () => molecule.getIDCode()),
+      canonical: true,
+      block: false,
+    },
     {
       kind: 'noStereoIdCode',
-      value: written(() =>
+      value: value('noStereoIdCode', () =>
         CanonizerUtil.getIDCode(molecule, CanonizerUtil.NOSTEREO),
       ),
       canonical: true,
@@ -102,7 +119,7 @@ export function structureNotations(molecule: Molecule): StructureNotation[] {
     },
     {
       kind: 'noStereoTautomerIdCode',
-      value: written(() =>
+      value: value('noStereoTautomerIdCode', () =>
         CanonizerUtil.getIDCode(molecule, CanonizerUtil.NOSTEREO_TAUTOMER),
       ),
       canonical: true,

package/src/structure/ui/StructureExportPanel.tsx

@@ -15,6 +15,7 @@ import { useChromeT } from '../../i18n/ui/useT.ts';
 import { TOKEN } from '../../tokens/core/familyTokens.ts';
 import { sourceMolecule } from '../core/sourceMolecule.ts';
 import { structureError } from '../core/structureError.ts';
+import type { SuppliedNotations } from '../core/structureNotations.ts';
 import { structureNotations } from '../core/structureNotations.ts';
 import type { StructureSourceInput } from '../core/structureSource.ts';
 import { structureSource } from '../core/structureSource.ts';
@@ -36,6 +37,13 @@ export interface StructureExportPanelProps extends StructureSourceInput {
    * @default false
    */
   fragment?: boolean;
+  /**
+   * Notations the caller wrote itself, shown and saved as they are instead of
+   * the ones OpenChemLib would write from the structure — a drawing program
+   * whose molfile keeps superatoms that a round trip would drop.
+   * @default {}
+   */
+  notations?: SuppliedNotations;
 }
 
 /**
@@ -53,12 +61,17 @@ export function StructureExportPanel(
   props: StructureExportPanelProps,
 ): ReactElement {
   const { idCode, coordinates, molfile, smiles } = props;
-  const { name = 'structure', fragment = false } = props;
+  const { name = 'structure', fragment = false, notations: supplied } = props;
   const t = useChromeT();
 
   const read = useMemo(
-    () => readStructure({ idCode, coordinates, molfile, smiles }, fragment),
-    [idCode, coordinates, molfile, smiles, fragment],
+    () =>
+      readStructure(
+        { idCode, coordinates, molfile, smiles },
+        fragment,
+        supplied,
+      ),
+    [idCode, coordinates, molfile, smiles, fragment, supplied],
   );
 
   if (read.kind !== 'read') {
@@ -120,11 +133,13 @@ type ReadStructure =
  * Read the notation the caller handed over, and write every other one from it.
  * @param input - Whatever notations the caller has.
  * @param fragment - Whether the structure is a query fragment.
+ * @param supplied - Notations the caller wrote itself.
  * @returns The molecule and its notations, or why there are none.
  */
 function readStructure(
   input: StructureSourceInput,
   fragment: boolean,
+  supplied: SuppliedNotations | undefined,
 ): ReadStructure {
   const source = structureSource(input);
   if (source.kind === 'empty') return { kind: 'empty' };
@@ -135,7 +150,11 @@ function readStructure(
     // structure from the one that was drawn.
     if (fragment) molecule.setFragment(true);
     if (molecule.getAllAtoms() === 0) return { kind: 'empty' };
-    return { kind: 'read', molecule, notations: structureNotations(molecule) };
+    return {
+      kind: 'read',
+      molecule,
+      notations: structureNotations(molecule, supplied),
+    };
   } catch (error) {
     return { kind: 'error', message: structureError(error).message };
   }

package/src/structure/ui/index.ts

@@ -36,6 +36,10 @@ export { StructureExportButton } from './StructureExportButton.tsx';
 export type { CardStructureProps } from './CardStructure.tsx';
 export { CardStructure } from './CardStructure.tsx';
 export type { StructureExportPanelProps } from './StructureExportPanel.tsx';
+export type {
+  StructureNotationKind,
+  SuppliedNotations,
+} from '../core/structureNotations.ts';
 export type { ToolbarFloorOptions } from './useToolbarFloor.ts';
 export { useToolbarFloor } from './useToolbarFloor.ts';
 export type { StructureDraft } from './useStructureDraft.ts';

package/styles/osiris.css

@@ -0,0 +1,339 @@
+/*
+ * The OSIRIS property panel of `react-cheminfo/osiris-ui`: the four risk
+ * squares, the ten bars, and the explanation a square opens. Imported once by
+ * the page that draws the panel, after `chrome.css`, whose tokens it reads.
+ *
+ * Every colour is a token. The neutrals and the geometry are the family's, the
+ * accent is the site's own, and the three status colours below are the shared
+ * semantic ones — the same values on every site, never retuned. They are
+ * declared here because `chrome.css` does not declare them; a page that loads
+ * both reads the same three values either way.
+ */
+
+:root {
+  --danger: #dc2626;
+  --success: #16a34a;
+  --warning: #d97706;
+}
+
+/* ── The panel ──────────────────────────────────────────────────────────── */
+
+.property-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.property-panel__head {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  font-size: 1.0625rem;
+  font-weight: 600;
+}
+
+/* A name from an SD field, or the molecule's own SMILES when it carried none:
+   either can be long, and neither is worth pushing the numbers off the card. */
+.property-panel__label {
+  overflow: hidden;
+  max-width: 100%;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.osiris-note {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}
+
+/* The spinner while an explanation is fetched, on the line it explains. */
+.osiris-note--working {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.risk-panel,
+.property-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.risk-panel h5,
+.property-section h5 {
+  margin: 0;
+}
+
+/* ── The four risks ─────────────────────────────────────────────────────── */
+
+/* Two columns at the least: in a side panel too narrow for two 11rem squares,
+   the names wrap rather than stacking the four risks one under another. */
+.risk-grid {
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(11rem, calc(50% - 3px)), 1fr)
+  );
+}
+
+.risk-square {
+  display: flex;
+  align-items: center;
+  padding: 6px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin: 0;
+  background: var(--surface);
+  color: inherit;
+  font: inherit;
+  gap: 8px;
+  text-align: left;
+}
+
+button.risk-square {
+  cursor: pointer;
+}
+
+button.risk-square:hover {
+  border-color: var(--border-strong);
+  background: var(--surface-sunken);
+}
+
+button.risk-square[aria-pressed='true'] {
+  border-color: var(--accent);
+  background: color-mix(in oklab, var(--accent) 10%, white);
+}
+
+/* A cell of the comparison table: the square alone, centred in its column. */
+.risk-square--compact {
+  justify-content: center;
+  padding: 2px;
+  border: 0;
+  background: none;
+}
+
+.risk-square__swatch {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  border-radius: 3px;
+  background: var(--text-faint);
+}
+
+/* The three levels are the three the drug score multiplies by — ×1, ×0.8, ×0.6
+   — so the colour says what the score already counted. `unknown` is the
+   library's own "the tables did not load", which is never green. */
+.risk-square__swatch[data-level='none'] {
+  background: var(--success);
+}
+
+.risk-square__swatch[data-level='low'] {
+  background: var(--warning);
+}
+
+.risk-square__swatch[data-level='high'] {
+  background: var(--danger);
+}
+
+.risk-square__swatch[data-level='unknown'] {
+  background: var(--text-faint);
+}
+
+.risk-square__swatch[data-level='pending'] {
+  background: repeating-linear-gradient(
+    45deg,
+    var(--border),
+    var(--border) 3px,
+    var(--surface) 3px,
+    var(--surface) 6px
+  );
+}
+
+.risk-square__text {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.risk-square__name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.risk-square__level {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+/* ── Why a risk came back as it did ─────────────────────────────────────── */
+
+.risk-findings {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-sunken);
+  gap: 10px;
+}
+
+.risk-finding__heading {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+.risk-finding__drawings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.risk-finding__figure {
+  margin: 0;
+}
+
+.risk-finding__figure > figcaption {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+/* ── The ten numbers ────────────────────────────────────────────────────
+
+   A name, a bar and a value on one line each. The bar's colour is the only
+   thing here that is not a neutral, and it is mixed from the three status
+   tokens — there is no hex code in this part and none in the component that
+   sets the fill's length. */
+
+.property-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.property-row {
+  display: grid;
+  align-items: center;
+  gap: 0 10px;
+  grid-template-columns: minmax(6rem, 8.5rem) minmax(4rem, 1fr) minmax(
+      3.5rem,
+      auto
+    );
+}
+
+.property-row__label {
+  font-size: 0.8125rem;
+}
+
+.property-row__unit {
+  color: var(--text-faint);
+  font-size: 0.6875rem;
+}
+
+.property-row__unit::before {
+  content: ' ';
+}
+
+.property-row__value {
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+/* The bar carries its threshold label under it, so the row keeps room for one
+   whether or not that property has a published rule of thumb. */
+.property-bar {
+  position: relative;
+  padding-bottom: 0.875rem;
+}
+
+.property-bar__track {
+  position: relative;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--surface-sunken);
+  box-shadow: inset 0 0 0 1px var(--border);
+}
+
+.property-bar__fill {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  min-width: 2px;
+  border-radius: inherit;
+
+  /* The green-to-red ramp, mixed from the three shared status colours rather
+     than computed in JavaScript, which would put a hex code in a component.
+     `color-mix` clamps a percentage into 0–100%, so the first mix is pure amber
+     from the middle of the scale up and the second is pure amber down to it:
+     red → amber → green, with no muddy midpoint. */
+  --ramp-low: color-mix(
+    in oklab,
+    var(--warning) calc(var(--fitness, 1) * 200%),
+    var(--danger)
+  );
+
+  background: color-mix(
+    in oklab,
+    var(--success) calc((var(--fitness, 1) - 0.5) * 200%),
+    var(--ramp-low)
+  );
+}
+
+/* Where a diverging bar grows from. A fill that starts a quarter of the way
+   along says nothing without it. */
+.property-bar__origin {
+  position: absolute;
+  top: -1px;
+  bottom: -1px;
+  width: 1px;
+  background: var(--border-strong);
+}
+
+/* The published rule of thumb: cLogP ≤ 5, logS > −4, molweight < 450,
+   drug-likeness > 0. */
+.property-bar__mark {
+  position: absolute;
+  top: -3px;
+  bottom: -3px;
+  width: 2px;
+  border-radius: 1px;
+  background: var(--text-faint);
+}
+
+.property-bar__threshold {
+  position: absolute;
+  bottom: 0;
+  color: var(--text-faint);
+  font-size: 0.6875rem;
+  line-height: 1;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
+/* A narrow card has no width to spend on a bar: the name and the number are
+   what a phone reads, and the bar takes the line under them. */
+@media (max-width: 480px) {
+  .property-row {
+    grid-template-columns: minmax(0, 1fr) minmax(3.5rem, auto);
+  }
+
+  .property-row__bar {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+}
+
+/* The panel is worth printing beside the structure. */
+@media print {
+  .risk-findings {
+    break-inside: avoid;
+  }
+}