From 9ab2761c1d77427a1f1f94d9c7812062460113b5 Mon Sep 17 00:00:00 2001
From: yari-dewalt <yari.dewalt@gmail.com>
Date: Thu, 23 Jan 2025 10:55:14 -0800
Subject: [PATCH] Make undefined text not display

---
 .../src/diagrams/requirement/requirementDb.ts   | 17 +++++++++--------
 .../mermaid/src/diagrams/requirement/types.ts   |  2 +-
 .../rendering-elements/shapes/requirementBox.ts | 16 ++++++++++------
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/mermaid/src/diagrams/requirement/requirementDb.ts b/packages/mermaid/src/diagrams/requirement/requirementDb.ts
index 4fd9d0f17..6e296e279 100644
--- a/packages/mermaid/src/diagrams/requirement/requirementDb.ts
+++ b/packages/mermaid/src/diagrams/requirement/requirementDb.ts
@@ -61,12 +61,12 @@ const setDirection = (dir: string) => {
 };
 
 const getInitialRequirement = (): Requirement => ({
-  id: '',
+  requirement_id: '',
   text: '',
-  risk: RiskLevel.LOW_RISK as RiskLevel,
-  verifyMethod: VerifyType.VERIFY_ANALYSIS as VerifyType,
+  risk: '' as RiskLevel,
+  verifyMethod: '' as VerifyType,
   name: '',
-  type: RequirementType.REQUIREMENT as RequirementType,
+  type: '' as RequirementType,
   cssStyles: [],
   classes: ['default'],
 });
@@ -101,7 +101,7 @@ const addRequirement = (name: string, type: RequirementType) => {
     requirements.set(name, {
       name,
       type,
-      id: latestRequirement.id,
+      requirement_id: latestRequirement.requirement_id,
       text: latestRequirement.text,
       risk: latestRequirement.risk,
       verifyMethod: latestRequirement.verifyMethod,
@@ -118,7 +118,7 @@ const getRequirements = () => requirements;
 
 const setNewReqId = (id: string) => {
   if (latestRequirement !== undefined) {
-    latestRequirement.id = id;
+    latestRequirement.requirement_id = id;
   }
 };
 
@@ -262,6 +262,7 @@ const getData = () => {
   const edges: Edge[] = [];
   for (const requirement of requirements.values()) {
     const node = requirement as unknown as Node;
+    node.id = requirement.name;
     node.cssStyles = requirement.cssStyles;
     node.cssClasses = requirement.classes.join(' ');
     node.shape = 'requirementBox';
@@ -285,8 +286,8 @@ const getData = () => {
     const isContains = relation.type === Relationships.CONTAINS;
     const edge: Edge = {
       id: `${relation.src}-${relation.dst}-${counter}`,
-      start: requirements.get(relation.src)?.id ?? elements.get(relation.src)?.name,
-      end: requirements.get(relation.dst)?.id ?? elements.get(relation.dst)?.name,
+      start: requirements.get(relation.src)?.name ?? elements.get(relation.src)?.name,
+      end: requirements.get(relation.dst)?.name ?? elements.get(relation.dst)?.name,
       label: `&lt;&lt;${relation.type}&gt;&gt;`,
       classes: 'relationshipLine',
       style: ['fill:none', isContains ? '' : 'stroke-dasharray: 10,7'],
diff --git a/packages/mermaid/src/diagrams/requirement/types.ts b/packages/mermaid/src/diagrams/requirement/types.ts
index ae71c65a3..29622e890 100644
--- a/packages/mermaid/src/diagrams/requirement/types.ts
+++ b/packages/mermaid/src/diagrams/requirement/types.ts
@@ -13,7 +13,7 @@ export type VerifyType = 'Analysis' | 'Demonstration' | 'Inspection' | 'Test';
 export interface Requirement {
   name: string;
   type: RequirementType;
-  id: string;
+  requirement_id: string;
   text: string;
   risk: RiskLevel;
   verifyMethod: VerifyType;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/requirementBox.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/requirementBox.ts
index 3ce7b8ef1..de1f9568b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/requirementBox.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/requirementBox.ts
@@ -55,28 +55,29 @@ export async function requirementBox<T extends SVGGraphicsElement>(
   if (isRequirementNode) {
     const idHeight = await addText(
       shapeSvg,
-      `Id: ${requirementNode.id}`,
+      `${requirementNode.requirement_id ? `Id: ${requirementNode.requirement_id}` : ''}`,
       accumulativeHeight,
       node.labelStyle
     );
+
     accumulativeHeight += idHeight;
     const textHeight = await addText(
       shapeSvg,
-      `Text: ${requirementNode.text}`,
+      `${requirementNode.text ? `Text: ${requirementNode.text}` : ''}`,
       accumulativeHeight,
       node.labelStyle
     );
     accumulativeHeight += textHeight;
     const riskHeight = await addText(
       shapeSvg,
-      `Risk: ${requirementNode.risk}`,
+      `${requirementNode.risk ? `Risk: ${requirementNode.risk}` : ''}`,
       accumulativeHeight,
       node.labelStyle
     );
     accumulativeHeight += riskHeight;
     await addText(
       shapeSvg,
-      `Verification: ${requirementNode.verifyMethod}`,
+      `${requirementNode.verifyMethod ? `Verification: ${requirementNode.verifyMethod}` : ''}`,
       accumulativeHeight,
       node.labelStyle
     );
@@ -84,14 +85,14 @@ export async function requirementBox<T extends SVGGraphicsElement>(
     // Element
     const typeHeight = await addText(
       shapeSvg,
-      `Type: ${elementNode.type ? elementNode.type : 'Not specified'}`,
+      `${elementNode.type ? `Type: ${elementNode.type}` : ''}`,
       accumulativeHeight,
       node.labelStyle
     );
     accumulativeHeight += typeHeight;
     await addText(
       shapeSvg,
-      `Doc Ref: ${elementNode.docRef ? elementNode.docRef : 'None'}`,
+      `${elementNode.docRef ? `Doc Ref: ${elementNode.docRef}` : ''}`,
       accumulativeHeight,
       node.labelStyle
     );
@@ -176,6 +177,9 @@ async function addText<T extends SVGGraphicsElement>(
   yOffset: number,
   style = ''
 ) {
+  if (inputText === '') {
+    return 0;
+  }
   const textEl = parentGroup.insert('g').attr('class', 'label').attr('style', style);
   const config = getConfig();
   const useHtmlLabels = config.htmlLabels ?? true;