Skip to content

Commit 7162ba4

Browse files
odeimaizodeimaiz
authored
GitGraphJS (ITISFoundation#2538)
1 parent 2146ea8 commit 7162ba4

File tree

12 files changed

+455
-64
lines changed

12 files changed

+455
-64
lines changed

‎services/web/client/source/class/osparc/component/snapshots/Snapshots.js‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,7 @@
1818
qx.Class.define("osparc.component.snapshots.Snapshots", {
1919
extend: osparc.ui.table.Table,
2020

21-
construct: function(study) {
22-
this.__study = study;
23-
21+
construct: function() {
2422
const model = this.__initModel();
2523

2624
this.base(arguments, model, {
@@ -33,8 +31,6 @@ qx.Class.define("osparc.component.snapshots.Snapshots", {
3331
this.setColumnWidth(this.self().T_POS.TAGS.col, 100);
3432
this.setColumnWidth(this.self().T_POS.MESSAGE.col, 150);
3533
this.setColumnWidth(this.self().T_POS.DATE.col, 130);
36-
37-
this.__populateSnapshotsTable();
3834
},
3935

4036
statics: {
@@ -59,8 +55,6 @@ qx.Class.define("osparc.component.snapshots.Snapshots", {
5955
},
6056

6157
members: {
62-
__study: null,
63-
6458
getRowData: function(rowIdx) {
6559
return this.getTableModel().getRowDataAsMap(rowIdx);
6660
},
@@ -79,27 +73,34 @@ qx.Class.define("osparc.component.snapshots.Snapshots", {
7973
return model;
8074
},
8175

82-
__populateSnapshotsTable: function() {
76+
setSelection: function(snapshotId) {
77+
this.resetSelection();
78+
for (let i=0; i<this.getTableModel().getRowCount(); i++) {
79+
if (this.getRowData(i)["Id"] === snapshotId) {
80+
this.getSelectionModel().setSelectionInterval(i, i);
81+
return;
82+
}
83+
}
84+
},
85+
86+
populateTable: function(snapshots) {
8387
const columnModel = this.getTableColumnModel();
8488
columnModel.setDataCellRenderer(this.self().T_POS.ID.col, new qx.ui.table.cellrenderer.Number());
8589
columnModel.setDataCellRenderer(this.self().T_POS.TAGS.col, new qx.ui.table.cellrenderer.String());
8690
columnModel.setDataCellRenderer(this.self().T_POS.MESSAGE.col, new qx.ui.table.cellrenderer.String());
8791
columnModel.setDataCellRenderer(this.self().T_POS.DATE.col, new qx.ui.table.cellrenderer.Date());
8892

89-
this.__study.getSnapshots()
90-
.then(snapshots => {
91-
const rows = [];
92-
snapshots.forEach(snapshot => {
93-
const row = [];
94-
row[this.self().T_POS.ID.col] = snapshot["id"];
95-
row[this.self().T_POS.TAGS.col] = snapshot["tags"].join(", ");
96-
row[this.self().T_POS.MESSAGE.col] = snapshot["message"];
97-
const date = new Date(snapshot["created_at"]);
98-
row[this.self().T_POS.DATE.col] = osparc.utils.Utils.formatDateAndTime(date);
99-
rows.push(row);
100-
});
101-
this.getTableModel().setData(rows, false);
102-
});
93+
const rows = [];
94+
snapshots.forEach(snapshot => {
95+
const date = new Date(snapshot["created_at"]);
96+
const row = [];
97+
row[this.self().T_POS.ID.col] = snapshot["id"];
98+
row[this.self().T_POS.TAGS.col] = snapshot["tags"].join(", ");
99+
row[this.self().T_POS.MESSAGE.col] = snapshot["message"];
100+
row[this.self().T_POS.DATE.col] = osparc.utils.Utils.formatDateAndTime(date);
101+
rows.push(row);
102+
});
103+
this.getTableModel().setData(rows, false);
103104
}
104105
}
105106
});

‎services/web/client/source/class/osparc/component/snapshots/SnapshotsView.js‎

Lines changed: 90 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -41,64 +41,124 @@ qx.Class.define("osparc.component.snapshots.SnapshotsView", {
4141
members: {
4242
__snapshotsSection: null,
4343
__snapshotsTable: null,
44+
__gitGraphLayout: null,
45+
__gitGraphWrapper: null,
4446
__snapshotPreview: null,
45-
__selectedSnapshot: null,
4647
__editSnapshotBtn: null,
4748
__openSnapshotBtn: null,
49+
__snapshots: null,
50+
__currentSnapshot: null,
51+
__selectedSnapshotId: null,
4852

4953
__buildLayout: function() {
5054
const snapshotsSection = this.__snapshotsSection = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
5155
this._add(snapshotsSection, {
5256
flex: 1
5357
});
54-
this.__rebuildSnapshotsTable();
58+
this.__rebuildSnapshots();
5559
this.__buildSnapshotPreview();
5660

5761
const buttonsSection = new qx.ui.container.Composite(new qx.ui.layout.HBox());
5862
this._add(buttonsSection);
5963

6064
const editSnapshotBtn = this.__editSnapshotBtn = this.__createEditSnapshotBtn();
6165
editSnapshotBtn.setEnabled(false);
62-
editSnapshotBtn.addListener("execute", () => this.__editSnapshot());
66+
editSnapshotBtn.addListener("execute", () => {
67+
if (this.__selectedSnapshotId) {
68+
this.__editSnapshot(this.__selectedSnapshotId);
69+
}
70+
});
6371
buttonsSection.add(editSnapshotBtn);
6472

6573
const openSnapshotBtn = this.__openSnapshotBtn = this.__createOpenSnapshotBtn();
6674
openSnapshotBtn.setEnabled(false);
6775
openSnapshotBtn.addListener("execute", () => {
68-
if (this.__selectedSnapshot) {
69-
this.fireDataEvent("openSnapshot", this.__selectedSnapshot);
76+
if (this.__selectedSnapshotId) {
77+
this.fireDataEvent("openSnapshot", this.__selectedSnapshotId);
7078
}
7179
});
7280
buttonsSection.add(openSnapshotBtn);
7381
},
7482

83+
__rebuildSnapshots: function() {
84+
Promise.all([
85+
this.__study.getSnapshots(),
86+
this.__study.getCurrentSnapshot()
87+
])
88+
.then(values => {
89+
this.__snapshots = values[0];
90+
this.__currentSnapshot = values[1];
91+
this.__rebuildSnapshotsTable();
92+
this.__rebuildSnapshotsGraph();
93+
});
94+
},
95+
7596
__rebuildSnapshotsTable: function() {
7697
if (this.__snapshotsTable) {
7798
this.__snapshotsSection.remove(this.__snapshotsTable);
7899
}
79100

80-
const snapshotsTable = this.__snapshotsTable = new osparc.component.snapshots.Snapshots(this.__study);
101+
const snapshotsTable = this.__snapshotsTable = new osparc.component.snapshots.Snapshots();
102+
snapshotsTable.populateTable(this.__snapshots);
81103
snapshotsTable.addListener("cellTap", e => {
82-
this.__snapshotsSelected(e);
104+
const selectedRow = e.getRow();
105+
const snapshotId = snapshotsTable.getRowData(selectedRow)["Id"];
106+
this.__snapshotSelected(snapshotId);
83107
});
84108

85109
this.__snapshotsSection.addAt(snapshotsTable, 0, {
86-
width: "50%"
110+
width: "40%"
111+
});
112+
},
113+
114+
__rebuildSnapshotsGraph: function() {
115+
if (this.__gitGraphLayout) {
116+
this.__snapshotsSection.remove(this.__gitGraphLayout);
117+
}
118+
119+
const gitGraphLayout = this.__gitGraphLayout = new qx.ui.container.Composite(new qx.ui.layout.Canvas());
120+
const gitGraphCanvas = new qx.ui.container.Composite(new qx.ui.layout.Canvas());
121+
const gitGraphInteract = new qx.ui.container.Composite(new qx.ui.layout.VBox());
122+
gitGraphLayout.add(gitGraphCanvas, {
123+
top: 20,
124+
right: 0,
125+
bottom: 0,
126+
left: 0
127+
});
128+
gitGraphLayout.add(gitGraphInteract, {
129+
top: 20 + 2,
130+
right: 0,
131+
bottom: 0,
132+
left: 0
133+
});
134+
135+
gitGraphCanvas.addListenerOnce("appear", () => {
136+
const gitGraphWrapper = this.__gitGraphWrapper = new osparc.wrapper.GitGraph();
137+
gitGraphWrapper.init(gitGraphCanvas, gitGraphInteract)
138+
.then(() => gitGraphWrapper.populateGraph(this.__snapshots, this.__currentSnapshot));
139+
gitGraphWrapper.addListener("snapshotTap", e => {
140+
const snapshotId = e.getData();
141+
this.__snapshotSelected(snapshotId);
142+
});
143+
});
144+
145+
this.__snapshotsSection.addAt(gitGraphLayout, 1, {
146+
width: "20%"
87147
});
88148
},
89149

90150
__buildSnapshotPreview: function() {
91151
const snapshotPreview = this.__snapshotPreview = new osparc.component.workbench.WorkbenchUIPreview();
92-
this.__snapshotsSection.addAt(snapshotPreview, 1, {
93-
width: "50%"
152+
this.__snapshotsSection.addAt(snapshotPreview, 2, {
153+
width: "40%"
94154
});
95155
},
96156

97-
__loadSnapshotsPreview: function(snapshotData) {
157+
__loadSnapshotsPreview: function(snapshotId) {
98158
const params = {
99159
url: {
100160
"studyId": this.__study.getUuid(),
101-
"snapshotId": snapshotData["Id"]
161+
"snapshotId": snapshotId
102162
}
103163
};
104164
osparc.data.Resources.fetch("snapshots", "preview", params)
@@ -130,20 +190,21 @@ qx.Class.define("osparc.component.snapshots.SnapshotsView", {
130190
return openSnapshotBtn;
131191
},
132192

133-
__editSnapshot: function() {
134-
if (this.__selectedSnapshot) {
193+
__editSnapshot: function(snapshotId) {
194+
const selectedSnapshot = this.__snapshots.find(snapshot => snapshot["id"] === snapshotId);
195+
if (selectedSnapshot) {
135196
const editSnapshotView = new osparc.component.snapshots.EditSnapshotView();
136197
const tagCtrl = editSnapshotView.getChildControl("tags");
137-
tagCtrl.setValue(this.__selectedSnapshot["Tags"]);
198+
tagCtrl.setValue(selectedSnapshot["tags"][0]);
138199
const msgCtrl = editSnapshotView.getChildControl("message");
139-
msgCtrl.setValue(this.__selectedSnapshot["Message"]);
200+
msgCtrl.setValue(selectedSnapshot["message"]);
140201
const title = this.tr("Edit Snapshot");
141202
const win = osparc.ui.window.Window.popUpInWindow(editSnapshotView, title, 400, 180);
142203
editSnapshotView.addListener("takeSnapshot", () => {
143204
const params = {
144205
url: {
145206
"studyId": this.__study.getUuid(),
146-
"snapshotId": this.__selectedSnapshot["Id"]
207+
"snapshotId": snapshotId
147208
},
148209
data: {
149210
"tag": editSnapshotView.getTag(),
@@ -152,7 +213,7 @@ qx.Class.define("osparc.component.snapshots.SnapshotsView", {
152213
};
153214
osparc.data.Resources.fetch("snapshots", "updateSnapshot", params)
154215
.then(() => {
155-
this.__rebuildSnapshotsTable();
216+
this.__rebuildSnapshots();
156217
})
157218
.catch(err => osparc.component.message.FlashMessenger.getInstance().logAs(err.message, "ERROR"));
158219
win.close();
@@ -163,11 +224,18 @@ qx.Class.define("osparc.component.snapshots.SnapshotsView", {
163224
}
164225
},
165226

166-
__snapshotsSelected: function(e) {
167-
const selectedRow = e.getRow();
168-
this.__selectedSnapshot = this.__snapshotsTable.getRowData(selectedRow);
227+
__snapshotSelected: function(snapshotId) {
228+
this.__selectedSnapshotId = snapshotId;
229+
230+
if (this.__snapshotsTable) {
231+
this.__snapshotsTable.setSelection(snapshotId);
232+
}
233+
234+
if (this.__gitGraphWrapper) {
235+
this.__gitGraphWrapper.setSelection(snapshotId);
236+
}
169237

170-
this.__loadSnapshotsPreview(this.__selectedSnapshot);
238+
this.__loadSnapshotsPreview(snapshotId);
171239

172240
if (this.__editSnapshotBtn) {
173241
this.__editSnapshotBtn.setEnabled(true);

‎services/web/client/source/class/osparc/component/workbench/WorkbenchUI.js‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1104,7 +1104,8 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
11041104
},
11051105

11061106
__applyScale: function(value) {
1107-
this.__setZoom(this.__workbenchLayout.getContentElement().getDomElement(), value);
1107+
const el = this.__workbenchLayout.getContentElement().getDomElement();
1108+
osparc.utils.Utils.setZoom(el, value);
11081109

11091110
const oldBounds = this.__workbenchLayout.getBounds();
11101111
const width = parseInt(oldBounds.width / this.getScale());
@@ -1117,19 +1118,6 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
11171118
this.__updateWorkbenchBounds();
11181119
},
11191120

1120-
__setZoom: function(el, zoom) {
1121-
const transformOrigin = [0, 0];
1122-
const p = ["webkit", "moz", "ms", "o"];
1123-
const s = `scale(${zoom})`;
1124-
const oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";
1125-
for (let i = 0; i < p.length; i++) {
1126-
el.style[p[i] + "Transform"] = s;
1127-
el.style[p[i] + "TransformOrigin"] = oString;
1128-
}
1129-
el.style["transform"] = s;
1130-
el.style["transformOrigin"] = oString;
1131-
},
1132-
11331121
__updateWorkbenchBounds: function() {
11341122
const nodeBounds = this.__getNodesBounds();
11351123
if (nodeBounds) {

‎services/web/client/source/class/osparc/component/workbench/WorkbenchUIPreview.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUIPreview", {
8181
});
8282
}
8383

84-
this.setScale(0.4);
84+
this.setScale(0.5);
8585
}
8686
},
8787

‎services/web/client/source/class/osparc/data/Resources.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,10 @@ qx.Class.define("osparc.data.Resources", {
177177
method: "PATCH",
178178
url: statics.API + "/repos/projects/{studyId}/checkpoints/{snapshotId}"
179179
},
180+
current: {
181+
method: "GET",
182+
url: statics.API + "/repos/projects/{studyId}/checkpoints/HEAD"
183+
},
180184
checkout: {
181185
method: "POST",
182186
url: statics.API + "/repos/projects/{studyId}/checkpoints/{snapshotId}:checkout"

‎services/web/client/source/class/osparc/data/model/Study.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -252,6 +252,24 @@ qx.Class.define("osparc.data.model.Study", {
252252
});
253253
},
254254

255+
getCurrentSnapshot: function(studyId) {
256+
return new Promise((resolve, reject) => {
257+
const params = {
258+
url: {
259+
"studyId": studyId
260+
}
261+
};
262+
osparc.data.Resources.fetch("snapshots", "current", params)
263+
.then(currentSnapshot => {
264+
resolve(currentSnapshot);
265+
})
266+
.catch(err => {
267+
console.error(err);
268+
reject(err);
269+
});
270+
});
271+
},
272+
255273
hasSnapshots: function(studyId) {
256274
return new Promise((resolve, reject) => {
257275
this.self().getSnapshots(studyId)
@@ -282,6 +300,10 @@ qx.Class.define("osparc.data.model.Study", {
282300
return this.self().getSnapshots(this.getUuid());
283301
},
284302

303+
getCurrentSnapshot: function() {
304+
return this.self().getCurrentSnapshot(this.getUuid());
305+
},
306+
285307
hasSnapshots: function() {
286308
return this.self().hasSnapshots(this.getUuid());
287309
},

‎services/web/client/source/class/osparc/desktop/MainPage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -370,8 +370,8 @@ qx.Class.define("osparc.desktop.MainPage", {
370370
}
371371
const studyEditor = new osparc.desktop.StudyEditor();
372372
studyEditor.addListener("startSnapshot", e => {
373-
const snapshotData = e.getData();
374-
this.__startSnapshot(this.__studyEditor.getStudy().getUuid(), snapshotData["Id"]);
373+
const snapshotId = e.getData();
374+
this.__startSnapshot(this.__studyEditor.getStudy().getUuid(), snapshotId);
375375
}, this);
376376
return studyEditor;
377377
},

‎services/web/client/source/class/osparc/desktop/WorkbenchView.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,8 +231,8 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
231231
const win = osparc.ui.window.Window.popUpInWindow(snapshots, title, 1000, 500);
232232
snapshots.addListener("openSnapshot", e => {
233233
win.close();
234-
const snapshot = e.getData();
235-
this.fireDataEvent("startSnapshot", snapshot);
234+
const snapshotId = e.getData();
235+
this.fireDataEvent("startSnapshot", snapshotId);
236236
});
237237
},
238238

0 commit comments

Comments
 (0)