From 9cbfebc6a7fdf74c65266b3667f7efdd030ed8c9 Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Wed, 8 May 2024 23:13:22 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=9C=E2=80=8D=E2=99=80=EF=B8=8F=20Allow?=
 =?UTF-8?q?=20hover-references=20of=20mermaid=20diagrams?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/giant-emus-fail.md   |  5 +++++
 packages/diagrams/src/index.tsx | 11 +++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/giant-emus-fail.md

diff --git a/.changeset/giant-emus-fail.md b/.changeset/giant-emus-fail.md
new file mode 100644
index 000000000..211f64798
--- /dev/null
+++ b/.changeset/giant-emus-fail.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/diagrams': patch
+---
+
+Allow for hover references of mermaid diagrams
diff --git a/packages/diagrams/src/index.tsx b/packages/diagrams/src/index.tsx
index ba5a4b7cf..af3819440 100644
--- a/packages/diagrams/src/index.tsx
+++ b/packages/diagrams/src/index.tsx
@@ -1,5 +1,5 @@
 import type { NodeRenderer } from '@myst-theme/providers';
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
 
 async function parse(id: string, text: string): Promise<string> {
   const { default: mermaid } = await import('mermaid');
@@ -11,10 +11,11 @@ async function parse(id: string, text: string): Promise<string> {
 }
 
 export function MermaidRenderer({ id, value }: { value: string; id: string }) {
+  const key = useId();
   const [graph, setGraph] = useState<string>();
   const [error, setError] = useState<Error>();
   useEffect(() => {
-    parse(id, value)
+    parse(`mermaid-${key.replace(/:/g, '')}`, value)
       .then((svg) => {
         setGraph(svg);
         setError(undefined);
@@ -25,12 +26,14 @@ export function MermaidRenderer({ id, value }: { value: string; id: string }) {
       });
   }, []);
   return (
-    <figure className="">
+    <figure id={id}>
       {graph && <div dangerouslySetInnerHTML={{ __html: graph }}></div>}
       {error && (
         <pre>
           Error parsing mermaid graph.
           {'\n\n'}
+          {error.message}
+          {'\n\n'}
           {value}
         </pre>
       )}
@@ -39,5 +42,5 @@ export function MermaidRenderer({ id, value }: { value: string; id: string }) {
 }
 
 export const MermaidNodeRenderer: NodeRenderer = ({ node }) => {
-  return <MermaidRenderer id={node.key} value={node.value} />;
+  return <MermaidRenderer id={node.html_id || node.identifier} value={node.value} />;
 };