Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/more config to gitgraph #5981

Draft
wants to merge 2 commits into
base: develop
Choose a base branch
from
+151 −10
Draft

Feature/more config to gitgraph #5981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
13fd907
WIP
tijesunimi-peters Oct 17, 2024
fef6bb3
Adds colors to commit text
tijesunimi-peters Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 92 additions & 2 deletions packages/mermaid/src/diagrams/git/gitGraph.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,6 +306,96 @@ describe('when parsing a gitGraph', function () {
expect(commits.get(key)?.type).toBe(2);
});

it('should handle a gitGraph commit with custom commit color RED only', async () => {
const str = `gitGraph:
commit color: RED
`;

await parser.parse(str);
const commits = db.getCommits();
expect(commits.size).toBe(1);
expect(db.getCurrentBranch()).toBe('main');
expect(db.getDirection()).toBe('LR');
expect(db.getBranches().size).toBe(1);
const key = commits.keys().next().value;
expect(commits.get(key)?.message).toBe('');
expect(commits.get(key)?.id).not.toBeNull();
expect(commits.get(key)?.tags).toStrictEqual([]);
expect(commits.get(key)?.color).toBe(1);
});

it('should handle a gitGraph commit with custom commit color BLUE only', async () => {
const str = `gitGraph:
commit color: BLUE
`;

await parser.parse(str);
const commits = db.getCommits();
expect(commits.size).toBe(1);
expect(db.getCurrentBranch()).toBe('main');
expect(db.getDirection()).toBe('LR');
expect(db.getBranches().size).toBe(1);
const key = commits.keys().next().value;
expect(commits.get(key)?.message).toBe('');
expect(commits.get(key)?.id).not.toBeNull();
expect(commits.get(key)?.tags).toStrictEqual([]);
expect(commits.get(key)?.color).toBe(2);
});

it('should handle a gitGraph commit with custom commit color GREEN only', async () => {
const str = `gitGraph:
commit color: GREEN
`;

await parser.parse(str);
const commits = db.getCommits();
expect(commits.size).toBe(1);
expect(db.getCurrentBranch()).toBe('main');
expect(db.getDirection()).toBe('LR');
expect(db.getBranches().size).toBe(1);
const key = commits.keys().next().value;
expect(commits.get(key)?.message).toBe('');
expect(commits.get(key)?.id).not.toBeNull();
expect(commits.get(key)?.tags).toStrictEqual([]);
expect(commits.get(key)?.color).toBe(3);
});

it('should handle a gitGraph commit with custom commit color BLACK only', async () => {
const str = `gitGraph:
commit color: BLACK
`;

await parser.parse(str);
const commits = db.getCommits();
expect(commits.size).toBe(1);
expect(db.getCurrentBranch()).toBe('main');
expect(db.getDirection()).toBe('LR');
expect(db.getBranches().size).toBe(1);
const key = commits.keys().next().value;
expect(commits.get(key)?.message).toBe('');
expect(commits.get(key)?.id).not.toBeNull();
expect(commits.get(key)?.tags).toStrictEqual([]);
expect(commits.get(key)?.color).toBe(0);
});

it('should handle a gitGraph commit with default commit color BLACK', async () => {
const str = `gitGraph:
commit
`;

await parser.parse(str);
const commits = db.getCommits();
expect(commits.size).toBe(1);
expect(db.getCurrentBranch()).toBe('main');
expect(db.getDirection()).toBe('LR');
expect(db.getBranches().size).toBe(1);
const key = commits.keys().next().value;
expect(commits.get(key)?.message).toBe('');
expect(commits.get(key)?.id).not.toBeNull();
expect(commits.get(key)?.tags).toStrictEqual([]);
expect(commits.get(key)?.color).toBe(0);
});

it('should handle a gitGraph commit with custom commit type REVERSE only', async () => {
const str = `gitGraph:
commit type: REVERSE
Expand Down Expand Up @@ -471,7 +561,7 @@ describe('when parsing a gitGraph', function () {
it('should handle a gitGraph commit with custom type,tag, msg, commit id,', async () => {
const str = `gitGraph:
commit type:REVERSE tag: "test tag" msg: "test msg" id: "1111"

`;

await parser.parse(str);
Expand Down Expand Up @@ -1255,7 +1345,7 @@ describe('when parsing a gitGraph', function () {
it('should throw error when trying to merge branch which has no commits', async () => {
const str = `gitGraph
branch test1

checkout main
commit
merge test1
Expand Down
7 changes: 6 additions & 1 deletion packages/mermaid/src/diagrams/git/gitGraphAst.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import type {
BranchDB,
CherryPickDB,
} from './gitGraphTypes.js';
import { commitType } from './gitGraphTypes.js';
import { commitColor, commitType } from './gitGraphTypes.js';
import { ImperativeState } from '../../utils/imperativeState.js';

import DEFAULT_CONFIG from '../../defaultConfig.js';
Expand Down Expand Up @@ -107,6 +107,7 @@ export const commit = function (commitDB: CommitDB) {
let id = commitDB.id;
const type = commitDB.type;
let tags = commitDB.tags;
const color = commitDB.color;

log.info('commit', msg, id, type, tags);
log.debug('Entering commit:', msg, id, type, tags);
Expand All @@ -119,6 +120,7 @@ export const commit = function (commitDB: CommitDB) {
message: msg,
seq: state.records.seq++,
type: type ?? commitType.NORMAL,
color: color ?? commitColor.BLACK,
tags: tags ?? [],
parents: state.records.head == null ? [] : [state.records.head.id],
branch: state.records.currBranch,
Expand Down Expand Up @@ -244,6 +246,7 @@ export const merge = (mergeDB: MergeDB): void => {
parents: state.records.head == null ? [] : [state.records.head.id, verifiedBranch],
branch: state.records.currBranch,
type: commitType.MERGE,
color: commitColor.BLACK,
customType: overrideType,
customId: customId ? true : false,
tags: customTags ?? [],
Expand Down Expand Up @@ -347,6 +350,7 @@ export const cherryPick = function (cherryPickDB: CherryPickDB) {
parents: state.records.head == null ? [] : [state.records.head.id, sourceCommit.id],
branch: state.records.currBranch,
type: commitType.CHERRY_PICK,
color: commitColor.BLACK,
tags: tags
? tags.filter(Boolean)
: [
Expand Down Expand Up @@ -494,6 +498,7 @@ export const getHead = function () {

export const db: GitGraphDB = {
commitType,
commitColor,
getConfig,
setDirection,
setOptions,
Expand Down
4 changes: 3 additions & 1 deletion packages/mermaid/src/diagrams/git/gitGraphParser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { log } from '../../logger.js';
import { populateCommonDb } from '../common/populateCommonDb.js';
import { db } from './gitGraphAst.js';
import { commitType } from './gitGraphTypes.js';
import { commitColor, commitType } from './gitGraphTypes.js';
import type {
CheckoutAst,
CherryPickingAst,
Expand Down Expand Up @@ -53,6 +53,7 @@
msg: commit.message ?? '',
type: commit.type !== undefined ? commitType[commit.type] : commitType.NORMAL,
tags: commit.tags ?? undefined,
color: commit.color !== undefined ? commitColor[commit.color] : commitColor.BLACK,
};
return commitDB;
};
Expand Down Expand Up @@ -103,6 +104,7 @@

const mockDB: GitGraphDBParseProvider = {
commitType: commitType,
commitColor: commitColor,
setDirection: vi.fn(),
commit: vi.fn(),
branch: vi.fn(),
Expand All @@ -121,7 +123,7 @@
type: 'NORMAL',
};
parseStatement(commit, mockDB);
expect(mockDB.commit).toHaveBeenCalledWith({

Check failure on line 126 in packages/mermaid/src/diagrams/git/gitGraphParser.ts

View workflow job for this annotation

GitHub Actions / unit-test

packages/mermaid/src/diagrams/git/gitGraphParser.ts > GitGraph Parser > should parse a commit statement 

AssertionError: expected "spy" to be called with arguments: [ { id: '1', msg: 'test', …(2) } ]

Received: 

  1st spy call:

  Array [
    Object {
+     "color": 0,
      "id": "1",
      "msg": "test",
      "tags": Array [
        "tag1",
        "tag2",
      ],
      "type": 0,
    },
  ]


Number of calls: 1

 ❯ packages/mermaid/src/diagrams/git/gitGraphParser.ts:126:29
id: '1',
msg: 'test',
tags: ['tag1', 'tag2'],
Expand Down Expand Up @@ -224,7 +226,7 @@

populate(gitGraphAst, mockDB);

expect(mockDB.commit).toHaveBeenCalledWith({

Check failure on line 229 in packages/mermaid/src/diagrams/git/gitGraphParser.ts

View workflow job for this annotation

GitHub Actions / unit-test

packages/mermaid/src/diagrams/git/gitGraphParser.ts > GitGraph Parser > should parse a langium generated gitGraph ast 

AssertionError: expected "spy" to be called with arguments: [ { id: '1', msg: 'test', …(2) } ]

Received: 

  1st spy call:

  Array [
    Object {
+     "color": 0,
      "id": "1",
      "msg": "test",
      "tags": Array [
        "tag1",
        "tag2",
      ],
      "type": 0,
    },
  ]

  2nd spy call:

  Array [
    Object {
+     "color": 0,
      "id": "1",
      "msg": "test",
      "tags": Array [
        "tag1",
        "tag2",
      ],
      "type": 0,
    },
  ]


Number of calls: 2

 ❯ packages/mermaid/src/diagrams/git/gitGraphParser.ts:229:29
id: '1',
msg: 'test',
tags: ['tag1', 'tag2'],
Expand Down
30 changes: 29 additions & 1 deletion packages/mermaid/src/diagrams/git/gitGraphRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,18 @@ const drawCommitBullet = (
}
};

const commitLabelColorClass = (color: number) => {
if (color == 1) {
return 'commit-label-color-red';
} else if (color == 2) {
return 'commit-label-color-blue';
} else if (color == 3) {
return 'commit-label-color-green';
} else {
return 'commit-label';
}
};

const drawCommitLabel = (
gLabels: d3.Selection<SVGGElement, unknown, HTMLElement, any>,
commit: Commit,
Expand All @@ -300,7 +312,7 @@ const drawCommitLabel = (
.append('text')
.attr('x', pos)
.attr('y', commitPosition.y + 25)
.attr('class', 'commit-label')
.attr('class', commitLabelColorClass(commit.color))
.text(commit.id);
const bbox = text.node()?.getBBox();

Expand Down Expand Up @@ -1013,6 +1025,7 @@ if (import.meta.vitest) {
tags: [],
parents: [],
branch: 'main',
color: 0,
},
],
[
Expand All @@ -1025,6 +1038,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['ZERO'],
branch: 'feature',
color: 0,
},
],
[
Expand All @@ -1037,6 +1051,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['A'],
branch: 'feature',
color: 0,
},
],
[
Expand All @@ -1050,6 +1065,7 @@ if (import.meta.vitest) {
parents: ['ZERO', 'B'],
branch: 'main',
customId: true,
color: 0,
},
],
[
Expand All @@ -1062,6 +1078,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['ZERO'],
branch: 'release',
color: 0,
},
],
[
Expand All @@ -1074,6 +1091,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['C', 'M'],
branch: 'release',
color: 0,
},
],
[
Expand All @@ -1086,6 +1104,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['5-8928ea0'],
branch: 'release',
color: 0,
},
],
[
Expand All @@ -1098,6 +1117,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['D', 'M'],
branch: 'release',
color: 0,
},
],
]);
Expand Down Expand Up @@ -1179,6 +1199,7 @@ if (import.meta.vitest) {
tags: [],
parents: [],
branch: 'main',
color: 0,
},
],
[
Expand All @@ -1191,6 +1212,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['1-abcdefg'],
branch: 'main',
color: 0,
},
],
[
Expand All @@ -1203,6 +1225,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['2-abcdefg'],
branch: 'develop',
color: 0,
},
],
[
Expand All @@ -1215,6 +1238,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['3-abcdefg'],
branch: 'develop',
color: 0,
},
],
[
Expand All @@ -1227,6 +1251,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['2-abcdefg'],
branch: 'feature',
color: 0,
},
],
[
Expand All @@ -1239,6 +1264,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['5-abcdefg'],
branch: 'feature',
color: 0,
},
],
[
Expand All @@ -1251,6 +1277,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['2-abcdefg'],
branch: 'main',
color: 0,
},
],
[
Expand All @@ -1263,6 +1290,7 @@ if (import.meta.vitest) {
tags: [],
parents: ['7-abcdefg'],
branch: 'main',
color: 0,
},
],
]);
Expand Down
12 changes: 12 additions & 0 deletions packages/mermaid/src/diagrams/git/gitGraphTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import type { GitGraphDiagramConfig } from '../../config.type.js';
import type { DiagramDBBase } from '../../diagram-api/types.js';

export const commitColor = {
BLACK: 0,
RED: 1,
BLUE: 2,
GREEN: 3,
} as const;

export const commitType = {
NORMAL: 0,
REVERSE: 1,
Expand All @@ -13,6 +20,7 @@ export interface CommitDB {
msg: string;
id: string;
type: number;
color: number;
tags?: string[];
}

Expand Down Expand Up @@ -40,6 +48,7 @@ export interface Commit {
message: string;
seq: number;
type: number;
color: number;
tags: string[];
parents: string[];
branch: string;
Expand All @@ -59,6 +68,7 @@ export interface CommitAst {
message?: string;
tags?: string[];
type?: 'NORMAL' | 'REVERSE' | 'HIGHLIGHT';
color?: 'BLACK' | 'RED' | 'GREEN' | 'BLUE';
}

export interface BranchAst {
Expand Down Expand Up @@ -89,6 +99,7 @@ export interface CherryPickingAst {

export interface GitGraphDB extends DiagramDBBase<GitGraphDiagramConfig> {
commitType: typeof commitType;
commitColor: typeof commitColor;
setDirection: (dir: DiagramOrientation) => void;
setOptions: (rawOptString: string) => void;
getOptions: () => any;
Expand All @@ -110,6 +121,7 @@ export interface GitGraphDB extends DiagramDBBase<GitGraphDiagramConfig> {

export interface GitGraphDBParseProvider extends Partial<GitGraphDB> {
commitType: typeof commitType;
commitColor: typeof commitColor;
setDirection: (dir: DiagramOrientation) => void;
commit: (commitDB: CommitDB) => void;
branch: (branchDB: BranchDB) => void;
Expand Down
Loading
Loading