From b13707fa7b10c782f4ecdcbeff42795f7dd3c0a0 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Fri, 24 Feb 2023 13:46:56 +0530
Subject: [PATCH] fix: Class label not visible if class is already defined

---
 .../rendering/classDiagram-v2.spec.js         |  9 ++++++++
 demos/pie.html                                |  2 +-
 .../mermaid/src/diagrams/class/classDb.ts     | 22 +++++++++++++------
 .../diagrams/class/parser/classDiagram.jison  |  2 +-
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index 26b382da4..a9b461c48 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -539,4 +539,13 @@ class C13["With Città foreign language"]
   `
     );
   });
+
+  it('should render classLabel if class has already been defined earlier', () => {
+    imgSnapshotTest(
+      `classDiagram
+  Animal <|-- Duck
+  class Duck["Duck with text label"]
+`
+    );
+  });
 });
diff --git a/demos/pie.html b/demos/pie.html
index 333ef9491..51c5fe7b5 100644
--- a/demos/pie.html
+++ b/demos/pie.html
@@ -37,7 +37,7 @@
     </pre>
 
     <script type="module">
-      import mermaid from '../packages/mermaid';
+      import mermaid from '../packages/mermaid/src/mermaid';
       mermaid.initialize({
         theme: 'forest',
         // themeCSS: '.node rect { fill: red; }',
diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts
index be5fc5ebf..48ef7ccbe 100644
--- a/packages/mermaid/src/diagrams/class/classDb.ts
+++ b/packages/mermaid/src/diagrams/class/classDb.ts
@@ -1,3 +1,4 @@
+// @ts-expect-error - d3 types issue
 import { select, Selection } from 'd3';
 import { log } from '../../logger';
 import * as configApi from '../../config';
@@ -44,28 +45,32 @@ const splitClassNameAndType = function (id: string) {
   return { className: className, type: genericType };
 };
 
+export const setClassLabel = function (id: string, label: string) {
+  if (label) {
+    label = sanitizeText(label);
+  }
+
+  const { className } = splitClassNameAndType(id);
+  classes[className].label = label;
+};
+
 /**
  * Function called by parser when a node definition has been found.
  *
  * @param id - Id of the class to add
- * @param label - Optional label of the class
  * @public
  */
-export const addClass = function (id: string, label?: string) {
+export const addClass = function (id: string) {
   const classId = splitClassNameAndType(id);
   // Only add class if not exists
   if (classes[classId.className] !== undefined) {
     return;
   }
 
-  if (label) {
-    label = sanitizeText(label);
-  }
-
   classes[classId.className] = {
     id: classId.className,
     type: classId.type,
-    label: label ?? classId.className,
+    label: classId.className,
     cssClasses: [],
     methods: [],
     members: [],
@@ -354,6 +359,7 @@ const setupToolTips = function (element: Element) {
   const nodes = svg.selectAll('g.node');
   nodes
     .on('mouseover', function () {
+      // @ts-expect-error - select is not part of the d3 type definition
       const el = select(this);
       const title = el.attr('title');
       // Don't try to draw a tooltip if no data is provided
@@ -373,6 +379,7 @@ const setupToolTips = function (element: Element) {
     })
     .on('mouseout', function () {
       tooltipElem.transition().duration(500).style('opacity', 0);
+      // @ts-expect-error - select is not part of the d3 type definition
       const el = select(this);
       el.classed('hover', false);
     });
@@ -417,4 +424,5 @@ export default {
   lookUpDomId,
   setDiagramTitle,
   getDiagramTitle,
+  setClassLabel,
 };
diff --git a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
index bf06a81dc..e98b0253b 100644
--- a/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
+++ b/packages/mermaid/src/diagrams/class/parser/classDiagram.jison
@@ -288,7 +288,7 @@ classStatement
 
 classIdentifier
     : CLASS className                                    {$$=$2; yy.addClass($2);}
-    | CLASS className classLabel                         {$$=$2; yy.addClass($2, $3);}
+    | CLASS className classLabel                         {$$=$2; yy.addClass($2);yy.setClassLabel($2, $3);}
     ;
 
 annotationStatement