|
1 | | -/* eslint-disable react/require-default-props */ |
2 | | -/* eslint-disable @typescript-eslint/no-explicit-any */ |
3 | | -/* eslint-disable react/no-unused-prop-types */ |
4 | | - |
5 | 1 | import React from 'react'; |
6 | 2 | import ReactHover, { Trigger, Hover } from 'react-hover'; |
7 | 3 | import { changeView, changeSlider } from '../../slices/mainSlice'; |
8 | 4 | import { ActionProps, OptionsCursorTrueWithMargin } from '../../FrontendTypes'; |
9 | 5 | import { useDispatch } from 'react-redux'; |
10 | 6 |
|
11 | | -/* |
12 | | - This renders the individual snapshot components on the left side column |
13 | | -*/ |
14 | | - |
15 | | -/** |
16 | | - * @function Action |
17 | | - * @param selected : The selected action in the array of state changes |
18 | | - * @param displayName : Label showing sequence number of state change, reflects changes in Chart.tsx |
19 | | - * @param componentName : Displays the name of compenent's state being changed |
20 | | - * @param last : The last index in the array |
21 | | - * @param sliderIndex: Index of the slider in the array of state changes |
22 | | - * (clicking the block changes the slider, related to MainSlider.tsx slider) |
23 | | - * @param componentData: Displays react fiber data |
24 | | - * @param viewIndex: Index of the tab in the array when timejump is made |
25 | | - * @method dispatch Executes actions that changes state in reactime |
26 | | - * @method handleOnkeyDown Executes key commands |
27 | | - * |
28 | | - */ |
29 | | - |
30 | 7 | const Action = (props: ActionProps): JSX.Element => { |
31 | | - //here we are adding useSelector and useDispatch for RTK state conversion |
32 | 8 | const dispatch = useDispatch(); |
33 | 9 |
|
34 | | - // We destructure the 'props' that were passed into this component |
35 | 10 | const { |
36 | | - selected, // boolean on whether the current index is the same as the viewIndex in 'ActionContainer' |
37 | | - 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) in 'ActionContainer' |
38 | | - index, // from snapshot.index in "ActionContainer's" 'hierarchyArr' |
39 | | - sliderIndex, // from tabs[currentTab] object in 'ActionContainer' |
40 | | - displayName, // from snapshot.displayName in "ActionContainer's" 'hierarchyArr' |
41 | | - componentData, // from snapshot.componentData in "ActionContainer's" 'hierarchyArr' |
42 | | - viewIndex, // from tabs[currentTab] object in 'ActionContainer' |
| 11 | + selected, |
| 12 | + last, |
| 13 | + index, |
| 14 | + sliderIndex, |
| 15 | + displayName, |
| 16 | + componentData, |
| 17 | + viewIndex, |
43 | 18 | isCurrIndex, |
44 | | - handleOnkeyDown, // function that allows arrows keys to jump between snapshots defined in 'ActionContainer.tsx' |
| 19 | + handleOnkeyDown, |
45 | 20 | } = props; |
46 | 21 |
|
47 | | - /** |
48 | | - * @function cleanTime: Displays render times for state changes |
49 | | - * @returns render display time in seconds in milliseconds |
50 | | - */ |
51 | | - |
52 | 22 | const cleanTime = (): string => { |
53 | 23 | if (!componentData || !componentData.actualDuration) { |
54 | | - // if there is no 'componentData' or 'componentData.actualDuration' |
55 | 24 | return 'NO TIME'; |
56 | 25 | } |
57 | 26 |
|
58 | | - let seconds: number | string; // seconds is undefined but can take a number or a string |
59 | | - let milliseconds: any = componentData.actualDuration; // milliseconds is of any type and taken from the 'componentData.actualDuration' |
| 27 | + let seconds: number | string; |
| 28 | + let milliseconds: any = componentData.actualDuration; |
60 | 29 |
|
61 | 30 | if (Math.floor(componentData.actualDuration) > 60) { |
62 | | - // if the milliseconds is greater than 60 |
63 | | - seconds = Math.floor(componentData.actualDuration / 60); // we divide our milliseconds by 60 to determine our seconds |
64 | | - seconds = JSON.stringify(seconds); // and we convert our seconds into a string |
| 31 | + seconds = Math.floor(componentData.actualDuration / 60); |
| 32 | + seconds = JSON.stringify(seconds); |
65 | 33 |
|
66 | 34 | if (seconds.length < 2) { |
67 | | - // if the seconds string is only a single digit |
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"' |
| 35 | + seconds = '0'.concat(seconds); |
69 | 36 | } |
70 | | - milliseconds = Math.floor(componentData.actualDuration % 60); // Our true milliseconds then becomes the remainder of dividing our initial milliseconds by 60 |
| 37 | + milliseconds = Math.floor(componentData.actualDuration % 60); |
71 | 38 | } else { |
72 | | - seconds = '00'; // if we haven't even reached one second yet, our seconds are 00 |
| 39 | + seconds = '00'; |
73 | 40 | } |
74 | 41 |
|
75 | | - milliseconds = Number.parseFloat(milliseconds as string).toFixed(2); // we convert our milliseconds string into a floating point number that has up to two decimal places. |
76 | | - const arrayMilliseconds: [string, number] = milliseconds.split('.'); // we split our milliseconds using the decimal and come out with an array of two numbers |
| 42 | + milliseconds = Number.parseFloat(milliseconds as string).toFixed(2); |
| 43 | + const arrayMilliseconds: [string, number] = milliseconds.split('.'); |
77 | 44 |
|
78 | 45 | if (arrayMilliseconds[0].length < 2) { |
79 | | - // if our millisecond string only has one digit |
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' |
| 46 | + arrayMilliseconds[0] = '0'.concat(arrayMilliseconds[0]); |
81 | 47 | } |
82 | 48 |
|
83 | 49 | if (index === 0) { |
84 | | - // if this is the initial snapshot |
85 | | - return `${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`; // we give it a timestamp |
| 50 | + return `${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`; |
86 | 51 | } |
87 | | - return `+${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`; // if these are succeeding snapshots, we add a '+' to the timestamp |
| 52 | + return `+${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`; |
88 | 53 | }; |
89 | 54 |
|
90 | | - const displayTime: string = cleanTime(); // we run cleanTime on the creation of this component so that we can get the timestamp |
| 55 | + const displayTime: string = cleanTime(); |
91 | 56 |
|
92 | | - // creates an options object that 'ReactHover' component will use to modify it's behaviour |
93 | 57 | const optionsCursorTrueWithMargin: OptionsCursorTrueWithMargin = { |
94 | 58 | followCursor: true, |
95 | 59 | shiftX: 20, |
@@ -123,9 +87,15 @@ const Action = (props: ActionProps): JSX.Element => { |
123 | 87 | placeholder={`Snapshot: ${displayName}`} |
124 | 88 | /> |
125 | 89 | </div> |
126 | | - <button className='time-button' type='button'> |
127 | | - {displayTime} |
128 | | - </button> |
| 90 | + {isCurrIndex ? ( |
| 91 | + <button className='current-snap' type='button'> |
| 92 | + {`Snapshot: ${displayName}`} |
| 93 | + </button> |
| 94 | + ) : ( |
| 95 | + <button className='time-button' type='button'> |
| 96 | + {displayTime} |
| 97 | + </button> |
| 98 | + )} |
129 | 99 | {isCurrIndex ? ( |
130 | 100 | <button className='current-location' type='button'> |
131 | 101 | Current |
|
0 commit comments