Skip to content

Commit c9c9c44

Browse files
garrettlchowgarrettlchow
authored
Merge pull request #23 from oslabs-beta/feature/garrett
Feature/garrett
2 parents 36d64a6 + 60abeaa commit c9c9c44

File tree

16 files changed

+296
-318
lines changed

16 files changed

+296
-318
lines changed

‎demo-app-next/next-env.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
/// <reference types="next/image-types/global" />
33

44
// NOTE: This file should not be edited
5-
// see https://nextjs.org/docs/basic-features/typescript for more information.
5+
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

‎demo-app-next/tsconfig.json

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{
22
"compilerOptions": {
3-
"lib": ["dom", "dom.iterable", "esnext"],
3+
"lib": [
4+
"dom",
5+
"dom.iterable",
6+
"esnext"
7+
],
48
"allowJs": true,
59
"skipLibCheck": true,
610
"strict": false,
@@ -12,8 +16,15 @@
1216
"moduleResolution": "node",
1317
"resolveJsonModule": true,
1418
"isolatedModules": true,
15-
"jsx": "preserve"
19+
"jsx": "preserve",
20+
"target": "ES2017"
1621
},
17-
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
18-
"exclude": ["node_modules"]
22+
"include": [
23+
"next-env.d.ts",
24+
"**/*.ts",
25+
"**/*.tsx"
26+
],
27+
"exclude": [
28+
"node_modules"
29+
]
1930
}

‎src/app/FrontendTypes.ts

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -108,12 +108,12 @@ export interface ActionContainerProps {
108108
actionView: boolean;
109109
setActionView: React.Dispatch<React.SetStateAction<boolean>>;
110110
toggleActionContainer: () => void;
111-
snapshots: any
112-
currLocation: any
111+
snapshots: any;
112+
currLocation: any;
113113
}
114114

115115
export interface ProvConContainerProps {
116-
currentSnapshot: any;
116+
currentSnapshot: any;
117117
}
118118

119119
export interface StateContainerProps {
@@ -399,4 +399,22 @@ export interface AxContainer {
399399
};
400400
snapshots: [];
401401
currLocation: object;
402-
}
402+
}
403+
404+
export interface FilteredNode {
405+
name?: string;
406+
state?: any;
407+
hooksState?: any;
408+
props?: any;
409+
componentData?: {
410+
context?: any;
411+
hooksState?: any;
412+
props?: any;
413+
};
414+
children?: FilteredNode[];
415+
context?: any;
416+
}
417+
418+
export interface FilteredNodeChildren {
419+
[key: string]: FilteredNode;
420+
}

‎src/app/components/Actions/DropDown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ const DropDown = ({
1313
};
1414

1515
const options = [
16-
{ value: 'TimeJump', label: 'TimeJump' },
17-
{ value: 'Provider/Consumer', label: 'Provider/Consumer' },
16+
{ value: 'Time Jump', label: 'Time Jump' },
17+
{ value: 'Providers / Consumers', label: 'Providers / Consumers' },
1818
];
1919

2020
return (

‎src/app/components/StateRoute/AxMap/Ax.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -62,14 +62,15 @@ export default function AxTree(props) {
6262
const tooltipStyles: ToolTipStyles = {
6363
...defaultStyles,
6464
minWidth: 60,
65-
maxWidth: 300,
66-
backgroundColor: 'rgb(15,15,15)',
67-
color: 'white',
68-
fontSize: '16px',
65+
maxWidth: 250,
66+
maxHeight: '300px',
6967
lineHeight: '18px',
70-
fontFamily: 'Roboto',
71-
zIndex: 100,
7268
pointerEvents: 'all !important',
69+
margin: 0,
70+
padding: 0,
71+
borderRadius: '8px',
72+
overflowY: 'auto',
73+
overflowX: 'auto',
7374
};
7475

7576
const [orientation, setOrientation] = useState('horizontal');
@@ -148,7 +149,7 @@ export default function AxTree(props) {
148149

149150
return totalWidth < 10 ? null : (
150151
<div>
151-
<div id='axControls'>
152+
<div className='axControls'>
152153
<LinkControls
153154
orientation={orientation}
154155
linkType={linkType}
@@ -402,9 +403,8 @@ export default function AxTree(props) {
402403
}}
403404
>
404405
<div>
405-
<div>
406-
{/*tooltipData['name'].value cannot be referred to using dot notation so using brackets here overrides typescript's strict data typing which was interfering with accessiccing this property */}
407-
<strong>{JSON.stringify(tooltipData['name'].value)}</strong>
406+
<div className='tooltip-header'>
407+
<h3 className='tooltip-title'>{tooltipData['name'].value}</h3>
408408
</div>
409409
<div>
410410
{/* Ax Node Info below names the tooltip title because of how its passed to the ToolTipDataDisplay container*/}

‎src/app/components/StateRoute/AxMap/AxContainer.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,3 @@ const AxContainer = (props: AxContainer) => {
3737
};
3838

3939
export default AxContainer;
40-
41-

‎src/app/components/StateRoute/AxMap/ToolTipDataDisplay.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const ToolTipDataDisplay = ({ containerName, dataObj }) => {
6767
}
6868

6969
return (
70-
<div className='tooltipData' key={`${containerName}-data-container`}>
70+
<div key={`${containerName}-data-container`}>
7171
<JSONTree
7272
data={printableObject} // data to be rendered, a snapshot object
7373
theme={{ extend: colors, tree: () => ({ className: `tooltipData-JSONTree` }) }} // theme set to a base16 theme that has been extended to include "className: 'json-tree'"

‎src/app/components/StateRoute/AxMap/axLinkControls.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const AxLinkControls = ({
4040

4141
{linkType === 'step' && (
4242
<div className='control-group'>
43-
<label className='control-label'>step:</label>
43+
<label className='control-label'>Step:</label>
4444
<input
4545
onClick={(e) => e.stopPropagation()}
4646
type='range'

‎src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -117,26 +117,13 @@ export default function ComponentMap({
117117
...defaultStyles,
118118
minWidth: 60,
119119
maxWidth: 250,
120+
maxHeight: '300px',
120121
lineHeight: '18px',
121122
pointerEvents: 'all !important',
122123
margin: 0,
123124
padding: 0,
124125
borderRadius: '8px',
125-
};
126-
127-
const scrollStyle: {} = {
128-
minWidth: '60',
129-
maxWidth: '250',
130-
minHeight: '20px',
131-
maxHeight: '200px',
132-
overflowY: 'scroll',
133-
overflowWrap: 'break-word',
134-
};
135-
136-
const formatRenderTime: string = (time: number): string => {
137-
if (!time) return 'No time information';
138-
const renderTime = time.toFixed(3);
139-
return `${renderTime} ms `;
126+
overflowY: 'auto',
140127
};
141128

142129
const nodeList: [] = []; // create a nodeList array to store our nodes as a flat array
@@ -477,6 +464,7 @@ export default function ComponentMap({
477464

478465
return (
479466
<Group top={top} left={left} key={key} className='rect'>
467+
// Replace the root node rect rendering block with this:
480468
{node.depth === 0 && (
481469
<rect
482470
className='compMapRoot'
@@ -489,9 +477,26 @@ export default function ComponentMap({
489477
dispatch(toggleExpanded(node.data));
490478
hideTooltip();
491479
}}
480+
onMouseEnter={(event) => {
481+
if (hasDisplayableData(node.data)) {
482+
if (toolTipTimeoutID.current !== null) {
483+
clearTimeout(toolTipTimeoutID.current);
484+
hideTooltip();
485+
}
486+
toolTipTimeoutID.current = null;
487+
handleMouseAndClickOver(event, node.data);
488+
}
489+
}}
490+
onMouseLeave={() => {
491+
if (hasDisplayableData(node.data)) {
492+
toolTipTimeoutID.current = setTimeout(() => {
493+
hideTooltip();
494+
toolTipTimeoutID.current = null;
495+
}, 300);
496+
}
497+
}}
492498
/>
493499
)}
494-
495500
{/* This creates the rectangle boxes for each component
496501
and sets it relative position to other parent nodes of the same level. */}
497502
{node.depth !== 0 && (
@@ -526,7 +531,6 @@ export default function ComponentMap({
526531
}}
527532
/>
528533
)}
529-
530534
{/* Display text inside of each component node */}
531535
<text
532536
className={

‎src/app/components/StateRoute/ComponentMap/ToolTipDataDisplay.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,9 @@ const ToolTipDataDisplay = ({ data }) => {
7070
if (isReducer && parsedContent) {
7171
// Only try to format if we have valid content
7272
const formattedData = formatReducerData(parsedContent);
73-
console.log('formatted data', formattedData);
7473

7574
// Check if we have any formatted data to display
7675
if (Object.keys(formattedData).length === 0) {
77-
console.log('formatted data length', Object.keys(formattedData).length);
7876
return null;
7977
}
8078

0 commit comments

Comments
 (0)