Sankey refactoring

packages/mermaid/src/config.type.ts

@@ -418,10 +418,18 @@ export enum SankeyLinkColor {
   gradient = 'gradient',
 }
 
+export enum SankeyNodeAlignment {
+  left = 'left',
+  right = 'right',
+  center = 'center',
+  justify = 'justify',
+}
+
 export interface SankeyDiagramConfig extends BaseDiagramConfig {
   width?: number;
   height?: number;
   linkColor?: SankeyLinkColor | string;
+  nodeAlignment?: SankeyNodeAlignment;
 }
 
 export interface FontConfig {

packages/mermaid/src/defaultConfig.ts

@@ -1,5 +1,5 @@
 import theme from './themes/index.js';
-import { MermaidConfig } from './config.type.js';
+import { MermaidConfig, SankeyLinkColor, SankeyNodeAlignment } from './config.type.js';
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
  * here](8.6.0_docs.md)].**
@@ -2273,7 +2273,8 @@ const config: Partial<MermaidConfig> = {
   sankey: {
     width: 800,
     height: 400,
-    linkColor: 'gradient',
+    linkColor: SankeyLinkColor.gradient,
+    nodeAlignment: SankeyNodeAlignment.justify,
   },
   fontSize: 16,
 };

packages/mermaid/src/diagrams/sankey/sankeyDB.ts

@@ -17,22 +17,11 @@ import {
 let links: SankeyLink[] = [];
 let nodes: SankeyNode[] = [];
 let nodesMap: Record<string, SankeyNode> = {};
-let nodeAlign = 'justify';
-
-const setNodeAlign = (alignment: string): void => {
-  const nodeAlignments: Set<string> = new Set(['left', 'right', 'center', 'justify']);
-  if (nodeAlignments.has(alignment)) {
-    nodeAlign = alignment;
-  }
-};
-
-const getNodeAlign = (): string => nodeAlign;
 
 const clear = (): void => {
   links = [];
   nodes = [];
   nodesMap = {};
-  nodeAlign = 'justify';
   commonClear();
 };
 
@@ -58,15 +47,13 @@ class SankeyNode {
  */
 const findOrCreateNode = (ID: string): SankeyNode => {
   ID = common.sanitizeText(ID, configApi.getConfig());
-  let node: SankeyNode;
+  if (nodesMap[ID]) {
-  if (nodesMap[ID] === undefined) {
+    return nodesMap[ID];
-    node = new SankeyNode(ID);
-    nodesMap[ID] = node;
-    nodes.push(node);
-  } else {
-    node = nodesMap[ID];
   }
-  return node;
+
+  nodesMap[ID] = new SankeyNode(ID);
+  nodes.push(nodesMap[ID]);
+  return nodesMap[ID];
 };
 
 const getNodes = () => nodes;
@@ -89,8 +76,6 @@ export default {
   getGraph,
   addLink,
   findOrCreateNode,
-  setNodeAlign,
-  getNodeAlign,
   getAccTitle,
   setAccTitle,
   getAccDescription,

packages/mermaid/src/diagrams/sankey/sankeyRenderer.ts

@@ -1,12 +1,9 @@
-// @ts-nocheck TODO: fix file
 import { Diagram } from '../../Diagram.js';
 import * as configApi from '../../config.js';
 
 import {
   select as d3select,
-  // @ts-ignore TODO: make proper import
   scaleOrdinal as d3scaleOrdinal,
-  // @ts-ignore TODO: make proper import
   schemeTableau10 as d3schemeTableau10,
 } from 'd3';
 
@@ -20,7 +17,7 @@ import {
 } from 'd3-sankey';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from './sankeyUtils.js';
-import { SankeyLinkColor } from '../../config.type.js';
+import { SankeyLinkColor, SankeyNodeAlignment } from '../../config.type.js';
 
 /**
  * Draws Sankey diagram.
@@ -69,13 +66,14 @@ export const draw = function (text: string, id: string, _version: string, diagOb
   //    }
   //
   const graph = diagObj.db.getGraph();
-  const nodeAligns = {
+  
-    left: d3SankeyLeft,
+  const alignmentsMap: Record<SankeyNodeAlignment, (node: SankeyNode<{}, {}>, n: number) => number> = new Map([
-    right: d3SankeyRight,
+    [SankeyNodeAlignment.left, d3SankeyLeft],
-    center: d3SankeyCenter,
+    [SankeyNodeAlignment.right, d3SankeyRight],
-    justify: d3SankeyJustify,
+    [SankeyNodeAlignment.center, d3SankeyCenter],
-  };
+    [SankeyNodeAlignment.justify, d3SankeyJustify],
-  const nodeAlign = nodeAligns[diagObj.db.getNodeAlign()];
+  ]);
+  const nodeAlignment = alignmentsMap[conf?.nodeAlignment];
 
   // Construct and configure a Sankey generator
   // That will be a function that calculates nodes and links dimensions
@@ -85,7 +83,7 @@ export const draw = function (text: string, id: string, _version: string, diagOb
     .nodeId((d: any) => d.id) // we use 'id' property to identify node
     .nodeWidth(nodeWidth)
     .nodePadding(10)
-    .nodeAlign(nodeAlign)
+    .nodeAlign(nodeAlignment)
     .extent([
       [0, 0],
       [width, height],

run

@@ -11,24 +11,8 @@ sh)
 $RUN mermaid sh -c "npx $args" 
 ;;
 
-i | install)
+pnpm)
-$RUN mermaid sh -c "npx pnpm install $args"
+$RUN mermaid sh -c "npx $command $args"
-;;
-
-add)
-$RUN mermaid sh -c "npx pnpm -w add $args"
-;;
-
-test | vitest | e2e )
-$RUN mermaid sh -c "npx pnpm $command $args"
-;;
-
-prettier)
-$RUN mermaid sh -c "npx pnpm prettier --write $args"
-;;
-
-lint)
-$RUN mermaid sh -c "npx pnpm -w run lint:fix $args"
 ;;
 
 dev)
@@ -42,22 +26,32 @@ $RUN --service-ports mermaid sh -c "npx pnpm --filter mermaid run docs:dev"
 help)
 usage=$(
 cat <<EOF
-Run commonly used commands within docker containers
+Run commands within docker containers.
 
-\033[1m$name install\033[0m         # Equvalent of pnpm install 
+Development quick start guide:
-\033[1m$name dev\033[0m             # Run dev server with examples, open http://localhost:9000
-\033[1m$name docs:dev\033[0m        # For docs contributions, open http://localhost:3333
 
-$name add             # Add package, 'run add d3-sankey'
+\033[1m$name pnpm install\033[0m      # Install packages
-$name prettier        # Prettify a file 'run prettier <path-to-file>'
+\033[1m$name dev\033[0m               # Run dev server with examples, open http://localhost:9000
-$name lint            # Equvalent of pnpm -w run lint:fix
+\033[1m$name docs:dev\033[0m          # For docs contributions, open http://localhost:3333
-$name test            # Run unit tests
-$name vitest          # Run watcher for unit tests
-$name e2e             # Run integration tests
 
-$name sh              # Open sh inside docker container for development
+Commands:
+
+$name pnpm            # Run any 'pnpm' command
+$name dev             # Run dev server with examples, open http://localhost:9000
+$name docs:dev        # For docs contributions, open http://localhost:3333
+
+$name sh              # Open 'sh' inside docker container for development
 
 $name help            # Show this help
+
+Examples of frequiently used commands:
+
+$name pnpm add             # Add package, 'run add d3-sankey'
+$name pnpm prettier        # Prettify a file 'run prettier <path-to-file>'
+$name pnpm test            # Run unit tests
+$name pnpm vitest          # Run watcher for unit tests
+$name pnpm e2e             # Run integration tests
+$name pnpm -w run lint:fix
 EOF
 )