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
// We destructure the 'props' that were passed into this component
31
31
const{
32
-
selected,
33
-
last,
34
-
index,
35
-
sliderIndex,
32
+
selected,// boolean on whether the current index is the same as the viewIndex from 'ActionContainer'
33
+
last,// boolean on (whether the view index is less than 0) AND if (the index is the same as the last snapshot's index value in hierarchyArr) from 'ActionContainer'
34
+
index,// from snapshot.index in "ActionContainer's" 'hierarchyArr'
35
+
sliderIndex,// from tabs[currentTab] object from 'ActionContainer'
36
36
dispatch,
37
-
displayName,
38
-
componentData,
39
-
viewIndex,
37
+
displayName,// from snapshot.displayName in "ActionContainer's" 'hierarchyArr'
38
+
componentData,// from snapshot.componentData in "ActionContainer's" 'hierarchyArr'
39
+
viewIndex,// from tabs[currentTab] object from 'ActionContainer'
40
40
isCurrIndex,
41
-
handleOnkeyDown,
41
+
handleOnkeyDown,// function that allows arrows keys to jump between snapshots defined in 'ActionContainer.tsx'
letseconds: number|string;// seconds is undefined but can take a number or a string
56
+
letmilliseconds: any=componentData.actualDuration;// milliseconds is of any type and taken from the 'componentData.actualDuration'
57
+
58
+
if(Math.floor(componentData.actualDuration)>60){// if the milliseconds is greater than 60
59
+
seconds=Math.floor(componentData.actualDuration/60);// we divide our milliseconds by 60 to determine our seconds
60
+
seconds=JSON.stringify(seconds);// and we convert our seconds into a string
61
+
62
+
if(seconds.length<2){// if the seconds string is only a single digit
63
+
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"'
64
+
}
65
+
milliseconds=Math.floor(componentData.actualDuration%60);// Our true milliseconds then becomes the remainder of dividing our initial milliseconds by 60
66
+
74
67
}else{
75
-
// if we haven't even reached one second yet, our seconds are 00
76
-
seconds='00';
68
+
seconds='00';// if we haven't even reached one second yet, our seconds are 00
77
69
}
78
70
79
-
// we convert our milliseconds string into a floating point number that has up to two decimal places.
milliseconds=Number.parseFloat(millisecondsasstring).toFixed(2);// we convert our milliseconds string into a floating point number that has up to two decimal places.
72
+
constarrayMilliseconds: string|number=milliseconds.split('.');// we split our milliseconds using the decimal and come out with an array of two numbers
81
73
82
-
// we split our milliseconds using the decimal and come out with an array of two numbers
Copy file name to clipboardExpand all lines: src/app/components/App.tsx
+7-6Lines changed: 7 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -6,13 +6,14 @@ import mainReducer from '../reducers/mainReducer.js';
6
6
import{InitialStateProps}from'../FrontendTypes';
7
7
import{ThemeProvider}from'@mui/material/styles';
8
8
importthemefrom'./theme';
9
-
// currentTab is the current active tab within Google Chrome.
10
-
// This is used to decide what tab Reactime should be monitoring. This can be "locked"
11
-
// currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).
12
-
// This is used to determine the proper tutorial to render when How To button is pressed.
13
9
14
-
// we initialize what our initialState is here
15
-
constinitialState: InitialStateProps={
10
+
/*
11
+
'currentTab' is the current active tab within Google Chrome.
12
+
This is used to decide what tab Reactime should be monitoring. This can be "locked" currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).
13
+
This is used to determine the proper tutorial to render when How To button is pressed.
14
+
*/
15
+
16
+
constinitialState: InitialStateProps={// we initialize what our initialState is here
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.
26
+
previous=snapshots[viewIndex-1];// set previous to the snapshot that is before the one we are currently viewing
24
27
}else{
25
-
previous=snapshots[sliderIndex-1];
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.
26
29
}
30
+
31
+
/*
32
+
State snapshot objects have the following structure:
if(newObj.stateSnaphot){// if our new object has a stateSnaphot property
58
+
newObj.stateSnaphot=statelessCleaning(obj.stateSnaphot);// run statelessCleaning on the stateSnapshot
42
59
}
43
-
if(newObj.children){
60
+
61
+
if(newObj.children){// if our new object has a children property
44
62
newObj.children=[];
45
-
if(obj.children.length>0){
63
+
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.
constpreviousDisplay: StatelessCleaning=statelessCleaning(previous);// displays stateful data from the first snapshot that was taken before our current snapshot.
78
+
79
+
constdelta: StatelessCleaning=diff(previousDisplay,snapshot);// diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
80
+
81
+
consthtml: StatelessCleaning=formatters.html.format(delta,previousDisplay);// formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
82
+
83
+
if(show)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.
70
87
return(
71
88
<divclassName='no-data-message'>
72
89
{' '}
@@ -75,7 +92,7 @@ function Diff(props: DiffProps): JSX.Element {
75
92
</div>
76
93
);
77
94
}
78
-
return<div>{ReactHtmlParser(html)}</div>;
95
+
return<div>{ReactHtmlParser(html)}</div>;// ReactHTMLParser from 'react-html-parser' package converts the HTML string into a react component.
Copy file name to clipboardExpand all lines: src/app/components/DiffRoute.tsx
+6-1Lines changed: 6 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -3,9 +3,14 @@ import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom
3
3
importDifffrom'./Diff';
4
4
import{DiffRouteProps}from'../FrontendTypes';
5
5
6
+
/*
7
+
Loads the appropriate DiffRoute view and renders the 'Tree' and 'Raw' navbar buttons after clicking on the 'Diff' button located near the top rightmost corner.
8
+
*/
9
+
10
+
// 'DiffRoute' only passed in prop is 'snapshot' from 'tabs[currentTab]' object in 'MainContainer'
0 commit comments