Skip to content

Commit 861cebc

Browse files
ellthompsonellthompson
authored
Graph updates for version control (#18)
version control graph
1 parent 6cb7d8f commit 861cebc

File tree

12 files changed

+1103
-149
lines changed

12 files changed

+1103
-149
lines changed

‎.storybook/stories/advanced/version-control.stories.jsx‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
import React from 'react';
2+
import { GRAPH_ACTIONS } from '../../../src/constants';
3+
import Component from '../../base-component';
4+
5+
var name = 'Version Control Graph';
6+
var config = {
7+
title: `Advanced/${name}`
8+
};
9+
10+
export default {
11+
title: config.title,
12+
component: Component,
13+
parameters: {
14+
docs: {}
15+
}
16+
};
17+
18+
const GRAPH_SCHEMA = {
19+
nodes: {
20+
0: {
21+
fill: '#ead1db',
22+
stroke: '#965070',
23+
strokeSelected: '#965070',
24+
strokeHover: '#965070',
25+
textColor: '#20292b',
26+
baseHeight: 60,
27+
baseWidth: 150,
28+
textAlignMiddle: true,
29+
includeIcon: false
30+
},
31+
1: {
32+
fill: '#fbe5cd',
33+
stroke: '#ff574b',
34+
strokeSelected: '#ff574b',
35+
strokeHover: '#ff574b',
36+
textColor: '#20292b',
37+
baseHeight: 60,
38+
baseWidth: 150,
39+
textAlignMiddle: true,
40+
includeIcon: false
41+
},
42+
2: {
43+
fill: '#d0e1f2',
44+
stroke: '#4d7cd7',
45+
strokeSelected: '#4d7cd7',
46+
strokeHover: '#4d7cd7',
47+
textColor: '#20292b',
48+
baseHeight: 60,
49+
baseWidth: 150,
50+
textAlignMiddle: true,
51+
includeIcon: false
52+
},
53+
3: {
54+
fill: '#d9ead3',
55+
stroke: '#43fb39',
56+
strokeSelected: '#43fb39',
57+
strokeHover: '#43fb39',
58+
textColor: '#20292b',
59+
baseHeight: 60,
60+
baseWidth: 150,
61+
textAlignMiddle: true,
62+
includeIcon: false
63+
},
64+
},
65+
edges: {
66+
0: {
67+
from: [
68+
0,
69+
],
70+
to: [
71+
0, 1, 2, 3
72+
],
73+
stroke: '#965070',
74+
strokeWidth: 3,
75+
connectionStyle: 'smoothInOut'
76+
},
77+
1: {
78+
from: [
79+
1,
80+
],
81+
to: [
82+
0, 1, 2, 3
83+
],
84+
stroke: '#ff574b',
85+
strokeWidth: 3,
86+
connectionStyle: 'smoothInOut'
87+
},
88+
2: {
89+
from: [
90+
2,
91+
],
92+
to: [
93+
0, 1, 2, 3
94+
],
95+
stroke: '#4d7cd7',
96+
strokeWidth: 3,
97+
connectionStyle: 'smoothInOut'
98+
},
99+
3: {
100+
from: [
101+
3,
102+
],
103+
to: [
104+
0, 1, 2, 3
105+
],
106+
stroke: '#43fb39',
107+
strokeWidth: 3,
108+
connectionStyle: 'smoothInOut'
109+
}
110+
}
111+
};
112+
113+
const GRAPH_DATA = {
114+
nodes: {},
115+
edges: {
116+
'02-12': {
117+
from: '02',
118+
to: '12',
119+
edgeType: 0
120+
},
121+
'17-04': {
122+
from: '17',
123+
to: '04',
124+
edgeType: 1
125+
},
126+
'13-30': {
127+
from: '13',
128+
to: '30',
129+
edgeType: 1
130+
},
131+
'24-32': {
132+
from: '24',
133+
to: '32',
134+
edgeType: 2
135+
},
136+
'25-14': {
137+
from: '25',
138+
to: '14',
139+
edgeType: 2
140+
},
141+
'36-26': {
142+
from: '36',
143+
to: '26',
144+
edgeType: 3
145+
}
146+
}
147+
};
148+
149+
[
150+
[
151+
'Branch 1, Commit 5\nAug 23, 21 zpaul',
152+
'Branch 1, Commit 4\nAug 23, 21 zpaul',
153+
'Branch 1, Commit 3\nAug 23, 21 zpaul',
154+
'Branch 1, Commit 2\nAug 23, 21 zpaul',
155+
'Branch 1, Commit 1\nAug 23, 21 zpaul'
156+
],
157+
[
158+
'Branch 2, Commit 8\nAug 23, 21 zpaul',
159+
'Branch 2, Commit 7\nAug 23, 21 zpaul',
160+
'Branch 2, Commit 6\nAug 23, 21 zpaul',
161+
'Branch 2, Commit 5\nAug 23, 21 zpaul',
162+
'Branch 2, Commit 4\nAug 23, 21 zpaul',
163+
'Branch 2, Commit 3\nAug 23, 21 zpaul',
164+
'Branch 2, Commit 2\nAug 23, 21 zpaul',
165+
'Branch 2, Commit 1\nAug 23, 21 zpaul'
166+
],
167+
[
168+
'Branch 3, Commit 7\nAug 23, 21 zpaul',
169+
'Branch 3, Commit 6\nAug 23, 21 zpaul',
170+
'Branch 3, Commit 5\nAug 23, 21 zpaul',
171+
'Branch 3, Commit 4\nAug 23, 21 zpaul',
172+
'Branch 3, Commit 3\nAug 23, 21 zpaul',
173+
'Branch 3, Commit 2\nAug 23, 21 zpaul',
174+
'Branch 3, Commit 1\nAug 23, 21 zpaul'
175+
],
176+
[
177+
'Branch 4, Commit 7\nAug 23, 21 zpaul',
178+
'Branch 4, Commit 6\nAug 23, 21 zpaul',
179+
'Branch 4, Commit 5\nAug 23, 21 zpaul',
180+
'Branch 4, Commit 4\nAug 23, 21 zpaul',
181+
'Branch 4, Commit 3\nAug 23, 21 zpaul',
182+
'Branch 4, Commit 2\nAug 23, 21 zpaul',
183+
'Branch 4, Commit 1\nAug 23, 21 zpaul'
184+
]
185+
].forEach((commits, i) => {
186+
commits.forEach((commit, j) => {
187+
GRAPH_DATA.nodes[`${i}${j}`] = {
188+
id: `${i}${j}`,
189+
name: commit,
190+
nodeType: i,
191+
posX: 250 * i + 50,
192+
posY: 100 * j + 100,
193+
marker: ['17', '31', '36'].includes(`${i}${j}`)
194+
};
195+
if (j === 0) return;
196+
GRAPH_DATA.edges[`${i}${j - 1}-${i}${j}`] = {
197+
to: `${i}${j - 1}`,
198+
from: `${i}${j}`,
199+
edgeType: i
200+
};
201+
});
202+
});
203+
204+
export const VersionControlGraphExample = (args) => {
205+
return <Component schema={GRAPH_SCHEMA} options={{
206+
initialData: GRAPH_DATA,
207+
passiveUIEvents: false,
208+
includeFonts: true,
209+
defaultStyles: {
210+
initialScale: 0.75,
211+
background: {
212+
color: '#20292B',
213+
gridSize: 1
214+
},
215+
edge: {
216+
connectionStyle: 'default',
217+
targetMarker: true,
218+
sourceMarker: true
219+
}
220+
},
221+
readOnly: true
222+
}} />;
223+
};
224+
225+
document.querySelector('#root').setAttribute('style', 'position: fixed; width: 100%; height: 100%');
226+
document.body.setAttribute('style', 'margin: 0px; padding: 0px;');
227+
228+
229+
setTimeout(() => {
230+
const graph = document.querySelector('.pcui-graph').ui;
231+
graph.on('EVENT_SELECT_NODE', ({node}) => {
232+
if (node.id === '00') {
233+
graph.createNode({
234+
id: `4848583`,
235+
name: 'Branch 1, Commit 6\nAug 23, 21 zpaul',
236+
nodeType: 0,
237+
posX: node.posX,
238+
posY: node.posY - 100
239+
});
240+
graph.createEdge({
241+
to: '4848583',
242+
from :'00',
243+
edgeType: 0
244+
}, `00-${4848583}`);
245+
}
246+
});
247+
}, 0);

0 commit comments

Comments
 (0)