[autofix.ci] apply automated fixes

The same ID meant we were overriding the previous arrow.

Co-authored-by: jonathanpoelen <1436727+jonathanpoelen@users.noreply.github.com>
Fixes: https://github.com/mermaid-js/mermaid/issues/7159
Fixes: a0d328d734

.changeset/tricky-lions-behave.md

@@ -1,5 +0,0 @@
----
-'mermaid': patch
----
-
-fix: Correct tooltip placement to appear near hovered element

.changeset/wide-lines-trade.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Mindmap rendering issue when the number of Level 2 nodes exceeds 11

cypress/integration/rendering/mindmap.spec.ts

@@ -247,5 +247,31 @@ root
       );
     });
   });
+  describe('Level 2 nodes exceeding 11', () => {
+    it('should render all Level 2 nodes correctly when there are more than 11', () => {
+      imgSnapshotTest(
+        `mindmap
+root
+  Node1
+  Node2
+  Node3
+  Node4
+  Node5
+  Node6
+  Node7
+  Node8
+  Node9
+  Node10
+  Node11
+  Node12
+  Node13
+  Node14
+  Node15`,
+        {},
+        undefined,
+        shouldHaveRoot
+      );
+    });
+  });
   /* The end */
 });

docs/syntax/block.md

@@ -402,7 +402,7 @@ block
   blockArrowId4<["Label"]>(down)
   blockArrowId5<["Label"]>(x)
   blockArrowId6<["Label"]>(y)
-  blockArrowId6<["Label"]>(x, down)
+  blockArrowId7<["Label"]>(x, down)
 ```
 
 ```mermaid
@@ -413,7 +413,7 @@ block
   blockArrowId4<["Label"]>(down)
   blockArrowId5<["Label"]>(x)
   blockArrowId6<["Label"]>(y)
-  blockArrowId6<["Label"]>(x, down)
+  blockArrowId7<["Label"]>(x, down)
 ```
 
 #### Example - Space Blocks

packages/mermaid/src/diagrams/class/classDb.ts

@@ -1,4 +1,4 @@
-import { select } from 'd3';
+import { select, type Selection } from 'd3';
 import { log } from '../../logger.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import common from '../common/common.js';
@@ -12,7 +12,6 @@ import {
   setDiagramTitle,
   getDiagramTitle,
 } from '../common/commonDb.js';
-import { createTooltip } from '../common/svgDrawCommon.js';
 import { ClassMember } from './classTypes.js';
 import type {
   ClassRelation,
@@ -27,7 +26,6 @@ import type {
 } from './classTypes.js';
 import type { Node, Edge } from '../../rendering-util/types.js';
 import type { DiagramDB } from '../../diagram-api/types.js';
-import DOMPurify from 'dompurify';
 
 const MERMAID_DOM_ID_PREFIX = 'classId-';
 let classCounter = 0;
@@ -485,45 +483,43 @@ export class ClassDB implements DiagramDB {
     LOLLIPOP: 4,
   };
 
-  // Utility function to escape HTML meta-characters
-  private escapeHtml(str: string): string {
-    return str
-      .replace(/&/g, '&')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#39;');
-  }
-
   private readonly setupToolTips = (element: Element) => {
-    const tooltipElem = createTooltip();
+    let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
+      select('.mermaidTooltip');
+    // @ts-expect-error - Incorrect types
+    if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
+      tooltipElem = select('body')
+        .append('div')
+        .attr('class', 'mermaidTooltip')
+        .style('opacity', 0);
+    }
 
     const svg = select(element).select('svg');
 
-    const nodes = svg.selectAll('g').filter(function () {
-      return select(this).attr('title') !== null;
-    });
-
+    const nodes = svg.selectAll('g.node');
     nodes
       .on('mouseover', (event: MouseEvent) => {
         const el = select(event.currentTarget as HTMLElement);
         const title = el.attr('title');
-        if (!title) {
+        // Don't try to draw a tooltip if no data is provided
+        if (title === null) {
           return;
         }
+        // @ts-ignore - getBoundingClientRect is not part of the d3 type definition
+        const rect = this.getBoundingClientRect();
 
-        const rect = (event.currentTarget as Element).getBoundingClientRect();
         tooltipElem.transition().duration(200).style('opacity', '.9');
         tooltipElem
-          .html(DOMPurify.sanitize(title))
-          .style('left', `${window.scrollX + rect.left + rect.width / 2}px`)
-          .style('top', `${window.scrollY + rect.bottom + 4}px`);
-
+          .text(el.attr('title'))
+          .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
+          .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
+        tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
         el.classed('hover', true);
       })
       .on('mouseout', (event: MouseEvent) => {
         tooltipElem.transition().duration(500).style('opacity', 0);
-        select(event.currentTarget as HTMLElement).classed('hover', false);
+        const el = select(event.currentTarget as HTMLElement);
+        el.classed('hover', false);
       });
   };
 

packages/mermaid/src/diagrams/common/svgDrawCommon.ts

@@ -1,5 +1,4 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
-import { select } from 'd3';
 import type { SVG, SVGGroup } from '../../diagram-api/types.js';
 import { lineBreakRegex } from './common.js';
 import type {
@@ -136,24 +135,3 @@ export const getTextObj = (): TextObject => {
   };
   return testObject;
 };
-
-export const createTooltip = () => {
-  let tooltipElem = select<HTMLDivElement, unknown>('.mermaidTooltip');
-  if (tooltipElem.empty()) {
-    tooltipElem = select('body')
-      .append('div')
-      .attr('class', 'mermaidTooltip')
-      .style('opacity', 0)
-      .style('position', 'absolute')
-      .style('text-align', 'center')
-      .style('max-width', '200px')
-      .style('padding', '2px')
-      .style('font-size', '12px')
-      .style('background', '#ffffde')
-      .style('border', '1px solid #333')
-      .style('border-radius', '2px')
-      .style('pointer-events', 'none')
-      .style('z-index', '100');
-  }
-  return tooltipElem;
-};

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -17,7 +17,6 @@ import {
   setDiagramTitle,
   getDiagramTitle,
 } from '../common/commonDb.js';
-import { createTooltip } from '../common/svgDrawCommon.js';
 import type {
   FlowClass,
   FlowEdge,
@@ -27,7 +26,7 @@ import type {
   FlowVertex,
   FlowVertexTypeParam,
 } from './types.js';
-import DOMPurify from 'dompurify';
+
 interface LinkData {
   id: string;
 }
@@ -575,7 +574,15 @@ You have to call mermaid.initialize.`
   }
 
   private setupToolTips(element: Element) {
-    const tooltipElem = createTooltip();
+    let tooltipElem = select('.mermaidTooltip');
+    // @ts-ignore TODO: fix this
+    if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
+      // @ts-ignore TODO: fix this
+      tooltipElem = select('body')
+        .append('div')
+        .attr('class', 'mermaidTooltip')
+        .style('opacity', 0);
+    }
 
     const svg = select(element).select('svg');
 
@@ -596,7 +603,7 @@ You have to call mermaid.initialize.`
           .text(el.attr('title'))
           .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
           .style('top', window.scrollY + rect.bottom + 'px');
-        tooltipElem.html(DOMPurify.sanitize(title));
+        tooltipElem.html(tooltipElem.html().replace(/&lt;br\/&gt;/g, '<br/>'));
         el.classed('hover', true);
       })
       .on('mouseout', (e: MouseEvent) => {

packages/mermaid/src/diagrams/mindmap/mindmapDb.getData.test.ts

@@ -293,5 +293,37 @@ describe('MindmapDb getData function', () => {
       expect(edgeA1_aaa.section).toBe(1);
       expect(edgeA_a2.section).toBe(2);
     });
+
+    it('should wrap section numbers when there are more than 11 level 2 nodes', () => {
+      db.addNode(0, 'root', 'Example', 0);
+
+      for (let i = 1; i <= 15; i++) {
+        db.addNode(1, `child${i}`, `${i}`, 0);
+      }
+
+      const result = db.getData();
+
+      expect(result.nodes).toHaveLength(16);
+
+      const child1 = result.nodes.find((n) => n.label === '1') as MindmapLayoutNode;
+      const child11 = result.nodes.find((n) => n.label === '11') as MindmapLayoutNode;
+      const child12 = result.nodes.find((n) => n.label === '12') as MindmapLayoutNode;
+      const child13 = result.nodes.find((n) => n.label === '13') as MindmapLayoutNode;
+      const child14 = result.nodes.find((n) => n.label === '14') as MindmapLayoutNode;
+      const child15 = result.nodes.find((n) => n.label === '15') as MindmapLayoutNode;
+
+      expect(child1.section).toBe(0);
+      expect(child11.section).toBe(10);
+
+      expect(child12.section).toBe(0);
+      expect(child13.section).toBe(1);
+      expect(child14.section).toBe(2);
+      expect(child15.section).toBe(3);
+
+      expect(child12.cssClasses).toBe('mindmap-node section-0');
+      expect(child13.cssClasses).toBe('mindmap-node section-1');
+      expect(child14.cssClasses).toBe('mindmap-node section-2');
+      expect(child15.cssClasses).toBe('mindmap-node section-3');
+    });
   });
 });

packages/mermaid/src/diagrams/mindmap/mindmapDb.ts

@@ -7,6 +7,7 @@ import type { MindmapNode } from './mindmapTypes.js';
 import defaultConfig from '../../defaultConfig.js';
 import type { LayoutData, Node, Edge } from '../../rendering-util/types.js';
 import { getUserDefinedConfig } from '../../config.js';
+import { MAX_SECTIONS } from './svgDraw.js';
 
 // Extend Node type for mindmap-specific properties
 export type MindmapLayoutNode = Node & {
@@ -203,7 +204,7 @@ export class MindmapDB {
     // For other nodes, inherit parent's section number
     if (node.children) {
       for (const [index, child] of node.children.entries()) {
-        const childSectionNumber = node.level === 0 ? index : sectionNumber;
+        const childSectionNumber = node.level === 0 ? index % (MAX_SECTIONS - 1) : sectionNumber;
         this.assignSections(child, childSectionNumber);
       }
     }

packages/mermaid/src/diagrams/mindmap/svgDraw.ts

@@ -5,7 +5,7 @@ import { parseFontSize } from '../../utils.js';
 import type { MermaidConfig } from '../../config.type.js';
 import type { MindmapDB } from './mindmapDb.js';
 
-const MAX_SECTIONS = 12;
+export const MAX_SECTIONS = 12;
 
 type ShapeFunction = (
   db: MindmapDB,

packages/mermaid/src/docs/syntax/block.md

@@ -283,7 +283,7 @@ block
   blockArrowId4<["Label"]>(down)
   blockArrowId5<["Label"]>(x)
   blockArrowId6<["Label"]>(y)
-  blockArrowId6<["Label"]>(x, down)
+  blockArrowId7<["Label"]>(x, down)
 ```
 
 #### Example - Space Blocks