style(arch): resolved es-lint errors

.cspell/code-terms.txt

@@ -53,6 +53,7 @@ GENERICTYPE
 getBoundarys
 grammr
 graphtype
+halign
 iife
 interp
 introdcued
@@ -64,6 +65,7 @@ Kaufmann
 keyify
 LABELPOS
 LABELTYPE
+layoutstop
 lcov
 LEFTOF
 Lexa

.cspell/libraries.txt

@@ -23,6 +23,7 @@ Docsy
 DokuWiki
 dompurify
 elkjs
+fcose
 fontawesome
 Foswiki
 Gitea

packages/mermaid/src/diagrams/architecture/architectureDb.ts

@@ -38,7 +38,7 @@ const state = new ImperativeState<ArchitectureState>(() => ({
   edges: [],
   registeredIds: {},
   config: DEFAULT_ARCHITECTURE_CONFIG,
-  datastructures: undefined,
+  dataStructures: undefined,
   elements: {}
 }))
 
@@ -164,7 +164,7 @@ const getEdges = (): ArchitectureEdge[] => state.records.edges;
  * @returns
  */
 const getDataStructures = () => {
-  if (state.records.datastructures === undefined) {
+  if (state.records.dataStructures === undefined) {
     // Create an adjacency list of the diagram to perform BFS on
     // Outer reduce applied on all services
     // Inner reduce applied on the edges for a service
@@ -192,7 +192,7 @@ const getDataStructures = () => {
     );
 
     // Configuration for the initial pass of BFS
-    const [firstId, _] = Object.entries(adjList)[0];
+    const firstId = Object.keys(adjList)[0];
     const visited = { [firstId]: 1 };
     const notVisited = Object.keys(adjList).reduce(
       (prev, id) => (id === firstId ? prev : { ...prev, [id]: 1 }),
@@ -229,13 +229,13 @@ const getDataStructures = () => {
     while (Object.keys(notVisited).length > 0) {
       spatialMaps.push(BFS(Object.keys(notVisited)[0]));
     }
-    state.records.datastructures = {
+    state.records.dataStructures = {
       adjList,
       spatialMaps,
     };
-    console.log(state.records.datastructures);
+    console.log(state.records.dataStructures);
   }
-  return state.records.datastructures;
+  return state.records.dataStructures;
 };
 
 const setElementForId = (id: string, element: D3Element) => {
@@ -265,7 +265,7 @@ export const db: ArchitectureDB = {
 
 /**
  * Typed wrapper for resolving an architecture diagram's config fields. Returns the default value if undefined
- * @param field
+ * @param field - the config field to access
  * @returns
  */
 export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
@@ -273,7 +273,6 @@ export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
 ): Required<ArchitectureDiagramConfig>[T] {
   const arch = getConfig().architecture;
   if (arch && arch[field] !== undefined) {
-    const a = arch[field];
     return arch[field] as Required<ArchitectureDiagramConfig>[T];
   }
   return DEFAULT_ARCHITECTURE_CONFIG[field];

packages/mermaid/src/diagrams/architecture/architectureRenderer.ts

@@ -1,25 +1,27 @@
-import cytoscape, { Position } from 'cytoscape';
+import type { Position } from 'cytoscape';
+import cytoscape from 'cytoscape';
 import type { Diagram } from '../../Diagram.js';
-import fcose, { FcoseLayoutOptions } from 'cytoscape-fcose';
+import type { FcoseLayoutOptions } from 'cytoscape-fcose';
-import type { MermaidConfig } from '../../config.type.js';
+import fcose from 'cytoscape-fcose';
-import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
 import { log } from '../../logger.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
+import type {
+  ArchitectureDataStructures,
+  ArchitectureSpatialMap,
+  EdgeSingularData,
+  EdgeSingular
+} from './architectureTypes.js';
 import {
   type ArchitectureDB,
   type ArchitectureDirection,
   type ArchitectureGroup,
   type ArchitectureEdge,
   type ArchitectureService,
-  ArchitectureDataStructures,
   ArchitectureDirectionName,
   getOppositeArchitectureDirection,
   isArchitectureDirectionXY,
   isArchitectureDirectionY,
-  ArchitectureSpatialMap,
-  EdgeSingularData,
-  EdgeSingular,
   nodeData,
   edgeData
 } from './architectureTypes.js';
@@ -49,9 +51,9 @@ function addServices(services: ArchitectureService[], cy: cytoscape.Core) {
 }
 
 function positionServices(db: ArchitectureDB, cy: cytoscape.Core) {
-  cy.nodes().map((node, id) => {
+  cy.nodes().map((node) => {
     const data = nodeData(node)
-    if (data.type === 'group') return;
+    if (data.type === 'group') { return; }
     data.x = node.position().x;
     data.y = node.position().y;
 
@@ -91,10 +93,10 @@ function addEdges(edges: ArchitectureEdge[], cy: cytoscape.Core) {
         lhsDir === 'L'
           ? '0 50%'
           : lhsDir === 'R'
-          ? '100% 50%'
+            ? '100% 50%'
-          : lhsDir === 'T'
+            : lhsDir === 'T'
-          ? '50% 0'
+              ? '50% 0'
-          : '50% 100%',
+              : '50% 100%',
       target: rhsId,
       targetDir: rhsDir,
       targetArrow: rhsInto,
@@ -102,10 +104,10 @@ function addEdges(edges: ArchitectureEdge[], cy: cytoscape.Core) {
         rhsDir === 'L'
           ? '0 50%'
           : rhsDir === 'R'
-          ? '100% 50%'
+            ? '100% 50%'
-          : rhsDir === 'T'
+            : rhsDir === 'T'
-          ? '50% 0'
+              ? '50% 0'
-          : '50% 100%',
+              : '50% 100%',
     };
     cy.add({
       group: 'edges',
@@ -121,8 +123,8 @@ function getAlignments(spatialMaps: ArchitectureSpatialMap[]): fcose.FcoseAlignm
     const verticalAlignments: Record<number, string[]> = {};
     // Group service ids in an object with their x and y coordinate as the key
     Object.entries(spatialMap).forEach(([id, [x, y]]) => {
-      if (!horizontalAlignments[y]) horizontalAlignments[y] = [];
+      if (!horizontalAlignments[y]) { horizontalAlignments[y] = []; }
-      if (!verticalAlignments[x]) verticalAlignments[x] = [];
+      if (!verticalAlignments[x]) { verticalAlignments[x] = []; }
       horizontalAlignments[y].push(id);
       verticalAlignments[x].push(id);
     });
@@ -133,7 +135,7 @@ function getAlignments(spatialMaps: ArchitectureSpatialMap[]): fcose.FcoseAlignm
     };
   });
 
-  // Merge the alginment lists for each spatial map into one 2d array per axis
+  // Merge the alignment lists for each spatial map into one 2d array per axis
   const [horizontal, vertical] = alignments.reduce(
     ([prevHoriz, prevVert], { horiz, vert }) => {
       return [
@@ -226,7 +228,7 @@ function layoutArchitecture(
             'curve-style': 'segments',
             'segment-weights': '0',
             'segment-distances': [0.5],
-            //@ts-ignore
+            // @ts-ignore Incorrect library types
             'edge-distances': 'endpoints',
             'source-endpoint': 'data(sourceEndpoint)',
             'target-endpoint': 'data(targetEndpoint)',
@@ -235,7 +237,7 @@ function layoutArchitecture(
         {
           selector: 'node',
           style: {
-            //@ts-ignore
+            // @ts-ignore Incorrect library types
             'compound-sizing-wrt-labels': 'include',
           },
         },
@@ -258,7 +260,7 @@ function layoutArchitecture(
         {
           selector: '.node-group',
           style: {
-            //@ts-ignore
+            // @ts-ignore Incorrect library types
             padding: '30px',
           },
         },
@@ -312,7 +314,7 @@ function layoutArchitecture(
     } as FcoseLayoutOptions);
 
     // Once the diagram has been generated and the service's position cords are set, adjust the XY edges to have a 90deg bend
-    layout.one('layoutstop', (_event) => {
+    layout.one('layoutstop', () => {
       function getSegmentWeights(
         source: Position,
         target: Position,
@@ -361,13 +363,13 @@ function layoutArchitecture(
         };
       }
       cy.startBatch();
-      for (let edge of Object.values(cy.edges())) {
+      for (const edge of Object.values(cy.edges())) {
         if (edge.data?.()) {
-          let { x: sX, y: sY } = edge.source().position();
+          const { x: sX, y: sY } = edge.source().position();
-          let { x: tX, y: tY } = edge.target().position();
+          const { x: tX, y: tY } = edge.target().position();
           if (sX !== tX && sY !== tY) {
-            let sEP = edge.sourceEndpoint();
+            const sEP = edge.sourceEndpoint();
-            let tEP = edge.targetEndpoint();
+            const tEP = edge.targetEndpoint();
             const { sourceDir } = edgeData(edge)
             const [pointX, pointY] = isArchitectureDirectionY(sourceDir)
               ? [sEP.x, tEP.y]

packages/mermaid/src/diagrams/architecture/architectureTypes.ts

@@ -1,7 +1,7 @@
 import type { DiagramDB } from '../../diagram-api/types.js';
 import type { ArchitectureDiagramConfig } from '../../config.type.js';
 import type { D3Element } from '../../mermaidAPI.js';
-import cytoscape from 'cytoscape';
+import type cytoscape from 'cytoscape';
 
 /*=======================================*\
 |       Architecture Diagram Types        |
@@ -27,9 +27,9 @@ export const ArchitectureDirectionArrow = {
 
 export const ArchitectureDirectionArrowShift = {
   L: (orig: number, arrowSize: number) => orig - arrowSize + 2,
-  R: (orig: number, arrowSize: number) => orig - 2,
+  R: (orig: number, _arrowSize: number) => orig - 2,
   T: (orig: number, arrowSize: number) => orig - arrowSize + 2,
-  B: (orig: number, arrowSize: number) => orig - 2,
+  B: (orig: number, _arrowSize: number) => orig - 2,
 } as const;
 
 export const getOppositeArchitectureDirection = function (
@@ -80,7 +80,7 @@ export type ArchitectureDirectionPair = Exclude<
 >;
 /**
  * Verifies that the architecture direction pair does not contain an invalid match (LL, RR, TT, BB)
- * @param x architecture direction pair which could potentially be invalid
+ * @param x - architecture direction pair which could potentially be invalid
  * @returns true if the pair is not LL, RR, TT, or BB
  */
 export const isValidArchitectureDirectionPair = function (
@@ -96,8 +96,8 @@ export type ArchitectureDirectionPairMap = {
  * Creates a pair of the directions of each side of an edge. This function should be used instead of manually creating it to ensure that the source is always the first character.
  *
  * Note: Undefined is returned when sourceDir and targetDir are the same. In theory this should never happen since the diagram parser throws an error if a user defines it as such.
- * @param sourceDir
+ * @param sourceDir - source direction
- * @param targetDir
+ * @param targetDir - target direction
  * @returns
  */
 export const getArchitectureDirectionPair = function (
@@ -110,8 +110,8 @@ export const getArchitectureDirectionPair = function (
 
 /**
  * Given an x,y position for an arrow and the direction of the edge it belongs to, return a factor for slightly shifting the edge
- * @param param0 [x, y] coordinate pair
+ * @param param0 - [x, y] coordinate pair
- * @param pair architecture direction pair
+ * @param pair - architecture direction pair
  * @returns a new [x, y] coordinate pair
  */
 export const shiftPositionByArchitectureDirectionPair = function (
@@ -197,7 +197,7 @@ export interface ArchitectureState extends Record<string, unknown> {
   groups: ArchitectureGroup[];
   edges: ArchitectureEdge[];
   registeredIds: Record<string, 'service' | 'group'>;
-  datastructures?: ArchitectureDataStructures;
+  dataStructures?: ArchitectureDataStructures;
   elements: Record<string, D3Element>;
   config: ArchitectureDiagramConfig;
 }
@@ -207,21 +207,21 @@ export interface ArchitectureState extends Record<string, unknown> {
 \*=======================================*/
 
 export type EdgeSingularData = {
-    id: string;
+  id: string;
-    source: string;
+  source: string;
-    sourceDir: ArchitectureDirection;
+  sourceDir: ArchitectureDirection;
-    sourceArrow?: boolean;
+  sourceArrow?: boolean;
-    target: string;
+  target: string;
-    targetDir: ArchitectureDirection;
+  targetDir: ArchitectureDirection;
-    targetArrow?: boolean;
+  targetArrow?: boolean;
-    [key: string]: any;
+  [key: string]: any;
 };
 
 export const edgeData = (edge: cytoscape.EdgeSingular) => {
   return edge.data() as EdgeSingularData;
 }
 
-export interface EdgeSingular extends cytoscape.EdgeSingular{
+export interface EdgeSingular extends cytoscape.EdgeSingular {
   _private: {
     bodyBounds: unknown;
     rscratch: {
@@ -247,31 +247,31 @@ export type NodeSingularData = {
   height: number;
   [key: string]: any;
 }
-| {
+  | {
-  type: 'group';
+    type: 'group';
-  id: string;
+    id: string;
-  icon?: string;
+    icon?: string;
-  label?: string;
+    label?: string;
-  parent?: string;
+    parent?: string;
-  [key: string]: any;
+    [key: string]: any;
-};
+  };
 
 export const nodeData = (node: cytoscape.NodeSingular) => {
   return node.data() as NodeSingularData;
 }
 
-export interface NodeSingular extends cytoscape.NodeSingular{
+export interface NodeSingular extends cytoscape.NodeSingular {
-    _private: {
+  _private: {
-      bodyBounds: {
+    bodyBounds: {
-        h: number;
+      h: number;
-        w: number;
+      w: number;
-        x1: number;
+      x1: number;
-        x2: number;
+      x2: number;
-        y1: number;
+      y1: number;
-        y2: number;
+      y2: number;
-      };
-      children: cytoscape.NodeSingular[];
     };
-    data(): NodeSingularData;
+    children: cytoscape.NodeSingular[];
-    data<T extends keyof NodeSingularData>(key: T): NodeSingularData[T];
+  };
+  data(): NodeSingularData;
+  data<T extends keyof NodeSingularData>(key: T): NodeSingularData[T];
 }

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

@@ -11,7 +11,6 @@ import {
   nodeData,
 } from './architectureTypes.js';
 import type cytoscape from 'cytoscape';
-import { log } from '../../logger.js';
 import { getIcon } from '../../rendering-util/svgRegister.js';
 import { getConfigField } from './architectureDb.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
@@ -74,7 +73,8 @@ export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
     if (data.type === 'group') {
       const { h, w, x1, x2, y1, y2 } = node.boundingBox();
       console.log(`Draw group (${data.id}): pos=(${x1}, ${y1}), dim=(${w}, ${h})`);
-      let bkgElem = groupsEl
+
+      groupsEl
         .append('rect')
         .attr('x', x1 + halfIconSize)
         .attr('y', y1 + halfIconSize)
@@ -89,7 +89,7 @@ export const drawGroups = function (groupsEl: D3Element, cy: cytoscape.Core) {
           width: w,
           classes: 'architecture-service-label',
         },
-        getConfig());
+          getConfig());
         textElem
           .attr('dy', '1em')
           .attr('alignment-baseline', 'middle')
@@ -121,7 +121,7 @@ export const drawServices = function (
         width: iconSize * 1.5,
         classes: 'architecture-service-label',
       },
-      getConfig());
+        getConfig());
       textElem
         .attr('dy', '1em')
         .attr('alignment-baseline', 'middle')

packages/mermaid/src/rendering-util/svg/database.ts

@@ -1,5 +1,5 @@
 /**
- * @author Nicolas Newman
+ * Designer: Nicolas Newman
  * @see https://github.com/NicolasNewman/IconLibrary
  */
 import { createIcon } from '../svgRegister.js';

packages/mermaid/src/rendering-util/svg/disk.ts

@@ -1,5 +1,5 @@
 /**
- * @author Nicolas Newman
+ * Designer: Nicolas Newman
  * @see https://github.com/NicolasNewman/IconLibrary
  */
 import { createIcon } from '../svgRegister.js';

packages/mermaid/src/rendering-util/svg/index.ts

@@ -1,4 +1,4 @@
-import { IconLibrary } from '../svgRegister.js';
+import type { IconLibrary } from '../svgRegister.js';
 import database from './database.js';
 import server from './server.js';
 import disk from './disk.js';

packages/mermaid/src/rendering-util/svg/internet.ts

@@ -1,5 +1,5 @@
 /**
- * @author Nicolas Newman
+ * Designer: Nicolas Newman
  * @see https://github.com/NicolasNewman/IconLibrary
  */
 import { createIcon } from '../svgRegister.js';

packages/mermaid/src/rendering-util/svg/server.ts

@@ -1,5 +1,5 @@
 /**
- * @author Nicolas Newman
+ * Designer: Nicolas Newman
  * @see https://github.com/NicolasNewman/IconLibrary
  */
 import { createIcon } from '../svgRegister.js';

packages/mermaid/src/rendering-util/svgRegister.ts

@@ -1,4 +1,4 @@
-import { Selection } from 'd3-selection';
+import type { Selection } from 'd3-selection';
 
 type IconResolver = (
   parent: Selection<SVGGElement, unknown, Element | null, unknown>,