Skip to content

Commit f79cf68

Browse files
andytsou19andytsou19
committed
seeing what happens
1 parent 1563b1a commit f79cf68

File tree

7 files changed

+80
-41
lines changed

7 files changed

+80
-41
lines changed

‎src/app/components/ComponentMap.tsx

Lines changed: 40 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* eslint-disable no-restricted-syntax */
2+
/* eslint-disable guard-for-in */
13
// @ts-nocheck
24
import React, { useState } from 'react';
35
import { Group } from '@visx/group';
@@ -11,12 +13,16 @@ import {
1113
TooltipWithBounds,
1214
defaultStyles,
1315
} from '@visx/tooltip';
16+
import { isAbsolute } from 'path';
17+
import { nest } from 'jscharting';
1418
import useForceUpdate from './useForceUpdate';
1519
import LinkControls from './LinkControls';
1620
import getLinkComponent from './getLinkComponent';
1721
import { onHover, onHoverExit } from '../actions/actions';
1822
import { useStoreContext } from '../store';
1923

24+
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'];
25+
2026
// const root = hierarchy({
2127
// name: 'root',
2228
// children: [
@@ -128,12 +134,13 @@ export default function ComponentMap({
128134
lineHeight: '18px',
129135
fontFamily: 'Roboto',
130136
zIndex: 100,
137+
'pointer-events': 'all !important',
131138
};
132139

133140
const scrollStyle = {
134141
minWidth: '60',
135142
maxWidth: '300',
136-
maxHeight: '100px',
143+
maxHeight: '200px',
137144
overflowY: 'scroll',
138145
overflowWrap: 'break-word',
139146
};
@@ -143,50 +150,63 @@ export default function ComponentMap({
143150
return `${time} ms `;
144151
};
145152

146-
//places all nodes into a flat array
153+
// places all nodes into a flat array
147154
const nodeList = [];
148155

149156
const makePropsPretty = data => {
150157
const propsFormat = [];
158+
let nestedObj;
151159
for (const key in data) {
152160
console.log('this is the key', key);
153-
if (typeof data[key] === 'object') {
154-
const nestedObj = makePropsPretty(data[key]);
161+
if (typeof data[key] === 'object' && exclude.includes(key) !== true) {
162+
nestedObj = makePropsPretty(data[key]);
163+
if (Array.isArray(nestedObj)) {
164+
try {
165+
if (nestedObj[0].$$typeof) {
166+
nestedObj = null;
167+
} else {
168+
nestedObj = nestedObj.forEach(e => makePropsPretty(e));
169+
}
170+
} catch (error) {
171+
console.log('not a react componenet');
172+
}
173+
}
155174
}
175+
console.log('testing what data is received', 'this is nested ob', nestedObj, 'this is datakey', key, data[key]);
156176
propsFormat.push(<p>
157-
{`${JSON.stringify(key)}: ${JSON.stringify(nestedObj || data[key])}`}
158-
</p>);
177+
{`${key}: ${JSON.stringify(nestedObj || data[key])}`}
178+
</p>);
159179
}
160180
console.log('this is propsFormat', propsFormat);
161181
return propsFormat;
162182
};
163183

164-
const collectNodes = (node) => {
184+
const collectNodes = node => {
165185
nodeList.splice(0, nodeList.length);
166-
console.log("Root node:", node);
186+
console.log('Root node:', node);
167187
nodeList.push(node);
168188
for (let i = 0; i < nodeList.length; i++) {
169189
const cur = nodeList[i];
170190
if (cur.children && cur.children.length > 0) {
171-
for (let child of cur.children) {
191+
for (const child of cur.children) {
172192
nodeList.push(child);
173193
}
174194
}
175195
}
176196
console.log('NODELIST in ComponentMap: ', nodeList);
177-
}
197+
};
178198
collectNodes(snapshots[lastNode]);
179199

180-
//find the node that has been selected and use it as the root
200+
// find the node that has been selected and use it as the root
181201
const startNode = null;
182202
const findSelectedNode = () => {
183203
console.log(selectedNode);
184-
for (let node of nodeList) {
204+
for (const node of nodeList) {
185205
if (node.name === selectedNode) {
186206
startNode = node;
187207
}
188208
}
189-
}
209+
};
190210
findSelectedNode();
191211

192212
// controls for the map
@@ -295,9 +315,9 @@ export default function ComponentMap({
295315
width={width}
296316
y={-height / 2}
297317
x={-width / 2}
298-
//node.children = if node has children
318+
// node.children = if node has children
299319
fill={node.children ? '#161521' : '#62d6fb'}
300-
//node.data.isExpanded = if node is collapsed
320+
// node.data.isExpanded = if node is collapsed
301321
// 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
302322
stroke={(node.data.isExpanded && node.data.children.length > 0) ? '#95fb62' : '#a69ff5'}
303323

@@ -379,14 +399,15 @@ export default function ComponentMap({
379399
{tooltipData.state}
380400
</div>
381401
<div style={scrollStyle}>
382-
Props:
383-
{makePropsPretty(tooltipData.componentData.props)}
384-
{/* {JSON.stringify(tooltipData.componentData.props)} */}
402+
<div className="props">
403+
Props:
404+
{makePropsPretty(tooltipData.componentData.props)}
405+
{/* {JSON.stringify(tooltipData.componentData.props)} */}
406+
</div>
385407
</div>
386408
</div>
387409
</TooltipInPortal>
388410

389-
390411
)}
391412
</div>
392413
);

‎src/app/styles/main.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@
2525
background: rgb(97, 97, 97);
2626
}
2727

28+
// fixing the tooltip display for overflow scrolling
29+
2830
// 1. Configuration and helpers
2931
@import 'abstracts/variables';
3032

@@ -49,3 +51,16 @@
4951

5052
// diff component
5153
@import './components/diff';
54+
55+
.visx-tooltip{
56+
overflow-y: scroll;
57+
overflow-wrap: break-word;
58+
pointer-events:all !important;
59+
}
60+
.props{
61+
line-height: 1;
62+
height:100%;
63+
}
64+
.props p{
65+
line-height:1;
66+
}

‎src/backend/__tests__/index.html

100755100644
File mode changed.

‎src/backend/linkFiber.ts

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* eslint-disable guard-for-in */
2+
/* eslint-disable no-restricted-syntax */
13
/* eslint-disable @typescript-eslint/no-explicit-any */
24
/* eslint-disable max-len */
35
// import 'core-js';
@@ -207,20 +209,20 @@ function traverseHooks(memoizedState: any): HookStates {
207209
// This runs after every Fiber commit. It creates a new snapshot
208210
let atomsSelectors = {};
209211
let atomsComponents = {};
210-
211-
function convertFunctionToString(obj: {}) {
212-
const newPropData = {};
212+
const exclude = ['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'];
213+
function convertFunctionToString(newObj, oldObj) {
214+
const newPropData = oldObj || {};
213215
// const newPropData = Array.isArray(obj) === true ? {} : [];
214-
for (const key in obj) {
215-
if (typeof obj[key] === 'function') {
216+
for (const key in newObj) {
217+
if (typeof newObj[key] === 'function') {
216218
newPropData[key] = 'function';
217219
// console.log('we changed the function', newPropData[key]);
218-
} else if (typeof obj[key] === 'object') {
219-
// console.log('this is going to enter a recursive call', obj[key]);
220-
// convertFunctionToString(obj[key]);
221-
newPropData[key] = JSON.stringify(obj[key]);
222-
} else {
223-
newPropData[key] = obj[key];
220+
} else if (typeof newObj[key] === 'object' && exclude.includes(key) !== true) {
221+
console.log('in the recursive call', key, newObj[key], key);
222+
newPropData[key] = convertFunctionToString(newObj[key], null);
223+
} else if (exclude.includes(key) !== true) {
224+
console.log('there should be no objects here', key, typeof newObj[key], newObj[key]);
225+
newPropData[key] = newObj[key];
224226
}
225227
}
226228
// console.log(newPropData);
@@ -233,8 +235,6 @@ function createTree(
233235
tree: Tree = new Tree('root', 'root'),
234236
fromSibling = false
235237
) {
236-
237-
console.log('CurrentFiber: ', currentFiber);
238238
// Base case: child or sibling pointed to null
239239
if (!currentFiber) return null;
240240
if (!tree) return tree;
@@ -255,18 +255,20 @@ function createTree(
255255
treeBaseDuration,
256256
} = currentFiber;
257257
// new feature adds props/state into the component
258+
// console.log('CurrentFiber & tag: ', tag, currentFiber);
258259

259260
if (tag === 5) {
260261
try {
261262
// console.log('this is the tree', tree);
262263

263264
if (memoizedProps.children[0]._owner.memoizedProps !== undefined) {
264265
const propsData = memoizedProps.children[0]._owner.memoizedProps;
265-
const newPropData = convertFunctionToString(propsData);
266+
const newPropData = convertFunctionToString(propsData, tree.componentData.props ? tree.componentData.props : null);
266267
tree.componentData = {
267268
...tree.componentData,
268269
props: newPropData
269270
};
271+
console.log('this is the new tree with errthang', tree.componentData);
270272
}
271273
// console.log('CHECKING THE TREE FOR THE DATA', tree);
272274
// console.log('looking for the owner', memoizedProps.children);
@@ -277,6 +279,7 @@ function createTree(
277279
// console.log('this is the error', error);
278280
}
279281
}
282+
console.log('show me the tree', tree);
280283
// Checks Recoil Atom and Selector Relationships
281284
if (
282285
currentFiber.memoizedState
@@ -333,8 +336,14 @@ function createTree(
333336
actualStartTime?: number;
334337
selfBaseDuration?: number;
335338
treeBaseDuration?: number;
339+
props?: any,
336340
} = {};
337341
let componentFound = false;
342+
if (memoizedProps) {
343+
// console.log('memoized props with the tag name', tag, memoizedProps, convertFunctionToString(memoizedProps, null));
344+
// console.log('looking at memoizedProps ', memoizedProps);
345+
componentData.props = convertFunctionToString(memoizedProps, null);
346+
}
338347

339348
// Check if node is a stateful class component
340349
if (stateNode && stateNode.state && (tag === 0 || tag === 1 || tag === 2)) {
@@ -493,7 +502,6 @@ function createTree(
493502
// console.log('no next effect');
494503
// }
495504
// console.log('we are in addsibling and this is the rtid and element name', rtid, elementType.name, 'this is the current fiber', currentFiber);
496-
console.log('looking at this circuclar componnent table in sibling', circularComponentTable);
497505
newNode = tree.addSibling(
498506
newState,
499507
elementType ? elementType.name : 'nameless',
@@ -509,7 +517,6 @@ function createTree(
509517
// console.log('no next effect');
510518
// }
511519
// console.log('we are in addchild and this is the rtid and element name', rtid, elementType.name, 'this is the current fiber', currentFiber);
512-
console.log('looking at this circuclar componnent table in child', circularComponentTable);
513520
newNode = tree.addChild(
514521
newState,
515522
elementType ? elementType.name : 'nameless',
@@ -519,7 +526,6 @@ function createTree(
519526
);
520527
}
521528
} else {
522-
console.log('why do we go here will the duplicate come here', tree);
523529
newNode = tree;
524530
}
525531

@@ -562,8 +568,8 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
562568
console.log('THIS IS THE FIBER ROOOT', fiberRoot);
563569
const throttledUpdateSnapshot = throttle(
564570
() => {
565-
console.log('how many times in line 497');
566-
console.log('THIS IS SNAP AND MODEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE', snap, mode);
571+
// console.log('how many times in line 497');
572+
// console.log('THIS IS SNAP AND MODEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE', snap, mode);
567573
updateSnapShotTree(snap, mode);
568574
},
569575
70

‎src/backend/puppeteerServer.js

100755100644
File mode changed.

‎src/backend/tree.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@ class Tree {
7878
this.parent = null; // ref to parent so we can add siblings
7979
this.rtid = rtid;
8080
this.recoilDomNode = recoilDomNode;
81-
console.log('there should be a friggin rtid number here', rtid, 'this is what we are creating right now', this, 'location of where it came from', string);
8281
}
8382

8483
// Returns a unique name ready to be used
@@ -103,7 +102,6 @@ class Tree {
103102

104103
addChild(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode: any): Tree {
105104
const uniqueName = this.checkForDuplicates(name);
106-
console.log('ChildName:', uniqueName);
107105
const newChild: Tree = new Tree(state, uniqueName, componentData, rtid, recoilDomNode);
108106
newChild.parent = this;
109107
this.children.push(newChild);
@@ -113,7 +111,6 @@ class Tree {
113111

114112
addSibling(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode: any): Tree {
115113
const uniqueName = this.checkForDuplicates(name);
116-
console.log('SiblingName:', uniqueName);
117114
const newSibling: Tree = new Tree(state, uniqueName, componentData, rtid, recoilDomNode);
118115
newSibling.parent = this.parent;
119116
this.parent.children.push(newSibling);

‎src/backend/types/backendTypes.ts

100755100644
File mode changed.

0 commit comments

Comments
 (0)