react-cheminfo 0.75.0 → 0.77.0

package/src/structure/ui/CardStructure.tsx

@@ -0,0 +1,76 @@
+import type { ReactElement, ReactNode } from 'react';
+
+import { OverlayLayer } from '../../overlay/ui/OverlayLayer.tsx';
+import { structureSource } from '../core/structureSource.ts';
+
+import type { StructureProps } from './Structure.tsx';
+import { Structure } from './Structure.tsx';
+import { StructureExportButton } from './StructureExportButton.tsx';
+
+/** What {@link CardStructure} draws and hands over. */
+export interface CardStructureProps extends StructureProps {
+  /**
+   * Base name of every file saved from the export, extension excluded.
+   * @default 'structure'
+   */
+  name?: string;
+  /**
+   * Whether the structure is a query fragment, such as a toxicophore, whose
+   * idCode is not a molecule's.
+   * @default false
+   */
+  fragment?: boolean;
+  /**
+   * What the glyph is called, for the pointer and for a screen reader.
+   * @default the chrome's own line, `Copy or save the structure: SMILES,
+   *   molfile`
+   */
+  label?: string;
+  /**
+   * The drawing, when the site draws the structure itself — its own
+   * highlights, its own numbering. The export still reads the notations.
+   * @default a `Structure` drawn from the same notations, at the same size
+   */
+  children?: ReactNode;
+}
+
+/**
+ * A structure of a card, with the glyph that hands it over: the export
+ * dialog, which copies it as an SVG or a PNG, a SMILES or a molfile, V2000 or
+ * V3000. Every structure an answer draws carries it, alone or in a grid, so
+ * none has to be redrawn to be reused.
+ *
+ * The glyph stands beside the top right corner, faded until the structure is
+ * pointed at, as the glyphs of `CardFigure` (`react-cheminfo/card`) do;
+ * `styles/card.css` draws both. A structure with nothing to read draws its
+ * placeholder alone.
+ * @param props - The structure, its size, and the name of its files.
+ * @returns The structure and its glyph.
+ */
+export function CardStructure(props: CardStructureProps): ReactElement {
+  const { name, fragment, label, children, ...structure } = props;
+  const { idCode, coordinates, molfile, smiles } = structure;
+  const drawing = children ?? <Structure {...structure} />;
+  const source = structureSource({ idCode, coordinates, molfile, smiles });
+  if (source.kind === 'empty') return <>{drawing}</>;
+
+  return (
+    <div className="card-figure card-structure">
+      <div className="card-figure__drawing">{drawing}</div>
+      {/* Compact: the glyphs of a figure shown in somebody else's page. */}
+      <OverlayLayer density="compact" awake>
+        <div className="card-figure__tools" data-testid="figure-tools">
+          <StructureExportButton
+            idCode={idCode}
+            coordinates={coordinates}
+            molfile={molfile}
+            smiles={smiles}
+            name={name}
+            fragment={fragment}
+            label={label}
+          />
+        </div>
+      </OverlayLayer>
+    </div>
+  );
+}

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/StructurePicturePane.tsx

@@ -4,6 +4,7 @@ import type { CSSProperties, ReactElement } from 'react';
 import { useMemo, useState } from 'react';
 
 import { copyFigure } from '../../download/core/copyFigure.ts';
+import { copySvg } from '../../download/core/copySvg.ts';
 import { downloadBlob } from '../../download/core/downloadBlob.ts';
 import { downloadText } from '../../download/core/downloadText.ts';
 import { figurePng } from '../../download/core/figurePng.ts';
@@ -37,7 +38,7 @@ const DEFAULT_SCALE = 2;
 
 /**
  * The structure as a picture: what it looks like, how big it leaves, and the
- * three ways it leaves.
+ * four ways it leaves.
  *
  * What is shown is the file: the preview is the very SVG the save button
  * writes, laid out smaller, so nobody saves a picture they have not seen. The
@@ -136,6 +137,18 @@ export function StructurePicturePane(
             })
           }
         />
+        <Button
+          icon="clipboard"
+          size="small"
+          text={t('structure.export.copySvg')}
+          onClick={() =>
+            void run(async () =>
+              (await copySvg(picture.markup))
+                ? t('structure.export.svgCopied')
+                : t('clipboard.failed'),
+            )
+          }
+        />
         <Button
           icon="clipboard"
           size="small"

package/src/structure/ui/index.ts

@@ -33,7 +33,13 @@ export type { StructureExportDialogProps } from './StructureExportDialog.tsx';
 export { StructureExportDialog } from './StructureExportDialog.tsx';
 export type { StructureExportButtonProps } from './StructureExportButton.tsx';
 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/chrome.css

@@ -850,9 +850,9 @@ a.source-badge:hover {
   gap: 8px;
 }
 
-/* Two columns, so the three buttons are one size: a row of buttons whose
-   widths are set by the length of their labels reads as three unrelated
-   controls. */
+/* Two columns, so the buttons are one size — the saves over the copies, SVG
+   over SVG: a row of buttons whose widths are set by the length of their
+   labels reads as unrelated controls. */
 .structure-export__actions {
   display: grid;
   margin-top: 2px;

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;
+  }
+}