From ae14f6a947642bbe93fa4d2405adb4c539b9f8a9 Mon Sep 17 00:00:00 2001
From: Yokozuna59 <u.yokozuna@gmail.com>
Date: Tue, 13 Jun 2023 18:50:08 +0300
Subject: [PATCH] add parial parts to info graph

---
 packages/mermaid/src/diagram-api/types.ts     |  2 ++
 .../mermaid/src/diagrams/info/infoRenderer.ts | 24 ++++++++++---------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/mermaid/src/diagram-api/types.ts b/packages/mermaid/src/diagram-api/types.ts
index 26cf33fbe..0bb05dd5c 100644
--- a/packages/mermaid/src/diagram-api/types.ts
+++ b/packages/mermaid/src/diagram-api/types.ts
@@ -77,3 +77,5 @@ export type DrawDefinition = (
  * @param type -
  */
 export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void;
+
+export type SVG = d3.Selection<HTMLFrameElement, unknown, HTMLElement, unknown>;
diff --git a/packages/mermaid/src/diagrams/info/infoRenderer.ts b/packages/mermaid/src/diagrams/info/infoRenderer.ts
index f75ace9c7..72bf4a524 100644
--- a/packages/mermaid/src/diagrams/info/infoRenderer.ts
+++ b/packages/mermaid/src/diagrams/info/infoRenderer.ts
@@ -2,7 +2,7 @@
 import { select } from 'd3';
 import { log } from '../../logger.js';
 import { getConfig } from '../../config.js';
-import type { DrawDefinition } from '../../diagram-api/types.js';
+import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
@@ -13,20 +13,25 @@ import type { DrawDefinition } from '../../diagram-api/types.js';
  */
 export const draw: DrawDefinition = (text, id, version) => {
   try {
-    log.debug('Rendering info diagram\n' + text);
+    log.debug('rendering info diagram\n' + text);
 
     const securityLevel = getConfig().securityLevel;
-    // Handle root and Document for when rendering in sandbox mode
-    let sandboxElement;
+    // handle root and document for when rendering in sandbox mode
+    let sandboxElement: SVG | undefined;
     if (securityLevel === 'sandbox') {
       sandboxElement = select('#i' + id);
     }
-    const root =
-      securityLevel === 'sandbox'
-        ? select(sandboxElement.nodes()[0].contentDocument.body)
-        : select('body');
+    let root;
+    if (securityLevel === 'sandbox' && sandboxElement !== undefined) {
+      root = select(sandboxElement.nodes()[0].contentDocument!.body);
+    } else {
+      root = select('body');
+    }
 
+    // @ts-ignore - TODO: figure out how to resolve this
     const svg = root.select('#' + id);
+    svg.attr('height', 100);
+    svg.attr('width', 400);
 
     const g = svg.append('g');
 
@@ -37,9 +42,6 @@ export const draw: DrawDefinition = (text, id, version) => {
       .attr('font-size', '32px')
       .style('text-anchor', 'middle')
       .text('v ' + version);
-
-    svg.attr('height', 100);
-    svg.attr('width', 400);
   } catch (e) {
     log.error('error while rendering info diagram', e);
   }