You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// if there is no 'componentData' or 'componentData.actualDuration'
56
55
return'NO TIME';
57
56
}
58
57
59
58
letseconds: number|string;// seconds is undefined but can take a number or a string
60
59
letmilliseconds: any=componentData.actualDuration;// milliseconds is of any type and taken from the 'componentData.actualDuration'
61
60
62
-
if(Math.floor(componentData.actualDuration)>60){// if the milliseconds is greater than 60
61
+
if(Math.floor(componentData.actualDuration)>60){
62
+
// if the milliseconds is greater than 60
63
63
seconds=Math.floor(componentData.actualDuration/60);// we divide our milliseconds by 60 to determine our seconds
64
64
seconds=JSON.stringify(seconds);// and we convert our seconds into a string
65
-
66
-
if(seconds.length<2){// if the seconds string is only a single digit
65
+
66
+
if(seconds.length<2){
67
+
// if the seconds string is only a single digit
67
68
seconds='0'.concat(seconds);// we can add a 0 in front of it so that if 'seconds = "1"' it will come out as 'seconds = "01"'
68
-
}
69
+
}
69
70
milliseconds=Math.floor(componentData.actualDuration%60);// Our true milliseconds then becomes the remainder of dividing our initial milliseconds by 60
70
-
71
71
}else{
72
72
seconds='00';// if we haven't even reached one second yet, our seconds are 00
73
73
}
74
74
75
75
milliseconds=Number.parseFloat(millisecondsasstring).toFixed(2);// we convert our milliseconds string into a floating point number that has up to two decimal places.
76
-
constarrayMilliseconds: string|number=milliseconds.split('.');// we split our milliseconds using the decimal and come out with an array of two numbers
76
+
constarrayMilliseconds: [string,number]=milliseconds.split('.');// we split our milliseconds using the decimal and come out with an array of two numbers
77
77
78
-
79
-
if(arrayMilliseconds[0].length<2){// if our millisecond string only has one digit
78
+
if(arrayMilliseconds[0].length<2){
79
+
// if our millisecond string only has one digit
80
80
arrayMilliseconds[0]='0'.concat(arrayMilliseconds[0]);// we add a 0 in front of it so that in the a sample number of '1' becomes '01'
81
81
}
82
-
83
-
if(index===0){// if this is the initial snapshot
82
+
83
+
if(index===0){
84
+
// if this is the initial snapshot
84
85
return`${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;// we give it a timestamp
85
86
}
86
87
return`+${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;// if these are succeeding snapshots, we add a '+' to the timestamp
87
88
};
88
89
89
90
constdisplayTime: string=cleanTime();// we run cleanTime on the creation of this component so that we can get the timestamp
90
91
91
-
92
92
// creates an options object that 'ReactHover' component will use to modify it's behaviour
if(viewIndex!==-1){// snapshots should not have any property < 0. A viewIndex of '-1' means that we had a snapshot index that occurred before the initial snapshot of the application state... which is impossible. '-1' therefore means reset to the last/most recent snapshot.
24
+
if(viewIndex!==-1&&snapshots&&viewIndex){
25
+
// snapshots should not have any property < 0. A viewIndex of '-1' means that we had a snapshot index that occurred before the initial snapshot of the application state... which is impossible. '-1' therefore means reset to the last/most recent snapshot.
25
26
previous=snapshots[viewIndex-1];// set previous to the snapshot that is before the one we are currently viewing
26
-
}else{
27
+
}elseif(snapshots&&sliderIndex){
27
28
previous=snapshots[sliderIndex-1];// if viewIndex was an impossible index, we will get our snapshots index using 'sliderIndex.' sliderIndex should have already been reset to the latest snapshot index. Previous is then set to the snapshot that occurred immediately before our most recent snapshot.
28
29
}
29
-
30
+
30
31
/*
31
32
State snapshot objects have the following structure:
32
33
{
@@ -43,23 +44,29 @@ function Diff(props: DiffProps): JSX.Element {
constnewObj={ ...obj};// duplicate our input object into a new object
45
46
46
-
if(newObj.name==='nameless'){// if our new object's name is nameless
47
+
if(newObj.name==='nameless'){
48
+
// if our new object's name is nameless
47
49
deletenewObj.name;// delete the name property
48
50
}
49
-
if(newObj.componentData){// if our new object has a componentData property
51
+
if(newObj.componentData){
52
+
// if our new object has a componentData property
50
53
deletenewObj.componentData;// delete the componentData property
51
54
}
52
-
if(newObj.state==='stateless'){// if if our new object's state is stateless
55
+
if(newObj.state==='stateless'){
56
+
// if if our new object's state is stateless
53
57
deletenewObj.state;// delete the state property
54
58
}
55
59
56
-
if(newObj.stateSnaphot){// if our new object has a stateSnaphot property
60
+
if(newObj.stateSnaphot){
61
+
// if our new object has a stateSnaphot property
57
62
newObj.stateSnaphot=statelessCleaning(obj.stateSnaphot);// run statelessCleaning on the stateSnapshot
58
63
}
59
-
60
-
if(newObj.children){// if our new object has a children property
64
+
65
+
if(newObj.children){
66
+
// if our new object has a children property
61
67
newObj.children=[];
62
-
if(obj.children.length>0){// and if our input object's children property is non-empty, go through each children object from our input object and determine, if the object being iterated on either has a stateless state or has a children array with a non-zero amount of objects. Objects that fulfill the above that need to be cleaned through statelessCleaning. Those that are cleaned through this process are then pushed to the new object's children array.
68
+
if(obj.children.length>0){
69
+
// and if our input object's children property is non-empty, go through each children object from our input object and determine, if the object being iterated on either has a stateless state or has a children array with a non-zero amount of objects. Objects that fulfill the above that need to be cleaned through statelessCleaning. Those that are cleaned through this process are then pushed to the new object's children array.
@@ -73,16 +80,18 @@ function Diff(props: DiffProps): JSX.Element {
73
80
returnnewObj;// return the cleaned state snapshot(s)
74
81
};
75
82
76
-
constpreviousDisplay: StatelessCleaning=statelessCleaning(previous);// displays stateful data from the first snapshot that was taken before our current snapshot.
83
+
constpreviousDisplay: StatelessCleaning=statelessCleaning(previous);// displays stateful data from the first snapshot that was taken before our current snapshot.
77
84
78
-
constdelta: StatelessCleaning=diff(previousDisplay,snapshot);// diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
85
+
constdelta: StatelessCleaning=diff(previousDisplay,snapshot);// diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
79
86
80
87
consthtml: StatelessCleaning=formatters.html.format(delta,previousDisplay);// formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
81
88
82
-
if(show)formatters.html.showUnchanged();// shows unchanged values if we're on the '/diffRaw' path
89
+
if(show)
90
+
formatters.html.showUnchanged();// shows unchanged values if we're on the '/diffRaw' path
if(previous===undefined||delta===undefined){// if there has been no state changes on the target/hooked application, previous and delta would be undefined.
92
+
93
+
if(previous===undefined||delta===undefined){
94
+
// if there has been no state changes on the target/hooked application, previous and delta would be undefined.
0 commit comments