Merge pull request #658 from jvalue/graph-style

Graph style

Author: jrentlez

libs/execution/src/lib/blocks/block-executor.ts

@@ -11,7 +11,13 @@ import { isBlockTargetedForDebugLogging } from '../debugging/debug-configuration
 import { DebugLogVisitor } from '../debugging/debug-log-visitor';
 import { type ExecutionContext } from '../execution-context';
 import { type IOTypeImplementation } from '../types/io-types/io-type-implementation';
-import { Edge, type Graph, type Id, Node } from '../util/mermaid-util';
+import {
+  ClassAssignment,
+  Edge,
+  type Graph,
+  type Id,
+  Node,
+} from '../util/mermaid-util';
 
 import * as R from './execution-result';
 
@@ -88,9 +94,13 @@ export abstract class AbstractBlockExecutor<I extends IOType, O extends IOType>
     const node = new Node(context.getCurrentNode().name, '[ ]');
     graph.addNode(node);
 
+    graph.addClassAssignment(new ClassAssignment(node.id, 'block'));
+    graph.addClassAssignment(new ClassAssignment(node.id, node.text));
+
     for (const parent of parents) {
       const edge = new Edge(parent, node.id, this.inputType, '-->');
       graph.addEdge(edge);
+      graph.addClassAssignment(new ClassAssignment(edge.id, 'edge'));
     }
 
     return node.id;

libs/execution/src/lib/blocks/composite-block-executor.ts

@@ -23,7 +23,7 @@ import {
 
 import { type ExecutionContext } from '../execution-context';
 import { type IOTypeImplementation } from '../types';
-import { Edge, type Graph, type Id } from '../util';
+import { ClassAssignment, Edge, type Graph, type Id } from '../util';
 
 import { executeBlocks, executionGraph } from './block-execution-util';
 import { AbstractBlockExecutor, type BlockExecutor } from './block-executor';
@@ -65,9 +65,18 @@ export function createCompositeBlockExecutor(
       const subgraph = executionGraph(context, blockTypeReference);
       graph.addSubgraph(subgraph);
 
+      graph.addClassAssignment(
+        new ClassAssignment(subgraph.id, 'composite-block'),
+      );
+      assert(subgraph.title !== undefined);
+      graph.addClassAssignment(
+        new ClassAssignment(subgraph.id, subgraph.title),
+      );
+
       for (const parent of parents) {
         const edge = new Edge(parent, subgraph.id, this.inputType, '-->');
         graph.addEdge(edge);
+        graph.addClassAssignment(new ClassAssignment(edge.id, 'edge'));
       }
 
       return subgraph.id;

libs/execution/src/lib/util/mermaid-util.ts

@@ -6,6 +6,7 @@
 import assert from 'assert';
 
 import { type BlockDefinition } from '@jvalue/jayvee-language-server';
+import { stringify } from 'yaml';
 
 import { type ExecutionContext } from '../execution-context';
 
@@ -119,26 +120,76 @@ export class ClassAssignment {
   }
 }
 
+export interface ThemeVariables {
+  darkMode: boolean;
+  background: string;
+  fontFamily: string;
+  fontSize: string;
+  primaryColor: string;
+  primaryTextColor: string;
+  primaryBorderColor: string;
+  secondaryColor: string;
+  secondaryTextColor: string;
+  secondaryBorderColor: string;
+  tertiaryColor: string;
+  tertiaryTextColor: string;
+  tertiaryBorderColor: string;
+  noteBkgColor: string;
+  noteTextColor: string;
+  noteBorderColor: string;
+  lineColor: string;
+  textColor: string;
+  mainBkg: string;
+  errorBkgColor: string;
+  errorTextColor: string;
+
+  nodeBorder: string;
+  clusterBkg: string;
+  clusterBorder: string;
+  defaultLinkColor: string;
+  titleColor: string;
+  edgeLabelBackground: string;
+  nodeTextColor: string;
+}
+
+export interface ElkLayoutConfig {
+  mergeEdges: boolean;
+  nodePlacementStrategy:
+    | 'BRANDES_KOEPF'
+    | 'SIMPLE'
+    | 'NETWORK_SIMPLEX'
+    | 'LINEAR_SEGMENTS';
+}
+
+export interface GraphConfiguration {
+  look: 'classic' | 'handDrawn';
+  theme: 'default' | 'neutral' | 'dark' | 'forest' | 'plain';
+  themeVariables: Partial<ThemeVariables>;
+  layout: 'dagre' | 'elk';
+  elk: Partial<ElkLayoutConfig>;
+}
+
 export type GraphDirection = 'TB' | 'BT' | 'RL' | 'LR';
+
 export class Graph {
   private readonly _id: Id = getId();
   private direction: GraphDirection = 'TB';
   private nodes = new Map<Id, Node>();
 
   private edges = new Map<Id, Edge>();
-  private edgeAttributes: { id: Id; attributes: string[] }[] = [];
+  private edgeAttributes: EdgeAttribute[] = [];
 
   private subgraphs = new Map<Id, Graph>();
 
-  private classDefinitions: {
-    class: string;
-    propertiesAndValues: string[];
-  }[] = [];
-  private classAssignments: { id: Id; class: string }[] = [];
+  private classDefinitions: ClassDefinition[] = [];
+  private classAssignments: ClassAssignment[] = [];
 
   private blocks = new Map<BlockDefinition, Id>();
 
-  constructor(public title?: string) {}
+  constructor(
+    public title?: string,
+    public configuration?: Partial<GraphConfiguration>,
+  ) {}
 
   get id(): Id {
     return this._id;
@@ -188,6 +239,14 @@ export class Graph {
     this.edges.set(edge.id, edge);
   }
 
+  public addClassAssignment(assignment: ClassAssignment) {
+    this.classAssignments.push(assignment);
+  }
+
+  public addClassDefinition(classDefinition: ClassDefinition) {
+    this.classDefinitions.push(classDefinition);
+  }
+
   public toSubgraph(indents: number): string {
     const title = this.title !== undefined ? ` [${this.title}]` : '';
     return `subgraph ${this.id}${title}
@@ -197,9 +256,15 @@ ${indents > 0 ? '\t'.repeat(indents - 1) : ''}end`;
   }
 
   toString(): string {
-    const title = this.title !== undefined ? `\ntitle: ${this.title}` : '';
-    return `---${title}
----
+    return `---
+${
+  this.title !== undefined || this.configuration !== undefined
+    ? stringify({
+        title: this.title,
+        config: this.configuration,
+      })
+    : '\n'
+}---
 flowchart ${this.direction}
 ${this.content(1)}`;
   }

libs/interpreter-lib/src/interpreter.spec.ts

@@ -307,7 +307,25 @@ flowchart TB
 \tc f@-->|TextFile| e
 \te h@-->|Sheet| g
 \tg j@-->|Sheet| i
-\ti l@-->|Table| k`);
+\ti l@-->|Table| k
+
+\tclass b block
+\tclass b CarsExtractor
+\tclass c block
+\tclass c CarsTextFileInterpreter
+\tclass d edge
+\tclass e block
+\tclass e CarsCSVInterpreter
+\tclass f edge
+\tclass g block
+\tclass g NameHeaderWriter
+\tclass h edge
+\tclass i block
+\tclass i CarsTableInterpreter
+\tclass j edge
+\tclass k block
+\tclass k CarsLoader
+\tclass l edge`);
     });
     it('should graph the composite-blocks example', async () => {
       const assetPath =
@@ -356,7 +374,28 @@ flowchart TB
 
 \t\to q@-->|File| p
 \t\tp s@-->|TextFile| r
-\tend`);
+
+\t\tclass o block
+\t\tclass o FileExtractor
+\t\tclass p block
+\t\tclass p FileTextInterpreter
+\t\tclass q edge
+\t\tclass r block
+\t\tclass r FileCSVInterpreter
+\t\tclass s edge
+\tend
+
+\tclass n composite-block
+\tclass n CSVExtractor
+\tclass t block
+\tclass t CarsTableInterpreter
+\tclass u edge
+\tclass v block
+\tclass v CarsTableTransformer
+\tclass w edge
+\tclass x block
+\tclass x CarsLoader
+\tclass y edge`);
     });
     it('should graph models with two contained pipelines', async () => {
       const assetPath =
@@ -386,6 +425,7 @@ flowchart TB
       assert(graph !== 'No pipelines to graph');
 
       expect(graph.toString()).toBe(`---
+
 ---
 flowchart TB
 \tsubgraph ba [CarsPipeline]
@@ -402,6 +442,24 @@ flowchart TB
 \t\tbe bh@-->|Sheet| bg
 \t\tbg bj@-->|Sheet| bi
 \t\tbi bl@-->|Table| bk
+
+\t\tclass bb block
+\t\tclass bb CarsExtractor
+\t\tclass bc block
+\t\tclass bc CarsTextFileInterpreter
+\t\tclass bd edge
+\t\tclass be block
+\t\tclass be CarsCSVInterpreter
+\t\tclass bf edge
+\t\tclass bg block
+\t\tclass bg NameHeaderWriter
+\t\tclass bh edge
+\t\tclass bi block
+\t\tclass bi CarsTableInterpreter
+\t\tclass bj edge
+\t\tclass bk block
+\t\tclass bk CarsLoader
+\t\tclass bl edge
 \tend
 \tsubgraph bm [ElectricVehiclesPipeline]
 \t\tdirection TB
@@ -417,7 +475,30 @@ flowchart TB
 \t\tbq bt@-->|Sheet| bs
 \t\tbs bv@-->|Table| bu
 \t\tbu bx@-->|Table| bw
-\tend`);
+
+\t\tclass bn block
+\t\tclass bn ElectricVehiclesHttpExtractor
+\t\tclass bo block
+\t\tclass bo ElectricVehiclesTextFileInterpreter
+\t\tclass bp edge
+\t\tclass bq block
+\t\tclass bq ElectricVehiclesCSVInterpreter
+\t\tclass br edge
+\t\tclass bs block
+\t\tclass bs ElectricVehiclesTableInterpreter
+\t\tclass bt edge
+\t\tclass bu block
+\t\tclass bu ElectricRangeTransformer
+\t\tclass bv edge
+\t\tclass bw block
+\t\tclass bw ElectricVehiclesSQLiteLoader
+\t\tclass bx edge
+\tend
+
+\tclass ba pipeline
+\tclass ba pipeline
+\tclass bm pipeline
+\tclass bm pipeline`);
     });
   });
 });

libs/interpreter-lib/src/interpreter.ts

@@ -7,6 +7,7 @@ import { strict as assert } from 'assert';
 import path from 'node:path';
 
 import {
+  ClassAssignment,
   type DebugGranularity,
   type DebugTargets,
   DefaultConstraintExtension,
@@ -395,6 +396,9 @@ export class DefaultJayveeInterpreter implements JayveeInterpreter {
         program.hooks,
       );
       graph.addSubgraph(subgraph);
+      graph.addClassAssignment(new ClassAssignment(subgraph.id, 'pipeline'));
+      if (subgraph.title !== undefined)
+        graph.addClassAssignment(new ClassAssignment(subgraph.id, 'pipeline'));
     }
 
     return graph;