Merge pull request #184 from neuroglia-io/fix-183-support-dashes-in-names

fix-183: Dash character in names breaks the Mermaid diagram output

Author: ricardozanini

package-lock.json

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Specification } from '../definitions';
-import { isObject } from '../utils';
+import { humanCase, isObject, pascalCase } from '../utils';
 
 export class MermaidState {
   constructor(
@@ -65,7 +65,7 @@ export class MermaidState {
   }
 
   private stateKeyDiagram(name: string | undefined) {
-    return name?.replace(/ /g, '_');
+    return pascalCase(name || '');
   }
 
   private startTransition() {
@@ -373,7 +373,9 @@ export class MermaidState {
   }
 
   private definitionName() {
-    return this.stateKeyDiagram(this.state.name) + ' : ' + this.state.name;
+    const key = this.stateKeyDiagram(this.state.name);
+    const label = humanCase(key, true);
+    return key + ' : ' + label;
   }
 
   private transitionDescription(

src/lib/diagram/mermaidState.ts

@@ -49,3 +49,94 @@ export const isObject = (value: any): boolean => {
   const type = typeof value;
   return type === 'object';
 };
+
+/**
+ * Represents the options used to convert string to pascal case or camel case
+ */
+export interface CaseConvertionOptions {
+  /** Keep dashes (-) characters */
+  keepDashes: boolean;
+  /** Capitalize after dashes (-) characters, if kept */
+  capitalizeAfterDashes: boolean;
+  /** Keep underscores (_) characters */
+  keepUnderscores: boolean;
+  /** Capitalize after underscores (_) characters, if kept */
+  capitalizeAfterUnderscores: boolean;
+  /** Keep dots (.) characters */
+  keepDots: boolean;
+  /** Capitalize after dots (.) characters, if kept */
+  capitalizeAfterDots: boolean;
+}
+
+/**
+ * Holds default convertion options
+ */
+export const defaultConvertionOptions = {
+  keepDashes: false,
+  capitalizeAfterDashes: false,
+  keepUnderscores: false,
+  capitalizeAfterUnderscores: false,
+  keepDots: true,
+  capitalizeAfterDots: true,
+} as CaseConvertionOptions;
+
+/**
+ * Converts a string to pascal case (PascalCase)
+ * @param source string The string to convert to pascal case
+ * @param convertionOptions CaseConvertionOptions Defaults: keepDashes: false, capitalizeAfterDashes: false, keepUnderscores: false, capitalizeAfterUnderscores: false, keepDots: true, capitalizeAfterDots: true
+ * @returns string The pascal case string
+ */
+export const pascalCase = (
+  source: string,
+  convertionOptions: CaseConvertionOptions = defaultConvertionOptions
+): string => {
+  if (!source) return '';
+  let delimiter = '';
+  if (!convertionOptions.keepDashes) {
+    source = source.replace(/-+/g, ' ');
+  } else if (convertionOptions.capitalizeAfterDashes) {
+    delimiter += '-';
+  }
+  if (!convertionOptions.keepUnderscores) {
+    source = source.replace(/_+/g, ' ');
+  } else if (convertionOptions.capitalizeAfterUnderscores) {
+    delimiter += '_';
+  }
+  if (!convertionOptions.keepDots) {
+    source = source.replace(/\.+/g, ' ');
+  } else if (convertionOptions.capitalizeAfterDots) {
+    delimiter += '\\.';
+  }
+  if (delimiter) {
+    source = source.replace(
+      new RegExp('([' + delimiter + '])+(.)(\\w+)', 'g'),
+      ($1, $2, $3, $4) => `${$2}${$3.toUpperCase()}${$4.toLowerCase()}`
+    );
+  }
+  return source
+    .replace(/\s+(.)(\w+)/g, ($1, $2, $3) => `${$2.toUpperCase()}${$3.toLowerCase()}`)
+    .replace(/\s/g, '')
+    .replace(/\w/, (s) => s.toUpperCase());
+};
+
+/**
+ * Converts a PasalCase/camelCase string into a human readable string
+ * @param source string The string to convert
+ * @param keepCapitalLetters boolean If capital letters should be kept
+ * @returns string The converted string
+ */
+export const humanCase = (source: string, keepCapitalLetters: boolean = false): string => {
+  if (!source) return '';
+  let transformable = source.trim();
+  transformable =
+    transformable[0].toUpperCase() +
+    transformable
+      .slice(1)
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/\s+/g, ' ');
+  if (keepCapitalLetters) {
+    return transformable;
+  } else {
+    return transformable.toLowerCase();
+  }
+};

src/lib/utils.ts

@@ -22,38 +22,38 @@ describe('MermaidDiagram', () => {
     const jsonSource = fs.readFileSync('./tests/examples/jobmonitoring.json', 'utf8');
     const actual = new MermaidDiagram(Specification.Workflow.fromSource(jsonSource)).sourceCode();
     expect(actual).toBe(`stateDiagram-v2
-SubmitJob : SubmitJob
+SubmitJob : Submit Job
 SubmitJob : type = Operation State
 SubmitJob : Action mode = sequential
 SubmitJob : Num. of actions = 1
 [*] --> SubmitJob
 SubmitJob --> WaitForCompletion
 
-WaitForCompletion : WaitForCompletion
+WaitForCompletion : Wait For Completion
 WaitForCompletion : type = Sleep State
 WaitForCompletion : Duration = PT5S
 WaitForCompletion --> GetJobStatus
 
-GetJobStatus : GetJobStatus
+GetJobStatus : Get Job Status
 GetJobStatus : type = Operation State
 GetJobStatus : Action mode = sequential
 GetJobStatus : Num. of actions = 1
 GetJobStatus --> DetermineCompletion
 
-DetermineCompletion : DetermineCompletion
+DetermineCompletion : Determine Completion
 DetermineCompletion : type = Switch State
 DetermineCompletion : Condition type = data-based
 DetermineCompletion --> JobSucceeded : \${ .jobStatus == "SUCCEEDED" }
 DetermineCompletion --> JobFailed : \${ .jobStatus == "FAILED" }
 DetermineCompletion --> WaitForCompletion : default
 
-JobSucceeded : JobSucceeded
+JobSucceeded : Job Succeeded
 JobSucceeded : type = Operation State
 JobSucceeded : Action mode = sequential
 JobSucceeded : Num. of actions = 1
 JobSucceeded --> [*]
 
-JobFailed : JobFailed
+JobFailed : Job Failed
 JobFailed : type = Operation State
 JobFailed : Action mode = sequential
 JobFailed : Num. of actions = 1
@@ -65,22 +65,22 @@ JobFailed --> [*]`);
     const actual = new MermaidDiagram(Specification.Workflow.fromSource(jsonSource)).sourceCode();
 
     expect(actual).toBe(`stateDiagram-v2
-Item_Purchase : Item Purchase
-Item_Purchase : type = Event State
-[*] --> Item_Purchase
-Item_Purchase --> Cancel_Purchase : compensated by
-Item_Purchase --> [*]
+ItemPurchase : Item Purchase
+ItemPurchase : type = Event State
+[*] --> ItemPurchase
+ItemPurchase --> CancelPurchase : compensated by
+ItemPurchase --> [*]
 
-Cancel_Purchase : Cancel Purchase
-Cancel_Purchase : type = Operation State
-Cancel_Purchase : usedForCompensation
-Cancel_Purchase : Action mode = sequential
-Cancel_Purchase : Num. of actions = 1
-Cancel_Purchase --> Send_confirmation_purchase_cancelled
+CancelPurchase : Cancel Purchase
+CancelPurchase : type = Operation State
+CancelPurchase : usedForCompensation
+CancelPurchase : Action mode = sequential
+CancelPurchase : Num. of actions = 1
+CancelPurchase --> SendConfirmationPurchaseCancelled
 
-Send_confirmation_purchase_cancelled : Send confirmation purchase cancelled
-Send_confirmation_purchase_cancelled : type = Operation State
-Send_confirmation_purchase_cancelled : Action mode = sequential
-Send_confirmation_purchase_cancelled : Num. of actions = 1`);
+SendConfirmationPurchaseCancelled : Send Confirmation Purchase Cancelled
+SendConfirmationPurchaseCancelled : type = Operation State
+SendConfirmationPurchaseCancelled : Action mode = sequential
+SendConfirmationPurchaseCancelled : Num. of actions = 1`);
   });
 });

tests/lib/diagram/mermaidDiagram.spec.ts

@@ -43,7 +43,7 @@ describe('mermaidState', () => {
             }`)
         )
       ).sourceCode()
-    ).toBe(`ParallelExec : ParallelExec
+    ).toBe(`ParallelExec : Parallel Exec
 ParallelExec : type = Parallel State
 ParallelExec : Completion type = allOf
 ParallelExec : Num. of branches = 2
@@ -72,7 +72,7 @@ ParallelExec --> [*]`);
         }`)
     );
     const mermaidState = new MermaidState(eventbasedswitch);
-    expect(mermaidState.sourceCode()).toBe(`CheckVisaStatus : CheckVisaStatus
+    expect(mermaidState.sourceCode()).toBe(`CheckVisaStatus : Check Visa Status
 CheckVisaStatus : type = Switch State
 CheckVisaStatus : Condition type = event-based
 CheckVisaStatus --> HandleApprovedVisa : visaApprovedEvent
@@ -101,7 +101,7 @@ CheckVisaStatus --> HandleNoVisaDecision : default`);
         }`)
     );
     const mermaidState = new MermaidState(databasedswitch);
-    expect(mermaidState.sourceCode()).toBe(`CheckApplication : CheckApplication
+    expect(mermaidState.sourceCode()).toBe(`CheckApplication : Check Application
 CheckApplication : type = Switch State
 CheckApplication : Condition type = data-based
 CheckApplication --> StartApplication : \${ .applicants | .age >= 18 }
@@ -130,7 +130,7 @@ CheckApplication --> RejectApplication : default`);
     }`)
     );
     const mermaidState = new MermaidState(databasedswitch);
-    expect(mermaidState.sourceCode()).toBe(`CheckApplication : CheckApplication
+    expect(mermaidState.sourceCode()).toBe(`CheckApplication : Check Application
 CheckApplication : type = Switch State
 CheckApplication : Condition type = data-based
 CheckApplication --> StartApplication : \${ .applicants | .age >= 18 }
@@ -160,7 +160,7 @@ CheckApplication --> StartApplication : default`);
     }`)
     );
     const mermaidState = new MermaidState(databasedswitch);
-    expect(mermaidState.sourceCode()).toBe(`GreetPerson : GreetPerson
+    expect(mermaidState.sourceCode()).toBe(`GreetPerson : Greet Person
 GreetPerson : type = Operation State
 GreetPerson : Num. of actions = 1
 GreetPerson --> [*]`);
@@ -191,7 +191,7 @@ GreetPerson --> [*]`);
     }`)
     );
     const mermaidState = new MermaidState(states);
-    expect(mermaidState.sourceCode()).toBe(`SubmitJob : SubmitJob
+    expect(mermaidState.sourceCode()).toBe(`SubmitJob : Submit Job
 SubmitJob : type = Operation State
 SubmitJob : Action mode = sequential
 SubmitJob : Num. of actions = 1
@@ -208,7 +208,7 @@ SubmitJob --> WaitForCompletion`);
     }`)
     );
     const mermaidState = new MermaidState(states);
-    expect(mermaidState.sourceCode()).toBe(`WaitForCompletion : WaitForCompletion
+    expect(mermaidState.sourceCode()).toBe(`WaitForCompletion : Wait For Completion
 WaitForCompletion : type = Sleep State
 WaitForCompletion : Duration = PT5S
 WaitForCompletion --> GetJobStatus`);
@@ -241,7 +241,7 @@ WaitForCompletion --> GetJobStatus`);
     }`)
     );
     const mermaidState = new MermaidState(states, true);
-    expect(mermaidState.sourceCode()).toBe(`ProvisionOrdersState : ProvisionOrdersState
+    expect(mermaidState.sourceCode()).toBe(`ProvisionOrdersState : Provision Orders State
 ProvisionOrdersState : type = Foreach State
 ProvisionOrdersState : Input collection = \${ .orders }
 ProvisionOrdersState : Num. of actions = 1
@@ -270,7 +270,7 @@ ProvisionOrdersState --> [*] : Produced event = [provisioningCompleteEvent]`);
         }`)
     );
     const mermaidState = new MermaidState(states, true);
-    expect(mermaidState.sourceCode()).toBe(`CheckCredit : CheckCredit
+    expect(mermaidState.sourceCode()).toBe(`CheckCredit : Check Credit
 CheckCredit : type = Callback State
 CheckCredit : Callback function = callCreditCheckMicroservice
 CheckCredit : Callback event = CreditCheckCompletedEvent
@@ -287,12 +287,12 @@ CheckCredit --> EvaluateDecision`);
         }`)
     );
     const mermaidState = new MermaidState(states);
-    expect(mermaidState.sourceCode()).toBe(`CheckCredit : CheckCredit
+    expect(mermaidState.sourceCode()).toBe(`CheckCredit : Check Credit
 CheckCredit : type = Callback State
 CheckCredit --> EvaluateDecision`);
   });
 
-  it(`should convert white spaces with underscore to create the state key`, () => {
+  it(`should remove white spaces when creating the state key`, () => {
     const databasedswitch = new Specification.Databasedswitchstate(
       JSON.parse(`{
       "type":"switch",
@@ -313,11 +313,40 @@ CheckCredit --> EvaluateDecision`);
     }`)
     );
     const mermaidState = new MermaidState(databasedswitch);
-    expect(mermaidState.sourceCode()).toBe(`Check_Application : Check Application
-Check_Application : type = Switch State
-Check_Application : Condition type = data-based
-Check_Application --> Start_Application : \${ .applicants | .age >= 18 }
-Check_Application --> [*] : \${ .applicants | .age < 18 }
-Check_Application --> Start_Application : default`);
+    expect(mermaidState.sourceCode()).toBe(`CheckApplication : Check Application
+CheckApplication : type = Switch State
+CheckApplication : Condition type = data-based
+CheckApplication --> StartApplication : \${ .applicants | .age >= 18 }
+CheckApplication --> [*] : \${ .applicants | .age < 18 }
+CheckApplication --> StartApplication : default`);
+  });
+
+  it(`should remove dashes when creating the state key`, () => {
+    const databasedswitch = new Specification.Databasedswitchstate(
+      JSON.parse(`{
+      "type":"switch",
+      "name":"check-application",
+      "dataConditions": [
+        {
+          "condition": "\${ .applicants | .age >= 18 }",
+          "transition": "start-application"
+        },
+        {
+          "condition": "\${ .applicants | .age < 18 }",
+          "end": true
+        }
+      ],
+      "defaultCondition": {
+        "transition": "start-application"
+      }
+    }`)
+    );
+    const mermaidState = new MermaidState(databasedswitch);
+    expect(mermaidState.sourceCode()).toBe(`CheckApplication : Check Application
+CheckApplication : type = Switch State
+CheckApplication : Condition type = data-based
+CheckApplication --> StartApplication : \${ .applicants | .age >= 18 }
+CheckApplication --> [*] : \${ .applicants | .age < 18 }
+CheckApplication --> StartApplication : default`);
   });
 });