react-cheminfo 0.34.0 → 0.36.0

package/src/about/core/about.ts

@@ -10,7 +10,7 @@ import { providers } from './providers.ts';
 
 /**
  * What a site says about itself: the one page a visitor opens to find out what
- * the tool is, what it stands on, and who to tell when it breaks.
+ * the tool is, who provides it, and what it stands on.
  *
  * Every field is content, never markup. A site writes this record and the page
  * is drawn from it, which is what keeps fourteen About pages in one order and
@@ -53,35 +53,12 @@ export interface AboutContent {
    * @default undefined
    */
   providedBy?: readonly ProviderId[];
-  /**
-   * Licence the site itself is published under.
-   * @default 'MIT'
-   */
-  license?: string;
-  /**
-   * Where the sources live.
-   * @default the repository of the ECOSYSTEM_SITES record
-   */
-  repository?: string;
-  /**
-   * Whether a visitor can open that repository. A site naming a repository of
-   * its own says so here too, since the family's record then describes another
-   * one.
-   * @default the `publicRepository` of the ECOSYSTEM_SITES record
-   */
-  publicRepository?: boolean;
   /**
    * Which build is running, from `react-cheminfo/build-info` — never written
    * by hand, which is what keeps it true after the next release.
    * @default undefined — the site's build does not publish one
    */
   build?: BuildInfo;
-  /**
-   * Where a problem is reported: an address a visitor can actually open, so a
-   * site whose sources are private names one of its own or says nothing.
-   * @default the repository's /issues, and none at all when it is private
-   */
-  issues?: string;
 }
 
 /** One person who made a site. */
@@ -114,14 +91,8 @@ export interface ResolvedAbout {
   people: readonly AboutPerson[];
   /** The institutions providing the site, empty when the site names none. */
   providedBy: ProviderEntry[];
-  license: string;
-  repository: string;
-  /** Whether a visitor can open the repository, and so whether it is named. */
-  publicRepository: boolean;
   /** Which build is running, or `undefined` when the site does not say. */
   build: BuildInfo | undefined;
-  /** Where a problem is reported, or `undefined` when there is nowhere open. */
-  issues: string | undefined;
 }
 
 /**
@@ -137,10 +108,6 @@ export function resolveAbout(content: AboutContent): ResolvedAbout {
     typeof content.siteId === 'string'
       ? siteById(content.siteId)
       : content.siteId;
-  const repository = content.repository ?? site.repository;
-  const publicRepository =
-    content.publicRepository ?? site.publicRepository ?? false;
-
   return {
     site,
     what: content.what,
@@ -150,17 +117,7 @@ export function resolveAbout(content: AboutContent): ResolvedAbout {
     cite: content.cite ?? [],
     people: content.people ?? [],
     providedBy: providers(content.providedBy ?? []),
-    license: content.license ?? DEFAULT_LICENSE,
-    repository,
-    publicRepository,
     build: content.build,
-    // A tracker behind a private repository answers 404 to every visitor, so
-    // a site that names none of its own asks for a report nowhere.
-    issues:
-      content.issues ??
-      (publicRepository
-        ? `${withoutTrailingSlash(repository)}/issues`
-        : undefined),
   };
 }
 
@@ -222,16 +179,9 @@ export function aboutProblems(content: AboutContent): string[] {
   return problems;
 }
 
-/** What a site is published under unless it says otherwise. */
-const DEFAULT_LICENSE = 'MIT';
-
 const WHAT_LIMIT = 160;
 const CAN_MIN = 3;
 const CAN_MAX = 6;
 const CAN_LINE_LIMIT = 90;
 const PARAGRAPH_MAX = 2;
 const PARAGRAPH_LIMIT = 400;
-
-function withoutTrailingSlash(url: string): string {
-  return url.endsWith('/') ? url.slice(0, -1) : url;
-}

package/src/about/core/index.ts

@@ -1,4 +1,3 @@
-export { githubSources } from './repository.ts';
 export type { AboutContent, AboutPerson, ResolvedAbout } from './about.ts';
 export { aboutProblems, resolveAbout } from './about.ts';
 export type { ProviderEntry, ProviderId } from './providers.ts';

package/src/about/ui/AboutBuild.tsx

@@ -1,15 +1,12 @@
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
+import type { CSSProperties, ReactElement } from 'react';
 
 import type { BuildInfo } from '../../build/core/buildInfo.ts';
 import { formatBuiltAt, shortCommit } from '../../build/core/buildInfo.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
-import { githubSources } from '../core/repository.ts';
 
 export interface AboutBuildProps {
   /** What the build published about itself. */
   build: BuildInfo;
-  /** Where the sources live, which is what the version and commit link into. */
-  repository: string;
 }
 
 /**
@@ -17,23 +14,21 @@ export interface AboutBuildProps {
  *
  * A report of something going wrong is worth answering only when we know what
  * was running. The version itself is in the hero, where a reader is asked to
- * quote it from; this line carries the rest, and the commit links into the
- * repository, so the change that caused a problem is one click from the page
- * that shows it.
+ * quote it from; this line carries the rest, so a report can name the exact
+ * build the problem was seen on.
  * @param props - See {@link AboutBuildProps}.
  * @returns The line.
  */
 export function AboutBuild(props: AboutBuildProps): ReactElement {
-  const { build, repository } = props;
+  const { build } = props;
   const t = useChromeT();
-  const sources = githubSources(repository);
   const builtAt = formatBuiltAt(build.builtAt);
   if (build.commit === undefined) {
     return <p style={PARAGRAPH_STYLE}>{t('about.built', { builtAt })}</p>;
   }
 
-  // The commit is a link inside a sentence whose word order is the
-  // translator's, so the message is split where it names it.
+  // The commit sits inside a sentence whose word order is the translator's,
+  // so the message names where it goes and is split there.
   const [before = '', after = ''] = t('about.builtFromCommit', {
     builtAt,
   }).split('{commit}');
@@ -41,36 +36,14 @@ export function AboutBuild(props: AboutBuildProps): ReactElement {
   return (
     <p style={PARAGRAPH_STYLE}>
       {before}
-      <Reference
-        href={
-          sources === undefined
-            ? undefined
-            : `${sources}/commit/${build.commit}`
-        }
-      >
-        {shortCommit(build.commit)}
-      </Reference>
+      <code style={CODE_STYLE}>{shortCommit(build.commit)}</code>
       {after}
     </p>
   );
 }
 
-function Reference(props: {
-  href: string | undefined;
-  children: ReactNode;
-}): ReactElement {
-  const { href, children } = props;
-  if (href === undefined) return <code style={CODE_STYLE}>{children}</code>;
-
-  return (
-    <a href={href} target="_blank" rel="noopener noreferrer" style={LINK_STYLE}>
-      <code style={CODE_STYLE}>{children}</code>
-    </a>
-  );
-}
-
 const PARAGRAPH_STYLE = {
-  margin: '8px 0 0',
+  margin: 0,
   color: 'var(--text-muted)',
   fontSize: 13,
 } as const satisfies CSSProperties;
@@ -79,5 +52,3 @@ const CODE_STYLE = {
   fontFamily: 'var(--font-mono, ui-monospace, monospace)',
   fontSize: 13,
 } as const satisfies CSSProperties;
-
-const LINK_STYLE = { color: 'var(--accent)' } as const satisfies CSSProperties;

package/src/about/ui/AboutPage.tsx

@@ -47,8 +47,8 @@ export interface AboutPageProps {
 
 /**
  * The About page of a site of the family: what the tool is, who provides it,
- * what a visitor can do with it, what it is built on, how to cite it, and where
- * to report a problem — always in that order.
+ * what a visitor can do with it, what it is built on, and how to cite it —
+ * always in that order.
  *
  * The order is the point. A reader who has read one of our About pages knows
  * where the credits are on the other thirteen, and a site that writes its own
@@ -83,11 +83,7 @@ export function AboutPage(props: AboutPageProps): ReactElement {
           </p>
           <p style={WHAT_STYLE}>{about.what}</p>
         </div>
-        <AboutVersion
-          build={about.build}
-          repository={about.repository}
-          publicRepository={about.publicRepository}
-        />
+        <AboutVersion build={about.build} />
       </header>
 
       {about.people.length === 0 && about.providedBy.length === 0 ? null : (
@@ -133,68 +129,18 @@ export function AboutPage(props: AboutPageProps): ReactElement {
       )}
 
       {/*
-        A repository nobody outside can open is named nowhere: a licence a
-        reader cannot act on and a link that answers 404 say less than silence.
-        The version stays in the hero, unlinked, so a report still names a build.
+        The build the reader has open, last and under no heading: it is what a
+        report has to name, not something anybody came to the page to read.
       */}
-      {!about.publicRepository ? null : (
-        <AboutSection
-          title={t('about.licenceAndSource')}
-          className="about-licence"
-        >
-          <p style={FIRST_PARAGRAPH_STYLE}>
-            {around(
-              t('about.licence', { license: about.license }),
-              'sources',
-              <ExternalLink key="sources" href={about.repository} />,
-            )}
-          </p>
-          {about.build === undefined ? null : (
-            <AboutBuild build={about.build} repository={about.repository} />
-          )}
-        </AboutSection>
-      )}
-
-      {/*
-        Asking for a report is worth nothing without somewhere to send it, and
-        the tracker of a private repository answers 404 to every visitor.
-      */}
-      {about.issues === undefined ? null : (
-        <AboutSection title={t('about.foundAProblem')} className="about-issues">
-          <p style={FIRST_PARAGRAPH_STYLE}>
-            {around(
-              t('about.reportIt'),
-              'tracker',
-              <ExternalLink key="tracker" href={about.issues} />,
-            )}
-          </p>
+      {about.build === undefined ? null : (
+        <AboutSection className="about-build">
+          <AboutBuild build={about.build} />
         </AboutSection>
       )}
     </div>
   );
 }
 
-// A link sits inside a sentence whose word order is the translator's, so the
-// message names where it goes with a placeholder and is split there.
-function around(
-  message: string,
-  placeholder: string,
-  link: ReactNode,
-): ReactNode[] {
-  const [before = '', after = ''] = message.split(`{${placeholder}}`);
-  return [before, link, after];
-}
-
-function ExternalLink(props: { href: string }): ReactElement {
-  const { href } = props;
-
-  return (
-    <a href={href} target="_blank" rel="noopener noreferrer" style={LINK_STYLE}>
-      {href.replace(/^https?:\/\//, '')}
-    </a>
-  );
-}
-
 const PAGE_STYLE = {
   display: 'flex',
   flexDirection: 'column',
@@ -250,5 +196,3 @@ const FIRST_PARAGRAPH_STYLE = {
 const PARAGRAPH_STYLE = {
   margin: '8px 0 0',
 } as const satisfies CSSProperties;
-
-const LINK_STYLE = { color: 'var(--accent)' } as const satisfies CSSProperties;

package/src/about/ui/AboutVersion.tsx

@@ -14,17 +14,11 @@ import {
   buildLabel,
   buildStamp,
   buildSummary,
-  releasedVersion,
 } from '../../build/core/buildInfo.ts';
-import { githubSources } from '../core/repository.ts';
 
 export interface AboutVersionProps {
   /** What the build published about itself, or `undefined` when it published none. */
   build: BuildInfo | undefined;
-  /** Where the sources live, which is what the badge links into. */
-  repository: string;
-  /** Whether a visitor can open that repository, and so whether it is linked. */
-  publicRepository: boolean;
 }
 
 /**
@@ -34,53 +28,24 @@ export interface AboutVersionProps {
  * @returns The badge, or `null` when the build says nothing worth showing.
  */
 export function AboutVersion(props: AboutVersionProps): ReactElement | null {
-  const { build, repository, publicRepository } = props;
+  const { build } = props;
   const label = buildLabel(build);
   if (build === undefined || label === undefined) return null;
-  const href = publicRepository ? addressOf(build, repository) : undefined;
-  const summary = buildSummary(build);
   // The instant belongs on the badge rather than in its hover: a version
   // nobody can date says nothing about how old the page they read is.
   const badge = `${label} · ${buildStamp(build.builtAt)}`;
-  if (href === undefined) {
-    return (
-      <span style={BADGE_STYLE} className="about-version" title={summary}>
-        {badge}
-      </span>
-    );
-  }
 
   return (
-    <a
+    <span
+      style={BADGE_STYLE}
       className="about-version"
-      href={href}
-      title={summary}
-      target="_blank"
-      rel="noopener noreferrer"
-      style={LINK_BADGE_STYLE}
+      title={buildSummary(build)}
     >
       {badge}
-    </a>
+    </span>
   );
 }
 
-/**
- * What the badge opens: the release it names, or the commit it was built from.
- * @param build - What the build published about itself.
- * @param repository - Where the sources live.
- * @returns The address, or `undefined` when nothing inside the repository can
- * be addressed.
- */
-function addressOf(build: BuildInfo, repository: string): string | undefined {
-  const sources = githubSources(repository);
-  if (sources === undefined) return undefined;
-  const version = releasedVersion(build);
-  if (version !== undefined) return `${sources}/releases/tag/v${version}`;
-  return build.commit === undefined
-    ? undefined
-    : `${sources}/commit/${build.commit}`;
-}
-
 const BADGE_STYLE = {
   flex: '0 0 auto',
   fontFamily: 'var(--font-mono, ui-monospace, monospace)',
@@ -88,8 +53,3 @@ const BADGE_STYLE = {
   color: 'var(--text-muted)',
   whiteSpace: 'nowrap',
 } as const satisfies CSSProperties;
-
-const LINK_BADGE_STYLE = {
-  ...BADGE_STYLE,
-  color: 'var(--accent)',
-} as const satisfies CSSProperties;

package/src/download/core/index.ts

@@ -51,31 +51,6 @@ export {
 } from './figureTarget.ts';
 export { sanitizeFileName } from './sanitizeFileName.ts';
 
-export {
-  exportButtonsStyle,
-  exportNoteStyle,
-  exportSectionStyle,
-} from './exportStyles.ts';
-export type {
-  ImageResolution,
-  ImageResolutionId,
-  ImageSize,
-} from './imageResolution.ts';
-export {
-  DEFAULT_IMAGE_RESOLUTION,
-  IMAGE_RESOLUTIONS,
-  formatImageSize,
-  imageResolution,
-  imageSize,
-} from './imageResolution.ts';
-export type { PictureFrame, PictureOptions } from './pictureExport.ts';
-export {
-  PICTURE_PADDING,
-  copyPicture,
-  pictureSize,
-  savePngPicture,
-  saveSvgPicture,
-} from './pictureExport.ts';
 export { drawingIn, stackDrawings } from './stackedDrawing.ts';
 export type { SvgBox } from './svgBounds.ts';
 export { CONTENT_ATTRIBUTE, contentBox, elementBox } from './svgBounds.ts';

package/src/download/ui/FigureDownload.tsx

@@ -1,74 +1,20 @@
 import type { IconName } from '@blueprintjs/core';
 import { PopoverNext } from '@blueprintjs/core';
 import type { ReactElement } from 'react';
-import { useState } from 'react';
 
 import { useChromeT } from '../../i18n/ui/useT.ts';
 import { OverlayIconButton } from '../../overlay/ui/OverlayIconButton.tsx';
-import type { FigureFormat } from '../core/downloadFigure.ts';
-import { downloadFigure } from '../core/downloadFigure.ts';
-import type { FigureLayout } from '../core/figureLayout.ts';
-import { figureLayoutRedraws, figureLayoutSize } from '../core/figureLayout.ts';
-import type { FigurePixels } from '../core/figureScale.ts';
-import {
-  DEFAULT_FIGURE_SCALE,
-  FIGURE_SCALES,
-  defaultFigureScale,
-} from '../core/figureScale.ts';
-import { figureSize } from '../core/figureTarget.ts';
 
-import { FigureDownloadPanel } from './FigureDownloadPanel.tsx';
-import type { FigureRenderer } from './useFigureRedraw.tsx';
-import { useFigureRedraw } from './useFigureRedraw.tsx';
+import type { FigureDownloadOptions } from './useFigureDownload.tsx';
+import { useFigureDownload } from './useFigureDownload.tsx';
 
 /** What {@link FigureDownload} needs. */
-export interface FigureDownloadProps {
-  /**
-   * The `id` of the box the figure is mounted in. Everything drawn inside it
-   * is saved — sixteen charts of a pair grid as readily as one scatter plot —
-   * and the controls floating over it are left behind.
-   */
-  targetId: string;
-  /**
-   * What the saved file is called, without its extension. Name it after the
-   * data rather than after the tool: a reader with four of these in a
-   * downloads folder cannot tell four `figure.png` apart.
-   * @default 'figure'
-   */
-  fileName?: string;
-  /**
-   * The format it opens on.
-   * @default 'png'
-   */
-  defaultFormat?: FigureFormat;
-  /**
-   * The resolution a PNG opens on, as a multiple of the figure on screen. An
-   * SVG opens at 1×, the size it has on screen, and each format keeps the
-   * multiple the reader last picked for it.
-   * @default 2
-   */
-  defaultScale?: number;
-  /**
-   * The resolutions offered.
-   * @default [1, 2, 3, 4]
-   */
-  scales?: readonly number[];
-  /**
-   * What is painted under the figure. `transparent` leaves it unpainted, for a
-   * figure going onto a coloured slide.
-   * @default the surface the figure is drawn on
-   */
-  background?: string;
+export interface FigureDownloadProps extends FigureDownloadOptions {
   /**
    * What the glyph is called, for the pointer and for a screen reader.
    * @default the chrome's own line, in the language of the page
    */
   label?: string;
-  /**
-   * What the panel behind it is called.
-   * @default the chrome's own line, in the language of the page
-   */
-  title?: string;
   /**
    * Its glyph.
    * @default 'download'
@@ -79,20 +25,11 @@ export interface FigureDownloadProps {
    * @default undefined
    */
   testId?: string;
-  /**
-   * Draws the figure at a size, for a file. When it is given the panel offers
-   * a size — as shown, 4:3, 16:9, a journal column, or typed — and a figure
-   * saved at a size other than its own is drawn again at that size, off the
-   * page, so its axes and labels are laid out for the new shape rather than
-   * stretched into it. Draw exactly what is on screen, with the same data,
-   * zoom and colours; only the box changes.
-   * @default undefined — the figure is saved at the size it has on screen
-   */
-  renderFigure?: FigureRenderer;
 }
 
 /**
- * The glyph that takes the figure off the page as a file.
+ * The glyph that takes the figure off the page, as a file or onto the
+ * clipboard.
  *
  * It works from the `id` of the box the figure is mounted in rather than from
  * the figure itself, so the control is free to sit in the bar above the
@@ -112,97 +49,23 @@ export interface FigureDownloadProps {
  * @returns The glyph and its panel.
  */
 export function FigureDownload(props: FigureDownloadProps): ReactElement {
-  const { targetId, fileName, background, scales = FIGURE_SCALES } = props;
-  const { defaultFormat = 'png', defaultScale = DEFAULT_FIGURE_SCALE } = props;
-  const { label, title } = props;
-  const { icon = 'download', testId, renderFigure } = props;
-
+  const { label, icon = 'download', testId, ...options } = props;
   const t = useChromeT();
-  const [open, setOpen] = useState(false);
-  const [format, setFormat] = useState<FigureFormat>(defaultFormat);
-  const [picked, setPicked] = useState<Record<FigureFormat, number>>(() => ({
-    png: defaultScale,
-    svg: defaultFigureScale('svg'),
-  }));
-  const scale = picked[format];
-  const [size, setSize] = useState<FigurePixels | null>(null);
-  const [failure, setFailure] = useState<string | null>(null);
-  const [saving, setSaving] = useState(false);
-  const [layout, setLayout] = useState<FigureLayout>('screen');
-  const [custom, setCustom] = useState<FigurePixels | null>(null);
-  const { redraw, portal } = useFigureRedraw(renderFigure);
-
-  // The panel is held open from here rather than left to itself, because the
-  // figure has to be measured at the moment it opens: its size is what the
-  // panel writes out, and reading a bounding box on every render would cost a
-  // layout pass on a bar that is re-rendered on every pointer move.
-  function interact(next: boolean): void {
-    setOpen(next);
-    if (!next) return;
-    setSize(figureSize(targetId));
-    setFailure(null);
-  }
-
-  async function save(): Promise<void> {
-    setSaving(true);
-    try {
-      const options = { format, scale, fileName, background };
-      if (
-        renderFigure !== undefined &&
-        size !== null &&
-        figureLayoutRedraws(layout, size, custom ?? size)
-      ) {
-        const drawn = figureLayoutSize(layout, size, custom ?? size);
-        await redraw(targetId, drawn, (box) => downloadFigure(box, options));
-      } else {
-        await downloadFigure(targetId, options);
-      }
-      setFailure(null);
-    } catch (error) {
-      setFailure(error instanceof Error ? error.message : String(error));
-    } finally {
-      setSaving(false);
-    }
-  }
+  const { isOpen, setOpen, panel, format, portal } = useFigureDownload(options);
 
   return (
     <>
       <PopoverNext
-        isOpen={open}
+        isOpen={isOpen}
         placement="bottom-end"
-        onInteraction={interact}
-        content={
-          <FigureDownloadPanel
-            title={title ?? t('download.saveFigure')}
-            format={format}
-            scale={scale}
-            scales={scales}
-            size={size}
-            failure={failure}
-            saving={saving}
-            onFormatChange={setFormat}
-            onScaleChange={(next) =>
-              setPicked((current) => ({ ...current, [format]: next }))
-            }
-            onSave={() => void save()}
-            sizing={
-              renderFigure === undefined
-                ? undefined
-                : {
-                    layout,
-                    custom,
-                    onLayoutChange: setLayout,
-                    onCustomChange: setCustom,
-                  }
-            }
-          />
-        }
+        onInteraction={setOpen}
+        content={panel}
       >
         <OverlayIconButton
           icon={icon}
           label={label ?? t('download.saveThisFigure')}
           value={format.toUpperCase()}
-          active={open}
+          active={isOpen}
           testId={testId}
           opensMenu
         />