ENH: add attribution to molecular drawings

Author: davidmeijer

gui/src/client/src/components/DrawingAttribution.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import Typography from "@mui/material/Typography";
+import type { SxProps, Theme } from "@mui/material/styles";
+
+// Neither version is importable at runtime -- smiles-drawer's package.json is blocked
+// by its own "exports" field, and RDKit drawings are produced server-side (see
+// gui/src/server/routes/rules.py). Both are kept in sync by hand with the resolved
+// version in package-lock.json and pyproject.toml's `rdkit==` pin, respectively.
+const RDKIT_VERSION = "2025.9.1";
+const SMILES_DRAWER_VERSION = "2.4.1";
+
+type DrawingLibrary = "smiles-drawer" | "rdkit";
+
+const LIBRARY_LABEL: Record<DrawingLibrary, string> = {
+  "smiles-drawer": `SmilesDrawer v${SMILES_DRAWER_VERSION}`,
+  rdkit: `RDKit v${RDKIT_VERSION}`,
+};
+
+// A single caption attributing one or more structure/reaction drawings above it to the
+// library that rendered them. Place once per diagram -- if a diagram contains multiple
+// drawings from the same library (e.g. a compound plus its reconstructions), attribute
+// the whole group once rather than repeating this per drawing.
+export const DrawingAttribution: React.FC<{ library: DrawingLibrary; sx?: SxProps<Theme> }> = ({ library, sx }) => {
+  return (
+    <Typography
+      variant="caption"
+      color="text.secondary"
+      sx={{ display: "block", fontStyle: "italic", ...sx }}
+    >
+      Drawn with {LIBRARY_LABEL[library]}
+    </Typography>
+  );
+};

gui/src/client/src/components/MotifHoverCard.tsx

@@ -7,6 +7,7 @@ import { useQuery } from "@tanstack/react-query";
 import { fetchMotifStructures } from "../features/motifs/api";
 import { MotifName } from "./MotifName";
 import SmilesDrawerContainer from "./SmilesDrawerContainer.js";
+import { DrawingAttribution } from "./DrawingAttribution";
 
 const DRAWING_SIZE = 100;
 
@@ -38,7 +39,10 @@ function MotifHoverContent({ name, hint }: { name: string; hint?: string }) {
   return (
     <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 0.5, maxWidth: 200, py: 0.5 }}>
       {smiles ? (
-        <SmilesDrawerContainer identifier={`motif-hover-${reactId}`} smiles={smiles} size={DRAWING_SIZE} />
+        <>
+          <SmilesDrawerContainer identifier={`motif-hover-${reactId}`} smiles={smiles} size={DRAWING_SIZE} />
+          <DrawingAttribution library="smiles-drawer" sx={{ fontSize: "0.65rem" }} />
+        </>
       ) : (
         <Box
           sx={{

gui/src/client/src/components/workspace/DialogViewItem.tsx

@@ -14,6 +14,7 @@ import { DialogWindow } from "../DialogWindow";
 import { ErrorBoundary } from "../ErrorBoundary";
 import { ExportImageButton } from "../ExportImageButton";
 import SmilesDrawerContainer from "../SmilesDrawerContainer.js";
+import { DrawingAttribution } from "../DrawingAttribution";
 import { PrimarySequenceRows, usePrimarySequenceEditor } from "./PrimarySequenceEditor";
 import { ClusterReadoutRows } from "./ClusterReadoutRows";
 
@@ -440,6 +441,7 @@ export const DialogViewItem: React.FC<DialogViewItemProps> = ({
               </>
             )}
           </Box>
+          <DrawingAttribution library="smiles-drawer" sx={{ textAlign: "center" }} />
           {hasReconstructions && (
             <DescriptionBox
               title={'Explanation'}

gui/src/client/src/components/workspace/WorkspaceRules.tsx

@@ -22,6 +22,7 @@ import { MinimalIconButton } from "../MinimalIconButton";
 import { MotifName } from "../MotifName";
 import { horizontalScrollSx } from "../../theme/scrollbarSx";
 import SmilesDrawerContainer from "../SmilesDrawerContainer.js";
+import { DrawingAttribution } from "../DrawingAttribution";
 import { ReactionScheme } from "./ReactionScheme";
 
 const STRUCTURE_SIZE = 130;
@@ -95,11 +96,14 @@ function MatchingRuleRow({ rule }: { rule: MatchingRule }) {
 
       <Collapse in={expanded} unmountOnExit>
         <Stack direction="row" spacing={2} sx={{ mt: 1, pl: 1 }}>
-          <SmilesDrawerContainer
-            identifier={`matching-rule-${rule.id}`}
-            smiles={rule.displaySmiles || rule.smiles}
-            size={STRUCTURE_SIZE}
-          />
+          <Box>
+            <SmilesDrawerContainer
+              identifier={`matching-rule-${rule.id}`}
+              smiles={rule.displaySmiles || rule.smiles}
+              size={STRUCTURE_SIZE}
+            />
+            <DrawingAttribution library="smiles-drawer" />
+          </Box>
 
           <Stack spacing={1} sx={{ flex: 1, minWidth: 0 }}>
             <Box>
@@ -195,6 +199,7 @@ function ReactionRuleRow({ rule }: { rule: ReactionRule }) {
             <Box sx={{ ...horizontalScrollSx, pb: 1 }}>
               <ReactionScheme id={rule.id} smarts={rule.smarts} />
             </Box>
+            <DrawingAttribution library="rdkit" />
           </Box>
 
           <PropsList props={rule.props} />