Skip to content

Commit 394dd36

Browse files
JensLinckeJensLincke
committed
Merge branch 'gh-pages' of https://github.com/LivelyKernel/lively4-core into gh-pages
2 parents 65dc7c1 + 0f53984 commit 394dd36

File tree

22 files changed

+803
-62
lines changed

22 files changed

+803
-62
lines changed

‎src/client/reactive/active-expression-rewriting/active-expression-rewriting.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -836,10 +836,6 @@ export class RewritingActiveExpression extends BaseActiveExpression {
836836
super(func, ...args);
837837
this.meta({ strategy: 'Rewriting' });
838838
this.updateDependencies();
839-
840-
if (new.target === RewritingActiveExpression) {
841-
this.addToRegistry();
842-
}
843839
}
844840

845841
dispose() {

‎src/client/reactive/active-expression/active-expression.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -213,11 +213,9 @@ export class BaseActiveExpression {
213213
}
214214

215215
this.initializeEvents();
216-
this.logEvent('created', {ae: this, stack: lively.stack(), value: "no value yet"});
217216

218-
if (new.target === BaseActiveExpression) {
219-
this.addToRegistry();
220-
}
217+
this.addToRegistry();
218+
this.logEvent('created', {ae: this, stack: lively.stack(), value: "no value yet"});
221219
}
222220

223221
_initLastValue() {
@@ -581,7 +579,8 @@ export class BaseActiveExpression {
581579
if (this.isMeta()) return;
582580
//if(!this.meta().has('events'))this.meta({events : new Array()});
583581
let events = this.meta().get('events');
584-
const event = { timestamp: new Date(), type, value };
582+
const timestamp = new Date();
583+
const event = { timestamp , type, value, id: this.meta().get('id') + "-" + events.length };
585584
AExprRegistry.eventListeners().forEach(listener => listener.callback(this, event));
586585
events.push(event);
587586
if (events.length > 5000) events.shift();

‎src/client/reactive/babel-plugin-active-expression-rewriting/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -788,7 +788,6 @@ export default function (babel) {
788788
if (args.length > 0) {
789789
const expressionPath = args[0];
790790
const sourceCode = expressionPath.getSource();
791-
debugger;
792791
path.pushContainer('arguments', t.objectExpression([t.objectProperty(t.identifier("sourceCode"), t.stringLiteral(sourceCode))]));
793792
}
794793
//addOriginalSourceCode(path);

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

Lines changed: 46 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
import Morph from 'src/components/widgets/lively-morph.js';
44

5-
import eventDrops from 'src/external/event-drops.js';
5+
// import eventDrops from 'src/external/event-drops.js'
6+
import eventDrops from 'src/external/event-drops/index.js';
67
import jQuery from 'src/external/jquery.js';
78
import jstree from 'src/external/jstree/jstree.js';
89
import d3 from 'src/external/d3.v5.js';
@@ -20,6 +21,7 @@ export default class EventDrops extends Morph {
2021
bound: { format: () => undefined },
2122
range: { start: new Date(performance.timeOrigin), end: new Date() },
2223
line: {
24+
height: 25,
2325
color: (_, index) => d3.schemeCategory10[index % 10]
2426
},
2527
zoom: {
@@ -34,7 +36,8 @@ export default class EventDrops extends Morph {
3436
},
3537
restrictPan: true,
3638
drop: {
37-
date: event => event.timestamp,
39+
id: event => event.id,
40+
date: event =>{/*debugger;*/ return event.timestamp},
3841
color: event => {
3942
switch (event.type) {
4043
case 'created':
@@ -105,11 +108,11 @@ export default class EventDrops extends Morph {
105108
this.eventsChanged();
106109
});
107110
//Register to filter changes
108-
this.filterFunction = () => true;
111+
this.filterFunction = e => e;
109112
this.filterButton.addEventListener('click', () => {
110113
const inputValue = this.filterInput.value;
111114
if (!inputValue) {
112-
this.filterFunction = () => true;
115+
this.filterFunction = e => e;
113116
} else {
114117
this.filterFunction = event => {
115118
return eval(inputValue);
@@ -303,7 +306,7 @@ export default class EventDrops extends Morph {
303306
let groups = selectedAEs.groupBy(this.getGroupingFunction());
304307
groups = Object.keys(groups).map(each => ({
305308
name: each,
306-
data: groups[each].flatMap(ae => ae.meta().get('events')).filter(this.filterFunction)
309+
data: groups[each].flatMap(ae => ae.meta().get('events')).filter(this.filterFunction),
307310
}));
308311
this.setData(groups);
309312
if (selectedAEs.length == 0) return;
@@ -336,48 +339,61 @@ export default class EventDrops extends Morph {
336339

337340
updateValuesOverTime(aexprs) {
338341
const aeWithRelevantEvents = aexprs.map(ae => {
339-
return { ae, events: ae.meta().get('events').filter(event => event.type === "changed value" || event.type === "created").filter(this.filterFunction) };
342+
return { ae, events: ae.meta().get('events').filter(this.filterFunction) };
340343
});
341344

342345
this.valuesOverTime.innerHTML = "";
343346

344347
for (const { ae, events } of aeWithRelevantEvents) {
345-
if (events.length === 0) continue;
346-
let row = <tr><th>{ae.meta().get('id')}</th></tr>;
347-
//row.append(<td>{events[0].value.lastValue}</td>);
348-
for (const event of events) {
348+
const valueChangingEvents = events.filter(event => event.type === "changed value" || event.type === "created");
349+
if (valueChangingEvents.length === 0) continue;
350+
let th = <th>{ae.meta().get('id')}</th>;
351+
let row = <tr></tr>;
352+
row.append(th);
353+
354+
th.addEventListener('click', () => {
355+
this.showEvents(events, ae);
356+
});
357+
358+
for (const event of valueChangingEvents) {
349359
const cell = <td class="tableCell">{event.value.value}</td>;
350360

351361
row.append(cell);
352362

353363
cell.addEventListener('click', () => {
354-
this.showEvent(event, ae);
355-
//lively.notify(event.value.value)
364+
this.showEvents([event], ae);
356365
});
357366
}
358367
this.valuesOverTime.append(row);
359368
}
360369
}
361370

362-
showEvent(event, ae) {
363-
let min = new Date(event.timestamp.getTime() - 10);
364-
let max = new Date(event.timestamp.getTime() + 10);
365-
this.chart.zoomToDomain([min, max]);
366-
//Add delay to allow rerender
367-
setTimeout(() => {
368-
const referenceItem = this.shadowRoot.querySelector(".domain");
369-
const selectedDrops = this.shadowRoot.querySelectorAll(".drop[cx=\"" + referenceItem.getBoundingClientRect().width/2 + "\"]")
370-
.filter(drop => {
371-
const dropLineName = drop.parentElement.nextElementSibling.innerHTML;
372-
let dropLineAEName = dropLineName.substring(0, dropLineName.lastIndexOf(" "));
373-
return ae.meta().get('id').includes(dropLineAEName);
374-
});
375-
for(const drop of selectedDrops) {
376-
drop.setAttribute("r", 10);
371+
showEvents(events, ae) {
372+
const timestamps = events.map(e => e.timestamp.getTime());
373+
const minTime = Math.min(...timestamps);
374+
const maxTime = Math.max(...timestamps);
375+
const padding = Math.max((maxTime - minTime) / 10, 10);
376+
const min = new Date(minTime - padding);
377+
const max = new Date(maxTime + padding);
378+
379+
const lineElement = this.shadowRoot.querySelectorAll(".line-label").find(element => {
380+
const dropLineName = element.innerHTML;
381+
const dropLineAEName = dropLineName.substring(0, dropLineName.lastIndexOf(" "));
382+
return (ae.meta().get('id') + " ").includes(dropLineAEName + " ");
383+
});
384+
lineElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
385+
386+
this.chart.scale().domain([min, max]);
387+
this.chart.zoomToDomain([min, max], 300, 0, d3.easeQuadInOut).on("end", () => {
388+
for(const event of events) {
389+
this.highlightEvent(event);
377390
}
378-
//filter to parent -> line-label sibling value = AE id
379-
}, 30);
380-
391+
});
392+
}
393+
394+
highlightEvent(event) {
395+
const selectedDrop = this.shadowRoot.querySelector(".drop[id=\"" + event.id + "\"]");
396+
selectedDrop.setAttribute("r", 10);
381397
}
382398

383399
updateOverview(aexprs) {

‎src/client/utils/stack.js‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -152,27 +152,42 @@ export class Frame {
152152
this._evalAsync = isAsync;
153153
this._evalFunc = func;
154154
}
155-
155+
156156
async _determineSourceInfo() {
157-
if(this._file === "<anonymous>") return;
158-
const [livelyPath, srcPath] = this._file.split("/src/");
159-
if(!this._transpiled || !srcPath) {
160-
this._sourceLoc = {line: this._line, column: this._char, source: this._file};
157+
const sourceMappingURL = this.sourceMapURL();
158+
if(!sourceMappingURL || !(await lively.files.exists(sourceMappingURL))) {
159+
if(this._file !== "<anonymous>") {
160+
this._sourceLoc = { line: this._line, column: this._char, source: this._file };
161+
}
161162
return;
162-
}
163-
const sourceMappingURL = livelyPath + "/.transpiled/" + ("src/" + srcPath).replaceAll("/", "_") + ".map.json";
163+
}
164+
164165
var sourceMap = await sourceMappingURL.fetchJSON();
165166
var smc = sourcemap.SourceMapConsumer(sourceMap);
166167
this._sourceLoc = smc.originalPositionFor({
167168
line: parseInt(this._line),
168169
column: parseInt(this._char)
169170
});
170171
}
171-
172+
173+
sourceMapURL() {
174+
if (this._file === "<anonymous>") return;
175+
176+
const [livelyPath, srcPath] = this._file.split("/src/");
177+
178+
if (!srcPath) {
179+
return;
180+
}
181+
182+
const sourceMappingURL = livelyPath + "/.transpiled/" + ("src/" + srcPath).replaceAll("/", "_") + ".map.json";
183+
return sourceMappingURL;
184+
}
185+
172186
/*MD ## func MD*/
173187
/**
174188
* returns Bool
175189
*/
190+
176191
get async() {
177192
return this._async || false;
178193
}
@@ -201,32 +216,32 @@ export class Frame {
201216
get char() {
202217
return this._char;
203218
}
204-
219+
205220
async getSourceLocBabelStyle() {
206-
if(!this._sourceLoc) {
221+
if (!this._sourceLoc) {
207222
await this._determineSourceInfo();
208-
if(!this._sourceLoc) return undefined;
223+
if (!this._sourceLoc) return undefined;
209224
}
210-
const location = {line: this._sourceLoc.line, column: this._sourceLoc.column};
211-
return {start: location, end: location, file: this._sourceLoc.source};
225+
const location = { line: this._sourceLoc.line, column: this._sourceLoc.column };
226+
return { start: location, end: location, file: this._sourceLoc.source };
212227
}
213-
228+
214229
async getSourceLoc() {
215-
if(!this._sourceLoc) {
230+
if (!this._sourceLoc) {
216231
await this._determineSourceInfo();
217232
}
218233
return this._sourceLoc;
219234
}
220-
235+
221236
async getSourceLine() {
222-
if(!this._sourceLoc.line) {
237+
if (!this._sourceLoc.line) {
223238
await this._determineSourceInfo();
224239
}
225240
return this._sourceLoc.line;
226241
}
227-
242+
228243
async getSourceChar() {
229-
if(!this._sourceLoc.character) {
244+
if (!this._sourceLoc.character) {
230245
await this._determineSourceInfo();
231246
}
232247
return this._sourceLoc.column;

‎src/client/utils/stack.js.l4a‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/widgets/lively-code-mirror.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1539,7 +1539,6 @@ export default class LivelyCodeMirror extends HTMLElement {
15391539
const AELine = AELocation.start.line - 1;
15401540

15411541
var valueChangedEvents = ae.meta().get("events").filter(event => event.type === "changed value");
1542-
debugger;
15431542
const relatedEvents = valueChangedEvents.filter(event => event.value.trigger && dependencyFile.includes(event.value.trigger.file) && event.value.trigger.start.line - 1 === dependencyLine);
15441543

15451544
if (dependencyFile.includes(this.fileURL())) {

‎src/external/event-drops/axis.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
export const tickFormat = (date, formats, d3) => {
2+
if (d3.timeSecond(date) < date) {
3+
return d3.timeFormat(formats.milliseconds)(date);
4+
}
5+
6+
if (d3.timeMinute(date) < date) {
7+
return d3.timeFormat(formats.seconds)(date);
8+
}
9+
10+
if (d3.timeHour(date) < date) {
11+
return d3.timeFormat(formats.minutes)(date);
12+
}
13+
14+
if (d3.timeDay(date) < date) {
15+
return d3.timeFormat(formats.hours)(date);
16+
}
17+
18+
if (d3.timeMonth(date) < date) {
19+
if (d3.timeWeek(date) < date) {
20+
return d3.timeFormat(formats.days)(date);
21+
}
22+
23+
return d3.timeFormat(formats.weeks)(date);
24+
}
25+
26+
if (d3.timeYear(date) < date) {
27+
return d3.timeFormat(formats.months)(date);
28+
}
29+
30+
return d3.timeFormat(formats.year)(date);
31+
};
32+
33+
export default (d3, config, xScale, breakpointLabel) => {
34+
const {
35+
label: { width: labelWidth },
36+
axis: { formats, verticalGrid, tickPadding },
37+
locale,
38+
numberDisplayedTicks,
39+
line: { height: lineHeight },
40+
} = config;
41+
d3.timeFormatDefaultLocale(locale);
42+
return selection => {
43+
const axis = selection.selectAll('.axis').data(d => d);
44+
45+
axis.exit().remove();
46+
47+
const axisTop = d3
48+
.axisTop(xScale)
49+
.tickFormat(d => tickFormat(d, formats, d3))
50+
.ticks(numberDisplayedTicks[breakpointLabel])
51+
.tickPadding(tickPadding);
52+
53+
if (verticalGrid)
54+
axisTop.tickSizeInner(-(selection.data()[0].length * lineHeight));
55+
56+
axis.enter()
57+
.filter((_, i) => !i)
58+
.append('g')
59+
.classed('axis', true)
60+
.attr('transform', `translate(${labelWidth},0)`)
61+
.call(axisTop);
62+
63+
axis.call(axisTop);
64+
};
65+
};

0 commit comments

Comments
 (0)