Skip to content

Commit b56f606

Browse files
rxlinarxlina
authored
Merge pull request #10 from oslabs-beta/fixProps
Fix props
2 parents f503123 + bdc5006 commit b56f606

File tree

13 files changed

+685
-103
lines changed

13 files changed

+685
-103
lines changed

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
"Abaas Khorrami",
4141
"Ali Rahman",
4242
"Andy Wong",
43+
"Andy Tsou",
4344
"Bryan Lee",
4445
"Becca Viner",
4546
"Caitlin Chan",
@@ -51,6 +52,7 @@
5152
"Dennis Lopez",
5253
"Edwin Menendez",
5354
"Ergi Shehu",
55+
"Freya Wu",
5456
"Gabriela Jardim Aquino",
5557
"Gregory Panciera",
5658
"Haejin Jo",
@@ -61,6 +63,7 @@
6163
"Kevin Fey",
6264
"Kevin Ngo",
6365
"Kim Mai Nguyen",
66+
"Lina Shin",
6467
"Nathanael Wa Mwenze",
6568
"Prasanna Malla",
6669
"Rajeeb Banstola",
@@ -70,6 +73,7 @@
7073
"Ryan Dang",
7174
"Sierra Swaby",
7275
"Tania Lind",
76+
"Viet Nguyen",
7377
"Yujin Kang"
7478
],
7579
"license": "ISC",

‎src/app/components/ComponentMap.tsx

Lines changed: 129 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
/* eslint-disable jsx-a11y/no-static-element-interactions */
2+
/* eslint-disable no-restricted-syntax */
3+
/* eslint-disable guard-for-in */
14
// @ts-nocheck
2-
import React, { useState } from 'react';
5+
import React, { useState, useEffect } from 'react';
36
import { Group } from '@visx/group';
47
import { hierarchy, Tree } from '@visx/hierarchy';
58
import { LinearGradient } from '@visx/gradient';
@@ -11,12 +14,16 @@ import {
1114
TooltipWithBounds,
1215
defaultStyles,
1316
} from '@visx/tooltip';
17+
import { isAbsolute } from 'path';
18+
import { nest } from 'jscharting';
1419
import useForceUpdate from './useForceUpdate';
1520
import LinkControls from './LinkControls';
1621
import getLinkComponent from './getLinkComponent';
1722
import { onHover, onHoverExit } from '../actions/actions';
1823
import { useStoreContext } from '../store';
1924

25+
const exclude = ['childExpirationTime', 'staticContext', '_debugSource', 'actualDuration', 'actualStartTime', 'treeBaseDuration', '_debugID', '_debugIsCurrentlyTiming', 'selfBaseDuration', 'expirationTime', 'effectTag', 'alternate', '_owner', '_store', 'get key', 'ref', '_self', '_source', 'firstBaseUpdate', 'updateQueue', 'lastBaseUpdate', 'shared', 'responders', 'pending', 'lanes', 'childLanes', 'effects', 'memoizedState', 'pendingProps', 'lastEffect', 'firstEffect', 'tag', 'baseState', 'baseQueue', 'dependencies', 'Consumer', 'context', '_currentRenderer', '_currentRenderer2', 'mode', 'flags', 'nextEffect', 'sibling', 'create', 'deps', 'next', 'destroy', 'parentSub', 'child', 'key', 'return', 'children', '$$typeof', '_threadCount', '_calculateChangedBits', '_currentValue', '_currentValue2', 'Provider', '_context', 'stateNode', 'elementType', 'type'];
26+
2027
// const root = hierarchy({
2128
// name: 'root',
2229
// children: [
@@ -128,12 +135,13 @@ export default function ComponentMap({
128135
lineHeight: '18px',
129136
fontFamily: 'Roboto',
130137
zIndex: 100,
138+
'pointer-events': 'all !important',
131139
};
132140

133141
const scrollStyle = {
134142
minWidth: '60',
135143
maxWidth: '300',
136-
maxHeight: '100px',
144+
maxHeight: '200px',
137145
overflowY: 'scroll',
138146
overflowWrap: 'break-word',
139147
};
@@ -143,53 +151,117 @@ export default function ComponentMap({
143151
return `${time} ms `;
144152
};
145153

146-
//places all nodes into a flat array
154+
// places all nodes into a flat array
147155
const nodeList = [];
148156

157+
// if (exclude.includes(key) === true) {
158+
// nestedObj[key] = 'react related';
159+
// }
160+
// if (typeof data[key] === 'object' && exclude.includes(key) !== true) {
161+
// nestedObj = makePropsPretty(data[key]);
162+
// if (Array.isArray(nestedObj)) {
163+
// try {
164+
// if (nestedObj[0].$$typeof) {
165+
// nestedObj = null;
166+
// } else {
167+
// nestedObj = nestedObj.forEach(e => makePropsPretty(e));
168+
// }
169+
// } catch (error) {
170+
// console.log('not a react componenet');
171+
// }
172+
// }
173+
// }
174+
// const makePropsPretty = data => {
175+
// const propsFormat = [];
176+
// let nestedObj;
177+
// for (const key in data) {
178+
// if (data[key] !== 'reactFiber' && typeof data[key] !== 'object' && exclude.includes(key) !== true) {
179+
// propsFormat.push(<p className="stateprops">
180+
// {`${key}: ${nestedObj || data[key]}`}
181+
// </p>);
182+
// } else if (typeof data[key] === 'object' && exclude.includes(key) !== true) {
183+
// nestedObj = makePropsPretty(data[key]);
184+
// try {
185+
// if (nestedObj[0].$$typeof) {
186+
// // nestedObj = nestedObj.forEach(e => makePropsPretty(e.props.children));
187+
// nestedObj = nestedObj.forEach(e => {
188+
// console.log('this is e show the object', e);
189+
// if (typeof e.props.children === 'object') {
190+
// console.log('nested obj show me ', typeof e.props.children, e.props.children);
191+
// return e.props.children;
192+
// }
193+
// console.log('not an object in nestedobj', typeof e.props.children, e.props.children);
194+
// return e.props.children;
195+
// });
196+
// console.log('show me show show show show show show show', nestedObj);
197+
// // console.log('show me the nestedobj after the react thing', nestedObj)
198+
// } else {
199+
// nestedObj = nestedObj.forEach(e =>{
200+
// console.log('this is not a react thing so show me', e)
201+
// makePropsPretty(e)
202+
// });
203+
// }
204+
// } catch (error) {
205+
// console.log(error);
206+
// }
207+
// }
208+
// if (nestedObj) {
209+
// propsFormat.push(nestedObj);
210+
// }
211+
// }
212+
// return propsFormat;
213+
// };
214+
149215
const makePropsPretty = data => {
150216
const propsFormat = [];
217+
const nestedObj = [];
218+
// console.log('show me the data we are getting', data);
151219
for (const key in data) {
152-
console.log('this is the key', key);
153-
if (typeof data[key] === 'object') {
154-
const nestedObj = makePropsPretty(data[key]);
220+
if (data[key] !== 'reactFiber' && typeof data[key] !== 'object' && exclude.includes(key) !== true) {
221+
propsFormat.push(<p className="stateprops">
222+
{`${key}: ${data[key]}`}
223+
</p>);
224+
} else if (data[key] !== 'reactFiber' && typeof data[key] === 'object' && exclude.includes(key) !== true) {
225+
const result = makePropsPretty(data[key]);
226+
nestedObj.push(result);
155227
}
156-
propsFormat.push(<p>
157-
{`${JSON.stringify(key)}: ${JSON.stringify(nestedObj || data[key])}`}
158-
</p>);
159228
}
160-
console.log('this is propsFormat', propsFormat);
229+
if (nestedObj) {
230+
propsFormat.push(nestedObj);
231+
}
232+
// console.log('this is propsformat', propsFormat);
161233
return propsFormat;
162234
};
163235

164-
const collectNodes = (node) => {
236+
const collectNodes = node => {
165237
nodeList.splice(0, nodeList.length);
166-
console.log("Root node:", node);
238+
// console.log('Root node:', node);
167239
nodeList.push(node);
168240
for (let i = 0; i < nodeList.length; i++) {
169241
const cur = nodeList[i];
170242
if (cur.children && cur.children.length > 0) {
171-
for (let child of cur.children) {
243+
for (const child of cur.children) {
172244
nodeList.push(child);
173245
}
174246
}
175247
}
176-
console.log('NODELIST in ComponentMap: ', nodeList);
177-
}
248+
// console.log('NODELIST in ComponentMap: ', nodeList);
249+
};
178250
collectNodes(snapshots[lastNode]);
179251

180-
//find the node that has been selected and use it as the root
252+
// find the node that has been selected and use it as the root
181253
const startNode = null;
182254
const findSelectedNode = () => {
183-
console.log(selectedNode);
184-
for (let node of nodeList) {
255+
// console.log(selectedNode);
256+
for (const node of nodeList) {
185257
if (node.name === selectedNode) {
186258
startNode = node;
187259
}
188260
}
189-
}
261+
};
190262
findSelectedNode();
191263

192-
// controls for the map
264+
// controls for the map
193265
const LinkComponent = getLinkComponent({ layout, linkType, orientation });
194266
return totalWidth < 10 ? null : (
195267
<div>
@@ -255,7 +327,7 @@ export default function ComponentMap({
255327
}
256328

257329
// mousing controls & Tooltip display logic
258-
const handleMouseOver = event => {
330+
const handleMouseAndClickOver = event => {
259331
() => dispatch(onHover(node.data.rtid));
260332
console.log('line 197 event.target', event.target.ownerSVGElement);
261333
console.log('line 199 This is DATA: ', data);
@@ -276,7 +348,7 @@ export default function ComponentMap({
276348
};
277349

278350
return (
279-
<Group top={top} left={left} key={key}>
351+
<Group top={top} left={left} key={key} className="rect">
280352
{node.depth === 0 && (
281353
<circle
282354
r={12}
@@ -287,17 +359,17 @@ export default function ComponentMap({
287359
forceUpdate();
288360
}}
289361
/>
290-
)}
362+
)}
291363
{/* This creates the rectangle boxes for each component and sets it relative position to other parent nodes of the same level. */}
292364
{node.depth !== 0 && (
293365
<rect
294366
height={height}
295367
width={width}
296368
y={-height / 2}
297369
x={-width / 2}
298-
//node.children = if node has children
370+
// node.children = if node has children
299371
fill={node.children ? '#161521' : '#62d6fb'}
300-
//node.data.isExpanded = if node is collapsed
372+
// node.data.isExpanded = if node is collapsed
301373
// stroke={(node.data.isExpanded && node.child) ? '#95fb62' : '#a69ff5'} => node.child is gone when clicked, even if it actually has children. Maybe better call node.children => node.leaf
302374
stroke={(node.data.isExpanded && node.data.children.length > 0) ? '#95fb62' : '#a69ff5'}
303375

@@ -308,42 +380,48 @@ export default function ComponentMap({
308380
rx={node.children ? 4 : 10}
309381
onDoubleClick={() => {
310382
node.data.isExpanded = !node.data.isExpanded;
383+
hideTooltip();
384+
setTooltip(false);
311385
forceUpdate();
312386
}}
313387
// Tooltip event handlers
314388
// test feature
315-
// onClick = {handleMouseOver}
389+
// onClick = {handleMouseAndClickOver}
316390
onClick={event => {
317-
if (tooltip) { // cohort 45
318-
hideTooltip();
319-
setTooltip(false);
320-
} else {
321-
handleMouseOver(event);
391+
if (!tooltip) {
392+
handleMouseAndClickOver(event);
322393
setTooltip(true);
323394
}
395+
// if (tooltip) { // cohort 45
396+
// hideTooltip();
397+
// setTooltip(false);
398+
// } else {
399+
// handleMouseAndClickOver(event);
400+
// setTooltip(true);
401+
// }
324402
}}
325403
onMouseEnter={() => dispatch(onHover(node.data.rtid))} // fix this not working
326404
onMouseLeave={() => dispatch(onHoverExit(node.data.rtid))}
327405
/>
328-
)}
406+
)}
329407
{/* Display text inside of each component node */}
330408
<text
331-
dy=".33em"
332-
fontSize={10}
333-
fontFamily="Roboto"
334-
textAnchor="middle"
335-
style={{ pointerEvents: 'none' }}
336-
fill={
409+
dy=".33em"
410+
fontSize={10}
411+
fontFamily="Roboto"
412+
textAnchor="middle"
413+
style={{ pointerEvents: 'none' }}
414+
fill={
337415
node.depth === 0
338416
? '#161521'
339417
: node.children
340418
? 'white'
341419
: '#161521'
342420
}
343-
z
344-
>
345-
{node.data.name}
346-
</text>
421+
z
422+
>
423+
{node.data.name}
424+
</text>
347425
</Group>
348426
);
349427
})}
@@ -361,7 +439,11 @@ export default function ComponentMap({
361439
style={tooltipStyles}
362440
onClick={hideTooltip}
363441
>
364-
<div>
442+
<div onClick={() => {
443+
setTooltip(false);
444+
hideTooltip();
445+
}}
446+
>
365447
<div style={{}}>
366448
{' '}
367449
<strong>{tooltipData.name}</strong>
@@ -379,14 +461,13 @@ export default function ComponentMap({
379461
{tooltipData.state}
380462
</div>
381463
<div style={scrollStyle}>
382-
Props:
383-
{makePropsPretty(tooltipData.componentData.props)}
384-
{/* {JSON.stringify(tooltipData.componentData.props)} */}
464+
<div className="props">
465+
Props:
466+
{makePropsPretty(tooltipData.componentData.props)}
467+
</div>
385468
</div>
386469
</div>
387470
</TooltipInPortal>
388-
389-
390471
)}
391472
</div>
392473
);

‎src/app/components/LinkControls.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ type Props = {
3333
const nodeList = [];
3434

3535
const collectNodes = (node) => {
36-
console.log("This is the root node", node);
36+
// console.log("This is the root node", node);
3737
nodeList.splice(0, nodeList.length); { /* We used the .splice method here to ensure that nodeList did not accumulate with page refreshes */ }
3838
nodeList.push(node);
3939
for (let i = 0; i < nodeList.length; i++) {
@@ -44,7 +44,7 @@ const collectNodes = (node) => {
4444
}
4545
}
4646
}
47-
console.log('NODELIST looks like: ', nodeList);
47+
// console.log('NODELIST looks like: ', nodeList);
4848
}
4949

5050
export default function LinkControls({

‎src/app/components/PerformanceVisx.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,12 @@ const traverse = (snapshot, data, currTotalRender = 0) => {
6161
}
6262
// increment render frequencies
6363
if (renderTime > 0) {
64+
console.log('what is the child', child);
65+
console.log('por que?', data.componentData[componentName]);
6466
data.componentData[componentName].renderFrequency++;
67+
} else {
68+
console.log('what is the child', child);
69+
console.log('we dont increment here', data.componentData[componentName], 'and the child', child);
6570
}
6671

6772
// add to total render time
@@ -108,6 +113,7 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
108113
componentData: {},
109114
maxTotalRender: 0,
110115
};
116+
console.log('show me all of the snapshots', snapshots);
111117
snapshots.forEach((snapshot, i) => {
112118
perfData.barStack.push({ snapshotId: snapshotsIds[i] });
113119
traverse(snapshot, perfData);

‎src/app/containers/MainContainer.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,13 @@ function MainContainer(): any {
6262
dispatch(setTab(sourceTab));
6363
// set state with the information received from the background script
6464
dispatch(addNewSnapshots(payload));
65+
console.log('this is the payload and this is the sendSnapshorts', sourceTab, payload);
6566
break;
6667
}
6768
case 'initialConnectSnapshots': {
6869
dispatch(setTab(maxTab));
6970
dispatch(initialConnect(payload));
71+
console.log('this is the initial connect and settab', maxTab, payload);
7072
break;
7173
}
7274
default:

0 commit comments

Comments
 (0)