New tab where users can browse matching and reaction rules (#22)

Author: davidmeijer

gui/src/client/src/components/CopyIconButton.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Tooltip from "@mui/material/Tooltip";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { useNotifications } from "./NotificationProvider";
+import { MinimalIconButton } from "./MinimalIconButton";
+
+// Copies `text` to the clipboard on click, with a toast for success/failure --
+// same pattern UserIconDropdown's session-id copy uses, pulled out for reuse
+// wherever a raw string (a SMILES, a reaction SMARTS, ...) needs a copy affordance.
+export function CopyIconButton({ text, label = "value" }: { text: string; label?: string }) {
+  const { pushNotification } = useNotifications();
+
+  const handleCopy = async (event: React.MouseEvent) => {
+    event.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(text);
+      pushNotification(`Copied ${label} to clipboard`, "success");
+    } catch (err) {
+      pushNotification(`Failed to copy ${label}`, "error");
+    }
+  };
+
+  return (
+    <Tooltip title={`Copy ${label}`} arrow>
+      <MinimalIconButton onClick={handleCopy}>
+        <ContentCopyIcon fontSize="inherit" />
+      </MinimalIconButton>
+    </Tooltip>
+  );
+}

gui/src/client/src/components/MenuContent.tsx

@@ -9,6 +9,7 @@ import ExploreIcon from "@mui/icons-material/Explore";
 import BarChartIcon from "@mui/icons-material/BarChart";
 import HomeRoundedIcon from "@mui/icons-material/HomeRounded";
 import UploadFileIcon from "@mui/icons-material/UploadFile";
+import RuleIcon from "@mui/icons-material/Rule";
 import { useNavigate, useLocation } from "react-router-dom";
 
 const mainListItems = [
@@ -32,6 +33,11 @@ const mainListItems = [
     icon: <BarChartIcon />,
     to: `/dashboard/enrichment`
   },
+  {
+    text: "Rules",
+    icon: <RuleIcon />,
+    to: `/dashboard/rules`
+  },
 ]
 
 interface MenuItemProps {

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

@@ -0,0 +1,60 @@
+// Renders a reaction rule's scheme -- reactant(s) -> product(s) -- as an SVG
+// rendered server-side by RDKit (see fetchReactionSchemeSvg / routes/rules.py's
+// reaction_scheme_svg). This replaced an earlier client-side attempt built on
+// smiles-drawer's ReactionDrawer/parseReaction: that API parses with the same
+// strict, SMILES-only grammar `SmilesDrawer.parse` uses, so a single SMARTS-only
+// token anywhere in the reaction (an OR-list like "[C,c]", a boolean primitive like
+// "[O&D2]"/"[C;!R]") aborted the whole parse -- most of this ruleset's reaction
+// rules use at least one such token. RDKit's own reaction drawer understands full
+// SMARTS query syntax directly, so every rule renders, not just the plain-enough
+// handful a SMILES grammar could parse.
+import React from "react";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import DOMPurify from "dompurify";
+import { useColorScheme } from "@mui/material/styles";
+import { useQuery } from "@tanstack/react-query";
+import { fetchReactionSchemeSvg } from "../../features/rules/api";
+
+export function ReactionScheme({ id, smarts }: { id: string; smarts: string }) {
+  const { mode, systemMode } = useColorScheme();
+  const theme = (systemMode !== undefined ? systemMode : mode) === "dark" ? "dark" : "light";
+
+  const svgQuery = useQuery({
+    queryKey: ["reactionSchemeSvg", id, theme],
+    queryFn: ({ signal }) => fetchReactionSchemeSvg(id, theme, signal),
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+
+  // Server-rendered SVG markup gets injected raw via dangerouslySetInnerHTML, so it
+  // must be sanitized first -- same rationale/profile as SvgViewer.
+  const sanitizedSvg = React.useMemo(
+    () => (svgQuery.data ? DOMPurify.sanitize(svgQuery.data, { USE_PROFILES: { svg: true, svgFilters: true } }) : null),
+    [svgQuery.data]
+  );
+
+  if (svgQuery.isLoading) {
+    return (
+      <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", height: 100 }}>
+        <CircularProgress size={20} />
+      </Box>
+    );
+  }
+
+  if (svgQuery.error || !sanitizedSvg) {
+    return (
+      <Alert severity="warning" variant="outlined" sx={{ py: 0 }}>
+        Could not render this reaction ({smarts}).
+      </Alert>
+    );
+  }
+
+  return (
+    <Box
+      sx={{ "& svg": { display: "block", maxWidth: "100%", height: "auto" } }}
+      dangerouslySetInnerHTML={{ __html: sanitizedSvg }}
+    />
+  );
+}

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

@@ -14,6 +14,7 @@ import { WorkspaceHeader } from "./WorkspaceHeader";
 import { WorkspaceHome } from "./WorkspaceHome";
 import { WorkspaceUpload } from "./WorkspaceUpload";
 import { WorkspaceDiscovery } from "./WorkspaceDiscovery";
+import { WorkspaceRules } from "./WorkspaceRules";
 // import { WorkspaceEnrichment } from "./tabs/enrichment/WorkspaceEnrichment";
 
 export const Workspace: React.FC = () => {
@@ -172,6 +173,7 @@ export const Workspace: React.FC = () => {
                   <Route path="discovery" element={<WorkspaceDiscovery session={session} setSession={setSession} />} />
                   {/*<Route path="enrichment" element={<WorkspaceEnrichment session={session} setSession={setSession} />} />*/}
                   <Route path="enrichment" element={<div>Analysis currently available. Check back later.</div>} />
+                  <Route path="rules" element={<WorkspaceRules />} />
                 </Routes>
               </Box>
             </Fade>