Skip to content

Commit deb63c3

Browse files
Markus-BrandMarkus-Brand
committed
AEDebugging_ Add jsTree AE overview to timeline
SQUASHED: AUTO-COMMIT-src-client-reactive-components-basic-aexpr-timeline.js,AUTO-COMMIT-src-external-jstree-themes-default-style.css,
1 parent 8ba60e4 commit deb63c3

File tree

2 files changed

+93
-44
lines changed

2 files changed

+93
-44
lines changed

‎src/client/reactive/components/basic/aexpr-timeline.js‎

Lines changed: 69 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -94,30 +94,22 @@ export default class EventDrops extends Morph {
9494

9595
this.groupByLine.addEventListener('change', () => {
9696
if (this.groupByLine.checked) {
97-
this.groupingFunction = undefined;
97+
this.groupingFunction = this.locationGrouping();
9898
} else {
99-
this.groupingFunction = each => each.meta().get('id');
99+
this.groupingFunction = this.instanceGrouping();
100100
}
101101
});
102102

103103
this.numberEventsContainer = this.numberEvents;
104104
document.body.querySelectorAll('#event-drops-tooltip').forEach(each => each.remove());
105105
this.d3 = d3;
106-
debugger;
107-
const tree = jQuery.jstree.create(this.aeOverview, {
106+
jQuery(this.aeOverview).jstree({
108107
"plugins" : [ "wholerow", "checkbox" ],
108+
"checkbox": {
109+
"keep_selected_style": false
110+
},
109111
'core': {
110-
"themes" : { "stripes" : true },
111-
'data': [
112-
{
113-
'text': 'root',
114-
"icon" : "/static/3.3.11/assets/images/tree_icon.png",
115-
'children': [
116-
'child1',
117-
'child2'
118-
]
119-
}
120-
]
112+
"themes" : { "icons" : false },
121113
}
122114
});
123115
this.update();
@@ -150,24 +142,43 @@ export default class EventDrops extends Morph {
150142
let dataFromSource = this.dataFromSource || (() => AExprRegistry.allAsArray());
151143
if (_.isFunction(dataFromSource)) return dataFromSource();else return dataFromSource;
152144
}
145+
146+
fileGrouping() {
147+
let fileName = string => string.substring(0, string.lastIndexOf("@"));
148+
return (each => fileName(each.meta().get('id')))
149+
}
150+
151+
locationGrouping() {
152+
let locationID = string => string.substring(0, string.lastIndexOf("#"));
153+
return (each => locationID(each.meta().get('id')))
154+
}
155+
156+
instanceGrouping() {
157+
return (each => each.meta().get('id'));
158+
}
153159

154160
getGroupingFunction() {
155-
let deIndex = string => string.substring(0, string.lastIndexOf("#"));
156-
return this.groupingFunction || (each => deIndex(each.meta().get('id')));
161+
return this.groupingFunction || this.locationGrouping();
157162
}
158163

159164
update() {
160165
if (this.detached) return;
161166
this.setAexprs(this.getDataFromSource());
162167
setTimeout(() => {
163168
this.update();
164-
}, 1000);
169+
}, 3000);
165170
}
166171

167172
setAexprs(aexprs) {
173+
for(let i = 0; i < aexprs.length; i++) {
174+
aexprs[i].timelineID = i;
175+
}
176+
const checkedIndices = jQuery(this.aeOverview).jstree(true).get_bottom_selected();
177+
const selectedAEs = checkedIndices.map(i => aexprs[i - 1]);
178+
this.updateOverview(aexprs);
168179
let scrollBefore = this.diagram.scrollTop;
169-
if (aexprs.length == 0) return;
170-
let groups = aexprs.groupBy(this.getGroupingFunction());
180+
if (selectedAEs.length == 0) return;
181+
let groups = selectedAEs.groupBy(this.getGroupingFunction());
171182
groups = Object.keys(groups).map(each => ({ name: each, data: groups[each].flatMap(ae => ae.meta().get('events')) }));
172183
this.setData(groups);
173184
let newDomain = this.zoomedTo;
@@ -193,6 +204,44 @@ export default class EventDrops extends Morph {
193204
this.chart.zoomToDomain(newDomain);
194205
this.diagram.scrollTop = scrollBefore;
195206
}
207+
208+
updateOverview(aexprs) {
209+
jQuery(this.aeOverview).jstree(true).settings.core.data = this.generateOverviewJSON(aexprs);
210+
jQuery(this.aeOverview).jstree(true).refresh();
211+
}
212+
213+
generateOverviewJSON(aexprs) {
214+
let json = [];
215+
let files = aexprs.groupBy(this.fileGrouping());
216+
for(const file of Object.keys(files)) {
217+
let locations = files[file].groupBy(this.locationGrouping());
218+
const children = Object.keys(locations).map(location => {return {
219+
"text": "line " + location.substring(location.lastIndexOf("@") + 1),
220+
"children": locations[location].map((ae) => {
221+
const id = ae.meta().get('id');
222+
return {
223+
"id": ae.timelineID + 1,
224+
"text": id.substring(id.lastIndexOf("#") + 1)
225+
}
226+
})
227+
}});
228+
json.push({
229+
"text": file,
230+
"children": children,
231+
})
232+
}
233+
return json;
234+
/*[
235+
{
236+
'text': 'root',
237+
"icon" : "/static/3.3.11/assets/images/tree_icon.png",
238+
'children': [
239+
'child1',
240+
'child2'
241+
]
242+
}
243+
]*/
244+
}
196245

197246
setData(data) {
198247
d3.select(this.diagram).data([data]).call(this.chart);

‎src/external/jstree/themes/default/style.css‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -410,7 +410,7 @@
410410
}
411411
.jstree-default .jstree-node,
412412
.jstree-default .jstree-icon {
413-
background-image: url("32px.png");
413+
background-image: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png");
414414
}
415415
.jstree-default .jstree-node {
416416
background-position: -292px -4px;
@@ -433,7 +433,7 @@
433433
}
434434
.jstree-default > .jstree-no-dots .jstree-node,
435435
.jstree-default > .jstree-no-dots .jstree-leaf > .jstree-ocl {
436-
background: transparent;
436+
/*background: transparent;*/
437437
}
438438
.jstree-default > .jstree-no-dots .jstree-open > .jstree-ocl {
439439
background-position: -36px -4px;
@@ -501,7 +501,7 @@
501501
}
502502
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-node,
503503
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
504-
background: transparent;
504+
/*background: transparent;*/
505505
}
506506
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
507507
background-position: -36px -36px;
@@ -518,10 +518,10 @@
518518
background: url("throbber.gif") center center no-repeat;
519519
}
520520
.jstree-default .jstree-file {
521-
background: url("32px.png") -100px -68px no-repeat;
521+
background: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png") -100px -68px no-repeat;
522522
}
523523
.jstree-default .jstree-folder {
524-
background: url("32px.png") -260px -4px no-repeat;
524+
background: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png") -260px -4px no-repeat;
525525
}
526526
.jstree-default > .jstree-container-ul > .jstree-node {
527527
margin-left: 0;
@@ -533,7 +533,7 @@
533533
}
534534
#jstree-dnd.jstree-default .jstree-ok,
535535
#jstree-dnd.jstree-default .jstree-er {
536-
background-image: url("32px.png");
536+
background-image: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png");
537537
background-repeat: no-repeat;
538538
background-color: transparent;
539539
}
@@ -591,7 +591,7 @@
591591
}
592592
.jstree-default-small .jstree-node,
593593
.jstree-default-small .jstree-icon {
594-
background-image: url("32px.png");
594+
background-image: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png");
595595
}
596596
.jstree-default-small .jstree-node {
597597
background-position: -295px -7px;
@@ -614,7 +614,7 @@
614614
}
615615
.jstree-default-small > .jstree-no-dots .jstree-node,
616616
.jstree-default-small > .jstree-no-dots .jstree-leaf > .jstree-ocl {
617-
background: transparent;
617+
/*background: transparent;*/
618618
}
619619
.jstree-default-small > .jstree-no-dots .jstree-open > .jstree-ocl {
620620
background-position: -39px -7px;
@@ -682,7 +682,7 @@
682682
}
683683
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-node,
684684
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
685-
background: transparent;
685+
/*background: transparent;*/
686686
}
687687
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
688688
background-position: -39px -39px;
@@ -699,10 +699,10 @@
699699
background: url("throbber.gif") center center no-repeat;
700700
}
701701
.jstree-default-small .jstree-file {
702-
background: url("32px.png") -103px -71px no-repeat;
702+
background: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png") -103px -71px no-repeat;
703703
}
704704
.jstree-default-small .jstree-folder {
705-
background: url("32px.png") -263px -7px no-repeat;
705+
background: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png") -263px -7px no-repeat;
706706
}
707707
.jstree-default-small > .jstree-container-ul > .jstree-node {
708708
margin-left: 0;
@@ -714,7 +714,7 @@
714714
}
715715
#jstree-dnd.jstree-default-small .jstree-ok,
716716
#jstree-dnd.jstree-default-small .jstree-er {
717-
background-image: url("32px.png");
717+
background-image: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png");
718718
background-repeat: no-repeat;
719719
background-color: transparent;
720720
}
@@ -772,7 +772,7 @@
772772
}
773773
.jstree-default-large .jstree-node,
774774
.jstree-default-large .jstree-icon {
775-
background-image: url("32px.png");
775+
background-image: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png");
776776
}
777777
.jstree-default-large .jstree-node {
778778
background-position: -288px 0px;
@@ -795,7 +795,7 @@
795795
}
796796
.jstree-default-large > .jstree-no-dots .jstree-node,
797797
.jstree-default-large > .jstree-no-dots .jstree-leaf > .jstree-ocl {
798-
background: transparent;
798+
/*background: transparent;*/
799799
}
800800
.jstree-default-large > .jstree-no-dots .jstree-open > .jstree-ocl {
801801
background-position: -32px 0px;
@@ -863,7 +863,7 @@
863863
}
864864
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-node,
865865
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
866-
background: transparent;
866+
/* background: transparent;*/
867867
}
868868
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
869869
background-position: -32px -32px;
@@ -880,10 +880,10 @@
880880
background: url("throbber.gif") center center no-repeat;
881881
}
882882
.jstree-default-large .jstree-file {
883-
background: url("32px.png") -96px -64px no-repeat;
883+
background: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png") -96px -64px no-repeat;
884884
}
885885
.jstree-default-large .jstree-folder {
886-
background: url("32px.png") -256px 0px no-repeat;
886+
background: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png") -256px 0px no-repeat;
887887
}
888888
.jstree-default-large > .jstree-container-ul > .jstree-node {
889889
margin-left: 0;
@@ -895,7 +895,7 @@
895895
}
896896
#jstree-dnd.jstree-default-large .jstree-ok,
897897
#jstree-dnd.jstree-default-large .jstree-er {
898-
background-image: url("32px.png");
898+
background-image: url("/lively4/lively4-markus/src/external/jstree/themes/default/32px.png");
899899
background-repeat: no-repeat;
900900
background-color: transparent;
901901
}
@@ -938,12 +938,12 @@
938938
height: 40px;
939939
}
940940
#jstree-dnd.jstree-dnd-responsive > .jstree-ok {
941-
background-image: url("40px.png");
941+
background-image: url("/lively4/lively4-markus/src/external/jstree/themes/default/40px.png");
942942
background-position: 0 -200px;
943943
background-size: 120px 240px;
944944
}
945945
#jstree-dnd.jstree-dnd-responsive > .jstree-er {
946-
background-image: url("40px.png");
946+
background-image: url("/lively4/lively4-markus/src/external/jstree/themes/default/40px.png");;
947947
background-position: -40px -200px;
948948
background-size: 120px 240px;
949949
}
@@ -962,7 +962,7 @@
962962
*/
963963
}
964964
.jstree-default-responsive .jstree-icon {
965-
background-image: url("40px.png");
965+
background-image: url("/lively4/lively4-markus/src/external/jstree/themes/default/40px.png");;
966966
}
967967
.jstree-default-responsive .jstree-node,
968968
.jstree-default-responsive .jstree-leaf > .jstree-ocl {
@@ -1066,7 +1066,7 @@
10661066
.jstree-default-responsive .jstree-node > .jstree-ocl,
10671067
.jstree-default-responsive .jstree-themeicon,
10681068
.jstree-default-responsive .jstree-checkbox {
1069-
background-image: url("40px.png");
1069+
background-image: url("/lively4/lively4-markus/src/external/jstree/themes/default/40px.png");;
10701070
background-size: 120px 240px;
10711071
}
10721072
.jstree-default-responsive .jstree-node {
@@ -1088,11 +1088,11 @@
10881088
background-position: 0 0;
10891089
}
10901090
.jstree-default-responsive .jstree-file {
1091-
background: url("40px.png") 0 -160px no-repeat;
1091+
background: url("/lively4/lively4-markus/src/external/jstree/themes/default/40px.png"); 0 -160px no-repeat;
10921092
background-size: 120px 240px;
10931093
}
10941094
.jstree-default-responsive .jstree-folder {
1095-
background: url("40px.png") -40px -40px no-repeat;
1095+
background: url("/lively4/lively4-markus/src/external/jstree/themes/default/40px.png"); -40px -40px no-repeat;
10961096
background-size: 120px 240px;
10971097
}
10981098
.jstree-default-responsive > .jstree-container-ul > .jstree-node {

0 commit comments

Comments
 (0)