react-cheminfo 0.59.0 → 0.60.0

package/src/moleculesSources/ui/MoleculesSourceBadge.tsx

@@ -0,0 +1,44 @@
+import type { ReactElement } from 'react';
+
+import { MOLECULES_URL, sourceLook } from '../core/moleculesSources.ts';
+
+import type { SourceBadgeProps } from './SourceBadge.tsx';
+import { SourceBadge } from './SourceBadge.tsx';
+import { useSourceLooks } from './useSourceLooks.ts';
+
+export interface MoleculesSourceBadgeProps extends Omit<
+  SourceBadgeProps,
+  'color' | 'logo'
+> {
+  /**
+   * Where molecules answers, for a site that reads another instance.
+   * @default MOLECULES_URL
+   */
+  moleculesUrl?: string;
+}
+
+/**
+ * A source named by a site that does not keep its look: the colour and the
+ * logo come from molecules.cheminfo.org, where they are edited. A source
+ * molecules does not know — or until it has answered — is drawn neutral.
+ * @param props - The source, by its name in any case, and the entry it holds.
+ * @returns The badge.
+ */
+export function MoleculesSourceBadge(
+  props: MoleculesSourceBadgeProps,
+): ReactElement {
+  const { moleculesUrl = MOLECULES_URL, ...badge } = props;
+  const look = sourceLook(useSourceLooks(moleculesUrl), badge.name);
+  if (look === undefined) return <SourceBadge {...badge} />;
+
+  return (
+    <SourceBadge
+      {...badge}
+      label={badge.label ?? look.name}
+      // A source molecules draws in no colour of its own is drawn neutral
+      // here: the site naming it is not that source.
+      color={look.color ?? undefined}
+      logo={look.logo}
+    />
+  );
+}

package/src/moleculesSources/ui/SourceBadge.tsx

@@ -0,0 +1,117 @@
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+
+export interface SourceBadgeProps {
+  /** What the source is called, read in the badge's tooltip. */
+  name: string;
+  /**
+   * What the badge says.
+   * @default name
+   */
+  label?: ReactNode;
+  /**
+   * The source's own colour, as `#rrggbb`. `null` draws it in the site's own
+   * colour, which is how a site marks a source that is itself.
+   * @default undefined — a neutral grey, for a source with no look
+   */
+  color?: string | null;
+  /**
+   * The absolute address of its little logo.
+   * @default null
+   */
+  logo?: string | null;
+  /**
+   * The entry's identifier there, written after the name.
+   * @default null
+   */
+  identifier?: string | null;
+  /**
+   * How many entries the source holds, written after the name when more than
+   * one.
+   * @default 1
+   */
+  count?: number;
+  /**
+   * Where the badge leads, opened in a new tab.
+   * @default null — the badge names the source and leads nowhere
+   */
+  href?: string | null;
+  /**
+   * The tooltip.
+   * @default the name, then the identifier
+   */
+  title?: string;
+  /**
+   * The smaller badge of a dense list, whose identifier goes in the tooltip
+   * only.
+   * @default false
+   */
+  compact?: boolean;
+}
+
+/**
+ * A source, as a badge: its name in its own colour, its little logo on a white
+ * chip, and the entry it holds — the same badge on every site of the family
+ * that names where a molecule comes from.
+ * @param props - See {@link SourceBadgeProps}.
+ * @returns The badge.
+ */
+export function SourceBadge(props: SourceBadgeProps): ReactElement {
+  const {
+    name,
+    label = name,
+    color,
+    logo = null,
+    identifier = null,
+    count = 1,
+    href = null,
+    compact = false,
+  } = props;
+  const title =
+    props.title ?? (identifier === null ? name : `${name} ${identifier}`);
+  const className = [
+    'source-badge',
+    compact ? 'source-badge--compact' : '',
+    color === undefined ? 'source-badge--neutral' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+  // A source with no colour of its own takes the site's, from the stylesheet.
+  const style =
+    typeof color === 'string'
+      ? ({ '--source': color } as CSSProperties)
+      : undefined;
+  const content = (
+    <>
+      {logo === null ? null : (
+        <span className="source-badge__logo">
+          <img src={logo} alt="" />
+        </span>
+      )}
+      <span className="source-badge__name">{label}</span>
+      {compact || identifier === null ? null : (
+        <span className="source-badge__id">{identifier}</span>
+      )}
+      {count > 1 ? <span className="source-badge__count">{count}</span> : null}
+    </>
+  );
+
+  if (href === null) {
+    return (
+      <span className={className} style={style} title={title}>
+        {content}
+      </span>
+    );
+  }
+  return (
+    <a
+      className={className}
+      style={style}
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      title={title}
+    >
+      {content}
+    </a>
+  );
+}

package/src/moleculesSources/ui/index.ts

@@ -0,0 +1,6 @@
+export type { MoleculesSourceBadgeProps } from './MoleculesSourceBadge.tsx';
+export { MoleculesSourceBadge } from './MoleculesSourceBadge.tsx';
+export type { SourceBadgeProps } from './SourceBadge.tsx';
+export { SourceBadge } from './SourceBadge.tsx';
+export type { SourceLooksStore } from './useSourceLooks.ts';
+export { sourceLooksStore, useSourceLooks } from './useSourceLooks.ts';

package/src/moleculesSources/ui/useSourceLooks.ts

@@ -0,0 +1,70 @@
+import { useSyncExternalStore } from 'react';
+
+import type { SourceLooks } from '../core/moleculesSources.ts';
+import { MOLECULES_URL, fetchSourceLooks } from '../core/moleculesSources.ts';
+
+/**
+ * Every source's look, read from molecules.cheminfo.org once per page however
+ * many badges ask for it.
+ * @param url - Where molecules answers.
+ * @returns The looks by lower-case name, or null until molecules has answered;
+ * an empty map when it could not be read, so the badges stop waiting and stay
+ * neutral.
+ */
+export function useSourceLooks(
+  url: string = MOLECULES_URL,
+): SourceLooks | null {
+  const store = sourceLooksStore(url);
+  return useSyncExternalStore(store.subscribe, store.read, notYet);
+}
+
+/** The one read of a molecules address, shared by every badge on the page. */
+export interface SourceLooksStore {
+  /** Follow the read, starting it on the first call. */
+  subscribe: (listener: () => void) => () => void;
+  /** What has been read so far. */
+  read: () => SourceLooks | null;
+}
+
+/**
+ * The store behind {@link useSourceLooks}: one per address, read once.
+ * @param url - Where molecules answers.
+ * @returns The store.
+ */
+export function sourceLooksStore(url: string): SourceLooksStore {
+  let store = STORES.get(url);
+  if (store === undefined) {
+    store = createStore(url);
+    STORES.set(url, store);
+  }
+  return store;
+}
+
+const STORES = new Map<string, SourceLooksStore>();
+
+function createStore(url: string): SourceLooksStore {
+  let looks: SourceLooks | null = null;
+  let started = false;
+  const listeners = new Set<() => void>();
+
+  function settle(value: SourceLooks): void {
+    looks = value;
+    for (const listener of listeners) listener();
+  }
+
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      if (!started) {
+        started = true;
+        fetchSourceLooks({ url }).then(settle, () => settle(new Map()));
+      }
+      return () => listeners.delete(listener);
+    },
+    read: () => looks,
+  };
+}
+
+function notYet(): null {
+  return null;
+}

package/src/moleculesToken/core/index.ts

@@ -9,3 +9,4 @@ export {
   checkMoleculesTokens,
   publicTokenCheck,
 } from './moleculesToken.ts';
+export { issueTokenCommand, tokensToFix } from './tokenFix.ts';

package/src/moleculesToken/core/tokenFix.ts

@@ -0,0 +1,37 @@
+import type {
+  MoleculesTokenCheck,
+  MoleculesTokenVerdict,
+} from './moleculesToken.ts';
+
+/** The verdicts only a new token, written in the server's `.env`, fixes. */
+const NEEDS_NEW_TOKEN: ReadonlySet<MoleculesTokenVerdict> = new Set([
+  'unset',
+  'refused',
+  'otherSource',
+]);
+
+/**
+ * The checks whose token has to be replaced: none is set, molecules.cheminfo.org
+ * refuses it, or it was issued for another source. A token that could not be
+ * checked is not among them, since nothing written in the `.env` fixes that.
+ * @param checks - The last checks.
+ * @returns Those to fix, in the order given.
+ */
+export function tokensToFix(
+  checks: readonly MoleculesTokenCheck[],
+): MoleculesTokenCheck[] {
+  return checks.filter((check) => NEEDS_NEW_TOKEN.has(check.verdict));
+}
+
+/**
+ * The command molecules.cheminfo.org issues a check's token with, on its
+ * server. The source is quoted, since a name like `NP Atlas` holds a space;
+ * the email is left for the reader to write.
+ * @param check - The check, whose first source the token is issued for.
+ * @returns The command.
+ */
+export function issueTokenCommand(
+  check: Pick<MoleculesTokenCheck, 'sources'>,
+): string {
+  return `npm run tokens -- issue '${check.sources[0] ?? 'SOURCE'}' EMAIL`;
+}

package/src/moleculesToken/ui/MoleculesTokenFix.tsx

@@ -0,0 +1,95 @@
+import { Callout } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+
+import { CodeBlock } from '../../clipboard/ui/CodeBlock.tsx';
+import { useLanguage } from '../../i18n/ui/useLanguage.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { trimTrailingSlash } from '../../router/core/address.ts';
+import type { MoleculesTokenCheck } from '../core/moleculesToken.ts';
+import { issueTokenCommand, tokensToFix } from '../core/tokenFix.ts';
+
+/** Where molecules.cheminfo.org answers when the site names no other. */
+const DEFAULT_MOLECULES_URL = 'https://molecules.cheminfo.org';
+
+/** What {@link MoleculesTokenFix} shows. */
+export interface MoleculesTokenFixProps {
+  /** The last checks. */
+  checks: readonly MoleculesTokenCheck[];
+  /**
+   * Where molecules.cheminfo.org answers, whose Admin page issues tokens.
+   * @default 'https://molecules.cheminfo.org'
+   */
+  moleculesUrl?: string;
+}
+
+/**
+ * What to do about the tokens that have to be replaced — none set, refused, or
+ * issued for another source — in the three steps it takes: issue one on
+ * molecules.cheminfo.org, write it in the server's `.env`, restart. Nothing
+ * when every token is fine.
+ * @param props - See {@link MoleculesTokenFixProps}.
+ * @returns The steps, or null.
+ */
+export function MoleculesTokenFix(
+  props: MoleculesTokenFixProps,
+): ReactElement | null {
+  const { checks, moleculesUrl = DEFAULT_MOLECULES_URL } = props;
+  const t = useChromeT();
+  const language = useLanguage();
+  const toFix = tokensToFix(checks);
+  if (toFix.length === 0) return null;
+
+  const one = toFix.length === 1;
+  const variables = new Intl.ListFormat(language, {
+    type: 'conjunction',
+  }).format(toFix.map((check) => check.variable));
+  const admin = `${trimTrailingSlash(moleculesUrl)}/admin`;
+  const unsetOnly = toFix.every((check) => check.verdict === 'unset');
+
+  return (
+    <Callout
+      intent={unsetOnly ? 'warning' : 'danger'}
+      icon="key"
+      title={t('moleculesToken.fix.title', { variables })}
+      className="molecules-tokens__fix"
+      data-testid="molecules-tokens-fix"
+    >
+      <ol>
+        <li>
+          <p>
+            {t(
+              one
+                ? 'moleculesToken.fix.issueOne'
+                : 'moleculesToken.fix.issueMany',
+            )}{' '}
+            <a href={admin} target="_blank" rel="noreferrer">
+              {admin}
+            </a>
+          </p>
+          <p>{t('moleculesToken.fix.issueOnServer')}</p>
+          <CodeBlock
+            tone="muted"
+            copyable
+            code={[...new Set(toFix.map(issueTokenCommand))].join('\n')}
+          />
+        </li>
+        <li>
+          <p>
+            {t(
+              one ? 'moleculesToken.fix.envOne' : 'moleculesToken.fix.envMany',
+            )}
+          </p>
+          <CodeBlock
+            tone="muted"
+            copyable
+            code={toFix.map((check) => `${check.variable}=mct_…`).join('\n')}
+          />
+        </li>
+        <li>
+          <p>{t('moleculesToken.fix.restart')}</p>
+          <CodeBlock tone="muted" copyable code="docker compose up -d" />
+        </li>
+      </ol>
+    </Callout>
+  );
+}

package/src/moleculesToken/ui/MoleculesTokenTable.tsx

@@ -1,16 +1,18 @@
 import type { Intent } from '@blueprintjs/core';
 import { Button, Callout, HTMLTable, Tag } from '@blueprintjs/core';
-import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
 import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
 import { useLanguage } from '../../i18n/ui/useLanguage.ts';
-import type { Translate } from '../../i18n/ui/useT.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 import type {
   MoleculesTokenCheck,
   MoleculesTokenVerdict,
 } from '../core/moleculesToken.ts';
+import { tokensToFix } from '../core/tokenFix.ts';
+
+import { MoleculesTokenFix } from './MoleculesTokenFix.tsx';
+import { tokenDetails } from './tokenDetails.tsx';
 
 /** What {@link MoleculesTokenTable} shows. */
 export interface MoleculesTokenTableProps {
@@ -32,6 +34,11 @@ export interface MoleculesTokenTableProps {
    * @default undefined
    */
   error?: string;
+  /**
+   * Where molecules.cheminfo.org answers, whose Admin page issues tokens.
+   * @default 'https://molecules.cheminfo.org'
+   */
+  moleculesUrl?: string;
 }
 
 const INTENT: Record<MoleculesTokenVerdict, Intent> = {
@@ -60,12 +67,12 @@ const ISSUE_COMMAND = 'npm run tokens -- issue SOURCE EMAIL';
  * The tokens a site holds for molecules.cheminfo.org, one row each, with what
  * molecules.cheminfo.org said of it when it was last checked: valid, another
  * source's, refused, not set. A token is changed in the server's `.env`, never
- * here, so the table says where.
+ * here, so the table says where, and above it how, when one has to be.
  * @param props - See {@link MoleculesTokenTableProps}.
  * @returns The table.
  */
 export function MoleculesTokenTable(props: MoleculesTokenTableProps) {
-  const { checks, pending = false, onCheckAgain, error } = props;
+  const { checks, pending = false, onCheckAgain, error, moleculesUrl } = props;
   const t = useChromeT();
   const language = useLanguage();
   const formats = useMemo(
@@ -117,6 +124,9 @@ export function MoleculesTokenTable(props: MoleculesTokenTableProps) {
           {error}
         </Callout>
       )}
+      {checks !== null && (
+        <MoleculesTokenFix checks={checks} moleculesUrl={moleculesUrl} />
+      )}
       {checks === null ? (
         <p className="molecules-tokens__muted">
           {t('moleculesToken.notChecked')}
@@ -148,102 +158,18 @@ export function MoleculesTokenTable(props: MoleculesTokenTableProps) {
                       {t(LABEL[check.verdict])}
                     </Tag>
                   </td>
-                  <td>{details(check, t, formats.instant)}</td>
+                  <td>{tokenDetails(check, t, formats.instant)}</td>
                 </tr>
               ))}
             </tbody>
           </HTMLTable>
         </div>
       )}
-      <p className="molecules-tokens__muted">
-        {t('moleculesToken.howToChange')} <code>{ISSUE_COMMAND}</code>
-      </p>
+      {(checks === null || tokensToFix(checks).length === 0) && (
+        <p className="molecules-tokens__muted">
+          {t('moleculesToken.howToChange')} <code>{ISSUE_COMMAND}</code>
+        </p>
+      )}
     </section>
   );
 }
-
-/**
- * What a row says besides its verdict.
- * @param check - The check.
- * @param t - The chrome's translator.
- * @param instant - How an instant is written.
- * @returns The cell's content.
- */
-function details(
-  check: MoleculesTokenCheck,
-  t: Translate<ChromeKey>,
-  instant: Intl.DateTimeFormat,
-): ReactNode {
-  const hint: Fact | null =
-    check.hint === null
-      ? null
-      : ['hint', <code key="hint">{check.hint}…</code>];
-  switch (check.verdict) {
-    case 'ok':
-      return facts([
-        check.sources.length === 1 || check.source === null
-          ? null
-          : ['source', t('moleculesToken.forSource', { source: check.source })],
-        check.issuedAt === null
-          ? null
-          : [
-              'issued',
-              check.email === null
-                ? t('moleculesToken.issued', {
-                    when: instant.format(check.issuedAt),
-                  })
-                : t('moleculesToken.issuedTo', {
-                    email: check.email,
-                    when: instant.format(check.issuedAt),
-                  }),
-            ],
-        [
-          'used',
-          check.lastUsedAt === null
-            ? t('moleculesToken.neverUsed')
-            : t('moleculesToken.lastUsed', {
-                when: instant.format(check.lastUsedAt),
-              }),
-        ],
-        hint,
-      ]);
-    case 'otherSource':
-      return facts([
-        [
-          'source',
-          t('moleculesToken.otherSourceDetail', {
-            source: check.source ?? '',
-          }),
-        ],
-        hint,
-      ]);
-    case 'refused':
-      return check.message ?? t('moleculesToken.refusedDetail');
-    case 'unset':
-      return t('moleculesToken.unsetDetail', { variable: check.variable });
-    case 'uncheckable':
-      return t('moleculesToken.uncheckableDetail');
-    case 'unanswered':
-      return check.message;
-    default:
-      return null;
-  }
-}
-
-/** One fact about a token, and the key it is drawn under. */
-type Fact = readonly [key: string, content: ReactNode];
-
-/**
- * Facts about a token, one after the other.
- * @param parts - The facts; null ones are left out.
- * @returns The facts, separated by a middle dot.
- */
-function facts(parts: ReadonlyArray<Fact | null>): ReactNode {
-  const shown = parts.filter((part) => part !== null);
-  return shown.map(([key, content], index) => (
-    <span key={key}>
-      {index > 0 && ' · '}
-      {content}
-    </span>
-  ));
-}

package/src/moleculesToken/ui/index.ts

@@ -1,2 +1,4 @@
+export type { MoleculesTokenFixProps } from './MoleculesTokenFix.tsx';
+export { MoleculesTokenFix } from './MoleculesTokenFix.tsx';
 export type { MoleculesTokenTableProps } from './MoleculesTokenTable.tsx';
 export { MoleculesTokenTable } from './MoleculesTokenTable.tsx';

package/src/moleculesToken/ui/tokenDetails.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from 'react';
+
+import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
+import type { Translate } from '../../i18n/ui/useT.ts';
+import type { MoleculesTokenCheck } from '../core/moleculesToken.ts';
+
+/**
+ * What a row says besides its verdict.
+ * @param check - The check.
+ * @param t - The chrome's translator.
+ * @param instant - How an instant is written.
+ * @returns The cell's content.
+ */
+export function tokenDetails(
+  check: MoleculesTokenCheck,
+  t: Translate<ChromeKey>,
+  instant: Intl.DateTimeFormat,
+): ReactNode {
+  const hint: Fact | null =
+    check.hint === null
+      ? null
+      : ['hint', <code key="hint">{check.hint}…</code>];
+  switch (check.verdict) {
+    case 'ok':
+      return facts([
+        check.sources.length === 1 || check.source === null
+          ? null
+          : ['source', t('moleculesToken.forSource', { source: check.source })],
+        check.issuedAt === null
+          ? null
+          : [
+              'issued',
+              check.email === null
+                ? t('moleculesToken.issued', {
+                    when: instant.format(check.issuedAt),
+                  })
+                : t('moleculesToken.issuedTo', {
+                    email: check.email,
+                    when: instant.format(check.issuedAt),
+                  }),
+            ],
+        [
+          'used',
+          check.lastUsedAt === null
+            ? t('moleculesToken.neverUsed')
+            : t('moleculesToken.lastUsed', {
+                when: instant.format(check.lastUsedAt),
+              }),
+        ],
+        hint,
+      ]);
+    case 'otherSource':
+      return facts([
+        [
+          'source',
+          t('moleculesToken.otherSourceDetail', {
+            source: check.source ?? '',
+          }),
+        ],
+        hint,
+      ]);
+    case 'refused':
+      return check.message ?? t('moleculesToken.refusedDetail');
+    case 'unset':
+      return t('moleculesToken.unsetDetail', { variable: check.variable });
+    case 'uncheckable':
+      return t('moleculesToken.uncheckableDetail');
+    case 'unanswered':
+      return check.message;
+    default:
+      return null;
+  }
+}
+
+/** One fact about a token, and the key it is drawn under. */
+type Fact = readonly [key: string, content: ReactNode];
+
+/**
+ * Facts about a token, one after the other.
+ * @param parts - The facts; null ones are left out.
+ * @returns The facts, separated by a middle dot.
+ */
+function facts(parts: ReadonlyArray<Fact | null>): ReactNode {
+  const shown = parts.filter((part) => part !== null);
+  return shown.map(([key, content], index) => (
+    <span key={key}>
+      {index > 0 && ' · '}
+      {content}
+    </span>
+  ));
+}

package/src/ui.ts

@@ -18,6 +18,7 @@ export * from './help/ui/index.ts';
 export * from './hooks/ui/index.ts';
 export * from './i18n/ui/index.ts';
 export * from './language/ui/index.ts';
+export * from './moleculesSources/ui/index.ts';
 export * from './moleculesToken/ui/index.ts';
 export * from './number/ui/index.ts';
 export * from './overlay/ui/index.ts';